@db-ux/ngx-core-components 4.3.2 → 4.4.1-footer-28739e3

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @db-ux/ngx-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/fesm2022/db-ux-ngx-core-components.mjs

@@ -246,8 +246,33 @@ const getOptionKey = (option, prefix) => {
     return `${prefix}${key}`;
 };
 const isKeyboardEvent = (event) => event.key !== undefined;
+/**
+ * Maps semantic values to appropriate ARIA roles for notifications
+ * @param semantic - The semantic type of the notification
+ * @param role - The aria role of the notification
+ * @param ariaLive - The aria-live of the notification
+ * @returns The appropriate ARIA role or undefined for default behavior
+ */
+const getNotificationRole = ({ semantic, role, ariaLive }) => {
+    if (role) {
+        return role;
+    }
+    if (ariaLive) {
+        return 'article';
+    }
+    switch (semantic) {
+        case 'critical':
+        case 'warning':
+            return 'alert';
+        case 'informational':
+        case 'successful':
+            return 'status';
+        default:
+            return 'article';
+    }
+};
 
-const defaultProps$z = {};
+const defaultProps$A = {};
 class DBAccordionItem {
     handleNameAttribute() {
         if (this._ref()?.nativeElement) {
@@ -401,7 +426,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
   </li> `, styles: [":host{display:contents}\n"] }]
         }], ctorParameters: () => [], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], defaultOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultOpen", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], className: [{ type: i0.Input, args: [{ isSignal: true, alias: "className", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], headlinePlain: [{ type: i0.Input, args: [{ isSignal: true, alias: "headlinePlain", required: false }] }], text: [{ type: i0.Input, args: [{ isSignal: true, alias: "text", required: false }] }], toggle: [{ type: i0.Output, args: ["toggle"] }], _ref: [{ type: i0.ViewChild, args: ["_ref", { isSignal: true }] }] } });
 
-const defaultProps$y = {};
+const defaultProps$z = {};
 class DBAccordion {
     convertItems() {
         try {
@@ -595,7 +620,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
 const AccordionVariantList = ['divider', 'card'];
 const AccordionBehaviorList = ['multiple', 'single'];
 
-const defaultProps$x = {};
+const defaultProps$y = {};
 class DBBadge {
     constructor() {
         this.cls = cls;
@@ -706,7 +731,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
 
 const BadgePlacementList = ['inline', 'corner-top-left', 'corner-top-right', 'corner-center-left', 'corner-center-right', 'corner-bottom-left', 'corner-bottom-right'];
 
-const defaultProps$w = {};
+const defaultProps$x = {};
 class DBBrand {
     constructor() {
         this.DEFAULT_ICON = DEFAULT_ICON;
@@ -786,7 +811,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
   </div> `, styles: [":host{display:contents}\n"] }]
         }], ctorParameters: () => [], propDecorators: { hideLogo: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideLogo", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], showIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "showIcon", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], className: [{ type: i0.Input, args: [{ isSignal: true, alias: "className", required: false }] }], text: [{ type: i0.Input, args: [{ isSignal: true, alias: "text", required: false }] }], _ref: [{ type: i0.ViewChild, args: ["_ref", { isSignal: true }] }] } });
 
-const defaultProps$v = {};
+const defaultProps$w = {};
 class DBButton {
     getButtonType() {
         if (this.type()) {
@@ -913,7 +938,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
 const ButtonVariantList = ['outlined', 'brand', 'filled', 'ghost'];
 const ButtonTypeList = ['button', 'reset', 'submit'];
 
-const defaultProps$u = {};
+const defaultProps$v = {};
 class DBCard {
     handleClick(event) {
         if (this.click) {
@@ -1050,7 +1075,7 @@ const addValueResetEventListener = (element, props, resetFunction, signal) => {
     }, signal);
 };
 
-const defaultProps$t = {};
+const defaultProps$u = {};
 class DBInfotext {
     constructor() {
         this.cls = cls;
@@ -1132,7 +1157,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
   > `, styles: [":host{display:contents}\n"] }]
         }], ctorParameters: () => [], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], className: [{ type: i0.Input, args: [{ isSignal: true, alias: "className", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], semantic: [{ type: i0.Input, args: [{ isSignal: true, alias: "semantic", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], showIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "showIcon", required: false }] }], text: [{ type: i0.Input, args: [{ isSignal: true, alias: "text", required: false }] }], _ref: [{ type: i0.ViewChild, args: ["_ref", { isSignal: true }] }] } });
 
-const defaultProps$s = {};
+const defaultProps$t = {};
 class DBCheckbox {
     hasValidState() {
         return !!(this.validMessage() ?? this.validation() === "valid");
@@ -1868,13 +1893,13 @@ const handleFixedPopover = (element, parent, placement) => {
     element.dataset['correctedPlacement'] = correctedPlacement;
 };
 
-const defaultProps$r = { width: "fixed" };
+const defaultProps$s = { width: "fixed" };
 class DBCustomSelectDropdown {
     constructor() {
         this.cls = cls;
         this.id = input(...(ngDevMode ? [undefined, { debugName: "id" }] : []));
         this.className = input(...(ngDevMode ? [undefined, { debugName: "className" }] : []));
-        this.width = input(defaultProps$r["width"], ...(ngDevMode ? [{ debugName: "width" }] : []));
+        this.width = input(defaultProps$s["width"], ...(ngDevMode ? [{ debugName: "width" }] : []));
         this._ref = viewChild("_ref", ...(ngDevMode ? [{ debugName: "_ref" }] : []));
     }
     /**
@@ -1939,7 +1964,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
   </article> `, styles: [":host{display:contents}\n"] }]
         }], ctorParameters: () => [], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], className: [{ type: i0.Input, args: [{ isSignal: true, alias: "className", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], _ref: [{ type: i0.ViewChild, args: ["_ref", { isSignal: true }] }] } });
 
-const defaultProps$q = {};
+const defaultProps$r = {};
 class DBCustomSelectListItem {
     handleChange(event) {
         event.stopPropagation();
@@ -2122,7 +2147,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
   </li> `, styles: [":host{display:contents}\n"] }]
         }], ctorParameters: () => [{ type: i0.Renderer2 }], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], isGroupTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "isGroupTitle", required: false }] }], showDivider: [{ type: i0.Input, args: [{ isSignal: true, alias: "showDivider", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], checked: [{ type: i0.Input, args: [{ isSignal: true, alias: "checked", required: false }] }, { type: i0.Output, args: ["checkedChange"] }], className: [{ type: i0.Input, args: [{ isSignal: true, alias: "className", required: false }] }], groupTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "groupTitle", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], showIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "showIcon", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }, { type: i0.Output, args: ["disabledChange"] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], change: [{ type: i0.Output, args: ["change"] }], _ref: [{ type: i0.ViewChild, args: ["_ref", { isSignal: true }] }] } });
 
-const defaultProps$p = {};
+const defaultProps$q = {};
 class DBCustomSelectList {
     constructor() {
         this.cls = cls;
@@ -2198,7 +2223,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
   </div> `, styles: [":host{display:contents}\n"] }]
         }], ctorParameters: () => [], propDecorators: { multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], className: [{ type: i0.Input, args: [{ isSignal: true, alias: "className", required: false }] }], _ref: [{ type: i0.ViewChild, args: ["_ref", { isSignal: true }] }] } });
 
