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

package/dist/collection/components/divider/divider.js

@@ -5,6 +5,29 @@ import { h } from "@stencil/core";
 
  */
 export class DBDivider {
+    constructor() {
+        this.observer = undefined;
+    }
+    setupObserver(element) {
+        if (!element)
+            return;
+        const parent = element.closest("db-divider");
+        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-divider");
+            }
+        });
+        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
@@ -18,10 +41,15 @@ export class DBDivider {
                 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 +57,7 @@ export class DBDivider {
                     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,10 +77,15 @@ export class DBDivider {
             }
         }
         this.enableAttributePassing(this._ref, "db-divider");
+        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: 'fff7e6137a97f6cc76eed42c2a5225348d0f78a0', class: cls("db-divider", this.className), ref: (el) => {
+        return (h("div", { key: '09e35f9aa6912126375f69d68b75a1d64a2d0ba8', class: cls("db-divider", 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-margin": this.margin, "data-variant": this.variant, "data-emphasis": this.emphasis, "data-width": this.width }));
     }
@@ -241,5 +274,10 @@ export class DBDivider {
             }
         };
     }
+    static get states() {
+        return {
+            "observer": {}
+        };
+    }
     static get elementRef() { return "rootElement"; }
 }

package/dist/collection/components/drawer/drawer.js

@@ -8,6 +8,7 @@ import { h } from "@stencil/core";
 export class DBDrawer {
     constructor() {
         this.initialized = false;
+        this.observer = undefined;
     }
     handleClose(event, forceClose) {
         var _a;
@@ -71,6 +72,26 @@ export class DBDrawer {
             }
         }
     }
+    setupObserver(element) {
+        if (!element)
+            return;
+        const parent = element.closest("db-drawer");
+        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-drawer");
+            }
+        });
+        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
@@ -84,10 +105,15 @@ export class DBDrawer {
                 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);
                 }
@@ -95,7 +121,7 @@ export class DBDrawer {
                     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");
@@ -133,18 +159,29 @@ export class DBDrawer {
             }
         }
         this.enableAttributePassing(this._ref, "db-drawer");
-        this.handleDialogOpen();
-        this.initialized = true;
+        const onMountHook_0 = () => {
+            this.handleDialogOpen();
+            this.initialized = true;
+        };
+        onMountHook_0();
+        const onMountHook_1 = () => {
+            this.setupObserver(this._ref);
+        };
+        onMountHook_1();
         this.watch0Fn();
         this.watch1Fn();
     }
