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.38 kB
Source Map (JSON)
{"version":3,"sources":["components/ui-shell/header-menu-button.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAIH,OAAO,EAAiC,UAAU,EAAE,MAAM,aAAa,CAAC;AAKxE,OAAO,EAAE,sBAAsB,EAAE,mBAAmB,EAAE,MAAM,YAAY,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAKzE;;;;GAIG;AACH,cACM,kBAAmB,SAAQ,uBAAsB;IACrD,OAAO,CAAC,YAAY;IAepB;;OAEG;IAEH,MAAM,UAAS;IAEf;;OAEG;IAEH,iBAAiB,SAA2B;IAE5C;;OAEG;IAEH,mBAAmB,SAA0B;IAE7C;;OAEG;IAEH,YAAY,yBAAqC;IAEjD;;OAEG;IAEH,QAAQ,UAAS;IAEjB;;OAEG;IAEH,SAAS,sBAA+B;IAExC,gBAAgB;IAIhB,MAAM;IAgBN;;OAEG;IACH,MAAM,KAAK,WAAW,WAErB;IAED,MAAM,CAAC,MAAM,MAAU;CACxB;AAED,eAAe,kBAAkB,CAAC","file":"header-menu-button.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 { classMap } from 'lit-html/directives/class-map';\nimport { html, property, customElement, LitElement } from 'lit-element';\nimport Close20 from '@carbon/icons/lib/close/20';\nimport Menu20 from '@carbon/icons/lib/menu/20';\nimport ifNonNull from '../../globals/directives/if-non-null';\nimport FocusMixin from '../../globals/mixins/focus';\nimport { SIDE_NAV_COLLAPSE_MODE, SIDE_NAV_USAGE_MODE } from './side-nav';\nimport styles from './header.scss';\n\nconst { prefix } = settings;\n\n/**\n * The trigger button for side nav in header nav.\n * @element bx-header-menu-button\n * @fires bx-header-menu-button-toggled - The custom event fired after this header menu button is toggled upon a user gesture.\n */\n@customElement(`${prefix}-header-menu-button`)\nclass BXHeaderMenuButton extends FocusMixin(LitElement) {\n private _handleClick() {\n const active = !this.active;\n this.active = active;\n this.dispatchEvent(\n new CustomEvent((this.constructor as typeof BXHeaderMenuButton).eventToggle, {\n bubbles: true,\n cancelable: true,\n composed: true,\n detail: {\n active,\n },\n })\n );\n }\n\n /**\n * `true` if the button should represent its active state.\n */\n @property({ type: Boolean, reflect: true })\n active = false;\n\n /**\n * The `aria-label` attribute for the button in its active state.\n */\n @property({ attribute: 'button-label-active' })\n buttonLabelActive = 'Close navigation menu';\n\n /**\n * The `aria-label` attribute for the button in its inactive state.\n */\n @property({ attribute: 'button-label-inactive' })\n buttonLabelInactive = 'Open navigation menu';\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` if the button should be disabled.\n */\n @property({ type: Boolean, reflect: true })\n disabled = 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 createRenderRoot() {\n return this.attachShadow({ mode: 'open', delegatesFocus: true });\n }\n\n render() {\n const { active, buttonLabelActive, buttonLabelInactive, disabled, _handleClick: handleClick } = this;\n const buttonLabel = active ? buttonLabelActive : buttonLabelInactive;\n const classes = classMap({\n [`${prefix}--header__action`]: true,\n [`${prefix}--header__menu-trigger`]: true,\n [`${prefix}--header__menu-toggle`]: true,\n [`${prefix}--header__action--active`]: active,\n });\n return html`\n <button class=\"${classes}\" ?disabled=${disabled} aria-label=\"${ifNonNull(buttonLabel)}\" @click=${handleClick}>\n ${active ? Close20() : Menu20()}\n </button>\n `;\n }\n\n /**\n * The name of the custom event fired after this header menu button is toggled upon a user gesture.\n */\n static get eventToggle() {\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 BXHeaderMenuButton;\n"]}