@db-ux/ngx-core-components 3.1.19 → 4.0.0

package/fesm2022/db-ux-ngx-core-components.mjs

@@ -144,6 +144,25 @@ const cls = (...args) => {
 const isArrayOfStrings = (value) => Array.isArray(value) && value.every(item => typeof item === 'string');
 const appleOs = ['Mac', 'iPhone', 'iPad', 'iPod'];
 const hasVoiceOver = () => typeof window !== 'undefined' && appleOs.some(os => window.navigator.userAgent.includes(os));
+/**
+ * Determines if the current browser is Safari running on an iOS device.
+ *
+ * This function checks the user agent string to verify both iOS platform
+ * (iPad, iPhone, or iPod) and Safari browser, excluding other browsers
+ * such as Chrome, Firefox, Opera, and Edge on iOS.
+ *
+ * @returns {boolean} `true` if the browser is Safari on iOS, otherwise `false`.
+ */
+const isIOSSafari = () => {
+    if (typeof window === 'undefined' || typeof navigator === 'undefined')
+        return false;
+    const ua = navigator.userAgent;
+    // iOS detection
+    const isIOS = /iP(ad|hone|od)/.test(ua);
+    // Safari detection (not Chrome or Firefox on iOS)
+    const isSafari = !!ua.match(/Safari/) && !ua.match(/CriOS|FxiOS|OPiOS|EdgiOS/);
+    return isIOS && isSafari;
+};
 const delay = (fn, ms) => new Promise(() => setTimeout(fn, ms));
 /**
  * Some frameworks like stencil would not add "true" as value for a prop
@@ -233,19 +252,19 @@ class DBAccordionItem {
     constructor() {
         this.cls = cls;
         this.getBooleanAsString = getBooleanAsString;
-        this.id = input();
-        this.defaultOpen = input();
-        this.name = input();
-        this.className = input();
-        this.disabled = input();
-        this.headlinePlain = input();
-        this.text = input();
+        this.id = input(...(ngDevMode ? [undefined, { debugName: "id" }] : []));
+        this.defaultOpen = input(...(ngDevMode ? [undefined, { debugName: "defaultOpen" }] : []));
+        this.name = input(...(ngDevMode ? [undefined, { debugName: "name" }] : []));
+        this.className = input(...(ngDevMode ? [undefined, { debugName: "className" }] : []));
+        this.disabled = input(...(ngDevMode ? [undefined, { debugName: "disabled" }] : []));
+        this.headlinePlain = input(...(ngDevMode ? [undefined, { debugName: "headlinePlain" }] : []));
+        this.text = input(...(ngDevMode ? [undefined, { debugName: "text" }] : []));
         this.toggle = output();
-        this._ref = viewChild("_ref");
-        this._id = signal(DEFAULT_ID);
-        this._open = signal(false);
-        this._name = signal(undefined);
-        this.initialized = signal(false);
+        this._ref = viewChild("_ref", ...(ngDevMode ? [{ debugName: "_ref" }] : []));
+        this._id = signal(DEFAULT_ID, ...(ngDevMode ? [{ debugName: "_id" }] : []));
+        this._open = signal(false, ...(ngDevMode ? [{ debugName: "_open" }] : []));
+        this._name = signal(undefined, ...(ngDevMode ? [{ debugName: "_name" }] : []));
+        this.initialized = signal(false, ...(ngDevMode ? [{ debugName: "initialized" }] : []));
         if (typeof window !== "undefined") {
             effect(() => {
                 // --- Mitosis: Workaround to make sure the effect() is triggered ---
@@ -312,8 +331,8 @@ class DBAccordionItem {
             this.initialized.set(true);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: DBAccordionItem, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: DBAccordionItem, isStandalone: true, selector: "db-accordion-item", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, defaultOpen: { classPropertyName: "defaultOpen", publicName: "defaultOpen", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, headlinePlain: { classPropertyName: "headlinePlain", publicName: "headlinePlain", isSignal: true, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { toggle: "toggle" }, viewQueries: [{ propertyName: "_ref", first: true, predicate: ["_ref"], descendants: true, isSignal: true }], ngImport: i0, template: `<li
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: DBAccordionItem, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.2", type: DBAccordionItem, isStandalone: true, selector: "db-accordion-item", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, defaultOpen: { classPropertyName: "defaultOpen", publicName: "defaultOpen", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, headlinePlain: { classPropertyName: "headlinePlain", publicName: "headlinePlain", isSignal: true, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { toggle: "toggle" }, viewQueries: [{ propertyName: "_ref", first: true, predicate: ["_ref"], descendants: true, isSignal: true }], ngImport: i0, template: `<li
     [attr.id]="_id()"
     [class]="cls('db-accordion-item', className())"
   >
@@ -336,7 +355,7 @@ class DBAccordionItem {
     </details>
   </li> `, isInline: true, styles: [":host{display:contents}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: DBAccordionItem, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: DBAccordionItem, decorators: [{
             type: Component,
             args: [{ selector: "db-accordion-item", standalone: true, imports: [CommonModule], template: `<li
     [attr.id]="_id()"
@@ -381,18 +400,18 @@ class DBAccordion {
     }
     constructor() {
         this.cls = cls;
-        this.id = input();
-        this.name = input();
-        this.behavior = input();
-        this.initOpenIndex = input();
-        this.items = input();
-        this.className = input();
-        this.variant = input();
-        this._ref = viewChild("_ref");
-        this._id = signal(DEFAULT_ID);
-        this._name = signal("");
-        this.initialized = signal(false);
-        this._initOpenIndexDone = signal(false);
+        this.id = input(...(ngDevMode ? [undefined, { debugName: "id" }] : []));
+        this.name = input(...(ngDevMode ? [undefined, { debugName: "name" }] : []));
+        this.behavior = input(...(ngDevMode ? [undefined, { debugName: "behavior" }] : []));
+        this.initOpenIndex = input(...(ngDevMode ? [undefined, { debugName: "initOpenIndex" }] : []));
+        this.items = input(...(ngDevMode ? [undefined, { debugName: "items" }] : []));
+        this.className = input(...(ngDevMode ? [undefined, { debugName: "className" }] : []));
+        this.variant = input(...(ngDevMode ? [undefined, { debugName: "variant" }] : []));
+        this._ref = viewChild("_ref", ...(ngDevMode ? [{ debugName: "_ref" }] : []));
+        this._id = signal(DEFAULT_ID, ...(ngDevMode ? [{ debugName: "_id" }] : []));
+        this._name = signal("", ...(ngDevMode ? [{ debugName: "_name" }] : []));
+        this.initialized = signal(false, ...(ngDevMode ? [{ debugName: "initialized" }] : []));
+        this._initOpenIndexDone = signal(false, ...(ngDevMode ? [{ debugName: "_initOpenIndexDone" }] : []));
         if (typeof window !== "undefined") {
             effect(() => {
                 // --- Mitosis: Workaround to make sure the effect() is triggered ---
@@ -513,8 +532,8 @@ class DBAccordion {
             this._initOpenIndexDone.set(true);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: DBAccordion, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: DBAccordion, isStandalone: true, selector: "db-accordion", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, behavior: { classPropertyName: "behavior", publicName: "behavior", isSignal: true, isRequired: false, transformFunction: null }, initOpenIndex: { classPropertyName: "initOpenIndex", publicName: "initOpenIndex", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", 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 } }, viewQueries: [{ propertyName: "_ref", first: true, predicate: ["_ref"], descendants: true, isSignal: true }], ngImport: i0, template: `<ul
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: DBAccordion, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.2", type: DBAccordion, isStandalone: true, selector: "db-accordion", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, behavior: { classPropertyName: "behavior", publicName: "behavior", isSignal: true, isRequired: false, transformFunction: null }, initOpenIndex: { classPropertyName: "initOpenIndex", publicName: "initOpenIndex", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", 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 } }, viewQueries: [{ propertyName: "_ref", first: true, predicate: ["_ref"], descendants: true, isSignal: true }], ngImport: i0, template: `<ul
     #_ref
     [attr.id]="_id()"
     [class]="cls('db-accordion', className())"
@@ -532,7 +551,7 @@ class DBAccordion {
     } }
   </ul> `, isInline: true, styles: [":host{display:contents}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: DBAccordionItem, selector: "db-accordion-item", inputs: ["id", "defaultOpen", "name", "className", "disabled", "headlinePlain", "text"], outputs: ["toggle"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: DBAccordion, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: DBAccordion, decorators: [{
             type: Component,
             args: [{ selector: "db-accordion", standalone: true, imports: [CommonModule, DBAccordionItem], template: `<ul
     #_ref
@@ -561,16 +580,16 @@ class DBBadge {
     constructor() {
         this.cls = cls;
         this.DEFAULT_LABEL = DEFAULT_LABEL;
-        this.placement = input();
-        this.id = input();
-        this.className = input();
-        this.semantic = input();
-        this.size = input();
-        this.emphasis = input();
-        this.label = input();
-        this.text = input();
-        this._ref = viewChild("_ref");
-        this.initialized = signal(false);
+        this.placement = input(...(ngDevMode ? [undefined, { debugName: "placement" }] : []));
+        this.id = input(...(ngDevMode ? [undefined, { debugName: "id" }] : []));
+        this.className = input(...(ngDevMode ? [undefined, { debugName: "className" }] : []));
+        this.semantic = input(...(ngDevMode ? [undefined, { debugName: "semantic" }] : []));
+        this.size = input(...(ngDevMode ? [undefined, { debugName: "size" }] : []));
+        this.emphasis = input(...(ngDevMode ? [undefined, { debugName: "emphasis" }] : []));
+        this.label = input(...(ngDevMode ? [undefined, { debugName: "label" }] : []));
+        this.text = input(...(ngDevMode ? [undefined, { debugName: "text" }] : []));
+        this._ref = viewChild("_ref", ...(ngDevMode ? [{ debugName: "_ref" }] : []));
+        this.initialized = signal(false, ...(ngDevMode ? [{ debugName: "initialized" }] : []));
         if (typeof window !== "undefined") {
             effect(() => {
                 // --- Mitosis: Workaround to make sure the effect() is triggered ---
@@ -633,8 +652,8 @@ class DBBadge {
             this.initialized.set(true);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: DBBadge, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: DBBadge, isStandalone: true, selector: "db-badge", inputs: { placement: { classPropertyName: "placement", publicName: "placement", isSignal: true, isRequired: false, transformFunction: null }, 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 }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, emphasis: { classPropertyName: "emphasis", publicName: "emphasis", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "_ref", first: true, predicate: ["_ref"], descendants: true, isSignal: true }], ngImport: i0, template: `<span
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: DBBadge, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.2", type: DBBadge, isStandalone: true, selector: "db-badge", inputs: { placement: { classPropertyName: "placement", publicName: "placement", isSignal: true, isRequired: false, transformFunction: null }, 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 }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, emphasis: { classPropertyName: "emphasis", publicName: "emphasis", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "_ref", first: true, predicate: ["_ref"], descendants: true, isSignal: true }], ngImport: i0, template: `<span
     #_ref
     [attr.id]="id()"
     [class]="cls('db-badge', className())"
@@ -648,7 +667,7 @@ class DBBadge {
     }</span
   > `, isInline: true, styles: [":host{display:contents}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: DBBadge, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: DBBadge, decorators: [{
             type: Component,
             args: [{ selector: "db-badge", standalone: true, imports: [CommonModule], template: `<span
     #_ref
@@ -673,13 +692,13 @@ class DBBrand {
         this.DEFAULT_ICON = DEFAULT_ICON;
         this.getBooleanAsString = getBooleanAsString;
         this.cls = cls;
-        this.hideLogo = input();
-        this.icon = input();
-        this.showIcon = input();
-        this.id = input();
-        this.className = input();
-        this.text = input();
-        this._ref = viewChild("_ref");
+        this.hideLogo = input(...(ngDevMode ? [undefined, { debugName: "hideLogo" }] : []));
+        this.icon = input(...(ngDevMode ? [undefined, { debugName: "icon" }] : []));
+        this.showIcon = input(...(ngDevMode ? [undefined, { debugName: "showIcon" }] : []));
+        this.id = input(...(ngDevMode ? [undefined, { debugName: "id" }] : []));
+        this.className = input(...(ngDevMode ? [undefined, { debugName: "className" }] : []));
+        this.text = input(...(ngDevMode ? [undefined, { debugName: "text" }] : []));
+        this._ref = viewChild("_ref", ...(ngDevMode ? [{ debugName: "_ref" }] : []));
     }
     /**
      * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.
@@ -719,8 +738,8 @@ class DBBrand {
             this.enableAttributePassing(element, "db-brand");
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: DBBrand, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: DBBrand, isStandalone: true, selector: "db-brand", inputs: { hideLogo: { classPropertyName: "hideLogo", publicName: "hideLogo", 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 }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "_ref", first: true, predicate: ["_ref"], descendants: true, isSignal: true }], ngImport: i0, template: `<div
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: DBBrand, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.2", type: DBBrand, isStandalone: true, selector: "db-brand", inputs: { hideLogo: { classPropertyName: "hideLogo", publicName: "hideLogo", 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 }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "_ref", first: true, predicate: ["_ref"], descendants: true, isSignal: true }], ngImport: i0, template: `<div
     #_ref
     [attr.data-icon]="hideLogo() ? 'none' : icon() ?? DEFAULT_ICON"
     [attr.data-show-icon]="getBooleanAsString(showIcon())"
@@ -732,7 +751,7 @@ class DBBrand {
     }
   </div> `, isInline: true, styles: [":host{display:contents}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: DBBrand, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: DBBrand, decorators: [{
             type: Component,
             args: [{ selector: "db-brand", standalone: true, imports: [CommonModule], template: `<div
     #_ref
@@ -762,26 +781,26 @@ class DBButton {
         this.cls = cls;
         this.getBoolean = getBoolean;
         this.getBooleanAsString = getBooleanAsString;
-        this.type = input();
-        this.id = input();
-        this.className = input();
-        this.disabled = input();
-        this.iconLeading = input();
-        this.icon = input();
-        this.showIconLeading = input();
-        this.showIcon = input();
-        this.iconTrailing = input();
-        this.showIconTrailing = input();
-        this.size = input();
-        this.width = input();
-        this.variant = input();
-        this.noText = input();
-        this.name = input();
-        this.form = input();
-        this.value = input();
-        this.text = input();
+        this.type = input(...(ngDevMode ? [undefined, { debugName: "type" }] : []));
+        this.id = input(...(ngDevMode ? [undefined, { debugName: "id" }] : []));
+        this.className = input(...(ngDevMode ? [undefined, { debugName: "className" }] : []));
+        this.disabled = input(...(ngDevMode ? [undefined, { debugName: "disabled" }] : []));
+        this.iconLeading = input(...(ngDevMode ? [undefined, { debugName: "iconLeading" }] : []));
+        this.icon = input(...(ngDevMode ? [undefined, { debugName: "icon" }] : []));
+        this.showIconLeading = input(...(ngDevMode ? [undefined, { debugName: "showIconLeading" }] : []));
+        this.showIcon = input(...(ngDevMode ? [undefined, { debugName: "showIcon" }] : []));
+        this.iconTrailing = input(...(ngDevMode ? [undefined, { debugName: "iconTrailing" }] : []));
+        this.showIconTrailing = input(...(ngDevMode ? [undefined, { debugName: "showIconTrailing" }] : []));
+        this.size = input(...(ngDevMode ? [undefined, { debugName: "size" }] : []));
+        this.width = input(...(ngDevMode ? [undefined, { debugName: "width" }] : []));
+        this.variant = input(...(ngDevMode ? [undefined, { debugName: "variant" }] : []));
+        this.noText = input(...(ngDevMode ? [undefined, { debugName: "noText" }] : []));
+        this.name = input(...(ngDevMode ? [undefined, { debugName: "name" }] : []));
+        this.form = input(...(ngDevMode ? [undefined, { debugName: "form" }] : []));
+        this.value = input(...(ngDevMode ? [undefined, { debugName: "value" }] : []));
+        this.text = input(...(ngDevMode ? [undefined, { debugName: "text" }] : []));
         this.click = output();
-        this._ref = viewChild("_ref");
+        this._ref = viewChild("_ref", ...(ngDevMode ? [{ debugName: "_ref" }] : []));
     }
     /**
      * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.
@@ -821,8 +840,8 @@ class DBButton {
             this.enableAttributePassing(element, "db-button");
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: DBButton, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: DBButton, isStandalone: true, selector: "db-button", inputs: { type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, iconLeading: { classPropertyName: "iconLeading", publicName: "iconLeading", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, showIconLeading: { classPropertyName: "showIconLeading", publicName: "showIconLeading", isSignal: true, isRequired: false, transformFunction: null }, showIcon: { classPropertyName: "showIcon", publicName: "showIcon", isSignal: true, isRequired: false, transformFunction: null }, iconTrailing: { classPropertyName: "iconTrailing", publicName: "iconTrailing", isSignal: true, isRequired: false, transformFunction: null }, showIconTrailing: { classPropertyName: "showIconTrailing", publicName: "showIconTrailing", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, noText: { classPropertyName: "noText", publicName: "noText", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, form: { classPropertyName: "form", publicName: "form", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { click: "click" }, viewQueries: [{ propertyName: "_ref", first: true, predicate: ["_ref"], descendants: true, isSignal: true }], ngImport: i0, template: `<button
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: DBButton, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.2", type: DBButton, isStandalone: true, selector: "db-button", inputs: { type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, iconLeading: { classPropertyName: "iconLeading", publicName: "iconLeading", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, showIconLeading: { classPropertyName: "showIconLeading", publicName: "showIconLeading", isSignal: true, isRequired: false, transformFunction: null }, showIcon: { classPropertyName: "showIcon", publicName: "showIcon", isSignal: true, isRequired: false, transformFunction: null }, iconTrailing: { classPropertyName: "iconTrailing", publicName: "iconTrailing", isSignal: true, isRequired: false, transformFunction: null }, showIconTrailing: { classPropertyName: "showIconTrailing", publicName: "showIconTrailing", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, noText: { classPropertyName: "noText", publicName: "noText", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, form: { classPropertyName: "form", publicName: "form", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { click: "click" }, viewQueries: [{ propertyName: "_ref", first: true, predicate: ["_ref"], descendants: true, isSignal: true }], ngImport: i0, template: `<button
     #_ref
     [attr.id]="id()"
     [class]="cls('db-button', className())"
@@ -845,7 +864,7 @@ class DBButton {
     }
   </button> `, isInline: true, styles: [":host{display:contents}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: DBButton, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: DBButton, decorators: [{
             type: Component,
             args: [{ selector: "db-button", standalone: true, imports: [CommonModule], template: `<button
     #_ref
@@ -883,13 +902,13 @@ class DBCard {
     }
     constructor() {
         this.cls = cls;
-        this.id = input();
-        this.className = input();
-        this.behavior = input();
-        this.elevationLevel = input();
-        this.spacing = input();
+        this.id = input(...(ngDevMode ? [undefined, { debugName: "id" }] : []));
+        this.className = input(...(ngDevMode ? [undefined, { debugName: "className" }] : []));
+        this.behavior = input(...(ngDevMode ? [undefined, { debugName: "behavior" }] : []));
+        this.elevationLevel = input(...(ngDevMode ? [undefined, { debugName: "elevationLevel" }] : []));
+        this.spacing = input(...(ngDevMode ? [undefined, { debugName: "spacing" }] : []));
         this.click = output();
-        this._ref = viewChild("_ref");
+        this._ref = viewChild("_ref", ...(ngDevMode ? [{ debugName: "_ref" }] : []));
     }
     /**
      * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.
@@ -929,8 +948,8 @@ class DBCard {
             this.enableAttributePassing(element, "db-card");
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: DBCard, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.2.15", type: DBCard, isStandalone: true, selector: "db-card", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, behavior: { classPropertyName: "behavior", publicName: "behavior", isSignal: true, isRequired: false, transformFunction: null }, elevationLevel: { classPropertyName: "elevationLevel", publicName: "elevationLevel", isSignal: true, isRequired: false, transformFunction: null }, spacing: { classPropertyName: "spacing", publicName: "spacing", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { click: "click" }, viewQueries: [{ propertyName: "_ref", first: true, predicate: ["_ref"], descendants: true, isSignal: true }], ngImport: i0, template: `<div
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: DBCard, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.3.2", type: DBCard, isStandalone: true, selector: "db-card", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, behavior: { classPropertyName: "behavior", publicName: "behavior", isSignal: true, isRequired: false, transformFunction: null }, elevationLevel: { classPropertyName: "elevationLevel", publicName: "elevationLevel", isSignal: true, isRequired: false, transformFunction: null }, spacing: { classPropertyName: "spacing", publicName: "spacing", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { click: "click" }, viewQueries: [{ propertyName: "_ref", first: true, predicate: ["_ref"], descendants: true, isSignal: true }], ngImport: i0, template: `<div
     #_ref
     [attr.id]="id()"
     [class]="cls('db-card', className())"
@@ -942,7 +961,7 @@ class DBCard {
     <ng-content></ng-content>
   </div> `, isInline: true, styles: [":host{display:contents}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: DBCard, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: DBCard, decorators: [{
             type: Component,
             args: [{ selector: "db-card", standalone: true, imports: [CommonModule], template: `<div
     #_ref
@@ -974,14 +993,14 @@ class DBInfotext {
     constructor() {
         this.cls = cls;
         this.getBooleanAsString = getBooleanAsString;
-        this.id = input();
-        this.className = input();
-        this.icon = input();
-        this.semantic = input();
-        this.size = input();
-        this.showIcon = input();
-        this.text = input();
-        this._ref = viewChild("_ref");
+        this.id = input(...(ngDevMode ? [undefined, { debugName: "id" }] : []));
+        this.className = input(...(ngDevMode ? [undefined, { debugName: "className" }] : []));
+        this.icon = input(...(ngDevMode ? [undefined, { debugName: "icon" }] : []));
+        this.semantic = input(...(ngDevMode ? [undefined, { debugName: "semantic" }] : []));
+        this.size = input(...(ngDevMode ? [undefined, { debugName: "size" }] : []));
+        this.showIcon = input(...(ngDevMode ? [undefined, { debugName: "showIcon" }] : []));
+        this.text = input(...(ngDevMode ? [undefined, { debugName: "text" }] : []));
+        this._ref = viewChild("_ref", ...(ngDevMode ? [{ debugName: "_ref" }] : []));
     }
     /**
      * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.
@@ -1021,8 +1040,8 @@ class DBInfotext {
             this.enableAttributePassing(element, "db-infotext");
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: DBInfotext, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: DBInfotext, isStandalone: true, selector: "db-infotext", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, semantic: { classPropertyName: "semantic", publicName: "semantic", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, showIcon: { classPropertyName: "showIcon", publicName: "showIcon", isSignal: true, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "_ref", first: true, predicate: ["_ref"], descendants: true, isSignal: true }], ngImport: i0, template: `<span
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: DBInfotext, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.2", type: DBInfotext, isStandalone: true, selector: "db-infotext", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, semantic: { classPropertyName: "semantic", publicName: "semantic", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, showIcon: { classPropertyName: "showIcon", publicName: "showIcon", isSignal: true, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "_ref", first: true, predicate: ["_ref"], descendants: true, isSignal: true }], ngImport: i0, template: `<span
     #_ref
     [attr.id]="id()"
     [class]="cls('db-infotext', className())"
@@ -1035,7 +1054,7 @@ class DBInfotext {
     }</span
   > `, isInline: true, styles: [":host{display:contents}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: DBInfotext, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: DBInfotext, decorators: [{
             type: Component,
             args: [{ selector: "db-infotext", standalone: true, imports: [CommonModule], template: `<span
     #_ref
@@ -1109,37 +1128,37 @@ class DBCheckbox {
         this.getBoolean = getBoolean;
         this.stringPropVisible = stringPropVisible;
         this.DEFAULT_VALID_MESSAGE = DEFAULT_VALID_MESSAGE;
-        this.id = input();
-        this.invalidMessage = input();
-        this.message = input();
-        this.showMessage = input();
-        this.indeterminate = input();
-        this.checked = model();
-        this.validMessage = input();
-        this.validation = input();
-        this.required = input();
-        this.className = input();
-        this.size = input();
-        this.showRequiredAsterisk = input();
-        this.showLabel = input();
-        this.name = input();
-        this.disabled = model();
-        this.value = input();
-        this.ariaDescribedBy = input();
-        this.label = input();
-        this.messageIcon = input();
+        this.id = input(...(ngDevMode ? [undefined, { debugName: "id" }] : []));
+        this.invalidMessage = input(...(ngDevMode ? [undefined, { debugName: "invalidMessage" }] : []));
+        this.message = input(...(ngDevMode ? [undefined, { debugName: "message" }] : []));
+        this.showMessage = input(...(ngDevMode ? [undefined, { debugName: "showMessage" }] : []));
+        this.indeterminate = input(...(ngDevMode ? [undefined, { debugName: "indeterminate" }] : []));
+        this.checked = model(...(ngDevMode ? [undefined, { debugName: "checked" }] : []));
+        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.size = input(...(ngDevMode ? [undefined, { debugName: "size" }] : []));
+        this.showRequiredAsterisk = input(...(ngDevMode ? [undefined, { debugName: "showRequiredAsterisk" }] : []));
+        this.showLabel = input(...(ngDevMode ? [undefined, { debugName: "showLabel" }] : []));
+        this.name = input(...(ngDevMode ? [undefined, { debugName: "name" }] : []));
+        this.disabled = model(...(ngDevMode ? [undefined, { debugName: "disabled" }] : []));
+        this.value = input(...(ngDevMode ? [undefined, { debugName: "value" }] : []));
+        this.ariaDescribedBy = input(...(ngDevMode ? [undefined, { debugName: "ariaDescribedBy" }] : []));
+        this.label = input(...(ngDevMode ? [undefined, { debugName: "label" }] : []));
+        this.messageIcon = input(...(ngDevMode ? [undefined, { debugName: "messageIcon" }] : []));
         this.change = output();
         this.blur = output();
         this.focus = output();
-        this._ref = viewChild("_ref");
-        this.initialized = signal(false);
-        this._id = signal(undefined);
-        this._messageId = signal(undefined);
-        this._validMessageId = signal(undefined);
-        this._invalidMessageId = signal(undefined);
-        this._invalidMessage = signal(undefined);
-        this._descByIds = signal(undefined);
-        this._voiceOverFallback = signal("");
+        this._ref = viewChild("_ref", ...(ngDevMode ? [{ debugName: "_ref" }] : []));
+        this.initialized = signal(false, ...(ngDevMode ? [{ debugName: "initialized" }] : []));
+        this._id = signal(undefined, ...(ngDevMode ? [{ debugName: "_id" }] : []));
+        this._messageId = signal(undefined, ...(ngDevMode ? [{ debugName: "_messageId" }] : []));
+        this._validMessageId = signal(undefined, ...(ngDevMode ? [{ debugName: "_validMessageId" }] : []));
+        this._invalidMessageId = signal(undefined, ...(ngDevMode ? [{ debugName: "_invalidMessageId" }] : []));
+        this._invalidMessage = signal(undefined, ...(ngDevMode ? [{ debugName: "_invalidMessage" }] : []));
+        this._descByIds = signal(undefined, ...(ngDevMode ? [{ debugName: "_descByIds" }] : []));
+        this._voiceOverFallback = signal("", ...(ngDevMode ? [{ debugName: "_voiceOverFallback" }] : []));
         if (typeof window !== "undefined") {
             effect(() => {
                 // --- Mitosis: Workaround to make sure the effect() is triggered ---
@@ -1263,8 +1282,8 @@ class DBCheckbox {
             this._invalidMessage.set(this.invalidMessage() || DEFAULT_INVALID_MESSAGE);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: DBCheckbox, deps: [{ token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: DBCheckbox, isStandalone: true, selector: "db-checkbox", 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 }, indeterminate: { classPropertyName: "indeterminate", publicName: "indeterminate", isSignal: true, isRequired: false, transformFunction: null }, checked: { classPropertyName: "checked", publicName: "checked", 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 }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, showRequiredAsterisk: { classPropertyName: "showRequiredAsterisk", publicName: "showRequiredAsterisk", isSignal: true, isRequired: false, transformFunction: null }, showLabel: { classPropertyName: "showLabel", publicName: "showLabel", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, ariaDescribedBy: { classPropertyName: "ariaDescribedBy", publicName: "ariaDescribedBy", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, messageIcon: { classPropertyName: "messageIcon", publicName: "messageIcon", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { checked: "checkedChange", disabled: "disabledChange", change: "change", blur: "blur", focus: "focus" }, providers: [{
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: DBCheckbox, deps: [{ token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.2", type: DBCheckbox, isStandalone: true, selector: "db-checkbox", 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 }, indeterminate: { classPropertyName: "indeterminate", publicName: "indeterminate", isSignal: true, isRequired: false, transformFunction: null }, checked: { classPropertyName: "checked", publicName: "checked", 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 }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, showRequiredAsterisk: { classPropertyName: "showRequiredAsterisk", publicName: "showRequiredAsterisk", isSignal: true, isRequired: false, transformFunction: null }, showLabel: { classPropertyName: "showLabel", publicName: "showLabel", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, ariaDescribedBy: { classPropertyName: "ariaDescribedBy", publicName: "ariaDescribedBy", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, messageIcon: { classPropertyName: "messageIcon", publicName: "messageIcon", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { checked: "checkedChange", disabled: "disabledChange", change: "change", blur: "blur", focus: "focus" }, providers: [{
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: DBCheckbox,
                 multi: true
@@ -1323,7 +1342,7 @@ class DBCheckbox {
     >
   </div> `, isInline: true, styles: [":host{display:contents}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: DBInfotext, selector: "db-infotext", inputs: ["id", "className", "icon", "semantic", "size", "showIcon", "text"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: DBCheckbox, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: DBCheckbox, decorators: [{
             type: Component,
             args: [{ providers: [{
                             provide: NG_VALUE_ACCESSOR,
@@ -1763,10 +1782,10 @@ const defaultProps$r = { width: "fixed" };
 class DBCustomSelectDropdown {
     constructor() {
         this.cls = cls;
-        this.id = input();
-        this.className = input();
-        this.width = input(defaultProps$r["width"]);
-        this._ref = viewChild("_ref");
+        this.id = input(...(ngDevMode ? [undefined, { debugName: "id" }] : []));
+        this.className = input(...(ngDevMode ? [undefined, { debugName: "className" }] : []));
+        this.width = input(defaultProps$r["width"], ...(ngDevMode ? [{ debugName: "width" }] : []));
+        this._ref = viewChild("_ref", ...(ngDevMode ? [{ debugName: "_ref" }] : []));
     }
     /**
      * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.
@@ -1806,8 +1825,8 @@ class DBCustomSelectDropdown {
             this.enableAttributePassing(element, "db-custom-select-dropdown");
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: DBCustomSelectDropdown, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.2.15", type: DBCustomSelectDropdown, isStandalone: true, selector: "db-custom-select-dropdown", 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 } }, viewQueries: [{ propertyName: "_ref", first: true, predicate: ["_ref"], descendants: true, isSignal: true }], ngImport: i0, template: `<article
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: DBCustomSelectDropdown, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.3.2", type: DBCustomSelectDropdown, isStandalone: true, selector: "db-custom-select-dropdown", 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 } }, viewQueries: [{ propertyName: "_ref", first: true, predicate: ["_ref"], descendants: true, isSignal: true }], ngImport: i0, template: `<article
     data-spacing="none"
     #_ref
     [attr.id]="id()"
@@ -1817,7 +1836,7 @@ class DBCustomSelectDropdown {
     <ng-content></ng-content>
   </article> `, isInline: true, styles: [":host{display:contents}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: DBCustomSelectDropdown, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: DBCustomSelectDropdown, decorators: [{
             type: Component,
             args: [{ selector: "db-custom-select-dropdown", standalone: true, imports: [CommonModule], template: `<article
     data-spacing="none"
@@ -1850,23 +1869,23 @@ class DBCustomSelectListItem {
         this.cls = cls;
         this.getBooleanAsString = getBooleanAsString;
         this.getBoolean = getBoolean;
-        this.id = input();
-        this.isGroupTitle = input();
-        this.showDivider = input();
-        this.type = input();
-        this.checked = model();
-        this.className = input();
-        this.groupTitle = input();
-        this.icon = input();
-        this.showIcon = input();
-        this.name = input();
-        this.disabled = model();
-        this.value = input();
-        this.label = input();
+        this.id = input(...(ngDevMode ? [undefined, { debugName: "id" }] : []));
+        this.isGroupTitle = input(...(ngDevMode ? [undefined, { debugName: "isGroupTitle" }] : []));
+        this.showDivider = input(...(ngDevMode ? [undefined, { debugName: "showDivider" }] : []));
+        this.type = input(...(ngDevMode ? [undefined, { debugName: "type" }] : []));
+        this.checked = model(...(ngDevMode ? [undefined, { debugName: "checked" }] : []));
+        this.className = input(...(ngDevMode ? [undefined, { debugName: "className" }] : []));
+        this.groupTitle = input(...(ngDevMode ? [undefined, { debugName: "groupTitle" }] : []));
+        this.icon = input(...(ngDevMode ? [undefined, { debugName: "icon" }] : []));
+        this.showIcon = input(...(ngDevMode ? [undefined, { debugName: "showIcon" }] : []));
+        this.name = input(...(ngDevMode ? [undefined, { debugName: "name" }] : []));
+        this.disabled = model(...(ngDevMode ? [undefined, { debugName: "disabled" }] : []));
+        this.value = input(...(ngDevMode ? [undefined, { debugName: "value" }] : []));
+        this.label = input(...(ngDevMode ? [undefined, { debugName: "label" }] : []));
         this.change = output();
-        this._ref = viewChild("_ref");
-        this._id = signal(undefined);
-        this.hasDivider = signal(false);
+        this._ref = viewChild("_ref", ...(ngDevMode ? [{ debugName: "_ref" }] : []));
+        this._id = signal(undefined, ...(ngDevMode ? [{ debugName: "_id" }] : []));
+        this.hasDivider = signal(false, ...(ngDevMode ? [{ debugName: "hasDivider" }] : []));
         if (typeof window !== "undefined") {
             effect(() => {
                 // --- Mitosis: Workaround to make sure the effect() is triggered ---
@@ -1933,8 +1952,8 @@ class DBCustomSelectListItem {
             this._id.set(this.id() ?? `custom-select-list-item-${uuid()}`);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: DBCustomSelectListItem, deps: [{ token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: DBCustomSelectListItem, isStandalone: true, selector: "db-custom-select-list-item", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, isGroupTitle: { classPropertyName: "isGroupTitle", publicName: "isGroupTitle", isSignal: true, isRequired: false, transformFunction: null }, showDivider: { classPropertyName: "showDivider", publicName: "showDivider", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, groupTitle: { classPropertyName: "groupTitle", publicName: "groupTitle", 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 }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { checked: "checkedChange", disabled: "disabledChange", change: "change" }, providers: [{
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: DBCustomSelectListItem, deps: [{ token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.2", type: DBCustomSelectListItem, isStandalone: true, selector: "db-custom-select-list-item", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, isGroupTitle: { classPropertyName: "isGroupTitle", publicName: "isGroupTitle", isSignal: true, isRequired: false, transformFunction: null }, showDivider: { classPropertyName: "showDivider", publicName: "showDivider", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, groupTitle: { classPropertyName: "groupTitle", publicName: "groupTitle", 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 }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { checked: "checkedChange", disabled: "disabledChange", change: "change" }, providers: [{
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: DBCustomSelectListItem,
                 multi: true
@@ -1972,7 +1991,7 @@ class DBCustomSelectListItem {
     }
   </li> `, isInline: true, styles: [":host{display:contents}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: DBCustomSelectListItem, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: DBCustomSelectListItem, decorators: [{
             type: Component,
             args: [{ providers: [{
                             provide: NG_VALUE_ACCESSOR,
@@ -2017,11 +2036,11 @@ const defaultProps$p = {};
 class DBCustomSelectList {
     constructor() {
         this.cls = cls;
-        this.multiple = input();
-        this.label = input();
-        this.id = input();
-        this.className = input();
-        this._ref = viewChild("_ref");
+        this.multiple = input(...(ngDevMode ? [undefined, { debugName: "multiple" }] : []));
+        this.label = input(...(ngDevMode ? [undefined, { debugName: "label" }] : []));
+        this.id = input(...(ngDevMode ? [undefined, { debugName: "id" }] : []));
+        this.className = input(...(ngDevMode ? [undefined, { debugName: "className" }] : []));
+        this._ref = viewChild("_ref", ...(ngDevMode ? [{ debugName: "_ref" }] : []));
     }
     /**
      * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.
@@ -2061,8 +2080,8 @@ class DBCustomSelectList {
             this.enableAttributePassing(element, "db-custom-select-list");
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: DBCustomSelectList, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.2.15", type: DBCustomSelectList, isStandalone: true, selector: "db-custom-select-list", inputs: { multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "_ref", first: true, predicate: ["_ref"], descendants: true, isSignal: true }], ngImport: i0, template: `<div
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: DBCustomSelectList, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.3.2", type: DBCustomSelectList, isStandalone: true, selector: "db-custom-select-list", inputs: { multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "_ref", first: true, predicate: ["_ref"], descendants: true, isSignal: true }], ngImport: i0, template: `<div
     [attr.role]="multiple() ? 'group' : 'radiogroup'"
     [attr.aria-label]="label()"
     #_ref
@@ -2074,7 +2093,7 @@ class DBCustomSelectList {
     </ul>
   </div> `, isInline: true, styles: [":host{display:contents}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: DBCustomSelectList, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: DBCustomSelectList, decorators: [{
             type: Component,
             args: [{ selector: "db-custom-select-list", standalone: true, imports: [CommonModule], template: `<div
     [attr.role]="multiple() ? 'group' : 'radiogroup'"
@@ -2172,70 +2191,71 @@ class DBInput {
         this.DEFAULT_PLACEHOLDER = DEFAULT_PLACEHOLDER;
         this.getNumber = getNumber;
         this.getInputValue = getInputValue;
+        this.isIOSSafari = isIOSSafari;
         this.stringPropVisible = stringPropVisible;
         this.DEFAULT_VALID_MESSAGE = DEFAULT_VALID_MESSAGE;
-        this.id = input();
-        this.invalidMessage = input();
-        this.dataListId = input();
-        this.message = input();
-        this.showMessage = input();
-        this.value = model();
-        this.validMessage = input();
-        this.validation = input();
-        this.required = input();
-        this.minLength = input();
-        this.maxLength = input();
-        this.pattern = input();
-        this.dataList = input();
-        this.className = input();
-        this.variant = input();
-        this.showLabel = input();
-        this.showIconLeading = input();
-        this.showIcon = input();
-        this.iconLeading = input();
-        this.icon = input();
-        this.iconTrailing = input();
-        this.showRequiredAsterisk = input();
-        this.showIconTrailing = input();
-        this.label = input();
-        this.fieldSizing = input();
-        this.name = input();
-        this.type = input();
-        this.multiple = input();
-        this.placeholder = input();
-        this.disabled = model();
-        this.step = input();
-        this.maxlength = input();
-        this.minlength = input();
-        this.max = input();
-        this.min = input();
-        this.readOnly = input();
-        this.readonly = input();
-        this.form = input();
-        this.size = input();
-        this.autocomplete = input();
-        this.autofocus = input();
-        this.enterkeyhint = input();
-        this.inputmode = input();
-        this.ariaDescribedBy = input();
-        this.messageSize = input();
-        this.messageIcon = input();
-        this.validMessageSize = input();
-        this.invalidMessageSize = input();
+        this.id = input(...(ngDevMode ? [undefined, { debugName: "id" }] : []));
+        this.invalidMessage = input(...(ngDevMode ? [undefined, { debugName: "invalidMessage" }] : []));
+        this.dataListId = input(...(ngDevMode ? [undefined, { debugName: "dataListId" }] : []));
+        this.message = input(...(ngDevMode ? [undefined, { debugName: "message" }] : []));
+        this.showMessage = input(...(ngDevMode ? [undefined, { debugName: "showMessage" }] : []));
+        this.value = model(...(ngDevMode ? [undefined, { debugName: "value" }] : []));
+        this.validMessage = input(...(ngDevMode ? [undefined, { debugName: "validMessage" }] : []));
+        this.validation = input(...(ngDevMode ? [undefined, { debugName: "validation" }] : []));
+        this.required = input(...(ngDevMode ? [undefined, { debugName: "required" }] : []));
+        this.minLength = input(...(ngDevMode ? [undefined, { debugName: "minLength" }] : []));
+        this.maxLength = input(...(ngDevMode ? [undefined, { debugName: "maxLength" }] : []));
+        this.pattern = input(...(ngDevMode ? [undefined, { debugName: "pattern" }] : []));
+        this.dataList = input(...(ngDevMode ? [undefined, { debugName: "dataList" }] : []));
+        this.className = input(...(ngDevMode ? [undefined, { debugName: "className" }] : []));
+        this.variant = input(...(ngDevMode ? [undefined, { debugName: "variant" }] : []));
+        this.showLabel = input(...(ngDevMode ? [undefined, { debugName: "showLabel" }] : []));
+        this.showIconLeading = input(...(ngDevMode ? [undefined, { debugName: "showIconLeading" }] : []));
+        this.showIcon = input(...(ngDevMode ? [undefined, { debugName: "showIcon" }] : []));
+        this.iconLeading = input(...(ngDevMode ? [undefined, { debugName: "iconLeading" }] : []));
+        this.icon = input(...(ngDevMode ? [undefined, { debugName: "icon" }] : []));
+        this.iconTrailing = input(...(ngDevMode ? [undefined, { debugName: "iconTrailing" }] : []));
+        this.showRequiredAsterisk = input(...(ngDevMode ? [undefined, { debugName: "showRequiredAsterisk" }] : []));
+        this.showIconTrailing = input(...(ngDevMode ? [undefined, { debugName: "showIconTrailing" }] : []));
+        this.label = input(...(ngDevMode ? [undefined, { debugName: "label" }] : []));
+        this.fieldSizing = input(...(ngDevMode ? [undefined, { debugName: "fieldSizing" }] : []));
+        this.name = input(...(ngDevMode ? [undefined, { debugName: "name" }] : []));
+        this.type = input(...(ngDevMode ? [undefined, { debugName: "type" }] : []));
+        this.multiple = input(...(ngDevMode ? [undefined, { debugName: "multiple" }] : []));
+        this.placeholder = input(...(ngDevMode ? [undefined, { debugName: "placeholder" }] : []));
+        this.disabled = model(...(ngDevMode ? [undefined, { debugName: "disabled" }] : []));
+        this.step = input(...(ngDevMode ? [undefined, { debugName: "step" }] : []));
+        this.maxlength = input(...(ngDevMode ? [undefined, { debugName: "maxlength" }] : []));
+        this.minlength = input(...(ngDevMode ? [undefined, { debugName: "minlength" }] : []));
+        this.max = input(...(ngDevMode ? [undefined, { debugName: "max" }] : []));
+        this.min = input(...(ngDevMode ? [undefined, { debugName: "min" }] : []));
+        this.readOnly = input(...(ngDevMode ? [undefined, { debugName: "readOnly" }] : []));
+        this.readonly = input(...(ngDevMode ? [undefined, { debugName: "readonly" }] : []));
+        this.form = input(...(ngDevMode ? [undefined, { debugName: "form" }] : []));
+        this.size = input(...(ngDevMode ? [undefined, { debugName: "size" }] : []));
+        this.autocomplete = input(...(ngDevMode ? [undefined, { debugName: "autocomplete" }] : []));
+        this.autofocus = input(...(ngDevMode ? [undefined, { debugName: "autofocus" }] : []));
+        this.enterkeyhint = input(...(ngDevMode ? [undefined, { debugName: "enterkeyhint" }] : []));
+        this.inputmode = input(...(ngDevMode ? [undefined, { debugName: "inputmode" }] : []));
+        this.ariaDescribedBy = input(...(ngDevMode ? [undefined, { debugName: "ariaDescribedBy" }] : []));
+        this.messageSize = input(...(ngDevMode ? [undefined, { debugName: "messageSize" }] : []));
+        this.messageIcon = input(...(ngDevMode ? [undefined, { debugName: "messageIcon" }] : []));
+        this.validMessageSize = input(...(ngDevMode ? [undefined, { debugName: "validMessageSize" }] : []));
+        this.invalidMessageSize = input(...(ngDevMode ? [undefined, { debugName: "invalidMessageSize" }] : []));
         this.input = output();
         this.change = output();
         this.blur = output();
         this.focus = output();
-        this._ref = viewChild("_ref");
-        this._id = signal(undefined);
-        this._messageId = signal(undefined);
-        this._validMessageId = signal(undefined);
-        this._invalidMessageId = signal(undefined);
-        this._invalidMessage = signal(undefined);
-        this._dataListId = signal(undefined);
-        this._descByIds = signal(undefined);
-        this._value = signal(undefined);
-        this._voiceOverFallback = signal("");
+        this._ref = viewChild("_ref", ...(ngDevMode ? [{ debugName: "_ref" }] : []));
+        this._id = signal(undefined, ...(ngDevMode ? [{ debugName: "_id" }] : []));
+        this._messageId = signal(undefined, ...(ngDevMode ? [{ debugName: "_messageId" }] : []));
+        this._validMessageId = signal(undefined, ...(ngDevMode ? [{ debugName: "_validMessageId" }] : []));
+        this._invalidMessageId = signal(undefined, ...(ngDevMode ? [{ debugName: "_invalidMessageId" }] : []));
+        this._invalidMessage = signal(undefined, ...(ngDevMode ? [{ debugName: "_invalidMessage" }] : []));
+        this._dataListId = signal(undefined, ...(ngDevMode ? [{ debugName: "_dataListId" }] : []));
+        this._descByIds = signal(undefined, ...(ngDevMode ? [{ debugName: "_descByIds" }] : []));
+        this._value = signal(undefined, ...(ngDevMode ? [{ debugName: "_value" }] : []));
+        this._voiceOverFallback = signal("", ...(ngDevMode ? [{ debugName: "_voiceOverFallback" }] : []));
         if (typeof window !== "undefined") {
             effect(() => {
                 // --- Mitosis: Workaround to make sure the effect() is triggered ---
@@ -2342,8 +2362,8 @@ class DBInput {
             this._invalidMessage.set(this.invalidMessage() || DEFAULT_INVALID_MESSAGE);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: DBInput, deps: [{ token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: DBInput, isStandalone: true, selector: "db-input", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, invalidMessage: { classPropertyName: "invalidMessage", publicName: "invalidMessage", isSignal: true, isRequired: false, transformFunction: null }, dataListId: { classPropertyName: "dataListId", publicName: "dataListId", 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 }, 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 }, minLength: { classPropertyName: "minLength", publicName: "minLength", isSignal: true, isRequired: false, transformFunction: null }, maxLength: { classPropertyName: "maxLength", publicName: "maxLength", isSignal: true, isRequired: false, transformFunction: null }, pattern: { classPropertyName: "pattern", publicName: "pattern", isSignal: true, isRequired: false, transformFunction: null }, dataList: { classPropertyName: "dataList", publicName: "dataList", 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 }, showIconLeading: { classPropertyName: "showIconLeading", publicName: "showIconLeading", isSignal: true, isRequired: false, transformFunction: null }, showIcon: { classPropertyName: "showIcon", publicName: "showIcon", isSignal: true, isRequired: false, transformFunction: null }, iconLeading: { classPropertyName: "iconLeading", publicName: "iconLeading", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, iconTrailing: { classPropertyName: "iconTrailing", publicName: "iconTrailing", isSignal: true, isRequired: false, transformFunction: null }, showRequiredAsterisk: { classPropertyName: "showRequiredAsterisk", publicName: "showRequiredAsterisk", isSignal: true, isRequired: false, transformFunction: null }, showIconTrailing: { classPropertyName: "showIconTrailing", publicName: "showIconTrailing", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, fieldSizing: { classPropertyName: "fieldSizing", publicName: "fieldSizing", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, step: { classPropertyName: "step", publicName: "step", isSignal: true, isRequired: false, transformFunction: null }, maxlength: { classPropertyName: "maxlength", publicName: "maxlength", isSignal: true, isRequired: false, transformFunction: null }, minlength: { classPropertyName: "minlength", publicName: "minlength", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, readOnly: { classPropertyName: "readOnly", publicName: "readOnly", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, form: { classPropertyName: "form", publicName: "form", 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 }, autofocus: { classPropertyName: "autofocus", publicName: "autofocus", isSignal: true, isRequired: false, transformFunction: null }, enterkeyhint: { classPropertyName: "enterkeyhint", publicName: "enterkeyhint", isSignal: true, isRequired: false, transformFunction: null }, inputmode: { classPropertyName: "inputmode", publicName: "inputmode", isSignal: true, isRequired: false, transformFunction: null }, ariaDescribedBy: { classPropertyName: "ariaDescribedBy", publicName: "ariaDescribedBy", isSignal: true, isRequired: false, transformFunction: null }, messageSize: { classPropertyName: "messageSize", publicName: "messageSize", isSignal: true, isRequired: false, transformFunction: null }, messageIcon: { classPropertyName: "messageIcon", publicName: "messageIcon", isSignal: true, isRequired: false, transformFunction: null }, validMessageSize: { classPropertyName: "validMessageSize", publicName: "validMessageSize", isSignal: true, isRequired: false, transformFunction: null }, invalidMessageSize: { classPropertyName: "invalidMessageSize", publicName: "invalidMessageSize", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", disabled: "disabledChange", input: "input", change: "change", blur: "blur", focus: "focus" }, providers: [{
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: DBInput, deps: [{ token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.2", type: DBInput, isStandalone: true, selector: "db-input", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, invalidMessage: { classPropertyName: "invalidMessage", publicName: "invalidMessage", isSignal: true, isRequired: false, transformFunction: null }, dataListId: { classPropertyName: "dataListId", publicName: "dataListId", 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 }, 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 }, minLength: { classPropertyName: "minLength", publicName: "minLength", isSignal: true, isRequired: false, transformFunction: null }, maxLength: { classPropertyName: "maxLength", publicName: "maxLength", isSignal: true, isRequired: false, transformFunction: null }, pattern: { classPropertyName: "pattern", publicName: "pattern", isSignal: true, isRequired: false, transformFunction: null }, dataList: { classPropertyName: "dataList", publicName: "dataList", 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 }, showIconLeading: { classPropertyName: "showIconLeading", publicName: "showIconLeading", isSignal: true, isRequired: false, transformFunction: null }, showIcon: { classPropertyName: "showIcon", publicName: "showIcon", isSignal: true, isRequired: false, transformFunction: null }, iconLeading: { classPropertyName: "iconLeading", publicName: "iconLeading", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, iconTrailing: { classPropertyName: "iconTrailing", publicName: "iconTrailing", isSignal: true, isRequired: false, transformFunction: null }, showRequiredAsterisk: { classPropertyName: "showRequiredAsterisk", publicName: "showRequiredAsterisk", isSignal: true, isRequired: false, transformFunction: null }, showIconTrailing: { classPropertyName: "showIconTrailing", publicName: "showIconTrailing", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, fieldSizing: { classPropertyName: "fieldSizing", publicName: "fieldSizing", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, step: { classPropertyName: "step", publicName: "step", isSignal: true, isRequired: false, transformFunction: null }, maxlength: { classPropertyName: "maxlength", publicName: "maxlength", isSignal: true, isRequired: false, transformFunction: null }, minlength: { classPropertyName: "minlength", publicName: "minlength", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, readOnly: { classPropertyName: "readOnly", publicName: "readOnly", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, form: { classPropertyName: "form", publicName: "form", 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 }, autofocus: { classPropertyName: "autofocus", publicName: "autofocus", isSignal: true, isRequired: false, transformFunction: null }, enterkeyhint: { classPropertyName: "enterkeyhint", publicName: "enterkeyhint", isSignal: true, isRequired: false, transformFunction: null }, inputmode: { classPropertyName: "inputmode", publicName: "inputmode", isSignal: true, isRequired: false, transformFunction: null }, ariaDescribedBy: { classPropertyName: "ariaDescribedBy", publicName: "ariaDescribedBy", isSignal: true, isRequired: false, transformFunction: null }, messageSize: { classPropertyName: "messageSize", publicName: "messageSize", isSignal: true, isRequired: false, transformFunction: null }, messageIcon: { classPropertyName: "messageIcon", publicName: "messageIcon", isSignal: true, isRequired: false, transformFunction: null }, validMessageSize: { classPropertyName: "validMessageSize", publicName: "validMessageSize", isSignal: true, isRequired: false, transformFunction: null }, invalidMessageSize: { classPropertyName: "invalidMessageSize", publicName: "invalidMessageSize", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", disabled: "disabledChange", input: "input", change: "change", blur: "blur", focus: "focus" }, providers: [{
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: DBInput,
                 multi: true
@@ -2390,6 +2410,7 @@ class DBInput {
       (focus)="handleFocus($event)"
       [attr.list]="dataList() && _dataListId()"
       [attr.aria-describedby]="ariaDescribedBy() ?? _descByIds()"
+      [attr.role]="['datetime-local', 'date', 'time', 'week', 'month', 'color'].includes(type() ?? '') && isIOSSafari() ? 'textbox' : undefined"
     />
     @if(dataList()){
     <datalist [attr.id]="_dataListId()">
@@ -2428,7 +2449,7 @@ class DBInput {
     >
   </div> `, isInline: true, styles: [":host{display:contents}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: DBInfotext, selector: "db-infotext", inputs: ["id", "className", "icon", "semantic", "size", "showIcon", "text"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: DBInput, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: DBInput, decorators: [{
             type: Component,
             args: [{ providers: [{
                             provide: NG_VALUE_ACCESSOR,
@@ -2477,6 +2498,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
       (focus)="handleFocus($event)"
       [attr.list]="dataList() && _dataListId()"
       [attr.aria-describedby]="ariaDescribedBy() ?? _descByIds()"
+      [attr.role]="['datetime-local', 'date', 'time', 'week', 'month', 'color'].includes(type() ?? '') && isIOSSafari() ? 'textbox' : undefined"
     />
     @if(dataList()){
     <datalist [attr.id]="_dataListId()">
@@ -2569,20 +2591,20 @@ class DBTooltip {
     constructor() {
         this.cls = cls;
         this.getBooleanAsString = getBooleanAsString;
-        this.id = input();
-        this.variant = input();
-        this.placement = input();
-        this.className = input();
-        this.emphasis = input();
-        this.animation = input();
-        this.delay = input();
-        this.width = input();
-        this.showArrow = input();
-        this._ref = viewChild("_ref");
-        this._id = signal(DEFAULT_ID);
-        this.initialized = signal(false);
-        this._documentScrollListenerCallbackId = signal(undefined);
-        this._observer = signal(undefined);
+        this.id = input(...(ngDevMode ? [undefined, { debugName: "id" }] : []));
+        this.variant = input(...(ngDevMode ? [undefined, { debugName: "variant" }] : []));
+        this.placement = input(...(ngDevMode ? [undefined, { debugName: "placement" }] : []));
+        this.className = input(...(ngDevMode ? [undefined, { debugName: "className" }] : []));
+        this.emphasis = input(...(ngDevMode ? [undefined, { debugName: "emphasis" }] : []));
+        this.animation = input(...(ngDevMode ? [undefined, { debugName: "animation" }] : []));
+        this.delay = input(...(ngDevMode ? [undefined, { debugName: "delay" }] : []));
+        this.width = input(...(ngDevMode ? [undefined, { debugName: "width" }] : []));
+        this.showArrow = input(...(ngDevMode ? [undefined, { debugName: "showArrow" }] : []));
+        this._ref = viewChild("_ref", ...(ngDevMode ? [{ debugName: "_ref" }] : []));
+        this._id = signal(DEFAULT_ID, ...(ngDevMode ? [{ debugName: "_id" }] : []));
+        this.initialized = signal(false, ...(ngDevMode ? [{ debugName: "initialized" }] : []));
+        this._documentScrollListenerCallbackId = signal(undefined, ...(ngDevMode ? [{ debugName: "_documentScrollListenerCallbackId" }] : []));
+        this._observer = signal(undefined, ...(ngDevMode ? [{ debugName: "_observer" }] : []));
         if (typeof window !== "undefined") {
             effect(() => {
                 // --- Mitosis: Workaround to make sure the effect() is triggered ---
@@ -2663,8 +2685,8 @@ class DBTooltip {
             this.initialized.set(true);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: DBTooltip, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.2.15", type: DBTooltip, isStandalone: true, selector: "db-tooltip", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, placement: { classPropertyName: "placement", publicName: "placement", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, emphasis: { classPropertyName: "emphasis", publicName: "emphasis", isSignal: true, isRequired: false, transformFunction: null }, animation: { classPropertyName: "animation", publicName: "animation", isSignal: true, isRequired: false, transformFunction: null }, delay: { classPropertyName: "delay", publicName: "delay", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, showArrow: { classPropertyName: "showArrow", publicName: "showArrow", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "_ref", first: true, predicate: ["_ref"], descendants: true, isSignal: true }], ngImport: i0, template: `<i
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: DBTooltip, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.3.2", type: DBTooltip, isStandalone: true, selector: "db-tooltip", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, placement: { classPropertyName: "placement", publicName: "placement", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, emphasis: { classPropertyName: "emphasis", publicName: "emphasis", isSignal: true, isRequired: false, transformFunction: null }, animation: { classPropertyName: "animation", publicName: "animation", isSignal: true, isRequired: false, transformFunction: null }, delay: { classPropertyName: "delay", publicName: "delay", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, showArrow: { classPropertyName: "showArrow", publicName: "showArrow", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "_ref", first: true, predicate: ["_ref"], descendants: true, isSignal: true }], ngImport: i0, template: `<i
     role="tooltip"
     aria-hidden="true"
     data-gap="true"
@@ -2681,7 +2703,7 @@ class DBTooltip {
     ><ng-content></ng-content
   ></i> `, isInline: true, styles: [":host{display:contents}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: DBTooltip, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: DBTooltip, decorators: [{
             type: Component,
             args: [{ selector: "db-tooltip", standalone: true, imports: [CommonModule], template: `<i
     role="tooltip"
@@ -2721,20 +2743,20 @@ class DBTag {
     constructor() {
         this.cls = cls;
         this.getBooleanAsString = getBooleanAsString;
-        this.removeButton = input();
-        this.id = input();
-        this.className = input();
-        this.semantic = input();
-        this.emphasis = input();
-        this.icon = input();
-        this.showCheckState = input();
-        this.showIcon = input();
-        this.noText = input();
-        this.overflow = input();
-        this.text = input();
-        this.behavior = input();
+        this.removeButton = input(...(ngDevMode ? [undefined, { debugName: "removeButton" }] : []));
+        this.id = input(...(ngDevMode ? [undefined, { debugName: "id" }] : []));
+        this.className = input(...(ngDevMode ? [undefined, { debugName: "className" }] : []));
+        this.semantic = input(...(ngDevMode ? [undefined, { debugName: "semantic" }] : []));
+        this.emphasis = input(...(ngDevMode ? [undefined, { debugName: "emphasis" }] : []));
+        this.icon = input(...(ngDevMode ? [undefined, { debugName: "icon" }] : []));
+        this.showCheckState = input(...(ngDevMode ? [undefined, { debugName: "showCheckState" }] : []));
+        this.showIcon = input(...(ngDevMode ? [undefined, { debugName: "showIcon" }] : []));
+        this.noText = input(...(ngDevMode ? [undefined, { debugName: "noText" }] : []));
+        this.overflow = input(...(ngDevMode ? [undefined, { debugName: "overflow" }] : []));
+        this.text = input(...(ngDevMode ? [undefined, { debugName: "text" }] : []));
+        this.behavior = input(...(ngDevMode ? [undefined, { debugName: "behavior" }] : []));
         this.remove = output();
-        this._ref = viewChild("_ref");
+        this._ref = viewChild("_ref", ...(ngDevMode ? [{ debugName: "_ref" }] : []));
     }
     /**
      * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.
@@ -2774,8 +2796,8 @@ class DBTag {
             this.enableAttributePassing(element, "db-tag");
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: DBTag, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: DBTag, isStandalone: true, selector: "db-tag", inputs: { removeButton: { classPropertyName: "removeButton", publicName: "removeButton", isSignal: true, isRequired: false, transformFunction: null }, 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 }, emphasis: { classPropertyName: "emphasis", publicName: "emphasis", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, showCheckState: { classPropertyName: "showCheckState", publicName: "showCheckState", isSignal: true, isRequired: false, transformFunction: null }, showIcon: { classPropertyName: "showIcon", publicName: "showIcon", isSignal: true, isRequired: false, transformFunction: null }, noText: { classPropertyName: "noText", publicName: "noText", isSignal: true, isRequired: false, transformFunction: null }, overflow: { classPropertyName: "overflow", publicName: "overflow", isSignal: true, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, behavior: { classPropertyName: "behavior", publicName: "behavior", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { remove: "remove" }, viewQueries: [{ propertyName: "_ref", first: true, predicate: ["_ref"], descendants: true, isSignal: true }], ngImport: i0, template: `<div
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: DBTag, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.2", type: DBTag, isStandalone: true, selector: "db-tag", inputs: { removeButton: { classPropertyName: "removeButton", publicName: "removeButton", isSignal: true, isRequired: false, transformFunction: null }, 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 }, emphasis: { classPropertyName: "emphasis", publicName: "emphasis", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, showCheckState: { classPropertyName: "showCheckState", publicName: "showCheckState", isSignal: true, isRequired: false, transformFunction: null }, showIcon: { classPropertyName: "showIcon", publicName: "showIcon", isSignal: true, isRequired: false, transformFunction: null }, noText: { classPropertyName: "noText", publicName: "noText", isSignal: true, isRequired: false, transformFunction: null }, overflow: { classPropertyName: "overflow", publicName: "overflow", isSignal: true, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, behavior: { classPropertyName: "behavior", publicName: "behavior", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { remove: "remove" }, viewQueries: [{ propertyName: "_ref", first: true, predicate: ["_ref"], descendants: true, isSignal: true }], ngImport: i0, template: `<div
     #_ref
     [attr.id]="id()"
     [class]="cls('db-tag', className())"
@@ -2804,7 +2826,7 @@ class DBTag {
     }
   </div> `, isInline: true, styles: [":host{display:contents}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: DBTooltip, selector: "db-tooltip", inputs: ["id", "variant", "placement", "className", "emphasis", "animation", "delay", "width", "showArrow"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: DBTag, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: DBTag, decorators: [{
             type: Component,
             args: [{ selector: "db-tag", standalone: true, imports: [CommonModule, DBTooltip], template: `<div
     #_ref
@@ -3266,92 +3288,92 @@ class DBCustomSelect {
         this.DEFAULT_CLOSE_BUTTON = DEFAULT_CLOSE_BUTTON;
         this.stringPropVisible = stringPropVisible;
         this.DEFAULT_VALID_MESSAGE = DEFAULT_VALID_MESSAGE;
-        this.id = input();
-        this.invalidMessage = input();
-        this.message = input();
-        this.showMessage = input();
-        this.ariaDescribedBy = input();
-        this.showNoResults = input();
-        this.showLoading = input();
-        this.multiple = input();
-        this.showSelectAll = input();
-        this.showSearch = input();
-        this.values = model();
-        this.validation = input();
-        this.options = input();
-        this.searchValue = input();
-        this.selectedLabels = input();
-        this.transformSelectedLabels = input();
-        this.selectedType = input();
-        this.amountText = input();
-        this.validMessage = input();
-        this.required = input();
-        this.selectAllLabel = input();
-        this.removeTagsTexts = input();
-        this.placement = input();
-        this.searchFilter = input();
-        this.className = input();
-        this.formFieldWidth = input();
-        this.variant = input();
-        this.showRequiredAsterisk = input();
-        this.showLabel = input();
-        this.icon = input();
-        this.showIcon = input();
-        this.label = input();
-        this.form = input();
-        this.name = input();
-        this.disabled = model();
-        this.open = input();
-        this.dropdownWidth = input();
-        this.searchLabel = input();
-        this.searchPlaceholder = input();
-        this.ariaListLabel = input();
-        this.loadingText = input();
-        this.noResultsText = input();
-        this.mobileCloseButtonText = input();
-        this.showClearSelection = input(defaultProps$l["showClearSelection"]);
-        this.clearSelectionText = input(defaultProps$l["clearSelectionText"]);
-        this.placeholder = input();
-        this.messageIcon = input();
+        this.id = input(...(ngDevMode ? [undefined, { debugName: "id" }] : []));
+        this.invalidMessage = input(...(ngDevMode ? [undefined, { debugName: "invalidMessage" }] : []));
+        this.message = input(...(ngDevMode ? [undefined, { debugName: "message" }] : []));
+        this.showMessage = input(...(ngDevMode ? [undefined, { debugName: "showMessage" }] : []));
+        this.ariaDescribedBy = input(...(ngDevMode ? [undefined, { debugName: "ariaDescribedBy" }] : []));
+        this.showNoResults = input(...(ngDevMode ? [undefined, { debugName: "showNoResults" }] : []));
+        this.showLoading = input(...(ngDevMode ? [undefined, { debugName: "showLoading" }] : []));
+        this.multiple = input(...(ngDevMode ? [undefined, { debugName: "multiple" }] : []));
+        this.showSelectAll = input(...(ngDevMode ? [undefined, { debugName: "showSelectAll" }] : []));
+        this.showSearch = input(...(ngDevMode ? [undefined, { debugName: "showSearch" }] : []));
+        this.values = model(...(ngDevMode ? [undefined, { debugName: "values" }] : []));
+        this.validation = input(...(ngDevMode ? [undefined, { debugName: "validation" }] : []));
+        this.options = input(...(ngDevMode ? [undefined, { debugName: "options" }] : []));
+        this.searchValue = input(...(ngDevMode ? [undefined, { debugName: "searchValue" }] : []));
+        this.selectedLabels = input(...(ngDevMode ? [undefined, { debugName: "selectedLabels" }] : []));
+        this.transformSelectedLabels = input(...(ngDevMode ? [undefined, { debugName: "transformSelectedLabels" }] : []));
+        this.selectedType = input(...(ngDevMode ? [undefined, { debugName: "selectedType" }] : []));
+        this.amountText = input(...(ngDevMode ? [undefined, { debugName: "amountText" }] : []));
+        this.validMessage = input(...(ngDevMode ? [undefined, { debugName: "validMessage" }] : []));
+        this.required = input(...(ngDevMode ? [undefined, { debugName: "required" }] : []));
+        this.selectAllLabel = input(...(ngDevMode ? [undefined, { debugName: "selectAllLabel" }] : []));
+        this.removeTagsTexts = input(...(ngDevMode ? [undefined, { debugName: "removeTagsTexts" }] : []));
+        this.placement = input(...(ngDevMode ? [undefined, { debugName: "placement" }] : []));
+        this.searchFilter = input(...(ngDevMode ? [undefined, { debugName: "searchFilter" }] : []));
+        this.className = input(...(ngDevMode ? [undefined, { debugName: "className" }] : []));
+        this.formFieldWidth = input(...(ngDevMode ? [undefined, { debugName: "formFieldWidth" }] : []));
+        this.variant = input(...(ngDevMode ? [undefined, { debugName: "variant" }] : []));
+        this.showRequiredAsterisk = input(...(ngDevMode ? [undefined, { debugName: "showRequiredAsterisk" }] : []));
+        this.showLabel = input(...(ngDevMode ? [undefined, { debugName: "showLabel" }] : []));
+        this.icon = input(...(ngDevMode ? [undefined, { debugName: "icon" }] : []));
+        this.showIcon = input(...(ngDevMode ? [undefined, { debugName: "showIcon" }] : []));
+        this.label = input(...(ngDevMode ? [undefined, { debugName: "label" }] : []));
+        this.form = input(...(ngDevMode ? [undefined, { debugName: "form" }] : []));
+        this.name = input(...(ngDevMode ? [undefined, { debugName: "name" }] : []));
+        this.disabled = model(...(ngDevMode ? [undefined, { debugName: "disabled" }] : []));
+        this.open = input(...(ngDevMode ? [undefined, { debugName: "open" }] : []));
+        this.dropdownWidth = input(...(ngDevMode ? [undefined, { debugName: "dropdownWidth" }] : []));
+        this.searchLabel = input(...(ngDevMode ? [undefined, { debugName: "searchLabel" }] : []));
+        this.searchPlaceholder = input(...(ngDevMode ? [undefined, { debugName: "searchPlaceholder" }] : []));
+        this.listLabel = input(...(ngDevMode ? [undefined, { debugName: "listLabel" }] : []));
+        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.placeholder = input(...(ngDevMode ? [undefined, { debugName: "placeholder" }] : []));
+        this.messageIcon = input(...(ngDevMode ? [undefined, { debugName: "messageIcon" }] : []));
         this.amountChange = output();
         this.dropdownToggle = output();
         this.optionSelected = output();
         this.search = output();
-        this._ref = viewChild("_ref");
-        this.selectRef = viewChild("selectRef");
-        this.detailsRef = viewChild("detailsRef");
-        this.searchInputRef = viewChild("searchInputRef");
-        this.selectAllRef = viewChild("selectAllRef");
-        this._id = signal(undefined);
-        this._messageId = signal(undefined);
-        this._validMessageId = signal(undefined);
-        this._invalidMessageId = signal(undefined);
-        this._invalidMessage = signal(undefined);
-        this._selectId = signal(undefined);
-        this._labelId = signal(undefined);
-        this._summaryId = signal(undefined);
-        this._placeholderId = signal(undefined);
-        this._infoTextId = signal(undefined);
-        this._validity = signal("no-validation");
-        this._userInteraction = signal(false);
-        this._descByIds = signal(undefined);
-        this._selectedLabels = signal("");
-        this._selectedLabelsId = signal(undefined);
-        this._voiceOverFallback = signal("");
-        this._selectedOptions = signal([]);
-        this.selectAllEnabled = signal(false);
-        this.searchEnabled = signal(false);
-        this.amountOptions = signal(0);
-        this._values = signal([]);
-        this._options = signal([]);
-        this._hasNoOptions = signal(false);
-        this._documentClickListenerCallbackId = signal(undefined);
-        this._internalChangeTimestamp = signal(0);
-        this._documentScrollListenerCallbackId = signal(undefined);
-        this._observer = signal(undefined);
-        this._searchValue = signal(undefined);
-        this.selectAllChecked = signal(false);
-        this.selectAllIndeterminate = signal(false);
+        this._ref = viewChild("_ref", ...(ngDevMode ? [{ debugName: "_ref" }] : []));
+        this.selectRef = viewChild("selectRef", ...(ngDevMode ? [{ debugName: "selectRef" }] : []));
+        this.detailsRef = viewChild("detailsRef", ...(ngDevMode ? [{ debugName: "detailsRef" }] : []));
+        this.searchInputRef = viewChild("searchInputRef", ...(ngDevMode ? [{ debugName: "searchInputRef" }] : []));
+        this.selectAllRef = viewChild("selectAllRef", ...(ngDevMode ? [{ debugName: "selectAllRef" }] : []));
+        this._id = signal(undefined, ...(ngDevMode ? [{ debugName: "_id" }] : []));
+        this._messageId = signal(undefined, ...(ngDevMode ? [{ debugName: "_messageId" }] : []));
+        this._validMessageId = signal(undefined, ...(ngDevMode ? [{ debugName: "_validMessageId" }] : []));
+        this._invalidMessageId = signal(undefined, ...(ngDevMode ? [{ debugName: "_invalidMessageId" }] : []));
+        this._invalidMessage = signal(undefined, ...(ngDevMode ? [{ debugName: "_invalidMessage" }] : []));
+        this._selectId = signal(undefined, ...(ngDevMode ? [{ debugName: "_selectId" }] : []));
+        this._labelId = signal(undefined, ...(ngDevMode ? [{ debugName: "_labelId" }] : []));
+        this._summaryId = signal(undefined, ...(ngDevMode ? [{ debugName: "_summaryId" }] : []));
+        this._placeholderId = signal(undefined, ...(ngDevMode ? [{ debugName: "_placeholderId" }] : []));
+        this._infoTextId = signal(undefined, ...(ngDevMode ? [{ debugName: "_infoTextId" }] : []));
+        this._validity = signal("no-validation", ...(ngDevMode ? [{ debugName: "_validity" }] : []));
+        this._userInteraction = signal(false, ...(ngDevMode ? [{ debugName: "_userInteraction" }] : []));
+        this._descByIds = signal(undefined, ...(ngDevMode ? [{ debugName: "_descByIds" }] : []));
+        this._selectedLabels = signal("", ...(ngDevMode ? [{ debugName: "_selectedLabels" }] : []));
+        this._selectedLabelsId = signal(undefined, ...(ngDevMode ? [{ debugName: "_selectedLabelsId" }] : []));
+        this._voiceOverFallback = signal("", ...(ngDevMode ? [{ debugName: "_voiceOverFallback" }] : []));
+        this._selectedOptions = signal([], ...(ngDevMode ? [{ debugName: "_selectedOptions" }] : []));
+        this.selectAllEnabled = signal(false, ...(ngDevMode ? [{ debugName: "selectAllEnabled" }] : []));
+        this.searchEnabled = signal(false, ...(ngDevMode ? [{ debugName: "searchEnabled" }] : []));
+        this.amountOptions = signal(0, ...(ngDevMode ? [{ debugName: "amountOptions" }] : []));
+        this._values = signal([], ...(ngDevMode ? [{ debugName: "_values" }] : []));
+        this._options = signal([], ...(ngDevMode ? [{ debugName: "_options" }] : []));
+        this._hasNoOptions = signal(false, ...(ngDevMode ? [{ debugName: "_hasNoOptions" }] : []));
+        this._documentClickListenerCallbackId = signal(undefined, ...(ngDevMode ? [{ debugName: "_documentClickListenerCallbackId" }] : []));
+        this._internalChangeTimestamp = signal(0, ...(ngDevMode ? [{ debugName: "_internalChangeTimestamp" }] : []));
+        this._documentScrollListenerCallbackId = signal(undefined, ...(ngDevMode ? [{ debugName: "_documentScrollListenerCallbackId" }] : []));
+        this._observer = signal(undefined, ...(ngDevMode ? [{ debugName: "_observer" }] : []));
+        this._searchValue = signal(undefined, ...(ngDevMode ? [{ debugName: "_searchValue" }] : []));
+        this.selectAllChecked = signal(false, ...(ngDevMode ? [{ debugName: "selectAllChecked" }] : []));
+        this.selectAllIndeterminate = signal(false, ...(ngDevMode ? [{ debugName: "selectAllIndeterminate" }] : []));
         if (typeof window !== "undefined") {
             effect(() => {
                 // --- Mitosis: Workaround to make sure the effect() is triggered ---
@@ -3672,8 +3694,8 @@ class DBCustomSelect {
             }
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: DBCustomSelect, deps: [{ token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: DBCustomSelect, isStandalone: true, selector: "db-custom-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 }, ariaDescribedBy: { classPropertyName: "ariaDescribedBy", publicName: "ariaDescribedBy", isSignal: true, isRequired: false, transformFunction: null }, showNoResults: { classPropertyName: "showNoResults", publicName: "showNoResults", isSignal: true, isRequired: false, transformFunction: null }, showLoading: { classPropertyName: "showLoading", publicName: "showLoading", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, showSelectAll: { classPropertyName: "showSelectAll", publicName: "showSelectAll", isSignal: true, isRequired: false, transformFunction: null }, showSearch: { classPropertyName: "showSearch", publicName: "showSearch", isSignal: true, isRequired: false, transformFunction: null }, values: { classPropertyName: "values", publicName: "values", isSignal: true, isRequired: false, transformFunction: null }, validation: { classPropertyName: "validation", publicName: "validation", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, searchValue: { classPropertyName: "searchValue", publicName: "searchValue", isSignal: true, isRequired: false, transformFunction: null }, selectedLabels: { classPropertyName: "selectedLabels", publicName: "selectedLabels", isSignal: true, isRequired: false, transformFunction: null }, transformSelectedLabels: { classPropertyName: "transformSelectedLabels", publicName: "transformSelectedLabels", isSignal: true, isRequired: false, transformFunction: null }, selectedType: { classPropertyName: "selectedType", publicName: "selectedType", isSignal: true, isRequired: false, transformFunction: null }, amountText: { classPropertyName: "amountText", publicName: "amountText", isSignal: true, isRequired: false, transformFunction: null }, validMessage: { classPropertyName: "validMessage", publicName: "validMessage", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, selectAllLabel: { classPropertyName: "selectAllLabel", publicName: "selectAllLabel", isSignal: true, isRequired: false, transformFunction: null }, removeTagsTexts: { classPropertyName: "removeTagsTexts", publicName: "removeTagsTexts", isSignal: true, isRequired: false, transformFunction: null }, placement: { classPropertyName: "placement", publicName: "placement", isSignal: true, isRequired: false, transformFunction: null }, searchFilter: { classPropertyName: "searchFilter", publicName: "searchFilter", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, formFieldWidth: { classPropertyName: "formFieldWidth", publicName: "formFieldWidth", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, showRequiredAsterisk: { classPropertyName: "showRequiredAsterisk", publicName: "showRequiredAsterisk", isSignal: true, isRequired: false, transformFunction: null }, showLabel: { classPropertyName: "showLabel", publicName: "showLabel", 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 }, form: { classPropertyName: "form", publicName: "form", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, dropdownWidth: { classPropertyName: "dropdownWidth", publicName: "dropdownWidth", isSignal: true, isRequired: false, transformFunction: null }, searchLabel: { classPropertyName: "searchLabel", publicName: "searchLabel", isSignal: true, isRequired: false, transformFunction: null }, searchPlaceholder: { classPropertyName: "searchPlaceholder", publicName: "searchPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, ariaListLabel: { classPropertyName: "ariaListLabel", publicName: "ariaListLabel", isSignal: true, isRequired: false, transformFunction: null }, loadingText: { classPropertyName: "loadingText", publicName: "loadingText", isSignal: true, isRequired: false, transformFunction: null }, noResultsText: { classPropertyName: "noResultsText", publicName: "noResultsText", isSignal: true, isRequired: false, transformFunction: null }, mobileCloseButtonText: { classPropertyName: "mobileCloseButtonText", publicName: "mobileCloseButtonText", isSignal: true, isRequired: false, transformFunction: null }, showClearSelection: { classPropertyName: "showClearSelection", publicName: "showClearSelection", isSignal: true, isRequired: false, transformFunction: null }, clearSelectionText: { classPropertyName: "clearSelectionText", publicName: "clearSelectionText", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, messageIcon: { classPropertyName: "messageIcon", publicName: "messageIcon", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { values: "valuesChange", disabled: "disabledChange", amountChange: "amountChange", dropdownToggle: "dropdownToggle", optionSelected: "optionSelected", search: "search" }, providers: [{
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: DBCustomSelect, deps: [{ token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.2", type: DBCustomSelect, isStandalone: true, selector: "db-custom-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 }, ariaDescribedBy: { classPropertyName: "ariaDescribedBy", publicName: "ariaDescribedBy", isSignal: true, isRequired: false, transformFunction: null }, showNoResults: { classPropertyName: "showNoResults", publicName: "showNoResults", isSignal: true, isRequired: false, transformFunction: null }, showLoading: { classPropertyName: "showLoading", publicName: "showLoading", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, showSelectAll: { classPropertyName: "showSelectAll", publicName: "showSelectAll", isSignal: true, isRequired: false, transformFunction: null }, showSearch: { classPropertyName: "showSearch", publicName: "showSearch", isSignal: true, isRequired: false, transformFunction: null }, values: { classPropertyName: "values", publicName: "values", isSignal: true, isRequired: false, transformFunction: null }, validation: { classPropertyName: "validation", publicName: "validation", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, searchValue: { classPropertyName: "searchValue", publicName: "searchValue", isSignal: true, isRequired: false, transformFunction: null }, selectedLabels: { classPropertyName: "selectedLabels", publicName: "selectedLabels", isSignal: true, isRequired: false, transformFunction: null }, transformSelectedLabels: { classPropertyName: "transformSelectedLabels", publicName: "transformSelectedLabels", isSignal: true, isRequired: false, transformFunction: null }, selectedType: { classPropertyName: "selectedType", publicName: "selectedType", isSignal: true, isRequired: false, transformFunction: null }, amountText: { classPropertyName: "amountText", publicName: "amountText", isSignal: true, isRequired: false, transformFunction: null }, validMessage: { classPropertyName: "validMessage", publicName: "validMessage", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, selectAllLabel: { classPropertyName: "selectAllLabel", publicName: "selectAllLabel", isSignal: true, isRequired: false, transformFunction: null }, removeTagsTexts: { classPropertyName: "removeTagsTexts", publicName: "removeTagsTexts", isSignal: true, isRequired: false, transformFunction: null }, placement: { classPropertyName: "placement", publicName: "placement", isSignal: true, isRequired: false, transformFunction: null }, searchFilter: { classPropertyName: "searchFilter", publicName: "searchFilter", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, formFieldWidth: { classPropertyName: "formFieldWidth", publicName: "formFieldWidth", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, showRequiredAsterisk: { classPropertyName: "showRequiredAsterisk", publicName: "showRequiredAsterisk", isSignal: true, isRequired: false, transformFunction: null }, showLabel: { classPropertyName: "showLabel", publicName: "showLabel", 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 }, form: { classPropertyName: "form", publicName: "form", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, dropdownWidth: { classPropertyName: "dropdownWidth", publicName: "dropdownWidth", isSignal: true, isRequired: false, transformFunction: null }, searchLabel: { classPropertyName: "searchLabel", publicName: "searchLabel", isSignal: true, isRequired: false, transformFunction: null }, searchPlaceholder: { classPropertyName: "searchPlaceholder", publicName: "searchPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, listLabel: { classPropertyName: "listLabel", publicName: "listLabel", isSignal: true, isRequired: false, transformFunction: null }, loadingText: { classPropertyName: "loadingText", publicName: "loadingText", isSignal: true, isRequired: false, transformFunction: null }, noResultsText: { classPropertyName: "noResultsText", publicName: "noResultsText", isSignal: true, isRequired: false, transformFunction: null }, mobileCloseButtonText: { classPropertyName: "mobileCloseButtonText", publicName: "mobileCloseButtonText", isSignal: true, isRequired: false, transformFunction: null }, showClearSelection: { classPropertyName: "showClearSelection", publicName: "showClearSelection", isSignal: true, isRequired: false, transformFunction: null }, clearSelectionText: { classPropertyName: "clearSelectionText", publicName: "clearSelectionText", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, messageIcon: { classPropertyName: "messageIcon", publicName: "messageIcon", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { values: "valuesChange", disabled: "disabledChange", amountChange: "amountChange", dropdownToggle: "dropdownToggle", optionSelected: "optionSelected", search: "search" }, providers: [{
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: DBCustomSelect,
                 multi: true
@@ -3796,7 +3818,7 @@ class DBCustomSelect {
           }
           <db-custom-select-list
             [multiple]="getBoolean(multiple(), 'multiple')"
-            [label]="ariaListLabel() ?? label() ?? DEFAULT_LABEL"
+            [label]="listLabel() ?? label() ?? DEFAULT_LABEL"
           >
             @for (option of _options();track trackByOption2(i, option);let i =
             $index) {
@@ -3883,7 +3905,7 @@ class DBCustomSelect {
     >
   </div> `, isInline: true, styles: [":host{display:contents}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: DBTag, selector: "db-tag", inputs: ["removeButton", "id", "className", "semantic", "emphasis", "icon", "showCheckState", "showIcon", "noText", "overflow", "text", "behavior"], outputs: ["remove"] }, { kind: "component", type: DBCustomSelectDropdown, selector: "db-custom-select-dropdown", inputs: ["id", "className", "width"] }, { kind: "component", type: DBInput, selector: "db-input", inputs: ["id", "invalidMessage", "dataListId", "message", "showMessage", "value", "validMessage", "validation", "required", "minLength", "maxLength", "pattern", "dataList", "className", "variant", "showLabel", "showIconLeading", "showIcon", "iconLeading", "icon", "iconTrailing", "showRequiredAsterisk", "showIconTrailing", "label", "fieldSizing", "name", "type", "multiple", "placeholder", "disabled", "step", "maxlength", "minlength", "max", "min", "readOnly", "readonly", "form", "size", "autocomplete", "autofocus", "enterkeyhint", "inputmode", "ariaDescribedBy", "messageSize", "messageIcon", "validMessageSize", "invalidMessageSize"], outputs: ["valueChange", "disabledChange", "input", "change", "blur", "focus"] }, { kind: "component", type: DBCustomSelectList, selector: "db-custom-select-list", inputs: ["multiple", "label", "id", "className"] }, { kind: "component", type: DBCustomSelectListItem, selector: "db-custom-select-list-item", inputs: ["id", "isGroupTitle", "showDivider", "type", "checked", "className", "groupTitle", "icon", "showIcon", "name", "disabled", "value", "label"], outputs: ["checkedChange", "disabledChange", "change"] }, { kind: "component", type: DBInfotext, selector: "db-infotext", inputs: ["id", "className", "icon", "semantic", "size", "showIcon", "text"] }, { 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"] }, { kind: "component", type: DBTooltip, selector: "db-tooltip", inputs: ["id", "variant", "placement", "className", "emphasis", "animation", "delay", "width", "showArrow"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: DBCustomSelect, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: DBCustomSelect, decorators: [{
             type: Component,
             args: [{ providers: [{
                             provide: NG_VALUE_ACCESSOR,
@@ -4018,7 +4040,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
           }
           <db-custom-select-list
             [multiple]="getBoolean(multiple(), 'multiple')"
-            [label]="ariaListLabel() ?? label() ?? DEFAULT_LABEL"
+            [label]="listLabel() ?? label() ?? DEFAULT_LABEL"
           >
             @for (option of _options();track trackByOption2(i, option);let i =
             $index) {
@@ -4112,9 +4134,9 @@ const defaultProps$k = {};
 class DBCustomSelectFormField {
     constructor() {
         this.cls = cls;
-        this.id = input();
-        this.className = input();
-        this._ref = viewChild("_ref");
+        this.id = input(...(ngDevMode ? [undefined, { debugName: "id" }] : []));
+        this.className = input(...(ngDevMode ? [undefined, { debugName: "className" }] : []));
+        this._ref = viewChild("_ref", ...(ngDevMode ? [{ debugName: "_ref" }] : []));
     }
     /**
      * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.
@@ -4154,8 +4176,8 @@ class DBCustomSelectFormField {
             this.enableAttributePassing(element, "db-custom-select-form-field");
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: DBCustomSelectFormField, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.2.15", type: DBCustomSelectFormField, isStandalone: true, selector: "db-custom-select-form-field", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "_ref", first: true, predicate: ["_ref"], descendants: true, isSignal: true }], ngImport: i0, template: `<summary
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: DBCustomSelectFormField, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.3.2", type: DBCustomSelectFormField, isStandalone: true, selector: "db-custom-select-form-field", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "_ref", first: true, predicate: ["_ref"], descendants: true, isSignal: true }], ngImport: i0, template: `<summary
     #_ref
     [attr.id]="id()"
     [class]="cls('db-custom-select-form-field', className())"
@@ -4163,7 +4185,7 @@ class DBCustomSelectFormField {
     <ng-content></ng-content>
   </summary> `, isInline: true, styles: [":host{display:contents}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: DBCustomSelectFormField, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: DBCustomSelectFormField, decorators: [{
             type: Component,
             args: [{ selector: "db-custom-select-form-field", standalone: true, imports: [CommonModule], template: `<summary
     #_ref
@@ -4182,13 +4204,13 @@ const defaultProps$j = {};
 class DBDivider {
     constructor() {
         this.cls = cls;
-        this.id = input();
-        this.margin = input();
-        this.variant = input();
-        this.emphasis = input();
-        this.width = input();
-        this.className = input();
-        this._ref = viewChild("_ref");
+        this.id = input(...(ngDevMode ? [undefined, { debugName: "id" }] : []));
+        this.margin = input(...(ngDevMode ? [undefined, { debugName: "margin" }] : []));
+        this.variant = input(...(ngDevMode ? [undefined, { debugName: "variant" }] : []));
+        this.emphasis = input(...(ngDevMode ? [undefined, { debugName: "emphasis" }] : []));
+        this.width = input(...(ngDevMode ? [undefined, { debugName: "width" }] : []));
+        this.className = input(...(ngDevMode ? [undefined, { debugName: "className" }] : []));
+        this._ref = viewChild("_ref", ...(ngDevMode ? [{ debugName: "_ref" }] : []));
     }
     /**
      * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.
@@ -4228,8 +4250,8 @@ class DBDivider {
             this.enableAttributePassing(element, "db-divider");
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: DBDivider, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.2.15", type: DBDivider, isStandalone: true, selector: "db-divider", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, margin: { classPropertyName: "margin", publicName: "margin", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, emphasis: { classPropertyName: "emphasis", publicName: "emphasis", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "_ref", first: true, predicate: ["_ref"], descendants: true, isSignal: true }], ngImport: i0, template: `<div
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: DBDivider, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.3.2", type: DBDivider, isStandalone: true, selector: "db-divider", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, margin: { classPropertyName: "margin", publicName: "margin", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, emphasis: { classPropertyName: "emphasis", publicName: "emphasis", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "_ref", first: true, predicate: ["_ref"], descendants: true, isSignal: true }], ngImport: i0, template: `<div
     #_ref
     [attr.id]="id()"
     [attr.data-margin]="margin()"
@@ -4239,7 +4261,7 @@ class DBDivider {
     [class]="cls('db-divider', className())"
   ></div> `, isInline: true, styles: [":host{display:contents}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: DBDivider, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: DBDivider, decorators: [{
             type: Component,
             args: [{ selector: "db-divider", standalone: true, imports: [CommonModule], template: `<div
     #_ref
@@ -4317,22 +4339,22 @@ class DBDrawer {
         this.cls = cls;
         this.getBooleanAsString = getBooleanAsString;
         this.DEFAULT_CLOSE_BUTTON = DEFAULT_CLOSE_BUTTON;
-        this.open = input();
-        this.position = input();
-        this.backdrop = input();
-        this.variant = input();
-        this.id = input();
-        this.direction = input();
-        this.className = input();
-        this.spacing = input();
-        this.width = input();
-        this.rounded = input();
-        this.closeButtonId = input();
-        this.closeButtonText = input();
+        this.open = input(...(ngDevMode ? [undefined, { debugName: "open" }] : []));
+        this.position = input(...(ngDevMode ? [undefined, { debugName: "position" }] : []));
+        this.backdrop = input(...(ngDevMode ? [undefined, { debugName: "backdrop" }] : []));
+        this.variant = input(...(ngDevMode ? [undefined, { debugName: "variant" }] : []));
+        this.id = input(...(ngDevMode ? [undefined, { debugName: "id" }] : []));
+        this.direction = input(...(ngDevMode ? [undefined, { debugName: "direction" }] : []));
+        this.className = input(...(ngDevMode ? [undefined, { debugName: "className" }] : []));
+        this.spacing = input(...(ngDevMode ? [undefined, { debugName: "spacing" }] : []));
+        this.width = input(...(ngDevMode ? [undefined, { debugName: "width" }] : []));
+        this.rounded = input(...(ngDevMode ? [undefined, { debugName: "rounded" }] : []));
+        this.closeButtonId = input(...(ngDevMode ? [undefined, { debugName: "closeButtonId" }] : []));
+        this.closeButtonText = input(...(ngDevMode ? [undefined, { debugName: "closeButtonText" }] : []));
         this.close = output();
-        this._ref = viewChild("_ref");
-        this.dialogContainerRef = viewChild("dialogContainerRef");
-        this.initialized = signal(false);
+        this._ref = viewChild("_ref", ...(ngDevMode ? [{ debugName: "_ref" }] : []));
+        this.dialogContainerRef = viewChild("dialogContainerRef", ...(ngDevMode ? [{ debugName: "dialogContainerRef" }] : []));
+        this.initialized = signal(false, ...(ngDevMode ? [{ debugName: "initialized" }] : []));
         if (typeof window !== "undefined") {
             effect(() => {
                 // --- Mitosis: Workaround to make sure the effect() is triggered ---
@@ -4402,8 +4424,8 @@ class DBDrawer {
             this.initialized.set(true);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: DBDrawer, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.2.15", type: DBDrawer, isStandalone: true, selector: "db-drawer", inputs: { open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, backdrop: { classPropertyName: "backdrop", publicName: "backdrop", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, direction: { classPropertyName: "direction", publicName: "direction", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, spacing: { classPropertyName: "spacing", publicName: "spacing", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, rounded: { classPropertyName: "rounded", publicName: "rounded", 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 }, { propertyName: "dialogContainerRef", first: true, predicate: ["dialogContainerRef"], descendants: true, isSignal: true }], ngImport: i0, template: `<dialog
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: DBDrawer, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.3.2", type: DBDrawer, isStandalone: true, selector: "db-drawer", inputs: { open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, backdrop: { classPropertyName: "backdrop", publicName: "backdrop", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, direction: { classPropertyName: "direction", publicName: "direction", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, spacing: { classPropertyName: "spacing", publicName: "spacing", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, rounded: { classPropertyName: "rounded", publicName: "rounded", 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 }, { propertyName: "dialogContainerRef", first: true, predicate: ["dialogContainerRef"], descendants: true, isSignal: true }], ngImport: i0, template: `<dialog
     class="db-drawer"
     [attr.id]="id()"
     #_ref
@@ -4440,7 +4462,7 @@ class DBDrawer {
     </article>
   </dialog> `, 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: "19.2.15", ngImport: i0, type: DBDrawer, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: DBDrawer, decorators: [{
             type: Component,
             args: [{ selector: "db-drawer", standalone: true, imports: [CommonModule, DBButton], template: `<dialog
     class="db-drawer"
@@ -4619,10 +4641,10 @@ var navigation = {
 
 /* Angular cannot handle multiple slots with the same name, we need to use Directives for this. */
 class SecondaryActionDirective {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: SecondaryActionDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.15", type: SecondaryActionDirective, isStandalone: true, selector: "[dbSecondaryAction]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: SecondaryActionDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.2", type: SecondaryActionDirective, isStandalone: true, selector: "[dbSecondaryAction]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: SecondaryActionDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: SecondaryActionDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[dbSecondaryAction]',
@@ -4632,10 +4654,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
 
 /* Angular cannot handle multiple slots with the same name, we need to use Directives for this. */
 class MetaNavigationDirective {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: MetaNavigationDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.15", type: MetaNavigationDirective, isStandalone: true, selector: "[dbMetaNavigation]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: MetaNavigationDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.2", type: MetaNavigationDirective, isStandalone: true, selector: "[dbMetaNavigation]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: MetaNavigationDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: MetaNavigationDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[dbMetaNavigation]',
@@ -4645,10 +4667,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
 
 /* Angular cannot handle multiple slots with the same name, we need to use Directives for this. */
 class NavigationDirective {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: NavigationDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.15", type: NavigationDirective, isStandalone: true, selector: "[dbNavigation]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: NavigationDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.2", type: NavigationDirective, isStandalone: true, selector: "[dbNavigation]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: NavigationDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: NavigationDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[dbNavigation]',
@@ -4676,16 +4698,16 @@ class DBHeader {
         this.cls = cls;
         this.getBoolean = getBoolean;
         this.DEFAULT_BURGER_MENU = DEFAULT_BURGER_MENU;
-        this.forceMobile = input();
-        this.drawerOpen = input();
-        this.className = input();
-        this.id = input();
-        this.width = input();
-        this.burgerMenuLabel = input();
+        this.forceMobile = input(...(ngDevMode ? [undefined, { debugName: "forceMobile" }] : []));
+        this.drawerOpen = input(...(ngDevMode ? [undefined, { debugName: "drawerOpen" }] : []));
+        this.className = input(...(ngDevMode ? [undefined, { debugName: "className" }] : []));
+        this.id = input(...(ngDevMode ? [undefined, { debugName: "id" }] : []));
+        this.width = input(...(ngDevMode ? [undefined, { debugName: "width" }] : []));
+        this.burgerMenuLabel = input(...(ngDevMode ? [undefined, { debugName: "burgerMenuLabel" }] : []));
         this.toggle = output();
-        this._ref = viewChild("_ref");
-        this.initialized = signal(false);
-        this.forcedToMobile = signal(false);
+        this._ref = viewChild("_ref", ...(ngDevMode ? [{ debugName: "_ref" }] : []));
+        this.initialized = signal(false, ...(ngDevMode ? [{ debugName: "initialized" }] : []));
+        this.forcedToMobile = signal(false, ...(ngDevMode ? [{ debugName: "forcedToMobile" }] : []));
         if (typeof window !== "undefined") {
             effect(() => {
                 // --- Mitosis: Workaround to make sure the effect() is triggered ---
@@ -4747,8 +4769,8 @@ class DBHeader {
             this.initialized.set(true);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: DBHeader, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.2.15", type: DBHeader, isStandalone: true, selector: "db-header", inputs: { forceMobile: { classPropertyName: "forceMobile", publicName: "forceMobile", isSignal: true, isRequired: false, transformFunction: null }, drawerOpen: { classPropertyName: "drawerOpen", publicName: "drawerOpen", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, burgerMenuLabel: { classPropertyName: "burgerMenuLabel", publicName: "burgerMenuLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { toggle: "toggle" }, queries: [{ propertyName: "dbNavigation", first: true, predicate: NavigationDirective, descendants: true, read: TemplateRef }, { propertyName: "dbMetaNavigation", first: true, predicate: MetaNavigationDirective, descendants: true, read: TemplateRef }, { propertyName: "dbSecondaryAction", first: true, predicate: SecondaryActionDirective, descendants: true, read: TemplateRef }], viewQueries: [{ propertyName: "_ref", first: true, predicate: ["_ref"], descendants: true, isSignal: true }], ngImport: i0, template: `<header
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: DBHeader, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.3.2", type: DBHeader, isStandalone: true, selector: "db-header", inputs: { forceMobile: { classPropertyName: "forceMobile", publicName: "forceMobile", isSignal: true, isRequired: false, transformFunction: null }, drawerOpen: { classPropertyName: "drawerOpen", publicName: "drawerOpen", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, burgerMenuLabel: { classPropertyName: "burgerMenuLabel", publicName: "burgerMenuLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { toggle: "toggle" }, queries: [{ propertyName: "dbNavigation", first: true, predicate: NavigationDirective, descendants: true, read: TemplateRef }, { propertyName: "dbMetaNavigation", first: true, predicate: MetaNavigationDirective, descendants: true, read: TemplateRef }, { propertyName: "dbSecondaryAction", first: true, predicate: SecondaryActionDirective, descendants: true, read: TemplateRef }], viewQueries: [{ propertyName: "_ref", first: true, predicate: ["_ref"], descendants: true, isSignal: true }], ngImport: i0, template: `<header
     #_ref
     [class]="cls('db-header', className())"
     [attr.id]="id()"
@@ -4805,7 +4827,7 @@ class DBHeader {
     </div>
   </header> `, isInline: true, styles: [":host{display:contents}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: DBDrawer, selector: "db-drawer", inputs: ["open", "position", "backdrop", "variant", "id", "direction", "className", "spacing", "width", "rounded", "closeButtonId", "closeButtonText"], outputs: ["close"] }, { 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: "19.2.15", ngImport: i0, type: DBHeader, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: DBHeader, decorators: [{
             type: Component,
             args: [{ selector: "db-header", standalone: true, imports: [CommonModule, DBDrawer, DBButton], template: `<header
     #_ref
@@ -4878,13 +4900,13 @@ const defaultProps$g = {};
 class DBIcon {
     constructor() {
         this.cls = cls;
-        this.id = input();
-        this.className = input();
-        this.icon = input();
-        this.weight = input();
-        this.variant = input();
-        this.text = input();
-        this._ref = viewChild("_ref");
+        this.id = input(...(ngDevMode ? [undefined, { debugName: "id" }] : []));
+        this.className = input(...(ngDevMode ? [undefined, { debugName: "className" }] : []));
+        this.icon = input(...(ngDevMode ? [undefined, { debugName: "icon" }] : []));
+        this.weight = input(...(ngDevMode ? [undefined, { debugName: "weight" }] : []));
+        this.variant = input(...(ngDevMode ? [undefined, { debugName: "variant" }] : []));
+        this.text = input(...(ngDevMode ? [undefined, { debugName: "text" }] : []));
+        this._ref = viewChild("_ref", ...(ngDevMode ? [{ debugName: "_ref" }] : []));
     }
     /**
      * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.
@@ -4924,8 +4946,8 @@ class DBIcon {
             this.enableAttributePassing(element, "db-icon");
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: DBIcon, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: DBIcon, isStandalone: true, selector: "db-icon", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, weight: { classPropertyName: "weight", publicName: "weight", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "_ref", first: true, predicate: ["_ref"], descendants: true, isSignal: true }], ngImport: i0, template: `<span
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: DBIcon, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.2", type: DBIcon, isStandalone: true, selector: "db-icon", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, weight: { classPropertyName: "weight", publicName: "weight", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "_ref", first: true, predicate: ["_ref"], descendants: true, isSignal: true }], ngImport: i0, template: `<span
     aria-hidden="true"
     #_ref
     [attr.id]="id()"
@@ -4938,7 +4960,7 @@ class DBIcon {
     }</span
   > `, isInline: true, styles: [":host{display:contents}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: DBIcon, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: DBIcon, decorators: [{
             type: Component,
             args: [{ selector: "db-icon", standalone: true, imports: [CommonModule], template: `<span
     aria-hidden="true"
@@ -4967,21 +4989,21 @@ class DBLink {
     constructor() {
         this.cls = cls;
         this.getBooleanAsString = getBooleanAsString;
-        this.id = input();
-        this.className = input();
-        this.href = input();
-        this.target = input();
-        this.rel = input();
-        this.role = input();
-        this.hreflang = input();
-        this.disabled = input();
-        this.size = input();
-        this.showIcon = input();
-        this.variant = input();
-        this.content = input();
-        this.wrap = input();
-        this.text = input();
-        this._ref = viewChild("_ref");
+        this.id = input(...(ngDevMode ? [undefined, { debugName: "id" }] : []));
+        this.className = input(...(ngDevMode ? [undefined, { debugName: "className" }] : []));
+        this.href = input(...(ngDevMode ? [undefined, { debugName: "href" }] : []));
+        this.target = input(...(ngDevMode ? [undefined, { debugName: "target" }] : []));
+        this.rel = input(...(ngDevMode ? [undefined, { debugName: "rel" }] : []));
+        this.role = input(...(ngDevMode ? [undefined, { debugName: "role" }] : []));
+        this.hreflang = input(...(ngDevMode ? [undefined, { debugName: "hreflang" }] : []));
+        this.disabled = input(...(ngDevMode ? [undefined, { debugName: "disabled" }] : []));
+        this.size = input(...(ngDevMode ? [undefined, { debugName: "size" }] : []));
+        this.showIcon = input(...(ngDevMode ? [undefined, { debugName: "showIcon" }] : []));
+        this.variant = input(...(ngDevMode ? [undefined, { debugName: "variant" }] : []));
+        this.content = input(...(ngDevMode ? [undefined, { debugName: "content" }] : []));
+        this.wrap = input(...(ngDevMode ? [undefined, { debugName: "wrap" }] : []));
+        this.text = input(...(ngDevMode ? [undefined, { debugName: "text" }] : []));
+        this._ref = viewChild("_ref", ...(ngDevMode ? [{ debugName: "_ref" }] : []));
     }
     /**
      * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.
@@ -5021,8 +5043,8 @@ class DBLink {
             this.enableAttributePassing(element, "db-link");
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: DBLink, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: DBLink, isStandalone: true, selector: "db-link", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, href: { classPropertyName: "href", publicName: "href", isSignal: true, isRequired: false, transformFunction: null }, target: { classPropertyName: "target", publicName: "target", isSignal: true, isRequired: false, transformFunction: null }, rel: { classPropertyName: "rel", publicName: "rel", isSignal: true, isRequired: false, transformFunction: null }, role: { classPropertyName: "role", publicName: "role", isSignal: true, isRequired: false, transformFunction: null }, hreflang: { classPropertyName: "hreflang", publicName: "hreflang", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, showIcon: { classPropertyName: "showIcon", publicName: "showIcon", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, content: { classPropertyName: "content", publicName: "content", isSignal: true, isRequired: false, transformFunction: null }, wrap: { classPropertyName: "wrap", publicName: "wrap", isSignal: true, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "_ref", first: true, predicate: ["_ref"], descendants: true, isSignal: true }], ngImport: i0, template: `<a
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: DBLink, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.2", type: DBLink, isStandalone: true, selector: "db-link", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, href: { classPropertyName: "href", publicName: "href", isSignal: true, isRequired: false, transformFunction: null }, target: { classPropertyName: "target", publicName: "target", isSignal: true, isRequired: false, transformFunction: null }, rel: { classPropertyName: "rel", publicName: "rel", isSignal: true, isRequired: false, transformFunction: null }, role: { classPropertyName: "role", publicName: "role", isSignal: true, isRequired: false, transformFunction: null }, hreflang: { classPropertyName: "hreflang", publicName: "hreflang", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, showIcon: { classPropertyName: "showIcon", publicName: "showIcon", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, content: { classPropertyName: "content", publicName: "content", isSignal: true, isRequired: false, transformFunction: null }, wrap: { classPropertyName: "wrap", publicName: "wrap", isSignal: true, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "_ref", first: true, predicate: ["_ref"], descendants: true, isSignal: true }], ngImport: i0, template: `<a
     #_ref
     [attr.id]="id()"
     [class]="cls('db-link', className())"
@@ -5043,7 +5065,7 @@ class DBLink {
     }</a
   > `, isInline: true, styles: [":host{display:contents}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: DBLink, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: DBLink, decorators: [{
             type: Component,
             args: [{ selector: "db-link", standalone: true, imports: [CommonModule], template: `<a
     #_ref
@@ -5075,10 +5097,10 @@ const defaultProps$e = {};
 class DBNavigation {
     constructor() {
         this.cls = cls;
-        this.id = input();
-        this.className = input();
-        this._ref = viewChild("_ref");
-        this._id = signal(DEFAULT_ID);
+        this.id = input(...(ngDevMode ? [undefined, { debugName: "id" }] : []));
+        this.className = input(...(ngDevMode ? [undefined, { debugName: "className" }] : []));
+        this._ref = viewChild("_ref", ...(ngDevMode ? [{ debugName: "_ref" }] : []));
+        this._id = signal(DEFAULT_ID, ...(ngDevMode ? [{ debugName: "_id" }] : []));
     }
     /**
      * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.
@@ -5119,8 +5141,8 @@ class DBNavigation {
             this._id.set(this.id() || "navigation-" + uuid());
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: DBNavigation, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.2.15", type: DBNavigation, isStandalone: true, selector: "db-navigation", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "_ref", first: true, predicate: ["_ref"], descendants: true, isSignal: true }], ngImport: i0, template: `<nav
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: DBNavigation, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.3.2", type: DBNavigation, isStandalone: true, selector: "db-navigation", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "_ref", first: true, predicate: ["_ref"], descendants: true, isSignal: true }], ngImport: i0, template: `<nav
     #_ref
     [attr.id]="_id()"
     [class]="cls('db-navigation', className())"
@@ -5128,7 +5150,7 @@ class DBNavigation {
     <menu><ng-content></ng-content></menu>
   </nav> `, isInline: true, styles: [":host{display:contents}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: DBNavigation, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: DBNavigation, decorators: [{
             type: Component,
             args: [{ selector: "db-navigation", standalone: true, imports: [CommonModule], template: `<nav
     #_ref
@@ -5141,10 +5163,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
 
 /* Angular cannot handle multiple slots with the same name, we need to use Directives for this. */
 class NavigationContentDirective {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: NavigationContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.15", type: NavigationContentDirective, isStandalone: true, selector: "[dbNavigationContent]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: NavigationContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.2", type: NavigationContentDirective, isStandalone: true, selector: "[dbNavigationContent]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: NavigationContentDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: NavigationContentDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[dbNavigationContent]',
@@ -5180,27 +5202,27 @@ class DBNavigationItem {
         this.getBooleanAsString = getBooleanAsString;
         this.getBoolean = getBoolean;
         this.DEFAULT_BACK = DEFAULT_BACK;
-        this.subNavigationExpanded = input();
-        this.id = input();
-        this.className = input();
-        this.width = input();
-        this.icon = input();
-        this.showIcon = input();
-        this.active = input();
-        this.wrap = input();
-        this.disabled = input();
-        this.text = input();
-        this.backButtonId = input();
-        this.backButtonText = input();
+        this.subNavigationExpanded = input(...(ngDevMode ? [undefined, { debugName: "subNavigationExpanded" }] : []));
+        this.id = input(...(ngDevMode ? [undefined, { debugName: "id" }] : []));
+        this.className = input(...(ngDevMode ? [undefined, { debugName: "className" }] : []));
+        this.width = input(...(ngDevMode ? [undefined, { debugName: "width" }] : []));
+        this.icon = input(...(ngDevMode ? [undefined, { debugName: "icon" }] : []));
+        this.showIcon = input(...(ngDevMode ? [undefined, { debugName: "showIcon" }] : []));
+        this.active = input(...(ngDevMode ? [undefined, { debugName: "active" }] : []));
+        this.wrap = input(...(ngDevMode ? [undefined, { debugName: "wrap" }] : []));
+        this.disabled = input(...(ngDevMode ? [undefined, { debugName: "disabled" }] : []));
+        this.text = input(...(ngDevMode ? [undefined, { debugName: "text" }] : []));
+        this.backButtonId = input(...(ngDevMode ? [undefined, { debugName: "backButtonId" }] : []));
+        this.backButtonText = input(...(ngDevMode ? [undefined, { debugName: "backButtonText" }] : []));
         this.click = output();
-        this._ref = viewChild("_ref");
-        this.initialized = signal(false);
-        this.hasAreaPopup = signal(false);
-        this.hasSubNavigation = signal(true);
-        this.isSubNavigationExpanded = signal(false);
-        this.autoClose = signal(false);
-        this.subNavigationId = signal("sub-navigation-" + uuid());
-        this.navigationItemSafeTriangle = signal(undefined);
+        this._ref = viewChild("_ref", ...(ngDevMode ? [{ debugName: "_ref" }] : []));
+        this.initialized = signal(false, ...(ngDevMode ? [{ debugName: "initialized" }] : []));
+        this.hasAreaPopup = signal(false, ...(ngDevMode ? [{ debugName: "hasAreaPopup" }] : []));
+        this.hasSubNavigation = signal(true, ...(ngDevMode ? [{ debugName: "hasSubNavigation" }] : []));
+        this.isSubNavigationExpanded = signal(false, ...(ngDevMode ? [{ debugName: "isSubNavigationExpanded" }] : []));
+        this.autoClose = signal(false, ...(ngDevMode ? [{ debugName: "autoClose" }] : []));
+        this.subNavigationId = signal("sub-navigation-" + uuid(), ...(ngDevMode ? [{ debugName: "subNavigationId" }] : []));
+        this.navigationItemSafeTriangle = signal(undefined, ...(ngDevMode ? [{ debugName: "navigationItemSafeTriangle" }] : []));
         if (typeof window !== "undefined") {
             effect(() => {
                 // --- Mitosis: Workaround to make sure the effect() is triggered ---
@@ -5275,8 +5297,8 @@ class DBNavigationItem {
             this.initialized.set(true);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: DBNavigationItem, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: DBNavigationItem, isStandalone: true, selector: "db-navigation-item", inputs: { subNavigationExpanded: { classPropertyName: "subNavigationExpanded", publicName: "subNavigationExpanded", isSignal: true, isRequired: false, transformFunction: null }, 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 }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, showIcon: { classPropertyName: "showIcon", publicName: "showIcon", isSignal: true, isRequired: false, transformFunction: null }, active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null }, wrap: { classPropertyName: "wrap", publicName: "wrap", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, backButtonId: { classPropertyName: "backButtonId", publicName: "backButtonId", isSignal: true, isRequired: false, transformFunction: null }, backButtonText: { classPropertyName: "backButtonText", publicName: "backButtonText", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { click: "click" }, queries: [{ propertyName: "dbNavigationContent", first: true, predicate: NavigationContentDirective, descendants: true, read: TemplateRef }], viewQueries: [{ propertyName: "_ref", first: true, predicate: ["_ref"], descendants: true, isSignal: true }], ngImport: i0, template: `<li
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: DBNavigationItem, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.2", type: DBNavigationItem, isStandalone: true, selector: "db-navigation-item", inputs: { subNavigationExpanded: { classPropertyName: "subNavigationExpanded", publicName: "subNavigationExpanded", isSignal: true, isRequired: false, transformFunction: null }, 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 }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, showIcon: { classPropertyName: "showIcon", publicName: "showIcon", isSignal: true, isRequired: false, transformFunction: null }, active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null }, wrap: { classPropertyName: "wrap", publicName: "wrap", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, backButtonId: { classPropertyName: "backButtonId", publicName: "backButtonId", isSignal: true, isRequired: false, transformFunction: null }, backButtonText: { classPropertyName: "backButtonText", publicName: "backButtonText", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { click: "click" }, queries: [{ propertyName: "dbNavigationContent", first: true, predicate: NavigationContentDirective, descendants: true, read: TemplateRef }], viewQueries: [{ propertyName: "_ref", first: true, predicate: ["_ref"], descendants: true, isSignal: true }], ngImport: i0, template: `<li
     #_ref
     [attr.id]="id()"
     (mouseover)="navigationItemSafeTriangle()?.enableFollow()"
@@ -5325,7 +5347,7 @@ class DBNavigationItem {
     }
   </li> `, isInline: true, styles: [":host{display:contents}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { 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: "19.2.15", ngImport: i0, type: DBNavigationItem, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: DBNavigationItem, decorators: [{
             type: Component,
             args: [{ selector: "db-navigation-item", standalone: true, imports: [CommonModule, DBButton], template: `<li
     #_ref
@@ -5396,24 +5418,24 @@ class DBNotification {
         this.stringPropVisible = stringPropVisible;
         this.getBoolean = getBoolean;
         this.DEFAULT_CLOSE_BUTTON = DEFAULT_CLOSE_BUTTON;
-        this.id = input();
-        this.className = input();
-        this.ariaLive = input();
-        this.semantic = input();
-        this.variant = input();
-        this.icon = input();
-        this.showIcon = input();
-        this.linkVariant = input();
-        this.headline = input();
-        this.showHeadline = input();
-        this.text = input();
-        this.timestamp = input();
-        this.showTimestamp = input();
-        this.closeable = input();
-        this.closeButtonId = input();
-        this.closeButtonText = input();
+        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.variant = input(...(ngDevMode ? [undefined, { debugName: "variant" }] : []));
+        this.icon = input(...(ngDevMode ? [undefined, { debugName: "icon" }] : []));
+        this.showIcon = input(...(ngDevMode ? [undefined, { debugName: "showIcon" }] : []));
+        this.linkVariant = input(...(ngDevMode ? [undefined, { debugName: "linkVariant" }] : []));
+        this.headline = input(...(ngDevMode ? [undefined, { debugName: "headline" }] : []));
+        this.showHeadline = input(...(ngDevMode ? [undefined, { debugName: "showHeadline" }] : []));
+        this.text = input(...(ngDevMode ? [undefined, { debugName: "text" }] : []));
+        this.timestamp = input(...(ngDevMode ? [undefined, { debugName: "timestamp" }] : []));
+        this.showTimestamp = input(...(ngDevMode ? [undefined, { debugName: "showTimestamp" }] : []));
+        this.closeable = input(...(ngDevMode ? [undefined, { debugName: "closeable" }] : []));
+        this.closeButtonId = input(...(ngDevMode ? [undefined, { debugName: "closeButtonId" }] : []));
+        this.closeButtonText = input(...(ngDevMode ? [undefined, { debugName: "closeButtonText" }] : []));
         this.close = output();
-        this._ref = viewChild("_ref");
+        this._ref = viewChild("_ref", ...(ngDevMode ? [{ debugName: "_ref" }] : []));
     }
     /**
      * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.
@@ -5453,8 +5475,8 @@ class DBNotification {
             this.enableAttributePassing(element, "db-notification");
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: DBNotification, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", 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 }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, showIcon: { classPropertyName: "showIcon", publicName: "showIcon", 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.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: DBNotification, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.2", 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 }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, showIcon: { classPropertyName: "showIcon", publicName: "showIcon", 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
     #_ref
     [attr.id]="id()"
     [class]="cls('db-notification', className())"
@@ -5491,7 +5513,7 @@ class DBNotification {
     }
   </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"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: DBNotification, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: DBNotification, decorators: [{
             type: Component,
             args: [{ selector: "db-notification", standalone: true, imports: [CommonModule, DBButton], template: `<article
     #_ref
@@ -5540,14 +5562,14 @@ class DBPage {
     constructor() {
         this.cls = cls;
         this.getBooleanAsString = getBooleanAsString;
-        this.fadeIn = input();
-        this.documentOverflow = input();
-        this.variant = input();
-        this.id = input();
-        this.className = input();
-        this.mainClass = input();
-        this._ref = viewChild("_ref");
-        this.fontsLoaded = signal(false);
+        this.fadeIn = input(...(ngDevMode ? [undefined, { debugName: "fadeIn" }] : []));
+        this.documentOverflow = input(...(ngDevMode ? [undefined, { debugName: "documentOverflow" }] : []));
+        this.variant = input(...(ngDevMode ? [undefined, { debugName: "variant" }] : []));
+        this.id = input(...(ngDevMode ? [undefined, { debugName: "id" }] : []));
+        this.className = input(...(ngDevMode ? [undefined, { debugName: "className" }] : []));
+        this.mainClass = input(...(ngDevMode ? [undefined, { debugName: "mainClass" }] : []));
+        this._ref = viewChild("_ref", ...(ngDevMode ? [{ debugName: "_ref" }] : []));
+        this.fontsLoaded = signal(false, ...(ngDevMode ? [{ debugName: "fontsLoaded" }] : []));
     }
     /**
      * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.
@@ -5613,8 +5635,8 @@ class DBPage {
             document.documentElement.classList.remove("db-page-document");
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: DBPage, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.2.15", type: DBPage, isStandalone: true, selector: "db-page", inputs: { fadeIn: { classPropertyName: "fadeIn", publicName: "fadeIn", isSignal: true, isRequired: false, transformFunction: null }, documentOverflow: { classPropertyName: "documentOverflow", publicName: "documentOverflow", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, mainClass: { classPropertyName: "mainClass", publicName: "mainClass", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "_ref", first: true, predicate: ["_ref"], descendants: true, isSignal: true }], ngImport: i0, template: `<div
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: DBPage, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.3.2", type: DBPage, isStandalone: true, selector: "db-page", inputs: { fadeIn: { classPropertyName: "fadeIn", publicName: "fadeIn", isSignal: true, isRequired: false, transformFunction: null }, documentOverflow: { classPropertyName: "documentOverflow", publicName: "documentOverflow", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, mainClass: { classPropertyName: "mainClass", publicName: "mainClass", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "_ref", first: true, predicate: ["_ref"], descendants: true, isSignal: true }], ngImport: i0, template: `<div
     #_ref
     [attr.id]="id()"
     [class]="cls('db-page', className())"
@@ -5627,7 +5649,7 @@ class DBPage {
     <ng-content select="[footer]"> </ng-content>
   </div> `, isInline: true, styles: [":host{display:contents}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: DBPage, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: DBPage, decorators: [{
             type: Component,
             args: [{ selector: "db-page", standalone: true, imports: [CommonModule], template: `<div
     #_ref
@@ -5720,20 +5742,20 @@ class DBPopover {
     constructor() {
         this.cls = cls;
         this.getBooleanAsString = getBooleanAsString;
-        this.placement = input();
-        this.id = input();
-        this.className = input();
-        this.spacing = input();
-        this.gap = input();
-        this.animation = input();
-        this.open = input();
-        this.delay = input();
-        this.width = input();
-        this._ref = viewChild("_ref");
-        this.initialized = signal(false);
-        this.isExpanded = signal(false);
-        this._documentScrollListenerCallbackId = signal(undefined);
-        this._observer = signal(undefined);
+        this.placement = input(...(ngDevMode ? [undefined, { debugName: "placement" }] : []));
+        this.id = input(...(ngDevMode ? [undefined, { debugName: "id" }] : []));
+        this.className = input(...(ngDevMode ? [undefined, { debugName: "className" }] : []));
+        this.spacing = input(...(ngDevMode ? [undefined, { debugName: "spacing" }] : []));
+        this.gap = input(...(ngDevMode ? [undefined, { debugName: "gap" }] : []));
+        this.animation = input(...(ngDevMode ? [undefined, { debugName: "animation" }] : []));
+        this.open = input(...(ngDevMode ? [undefined, { debugName: "open" }] : []));
+        this.delay = input(...(ngDevMode ? [undefined, { debugName: "delay" }] : []));
+        this.width = input(...(ngDevMode ? [undefined, { debugName: "width" }] : []));
+        this._ref = viewChild("_ref", ...(ngDevMode ? [{ debugName: "_ref" }] : []));
+        this.initialized = signal(false, ...(ngDevMode ? [{ debugName: "initialized" }] : []));
+        this.isExpanded = signal(false, ...(ngDevMode ? [{ debugName: "isExpanded" }] : []));
+        this._documentScrollListenerCallbackId = signal(undefined, ...(ngDevMode ? [{ debugName: "_documentScrollListenerCallbackId" }] : []));
+        this._observer = signal(undefined, ...(ngDevMode ? [{ debugName: "_observer" }] : []));
         if (typeof window !== "undefined") {
             effect(() => {
                 // --- Mitosis: Workaround to make sure the effect() is triggered ---
@@ -5822,8 +5844,8 @@ class DBPopover {
             this.initialized.set(true);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: DBPopover, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.2.15", type: DBPopover, isStandalone: true, selector: "db-popover", inputs: { placement: { classPropertyName: "placement", publicName: "placement", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, spacing: { classPropertyName: "spacing", publicName: "spacing", isSignal: true, isRequired: false, transformFunction: null }, gap: { classPropertyName: "gap", publicName: "gap", isSignal: true, isRequired: false, transformFunction: null }, animation: { classPropertyName: "animation", publicName: "animation", isSignal: true, isRequired: false, transformFunction: null }, open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, delay: { classPropertyName: "delay", publicName: "delay", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "_ref", first: true, predicate: ["_ref"], descendants: true, isSignal: true }], ngImport: i0, template: `<div
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: DBPopover, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.3.2", type: DBPopover, isStandalone: true, selector: "db-popover", inputs: { placement: { classPropertyName: "placement", publicName: "placement", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, spacing: { classPropertyName: "spacing", publicName: "spacing", isSignal: true, isRequired: false, transformFunction: null }, gap: { classPropertyName: "gap", publicName: "gap", isSignal: true, isRequired: false, transformFunction: null }, animation: { classPropertyName: "animation", publicName: "animation", isSignal: true, isRequired: false, transformFunction: null }, open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, delay: { classPropertyName: "delay", publicName: "delay", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "_ref", first: true, predicate: ["_ref"], descendants: true, isSignal: true }], ngImport: i0, template: `<div
     #_ref
     [attr.id]="id()"
     [class]="cls('db-popover', className())"
@@ -5843,7 +5865,7 @@ class DBPopover {
     </article>
   </div> `, isInline: true, styles: [":host{display:contents}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: DBPopover, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: DBPopover, decorators: [{
             type: Component,
             args: [{ selector: "db-popover", standalone: true, imports: [CommonModule], template: `<div
     #_ref
@@ -5889,24 +5911,24 @@ class DBRadio {
         this.getHideProp = getHideProp;
         this.cls = cls;
         this.getBoolean = getBoolean;
-        this.id = input();
-        this.checked = input();
-        this.size = input();
-        this.showLabel = input();
-        this.showRequiredAsterisk = input();
-        this.className = input();
-        this.validation = input();
-        this.name = input();
-        this.disabled = model();
-        this.value = model();
-        this.required = input();
-        this.label = input();
+        this.id = input(...(ngDevMode ? [undefined, { debugName: "id" }] : []));
+        this.checked = input(...(ngDevMode ? [undefined, { debugName: "checked" }] : []));
+        this.size = input(...(ngDevMode ? [undefined, { debugName: "size" }] : []));
+        this.showLabel = input(...(ngDevMode ? [undefined, { debugName: "showLabel" }] : []));
+        this.showRequiredAsterisk = input(...(ngDevMode ? [undefined, { debugName: "showRequiredAsterisk" }] : []));
+        this.className = input(...(ngDevMode ? [undefined, { debugName: "className" }] : []));
+        this.validation = input(...(ngDevMode ? [undefined, { debugName: "validation" }] : []));
+        this.name = input(...(ngDevMode ? [undefined, { debugName: "name" }] : []));
+        this.disabled = model(...(ngDevMode ? [undefined, { debugName: "disabled" }] : []));
+        this.value = model(...(ngDevMode ? [undefined, { debugName: "value" }] : []));
+        this.required = input(...(ngDevMode ? [undefined, { debugName: "required" }] : []));
+        this.label = input(...(ngDevMode ? [undefined, { debugName: "label" }] : []));
         this.change = output();
         this.blur = output();
         this.focus = output();
-        this._ref = viewChild("_ref");
-        this.initialized = signal(false);
-        this._id = signal(undefined);
+        this._ref = viewChild("_ref", ...(ngDevMode ? [{ debugName: "_ref" }] : []));
+        this.initialized = signal(false, ...(ngDevMode ? [{ debugName: "initialized" }] : []));
+        this._id = signal(undefined, ...(ngDevMode ? [{ debugName: "_id" }] : []));
         if (typeof window !== "undefined") {
             effect(() => {
                 // --- Mitosis: Workaround to make sure the effect() is triggered ---
@@ -5981,8 +6003,8 @@ class DBRadio {
             this._id.set(this.id() ?? `radio-${uuid()}`);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: DBRadio, deps: [{ token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: DBRadio, isStandalone: true, selector: "db-radio", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", 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 }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, validation: { classPropertyName: "validation", publicName: "validation", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { disabled: "disabledChange", value: "valueChange", change: "change", blur: "blur", focus: "focus" }, providers: [{
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: DBRadio, deps: [{ token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.2", type: DBRadio, isStandalone: true, selector: "db-radio", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", 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 }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, validation: { classPropertyName: "validation", publicName: "validation", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { disabled: "disabledChange", value: "valueChange", change: "change", blur: "blur", focus: "focus" }, providers: [{
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: DBRadio,
                 multi: true
@@ -6012,7 +6034,7 @@ class DBRadio {
     }</label
   > `, isInline: true, styles: [":host{display:contents}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: DBRadio, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: DBRadio, decorators: [{
             type: Component,
             args: [{ providers: [{
                             provide: NG_VALUE_ACCESSOR,
@@ -6049,12 +6071,12 @@ const defaultProps$8 = {};
 class DBSection {
     constructor() {
         this.cls = cls;
-        this.id = input();
-        this.className = input();
-        this.spacing = input();
-        this.width = input();
-        this._ref = viewChild("_ref");
-        this._id = signal(DEFAULT_ID);
+        this.id = input(...(ngDevMode ? [undefined, { debugName: "id" }] : []));
+        this.className = input(...(ngDevMode ? [undefined, { debugName: "className" }] : []));
+        this.spacing = input(...(ngDevMode ? [undefined, { debugName: "spacing" }] : []));
+        this.width = input(...(ngDevMode ? [undefined, { debugName: "width" }] : []));
+        this._ref = viewChild("_ref", ...(ngDevMode ? [{ debugName: "_ref" }] : []));
+        this._id = signal(DEFAULT_ID, ...(ngDevMode ? [{ debugName: "_id" }] : []));
     }
     /**
      * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.
@@ -6095,8 +6117,8 @@ class DBSection {
             this._id.set(this.id() || "section-" + uuid());
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: DBSection, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.2.15", type: DBSection, isStandalone: true, selector: "db-section", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, spacing: { classPropertyName: "spacing", publicName: "spacing", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "_ref", first: true, predicate: ["_ref"], descendants: true, isSignal: true }], ngImport: i0, template: `<section
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: DBSection, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.3.2", type: DBSection, isStandalone: true, selector: "db-section", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, spacing: { classPropertyName: "spacing", publicName: "spacing", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "_ref", first: true, predicate: ["_ref"], descendants: true, isSignal: true }], ngImport: i0, template: `<section
     #_ref
     [attr.id]="_id()"
     [class]="cls('db-section', className())"
@@ -6106,7 +6128,7 @@ class DBSection {
     <ng-content></ng-content>
   </section> `, isInline: true, styles: [":host{display:contents}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: DBSection, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: DBSection, decorators: [{
             type: Component,
             args: [{ selector: "db-section", standalone: true, imports: [CommonModule], template: `<section
     #_ref
@@ -6201,46 +6223,46 @@ class DBSelect {
         this.getOptionKey = getOptionKey;
         this.stringPropVisible = stringPropVisible;
         this.DEFAULT_VALID_MESSAGE = DEFAULT_VALID_MESSAGE;
-        this.id = input();
-        this.invalidMessage = input();
-        this.message = input();
-        this.showMessage = input();
-        this.placeholder = input();
-        this.value = model();
-        this.validMessage = input();
-        this.validation = input();
-        this.required = input();
-        this.className = input();
-        this.variant = input();
-        this.showLabel = input();
-        this.showRequiredAsterisk = input();
-        this.icon = input();
-        this.showIcon = input();
-        this.label = input();
-        this.disabled = model();
-        this.name = input();
-        this.size = input();
-        this.autocomplete = input();
-        this.multiple = input();
-        this.ariaDescribedBy = input();
-        this.options = input();
-        this.messageIcon = input();
+        this.id = input(...(ngDevMode ? [undefined, { debugName: "id" }] : []));
+        this.invalidMessage = input(...(ngDevMode ? [undefined, { debugName: "invalidMessage" }] : []));
+        this.message = input(...(ngDevMode ? [undefined, { debugName: "message" }] : []));
+        this.showMessage = input(...(ngDevMode ? [undefined, { debugName: "showMessage" }] : []));
+        this.placeholder = input(...(ngDevMode ? [undefined, { debugName: "placeholder" }] : []));
+        this.value = model(...(ngDevMode ? [undefined, { debugName: "value" }] : []));
+        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.showLabel = input(...(ngDevMode ? [undefined, { debugName: "showLabel" }] : []));
+        this.showRequiredAsterisk = input(...(ngDevMode ? [undefined, { debugName: "showRequiredAsterisk" }] : []));
+        this.icon = input(...(ngDevMode ? [undefined, { debugName: "icon" }] : []));
+        this.showIcon = input(...(ngDevMode ? [undefined, { debugName: "showIcon" }] : []));
+        this.label = input(...(ngDevMode ? [undefined, { debugName: "label" }] : []));
+        this.disabled = model(...(ngDevMode ? [undefined, { debugName: "disabled" }] : []));
+        this.name = input(...(ngDevMode ? [undefined, { debugName: "name" }] : []));
+        this.size = input(...(ngDevMode ? [undefined, { debugName: "size" }] : []));
+        this.autocomplete = input(...(ngDevMode ? [undefined, { debugName: "autocomplete" }] : []));
+        this.multiple = input(...(ngDevMode ? [undefined, { debugName: "multiple" }] : []));
+        this.ariaDescribedBy = input(...(ngDevMode ? [undefined, { debugName: "ariaDescribedBy" }] : []));
+        this.options = input(...(ngDevMode ? [undefined, { debugName: "options" }] : []));
+        this.messageIcon = input(...(ngDevMode ? [undefined, { debugName: "messageIcon" }] : []));
         this.click = output();
         this.input = output();
         this.change = output();
         this.blur = output();
         this.focus = output();
-        this._ref = viewChild("_ref");
-        this._id = signal(undefined);
-        this._messageId = signal(undefined);
-        this._validMessageId = signal(undefined);
-        this._invalidMessageId = signal(undefined);
-        this._invalidMessage = signal(undefined);
-        this._placeholderId = signal("");
-        this._descByIds = signal(undefined);
-        this._value = signal("");
-        this.initialized = signal(false);
-        this._voiceOverFallback = signal("");
+        this._ref = viewChild("_ref", ...(ngDevMode ? [{ debugName: "_ref" }] : []));
+        this._id = signal(undefined, ...(ngDevMode ? [{ debugName: "_id" }] : []));
+        this._messageId = signal(undefined, ...(ngDevMode ? [{ debugName: "_messageId" }] : []));
+        this._validMessageId = signal(undefined, ...(ngDevMode ? [{ debugName: "_validMessageId" }] : []));
+        this._invalidMessageId = signal(undefined, ...(ngDevMode ? [{ debugName: "_invalidMessageId" }] : []));
+        this._invalidMessage = signal(undefined, ...(ngDevMode ? [{ debugName: "_invalidMessage" }] : []));
+        this._placeholderId = signal("", ...(ngDevMode ? [{ debugName: "_placeholderId" }] : []));
+        this._descByIds = signal(undefined, ...(ngDevMode ? [{ debugName: "_descByIds" }] : []));
+        this._value = signal("", ...(ngDevMode ? [{ debugName: "_value" }] : []));
+        this.initialized = signal(false, ...(ngDevMode ? [{ debugName: "initialized" }] : []));
+        this._voiceOverFallback = signal("", ...(ngDevMode ? [{ debugName: "_voiceOverFallback" }] : []));
         if (typeof window !== "undefined") {
             effect(() => {
                 // --- Mitosis: Workaround to make sure the effect() is triggered ---
@@ -6353,8 +6375,8 @@ class DBSelect {
             this.writeValue?.(this.value?.() ?? "");
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: DBSelect, deps: [{ token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", 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.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: DBSelect, deps: [{ token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.2", 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: [{
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: DBSelect,
                 multi: true
@@ -6452,7 +6474,7 @@ class DBSelect {
     >
   </div> `, isInline: true, styles: [":host{display:contents}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: DBInfotext, selector: "db-infotext", inputs: ["id", "className", "icon", "semantic", "size", "showIcon", "text"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: DBSelect, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: DBSelect, decorators: [{
             type: Component,
             args: [{ providers: [{
                             provide: NG_VALUE_ACCESSOR,
@@ -6558,15 +6580,15 @@ class DBStack {
     constructor() {
         this.cls = cls;
         this.getBooleanAsString = getBooleanAsString;
-        this.id = input();
-        this.className = input();
-        this.gap = input();
-        this.variant = input();
-        this.direction = input();
-        this.alignment = input();
-        this.justifyContent = input();
-        this.wrap = input();
-        this._ref = viewChild("_ref");
+        this.id = input(...(ngDevMode ? [undefined, { debugName: "id" }] : []));
+        this.className = input(...(ngDevMode ? [undefined, { debugName: "className" }] : []));
+        this.gap = input(...(ngDevMode ? [undefined, { debugName: "gap" }] : []));
+        this.variant = input(...(ngDevMode ? [undefined, { debugName: "variant" }] : []));
+        this.direction = input(...(ngDevMode ? [undefined, { debugName: "direction" }] : []));
+        this.alignment = input(...(ngDevMode ? [undefined, { debugName: "alignment" }] : []));
+        this.justifyContent = input(...(ngDevMode ? [undefined, { debugName: "justifyContent" }] : []));
+        this.wrap = input(...(ngDevMode ? [undefined, { debugName: "wrap" }] : []));
+        this._ref = viewChild("_ref", ...(ngDevMode ? [{ debugName: "_ref" }] : []));
     }
     /**
      * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.
@@ -6606,8 +6628,8 @@ class DBStack {
             this.enableAttributePassing(element, "db-stack");
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: DBStack, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.2.15", type: DBStack, isStandalone: true, selector: "db-stack", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, gap: { classPropertyName: "gap", publicName: "gap", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, direction: { classPropertyName: "direction", publicName: "direction", isSignal: true, isRequired: false, transformFunction: null }, alignment: { classPropertyName: "alignment", publicName: "alignment", isSignal: true, isRequired: false, transformFunction: null }, justifyContent: { classPropertyName: "justifyContent", publicName: "justifyContent", isSignal: true, isRequired: false, transformFunction: null }, wrap: { classPropertyName: "wrap", publicName: "wrap", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "_ref", first: true, predicate: ["_ref"], descendants: true, isSignal: true }], ngImport: i0, template: `<div
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: DBStack, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.3.2", type: DBStack, isStandalone: true, selector: "db-stack", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, gap: { classPropertyName: "gap", publicName: "gap", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, direction: { classPropertyName: "direction", publicName: "direction", isSignal: true, isRequired: false, transformFunction: null }, alignment: { classPropertyName: "alignment", publicName: "alignment", isSignal: true, isRequired: false, transformFunction: null }, justifyContent: { classPropertyName: "justifyContent", publicName: "justifyContent", isSignal: true, isRequired: false, transformFunction: null }, wrap: { classPropertyName: "wrap", publicName: "wrap", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "_ref", first: true, predicate: ["_ref"], descendants: true, isSignal: true }], ngImport: i0, template: `<div
     #_ref
     [attr.id]="id()"
     [class]="cls('db-stack', className())"
@@ -6621,7 +6643,7 @@ class DBStack {
     <ng-content></ng-content>
   </div> `, isInline: true, styles: [":host{display:contents}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: DBStack, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: DBStack, decorators: [{
             type: Component,
             args: [{ selector: "db-stack", standalone: true, imports: [CommonModule], template: `<div
     #_ref
@@ -6645,8 +6667,45 @@ const StackJustifyContentList = ['space-between', 'start', 'end', 'center'];
 
 const defaultProps$5 = {};
 class DBSwitch {
+    hasValidState() {
+        return !!(this.validMessage() ?? this.validation() === "valid");
+    }
+    handleValidation() {
+        if (!this._ref()?.nativeElement?.validity?.valid ||
+            this.validation() === "invalid") {
+            this._descByIds.set(this._invalidMessageId());
+            this._invalidMessage.set(this.invalidMessage() ||
+                this._ref()?.nativeElement?.validationMessage ||
+                DEFAULT_INVALID_MESSAGE);
+            if (hasVoiceOver()) {
+                this._voiceOverFallback.set(this._invalidMessage() || DEFAULT_INVALID_MESSAGE);
+                delay(() => {
+                    this._voiceOverFallback.set("");
+                }, 1000);
+            }
+            return;
+        }
+        if (this.hasValidState() &&
+            this._ref()?.nativeElement?.validity?.valid &&
+            this.required()) {
+            this._descByIds.set(this._validMessageId());
+            if (hasVoiceOver()) {
+                this._voiceOverFallback.set(this.validMessage() ?? DEFAULT_VALID_MESSAGE);
+                delay(() => {
+                    this._voiceOverFallback.set("");
+                }, 1000);
+            }
+            return;
+        }
+        if (stringPropVisible(this.message(), this.showMessage())) {
+            this._descByIds.set(this._messageId());
+            return;
+        }
+        this._descByIds.set(undefined);
+    }
     handleChange(event) {
         handleFrameworkEventAngular(this, event, "checked");
+        this.handleValidation();
     }
     handleBlur(event) {
         if (this.blur) {
@@ -6664,27 +6723,57 @@ class DBSwitch {
         this.getHideProp = getHideProp;
         this.cls = cls;
         this.getBoolean = getBoolean;
-        this.id = input();
-        this.visualAid = input();
-        this.size = input();
-        this.showLabel = input();
-        this.emphasis = input();
-        this.showRequiredAsterisk = input();
-        this.className = input();
-        this.checked = model();
-        this.value = input();
-        this.disabled = model();
-        this.validation = input();
-        this.name = input();
-        this.required = input();
-        this.iconLeading = input();
-        this.icon = input();
-        this.iconTrailing = input();
-        this.label = input();
+        this.stringPropVisible = stringPropVisible;
+        this.DEFAULT_VALID_MESSAGE = DEFAULT_VALID_MESSAGE;
+        this.DEFAULT_INVALID_MESSAGE = DEFAULT_INVALID_MESSAGE;
+        this.id = input(...(ngDevMode ? [undefined, { debugName: "id" }] : []));
+        this.validation = input(...(ngDevMode ? [undefined, { debugName: "validation" }] : []));
+        this.required = input(...(ngDevMode ? [undefined, { debugName: "required" }] : []));
+        this.message = input(...(ngDevMode ? [undefined, { debugName: "message" }] : []));
+        this.showMessage = input(...(ngDevMode ? [undefined, { debugName: "showMessage" }] : []));
+        this.validMessage = input(...(ngDevMode ? [undefined, { debugName: "validMessage" }] : []));
+        this.invalidMessage = input(...(ngDevMode ? [undefined, { debugName: "invalidMessage" }] : []));
+        this.checked = model(...(ngDevMode ? [undefined, { debugName: "checked" }] : []));
+        this.visualAid = input(...(ngDevMode ? [undefined, { debugName: "visualAid" }] : []));
+        this.size = input(...(ngDevMode ? [undefined, { debugName: "size" }] : []));
+        this.showLabel = input(...(ngDevMode ? [undefined, { debugName: "showLabel" }] : []));
+        this.variant = input(...(ngDevMode ? [undefined, { debugName: "variant" }] : []));
+        this.showRequiredAsterisk = input(...(ngDevMode ? [undefined, { debugName: "showRequiredAsterisk" }] : []));
+        this.className = input(...(ngDevMode ? [undefined, { debugName: "className" }] : []));
+        this.value = input(...(ngDevMode ? [undefined, { debugName: "value" }] : []));
+        this.disabled = model(...(ngDevMode ? [undefined, { debugName: "disabled" }] : []));
+        this.name = input(...(ngDevMode ? [undefined, { debugName: "name" }] : []));
+        this.iconLeading = input(...(ngDevMode ? [undefined, { debugName: "iconLeading" }] : []));
+        this.icon = input(...(ngDevMode ? [undefined, { debugName: "icon" }] : []));
+        this.iconTrailing = input(...(ngDevMode ? [undefined, { debugName: "iconTrailing" }] : []));
+        this.label = input(...(ngDevMode ? [undefined, { debugName: "label" }] : []));
+        this.messageIcon = input(...(ngDevMode ? [undefined, { debugName: "messageIcon" }] : []));
         this.blur = output();
         this.focus = output();
-        this._ref = viewChild("_ref");
-        this._id = signal(undefined);
+        this._ref = viewChild("_ref", ...(ngDevMode ? [{ debugName: "_ref" }] : []));
+        this._id = signal(undefined, ...(ngDevMode ? [{ debugName: "_id" }] : []));
+        this._messageId = signal(undefined, ...(ngDevMode ? [{ debugName: "_messageId" }] : []));
+        this._validMessageId = signal(undefined, ...(ngDevMode ? [{ debugName: "_validMessageId" }] : []));
+        this._invalidMessageId = signal(undefined, ...(ngDevMode ? [{ debugName: "_invalidMessageId" }] : []));
+        this._invalidMessage = signal(undefined, ...(ngDevMode ? [{ debugName: "_invalidMessage" }] : []));
+        this._descByIds = signal(undefined, ...(ngDevMode ? [{ debugName: "_descByIds" }] : []));
+        this._voiceOverFallback = signal("", ...(ngDevMode ? [{ debugName: "_voiceOverFallback" }] : []));
+        if (typeof window !== "undefined") {
+            effect(() => {
+                // --- Mitosis: Workaround to make sure the effect() is triggered ---
+                this.validation();
+                this.required();
+                this.message();
+                this.showMessage();
+                this.validMessage();
+                this.invalidMessage();
+                this.checked();
+                // ---
+                this.handleValidation();
+            }, {
+            // Enable writing to signals inside effects
+            });
+        }
     }
     /**
      * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.
@@ -6738,80 +6827,146 @@ class DBSwitch {
             const element = this._ref()?.nativeElement;
             this.enableAttributePassing(element, "db-switch");
             this._id.set(this.id() ?? `switch-${uuid()}`);
+            this._messageId.set(`${this._id()}${DEFAULT_MESSAGE_ID_SUFFIX}`);
+            this._validMessageId.set(`${this._id()}${DEFAULT_VALID_MESSAGE_ID_SUFFIX}`);
+            this._invalidMessageId.set(`${this._id()}${DEFAULT_INVALID_MESSAGE_ID_SUFFIX}`);
+            this.handleValidation();
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: DBSwitch, deps: [{ token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: DBSwitch, isStandalone: true, selector: "db-switch", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, visualAid: { classPropertyName: "visualAid", publicName: "visualAid", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, showLabel: { classPropertyName: "showLabel", publicName: "showLabel", isSignal: true, isRequired: false, transformFunction: null }, emphasis: { classPropertyName: "emphasis", publicName: "emphasis", isSignal: true, isRequired: false, transformFunction: null }, showRequiredAsterisk: { classPropertyName: "showRequiredAsterisk", publicName: "showRequiredAsterisk", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, validation: { classPropertyName: "validation", publicName: "validation", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, iconLeading: { classPropertyName: "iconLeading", publicName: "iconLeading", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, iconTrailing: { classPropertyName: "iconTrailing", publicName: "iconTrailing", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { checked: "checkedChange", disabled: "disabledChange", blur: "blur", focus: "focus" }, providers: [{
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: DBSwitch, deps: [{ token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.2", type: DBSwitch, isStandalone: true, selector: "db-switch", inputs: { id: { classPropertyName: "id", publicName: "id", 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 }, message: { classPropertyName: "message", publicName: "message", isSignal: true, isRequired: false, transformFunction: null }, showMessage: { classPropertyName: "showMessage", publicName: "showMessage", isSignal: true, isRequired: false, transformFunction: null }, validMessage: { classPropertyName: "validMessage", publicName: "validMessage", isSignal: true, isRequired: false, transformFunction: null }, invalidMessage: { classPropertyName: "invalidMessage", publicName: "invalidMessage", isSignal: true, isRequired: false, transformFunction: null }, checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null }, visualAid: { classPropertyName: "visualAid", publicName: "visualAid", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, showLabel: { classPropertyName: "showLabel", publicName: "showLabel", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, showRequiredAsterisk: { classPropertyName: "showRequiredAsterisk", publicName: "showRequiredAsterisk", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", 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 }, iconLeading: { classPropertyName: "iconLeading", publicName: "iconLeading", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, iconTrailing: { classPropertyName: "iconTrailing", publicName: "iconTrailing", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, messageIcon: { classPropertyName: "messageIcon", publicName: "messageIcon", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { checked: "checkedChange", disabled: "disabledChange", blur: "blur", focus: "focus" }, providers: [{
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: DBSwitch,
                 multi: true
-            }], viewQueries: [{ propertyName: "_ref", first: true, predicate: ["_ref"], descendants: true, isSignal: true }], ngImport: i0, template: `<label
+            }], viewQueries: [{ propertyName: "_ref", first: true, predicate: ["_ref"], descendants: true, isSignal: true }], ngImport: i0, template: `<div
     [attr.data-visual-aid]="getBooleanAsString(visualAid())"
     [attr.data-size]="size()"
     [attr.data-hide-label]="getHideProp(showLabel())"
-    [attr.data-emphasis]="emphasis()"
-    [attr.for]="_id()"
+    [attr.data-variant]="variant()"
     [attr.data-hide-asterisk]="getHideProp(showRequiredAsterisk())"
+    [attr.data-custom-validity]="validation()"
     [class]="cls('db-switch', className())"
-    ><input
-      type="checkbox"
-      role="switch"
-      [attr.id]="_id()"
-      #_ref
-      [checked]="getBoolean(checked(), 'checked')"
-      [attr.value]="value()"
-      [disabled]="getBoolean(disabled(), 'disabled')"
-      [attr.aria-invalid]="validation() === 'invalid'"
-      [attr.data-custom-validity]="validation()"
-      [attr.name]="name()"
-      [required]="getBoolean(required(), 'required')"
-      [attr.data-aid-icon]="iconLeading() ?? icon()"
-      [attr.data-aid-icon-trailing]="iconTrailing()"
-      (change)="handleChange($event)"
-      (blur)="handleBlur($event)"
-      (focus)="handleFocus($event)"
-    />
-    @if(label()){ {{label()}} }@else{
-    <ng-content></ng-content>
-    }</label
-  > `, isInline: true, styles: [":host{display:contents}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] }); }
+  >
+    <label [attr.for]="_id()"
+      ><input
+        type="checkbox"
+        role="switch"
+        [attr.id]="_id()"
+        #_ref
+        [checked]="getBoolean(checked(), 'checked')"
+        [attr.value]="value()"
+        [disabled]="getBoolean(disabled(), 'disabled')"
+        [attr.aria-invalid]="validation() === 'invalid' ? 'true' : undefined"
+        [attr.aria-describedby]="_descByIds()"
+        [attr.name]="name()"
+        [required]="getBoolean(required(), 'required')"
+        [attr.data-aid-icon]="iconLeading() ?? icon()"
+        [attr.data-aid-icon-trailing]="iconTrailing()"
+        (change)="handleChange($event)"
+        (blur)="handleBlur($event)"
+        (focus)="handleFocus($event)"
+      />
+      @if(label()){ {{label()}} }@else{
+      <ng-content></ng-content>
+      }</label
+    >
+    @if(stringPropVisible(message(), showMessage())){
+    <db-infotext
+      size="small"
+      semantic="adaptive"
+      [id]="_messageId()"
+      [icon]="messageIcon()"
+      >{{message()}}</db-infotext
+    >
+    } @if(hasValidState()){
+    <db-infotext
+      size="small"
+      semantic="successful"
+      [id]="_validMessageId()"
+      >{{validMessage() ?? DEFAULT_VALID_MESSAGE}}</db-infotext
+    >
+    }
+    <db-infotext
+      size="small"
+      semantic="critical"
+      [id]="_invalidMessageId()"
+      >{{_invalidMessage() ?? invalidMessage() ??
+            DEFAULT_INVALID_MESSAGE}}</db-infotext
+    >
+    <span
+      data-visually-hidden="true"
+      role="status"
+      >{{_voiceOverFallback()}}</span
+    >
+  </div> `, isInline: true, styles: [":host{display:contents}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: DBInfotext, selector: "db-infotext", inputs: ["id", "className", "icon", "semantic", "size", "showIcon", "text"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: DBSwitch, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: DBSwitch, decorators: [{
             type: Component,
             args: [{ providers: [{
                             provide: NG_VALUE_ACCESSOR,
                             useExisting: DBSwitch,
                             multi: true
-                        }], selector: "db-switch", standalone: true, imports: [CommonModule], template: `<label
+                        }], selector: "db-switch", standalone: true, imports: [CommonModule, DBInfotext], template: `<div
     [attr.data-visual-aid]="getBooleanAsString(visualAid())"
     [attr.data-size]="size()"
     [attr.data-hide-label]="getHideProp(showLabel())"
-    [attr.data-emphasis]="emphasis()"
-    [attr.for]="_id()"
+    [attr.data-variant]="variant()"
     [attr.data-hide-asterisk]="getHideProp(showRequiredAsterisk())"
+    [attr.data-custom-validity]="validation()"
     [class]="cls('db-switch', className())"
-    ><input
-      type="checkbox"
-      role="switch"
-      [attr.id]="_id()"
-      #_ref
-      [checked]="getBoolean(checked(), 'checked')"
-      [attr.value]="value()"
-      [disabled]="getBoolean(disabled(), 'disabled')"
-      [attr.aria-invalid]="validation() === 'invalid'"
-      [attr.data-custom-validity]="validation()"
-      [attr.name]="name()"
-      [required]="getBoolean(required(), 'required')"
-      [attr.data-aid-icon]="iconLeading() ?? icon()"
-      [attr.data-aid-icon-trailing]="iconTrailing()"
-      (change)="handleChange($event)"
-      (blur)="handleBlur($event)"
-      (focus)="handleFocus($event)"
-    />
-    @if(label()){ {{label()}} }@else{
-    <ng-content></ng-content>
-    }</label
-  > `, styles: [":host{display:contents}\n"] }]
+  >
+    <label [attr.for]="_id()"
+      ><input
+        type="checkbox"
+        role="switch"
+        [attr.id]="_id()"
+        #_ref
+        [checked]="getBoolean(checked(), 'checked')"
+        [attr.value]="value()"
+        [disabled]="getBoolean(disabled(), 'disabled')"
+        [attr.aria-invalid]="validation() === 'invalid' ? 'true' : undefined"
+        [attr.aria-describedby]="_descByIds()"
+        [attr.name]="name()"
+        [required]="getBoolean(required(), 'required')"
+        [attr.data-aid-icon]="iconLeading() ?? icon()"
+        [attr.data-aid-icon-trailing]="iconTrailing()"
+        (change)="handleChange($event)"
+        (blur)="handleBlur($event)"
+        (focus)="handleFocus($event)"
+      />
+      @if(label()){ {{label()}} }@else{
+      <ng-content></ng-content>
+      }</label
+    >
+    @if(stringPropVisible(message(), showMessage())){
+    <db-infotext
+      size="small"
+      semantic="adaptive"
+      [id]="_messageId()"
+      [icon]="messageIcon()"
+      >{{message()}}</db-infotext
+    >
+    } @if(hasValidState()){
+    <db-infotext
+      size="small"
+      semantic="successful"
+      [id]="_validMessageId()"
+      >{{validMessage() ?? DEFAULT_VALID_MESSAGE}}</db-infotext
+    >
+    }
+    <db-infotext
+      size="small"
+      semantic="critical"
+      [id]="_invalidMessageId()"
+      >{{_invalidMessage() ?? invalidMessage() ??
+            DEFAULT_INVALID_MESSAGE}}</db-infotext
+    >
+    <span
+      data-visually-hidden="true"
+      role="status"
+      >{{_voiceOverFallback()}}</span
+    >
+  </div> `, styles: [":host{display:contents}\n"] }]
         }], ctorParameters: () => [{ type: i0.Renderer2 }] });
 
 const defaultProps$4 = {};
@@ -6841,25 +6996,25 @@ class DBTabItem {
         this.cls = cls;
         this.getBooleanAsString = getBooleanAsString;
         this.getBoolean = getBoolean;
-        this.active = input();
-        this.name = input();
-        this.className = input();
-        this.id = input();
-        this.iconLeading = input();
-        this.icon = input();
-        this.iconTrailing = input();
-        this.showIconLeading = input();
-        this.showIcon = input();
-        this.showIconTrailing = input();
-        this.noText = input();
-        this.disabled = model();
-        this.checked = model();
-        this.label = input();
+        this.active = input(...(ngDevMode ? [undefined, { debugName: "active" }] : []));
+        this.name = input(...(ngDevMode ? [undefined, { debugName: "name" }] : []));
+        this.className = input(...(ngDevMode ? [undefined, { debugName: "className" }] : []));
+        this.id = input(...(ngDevMode ? [undefined, { debugName: "id" }] : []));
+        this.iconLeading = input(...(ngDevMode ? [undefined, { debugName: "iconLeading" }] : []));
+        this.icon = input(...(ngDevMode ? [undefined, { debugName: "icon" }] : []));
+        this.iconTrailing = input(...(ngDevMode ? [undefined, { debugName: "iconTrailing" }] : []));
+        this.showIconLeading = input(...(ngDevMode ? [undefined, { debugName: "showIconLeading" }] : []));
+        this.showIcon = input(...(ngDevMode ? [undefined, { debugName: "showIcon" }] : []));
+        this.showIconTrailing = input(...(ngDevMode ? [undefined, { debugName: "showIconTrailing" }] : []));
+        this.noText = input(...(ngDevMode ? [undefined, { debugName: "noText" }] : []));
+        this.disabled = model(...(ngDevMode ? [undefined, { debugName: "disabled" }] : []));
+        this.checked = model(...(ngDevMode ? [undefined, { debugName: "checked" }] : []));
+        this.label = input(...(ngDevMode ? [undefined, { debugName: "label" }] : []));
         this.change = output();
-        this._ref = viewChild("_ref");
-        this._selected = signal(false);
-        this._name = signal(undefined);
-        this.initialized = signal(false);
+        this._ref = viewChild("_ref", ...(ngDevMode ? [{ debugName: "_ref" }] : []));
+        this._selected = signal(false, ...(ngDevMode ? [{ debugName: "_selected" }] : []));
+        this._name = signal(undefined, ...(ngDevMode ? [{ debugName: "_name" }] : []));
+        this.initialized = signal(false, ...(ngDevMode ? [{ debugName: "initialized" }] : []));
         if (typeof window !== "undefined") {
             effect(() => {
                 // --- Mitosis: Workaround to make sure the effect() is triggered ---
@@ -6941,8 +7096,8 @@ class DBTabItem {
             this.initialized.set(true);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: DBTabItem, deps: [{ token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: DBTabItem, isStandalone: true, selector: "db-tab-item", inputs: { active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, iconLeading: { classPropertyName: "iconLeading", publicName: "iconLeading", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, iconTrailing: { classPropertyName: "iconTrailing", publicName: "iconTrailing", isSignal: true, isRequired: false, transformFunction: null }, showIconLeading: { classPropertyName: "showIconLeading", publicName: "showIconLeading", isSignal: true, isRequired: false, transformFunction: null }, showIcon: { classPropertyName: "showIcon", publicName: "showIcon", isSignal: true, isRequired: false, transformFunction: null }, showIconTrailing: { classPropertyName: "showIconTrailing", publicName: "showIconTrailing", isSignal: true, isRequired: false, transformFunction: null }, noText: { classPropertyName: "noText", publicName: "noText", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { disabled: "disabledChange", checked: "checkedChange", change: "change" }, providers: [{
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: DBTabItem, deps: [{ token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.2", type: DBTabItem, isStandalone: true, selector: "db-tab-item", inputs: { active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, iconLeading: { classPropertyName: "iconLeading", publicName: "iconLeading", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, iconTrailing: { classPropertyName: "iconTrailing", publicName: "iconTrailing", isSignal: true, isRequired: false, transformFunction: null }, showIconLeading: { classPropertyName: "showIconLeading", publicName: "showIconLeading", isSignal: true, isRequired: false, transformFunction: null }, showIcon: { classPropertyName: "showIcon", publicName: "showIcon", isSignal: true, isRequired: false, transformFunction: null }, showIconTrailing: { classPropertyName: "showIconTrailing", publicName: "showIconTrailing", isSignal: true, isRequired: false, transformFunction: null }, noText: { classPropertyName: "noText", publicName: "noText", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { disabled: "disabledChange", checked: "checkedChange", change: "change" }, providers: [{
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: DBTabItem,
                 multi: true
@@ -6968,7 +7123,7 @@ class DBTabItem {
     ></label>
   </li> `, isInline: true, styles: [":host{display:contents}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: DBTabItem, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: DBTabItem, decorators: [{
             type: Component,
             args: [{ providers: [{
                             provide: NG_VALUE_ACCESSOR,
@@ -7001,10 +7156,10 @@ const defaultProps$3 = {};
 class DBTabList {
     constructor() {
         this.cls = cls;
-        this.id = input();
-        this.className = input();
-        this._ref = viewChild("_ref");
-        this._id = signal(DEFAULT_ID);
+        this.id = input(...(ngDevMode ? [undefined, { debugName: "id" }] : []));
+        this.className = input(...(ngDevMode ? [undefined, { debugName: "className" }] : []));
+        this._ref = viewChild("_ref", ...(ngDevMode ? [{ debugName: "_ref" }] : []));
+        this._id = signal(DEFAULT_ID, ...(ngDevMode ? [{ debugName: "_id" }] : []));
     }
     /**
      * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.
@@ -7045,8 +7200,8 @@ class DBTabList {
             this._id.set(this.id() || "tab-list-" + uuid());
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: DBTabList, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.2.15", type: DBTabList, isStandalone: true, selector: "db-tab-list", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "_ref", first: true, predicate: ["_ref"], descendants: true, isSignal: true }], ngImport: i0, template: `<div
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: DBTabList, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.3.2", type: DBTabList, isStandalone: true, selector: "db-tab-list", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "_ref", first: true, predicate: ["_ref"], descendants: true, isSignal: true }], ngImport: i0, template: `<div
     #_ref
     [attr.id]="_id()"
     [class]="cls('db-tab-list', className())"
@@ -7056,7 +7211,7 @@ class DBTabList {
     </ul>
   </div> `, isInline: true, styles: [":host{display:contents}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: DBTabList, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: DBTabList, decorators: [{
             type: Component,
             args: [{ selector: "db-tab-list", standalone: true, imports: [CommonModule], template: `<div
     #_ref
@@ -7073,10 +7228,10 @@ const defaultProps$2 = {};
 class DBTabPanel {
     constructor() {
         this.cls = cls;
-        this.className = input();
-        this.id = input();
-        this.content = input();
-        this._ref = viewChild("_ref");
+        this.className = input(...(ngDevMode ? [undefined, { debugName: "className" }] : []));
+        this.id = input(...(ngDevMode ? [undefined, { debugName: "id" }] : []));
+        this.content = input(...(ngDevMode ? [undefined, { debugName: "content" }] : []));
+        this._ref = viewChild("_ref", ...(ngDevMode ? [{ debugName: "_ref" }] : []));
     }
     /**
      * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.
@@ -7116,8 +7271,8 @@ class DBTabPanel {
             this.enableAttributePassing(element, "db-tab-panel");
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: DBTabPanel, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: DBTabPanel, isStandalone: true, selector: "db-tab-panel", inputs: { className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, content: { classPropertyName: "content", publicName: "content", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "_ref", first: true, predicate: ["_ref"], descendants: true, isSignal: true }], ngImport: i0, template: `<section
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: DBTabPanel, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.2", type: DBTabPanel, isStandalone: true, selector: "db-tab-panel", inputs: { className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, content: { classPropertyName: "content", publicName: "content", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "_ref", first: true, predicate: ["_ref"], descendants: true, isSignal: true }], ngImport: i0, template: `<section
     role="tabpanel"
     #_ref
     [class]="cls('db-tab-panel', className())"
@@ -7126,7 +7281,7 @@ class DBTabPanel {
     @if(content()){ {{content()}} } <ng-content></ng-content>
   </section> `, isInline: true, styles: [":host{display:contents}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: DBTabPanel, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: DBTabPanel, decorators: [{
             type: Component,
             args: [{ selector: "db-tab-panel", standalone: true, imports: [CommonModule], template: `<section
     role="tabpanel"
@@ -7265,27 +7420,27 @@ class DBTabs {
     }
     constructor() {
         this.cls = cls;
-        this.id = input();
-        this.name = input();
-        this.tabs = input();
-        this.arrowScrollDistance = input();
-        this.orientation = input();
-        this.behavior = input();
-        this.initialSelectedMode = input();
-        this.initialSelectedIndex = input();
-        this.className = input();
-        this.alignment = input();
-        this.width = input();
+        this.id = input(...(ngDevMode ? [undefined, { debugName: "id" }] : []));
+        this.name = input(...(ngDevMode ? [undefined, { debugName: "name" }] : []));
+        this.tabs = input(...(ngDevMode ? [undefined, { debugName: "tabs" }] : []));
+        this.arrowScrollDistance = input(...(ngDevMode ? [undefined, { debugName: "arrowScrollDistance" }] : []));
+        this.orientation = input(...(ngDevMode ? [undefined, { debugName: "orientation" }] : []));
+        this.behavior = input(...(ngDevMode ? [undefined, { debugName: "behavior" }] : []));
+        this.initialSelectedMode = input(...(ngDevMode ? [undefined, { debugName: "initialSelectedMode" }] : []));
+        this.initialSelectedIndex = input(...(ngDevMode ? [undefined, { debugName: "initialSelectedIndex" }] : []));
+        this.className = input(...(ngDevMode ? [undefined, { debugName: "className" }] : []));
+        this.alignment = input(...(ngDevMode ? [undefined, { debugName: "alignment" }] : []));
+        this.width = input(...(ngDevMode ? [undefined, { debugName: "width" }] : []));
         this.indexChange = output();
         this.tabSelect = output();
-        this._ref = viewChild("_ref");
-        this._id = signal("tabs-" + uuid());
-        this._name = signal("");
-        this.initialized = signal(false);
-        this.showScrollLeft = signal(false);
-        this.showScrollRight = signal(false);
-        this.scrollContainer = signal(null);
-        this._resizeObserver = signal(undefined);
+        this._ref = viewChild("_ref", ...(ngDevMode ? [{ debugName: "_ref" }] : []));
+        this._id = signal("tabs-" + uuid(), ...(ngDevMode ? [{ debugName: "_id" }] : []));
+        this._name = signal("", ...(ngDevMode ? [{ debugName: "_name" }] : []));
+        this.initialized = signal(false, ...(ngDevMode ? [{ debugName: "initialized" }] : []));
+        this.showScrollLeft = signal(false, ...(ngDevMode ? [{ debugName: "showScrollLeft" }] : []));
+        this.showScrollRight = signal(false, ...(ngDevMode ? [{ debugName: "showScrollRight" }] : []));
+        this.scrollContainer = signal(null, ...(ngDevMode ? [{ debugName: "scrollContainer" }] : []));
+        this._resizeObserver = signal(undefined, ...(ngDevMode ? [{ debugName: "_resizeObserver" }] : []));
         if (typeof window !== "undefined") {
             effect(() => {
                 // --- Mitosis: Workaround to make sure the effect() is triggered ---
@@ -7363,8 +7518,8 @@ class DBTabs {
         this._resizeObserver()?.disconnect();
         this._resizeObserver.set(undefined);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: DBTabs, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: DBTabs, isStandalone: true, selector: "db-tabs", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, tabs: { classPropertyName: "tabs", publicName: "tabs", isSignal: true, isRequired: false, transformFunction: null }, arrowScrollDistance: { classPropertyName: "arrowScrollDistance", publicName: "arrowScrollDistance", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, behavior: { classPropertyName: "behavior", publicName: "behavior", isSignal: true, isRequired: false, transformFunction: null }, initialSelectedMode: { classPropertyName: "initialSelectedMode", publicName: "initialSelectedMode", isSignal: true, isRequired: false, transformFunction: null }, initialSelectedIndex: { classPropertyName: "initialSelectedIndex", publicName: "initialSelectedIndex", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, alignment: { classPropertyName: "alignment", publicName: "alignment", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { indexChange: "indexChange", tabSelect: "tabSelect" }, viewQueries: [{ propertyName: "_ref", first: true, predicate: ["_ref"], descendants: true, isSignal: true }], ngImport: i0, template: `<div
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: DBTabs, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.2", type: DBTabs, isStandalone: true, selector: "db-tabs", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, tabs: { classPropertyName: "tabs", publicName: "tabs", isSignal: true, isRequired: false, transformFunction: null }, arrowScrollDistance: { classPropertyName: "arrowScrollDistance", publicName: "arrowScrollDistance", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, behavior: { classPropertyName: "behavior", publicName: "behavior", isSignal: true, isRequired: false, transformFunction: null }, initialSelectedMode: { classPropertyName: "initialSelectedMode", publicName: "initialSelectedMode", isSignal: true, isRequired: false, transformFunction: null }, initialSelectedIndex: { classPropertyName: "initialSelectedIndex", publicName: "initialSelectedIndex", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, alignment: { classPropertyName: "alignment", publicName: "alignment", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { indexChange: "indexChange", tabSelect: "tabSelect" }, viewQueries: [{ propertyName: "_ref", first: true, predicate: ["_ref"], descendants: true, isSignal: true }], ngImport: i0, template: `<div
     #_ref
     [attr.id]="_id()"
     [class]="cls('db-tabs', className())"
@@ -7418,7 +7573,7 @@ class DBTabs {
     <ng-content></ng-content>
   </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"] }, { kind: "component", type: DBTabList, selector: "db-tab-list", inputs: ["id", "className"] }, { kind: "component", type: DBTabItem, selector: "db-tab-item", inputs: ["active", "name", "className", "id", "iconLeading", "icon", "iconTrailing", "showIconLeading", "showIcon", "showIconTrailing", "noText", "disabled", "checked", "label"], outputs: ["disabledChange", "checkedChange", "change"] }, { kind: "component", type: DBTabPanel, selector: "db-tab-panel", inputs: ["className", "id", "content"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: DBTabs, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: DBTabs, decorators: [{
             type: Component,
             args: [{ selector: "db-tabs", standalone: true, imports: [CommonModule, DBButton, DBTabList, DBTabItem, DBTabPanel], template: `<div
     #_ref
@@ -7549,52 +7704,52 @@ class DBTextarea {
         this.DEFAULT_ROWS = DEFAULT_ROWS;
         this.stringPropVisible = stringPropVisible;
         this.DEFAULT_VALID_MESSAGE = DEFAULT_VALID_MESSAGE;
-        this.id = input();
-        this.invalidMessage = input();
-        this.message = input();
-        this.showMessage = input();
-        this.value = model();
-        this.validMessage = input();
-        this.validation = input();
-        this.required = input();
-        this.minLength = input();
-        this.maxLength = input();
-        this.className = input();
-        this.variant = input();
-        this.showRequiredAsterisk = input();
-        this.showLabel = input();
-        this.label = input();
-        this.fieldSizing = input();
-        this.resize = input();
-        this.showResizer = input();
-        this.disabled = model();
-        this.readOnly = input();
-        this.readonly = input();
-        this.form = input();
-        this.maxlength = input();
-        this.minlength = input();
-        this.name = input();
-        this.wrap = input();
-        this.spellCheck = input();
-        this.autocomplete = input();
-        this.ariaDescribedBy = input();
-        this.placeholder = input();
-        this.rows = input();
-        this.cols = input();
-        this.messageIcon = input();
+        this.id = input(...(ngDevMode ? [undefined, { debugName: "id" }] : []));
+        this.invalidMessage = input(...(ngDevMode ? [undefined, { debugName: "invalidMessage" }] : []));
+        this.message = input(...(ngDevMode ? [undefined, { debugName: "message" }] : []));
+        this.showMessage = input(...(ngDevMode ? [undefined, { debugName: "showMessage" }] : []));
+        this.value = model(...(ngDevMode ? [undefined, { debugName: "value" }] : []));
+        this.validMessage = input(...(ngDevMode ? [undefined, { debugName: "validMessage" }] : []));
+        this.validation = input(...(ngDevMode ? [undefined, { debugName: "validation" }] : []));
+        this.required = input(...(ngDevMode ? [undefined, { debugName: "required" }] : []));
+        this.minLength = input(...(ngDevMode ? [undefined, { debugName: "minLength" }] : []));
+        this.maxLength = input(...(ngDevMode ? [undefined, { debugName: "maxLength" }] : []));
+        this.className = input(...(ngDevMode ? [undefined, { debugName: "className" }] : []));
+        this.variant = input(...(ngDevMode ? [undefined, { debugName: "variant" }] : []));
+        this.showRequiredAsterisk = input(...(ngDevMode ? [undefined, { debugName: "showRequiredAsterisk" }] : []));
+        this.showLabel = input(...(ngDevMode ? [undefined, { debugName: "showLabel" }] : []));
+        this.label = input(...(ngDevMode ? [undefined, { debugName: "label" }] : []));
+        this.fieldSizing = input(...(ngDevMode ? [undefined, { debugName: "fieldSizing" }] : []));
+        this.resize = input(...(ngDevMode ? [undefined, { debugName: "resize" }] : []));
+        this.showResizer = input(...(ngDevMode ? [undefined, { debugName: "showResizer" }] : []));
+        this.disabled = model(...(ngDevMode ? [undefined, { debugName: "disabled" }] : []));
+        this.readOnly = input(...(ngDevMode ? [undefined, { debugName: "readOnly" }] : []));
+        this.readonly = input(...(ngDevMode ? [undefined, { debugName: "readonly" }] : []));
+        this.form = input(...(ngDevMode ? [undefined, { debugName: "form" }] : []));
+        this.maxlength = input(...(ngDevMode ? [undefined, { debugName: "maxlength" }] : []));
+        this.minlength = input(...(ngDevMode ? [undefined, { debugName: "minlength" }] : []));
+        this.name = input(...(ngDevMode ? [undefined, { debugName: "name" }] : []));
+        this.wrap = input(...(ngDevMode ? [undefined, { debugName: "wrap" }] : []));
+        this.spellCheck = input(...(ngDevMode ? [undefined, { debugName: "spellCheck" }] : []));
+        this.autocomplete = input(...(ngDevMode ? [undefined, { debugName: "autocomplete" }] : []));
+        this.ariaDescribedBy = input(...(ngDevMode ? [undefined, { debugName: "ariaDescribedBy" }] : []));
+        this.placeholder = input(...(ngDevMode ? [undefined, { debugName: "placeholder" }] : []));
+        this.rows = input(...(ngDevMode ? [undefined, { debugName: "rows" }] : []));
+        this.cols = input(...(ngDevMode ? [undefined, { debugName: "cols" }] : []));
+        this.messageIcon = input(...(ngDevMode ? [undefined, { debugName: "messageIcon" }] : []));
         this.input = output();
         this.change = output();
         this.blur = output();
         this.focus = output();
-        this._ref = viewChild("_ref");
-        this._id = signal(undefined);
-        this._messageId = signal(undefined);
-        this._validMessageId = signal(undefined);
-        this._invalidMessageId = signal(undefined);
-        this._invalidMessage = signal(undefined);
-        this._descByIds = signal(undefined);
-        this._value = signal("");
-        this._voiceOverFallback = signal("");
+        this._ref = viewChild("_ref", ...(ngDevMode ? [{ debugName: "_ref" }] : []));
+        this._id = signal(undefined, ...(ngDevMode ? [{ debugName: "_id" }] : []));
+        this._messageId = signal(undefined, ...(ngDevMode ? [{ debugName: "_messageId" }] : []));
+        this._validMessageId = signal(undefined, ...(ngDevMode ? [{ debugName: "_validMessageId" }] : []));
+        this._invalidMessageId = signal(undefined, ...(ngDevMode ? [{ debugName: "_invalidMessageId" }] : []));
+        this._invalidMessage = signal(undefined, ...(ngDevMode ? [{ debugName: "_invalidMessage" }] : []));
+        this._descByIds = signal(undefined, ...(ngDevMode ? [{ debugName: "_descByIds" }] : []));
+        this._value = signal("", ...(ngDevMode ? [{ debugName: "_value" }] : []));
+        this._voiceOverFallback = signal("", ...(ngDevMode ? [{ debugName: "_voiceOverFallback" }] : []));
         if (typeof window !== "undefined") {
             effect(() => {
                 // --- Mitosis: Workaround to make sure the effect() is triggered ---
@@ -7693,8 +7848,8 @@ class DBTextarea {
             this._invalidMessage.set(this.invalidMessage() || DEFAULT_INVALID_MESSAGE);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: DBTextarea, deps: [{ token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: DBTextarea, isStandalone: true, selector: "db-textarea", 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 }, 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 }, minLength: { classPropertyName: "minLength", publicName: "minLength", isSignal: true, isRequired: false, transformFunction: null }, maxLength: { classPropertyName: "maxLength", publicName: "maxLength", 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 }, showRequiredAsterisk: { classPropertyName: "showRequiredAsterisk", publicName: "showRequiredAsterisk", isSignal: true, isRequired: false, transformFunction: null }, showLabel: { classPropertyName: "showLabel", publicName: "showLabel", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, fieldSizing: { classPropertyName: "fieldSizing", publicName: "fieldSizing", isSignal: true, isRequired: false, transformFunction: null }, resize: { classPropertyName: "resize", publicName: "resize", isSignal: true, isRequired: false, transformFunction: null }, showResizer: { classPropertyName: "showResizer", publicName: "showResizer", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readOnly: { classPropertyName: "readOnly", publicName: "readOnly", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, form: { classPropertyName: "form", publicName: "form", isSignal: true, isRequired: false, transformFunction: null }, maxlength: { classPropertyName: "maxlength", publicName: "maxlength", isSignal: true, isRequired: false, transformFunction: null }, minlength: { classPropertyName: "minlength", publicName: "minlength", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, wrap: { classPropertyName: "wrap", publicName: "wrap", isSignal: true, isRequired: false, transformFunction: null }, spellCheck: { classPropertyName: "spellCheck", publicName: "spellCheck", isSignal: true, isRequired: false, transformFunction: null }, autocomplete: { classPropertyName: "autocomplete", publicName: "autocomplete", isSignal: true, isRequired: false, transformFunction: null }, ariaDescribedBy: { classPropertyName: "ariaDescribedBy", publicName: "ariaDescribedBy", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: false, transformFunction: null }, cols: { classPropertyName: "cols", publicName: "cols", isSignal: true, isRequired: false, transformFunction: null }, messageIcon: { classPropertyName: "messageIcon", publicName: "messageIcon", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", disabled: "disabledChange", input: "input", change: "change", blur: "blur", focus: "focus" }, providers: [{
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: DBTextarea, deps: [{ token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.2", type: DBTextarea, isStandalone: true, selector: "db-textarea", 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 }, 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 }, minLength: { classPropertyName: "minLength", publicName: "minLength", isSignal: true, isRequired: false, transformFunction: null }, maxLength: { classPropertyName: "maxLength", publicName: "maxLength", 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 }, showRequiredAsterisk: { classPropertyName: "showRequiredAsterisk", publicName: "showRequiredAsterisk", isSignal: true, isRequired: false, transformFunction: null }, showLabel: { classPropertyName: "showLabel", publicName: "showLabel", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, fieldSizing: { classPropertyName: "fieldSizing", publicName: "fieldSizing", isSignal: true, isRequired: false, transformFunction: null }, resize: { classPropertyName: "resize", publicName: "resize", isSignal: true, isRequired: false, transformFunction: null }, showResizer: { classPropertyName: "showResizer", publicName: "showResizer", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readOnly: { classPropertyName: "readOnly", publicName: "readOnly", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, form: { classPropertyName: "form", publicName: "form", isSignal: true, isRequired: false, transformFunction: null }, maxlength: { classPropertyName: "maxlength", publicName: "maxlength", isSignal: true, isRequired: false, transformFunction: null }, minlength: { classPropertyName: "minlength", publicName: "minlength", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, wrap: { classPropertyName: "wrap", publicName: "wrap", isSignal: true, isRequired: false, transformFunction: null }, spellCheck: { classPropertyName: "spellCheck", publicName: "spellCheck", isSignal: true, isRequired: false, transformFunction: null }, autocomplete: { classPropertyName: "autocomplete", publicName: "autocomplete", isSignal: true, isRequired: false, transformFunction: null }, ariaDescribedBy: { classPropertyName: "ariaDescribedBy", publicName: "ariaDescribedBy", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: false, transformFunction: null }, cols: { classPropertyName: "cols", publicName: "cols", isSignal: true, isRequired: false, transformFunction: null }, messageIcon: { classPropertyName: "messageIcon", publicName: "messageIcon", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", disabled: "disabledChange", input: "input", change: "change", blur: "blur", focus: "focus" }, providers: [{
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: DBTextarea,
                 multi: true
@@ -7761,7 +7916,7 @@ class DBTextarea {
     >
   </div> `, isInline: true, styles: [":host{display:contents}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: DBInfotext, selector: "db-infotext", inputs: ["id", "className", "icon", "semantic", "size", "showIcon", "text"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: DBTextarea, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: DBTextarea, decorators: [{
             type: Component,
             args: [{ providers: [{
                             provide: NG_VALUE_ACCESSOR,
@@ -7854,6 +8009,7 @@ const EmphasisList = ['weak', 'strong'];
 const ValidationList = ['invalid', 'valid', 'no-validation'];
 const FieldSizingList = ['fixed', 'content'];
 const LabelVariantList = ['above', 'floating'];
+const LabelVariantHorizontalList = ['leading', 'trailing'];
 const AutoCompleteList = ['off', 'on', 'name', 'honorific-prefix', 'given-name', 'additional-name', 'family-name', 'honorific-suffix', 'nickname', 'email', 'username', 'new-password', 'current-password', 'one-time-code', 'organization-title', 'organization', 'street-address', 'shipping', 'billing', 'address-line1', 'address-line2', 'address-line3', 'address-level4', 'address-level3', 'address-level2', 'address-level1', 'country', 'country-name', 'postal-code', 'cc-name', 'cc-given-name', 'cc-additional-name', 'cc-family-name', 'cc-number', 'cc-exp', 'cc-exp-month', 'cc-exp-year', 'cc-csc', 'cc-type', 'transaction-currency', 'transaction-amount', 'language', 'bday', 'bday-day', 'bday-month', 'bday-year', 'sex', 'tel', 'tel-country-code', 'tel-national', 'tel-area-code', 'tel-local', 'tel-extension', 'impp', 'url', 'photo', 'webauthn'];
 const LinkTargetList = ['_self', '_blank', '_parent', '_top'];
 const LinkReferrerPolicyList = ['no-referrer', 'no-referrer-when-downgrade', 'origin', 'origin-when-cross-origin', 'same-origin', 'strict-origin', 'strict-origin-when-cross-origin', 'unsafe-url'];
@@ -7863,5 +8019,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, 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, 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, handleDataOutside, handleFixedDropdown, handleFixedPopover, hasVoiceOver, isArrayOfStrings, isEventTargetNavigationItem, 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, DBHeader, DBIcon, DBInfotext, DBInput, DBLink, DBNavigation, DBNavigationItem, DBNotification, DBPage, DBPopover, DBRadio, DBSection, DBSelect, DBStack, DBSwitch, DBTabItem, DBTabList, DBTabPanel, DBTabs, DBTag, DBTextarea, DBTooltip, 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, handleDataOutside, handleFixedDropdown, handleFixedPopover, hasVoiceOver, isArrayOfStrings, isEventTargetNavigationItem, isIOSSafari, isKeyboardEvent, stringPropVisible, uuid };
 //# sourceMappingURL=db-ux-ngx-core-components.mjs.map