@db-ux/wc-core-components 1.0.0-test-13b991d

package/dist/collection/components/tab-panel/tab-panel.js

@@ -0,0 +1,154 @@
+import { cls } from "../../utils";
+import { h } from "@stencil/core";
+/**
+ * @slot children - This is a default/unnamed slot
+
+ */
+export class DBTabPanel {
+    /**
+     * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.
+     * @param element  the ref for the component
+     * @param customElementSelector  the custom element like `my-component`
+     */
+    enableAttributePassing(element, customElementSelector) {
+        const parent = element === null || element === void 0 ? void 0 : element.closest(customElementSelector);
+        if (element && parent) {
+            const attributes = parent.attributes;
+            for (let i = 0; i < attributes.length; i++) {
+                const attr = attributes.item(i);
+                if (attr &&
+                    (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))) {
+                    element.setAttribute(attr.name, attr.value);
+                    parent.removeAttribute(attr.name);
+                }
+                if (attr && attr.name === "class") {
+                    const isWebComponent = attr.value.includes("hydrated");
+                    const value = attr.value.replace("hydrated", "").trim();
+                    const currentClass = element.getAttribute("class");
+                    element.setAttribute(attr.name, `${currentClass ? `${currentClass} ` : ""}${value}`);
+                    if (isWebComponent) {
+                        // Stencil is using this class for lazy loading component
+                        parent.setAttribute("class", "hydrated");
+                    }
+                    else {
+                        parent.removeAttribute(attr.name);
+                    }
+                }
+            }
+        }
+    }
+    componentDidLoad() {
+        this.enableAttributePassing(this._ref, "db-tab-panel");
+    }
+    render() {
+        return (h("section", { key: '0d41da4c7a0ff41ae23c271fb550b1431c8b9de0', class: cls("db-tab-panel", this.className), role: "tabpanel", ref: (el) => {
+                this._ref = el;
+            }, id: this.id, "aria-labelledby": this.labelledBy }, this.content ? this.content : null, h("slot", { key: '3a81ddc76c2b38a38c3b0006a59d2eb55f248ad7' })));
+    }
+    static get is() { return "db-tab-panel"; }
+    static get properties() {
+        return {
+            "className": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "DBTabPanelProps[\"className\"]",
+                    "resolved": "string",
+                    "references": {
+                        "DBTabPanelProps": {
+                            "location": "import",
+                            "path": "./model",
+                            "id": "src/components/tab-panel/model.ts::DBTabPanelProps"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "classname",
+                "reflect": false
+            },
+            "id": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "DBTabPanelProps[\"id\"]",
+                    "resolved": "string",
+                    "references": {
+                        "DBTabPanelProps": {
+                            "location": "import",
+                            "path": "./model",
+                            "id": "src/components/tab-panel/model.ts::DBTabPanelProps"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "id",
+                "reflect": false
+            },
+            "labelledBy": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "DBTabPanelProps[\"labelledBy\"]",
+                    "resolved": "string",
+                    "references": {
+                        "DBTabPanelProps": {
+                            "location": "import",
+                            "path": "./model",
+                            "id": "src/components/tab-panel/model.ts::DBTabPanelProps"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "labelled-by",
+                "reflect": false
+            },
+            "content": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "DBTabPanelProps[\"content\"]",
+                    "resolved": "string",
+                    "references": {
+                        "DBTabPanelProps": {
+                            "location": "import",
+                            "path": "./model",
+                            "id": "src/components/tab-panel/model.ts::DBTabPanelProps"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "content",
+                "reflect": false
+            }
+        };
+    }
+}
+//# sourceMappingURL=tab-panel.js.map

package/dist/collection/components/tab-panel/tab-panel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tab-panel.js","sourceRoot":"","sources":["../../../src/components/tab-panel/tab-panel.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,GAAG,EAAE,MAAM,aAAa,CAAC;AAElC,OAAO,EAAE,SAAS,EAAE,CAAC,EAAY,IAAI,EAAE,MAAM,eAAe,CAAC;AAG7D;;;GAGG;AAIH,MAAM,OAAO,UAAU;IAQrB;;;;OAIG;IACK,sBAAsB,CAC5B,OAA2B,EAC3B,qBAA6B;QAE7B,MAAM,MAAM,GAAG,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,OAAO,CAAC,qBAAqB,CAAC,CAAC;QACvD,IAAI,OAAO,IAAI,MAAM,EAAE,CAAC;YACtB,MAAM,UAAU,GAAG,MAAM,CAAC,UAAU,CAAC;YACrC,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,UAAU,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE,CAAC;gBAC3C,MAAM,IAAI,GAAG,UAAU,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;gBAChC,IACE,IAAI;oBACJ,CAAC,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,OAAO,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC,EAChE,CAAC;oBACD,OAAO,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC;oBAC5C,MAAM,CAAC,eAAe,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;gBACpC,CAAC;gBACD,IAAI,IAAI,IAAI,IAAI,CAAC,IAAI,KAAK,OAAO,EAAE,CAAC;oBAClC,MAAM,cAAc,GAAG,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,UAAU,CAAC,CAAC;oBACvD,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,UAAU,EAAE,EAAE,CAAC,CAAC,IAAI,EAAE,CAAC;oBACxD,MAAM,YAAY,GAAG,OAAO,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC;oBACnD,OAAO,CAAC,YAAY,CAClB,IAAI,CAAC,IAAI,EACT,GAAG,YAAY,CAAC,CAAC,CAAC,GAAG,YAAY,GAAG,CAAC,CAAC,CAAC,EAAE,GAAG,KAAK,EAAE,CACpD,CAAC;oBACF,IAAI,cAAc,EAAE,CAAC;wBACnB,yDAAyD;wBACzD,MAAM,CAAC,YAAY,CAAC,OAAO,EAAE,UAAU,CAAC,CAAC;oBAC3C,CAAC;yBAAM,CAAC;wBACN,MAAM,CAAC,eAAe,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;oBACpC,CAAC;gBACH,CAAC;YACH,CAAC;QACH,CAAC;IACH,CAAC;IAED,gBAAgB;QACd,IAAI,CAAC,sBAAsB,CAAC,IAAI,CAAC,IAAI,EAAE,cAAc,CAAC,CAAC;IACzD,CAAC;IAED,MAAM;QACJ,OAAO,CACL,gEACE,KAAK,EAAE,GAAG,CAAC,cAAc,EAAE,IAAI,CAAC,SAAS,CAAC,EAC1C,IAAI,EAAC,UAAU,EACf,GAAG,EAAE,CAAC,EAAO,EAAE,EAAE;gBACf,IAAI,CAAC,IAAI,GAAG,EAAE,CAAC;YACjB,CAAC,EACD,EAAE,EAAE,IAAI,CAAC,EAAE,qBACM,IAAI,CAAC,UAAU;YAE/B,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI;YACnC,8DAAa,CACL,CACX,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { DBTabPanelProps, DBTabPanelState } from \"./model\";\nimport { cls } from \"../../utils\";\n\nimport { Component, h, Fragment, Prop } from \"@stencil/core\";\n\n\n/**\n * @slot children - This is a default/unnamed slot\n\n */\n @Component({\n  tag: \"db-tab-panel\",\n})\nexport class DBTabPanel {\n  private _ref!: HTMLDivElement | null;\n  @Prop({attribute: \"classname\"}) className: DBTabPanelProps[\"className\"];\n  @Prop() id: DBTabPanelProps[\"id\"];\n  @Prop() labelledBy: DBTabPanelProps[\"labelledBy\"];\n  @Prop() content: DBTabPanelProps[\"content\"];\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  componentDidLoad() {\n    this.enableAttributePassing(this._ref, \"db-tab-panel\");\n  }\n\n  render() {\n    return (\n      <section\n        class={cls(\"db-tab-panel\", this.className)}\n        role=\"tabpanel\"\n        ref={(el: any) => {\n          this._ref = el;\n        }}\n        id={this.id}\n        aria-labelledby={this.labelledBy}\n      >\n        {this.content ? this.content : null}\n        <slot></slot>\n      </section>\n    );\n  }\n}\n"]}

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

@@ -0,0 +1,3 @@
+import { DBTabs } from "./tabs";
+export default DBTabs;
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/tabs/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,QAAQ,CAAC;AAEhC,eAAe,MAAM,CAAC","sourcesContent":["import { DBTabs } from './tabs';\n\nexport default DBTabs;"]}

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

@@ -0,0 +1,3 @@
+export const TabsBehaviorList = ['scrollbar', 'arrows'];
+export const TabsInitialSelectedModeList = ['auto', 'manually'];
+//# sourceMappingURL=model.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"model.js","sourceRoot":"","sources":["../../../src/components/tabs/model.ts"],"names":[],"mappings":"AAGA,MAAM,CAAC,MAAM,gBAAgB,GAAI,CAAC,WAAW,EAAE,QAAQ,CAAW,CAAC;AAEnE,MAAM,CAAC,MAAM,2BAA2B,GAAI,CAAC,MAAM,EAAE,UAAU,CAAW,CAAC","sourcesContent":["import { AlignmentProps, GlobalProps, GlobalState, InitializedState, OrientationProps, WidthProps } from '../../shared/model';\nimport { DBTabItemProps } from '../tab-item/model';\nimport { DBTabPanelProps } from '../tab-panel/model';\nexport const TabsBehaviorList = (['scrollbar', 'arrows'] as const);\nexport type TabsBehaviorType = (typeof TabsBehaviorList)[number];\nexport const TabsInitialSelectedModeList = (['auto', 'manually'] as const);\nexport type TabsInitialSelectedModeType = (typeof TabsInitialSelectedModeList)[number];\nexport type DBSimpleTabProps = DBTabItemProps & DBTabPanelProps;\nexport type DBTabsDefaultProps = {\n  /**\n   * Change amount of distance if you click on an arrow, only available with behavior=\"arrows\"\n   */\n  arrowScrollDistance?: number;\n\n  /**\n   * Show a scrollbar or buttons with arrows to navigate for horizontal tabs with overflow visible\n   */\n  behavior?: TabsBehaviorType;\n\n  /**\n   * Default behavior is auto selecting the first tab, change selected tab by index\n   */\n  initialSelectedIndex?: number;\n\n  /**\n   * Default behavior is auto selecting the first tab, disable it with 'manually'\n   */\n  initialSelectedMode?: TabsInitialSelectedModeType;\n\n  /**\n   * The name of the tab bar, is required for grouping multiple tabs together. Will overwrite names from children.\n   */\n  name?: string;\n\n  /**\n   * Provide simple tabs with label + text as content\n   */\n  tabs?: DBSimpleTabProps[] | string;\n};\nexport type DBTabsProps = DBTabsDefaultProps & GlobalProps & OrientationProps & WidthProps & AlignmentProps;\nexport type DBTabsDefaultState = {\n  _name: string;\n  scrollContainer?: Element | null;\n  scroll: (left?: boolean) => void;\n  showScrollLeft?: boolean;\n  showScrollRight?: boolean;\n  evaluateScrollButtons: (tabList: Element) => void;\n  convertTabs: (tabs?: unknown[] | string | undefined) => DBSimpleTabProps[];\n  initTabList: () => void;\n  initTabs: (init?: boolean) => void;\n};\nexport type DBTabsState = DBTabsDefaultState & GlobalState & InitializedState"]}

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

@@ -0,0 +1,458 @@
+import { cls, uuid } from "../../utils";
+import { h, Fragment } from "@stencil/core";
+/**
+ * @slot children - This is a default/unnamed slot
+
+ */
+export class DBTabs {
+    constructor() {
+        this._id = "tabs-" + uuid();
+        this._name = "";
+        this.initialized = false;
+        this.showScrollLeft = false;
+        this.showScrollRight = false;
+        this.scrollContainer = null;
+    }
+    convertTabs(tabs) {
+        try {
+            if (typeof tabs === "string") {
+                return JSON.parse(tabs);
+            }
+            return tabs;
+        }
+        catch (error) {
+            console.error(error);
+        }
+        return [];
+    }
+    evaluateScrollButtons(tList) {
+        const needsScroll = tList.scrollWidth > tList.clientWidth;
+        this.showScrollLeft = needsScroll && tList.scrollLeft > 1;
+        this.showScrollRight =
+            needsScroll && tList.scrollLeft < tList.scrollWidth - tList.clientWidth;
+    }
+    scroll(left) {
+        var _a;
+        let step = this.arrowScrollDistance || 100;
+        if (left) {
+            step *= -1;
+        }
+        (_a = this.scrollContainer) === null || _a === void 0 ? void 0 : _a.scrollBy({
+            top: 0,
+            left: step,
+            behavior: "smooth",
+        });
+    }
+    initTabList() {
+        if (this._ref) {
+            const tabList = this._ref.querySelector(".db-tab-list");
+            if (tabList) {
+                const container = tabList.querySelector('[role="tablist"]');
+                if (container) {
+                    container.setAttribute("aria-orientation", this.orientation || "horizontal");
+                    if (this.behavior === "arrows") {
+                        this.scrollContainer = container;
+                        this.evaluateScrollButtons(container);
+                        container.addEventListener("scroll", () => {
+                            this.evaluateScrollButtons(container);
+                        });
+                    }
+                }
+            }
+        }
+    }
+    initTabs(init) {
+        if (this._ref) {
+            const tabItems = Array.from(this._ref.getElementsByClassName("db-tab-item"));
+            for (const tabItem of tabItems) {
+                const index = tabItems.indexOf(tabItem);
+                const label = tabItem.querySelector("label");
+                const input = tabItem.querySelector("input");
+                if (input && label) {
+                    if (!input.id) {
+                        const tabId = `${this._name}-tab-${index}`;
+                        label.setAttribute("for", tabId);
+                        input.setAttribute("aria-controls", `${this._name}-tab-panel-${index}`);
+                        input.id = tabId;
+                        input.setAttribute("name", this._name);
+                    }
+                    if (init) {
+                        // Auto select
+                        const autoSelect = !this.initialSelectedMode || this.initialSelectedMode === "auto";
+                        const shouldAutoSelect = (this.initialSelectedIndex == null && index === 0) ||
+                            this.initialSelectedIndex === index;
+                        if (autoSelect && shouldAutoSelect) {
+                            input.click();
+                        }
+                    }
+                }
+            }
+            const tabPanels = Array.from(this._ref.querySelectorAll(":is(:scope > .db-tab-panel, :scope > db-tab-panel > .db-tab-panel)"));
+            for (const panel of tabPanels) {
+                if (panel.id)
+                    continue;
+                const index = tabPanels.indexOf(panel);
+                panel.id = `${this._name}-tab-panel-${index}`;
+                panel.setAttribute("aria-labelledby", `${this._name}-tab-${index}`);
+            }
+        }
+    }
+    /**
+     * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.
+     * @param element  the ref for the component
+     * @param customElementSelector  the custom element like `my-component`
+     */
+    enableAttributePassing(element, customElementSelector) {
+        const parent = element === null || element === void 0 ? void 0 : element.closest(customElementSelector);
+        if (element && parent) {
+            const attributes = parent.attributes;
+            for (let i = 0; i < attributes.length; i++) {
+                const attr = attributes.item(i);
+                if (attr &&
+                    (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))) {
+                    element.setAttribute(attr.name, attr.value);
+                    parent.removeAttribute(attr.name);
+                }
+                if (attr && attr.name === "class") {
+                    const isWebComponent = attr.value.includes("hydrated");
+                    const value = attr.value.replace("hydrated", "").trim();
+                    const currentClass = element.getAttribute("class");
+                    element.setAttribute(attr.name, `${currentClass ? `${currentClass} ` : ""}${value}`);
+                    if (isWebComponent) {
+                        // Stencil is using this class for lazy loading component
+                        parent.setAttribute("class", "hydrated");
+                    }
+                    else {
+                        parent.removeAttribute(attr.name);
+                    }
+                }
+            }
+        }
+    }
+    componentDidLoad() {
+        this.enableAttributePassing(this._ref, "db-tabs");
+        this._id = this.id || this._id;
+        this._name = `tabs-${this.name || uuid()}`;
+        this.initialized = true;
+    }
+    componentDidUpdate() {
+        if (this._ref && this.initialized) {
+            this.initTabList();
+            this.initTabs(true);
+            const tabList = this._ref.querySelector(".db-tab-list");
+            if (tabList) {
+                const observer = new MutationObserver((mutations) => {
+                    mutations.forEach((mutation) => {
+                        if (mutation.removedNodes.length || mutation.addedNodes.length) {
+                            this.initTabList();
+                            this.initTabs();
+                        }
+                    });
+                });
+                observer.observe(tabList, {
+                    childList: true,
+                    subtree: true,
+                });
+            }
+            this.initialized = false;
+        }
+    }
+    render() {
+        var _a, _b, _c, _d;
+        return (h("div", { key: '21022d470b48c2c96722eba446dee5b0a2dac8bf', 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" }, this.showScrollLeft ? (h("db-button", { class: "tabs-scroll-left", variant: "ghost", icon: "chevron_left", 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", noText: true, onClick: () => this.scroll() }, "Scroll right")) : null, h("slot", { key: '79d11e4acb87af7cd40fb54ffae5c1affb28f3ba' })));
+    }
+    static get is() { return "db-tabs"; }
+    static get properties() {
+        return {
+            "id": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "DBTabsProps[\"id\"]",
+                    "resolved": "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": "id",
+                "reflect": false
+            },
+            "name": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "DBTabsProps[\"name\"]",
+                    "resolved": "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": "name",
+                "reflect": false
+            },
+            "arrowScrollDistance": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "DBTabsProps[\"arrowScrollDistance\"]",
+                    "resolved": "number",
+                    "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": "arrow-scroll-distance",
+                "reflect": false
+            },
+            "orientation": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "DBTabsProps[\"orientation\"]",
+                    "resolved": "\"horizontal\" | \"vertical\"",
+                    "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": "orientation",
+                "reflect": false
+            },
+            "behavior": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "DBTabsProps[\"behavior\"]",
+                    "resolved": "\"arrows\" | \"scrollbar\"",
+                    "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": "behavior",
+                "reflect": false
+            },
+            "initialSelectedMode": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "DBTabsProps[\"initialSelectedMode\"]",
+                    "resolved": "\"auto\" | \"manually\"",
+                    "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": "initial-selected-mode",
+                "reflect": false
+            },
+            "initialSelectedIndex": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "DBTabsProps[\"initialSelectedIndex\"]",
+                    "resolved": "number",
+                    "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": "initial-selected-index",
+                "reflect": false
+            },
+            "className": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "DBTabsProps[\"className\"]",
+                    "resolved": "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": "classname",
+                "reflect": false
+            },
+            "alignment": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "DBTabsProps[\"alignment\"]",
+                    "resolved": "\"center\" | \"start\"",
+                    "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": "alignment",
+                "reflect": false
+            },
+            "width": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "DBTabsProps[\"width\"]",
+                    "resolved": "\"auto\" | \"full\"",
+                    "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": "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
+            }
+        };
+    }
+    static get states() {
+        return {
+            "_id": {},
+            "_name": {},
+            "initialized": {},
+            "showScrollLeft": {},
+            "showScrollRight": {},
+            "scrollContainer": {}
+        };
+    }
+}
+//# sourceMappingURL=tabs.js.map