+    disconnectedCallback() {
+        var _a;
+        (_a = this.observer) === null || _a === void 0 ? void 0 : _a.disconnect();
+    }
     render() {
         var _a, _b, _c;
-        return (h("dialog", { key: 'a09369527805c993297bc3d27cf1f03c5e06f232', class: "db-drawer", id: (_a = this.id) !== null && _a !== void 0 ? _a : (_b = this.propOverrides) === null || _b === void 0 ? void 0 : _b.id, ref: (el) => {
+        return (h("dialog", { key: '68343ae9da612485135f6e0b01bd581de86d1dc6', class: "db-drawer", id: (_a = this.id) !== null && _a !== void 0 ? _a : (_b = this.propOverrides) === null || _b === void 0 ? void 0 : _b.id, ref: (el) => {
                 this._ref = el;
-            }, onClick: (event) => this.handleClose(event), onKeyDown: (event) => this.handleClose(event), "data-position": this.position, "data-backdrop": this.backdrop, "data-direction": this.direction, "data-variant": this.variant }, h("article", { key: 'cb35fccd92fcf6bab4d6027c29fc2ba0bb25e9ac', class: cls("db-drawer-container", this.className), ref: (el) => {
+            }, onClick: (event) => this.handleClose(event), onKeyDown: (event) => this.handleClose(event), "data-position": this.position, "data-backdrop": this.backdrop, "data-direction": this.direction, "data-variant": this.variant }, h("article", { key: 'b6a860730f150e365c684a2ed362f8ad3e84e862', class: cls("db-drawer-container", this.className), ref: (el) => {
                 this.dialogContainerRef = el;
-            }, "data-spacing": this.spacing, "data-width": this.width, "data-direction": this.direction, "data-rounded": getBooleanAsString(this.rounded) }, h("header", { key: '20a175ba0707e3cc207e1e57dd925b8234b86877', class: "db-drawer-header" }, h("div", { key: 'd317b29ff0d704aa50b3fbd0a8c86b94f7ab1dfa', class: "db-drawer-header-text" }, h("slot", { key: '1456a65346ebd9d52dafe48022cc0b343216cc09', name: "drawerHeader" })), h("db-button", { key: '6741766807bb56a24ed7bb385240093a3a1e5f7f', class: "button-close-drawer", icon: "cross", variant: "ghost", id: this.closeButtonId, noText: true, onClick: (event) => this.handleClose(event, true) }, (_c = this.closeButtonText) !== null && _c !== void 0 ? _c : DEFAULT_CLOSE_BUTTON)), h("div", { key: 'dea536d8bd27dccdb7edd476defc68beed65254f', class: "db-drawer-content" }, h("slot", { key: 'bcb4ed27199eb79f9d6c13da82d7be87d2f5e54b' })))));
+            }, "data-spacing": this.spacing, "data-width": this.width, "data-direction": this.direction, "data-rounded": getBooleanAsString(this.rounded, "rounded") }, h("header", { key: 'd8347218a266eb48f2b86717d6ba210c907f4c18', class: "db-drawer-header" }, h("div", { key: '6e9a89da493fa209e09bf1ddb5a5719b52606e62', class: "db-drawer-header-text" }, h("slot", { key: '503445639dd0a3e51a6f99f5aff3eb039e6d34eb', name: "drawerHeader" })), h("db-button", { key: '39400683f7e2a05c8c8dd33be6c9913d72d5454d', class: "button-close-drawer", icon: "cross", variant: "ghost", id: this.closeButtonId, noText: true, onClick: (event) => this.handleClose(event, true) }, (_c = this.closeButtonText) !== null && _c !== void 0 ? _c : DEFAULT_CLOSE_BUTTON)), h("div", { key: 'f0e4ebb273ea7f53fd1c026f7f50a16f89ab3259', class: "db-drawer-content" }, h("slot", { key: 'e1ead064fd822ca9fd33be44af5fd52801ba33ea' })))));
     }
     static get is() { return "db-drawer"; }
     static get properties() {
@@ -489,7 +526,8 @@ export class DBDrawer {
     }
     static get states() {
         return {
-            "initialized": {}
+            "initialized": {},
+            "observer": {}
         };
     }
     static get events() {

package/dist/collection/components/header/header.js

@@ -13,6 +13,7 @@ export class DBHeader {
     constructor() {
         this.initialized = false;
         this.forcedToMobile = false;
+        this.observer = undefined;
     }
     handleToggle(event) {
         if (event && event.stopPropagation) {
@@ -28,6 +29,26 @@ export class DBHeader {
             this.handleToggle();
         }
     }
+    setupObserver(element) {
+        if (!element)
+            return;
+        const parent = element.closest("db-header");
+        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-header");
+            }
+        });
+        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
@@ -41,10 +62,15 @@ export class DBHeader {
                 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);
                 }
@@ -52,7 +78,7 @@ export class DBHeader {
                     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");
@@ -86,14 +112,25 @@ export class DBHeader {
             }
         }
         this.enableAttributePassing(this._ref, "db-header");
-        this.initialized = true;
+        const onMountHook_0 = () => {
+            this.initialized = true;
+        };
+        onMountHook_0();
+        const onMountHook_1 = () => {
+            this.setupObserver(this._ref);
+        };
+        onMountHook_1();
         this.watch0Fn();
     }
