@db-ux/wc-core-components 4.12.0 → 4.13.0-shell-f221975

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

@@ -0,0 +1,453 @@
+import { r as registerInstance, c as createEvent, h, g as getElement } from './index-BlbKvvUv.js';
+import { p as isKeyboardEvent, f as getBoolean, d as delay, g as getBooleanAsString, c as cls, u as uuid } from './index-DB8jc8lh.js';
+import { v as DEFAULT_CLOSE_BUTTON } from './constants-COv1iCFP.js';
+
+const DBDrawer = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.close = createEvent(this, "close");
+        this.initialized = false;
+        this.backdropPointerDown = false;
+        this._closeTimeoutId = undefined;
+        this.observer = undefined;
+    }
+    isNotModal() {
+        return (this.position === "absolute" ||
+            this.backdrop === "none" ||
+            this.variant === "inside");
+    }
+    handleBackdropPointerDown(event) {
+        var _a;
+        // Remember whether the pointer interaction started on the backdrop
+        // (the DIALOG element itself) so we only close on a real backdrop
+        // click and not when a drag started inside the content and ended
+        // on the backdrop.
+        this.backdropPointerDown = ((_a = event === null || event === void 0 ? void 0 : event.target) === null || _a === void 0 ? void 0 : _a.nodeName) === "DIALOG";
+    }
+    handleClose(event, forceClose) {
+        var _a, _b, _c;
+        if (!event)
+            return;
+        if (isKeyboardEvent(event)) {
+            if (event.key === "Escape") {
+                event.preventDefault();
+                if (this.close) {
+                    this.close.emit(event);
+                }
+            }
+        }
+        else {
+            if (forceClose) {
+                event.stopPropagation();
+                if (this.close) {
+                    this.close.emit(event);
+                }
+            }
+            const isBackdrop = ((_a = event.target) === null || _a === void 0 ? void 0 : _a.nodeName) === "DIALOG" &&
+                event.type === "click" &&
+                this.backdrop !== "none" &&
+                this.backdropPointerDown;
+            const isCloseButton = Boolean((_c = (_b = event.target) === null || _b === void 0 ? void 0 : _b.closest) === null || _c === void 0 ? void 0 : _c.call(_b, '[data-action="close"]'));
+            if (isBackdrop || isCloseButton) {
+                if (this.close) {
+                    this.close.emit(event);
+                }
+            }
+            // Reset after handling the click so the next interaction
+            // starts from a clean state.
+            this.backdropPointerDown = false;
+        }
+    }
+    handleDialogOpen() {
+        if (this._ref) {
+            const dialogOpen = getBoolean(this.open, "open");
+            if (dialogOpen && !this._ref.open) {
+                if (this.dialogContainerRef) {
+                    this.dialogContainerRef.removeAttribute("data-transition");
+                }
+                if (this.isNotModal()) {
+                    this._ref.show();
+                }
+                else {
+                    this._ref.showModal();
+                }
+                delay(() => {
+                    if (this.dialogContainerRef) {
+                        this.dialogContainerRef.dataset["transition"] =
+                            "open";
+                    }
+                }, 1);
+            }
+            if (!dialogOpen && this._ref.open) {
+                if (this.dialogContainerRef) {
+                    this.dialogContainerRef.dataset["transition"] =
+                        "close";
+                }
+                // Cancel any previously scheduled close to prevent double-close on rapid toggling
+                if (this._closeTimeoutId !== undefined) {
+                    clearTimeout(this._closeTimeoutId);
+                }
+                // Read close delay from CSS (already accounts for prefers-reduced-motion)
+                let closeDelay = 0;
+                if (this.dialogContainerRef) {
+                    const durationStr = getComputedStyle(this.dialogContainerRef)
+                        .getPropertyValue("--db-drawer-close-delay")
+                        .trim();
+                    const seconds = parseFloat(durationStr);
+                    if (seconds > 0) {
+                        closeDelay = seconds * 1000 + 1;
+                    }
+                }
+                this._closeTimeoutId = window.setTimeout(() => {
+                    var _a;
+                    (_a = this._ref) === null || _a === void 0 ? void 0 : _a.close();
+                    this._closeTimeoutId = undefined;
+                }, closeDelay);
+            }
+        }
+    }
+    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
+     * @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() {
+        this.handleDialogOpen();
+    }
+    watch0() {
+        this.watch0Fn();
+    }
+    watch1Fn() {
+        if (this._ref && this.initialized && this.position === "absolute") {
+            const refElement = this._ref;
+            const parent = refElement.parentElement;
+            if (parent) {
+                parent.style.position = "relative";
+            }
+        }
+    }
+    watch1() {
+        this.watch1Fn();
+    }
+    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-drawer");
+        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;
+        // Cancel any pending close timeout to prevent stale references
+        if (this._closeTimeoutId !== undefined) {
+            clearTimeout(this._closeTimeoutId);
+        }
+        if (this._ref && this.position === "absolute") {
+            const refElement = this._ref;
+            const parent = refElement.parentElement;
+            if (parent) {
+                parent.style.position = "";
+            }
+        }
+        (_a = this.observer) === null || _a === void 0 ? void 0 : _a.disconnect();
+    }
+    render() {
+        var _a, _b, _c;
+        return (h("dialog", { key: '9abf0f743cfc3f730e881ccdf900cb28ebc2635d', 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), onMouseDown: (event) => this.handleBackdropPointerDown(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: 'ed41dd90e899c94b17669656bcc15a934e34d9e2', class: cls("db-drawer-container", this.className), ref: (el) => {
+                this.dialogContainerRef = el;
+            }, "data-container-size": this.containerSize, "data-show-spacing": getBooleanAsString((_c = this.showSpacing) !== null && _c !== void 0 ? _c : true, "showSpacing"), "data-direction": this.direction, "data-rounded": getBooleanAsString(this.rounded, "rounded") }, h("slot", { key: '71f9997f3fd49aab5923108bcca1826bcfddfbbb', name: "header" }), h("div", { key: '0093d8bf9dcb0098601622b600561a35ab21c51f', class: "db-drawer-content" }, h("slot", { key: '7f52dbe8e4f9ed593a02d04e41aa6e65025a84a3' })), h("slot", { key: 'e5fdb2447f8b970a499aae4cbc49461be45bfa61', name: "footer" }))));
+    }
+    get rootElement() { return getElement(this); }
+    static get watchers() { return {
+        "open": [{
+                "watch0": 0
+            }],
+        "_ref": [{
+                "watch1": 0
+            }],
+        "initialized": [{
+                "watch1": 0
+            }],
+        "position": [{
+                "watch1": 0
+            }]
+    }; }
+};
+
+const DBDrawerFooter = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.observer = undefined;
+    }
+    setupObserver(element) {
+        if (!element)
+            return;
+        const parent = element.closest("db-drawer-footer");
+        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-footer");
+            }
+        });
+        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-drawer-footer");
+        this.setupObserver(this._ref);
+    }
+    disconnectedCallback() {
+        var _a;
+        (_a = this.observer) === null || _a === void 0 ? void 0 : _a.disconnect();
+    }
+    render() {
+        var _a, _b;
+        return (h("footer", { key: 'c6774643907d061fe786a370dcf83e68ff101bc0', class: cls("db-drawer-footer", 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("slot", { key: 'b8ade96bd0be9a643be8fd1d5be2b8eefbb85a96' })));
+    }
+    get rootElement() { return getElement(this); }
+};
+
+const DBDrawerHeader = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.closeButtonText = DEFAULT_CLOSE_BUTTON;
+        this._headingId = "db-drawer-header-heading-" + uuid();
+        this.observer = undefined;
+    }
+    setAriaLabelledBy() {
+        if (this._ref && this.text) {
+            const dialog = this._ref.closest("dialog");
+            if (dialog) {
+                dialog.setAttribute("aria-labelledby", this._headingId);
+            }
+        }
+    }
+    removeAriaLabelledBy() {
+        if (this._ref) {
+            const dialog = this._ref.closest("dialog");
+            if (dialog &&
+                dialog.getAttribute("aria-labelledby") === this._headingId) {
+                dialog.removeAttribute("aria-labelledby");
+            }
+        }
+    }
+    setupObserver(element) {
+        if (!element)
+            return;
+        const parent = element.closest("db-drawer-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-drawer-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
+     * @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-drawer-header");
+        const onMountHook_0 = () => {
+            this.setAriaLabelledBy();
+        };
+        onMountHook_0();
+        const onMountHook_1 = () => {
+            this.setupObserver(this._ref);
+        };
+        onMountHook_1();
+    }
+    disconnectedCallback() {
+        var _a;
+        this.removeAriaLabelledBy();
+        (_a = this.observer) === null || _a === void 0 ? void 0 : _a.disconnect();
+    }
+    render() {
+        var _a, _b;
+        return (h("div", { key: 'dfab2e03b8b712fe9960cac3fc30b534a355dc13', class: cls("db-drawer-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 }, h("header", { key: '6e8caae594fe815fb329843aae47d96df30527c4', class: "db-drawer-header-container", id: this._headingId }, h("slot", { key: '546960454a5332aeab2e24734b7633b5f1a34c3c', name: "startSlot" }), this.text ? h("h2", null, this.text) : h("slot", null)), h("slot", { key: 'b278f02cb5fc65287885085a8a5a31d4282458eb', name: "endSlot" }), h("db-button", { key: '094219ec03470e63fbc93532db4d12d7d8e324a3', "data-action": "close", icon: "cross", variant: "ghost", type: "button", id: this.closeButtonId, noText: true }, this.closeButtonText, h("db-tooltip", { key: 'c6e1fa17184102db8160b9a2917f8f55e80307c6' }, this.closeButtonText))));
+    }
+    get rootElement() { return getElement(this); }
+};
+
+export { DBDrawer as db_drawer, DBDrawerFooter as db_drawer_footer, DBDrawerHeader as db_drawer_header };

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

@@ -1,5 +1,5 @@
 import { r as registerInstance, h, g as getElement } from './index-BlbKvvUv.js';
-import { c as cls } from './index-fumiz06Y.js';
+import { c as cls } from './index-DB8jc8lh.js';
 
 const DBIcon = class {
     constructor(hostRef) {
@@ -83,9 +83,9 @@ const DBIcon = class {
     }
     render() {
         var _a, _b;
-        return (h("span", { key: '45475f5547eb46fee1e5046a3adf5602b8427d1e', class: cls("db-icon", this.className), "aria-hidden": "true", ref: (el) => {
+        return (h("span", { key: '317a35455deed25c97bbe605675e7cf4694147db', 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: '05089e47e87077e6227760806584f49715080c38' })));
+            }, 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: 'd0c4a2db988fa511049303667ae42e1143b6a285' })));
     }
     get rootElement() { return getElement(this); }
 };

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

@@ -1,5 +1,5 @@
 import { r as registerInstance, h, g as getElement } from './index-BlbKvvUv.js';
-import { g as getBooleanAsString, c as cls } from './index-fumiz06Y.js';
+import { g as getBooleanAsString, c as cls } from './index-DB8jc8lh.js';
 
 const DBInfotext = class {
     constructor(hostRef) {
@@ -83,9 +83,9 @@ const DBInfotext = class {
     }
     render() {
         var _a, _b, _c;
-        return (h("span", { key: '5f43b3937dc8adf310a519fc581f6c3162e86ebb', class: cls("db-infotext", this.className), ref: (el) => {
+        return (h("span", { key: 'a5743649a619595f159a9022ee8c39e477af05a7', 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, "wrap"), "data-show-icon-leading": getBooleanAsString((_c = this.showIcon) !== null && _c !== void 0 ? _c : true, "showIcon") }, this.text ? this.text : null, h("slot", { key: '253fc89f2cb83a9ca89c66eed70988b7b69b8507' })));
+            }, 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: 'a52fb970815f2339648d21691f66da3369a34e30' })));
     }
     get rootElement() { return getElement(this); }
 };

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

@@ -1,5 +1,5 @@
 import { r as registerInstance, h, g as getElement } from './index-BlbKvvUv.js';
-import { g as getBooleanAsString, c as cls, f as getNumber, u as uuid } from './index-fumiz06Y.js';
+import { g as getBooleanAsString, c as cls, j as getNumber, u as uuid } from './index-DB8jc8lh.js';
 
 const DBLink = class {
     constructor(hostRef) {
@@ -83,9 +83,9 @@ const DBLink = class {
     }
     render() {
         var _a, _b, _c, _d;
-        return (h("a", { key: '7d627d40c68589558b3e33b1304f4c57b95203e3', class: cls("db-link", this.className), ref: (el) => {
+        return (h("a", { key: '844ef7d3be7d3cfa62ec5b5bbac7afbb2c226ad0', class: cls("db-link", 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": getBooleanAsString(this.disabled, "disabled"), tabIndex: this.disabled ? -1 : 0, "data-size": this.size, "data-show-icon-trailing": getBooleanAsString((_d = this.showIcon) !== null && _d !== void 0 ? _d : true, "showIcon"), "data-variant": this.variant, "data-content": this.content || "internal", "data-wrap": getBooleanAsString(this.wrap, "wrap") }, this.text ? this.text : null, h("slot", { key: 'fc12c0b064d4c5d03347bea0f6de4ad5fcf78223' })));
+            }, 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": getBooleanAsString(this.disabled, "disabled"), tabIndex: this.disabled ? -1 : 0, "data-size": this.size, "data-show-icon-trailing": getBooleanAsString((_d = this.showIcon) !== null && _d !== void 0 ? _d : true, "showIcon"), "data-variant": this.variant, "data-content": this.content || "internal", "data-wrap": getBooleanAsString(this.wrap, "wrap") }, this.text ? this.text : null, h("slot", { key: 'd99bd3518f8b267b8a50531bac0a4eac737fd4bf' })));
     }
     get rootElement() { return getElement(this); }
 };
@@ -145,9 +145,10 @@ const DBTableDataCell = class {
         this.enableAttributePassing(this._ref, "db-table-data-cell");
     }
     render() {
-        return (h("td", { key: '3ca063d88f598584751c0519ae80146525d2fa5a', class: cls("db-table-data-cell", this.className), ref: (el) => {
+        var _a, _b;
+        return (h("td", { key: '5a3ebd6d5339d96b0254cefc8458a7202033dc99', class: cls("db-table-data-cell", this.className), ref: (el) => {
                 this._ref = el;
-            }, id: this.id, "data-horizontal-alignment": this.horizontalAlignment, "data-vertical-alignment": this.verticalAlignment, colSpan: getNumber(this.colSpan, this.colspan), rowSpan: getNumber(this.rowSpan, this.rowspan), headers: this.headers }, h("slot", { key: '30d173c99e242c0bf764f710cee0323bf9549e41' })));
+            }, id: (_a = this.id) !== null && _a !== void 0 ? _a : (_b = this.propOverrides) === null || _b === void 0 ? void 0 : _b.id, "data-horizontal-alignment": this.horizontalAlignment, "data-vertical-alignment": this.verticalAlignment, colSpan: getNumber(this.colSpan, this.colspan), rowSpan: getNumber(this.rowSpan, this.rowspan), headers: this.headers }, h("slot", { key: 'a972f0b9053840a126367efcf096d2bd32293547' })));
     }
     get rootElement() { return getElement(this); }
 };
@@ -207,9 +208,10 @@ const DBTableHeaderCell = class {
         this.enableAttributePassing(this._ref, "db-table-header-cell");
     }
     render() {
-        return (h("th", { key: 'fd53f0b6cc8b2574b895e131d02f0d47d5f93b63', class: cls("db-table-header-cell", this.className), ref: (el) => {
+        var _a, _b;
+        return (h("th", { key: '94134b60d6d2d41f61554594857bd8211b670eaa', class: cls("db-table-header-cell", this.className), ref: (el) => {
                 this._ref = el;
-            }, id: this.id, "data-horizontal-alignment": this.horizontalAlignment, "data-vertical-alignment": this.verticalAlignment, "data-no-text": getBooleanAsString(this.noText), scope: this.scope, colSpan: getNumber(this.colSpan, this.colspan), rowSpan: getNumber(this.rowSpan, this.rowspan), headers: this.headers, abbr: this.abbr }, h("slot", { key: 'ce5680819cff5294899f7b79287156ff769241f1' })));
+            }, id: (_a = this.id) !== null && _a !== void 0 ? _a : (_b = this.propOverrides) === null || _b === void 0 ? void 0 : _b.id, "data-horizontal-alignment": this.horizontalAlignment, "data-vertical-alignment": this.verticalAlignment, "data-no-text": getBooleanAsString(this.noText), scope: this.scope, colSpan: getNumber(this.colSpan, this.colspan), rowSpan: getNumber(this.rowSpan, this.rowspan), headers: this.headers, abbr: this.abbr }, h("slot", { key: '84b51ebb31fe2d7da5c30e82054f26bf25b38962' })));
     }
     get rootElement() { return getElement(this); }
 };
@@ -275,10 +277,10 @@ const DBTableRow = class {
         this.enableAttributePassing(this._ref, "db-table-row");
     }
     render() {
-        var _a;
-        return (h("tr", { key: '35a33e8121f2ba41e8785c1399566365741064e3', class: cls("db-table-row", this.className), ref: (el) => {
+        var _a, _b, _c;
+        return (h("tr", { key: '2d86cd86cc475e1fc84186fcf2301c5274ab4d5c', class: cls("db-table-row", this.className), ref: (el) => {
                 this._ref = el;
-            }, id: this.id, "data-interactive": getBooleanAsString(this.interactive), "data-sub-header-emphasis": this.subHeaderEmphasis }, this.cells ? ((_a = this.cells) === null || _a === void 0 ? void 0 : _a.map((cell, index) => {
+            }, id: (_a = this.id) !== null && _a !== void 0 ? _a : (_b = this.propOverrides) === null || _b === void 0 ? void 0 : _b.id, "data-interactive": getBooleanAsString(this.interactive), "data-sub-header-emphasis": this.subHeaderEmphasis }, this.cells ? ((_c = this.cells) === null || _c === void 0 ? void 0 : _c.map((cell, index) => {
             var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7, _8, _9, _10, _11, _12, _13, _14, _15, _16, _17, _18, _19, _20, _21, _22;
             return cell.headerCell ? (h("db-table-header-cell", { class: (_a = cell.className) !== null && _a !== void 0 ? _a : cell.class, key: `${(_c = (_b = cell.id) !== null && _b !== void 0 ? _b : this.id) !== null && _c !== void 0 ? _c : uuid()}-table-row-header-cell-${index}`, id: cell.id, abbr: (_d = this.getHeaderCell(cell)) === null || _d === void 0 ? void 0 : _d.abbr, scope: (_e = this.getHeaderCell(cell)) === null || _e === void 0 ? void 0 : _e.scope, noText: (_f = this.getHeaderCell(cell)) === null || _f === void 0 ? void 0 : _f.noText, horizontalAlignment: cell.horizontalAlignment, verticalAlignment: cell.verticalAlignment, headers: cell.headers, colSpan: cell.colSpan, colspan: cell.colspan, rowSpan: cell.rowSpan, rowspan: cell.rowspan }, cell.link ? (h("db-link", { class: (_h = (_g = cell.link) === null || _g === void 0 ? void 0 : _g.className) !== null && _h !== void 0 ? _h : (_j = cell.link) === null || _j === void 0 ? void 0 : _j.class, content: (_k = cell.link) === null || _k === void 0 ? void 0 : _k.content, size: (_l = cell.link) === null || _l === void 0 ? void 0 : _l.size, variant: (_m = cell.link) === null || _m === void 0 ? void 0 : _m.variant, id: (_o = cell.link) === null || _o === void 0 ? void 0 : _o.id, autofocus: (_p = cell.link) === null || _p === void 0 ? void 0 : _p.autofocus, disabled: (_q = cell.link) === null || _q === void 0 ? void 0 : _q.disabled, href: (_r = cell.link) === null || _r === void 0 ? void 0 : _r.href, hreflang: (_s = cell.link) === null || _s === void 0 ? void 0 : _s.hreflang, target: (_t = cell.link) === null || _t === void 0 ? void 0 : _t.target, rel: (_u = cell.link) === null || _u === void 0 ? void 0 : _u.rel, referrerPolicy: (_v = cell.link) === null || _v === void 0 ? void 0 : _v.referrerPolicy, role: (_w = cell.link) === null || _w === void 0 ? void 0 : _w.role, showIcon: (_x = cell.link) === null || _x === void 0 ? void 0 : _x.showIcon, text: (_y = cell.link) === null || _y === void 0 ? void 0 : _y.text, wrap: (_z = cell.link) === null || _z === void 0 ? void 0 : _z.wrap }, (_0 = cell.link) === null || _0 === void 0 ? void 0 : _0.children)) : (cell.content))) : (h("db-table-data-cell", { class: (_1 = cell.className) !== null && _1 !== void 0 ? _1 : cell.class, key: `${(_3 = (_2 = cell.id) !== null && _2 !== void 0 ? _2 : this.id) !== null && _3 !== void 0 ? _3 : uuid()}-table-row-data-cell-${index}`, id: cell.id, horizontalAlignment: cell.horizontalAlignment, verticalAlignment: cell.verticalAlignment, headers: cell.headers, colSpan: cell.colSpan, colspan: cell.colspan, rowSpan: cell.rowSpan, rowspan: cell.rowspan }, cell.link ? (h("db-link", { class: (_5 = (_4 = cell.link) === null || _4 === void 0 ? void 0 : _4.className) !== null && _5 !== void 0 ? _5 : (_6 = cell.link) === null || _6 === void 0 ? void 0 : _6.class, content: (_7 = cell.link) === null || _7 === void 0 ? void 0 : _7.content, size: (_8 = cell.link) === null || _8 === void 0 ? void 0 : _8.size, variant: (_9 = cell.link) === null || _9 === void 0 ? void 0 : _9.variant, id: (_10 = cell.link) === null || _10 === void 0 ? void 0 : _10.id, autofocus: (_11 = cell.link) === null || _11 === void 0 ? void 0 : _11.autofocus, disabled: (_12 = cell.link) === null || _12 === void 0 ? void 0 : _12.disabled, href: (_13 = cell.link) === null || _13 === void 0 ? void 0 : _13.href, hreflang: (_14 = cell.link) === null || _14 === void 0 ? void 0 : _14.hreflang, target: (_15 = cell.link) === null || _15 === void 0 ? void 0 : _15.target, rel: (_16 = cell.link) === null || _16 === void 0 ? void 0 : _16.rel, referrerPolicy: (_17 = cell.link) === null || _17 === void 0 ? void 0 : _17.referrerPolicy, role: (_18 = cell.link) === null || _18 === void 0 ? void 0 : _18.role, showIcon: (_19 = cell.link) === null || _19 === void 0 ? void 0 : _19.showIcon, text: (_20 = cell.link) === null || _20 === void 0 ? void 0 : _20.text, wrap: (_21 = cell.link) === null || _21 === void 0 ? void 0 : _21.wrap }, (_22 = cell.link) === null || _22 === void 0 ? void 0 : _22.children)) : (cell.content)));
         })) : (h("slot", null))));

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

@@ -1,6 +1,6 @@
 import { r as registerInstance, c as createEvent, h, g as getElement } from './index-BlbKvvUv.js';
-import { s as DEFAULT_CLOSE_BUTTON } from './constants-BdL-nI5y.js';
-import { e as getBoolean, s as stringPropVisible, g as getBooleanAsString, p as getNotificationRole, c as cls } from './index-fumiz06Y.js';
+import { v as DEFAULT_CLOSE_BUTTON } from './constants-COv1iCFP.js';
+import { f as getBoolean, s as stringPropVisible, g as getBooleanAsString, q as getNotificationRole, c as cls } from './index-DB8jc8lh.js';
 
 const DBNotification = class {
     constructor(hostRef) {
@@ -93,13 +93,13 @@ const DBNotification = class {
     }
     render() {
         var _a, _b, _c;
-        return (h("div", { key: '3f6ef4d3d506873a5b4bd15fde4d2c2fbedc9746', class: cls("db-notification", this.className), ref: (el) => {
+        return (h("div", { key: '24d232744b6491f7883907495e90db630a3dfa37', class: cls("db-notification", 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, role: getNotificationRole({
                 semantic: this.semantic,
                 role: this.role,
                 ariaLive: this.ariaLive,
-            }), "aria-live": this.ariaLive, "data-semantic": this.semantic, "data-variant": this.variant, "data-icon": getBoolean(this.showIcon) !== false ? this.icon : undefined, "data-show-icon": getBooleanAsString(this.showIcon, "showIcon"), "data-link-variant": this.linkVariant }, h("slot", { key: '869ddc92d88e68d689215add30f1eefbfababc21', name: "image" }), stringPropVisible(this.headline, this.showHeadline) ? (h("header", { "data-area": "head" }, this.headline)) : null, h("div", { key: 'f3eb313619e046c8eb3fa7b527470b8145003173', "data-area": "content" }, this.text ? this.text : null, h("slot", { key: 'ff2a9c542527cf6da87bace3b77b9477899626ea' })), stringPropVisible(this.timestamp, this.showTimestamp) ? (h("time", { "data-area": "timestamp", dateTime: this.timestampDatetime }, this.timestamp)) : null, h("slot", { key: '5529bddb13c7a39c5fcf6b9bca844cbe1f16fee3', name: "link" }), getBoolean(this.closeable, "closeable") ? (h("db-button", { icon: "cross", variant: "ghost", size: "small", id: this.closeButtonId, noText: true, onClick: (event) => this.handleClose(event) }, (_c = this.closeButtonText) !== null && _c !== void 0 ? _c : DEFAULT_CLOSE_BUTTON)) : null));
+            }), "aria-live": this.ariaLive, "data-semantic": this.semantic, "data-variant": this.variant, "data-icon": getBoolean(this.showIcon) !== false ? this.icon : undefined, "data-show-icon": getBooleanAsString(this.showIcon, "showIcon"), "data-link-variant": this.linkVariant }, h("slot", { key: '7c75177f9eff5127a8d4c8043c59d94a508a5044', name: "image" }), stringPropVisible(this.headline, this.showHeadline) ? (h("header", { "data-area": "head" }, this.headline)) : null, h("div", { key: 'a0e9233a3143354c401f0d12f60ccdb30977736c', "data-area": "content" }, this.text ? this.text : null, h("slot", { key: '67f52722658f2894a23fd8f7f0bdc8a6337e8599' })), stringPropVisible(this.timestamp, this.showTimestamp) ? (h("time", { "data-area": "timestamp", dateTime: this.timestampDatetime }, this.timestamp)) : null, h("slot", { key: '5bc5cc27b0cfd34d470adede98ee929845a21868', name: "link" }), getBoolean(this.closeable, "closeable") ? (h("db-button", { icon: "cross", variant: "ghost", size: "small", id: this.closeButtonId, noText: true, onClick: (event) => this.handleClose(event) }, (_c = this.closeButtonText) !== null && _c !== void 0 ? _c : DEFAULT_CLOSE_BUTTON)) : null));
     }
     get rootElement() { return getElement(this); }
 };