carbon-custom-elements
Version:
A Carbon Design System variant that's as easy to use as native HTML elements, with no framework tax, no framework silo.
1 lines • 4.68 kB
Source Map (JSON)
{"version":3,"sources":["components/ui-shell/header-menu.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAIH,OAAO,EAAwC,UAAU,EAAE,MAAM,aAAa,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAS/E;;;GAGG;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;IAIhB,iBAAiB;IAOjB,MAAM;IAqBN,MAAM,CAAC,MAAM,MAAU;CACxB;AAED,eAAe,YAAY,CAAC","file":"header-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 { ifDefined } from 'lit-html/directives/if-defined';\nimport { html, property, query, customElement, LitElement } from 'lit-element';\nimport ChevronDownGlyph from '@carbon/icons/lib/chevron--down';\nimport FocusMixin from '../../globals/mixins/focus';\nimport HostListenerMixin from '../../globals/mixins/host-listener';\nimport HostListener from '../../globals/decorators/host-listener';\nimport styles from './header.scss';\n\nconst { prefix } = settings;\n\n/**\n * Header menu.\n * @element bx-header-menu\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({ 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 { expanded, triggerContent, menuLabel, _handleClick: handleClick, _handleKeydownTrigger: handleKeydownTrigger } = this;\n return html`\n <a\n role=\"menuitem\"\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 >\n ${triggerContent}${ChevronDownGlyph({ class: `${prefix}--header__menu-arrow` })}\n </a>\n <ul role=\"menu\" class=\"${prefix}--header__menu\" aria-label=\"${ifDefined(menuLabel)}\">\n <slot></slot>\n </ul>\n `;\n }\n\n static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader\n}\n\nexport default BXHeaderMenu;\n"]}