@db-ux/wc-core-components 4.10.2 → 4.11.1

package/dist/cjs/db-table-body_3.cjs.entry.js

@@ -0,0 +1,235 @@
+'use strict';
+
+var index = require('./index-C313bRqJ.js');
+var index$1 = require('./index-spuu3sXz.js');
+
+const DBTableBody = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+    }
+    /**
+     * 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 !== 'data-density' &&
+                    (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))) {
+                    if (attr.value) {
+                        element.setAttribute(attr.name, attr.value);
+                    }
+                    else {
+                        element.removeAttribute(attr.name);
+                    }
+                    parent.removeAttribute(attr.name);
+                }
+                else if (attr && ["style"].includes(attr.name)) {
+                    element.setAttribute(attr.name, attr.value);
+                    parent.removeAttribute(attr.name);
+                }
+                else 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 ? ` ${value}` : ""}`);
+                    if (isWebComponent) {
+                        // Stencil is using this class for lazy loading component
+                        parent.setAttribute("class", "hydrated");
+                    }
+                    else {
+                        parent.removeAttribute(attr.name);
+                    }
+                }
+            }
+        }
+    }
+    componentDidLoad() {
+        if (typeof document !== "undefined" && this.rootElement && this.rootElement.dataset.connect) {
+            const connectedElement = document.querySelector(`[data-connect-id="${this.rootElement.dataset.connect}"]`);
+            if (connectedElement) {
+                connectedElement.remove();
+            }
+        }
+        this.enableAttributePassing(this._ref, "db-table-body");
+    }
+    render() {
+        var _a;
+        return (index.h("tbody", { key: 'b6033bbe9cdcdb6bb9d292f68e980a6737fef9fa', class: index$1.cls("db-table-body", this.className), ref: (el) => {
+                this._ref = el;
+            }, id: this.id }, this.rows ? ((_a = this.rows) === null || _a === void 0 ? void 0 : _a.map((row, index$2) => {
+            var _a, _b, _c;
+            return (index.h("db-table-row", { class: (_a = row.className) !== null && _a !== void 0 ? _a : row.class, key: `${(_c = (_b = row.id) !== null && _b !== void 0 ? _b : this.id) !== null && _c !== void 0 ? _c : index$1.uuid()}-table-body-row-${index$2}`, cells: row.cells, interactive: row.interactive, id: row.id }));
+        })) : (index.h("slot", null))));
+    }
+    get rootElement() { return index.getElement(this); }
+};
+
+const DBTableFooter = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+    }
+    /**
+     * 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 !== 'data-density' &&
+                    (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))) {
+                    if (attr.value) {
+                        element.setAttribute(attr.name, attr.value);
+                    }
+                    else {
+                        element.removeAttribute(attr.name);
+                    }
+                    parent.removeAttribute(attr.name);
+                }
+                else if (attr && ["style"].includes(attr.name)) {
+                    element.setAttribute(attr.name, attr.value);
+                    parent.removeAttribute(attr.name);
+                }
+                else 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 ? ` ${value}` : ""}`);
+                    if (isWebComponent) {
+                        // Stencil is using this class for lazy loading component
+                        parent.setAttribute("class", "hydrated");
+                    }
+                    else {
+                        parent.removeAttribute(attr.name);
+                    }
+                }
+            }
+        }
+    }
+    componentDidLoad() {
+        if (typeof document !== "undefined" && this.rootElement && this.rootElement.dataset.connect) {
+            const connectedElement = document.querySelector(`[data-connect-id="${this.rootElement.dataset.connect}"]`);
+            if (connectedElement) {
+                connectedElement.remove();
+            }
+        }
+        this.enableAttributePassing(this._ref, "db-table-footer");
+    }
+    render() {
+        var _a;
+        return (index.h("tfoot", { key: '735f3ce4c1d6a3305993a8de60c797e9ce2bcd20', class: index$1.cls("db-table-footer", this.className), ref: (el) => {
+                this._ref = el;
+            }, id: this.id }, this.rows ? ((_a = this.rows) === null || _a === void 0 ? void 0 : _a.map((row, index$2) => {
+            var _a, _b, _c;
+            return (index.h("db-table-row", { class: (_a = row.className) !== null && _a !== void 0 ? _a : row.class, key: `${(_c = (_b = row.id) !== null && _b !== void 0 ? _b : this.id) !== null && _c !== void 0 ? _c : index$1.uuid()}-table-footer-row-${index$2}`, cells: row.cells, interactive: row.interactive, id: row.id }));
+        })) : (index.h("slot", null))));
+    }
+    get rootElement() { return index.getElement(this); }
+};
+
+const DBTableHead = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.observer = undefined;
+    }
+    getCells(cells) {
+        return cells === null || cells === void 0 ? void 0 : cells.map((cell) => (Object.assign(Object.assign({}, cell), { headerCell: true })));
+    }
+    setupObserver(element) {
+        if (!element)
+            return;
+        const parent = element.closest("db-table-head");
+        if (!parent || this.observer)
+            return;
+        this.observer = new MutationObserver((mutations) => {
+            if (mutations.some((mutation) => {
+                var _a;
+                const attr = mutation.target.attributes.getNamedItem((_a = mutation.attributeName) !== null && _a !== void 0 ? _a : "");
+                return (attr === null || attr === void 0 ? void 0 : attr.value) !== mutation.oldValue;
+            })) {
+                this.enableAttributePassing(element, "db-table-head");
+            }
+        });
+        this.observer.observe(parent, {
+            attributes: true,
+            attributeOldValue: true,
+        });
+    }
+    /**
+     * 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 !== 'data-density' &&
+                    (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))) {
+                    if (attr.value) {
+                        element.setAttribute(attr.name, attr.value);
+                    }
+                    else {
+                        element.removeAttribute(attr.name);
+                    }
+                    parent.removeAttribute(attr.name);
+                }
+                else if (attr && ["style"].includes(attr.name)) {
+                    element.setAttribute(attr.name, attr.value);
+                    parent.removeAttribute(attr.name);
+                }
+                else 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 ? ` ${value}` : ""}`);
+                    if (isWebComponent) {
+                        // Stencil is using this class for lazy loading component
+                        parent.setAttribute("class", "hydrated");
+                    }
+                    else {
+                        parent.removeAttribute(attr.name);
+                    }
+                }
+            }
+        }
+    }
+    componentDidLoad() {
+        if (typeof document !== "undefined" && this.rootElement && this.rootElement.dataset.connect) {
+            const connectedElement = document.querySelector(`[data-connect-id="${this.rootElement.dataset.connect}"]`);
+            if (connectedElement) {
+                connectedElement.remove();
+            }
+        }
+        this.enableAttributePassing(this._ref, "db-table-head");
+        this.setupObserver(this._ref);
+    }
+    disconnectedCallback() {
+        var _a;
+        (_a = this.observer) === null || _a === void 0 ? void 0 : _a.disconnect();
+    }
+    render() {
+        var _a;
+        return (index.h("thead", { key: '340673440fd36e5522f70683bef5a4356f73cb69', class: index$1.cls("db-table-head", this.className), ref: (el) => {
+                this._ref = el;
+            }, id: this.id }, this.rows ? ((_a = this.rows) === null || _a === void 0 ? void 0 : _a.map((row, index$2) => {
+            var _a, _b, _c;
+            return (index.h("db-table-row", { class: (_a = row.className) !== null && _a !== void 0 ? _a : row.class, key: `${(_c = (_b = row.id) !== null && _b !== void 0 ? _b : this.id) !== null && _c !== void 0 ? _c : index$1.uuid()}-table-head-row-${index$2}`, cells: this.getCells(row.cells), subHeaderEmphasis: row.subHeaderEmphasis, interactive: row.interactive, id: row.id }));
+        })) : (index.h("slot", null))));
+    }
+    get rootElement() { return index.getElement(this); }
+};
+
+exports.db_table_body = DBTableBody;
+exports.db_table_footer = DBTableFooter;
+exports.db_table_head = DBTableHead;

package/dist/cjs/{db-link.cjs.entry.js → db-table-caption.cjs.entry.js}

@@ -1,11 +1,32 @@
 'use strict';
 
-var index = require('./index-HN8AqU2e.js');
-var index$1 = require('./index-2_9ESkQu.js');
+var index = require('./index-C313bRqJ.js');
+var index$1 = require('./index-spuu3sXz.js');
 
-const DBLink = class {
+const DBTableCaption = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
+        this.observer = undefined;
+    }
+    setupObserver(element) {
+        if (!element)
+            return;
+        const parent = element.closest("db-table-caption");
+        if (!parent || this.observer)
+            return;
+        this.observer = new MutationObserver((mutations) => {
+            if (mutations.some((mutation) => {
+                var _a;
+                const attr = mutation.target.attributes.getNamedItem((_a = mutation.attributeName) !== null && _a !== void 0 ? _a : "");
+                return (attr === null || attr === void 0 ? void 0 : attr.value) !== mutation.oldValue;
+            })) {
+                this.enableAttributePassing(element, "db-table-caption");
+            }
+        });
+        this.observer.observe(parent, {
+            attributes: true,
+            attributeOldValue: true,
+        });
     }
     /**
      * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.
@@ -20,10 +41,15 @@ const DBLink = class {
                 const attr = attributes.item(i);
                 if (attr && attr.name !== 'data-density' &&
                     (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))) {
-                    element.setAttribute(attr.name, attr.value);
+                    if (attr.value) {
+                        element.setAttribute(attr.name, attr.value);
+                    }
+                    else {
+                        element.removeAttribute(attr.name);
+                    }
                     parent.removeAttribute(attr.name);
                 }
-                else if (attr && attr.name !== 'data-density' && attr.name !== "class" && attr.name === "style") {
+                else if (attr && ["style"].includes(attr.name)) {
                     element.setAttribute(attr.name, attr.value);
                     parent.removeAttribute(attr.name);
                 }
@@ -31,7 +57,7 @@ const DBLink = 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}`);
+                    element.setAttribute(attr.name, `${currentClass ? currentClass : ""}${value ? ` ${value}` : ""}`);
                     if (isWebComponent) {
                         // Stencil is using this class for lazy loading component
                         parent.setAttribute("class", "hydrated");
@@ -50,15 +76,19 @@ const DBLink = class {
                 connectedElement.remove();
             }
         }
-        this.enableAttributePassing(this._ref, "db-link");
+        this.enableAttributePassing(this._ref, "db-table-caption");
+        this.setupObserver(this._ref);
+    }
+    disconnectedCallback() {
+        var _a;
+        (_a = this.observer) === null || _a === void 0 ? void 0 : _a.disconnect();
     }
     render() {
-        var _a, _b, _c, _d;
-        return (index.h("a", { key: '5dd3f3df5614e0e717feadc833d8fe2fe8825479', class: index$1.cls("db-link", this.className), ref: (el) => {
+        return (index.h("caption", { key: '5ef3476c6c9879f1fcf8548e11bea82516bd29d1', class: index$1.cls("db-table-caption", this.className), ref: (el) => {
                 this._ref = el;
-            }, id: (_a = this.id) !== null && _a !== void 0 ? _a : (_b = this.propOverrides) === null || _b === void 0 ? void 0 : _b.id, href: this.href, target: this.target, rel: this.rel, role: this.role, referrerPolicy: (_c = this.referrerpolicy) !== null && _c !== void 0 ? _c : this.referrerPolicy, hrefLang: this.hreflang, "aria-disabled": index$1.getBooleanAsString(this.disabled), tabIndex: this.disabled ? -1 : 0, "data-size": this.size, "data-show-icon-trailing": index$1.getBooleanAsString((_d = this.showIcon) !== null && _d !== void 0 ? _d : true), "data-variant": this.variant, "data-content": this.content || "internal", "data-wrap": index$1.getBooleanAsString(this.wrap) }, this.text ? this.text : null, index.h("slot", { key: 'c5dae4b61e3829e803a2ff89cfd0942cc4d6577d' })));
+            }, id: this.id }, index.h("slot", { key: 'e20d1d699e7ab50422c0d40bdf058c8863ae4991' })));
     }
     get rootElement() { return index.getElement(this); }
 };
 
-exports.db_link = DBLink;
+exports.db_table_caption = DBTableCaption;

package/dist/cjs/db-table.cjs.entry.js

@@ -0,0 +1,189 @@
+'use strict';
+
+var index = require('./index-C313bRqJ.js');
+var index$1 = require('./index-spuu3sXz.js');
+
+const DBTable = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this._data = undefined;
+        this._style = undefined;
+        this.observer = undefined;
+    }
+    convertData() {
+        try {
+            if (typeof this.data === "string") {
+                return JSON.parse(this.data);
+            }
+            return this.data;
+        }
+        catch (error) {
+            console.error(error);
+        }
+        return {};
+    }
+    setupObserver(element) {
+        if (!element)
+            return;
+        const parent = element.closest("db-table");
+        if (!parent || this.observer)
+            return;
+        this.observer = new MutationObserver((mutations) => {
+            if (mutations.some((mutation) => {
+                var _a;
+                const attr = mutation.target.attributes.getNamedItem((_a = mutation.attributeName) !== null && _a !== void 0 ? _a : "");
+                return (attr === null || attr === void 0 ? void 0 : attr.value) !== mutation.oldValue;
+            })) {
+                this.enableAttributePassing(element, "db-table");
+            }
+        });
+        this.observer.observe(parent, {
+            attributes: true,
+            attributeOldValue: true,
+        });
+    }
+    /**
+     * 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 !== 'data-density' &&
+                    (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))) {
+                    if (attr.value) {
+                        element.setAttribute(attr.name, attr.value);
+                    }
+                    else {
+                        element.removeAttribute(attr.name);
+                    }
+                    parent.removeAttribute(attr.name);
+                }
+                else if (attr && ["style"].includes(attr.name)) {
+                    element.setAttribute(attr.name, attr.value);
+                    parent.removeAttribute(attr.name);
+                }
+                else 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 ? ` ${value}` : ""}`);
+                    if (isWebComponent) {
+                        // Stencil is using this class for lazy loading component
+                        parent.setAttribute("class", "hydrated");
+                    }
+                    else {
+                        parent.removeAttribute(attr.name);
+                    }
+                }
+            }
+        }
+    }
+    watch0Fn() {
+        if (this.data) {
+            this._data = this.convertData();
+        }
+        else {
+            this._data = undefined;
+        }
+    }
+    watch0() {
+        this.watch0Fn();
+    }
+    watch1Fn() {
+        if (this._ref && this.mobileVariant === "list") {
+            // Delay for angular
+            void index$1.delay(() => {
+                const table = this._ref;
+                if (!table)
+                    return;
+                const headerCells = table.querySelectorAll("thead tr th");
+                if (headerCells.length) {
+                    const otherRows = table.querySelectorAll(":is(tbody,tfoot) tr");
+                    otherRows.forEach((row) => {
+                        const cells = row.querySelectorAll(":is(td,th)");
+                        cells.forEach((cell, index) => {
+                            const headerCell = headerCells[index];
+                            if (headerCell) {
+                                // Use only direct text nodes to avoid including text from nested elements (e.g. sort buttons)
+                                const directText = Array.from(headerCell.childNodes)
+                                    .filter((node) => node.nodeType === Node.TEXT_NODE)
+                                    .map((node) => { var _a; return (_a = node.textContent) === null || _a === void 0 ? void 0 : _a.trim(); })
+                                    .filter(Boolean)
+                                    .join(" ");
+                                if (directText) {
+                                    cell.dataset["header"] = directText;
+                                }
+                            }
+                        });
+                    });
+                }
+            }, 1);
+        }
+    }
+    watch1() {
+        this.watch1Fn();
+    }
+    watch2Fn() {
+        if (this.columnSizes) {
+            const columnStyles = {};
+            Object.entries(this.columnSizes).forEach(([key, value]) => {
+                columnStyles[`--db-table-column-size-${key}`] = value;
+            });
+            this._style = columnStyles;
+        }
+        else {
+            this._style = undefined;
+        }
+    }
+    watch2() {
+        this.watch2Fn();
+    }
+    componentDidLoad() {
+        if (typeof document !== "undefined" && this.rootElement && this.rootElement.dataset.connect) {
+            const connectedElement = document.querySelector(`[data-connect-id="${this.rootElement.dataset.connect}"]`);
+            if (connectedElement) {
+                connectedElement.remove();
+            }
+        }
+        this.enableAttributePassing(this._ref, "db-table");
+        this.setupObserver(this._ref);
+        this.watch0Fn();
+        this.watch1Fn();
+        this.watch2Fn();
+    }
+    disconnectedCallback() {
+        var _a;
+        (_a = this.observer) === null || _a === void 0 ? void 0 : _a.disconnect();
+    }
+    render() {
+        var _a, _b, _c, _d, _e, _f;
+        return (index.h("div", { key: '7e6ea12b6cb4b2ddcc12262cd28bfec13baa55c0', class: index$1.cls("db-table", this.className), style: this._style, "data-width": this.width, "data-size": this.size, "data-divider": this.divider, "data-variant": this.variant, "data-mobile-variant": this.mobileVariant, "data-show-caption": index$1.getBooleanAsString(this.showCaption), "data-sticky-header": this.stickyHeader }, index.h("table", { key: '99fc11d1bb68297550e973293f519ad21f6953a0', ref: (el) => {
+                this._ref = el;
+            }, id: this.id }, this.captionPlain ? (index.h("caption", null, this.captionPlain)) : (index.h("slot", { name: "caption" })), this._data ? (index.h(index.Fragment, null, ((_a = this._data) === null || _a === void 0 ? void 0 : _a.header) ? (index.h("db-table-head", { rows: (_b = this._data) === null || _b === void 0 ? void 0 : _b.header })) : null, ((_c = this._data) === null || _c === void 0 ? void 0 : _c.body) ? (index.h("db-table-body", { rows: (_d = this._data) === null || _d === void 0 ? void 0 : _d.body })) : null, ((_e = this._data) === null || _e === void 0 ? void 0 : _e.footer) ? (index.h("db-table-footer", { rows: (_f = this._data) === null || _f === void 0 ? void 0 : _f.footer })) : null)) : (index.h("slot", null)))));
+    }
+    get rootElement() { return index.getElement(this); }
+    static get watchers() { return {
+        "data": [{
+                "watch0": 0
+            }],
+        "mobileVariant": [{
+                "watch1": 0
+            }],
+        "_ref": [{
+                "watch1": 0
+            }],
+        "_data": [{
+                "watch1": 0
+            }],
+        "columnSizes": [{
+                "watch2": 0
+            }]
+    }; }
+};
+
+exports.db_table = DBTable;

package/dist/cjs/db-tabs.cjs.entry.js

@@ -1,7 +1,7 @@
 'use strict';
 
-var index = require('./index-HN8AqU2e.js');
-var index$1 = require('./index-2_9ESkQu.js');
+var index = require('./index-C313bRqJ.js');
+var index$1 = require('./index-spuu3sXz.js');
 
 const DBTabs = class {
     constructor(hostRef) {
@@ -14,6 +14,7 @@ const DBTabs = class {
         this.showScrollRight = false;
         this.scrollContainer = null;
         this._resizeObserver = undefined;
+        this.observer = undefined;
     }
     convertTabs() {
         try {
@@ -134,6 +135,26 @@ const DBTabs = class {
             }
         }
     }
+    setupObserver(element) {
+        if (!element)
+            return;
+        const parent = element.closest("db-tabs");
+        if (!parent || this.observer)
+            return;
+        this.observer = new MutationObserver((mutations) => {
+            if (mutations.some((mutation) => {
+                var _a;
+                const attr = mutation.target.attributes.getNamedItem((_a = mutation.attributeName) !== null && _a !== void 0 ? _a : "");
+                return (attr === null || attr === void 0 ? void 0 : attr.value) !== mutation.oldValue;
+            })) {
+                this.enableAttributePassing(element, "db-tabs");
+            }
+        });
+        this.observer.observe(parent, {
+            attributes: true,
+            attributeOldValue: true,
+        });
+    }
     /**
      * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.
      * @param element  the ref for the component
@@ -147,10 +168,15 @@ const DBTabs = class {
                 const attr = attributes.item(i);
                 if (attr && attr.name !== 'data-density' &&
                     (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))) {
-                    element.setAttribute(attr.name, attr.value);
+                    if (attr.value) {
+                        element.setAttribute(attr.name, attr.value);
+                    }
+                    else {
+                        element.removeAttribute(attr.name);
+                    }
                     parent.removeAttribute(attr.name);
                 }
-                else if (attr && attr.name !== 'data-density' && attr.name !== "class" && attr.name === "style") {
+                else if (attr && ["style"].includes(attr.name)) {
                     element.setAttribute(attr.name, attr.value);
                     parent.removeAttribute(attr.name);
                 }
@@ -158,7 +184,7 @@ const DBTabs = 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}`);
+                    element.setAttribute(attr.name, `${currentClass ? currentClass : ""}${value ? ` ${value}` : ""}`);
                     if (isWebComponent) {
                         // Stencil is using this class for lazy loading component
                         parent.setAttribute("class", "hydrated");
@@ -203,21 +229,29 @@ const DBTabs = class {
             }
         }
         this.enableAttributePassing(this._ref, "db-tabs");
-        this._name = `tabs-${this.name || index$1.uuid()}`;
-        this.initialized = true;
+        const onMountHook_0 = () => {
+            this._name = `tabs-${this.name || index$1.uuid()}`;
+            this.initialized = true;
+        };
+        onMountHook_0();
+        const onMountHook_1 = () => {
+            this.setupObserver(this._ref);
+        };
+        onMountHook_1();
         this.watch0Fn();
     }
     disconnectedCallback() {
-        var _a;
+        var _a, _b;
         (_a = this._resizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
         this._resizeObserver = undefined;
+        (_b = this.observer) === null || _b === void 0 ? void 0 : _b.disconnect();
     }
     render() {
         var _a, _b, _c, _d, _e, _f;
-        return (index.h("div", { key: '71e69e614a98de1b0fe789b210815d03bcee6286', class: index$1.cls("db-tabs", this.className), ref: (el) => {
+        return (index.h("div", { key: 'aca0d156b8d50c5951a982e5ab35d2644b4989e7', class: index$1.cls("db-tabs", this.className), ref: (el) => {
                 this._ref = el;
             }, id: (_a = this.id) !== null && _a !== void 0 ? _a : (_b = this.propOverrides) === null || _b === void 0 ? void 0 : _b.id, "data-orientation": this.orientation, "data-scroll-behavior": this.behavior, "data-alignment": (_c = this.alignment) !== null && _c !== void 0 ? _c : "start", "data-width": (_d = this.width) !== null && _d !== void 0 ? _d : "auto", onInput: (event) => this.handleChange(event), onChange: (event) => this.handleChange(event) }, this.showScrollLeft ? (index.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 ? (index.h(index.Fragment, null, index.h("db-tab-list", null, (_e = this.convertTabs()) === null || _e === void 0 ? void 0 : _e.map((tab, index$1) => (index.h("db-tab-item", { key: this.name + "tab-item" + index$1, active: tab.active, label: tab.label, iconTrailing: tab.iconTrailing, icon: tab.icon, noText: tab.noText })))), (_f = this.convertTabs()) === null || _f === void 0 ? void 0 :
-            _f.map((tab, index$1) => (index.h("db-tab-panel", { key: this.name + "tab-panel" + index$1, content: tab.content }, tab.children))))) : null, this.showScrollRight ? (index.h("db-button", { class: "tabs-scroll-right", variant: "ghost", icon: "chevron_right", type: "button", noText: true, onClick: () => this.scroll() }, "Scroll right")) : null, index.h("slot", { key: '2e8a007adff7051a1266f88b95419a510ce7494a' })));
+            _f.map((tab, index$1) => (index.h("db-tab-panel", { key: this.name + "tab-panel" + index$1, content: tab.content }, tab.children))))) : null, this.showScrollRight ? (index.h("db-button", { class: "tabs-scroll-right", variant: "ghost", icon: "chevron_right", type: "button", noText: true, onClick: () => this.scroll() }, "Scroll right")) : null, index.h("slot", { key: 'b05907467917bb82f9ef6b9ce3774e52411fb822' })));
     }
     get rootElement() { return index.getElement(this); }
     static get watchers() { return {