/*!
 * (C) Gasco https://gasco-web-component.herokuapp.com/ - MIT License
 */
import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
import { d as chevronForwardOutline, e as chevronDownOutline, f as chevronBackOutline } from './index2.js';
import { c as createColorClasses } from './theme.js';
import { d as defineCustomElement$5 } from './gasco-backdrop2.js';
import { d as defineCustomElement$4 } from './gasco-item2.js';
import { d as defineCustomElement$3 } from './gasco-list2.js';
import { d as defineCustomElement$2 } from './icon.js';

const gascoSidebarCss = ".sc-gasco-sidebar-h{position:relative;height:calc(100vh - 83px);max-width:256px;width:100%;z-index:1;transition:400ms cubic-bezier(0.175, 0.885, 0.32, 1.1)}.sidebar-show.sc-gasco-sidebar-h{max-width:60px}.sidebar-with-user.sidebar-size-fixed.sc-gasco-sidebar-h{height:calc(100vh - 95px)}.sidebar-with-user.sidebar-size-fixed.sc-gasco-sidebar-h .sidebar-native.sc-gasco-sidebar{padding:15px 0px}.sidebar-size-cover.sc-gasco-sidebar-h{height:100vh !important}.sidebar-native.sc-gasco-sidebar{display:flex;flex-direction:column;align-items:flex-start;padding:42px 0px;width:100%;height:100%;background:#FFFFFF;box-shadow:0px 2px 4px rgba(171, 190, 209, 0.6);overflow-x:hidden;overflow-y:auto;transition:all 400ms}.sidebar-button.sc-gasco-sidebar{position:absolute;z-index:2;top:3rem;right:-1.1rem;width:40px;height:40px;background:#FFFFFF;box-shadow:0px 2px 4px rgba(171, 190, 209, 0.6);border-radius:37px;transition:300ms cubic-bezier(0.175, 0.885, 0.32, 1.275)}.sidebar-button.is-resize.sc-gasco-sidebar{transform:rotate(180deg);box-shadow:0px -2px 4px rgba(171, 190, 209, 0.6)}.sidebar-button.sc-gasco-sidebar ion-icon.sc-gasco-sidebar{color:#00A3E0;font-size:24px}.sidebar-user-button.sc-gasco-sidebar{position:relative;border:none;text-align:left;background:transparent;padding:0}.menu-user.sc-gasco-sidebar{position:absolute;right:-40px;top:4rem;z-index:100;box-shadow:0px 2px 4px rgba(171, 190, 209, 0.6)}.wrap-avatar.sc-gasco-sidebar{display:flex;align-items:center;position:relative;margin:0 1rem;cursor:pointer}.wrap-avatar.sc-gasco-sidebar::before{content:\"\";position:absolute;z-index:2;inset:0 0 0 0}.wrap-avatar.sc-gasco-sidebar img.sc-gasco-sidebar{width:45px;height:45px;margin-right:10px;border-radius:50px;clip-path:circle(50% at 50% 50%);object-fit:contain}.wrap-avatar.sc-gasco-sidebar figcaption.sc-gasco-sidebar h3.sc-gasco-sidebar,.wrap-avatar.sc-gasco-sidebar figcaption.sc-gasco-sidebar p.sc-gasco-sidebar{margin:0}.wrap-avatar.sc-gasco-sidebar figcaption.sc-gasco-sidebar h3.sc-gasco-sidebar{font-weight:400;font-size:14px;line-height:20px;color:#072531}.wrap-avatar.sc-gasco-sidebar figcaption.sc-gasco-sidebar p.sc-gasco-sidebar{font-weight:400;font-size:12px;line-height:16px;color:#4D4D4D}.sc-gasco-sidebar-s>[slot=user-nav]{display:none;align-items:center;gap:30px;margin:17px 1rem;font-weight:400;font-size:12px;line-height:16px;color:#072531}.sc-gasco-sidebar-s>[slot=user-nav] ul{display:flex;align-items:center;gap:30px;margin:0;padding:0;list-style:none}.sc-gasco-sidebar-s>[slot=user-nav] a,.sc-gasco-sidebar-s>[slot=user-nav] div{display:flex;align-items:center;gap:8px;color:inherit;text-decoration:none;margin:0}.sc-gasco-sidebar-s>[slot=user-nav] p{margin:0}.sc-gasco-sidebar-s>gasco-list{box-shadow:none}.sc-gasco-sidebar-s>gasco-list>gasco-list-header{padding-block:12px;flex-direction:column;align-items:flex-start}.sc-gasco-sidebar-s>gasco-list>gasco-list-header>gasco-label{text-transform:uppercase;font-weight:600;font-size:16px;line-height:20px;color:#00A3E0}.sc-gasco-sidebar-s>gasco-list>gasco-list-header>gasco-label~gasco-label{text-transform:lowercase;font-weight:400;font-size:12px;line-height:16px;color:#4D4D4D}@media only screen and (max-width: 680px){.sidebar-with-user.sidebar-size-fixed.sc-gasco-sidebar-h{height:calc(100vh - 85px)}}@media only screen and (max-width: 480px){.sc-gasco-sidebar-h{position:fixed;top:0;z-index:100;transform:translate(-570px);height:100vh !important}.sidebar-show.sc-gasco-sidebar-h{transform:translate(0);max-width:256px}.sc-gasco-sidebar-s>[slot=user-nav]{display:flex}}";

