carbon-custom-elements/es/components/ui-shell/side-nav-menu.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-menu.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAGH,OAAO,EAAwC,UAAU,EAAE,MAAM,aAAa,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAQ/E;;;;GAIG;AACH,cACM,aAAc,SAAQ,kBAAsB;IAChD;;OAEG;IACH,OAAO,CAAC,QAAQ,CAAS;IAEzB;;OAEG;IAEH,OAAO,CAAC,uBAAuB,CAAkB;IAEjD;;;OAGG;IACH,OAAO,CAAC,0BAA0B;IAgBlC;;OAEG;IACH,OAAO,CAAC,mBAAmB;IAI3B;;OAEG;IACH,OAAO,CAAC,iBAAiB;IASzB;;OAEG;IACH,OAAO,CAAC,0BAA0B;IAUlC;;OAEG;IAEH,MAAM,UAAS;IAEf;;OAEG;IAEH,QAAQ,UAAS;IAEjB;;OAEG;IAEH,cAAc,UAAS;IAEvB;;OAEG;IAEH,KAAK,SAAM;IAEX,gBAAgB;IAIhB,iBAAiB;IAOjB,MAAM;IA+BN;;OAEG;IACH,MAAM,CAAC,iBAAiB,SAAqB;IAE7C;;OAEG;IACH,MAAM,KAAK,YAAY,WAEtB;IAED;;;OAGG;IACH,MAAM,KAAK,iBAAiB,WAE3B;IAED;;OAEG;IACH,MAAM,KAAK,WAAW,WAErB;IAED,MAAM,CAAC,MAAM,MAAU;CACxB;AAED,eAAe,aAAa,CAAC","file":"side-nav-menu.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 settings from 'carbon-components/es/globals/js/settings';\nimport { html, property, query, customElement, LitElement } from 'lit-element';\nimport ChevronDown20 from '@carbon/icons/lib/chevron--down/20';\nimport { forEach } from '../../globals/internal/collection-helpers';\nimport FocusMixin from '../../globals/mixins/focus';\nimport styles from './side-nav.scss';\n\nconst { prefix } = settings;\n\n/**\n * Side nav menu.\n * @element bx-side-nav-menu\n * @slot title-icon - The icon.\n */\n@customElement(`${prefix}-side-nav-menu`)\nclass BXSideNavMenu extends FocusMixin(LitElement) {\n  /**\n   * `true` if this menu has an icon.\n   */\n  private _hasIcon = false;\n\n  /**\n   * The container for the title icon.\n   */\n  @query('#title-icon-container')\n  private _titleIconContainerNode!: HTMLDivElement;\n\n  /**\n   * Handles user-initiated toggle request of this side nav menu.\n   * @param expanded The new expanded state.\n   */\n  private _handleUserInitiatedToggle(expanded = !this.expanded) {\n    const { eventBeforeToggle, eventToggle } = this.constructor as typeof BXSideNavMenu;\n    const init = {\n      bubbles: true,\n      cancelable: true,\n      composed: true,\n      detail: {\n        expanded,\n      },\n    };\n    if (this.dispatchEvent(new CustomEvent(eventBeforeToggle, init))) {\n      this.expanded = expanded;\n      this.dispatchEvent(new CustomEvent(eventToggle, init));\n    }\n  }\n\n  /**\n   * Handler for the `click` event on the expando button.\n   */\n  private _handleClickExpando() {\n    this._handleUserInitiatedToggle();\n  }\n\n  /**\n   * Handles `slotchange` event on the non-named `<slot>`.\n   */\n  private _handleSlotChange({ target }) {\n    const { _hasIcon: hasIcon } = this;\n    forEach(target.assignedNodes(), item => {\n      if (item.nodeType === Node.ELEMENT_NODE) {\n        item.toggleAttribute((this.constructor as typeof BXSideNavMenu).attribItemHasIcon, hasIcon);\n      }\n    });\n  }\n\n  /**\n   * Handles `slotchange` event on the `<slot>` for the title icon.\n   */\n  private _handleSlotChangeTitleIcon({ target }) {\n    const constructor = this.constructor as typeof BXSideNavMenu;\n    const hasIcon = target.assignedNodes().length > 0;\n    this._hasIcon = hasIcon;\n    this._titleIconContainerNode?.toggleAttribute('hidden', !hasIcon);\n    forEach(this.querySelectorAll(constructor.selectorItem), item => {\n      item.toggleAttribute(constructor.attribItemHasIcon, hasIcon);\n    });\n  }\n\n  /**\n   * `true` if the menu has active menu item.\n   */\n  @property({ type: Boolean, reflect: true })\n  active = false;\n\n  /**\n   * `true` if the menu should be open.\n   */\n  @property({ type: Boolean, reflect: true })\n  expanded = false;\n\n  /**\n   * `true` if the menu should be forced collapsed upon side nav's expanded state.\n   */\n  @property({ type: Boolean, reflect: true, attribute: 'force-collapsed' })\n  forceCollapsed = false;\n\n  /**\n   * The title text.\n   */\n  @property()\n  title = '';\n\n  createRenderRoot() {\n    return this.attachShadow({ mode: 'open', delegatesFocus: true });\n  }\n\n  connectedCallback() {\n    if (!this.hasAttribute('role')) {\n      this.setAttribute('role', 'listitem');\n    }\n    super.connectedCallback();\n  }\n\n  render() {\n    const {\n      expanded,\n      forceCollapsed,\n      title,\n      _handleClickExpando: handleClickExpando,\n      _handleSlotChange: handleSlotChange,\n      _handleSlotChangeTitleIcon: handleSlotChangeTitleIcon,\n    } = this;\n    return html`\n      <button\n        type=\"button\"\n        aria-haspopup=\"true\"\n        aria-expanded=\"${String(Boolean(expanded && !forceCollapsed))}\"\n        class=\"${prefix}--side-nav__submenu\"\n        @click=${handleClickExpando}\n      >\n        <div id=\"title-icon-container\" hidden class=\"${prefix}--side-nav__icon\">\n          <slot name=\"title-icon\" @slotchange=${handleSlotChangeTitleIcon}></slot>\n        </div>\n        <span class=\"${prefix}--side-nav__submenu-title\">${title}</span>\n        <div class=\"${prefix}--side-nav__icon ${prefix}--side-nav__icon--small ${prefix}--side-nav__submenu-chevron\">\n          ${ChevronDown20()}\n        </div>\n      </button>\n      <ul class=\"${prefix}--side-nav__menu\" role=\"menu\">\n        <slot @slotchange=${handleSlotChange}></slot>\n      </ul>\n    `;\n  }\n\n  /**\n   * The attribute name of the menu items, that is set if this menu has an icon.\n   */\n  static attribItemHasIcon = 'parent-has-icon';\n\n  /**\n   * A selector that will return the menu items.\n   */\n  static get selectorItem() {\n    return `${prefix}-side-nav-menu-item`;\n  }\n\n  /**\n   * The name of the custom event fired before this side nav menu is being toggled upon a user gesture.\n   * Cancellation of this event stops the user-initiated action of toggling this side nav menu.\n   */\n  static get eventBeforeToggle() {\n    return `${prefix}-side-nav-menu-beingtoggled`;\n  }\n\n  /**\n   * The name of the custom event fired after this side nav menu is toggled upon a user gesture.\n   */\n  static get eventToggle() {\n    return `${prefix}-side-nav-menu-toggled`;\n  }\n\n  static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader\n}\n\nexport default BXSideNavMenu;\n"]}