{"version":3,"sources":["components/ui-shell/side-nav.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,EAAiC,UAAU,EAAE,MAAM,aAAa,CAAC;AAMxE,OAAO,MAAM,MAAM,+BAA+B,CAAC;AACnD,OAAO,EAAE,sBAAsB,EAAE,mBAAmB,EAAE,MAAM,QAAQ,CAAC;AAKrE,OAAO,EAAE,sBAAsB,EAAE,mBAAmB,EAAE,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAIvD;;;GAGG;AACH,cACM,SAAU,SAAQ,cAA6B;IACnD;;OAEG;IACH,OAAO,CAAC,QAAQ,CAAS;IAEzB;;OAEG;IACH,OAAO,CAAC,YAAY,CAAuB;IAE3C;;OAEG;IACH,OAAO,CAAC,kBAAkB,CAAqB;IAE/C;;OAEG;IACH,OAAO,KAAK,2BAA2B,GAEtC;IAED;;OAEG;IACH,OAAO,CAAC,iBAAiB;IAMzB;;OAEG;IAGH,OAAO,CAAC,mBAAmB,CASzB;IAEF;;OAEG;IACH,OAAO,CAAC,sCAAsC;IAO9C;;OAEG;IAGH,OAAO,CAAC,gBAAgB;IAKxB;;OAEG;IAGH,OAAO,CAAC,eAAe;IAKvB;;OAEG;IAEH,YAAY,yBAAqC;IAEjD;;OAEG;IAEH,QAAQ,UAAS;IAEjB;;OAEG;IAEH,SAAS,sBAA+B;IAExC,iBAAiB;IAOjB,oBAAoB;IAKpB,YAAY,CAAC,iBAAiB,KAAA;IAa9B,OAAO,CAAC,iBAAiB,KAAA;IA6BzB,MAAM;IAIN;;OAEG;IACH,MAAM,KAAK,oBAAoB,WAE9B;IAED;;OAEG;IACH,MAAM,KAAK,gBAAgB,WAE1B;IAED;;OAEG;IACH,MAAM,KAAK,YAAY,WAEtB;IAED;;OAEG;IACH,MAAM,KAAK,iBAAiB,WAE3B;IAED,MAAM,CAAC,MAAM,MAAU;CACxB;AAED,eAAe,SAAS,CAAC","file":"side-nav.d.ts","sourcesContent":["/**\n * @license\n *\n * Copyright IBM Corp. 2019, 2021\n *\n * This source code is licensed under the Apache-2.0 license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { html, property, customElement, LitElement } from 'lit-element';\nimport settings from 'carbon-components/es/globals/js/settings';\nimport on from 'carbon-components/es/globals/js/misc/on';\nimport HostListenerMixin from '../../globals/mixins/host-listener';\nimport HostListener from '../../globals/decorators/host-listener';\nimport { forEach } from '../../globals/internal/collection-helpers';\nimport Handle from '../../globals/internal/handle';\nimport { SIDE_NAV_COLLAPSE_MODE, SIDE_NAV_USAGE_MODE } from './defs';\nimport BXHeaderMenuButton from './header-menu-button';\nimport BXSideNavMenu from './side-nav-menu';\nimport styles from './side-nav.scss';\n\nexport { SIDE_NAV_COLLAPSE_MODE, SIDE_NAV_USAGE_MODE };\n\nconst { prefix } = settings;\n\n/**\n * Side nav.\n * @element bx-side-nav\n */\n@customElement(`${prefix}-side-nav`)\nclass BXSideNav extends HostListenerMixin(LitElement) {\n  /**\n   * `true` if this side nav is hovered.\n   */\n  private _hovered = false;\n\n  /**\n   * The handle for `transitionend` event listener.\n   */\n  private _hTransition: Handle | null = null;\n\n  /**\n   * A promise that is resolved when the transition is complete.\n   */\n  private _transitionPromise = Promise.resolve();\n\n  /**\n   * A promise that is resolved when the transition upon proprety update is complete.\n   */\n  private get _updateAndTransitionPromise() {\n    return this.updateComplete.then(() => this._transitionPromise);\n  }\n\n  /**\n   * Cleans the handle for `transitionend` event listener.\n   */\n  private _cleanHTransition() {\n    if (this._hTransition) {\n      this._hTransition = this._hTransition.release();\n    }\n  }\n\n  /**\n   * Handles `${prefix}-header-menu-button-toggle` event on the document.\n   */\n  @HostListener('parentRoot:eventButtonToggle')\n  // @ts-ignore: The decorator refers to this method but TS thinks this method is not referred to\n  private _handleButtonToggle = async (event: CustomEvent) => {\n    this.expanded = event.detail.active;\n    if (this.expanded) {\n      await this._updateAndTransitionPromise;\n      // Checks if the side nav is not collapsed during the animation\n      if (this.expanded) {\n        (this.querySelector((this.constructor as typeof BXSideNav).selectorNavItems) as HTMLElement)?.focus();\n      }\n    }\n  };\n\n  /**\n   * Force child side nav menus collapsed upon the hover/expanded state of this side nav.\n   */\n  private _updatedSideNavMenuForceCollapsedState() {\n    const { expanded, _hovered: hovered } = this;\n    forEach(this.querySelectorAll((this.constructor as typeof BXSideNav).selectorMenu), item => {\n      (item as BXSideNavMenu).forceCollapsed = !expanded && !hovered;\n    });\n  }\n\n  /**\n   * Handles `mouseover` event handler.\n   */\n  @HostListener('mouseover')\n  // @ts-ignore: The decorator refers to this method but TS thinks this method is not referred to\n  private _handleMouseover() {\n    this._hovered = true;\n    this._updatedSideNavMenuForceCollapsedState();\n  }\n\n  /**\n   * Handles `mouseout` event handler.\n   */\n  @HostListener('mouseout')\n  // @ts-ignore: The decorator refers to this method but TS thinks this method is not referred to\n  private _handleMouseout() {\n    this._hovered = false;\n    this._updatedSideNavMenuForceCollapsedState();\n  }\n\n  /**\n   * Collapse mode of the side nav.\n   */\n  @property({ reflect: true, attribute: 'collapse-mode' })\n  collapseMode = SIDE_NAV_COLLAPSE_MODE.RESPONSIVE;\n\n  /**\n   * `true` to expand the side nav.\n   */\n  @property({ type: Boolean, reflect: true })\n  expanded = false;\n\n  /**\n   * Usage mode of the side nav.\n   */\n  @property({ reflect: true, attribute: 'usage-mode' })\n  usageMode = SIDE_NAV_USAGE_MODE.REGULAR;\n\n  connectedCallback() {\n    if (!this.hasAttribute('role')) {\n      this.setAttribute('role', 'navigation');\n    }\n    super.connectedCallback();\n  }\n\n  disconnectedCallback() {\n    this._cleanHTransition();\n    super.disconnectedCallback();\n  }\n\n  shouldUpdate(changedProperties) {\n    if (changedProperties.has('expanded')) {\n      this._transitionPromise = new Promise(resolve => {\n        this._cleanHTransition();\n        this._hTransition = on(this, 'transitionend', () => {\n          this._cleanHTransition();\n          resolve();\n        });\n      });\n    }\n    return true;\n  }\n\n  updated(changedProperties) {\n    if (changedProperties.has('collapseMode') || changedProperties.has('usageMode')) {\n      const { collapseMode, usageMode } = this;\n      if (\n        (collapseMode === SIDE_NAV_COLLAPSE_MODE.FIXED || collapseMode === SIDE_NAV_COLLAPSE_MODE.RAIL) &&\n        usageMode === SIDE_NAV_USAGE_MODE.HEADER_NAV\n      ) {\n        console.warn('Fixed/rail modes of side nav cannot be used with header nav mode.'); // eslint-disable-line no-console\n      }\n    }\n    const doc = this.getRootNode() as Document;\n    if (changedProperties.has('collapseMode')) {\n      forEach(doc.querySelectorAll((this.constructor as typeof BXSideNav).selectorButtonToggle), item => {\n        (item as BXHeaderMenuButton).collapseMode = this.collapseMode;\n      });\n    }\n    if (changedProperties.has('expanded')) {\n      this._updatedSideNavMenuForceCollapsedState();\n      forEach(doc.querySelectorAll((this.constructor as typeof BXSideNav).selectorButtonToggle), item => {\n        (item as BXHeaderMenuButton).active = this.expanded;\n      });\n    }\n    if (changedProperties.has('usageMode')) {\n      forEach(doc.querySelectorAll((this.constructor as typeof BXSideNav).selectorButtonToggle), item => {\n        (item as BXHeaderMenuButton).usageMode = this.usageMode;\n      });\n    }\n  }\n\n  render() {\n    return html`<slot></slot>`;\n  }\n\n  /**\n   * A selector that will return the toggle buttons.\n   */\n  static get selectorButtonToggle() {\n    return `${prefix}-header-menu-button`;\n  }\n\n  /**\n   * A selector that will return side nav focusable items.\n   */\n  static get selectorNavItems() {\n    return `${prefix}-side-nav-menu, ${prefix}-side-nav-menu-item, ${prefix}-side-nav-link`;\n  }\n\n  /**\n   * A selector that will return side nav menus.\n   */\n  static get selectorMenu() {\n    return `${prefix}-side-nav-menu`;\n  }\n\n  /**\n   * The name of the custom event fired after the header menu button in the document is toggled upon a user gesture.\n   */\n  static get eventButtonToggle() {\n    return `${prefix}-header-menu-button-toggled`;\n  }\n\n  static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader\n}\n\nexport default BXSideNav;\n"]}