carbon-custom-elements/es/components/content-switcher/content-switcher-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/content-switcher/content-switcher-item.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAGH,OAAO,EAAiC,UAAU,EAAE,MAAM,aAAa,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAQxE;;;GAGG;AACH,cACM,qBAAsB,SAAQ,0BAAsB;IACxD;;OAEG;IAEH,QAAQ,UAAS;IAEjB;;;OAGG;IAEH,WAAW,UAAS;IAEpB;;;OAGG;IAEH,QAAQ,UAAS;IAEjB;;OAEG;IAEH,MAAM,EAAG,MAAM,CAAC;IAEhB;;OAEG;IAEH,KAAK,SAAM;IAEX,gBAAgB;IAIhB,YAAY,CAAC,iBAAiB,KAAA;IAe9B,MAAM;IAqBN,MAAM,CAAC,MAAM,MAAU;CACxB;AAED,eAAe,qBAAqB,CAAC","file":"content-switcher-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 { classMap } from 'lit-html/directives/class-map';\nimport { html, property, customElement, LitElement } from 'lit-element';\nimport settings from 'carbon-components/es/globals/js/settings';\nimport ifNonNull from '../../globals/directives/if-non-null';\nimport FocusMixin from '../../globals/mixins/focus';\nimport styles from './content-switcher.scss';\n\nconst { prefix } = settings;\n\n/**\n * Content switcher button.\n * @element bx-content-switcher-item\n */\n@customElement(`${prefix}-content-switcher-item`)\nclass BXContentSwitcherItem extends FocusMixin(LitElement) {\n  /**\n   * `true` if this content switcher item should be disabled.\n   */\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  /**\n   * `true` to hide the divider at the left.\n   * @private\n   */\n  @property({ type: Boolean, reflect: true, attribute: 'hide-divider' })\n  hideDivider = false;\n\n  /**\n   * `true` if the content switcher button should be selected.\n   * @private\n   */\n  @property({ type: Boolean, reflect: true })\n  selected = false;\n\n  /**\n   * The element ID of target panel.\n   */\n  @property()\n  target!: string;\n\n  /**\n   * The `value` attribute that is set to the parent `<bx-content-switcher>` when this content switcher item is selected.\n   */\n  @property()\n  value = '';\n\n  createRenderRoot() {\n    return this.attachShadow({ mode: 'open', delegatesFocus: true });\n  }\n\n  shouldUpdate(changedProperties) {\n    if (changedProperties.has('selected') || changedProperties.has('target')) {\n      const { selected, target } = this;\n      if (target) {\n        const doc = this.getRootNode() as HTMLDocument;\n        // `doc` can be an element if such element is orphaned\n        const targetNode = doc.getElementById && doc.getElementById(target);\n        if (targetNode) {\n          targetNode.toggleAttribute('hidden', !selected);\n        }\n      }\n    }\n    return true;\n  }\n\n  render() {\n    const { disabled, selected, target } = this;\n    const className = classMap({\n      [`${prefix}--content-switcher-btn`]: true,\n      [`${prefix}--content-switcher--selected`]: selected,\n    });\n    return html`\n      <button\n        type=\"button\"\n        role=\"tab\"\n        class=\"${className}\"\n        ?disabled=\"${disabled}\"\n        tabindex=\"${selected ? '0' : '-1'}\"\n        aria-controls=\"${ifNonNull(target)}\"\n        aria-selected=\"${Boolean(selected)}\"\n      >\n        <span class=\"${prefix}--content-switcher__label\"><slot></slot></span>\n      </button>\n    `;\n  }\n\n  static styles = styles;\n}\n\nexport default BXContentSwitcherItem;\n"]}