@db-ux/wc-core-components 4.3.2 → 4.4.0-loading-567cd0c

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @db-ux/wc-core-components
 
+## 4.4.0
+
+### Minor Changes
+
+- feat: add `role` property to DBNotification & automatically add role based on semantic if no `role` or `ariaLive` is provided to increase UX for screen-reader users - [see commit 177d71e](https://github.com/db-ux-design-system/core-web/commit/177d71e287a64a6491ba446e7812d0adbda1717e)
+
+- feat(DBSelect): hide empty first option in `required` selects with placeholder after the first user selection, and add `showEmptyOption` prop to overwrite this - [see commit 4280bc4](https://github.com/db-ux-design-system/core-web/commit/4280bc47538d6983d6bb5575f012b6c6b25b40e8)
+
 ## 4.3.2
 
 ### Patch Changes

package/dist/cjs/db-accordion-item.cjs.entry.js

@@ -1,8 +1,8 @@
 'use strict';
 
-var index = require('./index-Mi8dWSSD.js');
+var index = require('./index-TxzPzc5I.js');
 var constants = require('./constants-bMY2_d8A.js');
-var index$1 = require('./index-CW5aVEyQ.js');
+var index$1 = require('./index-CsHqnQII.js');
 
 const DBAccordionItem = class {
     constructor(hostRef) {

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

@@ -1,8 +1,8 @@
 'use strict';
 
-var index = require('./index-Mi8dWSSD.js');
+var index = require('./index-TxzPzc5I.js');
 var constants = require('./constants-bMY2_d8A.js');
-var index$1 = require('./index-CW5aVEyQ.js');
+var index$1 = require('./index-CsHqnQII.js');
 
 const DBAccordion = class {
     constructor(hostRef) {

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

@@ -1,8 +1,8 @@
 'use strict';
 
-var index = require('./index-Mi8dWSSD.js');
+var index = require('./index-TxzPzc5I.js');
 var constants = require('./constants-bMY2_d8A.js');
-var index$1 = require('./index-CW5aVEyQ.js');
+var index$1 = require('./index-CsHqnQII.js');
 
 const DBBadge = class {
     constructor(hostRef) {

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

@@ -1,8 +1,8 @@
 'use strict';
 
-var index = require('./index-Mi8dWSSD.js');
+var index = require('./index-TxzPzc5I.js');
 var constants = require('./constants-bMY2_d8A.js');
-var index$1 = require('./index-CW5aVEyQ.js');
+var index$1 = require('./index-CsHqnQII.js');
 
 const DBBrand = class {
     constructor(hostRef) {

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

@@ -1,7 +1,7 @@
 'use strict';
 
-var index = require('./index-Mi8dWSSD.js');
-var index$1 = require('./index-CW5aVEyQ.js');
+var index = require('./index-TxzPzc5I.js');
+var index$1 = require('./index-CsHqnQII.js');
 
 const DBButton = class {
     constructor(hostRef) {

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

@@ -1,7 +1,7 @@
 'use strict';
 
-var index = require('./index-Mi8dWSSD.js');
-var index$1 = require('./index-CW5aVEyQ.js');
+var index = require('./index-TxzPzc5I.js');
+var index$1 = require('./index-CsHqnQII.js');
 
 const DBCard = class {
     constructor(hostRef) {

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

@@ -1,9 +1,9 @@
 'use strict';
 
-var index = require('./index-Mi8dWSSD.js');
+var index = require('./index-TxzPzc5I.js');
 var constants = require('./constants-bMY2_d8A.js');
-var index$1 = require('./index-CW5aVEyQ.js');
-var formComponents = require('./form-components-BrtqMwX0.js');
+var index$1 = require('./index-CsHqnQII.js');
+var formComponents = require('./form-components-LsqVohyb.js');
 
 const DBCheckbox = class {
     constructor(hostRef) {

package/dist/cjs/{db-custom-select-dropdown_5.cjs.entry.js → db-custom-select-dropdown_6.cjs.entry.js}

@@ -1,9 +1,9 @@
 'use strict';
 
-var index = require('./index-Mi8dWSSD.js');
-var index$1 = require('./index-CW5aVEyQ.js');
+var index = require('./index-TxzPzc5I.js');
+var index$1 = require('./index-CsHqnQII.js');
 var constants = require('./constants-bMY2_d8A.js');
-var formComponents = require('./form-components-BrtqMwX0.js');
+var formComponents = require('./form-components-LsqVohyb.js');
 
 const DBCustomSelectDropdown = class {
     constructor(hostRef) {
@@ -463,14 +463,266 @@ const DBTag = class {
     }
     render() {
         var _a;
-        return (index.h("div", { key: 'db86fabfde3f9d1e41a863f58db34eb88d067440', class: index$1.cls("db-tag", this.className), ref: (el) => {
+        return (index.h("div", { key: '6be4d8cc4b856ac198e4c207860e9529c436060f', class: index$1.cls("db-tag", this.className), ref: (el) => {
                 this._ref = el;
-            }, id: this.id, "data-semantic": this.semantic, "data-emphasis": this.emphasis, "data-icon": this.icon, "data-show-check-state": index$1.getBooleanAsString((_a = this.showCheckState) !== null && _a !== void 0 ? _a : true), "data-show-icon": index$1.getBooleanAsString(this.showIcon), "data-no-text": index$1.getBooleanAsString(this.noText), "data-overflow": index$1.getBooleanAsString(this.overflow) }, index.h("slot", { key: '1bef11e30ca670fa5bf1d438cd12c43e233cded4', name: "content" }), index.h("slot", { key: '3f94141f60688d0730478711748fa9dbb194f810' }), this.text ? this.text : null, this.behavior === "removable" ? (index.h("button", { class: "db-button db-tab-remove-button", "data-icon": "cross", "data-size": "small", "data-no-text": "true", "data-variant": "ghost", type: "button", onClick: (event) => this.handleRemove(event) }, index.h("db-tooltip", { variant: "label" }, this.getRemoveButtonText()))) : null));
+            }, id: this.id, "data-semantic": this.semantic, "data-emphasis": this.emphasis, "data-icon": this.icon, "data-show-check-state": index$1.getBooleanAsString((_a = this.showCheckState) !== null && _a !== void 0 ? _a : true), "data-show-icon": index$1.getBooleanAsString(this.showIcon), "data-no-text": index$1.getBooleanAsString(this.noText), "data-overflow": index$1.getBooleanAsString(this.overflow) }, index.h("slot", { key: '3ed9ce9b0eb66bb92a2c4a5303be1b0d16001841', name: "content" }), index.h("slot", { key: '9098de64b545b04f81f6a980700879610f9ec7bc' }), this.text ? this.text : null, this.behavior === "removable" ? (index.h("button", { class: "db-button db-tab-remove-button", "data-icon": "cross", "data-size": "small", "data-no-text": "true", "data-variant": "ghost", type: "button", onClick: (event) => this.handleRemove(event) }, index.h("db-tooltip", { variant: "label" }, this.getRemoveButtonText()))) : null));
     }
 };
 
+const DBLoadingIndicator = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.timeout = index.createEvent(this, "timeout");
+        this.autoDisable = true;
+        this.indeterminate = true;
+        this.size = "medium";
+        this.variant = "inline";
+        this._id = constants.DEFAULT_ID;
+        this._loadingState = "inactive";
+        this._previousLoadingState = undefined;
+        this._style = {};
+        this.initialized = false;
+    }
+    getPercentage() {
+        if (this.indeterminate || !this.value || !this.max) {
+            return;
+        }
+        return `${(Number(this.value) / Number(this.max)).toFixed(2)}`;
+    }
+    getRole() {
+        if (this.role) {
+            if (this.role === "none") {
+                return;
+            }
+            return this.role;
+        }
+        return "status";
+    }
+    handleParentDisabled() {
+        if (this._ref && this.autoDisable && this.initialized) {
+            let parent = this._ref.parentElement;
+            if (parent && parent.localName === "db-loading-indicator") {
+                parent = parent.parentElement;
+            }
+            if (parent && "disabled" in parent) {
+                parent.disabled = this._loadingState !== "inactive";
+            }
+        }
+    }
+    handleParentAria(remove) {
+        if (this._ref && this._id && this.initialized) {
+            let parent = this._ref.parentElement;
+            if (parent && parent.localName === "db-loading-indicator") {
+                parent = parent.parentElement;
+            }
+            if (!parent)
+                return;
+            const isButton = (parent === null || parent === void 0 ? void 0 : parent.localName) === "button";
+            if (!(isButton || this.overlay))
+                return;
+            const ariaAttribute = isButton ? "aria-labelledby" : "aria-describedby";
+            const ariaLabelledBy = parent.getAttribute(ariaAttribute);
+            let labelledByElements = ariaLabelledBy ? ariaLabelledBy.split(",") : [];
+            if (remove || this._loadingState === "inactive") {
+                if (labelledByElements.includes(this._id)) {
+                    labelledByElements = labelledByElements.filter((elementId) => elementId !== this._id);
+                    if (!isButton) {
+                        parent.ariaBusy = null;
+                    }
+                }
+                else {
+                    return;
+                }
+            }
+            else {
+                if (!labelledByElements.includes(this._id)) {
+                    labelledByElements.push(this._id);
+                }
+                if (!isButton) {
+                    parent.ariaBusy = this._loadingState === "active" ? "true" : null;
+                }
+            }
+            if (labelledByElements.length) {
+                parent.setAttribute(ariaAttribute, labelledByElements.join(","));
+            }
+            else {
+                parent.removeAttribute(ariaAttribute);
+            }
+        }
+    }
+    /**
+     * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.
+     * @param element  the ref for the component
+     * @param customElementSelector  the custom element like `my-component`
+     */
+    enableAttributePassing(element, customElementSelector) {
+        const parent = element === null || element === void 0 ? void 0 : element.closest(customElementSelector);
+        if (element && parent) {
+            const attributes = parent.attributes;
+            for (let i = 0; i < attributes.length; i++) {
+                const attr = attributes.item(i);
+                if (attr &&
+                    (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))) {
+                    element.setAttribute(attr.name, attr.value);
+                    parent.removeAttribute(attr.name);
+                }
+                if (attr && attr.name === "class") {
+                    const isWebComponent = attr.value.includes("hydrated");
+                    const value = attr.value.replace("hydrated", "").trim();
+                    const currentClass = element.getAttribute("class");
+                    element.setAttribute(attr.name, `${currentClass ? `${currentClass} ` : ""}${value}`);
+                    if (isWebComponent) {
+                        // Stencil is using this class for lazy loading component
+                        parent.setAttribute("class", "hydrated");
+                    }
+                    else {
+                        parent.removeAttribute(attr.name);
+                    }
+                }
+            }
+        }
+    }
+    watch0Fn() {
+        this.handleParentDisabled();
+    }
+    watch0() {
+        this.watch0Fn();
+    }
+    watch1Fn() {
+        this.handleParentAria(false);
+    }
+    watch1() {
+        this.watch1Fn();
+    }
+    watch2Fn() {
+        if (this.timeout) {
+            // Not merged if as workaround for angular
+            if (this._loadingState !== "inactive" &&
+                this._loadingState !== this._previousLoadingState) {
+                this._previousLoadingState = this._loadingState;
+                void index$1.delay(() => {
+                    if (this.timeout) {
+                        this.timeout.emit(this._loadingState);
+                    }
+                }, this._loadingState === "active" ? 5000 : 2000);
+            }
+        }
+    }
+    watch2() {
+        this.watch2Fn();
+    }
+    watch3Fn() {
+        if (this._loadingState === this.state)
+            return;
+        if (this.state) {
+            this._loadingState = this.state;
+        }
+        else if (this.indeterminate === undefined || this.indeterminate) {
+            this._loadingState = "active";
+        }
+        else {
+            this._loadingState = "inactive";
+        }
+    }
+    watch3() {
+        this.watch3Fn();
+    }
+    watch4Fn() {
+        if (this._ref) {
+            if (this.delay === "slow" || this.delay === "fast") {
+                void index$1.delay(() => {
+                    if (this._ref) {
+                        this._ref.dataset["delay"] = "";
+                    }
+                }, this.delay === "slow" ? 500 : 250);
+            }
+        }
+    }
+    watch4() {
+        this.watch4Fn();
+    }
+    watch5Fn() {
+        this._style = {
+            "--db-loading-indicator-percentage": this.getPercentage(),
+        };
+    }
+    watch5() {
+        this.watch5Fn();
+    }
+    componentDidLoad() {
+        this.enableAttributePassing(this._ref, "db-loading-indicator");
+        this._id = this.id || "loading-indicator-" + index$1.uuid();
+        this.initialized = true;
+        this.watch0Fn();
+        this.watch1Fn();
+        this.watch2Fn();
+        this.watch3Fn();
+        this.watch4Fn();
+        this.watch5Fn();
+    }
+    disconnectedCallback() {
+        this.handleParentAria(true);
+        this.handleParentDisabled();
+    }
+    render() {
+        var _a, _b;
+        return (index.h("div", { key: '4467fd7c9ebec6fe699995183b870ea08fa60ba7', class: index$1.cls("db-loading-indicator", this.className), ref: (el) => {
+                this._ref = el;
+            }, style: this._style, "data-indeterminate": index$1.getBooleanAsString(this.indeterminate), "data-size": this.size, "data-variant": this.variant, "data-delay": this.delay, "data-state": this._loadingState, "data-overlay": index$1.getBooleanAsString(this.overlay) }, this.variant !== "progress-bar" ? (index.h("svg", { class: "db-loading-indicator-circle", "aria-hidden": "true", viewBox: this.variant === "inline" ? "10 10 20 20" : "32 32 64 64" }, index.h("circle", { class: "db-loading-indicator-circle-track" }), index.h("circle", { class: "db-loading-indicator-circle-segment" }))) : null, index.h("div", { key: '7ea9f9fd64f1b7d073ca7917a4e8eb905eb344f0', role: this.getRole() }, index.h("label", { key: 'de7fd82a1e14e459735cf596f18104722965e7f2', "data-show-label": index$1.getBooleanAsString(this.showLabel), id: this._id }, this.label ? this.label : index.h("slot", null), index.h("progress", { key: 'd2abf58f6595675e873056610e1bec18bf4dff85', value: this.indeterminate ? undefined : (_a = this.value) !== null && _a !== void 0 ? _a : 0, max: this.indeterminate ? undefined : (_b = this.max) !== null && _b !== void 0 ? _b : 100 }, this.indeterminate ? undefined : this.progressText)), !this.indeterminate ? (index.h("span", { "aria-hidden": "true", "data-show-progress-text": index$1.getBooleanAsString(this.showProgressText) }, this.progressText)) : null)));
+    }
+    static get watchers() { return {
+        "_ref": [{
+                "watch0": 0
+            }, {
+                "watch1": 0
+            }, {
+                "watch4": 0
+            }],
+        "initialized": [{
+                "watch0": 0
+            }, {
+                "watch1": 0
+            }],
+        "autoDisable": [{
+                "watch0": 0
+            }],
+        "_loadingState": [{
+                "watch0": 0
+            }, {
+                "watch1": 0
+            }, {
+                "watch2": 0
+            }],
+        "overlay": [{
+                "watch1": 0
+            }],
+        "_id": [{
+                "watch1": 0
+            }],
+        "timeout": [{
+                "watch2": 0
+            }],
+        "state": [{
+                "watch3": 0
+            }],
+        "delay": [{
+                "watch4": 0
+            }],
+        "indeterminate": [{
+                "watch5": 0
+            }],
+        "value": [{
+                "watch5": 0
+            }],
+        "max": [{
+                "watch5": 0
+            }]
+    }; }
+};
+
 exports.db_custom_select_dropdown = DBCustomSelectDropdown;
 exports.db_custom_select_list = DBCustomSelectList;
 exports.db_custom_select_list_item = DBCustomSelectListItem;
 exports.db_input = DBInput;
+exports.db_loading_indicator = DBLoadingIndicator;
 exports.db_tag = DBTag;

package/dist/cjs/db-custom-select-form-field.cjs.entry.js

@@ -1,7 +1,7 @@
 'use strict';
 
-var index = require('./index-Mi8dWSSD.js');
-var index$1 = require('./index-CW5aVEyQ.js');
+var index = require('./index-TxzPzc5I.js');
+var index$1 = require('./index-CsHqnQII.js');
 
 const DBCustomSelectFormField = class {
     constructor(hostRef) {
@@ -43,9 +43,9 @@ const DBCustomSelectFormField = class {
         this.enableAttributePassing(this._ref, "db-custom-select-form-field");
     }
     render() {
-        return (index.h("summary", { key: '22a05256e65e56208335b9a5c840e75988a57182', class: index$1.cls("db-custom-select-form-field", this.className), ref: (el) => {
+        return (index.h("summary", { key: 'd99ab4a28f0604d5aa10d54e5da18ce976a93bf8', class: index$1.cls("db-custom-select-form-field", this.className), ref: (el) => {
                 this._ref = el;
-            }, id: this.id }, index.h("slot", { key: '3c6c62df9bf0d2a73e37a9ad69d3a46daa672984' })));
+            }, id: this.id }, index.h("slot", { key: '40f581da69159f298d83a097e08c2f74e5dfcb23' })));
     }
 };
 

package/dist/cjs/db-custom-select.cjs.entry.js

@@ -1,12 +1,12 @@
 'use strict';
 
-var index = require('./index-Mi8dWSSD.js');
+var index = require('./index-TxzPzc5I.js');
 var constants = require('./constants-bMY2_d8A.js');
-var index$1 = require('./index-CW5aVEyQ.js');
-var documentClickListener = require('./document-click-listener-B2Xzqbvs.js');
-var documentScrollListener = require('./document-scroll-listener-C_v46oIg.js');
+var index$1 = require('./index-CsHqnQII.js');
+var documentClickListener = require('./document-click-listener-Bb3Tinb8.js');
+var documentScrollListener = require('./document-scroll-listener-unypEU42.js');
 var floatingComponents = require('./floating-components-ogUqz72V.js');
-var formComponents = require('./form-components-BrtqMwX0.js');
+var formComponents = require('./form-components-LsqVohyb.js');
 
 const DBCustomSelect = class {
     constructor(hostRef) {
@@ -772,30 +772,28 @@ const DBCustomSelect = class {
         (_a = this.abortController) === null || _a === void 0 ? void 0 : _a.abort();
     }
     render() {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
-        return (index.h("div", { key: '5ab3c80f3af53b7795e709feaea160e4aa26f281', class: index$1.cls("db-custom-select", this.className), id: this._id, ref: (el) => {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r;
+        return (index.h("div", { key: '633c651cd764cf5bb424955fa5e2bfd30e5e8e28', class: index$1.cls("db-custom-select", this.className), id: this._id, ref: (el) => {
                 this._ref = el;
             }, "aria-invalid": this._validity === "invalid", "data-custom-validity": this._validity, "data-width": this.formFieldWidth, "data-variant": this.variant === "floating" &&
                 this.selectedType === "tag" &&
                 this.multiple
                 ? "above"
-                : this.variant, "data-required": index$1.getBooleanAsString(this.required), "data-hide-asterisk": index$1.getHideProp(this.showRequiredAsterisk), "data-placement": this.placement, "data-selected-type": this.multiple ? this.selectedType : "text", "data-hide-label": index$1.getHideProp(this.showLabel), "data-icon": this.icon, "data-show-icon": index$1.getBooleanAsString(this.showIcon) }, index.h("label", { key: '281d6b75a9ae62b6e2f59c04876603988366952d', id: this._labelId }, (_a = this.label) !== null && _a !== void 0 ? _a : constants.DEFAULT_LABEL, index.h("select", { key: '26029a01c106666155c40cac98a7f67739145491', role: "none", hidden: true, id: this._selectId, tabIndex: -1, ref: (el) => {
+                : this.variant, "data-required": index$1.getBooleanAsString(this.required), "data-hide-asterisk": index$1.getHideProp(this.showRequiredAsterisk), "data-placement": this.placement, "data-selected-type": this.multiple ? this.selectedType : "text", "data-hide-label": index$1.getHideProp(this.showLabel), "data-icon": this.icon, "data-show-icon": index$1.getBooleanAsString(this.showIcon) }, index.h("label", { key: 'c6341945f060e403c8b0d5a3bb65c8055a07e3c4', id: this._labelId }, (_a = this.label) !== null && _a !== void 0 ? _a : constants.DEFAULT_LABEL, index.h("select", { key: 'f7f9c77a12b40942365717378617ea45d38d3c0d', role: "none", hidden: true, id: this._selectId, tabIndex: -1, ref: (el) => {
                 this.selectRef = el;
             }, form: this.form, name: this.name, multiple: index$1.getBoolean(this.multiple, "multiple"), disabled: index$1.getBoolean(this.disabled, "disabled"), required: index$1.getBoolean(this.required, "required"), onChange: (event) => this.satisfyReact(event) }, ((_b = this.options) === null || _b === void 0 ? void 0 : _b.length)
-            ? (_c = this.options) === null || _c === void 0 ? void 0 : _c.map((option) => (index.h("option", { disabled: option.disabled, value: option.value, key: undefined }, this.getOptionLabel(option))))
-            : null)), index.h("details", { key: '60f50d851ebf3b180094bdbd1c9acb3c6e1069af', ref: (el) => {
+            ? (_c = this.options) === null || _c === void 0 ? void 0 : _c.map((option) => (index.h("option", { disabled: option.disabled, value: option.value }, this.getOptionLabel(option))))
+            : null)), index.h("details", { key: '3fa0220b25ec6de48ccc29628418094022835df1', ref: (el) => {
                 this.detailsRef = el;
-            }, open: this.open, onToggle: (event) => this.handleDropdownToggle(event), onKeyDown: (event) => this.handleKeyboardPress(event) }, index.h("slot", { key: '369ba87529acc1e3b2d12869174eff0a824c0176' }), this.options ? (index.h(index.Fragment, null, index.h("summary", { class: "db-custom-select-form-field", id: this._summaryId, "aria-disabled": index$1.getBooleanAsString(this.disabled), "aria-labelledby": this._labelId }, ((_d = this._selectedLabels) === null || _d === void 0 ? void 0 : _d.length) ? (index.h("span", { "data-visually-hidden": index$1.getBooleanAsString(this.selectedType === "tag"), id: this._selectedLabelsId }, this.selectedPrefix ? (index.h("span", { "data-visually-hidden": "true" }, this.selectedPrefix)) : null, this._selectedLabels)) : null, this.selectedType === "tag" ? (index.h("div", null, (_e = this._selectedOptions) === null || _e === void 0 ? void 0 : _e.map((option, index$1) => (index.h("db-tag", { emphasis: "strong", behavior: "removable", removeButton: this.getTagRemoveLabel(option), onRemove: (event) => this.handleTagRemove(option, event), key: undefined }, this.getOptionLabel(option)))))) : null), index.h("db-custom-select-dropdown", { width: this.dropdownWidth }, this.searchEnabled ? (index.h("div", null, index.h("db-input", { type: "search", ref: (el) => {
+            }, open: this.open, onToggle: (event) => this.handleDropdownToggle(event), onKeyDown: (event) => this.handleKeyboardPress(event) }, index.h("slot", { key: '7eb160f589f3dbb0e171ac49bb310272108511b8' }), this.options ? (index.h(index.Fragment, null, index.h("summary", { class: "db-custom-select-form-field", id: this._summaryId, "aria-disabled": index$1.getBooleanAsString(this.disabled), "aria-labelledby": this._labelId }, ((_d = this._selectedLabels) === null || _d === void 0 ? void 0 : _d.length) ? (index.h("span", { "data-visually-hidden": index$1.getBooleanAsString(this.selectedType === "tag"), id: this._selectedLabelsId }, this.selectedPrefix ? (index.h("span", { "data-visually-hidden": "true" }, this.selectedPrefix)) : null, this._selectedLabels)) : null, this.selectedType === "tag" ? (index.h("div", null, (_e = this._selectedOptions) === null || _e === void 0 ? void 0 : _e.map((option, index$1) => (index.h("db-tag", { emphasis: "strong", behavior: "removable", removeButton: this.getTagRemoveLabel(option), onRemove: (event) => this.handleTagRemove(option, event) }, this.getOptionLabel(option)))))) : null), index.h("db-custom-select-dropdown", { width: this.dropdownWidth }, this.searchEnabled ? (index.h("div", null, index.h("db-input", { type: "search", ref: (el) => {
                 this.searchInputRef = el;
             }, name: this._id, form: this._id, showLabel: false, value: this._searchValue, label: (_f = this.searchLabel) !== null && _f !== void 0 ? _f : constants.DEFAULT_LABEL, placeholder: (_g = this.searchPlaceholder) !== null && _g !== void 0 ? _g : this.searchLabel, ariaDescribedBy: this._hasNoOptions || this.showLoading
                 ? this._infoTextId
-                : undefined, onInput: (event) => this.handleSearch(event) }))) : null, this._hasNoOptions || this.showLoading ? (index.h("db-infotext", { id: this._infoTextId, icon: this.showLoading ? "circular_arrows" : undefined, semantic: this.showLoading ? "informational" : "warning" }, (_h = (this.showLoading
-            ? this.loadingText
-            : this.noResultsText)) !== null && _h !== void 0 ? _h : constants.DEFAULT_MESSAGE)) : (index.h(index.Fragment, null, this.selectAllEnabled ? (index.h("div", null, index.h("div", { class: "db-checkbox db-custom-select-list-item" }, index.h("label", null, index.h("input", { type: "checkbox", value: "select-all", ref: (el) => {
+                : undefined, onInput: (event) => this.handleSearch(event) }))) : null, this._hasNoOptions || this.showLoading ? (this.showLoading ? (index.h("db-loading-indicator", { id: this._infoTextId }, (_h = this.loadingText) !== null && _h !== void 0 ? _h : constants.DEFAULT_MESSAGE)) : (index.h("db-infotext", { semantic: "warning", id: this._infoTextId }, (_j = this.noResultsText) !== null && _j !== void 0 ? _j : constants.DEFAULT_MESSAGE))) : (index.h(index.Fragment, null, this.selectAllEnabled ? (index.h("div", null, index.h("div", { class: "db-checkbox db-custom-select-list-item" }, index.h("label", null, index.h("input", { type: "checkbox", value: "select-all", ref: (el) => {
                 this.selectAllRef = el;
-            }, form: this._id, checked: this.selectAllChecked, onChange: (event) => this.handleSelectAll(event) }), this.getSelectAllLabel())))) : null, index.h("db-custom-select-list", { multiple: index$1.getBoolean(this.multiple, "multiple"), label: (_k = (_j = this.listLabel) !== null && _j !== void 0 ? _j : this.label) !== null && _k !== void 0 ? _k : constants.DEFAULT_LABEL }, (_l = this._options) === null || _l === void 0 ? void 0 : _l.map((option) => (index.h("db-custom-select-list-item", { type: this.multiple ? "checkbox" : "radio", showDivider: option.showDivider, icon: option.icon, isGroupTitle: option.isGroupTitle, groupTitle: this.getOptionLabel(option), name: this._id, checked: this.getOptionChecked(option.value), disabled: option.disabled, value: option.value, onChange: () => this.handleSelect(option.value), key: undefined }, !option.isGroupTitle
+            }, form: this._id, checked: this.selectAllChecked, onChange: (event) => this.handleSelectAll(event) }), this.getSelectAllLabel())))) : null, index.h("db-custom-select-list", { multiple: index$1.getBoolean(this.multiple, "multiple"), label: (_l = (_k = this.listLabel) !== null && _k !== void 0 ? _k : this.label) !== null && _l !== void 0 ? _l : constants.DEFAULT_LABEL }, (_m = this._options) === null || _m === void 0 ? void 0 : _m.map((option) => (index.h("db-custom-select-list-item", { type: this.multiple ? "checkbox" : "radio", showDivider: option.showDivider, icon: option.icon, isGroupTitle: option.isGroupTitle, groupTitle: this.getOptionLabel(option), name: this._id, checked: this.getOptionChecked(option.value), disabled: option.disabled, value: option.value, onChange: () => this.handleSelect(option.value) }, !option.isGroupTitle
             ? this.getOptionLabel(option)
-            : null)))))), index.h("div", null, index.h("db-button", { variant: "ghost", width: "full", icon: "cross", size: "small", name: this._id, form: this._id, onClick: () => this.handleClose(undefined, true) }, (_m = this.mobileCloseButtonText) !== null && _m !== void 0 ? _m : constants.DEFAULT_CLOSE_BUTTON))))) : null), ((_o = this.showClearSelection) !== null && _o !== void 0 ? _o : true) && ((_p = this._values) === null || _p === void 0 ? void 0 : _p.length) ? (index.h("db-button", { icon: "cross", variant: "ghost", size: "small", noText: true, name: this._id, form: this._id, onClick: (event) => this.handleClearAll(event) }, this.clearSelectionText, index.h("db-tooltip", { placement: "top" }, this.clearSelectionText))) : null, index.h("span", { key: 'b4a9cebfe1db06422f428bac4d04d581bcadbb95', class: "db-custom-select-placeholder", "aria-hidden": index$1.getBooleanAsString(true), id: this._placeholderId }, (_q = this.placeholder) !== null && _q !== void 0 ? _q : this.label), index$1.stringPropVisible(this.message, this.showMessage) ? (index.h("db-infotext", { size: "small", icon: this.messageIcon, id: this._messageId }, this.message)) : null, this.hasValidState() ? (index.h("db-infotext", { size: "small", semantic: "successful", id: this._validMessageId }, this.validMessage || constants.DEFAULT_VALID_MESSAGE)) : null, index.h("db-infotext", { key: 'a407a98afeecf7634770f34e2f427a09d657419a', size: "small", semantic: "critical", id: this._invalidMessageId }, this._invalidMessage), index.h("span", { key: '4465c3745c21e5333c8498927416fd0f244673dd', "data-visually-hidden": "true", role: "status" }, this._voiceOverFallback)));
+            : null)))))), index.h("div", null, index.h("db-button", { variant: "ghost", width: "full", icon: "cross", size: "small", name: this._id, form: this._id, onClick: () => this.handleClose(undefined, true) }, (_o = this.mobileCloseButtonText) !== null && _o !== void 0 ? _o : constants.DEFAULT_CLOSE_BUTTON))))) : null), ((_p = this.showClearSelection) !== null && _p !== void 0 ? _p : true) && ((_q = this._values) === null || _q === void 0 ? void 0 : _q.length) ? (index.h("db-button", { icon: "cross", variant: "ghost", size: "small", noText: true, name: this._id, form: this._id, onClick: (event) => this.handleClearAll(event) }, this.clearSelectionText, index.h("db-tooltip", { placement: "top" }, this.clearSelectionText))) : null, index.h("span", { key: 'df9efbb6d3dbae644a5dbfc0fc92488f5b67da54', class: "db-custom-select-placeholder", "aria-hidden": index$1.getBooleanAsString(true), id: this._placeholderId }, (_r = this.placeholder) !== null && _r !== void 0 ? _r : this.label), index$1.stringPropVisible(this.message, this.showMessage) ? (index.h("db-infotext", { size: "small", icon: this.messageIcon, id: this._messageId }, this.message)) : null, this.hasValidState() ? (index.h("db-infotext", { size: "small", semantic: "successful", id: this._validMessageId }, this.validMessage || constants.DEFAULT_VALID_MESSAGE)) : null, index.h("db-infotext", { key: '562bb4adda23878fe108eba0d2395124685cf24a', size: "small", semantic: "critical", id: this._invalidMessageId }, this._invalidMessage), index.h("span", { key: '93195757db11641ed911fd3684e91d6b76168cb1', "data-visually-hidden": "true", role: "status" }, this._voiceOverFallback)));
     }
     static get watchers() { return {
         "detailsRef": [{

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

@@ -1,7 +1,7 @@
 'use strict';
 
-var index = require('./index-Mi8dWSSD.js');
-var index$1 = require('./index-CW5aVEyQ.js');
+var index = require('./index-TxzPzc5I.js');
+var index$1 = require('./index-CsHqnQII.js');
 
 const DBDivider = class {
     constructor(hostRef) {
@@ -43,7 +43,7 @@ const DBDivider = class {
         this.enableAttributePassing(this._ref, "db-divider");
     }
     render() {
-        return (index.h("div", { key: '0e9bf54bcd77ec1c324eb6300162bbf8c67b8c16', class: index$1.cls("db-divider", this.className), ref: (el) => {
+        return (index.h("div", { key: '46d2766f34dc660f82cda63261ea96da0a72115f', class: index$1.cls("db-divider", this.className), ref: (el) => {
                 this._ref = el;
             }, id: this.id, "data-margin": this.margin, "data-variant": this.variant, "data-emphasis": this.emphasis, "data-width": this.width }));
     }

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

@@ -1,8 +1,8 @@
 'use strict';
 
-var index = require('./index-Mi8dWSSD.js');
+var index = require('./index-TxzPzc5I.js');
 var constants = require('./constants-bMY2_d8A.js');
-var index$1 = require('./index-CW5aVEyQ.js');
+var index$1 = require('./index-CsHqnQII.js');
 
 const DBDrawer = class {
     constructor(hostRef) {
@@ -131,11 +131,11 @@ const DBDrawer = class {
     }
     render() {
         var _a;
-        return (index.h("dialog", { key: '171c5580c99bbe2d2ea0a6e8e5962e4132d9b07f', class: "db-drawer", id: this.id, ref: (el) => {
+        return (index.h("dialog", { key: 'cc48481a5694b3ed2a21accbbbf0a2d803cbae34', class: "db-drawer", id: this.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 }, index.h("article", { key: 'e9fad39beff3e642ad13be4950bb64fd15896f80', class: index$1.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 }, index.h("article", { key: 'd50942300d0d842e3f6ad754920c8deddb3b4f3f', class: index$1.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": index$1.getBooleanAsString(this.rounded) }, index.h("header", { key: 'cb9f374f26ebca0f11d02081c28e856cc87107c3', class: "db-drawer-header" }, index.h("div", { key: '7fca8037c16e16d909bcede75e223f38ae019453', class: "db-drawer-header-text" }, index.h("slot", { key: '85159cc4d260fa992bfe8b933920ae286b9ab09c', name: "drawerHeader" })), index.h("db-button", { key: '4a9ad6ba576480b154614da72752421a8ff81df6', class: "button-close-drawer", icon: "cross", variant: "ghost", id: this.closeButtonId, noText: true, onClick: (event) => this.handleClose(event, true) }, (_a = this.closeButtonText) !== null && _a !== void 0 ? _a : constants.DEFAULT_CLOSE_BUTTON)), index.h("div", { key: '9dbbd6a3835dad60dea79a9b2fbed6a62dd6b837', class: "db-drawer-content" }, index.h("slot", { key: '1bc4b88266e6d7250d0075e2405b725ad38b950e' })))));
+            }, "data-spacing": this.spacing, "data-width": this.width, "data-direction": this.direction, "data-rounded": index$1.getBooleanAsString(this.rounded) }, index.h("header", { key: 'd1c47a728ce03f4415e455352efcee61b9373d61', class: "db-drawer-header" }, index.h("div", { key: 'f19808d4597fbda4d9e0ceb224f8de4d3407f98c', class: "db-drawer-header-text" }, index.h("slot", { key: 'cfab663cef760d9d78244eead6b92bbabd919b4a', name: "drawerHeader" })), index.h("db-button", { key: '5391285b886bfba3be830f49365fd7c3acd98bb6', class: "button-close-drawer", icon: "cross", variant: "ghost", id: this.closeButtonId, noText: true, onClick: (event) => this.handleClose(event, true) }, (_a = this.closeButtonText) !== null && _a !== void 0 ? _a : constants.DEFAULT_CLOSE_BUTTON)), index.h("div", { key: 'b83ad6bdaa47d7881ce831c696f38df7b77b041d', class: "db-drawer-content" }, index.h("slot", { key: '9fc37bc76ce5a6fc2945eaa225919f9c8fac8629' })))));
     }
     static get watchers() { return {
         "open": [{

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

@@ -1,8 +1,8 @@
 'use strict';
 
-var index = require('./index-Mi8dWSSD.js');
+var index = require('./index-TxzPzc5I.js');
 var constants = require('./constants-bMY2_d8A.js');
-var index$1 = require('./index-CW5aVEyQ.js');
+var index$1 = require('./index-CsHqnQII.js');
 var navigation = require('./navigation-DauGE-qj.js');
 require('./floating-components-ogUqz72V.js');
 
@@ -80,9 +80,9 @@ const DBHeader = class {
     }
     render() {
         var _a;
-        return (index.h("header", { key: 'f9850f5a6f59bee2ed97db4baea343e07aaff91a', class: index$1.cls("db-header", this.className), ref: (el) => {
+        return (index.h("header", { key: 'f701b77c43467d06b10c109ff60694f70746eaf8', class: index$1.cls("db-header", this.className), ref: (el) => {
                 this._ref = el;
-            }, id: this.id, "data-width": this.width, "data-on-forcing-mobile": this.forceMobile && !this.forcedToMobile }, index.h("db-drawer", { key: '32f62d8f0bf634e96cf7b0e96721fcd40aa3a3eb', class: "db-header-drawer", spacing: "small", rounded: true, closeButtonId: this.closeButtonId, closeButtonText: this.closeButtonText, open: index$1.getBoolean(this.drawerOpen), onClose: () => this.handleToggle() }, index.h("div", { key: 'a42c28439d07e97a3842efe4fa1c143c23691b5f', class: "db-header-drawer-navigation" }, index.h("div", { key: '141165e04574db312d51b0b4c376c53ddace243e', class: "db-header-navigation", onClick: (event) => this.handleNavigationItemClick(event) }, index.h("slot", { key: '2208e0677b1f15da56fd6be230523559fcb5f1da' })), index.h("div", { key: 'fb980500cdb2f6f3ce2fce2489c48ac27ebd256a', class: "db-header-meta-navigation" }, index.h("slot", { key: '7eea7189a1e82821fc3f0bd600bda5a040382e88', name: "metaNavigation" }))), index.h("div", { key: 'a492419586593d43edbada69ad136ad832902e15', class: "db-header-secondary-action" }, index.h("slot", { key: '90ed75a19c230c3a2af94b8e0b397c8712f9a0df', name: "secondaryAction" }))), index.h("div", { key: '1d0451bd1f522f51cbd2bab3cd1b7c316fd644b4', class: "db-header-meta-navigation" }, index.h("slot", { key: 'd92c5a30a0131225f2b7b1428c5121fed241d8a7', name: "metaNavigation" })), index.h("div", { key: 'f65c8e6b2b997c281046f20e1ac7c89d8b5697f6', class: "db-header-navigation-bar" }, index.h("div", { key: 'be1e1017417595bbb4ff845b650f5edef1f4fd49', class: "db-header-brand-container" }, index.h("slot", { key: '5552b137967ae4659887ad67514fd0078ced1473', name: "brand" })), index.h("div", { key: '682e11b41f5131feb17cdf1e175b9bbcf8399740', class: "db-header-navigation-container" }, index.h("div", { key: '29f5a7afa6d8c014f6e574d72198289970e5324e', class: "db-header-navigation" }, index.h("slot", { key: 'f03956cf3368d3ec0dbaab3b3091c276eaf03a92' })), index.h("div", { key: '8a81b9ee537f84e14c9d41acf323552d6f239748', class: "db-header-primary-action" }, index.h("slot", { key: '78ae4dbdc9bcad5bd4bd951a0a334c47cb35bcf6', name: "primaryAction" }))), index.h("div", { key: 'e1e913c181df2f73cc9fe4cda17f505a26b1ad04', class: "db-header-action-container" }, index.h("div", { key: '92d7c9c0e50f9aa86e15c18a2ac7dddabc241358', class: "db-header-burger-menu-container" }, index.h("db-button", { key: '775ca507ba24b19e411e529e9ad67fcdfa6f3dea', icon: "menu", variant: "ghost", noText: true, onClick: () => this.handleToggle() }, (_a = this.burgerMenuLabel) !== null && _a !== void 0 ? _a : constants.DEFAULT_BURGER_MENU)), index.h("div", { key: '7cd5a16e27c72e3e0635056df8bcb7f45461c9fb', class: "db-header-secondary-action" }, index.h("slot", { key: '09669c165311f8dc95961c64900d5ab36281700a', name: "secondaryAction" }))))));
+            }, id: this.id, "data-width": this.width, "data-on-forcing-mobile": this.forceMobile && !this.forcedToMobile }, index.h("db-drawer", { key: '18c1b671c898c183bb352bb5f41978325cfa272e', class: "db-header-drawer", spacing: "small", rounded: true, closeButtonId: this.closeButtonId, closeButtonText: this.closeButtonText, open: index$1.getBoolean(this.drawerOpen), onClose: () => this.handleToggle() }, index.h("div", { key: 'dd79824d62aa735869d10c1d667a64de2ed61cd7', class: "db-header-drawer-navigation" }, index.h("div", { key: 'baab299c370aeb0133022ac8715a97af2d41e598', class: "db-header-navigation", onClick: (event) => this.handleNavigationItemClick(event) }, index.h("slot", { key: '25fba42e53aedf89b9efcd6479df4a20c31b37a0' })), index.h("div", { key: 'ee9e0fab26a77cbc44edda5f200e6d52e24d4ae6', class: "db-header-meta-navigation" }, index.h("slot", { key: '6a94b711843f10518e84f335df875d6d454d28a0', name: "metaNavigation" }))), index.h("div", { key: '1a9f4e2ccb9ffaddbbf19ee640dc82d0db009ffa', class: "db-header-secondary-action" }, index.h("slot", { key: '23f705f72608e8b5fa08fabc0f97ce61449fa388', name: "secondaryAction" }))), index.h("div", { key: 'a033891b1a8260327c56591fb12516dbe159b5e1', class: "db-header-meta-navigation" }, index.h("slot", { key: 'cfa5ffd51164e184eb68e04e8d83f3fd7ba94927', name: "metaNavigation" })), index.h("div", { key: '04430a76404e9e282b7249beee655a8e86d78dd2', class: "db-header-navigation-bar" }, index.h("div", { key: '5461e8c087ae579079017b738fb4ac36ddd44624', class: "db-header-brand-container" }, index.h("slot", { key: 'eed71de59cfb3cc65dc24797830bb4b7243a09f6', name: "brand" })), index.h("div", { key: 'c83e6866e91abc17fbe6ef06f3e976c8237644e7', class: "db-header-navigation-container" }, index.h("div", { key: '7cd0f313b6d25b400e0f0324b6f9d7e0f4dab61e', class: "db-header-navigation" }, index.h("slot", { key: '850c0eb5d3f7979a311880e3cf7b4c6484668ac3' })), index.h("div", { key: '48c8d805965f4bf8d443fa66bf2d8f9b46e30377', class: "db-header-primary-action" }, index.h("slot", { key: '42b4b88ecb12aedd83aaf97411c746a222ef7e83', name: "primaryAction" }))), index.h("div", { key: '836ed1d499998a707bc302443ed4885ec3347a0b', class: "db-header-action-container" }, index.h("div", { key: '8a483f37b9de0e49a97c352690dcfc9b3e457aba', class: "db-header-burger-menu-container" }, index.h("db-button", { key: '32e96e0f6ae32b0c56d4540307a5cf5e92e35822', icon: "menu", variant: "ghost", noText: true, onClick: () => this.handleToggle() }, (_a = this.burgerMenuLabel) !== null && _a !== void 0 ? _a : constants.DEFAULT_BURGER_MENU)), index.h("div", { key: 'c0db759bb4ce588e6d2302e3284908501fa556cb', class: "db-header-secondary-action" }, index.h("slot", { key: 'c2b198053cb8c57eeeb18153691b926627787083', name: "secondaryAction" }))))));
     }
     static get watchers() { return {
         "initialized": [{

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

@@ -1,7 +1,7 @@
 'use strict';
 
-var index = require('./index-Mi8dWSSD.js');
-var index$1 = require('./index-CW5aVEyQ.js');
+var index = require('./index-TxzPzc5I.js');
+var index$1 = require('./index-CsHqnQII.js');
 
 const DBIcon = class {
     constructor(hostRef) {
@@ -43,7 +43,7 @@ const DBIcon = class {
         this.enableAttributePassing(this._ref, "db-icon");
     }
     render() {
-        return (index.h("span", { key: '3a67532009f85e493784e99774e230f52c588ccc', class: index$1.cls("db-icon", this.className), "aria-hidden": "true", ref: (el) => {
+        return (index.h("span", { key: 'f74b58da121bb69df759870f24684f15fc63cd3c', class: index$1.cls("db-icon", this.className), "aria-hidden": "true", ref: (el) => {
                 this._ref = el;
             }, id: this.id, "data-icon": this.icon, "data-icon-weight": this.weight, "data-icon-variant": this.variant }, this.text ? this.text : index.h("slot", null)));
     }

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

@@ -1,7 +1,7 @@
 'use strict';
 
-var index = require('./index-Mi8dWSSD.js');
-var index$1 = require('./index-CW5aVEyQ.js');
+var index = require('./index-TxzPzc5I.js');
+var index$1 = require('./index-CsHqnQII.js');
 
 const DBInfotext = class {
     constructor(hostRef) {

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

@@ -1,7 +1,7 @@
 'use strict';
 
-var index = require('./index-Mi8dWSSD.js');
-var index$1 = require('./index-CW5aVEyQ.js');
+var index = require('./index-TxzPzc5I.js');
+var index$1 = require('./index-CsHqnQII.js');
 
 const DBLink = class {
     constructor(hostRef) {
@@ -44,7 +44,7 @@ const DBLink = class {
     }
     render() {
         var _a, _b;
-        return (index.h("a", { key: 'a43d8889621390017c07dda184c570e54d7f81e0', class: index$1.cls("db-link", this.className), ref: (el) => {
+        return (index.h("a", { key: '9eec6b26274544cc6325624ad4028039610c8b2a', class: index$1.cls("db-link", this.className), ref: (el) => {
                 this._ref = el;
             }, id: this.id, href: this.href, target: this.target, rel: this.rel, role: this.role, referrerPolicy: (_a = this.referrerpolicy) !== null && _a !== void 0 ? _a : this.referrerPolicy, hrefLang: this.hreflang, "aria-disabled": index$1.getBooleanAsString(this.disabled), tabIndex: this.disabled ? -1 : 0, "data-size": this.size, "data-show-icon-trailing": index$1.getBooleanAsString((_b = this.showIcon) !== null && _b !== void 0 ? _b : true), "data-variant": this.variant, "data-content": this.content || "internal", "data-wrap": index$1.getBooleanAsString(this.wrap) }, this.text ? this.text : index.h("slot", null)));
     }