@db-ux/wc-core-components 2.0.0-0-custom-select-16b8cce → 2.0.0

package/dist/collection/components/tabs/tabs.js

@@ -13,12 +13,12 @@ export class DBTabs {
         this.showScrollRight = false;
         this.scrollContainer = null;
     }
-    convertTabs(tabs) {
+    convertTabs() {
         try {
-            if (typeof tabs === "string") {
-                return JSON.parse(tabs);
+            if (typeof this.tabs === "string") {
+                return JSON.parse(this.tabs);
             }
-            return tabs;
+            return this.tabs;
         }
         catch (error) {
             console.error(error);
@@ -33,7 +33,7 @@ export class DBTabs {
     }
     scroll(left) {
         var _a;
-        let step = this.arrowScrollDistance || 100;
+        let step = Number(this.arrowScrollDistance) || 100;
         if (left) {
             step *= -1;
         }
@@ -80,7 +80,7 @@ export class DBTabs {
                         // Auto select
                         const autoSelect = !this.initialSelectedMode || this.initialSelectedMode === "auto";
                         const shouldAutoSelect = (this.initialSelectedIndex == null && index === 0) ||
-                            this.initialSelectedIndex === index;
+                            Number(this.initialSelectedIndex) === index;
                         if (autoSelect && shouldAutoSelect) {
                             input.click();
                         }
@@ -98,18 +98,19 @@ export class DBTabs {
         }
     }
     handleChange(event) {
-        var _a;
-        if (this.onIndexChange && event.target) {
-            const list = event.target.closest("ul");
-            const listItem = 
-            // db-tab-item for angular and stencil wrapping elements
-            (_a = event.target.closest("db-tab-item")) !== null && _a !== void 0 ? _a : event.target.closest("li");
-            if (list !== null && listItem !== null) {
-                this.onIndexChange.emit(Array.from(list.childNodes).indexOf(listItem));
+        var _a, _b;
+        const list = (_a = event.target) === null || _a === void 0 ? void 0 : _a.closest("ul");
+        const listItem = 
+        // db-tab-item for angular and stencil wrapping elements
+        (_b = event.target.closest("db-tab-item")) !== null && _b !== void 0 ? _b : event.target.closest("li");
+        if (list !== null && listItem !== null) {
+            const indices = Array.from(list.childNodes).indexOf(listItem);
+            if (this.indexChange) {
+                this.indexChange.emit(indices);
             }
         }
-        if (this.onTabSelect) {
-            this.onTabSelect.emit(event);
+        if (this.tabSelect) {
+            this.tabSelect.emit(event);
         }
     }
     /**
@@ -178,16 +179,17 @@ export class DBTabs {
     }
     render() {
         var _a, _b, _c, _d;
-        return (h("div", { key: '4c4a49b884e5bbf15554ee06e970377e64a82b4f', class: cls("db-tabs", this.className), ref: (el) => {
+        return (h("div", { key: '1d7ff48f630d7edfd6b0d1a27506306d7272a5bd', class: cls("db-tabs", this.className), ref: (el) => {
                 this._ref = el;
-            }, id: this._id, "data-orientation": this.orientation, "data-scroll-behavior": this.behavior, "data-alignment": (_a = this.alignment) !== null && _a !== void 0 ? _a : "start", "data-width": (_b = this.width) !== null && _b !== void 0 ? _b : "auto", onChange: (event) => this.handleChange(event) }, this.showScrollLeft ? (h("db-button", { class: "tabs-scroll-left", variant: "ghost", icon: "chevron_left", type: "button", noText: true, onClick: () => this.scroll(true) }, "Scroll left")) : null, this.tabs ? (h(Fragment, null, h("db-tab-list", null, (_c = this.convertTabs(this.tabs)) === null || _c === void 0 ? void 0 : _c.map((tab, index) => (h("db-tab-item", { key: this.name + "tab-item" + index, active: tab.active, label: tab.label, iconAfter: tab.iconAfter, icon: tab.icon, noText: tab.noText })))), (_d = this.convertTabs(this.tabs)) === null || _d === void 0 ? void 0 :
-            _d.map((tab, index) => (h("db-tab-panel", { key: this.name + "tab-panel" + index, content: tab.content }, tab.children))))) : null, this.showScrollRight ? (h("db-button", { class: "tabs-scroll-right", variant: "ghost", icon: "chevron_right", type: "button", noText: true, onClick: () => this.scroll() }, "Scroll right")) : null, h("slot", { key: 'b4ae8a21fec461d4c83c9ae339fb3a4bd881c09d' })));
+            }, id: this._id, "data-orientation": this.orientation, "data-scroll-behavior": this.behavior, "data-alignment": (_a = this.alignment) !== null && _a !== void 0 ? _a : "start", "data-width": (_b = this.width) !== null && _b !== void 0 ? _b : "auto", onInput: (event) => this.handleChange(event) }, this.showScrollLeft ? (h("db-button", { class: "tabs-scroll-left", variant: "ghost", icon: "chevron_left", type: "button", noText: true, onClick: () => this.scroll(true) }, "Scroll left")) : null, this.tabs ? (h(Fragment, null, h("db-tab-list", null, (_c = this.convertTabs()) === null || _c === void 0 ? void 0 : _c.map((tab, index) => (h("db-tab-item", { key: this.name + "tab-item" + index, active: tab.active, label: tab.label, iconAfter: tab.iconAfter, icon: tab.icon, noText: tab.noText })))), (_d = this.convertTabs()) === null || _d === void 0 ? void 0 :
+            _d.map((tab, index) => (h("db-tab-panel", { key: this.name + "tab-panel" + index, content: tab.content }, tab.children))))) : null, this.showScrollRight ? (h("db-button", { class: "tabs-scroll-right", variant: "ghost", icon: "chevron_right", type: "button", noText: true, onClick: () => this.scroll() }, "Scroll right")) : null, h("slot", { key: '85289730878025ddc57daa494a3f15058a8f1a20' })));
     }
     static get is() { return "db-tabs"; }
     static get properties() {
         return {
             "id": {
                 "type": "string",
+                "attribute": "id",
                 "mutable": false,
                 "complexType": {
                     "original": "DBTabsProps[\"id\"]",
@@ -208,11 +210,11 @@ export class DBTabs {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "id",
                 "reflect": false
             },
             "name": {
                 "type": "string",
+                "attribute": "name",
                 "mutable": false,
                 "complexType": {
                     "original": "DBTabsProps[\"name\"]",
@@ -233,15 +235,40 @@ export class DBTabs {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "name",
+                "reflect": false
+            },
+            "tabs": {
+                "type": "string",
+                "attribute": "tabs",
+                "mutable": false,
+                "complexType": {
+                    "original": "DBTabsProps[\"tabs\"]",
+                    "resolved": "DBSimpleTabProps[] | string",
+                    "references": {
+                        "DBTabsProps": {
+                            "location": "import",
+                            "path": "./model",
+                            "id": "src/components/tabs/model.ts::DBTabsProps"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
                 "reflect": false
             },
             "arrowScrollDistance": {
-                "type": "number",
+                "type": "any",
+                "attribute": "arrow-scroll-distance",
                 "mutable": false,
                 "complexType": {
                     "original": "DBTabsProps[\"arrowScrollDistance\"]",
-                    "resolved": "number",
+                    "resolved": "number | string",
                     "references": {
                         "DBTabsProps": {
                             "location": "import",
@@ -258,11 +285,11 @@ export class DBTabs {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "arrow-scroll-distance",
                 "reflect": false
             },
             "orientation": {
                 "type": "string",
+                "attribute": "orientation",
                 "mutable": false,
                 "complexType": {
                     "original": "DBTabsProps[\"orientation\"]",
@@ -283,11 +310,11 @@ export class DBTabs {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "orientation",
                 "reflect": false
             },
             "behavior": {
                 "type": "string",
+                "attribute": "behavior",
                 "mutable": false,
                 "complexType": {
                     "original": "DBTabsProps[\"behavior\"]",
@@ -308,11 +335,11 @@ export class DBTabs {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "behavior",
                 "reflect": false
             },
             "initialSelectedMode": {
                 "type": "string",
+                "attribute": "initial-selected-mode",
                 "mutable": false,
                 "complexType": {
                     "original": "DBTabsProps[\"initialSelectedMode\"]",
@@ -333,15 +360,15 @@ export class DBTabs {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "initial-selected-mode",
                 "reflect": false
             },
             "initialSelectedIndex": {
-                "type": "number",
+                "type": "any",
+                "attribute": "initial-selected-index",
                 "mutable": false,
                 "complexType": {
                     "original": "DBTabsProps[\"initialSelectedIndex\"]",
-                    "resolved": "number",
+                    "resolved": "number | string",
                     "references": {
                         "DBTabsProps": {
                             "location": "import",
@@ -358,11 +385,11 @@ export class DBTabs {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "initial-selected-index",
                 "reflect": false
             },
             "className": {
                 "type": "string",
+                "attribute": "classname",
                 "mutable": false,
                 "complexType": {
                     "original": "DBTabsProps[\"className\"]",
@@ -383,11 +410,11 @@ export class DBTabs {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "classname",
                 "reflect": false
             },
             "alignment": {
                 "type": "string",
+                "attribute": "alignment",
                 "mutable": false,
                 "complexType": {
                     "original": "DBTabsProps[\"alignment\"]",
@@ -408,11 +435,11 @@ export class DBTabs {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "alignment",
                 "reflect": false
             },
             "width": {
                 "type": "string",
+                "attribute": "width",
                 "mutable": false,
                 "complexType": {
                     "original": "DBTabsProps[\"width\"]",
@@ -433,32 +460,6 @@ export class DBTabs {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "width",
-                "reflect": false
-            },
-            "tabs": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "DBTabsProps[\"tabs\"]",
-                    "resolved": "DBSimpleTabProps[] | string",
-                    "references": {
-                        "DBTabsProps": {
-                            "location": "import",
-                            "path": "./model",
-                            "id": "src/components/tabs/model.ts::DBTabsProps"
-                        }
-                    }
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "attribute": "tabs",
                 "reflect": false
             }
         };
@@ -475,8 +476,8 @@ export class DBTabs {
     }
     static get events() {
         return [{
-                "method": "onIndexChange",
-                "name": "onIndexChange",
+                "method": "indexChange",
+                "name": "indexChange",
                 "bubbles": true,
                 "cancelable": true,
                 "composed": true,
@@ -490,8 +491,8 @@ export class DBTabs {
                     "references": {}
                 }
             }, {
-                "method": "onTabSelect",
-                "name": "onTabSelect",
+                "method": "tabSelect",
+                "name": "tabSelect",
                 "bubbles": true,
                 "cancelable": true,
                 "composed": true,

package/dist/collection/components/tabs/tabs.js.map

@@ -1 +1 @@
-{"version":3,"file":"tabs.js","sourceRoot":"","sources":["../../../src/components/tabs/tabs.tsx"],"names":[],"mappings":"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","sourcesContent":["import { DBSimpleTabProps, DBTabsProps, DBTabsState } from \"./model\";\nimport { cls, uuid } from \"../../utils\";\nimport { DBButton } from \"../button/button\";\nimport { DBTabList } from \"../tab-list/tab-list\";\nimport { DBTabItem } from \"../tab-item/tab-item\";\nimport { DBTabPanel } from \"../tab-panel/tab-panel\";\n\nimport {\n  Component,\n  h,\n  Fragment,\n  Watch,\n  Event,\n  Prop,\n  State,\n} from \"@stencil/core\";\n\n\n/**\n * @slot children - This is a default/unnamed slot\n\n */\n @Component({\n  tag: \"db-tabs\",\n})\nexport class DBTabs {\n  private _ref!: HTMLDivElement | null;\n  @Prop() id: DBTabsProps[\"id\"];\n  @Prop() name: DBTabsProps[\"name\"];\n  @Prop() arrowScrollDistance: DBTabsProps[\"arrowScrollDistance\"];\n  @Prop() orientation: DBTabsProps[\"orientation\"];\n  @Prop() behavior: DBTabsProps[\"behavior\"];\n  @Prop() initialSelectedMode: DBTabsProps[\"initialSelectedMode\"];\n  @Prop() initialSelectedIndex: DBTabsProps[\"initialSelectedIndex\"];\n  @Event() onIndexChange: any;\n  @Event() onTabSelect: any;\n  @Prop({attribute: \"classname\"}) className: DBTabsProps[\"className\"];\n  @Prop() alignment: DBTabsProps[\"alignment\"];\n  @Prop() width: DBTabsProps[\"width\"];\n  @Prop() tabs: DBTabsProps[\"tabs\"];\n\n  @State() _id = \"tabs-\" + uuid();\n  @State() _name = \"\";\n  @State() initialized = false;\n  @State() showScrollLeft = false;\n  @State() showScrollRight = false;\n  @State() scrollContainer = null;\n\n  convertTabs(tabs: unknown[] | string | undefined) {\n    try {\n      if (typeof tabs === \"string\") {\n        return JSON.parse(tabs);\n      }\n      return tabs as DBSimpleTabProps[];\n    } catch (error) {\n      console.error(error);\n    }\n    return [];\n  }\n  evaluateScrollButtons(tList: Element) {\n    const needsScroll = tList.scrollWidth > tList.clientWidth;\n    this.showScrollLeft = needsScroll && tList.scrollLeft > 1;\n    this.showScrollRight =\n      needsScroll && tList.scrollLeft < tList.scrollWidth - tList.clientWidth;\n  }\n  scroll(left?: boolean) {\n    let step = this.arrowScrollDistance || 100;\n    if (left) {\n      step *= -1;\n    }\n    this.scrollContainer?.scrollBy({\n      top: 0,\n      left: step,\n      behavior: \"smooth\",\n    });\n  }\n  initTabList() {\n    if (this._ref) {\n      const tabList = this._ref.querySelector(\".db-tab-list\");\n      if (tabList) {\n        const container: HTMLElement | null =\n          tabList.querySelector('[role=\"tablist\"]');\n        if (container) {\n          container.setAttribute(\n            \"aria-orientation\",\n            this.orientation || \"horizontal\"\n          );\n          if (this.behavior === \"arrows\") {\n            this.scrollContainer = container;\n            this.evaluateScrollButtons(container);\n            container.addEventListener(\"scroll\", () => {\n              this.evaluateScrollButtons(container);\n            });\n          }\n        }\n      }\n    }\n  }\n  initTabs(init?: boolean) {\n    if (this._ref) {\n      const tabItems = Array.from<Element>(\n        this._ref.getElementsByClassName(\"db-tab-item\")\n      );\n      for (const tabItem of tabItems) {\n        const index: number = tabItems.indexOf(tabItem);\n        const label = tabItem.querySelector(\"label\");\n        const input = tabItem.querySelector(\"input\");\n        if (input && label) {\n          if (!input.id) {\n            const tabId = `${this._name}-tab-${index}`;\n            label.setAttribute(\"for\", tabId);\n            input.setAttribute(\n              \"aria-controls\",\n              `${this._name}-tab-panel-${index}`\n            );\n            input.id = tabId;\n            input.setAttribute(\"name\", this._name);\n          }\n          if (init) {\n            // Auto select\n            const autoSelect =\n              !this.initialSelectedMode || this.initialSelectedMode === \"auto\";\n            const shouldAutoSelect =\n              (this.initialSelectedIndex == null && index === 0) ||\n              this.initialSelectedIndex === index;\n            if (autoSelect && shouldAutoSelect) {\n              input.click();\n            }\n          }\n        }\n      }\n      const tabPanels = Array.from<Element>(\n        this._ref.querySelectorAll(\n          \":is(:scope > .db-tab-panel, :scope > db-tab-panel > .db-tab-panel)\"\n        )\n      );\n      for (const panel of tabPanels) {\n        if (panel.id) continue;\n        const index: number = tabPanels.indexOf(panel);\n        panel.id = `${this._name}-tab-panel-${index}`;\n        panel.setAttribute(\"aria-labelledby\", `${this._name}-tab-${index}`);\n      }\n    }\n  }\n  handleChange(event: any) {\n    if (this.onIndexChange && event.target) {\n      const list = event.target.closest(\"ul\");\n      const listItem =\n        // db-tab-item for angular and stencil wrapping elements\n        event.target.closest(\"db-tab-item\") ?? event.target.closest(\"li\");\n      if (list !== null && listItem !== null) {\n        this.onIndexChange.emit(Array.from(list.childNodes).indexOf(listItem));\n      }\n    }\n    if (this.onTabSelect) {\n      this.onTabSelect.emit(event);\n    }\n  }\n\n  /**\n   * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.\n   * @param element  the ref for the component\n   * @param customElementSelector  the custom element like `my-component`\n   */\n  private enableAttributePassing(\n    element: HTMLElement | null,\n    customElementSelector: string\n  ) {\n    const parent = element?.closest(customElementSelector);\n    if (element && parent) {\n      const attributes = parent.attributes;\n      for (let i = 0; i < attributes.length; i++) {\n        const attr = attributes.item(i);\n        if (\n          attr &&\n          (attr.name.startsWith(\"data-\") || attr.name.startsWith(\"aria-\"))\n        ) {\n          element.setAttribute(attr.name, attr.value);\n          parent.removeAttribute(attr.name);\n        }\n        if (attr && attr.name === \"class\") {\n          const isWebComponent = attr.value.includes(\"hydrated\");\n          const value = attr.value.replace(\"hydrated\", \"\").trim();\n          const currentClass = element.getAttribute(\"class\");\n          element.setAttribute(\n            attr.name,\n            `${currentClass ? `${currentClass} ` : \"\"}${value}`\n          );\n          if (isWebComponent) {\n            // Stencil is using this class for lazy loading component\n            parent.setAttribute(\"class\", \"hydrated\");\n          } else {\n            parent.removeAttribute(attr.name);\n          }\n        }\n      }\n    }\n  }\n\n  watch0Fn() {\n    if (this._ref && this.initialized) {\n      this.initTabList();\n      this.initTabs(true);\n      const tabList = this._ref.querySelector(\".db-tab-list\");\n      if (tabList) {\n        const observer = new MutationObserver((mutations) => {\n          mutations.forEach((mutation) => {\n            if (mutation.removedNodes.length || mutation.addedNodes.length) {\n              this.initTabList();\n              this.initTabs();\n            }\n          });\n        });\n        observer.observe(tabList, {\n          childList: true,\n          subtree: true,\n        });\n      }\n      this.initialized = false;\n    }\n  }\n\n  @Watch(\"_ref\")\n  @Watch(\"initialized\")\n  watch0() {\n    this.watch0Fn();\n  }\n\n  componentDidLoad() {\n    this.enableAttributePassing(this._ref, \"db-tabs\");\n    this._id = this.id || this._id;\n    this._name = `tabs-${this.name || uuid()}`;\n    this.initialized = true;\n    this.watch0Fn();\n  }\n\n  render() {\n    return (\n      <div\n        class={cls(\"db-tabs\", this.className)}\n        ref={(el: any) => {\n          this._ref = el;\n        }}\n        id={this._id}\n        data-orientation={this.orientation}\n        data-scroll-behavior={this.behavior}\n        data-alignment={this.alignment ?? \"start\"}\n        data-width={this.width ?? \"auto\"}\n        onChange={(event) => this.handleChange(event)}\n      >\n        {this.showScrollLeft ? (\n          <db-button\n            class=\"tabs-scroll-left\"\n            variant=\"ghost\"\n            icon=\"chevron_left\"\n            type=\"button\"\n            noText={true}\n            onClick={() => this.scroll(true)}\n          >\n            Scroll left\n          </db-button>\n        ) : null}\n        {this.tabs ? (\n          <Fragment>\n            <db-tab-list>\n              {this.convertTabs(this.tabs)?.map((tab, index) => (\n                <db-tab-item\n                  key={this.name + \"tab-item\" + index}\n                  active={tab.active}\n                  label={tab.label}\n                  iconAfter={tab.iconAfter}\n                  icon={tab.icon}\n                  noText={tab.noText}\n                ></db-tab-item>\n              ))}\n            </db-tab-list>\n            {this.convertTabs(this.tabs)?.map((tab, index) => (\n              <db-tab-panel\n                key={this.name + \"tab-panel\" + index}\n                content={tab.content}\n              >\n                {tab.children}\n              </db-tab-panel>\n            ))}\n          </Fragment>\n        ) : null}\n        {this.showScrollRight ? (\n          <db-button\n            class=\"tabs-scroll-right\"\n            variant=\"ghost\"\n            icon=\"chevron_right\"\n            type=\"button\"\n            noText={true}\n            onClick={() => this.scroll()}\n          >\n            Scroll right\n          </db-button>\n        ) : null}\n        <slot></slot>\n      </div>\n    );\n  }\n}\n"]}
+{"version":3,"file":"tabs.js","sourceRoot":"","sources":["../../../src/components/tabs/tabs.tsx"],"names":[],"mappings":"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","sourcesContent":["import { DBSimpleTabProps, DBTabsProps, DBTabsState } from \"./model\";\nimport { cls, uuid } from \"../../utils\";\nimport { DBButton } from \"../button/button\";\nimport { DBTabList } from \"../tab-list/tab-list\";\nimport { DBTabItem } from \"../tab-item/tab-item\";\nimport { DBTabPanel } from \"../tab-panel/tab-panel\";\n\nimport {\n  Component,\n  h,\n  Fragment,\n  Watch,\n  Event,\n  EventEmitter,\n  Prop,\n  State,\n} from \"@stencil/core\";\n\n\n/**\n * @slot children - This is a default/unnamed slot\n\n */\n @Component({\n  tag: \"db-tabs\",\n})\nexport class DBTabs {\n  private _ref!: HTMLDivElement | any;\n  @Prop() id: DBTabsProps[\"id\"];\n  @Prop() name: DBTabsProps[\"name\"];\n  @Prop() tabs: DBTabsProps[\"tabs\"];\n  @Prop() arrowScrollDistance: DBTabsProps[\"arrowScrollDistance\"];\n  @Prop() orientation: DBTabsProps[\"orientation\"];\n  @Prop() behavior: DBTabsProps[\"behavior\"];\n  @Prop() initialSelectedMode: DBTabsProps[\"initialSelectedMode\"];\n  @Prop() initialSelectedIndex: DBTabsProps[\"initialSelectedIndex\"];\n  @Event() indexChange: EventEmitter<\n    Parameters<Required<DBTabsProps>[\"onIndexChange\"]>[number]\n  > | void;\n  @Event() tabSelect: EventEmitter<\n    Parameters<Required<DBTabsProps>[\"onTabSelect\"]>[number]\n  > | void;\n  @Prop({attribute: \"classname\"}) className: DBTabsProps[\"className\"];\n  @Prop() alignment: DBTabsProps[\"alignment\"];\n  @Prop() width: DBTabsProps[\"width\"];\n  @State() _id = \"tabs-\" + uuid();\n  @State() _name = \"\";\n  @State() initialized = false;\n  @State() showScrollLeft = false;\n  @State() showScrollRight = false;\n  @State() scrollContainer = null;\n\n  convertTabs() {\n    try {\n      if (typeof this.tabs === \"string\") {\n        return JSON.parse(this.tabs as string);\n      }\n      return this.tabs as DBSimpleTabProps[];\n    } catch (error) {\n      console.error(error);\n    }\n    return [];\n  }\n  evaluateScrollButtons(tList: Element) {\n    const needsScroll = tList.scrollWidth > tList.clientWidth;\n    this.showScrollLeft = needsScroll && tList.scrollLeft > 1;\n    this.showScrollRight =\n      needsScroll && tList.scrollLeft < tList.scrollWidth - tList.clientWidth;\n  }\n  scroll(left?: boolean) {\n    let step = Number(this.arrowScrollDistance) || 100;\n    if (left) {\n      step *= -1;\n    }\n    this.scrollContainer?.scrollBy({\n      top: 0,\n      left: step,\n      behavior: \"smooth\",\n    });\n  }\n  initTabList() {\n    if (this._ref) {\n      const tabList = this._ref.querySelector(\".db-tab-list\");\n      if (tabList) {\n        const container: HTMLElement | null =\n          tabList.querySelector('[role=\"tablist\"]');\n        if (container) {\n          container.setAttribute(\n            \"aria-orientation\",\n            this.orientation || \"horizontal\"\n          );\n          if (this.behavior === \"arrows\") {\n            this.scrollContainer = container;\n            this.evaluateScrollButtons(container);\n            container.addEventListener(\"scroll\", () => {\n              this.evaluateScrollButtons(container);\n            });\n          }\n        }\n      }\n    }\n  }\n  initTabs(init?: boolean) {\n    if (this._ref) {\n      const tabItems = Array.from<Element>(\n        this._ref.getElementsByClassName(\"db-tab-item\")\n      );\n      for (const tabItem of tabItems) {\n        const index: number = tabItems.indexOf(tabItem);\n        const label = tabItem.querySelector(\"label\");\n        const input = tabItem.querySelector(\"input\");\n        if (input && label) {\n          if (!input.id) {\n            const tabId = `${this._name}-tab-${index}`;\n            label.setAttribute(\"for\", tabId);\n            input.setAttribute(\n              \"aria-controls\",\n              `${this._name}-tab-panel-${index}`\n            );\n            input.id = tabId;\n            input.setAttribute(\"name\", this._name);\n          }\n          if (init) {\n            // Auto select\n            const autoSelect =\n              !this.initialSelectedMode || this.initialSelectedMode === \"auto\";\n            const shouldAutoSelect =\n              (this.initialSelectedIndex == null && index === 0) ||\n              Number(this.initialSelectedIndex) === index;\n            if (autoSelect && shouldAutoSelect) {\n              input.click();\n            }\n          }\n        }\n      }\n      const tabPanels = Array.from<Element>(\n        this._ref.querySelectorAll(\n          \":is(:scope > .db-tab-panel, :scope > db-tab-panel > .db-tab-panel)\"\n        )\n      );\n      for (const panel of tabPanels) {\n        if (panel.id) continue;\n        const index: number = tabPanels.indexOf(panel);\n        panel.id = `${this._name}-tab-panel-${index}`;\n        panel.setAttribute(\"aria-labelledby\", `${this._name}-tab-${index}`);\n      }\n    }\n  }\n  handleChange(event: any) {\n    const list = event.target?.closest(\"ul\");\n    const listItem =\n      // db-tab-item for angular and stencil wrapping elements\n      event.target.closest(\"db-tab-item\") ?? event.target.closest(\"li\");\n    if (list !== null && listItem !== null) {\n      const indices = Array.from(list.childNodes).indexOf(listItem);\n      if (this.indexChange) {\n        this.indexChange.emit(indices);\n      }\n    }\n    if (this.tabSelect) {\n      this.tabSelect.emit(event);\n    }\n  }\n\n  /**\n   * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.\n   * @param element  the ref for the component\n   * @param customElementSelector  the custom element like `my-component`\n   */\n  private enableAttributePassing(\n    element: HTMLElement | null,\n    customElementSelector: string\n  ) {\n    const parent = element?.closest(customElementSelector);\n    if (element && parent) {\n      const attributes = parent.attributes;\n      for (let i = 0; i < attributes.length; i++) {\n        const attr = attributes.item(i);\n        if (\n          attr &&\n          (attr.name.startsWith(\"data-\") || attr.name.startsWith(\"aria-\"))\n        ) {\n          element.setAttribute(attr.name, attr.value);\n          parent.removeAttribute(attr.name);\n        }\n        if (attr && attr.name === \"class\") {\n          const isWebComponent = attr.value.includes(\"hydrated\");\n          const value = attr.value.replace(\"hydrated\", \"\").trim();\n          const currentClass = element.getAttribute(\"class\");\n          element.setAttribute(\n            attr.name,\n            `${currentClass ? `${currentClass} ` : \"\"}${value}`\n          );\n          if (isWebComponent) {\n            // Stencil is using this class for lazy loading component\n            parent.setAttribute(\"class\", \"hydrated\");\n          } else {\n            parent.removeAttribute(attr.name);\n          }\n        }\n      }\n    }\n  }\n\n  watch0Fn() {\n    if (this._ref && this.initialized) {\n      this.initTabList();\n      this.initTabs(true);\n      const tabList = this._ref.querySelector(\".db-tab-list\");\n      if (tabList) {\n        const observer = new MutationObserver((mutations) => {\n          mutations.forEach((mutation) => {\n            if (mutation.removedNodes.length || mutation.addedNodes.length) {\n              this.initTabList();\n              this.initTabs();\n            }\n          });\n        });\n        observer.observe(tabList, {\n          childList: true,\n          subtree: true,\n        });\n      }\n      this.initialized = false;\n    }\n  }\n\n  @Watch(\"_ref\")\n  @Watch(\"initialized\")\n  watch0() {\n    this.watch0Fn();\n  }\n\n  componentDidLoad() {\n    this.enableAttributePassing(this._ref, \"db-tabs\");\n    this._id = this.id || this._id;\n    this._name = `tabs-${this.name || uuid()}`;\n    this.initialized = true;\n    this.watch0Fn();\n  }\n\n  render() {\n    return (\n      <div\n        class={cls(\"db-tabs\", this.className)}\n        ref={(el: any) => {\n          this._ref = el;\n        }}\n        id={this._id}\n        data-orientation={this.orientation}\n        data-scroll-behavior={this.behavior}\n        data-alignment={this.alignment ?? \"start\"}\n        data-width={this.width ?? \"auto\"}\n        onInput={(event) => this.handleChange(event)}\n      >\n        {this.showScrollLeft ? (\n          <db-button\n            class=\"tabs-scroll-left\"\n            variant=\"ghost\"\n            icon=\"chevron_left\"\n            type=\"button\"\n            noText={true}\n            onClick={() => this.scroll(true)}\n          >\n            Scroll left\n          </db-button>\n        ) : null}\n        {this.tabs ? (\n          <Fragment>\n            <db-tab-list>\n              {this.convertTabs()?.map((tab, index) => (\n                <db-tab-item\n                  key={this.name + \"tab-item\" + index}\n                  active={tab.active}\n                  label={tab.label}\n                  iconAfter={tab.iconAfter}\n                  icon={tab.icon}\n                  noText={tab.noText}\n                ></db-tab-item>\n              ))}\n            </db-tab-list>\n            {this.convertTabs()?.map((tab, index) => (\n              <db-tab-panel\n                key={this.name + \"tab-panel\" + index}\n                content={tab.content}\n              >\n                {tab.children}\n              </db-tab-panel>\n            ))}\n          </Fragment>\n        ) : null}\n        {this.showScrollRight ? (\n          <db-button\n            class=\"tabs-scroll-right\"\n            variant=\"ghost\"\n            icon=\"chevron_right\"\n            type=\"button\"\n            noText={true}\n            onClick={() => this.scroll()}\n          >\n            Scroll right\n          </db-button>\n        ) : null}\n        <slot></slot>\n      </div>\n    );\n  }\n}\n"]}

package/dist/collection/components/tag/model.js.map

@@ -1 +1 @@
-{"version":3,"file":"model.js","sourceRoot":"","sources":["../../../src/components/tag/model.ts"],"names":[],"mappings":"AACA,MAAM,CAAC,MAAM,eAAe,GAAG,CAAC,QAAQ,EAAE,WAAW,CAAU,CAAC","sourcesContent":["import { ClickEvent, ContentSlotProps, GlobalProps, GlobalState, IconProps, InitializedState, OverflowProps, SemanticProps, ShowIconProps, TagEmphasisProps } from '../../shared/model';\nexport const TagBehaviorList = ['static', 'removable'] as const;\nexport type TagBehaviorType = (typeof TagBehaviorList)[number];\nexport type DBTagDefaultProps = {\n  /**\n   *\tDefines the behavior of the component:\n   *\t- static: default behavior without remove button\n   *  - removable: add a remove button at the end of the tag\n   */\n  behavior?: TagBehaviorType | string;\n\n  /**\n   * @deprecated Disable tag\n   */\n  disabled?: boolean;\n  /**\n   * Define the text next to the icon specified via the icon Property to get hidden.\n   */\n  noText?: boolean;\n  /**\n   * If \"removeButton\" attribute is set this function will be called when user clicks cancel button inside the tag.\n   */\n  onRemove?: (event?: any) => void;\n  /**\n   * The removeButton attribute shows the cancel button.\n   */\n  removeButton?: string;\n  /**\n   * Enable/Disable icon for checkbox/radio inside tag.\n   */\n  showCheckState?: boolean;\n  /**\n   * Alternative for children to set content as property.\n   */\n  text?: string;\n\n  /**\n   * If \"interactive\" is set to true, you can pass a value to the underlying checkbox or radio input.\n   */\n  value?: string;\n};\nexport type DBTagProps = DBTagDefaultProps & GlobalProps & IconProps & SemanticProps & OverflowProps & TagEmphasisProps & ShowIconProps & ContentSlotProps;\nexport type DBTagDefaultState = {\n  getRemoveButtonText: () => string;\n  handleRemove: (event?: ClickEvent<HTMLButtonElement>) => void;\n};\nexport type DBTagState = DBTagDefaultState & GlobalState & InitializedState"]}
+{"version":3,"file":"model.js","sourceRoot":"","sources":["../../../src/components/tag/model.ts"],"names":[],"mappings":"AACA,MAAM,CAAC,MAAM,eAAe,GAAG,CAAC,QAAQ,EAAE,WAAW,CAAU,CAAC","sourcesContent":["import { ClickEvent, ContentSlotProps, GlobalProps, GlobalState, IconProps, InitializedState, OverflowProps, SemanticProps, ShowIconProps, EmphasisProps } from '../../shared/model';\nexport const TagBehaviorList = ['static', 'removable'] as const;\nexport type TagBehaviorType = (typeof TagBehaviorList)[number];\nexport type DBTagDefaultProps = {\n  /**\n   *\tDefines the behavior of the component:\n   *\t- static: default behavior without remove button\n   *  - removable: add a remove button at the end of the tag\n   */\n  behavior?: TagBehaviorType | string;\n\n  /**\n   * @deprecated Disable tag\n   */\n  disabled?: boolean | string;\n  /**\n   * Define the text next to the icon specified via the icon Property to get hidden.\n   */\n  noText?: boolean | string;\n  /**\n   * If \"removeButton\" attribute is set this function will be called when user clicks cancel button inside the tag.\n   */\n  onRemove?: (event?: any) => void;\n  /**\n   * If \"removeButton\" attribute is set this function will be called when user clicks cancel button inside the tag.\n   */\n  remove?: (event?: any) => void;\n  /**\n   * The removeButton attribute shows the cancel button.\n   */\n  removeButton?: string;\n  /**\n   * Enable/Disable icon for checkbox/radio inside tag.\n   */\n  showCheckState?: boolean | string;\n  /**\n   * Alternative for children to set content as property.\n   */\n  text?: string;\n\n  /**\n   * If \"interactive\" is set to true, you can pass a value to the underlying checkbox or radio input.\n   */\n  value?: string;\n};\nexport type DBTagProps = DBTagDefaultProps & GlobalProps & IconProps & SemanticProps & OverflowProps & EmphasisProps & ShowIconProps & ContentSlotProps;\nexport type DBTagDefaultState = {\n  getRemoveButtonText: () => string;\n  handleRemove: (event?: ClickEvent<HTMLButtonElement>) => void;\n};\nexport type DBTagState = DBTagDefaultState & GlobalState & InitializedState"]}

package/dist/collection/components/tag/tag.js

@@ -60,7 +60,7 @@ export class DBTag {
             const input = (_b = this._ref) === null || _b === void 0 ? void 0 : _b.querySelector("input");
             for (const element of [button, input]) {
                 if (element) {
-                    element.disabled = this.disabled;
+                    element.disabled = Boolean(this.disabled);
                 }
             }
         }
@@ -74,19 +74,20 @@ export class DBTag {
     }
     render() {
         var _a;
-        return (h("div", { key: '885adb703a4fa64c2d3efaba7c167d5eb4f624a9', class: cls("db-tag", this.className), ref: (el) => {
+        return (h("div", { key: 'b7df76f07edf732d557c7ba59feb8a709c2df81d', class: cls("db-tag", this.className), ref: (el) => {
                 this._ref = el;
-            }, id: this.id, "data-disabled": getBooleanAsString(this.disabled), "data-semantic": this.semantic, "data-emphasis": this.emphasis, "data-icon": this.icon, "data-show-check-state": getBooleanAsString((_a = this.showCheckState) !== null && _a !== void 0 ? _a : true), "data-hide-icon": getHideProp(this.showIcon), "data-no-text": getBooleanAsString(this.noText), "data-overflow": getBooleanAsString(this.overflow) }, h("slot", { key: 'af6aae86c3e2a9af3e11beff754012287566408c', name: "content" }), h("slot", { key: '71cf408fa539ea385b71de349cde551fa22b46ec' }), this.text ? this.text : null, this.behavior === "removable" ? (h("button", { class: "db-button db-tab-remove-button", "data-icon": "cross", "data-size": "small", "data-no-text": "true", "data-variant": "ghost", onClick: (event) => this.handleRemove(event), title: this.getRemoveButtonText() }, this.getRemoveButtonText())) : null));
+            }, id: this.id, "data-disabled": getBooleanAsString(this.disabled), "data-semantic": this.semantic, "data-emphasis": this.emphasis, "data-icon": this.icon, "data-show-check-state": getBooleanAsString((_a = this.showCheckState) !== null && _a !== void 0 ? _a : true), "data-hide-icon": getHideProp(this.showIcon), "data-no-text": getBooleanAsString(this.noText), "data-overflow": getBooleanAsString(this.overflow) }, h("slot", { key: '7b1e2561e265fe7eff59cde6116611438a53c7e6', name: "content" }), h("slot", { key: '80b7eaf341f308dcc4629290874da3e8ed8de2b2' }), this.text ? this.text : null, this.behavior === "removable" ? (h("button", { class: "db-button db-tab-remove-button", "data-icon": "cross", "data-size": "small", "data-no-text": "true", "data-variant": "ghost", onClick: (event) => this.handleRemove(event), title: this.getRemoveButtonText() }, this.getRemoveButtonText())) : null));
     }
     static get is() { return "db-tag"; }
     static get properties() {
         return {
             "disabled": {
-                "type": "boolean",
+                "type": "any",
+                "attribute": "disabled",
                 "mutable": false,
                 "complexType": {
                     "original": "DBTagProps[\"disabled\"]",
-                    "resolved": "boolean",
+                    "resolved": "boolean | string",
                     "references": {
                         "DBTagProps": {
                             "location": "import",
@@ -103,11 +104,11 @@ export class DBTag {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "disabled",
                 "reflect": false
             },
             "removeButton": {
                 "type": "string",
+                "attribute": "remove-button",
                 "mutable": false,
                 "complexType": {
                     "original": "DBTagProps[\"removeButton\"]",
@@ -128,11 +129,11 @@ export class DBTag {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "remove-button",
                 "reflect": false
             },
             "id": {
                 "type": "string",
+                "attribute": "id",
                 "mutable": false,
                 "complexType": {
                     "original": "DBTagProps[\"id\"]",
@@ -153,11 +154,11 @@ export class DBTag {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "id",
                 "reflect": false
             },
             "className": {
                 "type": "string",
+                "attribute": "classname",
                 "mutable": false,
                 "complexType": {
                     "original": "DBTagProps[\"className\"]",
@@ -178,11 +179,11 @@ export class DBTag {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "classname",
                 "reflect": false
             },
             "semantic": {
                 "type": "string",
+                "attribute": "semantic",
                 "mutable": false,
                 "complexType": {
                     "original": "DBTagProps[\"semantic\"]",
@@ -203,15 +204,15 @@ export class DBTag {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "semantic",
                 "reflect": false
             },
             "emphasis": {
                 "type": "string",
+                "attribute": "emphasis",
                 "mutable": false,
                 "complexType": {
                     "original": "DBTagProps[\"emphasis\"]",
-                    "resolved": "\"origin\" | \"strong\" | \"weak\"",
+                    "resolved": "\"strong\" | \"weak\"",
                     "references": {
                         "DBTagProps": {
                             "location": "import",
@@ -228,11 +229,11 @@ export class DBTag {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "emphasis",
                 "reflect": false
             },
             "icon": {
                 "type": "string",
+                "attribute": "icon",
                 "mutable": false,
                 "complexType": {
                     "original": "DBTagProps[\"icon\"]",
@@ -253,15 +254,15 @@ export class DBTag {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "icon",
                 "reflect": false
             },
             "showCheckState": {
-                "type": "boolean",
+                "type": "any",
+                "attribute": "show-check-state",
                 "mutable": false,
                 "complexType": {
                     "original": "DBTagProps[\"showCheckState\"]",
-                    "resolved": "boolean",
+                    "resolved": "boolean | string",
                     "references": {
                         "DBTagProps": {
                             "location": "import",
@@ -278,15 +279,15 @@ export class DBTag {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "show-check-state",
                 "reflect": false
             },
             "showIcon": {
-                "type": "boolean",
+                "type": "any",
+                "attribute": "show-icon",
                 "mutable": false,
                 "complexType": {
                     "original": "DBTagProps[\"showIcon\"]",
-                    "resolved": "boolean",
+                    "resolved": "boolean | string",
                     "references": {
                         "DBTagProps": {
                             "location": "import",
@@ -303,15 +304,15 @@ export class DBTag {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "show-icon",
                 "reflect": false
             },
             "noText": {
-                "type": "boolean",
+                "type": "any",
+                "attribute": "no-text",
                 "mutable": false,
                 "complexType": {
                     "original": "DBTagProps[\"noText\"]",
-                    "resolved": "boolean",
+                    "resolved": "boolean | string",
                     "references": {
                         "DBTagProps": {
                             "location": "import",
@@ -328,15 +329,15 @@ export class DBTag {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "no-text",
                 "reflect": false
             },
             "overflow": {
-                "type": "boolean",
+                "type": "any",
+                "attribute": "overflow",
                 "mutable": false,
                 "complexType": {
                     "original": "DBTagProps[\"overflow\"]",
-                    "resolved": "boolean",
+                    "resolved": "boolean | string",
                     "references": {
                         "DBTagProps": {
                             "location": "import",
@@ -353,11 +354,11 @@ export class DBTag {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "overflow",
                 "reflect": false
             },
             "text": {
                 "type": "string",
+                "attribute": "text",
                 "mutable": false,
                 "complexType": {
                     "original": "DBTagProps[\"text\"]",
@@ -378,11 +379,11 @@ export class DBTag {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "text",
                 "reflect": false
             },
             "behavior": {
                 "type": "string",
+                "attribute": "behavior",
                 "mutable": false,
                 "complexType": {
                     "original": "DBTagProps[\"behavior\"]",
@@ -403,7 +404,6 @@ export class DBTag {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "behavior",
                 "reflect": false
             }
         };