carbon-custom-elements/es/components/ui-shell/side-nav.d.ts.map

A Carbon Design System variant that's as easy to use as native HTML elements, with no framework tax, no framework silo.

{"version":3,"sources":["components/ui-shell/side-nav.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,EAAiC,UAAU,EAAE,MAAM,aAAa,CAAC;AAGxE,OAAO,MAAM,MAAM,+BAA+B,CAAC;AAUnD;;GAEG;AACH,oBAAY,sBAAsB;IAChC;;;OAGG;IACH,KAAK,UAAU;IAEf;;;OAGG;IACH,IAAI,SAAS;IAEb;;;OAGG;IACH,UAAU,eAAe;CAC1B;AAED;;GAEG;AACH,oBAAY,mBAAmB;IAC7B;;OAEG;IACH,OAAO,KAAK;IAEZ;;;;OAIG;IACH,UAAU,eAAe;CAC1B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAED;;;GAGG;AACH,cACM,SAAU,SAAQ,cAA6B;IACnD;;OAEG;IACH,OAAO,CAAC,mBAAmB,CAAuB;IAElD;;OAEG;IACH,OAAO,CAAC,QAAQ,CAAS;IAEzB;;OAEG;IACH,OAAO,CAAC,mBAAmB;IAI3B;;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;IAajB,oBAAoB;IAMpB,OAAO,CAAC,iBAAiB,KAAA;IA6BzB,MAAM;IAMN;;OAEG;IACH,MAAM,KAAK,oBAAoB,WAE9B;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, 2020\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 Handle from '../../globals/internal/handle';\nimport HostListenerMixin from '../../globals/mixins/host-listener';\nimport HostListener from '../../globals/decorators/host-listener';\nimport { forEach } from '../../globals/internal/collection-helpers';\nimport BXHeaderMenuButton from './header-menu-button';\nimport BXSideNavMenu from './side-nav-menu';\nimport styles from './side-nav.scss';\n\nconst { prefix } = settings;\n\n/**\n * Collapse modes of side nav.\n */\nexport enum SIDE_NAV_COLLAPSE_MODE {\n  /**\n   * Fixed mode.\n   * In this mode, side nav is non-collapsible.\n   */\n  FIXED = 'fixed',\n\n  /**\n   * Rail mode.\n   * In this mode, side nav can be collapsed to a narrower width (\"rail\" look) with a toggle button.\n   */\n  RAIL = 'rail',\n\n  /**\n   * Responsive mode.\n   * In this mode, side nav sticks in wider screen, and can be completely collapsed with a toggle button in narrower screen.\n   */\n  RESPONSIVE = 'responsive',\n}\n\n/**\n * The usage purpose of side nav.\n */\nexport enum SIDE_NAV_USAGE_MODE {\n  /**\n   * Regular usage.\n   */\n  REGULAR = '',\n\n  /**\n   * To represent header nav.\n   * In this mode, side nav is hidden when header nav is shown, and side nav is shown then header nav is hidden.\n   * This mode can be used only with `SIDE_NAV_COLLAPSE_MODE.REGULAR`.\n   */\n  HEADER_NAV = 'header-nav',\n}\n\n/**\n * Side nav.\n * @element bx-side-nav\n */\n@customElement(`${prefix}-side-nav`)\nclass BXSideNav extends HostListenerMixin(LitElement) {\n  /**\n   * The handle for the listener of `${prefix}-header-menu-button-toggled` event.\n   */\n  private _hAfterButtonToggle: Handle | null = null;\n\n  /**\n   * `true` if this side nav is hovered.\n   */\n  private _hovered = false;\n\n  /**\n   * Handles `${prefix}-header-menu-button-toggle` event on the document.\n   */\n  private _handleButtonToggle(event: CustomEvent) {\n    this.expanded = event.detail.active;\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    // Manually hooks the event listeners on the host element to make the event names configurable\n    this._hAfterButtonToggle = on(\n      this.getRootNode() as Document,\n      (this.constructor as typeof BXSideNav).eventButtonToggle,\n      this._handleButtonToggle.bind(this) as EventListener\n    );\n  }\n\n  disconnectedCallback() {\n    if (this._hAfterButtonToggle) {\n      this._hAfterButtonToggle = this._hAfterButtonToggle.release();\n    }\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`\n      <slot></slot>\n    `;\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 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"]}