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

package/dist/esm/db-tab-item_3.entry.js

@@ -10,6 +10,7 @@ const DBTabItem = class {
         this.initialized = false;
         this._listenerAdded = false;
         this.boundSetSelectedOnChange = undefined;
+        this.observer = undefined;
     }
     setSelectedOnChange(event) {
         event.stopPropagation();
@@ -31,6 +32,26 @@ const DBTabItem = class {
             this.change.emit(event);
         }
     }
+    setupObserver(element) {
+        if (!element)
+            return;
+        const parent = element.closest("db-tab-item");
+        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-tab-item");
+            }
+        });
+        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
@@ -44,10 +65,15 @@ const DBTabItem = 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);
                 }
@@ -55,7 +81,7 @@ const DBTabItem = 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");
@@ -103,25 +129,33 @@ const DBTabItem = class {
             }
         }
         this.enableAttributePassing(this._ref, "db-tab-item");
-        this.boundSetSelectedOnChange = this.setSelectedOnChange.bind(this);
-        this.initialized = true;
+        const onMountHook_0 = () => {
+            this.boundSetSelectedOnChange = this.setSelectedOnChange.bind(this);
+            this.initialized = true;
+        };
+        onMountHook_0();
+        const onMountHook_1 = () => {
+            this.setupObserver(this._ref);
+        };
+        onMountHook_1();
         this.watch0Fn();
         this.watch1Fn();
     }
     disconnectedCallback() {
-        var _a;
+        var _a, _b;
         if (this._listenerAdded && this._ref && this.boundSetSelectedOnChange) {
             (_a = this._ref
                 .closest("[role=tablist]")) === null || _a === void 0 ? void 0 : _a.removeEventListener("change", this.boundSetSelectedOnChange);
             this._listenerAdded = false;
         }
+        (_b = this.observer) === null || _b === void 0 ? void 0 : _b.disconnect();
     }
     render() {
         var _a, _b, _c, _d, _e;
-        return (h("li", { key: '8189c400a6ac975657082338dd31d96a2d0c38d9', class: cls("db-tab-item", this.className), role: "none" }, h("label", { key: '08c6f0760a4cc6f5758d22380c94331858f4823d', htmlFor: (_a = this.id) !== null && _a !== void 0 ? _a : (_b = this.propOverrides) === null || _b === void 0 ? void 0 : _b.id, "data-icon": (_c = this.iconLeading) !== null && _c !== void 0 ? _c : this.icon, "data-icon-trailing": this.iconTrailing, "data-show-icon": getBooleanAsString(this.showIconLeading, "showIconLeading") ||
-                getBooleanAsString(this.showIcon, "showIcon"), "data-show-icon-trailing": getBooleanAsString(this.showIconTrailing, "showIconTrailing"), "data-no-text": getBooleanAsString(this.noText, "noText") }, h("input", { key: '6729729ae705d60fa25cb49850cc54166b7f56a0', type: "radio", role: "tab", disabled: getBoolean(this.disabled, "disabled"), "aria-selected": this._selected, checked: getBoolean(this.checked, "checked"), ref: (el) => {
+        return (h("li", { key: '003e5b968c65ba01df1b97e8f75592aee31125d9', class: cls("db-tab-item", this.className), role: "none" }, h("label", { key: '682e5a3cf7036abcbbbbbba9f42ce534d7a4145d', htmlFor: (_a = this.id) !== null && _a !== void 0 ? _a : (_b = this.propOverrides) === null || _b === void 0 ? void 0 : _b.id, "data-icon": (_c = this.iconLeading) !== null && _c !== void 0 ? _c : this.icon, "data-icon-trailing": this.iconTrailing, "data-show-icon": getBooleanAsString(this.showIconLeading, "showIconLeading") ||
+                getBooleanAsString(this.showIcon, "showIcon"), "data-show-icon-trailing": getBooleanAsString(this.showIconTrailing, "showIconTrailing"), "data-no-text": getBooleanAsString(this.noText, "noText") }, h("input", { key: 'ffb91a8e7248a8e5a2a7a05c6828fc6203e1eb37', type: "radio", role: "tab", disabled: getBoolean(this.disabled, "disabled"), "aria-selected": this._selected, checked: getBoolean(this.checked, "checked"), ref: (el) => {
                 this._ref = el;
-            }, name: this._name, id: (_d = this.id) !== null && _d !== void 0 ? _d : (_e = this.propOverrides) === null || _e === void 0 ? void 0 : _e.id, onInput: (event) => this.handleChange(event) }), this.label ? this.label : null, h("slot", { key: 'eb4bc6568c4c6d63706d2f5927ea73fd5d40d6ac' }))));
+            }, name: this._name, id: (_d = this.id) !== null && _d !== void 0 ? _d : (_e = this.propOverrides) === null || _e === void 0 ? void 0 : _e.id, onInput: (event) => this.handleChange(event) }), this.label ? this.label : null, h("slot", { key: '2d079503cd365448cd054e05bfaec608ff476e04' }))));
     }
     get rootElement() { return getElement(this); }
     static get watchers() { return {
@@ -143,6 +177,27 @@ const DBTabItem = class {
 const DBTabList = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
+        this.observer = undefined;
+    }
+    setupObserver(element) {
+        if (!element)
+            return;
+        const parent = element.closest("db-tab-list");
+        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-tab-list");
+            }
+        });
+        this.observer.observe(parent, {
+            attributes: true,
+            attributeOldValue: true,
+        });
     }
     /**
      * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.
@@ -157,10 +212,15 @@ const DBTabList = 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);
                 }
@@ -168,7 +228,7 @@ const DBTabList = 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");
@@ -188,12 +248,17 @@ const DBTabList = class {
             }
         }
         this.enableAttributePassing(this._ref, "db-tab-list");
+        this.setupObserver(this._ref);
+    }
+    disconnectedCallback() {
+        var _a;
+        (_a = this.observer) === null || _a === void 0 ? void 0 : _a.disconnect();
     }
     render() {
         var _a, _b;
-        return (h("div", { key: '9459e474559fa115dc69cb188e4c490a522d035c', class: cls("db-tab-list", this.className), ref: (el) => {
+        return (h("div", { key: '2538ba05ecad54c8c29dda93a08acb61faf02309', class: cls("db-tab-list", 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 }, h("ul", { key: '7d2dbddd6ad03047abd8572b6125a53072ff94d0', role: "tablist" }, h("slot", { key: '10079c1b3bbc66157a0603e55ea1f5f48aee0faf' }))));
+            }, id: (_a = this.id) !== null && _a !== void 0 ? _a : (_b = this.propOverrides) === null || _b === void 0 ? void 0 : _b.id }, h("ul", { key: '86824302eb2cc92ca45a61d8bdec0f34cd679db6', role: "tablist" }, h("slot", { key: 'b56406b1e0291a29905b599531c0dccd9c035504' }))));
     }
     get rootElement() { return getElement(this); }
 };
@@ -201,6 +266,27 @@ const DBTabList = class {
 const DBTabPanel = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
+        this.observer = undefined;
+    }
+    setupObserver(element) {
+        if (!element)
+            return;
+        const parent = element.closest("db-tab-panel");
+        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-tab-panel");
+            }
+        });
+        this.observer.observe(parent, {
+            attributes: true,
+            attributeOldValue: true,
+        });
     }
     /**
      * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.
@@ -215,10 +301,15 @@ const DBTabPanel = 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);
                 }
@@ -226,7 +317,7 @@ const DBTabPanel = 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");
@@ -246,12 +337,20 @@ const DBTabPanel = class {
             }
         }
         this.enableAttributePassing(this._ref, "db-tab-panel");
+        const onMountHook_1 = () => {
+            this.setupObserver(this._ref);
+        };
+        onMountHook_1();
+    }
+    disconnectedCallback() {
+        var _a;
+        (_a = this.observer) === null || _a === void 0 ? void 0 : _a.disconnect();
     }
     render() {
         var _a, _b;
-        return (h("section", { key: 'c5b52e3d5bce98a32f2dba1956f58d707ae1b89b', class: cls("db-tab-panel", this.className), role: "tabpanel", ref: (el) => {
+        return (h("section", { key: 'd7179207343d512194f69f6d99a34897c146c00a', class: cls("db-tab-panel", this.className), role: "tabpanel", 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 }, this.content ? this.content : null, h("slot", { key: 'd64ba9e9cdbb15198934c7069f7e2390c3c443e8' })));
+            }, id: (_a = this.id) !== null && _a !== void 0 ? _a : (_b = this.propOverrides) === null || _b === void 0 ? void 0 : _b.id }, this.content ? this.content : null, h("slot", { key: 'dc745b430dd17f253cf9403c28f6c2cbd5b59020' })));
     }
     get rootElement() { return getElement(this); }
 };

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

@@ -18,10 +18,15 @@ const DBTableBody = 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);
                 }
@@ -29,7 +34,7 @@ const DBTableBody = 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");
@@ -52,7 +57,7 @@ const DBTableBody = class {
     }
     render() {
         var _a;
-        return (h("tbody", { key: 'c497d5a4be20eda6884e6e04b37ef7c9e211f307', class: cls("db-table-body", this.className), ref: (el) => {
+        return (h("tbody", { key: 'b6033bbe9cdcdb6bb9d292f68e980a6737fef9fa', class: 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) => {
             var _a, _b, _c;
@@ -79,10 +84,15 @@ const DBTableFooter = 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);
                 }
@@ -90,7 +100,7 @@ const DBTableFooter = 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");
@@ -113,7 +123,7 @@ const DBTableFooter = class {
     }
     render() {
         var _a;
-        return (h("tfoot", { key: 'ba1fcacfa32d5746615ba0aaaa5580a6c5c92f99', class: cls("db-table-footer", this.className), ref: (el) => {
+        return (h("tfoot", { key: '735f3ce4c1d6a3305993a8de60c797e9ce2bcd20', class: 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) => {
             var _a, _b, _c;
@@ -126,10 +136,31 @@ const DBTableFooter = class {
 const DBTableHead = class {
     constructor(hostRef) {
         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
@@ -143,10 +174,15 @@ const DBTableHead = 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);
                 }
@@ -154,7 +190,7 @@ const DBTableHead = 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");
@@ -174,10 +210,15 @@ const DBTableHead = class {
             }
         }
         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 (h("thead", { key: '1f192104b5b30bb15bc16d68f635382bc9d6817a', class: cls("db-table-head", this.className), ref: (el) => {
+        return (h("thead", { key: '340673440fd36e5522f70683bef5a4356f73cb69', class: 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) => {
             var _a, _b, _c;

package/dist/esm/db-table-caption.entry.js

@@ -4,6 +4,27 @@ import { c as cls } from './index-fumiz06Y.js';
 const DBTableCaption = class {
     constructor(hostRef) {
         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.
@@ -18,10 +39,15 @@ const DBTableCaption = 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);
                 }
@@ -29,7 +55,7 @@ const DBTableCaption = 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");
@@ -49,11 +75,16 @@ const DBTableCaption = class {
             }
         }
         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() {
-        return (h("caption", { key: '45129365b814f87e7d337464f8f768fb3d9bd9c8', class: cls("db-table-caption", this.className), ref: (el) => {
+        return (h("caption", { key: '5ef3476c6c9879f1fcf8548e11bea82516bd29d1', class: cls("db-table-caption", this.className), ref: (el) => {
                 this._ref = el;
-            }, id: this.id }, h("slot", { key: '80e7f4789799c755d2a03b55ef8ee7e05939bf96' })));
+            }, id: this.id }, h("slot", { key: 'e20d1d699e7ab50422c0d40bdf058c8863ae4991' })));
     }
     get rootElement() { return getElement(this); }
 };

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

@@ -6,6 +6,7 @@ const DBTable = class {
         registerInstance(this, hostRef);
         this._data = undefined;
         this._style = undefined;
+        this.observer = undefined;
     }
     convertData() {
         try {
@@ -19,6 +20,26 @@ const DBTable = class {
         }
         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
@@ -32,10 +53,15 @@ const DBTable = 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);
                 }
@@ -43,7 +69,7 @@ const DBTable = 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");
@@ -123,13 +149,18 @@ const DBTable = class {
             }
         }
         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 (h("div", { key: 'd4edb3348e35410ac540499f815e173237e533dc', class: 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": getBooleanAsString(this.showCaption), "data-sticky-header": this.stickyHeader }, h("table", { key: '2eda8c59f2c86a480691a1a4fae4a1fdaa63a6b1', ref: (el) => {
+        return (h("div", { key: '7e6ea12b6cb4b2ddcc12262cd28bfec13baa55c0', class: 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": getBooleanAsString(this.showCaption), "data-sticky-header": this.stickyHeader }, h("table", { key: '99fc11d1bb68297550e973293f519ad21f6953a0', ref: (el) => {
                 this._ref = el;
             }, id: this.id }, this.captionPlain ? (h("caption", null, this.captionPlain)) : (h("slot", { name: "caption" })), this._data ? (h(Fragment, null, ((_a = this._data) === null || _a === void 0 ? void 0 : _a.header) ? (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) ? (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) ? (h("db-table-footer", { rows: (_f = this._data) === null || _f === void 0 ? void 0 : _f.footer })) : null)) : (h("slot", null)))));
     }