+    disconnectedCallback() {
+        var _a;
+        (_a = this.observer) === null || _a === void 0 ? void 0 : _a.disconnect();
+    }
     render() {
         var _a, _b, _c;
-        return (h("header", { key: 'e7aec08f10ae9d575b3f845be29ee19505df9216', class: cls("db-header", this.className), ref: (el) => {
+        return (h("header", { key: '5d1e86b7e973ba201396327b7cdce38e2ac97228', class: cls("db-header", 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-width": this.width, "data-on-forcing-mobile": this.forceMobile && !this.forcedToMobile }, h("div", { key: 'bdd8c85393260628938c33bfa1e8573d55a6d730', class: "db-header-meta-navigation" }, h("slot", { key: '42854d3f106c63bbc300458bdcd1cee48a7209be', name: "metaNavigation" })), h("div", { key: '7ef93a1cb414b44657aaed9d7e4779690ca09cf5', class: "db-header-navigation-bar" }, h("div", { key: '1e59f2987b83fe87cd22ae6bc95ac855c061869d', class: "db-header-brand-container" }, h("slot", { key: 'a610bb49cd670896fa1b980ffcdcbd40c2918b4e', name: "brand" })), h("div", { key: '1b94bf4ad2ae622875b7192812f9940e2a87c1e3', class: "db-header-navigation-container" }, h("div", { key: 'f57aac0c4268bf285de0c07bab40a736f0ca42a4', class: "db-header-navigation" }, h("slot", { key: '45d426690fb2dcb6da32f6f646f6b1a932670cd2' })), h("div", { key: 'e60bbd749efc91d9a00a54e3cbc6680e60f6e598', class: "db-header-primary-action" }, h("slot", { key: 'a41128047bc8063c45c14ff3ec58d83b7edd8361', name: "primaryAction" }))), h("div", { key: '82e9141ac1ad7f3a33c9bf0c15ccf969ccd5983f', class: "db-header-action-container" }, h("div", { key: '3f3a5c503ecd11a0aff43623921bb185c59c1802', class: "db-header-burger-menu-container" }, h("db-button", { key: '6547cf5982c0739960b9aa4363ddb71f1423a55b', icon: "menu", variant: "ghost", noText: true, onClick: () => this.handleToggle() }, (_c = this.burgerMenuLabel) !== null && _c !== void 0 ? _c : DEFAULT_BURGER_MENU)), h("div", { key: 'd2c691eb6980e0eeffa512ade5074400bd7973b8', class: "db-header-secondary-action" }, h("slot", { key: '6cc84b46d137ac21aa90c3f84a873febc6fa0dba', name: "secondaryAction" })))), h("db-drawer", { key: '0dc5a353f9365bd76df967cdb3fee20be89c9525', class: "db-header-drawer", spacing: "small", rounded: true, closeButtonId: this.closeButtonId, closeButtonText: this.closeButtonText, open: getBoolean(this.drawerOpen), onClose: () => this.handleToggle() }, h("div", { key: '3a28d35593fe006aa6269077466bd91f33d5f2e4', class: "db-header-drawer-navigation" }, h("div", { key: 'c42fff25d31fe234d841542b108805b0aa85e05c', class: "db-header-navigation", onClick: (event) => this.handleNavigationItemClick(event) }, h("slot", { key: '0de07dfbb68d8b6fcec8cf11e6398566fcd45ae2' })), h("div", { key: '062baf6f3e503751017a3715142e1622c27423bf', class: "db-header-meta-navigation" }, h("slot", { key: '2e703195477c67270e9bfee04335321c52b9de4f', name: "metaNavigation" }))), h("div", { key: '028079c3fae38bc282d8b064e4515ab1c27aa45e', class: "db-header-secondary-action" }, h("slot", { key: '879378953f36c55b5489a157a81e62f188ab5fca', name: "secondaryAction" })))));
+            }, id: (_a = this.id) !== null && _a !== void 0 ? _a : (_b = this.propOverrides) === null || _b === void 0 ? void 0 : _b.id, "data-width": this.width, "data-on-forcing-mobile": this.forceMobile && !this.forcedToMobile }, h("div", { key: 'e01bfcb3611a7ff4ddd3fc6b758dc3bf40cbe712', class: "db-header-meta-navigation" }, h("slot", { key: '99f6ebb0c2bca335d25bd4eaafdb6bd9978d9c8d', name: "metaNavigation" })), h("div", { key: '698fa926fa448a6a540e8bf13676f92a8a0408e3', class: "db-header-navigation-bar" }, h("div", { key: '872fb23c94eb3ec81deca9eef498146b4c434e5e', class: "db-header-brand-container" }, h("slot", { key: '5575ee45816a7ecf9d5102b7c54004522fb3d0dd', name: "brand" })), h("div", { key: 'cda8077a77bde02515ed9c12d720802c0e1a85a0', class: "db-header-navigation-container" }, h("div", { key: '76bfcfe58004cc685d978815058aa1593160f90c', class: "db-header-navigation" }, h("slot", { key: '516e0953f7352fa7f84a8affdae187c345f77dbd' })), h("div", { key: '97eb5eb2f86ae44c85e5779f84d7e95f362c1b26', class: "db-header-primary-action" }, h("slot", { key: '2db7a8e65e46009f7fcf621c4d654204f8160e56', name: "primaryAction" }))), h("div", { key: '6478928d7b967b365823331648d12003b4e7eefa', class: "db-header-action-container" }, h("div", { key: 'ade80b06a587d723ebe9c1dfb3b8ca0cb3499ab6', class: "db-header-burger-menu-container" }, h("db-button", { key: '5e06f6da7bdcc1b12de1b9dbdbb98b6969c80f62', icon: "menu", variant: "ghost", noText: true, onClick: () => this.handleToggle() }, (_c = this.burgerMenuLabel) !== null && _c !== void 0 ? _c : DEFAULT_BURGER_MENU)), h("div", { key: '7afbb296999738cf13b37b4f461fefdddff18ead', class: "db-header-secondary-action" }, h("slot", { key: '6a39330a6eac4a0d6c9e9bcba648590d3a30cee9', name: "secondaryAction" })))), h("db-drawer", { key: '5ec7b632906a280475122fa9b189345ec55917f9', class: "db-header-drawer", spacing: "small", rounded: true, closeButtonId: this.closeButtonId, closeButtonText: this.closeButtonText, open: getBoolean(this.drawerOpen), onClose: () => this.handleToggle() }, h("div", { key: 'c7febad8b66a9a3d3c238c4c87027534f09c8601', class: "db-header-drawer-navigation" }, h("div", { key: '784b2d12c1838ae2ccd90575f1ef04ce97b70104', class: "db-header-navigation", onClick: (event) => this.handleNavigationItemClick(event) }, h("slot", { key: '6189ff74ac04565039a45952c8ea910d5260e9e0' })), h("div", { key: '67223d12d595038a36d9c44953a6cb24894ed35d', class: "db-header-meta-navigation" }, h("slot", { key: '7c3de485a3d7516978cfd16d8ef494a61f8bc4af', name: "metaNavigation" }))), h("div", { key: '01e0e9ac362d8f553adf53379be18a8cdeb2b816', class: "db-header-secondary-action" }, h("slot", { key: 'fa6c328af54f4aff0f6c7ec80d7a2b36ea63b49a', name: "secondaryAction" })))));
     }
     static get is() { return "db-header"; }
     static get properties() {
@@ -335,7 +372,8 @@ export class DBHeader {
     static get states() {
         return {
             "initialized": {},
-            "forcedToMobile": {}
+            "forcedToMobile": {},
+            "observer": {}
         };
     }
     static get events() {

package/dist/collection/components/icon/icon.js

@@ -5,6 +5,29 @@ import { h } from "@stencil/core";
 
  */
 export class DBIcon {
+    constructor() {
+        this.observer = undefined;
+    }
+    setupObserver(element) {
+        if (!element)
+            return;
+        const parent = element.closest("db-icon");
+        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-icon");
+            }
+        });
+        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
@@ -18,10 +41,15 @@ export class DBIcon {
                 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 +57,7 @@ export class DBIcon {
                     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,12 +77,17 @@ export class DBIcon {
             }
         }
         this.enableAttributePassing(this._ref, "db-icon");
+        this.setupObserver(this._ref);
+    }
+    disconnectedCallback() {
+        var _a;
+        (_a = this.observer) === null || _a === void 0 ? void 0 : _a.disconnect();
     }
     render() {
         var _a, _b;
-        return (h("span", { key: '004fb7b91cd27bc452f4777dfd68183bd4bfeaab', class: cls("db-icon", this.className), "aria-hidden": "true", ref: (el) => {
+        return (h("span", { key: '167039453ffa0b206221a521e52e889beeab0d43', class: cls("db-icon", this.className), "aria-hidden": "true", 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-icon": this.icon, "data-icon-weight": this.weight, "data-icon-variant": this.variant }, this.text ? this.text : null, h("slot", { key: 'e9b5fbdefc6cf80abff634c60966ad719985e2be' })));
+            }, id: (_a = this.id) !== null && _a !== void 0 ? _a : (_b = this.propOverrides) === null || _b === void 0 ? void 0 : _b.id, "data-icon": this.icon, "data-icon-weight": this.weight, "data-icon-variant": this.variant }, this.text ? this.text : null, h("slot", { key: 'abea7d517b9dcf61ff53fd70bbbb0cad3da1daa2' })));
     }
     static get is() { return "db-icon"; }
     static get properties() {
@@ -140,7 +173,7 @@ export class DBIcon {
                 "mutable": false,
                 "complexType": {
                     "original": "DBIconProps[\"icon\"]",
-                    "resolved": "\"arrow_down\" | \"arrow_left\" | \"arrow_right\" | \"arrow_up\" | \"arrow_up_right\" | \"brand\" | \"calendar\" | \"chat\" | \"check\" | \"check_circle\" | \"chevron_down\" | \"chevron_left\" | \"chevron_right\" | \"chevron_up\" | \"circle\" | \"circle_small\" | \"circular_arrows\" | \"clock\" | \"copy\" | \"cross\" | \"cross_circle\" | \"double_chevron_down\" | \"double_chevron_left\" | \"double_chevron_right\" | \"double_chevron_up\" | \"exclamation_mark_circle\" | \"exclamation_mark_triangle\" | \"eye\" | \"eye_disabled\" | \"house\" | \"information_circle\" | \"magnifying_glass\" | \"menu\" | \"minus\" | \"moon\" | \"plus\" | \"resize_handle_corner\" | \"sun\" | \"x_placeholder\" | string & Record<never, never>",
+                    "resolved": "\"arrow_down\" | \"arrow_left\" | \"arrow_right\" | \"arrow_up\" | \"arrow_up_right\" | \"arrows_vertical\" | \"brand\" | \"calendar\" | \"chat\" | \"check\" | \"check_circle\" | \"chevron_down\" | \"chevron_left\" | \"chevron_right\" | \"chevron_up\" | \"circle\" | \"circle_small\" | \"circular_arrows\" | \"clock\" | \"copy\" | \"cross\" | \"cross_circle\" | \"double_chevron_down\" | \"double_chevron_left\" | \"double_chevron_right\" | \"double_chevron_up\" | \"exclamation_mark_circle\" | \"exclamation_mark_triangle\" | \"eye\" | \"eye_disabled\" | \"house\" | \"information_circle\" | \"magnifying_glass\" | \"menu\" | \"minus\" | \"moon\" | \"more_vertical\" | \"plus\" | \"resize_handle_corner\" | \"sun\" | \"x_placeholder\" | string & Record<never, never>",
                     "references": {
                         "DBIconProps": {
                             "location": "import",
@@ -241,5 +274,10 @@ export class DBIcon {
             }
         };
     }
+    static get states() {
+        return {
+            "observer": {}
+        };
+    }
     static get elementRef() { return "rootElement"; }
 }

package/dist/collection/components/infotext/infotext.js

@@ -5,6 +5,29 @@ import { h } from "@stencil/core";
 
  */
 export class DBInfotext {
+    constructor() {
+        this.observer = undefined;
+    }
+    setupObserver(element) {
+        if (!element)
+            return;
+        const parent = element.closest("db-infotext");
+        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-infotext");
+            }
+        });
+        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
@@ -18,10 +41,15 @@ export class DBInfotext {
                 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 +57,7 @@ export class DBInfotext {
                     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,12 +77,17 @@ export class DBInfotext {
             }
         }
         this.enableAttributePassing(this._ref, "db-infotext");
+        this.setupObserver(this._ref);
+    }
+    disconnectedCallback() {
+        var _a;
+        (_a = this.observer) === null || _a === void 0 ? void 0 : _a.disconnect();
     }
     render() {
         var _a, _b, _c;
-        return (h("span", { key: '8336d336c2ea90300646a83257cab6f34dfe862a', class: cls("db-infotext", this.className), ref: (el) => {
+        return (h("span", { key: 'e1a06bb9c2d0f88953a7281cdda505b392db609c', class: cls("db-infotext", 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-icon": this.icon, "data-semantic": this.semantic, "data-size": this.size, "data-wrap": getBooleanAsString(this.wrap), "data-show-icon-leading": getBooleanAsString((_c = this.showIcon) !== null && _c !== void 0 ? _c : true) }, this.text ? this.text : null, h("slot", { key: '1dd519913408aa16cce587ddaee31d3c3bae05b6' })));
+            }, id: (_a = this.id) !== null && _a !== void 0 ? _a : (_b = this.propOverrides) === null || _b === void 0 ? void 0 : _b.id, "data-icon": this.icon, "data-semantic": this.semantic, "data-size": this.size, "data-wrap": getBooleanAsString(this.wrap, "wrap"), "data-show-icon-leading": getBooleanAsString((_c = this.showIcon) !== null && _c !== void 0 ? _c : true, "showIcon") }, this.text ? this.text : null, h("slot", { key: '68b5e9bc974cf49e25470cba30b142495e06c72f' })));
     }
     static get is() { return "db-infotext"; }
     static get properties() {
@@ -140,7 +173,7 @@ export class DBInfotext {
                 "mutable": false,
                 "complexType": {
                     "original": "DBInfotextProps[\"icon\"]",
-                    "resolved": "\"arrow_down\" | \"arrow_left\" | \"arrow_right\" | \"arrow_up\" | \"arrow_up_right\" | \"brand\" | \"calendar\" | \"chat\" | \"check\" | \"check_circle\" | \"chevron_down\" | \"chevron_left\" | \"chevron_right\" | \"chevron_up\" | \"circle\" | \"circle_small\" | \"circular_arrows\" | \"clock\" | \"copy\" | \"cross\" | \"cross_circle\" | \"double_chevron_down\" | \"double_chevron_left\" | \"double_chevron_right\" | \"double_chevron_up\" | \"exclamation_mark_circle\" | \"exclamation_mark_triangle\" | \"eye\" | \"eye_disabled\" | \"house\" | \"information_circle\" | \"magnifying_glass\" | \"menu\" | \"minus\" | \"moon\" | \"plus\" | \"resize_handle_corner\" | \"sun\" | \"x_placeholder\" | string & Record<never, never>",
+                    "resolved": "\"arrow_down\" | \"arrow_left\" | \"arrow_right\" | \"arrow_up\" | \"arrow_up_right\" | \"arrows_vertical\" | \"brand\" | \"calendar\" | \"chat\" | \"check\" | \"check_circle\" | \"chevron_down\" | \"chevron_left\" | \"chevron_right\" | \"chevron_up\" | \"circle\" | \"circle_small\" | \"circular_arrows\" | \"clock\" | \"copy\" | \"cross\" | \"cross_circle\" | \"double_chevron_down\" | \"double_chevron_left\" | \"double_chevron_right\" | \"double_chevron_up\" | \"exclamation_mark_circle\" | \"exclamation_mark_triangle\" | \"eye\" | \"eye_disabled\" | \"house\" | \"information_circle\" | \"magnifying_glass\" | \"menu\" | \"minus\" | \"moon\" | \"more_vertical\" | \"plus\" | \"resize_handle_corner\" | \"sun\" | \"x_placeholder\" | string & Record<never, never>",
                     "references": {
                         "DBInfotextProps": {
                             "location": "import",
@@ -293,5 +326,10 @@ export class DBInfotext {
             }
         };
     }
+    static get states() {
+        return {
+            "observer": {}
+        };
+    }
     static get elementRef() { return "rootElement"; }
 }