carbon-custom-elements/es/components/overflow-menu/overflow-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/overflow-menu/overflow-menu.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAGH,OAAO,EAAiC,UAAU,EAAE,MAAM,aAAa,CAAC;AAExE,OAAO,EAAE,yBAAyB,EAAE,MAAM,4BAA4B,CAAC;AAKvE,OAAO,qBAAqB,MAAM,wCAAwC,CAAC;AAI3E,OAAO,EAAE,yBAAyB,IAAI,0BAA0B,EAAE,MAAM,4BAA4B,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAIrG;;;;GAIG;AACH,cACM,cAAe,SAAQ,mBAA0C,YAAW,qBAAqB;IACrG;;OAEG;IACH,OAAO,CAAC,SAAS,CAAmC;IAEpD;;OAEG;YACW,0BAA0B;IAUxC;;OAEG;IAGH,OAAO,CAAC,mBAAmB,CAEzB;IAEF;;OAEG;IAGH,OAAO,CAAC,qBAAqB,CAI3B;IAEF;;OAEG;IAEH,WAAW,4BAAqC;IAEhD;;OAEG;IAEH,QAAQ,UAAS;IAEjB;;OAEG;IAEH,IAAI,UAAS;IAEb;;OAEG;IACH,IAAI,eAAe,YAElB;IAED,iBAAiB;IAoBjB,OAAO,CAAC,iBAAiB,KAAA;IAsBzB,MAAM;IAUN,MAAM,CAAC,MAAM,MAAU;CACxB;AAED,eAAe,cAAc,CAAC","file":"overflow-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, customElement, LitElement } from 'lit-element';\nimport OverflowMenuVertical16 from '@carbon/icons/lib/overflow-menu--vertical/16';\nimport { FORM_ELEMENT_COLOR_SCHEME } from '../../globals/shared-enums';\nimport HostListener from '../../globals/decorators/host-listener';\nimport FocusMixin from '../../globals/mixins/focus';\nimport HostListenerMixin from '../../globals/mixins/host-listener';\nimport { find } from '../../globals/internal/collection-helpers';\nimport BXFloatingMenuTrigger from '../floating-menu/floating-menu-trigger';\nimport BXOverflowMenuBody from './overflow-menu-body';\nimport styles from './overflow-menu.scss';\n\nexport { FORM_ELEMENT_COLOR_SCHEME as OVERFLOW_MENU_COLOR_SCHEME } from '../../globals/shared-enums';\n\nconst { prefix } = settings;\n\n/**\n * Overflow menu.\n * @element bx-overflow-menu\n * @slot icon - The icon for the trigger button.\n */\n@customElement(`${prefix}-overflow-menu`)\nclass BXOverflowMenu extends HostListenerMixin(FocusMixin(LitElement)) implements BXFloatingMenuTrigger {\n  /**\n   * The menu body.\n   */\n  private _menuBody: BXOverflowMenuBody | null = null;\n\n  /**\n   * Handles user-initiated toggling of the menu.\n   */\n  private async _handleUserInitiatedToggle() {\n    this.open = !this.open;\n    const { open, updateComplete } = this;\n    if (open) {\n      await updateComplete;\n      const { _menuBody: menuBody } = this;\n      menuBody?.focus();\n    }\n  }\n\n  /**\n   * Handles `click` event on the trigger button.\n   */\n  @HostListener('click')\n  // @ts-ignore: The decorator refers to this method but TS thinks this method is not referred to\n  private _handleClickTrigger = async () => {\n    this._handleUserInitiatedToggle();\n  };\n\n  /**\n   * Handles `keydown` event on the trigger button.\n   */\n  @HostListener('keydown')\n  // @ts-ignore: The decorator refers to this method but TS thinks this method is not referred to\n  private _handleKeydownTrigger = async ({ key }) => {\n    if (key === ' ' || key === 'Enter') {\n      this._handleUserInitiatedToggle();\n    }\n  };\n\n  /**\n   * The color scheme.\n   */\n  @property({ attribute: 'color-scheme', reflect: true })\n  colorScheme = FORM_ELEMENT_COLOR_SCHEME.REGULAR;\n\n  /**\n   * `true` if this overflow menu should be disabled.\n   */\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  /**\n   * `true` if the dropdown should be open.\n   */\n  @property({ type: Boolean, reflect: true })\n  open = false;\n\n  /**\n   * @returns The position of the trigger button in the viewport.\n   */\n  get triggerPosition() {\n    return this.getBoundingClientRect();\n  }\n\n  connectedCallback() {\n    if (!this.hasAttribute('role')) {\n      this.setAttribute('role', 'button');\n    }\n    if (!this.hasAttribute('tabindex')) {\n      // TODO: Should we use a property?\n      this.setAttribute('tabindex', '0');\n    }\n    if (!this.hasAttribute('aria-haspopup')) {\n      this.setAttribute('aria-haspopup', 'true');\n    }\n    if (!this.hasAttribute('aria-expanded')) {\n      this.setAttribute('aria-expanded', 'false');\n    }\n    if (!this.shadowRoot) {\n      this.attachShadow({ mode: 'open' });\n    }\n    super.connectedCallback();\n  }\n\n  updated(changedProperties) {\n    if (changedProperties.has('open')) {\n      const { colorScheme, open } = this;\n      if (open && !this._menuBody) {\n        this._menuBody = find(this.childNodes, elem => (elem.constructor as typeof BXOverflowMenuBody).FLOATING_MENU);\n      }\n      const { _menuBody: menuBody } = this;\n      if (menuBody) {\n        menuBody.colorScheme = colorScheme;\n        menuBody.open = open;\n        this.setAttribute('aria-expanded', String(Boolean(open)));\n      }\n    }\n    if (changedProperties.has('colorScheme')) {\n      const { colorScheme } = this;\n      const { _menuBody: menuBody } = this;\n      if (menuBody) {\n        menuBody.colorScheme = colorScheme;\n      }\n    }\n  }\n\n  render() {\n    return html`\n      <slot name=\"icon\">\n        ${OverflowMenuVertical16({\n          class: `${prefix}--overflow-menu__icon`,\n        })}\n      </slot>\n    `;\n  }\n\n  static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader\n}\n\nexport default BXOverflowMenu;\n"]}