-const defaultProps$o = {};
+const defaultProps$p = {};
 class DBInput {
     hasValidState() {
         return !!(this.validMessage() ?? this.validation() === "valid");
@@ -2668,7 +2693,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
   </div> `, styles: [":host{display:contents}\n"] }]
         }], ctorParameters: () => [{ type: i0.Renderer2 }], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], invalidMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalidMessage", required: false }] }], dataListId: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataListId", required: false }] }], message: [{ type: i0.Input, args: [{ isSignal: true, alias: "message", required: false }] }], showMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "showMessage", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], validMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "validMessage", required: false }] }], validation: [{ type: i0.Input, args: [{ isSignal: true, alias: "validation", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], minLength: [{ type: i0.Input, args: [{ isSignal: true, alias: "minLength", required: false }] }], maxLength: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxLength", required: false }] }], pattern: [{ type: i0.Input, args: [{ isSignal: true, alias: "pattern", required: false }] }], dataList: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataList", required: false }] }], className: [{ type: i0.Input, args: [{ isSignal: true, alias: "className", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], showLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "showLabel", required: false }] }], showIconLeading: [{ type: i0.Input, args: [{ isSignal: true, alias: "showIconLeading", required: false }] }], showIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "showIcon", required: false }] }], iconLeading: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconLeading", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], iconTrailing: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconTrailing", required: false }] }], showRequiredAsterisk: [{ type: i0.Input, args: [{ isSignal: true, alias: "showRequiredAsterisk", required: false }] }], showIconTrailing: [{ type: i0.Input, args: [{ isSignal: true, alias: "showIconTrailing", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], fieldSizing: [{ type: i0.Input, args: [{ isSignal: true, alias: "fieldSizing", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], accept: [{ type: i0.Input, args: [{ isSignal: true, alias: "accept", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }, { type: i0.Output, args: ["disabledChange"] }], step: [{ type: i0.Input, args: [{ isSignal: true, alias: "step", required: false }] }], maxlength: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxlength", required: false }] }], minlength: [{ type: i0.Input, args: [{ isSignal: true, alias: "minlength", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], readOnly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readOnly", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], form: [{ type: i0.Input, args: [{ isSignal: true, alias: "form", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], autocomplete: [{ type: i0.Input, args: [{ isSignal: true, alias: "autocomplete", required: false }] }], autofocus: [{ type: i0.Input, args: [{ isSignal: true, alias: "autofocus", required: false }] }], enterkeyhint: [{ type: i0.Input, args: [{ isSignal: true, alias: "enterkeyhint", required: false }] }], inputmode: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputmode", required: false }] }], ariaDescribedBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaDescribedBy", required: false }] }], messageSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "messageSize", required: false }] }], messageIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "messageIcon", required: false }] }], validMessageSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "validMessageSize", required: false }] }], invalidMessageSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalidMessageSize", required: false }] }], input: [{ type: i0.Output, args: ["input"] }], change: [{ type: i0.Output, args: ["change"] }], blur: [{ type: i0.Output, args: ["blur"] }], focus: [{ type: i0.Output, args: ["focus"] }], _ref: [{ type: i0.ViewChild, args: ["_ref", { isSignal: true }] }] } });
 
-const defaultProps$n = {};
+const defaultProps$o = {};
 class DBTooltip {
     handleClick(event) {
         event.stopPropagation();
@@ -2853,7 +2878,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
   ></i> `, styles: [":host{display:contents}\n"] }]
         }], ctorParameters: () => [], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], placement: [{ type: i0.Input, args: [{ isSignal: true, alias: "placement", required: false }] }], className: [{ type: i0.Input, args: [{ isSignal: true, alias: "className", required: false }] }], emphasis: [{ type: i0.Input, args: [{ isSignal: true, alias: "emphasis", required: false }] }], animation: [{ type: i0.Input, args: [{ isSignal: true, alias: "animation", required: false }] }], delay: [{ type: i0.Input, args: [{ isSignal: true, alias: "delay", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], showArrow: [{ type: i0.Input, args: [{ isSignal: true, alias: "showArrow", required: false }] }], _ref: [{ type: i0.ViewChild, args: ["_ref", { isSignal: true }] }] } });
 
