@carbon/ibmdotcom-web-components 1.18.0 → 1.18.1

package/es/components/tabs-extended/tab.js

@@ -50,7 +50,8 @@ let DDSTab = _decorate([customElement(`${ddsPrefix}-tab`)], function (_initializ
     }, {
       kind: "field",
       decorators: [property({
-        reflect: true
+        reflect: true,
+        type: Boolean
       })],
       key: "disabled",
 
@@ -61,7 +62,8 @@ let DDSTab = _decorate([customElement(`${ddsPrefix}-tab`)], function (_initializ
     }, {
       kind: "field",
       decorators: [property({
-        reflect: true
+        reflect: true,
+        type: Boolean
       })],
       key: "selected",
 

package/es/components/tabs-extended/tab.js.map

@@ -1 +1 @@
-{"version":3,"sources":["components/tabs-extended/tab.ts"],"names":["html","customElement","property","LitElement","state","ddsSettings","styles","StableSelectorMixin","stablePrefix","ddsPrefix","DDSTab","reflect","index","_index","selected"],"mappings":";;;;;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA,SAASA,IAAT,EAAeC,aAAf,EAA8BC,QAA9B,EAAwCC,UAAxC,EAAoDC,KAApD,QAAiE,aAAjE;AACA,OAAOC,WAAP,MAAwB,kFAAxB;AACA,OAAOC,MAAP,MAAmB,wBAAnB;AACA,OAAOC,mBAAP,MAAgC,yCAAhC;AAEA,MAAM;AAAEC,EAAAA,YAAY,EAAEC;AAAhB,IAA8BJ,WAApC;AAEA;AACA;AACA;AACA;AACA;;IAEMK,M,cADLT,aAAa,CAAE,GAAEQ,SAAU,MAAd,C;AAAd,QACMC,MADN,8BACqD;AAAA;AAAA;;AAAA;AAAA;;AAAA;;;OAA/CA,M;;;mBAIHR,QAAQ,CAAC;AAAES,QAAAA,OAAO,EAAE;AAAX,OAAD,C;;;;eACD,E;;;;;mBAKPT,QAAQ,CAAC;AAAES,QAAAA,OAAO,EAAE;AAAX,OAAD,C;;;;eACW,K;;;;;mBAKnBT,QAAQ,CAAC;AAAES,QAAAA,OAAO,EAAE;AAAX,OAAD,C;;;;eACW,K;;;;;mBAKnBP,KAAK,E;;;;eACmB,C;;;;;;;AAtBzB;AACF;AACA;;AAIE;AACF;AACA;;AAIE;AACF;AACA;;AAIE;AACF;AACA;;AAIE;AACF;AACA;AACE,wBAASQ,KAAT,EAAwB;AACtB,aAAKC,MAAL,GAAcD,KAAd;AACD;;;;aAED,kBAAS;AACP,eAAOZ,IAAP,cAAY;AAChB;AACA,wBAFI,CAEgC;AACpC;AACA,qBAJI,CAI6B;AACjC;AACA,oCANI,CAM4C;AAChD,uBAPI,CAOkC;AACtC,mBARI,CAQ8B;AAClC;AACA;AACA;AACA,KAZI,GAEoB,KAAKa,MAFzB,EAIiB,KAAKA,MAJtB,EAMgC,KAAKA,MANrC,EAOmB,CAAC,KAAKC,QAPzB,EAQe,CAAC,KAAKA,QARrB;AAaD;;;;;aAED,0BAA4B;AAC1B,eAAQ,GAAEL,SAAU,OAApB;AACD;;;;;;;eAEeH,M;;;;;GApDGC,mBAAmB,CAACJ,UAAD,C;AAuDxC;;;AACA,eAAeO,MAAf","sourcesContent":["/**\n * @license\n *\n * Copyright IBM Corp. 2020, 2022\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 { html, customElement, property, LitElement, state } from 'lit-element';\nimport ddsSettings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';\nimport styles from './tabs-extended.scss';\nimport StableSelectorMixin from '../../globals/mixins/stable-selector';\n\nconst { stablePrefix: ddsPrefix } = ddsSettings;\n\n/**\n * The copy content of content item horizontal.\n *\n * @element dds-tab\n */\n@customElement(`${ddsPrefix}-tab`)\nclass DDSTab extends StableSelectorMixin(LitElement) {\n  /**\n   * Defines label of the tab.\n   */\n  @property({ reflect: true })\n  label = '';\n\n  /**\n   * Defines the disabled state of the tab.\n   */\n  @property({ reflect: true })\n  disabled: Boolean = false;\n\n  /**\n   * Defines the selected state of the tab.\n   */\n  @property({ reflect: true })\n  selected: Boolean = false;\n\n  /**\n   * Defines the index of the tab relative to other tabs.\n   */\n  @state()\n  private _index: Number = 0;\n\n  /**\n   * Sets the index of the tab.\n   */\n  setIndex(index: Number) {\n    this._index = index;\n  }\n\n  render() {\n    return html`\n      <div\n        id=\"tab-panel-${this._index}-default\"\n        tabindex=\"0\"\n        class=\"tab-${this._index}-container\"\n        role=\"tabpanel\"\n        aria-labelledby=\"tab-link-${this._index}-default\"\n        aria-hidden=\"${!this.selected}\"\n        ?hidden=\"${!this.selected}\"\n      >\n        <slot></slot>\n      </div>\n    `;\n  }\n\n  static get stableSelector() {\n    return `${ddsPrefix}--tab`;\n  }\n\n  static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader\n}\n\n/* @__GENERATE_REACT_CUSTOM_ELEMENT_TYPE__ */\nexport default DDSTab;\n"],"file":"tab.js"}
+{"version":3,"sources":["components/tabs-extended/tab.ts"],"names":["html","customElement","property","LitElement","state","ddsSettings","styles","StableSelectorMixin","stablePrefix","ddsPrefix","DDSTab","reflect","type","Boolean","index","_index","selected"],"mappings":";;;;;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA,SAASA,IAAT,EAAeC,aAAf,EAA8BC,QAA9B,EAAwCC,UAAxC,EAAoDC,KAApD,QAAiE,aAAjE;AACA,OAAOC,WAAP,MAAwB,kFAAxB;AACA,OAAOC,MAAP,MAAmB,wBAAnB;AACA,OAAOC,mBAAP,MAAgC,yCAAhC;AAEA,MAAM;AAAEC,EAAAA,YAAY,EAAEC;AAAhB,IAA8BJ,WAApC;AAEA;AACA;AACA;AACA;AACA;;IAEMK,M,cADLT,aAAa,CAAE,GAAEQ,SAAU,MAAd,C;AAAd,QACMC,MADN,8BACqD;AAAA;AAAA;;AAAA;AAAA;;AAAA;;;OAA/CA,M;;;mBAIHR,QAAQ,CAAC;AAAES,QAAAA,OAAO,EAAE;AAAX,OAAD,C;;;;eACD,E;;;;;mBAKPT,QAAQ,CAAC;AAAES,QAAAA,OAAO,EAAE,IAAX;AAAiBC,QAAAA,IAAI,EAAEC;AAAvB,OAAD,C;;;;eACW,K;;;;;mBAKnBX,QAAQ,CAAC;AAAES,QAAAA,OAAO,EAAE,IAAX;AAAiBC,QAAAA,IAAI,EAAEC;AAAvB,OAAD,C;;;;eACW,K;;;;;mBAKnBT,KAAK,E;;;;eACmB,C;;;;;;;AAtBzB;AACF;AACA;;AAIE;AACF;AACA;;AAIE;AACF;AACA;;AAIE;AACF;AACA;;AAIE;AACF;AACA;AACE,wBAASU,KAAT,EAAwB;AACtB,aAAKC,MAAL,GAAcD,KAAd;AACD;;;;aAED,kBAAS;AACP,eAAOd,IAAP,cAAY;AAChB;AACA,wBAFI,CAEgC;AACpC;AACA,qBAJI,CAI6B;AACjC;AACA,oCANI,CAM4C;AAChD,uBAPI,CAOkC;AACtC,mBARI,CAQ8B;AAClC;AACA;AACA;AACA,KAZI,GAEoB,KAAKe,MAFzB,EAIiB,KAAKA,MAJtB,EAMgC,KAAKA,MANrC,EAOmB,CAAC,KAAKC,QAPzB,EAQe,CAAC,KAAKA,QARrB;AAaD;;;;;aAED,0BAA4B;AAC1B,eAAQ,GAAEP,SAAU,OAApB;AACD;;;;;;;eAEeH,M;;;;;GApDGC,mBAAmB,CAACJ,UAAD,C;AAuDxC;;;AACA,eAAeO,MAAf","sourcesContent":["/**\n * @license\n *\n * Copyright IBM Corp. 2020, 2022\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 { html, customElement, property, LitElement, state } from 'lit-element';\nimport ddsSettings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';\nimport styles from './tabs-extended.scss';\nimport StableSelectorMixin from '../../globals/mixins/stable-selector';\n\nconst { stablePrefix: ddsPrefix } = ddsSettings;\n\n/**\n * The copy content of content item horizontal.\n *\n * @element dds-tab\n */\n@customElement(`${ddsPrefix}-tab`)\nclass DDSTab extends StableSelectorMixin(LitElement) {\n  /**\n   * Defines label of the tab.\n   */\n  @property({ reflect: true })\n  label = '';\n\n  /**\n   * Defines the disabled state of the tab.\n   */\n  @property({ reflect: true, type: Boolean })\n  disabled: boolean = false;\n\n  /**\n   * Defines the selected state of the tab.\n   */\n  @property({ reflect: true, type: Boolean })\n  selected: boolean = false;\n\n  /**\n   * Defines the index of the tab relative to other tabs.\n   */\n  @state()\n  private _index: Number = 0;\n\n  /**\n   * Sets the index of the tab.\n   */\n  setIndex(index: Number) {\n    this._index = index;\n  }\n\n  render() {\n    return html`\n      <div\n        id=\"tab-panel-${this._index}-default\"\n        tabindex=\"0\"\n        class=\"tab-${this._index}-container\"\n        role=\"tabpanel\"\n        aria-labelledby=\"tab-link-${this._index}-default\"\n        aria-hidden=\"${!this.selected}\"\n        ?hidden=\"${!this.selected}\"\n      >\n        <slot></slot>\n      </div>\n    `;\n  }\n\n  static get stableSelector() {\n    return `${ddsPrefix}--tab`;\n  }\n\n  static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader\n}\n\n/* @__GENERATE_REACT_CUSTOM_ELEMENT_TYPE__ */\nexport default DDSTab;\n"],"file":"tab.js"}

package/es/components/tabs-extended/tabs-extended.d.ts.map

@@ -1 +1 @@
-{"version":3,"sources":["components/tabs-extended/tabs-extended.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAGH,OAAO,EAA8B,UAAU,EAAE,cAAc,EAAY,MAAM,aAAa,CAAC;AAQ/F,OAAO,EAAE,WAAW,EAAE,MAAM,QAAQ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAKrC;;;;GAIG;AACH,cACM,eAAgB,SAAQ,oBAA+B;IAC3D;;OAEG;IAEH,OAAO,CAAC,SAAS,CAAgB;IAEjC;;OAEG;IAEH,OAAO,CAAC,UAAU,CAAa;IAG/B,OAAO,CAAC,MAAM,CAAiB;IAE/B;;;;OAIG;IACH,SAAS,CAAC,iBAAiB,CAAC,KAAK,EAAE,KAAK;IAQxC,OAAO,CAAC,YAAY;IAKpB,OAAO,CAAC,cAAc;IAStB,OAAO,CAAC,qBAAqB;IAmC7B,OAAO,CAAC,WAAW;IAcnB,OAAO,CAAC,WAAW;IAcnB,OAAO,CAAC,gBAAgB;IAYxB,OAAO;IAmBP,SAAS,CAAC,gBAAgB,IAAI,cAAc,GAAG,MAAM,GAAG,IAAI;IAuC5D,SAAS,CAAC,WAAW,IAAI,cAAc,GAAG,MAAM,GAAG,IAAI;IAmCvD;;OAEG;IACH,SAAS,CAAC,oBAAoB;IAO9B;;OAEG;IAEH,WAAW,cAA0B;IAErC,MAAM;IAWN,MAAM,KAAK,cAAc,WAExB;IAED,MAAM,CAAC,MAAM,MAAU;CACxB;AAGD,eAAe,eAAe,CAAC","file":"tabs-extended.d.ts","sourcesContent":["/**\n * @license\n *\n * Copyright IBM Corp. 2020, 2022\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 { customElement, html, state, LitElement, TemplateResult, property } from 'lit-element';\nimport { unsafeHTML } from 'lit-html/directives/unsafe-html';\nimport { classMap } from 'lit-html/directives/class-map';\nimport ChevronRight20 from 'carbon-web-components/es/icons/chevron--right/20.js';\nimport ddsSettings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';\nimport StableSelectorMixin from '../../globals/mixins/stable-selector';\nimport DDSTab from './tab';\nimport styles from './tabs-extended.scss';\nimport { ORIENTATION } from './defs';\n\nconst { prefix } = settings;\nconst { stablePrefix: ddsPrefix } = ddsSettings;\n\n/**\n * A component to present content inside a tabbed layout.\n *\n * @element dds-tabs-extended\n */\n@customElement(`${ddsPrefix}-tabs-extended`)\nclass DDSTabsExtended extends StableSelectorMixin(LitElement) {\n  /**\n   * Child tab components.\n   */\n  @state()\n  private _tabItems: DDSTab[] = [];\n\n  /**\n   * Defines the active tab index.\n   */\n  @state()\n  private _activeTab: number = 0;\n\n  @state()\n  private _isLTR: boolean = true;\n\n  /**\n   * Handler for @slotChange, creates tabs from dds-tab components.\n   *\n   * @private\n   */\n  protected _handleSlotChange(event: Event) {\n    const slottedNodes = (event.target as HTMLSlotElement).assignedNodes({ flatten: true });\n    this._tabItems = slottedNodes.filter(node => node instanceof DDSTab) as DDSTab[];\n    this._tabItems.forEach((tab, index) => {\n      this._activeTab = (tab as DDSTab).selected ? index : this._activeTab;\n    });\n  }\n\n  private _handleClick(index, e) {\n    e.preventDefault();\n    this._setActiveItem(index);\n  }\n\n  private _setActiveItem(index: number) {\n    this._activeTab = index;\n    const newTabLink = this.shadowRoot?.querySelector(`\n    [role=\"tablist\"] li[role=\"tab\"]:nth-child(${index + 1}) .bx--tabs__nav-link`);\n    if (newTabLink instanceof HTMLElement) {\n      newTabLink.focus();\n    }\n  }\n\n  private _handleTabListKeyDown(event: KeyboardEvent) {\n    const { key } = event;\n    const { _activeTab: activeTab, _tabItems: tabItems, _isLTR: isLTR } = this;\n    switch (key) {\n      case 'ArrowRight':\n        if (isLTR) {\n          this._setActiveItem(this._getNextTab(activeTab));\n        } else {\n          this._setActiveItem(this._getPrevTab(activeTab));\n        }\n        break;\n      case 'ArrowLeft':\n        if (isLTR) {\n          this._setActiveItem(this._getPrevTab(activeTab));\n        } else {\n          this._setActiveItem(this._getNextTab(activeTab));\n        }\n        break;\n      case 'ArrowUp':\n        this._setActiveItem(this._getPrevTab(activeTab));\n        break;\n      case 'ArrowDown':\n        this._setActiveItem(this._getNextTab(activeTab));\n        break;\n      case 'Home':\n        this._setActiveItem(this._getNextTab(-1));\n        break;\n      case 'End':\n        this._setActiveItem(this._getPrevTab(tabItems.length));\n        break;\n      default:\n        break;\n    }\n  }\n\n  private _getNextTab(activeIndex) {\n    let tabItems: DDSTab[];\n\n    if (activeIndex > -1 && activeIndex < this._tabItems.length) {\n      tabItems = this._reorderTabsFrom(activeIndex);\n    } else {\n      tabItems = Array.from(this._tabItems);\n    }\n\n    const queuedItem = tabItems.find(tabItem => !tabItem.disabled);\n\n    return this._tabItems.findIndex(tabItem => tabItem === queuedItem);\n  }\n\n  private _getPrevTab(activeIndex) {\n    let tabItems: DDSTab[];\n\n    if (activeIndex > 0 && activeIndex < this._tabItems.length) {\n      tabItems = this._reorderTabsFrom(activeIndex - 1);\n    } else {\n      tabItems = Array.from(this._tabItems);\n    }\n\n    const queuedItem = tabItems.reverse().find(tabItem => !tabItem.disabled);\n\n    return this._tabItems.findIndex(tabItem => tabItem === queuedItem);\n  }\n\n  private _reorderTabsFrom(activeIndex) {\n    const tabItems = Array.from(this._tabItems);\n\n    tabItems.forEach((_tabItem, i) => {\n      if (i <= activeIndex) {\n        tabItems.push(tabItems.shift() as DDSTab);\n      }\n    });\n\n    return tabItems;\n  }\n\n  updated() {\n    this._isLTR = window.getComputedStyle(this).direction === 'ltr';\n\n    this._tabItems.map((tab, index) => {\n      (tab as DDSTab).selected = index === this._activeTab;\n      (tab as DDSTab).setIndex(index);\n      const navLink = this.shadowRoot!.querySelectorAll(`.${prefix}--tabs__nav-link`)[index];\n      const navText = navLink!.querySelector('div p');\n      if (navText!.scrollHeight > navText!.clientHeight) {\n        const label = (tab as DDSTab).getAttribute('label');\n        if (label) {\n          navLink!.setAttribute('aria-label', label);\n          navLink!.setAttribute('hasTooltip', label);\n        }\n      }\n      return tab;\n    });\n  }\n\n  protected _renderAccordion(): TemplateResult | string | void {\n    const { _tabItems: tabs } = this;\n    return html`\n      <ul class=\"${prefix}--accordion\">\n        ${tabs.map((tab, index) => {\n          const disabled = (tab as DDSTab).disabled && true;\n          const active = index === this._activeTab;\n          const label = (tab as DDSTab).getAttribute('label');\n          const classes = classMap({\n            'bx--accordion__item': true,\n            'bx--accordion__item--active': active,\n            'bx--accordion__item--disabled': disabled,\n          });\n          return html`\n            <li class=\"${classes}\">\n              <button\n                class=\"${prefix}--accordion__heading\"\n                aria-expanded=\"${active}\"\n                aria-controls=\"pane-${index}\"\n                @click=\"${e => this._handleClick(index, e)}\"\n                tabindex=\"${index + 1}\"\n                ?disabled=\"${disabled}\"\n              >\n                ${ChevronRight20({\n                  part: 'expando-icon',\n                  class: `${prefix}--accordion__arrow`,\n                })}\n                <div class=\"${prefix}--accordion__title\">${label}</div>\n              </button>\n              <div id=\"pane-${index}\" class=\"${prefix}--accordion__content\">\n                ${unsafeHTML((tab as DDSTab).innerHTML)}\n              </div>\n            </li>\n          `;\n        })}\n      </ul>\n    `;\n  }\n\n  protected _renderTabs(): TemplateResult | string | void {\n    const { _tabItems: tabs } = this;\n    return html`\n      <div class=\"${prefix}--tabs\">\n        <ul class=\"${prefix}--tabs__nav ${prefix}--tabs__nav--hidden\" role=\"tablist\" @keydown=\"${this._handleTabListKeyDown}\">\n          ${tabs.map((tab, index) => {\n            const disabled = (tab as DDSTab).disabled && true;\n            const active = index === this._activeTab;\n            const label = (tab as DDSTab).getAttribute('label');\n            const classes = classMap({\n              'bx--tabs__nav-item': true,\n              'bx--tabs__nav-item--selected': active,\n              'bx--tabs__nav-item--disabled': disabled,\n            });\n            return html`\n              <li class=\"${classes}\" data-target=\".tab-${index}-default\" role=\"tab\" ?disabled=\"${disabled}\">\n                <button\n                  tabindex=\"${active ? '0' : '-1'}\"\n                  id=\"tab-link-${index}-default\"\n                  class=\"${prefix}--tabs__nav-link\"\n                  type=\"button\"\n                  aria-controls=\"tab-panel-${index}-default\"\n                  aria-selected=\"${active}\"\n                  @click=\"${e => this._handleClick(index, e)}\"\n                >\n                  <div><p>${label}</p></div>\n                </button>\n              </li>\n            `;\n          })}\n        </ul>\n      </div>\n    `;\n  }\n\n  /**\n   * Returns a class-name based on the defined Orientation value\n   */\n  protected _getOrientationClass() {\n    return classMap({\n      [`${prefix}--tabs-extended`]: true,\n      [`${prefix}--tabs-extended--${this.orientation}`]: this.orientation,\n    });\n  }\n\n  /**\n   * Orientation (horizontal (default) | vertical)\n   */\n  @property({ attribute: 'orientation', reflect: true })\n  orientation = ORIENTATION.HORIZONTAL;\n\n  render() {\n    return html`\n      <div class=\"${this._getOrientationClass()}\">\n        ${this._renderAccordion()} ${this._renderTabs()}\n        <div class=\"${prefix}--tab-content\">\n          <slot @slotchange=\"${this._handleSlotChange}\"></slot>\n        </div>\n      </div>\n    `;\n  }\n\n  static get stableSelector() {\n    return `${ddsPrefix}--tabs-extended`;\n  }\n\n  static styles = styles;\n}\n\n/* @__GENERATE_REACT_CUSTOM_ELEMENT_TYPE__ */\nexport default DDSTabsExtended;\n"]}
+{"version":3,"sources":["components/tabs-extended/tabs-extended.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAGH,OAAO,EAA8B,UAAU,EAAE,cAAc,EAAY,MAAM,aAAa,CAAC;AAQ/F,OAAO,EAAE,WAAW,EAAE,MAAM,QAAQ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAKrC;;;;GAIG;AACH,cACM,eAAgB,SAAQ,oBAA+B;IAC3D;;OAEG;IAEH,OAAO,CAAC,SAAS,CAAgB;IAEjC;;OAEG;IAEH,OAAO,CAAC,UAAU,CAAa;IAG/B,OAAO,CAAC,MAAM,CAAiB;IAE/B;;;;OAIG;IACH,SAAS,CAAC,iBAAiB,CAAC,KAAK,EAAE,KAAK;IAQxC,OAAO,CAAC,YAAY;IAKpB,OAAO,CAAC,cAAc;IAStB,OAAO,CAAC,qBAAqB;IAmC7B,OAAO,CAAC,WAAW;IAcnB,OAAO,CAAC,WAAW;IAcnB,OAAO,CAAC,gBAAgB;IAYxB,OAAO;IAmBP,SAAS,CAAC,gBAAgB,IAAI,cAAc,GAAG,MAAM,GAAG,IAAI;IAuC5D,SAAS,CAAC,WAAW,IAAI,cAAc,GAAG,MAAM,GAAG,IAAI;IAmCvD;;OAEG;IACH,SAAS,CAAC,oBAAoB;IAO9B;;OAEG;IAEH,WAAW,cAA0B;IAErC,MAAM;IAWN,MAAM,KAAK,cAAc,WAExB;IAED,MAAM,CAAC,MAAM,MAAU;CACxB;AAGD,eAAe,eAAe,CAAC","file":"tabs-extended.d.ts","sourcesContent":["/**\n * @license\n *\n * Copyright IBM Corp. 2020, 2022\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 { customElement, html, state, LitElement, TemplateResult, property } from 'lit-element';\nimport { unsafeHTML } from 'lit-html/directives/unsafe-html';\nimport { classMap } from 'lit-html/directives/class-map';\nimport ChevronRight20 from 'carbon-web-components/es/icons/chevron--right/20.js';\nimport ddsSettings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';\nimport StableSelectorMixin from '../../globals/mixins/stable-selector';\nimport DDSTab from './tab';\nimport styles from './tabs-extended.scss';\nimport { ORIENTATION } from './defs';\n\nconst { prefix } = settings;\nconst { stablePrefix: ddsPrefix } = ddsSettings;\n\n/**\n * A component to present content inside a tabbed layout.\n *\n * @element dds-tabs-extended\n */\n@customElement(`${ddsPrefix}-tabs-extended`)\nclass DDSTabsExtended extends StableSelectorMixin(LitElement) {\n  /**\n   * Child tab components.\n   */\n  @state()\n  private _tabItems: DDSTab[] = [];\n\n  /**\n   * Defines the active tab index.\n   */\n  @state()\n  private _activeTab: number = 0;\n\n  @state()\n  private _isLTR: boolean = true;\n\n  /**\n   * Handler for @slotChange, creates tabs from dds-tab components.\n   *\n   * @private\n   */\n  protected _handleSlotChange(event: Event) {\n    const slottedNodes = (event.target as HTMLSlotElement).assignedNodes({ flatten: true });\n    this._tabItems = slottedNodes.filter(node => node instanceof DDSTab) as DDSTab[];\n    this._tabItems.forEach((tab, index) => {\n      this._activeTab = (tab as DDSTab).selected ? index : this._activeTab;\n    });\n  }\n\n  private _handleClick(index, e) {\n    e.preventDefault();\n    this._setActiveItem(index);\n  }\n\n  private _setActiveItem(index: number) {\n    this._activeTab = index;\n    const newTabLink = this.shadowRoot?.querySelector(`\n    [role=\"tablist\"] li[role=\"tab\"]:nth-child(${index + 1}) .bx--tabs__nav-link`);\n    if (newTabLink instanceof HTMLElement) {\n      newTabLink.focus();\n    }\n  }\n\n  private _handleTabListKeyDown(event: KeyboardEvent) {\n    const { key } = event;\n    const { _activeTab: activeTab, _tabItems: tabItems, _isLTR: isLTR } = this;\n    switch (key) {\n      case 'ArrowRight':\n        if (isLTR) {\n          this._setActiveItem(this._getNextTab(activeTab));\n        } else {\n          this._setActiveItem(this._getPrevTab(activeTab));\n        }\n        break;\n      case 'ArrowLeft':\n        if (isLTR) {\n          this._setActiveItem(this._getPrevTab(activeTab));\n        } else {\n          this._setActiveItem(this._getNextTab(activeTab));\n        }\n        break;\n      case 'ArrowUp':\n        this._setActiveItem(this._getPrevTab(activeTab));\n        break;\n      case 'ArrowDown':\n        this._setActiveItem(this._getNextTab(activeTab));\n        break;\n      case 'Home':\n        this._setActiveItem(this._getNextTab(-1));\n        break;\n      case 'End':\n        this._setActiveItem(this._getPrevTab(tabItems.length));\n        break;\n      default:\n        break;\n    }\n  }\n\n  private _getNextTab(activeIndex) {\n    let tabItems: DDSTab[];\n\n    if (activeIndex > -1 && activeIndex < this._tabItems.length) {\n      tabItems = this._reorderTabsFrom(activeIndex);\n    } else {\n      tabItems = Array.from(this._tabItems);\n    }\n\n    const queuedItem = tabItems.find(tabItem => !tabItem.disabled);\n\n    return this._tabItems.findIndex(tabItem => tabItem === queuedItem);\n  }\n\n  private _getPrevTab(activeIndex) {\n    let tabItems: DDSTab[];\n\n    if (activeIndex > 0 && activeIndex < this._tabItems.length) {\n      tabItems = this._reorderTabsFrom(activeIndex - 1);\n    } else {\n      tabItems = Array.from(this._tabItems);\n    }\n\n    const queuedItem = tabItems.reverse().find(tabItem => !tabItem.disabled);\n\n    return this._tabItems.findIndex(tabItem => tabItem === queuedItem);\n  }\n\n  private _reorderTabsFrom(activeIndex) {\n    const tabItems = Array.from(this._tabItems);\n\n    tabItems.forEach((_tabItem, i) => {\n      if (i <= activeIndex) {\n        tabItems.push(tabItems.shift() as DDSTab);\n      }\n    });\n\n    return tabItems;\n  }\n\n  updated() {\n    this._isLTR = window.getComputedStyle(this).direction === 'ltr';\n\n    this._tabItems.map((tab, index) => {\n      (tab as DDSTab).selected = index === this._activeTab;\n      (tab as DDSTab).setIndex(index);\n      const navLink = this.shadowRoot!.querySelectorAll(`.${prefix}--tabs__nav-link`)[index];\n      const navText = navLink!.querySelector('div p');\n      if (navText!.scrollHeight > navText!.clientHeight) {\n        const label = (tab as DDSTab).getAttribute('label');\n        if (label) {\n          navLink!.setAttribute('aria-label', label);\n          navLink!.setAttribute('hasTooltip', label);\n        }\n      }\n      return tab;\n    });\n  }\n\n  protected _renderAccordion(): TemplateResult | string | void {\n    const { _tabItems: tabs } = this;\n    return html`\n      <ul class=\"${prefix}--accordion\">\n        ${tabs.map((tab, index) => {\n          const { disabled } = tab as DDSTab;\n          const active = index === this._activeTab;\n          const label = (tab as DDSTab).getAttribute('label');\n          const classes = classMap({\n            'bx--accordion__item': true,\n            'bx--accordion__item--active': active,\n            'bx--accordion__item--disabled': disabled,\n          });\n          return html`\n            <li class=\"${classes}\">\n              <button\n                class=\"${prefix}--accordion__heading\"\n                aria-expanded=\"${active}\"\n                aria-controls=\"pane-${index}\"\n                @click=\"${e => this._handleClick(index, e)}\"\n                tabindex=\"${index + 1}\"\n                ?disabled=\"${disabled}\"\n              >\n                ${ChevronRight20({\n                  part: 'expando-icon',\n                  class: `${prefix}--accordion__arrow`,\n                })}\n                <div class=\"${prefix}--accordion__title\">${label}</div>\n              </button>\n              <div id=\"pane-${index}\" class=\"${prefix}--accordion__content\">\n                ${unsafeHTML((tab as DDSTab).innerHTML)}\n              </div>\n            </li>\n          `;\n        })}\n      </ul>\n    `;\n  }\n\n  protected _renderTabs(): TemplateResult | string | void {\n    const { _tabItems: tabs } = this;\n    return html`\n      <div class=\"${prefix}--tabs\">\n        <ul class=\"${prefix}--tabs__nav ${prefix}--tabs__nav--hidden\" role=\"tablist\" @keydown=\"${this._handleTabListKeyDown}\">\n          ${tabs.map((tab, index) => {\n            const { disabled } = tab as DDSTab;\n            const active = index === this._activeTab;\n            const label = (tab as DDSTab).getAttribute('label');\n            const classes = classMap({\n              'bx--tabs__nav-item': true,\n              'bx--tabs__nav-item--selected': active,\n              'bx--tabs__nav-item--disabled': disabled,\n            });\n            return html`\n              <li class=\"${classes}\" data-target=\".tab-${index}-default\" role=\"tab\" ?disabled=\"${disabled}\">\n                <button\n                  tabindex=\"${active ? '0' : '-1'}\"\n                  id=\"tab-link-${index}-default\"\n                  class=\"${prefix}--tabs__nav-link\"\n                  type=\"button\"\n                  aria-controls=\"tab-panel-${index}-default\"\n                  aria-selected=\"${active}\"\n                  @click=\"${e => this._handleClick(index, e)}\"\n                >\n                  <div><p>${label}</p></div>\n                </button>\n              </li>\n            `;\n          })}\n        </ul>\n      </div>\n    `;\n  }\n\n  /**\n   * Returns a class-name based on the defined Orientation value\n   */\n  protected _getOrientationClass() {\n    return classMap({\n      [`${prefix}--tabs-extended`]: true,\n      [`${prefix}--tabs-extended--${this.orientation}`]: this.orientation,\n    });\n  }\n\n  /**\n   * Orientation (horizontal (default) | vertical)\n   */\n  @property({ attribute: 'orientation', reflect: true })\n  orientation = ORIENTATION.HORIZONTAL;\n\n  render() {\n    return html`\n      <div class=\"${this._getOrientationClass()}\">\n        ${this._renderAccordion()} ${this._renderTabs()}\n        <div class=\"${prefix}--tab-content\">\n          <slot @slotchange=\"${this._handleSlotChange}\"></slot>\n        </div>\n      </div>\n    `;\n  }\n\n  static get stableSelector() {\n    return `${ddsPrefix}--tabs-extended`;\n  }\n\n  static styles = styles;\n}\n\n/* @__GENERATE_REACT_CUSTOM_ELEMENT_TYPE__ */\nexport default DDSTabsExtended;\n"]}

package/es/components/tabs-extended/tabs-extended.js

@@ -259,7 +259,9 @@ let DDSTabsExtended = _decorate([customElement(`${ddsPrefix}-tabs-extended`)], f
         ${0}
       </ul>
     `), prefix, tabs.map((tab, index) => {
-          const disabled = tab.disabled && true;
+          const {
+            disabled
+          } = tab;
           const active = index === this._activeTab;
           const label = tab.getAttribute('label');
           const classes = classMap({
@@ -304,7 +306,9 @@ let DDSTabsExtended = _decorate([customElement(`${ddsPrefix}-tabs-extended`)], f
         </ul>
       </div>
     `), prefix, prefix, prefix, this._handleTabListKeyDown, tabs.map((tab, index) => {
-          const disabled = tab.disabled && true;
+          const {
+            disabled
+          } = tab;
           const active = index === this._activeTab;
           const label = tab.getAttribute('label');
           const classes = classMap({

package/es/components/tabs-extended/tabs-extended.js.map

@@ -1 +1 @@
-{"version":3,"sources":["components/tabs-extended/tabs-extended.ts"],"names":["settings","customElement","html","state","LitElement","property","unsafeHTML","classMap","ChevronRight20","ddsSettings","StableSelectorMixin","DDSTab","styles","ORIENTATION","prefix","stablePrefix","ddsPrefix","DDSTabsExtended","event","slottedNodes","target","assignedNodes","flatten","_tabItems","filter","node","forEach","tab","index","_activeTab","selected","e","preventDefault","_setActiveItem","newTabLink","shadowRoot","querySelector","HTMLElement","focus","key","activeTab","tabItems","_isLTR","isLTR","_getNextTab","_getPrevTab","length","activeIndex","_reorderTabsFrom","Array","from","queuedItem","find","tabItem","disabled","findIndex","reverse","_tabItem","i","push","shift","window","getComputedStyle","direction","map","setIndex","navLink","querySelectorAll","navText","scrollHeight","clientHeight","label","getAttribute","setAttribute","tabs","active","classes","_handleClick","part","class","innerHTML","_handleTabListKeyDown","orientation","attribute","reflect","HORIZONTAL","_getOrientationClass","_renderAccordion","_renderTabs","_handleSlotChange"],"mappings":"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","sourcesContent":["/**\n * @license\n *\n * Copyright IBM Corp. 2020, 2022\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 { customElement, html, state, LitElement, TemplateResult, property } from 'lit-element';\nimport { unsafeHTML } from 'lit-html/directives/unsafe-html';\nimport { classMap } from 'lit-html/directives/class-map';\nimport ChevronRight20 from 'carbon-web-components/es/icons/chevron--right/20.js';\nimport ddsSettings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';\nimport StableSelectorMixin from '../../globals/mixins/stable-selector';\nimport DDSTab from './tab';\nimport styles from './tabs-extended.scss';\nimport { ORIENTATION } from './defs';\n\nconst { prefix } = settings;\nconst { stablePrefix: ddsPrefix } = ddsSettings;\n\n/**\n * A component to present content inside a tabbed layout.\n *\n * @element dds-tabs-extended\n */\n@customElement(`${ddsPrefix}-tabs-extended`)\nclass DDSTabsExtended extends StableSelectorMixin(LitElement) {\n  /**\n   * Child tab components.\n   */\n  @state()\n  private _tabItems: DDSTab[] = [];\n\n  /**\n   * Defines the active tab index.\n   */\n  @state()\n  private _activeTab: number = 0;\n\n  @state()\n  private _isLTR: boolean = true;\n\n  /**\n   * Handler for @slotChange, creates tabs from dds-tab components.\n   *\n   * @private\n   */\n  protected _handleSlotChange(event: Event) {\n    const slottedNodes = (event.target as HTMLSlotElement).assignedNodes({ flatten: true });\n    this._tabItems = slottedNodes.filter(node => node instanceof DDSTab) as DDSTab[];\n    this._tabItems.forEach((tab, index) => {\n      this._activeTab = (tab as DDSTab).selected ? index : this._activeTab;\n    });\n  }\n\n  private _handleClick(index, e) {\n    e.preventDefault();\n    this._setActiveItem(index);\n  }\n\n  private _setActiveItem(index: number) {\n    this._activeTab = index;\n    const newTabLink = this.shadowRoot?.querySelector(`\n    [role=\"tablist\"] li[role=\"tab\"]:nth-child(${index + 1}) .bx--tabs__nav-link`);\n    if (newTabLink instanceof HTMLElement) {\n      newTabLink.focus();\n    }\n  }\n\n  private _handleTabListKeyDown(event: KeyboardEvent) {\n    const { key } = event;\n    const { _activeTab: activeTab, _tabItems: tabItems, _isLTR: isLTR } = this;\n    switch (key) {\n      case 'ArrowRight':\n        if (isLTR) {\n          this._setActiveItem(this._getNextTab(activeTab));\n        } else {\n          this._setActiveItem(this._getPrevTab(activeTab));\n        }\n        break;\n      case 'ArrowLeft':\n        if (isLTR) {\n          this._setActiveItem(this._getPrevTab(activeTab));\n        } else {\n          this._setActiveItem(this._getNextTab(activeTab));\n        }\n        break;\n      case 'ArrowUp':\n        this._setActiveItem(this._getPrevTab(activeTab));\n        break;\n      case 'ArrowDown':\n        this._setActiveItem(this._getNextTab(activeTab));\n        break;\n      case 'Home':\n        this._setActiveItem(this._getNextTab(-1));\n        break;\n      case 'End':\n        this._setActiveItem(this._getPrevTab(tabItems.length));\n        break;\n      default:\n        break;\n    }\n  }\n\n  private _getNextTab(activeIndex) {\n    let tabItems: DDSTab[];\n\n    if (activeIndex > -1 && activeIndex < this._tabItems.length) {\n      tabItems = this._reorderTabsFrom(activeIndex);\n    } else {\n      tabItems = Array.from(this._tabItems);\n    }\n\n    const queuedItem = tabItems.find(tabItem => !tabItem.disabled);\n\n    return this._tabItems.findIndex(tabItem => tabItem === queuedItem);\n  }\n\n  private _getPrevTab(activeIndex) {\n    let tabItems: DDSTab[];\n\n    if (activeIndex > 0 && activeIndex < this._tabItems.length) {\n      tabItems = this._reorderTabsFrom(activeIndex - 1);\n    } else {\n      tabItems = Array.from(this._tabItems);\n    }\n\n    const queuedItem = tabItems.reverse().find(tabItem => !tabItem.disabled);\n\n    return this._tabItems.findIndex(tabItem => tabItem === queuedItem);\n  }\n\n  private _reorderTabsFrom(activeIndex) {\n    const tabItems = Array.from(this._tabItems);\n\n    tabItems.forEach((_tabItem, i) => {\n      if (i <= activeIndex) {\n        tabItems.push(tabItems.shift() as DDSTab);\n      }\n    });\n\n    return tabItems;\n  }\n\n  updated() {\n    this._isLTR = window.getComputedStyle(this).direction === 'ltr';\n\n    this._tabItems.map((tab, index) => {\n      (tab as DDSTab).selected = index === this._activeTab;\n      (tab as DDSTab).setIndex(index);\n      const navLink = this.shadowRoot!.querySelectorAll(`.${prefix}--tabs__nav-link`)[index];\n      const navText = navLink!.querySelector('div p');\n      if (navText!.scrollHeight > navText!.clientHeight) {\n        const label = (tab as DDSTab).getAttribute('label');\n        if (label) {\n          navLink!.setAttribute('aria-label', label);\n          navLink!.setAttribute('hasTooltip', label);\n        }\n      }\n      return tab;\n    });\n  }\n\n  protected _renderAccordion(): TemplateResult | string | void {\n    const { _tabItems: tabs } = this;\n    return html`\n      <ul class=\"${prefix}--accordion\">\n        ${tabs.map((tab, index) => {\n          const disabled = (tab as DDSTab).disabled && true;\n          const active = index === this._activeTab;\n          const label = (tab as DDSTab).getAttribute('label');\n          const classes = classMap({\n            'bx--accordion__item': true,\n            'bx--accordion__item--active': active,\n            'bx--accordion__item--disabled': disabled,\n          });\n          return html`\n            <li class=\"${classes}\">\n              <button\n                class=\"${prefix}--accordion__heading\"\n                aria-expanded=\"${active}\"\n                aria-controls=\"pane-${index}\"\n                @click=\"${e => this._handleClick(index, e)}\"\n                tabindex=\"${index + 1}\"\n                ?disabled=\"${disabled}\"\n              >\n                ${ChevronRight20({\n                  part: 'expando-icon',\n                  class: `${prefix}--accordion__arrow`,\n                })}\n                <div class=\"${prefix}--accordion__title\">${label}</div>\n              </button>\n              <div id=\"pane-${index}\" class=\"${prefix}--accordion__content\">\n                ${unsafeHTML((tab as DDSTab).innerHTML)}\n              </div>\n            </li>\n          `;\n        })}\n      </ul>\n    `;\n  }\n\n  protected _renderTabs(): TemplateResult | string | void {\n    const { _tabItems: tabs } = this;\n    return html`\n      <div class=\"${prefix}--tabs\">\n        <ul class=\"${prefix}--tabs__nav ${prefix}--tabs__nav--hidden\" role=\"tablist\" @keydown=\"${this._handleTabListKeyDown}\">\n          ${tabs.map((tab, index) => {\n            const disabled = (tab as DDSTab).disabled && true;\n            const active = index === this._activeTab;\n            const label = (tab as DDSTab).getAttribute('label');\n            const classes = classMap({\n              'bx--tabs__nav-item': true,\n              'bx--tabs__nav-item--selected': active,\n              'bx--tabs__nav-item--disabled': disabled,\n            });\n            return html`\n              <li class=\"${classes}\" data-target=\".tab-${index}-default\" role=\"tab\" ?disabled=\"${disabled}\">\n                <button\n                  tabindex=\"${active ? '0' : '-1'}\"\n                  id=\"tab-link-${index}-default\"\n                  class=\"${prefix}--tabs__nav-link\"\n                  type=\"button\"\n                  aria-controls=\"tab-panel-${index}-default\"\n                  aria-selected=\"${active}\"\n                  @click=\"${e => this._handleClick(index, e)}\"\n                >\n                  <div><p>${label}</p></div>\n                </button>\n              </li>\n            `;\n          })}\n        </ul>\n      </div>\n    `;\n  }\n\n  /**\n   * Returns a class-name based on the defined Orientation value\n   */\n  protected _getOrientationClass() {\n    return classMap({\n      [`${prefix}--tabs-extended`]: true,\n      [`${prefix}--tabs-extended--${this.orientation}`]: this.orientation,\n    });\n  }\n\n  /**\n   * Orientation (horizontal (default) | vertical)\n   */\n  @property({ attribute: 'orientation', reflect: true })\n  orientation = ORIENTATION.HORIZONTAL;\n\n  render() {\n    return html`\n      <div class=\"${this._getOrientationClass()}\">\n        ${this._renderAccordion()} ${this._renderTabs()}\n        <div class=\"${prefix}--tab-content\">\n          <slot @slotchange=\"${this._handleSlotChange}\"></slot>\n        </div>\n      </div>\n    `;\n  }\n\n  static get stableSelector() {\n    return `${ddsPrefix}--tabs-extended`;\n  }\n\n  static styles = styles;\n}\n\n/* @__GENERATE_REACT_CUSTOM_ELEMENT_TYPE__ */\nexport default DDSTabsExtended;\n"],"file":"tabs-extended.js"}
+{"version":3,"sources":["components/tabs-extended/tabs-extended.ts"],"names":["settings","customElement","html","state","LitElement","property","unsafeHTML","classMap","ChevronRight20","ddsSettings","StableSelectorMixin","DDSTab","styles","ORIENTATION","prefix","stablePrefix","ddsPrefix","DDSTabsExtended","event","slottedNodes","target","assignedNodes","flatten","_tabItems","filter","node","forEach","tab","index","_activeTab","selected","e","preventDefault","_setActiveItem","newTabLink","shadowRoot","querySelector","HTMLElement","focus","key","activeTab","tabItems","_isLTR","isLTR","_getNextTab","_getPrevTab","length","activeIndex","_reorderTabsFrom","Array","from","queuedItem","find","tabItem","disabled","findIndex","reverse","_tabItem","i","push","shift","window","getComputedStyle","direction","map","setIndex","navLink","querySelectorAll","navText","scrollHeight","clientHeight","label","getAttribute","setAttribute","tabs","active","classes","_handleClick","part","class","innerHTML","_handleTabListKeyDown","orientation","attribute","reflect","HORIZONTAL","_getOrientationClass","_renderAccordion","_renderTabs","_handleSlotChange"],"mappings":"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","sourcesContent":["/**\n * @license\n *\n * Copyright IBM Corp. 2020, 2022\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 { customElement, html, state, LitElement, TemplateResult, property } from 'lit-element';\nimport { unsafeHTML } from 'lit-html/directives/unsafe-html';\nimport { classMap } from 'lit-html/directives/class-map';\nimport ChevronRight20 from 'carbon-web-components/es/icons/chevron--right/20.js';\nimport ddsSettings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';\nimport StableSelectorMixin from '../../globals/mixins/stable-selector';\nimport DDSTab from './tab';\nimport styles from './tabs-extended.scss';\nimport { ORIENTATION } from './defs';\n\nconst { prefix } = settings;\nconst { stablePrefix: ddsPrefix } = ddsSettings;\n\n/**\n * A component to present content inside a tabbed layout.\n *\n * @element dds-tabs-extended\n */\n@customElement(`${ddsPrefix}-tabs-extended`)\nclass DDSTabsExtended extends StableSelectorMixin(LitElement) {\n  /**\n   * Child tab components.\n   */\n  @state()\n  private _tabItems: DDSTab[] = [];\n\n  /**\n   * Defines the active tab index.\n   */\n  @state()\n  private _activeTab: number = 0;\n\n  @state()\n  private _isLTR: boolean = true;\n\n  /**\n   * Handler for @slotChange, creates tabs from dds-tab components.\n   *\n   * @private\n   */\n  protected _handleSlotChange(event: Event) {\n    const slottedNodes = (event.target as HTMLSlotElement).assignedNodes({ flatten: true });\n    this._tabItems = slottedNodes.filter(node => node instanceof DDSTab) as DDSTab[];\n    this._tabItems.forEach((tab, index) => {\n      this._activeTab = (tab as DDSTab).selected ? index : this._activeTab;\n    });\n  }\n\n  private _handleClick(index, e) {\n    e.preventDefault();\n    this._setActiveItem(index);\n  }\n\n  private _setActiveItem(index: number) {\n    this._activeTab = index;\n    const newTabLink = this.shadowRoot?.querySelector(`\n    [role=\"tablist\"] li[role=\"tab\"]:nth-child(${index + 1}) .bx--tabs__nav-link`);\n    if (newTabLink instanceof HTMLElement) {\n      newTabLink.focus();\n    }\n  }\n\n  private _handleTabListKeyDown(event: KeyboardEvent) {\n    const { key } = event;\n    const { _activeTab: activeTab, _tabItems: tabItems, _isLTR: isLTR } = this;\n    switch (key) {\n      case 'ArrowRight':\n        if (isLTR) {\n          this._setActiveItem(this._getNextTab(activeTab));\n        } else {\n          this._setActiveItem(this._getPrevTab(activeTab));\n        }\n        break;\n      case 'ArrowLeft':\n        if (isLTR) {\n          this._setActiveItem(this._getPrevTab(activeTab));\n        } else {\n          this._setActiveItem(this._getNextTab(activeTab));\n        }\n        break;\n      case 'ArrowUp':\n        this._setActiveItem(this._getPrevTab(activeTab));\n        break;\n      case 'ArrowDown':\n        this._setActiveItem(this._getNextTab(activeTab));\n        break;\n      case 'Home':\n        this._setActiveItem(this._getNextTab(-1));\n        break;\n      case 'End':\n        this._setActiveItem(this._getPrevTab(tabItems.length));\n        break;\n      default:\n        break;\n    }\n  }\n\n  private _getNextTab(activeIndex) {\n    let tabItems: DDSTab[];\n\n    if (activeIndex > -1 && activeIndex < this._tabItems.length) {\n      tabItems = this._reorderTabsFrom(activeIndex);\n    } else {\n      tabItems = Array.from(this._tabItems);\n    }\n\n    const queuedItem = tabItems.find(tabItem => !tabItem.disabled);\n\n    return this._tabItems.findIndex(tabItem => tabItem === queuedItem);\n  }\n\n  private _getPrevTab(activeIndex) {\n    let tabItems: DDSTab[];\n\n    if (activeIndex > 0 && activeIndex < this._tabItems.length) {\n      tabItems = this._reorderTabsFrom(activeIndex - 1);\n    } else {\n      tabItems = Array.from(this._tabItems);\n    }\n\n    const queuedItem = tabItems.reverse().find(tabItem => !tabItem.disabled);\n\n    return this._tabItems.findIndex(tabItem => tabItem === queuedItem);\n  }\n\n  private _reorderTabsFrom(activeIndex) {\n    const tabItems = Array.from(this._tabItems);\n\n    tabItems.forEach((_tabItem, i) => {\n      if (i <= activeIndex) {\n        tabItems.push(tabItems.shift() as DDSTab);\n      }\n    });\n\n    return tabItems;\n  }\n\n  updated() {\n    this._isLTR = window.getComputedStyle(this).direction === 'ltr';\n\n    this._tabItems.map((tab, index) => {\n      (tab as DDSTab).selected = index === this._activeTab;\n      (tab as DDSTab).setIndex(index);\n      const navLink = this.shadowRoot!.querySelectorAll(`.${prefix}--tabs__nav-link`)[index];\n      const navText = navLink!.querySelector('div p');\n      if (navText!.scrollHeight > navText!.clientHeight) {\n        const label = (tab as DDSTab).getAttribute('label');\n        if (label) {\n          navLink!.setAttribute('aria-label', label);\n          navLink!.setAttribute('hasTooltip', label);\n        }\n      }\n      return tab;\n    });\n  }\n\n  protected _renderAccordion(): TemplateResult | string | void {\n    const { _tabItems: tabs } = this;\n    return html`\n      <ul class=\"${prefix}--accordion\">\n        ${tabs.map((tab, index) => {\n          const { disabled } = tab as DDSTab;\n          const active = index === this._activeTab;\n          const label = (tab as DDSTab).getAttribute('label');\n          const classes = classMap({\n            'bx--accordion__item': true,\n            'bx--accordion__item--active': active,\n            'bx--accordion__item--disabled': disabled,\n          });\n          return html`\n            <li class=\"${classes}\">\n              <button\n                class=\"${prefix}--accordion__heading\"\n                aria-expanded=\"${active}\"\n                aria-controls=\"pane-${index}\"\n                @click=\"${e => this._handleClick(index, e)}\"\n                tabindex=\"${index + 1}\"\n                ?disabled=\"${disabled}\"\n              >\n                ${ChevronRight20({\n                  part: 'expando-icon',\n                  class: `${prefix}--accordion__arrow`,\n                })}\n                <div class=\"${prefix}--accordion__title\">${label}</div>\n              </button>\n              <div id=\"pane-${index}\" class=\"${prefix}--accordion__content\">\n                ${unsafeHTML((tab as DDSTab).innerHTML)}\n              </div>\n            </li>\n          `;\n        })}\n      </ul>\n    `;\n  }\n\n  protected _renderTabs(): TemplateResult | string | void {\n    const { _tabItems: tabs } = this;\n    return html`\n      <div class=\"${prefix}--tabs\">\n        <ul class=\"${prefix}--tabs__nav ${prefix}--tabs__nav--hidden\" role=\"tablist\" @keydown=\"${this._handleTabListKeyDown}\">\n          ${tabs.map((tab, index) => {\n            const { disabled } = tab as DDSTab;\n            const active = index === this._activeTab;\n            const label = (tab as DDSTab).getAttribute('label');\n            const classes = classMap({\n              'bx--tabs__nav-item': true,\n              'bx--tabs__nav-item--selected': active,\n              'bx--tabs__nav-item--disabled': disabled,\n            });\n            return html`\n              <li class=\"${classes}\" data-target=\".tab-${index}-default\" role=\"tab\" ?disabled=\"${disabled}\">\n                <button\n                  tabindex=\"${active ? '0' : '-1'}\"\n                  id=\"tab-link-${index}-default\"\n                  class=\"${prefix}--tabs__nav-link\"\n                  type=\"button\"\n                  aria-controls=\"tab-panel-${index}-default\"\n                  aria-selected=\"${active}\"\n                  @click=\"${e => this._handleClick(index, e)}\"\n                >\n                  <div><p>${label}</p></div>\n                </button>\n              </li>\n            `;\n          })}\n        </ul>\n      </div>\n    `;\n  }\n\n  /**\n   * Returns a class-name based on the defined Orientation value\n   */\n  protected _getOrientationClass() {\n    return classMap({\n      [`${prefix}--tabs-extended`]: true,\n      [`${prefix}--tabs-extended--${this.orientation}`]: this.orientation,\n    });\n  }\n\n  /**\n   * Orientation (horizontal (default) | vertical)\n   */\n  @property({ attribute: 'orientation', reflect: true })\n  orientation = ORIENTATION.HORIZONTAL;\n\n  render() {\n    return html`\n      <div class=\"${this._getOrientationClass()}\">\n        ${this._renderAccordion()} ${this._renderTabs()}\n        <div class=\"${prefix}--tab-content\">\n          <slot @slotchange=\"${this._handleSlotChange}\"></slot>\n        </div>\n      </div>\n    `;\n  }\n\n  static get stableSelector() {\n    return `${ddsPrefix}--tabs-extended`;\n  }\n\n  static styles = styles;\n}\n\n/* @__GENERATE_REACT_CUSTOM_ELEMENT_TYPE__ */\nexport default DDSTabsExtended;\n"],"file":"tabs-extended.js"}

package/es/components-react/tabs-extended/tab.d.ts

@@ -16,12 +16,12 @@ export interface ComponentProps {
    * Defines the disabled state of the tab.
    */
 
-  disabled?: string;
+  disabled?: boolean;
   /**
    * Defines the selected state of the tab.
    */
 
-  selected?: string;
+  selected?: boolean;
   [prop: string]: unknown;
 }
 /**

package/es/components-react/tabs-extended/tab.js

@@ -7,7 +7,9 @@
  * LICENSE file in the root directory of this source tree.
  */
 export { default as CustomElement } from '../../components/tabs-extended/tab.js';
-import createReactCustomElementType from 'carbon-web-components/es/globals/wrappers/createReactCustomElementType.js';
+import createReactCustomElementType, {
+  booleanSerializer,
+} from 'carbon-web-components/es/globals/wrappers/createReactCustomElementType.js';
 import PropTypes from 'prop-types';
 import settings from 'carbon-components/es/globals/js/settings.js';
 import ddsSettings from '@carbon/ibmdotcom-utilities/es/utilities/settings/settings.js';
@@ -15,8 +17,12 @@ var prefix = settings.prefix;
 var ddsPrefix = ddsSettings.stablePrefix;
 export var descriptor = {
   label: {},
-  disabled: {},
-  selected: {},
+  disabled: {
+    serialize: booleanSerializer,
+  },
+  selected: {
+    serialize: booleanSerializer,
+  },
 };
 export var propTypes = {
   /**
@@ -27,12 +33,12 @@ export var propTypes = {
   /**
    * Defines the disabled state of the tab.
    */
-  disabled: PropTypes.string,
+  disabled: PropTypes.bool,
 
   /**
    * Defines the selected state of the tab.
    */
-  selected: PropTypes.string,
+  selected: PropTypes.bool,
 };
 const Component = createReactCustomElementType(''.concat(ddsPrefix, '-tab'), descriptor);
 Component.propTypes = propTypes;

package/es/internal/vendor/@carbon/ibmdotcom-services/internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings.js

@@ -11,11 +11,11 @@
  * @exports ibmdotcom.settings
  * @type {object} Settings object
  * @property {string} [prefix=dds]
- * Carbon for IBM.com v1.33.0',
+ * Carbon for IBM.com v1.33.1',
  *
  */
 var settings = {
-  version: 'Carbon for IBM.com v1.33.0',
+  version: 'Carbon for IBM.com v1.33.1',
   stablePrefix: 'dds'
 };
 export default settings;

package/es/internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings.js

@@ -11,11 +11,11 @@
  * @exports ibmdotcom.settings
  * @type {object} Settings object
  * @property {string} [prefix=dds]
- * Carbon for IBM.com v1.33.0',
+ * Carbon for IBM.com v1.33.1',
  *
  */
 var settings = {
-  version: 'Carbon for IBM.com v1.33.0',
+  version: 'Carbon for IBM.com v1.33.1',
   stablePrefix: 'dds'
 };
 export default settings;

package/lib/components-react-node/tabs-extended/tab.js

@@ -13,7 +13,7 @@ Object.defineProperty(exports, '__esModule', {
 });
 exports.default = exports.propTypes = exports.descriptor = void 0;
 
-var _createReactCustomElementType = _interopRequireDefault(
+var _createReactCustomElementType = _interopRequireWildcard(
   require('carbon-web-components/lib/globals/wrappers/createReactCustomElementType.js')
 );
 
@@ -27,12 +27,55 @@ function _interopRequireDefault(obj) {
   return obj && obj.__esModule ? obj : { default: obj };
 }
 
+function _getRequireWildcardCache() {
+  if (typeof WeakMap !== 'function') return null;
+  var cache = new WeakMap();
+  _getRequireWildcardCache = function() {
+    return cache;
+  };
+  return cache;
+}
+
+function _interopRequireWildcard(obj) {
+  if (obj && obj.__esModule) {
+    return obj;
+  }
+  if (obj === null || (typeof obj !== 'object' && typeof obj !== 'function')) {
+    return { default: obj };
+  }
+  var cache = _getRequireWildcardCache();
+  if (cache && cache.has(obj)) {
+    return cache.get(obj);
+  }
+  var newObj = {};
+  var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
+  for (var key in obj) {
+    if (Object.prototype.hasOwnProperty.call(obj, key)) {
+      var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;
+      if (desc && (desc.get || desc.set)) {
+        Object.defineProperty(newObj, key, desc);
+      } else {
+        newObj[key] = obj[key];
+      }
+    }
+  }
+  newObj.default = obj;
+  if (cache) {
+    cache.set(obj, newObj);
+  }
+  return newObj;
+}
+
 var prefix = _settings.default.prefix;
 var ddsPrefix = _settings2.default.stablePrefix;
 var descriptor = {
   label: {},
-  disabled: {},
-  selected: {},
+  disabled: {
+    serialize: _createReactCustomElementType.booleanSerializer,
+  },
+  selected: {
+    serialize: _createReactCustomElementType.booleanSerializer,
+  },
 };
 exports.descriptor = descriptor;
 var propTypes = {
@@ -44,12 +87,12 @@ var propTypes = {
   /**
    * Defines the disabled state of the tab.
    */
-  disabled: _propTypes.default.string,
+  disabled: _propTypes.default.bool,
 
   /**
    * Defines the selected state of the tab.
    */
-  selected: _propTypes.default.string,
+  selected: _propTypes.default.bool,
 };
 exports.propTypes = propTypes;
 const Component = (0, _createReactCustomElementType.default)(''.concat(ddsPrefix, '-tab'), descriptor);

package/lib/internal/vendor/@carbon/ibmdotcom-services/internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings.js

@@ -18,11 +18,11 @@ exports.default = void 0;
  * @exports ibmdotcom.settings
  * @type {object} Settings object
  * @property {string} [prefix=dds]
- * Carbon for IBM.com v1.33.0',
+ * Carbon for IBM.com v1.33.1',
  *
  */
 var settings = {
-  version: 'Carbon for IBM.com v1.33.0',
+  version: 'Carbon for IBM.com v1.33.1',
   stablePrefix: 'dds'
 };
 var _default = settings;

package/lib/internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings.js

@@ -18,11 +18,11 @@ exports.default = void 0;
  * @exports ibmdotcom.settings
  * @type {object} Settings object
  * @property {string} [prefix=dds]
- * Carbon for IBM.com v1.33.0',
+ * Carbon for IBM.com v1.33.1',
  *
  */
 var settings = {
-  version: 'Carbon for IBM.com v1.33.0',
+  version: 'Carbon for IBM.com v1.33.1',
   stablePrefix: 'dds'
 };
 var _default = settings;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@carbon/ibmdotcom-web-components",
-  "version": "1.18.0",
+  "version": "1.18.1",
   "description": "Carbon for IBM.com Web Components",
   "license": "Apache-2.0",
   "exports": {
@@ -96,9 +96,9 @@
     "prettier": "^1.19.0"
   },
   "dependencies": {
-    "@carbon/ibmdotcom-services": "1.33.0",
+    "@carbon/ibmdotcom-services": "1.33.1",
     "@carbon/ibmdotcom-styles": "1.33.0",
-    "@carbon/ibmdotcom-utilities": "1.33.0",
+    "@carbon/ibmdotcom-utilities": "1.33.1",
     "@carbon/layout": "10.37.0",
     "@carbon/telemetry": "0.1.0",
     "carbon-components": "10.56.0",
@@ -135,7 +135,7 @@
     "@babel/preset-react": "^7.0.0",
     "@babel/template": "^7.8.0",
     "@babel/traverse": "^7.8.0",
-    "@carbon/ibmdotcom-services-store": "1.33.0",
+    "@carbon/ibmdotcom-services-store": "1.33.1",
     "@carbon/icon-helpers": "10.29.0",
     "@carbon/icons": "10.48.0",
     "@carbon/type": "10.44.0",
@@ -280,5 +280,5 @@
     "singleQuote": true,
     "trailingComma": "es5"
   },
-  "gitHead": "d2fd36239e0b977ad6bfdd4f3ad613323e65ecd0"
+  "gitHead": "41cb43346a36e90df84e7585f4bd0a8e2f6521ed"
 }