carbon-custom-elements/es/components/accordion/accordion-item.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/accordion/accordion-item.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAIH,OAAO,EAAiC,UAAU,EAAE,MAAM,aAAa,CAAC;AAQxE;;GAEG;AACH,oBAAY,yBAAyB;IACnC;;OAEG;IACH,KAAK,OAAO;IAEZ;;OAEG;IACH,MAAM,OAAO;CACd;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAoBD;;;;;;;GAOG;AACH,cACM,eAAgB,SAAQ,oBAAsB;IAClD;;OAEG;IACH,OAAO,CAAC,kBAAkB,CAAC,CAA4B;IAEvD;;OAEG;IACH,OAAO,CAAC,eAAe,CAAuB;IAE9C;;;OAGG;IACH,OAAO,CAAC,0BAA0B;IAelC;;OAEG;IACH,OAAO,CAAC,mBAAmB;IAI3B;;OAEG;IACH,OAAO,CAAC,qBAAqB,CAI3B;IAEF;;OAEG;IAGH,OAAO,CAAC,eAAe,CAOpB;IAEH;;OAEG;IAEH,IAAI,UAAS;IAEb;;OAEG;IAEH,SAAS,SAAM;IAEf,iBAAiB;IAWjB,oBAAoB;IAMpB,MAAM;IAgCN;;;OAGG;IACH,MAAM,KAAK,mBAAmB;;;MAK7B;IAED;;;OAGG;IACH,MAAM,KAAK,iBAAiB;;;MAK3B;IAED;;;OAGG;IACH,MAAM,KAAK,iBAAiB,WAE3B;IAED;;OAEG;IACH,MAAM,KAAK,WAAW,WAErB;IAED,MAAM,CAAC,MAAM,MAAU;CACxB;AAED,eAAe,eAAe,CAAC","file":"accordion-item.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 ChevronRight16 from '@carbon/icons/lib/chevron--right/16';\nimport FocusMixin from '../../globals/mixins/focus';\nimport Handle from '../../globals/internal/handle';\nimport styles from './accordion.scss';\n\nconst { prefix } = settings;\n\n/**\n * Breakpoints for accordion items. It's different from one in `@carbon/layout` library.\n */\nexport enum ACCORDION_ITEM_BREAKPOINT {\n  /**\n   * Small breakpoint.\n   */\n  SMALL = 'sm',\n\n  /**\n   * Medium breakpoint.\n   */\n  MEDIUM = 'md',\n}\n\n/**\n * Observes resize of the given element with the given resize observer.\n * @param observer The resize observer.\n * @param elem The element to observe the resize.\n */\nconst observeResize = (observer: ResizeObserver, elem: Element) => {\n  if (!elem) {\n    return null;\n  }\n  observer.observe(elem);\n  return {\n    release() {\n      observer.unobserve(elem);\n      return null;\n    },\n  } as Handle;\n};\n\n/**\n * Accordion item.\n * @element bx-accordion-item\n * @fires bx-accordion-item-beingtoggled\n *   The custom event fired before this accordion item is being toggled upon a user gesture.\n *   Cancellation of this event stops the user-initiated action of toggling this accordion item.\n * @fires bx-accordion-item-toggled - The custom event fired after this accordion item is toggled upon a user gesture.\n */\n@customElement(`${prefix}-accordion-item`)\nclass BXAccordionItem extends FocusMixin(LitElement) {\n  /**\n   * The current breakpoint.\n   */\n  private _currentBreakpoint?: ACCORDION_ITEM_BREAKPOINT;\n\n  /**\n   * The handle for observing resize of the parent element of this element.\n   */\n  private _hObserveResize: Handle | null = null;\n\n  /**\n   * Handles user-initiated toggle request of this accordion item.\n   * @param open The new open state.\n   */\n  private _handleUserInitiatedToggle(open = !this.open) {\n    const init = {\n      bubbles: true,\n      cancelable: true,\n      composed: true,\n      detail: {\n        open,\n      },\n    };\n    if (this.dispatchEvent(new CustomEvent((this.constructor as typeof BXAccordionItem).eventBeforeToggle, init))) {\n      this.open = open;\n      this.dispatchEvent(new CustomEvent((this.constructor as typeof BXAccordionItem).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   * Handler for the `keydown` event on the expando button.\n   */\n  private _handleKeydownExpando = ({ key }: KeyboardEvent) => {\n    if (this.open && (key === 'Esc' || key === 'Escape')) {\n      this._handleUserInitiatedToggle(false);\n    }\n  };\n\n  /**\n   * The `ResizeObserver` instance for observing element resizes for re-positioning floating menu position.\n   */\n  // TODO: Wait for `.d.ts` update to support `ResizeObserver`\n  // @ts-ignore\n  private _resizeObserver = new ResizeObserver((records: ResizeObserverEntry[]) => {\n    const { width } = records[records.length - 1].contentRect;\n    const { _sizesBreakpoints: sizesBreakpoints } = this.constructor as typeof BXAccordionItem;\n    this._currentBreakpoint = Object.keys(sizesBreakpoints)\n      .sort((lhs, rhs) => sizesBreakpoints[rhs] - sizesBreakpoints[lhs])\n      .find(size => width >= sizesBreakpoints[size]) as ACCORDION_ITEM_BREAKPOINT;\n    this.requestUpdate();\n  });\n\n  /**\n   * `true` if the check box should be open.\n   */\n  @property({ type: Boolean, reflect: true })\n  open = false;\n\n  /**\n   * The title text.\n   */\n  @property({ attribute: 'title-text' })\n  titleText = '';\n\n  connectedCallback() {\n    if (!this.hasAttribute('role')) {\n      this.setAttribute('role', 'listitem');\n    }\n    super.connectedCallback();\n    if (this._hObserveResize) {\n      this._hObserveResize = this._hObserveResize.release();\n    }\n    this._hObserveResize = observeResize(this._resizeObserver, this);\n  }\n\n  disconnectedCallback() {\n    if (this._hObserveResize) {\n      this._hObserveResize = this._hObserveResize.release();\n    }\n  }\n\n  render() {\n    const {\n      titleText,\n      open,\n      _currentBreakpoint: currentBreakpoint,\n      _handleClickExpando: handleClickExpando,\n      _handleKeydownExpando: handleKeydownExpando,\n    } = this;\n    const { _classesBreakpoints: classesBreakpoints } = this.constructor as typeof BXAccordionItem;\n    const { [currentBreakpoint!]: classBreakpoint } = classesBreakpoints;\n    const contentClasses = classMap({\n      [classBreakpoint]: classBreakpoint,\n      [`${prefix}--accordion__content`]: true,\n    });\n    return html`\n      <button\n        type=\"button\"\n        class=\"${prefix}--accordion__heading\"\n        aria-controls=\"content\"\n        aria-expanded=\"${String(Boolean(open))}\"\n        @click=\"${handleClickExpando}\"\n        @keydown=\"${handleKeydownExpando}\"\n      >\n        ${ChevronRight16({\n          class: `${prefix}--accordion__arrow`,\n        })}\n        <div class=\"${prefix}--accordion__title\"><slot name=\"title\">${titleText}</slot></div>\n      </button>\n      <div id=\"content\" class=\"${contentClasses}\"><slot></slot></div>\n    `;\n  }\n\n  /**\n   * The CSS classes for breakpoints.\n   * @private\n   */\n  static get _classesBreakpoints() {\n    return {\n      [ACCORDION_ITEM_BREAKPOINT.SMALL]: `${prefix}-ce--accordion__content--${ACCORDION_ITEM_BREAKPOINT.SMALL}`,\n      [ACCORDION_ITEM_BREAKPOINT.MEDIUM]: `${prefix}-ce--accordion__content--${ACCORDION_ITEM_BREAKPOINT.MEDIUM}`,\n    };\n  }\n\n  /**\n   * The breakpoints.\n   * @private\n   */\n  static get _sizesBreakpoints() {\n    return {\n      [ACCORDION_ITEM_BREAKPOINT.SMALL]: 480,\n      [ACCORDION_ITEM_BREAKPOINT.MEDIUM]: 640,\n    };\n  }\n\n  /**\n   * The name of the custom event fired before this accordion item is being toggled upon a user gesture.\n   * Cancellation of this event stops the user-initiated action of toggling this accordion item.\n   */\n  static get eventBeforeToggle() {\n    return `${prefix}-accordion-item-beingtoggled`;\n  }\n\n  /**\n   * The name of the custom event fired after this accordion item is toggled upon a user gesture.\n   */\n  static get eventToggle() {\n    return `${prefix}-accordion-item-toggled`;\n  }\n\n  static styles = styles;\n}\n\nexport default BXAccordionItem;\n"]}