-const defaultProps$m = {};
+const defaultProps$n = {};
 class DBTag {
     handleRemove(event) {
         if (!event)
@@ -2988,7 +3013,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
   </div> `, styles: [":host{display:contents}\n"] }]
         }], ctorParameters: () => [], propDecorators: { removeButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "removeButton", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], className: [{ type: i0.Input, args: [{ isSignal: true, alias: "className", required: false }] }], semantic: [{ type: i0.Input, args: [{ isSignal: true, alias: "semantic", required: false }] }], emphasis: [{ type: i0.Input, args: [{ isSignal: true, alias: "emphasis", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], showCheckState: [{ type: i0.Input, args: [{ isSignal: true, alias: "showCheckState", required: false }] }], showIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "showIcon", required: false }] }], noText: [{ type: i0.Input, args: [{ isSignal: true, alias: "noText", required: false }] }], overflow: [{ type: i0.Input, args: [{ isSignal: true, alias: "overflow", required: false }] }], text: [{ type: i0.Input, args: [{ isSignal: true, alias: "text", required: false }] }], behavior: [{ type: i0.Input, args: [{ isSignal: true, alias: "behavior", required: false }] }], remove: [{ type: i0.Output, args: ["remove"] }], _ref: [{ type: i0.ViewChild, args: ["_ref", { isSignal: true }] }] } });
 
-const defaultProps$l = {
+const defaultProps$m = {
     clearSelectionText: "Clear selection",
     showClearSelection: true,
 };
@@ -3470,8 +3495,8 @@ class DBCustomSelect {
         this.loadingText = input(...(ngDevMode ? [undefined, { debugName: "loadingText" }] : []));
         this.noResultsText = input(...(ngDevMode ? [undefined, { debugName: "noResultsText" }] : []));
         this.mobileCloseButtonText = input(...(ngDevMode ? [undefined, { debugName: "mobileCloseButtonText" }] : []));
-        this.showClearSelection = input(defaultProps$l["showClearSelection"], ...(ngDevMode ? [{ debugName: "showClearSelection" }] : []));
-        this.clearSelectionText = input(defaultProps$l["clearSelectionText"], ...(ngDevMode ? [{ debugName: "clearSelectionText" }] : []));
+        this.showClearSelection = input(defaultProps$m["showClearSelection"], ...(ngDevMode ? [{ debugName: "showClearSelection" }] : []));
+        this.clearSelectionText = input(defaultProps$m["clearSelectionText"], ...(ngDevMode ? [{ debugName: "clearSelectionText" }] : []));
         this.placeholder = input(...(ngDevMode ? [undefined, { debugName: "placeholder" }] : []));
         this.messageIcon = input(...(ngDevMode ? [undefined, { debugName: "messageIcon" }] : []));
         this.amountChange = output();
@@ -4299,7 +4324,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
 
 const CustomSelectDropdownWidthList = ['fixed', 'auto', 'full'];
 
-const defaultProps$k = {};
+const defaultProps$l = {};
 class DBCustomSelectFormField {
     constructor() {
         this.cls = cls;
@@ -4369,7 +4394,7 @@ const CustomSelectListItemTypeList = ['checkbox', 'radio'];
 
 const SelectedTypeList = ['amount', 'text', 'tag'];
 
-const defaultProps$j = {};
+const defaultProps$k = {};
 class DBDivider {
     constructor() {
         this.cls = cls;
@@ -4446,7 +4471,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
 const DividerMarginList = ['none', '_'];
 const DividerVariantList = ['horizontal', 'vertical'];
 
-const defaultProps$i = {};
+const defaultProps$j = {};
 class DBDrawer {
     handleClose(event, forceClose) {
         if (!event)
@@ -4678,6 +4703,121 @@ const DrawerDirectionList = ['left', 'right', 'up', 'down'];
 const DrawerVariantList = ['modal', 'inside'];
 const DrawerPositionList = ['fixed', 'absolute'];
 
+const defaultProps$i = {
+    showCopyright: true,
+    showMain: true,
+    showMeta: true,
+};
+class DBFooter {
+    constructor() {
+        this.cls = cls;
+        this.getBoolean = getBoolean;
+        this.id = input(...(ngDevMode ? [undefined, { debugName: "id" }] : []));
+        this.className = input(...(ngDevMode ? [undefined, { debugName: "className" }] : []));
+        this.width = input(...(ngDevMode ? [undefined, { debugName: "width" }] : []));
+        this.showMain = input(defaultProps$i["showMain"], ...(ngDevMode ? [{ debugName: "showMain" }] : []));
+        this.showMeta = input(defaultProps$i["showMeta"], ...(ngDevMode ? [{ debugName: "showMeta" }] : []));
+        this.showCopyright = input(defaultProps$i["showCopyright"], ...(ngDevMode ? [{ debugName: "showCopyright" }] : []));
+        this._ref = viewChild("_ref", ...(ngDevMode ? [{ debugName: "_ref" }] : []));
+    }
+    /**
+     * 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?.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);
+                    }
+                }
+            }
+        }
+    }
+    ngAfterViewInit() {
+        if (typeof window !== "undefined") {
+            const element = this._ref()?.nativeElement;
+            this.enableAttributePassing(element, "db-footer");
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DBFooter, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: DBFooter, isStandalone: true, selector: "db-footer", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, showMain: { classPropertyName: "showMain", publicName: "showMain", isSignal: true, isRequired: false, transformFunction: null }, showMeta: { classPropertyName: "showMeta", publicName: "showMeta", isSignal: true, isRequired: false, transformFunction: null }, showCopyright: { classPropertyName: "showCopyright", publicName: "showCopyright", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "_ref", first: true, predicate: ["_ref"], descendants: true, isSignal: true }], ngImport: i0, template: `<footer
+    #_ref
+    [attr.id]="id()"
+    [class]="cls('db-footer', className())"
+    [attr.data-width]="width()"
+  >
+    @if(getBoolean(showMain(), 'showMain')){
+    <section class="db-footer-main">
+      <div class="db-footer-content-container">
+        <div class="db-footer-main-inner">
+          <ng-content select="[main]"> </ng-content>
+        </div>
+      </div>
+    </section>
+    } @if(getBoolean(showMeta(), 'showMeta')){
+    <section class="db-footer-meta">
+      <div class="db-footer-content-container">
+        <div class="db-footer-meta-inner">
+          @if(getBoolean(showCopyright(), 'showCopyright')){
+          <p class="db-footer-copyright">© Deutsche Bahn AG</p>
+          }
+          <ng-content select="[meta]"> </ng-content>
+        </div>
+      </div>
+    </section>
+    }
+  </footer> `, isInline: true, styles: [":host{display:contents}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DBFooter, decorators: [{
+            type: Component,
+            args: [{ selector: "db-footer", standalone: true, imports: [CommonModule], template: `<footer
+    #_ref
+    [attr.id]="id()"
+    [class]="cls('db-footer', className())"
+    [attr.data-width]="width()"
+  >
+    @if(getBoolean(showMain(), 'showMain')){
+    <section class="db-footer-main">
+      <div class="db-footer-content-container">
+        <div class="db-footer-main-inner">
+          <ng-content select="[main]"> </ng-content>
+        </div>
+      </div>
+    </section>
+    } @if(getBoolean(showMeta(), 'showMeta')){
+    <section class="db-footer-meta">
+      <div class="db-footer-content-container">
+        <div class="db-footer-meta-inner">
+          @if(getBoolean(showCopyright(), 'showCopyright')){
+          <p class="db-footer-copyright">© Deutsche Bahn AG</p>
+          }
+          <ng-content select="[meta]"> </ng-content>
+        </div>
+      </div>
+    </section>
+    }
+  </footer> `, styles: [":host{display:contents}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], className: [{ type: i0.Input, args: [{ isSignal: true, alias: "className", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], showMain: [{ type: i0.Input, args: [{ isSignal: true, alias: "showMain", required: false }] }], showMeta: [{ type: i0.Input, args: [{ isSignal: true, alias: "showMeta", required: false }] }], showCopyright: [{ type: i0.Input, args: [{ isSignal: true, alias: "showCopyright", required: false }] }], _ref: [{ type: i0.ViewChild, args: ["_ref", { isSignal: true }] }] } });
+
 const isEventTargetNavigationItem = (event) => {
     const { target } = event;
     return Boolean(!target?.classList?.contains('db-navigation-item-expand-button') && target?.parentElement?.classList.contains('db-navigation-item'));
@@ -5595,14 +5735,16 @@ class DBNotification {
     }
     constructor() {
         this.cls = cls;
+        this.getNotificationRole = getNotificationRole;
         this.getBoolean = getBoolean;
         this.getBooleanAsString = getBooleanAsString;
         this.stringPropVisible = stringPropVisible;
         this.DEFAULT_CLOSE_BUTTON = DEFAULT_CLOSE_BUTTON;
         this.id = input(...(ngDevMode ? [undefined, { debugName: "id" }] : []));
         this.className = input(...(ngDevMode ? [undefined, { debugName: "className" }] : []));
-        this.ariaLive = input(...(ngDevMode ? [undefined, { debugName: "ariaLive" }] : []));
         this.semantic = input(...(ngDevMode ? [undefined, { debugName: "semantic" }] : []));
+        this.role = input(...(ngDevMode ? [undefined, { debugName: "role" }] : []));
+        this.ariaLive = input(...(ngDevMode ? [undefined, { debugName: "ariaLive" }] : []));
         this.variant = input(...(ngDevMode ? [undefined, { debugName: "variant" }] : []));
         this.showIcon = input(...(ngDevMode ? [undefined, { debugName: "showIcon" }] : []));
         this.icon = input(...(ngDevMode ? [undefined, { debugName: "icon" }] : []));
@@ -5657,10 +5799,15 @@ class DBNotification {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DBNotification, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: DBNotification, isStandalone: true, selector: "db-notification", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, ariaLive: { classPropertyName: "ariaLive", publicName: "ariaLive", isSignal: true, isRequired: false, transformFunction: null }, semantic: { classPropertyName: "semantic", publicName: "semantic", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, showIcon: { classPropertyName: "showIcon", publicName: "showIcon", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, linkVariant: { classPropertyName: "linkVariant", publicName: "linkVariant", isSignal: true, isRequired: false, transformFunction: null }, headline: { classPropertyName: "headline", publicName: "headline", isSignal: true, isRequired: false, transformFunction: null }, showHeadline: { classPropertyName: "showHeadline", publicName: "showHeadline", isSignal: true, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, timestamp: { classPropertyName: "timestamp", publicName: "timestamp", isSignal: true, isRequired: false, transformFunction: null }, showTimestamp: { classPropertyName: "showTimestamp", publicName: "showTimestamp", isSignal: true, isRequired: false, transformFunction: null }, closeable: { classPropertyName: "closeable", publicName: "closeable", isSignal: true, isRequired: false, transformFunction: null }, closeButtonId: { classPropertyName: "closeButtonId", publicName: "closeButtonId", isSignal: true, isRequired: false, transformFunction: null }, closeButtonText: { classPropertyName: "closeButtonText", publicName: "closeButtonText", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { close: "close" }, viewQueries: [{ propertyName: "_ref", first: true, predicate: ["_ref"], descendants: true, isSignal: true }], ngImport: i0, template: `<article
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: DBNotification, isStandalone: true, selector: "db-notification", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, semantic: { classPropertyName: "semantic", publicName: "semantic", isSignal: true, isRequired: false, transformFunction: null }, role: { classPropertyName: "role", publicName: "role", isSignal: true, isRequired: false, transformFunction: null }, ariaLive: { classPropertyName: "ariaLive", publicName: "ariaLive", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, showIcon: { classPropertyName: "showIcon", publicName: "showIcon", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, linkVariant: { classPropertyName: "linkVariant", publicName: "linkVariant", isSignal: true, isRequired: false, transformFunction: null }, headline: { classPropertyName: "headline", publicName: "headline", isSignal: true, isRequired: false, transformFunction: null }, showHeadline: { classPropertyName: "showHeadline", publicName: "showHeadline", isSignal: true, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, timestamp: { classPropertyName: "timestamp", publicName: "timestamp", isSignal: true, isRequired: false, transformFunction: null }, showTimestamp: { classPropertyName: "showTimestamp", publicName: "showTimestamp", isSignal: true, isRequired: false, transformFunction: null }, closeable: { classPropertyName: "closeable", publicName: "closeable", isSignal: true, isRequired: false, transformFunction: null }, closeButtonId: { classPropertyName: "closeButtonId", publicName: "closeButtonId", isSignal: true, isRequired: false, transformFunction: null }, closeButtonText: { classPropertyName: "closeButtonText", publicName: "closeButtonText", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { close: "close" }, viewQueries: [{ propertyName: "_ref", first: true, predicate: ["_ref"], descendants: true, isSignal: true }], ngImport: i0, template: `<div
     #_ref
     [attr.id]="id()"
     [class]="cls('db-notification', className())"
+    [attr.role]="getNotificationRole({
+          semantic: semantic(),
+          role: role(),
+          ariaLive: ariaLive()
+        })"
     [attr.aria-live]="ariaLive()"
     [attr.data-semantic]="semantic()"
     [attr.data-variant]="variant()"
@@ -5692,14 +5839,19 @@ class DBNotification {
       >{{closeButtonText() ?? DEFAULT_CLOSE_BUTTON}}</db-button
     >
     }
-  </article> `, isInline: true, styles: [":host{display:contents}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: DBButton, selector: "db-button", inputs: ["type", "id", "className", "disabled", "iconLeading", "icon", "showIconLeading", "showIcon", "iconTrailing", "showIconTrailing", "size", "width", "variant", "noText", "name", "form", "value", "text"], outputs: ["click"] }] }); }
+  </div> `, isInline: true, styles: [":host{display:contents}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: DBButton, selector: "db-button", inputs: ["type", "id", "className", "disabled", "iconLeading", "icon", "showIconLeading", "showIcon", "iconTrailing", "showIconTrailing", "size", "width", "variant", "noText", "name", "form", "value", "text"], outputs: ["click"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DBNotification, decorators: [{
             type: Component,
-            args: [{ selector: "db-notification", standalone: true, imports: [CommonModule, DBButton], template: `<article
+            args: [{ selector: "db-notification", standalone: true, imports: [CommonModule, DBButton], template: `<div
     #_ref
     [attr.id]="id()"
     [class]="cls('db-notification', className())"
+    [attr.role]="getNotificationRole({
+          semantic: semantic(),
+          role: role(),
+          ariaLive: ariaLive()
+        })"
     [attr.aria-live]="ariaLive()"
     [attr.data-semantic]="semantic()"
     [attr.data-variant]="variant()"
@@ -5731,8 +5883,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
       >{{closeButtonText() ?? DEFAULT_CLOSE_BUTTON}}</db-button
     >
     }
-  </article> `, styles: [":host{display:contents}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], className: [{ type: i0.Input, args: [{ isSignal: true, alias: "className", required: false }] }], ariaLive: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLive", required: false }] }], semantic: [{ type: i0.Input, args: [{ isSignal: true, alias: "semantic", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], showIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "showIcon", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], linkVariant: [{ type: i0.Input, args: [{ isSignal: true, alias: "linkVariant", required: false }] }], headline: [{ type: i0.Input, args: [{ isSignal: true, alias: "headline", required: false }] }], showHeadline: [{ type: i0.Input, args: [{ isSignal: true, alias: "showHeadline", required: false }] }], text: [{ type: i0.Input, args: [{ isSignal: true, alias: "text", required: false }] }], timestamp: [{ type: i0.Input, args: [{ isSignal: true, alias: "timestamp", required: false }] }], showTimestamp: [{ type: i0.Input, args: [{ isSignal: true, alias: "showTimestamp", required: false }] }], closeable: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeable", required: false }] }], closeButtonId: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeButtonId", required: false }] }], closeButtonText: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeButtonText", required: false }] }], close: [{ type: i0.Output, args: ["close"] }], _ref: [{ type: i0.ViewChild, args: ["_ref", { isSignal: true }] }] } });
+  </div> `, styles: [":host{display:contents}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], className: [{ type: i0.Input, args: [{ isSignal: true, alias: "className", required: false }] }], semantic: [{ type: i0.Input, args: [{ isSignal: true, alias: "semantic", required: false }] }], role: [{ type: i0.Input, args: [{ isSignal: true, alias: "role", required: false }] }], ariaLive: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLive", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], showIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "showIcon", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], linkVariant: [{ type: i0.Input, args: [{ isSignal: true, alias: "linkVariant", required: false }] }], headline: [{ type: i0.Input, args: [{ isSignal: true, alias: "headline", required: false }] }], showHeadline: [{ type: i0.Input, args: [{ isSignal: true, alias: "showHeadline", required: false }] }], text: [{ type: i0.Input, args: [{ isSignal: true, alias: "text", required: false }] }], timestamp: [{ type: i0.Input, args: [{ isSignal: true, alias: "timestamp", required: false }] }], showTimestamp: [{ type: i0.Input, args: [{ isSignal: true, alias: "showTimestamp", required: false }] }], closeable: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeable", required: false }] }], closeButtonId: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeButtonId", required: false }] }], closeButtonText: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeButtonText", required: false }] }], close: [{ type: i0.Output, args: ["close"] }], _ref: [{ type: i0.ViewChild, args: ["_ref", { isSignal: true }] }] } });
 
 const NotificationVariantList = ['docked', 'standalone', 'overlay'];
 const NotificationLinkVariantList = ['block', 'inline'];
@@ -6446,6 +6598,17 @@ class DBSelect {
     getOptionLabel(option) {
         return option.label ?? option.value?.toString();
     }
+    shouldShowEmptyOption() {
+        const hasPlaceholderOrFloating = this.variant() === "floating" || !!this.placeholder();
+        if (!hasPlaceholderOrFloating) {
+            return false;
+        }
+        if (this.showEmptyOption() !== undefined) {
+            return this.showEmptyOption();
+        }
+        // Default: show empty option for non-required selects
+        return !this.required();
+    }
     trackByOptgroupOption0(_, optgroupOption) {
         return getOptionKey(optgroupOption, "select-optgroup-option-");
     }
@@ -6468,8 +6631,9 @@ class DBSelect {
         this.validMessage = input(...(ngDevMode ? [undefined, { debugName: "validMessage" }] : []));
         this.validation = input(...(ngDevMode ? [undefined, { debugName: "validation" }] : []));
         this.required = input(...(ngDevMode ? [undefined, { debugName: "required" }] : []));
-        this.className = input(...(ngDevMode ? [undefined, { debugName: "className" }] : []));
         this.variant = input(...(ngDevMode ? [undefined, { debugName: "variant" }] : []));
+        this.showEmptyOption = input(...(ngDevMode ? [undefined, { debugName: "showEmptyOption" }] : []));
+        this.className = input(...(ngDevMode ? [undefined, { debugName: "className" }] : []));
         this.showLabel = input(...(ngDevMode ? [undefined, { debugName: "showLabel" }] : []));
         this.showRequiredAsterisk = input(...(ngDevMode ? [undefined, { debugName: "showRequiredAsterisk" }] : []));
         this.icon = input(...(ngDevMode ? [undefined, { debugName: "icon" }] : []));
@@ -6641,7 +6805,7 @@ class DBSelect {
         this.abortController()?.abort();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DBSelect, deps: [{ token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: DBSelect, isStandalone: true, selector: "db-select", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, invalidMessage: { classPropertyName: "invalidMessage", publicName: "invalidMessage", isSignal: true, isRequired: false, transformFunction: null }, message: { classPropertyName: "message", publicName: "message", isSignal: true, isRequired: false, transformFunction: null }, showMessage: { classPropertyName: "showMessage", publicName: "showMessage", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, validMessage: { classPropertyName: "validMessage", publicName: "validMessage", isSignal: true, isRequired: false, transformFunction: null }, validation: { classPropertyName: "validation", publicName: "validation", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, showLabel: { classPropertyName: "showLabel", publicName: "showLabel", isSignal: true, isRequired: false, transformFunction: null }, showRequiredAsterisk: { classPropertyName: "showRequiredAsterisk", publicName: "showRequiredAsterisk", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, showIcon: { classPropertyName: "showIcon", publicName: "showIcon", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, autocomplete: { classPropertyName: "autocomplete", publicName: "autocomplete", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, ariaDescribedBy: { classPropertyName: "ariaDescribedBy", publicName: "ariaDescribedBy", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, messageIcon: { classPropertyName: "messageIcon", publicName: "messageIcon", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", disabled: "disabledChange", click: "click", input: "input", change: "change", blur: "blur", focus: "focus" }, providers: [{
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: DBSelect, isStandalone: true, selector: "db-select", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, invalidMessage: { classPropertyName: "invalidMessage", publicName: "invalidMessage", isSignal: true, isRequired: false, transformFunction: null }, message: { classPropertyName: "message", publicName: "message", isSignal: true, isRequired: false, transformFunction: null }, showMessage: { classPropertyName: "showMessage", publicName: "showMessage", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, validMessage: { classPropertyName: "validMessage", publicName: "validMessage", isSignal: true, isRequired: false, transformFunction: null }, validation: { classPropertyName: "validation", publicName: "validation", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, showEmptyOption: { classPropertyName: "showEmptyOption", publicName: "showEmptyOption", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, showLabel: { classPropertyName: "showLabel", publicName: "showLabel", isSignal: true, isRequired: false, transformFunction: null }, showRequiredAsterisk: { classPropertyName: "showRequiredAsterisk", publicName: "showRequiredAsterisk", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, showIcon: { classPropertyName: "showIcon", publicName: "showIcon", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, autocomplete: { classPropertyName: "autocomplete", publicName: "autocomplete", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, ariaDescribedBy: { classPropertyName: "ariaDescribedBy", publicName: "ariaDescribedBy", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, messageIcon: { classPropertyName: "messageIcon", publicName: "messageIcon", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", disabled: "disabledChange", click: "click", input: "input", change: "change", blur: "blur", focus: "focus" }, providers: [{
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: DBSelect,
                 multi: true
@@ -6673,8 +6837,12 @@ class DBSelect {
       (focus)="handleFocus($event)"
       [attr.aria-describedby]="ariaDescribedBy() ?? _descByIds()"
     >
-      @if(variant() === 'floating' || placeholder()){
-      <option class="placeholder" value=""></option>
+      @if(variant() === 'floating' || !!placeholder()){
+      <option
+        class="placeholder"
+        value=""
+        [attr.data-show-empty-option]="getBooleanAsString(shouldShowEmptyOption())"
+      ></option>
       } @if(options()?.length){ @for (option of options();track i;let i =
       $index) {
       <ng-container
@@ -6773,8 +6941,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
       (focus)="handleFocus($event)"
       [attr.aria-describedby]="ariaDescribedBy() ?? _descByIds()"
     >
-      @if(variant() === 'floating' || placeholder()){
-      <option class="placeholder" value=""></option>
+      @if(variant() === 'floating' || !!placeholder()){
+      <option
+        class="placeholder"
+        value=""
+        [attr.data-show-empty-option]="getBooleanAsString(shouldShowEmptyOption())"
+      ></option>
       } @if(options()?.length){ @for (option of options();track i;let i =
       $index) {
       <ng-container
@@ -6838,7 +7010,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
       >{{_voiceOverFallback()}}</span
     >
   </div> `, styles: [":host{display:contents}\n"] }]
-        }], ctorParameters: () => [{ type: i0.Renderer2 }], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], invalidMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalidMessage", required: false }] }], message: [{ type: i0.Input, args: [{ isSignal: true, alias: "message", required: false }] }], showMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "showMessage", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], validMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "validMessage", required: false }] }], validation: [{ type: i0.Input, args: [{ isSignal: true, alias: "validation", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], className: [{ type: i0.Input, args: [{ isSignal: true, alias: "className", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], showLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "showLabel", required: false }] }], showRequiredAsterisk: [{ type: i0.Input, args: [{ isSignal: true, alias: "showRequiredAsterisk", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], showIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "showIcon", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }, { type: i0.Output, args: ["disabledChange"] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], autocomplete: [{ type: i0.Input, args: [{ isSignal: true, alias: "autocomplete", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], ariaDescribedBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaDescribedBy", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], messageIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "messageIcon", required: false }] }], click: [{ type: i0.Output, args: ["click"] }], input: [{ type: i0.Output, args: ["input"] }], change: [{ type: i0.Output, args: ["change"] }], blur: [{ type: i0.Output, args: ["blur"] }], focus: [{ type: i0.Output, args: ["focus"] }], _ref: [{ type: i0.ViewChild, args: ["_ref", { isSignal: true }] }] } });
+        }], ctorParameters: () => [{ type: i0.Renderer2 }], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], invalidMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalidMessage", required: false }] }], message: [{ type: i0.Input, args: [{ isSignal: true, alias: "message", required: false }] }], showMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "showMessage", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], validMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "validMessage", required: false }] }], validation: [{ type: i0.Input, args: [{ isSignal: true, alias: "validation", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], showEmptyOption: [{ type: i0.Input, args: [{ isSignal: true, alias: "showEmptyOption", required: false }] }], className: [{ type: i0.Input, args: [{ isSignal: true, alias: "className", required: false }] }], showLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "showLabel", required: false }] }], showRequiredAsterisk: [{ type: i0.Input, args: [{ isSignal: true, alias: "showRequiredAsterisk", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], showIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "showIcon", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }, { type: i0.Output, args: ["disabledChange"] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], autocomplete: [{ type: i0.Input, args: [{ isSignal: true, alias: "autocomplete", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], ariaDescribedBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaDescribedBy", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], messageIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "messageIcon", required: false }] }], click: [{ type: i0.Output, args: ["click"] }], input: [{ type: i0.Output, args: ["input"] }], change: [{ type: i0.Output, args: ["change"] }], blur: [{ type: i0.Output, args: ["blur"] }], focus: [{ type: i0.Output, args: ["focus"] }], _ref: [{ type: i0.ViewChild, args: ["_ref", { isSignal: true }] }] } });
 
 const defaultProps$6 = {};
 class DBStack {
@@ -8390,5 +8562,5 @@ const AlignmentList = ['start', 'center'];
  * Generated bundle index. Do not edit.
  */
 
-export { AccordionBehaviorList, AccordionVariantList, AlignmentList, AutoCompleteList, BadgePlacementList, ButtonTypeList, ButtonVariantList, COLOR, COLORS, COLORS_SIMPLE, COLOR_CONST, COLOR_SIMPLE, CardBehaviorList, CardElevationLevelList, CustomSelectDropdownWidthList, CustomSelectListItemTypeList, DBAccordion, DBAccordionItem, DBBadge, DBBrand, DBButton, DBCard, DBCheckbox, DBCustomSelect, DBCustomSelectDropdown, DBCustomSelectFormField, DBCustomSelectList, DBCustomSelectListItem, DBDivider, DBDrawer, DBHeader, DBIcon, DBInfotext, DBInput, DBLink, DBNavigation, DBNavigationItem, DBNotification, DBPage, DBPopover, DBRadio, DBSection, DBSelect, DBStack, DBSwitch, DBTabItem, DBTabList, DBTabPanel, DBTabs, DBTag, DBTextarea, DBTooltip, DB_UX_LOCAL_STORAGE_FRAMEWORK, DB_UX_LOCAL_STORAGE_MODE, DEFAULT_BACK, DEFAULT_BURGER_MENU, DEFAULT_CLOSE_BUTTON, DEFAULT_DATALIST_ID_SUFFIX, DEFAULT_ICON, DEFAULT_ID, DEFAULT_INVALID_MESSAGE, DEFAULT_INVALID_MESSAGE_ID_SUFFIX, DEFAULT_LABEL, DEFAULT_LABEL_ID_SUFFIX, DEFAULT_MESSAGE, DEFAULT_MESSAGE_ID_SUFFIX, DEFAULT_PLACEHOLDER, DEFAULT_PLACEHOLDER_ID_SUFFIX, DEFAULT_REMOVE, DEFAULT_ROWS, DEFAULT_SELECTED, DEFAULT_SELECT_ID_SUFFIX, DEFAULT_VALID_MESSAGE, DEFAULT_VALID_MESSAGE_ID_SUFFIX, DEFAULT_VIEWPORT, DENSITIES, DENSITY, DENSITY_CONST, DESKTOP_VIEWPORT, DividerMarginList, DividerVariantList, DocumentClickListener, DocumentScrollListener, DrawerBackdropList, DrawerDirectionList, DrawerPositionList, DrawerVariantList, EmphasisList, FieldSizingList, GapSpacingList, IconWeightList, InputTypeList, LabelVariantHorizontalList, LabelVariantList, LinkContentList, LinkReferrerPolicyList, LinkSizeList, LinkTargetList, LinkVariantList, MarginList, MaxWidthList, MetaNavigationDirective, NavigationContentDirective, NavigationDirective, NavigationItemSafeTriangle, NotificationAriaLiveList, NotificationLinkVariantList, NotificationVariantList, OrientationList, PageDocumentOverflowList, PageVariantList, PlacementHorizontalList, PlacementList, PlacementVerticalList, PopoverDelayList, PopoverWidthList, SEMANTIC, SEMANTICS, SecondaryActionDirective, SelectedTypeList, SemanticList, SizeList, SpacingList, StackAlignmentList, StackDirectionList, StackJustifyContentList, StackVariantList, TESTING_VIEWPORTS, TabsBehaviorList, TabsInitialSelectedModeList, TagBehaviorList, TextareaResizeList, TextareaWrapList, TooltipVariantList, ValidationList, WidthList, addAttributeToChildren, cls, delay, getBoolean, getBooleanAsString, getFloatingProps, getHideProp, getInputValue, getNumber, getOptionKey, getSearchInput, getStep, handleDataOutside, handleFixedDropdown, handleFixedPopover, hasVoiceOver, isArrayOfStrings, isEventTargetNavigationItem, isIOSSafari, isKeyboardEvent, stringPropVisible, uuid };
+export { AccordionBehaviorList, AccordionVariantList, AlignmentList, AutoCompleteList, BadgePlacementList, ButtonTypeList, ButtonVariantList, COLOR, COLORS, COLORS_SIMPLE, COLOR_CONST, COLOR_SIMPLE, CardBehaviorList, CardElevationLevelList, CustomSelectDropdownWidthList, CustomSelectListItemTypeList, DBAccordion, DBAccordionItem, DBBadge, DBBrand, DBButton, DBCard, DBCheckbox, DBCustomSelect, DBCustomSelectDropdown, DBCustomSelectFormField, DBCustomSelectList, DBCustomSelectListItem, DBDivider, DBDrawer, DBFooter, DBHeader, DBIcon, DBInfotext, DBInput, DBLink, DBNavigation, DBNavigationItem, DBNotification, DBPage, DBPopover, DBRadio, DBSection, DBSelect, DBStack, DBSwitch, DBTabItem, DBTabList, DBTabPanel, DBTabs, DBTag, DBTextarea, DBTooltip, DB_UX_LOCAL_STORAGE_FRAMEWORK, DB_UX_LOCAL_STORAGE_MODE, DEFAULT_BACK, DEFAULT_BURGER_MENU, DEFAULT_CLOSE_BUTTON, DEFAULT_DATALIST_ID_SUFFIX, DEFAULT_ICON, DEFAULT_ID, DEFAULT_INVALID_MESSAGE, DEFAULT_INVALID_MESSAGE_ID_SUFFIX, DEFAULT_LABEL, DEFAULT_LABEL_ID_SUFFIX, DEFAULT_MESSAGE, DEFAULT_MESSAGE_ID_SUFFIX, DEFAULT_PLACEHOLDER, DEFAULT_PLACEHOLDER_ID_SUFFIX, DEFAULT_REMOVE, DEFAULT_ROWS, DEFAULT_SELECTED, DEFAULT_SELECT_ID_SUFFIX, DEFAULT_VALID_MESSAGE, DEFAULT_VALID_MESSAGE_ID_SUFFIX, DEFAULT_VIEWPORT, DENSITIES, DENSITY, DENSITY_CONST, DESKTOP_VIEWPORT, DividerMarginList, DividerVariantList, DocumentClickListener, DocumentScrollListener, DrawerBackdropList, DrawerDirectionList, DrawerPositionList, DrawerVariantList, EmphasisList, FieldSizingList, GapSpacingList, IconWeightList, InputTypeList, LabelVariantHorizontalList, LabelVariantList, LinkContentList, LinkReferrerPolicyList, LinkSizeList, LinkTargetList, LinkVariantList, MarginList, MaxWidthList, MetaNavigationDirective, NavigationContentDirective, NavigationDirective, NavigationItemSafeTriangle, NotificationAriaLiveList, NotificationLinkVariantList, NotificationVariantList, OrientationList, PageDocumentOverflowList, PageVariantList, PlacementHorizontalList, PlacementList, PlacementVerticalList, PopoverDelayList, PopoverWidthList, SEMANTIC, SEMANTICS, SecondaryActionDirective, SelectedTypeList, SemanticList, SizeList, SpacingList, StackAlignmentList, StackDirectionList, StackJustifyContentList, StackVariantList, TESTING_VIEWPORTS, TabsBehaviorList, TabsInitialSelectedModeList, TagBehaviorList, TextareaResizeList, TextareaWrapList, TooltipVariantList, ValidationList, WidthList, addAttributeToChildren, cls, delay, getBoolean, getBooleanAsString, getFloatingProps, getHideProp, getInputValue, getNotificationRole, getNumber, getOptionKey, getSearchInput, getStep, handleDataOutside, handleFixedDropdown, handleFixedPopover, hasVoiceOver, isArrayOfStrings, isEventTargetNavigationItem, isIOSSafari, isKeyboardEvent, stringPropVisible, uuid };
 //# sourceMappingURL=db-ux-ngx-core-components.mjs.map