{"version":3,"sources":["components/ui-shell/header-menu.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAIH,OAAO,EAAwC,UAAU,EAAE,MAAM,aAAa,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAU/E;;;;;;GAMG;AACH,cACM,YAAa,SAAQ,iBAAyC;IAClE;;OAEG;IAEH,OAAO,CAAC,QAAQ,CAAe;IAE/B;;OAEG;IACH,OAAO,CAAC,YAAY;IAIpB;;OAEG;IACH,OAAO,CAAC,qBAAqB;IAM7B;;;OAGG;IACH,OAAO,CAAC,0BAA0B;IAOlC;;OAEG;IAGH,OAAO,CAAC,WAAW;IAMnB;;OAEG;IAEH,QAAQ,UAAS;IAEjB;;OAEG;IAEH,cAAc,SAAM;IAEpB;;OAEG;IAEH,SAAS,EAAG,MAAM,CAAC;IAEnB,gBAAgB;IAOhB,iBAAiB;IAOjB,OAAO,CAAC,iBAAiB,KAAA;IAUzB,MAAM;IAoBN;;OAEG;IACH,MAAM,KAAK,YAAY,WAEtB;IAED,MAAM,CAAC,MAAM,MAAU;CACxB;AAED,eAAe,YAAY,CAAC","file":"header-menu.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 settings from 'carbon-components/es/globals/js/settings';\nimport { ifDefined } from 'lit-html/directives/if-defined';\nimport { html, property, query, customElement, LitElement } from 'lit-element';\nimport ChevronDownGlyph from '@carbon/icons/lib/chevron--down/16';\nimport FocusMixin from '../../globals/mixins/focus';\nimport HostListenerMixin from '../../globals/mixins/host-listener';\nimport HostListener from '../../globals/decorators/host-listener';\nimport { forEach } from '../../globals/internal/collection-helpers';\nimport styles from './header.scss';\n\nconst { prefix } = settings;\n\n/**\n * Header menu.\n * @element bx-header-menu\n * @csspart trigger The trigger button.\n * @csspart trigger-icon The trigger button icon.\n * @csspart menu-body The menu body.\n */\n@customElement(`${prefix}-header-menu`)\nclass BXHeaderMenu extends HostListenerMixin(FocusMixin(LitElement)) {\n  /**\n   * The trigger button.\n   */\n  @query('a')\n  private _trigger!: HTMLElement;\n\n  /**\n   * Handles `click` event handler on this element.\n   */\n  private _handleClick() {\n    this._handleUserInitiatedToggle();\n  }\n\n  /**\n   * Handler for the `keydown` event on the trigger button.\n   */\n  private _handleKeydownTrigger({ key }: KeyboardEvent) {\n    if (key === 'Esc' || key === 'Escape') {\n      this._handleUserInitiatedToggle(false);\n    }\n  }\n\n  /**\n   * Handles user-initiated toggling the open state.\n   * @param [force] If specified, forces the open state to the given one.\n   */\n  private _handleUserInitiatedToggle(force: boolean = !this.expanded) {\n    this.expanded = force;\n    if (!force) {\n      this._trigger.focus();\n    }\n  }\n\n  /**\n   * Handles `blur` event handler on this element.\n   */\n  @HostListener('focusout')\n  // @ts-ignore: The decorator refers to this method but TS thinks this method is not referred to\n  private _handleBlur({ relatedTarget }: FocusEvent) {\n    if (!this.contains(relatedTarget as Node)) {\n      this.expanded = false;\n    }\n  }\n\n  /**\n   * `true` if the menu should be expanded.\n   */\n  @property({ type: Boolean, reflect: true })\n  expanded = false;\n\n  /**\n   * The content of the trigger button.\n   */\n  @property({ attribute: 'trigger-content' })\n  triggerContent = '';\n\n  /**\n   * The `aria-label` attribute for the menu UI.\n   */\n  @property({ attribute: 'menu-label' })\n  menuLabel!: string;\n\n  createRenderRoot() {\n    return this.attachShadow({\n      mode: 'open',\n      delegatesFocus: true,\n    });\n  }\n\n  connectedCallback() {\n    if (!this.hasAttribute('role')) {\n      this.setAttribute('role', 'listitem');\n    }\n    super.connectedCallback();\n  }\n\n  updated(changedProperties) {\n    if (changedProperties.has('expanded')) {\n      const { selectorItem } = this.constructor as typeof BXHeaderMenu;\n      const { expanded } = this;\n      forEach(this.querySelectorAll(selectorItem), elem => {\n        (elem as HTMLElement).tabIndex = expanded ? 0 : -1;\n      });\n    }\n  }\n\n  render() {\n    const { expanded, triggerContent, menuLabel, _handleClick: handleClick, _handleKeydownTrigger: handleKeydownTrigger } = this;\n    return html`\n      <a\n        part=\"trigger\"\n        tabindex=\"0\"\n        class=\"${prefix}--header__menu-item ${prefix}--header__menu-title\"\n        href=\"javascript:void 0\"\n        aria-haspopup=\"menu\"\n        aria-expanded=\"${String(Boolean(expanded))}\"\n        @click=${handleClick}\n        @keydown=${handleKeydownTrigger}>\n        ${triggerContent}${ChevronDownGlyph({ part: 'trigger-icon', class: `${prefix}--header__menu-arrow` })}\n      </a>\n      <ul part=\"menu-body\" class=\"${prefix}--header__menu\" aria-label=\"${ifDefined(menuLabel)}\">\n        <slot></slot>\n      </ul>\n    `;\n  }\n\n  /**\n   * A selector that will return the menu items.\n   */\n  static get selectorItem() {\n    return `${prefix}-header-menu-item`;\n  }\n\n  static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader\n}\n\nexport default BXHeaderMenu;\n"]}