const GascoSidebar$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
  constructor() {
    super();
    this.__registerHost();
    this.isResize = false;
    this.isOpenMenu = false;
    this.isOpenNavbar = false;
    this.isResponsive = document.documentElement.clientWidth;
    /**
     * If 'true', the `gasco-sidebar` will be inicialized open, defaul is `false`.
     */
    this.isOpen = false;
    /**
     * If `cover`, the `gasco-sidebar` will expand to cover the full height of its container.
     * If `fixed`, the `gasco-sidebar` will have a fixed height.
     */
    this.size = 'fixed';
    /**
     * The color to use from your application's color palette.
     * Default options are: `"primary"`, `"secondary"`, `"success"`, `"warning"`, `"danger"`.
     */
    this.color = 'primary';
    // METHOD's
    this.handleHiddenSidebar = () => {
      if (this.isResponsive <= 480) {
        this.isResize = false;
        setTimeout(() => {
          this.isOpenNavbar = false;
          this.handleBackdrop();
        }, 120);
      }
      else {
        this.isResize = !this.isResize;
        this.isOpenNavbar = !this.isOpenNavbar;
      }
    };
  }
  // EVENT's
  handleResize() {
    this.isResponsive = document.documentElement.clientWidth;
  }
  handleShowUser(e) {
    this.user = e.detail.user;
    this.usernav = e.detail.userNav;
  }
  handleBackdrop() {
    this.isResize = false;
    setTimeout(() => {
      this.isOpenNavbar = false;
      document.body.childNodes.forEach((node) => {
        if (node.nodeName === 'GASCO-BACKDROP') {
          node.remove();
        }
      });
    }, 120);
  }
  handleSidebarShow(e) {
    this.isOpenNavbar = e.detail;
    this.isResize = true;
    const backdropEl = document.createElement('gasco-backdrop');
    backdropEl.visible = true;
    document.body.appendChild(backdropEl);
  }
  handleGascoChange(e) {
    const item = e.target;
    if (item.tagName === "GASCO-ITEM") {
      if (item.style.height === 'auto') {
        item.style.height = '48px';
        item.children.item(2).replaceWith(this.createNewIcon(chevronForwardOutline, 'end'));
      }
      else {
        item.style.height = 'auto';
        item.children.item(2).replaceWith(this.createNewIcon(chevronDownOutline, 'end'));
      }
    }
    e.stopPropagation();
  }
  // Item  Watch 
  handleIsResize(current) {
    const subItem = document.querySelectorAll('gasco-list-header');
    const item = document.querySelectorAll('gasco-item');
    if (current) {
      item === null || item === void 0 ? void 0 : item.forEach(node => {
        if (!node.href) {
          node.style.height = '48px';
          node.children.item(2).replaceWith(this.createNewIcon(chevronForwardOutline, 'end'));
        }
      });
      if (this.isResponsive >= 480) {
        subItem === null || subItem === void 0 ? void 0 : subItem.forEach((el, index) => {
          el.style.transition = '300ms';
          el.style.opacity = '0';
          el.style.paddingBottom = '0';
          el.style.transform = 'translate(-100px) scale(0)';
          if (index > 0) {
            setTimeout(() => el.style.display = 'none', 300);
          }
        });
      }
    }
    else {
      subItem === null || subItem === void 0 ? void 0 : subItem.forEach(el => {
        el.style.display = 'flex';
        el.style.opacity = '1';
        el.style.paddingBottom = '12px';
        el.style.transform = 'translate(0px) scale(1)';
      });
    }
  }
  createNewIcon(icon, slot) {
    const iconEl = document.createElement('ion-icon');
    iconEl.slot = slot;
    iconEl.lazy = false;
    iconEl.icon = icon;
    iconEl.classList.add('gasco-sidebar-toggle-icon');
    iconEl.setAttribute('aria-hidden', 'true');
    return iconEl;
  }
  componentWillLoad() {
    const subItem = document.querySelectorAll('gasco-item');
    subItem.forEach(node => {
      if (!node.href) {
        node.style.transition = 'height 300ms';
        node.style.willChange = 'height';
        node.style.height = '48px';
        node.appendChild(this.createNewIcon(chevronForwardOutline, 'end'));
      }
    });
  }
  render() {
    const { user, handleHiddenSidebar } = this;
    return (h(Host, { class: createColorClasses(this.color, {
        'gasco-activatable': true,
        [`sidebar-size-${this.size}`]: true,
        'sidebar-show': this.isOpenNavbar,
        'sidebar-with-user': user !== null,
      }) }, h("div", { class: "sidebar-native", part: "native" }, h("button", { class: `sidebar-button${this.isResize ? ' is-resize' : ''}`, onClick: handleHiddenSidebar }, h("ion-icon", { icon: chevronBackOutline })), this.isResponsive <= 480 && user !== null && (h("button", { class: "sidebar-user-button", onFocus: () => this.isOpenMenu = true, onBlur: () => setTimeout(() => this.isOpenMenu = false, 120) }, h("figure", { class: "wrap-avatar" }, h("img", { src: user === null || user === void 0 ? void 0 : user.avatar, alt: user === null || user === void 0 ? void 0 : user.name }), h("figcaption", null, h("h3", null, user === null || user === void 0 ? void 0 : user.name), h("p", null, user === null || user === void 0 ? void 0 : user.role))))), h("slot", { name: "user-nav" }), this.isOpenMenu && (h("gasco-list", { class: "menu-user" }, this.usernav.map((nav) => (h("gasco-item", { href: nav.link }, nav.name))))), h("slot", null))));
  }
  static get watchers() { return {
    "isResize": ["handleIsResize"]
  }; }
  static get style() { return gascoSidebarCss; }
}, [6, "gasco-sidebar", {
    "isOpen": [4, "is-open"],
    "size": [1],
    "color": [513],
    "user": [32],
    "isResize": [32],
    "isOpenMenu": [32],
    "isOpenNavbar": [32],
    "isResponsive": [32]
  }, [[9, "resize", "handleResize"], [16, "gascoSetUserToSidebar", "handleShowUser"], [16, "gascoBackdropTap", "handleBackdrop"], [16, "gascoSidebarShow", "handleSidebarShow"], [17, "click", "handleGascoChange"]]]);
function defineCustomElement$1() {
  if (typeof customElements === "undefined") {
    return;
  }
  const components = ["gasco-sidebar", "gasco-backdrop", "gasco-item", "gasco-list", "ion-icon"];
  components.forEach(tagName => { switch (tagName) {
    case "gasco-sidebar":
      if (!customElements.get(tagName)) {
        customElements.define(tagName, GascoSidebar$1);
      }
      break;
    case "gasco-backdrop":
      if (!customElements.get(tagName)) {
        defineCustomElement$5();
      }
      break;
    case "gasco-item":
      if (!customElements.get(tagName)) {
        defineCustomElement$4();
      }
      break;
    case "gasco-list":
      if (!customElements.get(tagName)) {
        defineCustomElement$3();
      }
      break;
    case "ion-icon":
      if (!customElements.get(tagName)) {
        defineCustomElement$2();
      }
      break;
  } });
}

const GascoSidebar = GascoSidebar$1;
const defineCustomElement = defineCustomElement$1;

export { GascoSidebar, defineCustomElement };
