@db-ux/ngx-core-components 4.10.1 → 4.11.0

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

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { input, output, viewChild, signal, effect, Component, model, Directive, TemplateRef, ContentChild } from '@angular/core';
+import { input, output, viewChild, signal, effect, VERSION, Component, model, Directive, TemplateRef, ContentChild } from '@angular/core';
 import * as i1 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import { NG_VALUE_ACCESSOR } from '@angular/forms';
@@ -66,16 +66,21 @@ const isIOSSafari = () => {
 };
 const delay = (fn, ms) => new Promise(() => setTimeout(fn, ms));
 /**
- * Some frameworks like stencil would not add "true" as value for a prop
- * if it is used in a framework like angular e.g.: [disabled]="myDisabledProp"
- * @param originBool Some boolean to convert to string
+ * Converts boolean-like inputs to "true" or "false" strings.
+ * Handles HTML-style boolean attributes where an empty string or the
+ * attribute's own name as value (e.g. noText="noText") should be treated as true.
+ * Some frameworks like Stencil do not add "true" as value for a prop
+ * if it is used in a framework like Angular e.g.: [disabled]="myDisabledProp"
+ * @param originBool Boolean or string value to convert
+ * @param propertyName The prop/attribute name — when originBool is a string equal
+ *   to this name (case-insensitive), it is treated as true
  */
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
-const getBooleanAsString = (originBool) => {
+const getBooleanAsString = (originBool, propertyName) => {
     if (originBool === undefined || originBool === null)
         return;
     if (typeof originBool === 'string') {
-        return String(originBool === 'true');
+        return String(originBool === '' || originBool === 'true' || propertyName?.toLowerCase() === originBool.toLowerCase());
     }
     return String(originBool);
 };
@@ -83,7 +88,7 @@ const getBoolean = (originBool, propertyName) => {
     if (originBool === undefined || originBool === null)
         return;
     if (typeof originBool === 'string') {
-        return Boolean(propertyName === originBool || originBool === 'true');
+        return Boolean(originBool === '' || originBool === 'true' || propertyName?.toLowerCase() === originBool.toLowerCase());
     }
     return Boolean(originBool);
 };
@@ -124,13 +129,13 @@ const getStep = (step) => {
 const getInputValue = (value, inputType) => {
     return inputType && ['number', 'range'].includes(inputType) ? getNumber(value) : value;
 };
-const toBool = (value) => typeof value === 'string' ? value === 'true' : value;
+const toBool = (value) => typeof value === 'string' ? value !== 'false' : value;
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 const getHideProp = (show) => {
     if (show === undefined || show === null) {
         return undefined;
     }
-    return getBooleanAsString(!toBool(show));
+    return getBooleanAsString(!toBool(show), 'show');
 };
 const stringPropVisible = (givenString, showString) => {
     if (showString === undefined) {
@@ -170,7 +175,7 @@ const getNotificationRole = ({ semantic, role, ariaLive }) => {
     }
 };
 
-const defaultProps$A = {};
+const defaultProps$I = {};
 class DBAccordionItem {
     handleNameAttribute() {
         if (this._ref()?.nativeElement) {
@@ -219,9 +224,9 @@ class DBAccordionItem {
                 // ---
                 if (this._ref()?.nativeElement && this.initialized()) {
                 }
-            }, {
-            // Enable writing to signals inside effects
-            });
+            }, Number(VERSION.major) < 19
+                ? { allowSignalWrites: true }
+                : undefined);
             effect(() => {
                 // --- Mitosis: Workaround to make sure the effect() is triggered ---
                 this.name();
@@ -229,9 +234,9 @@ class DBAccordionItem {
                 if (this.name()) {
                     this._name.set(this.name());
                 }
-            }, {
-            // Enable writing to signals inside effects
-            });
+            }, Number(VERSION.major) < 19
+                ? { allowSignalWrites: true }
+                : undefined);
             effect(() => {
                 // --- Mitosis: Workaround to make sure the effect() is triggered ---
                 this.open();
@@ -240,9 +245,9 @@ class DBAccordionItem {
                 if (nextOpen !== undefined) {
                     this._open.set(nextOpen);
                 }
-            }, {
-            // Enable writing to signals inside effects
-            });
+            }, Number(VERSION.major) < 19
+                ? { allowSignalWrites: true }
+                : undefined);
         }
     }
     /**
@@ -282,22 +287,22 @@ class DBAccordionItem {
         }
     }
     ngAfterViewInit() {
+        const element = this._ref()?.nativeElement;
+        this.enableAttributePassing(element, "db-accordion-item");
         if (typeof window !== "undefined") {
-            const element = this._ref()?.nativeElement;
-            this.enableAttributePassing(element, "db-accordion-item");
             if (this.defaultOpen()) {
                 this._open.set(this.defaultOpen());
             }
             this.initialized.set(true);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: DBAccordionItem, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: DBAccordionItem, isStandalone: true, selector: "db-accordion-item", inputs: { defaultOpen: { classPropertyName: "defaultOpen", publicName: "defaultOpen", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, propOverrides: { classPropertyName: "propOverrides", publicName: "propOverrides", 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: "21.2.16", ngImport: i0, type: DBAccordionItem, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.16", type: DBAccordionItem, isStandalone: true, selector: "db-accordion-item", inputs: { defaultOpen: { classPropertyName: "defaultOpen", publicName: "defaultOpen", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, propOverrides: { classPropertyName: "propOverrides", publicName: "propOverrides", 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() ?? propOverrides()?.id"
     [class]="cls('db-accordion-item', className())"
   >
     <details
-      [attr.aria-disabled]="getBooleanAsString(disabled())"
+      [attr.aria-disabled]="getBooleanAsString(disabled(), 'disabled')"
       #_ref
       [attr.name]="_name()"
       [open]="_open()"
@@ -311,14 +316,14 @@ class DBAccordionItem {
     </details>
   </li> `, isInline: true, styles: [":host{display:contents}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: DBAccordionItem, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: DBAccordionItem, decorators: [{
             type: Component,
             args: [{ selector: "db-accordion-item", standalone: true, imports: [CommonModule], template: `<li
     [attr.id]="id() ?? propOverrides()?.id"
     [class]="cls('db-accordion-item', className())"
   >
     <details
-      [attr.aria-disabled]="getBooleanAsString(disabled())"
+      [attr.aria-disabled]="getBooleanAsString(disabled(), 'disabled')"
       #_ref
       [attr.name]="_name()"
       [open]="_open()"
@@ -333,7 +338,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
   </li> `, styles: [":host{display:contents}\n"] }]
         }], ctorParameters: () => [], propDecorators: { defaultOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultOpen", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], propOverrides: [{ type: i0.Input, args: [{ isSignal: true, alias: "propOverrides", required: false }] }], className: [{ type: i0.Input, args: [{ isSignal: true, alias: "className", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], headlinePlain: [{ type: i0.Input, args: [{ isSignal: true, alias: "headlinePlain", required: false }] }], text: [{ type: i0.Input, args: [{ isSignal: true, alias: "text", required: false }] }], toggle: [{ type: i0.Output, args: ["toggle"] }], _ref: [{ type: i0.ViewChild, args: ["_ref", { isSignal: true }] }] } });
 
-const defaultProps$z = {};
+const defaultProps$H = {};
 class DBAccordion {
     convertItems() {
         try {
@@ -388,9 +393,9 @@ class DBAccordion {
                         this._name.set("");
                     }
                 }
-            }, {
-            // Enable writing to signals inside effects
-            });
+            }, Number(VERSION.major) < 19
+                ? { allowSignalWrites: true }
+                : undefined);
             effect(() => {
                 // --- Mitosis: Workaround to make sure the effect() is triggered ---
                 this._ref();
@@ -409,9 +414,9 @@ class DBAccordion {
                         }
                     }
                 }
-            }, {
-            // Enable writing to signals inside effects
-            });
+            }, Number(VERSION.major) < 19
+                ? { allowSignalWrites: true }
+                : undefined);
             effect(() => {
                 // --- Mitosis: Workaround to make sure the effect() is triggered ---
                 this._ref();
@@ -435,9 +440,9 @@ class DBAccordion {
                     }
                     this._initOpenIndexDone.set(false);
                 }
-            }, {
-            // Enable writing to signals inside effects
-            });
+            }, Number(VERSION.major) < 19
+                ? { allowSignalWrites: true }
+                : undefined);
         }
     }
     /**
@@ -477,15 +482,15 @@ class DBAccordion {
         }
     }
     ngAfterViewInit() {
+        const element = this._ref()?.nativeElement;
+        this.enableAttributePassing(element, "db-accordion");
         if (typeof window !== "undefined") {
-            const element = this._ref()?.nativeElement;
-            this.enableAttributePassing(element, "db-accordion");
             this.initialized.set(true);
             this._initOpenIndexDone.set(true);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: DBAccordion, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: DBAccordion, isStandalone: true, selector: "db-accordion", inputs: { 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 }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, propOverrides: { classPropertyName: "propOverrides", publicName: "propOverrides", 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: "21.2.16", ngImport: i0, type: DBAccordion, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.16", type: DBAccordion, isStandalone: true, selector: "db-accordion", inputs: { 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 }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, propOverrides: { classPropertyName: "propOverrides", publicName: "propOverrides", 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() ?? propOverrides()?.id"
     [class]="cls('db-accordion', className())"
@@ -503,7 +508,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: ["defaultOpen", "name", "open", "id", "propOverrides", "className", "disabled", "headlinePlain", "text"], outputs: ["toggle"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: DBAccordion, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: DBAccordion, decorators: [{
             type: Component,
             args: [{ selector: "db-accordion", standalone: true, imports: [CommonModule, DBAccordionItem], template: `<ul
     #_ref
@@ -628,7 +633,7 @@ const TESTING_VIEWPORTS = [{
 const DB_UX_LOCAL_STORAGE_FRAMEWORK = 'db-ux-framework';
 const DB_UX_LOCAL_STORAGE_MODE = 'db-ux-mode';
 
-const defaultProps$y = {};
+const defaultProps$G = {};
 class DBBadge {
     constructor() {
         this.cls = cls;
@@ -664,9 +669,9 @@ class DBBadge {
                         }
                     }
                 }
-            }, {
-            // Enable writing to signals inside effects
-            });
+            }, Number(VERSION.major) < 19
+                ? { allowSignalWrites: true }
+                : undefined);
         }
     }
     /**
@@ -706,14 +711,14 @@ class DBBadge {
         }
     }
     ngAfterViewInit() {
+        const element = this._ref()?.nativeElement;
+        this.enableAttributePassing(element, "db-badge");
         if (typeof window !== "undefined") {
-            const element = this._ref()?.nativeElement;
-            this.enableAttributePassing(element, "db-badge");
             this.initialized.set(true);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: DBBadge, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", 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 }, propOverrides: { classPropertyName: "propOverrides", publicName: "propOverrides", 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 }, wrap: { classPropertyName: "wrap", publicName: "wrap", 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: "21.2.16", ngImport: i0, type: DBBadge, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.16", 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 }, propOverrides: { classPropertyName: "propOverrides", publicName: "propOverrides", 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 }, wrap: { classPropertyName: "wrap", publicName: "wrap", 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() ?? propOverrides()?.id"
     [class]="cls('db-badge', className())"
@@ -721,12 +726,12 @@ class DBBadge {
     [attr.data-size]="size()"
     [attr.data-emphasis]="emphasis()"
     [attr.data-placement]="placement()"
-    [attr.data-wrap]="getBooleanAsString(wrap())"
+    [attr.data-wrap]="getBooleanAsString(wrap(), 'wrap')"
     [attr.data-label]="placement()?.startsWith('corner') && (label() ?? DEFAULT_LABEL)"
     >@if(text()){{{text()}}} <ng-content></ng-content
   ></span> `, isInline: true, styles: [":host{display:contents}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: DBBadge, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: DBBadge, decorators: [{
             type: Component,
             args: [{ selector: "db-badge", standalone: true, imports: [CommonModule], template: `<span
     #_ref
@@ -736,7 +741,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
     [attr.data-size]="size()"
     [attr.data-emphasis]="emphasis()"
     [attr.data-placement]="placement()"
-    [attr.data-wrap]="getBooleanAsString(wrap())"
+    [attr.data-wrap]="getBooleanAsString(wrap(), 'wrap')"
     [attr.data-label]="placement()?.startsWith('corner') && (label() ?? DEFAULT_LABEL)"
     >@if(text()){{{text()}}} <ng-content></ng-content
   ></span> `, styles: [":host{display:contents}\n"] }]
@@ -744,7 +749,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
 
 const BadgePlacementList = ['inline', 'corner-top-left', 'corner-top-right', 'corner-center-left', 'corner-center-right', 'corner-bottom-left', 'corner-bottom-right'];
 
-const defaultProps$x = {};
+const defaultProps$F = {};
 class DBBrand {
     constructor() {
         this.DEFAULT_ICON = DEFAULT_ICON;
@@ -796,28 +801,26 @@ class DBBrand {
         }
     }
     ngAfterViewInit() {
-        if (typeof window !== "undefined") {
-            const element = this._ref()?.nativeElement;
-            this.enableAttributePassing(element, "db-brand");
-        }
+        const element = this._ref()?.nativeElement;
+        this.enableAttributePassing(element, "db-brand");
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: DBBrand, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", 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 }, propOverrides: { classPropertyName: "propOverrides", publicName: "propOverrides", 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: "21.2.16", ngImport: i0, type: DBBrand, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.16", 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 }, propOverrides: { classPropertyName: "propOverrides", publicName: "propOverrides", 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())"
+    [attr.data-show-icon]="getBooleanAsString(showIcon(), 'showIcon')"
     [attr.id]="id() ?? propOverrides()?.id"
     [class]="cls('db-brand', className())"
   >
     <ng-content></ng-content> @if(text()){{{text()}}}
   </div> `, isInline: true, styles: [":host{display:contents}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: DBBrand, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: DBBrand, decorators: [{
             type: Component,
             args: [{ selector: "db-brand", standalone: true, imports: [CommonModule], template: `<div
     #_ref
     [attr.data-icon]="hideLogo() ? 'none' : icon() ?? DEFAULT_ICON"
-    [attr.data-show-icon]="getBooleanAsString(showIcon())"
+    [attr.data-show-icon]="getBooleanAsString(showIcon(), 'showIcon')"
     [attr.id]="id() ?? propOverrides()?.id"
     [class]="cls('db-brand', className())"
   >
@@ -825,7 +828,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
   </div> `, styles: [":host{display:contents}\n"] }]
         }], ctorParameters: () => [], propDecorators: { hideLogo: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideLogo", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], showIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "showIcon", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], propOverrides: [{ type: i0.Input, args: [{ isSignal: true, alias: "propOverrides", required: false }] }], className: [{ type: i0.Input, args: [{ isSignal: true, alias: "className", required: false }] }], text: [{ type: i0.Input, args: [{ isSignal: true, alias: "text", required: false }] }], _ref: [{ type: i0.ViewChild, args: ["_ref", { isSignal: true }] }] } });
 
-const defaultProps$w = {};
+const defaultProps$E = {};
 class DBButton {
     getButtonType() {
         if (this.type()) {
@@ -900,27 +903,25 @@ class DBButton {
         }
     }
     ngAfterViewInit() {
-        if (typeof window !== "undefined") {
-            const element = this._ref()?.nativeElement;
-            this.enableAttributePassing(element, "db-button");
-        }
+        const element = this._ref()?.nativeElement;
+        this.enableAttributePassing(element, "db-button");
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: DBButton, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", 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 }, propOverrides: { classPropertyName: "propOverrides", publicName: "propOverrides", 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 }, wrap: { classPropertyName: "wrap", publicName: "wrap", 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: "21.2.16", ngImport: i0, type: DBButton, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.16", 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 }, propOverrides: { classPropertyName: "propOverrides", publicName: "propOverrides", 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 }, wrap: { classPropertyName: "wrap", publicName: "wrap", 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() ?? propOverrides()?.id"
     [class]="cls('db-button', className())"
     [attr.type]="getButtonType()"
     [disabled]="getBoolean(disabled(), 'disabled')"
     [attr.data-icon]="iconLeading() ?? icon()"
-    [attr.data-show-icon]="getBooleanAsString(showIconLeading() ?? showIcon())"
+    [attr.data-show-icon]="getBooleanAsString(showIconLeading(), 'showIconLeading') || getBooleanAsString(showIcon(), 'showIcon')"
     [attr.data-icon-trailing]="iconTrailing()"
-    [attr.data-show-icon-trailing]="getBooleanAsString(showIconTrailing())"
+    [attr.data-show-icon-trailing]="getBooleanAsString(showIconTrailing(), 'showIconTrailing')"
     [attr.data-size]="size()"
     [attr.data-width]="width()"
     [attr.data-variant]="variant()"
-    [attr.data-wrap]="getBooleanAsString(wrap())"
-    [attr.data-no-text]="getBooleanAsString(noText())"
+    [attr.data-wrap]="getBooleanAsString(wrap(), 'wrap')"
+    [attr.data-no-text]="getBooleanAsString(noText(), 'noText')"
     [attr.name]="name()"
     [attr.form]="form()"
     [attr.value]="value()"
@@ -928,7 +929,7 @@ class DBButton {
     @if(text()){{{text()}}} <ng-content></ng-content>
   </button> `, isInline: true, styles: [":host{display:contents}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: DBButton, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: DBButton, decorators: [{
             type: Component,
             args: [{ selector: "db-button", standalone: true, imports: [CommonModule], template: `<button
     #_ref
@@ -937,14 +938,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
     [attr.type]="getButtonType()"
     [disabled]="getBoolean(disabled(), 'disabled')"
     [attr.data-icon]="iconLeading() ?? icon()"
-    [attr.data-show-icon]="getBooleanAsString(showIconLeading() ?? showIcon())"
+    [attr.data-show-icon]="getBooleanAsString(showIconLeading(), 'showIconLeading') || getBooleanAsString(showIcon(), 'showIcon')"
     [attr.data-icon-trailing]="iconTrailing()"
-    [attr.data-show-icon-trailing]="getBooleanAsString(showIconTrailing())"
+    [attr.data-show-icon-trailing]="getBooleanAsString(showIconTrailing(), 'showIconTrailing')"
     [attr.data-size]="size()"
     [attr.data-width]="width()"
     [attr.data-variant]="variant()"
-    [attr.data-wrap]="getBooleanAsString(wrap())"
-    [attr.data-no-text]="getBooleanAsString(noText())"
+    [attr.data-wrap]="getBooleanAsString(wrap(), 'wrap')"
+    [attr.data-no-text]="getBooleanAsString(noText(), 'noText')"
     [attr.name]="name()"
     [attr.form]="form()"
     [attr.value]="value()"
@@ -956,7 +957,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
 const ButtonVariantList = ['outlined', 'brand', 'filled', 'ghost'];
 const ButtonTypeList = ['button', 'reset', 'submit'];
 
-const defaultProps$v = {};
+const defaultProps$D = {};
 class DBCard {
     handleClick(event) {
         if (this.click) {
@@ -1011,13 +1012,11 @@ class DBCard {
         }
     }
     ngAfterViewInit() {
-        if (typeof window !== "undefined") {
-            const element = this._ref()?.nativeElement;
-            this.enableAttributePassing(element, "db-card");
-        }
+        const element = this._ref()?.nativeElement;
+        this.enableAttributePassing(element, "db-card");
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: DBCard, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.14", type: DBCard, isStandalone: true, selector: "db-card", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, propOverrides: { classPropertyName: "propOverrides", publicName: "propOverrides", 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: "21.2.16", ngImport: i0, type: DBCard, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.16", type: DBCard, isStandalone: true, selector: "db-card", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, propOverrides: { classPropertyName: "propOverrides", publicName: "propOverrides", 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() ?? propOverrides()?.id"
     [class]="cls('db-card', className())"
@@ -1029,7 +1028,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: "21.2.14", ngImport: i0, type: DBCard, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: DBCard, decorators: [{
             type: Component,
             args: [{ selector: "db-card", standalone: true, imports: [CommonModule], template: `<div
     #_ref
@@ -1119,7 +1118,7 @@ const addValueResetEventListener = (element, props, resetFunction, signal) => {
     }, signal);
 };
 
-const defaultProps$u = {};
+const defaultProps$C = {};
 class DBInfotext {
     constructor() {
         this.cls = cls;
@@ -1172,25 +1171,23 @@ class DBInfotext {
         }
     }
     ngAfterViewInit() {
-        if (typeof window !== "undefined") {
-            const element = this._ref()?.nativeElement;
-            this.enableAttributePassing(element, "db-infotext");
-        }
+        const element = this._ref()?.nativeElement;
+        this.enableAttributePassing(element, "db-infotext");
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: DBInfotext, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: DBInfotext, isStandalone: true, selector: "db-infotext", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, propOverrides: { classPropertyName: "propOverrides", publicName: "propOverrides", 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 }, wrap: { classPropertyName: "wrap", publicName: "wrap", 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: "21.2.16", ngImport: i0, type: DBInfotext, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.16", type: DBInfotext, isStandalone: true, selector: "db-infotext", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, propOverrides: { classPropertyName: "propOverrides", publicName: "propOverrides", 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 }, wrap: { classPropertyName: "wrap", publicName: "wrap", 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() ?? propOverrides()?.id"
     [class]="cls('db-infotext', className())"
     [attr.data-icon]="icon()"
     [attr.data-semantic]="semantic()"
     [attr.data-size]="size()"
-    [attr.data-wrap]="getBooleanAsString(wrap())"
-    [attr.data-show-icon-leading]="getBooleanAsString(showIcon() ?? true)"
+    [attr.data-wrap]="getBooleanAsString(wrap(), 'wrap')"
+    [attr.data-show-icon-leading]="getBooleanAsString(showIcon() ?? true, 'showIcon')"
     >@if(text()){{{text()}}} <ng-content></ng-content
   ></span> `, isInline: true, styles: [":host{display:contents}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: DBInfotext, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: DBInfotext, decorators: [{
             type: Component,
             args: [{ selector: "db-infotext", standalone: true, imports: [CommonModule], template: `<span
     #_ref
@@ -1199,13 +1196,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
     [attr.data-icon]="icon()"
     [attr.data-semantic]="semantic()"
     [attr.data-size]="size()"
-    [attr.data-wrap]="getBooleanAsString(wrap())"
-    [attr.data-show-icon-leading]="getBooleanAsString(showIcon() ?? true)"
+    [attr.data-wrap]="getBooleanAsString(wrap(), 'wrap')"
+    [attr.data-show-icon-leading]="getBooleanAsString(showIcon() ?? true, 'showIcon')"
     >@if(text()){{{text()}}} <ng-content></ng-content
   ></span> `, styles: [":host{display:contents}\n"] }]
         }], ctorParameters: () => [], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], propOverrides: [{ type: i0.Input, args: [{ isSignal: true, alias: "propOverrides", required: false }] }], className: [{ type: i0.Input, args: [{ isSignal: true, alias: "className", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], semantic: [{ type: i0.Input, args: [{ isSignal: true, alias: "semantic", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], wrap: [{ type: i0.Input, args: [{ isSignal: true, alias: "wrap", required: false }] }], showIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "showIcon", required: false }] }], text: [{ type: i0.Input, args: [{ isSignal: true, alias: "text", required: false }] }], _ref: [{ type: i0.ViewChild, args: ["_ref", { isSignal: true }] }] } });
 
-const defaultProps$t = {};
+const defaultProps$B = {};
 class DBCheckbox {
     hasValidState() {
         return !!(this.validMessage() ?? this.validation() === "valid");
@@ -1314,9 +1311,9 @@ class DBCheckbox {
                 if (this.id() ?? this.propOverrides()?.id) {
                     this.resetIds();
                 }
-            }, {
-            // Enable writing to signals inside effects
-            });
+            }, Number(VERSION.major) < 19
+                ? { allowSignalWrites: true }
+                : undefined);
             effect(() => {
                 // --- Mitosis: Workaround to make sure the effect() is triggered ---
                 this._ref();
@@ -1325,9 +1322,9 @@ class DBCheckbox {
                 this._invalidMessage.set(this.invalidMessage() ||
                     this._ref()?.nativeElement?.validationMessage ||
                     DEFAULT_INVALID_MESSAGE);
-            }, {
-            // Enable writing to signals inside effects
-            });
+            }, Number(VERSION.major) < 19
+                ? { allowSignalWrites: true }
+                : undefined);
             effect(() => {
                 // --- Mitosis: Workaround to make sure the effect() is triggered ---
                 this._id();
@@ -1342,9 +1339,9 @@ class DBCheckbox {
                     }
                     this.handleValidation();
                 }
-            }, {
-            // Enable writing to signals inside effects
-            });
+            }, Number(VERSION.major) < 19
+                ? { allowSignalWrites: true }
+                : undefined);
             effect(() => {
                 // --- Mitosis: Workaround to make sure the effect() is triggered ---
                 this.initialized();
@@ -1358,9 +1355,9 @@ class DBCheckbox {
                         this._ref().nativeElement.indeterminate = !!getBoolean(this.indeterminate());
                     }
                 }
-            }, {
-            // Enable writing to signals inside effects
-            });
+            }, Number(VERSION.major) < 19
+                ? { allowSignalWrites: true }
+                : undefined);
             effect(() => {
                 // --- Mitosis: Workaround to make sure the effect() is triggered ---
                 this.initialized();
@@ -1374,9 +1371,9 @@ class DBCheckbox {
                     }
                     this.initialized.set(false);
                 }
-            }, {
-            // Enable writing to signals inside effects
-            });
+            }, Number(VERSION.major) < 19
+                ? { allowSignalWrites: true }
+                : undefined);
             effect(() => {
                 // --- Mitosis: Workaround to make sure the effect() is triggered ---
                 this._ref();
@@ -1395,9 +1392,9 @@ class DBCheckbox {
                         this.handleChange(event, true);
                     }, controller.signal);
                 }
-            }, {
-            // Enable writing to signals inside effects
-            });
+            }, Number(VERSION.major) < 19
+                ? { allowSignalWrites: true }
+                : undefined);
         }
     }
     /**
@@ -1452,9 +1449,9 @@ class DBCheckbox {
         this.disabled.set(disabled);
     }
     ngAfterViewInit() {
+        const element = this._ref()?.nativeElement;
+        this.enableAttributePassing(element, "db-checkbox");
         if (typeof window !== "undefined") {
-            const element = this._ref()?.nativeElement;
-            this.enableAttributePassing(element, "db-checkbox");
             this.initialized.set(true);
             this.resetIds();
             this._invalidMessage.set(this.invalidMessage() || DEFAULT_INVALID_MESSAGE);
@@ -1463,8 +1460,8 @@ class DBCheckbox {
     ngOnDestroy() {
         this.abortController()?.abort();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: DBCheckbox, deps: [{ token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: DBCheckbox, isStandalone: true, selector: "db-checkbox", inputs: { invalidMessage: { classPropertyName: "invalidMessage", publicName: "invalidMessage", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, propOverrides: { classPropertyName: "propOverrides", publicName: "propOverrides", 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: "21.2.16", ngImport: i0, type: DBCheckbox, deps: [{ token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.16", type: DBCheckbox, isStandalone: true, selector: "db-checkbox", inputs: { invalidMessage: { classPropertyName: "invalidMessage", publicName: "invalidMessage", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, propOverrides: { classPropertyName: "propOverrides", publicName: "propOverrides", 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
@@ -1520,7 +1517,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", "propOverrides", "className", "icon", "semantic", "size", "wrap", "showIcon", "text"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: DBCheckbox, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: DBCheckbox, decorators: [{
             type: Component,
             args: [{ providers: [{
                             provide: NG_VALUE_ACCESSOR,
@@ -1579,7 +1576,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
   </div> `, styles: [":host{display:contents}\n"] }]
         }], ctorParameters: () => [{ type: i0.Renderer2 }], propDecorators: { invalidMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalidMessage", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], propOverrides: [{ type: i0.Input, args: [{ isSignal: true, alias: "propOverrides", required: false }] }], message: [{ type: i0.Input, args: [{ isSignal: true, alias: "message", required: false }] }], showMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "showMessage", required: false }] }], indeterminate: [{ type: i0.Input, args: [{ isSignal: true, alias: "indeterminate", required: false }] }], checked: [{ type: i0.Input, args: [{ isSignal: true, alias: "checked", required: false }] }, { type: i0.Output, args: ["checkedChange"] }], validMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "validMessage", required: false }] }], validation: [{ type: i0.Input, args: [{ isSignal: true, alias: "validation", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], className: [{ type: i0.Input, args: [{ isSignal: true, alias: "className", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], showRequiredAsterisk: [{ type: i0.Input, args: [{ isSignal: true, alias: "showRequiredAsterisk", required: false }] }], showLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "showLabel", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }, { type: i0.Output, args: ["disabledChange"] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], ariaDescribedBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaDescribedBy", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], messageIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "messageIcon", required: false }] }], change: [{ type: i0.Output, args: ["change"] }], blur: [{ type: i0.Output, args: ["blur"] }], focus: [{ type: i0.Output, args: ["focus"] }], _ref: [{ type: i0.ViewChild, args: ["_ref", { isSignal: true }] }] } });
 
-const defaultProps$s = {};
+const defaultProps$A = {};
 class DBCustomButton {
     constructor() {
         this.cls = cls;
@@ -1636,42 +1633,40 @@ class DBCustomButton {
         }
     }
     ngAfterViewInit() {
-        if (typeof window !== "undefined") {
-            const element = this._ref()?.nativeElement;
-            this.enableAttributePassing(element, "db-custom-button");
-        }
+        const element = this._ref()?.nativeElement;
+        this.enableAttributePassing(element, "db-custom-button");
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: DBCustomButton, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.14", type: DBCustomButton, isStandalone: true, selector: "db-custom-button", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, propOverrides: { classPropertyName: "propOverrides", publicName: "propOverrides", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", 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 } }, 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: "21.2.16", ngImport: i0, type: DBCustomButton, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.16", type: DBCustomButton, isStandalone: true, selector: "db-custom-button", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, propOverrides: { classPropertyName: "propOverrides", publicName: "propOverrides", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", 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 } }, viewQueries: [{ propertyName: "_ref", first: true, predicate: ["_ref"], descendants: true, isSignal: true }], ngImport: i0, template: `<div
     #_ref
     [attr.id]="id() ?? propOverrides()?.id"
     [class]="cls('db-custom-button', className())"
     [attr.data-icon]="iconLeading() ?? icon()"
-    [attr.data-show-icon]="getBooleanAsString(showIconLeading() ?? showIcon())"
+    [attr.data-show-icon]="getBooleanAsString(showIconLeading(), 'showIconLeading') || getBooleanAsString(showIcon(), 'showIcon')"
     [attr.data-icon-trailing]="iconTrailing()"
-    [attr.data-show-icon-trailing]="getBooleanAsString(showIconTrailing())"
+    [attr.data-show-icon-trailing]="getBooleanAsString(showIconTrailing(), 'showIconTrailing')"
     [attr.data-size]="size()"
     [attr.data-width]="width()"
     [attr.data-variant]="variant()"
-    [attr.data-no-text]="getBooleanAsString(noText())"
+    [attr.data-no-text]="getBooleanAsString(noText(), 'noText')"
   >
     <ng-content></ng-content>
   </div> `, isInline: true, styles: [":host{display:contents}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: DBCustomButton, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: DBCustomButton, decorators: [{
             type: Component,
             args: [{ selector: "db-custom-button", standalone: true, imports: [CommonModule], template: `<div
     #_ref
     [attr.id]="id() ?? propOverrides()?.id"
     [class]="cls('db-custom-button', className())"
     [attr.data-icon]="iconLeading() ?? icon()"
-    [attr.data-show-icon]="getBooleanAsString(showIconLeading() ?? showIcon())"
+    [attr.data-show-icon]="getBooleanAsString(showIconLeading(), 'showIconLeading') || getBooleanAsString(showIcon(), 'showIcon')"
     [attr.data-icon-trailing]="iconTrailing()"
-    [attr.data-show-icon-trailing]="getBooleanAsString(showIconTrailing())"
+    [attr.data-show-icon-trailing]="getBooleanAsString(showIconTrailing(), 'showIconTrailing')"
     [attr.data-size]="size()"
     [attr.data-width]="width()"
     [attr.data-variant]="variant()"
-    [attr.data-no-text]="getBooleanAsString(noText())"
+    [attr.data-no-text]="getBooleanAsString(noText(), 'noText')"
   >
     <ng-content></ng-content>
   </div> `, styles: [":host{display:contents}\n"] }]
@@ -2105,14 +2100,14 @@ const handleFixedPopover = (element, parent, placement) => {
     element.dataset['correctedPlacement'] = correctedPlacement;
 };
 
-const defaultProps$r = { width: "fixed" };
+const defaultProps$z = { width: "fixed" };
 class DBCustomSelectDropdown {
     constructor() {
         this.cls = cls;
         this.id = input(...(ngDevMode ? [undefined, { debugName: "id" }] : /* istanbul ignore next */ []));
         this.propOverrides = input(...(ngDevMode ? [undefined, { debugName: "propOverrides" }] : /* istanbul ignore next */ []));
         this.className = input(...(ngDevMode ? [undefined, { debugName: "className" }] : /* istanbul ignore next */ []));
-        this.width = input(defaultProps$r["width"], ...(ngDevMode ? [{ debugName: "width" }] : /* istanbul ignore next */ []));
+        this.width = input(defaultProps$z["width"], ...(ngDevMode ? [{ debugName: "width" }] : /* istanbul ignore next */ []));
         this._ref = viewChild("_ref", ...(ngDevMode ? [{ debugName: "_ref" }] : /* istanbul ignore next */ []));
     }
     /**
@@ -2152,13 +2147,11 @@ class DBCustomSelectDropdown {
         }
     }
     ngAfterViewInit() {
-        if (typeof window !== "undefined") {
-            const element = this._ref()?.nativeElement;
-            this.enableAttributePassing(element, "db-custom-select-dropdown");
-        }
+        const element = this._ref()?.nativeElement;
+        this.enableAttributePassing(element, "db-custom-select-dropdown");
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: DBCustomSelectDropdown, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.14", type: DBCustomSelectDropdown, isStandalone: true, selector: "db-custom-select-dropdown", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, propOverrides: { classPropertyName: "propOverrides", publicName: "propOverrides", 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: "21.2.16", ngImport: i0, type: DBCustomSelectDropdown, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.16", type: DBCustomSelectDropdown, isStandalone: true, selector: "db-custom-select-dropdown", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, propOverrides: { classPropertyName: "propOverrides", publicName: "propOverrides", 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() ?? propOverrides()?.id"
@@ -2168,7 +2161,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: "21.2.14", ngImport: i0, type: DBCustomSelectDropdown, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: DBCustomSelectDropdown, decorators: [{
             type: Component,
             args: [{ selector: "db-custom-select-dropdown", standalone: true, imports: [CommonModule], template: `<article
     data-spacing="none"
@@ -2181,7 +2174,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
   </article> `, styles: [":host{display:contents}\n"] }]
         }], ctorParameters: () => [], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], propOverrides: [{ type: i0.Input, args: [{ isSignal: true, alias: "propOverrides", required: false }] }], className: [{ type: i0.Input, args: [{ isSignal: true, alias: "className", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], _ref: [{ type: i0.ViewChild, args: ["_ref", { isSignal: true }] }] } });
 
-const defaultProps$q = {};
+const defaultProps$y = {};
 class DBCustomSelectListItem {
     handleChange(event) {
         event.stopPropagation();
@@ -2225,9 +2218,9 @@ class DBCustomSelectListItem {
                 this.showDivider();
                 // ---
                 this.hasDivider.set(Boolean(this.isGroupTitle() || this.showDivider()));
-            }, {
-            // Enable writing to signals inside effects
-            });
+            }, Number(VERSION.major) < 19
+                ? { allowSignalWrites: true }
+                : undefined);
         }
     }
     /**
@@ -2282,13 +2275,11 @@ class DBCustomSelectListItem {
         this.disabled.set(disabled);
     }
     ngAfterViewInit() {
-        if (typeof window !== "undefined") {
-            const element = this._ref()?.nativeElement;
-            this.enableAttributePassing(element, "db-custom-select-list-item");
-        }
+        const element = this._ref()?.nativeElement;
+        this.enableAttributePassing(element, "db-custom-select-list-item");
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: DBCustomSelectListItem, deps: [{ token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: DBCustomSelectListItem, isStandalone: true, selector: "db-custom-select-list-item", inputs: { 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 }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, propOverrides: { classPropertyName: "propOverrides", publicName: "propOverrides", 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: "21.2.16", ngImport: i0, type: DBCustomSelectListItem, deps: [{ token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.16", type: DBCustomSelectListItem, isStandalone: true, selector: "db-custom-select-list-item", inputs: { 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 }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, propOverrides: { classPropertyName: "propOverrides", publicName: "propOverrides", 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
@@ -2299,12 +2290,12 @@ class DBCustomSelectListItem {
           'db-checkbox': type() === 'checkbox' && !isGroupTitle(),
           'db-radio': type() !== 'checkbox' && !isGroupTitle()
         })"
-    [attr.data-divider]="getBooleanAsString(hasDivider())"
+    [attr.data-divider]="getBooleanAsString(hasDivider(), 'hasDivider')"
   >
     @if(!isGroupTitle()){
     <label
       [attr.data-icon]="type() !== 'checkbox' && icon() ? icon() : undefined"
-      [attr.data-show-icon]="getBooleanAsString(showIcon())"
+      [attr.data-show-icon]="getBooleanAsString(showIcon(), 'showIcon')"
       [attr.data-icon-trailing]="getIconTrailing()"
       ><input
         class="db-custom-select-list-item-checkbox"
@@ -2323,7 +2314,7 @@ class DBCustomSelectListItem {
     }
   </li> `, isInline: true, styles: [":host{display:contents}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: DBCustomSelectListItem, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: DBCustomSelectListItem, decorators: [{
             type: Component,
             args: [{ providers: [{
                             provide: NG_VALUE_ACCESSOR,
@@ -2336,12 +2327,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
           'db-checkbox': type() === 'checkbox' && !isGroupTitle(),
           'db-radio': type() !== 'checkbox' && !isGroupTitle()
         })"
-    [attr.data-divider]="getBooleanAsString(hasDivider())"
+    [attr.data-divider]="getBooleanAsString(hasDivider(), 'hasDivider')"
   >
     @if(!isGroupTitle()){
     <label
       [attr.data-icon]="type() !== 'checkbox' && icon() ? icon() : undefined"
-      [attr.data-show-icon]="getBooleanAsString(showIcon())"
+      [attr.data-show-icon]="getBooleanAsString(showIcon(), 'showIcon')"
       [attr.data-icon-trailing]="getIconTrailing()"
       ><input
         class="db-custom-select-list-item-checkbox"
@@ -2361,7 +2352,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
   </li> `, styles: [":host{display:contents}\n"] }]
         }], ctorParameters: () => [{ type: i0.Renderer2 }], propDecorators: { isGroupTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "isGroupTitle", required: false }] }], showDivider: [{ type: i0.Input, args: [{ isSignal: true, alias: "showDivider", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], checked: [{ type: i0.Input, args: [{ isSignal: true, alias: "checked", required: false }] }, { type: i0.Output, args: ["checkedChange"] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], propOverrides: [{ type: i0.Input, args: [{ isSignal: true, alias: "propOverrides", required: false }] }], className: [{ type: i0.Input, args: [{ isSignal: true, alias: "className", required: false }] }], groupTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "groupTitle", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], showIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "showIcon", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }, { type: i0.Output, args: ["disabledChange"] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], change: [{ type: i0.Output, args: ["change"] }], _ref: [{ type: i0.ViewChild, args: ["_ref", { isSignal: true }] }] } });
 
-const defaultProps$p = {};
+const defaultProps$x = {};
 class DBCustomSelectList {
     constructor() {
         this.cls = cls;
@@ -2409,13 +2400,11 @@ class DBCustomSelectList {
         }
     }
     ngAfterViewInit() {
-        if (typeof window !== "undefined") {
-            const element = this._ref()?.nativeElement;
-            this.enableAttributePassing(element, "db-custom-select-list");
-        }
+        const element = this._ref()?.nativeElement;
+        this.enableAttributePassing(element, "db-custom-select-list");
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: DBCustomSelectList, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.14", 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 }, propOverrides: { classPropertyName: "propOverrides", publicName: "propOverrides", 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: "21.2.16", ngImport: i0, type: DBCustomSelectList, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.16", 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 }, propOverrides: { classPropertyName: "propOverrides", publicName: "propOverrides", 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
@@ -2427,7 +2416,7 @@ class DBCustomSelectList {
     </ul>
   </div> `, isInline: true, styles: [":host{display:contents}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: DBCustomSelectList, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: DBCustomSelectList, decorators: [{
             type: Component,
             args: [{ selector: "db-custom-select-list", standalone: true, imports: [CommonModule], template: `<div
     [attr.role]="multiple() ? 'group' : 'radiogroup'"
@@ -2442,7 +2431,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
   </div> `, styles: [":host{display:contents}\n"] }]
         }], ctorParameters: () => [], propDecorators: { multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], propOverrides: [{ type: i0.Input, args: [{ isSignal: true, alias: "propOverrides", required: false }] }], className: [{ type: i0.Input, args: [{ isSignal: true, alias: "className", required: false }] }], _ref: [{ type: i0.ViewChild, args: ["_ref", { isSignal: true }] }] } });
 
-const defaultProps$o = {};
+const defaultProps$w = {};
 class DBInput {
     hasValidState() {
         return !!(this.validMessage() ?? this.validation() === "valid");
@@ -2615,9 +2604,9 @@ class DBInput {
                 if (this.id() ?? this.propOverrides()?.id) {
                     this.resetIds();
                 }
-            }, {
-            // Enable writing to signals inside effects
-            });
+            }, Number(VERSION.major) < 19
+                ? { allowSignalWrites: true }
+                : undefined);
             effect(() => {
                 // --- Mitosis: Workaround to make sure the effect() is triggered ---
                 this._ref();
@@ -2626,9 +2615,9 @@ class DBInput {
                 this._invalidMessage.set(this.invalidMessage() ||
                     this._ref()?.nativeElement?.validationMessage ||
                     DEFAULT_INVALID_MESSAGE);
-            }, {
-            // Enable writing to signals inside effects
-            });
+            }, Number(VERSION.major) < 19
+                ? { allowSignalWrites: true }
+                : undefined);
             effect(() => {
                 // --- Mitosis: Workaround to make sure the effect() is triggered ---
                 this._id();
@@ -2644,17 +2633,17 @@ class DBInput {
                     }
                     this.handleValidation();
                 }
-            }, {
-            // Enable writing to signals inside effects
-            });
+            }, Number(VERSION.major) < 19
+                ? { allowSignalWrites: true }
+                : undefined);
             effect(() => {
                 // --- Mitosis: Workaround to make sure the effect() is triggered ---
                 this.value();
                 // ---
                 this._value.set(this.value());
-            }, {
-            // Enable writing to signals inside effects
-            });
+            }, Number(VERSION.major) < 19
+                ? { allowSignalWrites: true }
+                : undefined);
             effect(() => {
                 // --- Mitosis: Workaround to make sure the effect() is triggered ---
                 this._ref();
@@ -2677,9 +2666,9 @@ class DBInput {
                         this.handleInput(event, true);
                     }, controller.signal);
                 }
-            }, {
-            // Enable writing to signals inside effects
-            });
+            }, Number(VERSION.major) < 19
+                ? { allowSignalWrites: true }
+                : undefined);
         }
     }
     /**
@@ -2734,9 +2723,9 @@ class DBInput {
         this.disabled.set(disabled);
     }
     ngAfterViewInit() {
+        const element = this._ref()?.nativeElement;
+        this.enableAttributePassing(element, "db-input");
         if (typeof window !== "undefined") {
-            const element = this._ref()?.nativeElement;
-            this.enableAttributePassing(element, "db-input");
             this.resetIds();
             this._invalidMessage.set(this.invalidMessage() || DEFAULT_INVALID_MESSAGE);
         }
@@ -2744,8 +2733,8 @@ class DBInput {
     ngOnDestroy() {
         this.abortController()?.abort();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: DBInput, deps: [{ token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: DBInput, isStandalone: true, selector: "db-input", inputs: { invalidMessage: { classPropertyName: "invalidMessage", publicName: "invalidMessage", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, propOverrides: { classPropertyName: "propOverrides", publicName: "propOverrides", 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 }, accept: { classPropertyName: "accept", publicName: "accept", 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: "21.2.16", ngImport: i0, type: DBInput, deps: [{ token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.16", type: DBInput, isStandalone: true, selector: "db-input", inputs: { invalidMessage: { classPropertyName: "invalidMessage", publicName: "invalidMessage", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, propOverrides: { classPropertyName: "propOverrides", publicName: "propOverrides", 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 }, accept: { classPropertyName: "accept", publicName: "accept", 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
@@ -2753,11 +2742,11 @@ class DBInput {
     [class]="cls('db-input', className())"
     [attr.data-variant]="variant()"
     [attr.data-hide-label]="getHideProp(showLabel())"
-    [attr.data-show-icon]="getBooleanAsString(showIconLeading() ?? showIcon())"
+    [attr.data-show-icon]="getBooleanAsString(showIconLeading(), 'showIconLeading') || getBooleanAsString(showIcon(), 'showIcon')"
     [attr.data-icon]="iconLeading() ?? icon()"
     [attr.data-icon-trailing]="iconTrailing()"
     [attr.data-hide-asterisk]="getHideProp(showRequiredAsterisk())"
-    [attr.data-show-icon-trailing]="getBooleanAsString(showIconTrailing())"
+    [attr.data-show-icon-trailing]="getBooleanAsString(showIconTrailing(), 'showIconTrailing')"
   >
     <label [attr.for]="_id()">{{label() ?? DEFAULT_LABEL}}</label>
     <input
@@ -2832,7 +2821,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", "propOverrides", "className", "icon", "semantic", "size", "wrap", "showIcon", "text"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: DBInput, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: DBInput, decorators: [{
             type: Component,
             args: [{ providers: [{
                             provide: NG_VALUE_ACCESSOR,
@@ -2842,11 +2831,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
     [class]="cls('db-input', className())"
     [attr.data-variant]="variant()"
     [attr.data-hide-label]="getHideProp(showLabel())"
-    [attr.data-show-icon]="getBooleanAsString(showIconLeading() ?? showIcon())"
+    [attr.data-show-icon]="getBooleanAsString(showIconLeading(), 'showIconLeading') || getBooleanAsString(showIcon(), 'showIcon')"
     [attr.data-icon]="iconLeading() ?? icon()"
     [attr.data-icon-trailing]="iconTrailing()"
     [attr.data-hide-asterisk]="getHideProp(showRequiredAsterisk())"
-    [attr.data-show-icon-trailing]="getBooleanAsString(showIconTrailing())"
+    [attr.data-show-icon-trailing]="getBooleanAsString(showIconTrailing(), 'showIconTrailing')"
   >
     <label [attr.for]="_id()">{{label() ?? DEFAULT_LABEL}}</label>
     <input
@@ -2922,7 +2911,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
   </div> `, styles: [":host{display:contents}\n"] }]
         }], ctorParameters: () => [{ type: i0.Renderer2 }], propDecorators: { invalidMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalidMessage", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], propOverrides: [{ type: i0.Input, args: [{ isSignal: true, alias: "propOverrides", required: false }] }], dataListId: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataListId", required: false }] }], message: [{ type: i0.Input, args: [{ isSignal: true, alias: "message", required: false }] }], showMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "showMessage", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], validMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "validMessage", required: false }] }], validation: [{ type: i0.Input, args: [{ isSignal: true, alias: "validation", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], minLength: [{ type: i0.Input, args: [{ isSignal: true, alias: "minLength", required: false }] }], maxLength: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxLength", required: false }] }], pattern: [{ type: i0.Input, args: [{ isSignal: true, alias: "pattern", required: false }] }], dataList: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataList", required: false }] }], className: [{ type: i0.Input, args: [{ isSignal: true, alias: "className", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], showLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "showLabel", required: false }] }], showIconLeading: [{ type: i0.Input, args: [{ isSignal: true, alias: "showIconLeading", required: false }] }], showIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "showIcon", required: false }] }], iconLeading: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconLeading", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], iconTrailing: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconTrailing", required: false }] }], showRequiredAsterisk: [{ type: i0.Input, args: [{ isSignal: true, alias: "showRequiredAsterisk", required: false }] }], showIconTrailing: [{ type: i0.Input, args: [{ isSignal: true, alias: "showIconTrailing", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], fieldSizing: [{ type: i0.Input, args: [{ isSignal: true, alias: "fieldSizing", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], accept: [{ type: i0.Input, args: [{ isSignal: true, alias: "accept", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }, { type: i0.Output, args: ["disabledChange"] }], step: [{ type: i0.Input, args: [{ isSignal: true, alias: "step", required: false }] }], maxlength: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxlength", required: false }] }], minlength: [{ type: i0.Input, args: [{ isSignal: true, alias: "minlength", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], readOnly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readOnly", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], form: [{ type: i0.Input, args: [{ isSignal: true, alias: "form", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], autocomplete: [{ type: i0.Input, args: [{ isSignal: true, alias: "autocomplete", required: false }] }], autofocus: [{ type: i0.Input, args: [{ isSignal: true, alias: "autofocus", required: false }] }], enterkeyhint: [{ type: i0.Input, args: [{ isSignal: true, alias: "enterkeyhint", required: false }] }], inputmode: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputmode", required: false }] }], ariaDescribedBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaDescribedBy", required: false }] }], messageSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "messageSize", required: false }] }], messageIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "messageIcon", required: false }] }], validMessageSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "validMessageSize", required: false }] }], invalidMessageSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalidMessageSize", required: false }] }], input: [{ type: i0.Output, args: ["input"] }], change: [{ type: i0.Output, args: ["change"] }], blur: [{ type: i0.Output, args: ["blur"] }], focus: [{ type: i0.Output, args: ["focus"] }], _ref: [{ type: i0.ViewChild, args: ["_ref", { isSignal: true }] }] } });
 
-const defaultProps$n = {};
+const defaultProps$v = {};
 class DBTooltip {
     handleClick(event) {
         event.stopPropagation();
@@ -3003,9 +2992,9 @@ class DBTooltip {
                 if (this.id() ?? this.propOverrides()?.id) {
                     this.resetIds();
                 }
-            }, {
-            // Enable writing to signals inside effects
-            });
+            }, Number(VERSION.major) < 19
+                ? { allowSignalWrites: true }
+                : undefined);
             effect(() => {
                 // --- Mitosis: Workaround to make sure the effect() is triggered ---
                 this._ref();
@@ -3042,9 +3031,9 @@ class DBTooltip {
                     }
                     this.initialized.set(false);
                 }
-            }, {
-            // Enable writing to signals inside effects
-            });
+            }, Number(VERSION.major) < 19
+                ? { allowSignalWrites: true }
+                : undefined);
         }
     }
     /**
@@ -3084,15 +3073,15 @@ class DBTooltip {
         }
     }
     ngAfterViewInit() {
+        const element = this._ref()?.nativeElement;
+        this.enableAttributePassing(element, "db-tooltip");
         if (typeof window !== "undefined") {
-            const element = this._ref()?.nativeElement;
-            this.enableAttributePassing(element, "db-tooltip");
             this.resetIds();
             this.initialized.set(true);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: DBTooltip, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: DBTooltip, isStandalone: true, selector: "db-tooltip", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, propOverrides: { classPropertyName: "propOverrides", publicName: "propOverrides", 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 }, wrap: { classPropertyName: "wrap", publicName: "wrap", 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 }, 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: `<i
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: DBTooltip, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.16", type: DBTooltip, isStandalone: true, selector: "db-tooltip", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, propOverrides: { classPropertyName: "propOverrides", publicName: "propOverrides", 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 }, wrap: { classPropertyName: "wrap", publicName: "wrap", 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 }, 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: `<i
     role="tooltip"
     aria-hidden="true"
     data-gap="true"
@@ -3100,17 +3089,17 @@ class DBTooltip {
     [class]="cls('db-tooltip', className())"
     [attr.id]="_id()"
     [attr.data-emphasis]="emphasis()"
-    [attr.data-wrap]="getBooleanAsString(wrap())"
-    [attr.data-animation]="getBooleanAsString(animation() ?? true)"
+    [attr.data-wrap]="getBooleanAsString(wrap(), 'wrap')"
+    [attr.data-animation]="getBooleanAsString(animation() ?? true, 'animation')"
     [attr.data-delay]="delay()"
     [attr.data-width]="width()"
-    [attr.data-show-arrow]="getBooleanAsString(showArrow() ?? true)"
+    [attr.data-show-arrow]="getBooleanAsString(showArrow() ?? true, 'showArrow')"
     [attr.data-placement]="placement()"
     (click)="handleClick($event)"
     >@if(text()){{{text()}}} <ng-content></ng-content
   ></i> `, isInline: true, styles: [":host{display:contents}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: DBTooltip, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: DBTooltip, decorators: [{
             type: Component,
             args: [{ selector: "db-tooltip", standalone: true, imports: [CommonModule], template: `<i
     role="tooltip"
@@ -3120,18 +3109,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
     [class]="cls('db-tooltip', className())"
     [attr.id]="_id()"
     [attr.data-emphasis]="emphasis()"
-    [attr.data-wrap]="getBooleanAsString(wrap())"
-    [attr.data-animation]="getBooleanAsString(animation() ?? true)"
+    [attr.data-wrap]="getBooleanAsString(wrap(), 'wrap')"
+    [attr.data-animation]="getBooleanAsString(animation() ?? true, 'animation')"
     [attr.data-delay]="delay()"
     [attr.data-width]="width()"
-    [attr.data-show-arrow]="getBooleanAsString(showArrow() ?? true)"
+    [attr.data-show-arrow]="getBooleanAsString(showArrow() ?? true, 'showArrow')"
     [attr.data-placement]="placement()"
     (click)="handleClick($event)"
     >@if(text()){{{text()}}} <ng-content></ng-content
   ></i> `, styles: [":host{display:contents}\n"] }]
         }], ctorParameters: () => [], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], propOverrides: [{ type: i0.Input, args: [{ isSignal: true, alias: "propOverrides", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], placement: [{ type: i0.Input, args: [{ isSignal: true, alias: "placement", required: false }] }], className: [{ type: i0.Input, args: [{ isSignal: true, alias: "className", required: false }] }], emphasis: [{ type: i0.Input, args: [{ isSignal: true, alias: "emphasis", required: false }] }], wrap: [{ type: i0.Input, args: [{ isSignal: true, alias: "wrap", required: false }] }], animation: [{ type: i0.Input, args: [{ isSignal: true, alias: "animation", required: false }] }], delay: [{ type: i0.Input, args: [{ isSignal: true, alias: "delay", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], showArrow: [{ type: i0.Input, args: [{ isSignal: true, alias: "showArrow", required: false }] }], text: [{ type: i0.Input, args: [{ isSignal: true, alias: "text", required: false }] }], _ref: [{ type: i0.ViewChild, args: ["_ref", { isSignal: true }] }] } });
 
-const defaultProps$m = {};
+const defaultProps$u = {};
 class DBTag {
     handleRemove(event) {
         if (!event)
@@ -3204,23 +3193,21 @@ class DBTag {
         }
     }
     ngAfterViewInit() {
-        if (typeof window !== "undefined") {
-            const element = this._ref()?.nativeElement;
-            this.enableAttributePassing(element, "db-tag");
-        }
+        const element = this._ref()?.nativeElement;
+        this.enableAttributePassing(element, "db-tag");
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: DBTag, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", 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 }, propOverrides: { classPropertyName: "propOverrides", publicName: "propOverrides", 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: "21.2.16", ngImport: i0, type: DBTag, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.16", 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 }, propOverrides: { classPropertyName: "propOverrides", publicName: "propOverrides", 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() ?? propOverrides()?.id"
     [class]="cls('db-tag', className())"
     [attr.data-semantic]="semantic()"
     [attr.data-emphasis]="emphasis()"
     [attr.data-icon]="icon()"
-    [attr.data-show-check-state]="getBooleanAsString(showCheckState() ?? true)"
-    [attr.data-show-icon]="getBooleanAsString(showIcon())"
-    [attr.data-no-text]="getBooleanAsString(noText())"
-    [attr.data-overflow]="getBooleanAsString(overflow())"
+    [attr.data-show-check-state]="getBooleanAsString(showCheckState() ?? true, 'showCheckState')"
+    [attr.data-show-icon]="getBooleanAsString(showIcon(), 'showIcon')"
+    [attr.data-no-text]="getBooleanAsString(noText(), 'noText')"
+    [attr.data-overflow]="getBooleanAsString(overflow(), 'overflow')"
   >
     <ng-content select="[content]"> </ng-content> @if(text()){{{text()}}}
     <ng-content></ng-content>
@@ -3239,7 +3226,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", "propOverrides", "variant", "placement", "className", "emphasis", "wrap", "animation", "delay", "width", "showArrow", "text"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: DBTag, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: DBTag, decorators: [{
             type: Component,
             args: [{ selector: "db-tag", standalone: true, imports: [CommonModule, DBTooltip], template: `<div
     #_ref
@@ -3248,10 +3235,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
     [attr.data-semantic]="semantic()"
     [attr.data-emphasis]="emphasis()"
     [attr.data-icon]="icon()"
-    [attr.data-show-check-state]="getBooleanAsString(showCheckState() ?? true)"
-    [attr.data-show-icon]="getBooleanAsString(showIcon())"
-    [attr.data-no-text]="getBooleanAsString(noText())"
-    [attr.data-overflow]="getBooleanAsString(overflow())"
+    [attr.data-show-check-state]="getBooleanAsString(showCheckState() ?? true, 'showCheckState')"
+    [attr.data-show-icon]="getBooleanAsString(showIcon(), 'showIcon')"
+    [attr.data-no-text]="getBooleanAsString(noText(), 'noText')"
+    [attr.data-overflow]="getBooleanAsString(overflow(), 'overflow')"
   >
     <ng-content select="[content]"> </ng-content> @if(text()){{{text()}}}
     <ng-content></ng-content>
@@ -3271,7 +3258,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
   </div> `, styles: [":host{display:contents}\n"] }]
         }], ctorParameters: () => [], propDecorators: { removeButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "removeButton", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], propOverrides: [{ type: i0.Input, args: [{ isSignal: true, alias: "propOverrides", required: false }] }], className: [{ type: i0.Input, args: [{ isSignal: true, alias: "className", required: false }] }], semantic: [{ type: i0.Input, args: [{ isSignal: true, alias: "semantic", required: false }] }], emphasis: [{ type: i0.Input, args: [{ isSignal: true, alias: "emphasis", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], showCheckState: [{ type: i0.Input, args: [{ isSignal: true, alias: "showCheckState", required: false }] }], showIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "showIcon", required: false }] }], noText: [{ type: i0.Input, args: [{ isSignal: true, alias: "noText", required: false }] }], overflow: [{ type: i0.Input, args: [{ isSignal: true, alias: "overflow", required: false }] }], text: [{ type: i0.Input, args: [{ isSignal: true, alias: "text", required: false }] }], behavior: [{ type: i0.Input, args: [{ isSignal: true, alias: "behavior", required: false }] }], remove: [{ type: i0.Output, args: ["remove"] }], _ref: [{ type: i0.ViewChild, args: ["_ref", { isSignal: true }] }] } });
 
-const defaultProps$l = {
+const defaultProps$t = {
     clearSelectionText: "Clear selection",
     showClearSelection: true,
 };
@@ -3771,8 +3758,8 @@ class DBCustomSelect {
         this.loadingText = input(...(ngDevMode ? [undefined, { debugName: "loadingText" }] : /* istanbul ignore next */ []));
         this.noResultsText = input(...(ngDevMode ? [undefined, { debugName: "noResultsText" }] : /* istanbul ignore next */ []));
         this.mobileCloseButtonText = input(...(ngDevMode ? [undefined, { debugName: "mobileCloseButtonText" }] : /* istanbul ignore next */ []));
-        this.showClearSelection = input(defaultProps$l["showClearSelection"], ...(ngDevMode ? [{ debugName: "showClearSelection" }] : /* istanbul ignore next */ []));
-        this.clearSelectionText = input(defaultProps$l["clearSelectionText"], ...(ngDevMode ? [{ debugName: "clearSelectionText" }] : /* istanbul ignore next */ []));
+        this.showClearSelection = input(defaultProps$t["showClearSelection"], ...(ngDevMode ? [{ debugName: "showClearSelection" }] : /* istanbul ignore next */ []));
+        this.clearSelectionText = input(defaultProps$t["clearSelectionText"], ...(ngDevMode ? [{ debugName: "clearSelectionText" }] : /* istanbul ignore next */ []));
         this.placeholder = input(...(ngDevMode ? [undefined, { debugName: "placeholder" }] : /* istanbul ignore next */ []));
         this.messageIcon = input(...(ngDevMode ? [undefined, { debugName: "messageIcon" }] : /* istanbul ignore next */ []));
         this.amountChange = output();
@@ -3823,9 +3810,9 @@ class DBCustomSelect {
                 if (this.id() ?? this.propOverrides()?.id) {
                     this.resetIds();
                 }
-            }, {
-            // Enable writing to signals inside effects
-            });
+            }, Number(VERSION.major) < 19
+                ? { allowSignalWrites: true }
+                : undefined);
             effect(() => {
                 // --- Mitosis: Workaround to make sure the effect() is triggered ---
                 this.detailsRef();
@@ -3833,9 +3820,9 @@ class DBCustomSelect {
                 if (this.detailsRef()?.nativeElement) {
                     this.detailsRef()?.nativeElement.addEventListener("focusout", (event) => this.handleClose(event));
                 }
-            }, {
-            // Enable writing to signals inside effects
-            });
+            }, Number(VERSION.major) < 19
+                ? { allowSignalWrites: true }
+                : undefined);
             effect(() => {
                 // --- Mitosis: Workaround to make sure the effect() is triggered ---
                 this._id();
@@ -3854,9 +3841,9 @@ class DBCustomSelect {
                         this.setDescById();
                     }
                 }
-            }, {
-            // Enable writing to signals inside effects
-            });
+            }, Number(VERSION.major) < 19
+                ? { allowSignalWrites: true }
+                : undefined);
             effect(() => {
                 // --- Mitosis: Workaround to make sure the effect() is triggered ---
                 this.detailsRef();
@@ -3868,9 +3855,9 @@ class DBCustomSelect {
                         summary.setAttribute("aria-describedby", this.ariaDescribedBy() ?? (this._descByIds() || ""));
                     }
                 }
-            }, {
-            // Enable writing to signals inside effects
-            });
+            }, Number(VERSION.major) < 19
+                ? { allowSignalWrites: true }
+                : undefined);
             effect(() => {
                 // --- Mitosis: Workaround to make sure the effect() is triggered ---
                 this.showNoResults();
@@ -3883,9 +3870,9 @@ class DBCustomSelect {
                 else if (this._options()) {
                     this._hasNoOptions.set(this._options().length === 0);
                 }
-            }, {
-            // Enable writing to signals inside effects
-            });
+            }, Number(VERSION.major) < 19
+                ? { allowSignalWrites: true }
+                : undefined);
             effect(() => {
                 // --- Mitosis: Workaround to make sure the effect() is triggered ---
                 this.showSelectAll();
@@ -3894,18 +3881,18 @@ class DBCustomSelect {
                 // ---
                 this.selectAllEnabled.set(Boolean(this.multiple() &&
                     (this.showSelectAll() ?? this.amountOptions() > 5)));
-            }, {
-            // Enable writing to signals inside effects
-            });
+            }, Number(VERSION.major) < 19
+                ? { allowSignalWrites: true }
+                : undefined);
             effect(() => {
                 // --- Mitosis: Workaround to make sure the effect() is triggered ---
                 this.showSearch();
                 this.amountOptions();
                 // ---
                 this.searchEnabled.set(this.showSearch() ?? this.amountOptions() > 9);
-            }, {
-            // Enable writing to signals inside effects
-            });
+            }, Number(VERSION.major) < 19
+                ? { allowSignalWrites: true }
+                : undefined);
             effect(() => {
                 // --- Mitosis: Workaround to make sure the effect() is triggered ---
                 this.values();
@@ -3919,9 +3906,9 @@ class DBCustomSelect {
                 else if (v == null && this._values()?.length !== 0) {
                     this._values.set([]);
                 }
-            }, {
-            // Enable writing to signals inside effects
-            });
+            }, Number(VERSION.major) < 19
+                ? { allowSignalWrites: true }
+                : undefined);
             effect(() => {
                 // --- Mitosis: Workaround to make sure the effect() is triggered ---
                 this._values();
@@ -3930,9 +3917,9 @@ class DBCustomSelect {
                 if (this.selectRef()?.nativeElement) {
                     this.handleValidation();
                 }
-            }, {
-            // Enable writing to signals inside effects
-            });
+            }, Number(VERSION.major) < 19
+                ? { allowSignalWrites: true }
+                : undefined);
             effect(() => {
                 // --- Mitosis: Workaround to make sure the effect() is triggered ---
                 this.selectRef();
@@ -3954,17 +3941,17 @@ class DBCustomSelect {
                         this.handleValidation();
                     }, controller.signal);
                 }
-            }, {
-            // Enable writing to signals inside effects
-            });
+            }, Number(VERSION.major) < 19
+                ? { allowSignalWrites: true }
+                : undefined);
             effect(() => {
                 // --- Mitosis: Workaround to make sure the effect() is triggered ---
                 this.validation();
                 // ---
                 this._validity.set(this.validation());
-            }, {
-            // Enable writing to signals inside effects
-            });
+            }, Number(VERSION.major) < 19
+                ? { allowSignalWrites: true }
+                : undefined);
             effect(() => {
                 // --- Mitosis: Workaround to make sure the effect() is triggered ---
                 this._values();
@@ -3981,18 +3968,18 @@ class DBCustomSelect {
                 else if (this._values()) {
                     this.selectAllIndeterminate.set(true);
                 }
-            }, {
-            // Enable writing to signals inside effects
-            });
+            }, Number(VERSION.major) < 19
+                ? { allowSignalWrites: true }
+                : undefined);
             effect(() => {
                 // --- Mitosis: Workaround to make sure the effect() is triggered ---
                 this.options();
                 // ---
                 this._options.set(this.options());
                 this.amountOptions.set(this.options()?.filter((option) => !option.isGroupTitle).length ?? 0);
-            }, {
-            // Enable writing to signals inside effects
-            });
+            }, Number(VERSION.major) < 19
+                ? { allowSignalWrites: true }
+                : undefined);
             effect(() => {
                 // --- Mitosis: Workaround to make sure the effect() is triggered ---
                 this.searchValue();
@@ -4002,9 +3989,9 @@ class DBCustomSelect {
                     const sValue = this.searchValue(); // <- workaround for Angular
                     this.handleSearch(sValue);
                 }
-            }, {
-            // Enable writing to signals inside effects
-            });
+            }, Number(VERSION.major) < 19
+                ? { allowSignalWrites: true }
+                : undefined);
             effect(() => {
                 // --- Mitosis: Workaround to make sure the effect() is triggered ---
                 this.options();
@@ -4018,9 +4005,9 @@ class DBCustomSelect {
                         return (!option.isGroupTitle && this._values()?.includes(option.value));
                     }));
                 }
-            }, {
-            // Enable writing to signals inside effects
-            });
+            }, Number(VERSION.major) < 19
+                ? { allowSignalWrites: true }
+                : undefined);
             effect(() => {
                 // --- Mitosis: Workaround to make sure the effect() is triggered ---
                 this._selectedOptions();
@@ -4055,9 +4042,9 @@ class DBCustomSelect {
                 else {
                     this._selectedLabels.set("");
                 }
-            }, {
-            // Enable writing to signals inside effects
-            });
+            }, Number(VERSION.major) < 19
+                ? { allowSignalWrites: true }
+                : undefined);
             effect(() => {
                 // --- Mitosis: Workaround to make sure the effect() is triggered ---
                 this._selectedOptions();
@@ -4065,9 +4052,9 @@ class DBCustomSelect {
                 if (this.amountChange) {
                     this.amountChange.emit(this._selectedOptions()?.length ?? 0);
                 }
-            }, {
-            // Enable writing to signals inside effects
-            });
+            }, Number(VERSION.major) < 19
+                ? { allowSignalWrites: true }
+                : undefined);
             effect(() => {
                 // --- Mitosis: Workaround to make sure the effect() is triggered ---
                 this.selectAllIndeterminate();
@@ -4076,9 +4063,9 @@ class DBCustomSelect {
                 if (this.selectAllRef()?.nativeElement) {
                     this.selectAllRef().nativeElement.indeterminate = Boolean(this.selectAllIndeterminate());
                 }
-            }, {
-            // Enable writing to signals inside effects
-            });
+            }, Number(VERSION.major) < 19
+                ? { allowSignalWrites: true }
+                : undefined);
             effect(() => {
                 // --- Mitosis: Workaround to make sure the effect() is triggered ---
                 this.selectRef();
@@ -4087,9 +4074,9 @@ class DBCustomSelect {
                 this._invalidMessage.set(this.invalidMessage() ||
                     this.selectRef()?.nativeElement?.validationMessage ||
                     DEFAULT_INVALID_MESSAGE);
-            }, {
-            // Enable writing to signals inside effects
-            });
+            }, Number(VERSION.major) < 19
+                ? { allowSignalWrites: true }
+                : undefined);
         }
     }
     /**
@@ -4144,9 +4131,9 @@ class DBCustomSelect {
         this.disabled.set(disabled);
     }
     ngAfterViewInit() {
+        const element = this._ref()?.nativeElement;
+        this.enableAttributePassing(element, "db-custom-select");
         if (typeof window !== "undefined") {
-            const element = this._ref()?.nativeElement;
-            this.enableAttributePassing(element, "db-custom-select");
             this.resetIds();
             this._invalidMessage.set(this.invalidMessage() || DEFAULT_INVALID_MESSAGE);
             if (typeof window !== "undefined" && "IntersectionObserver" in window) {
@@ -4166,8 +4153,8 @@ class DBCustomSelect {
     ngOnDestroy() {
         this.abortController()?.abort();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: DBCustomSelect, deps: [{ token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: DBCustomSelect, isStandalone: true, selector: "db-custom-select", inputs: { invalidMessage: { classPropertyName: "invalidMessage", publicName: "invalidMessage", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, propOverrides: { classPropertyName: "propOverrides", publicName: "propOverrides", 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 }, selectedPrefix: { classPropertyName: "selectedPrefix", publicName: "selectedPrefix", 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: [{
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: DBCustomSelect, deps: [{ token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.16", type: DBCustomSelect, isStandalone: true, selector: "db-custom-select", inputs: { invalidMessage: { classPropertyName: "invalidMessage", publicName: "invalidMessage", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, propOverrides: { classPropertyName: "propOverrides", publicName: "propOverrides", 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 }, selectedPrefix: { classPropertyName: "selectedPrefix", publicName: "selectedPrefix", 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
@@ -4179,13 +4166,13 @@ class DBCustomSelect {
     [attr.data-custom-validity]="_validity()"
     [attr.data-width]="formFieldWidth()"
     [attr.data-variant]="variant() === 'floating' && selectedType() === 'tag' && multiple() ? 'above' : variant()"
-    [attr.data-required]="getBooleanAsString(required())"
+    [attr.data-required]="getBooleanAsString(required(), 'required')"
     [attr.data-hide-asterisk]="getHideProp(showRequiredAsterisk())"
     [attr.data-placement]="placement()"
     [attr.data-selected-type]="multiple() ? selectedType() : 'text'"
     [attr.data-hide-label]="getHideProp(showLabel())"
     [attr.data-icon]="icon()"
-    [attr.data-show-icon]="getBooleanAsString(showIcon())"
+    [attr.data-show-icon]="getBooleanAsString(showIcon(), 'showIcon')"
   >
     <label [attr.id]="_labelId()"
       >{{label() ?? DEFAULT_LABEL}}<select
@@ -4221,13 +4208,13 @@ class DBCustomSelect {
       <summary
         class="db-custom-select-form-field"
         [attr.id]="_summaryId()"
-        [attr.aria-disabled]="getBooleanAsString(disabled())"
+        [attr.aria-disabled]="getBooleanAsString(disabled(), 'disabled')"
         [attr.tabIndex]="disabled() ? -1 : undefined"
         [attr.aria-labelledby]="_labelId()"
       >
         @if(_selectedLabels()?.length){
         <span
-          [attr.data-visually-hidden]="getBooleanAsString(selectedType() === 'tag')"
+          [attr.data-visually-hidden]="getBooleanAsString(selectedType() === 'tag', 'selectedType')"
           [attr.id]="_selectedLabelsId()"
           >@if(selectedPrefix()){
           <span data-visually-hidden="true">{{selectedPrefix()}}</span>
@@ -4349,7 +4336,7 @@ class DBCustomSelect {
     }
     <span
       class="db-custom-select-placeholder"
-      [attr.aria-hidden]="getBooleanAsString(true)"
+      aria-hidden="true"
       [attr.id]="_placeholderId()"
       >{{placeholder() ?? label()}}</span
     >
@@ -4381,7 +4368,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", "propOverrides", "className", "semantic", "emphasis", "icon", "showCheckState", "showIcon", "noText", "overflow", "text", "behavior"], outputs: ["remove"] }, { kind: "component", type: DBCustomSelectDropdown, selector: "db-custom-select-dropdown", inputs: ["id", "propOverrides", "className", "width"] }, { kind: "component", type: DBInput, selector: "db-input", inputs: ["invalidMessage", "id", "propOverrides", "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", "accept", "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", "propOverrides", "className"] }, { kind: "component", type: DBCustomSelectListItem, selector: "db-custom-select-list-item", inputs: ["isGroupTitle", "showDivider", "type", "checked", "id", "propOverrides", "className", "groupTitle", "icon", "showIcon", "name", "disabled", "value", "label"], outputs: ["checkedChange", "disabledChange", "change"] }, { kind: "component", type: DBInfotext, selector: "db-infotext", inputs: ["id", "propOverrides", "className", "icon", "semantic", "size", "wrap", "showIcon", "text"] }, { kind: "component", type: DBButton, selector: "db-button", inputs: ["type", "id", "propOverrides", "className", "disabled", "iconLeading", "icon", "showIconLeading", "showIcon", "iconTrailing", "showIconTrailing", "size", "width", "variant", "wrap", "noText", "name", "form", "value", "text"], outputs: ["click"] }, { kind: "component", type: DBTooltip, selector: "db-tooltip", inputs: ["id", "propOverrides", "variant", "placement", "className", "emphasis", "wrap", "animation", "delay", "width", "showArrow", "text"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: DBCustomSelect, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: DBCustomSelect, decorators: [{
             type: Component,
             args: [{ providers: [{
                             provide: NG_VALUE_ACCESSOR,
@@ -4405,13 +4392,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
     [attr.data-custom-validity]="_validity()"
     [attr.data-width]="formFieldWidth()"
     [attr.data-variant]="variant() === 'floating' && selectedType() === 'tag' && multiple() ? 'above' : variant()"
-    [attr.data-required]="getBooleanAsString(required())"
+    [attr.data-required]="getBooleanAsString(required(), 'required')"
     [attr.data-hide-asterisk]="getHideProp(showRequiredAsterisk())"
     [attr.data-placement]="placement()"
     [attr.data-selected-type]="multiple() ? selectedType() : 'text'"
     [attr.data-hide-label]="getHideProp(showLabel())"
     [attr.data-icon]="icon()"
-    [attr.data-show-icon]="getBooleanAsString(showIcon())"
+    [attr.data-show-icon]="getBooleanAsString(showIcon(), 'showIcon')"
   >
     <label [attr.id]="_labelId()"
       >{{label() ?? DEFAULT_LABEL}}<select
@@ -4447,13 +4434,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
       <summary
         class="db-custom-select-form-field"
         [attr.id]="_summaryId()"
-        [attr.aria-disabled]="getBooleanAsString(disabled())"
+        [attr.aria-disabled]="getBooleanAsString(disabled(), 'disabled')"
         [attr.tabIndex]="disabled() ? -1 : undefined"
         [attr.aria-labelledby]="_labelId()"
       >
         @if(_selectedLabels()?.length){
         <span
-          [attr.data-visually-hidden]="getBooleanAsString(selectedType() === 'tag')"
+          [attr.data-visually-hidden]="getBooleanAsString(selectedType() === 'tag', 'selectedType')"
           [attr.id]="_selectedLabelsId()"
           >@if(selectedPrefix()){
           <span data-visually-hidden="true">{{selectedPrefix()}}</span>
@@ -4575,7 +4562,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
     }
     <span
       class="db-custom-select-placeholder"
-      [attr.aria-hidden]="getBooleanAsString(true)"
+      aria-hidden="true"
       [attr.id]="_placeholderId()"
       >{{placeholder() ?? label()}}</span
     >
@@ -4610,7 +4597,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
 
 const CustomSelectDropdownWidthList = ['fixed', 'auto', 'full'];
 
-const defaultProps$k = {};
+const defaultProps$s = {};
 class DBCustomSelectFormField {
     constructor() {
         this.cls = cls;
@@ -4656,13 +4643,11 @@ class DBCustomSelectFormField {
         }
     }
     ngAfterViewInit() {
-        if (typeof window !== "undefined") {
-            const element = this._ref()?.nativeElement;
-            this.enableAttributePassing(element, "db-custom-select-form-field");
-        }
+        const element = this._ref()?.nativeElement;
+        this.enableAttributePassing(element, "db-custom-select-form-field");
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: DBCustomSelectFormField, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.14", type: DBCustomSelectFormField, isStandalone: true, selector: "db-custom-select-form-field", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, propOverrides: { classPropertyName: "propOverrides", publicName: "propOverrides", 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: "21.2.16", ngImport: i0, type: DBCustomSelectFormField, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.16", type: DBCustomSelectFormField, isStandalone: true, selector: "db-custom-select-form-field", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, propOverrides: { classPropertyName: "propOverrides", publicName: "propOverrides", 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() ?? propOverrides()?.id"
     [class]="cls('db-custom-select-form-field', className())"
@@ -4670,7 +4655,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: "21.2.14", ngImport: i0, type: DBCustomSelectFormField, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: DBCustomSelectFormField, decorators: [{
             type: Component,
             args: [{ selector: "db-custom-select-form-field", standalone: true, imports: [CommonModule], template: `<summary
     #_ref
@@ -4685,7 +4670,7 @@ const CustomSelectListItemTypeList = ['checkbox', 'radio'];
 
 const SelectedTypeList = ['amount', 'text', 'tag'];
 
-const defaultProps$j = {};
+const defaultProps$r = {};
 class DBDivider {
     constructor() {
         this.cls = cls;
@@ -4735,13 +4720,11 @@ class DBDivider {
         }
     }
     ngAfterViewInit() {
-        if (typeof window !== "undefined") {
-            const element = this._ref()?.nativeElement;
-            this.enableAttributePassing(element, "db-divider");
-        }
+        const element = this._ref()?.nativeElement;
+        this.enableAttributePassing(element, "db-divider");
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: DBDivider, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.14", type: DBDivider, isStandalone: true, selector: "db-divider", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, propOverrides: { classPropertyName: "propOverrides", publicName: "propOverrides", 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: "21.2.16", ngImport: i0, type: DBDivider, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.16", type: DBDivider, isStandalone: true, selector: "db-divider", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, propOverrides: { classPropertyName: "propOverrides", publicName: "propOverrides", 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() ?? propOverrides()?.id"
     [attr.data-margin]="margin()"
@@ -4751,7 +4734,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: "21.2.14", ngImport: i0, type: DBDivider, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: DBDivider, decorators: [{
             type: Component,
             args: [{ selector: "db-divider", standalone: true, imports: [CommonModule], template: `<div
     #_ref
@@ -4767,7 +4750,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
 const DividerMarginList = ['none', '_'];
 const DividerVariantList = ['horizontal', 'vertical'];
 
-const defaultProps$i = {};
+const defaultProps$q = {};
 class DBDrawer {
     handleClose(event, forceClose) {
         if (!event)
@@ -4854,9 +4837,9 @@ class DBDrawer {
                 this.open();
                 // ---
                 this.handleDialogOpen();
-            }, {
-            // Enable writing to signals inside effects
-            });
+            }, Number(VERSION.major) < 19
+                ? { allowSignalWrites: true }
+                : undefined);
             effect(() => {
                 // --- Mitosis: Workaround to make sure the effect() is triggered ---
                 this._ref();
@@ -4872,9 +4855,9 @@ class DBDrawer {
                         parent.style.position = "relative";
                     }
                 }
-            }, {
-            // Enable writing to signals inside effects
-            });
+            }, Number(VERSION.major) < 19
+                ? { allowSignalWrites: true }
+                : undefined);
         }
     }
     /**
@@ -4914,15 +4897,15 @@ class DBDrawer {
         }
     }
     ngAfterViewInit() {
+        const element = this._ref()?.nativeElement;
+        this.enableAttributePassing(element, "db-drawer");
         if (typeof window !== "undefined") {
-            const element = this._ref()?.nativeElement;
-            this.enableAttributePassing(element, "db-drawer");
             this.handleDialogOpen();
             this.initialized.set(true);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: DBDrawer, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.14", 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 }, propOverrides: { classPropertyName: "propOverrides", publicName: "propOverrides", 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: "21.2.16", ngImport: i0, type: DBDrawer, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.16", 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 }, propOverrides: { classPropertyName: "propOverrides", publicName: "propOverrides", 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() ?? propOverrides()?.id"
     #_ref
@@ -4939,7 +4922,7 @@ class DBDrawer {
       [attr.data-spacing]="spacing()"
       [attr.data-width]="width()"
       [attr.data-direction]="direction()"
-      [attr.data-rounded]="getBooleanAsString(rounded())"
+      [attr.data-rounded]="getBooleanAsString(rounded(), 'rounded')"
     >
       <header class="db-drawer-header">
         <div class="db-drawer-header-text">
@@ -4959,7 +4942,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", "propOverrides", "className", "disabled", "iconLeading", "icon", "showIconLeading", "showIcon", "iconTrailing", "showIconTrailing", "size", "width", "variant", "wrap", "noText", "name", "form", "value", "text"], outputs: ["click"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: DBDrawer, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: DBDrawer, decorators: [{
             type: Component,
             args: [{ selector: "db-drawer", standalone: true, imports: [CommonModule, DBButton], template: `<dialog
     class="db-drawer"
@@ -4978,7 +4961,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
       [attr.data-spacing]="spacing()"
       [attr.data-width]="width()"
       [attr.data-direction]="direction()"
-      [attr.data-rounded]="getBooleanAsString(rounded())"
+      [attr.data-rounded]="getBooleanAsString(rounded(), 'rounded')"
     >
       <header class="db-drawer-header">
         <div class="db-drawer-header-text">
@@ -5138,10 +5121,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: "21.2.14", ngImport: i0, type: SecondaryActionDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.14", type: SecondaryActionDirective, isStandalone: true, selector: "[dbSecondaryAction]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: SecondaryActionDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.16", type: SecondaryActionDirective, isStandalone: true, selector: "[dbSecondaryAction]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: SecondaryActionDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: SecondaryActionDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[dbSecondaryAction]',
@@ -5151,10 +5134,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", 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: "21.2.14", ngImport: i0, type: MetaNavigationDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.14", type: MetaNavigationDirective, isStandalone: true, selector: "[dbMetaNavigation]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: MetaNavigationDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.16", type: MetaNavigationDirective, isStandalone: true, selector: "[dbMetaNavigation]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: MetaNavigationDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: MetaNavigationDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[dbMetaNavigation]',
@@ -5164,10 +5147,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", 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: "21.2.14", ngImport: i0, type: NavigationDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.14", type: NavigationDirective, isStandalone: true, selector: "[dbNavigation]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: NavigationDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.16", type: NavigationDirective, isStandalone: true, selector: "[dbNavigation]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: NavigationDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: NavigationDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[dbNavigation]',
@@ -5175,7 +5158,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
                 }]
         }] });
 
-const defaultProps$h = {};
+const defaultProps$p = {};
 class DBHeader {
     handleToggle(event) {
         if (event && event.stopPropagation) {
@@ -5225,9 +5208,9 @@ class DBHeader {
                     });
                     this.forcedToMobile.set(true);
                 }
-            }, {
-            // Enable writing to signals inside effects
-            });
+            }, Number(VERSION.major) < 19
+                ? { allowSignalWrites: true }
+                : undefined);
         }
     }
     /**
@@ -5267,14 +5250,14 @@ class DBHeader {
         }
     }
     ngAfterViewInit() {
+        const element = this._ref()?.nativeElement;
+        this.enableAttributePassing(element, "db-header");
         if (typeof window !== "undefined") {
-            const element = this._ref()?.nativeElement;
-            this.enableAttributePassing(element, "db-header");
             this.initialized.set(true);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: DBHeader, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.14", 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 }, propOverrides: { classPropertyName: "propOverrides", publicName: "propOverrides", 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 }, closeButtonId: { classPropertyName: "closeButtonId", publicName: "closeButtonId", isSignal: true, isRequired: false, transformFunction: null }, closeButtonText: { classPropertyName: "closeButtonText", publicName: "closeButtonText", 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: "21.2.16", ngImport: i0, type: DBHeader, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.16", 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 }, propOverrides: { classPropertyName: "propOverrides", publicName: "propOverrides", 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 }, closeButtonId: { classPropertyName: "closeButtonId", publicName: "closeButtonId", isSignal: true, isRequired: false, transformFunction: null }, closeButtonText: { classPropertyName: "closeButtonText", publicName: "closeButtonText", 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() ?? propOverrides()?.id"
@@ -5333,7 +5316,7 @@ class DBHeader {
     ></db-drawer>
   </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: DBButton, selector: "db-button", inputs: ["type", "id", "propOverrides", "className", "disabled", "iconLeading", "icon", "showIconLeading", "showIcon", "iconTrailing", "showIconTrailing", "size", "width", "variant", "wrap", "noText", "name", "form", "value", "text"], outputs: ["click"] }, { kind: "component", type: DBDrawer, selector: "db-drawer", inputs: ["open", "position", "backdrop", "variant", "id", "propOverrides", "direction", "className", "spacing", "width", "rounded", "closeButtonId", "closeButtonText"], outputs: ["close"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: DBHeader, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: DBHeader, decorators: [{
             type: Component,
             args: [{ selector: "db-header", standalone: true, imports: [CommonModule, DBButton, DBDrawer], template: `<header
     #_ref
@@ -5404,7 +5387,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
                 args: [SecondaryActionDirective, { read: TemplateRef }]
             }], forceMobile: [{ type: i0.Input, args: [{ isSignal: true, alias: "forceMobile", required: false }] }], drawerOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "drawerOpen", required: false }] }], className: [{ type: i0.Input, args: [{ isSignal: true, alias: "className", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], propOverrides: [{ type: i0.Input, args: [{ isSignal: true, alias: "propOverrides", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], burgerMenuLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "burgerMenuLabel", required: false }] }], closeButtonId: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeButtonId", required: false }] }], closeButtonText: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeButtonText", required: false }] }], toggle: [{ type: i0.Output, args: ["toggle"] }], _ref: [{ type: i0.ViewChild, args: ["_ref", { isSignal: true }] }] } });
 
-const defaultProps$g = {};
+const defaultProps$o = {};
 class DBIcon {
     constructor() {
         this.cls = cls;
@@ -5454,13 +5437,11 @@ class DBIcon {
         }
     }
     ngAfterViewInit() {
-        if (typeof window !== "undefined") {
-            const element = this._ref()?.nativeElement;
-            this.enableAttributePassing(element, "db-icon");
-        }
+        const element = this._ref()?.nativeElement;
+        this.enableAttributePassing(element, "db-icon");
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: DBIcon, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: DBIcon, isStandalone: true, selector: "db-icon", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, propOverrides: { classPropertyName: "propOverrides", publicName: "propOverrides", 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: "21.2.16", ngImport: i0, type: DBIcon, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.16", type: DBIcon, isStandalone: true, selector: "db-icon", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, propOverrides: { classPropertyName: "propOverrides", publicName: "propOverrides", 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() ?? propOverrides()?.id"
@@ -5471,7 +5452,7 @@ class DBIcon {
     >@if(text()){{{text()}}} <ng-content></ng-content
   ></span> `, isInline: true, styles: [":host{display:contents}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: DBIcon, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: DBIcon, decorators: [{
             type: Component,
             args: [{ selector: "db-icon", standalone: true, imports: [CommonModule], template: `<span
     aria-hidden="true"
@@ -5493,7 +5474,7 @@ const InputTypeList = ['color', 'date', 'datetime-local', 'email', 'file',
     // TODO: move this to own component
     'search', 'tel', 'text', 'time', 'url', 'week'];
 
-const defaultProps$f = {};
+const defaultProps$n = {};
 class DBLink {
     constructor() {
         this.cls = cls;
@@ -5554,13 +5535,11 @@ class DBLink {
         }
     }
     ngAfterViewInit() {
-        if (typeof window !== "undefined") {
-            const element = this._ref()?.nativeElement;
-            this.enableAttributePassing(element, "db-link");
-        }
+        const element = this._ref()?.nativeElement;
+        this.enableAttributePassing(element, "db-link");
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: DBLink, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: DBLink, isStandalone: true, selector: "db-link", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, propOverrides: { classPropertyName: "propOverrides", publicName: "propOverrides", 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 }, referrerpolicy: { classPropertyName: "referrerpolicy", publicName: "referrerpolicy", isSignal: true, isRequired: false, transformFunction: null }, referrerPolicy: { classPropertyName: "referrerPolicy", publicName: "referrerPolicy", 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: "21.2.16", ngImport: i0, type: DBLink, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.16", type: DBLink, isStandalone: true, selector: "db-link", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, propOverrides: { classPropertyName: "propOverrides", publicName: "propOverrides", 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 }, referrerpolicy: { classPropertyName: "referrerpolicy", publicName: "referrerpolicy", isSignal: true, isRequired: false, transformFunction: null }, referrerPolicy: { classPropertyName: "referrerPolicy", publicName: "referrerPolicy", 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() ?? propOverrides()?.id"
     [class]="cls('db-link', className())"
@@ -5570,17 +5549,17 @@ class DBLink {
     [attr.role]="role()"
     [attr.referrerPolicy]="referrerpolicy() ?? referrerPolicy()"
     [attr.hrefLang]="hreflang()"
-    [attr.aria-disabled]="getBooleanAsString(disabled())"
+    [attr.aria-disabled]="getBooleanAsString(disabled(), 'disabled')"
     [attr.tabIndex]="disabled() ? -1 : 0"
     [attr.data-size]="size()"
-    [attr.data-show-icon-trailing]="getBooleanAsString(showIcon() ?? true)"
+    [attr.data-show-icon-trailing]="getBooleanAsString(showIcon() ?? true, 'showIcon')"
     [attr.data-variant]="variant()"
     [attr.data-content]="content() || 'internal'"
-    [attr.data-wrap]="getBooleanAsString(wrap())"
+    [attr.data-wrap]="getBooleanAsString(wrap(), 'wrap')"
     >@if(text()){{{text()}}} <ng-content></ng-content
   ></a> `, isInline: true, styles: [":host{display:contents}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: DBLink, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: DBLink, decorators: [{
             type: Component,
             args: [{ selector: "db-link", standalone: true, imports: [CommonModule], template: `<a
     #_ref
@@ -5592,13 +5571,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
     [attr.role]="role()"
     [attr.referrerPolicy]="referrerpolicy() ?? referrerPolicy()"
     [attr.hrefLang]="hreflang()"
-    [attr.aria-disabled]="getBooleanAsString(disabled())"
+    [attr.aria-disabled]="getBooleanAsString(disabled(), 'disabled')"
     [attr.tabIndex]="disabled() ? -1 : 0"
     [attr.data-size]="size()"
-    [attr.data-show-icon-trailing]="getBooleanAsString(showIcon() ?? true)"
+    [attr.data-show-icon-trailing]="getBooleanAsString(showIcon() ?? true, 'showIcon')"
     [attr.data-variant]="variant()"
     [attr.data-content]="content() || 'internal'"
-    [attr.data-wrap]="getBooleanAsString(wrap())"
+    [attr.data-wrap]="getBooleanAsString(wrap(), 'wrap')"
     >@if(text()){{{text()}}} <ng-content></ng-content
   ></a> `, styles: [":host{display:contents}\n"] }]
         }], ctorParameters: () => [], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], propOverrides: [{ type: i0.Input, args: [{ isSignal: true, alias: "propOverrides", required: false }] }], className: [{ type: i0.Input, args: [{ isSignal: true, alias: "className", required: false }] }], href: [{ type: i0.Input, args: [{ isSignal: true, alias: "href", required: false }] }], target: [{ type: i0.Input, args: [{ isSignal: true, alias: "target", required: false }] }], rel: [{ type: i0.Input, args: [{ isSignal: true, alias: "rel", required: false }] }], role: [{ type: i0.Input, args: [{ isSignal: true, alias: "role", required: false }] }], referrerpolicy: [{ type: i0.Input, args: [{ isSignal: true, alias: "referrerpolicy", required: false }] }], referrerPolicy: [{ type: i0.Input, args: [{ isSignal: true, alias: "referrerPolicy", required: false }] }], hreflang: [{ type: i0.Input, args: [{ isSignal: true, alias: "hreflang", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], showIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "showIcon", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], content: [{ type: i0.Input, args: [{ isSignal: true, alias: "content", required: false }] }], wrap: [{ type: i0.Input, args: [{ isSignal: true, alias: "wrap", required: false }] }], text: [{ type: i0.Input, args: [{ isSignal: true, alias: "text", required: false }] }], _ref: [{ type: i0.ViewChild, args: ["_ref", { isSignal: true }] }] } });
@@ -5607,7 +5586,7 @@ const LinkVariantList = ['adaptive', 'brand', 'inline'];
 const LinkSizeList = ['medium', 'small'];
 const LinkContentList = ['external', 'internal'];
 
-const defaultProps$e = {};
+const defaultProps$m = {};
 class DBNavigation {
     constructor() {
         this.cls = cls;
@@ -5653,13 +5632,11 @@ class DBNavigation {
         }
     }
     ngAfterViewInit() {
-        if (typeof window !== "undefined") {
-            const element = this._ref()?.nativeElement;
-            this.enableAttributePassing(element, "db-navigation");
-        }
+        const element = this._ref()?.nativeElement;
+        this.enableAttributePassing(element, "db-navigation");
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: DBNavigation, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.14", type: DBNavigation, isStandalone: true, selector: "db-navigation", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, propOverrides: { classPropertyName: "propOverrides", publicName: "propOverrides", 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: "21.2.16", ngImport: i0, type: DBNavigation, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.16", type: DBNavigation, isStandalone: true, selector: "db-navigation", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, propOverrides: { classPropertyName: "propOverrides", publicName: "propOverrides", 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() ?? propOverrides()?.id"
     [class]="cls('db-navigation', className())"
@@ -5667,7 +5644,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: "21.2.14", ngImport: i0, type: DBNavigation, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: DBNavigation, decorators: [{
             type: Component,
             args: [{ selector: "db-navigation", standalone: true, imports: [CommonModule], template: `<nav
     #_ref
@@ -5680,10 +5657,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", 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: "21.2.14", ngImport: i0, type: NavigationContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.14", type: NavigationContentDirective, isStandalone: true, selector: "[dbNavigationContent]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: NavigationContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.16", type: NavigationContentDirective, isStandalone: true, selector: "[dbNavigationContent]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: NavigationContentDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: NavigationContentDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[dbNavigationContent]',
@@ -5691,7 +5668,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
                 }]
         }] });
 
-const defaultProps$d = {};
+const defaultProps$l = {};
 class DBNavigationItem {
     handleNavigationItemClick(event) {
         if (event?.target?.nodeName === "A") {
@@ -5751,9 +5728,9 @@ class DBNavigationItem {
                 if (this.subNavigationExpanded() !== undefined) {
                     this.isSubNavigationExpanded.set(!!getBoolean(this.subNavigationExpanded(), "subNavigationExpanded"));
                 }
-            }, {
-            // Enable writing to signals inside effects
-            });
+            }, Number(VERSION.major) < 19
+                ? { allowSignalWrites: true }
+                : undefined);
             effect(() => {
                 // --- Mitosis: Workaround to make sure the effect() is triggered ---
                 this.initialized();
@@ -5773,9 +5750,9 @@ class DBNavigationItem {
                         }
                     }
                 }
-            }, {
-            // Enable writing to signals inside effects
-            });
+            }, Number(VERSION.major) < 19
+                ? { allowSignalWrites: true }
+                : undefined);
         }
     }
     /**
@@ -5815,17 +5792,17 @@ class DBNavigationItem {
         }
     }
     ngAfterViewInit() {
+        const element = this._ref()?.nativeElement;
+        this.enableAttributePassing(element, "db-navigation-item");
         if (typeof window !== "undefined") {
-            const element = this._ref()?.nativeElement;
-            this.enableAttributePassing(element, "db-navigation-item");
             this.initialized.set(true);
             const subNavId = `sub-nav-${this.id() ?? uuid()}`;
             this.subNavigationId.set(subNavId);
             this.subNavigationToggleId.set(`${subNavId}-toggle`);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: DBNavigationItem, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: DBNavigationItem, isStandalone: true, selector: "db-navigation-item", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, subNavigationExpanded: { classPropertyName: "subNavigationExpanded", publicName: "subNavigationExpanded", isSignal: true, isRequired: false, transformFunction: null }, propOverrides: { classPropertyName: "propOverrides", publicName: "propOverrides", 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 }, hideSubNavigation: { classPropertyName: "hideSubNavigation", publicName: "hideSubNavigation", 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: "21.2.16", ngImport: i0, type: DBNavigationItem, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.16", type: DBNavigationItem, isStandalone: true, selector: "db-navigation-item", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, subNavigationExpanded: { classPropertyName: "subNavigationExpanded", publicName: "subNavigationExpanded", isSignal: true, isRequired: false, transformFunction: null }, propOverrides: { classPropertyName: "propOverrides", publicName: "propOverrides", 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 }, hideSubNavigation: { classPropertyName: "hideSubNavigation", publicName: "hideSubNavigation", 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() ?? propOverrides()?.id"
     (mouseover)="navigationItemSafeTriangle()?.enableFollow()"
@@ -5834,10 +5811,10 @@ class DBNavigationItem {
     [class]="cls('db-navigation-item', className())"
     [attr.data-width]="width()"
     [attr.data-icon]="icon()"
-    [attr.data-show-icon]="getBooleanAsString(showIcon())"
+    [attr.data-show-icon]="getBooleanAsString(showIcon(), 'showIcon')"
     [attr.data-active]="active()"
-    [attr.data-wrap]="getBooleanAsString(wrap())"
-    [attr.aria-disabled]="getBooleanAsString(disabled())"
+    [attr.data-wrap]="getBooleanAsString(wrap(), 'wrap')"
+    [attr.aria-disabled]="getBooleanAsString(disabled(), 'disabled')"
   >
     @if(!getBoolean(hideSubNavigation(), 'hideSubNavigation') &&
     hasSubNavigation()){
@@ -5878,7 +5855,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", "propOverrides", "className", "disabled", "iconLeading", "icon", "showIconLeading", "showIcon", "iconTrailing", "showIconTrailing", "size", "width", "variant", "wrap", "noText", "name", "form", "value", "text"], outputs: ["click"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: DBNavigationItem, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: DBNavigationItem, decorators: [{
             type: Component,
             args: [{ selector: "db-navigation-item", standalone: true, imports: [CommonModule, DBButton], template: `<li
     #_ref
@@ -5889,10 +5866,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
     [class]="cls('db-navigation-item', className())"
     [attr.data-width]="width()"
     [attr.data-icon]="icon()"
-    [attr.data-show-icon]="getBooleanAsString(showIcon())"
+    [attr.data-show-icon]="getBooleanAsString(showIcon(), 'showIcon')"
     [attr.data-active]="active()"
-    [attr.data-wrap]="getBooleanAsString(wrap())"
-    [attr.aria-disabled]="getBooleanAsString(disabled())"
+    [attr.data-wrap]="getBooleanAsString(wrap(), 'wrap')"
+    [attr.aria-disabled]="getBooleanAsString(disabled(), 'disabled')"
   >
     @if(!getBoolean(hideSubNavigation(), 'hideSubNavigation') &&
     hasSubNavigation()){
@@ -5937,7 +5914,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
                 args: [NavigationContentDirective, { read: TemplateRef }]
             }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], subNavigationExpanded: [{ type: i0.Input, args: [{ isSignal: true, alias: "subNavigationExpanded", required: false }] }], propOverrides: [{ type: i0.Input, args: [{ isSignal: true, alias: "propOverrides", required: false }] }], className: [{ type: i0.Input, args: [{ isSignal: true, alias: "className", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], showIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "showIcon", required: false }] }], active: [{ type: i0.Input, args: [{ isSignal: true, alias: "active", required: false }] }], wrap: [{ type: i0.Input, args: [{ isSignal: true, alias: "wrap", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], hideSubNavigation: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideSubNavigation", required: false }] }], text: [{ type: i0.Input, args: [{ isSignal: true, alias: "text", required: false }] }], backButtonId: [{ type: i0.Input, args: [{ isSignal: true, alias: "backButtonId", required: false }] }], backButtonText: [{ type: i0.Input, args: [{ isSignal: true, alias: "backButtonText", required: false }] }], click: [{ type: i0.Output, args: ["click"] }], _ref: [{ type: i0.ViewChild, args: ["_ref", { isSignal: true }] }] } });
 
-const defaultProps$c = {};
+const defaultProps$k = {};
 class DBNotification {
     handleClose(event) {
         if (!event)
@@ -6013,13 +5990,11 @@ class DBNotification {
         }
     }
     ngAfterViewInit() {
-        if (typeof window !== "undefined") {
-            const element = this._ref()?.nativeElement;
-            this.enableAttributePassing(element, "db-notification");
-        }
+        const element = this._ref()?.nativeElement;
+        this.enableAttributePassing(element, "db-notification");
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: DBNotification, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: DBNotification, isStandalone: true, selector: "db-notification", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, propOverrides: { classPropertyName: "propOverrides", publicName: "propOverrides", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, semantic: { classPropertyName: "semantic", publicName: "semantic", isSignal: true, isRequired: false, transformFunction: null }, role: { classPropertyName: "role", publicName: "role", isSignal: true, isRequired: false, transformFunction: null }, ariaLive: { classPropertyName: "ariaLive", publicName: "ariaLive", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, showIcon: { classPropertyName: "showIcon", publicName: "showIcon", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, linkVariant: { classPropertyName: "linkVariant", publicName: "linkVariant", isSignal: true, isRequired: false, transformFunction: null }, headline: { classPropertyName: "headline", publicName: "headline", isSignal: true, isRequired: false, transformFunction: null }, showHeadline: { classPropertyName: "showHeadline", publicName: "showHeadline", isSignal: true, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, timestamp: { classPropertyName: "timestamp", publicName: "timestamp", isSignal: true, isRequired: false, transformFunction: null }, showTimestamp: { classPropertyName: "showTimestamp", publicName: "showTimestamp", isSignal: true, isRequired: false, transformFunction: null }, timestampDatetime: { classPropertyName: "timestampDatetime", publicName: "timestampDatetime", isSignal: true, isRequired: false, transformFunction: null }, closeable: { classPropertyName: "closeable", publicName: "closeable", isSignal: true, isRequired: false, transformFunction: null }, closeButtonId: { classPropertyName: "closeButtonId", publicName: "closeButtonId", isSignal: true, isRequired: false, transformFunction: null }, closeButtonText: { classPropertyName: "closeButtonText", publicName: "closeButtonText", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { close: "close" }, viewQueries: [{ propertyName: "_ref", first: true, predicate: ["_ref"], descendants: true, isSignal: true }], ngImport: i0, template: `<div
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: DBNotification, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.16", type: DBNotification, isStandalone: true, selector: "db-notification", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, propOverrides: { classPropertyName: "propOverrides", publicName: "propOverrides", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, semantic: { classPropertyName: "semantic", publicName: "semantic", isSignal: true, isRequired: false, transformFunction: null }, role: { classPropertyName: "role", publicName: "role", isSignal: true, isRequired: false, transformFunction: null }, ariaLive: { classPropertyName: "ariaLive", publicName: "ariaLive", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, showIcon: { classPropertyName: "showIcon", publicName: "showIcon", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, linkVariant: { classPropertyName: "linkVariant", publicName: "linkVariant", isSignal: true, isRequired: false, transformFunction: null }, headline: { classPropertyName: "headline", publicName: "headline", isSignal: true, isRequired: false, transformFunction: null }, showHeadline: { classPropertyName: "showHeadline", publicName: "showHeadline", isSignal: true, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, timestamp: { classPropertyName: "timestamp", publicName: "timestamp", isSignal: true, isRequired: false, transformFunction: null }, showTimestamp: { classPropertyName: "showTimestamp", publicName: "showTimestamp", isSignal: true, isRequired: false, transformFunction: null }, timestampDatetime: { classPropertyName: "timestampDatetime", publicName: "timestampDatetime", isSignal: true, isRequired: false, transformFunction: null }, closeable: { classPropertyName: "closeable", publicName: "closeable", isSignal: true, isRequired: false, transformFunction: null }, closeButtonId: { classPropertyName: "closeButtonId", publicName: "closeButtonId", isSignal: true, isRequired: false, transformFunction: null }, closeButtonText: { classPropertyName: "closeButtonText", publicName: "closeButtonText", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { close: "close" }, viewQueries: [{ propertyName: "_ref", first: true, predicate: ["_ref"], descendants: true, isSignal: true }], ngImport: i0, template: `<div
     #_ref
     [attr.id]="id() ?? propOverrides()?.id"
     [class]="cls('db-notification', className())"
@@ -6032,7 +6007,7 @@ class DBNotification {
     [attr.data-semantic]="semantic()"
     [attr.data-variant]="variant()"
     [attr.data-icon]="getBoolean(showIcon()) !== false ? icon() : undefined"
-    [attr.data-show-icon]="getBooleanAsString(showIcon())"
+    [attr.data-show-icon]="getBooleanAsString(showIcon(), 'showIcon')"
     [attr.data-link-variant]="linkVariant()"
   >
     <ng-content select="[image]"> </ng-content>
@@ -6063,7 +6038,7 @@ class DBNotification {
     }
   </div> `, isInline: true, styles: [":host{display:contents}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: DBButton, selector: "db-button", inputs: ["type", "id", "propOverrides", "className", "disabled", "iconLeading", "icon", "showIconLeading", "showIcon", "iconTrailing", "showIconTrailing", "size", "width", "variant", "wrap", "noText", "name", "form", "value", "text"], outputs: ["click"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: DBNotification, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: DBNotification, decorators: [{
             type: Component,
             args: [{ selector: "db-notification", standalone: true, imports: [CommonModule, DBButton], template: `<div
     #_ref
@@ -6078,7 +6053,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
     [attr.data-semantic]="semantic()"
     [attr.data-variant]="variant()"
     [attr.data-icon]="getBoolean(showIcon()) !== false ? icon() : undefined"
-    [attr.data-show-icon]="getBooleanAsString(showIcon())"
+    [attr.data-show-icon]="getBooleanAsString(showIcon(), 'showIcon')"
     [attr.data-link-variant]="linkVariant()"
   >
     <ng-content select="[image]"> </ng-content>
@@ -6114,7 +6089,7 @@ const NotificationVariantList = ['docked', 'standalone', 'overlay'];
 const NotificationLinkVariantList = ['block', 'inline'];
 const NotificationAriaLiveList = ['assertive', 'polite', 'off'];
 
-const defaultProps$b = {};
+const defaultProps$j = {};
 class DBPage {
     constructor() {
         this.cls = cls;
@@ -6176,9 +6151,9 @@ class DBPage {
         }
     }
     ngAfterViewInit() {
+        const element = this._ref()?.nativeElement;
+        this.enableAttributePassing(element, "db-page");
         if (typeof window !== "undefined") {
-            const element = this._ref()?.nativeElement;
-            this.enableAttributePassing(element, "db-page");
             this.fontsLoaded.set(!this.fadeIn());
             if (document && this.fadeIn()) {
                 document.fonts.ready.then(() => {
@@ -6197,29 +6172,29 @@ class DBPage {
             document.documentElement.classList.remove("db-page-document");
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: DBPage, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.14", 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 }, propOverrides: { classPropertyName: "propOverrides", publicName: "propOverrides", 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: "21.2.16", ngImport: i0, type: DBPage, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.16", 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 }, propOverrides: { classPropertyName: "propOverrides", publicName: "propOverrides", 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() ?? propOverrides()?.id"
     [class]="cls('db-page', className())"
     [attr.data-variant]="variant()"
-    [attr.data-fade-in]="getBooleanAsString(fadeIn())"
-    [attr.data-fonts-loaded]="getBooleanAsString(fontsLoaded())"
+    [attr.data-fade-in]="getBooleanAsString(fadeIn(), 'fadeIn')"
+    [attr.data-fonts-loaded]="getBooleanAsString(fontsLoaded(), 'fontsLoaded')"
   >
     <ng-content select="[header]"> </ng-content>
     <main [class]="cls('db-main', mainClass())"><ng-content></ng-content></main>
     <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: "21.2.14", ngImport: i0, type: DBPage, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: DBPage, decorators: [{
             type: Component,
             args: [{ selector: "db-page", standalone: true, imports: [CommonModule], template: `<div
     #_ref
     [attr.id]="id() ?? propOverrides()?.id"
     [class]="cls('db-page', className())"
     [attr.data-variant]="variant()"
-    [attr.data-fade-in]="getBooleanAsString(fadeIn())"
-    [attr.data-fonts-loaded]="getBooleanAsString(fontsLoaded())"
+    [attr.data-fade-in]="getBooleanAsString(fadeIn(), 'fadeIn')"
+    [attr.data-fonts-loaded]="getBooleanAsString(fontsLoaded(), 'fontsLoaded')"
   >
     <ng-content select="[header]"> </ng-content>
     <main [class]="cls('db-main', mainClass())"><ng-content></ng-content></main>
@@ -6230,7 +6205,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
 const PageVariantList = ['auto', 'fixed'];
 const PageDocumentOverflowList = ['hidden', 'auto'];
 
-const defaultProps$a = {};
+const defaultProps$i = {};
 class DBPopover {
     handleEscape(event) {
         if (!event || event.key === "Escape") {
@@ -6349,9 +6324,9 @@ class DBPopover {
                         }));
                     }
                 }
-            }, {
-            // Enable writing to signals inside effects
-            });
+            }, Number(VERSION.major) < 19
+                ? { allowSignalWrites: true }
+                : undefined);
             effect(() => {
                 // --- Mitosis: Workaround to make sure the effect() is triggered ---
                 this._ref();
@@ -6363,9 +6338,9 @@ class DBPopover {
                         child.ariaExpanded = Boolean(this.isExpanded()).toString();
                     }
                 }
-            }, {
-            // Enable writing to signals inside effects
-            });
+            }, Number(VERSION.major) < 19
+                ? { allowSignalWrites: true }
+                : undefined);
         }
     }
     /**
@@ -6405,14 +6380,14 @@ class DBPopover {
         }
     }
     ngAfterViewInit() {
+        const element = this._ref()?.nativeElement;
+        this.enableAttributePassing(element, "db-popover");
         if (typeof window !== "undefined") {
-            const element = this._ref()?.nativeElement;
-            this.enableAttributePassing(element, "db-popover");
             this.initialized.set(true);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: DBPopover, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.14", 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 }, propOverrides: { classPropertyName: "propOverrides", publicName: "propOverrides", 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: "21.2.16", ngImport: i0, type: DBPopover, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.16", 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 }, propOverrides: { classPropertyName: "propOverrides", publicName: "propOverrides", 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() ?? propOverrides()?.id"
     [class]="cls('db-popover', className())"
@@ -6421,9 +6396,9 @@ class DBPopover {
     <article
       class="db-popover-content"
       [attr.data-spacing]="spacing()"
-      [attr.data-gap]="getBooleanAsString(gap())"
-      [attr.data-animation]="getBooleanAsString(animation() ?? true)"
-      [attr.data-open]="getBooleanAsString(open())"
+      [attr.data-gap]="getBooleanAsString(gap(), 'gap')"
+      [attr.data-animation]="getBooleanAsString(animation() ?? true, 'animation')"
+      [attr.data-open]="getBooleanAsString(open(), 'open')"
       [attr.data-delay]="delay()"
       [attr.data-width]="width()"
       [attr.data-placement]="placement()"
@@ -6432,7 +6407,7 @@ class DBPopover {
     </article>
   </div> `, isInline: true, styles: [":host{display:contents}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: DBPopover, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: DBPopover, decorators: [{
             type: Component,
             args: [{ selector: "db-popover", standalone: true, imports: [CommonModule], template: `<div
     #_ref
@@ -6443,9 +6418,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
     <article
       class="db-popover-content"
       [attr.data-spacing]="spacing()"
-      [attr.data-gap]="getBooleanAsString(gap())"
-      [attr.data-animation]="getBooleanAsString(animation() ?? true)"
-      [attr.data-open]="getBooleanAsString(open())"
+      [attr.data-gap]="getBooleanAsString(gap(), 'gap')"
+      [attr.data-animation]="getBooleanAsString(animation() ?? true, 'animation')"
+      [attr.data-open]="getBooleanAsString(open(), 'open')"
       [attr.data-delay]="delay()"
       [attr.data-width]="width()"
       [attr.data-placement]="placement()"
@@ -6455,7 +6430,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
   </div> `, styles: [":host{display:contents}\n"] }]
         }], ctorParameters: () => [], propDecorators: { placement: [{ type: i0.Input, args: [{ isSignal: true, alias: "placement", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], propOverrides: [{ type: i0.Input, args: [{ isSignal: true, alias: "propOverrides", required: false }] }], className: [{ type: i0.Input, args: [{ isSignal: true, alias: "className", required: false }] }], spacing: [{ type: i0.Input, args: [{ isSignal: true, alias: "spacing", required: false }] }], gap: [{ type: i0.Input, args: [{ isSignal: true, alias: "gap", required: false }] }], animation: [{ type: i0.Input, args: [{ isSignal: true, alias: "animation", required: false }] }], open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }], delay: [{ type: i0.Input, args: [{ isSignal: true, alias: "delay", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], _ref: [{ type: i0.ViewChild, args: ["_ref", { isSignal: true }] }] } });
 
-const defaultProps$9 = {};
+const defaultProps$h = {};
 class DBRadio {
     handleInput(event, reset) {
         if (this.input) {
@@ -6521,9 +6496,9 @@ class DBRadio {
                 if (this.id() ?? this.propOverrides()?.id) {
                     this.resetIds();
                 }
-            }, {
-            // Enable writing to signals inside effects
-            });
+            }, Number(VERSION.major) < 19
+                ? { allowSignalWrites: true }
+                : undefined);
             effect(() => {
                 // --- Mitosis: Workaround to make sure the effect() is triggered ---
                 this.initialized();
@@ -6535,9 +6510,9 @@ class DBRadio {
                     this._ref()?.nativeElement) {
                     this._ref().nativeElement.checked = true;
                 }
-            }, {
-            // Enable writing to signals inside effects
-            });
+            }, Number(VERSION.major) < 19
+                ? { allowSignalWrites: true }
+                : undefined);
             effect(() => {
                 // --- Mitosis: Workaround to make sure the effect() is triggered ---
                 this._ref();
@@ -6569,9 +6544,9 @@ class DBRadio {
                         }, 1);
                     }, controller.signal);
                 }
-            }, {
-            // Enable writing to signals inside effects
-            });
+            }, Number(VERSION.major) < 19
+                ? { allowSignalWrites: true }
+                : undefined);
         }
     }
     /**
@@ -6628,9 +6603,9 @@ class DBRadio {
         this.disabled.set(disabled);
     }
     ngAfterViewInit() {
+        const element = this._ref()?.nativeElement;
+        this.enableAttributePassing(element, "db-radio");
         if (typeof window !== "undefined") {
-            const element = this._ref()?.nativeElement;
-            this.enableAttributePassing(element, "db-radio");
             this.initialized.set(true);
             this.resetIds();
         }
@@ -6638,8 +6613,8 @@ class DBRadio {
     ngOnDestroy() {
         this.abortController()?.abort();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: DBRadio, deps: [{ token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: DBRadio, isStandalone: true, selector: "db-radio", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, propOverrides: { classPropertyName: "propOverrides", publicName: "propOverrides", 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", input: "input", change: "change", blur: "blur", focus: "focus" }, providers: [{
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: DBRadio, deps: [{ token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.16", type: DBRadio, isStandalone: true, selector: "db-radio", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, propOverrides: { classPropertyName: "propOverrides", publicName: "propOverrides", 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", input: "input", change: "change", blur: "blur", focus: "focus" }, providers: [{
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: DBRadio,
                 multi: true
@@ -6667,7 +6642,7 @@ class DBRadio {
     @if(label()){{{label()}}} <ng-content></ng-content
   ></label> `, isInline: true, styles: [":host{display:contents}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: DBRadio, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: DBRadio, decorators: [{
             type: Component,
             args: [{ providers: [{
                             provide: NG_VALUE_ACCESSOR,
@@ -6698,7 +6673,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
   ></label> `, styles: [":host{display:contents}\n"] }]
         }], ctorParameters: () => [{ type: i0.Renderer2 }], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], propOverrides: [{ type: i0.Input, args: [{ isSignal: true, alias: "propOverrides", required: false }] }], checked: [{ type: i0.Input, args: [{ isSignal: true, alias: "checked", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], showLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "showLabel", required: false }] }], showRequiredAsterisk: [{ type: i0.Input, args: [{ isSignal: true, alias: "showRequiredAsterisk", required: false }] }], className: [{ type: i0.Input, args: [{ isSignal: true, alias: "className", required: false }] }], validation: [{ type: i0.Input, args: [{ isSignal: true, alias: "validation", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }, { type: i0.Output, args: ["disabledChange"] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], input: [{ type: i0.Output, args: ["input"] }], change: [{ type: i0.Output, args: ["change"] }], blur: [{ type: i0.Output, args: ["blur"] }], focus: [{ type: i0.Output, args: ["focus"] }], _ref: [{ type: i0.ViewChild, args: ["_ref", { isSignal: true }] }] } });
 
-const defaultProps$8 = {};
+const defaultProps$g = {};
 class DBSection {
     constructor() {
         this.cls = cls;
@@ -6746,13 +6721,11 @@ class DBSection {
         }
     }
     ngAfterViewInit() {
-        if (typeof window !== "undefined") {
-            const element = this._ref()?.nativeElement;
-            this.enableAttributePassing(element, "db-section");
-        }
+        const element = this._ref()?.nativeElement;
+        this.enableAttributePassing(element, "db-section");
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: DBSection, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.14", type: DBSection, isStandalone: true, selector: "db-section", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, propOverrides: { classPropertyName: "propOverrides", publicName: "propOverrides", 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: "21.2.16", ngImport: i0, type: DBSection, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.16", type: DBSection, isStandalone: true, selector: "db-section", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, propOverrides: { classPropertyName: "propOverrides", publicName: "propOverrides", 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() ?? propOverrides()?.id"
     [class]="cls('db-section', className())"
@@ -6762,7 +6735,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: "21.2.14", ngImport: i0, type: DBSection, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: DBSection, decorators: [{
             type: Component,
             args: [{ selector: "db-section", standalone: true, imports: [CommonModule], template: `<section
     #_ref
@@ -6775,7 +6748,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
   </section> `, styles: [":host{display:contents}\n"] }]
         }], ctorParameters: () => [], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], propOverrides: [{ type: i0.Input, args: [{ isSignal: true, alias: "propOverrides", required: false }] }], className: [{ type: i0.Input, args: [{ isSignal: true, alias: "className", required: false }] }], spacing: [{ type: i0.Input, args: [{ isSignal: true, alias: "spacing", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], _ref: [{ type: i0.ViewChild, args: ["_ref", { isSignal: true }] }] } });
 
-const defaultProps$7 = {};
+const defaultProps$f = {};
 class DBSelect {
     hasValidState() {
         return !!(this.validMessage() ?? this.validation() === "valid");
@@ -6932,9 +6905,9 @@ class DBSelect {
                 if (this.id() ?? this.propOverrides()?.id) {
                     this.resetIds();
                 }
-            }, {
-            // Enable writing to signals inside effects
-            });
+            }, Number(VERSION.major) < 19
+                ? { allowSignalWrites: true }
+                : undefined);
             effect(() => {
                 // --- Mitosis: Workaround to make sure the effect() is triggered ---
                 this._ref();
@@ -6943,9 +6916,9 @@ class DBSelect {
                 this._invalidMessage.set(this.invalidMessage() ||
                     this._ref()?.nativeElement?.validationMessage ||
                     DEFAULT_INVALID_MESSAGE);
-            }, {
-            // Enable writing to signals inside effects
-            });
+            }, Number(VERSION.major) < 19
+                ? { allowSignalWrites: true }
+                : undefined);
             effect(() => {
                 // --- Mitosis: Workaround to make sure the effect() is triggered ---
                 this._id();
@@ -6970,17 +6943,17 @@ class DBSelect {
                     this.handleValidation();
                     this.initialized.set(false);
                 }
-            }, {
-            // Enable writing to signals inside effects
-            });
+            }, Number(VERSION.major) < 19
+                ? { allowSignalWrites: true }
+                : undefined);
             effect(() => {
                 // --- Mitosis: Workaround to make sure the effect() is triggered ---
                 this.value();
                 // ---
                 this._value.set(this.value());
-            }, {
-            // Enable writing to signals inside effects
-            });
+            }, Number(VERSION.major) < 19
+                ? { allowSignalWrites: true }
+                : undefined);
             effect(() => {
                 // --- Mitosis: Workaround to make sure the effect() is triggered ---
                 this._ref();
@@ -7003,9 +6976,9 @@ class DBSelect {
                         this.handleInput(event, true);
                     }, controller.signal);
                 }
-            }, {
-            // Enable writing to signals inside effects
-            });
+            }, Number(VERSION.major) < 19
+                ? { allowSignalWrites: true }
+                : undefined);
         }
     }
     /**
@@ -7060,9 +7033,9 @@ class DBSelect {
         this.disabled.set(disabled);
     }
     ngAfterViewInit() {
+        const element = this._ref()?.nativeElement;
+        this.enableAttributePassing(element, "db-select");
         if (typeof window !== "undefined") {
-            const element = this._ref()?.nativeElement;
-            this.enableAttributePassing(element, "db-select");
             this.initialized.set(true);
             this.resetIds();
             this._invalidMessage.set(this.invalidMessage() || DEFAULT_INVALID_MESSAGE);
@@ -7073,8 +7046,8 @@ class DBSelect {
     ngOnDestroy() {
         this.abortController()?.abort();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: DBSelect, deps: [{ token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: DBSelect, isStandalone: true, selector: "db-select", inputs: { invalidMessage: { classPropertyName: "invalidMessage", publicName: "invalidMessage", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, propOverrides: { classPropertyName: "propOverrides", publicName: "propOverrides", isSignal: true, isRequired: false, transformFunction: null }, message: { classPropertyName: "message", publicName: "message", isSignal: true, isRequired: false, transformFunction: null }, showMessage: { classPropertyName: "showMessage", publicName: "showMessage", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, validMessage: { classPropertyName: "validMessage", publicName: "validMessage", isSignal: true, isRequired: false, transformFunction: null }, validation: { classPropertyName: "validation", publicName: "validation", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, showEmptyOption: { classPropertyName: "showEmptyOption", publicName: "showEmptyOption", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, showLabel: { classPropertyName: "showLabel", publicName: "showLabel", isSignal: true, isRequired: false, transformFunction: null }, showRequiredAsterisk: { classPropertyName: "showRequiredAsterisk", publicName: "showRequiredAsterisk", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, showIcon: { classPropertyName: "showIcon", publicName: "showIcon", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, autocomplete: { classPropertyName: "autocomplete", publicName: "autocomplete", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, ariaDescribedBy: { classPropertyName: "ariaDescribedBy", publicName: "ariaDescribedBy", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, messageIcon: { classPropertyName: "messageIcon", publicName: "messageIcon", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", disabled: "disabledChange", click: "click", input: "input", change: "change", blur: "blur", focus: "focus" }, providers: [{
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: DBSelect, deps: [{ token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.16", type: DBSelect, isStandalone: true, selector: "db-select", inputs: { invalidMessage: { classPropertyName: "invalidMessage", publicName: "invalidMessage", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, propOverrides: { classPropertyName: "propOverrides", publicName: "propOverrides", isSignal: true, isRequired: false, transformFunction: null }, message: { classPropertyName: "message", publicName: "message", isSignal: true, isRequired: false, transformFunction: null }, showMessage: { classPropertyName: "showMessage", publicName: "showMessage", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, validMessage: { classPropertyName: "validMessage", publicName: "validMessage", isSignal: true, isRequired: false, transformFunction: null }, validation: { classPropertyName: "validation", publicName: "validation", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, showEmptyOption: { classPropertyName: "showEmptyOption", publicName: "showEmptyOption", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, showLabel: { classPropertyName: "showLabel", publicName: "showLabel", isSignal: true, isRequired: false, transformFunction: null }, showRequiredAsterisk: { classPropertyName: "showRequiredAsterisk", publicName: "showRequiredAsterisk", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, showIcon: { classPropertyName: "showIcon", publicName: "showIcon", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, autocomplete: { classPropertyName: "autocomplete", publicName: "autocomplete", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, ariaDescribedBy: { classPropertyName: "ariaDescribedBy", publicName: "ariaDescribedBy", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, messageIcon: { classPropertyName: "messageIcon", publicName: "messageIcon", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", disabled: "disabledChange", click: "click", input: "input", change: "change", blur: "blur", focus: "focus" }, providers: [{
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: DBSelect,
                 multi: true
@@ -7084,7 +7057,7 @@ class DBSelect {
     [attr.data-hide-label]="getHideProp(showLabel())"
     [attr.data-hide-asterisk]="getHideProp(showRequiredAsterisk())"
     [attr.data-icon]="icon()"
-    [attr.data-show-icon]="getBooleanAsString(showIcon())"
+    [attr.data-show-icon]="getBooleanAsString(showIcon(), 'showIcon')"
   >
     <label [attr.for]="_id()">{{label() ?? DEFAULT_LABEL}}</label>
     <select
@@ -7110,7 +7083,7 @@ class DBSelect {
       <option
         class="placeholder"
         value=""
-        [attr.data-show-empty-option]="getBooleanAsString(shouldShowEmptyOption())"
+        [attr.data-show-empty-option]="getBooleanAsString(shouldShowEmptyOption(), 'showEmptyOption')"
       ></option>
       } @if(options()?.length){ @for (option of options();track i;let i =
       $index) {
@@ -7176,7 +7149,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", "propOverrides", "className", "icon", "semantic", "size", "wrap", "showIcon", "text"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: DBSelect, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: DBSelect, decorators: [{
             type: Component,
             args: [{ providers: [{
                             provide: NG_VALUE_ACCESSOR,
@@ -7188,7 +7161,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
     [attr.data-hide-label]="getHideProp(showLabel())"
     [attr.data-hide-asterisk]="getHideProp(showRequiredAsterisk())"
     [attr.data-icon]="icon()"
-    [attr.data-show-icon]="getBooleanAsString(showIcon())"
+    [attr.data-show-icon]="getBooleanAsString(showIcon(), 'showIcon')"
   >
     <label [attr.for]="_id()">{{label() ?? DEFAULT_LABEL}}</label>
     <select
@@ -7214,7 +7187,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
       <option
         class="placeholder"
         value=""
-        [attr.data-show-empty-option]="getBooleanAsString(shouldShowEmptyOption())"
+        [attr.data-show-empty-option]="getBooleanAsString(shouldShowEmptyOption(), 'showEmptyOption')"
       ></option>
       } @if(options()?.length){ @for (option of options();track i;let i =
       $index) {
@@ -7281,7 +7254,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
   </div> `, styles: [":host{display:contents}\n"] }]
         }], ctorParameters: () => [{ type: i0.Renderer2 }], propDecorators: { invalidMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalidMessage", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], propOverrides: [{ type: i0.Input, args: [{ isSignal: true, alias: "propOverrides", required: false }] }], message: [{ type: i0.Input, args: [{ isSignal: true, alias: "message", required: false }] }], showMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "showMessage", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], validMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "validMessage", required: false }] }], validation: [{ type: i0.Input, args: [{ isSignal: true, alias: "validation", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], showEmptyOption: [{ type: i0.Input, args: [{ isSignal: true, alias: "showEmptyOption", required: false }] }], className: [{ type: i0.Input, args: [{ isSignal: true, alias: "className", required: false }] }], showLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "showLabel", required: false }] }], showRequiredAsterisk: [{ type: i0.Input, args: [{ isSignal: true, alias: "showRequiredAsterisk", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], showIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "showIcon", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }, { type: i0.Output, args: ["disabledChange"] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], autocomplete: [{ type: i0.Input, args: [{ isSignal: true, alias: "autocomplete", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], ariaDescribedBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaDescribedBy", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], messageIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "messageIcon", required: false }] }], click: [{ type: i0.Output, args: ["click"] }], input: [{ type: i0.Output, args: ["input"] }], change: [{ type: i0.Output, args: ["change"] }], blur: [{ type: i0.Output, args: ["blur"] }], focus: [{ type: i0.Output, args: ["focus"] }], _ref: [{ type: i0.ViewChild, args: ["_ref", { isSignal: true }] }] } });
 
-const defaultProps$6 = {};
+const defaultProps$e = {};
 class DBStack {
     constructor() {
         this.cls = cls;
@@ -7334,13 +7307,11 @@ class DBStack {
         }
     }
     ngAfterViewInit() {
-        if (typeof window !== "undefined") {
-            const element = this._ref()?.nativeElement;
-            this.enableAttributePassing(element, "db-stack");
-        }
+        const element = this._ref()?.nativeElement;
+        this.enableAttributePassing(element, "db-stack");
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: DBStack, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.14", type: DBStack, isStandalone: true, selector: "db-stack", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, propOverrides: { classPropertyName: "propOverrides", publicName: "propOverrides", 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: "21.2.16", ngImport: i0, type: DBStack, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.16", type: DBStack, isStandalone: true, selector: "db-stack", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, propOverrides: { classPropertyName: "propOverrides", publicName: "propOverrides", 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() ?? propOverrides()?.id"
     [class]="cls('db-stack', className())"
@@ -7349,12 +7320,12 @@ class DBStack {
     [attr.data-direction]="direction()"
     [attr.data-alignment]="alignment()"
     [attr.data-justify-content]="justifyContent()"
-    [attr.data-wrap]="getBooleanAsString(wrap())"
+    [attr.data-wrap]="getBooleanAsString(wrap(), 'wrap')"
   >
     <ng-content></ng-content>
   </div> `, isInline: true, styles: [":host{display:contents}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: DBStack, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: DBStack, decorators: [{
             type: Component,
             args: [{ selector: "db-stack", standalone: true, imports: [CommonModule], template: `<div
     #_ref
@@ -7365,7 +7336,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
     [attr.data-direction]="direction()"
     [attr.data-alignment]="alignment()"
     [attr.data-justify-content]="justifyContent()"
-    [attr.data-wrap]="getBooleanAsString(wrap())"
+    [attr.data-wrap]="getBooleanAsString(wrap(), 'wrap')"
   >
     <ng-content></ng-content>
   </div> `, styles: [":host{display:contents}\n"] }]
@@ -7376,7 +7347,7 @@ const StackDirectionList = ['row', 'column'];
 const StackAlignmentList = ['stretch', 'start', 'end', 'center'];
 const StackJustifyContentList = ['space-between', 'start', 'end', 'center'];
 
-const defaultProps$5 = {};
+const defaultProps$d = {};
 class DBSwitch {
     hasValidState() {
         return !!(this.validMessage() ?? this.validation() === "valid");
@@ -7502,9 +7473,9 @@ class DBSwitch {
                 if (this.id() ?? this.propOverrides()?.id) {
                     this.resetIds();
                 }
-            }, {
-            // Enable writing to signals inside effects
-            });
+            }, Number(VERSION.major) < 19
+                ? { allowSignalWrites: true }
+                : undefined);
             effect(() => {
                 // --- Mitosis: Workaround to make sure the effect() is triggered ---
                 this.validation();
@@ -7516,9 +7487,9 @@ class DBSwitch {
                 this.checked();
                 // ---
                 this.handleValidation();
-            }, {
-            // Enable writing to signals inside effects
-            });
+            }, Number(VERSION.major) < 19
+                ? { allowSignalWrites: true }
+                : undefined);
             effect(() => {
                 // --- Mitosis: Workaround to make sure the effect() is triggered ---
                 this._ref();
@@ -7527,9 +7498,9 @@ class DBSwitch {
                 this._invalidMessage.set(this.invalidMessage() ||
                     this._ref()?.nativeElement?.validationMessage ||
                     DEFAULT_INVALID_MESSAGE);
-            }, {
-            // Enable writing to signals inside effects
-            });
+            }, Number(VERSION.major) < 19
+                ? { allowSignalWrites: true }
+                : undefined);
             effect(() => {
                 // --- Mitosis: Workaround to make sure the effect() is triggered ---
                 this._ref();
@@ -7548,9 +7519,9 @@ class DBSwitch {
                         this.handleChange(event, true);
                     }, controller.signal);
                 }
-            }, {
-            // Enable writing to signals inside effects
-            });
+            }, Number(VERSION.major) < 19
+                ? { allowSignalWrites: true }
+                : undefined);
         }
     }
     /**
@@ -7605,9 +7576,9 @@ class DBSwitch {
         this.disabled.set(disabled);
     }
     ngAfterViewInit() {
+        const element = this._ref()?.nativeElement;
+        this.enableAttributePassing(element, "db-switch");
         if (typeof window !== "undefined") {
-            const element = this._ref()?.nativeElement;
-            this.enableAttributePassing(element, "db-switch");
             this.resetIds();
             this.handleValidation();
             this._invalidMessage.set(this.invalidMessage() || DEFAULT_INVALID_MESSAGE);
@@ -7616,13 +7587,13 @@ class DBSwitch {
     ngOnDestroy() {
         this.abortController()?.abort();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: DBSwitch, deps: [{ token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: DBSwitch, isStandalone: true, selector: "db-switch", inputs: { invalidMessage: { classPropertyName: "invalidMessage", publicName: "invalidMessage", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, propOverrides: { classPropertyName: "propOverrides", publicName: "propOverrides", 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 }, checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", 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 }, 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", change: "change", blur: "blur", focus: "focus" }, providers: [{
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: DBSwitch, deps: [{ token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.16", type: DBSwitch, isStandalone: true, selector: "db-switch", inputs: { invalidMessage: { classPropertyName: "invalidMessage", publicName: "invalidMessage", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, propOverrides: { classPropertyName: "propOverrides", publicName: "propOverrides", 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 }, checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", 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 }, 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", change: "change", 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: `<div
-    [attr.data-visual-aid]="getBooleanAsString(visualAid())"
+    [attr.data-visual-aid]="getBooleanAsString(visualAid(), 'visualAid')"
     [attr.data-size]="size()"
     [attr.data-hide-label]="getHideProp(showLabel())"
     [attr.data-variant]="variant()"
@@ -7680,14 +7651,14 @@ class DBSwitch {
     >
   </div> `, isInline: true, styles: [":host{display:contents}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: DBInfotext, selector: "db-infotext", inputs: ["id", "propOverrides", "className", "icon", "semantic", "size", "wrap", "showIcon", "text"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: DBSwitch, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: DBSwitch, decorators: [{
             type: Component,
             args: [{ providers: [{
                             provide: NG_VALUE_ACCESSOR,
                             useExisting: DBSwitch,
                             multi: true
                         }], selector: "db-switch", standalone: true, imports: [CommonModule, DBInfotext], template: `<div
-    [attr.data-visual-aid]="getBooleanAsString(visualAid())"
+    [attr.data-visual-aid]="getBooleanAsString(visualAid(), 'visualAid')"
     [attr.data-size]="size()"
     [attr.data-hide-label]="getHideProp(showLabel())"
     [attr.data-variant]="variant()"
@@ -7746,7 +7717,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
   </div> `, styles: [":host{display:contents}\n"] }]
         }], ctorParameters: () => [{ type: i0.Renderer2 }], propDecorators: { invalidMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalidMessage", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], propOverrides: [{ type: i0.Input, args: [{ isSignal: true, alias: "propOverrides", required: false }] }], validation: [{ type: i0.Input, args: [{ isSignal: true, alias: "validation", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], message: [{ type: i0.Input, args: [{ isSignal: true, alias: "message", required: false }] }], showMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "showMessage", required: false }] }], validMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "validMessage", required: false }] }], checked: [{ type: i0.Input, args: [{ isSignal: true, alias: "checked", required: false }] }, { type: i0.Output, args: ["checkedChange"] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }, { type: i0.Output, args: ["disabledChange"] }], visualAid: [{ type: i0.Input, args: [{ isSignal: true, alias: "visualAid", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], showLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "showLabel", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], showRequiredAsterisk: [{ type: i0.Input, args: [{ isSignal: true, alias: "showRequiredAsterisk", required: false }] }], className: [{ type: i0.Input, args: [{ isSignal: true, alias: "className", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], iconLeading: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconLeading", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], iconTrailing: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconTrailing", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], messageIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "messageIcon", required: false }] }], change: [{ type: i0.Output, args: ["change"] }], blur: [{ type: i0.Output, args: ["blur"] }], focus: [{ type: i0.Output, args: ["focus"] }], _ref: [{ type: i0.ViewChild, args: ["_ref", { isSignal: true }] }] } });
 
-const defaultProps$4 = {};
+const defaultProps$c = {};
 class DBTabItem {
     setSelectedOnChange(event) {
         event.stopPropagation();
@@ -7820,9 +7791,9 @@ class DBTabItem {
                         this._ref()?.nativeElement.click();
                     }
                 }
-            }, {
-            // Enable writing to signals inside effects
-            });
+            }, Number(VERSION.major) < 19
+                ? { allowSignalWrites: true }
+                : undefined);
             effect(() => {
                 // --- Mitosis: Workaround to make sure the effect() is triggered ---
                 this.name();
@@ -7830,9 +7801,9 @@ class DBTabItem {
                 if (this.name()) {
                     this._name.set(this.name());
                 }
-            }, {
-            // Enable writing to signals inside effects
-            });
+            }, Number(VERSION.major) < 19
+                ? { allowSignalWrites: true }
+                : undefined);
         }
     }
     /**
@@ -7887,9 +7858,9 @@ class DBTabItem {
         this.disabled.set(disabled);
     }
     ngAfterViewInit() {
+        const element = this._ref()?.nativeElement;
+        this.enableAttributePassing(element, "db-tab-item");
         if (typeof window !== "undefined") {
-            const element = this._ref()?.nativeElement;
-            this.enableAttributePassing(element, "db-tab-item");
             this.boundSetSelectedOnChange.set(this.setSelectedOnChange.bind(this));
             this.initialized.set(true);
         }
@@ -7904,8 +7875,8 @@ class DBTabItem {
             this._listenerAdded.set(false);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: DBTabItem, deps: [{ token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", 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 }, propOverrides: { classPropertyName: "propOverrides", publicName: "propOverrides", 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: "21.2.16", ngImport: i0, type: DBTabItem, deps: [{ token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.16", 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 }, propOverrides: { classPropertyName: "propOverrides", publicName: "propOverrides", 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
@@ -7914,9 +7885,9 @@ class DBTabItem {
       [attr.for]="id() ?? propOverrides()?.id"
       [attr.data-icon]="iconLeading() ?? icon()"
       [attr.data-icon-trailing]="iconTrailing()"
-      [attr.data-show-icon]="getBooleanAsString(showIconLeading() ?? showIcon())"
-      [attr.data-show-icon-trailing]="getBooleanAsString(showIconTrailing())"
-      [attr.data-no-text]="getBooleanAsString(noText())"
+      [attr.data-show-icon]="getBooleanAsString(showIconLeading(), 'showIconLeading') || getBooleanAsString(showIcon(), 'showIcon')"
+      [attr.data-show-icon-trailing]="getBooleanAsString(showIconTrailing(), 'showIconTrailing')"
+      [attr.data-no-text]="getBooleanAsString(noText(), 'noText')"
       ><input
         type="radio"
         role="tab"
@@ -7931,7 +7902,7 @@ class DBTabItem {
     ></label>
   </li> `, isInline: true, styles: [":host{display:contents}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: DBTabItem, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: DBTabItem, decorators: [{
             type: Component,
             args: [{ providers: [{
                             provide: NG_VALUE_ACCESSOR,
@@ -7942,9 +7913,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
       [attr.for]="id() ?? propOverrides()?.id"
       [attr.data-icon]="iconLeading() ?? icon()"
       [attr.data-icon-trailing]="iconTrailing()"
-      [attr.data-show-icon]="getBooleanAsString(showIconLeading() ?? showIcon())"
-      [attr.data-show-icon-trailing]="getBooleanAsString(showIconTrailing())"
-      [attr.data-no-text]="getBooleanAsString(noText())"
+      [attr.data-show-icon]="getBooleanAsString(showIconLeading(), 'showIconLeading') || getBooleanAsString(showIcon(), 'showIcon')"
+      [attr.data-show-icon-trailing]="getBooleanAsString(showIconTrailing(), 'showIconTrailing')"
+      [attr.data-no-text]="getBooleanAsString(noText(), 'noText')"
       ><input
         type="radio"
         role="tab"
@@ -7960,7 +7931,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
   </li> `, styles: [":host{display:contents}\n"] }]
         }], ctorParameters: () => [{ type: i0.Renderer2 }], propDecorators: { active: [{ type: i0.Input, args: [{ isSignal: true, alias: "active", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], className: [{ type: i0.Input, args: [{ isSignal: true, alias: "className", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], propOverrides: [{ type: i0.Input, args: [{ isSignal: true, alias: "propOverrides", required: false }] }], iconLeading: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconLeading", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], iconTrailing: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconTrailing", required: false }] }], showIconLeading: [{ type: i0.Input, args: [{ isSignal: true, alias: "showIconLeading", required: false }] }], showIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "showIcon", required: false }] }], showIconTrailing: [{ type: i0.Input, args: [{ isSignal: true, alias: "showIconTrailing", required: false }] }], noText: [{ type: i0.Input, args: [{ isSignal: true, alias: "noText", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }, { type: i0.Output, args: ["disabledChange"] }], checked: [{ type: i0.Input, args: [{ isSignal: true, alias: "checked", required: false }] }, { type: i0.Output, args: ["checkedChange"] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], change: [{ type: i0.Output, args: ["change"] }], _ref: [{ type: i0.ViewChild, args: ["_ref", { isSignal: true }] }] } });
 
-const defaultProps$3 = {};
+const defaultProps$b = {};
 class DBTabList {
     constructor() {
         this.cls = cls;
@@ -8006,13 +7977,11 @@ class DBTabList {
         }
     }
     ngAfterViewInit() {
-        if (typeof window !== "undefined") {
-            const element = this._ref()?.nativeElement;
-            this.enableAttributePassing(element, "db-tab-list");
-        }
+        const element = this._ref()?.nativeElement;
+        this.enableAttributePassing(element, "db-tab-list");
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: DBTabList, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.14", type: DBTabList, isStandalone: true, selector: "db-tab-list", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, propOverrides: { classPropertyName: "propOverrides", publicName: "propOverrides", 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: "21.2.16", ngImport: i0, type: DBTabList, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.16", type: DBTabList, isStandalone: true, selector: "db-tab-list", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, propOverrides: { classPropertyName: "propOverrides", publicName: "propOverrides", 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() ?? propOverrides()?.id"
     [class]="cls('db-tab-list', className())"
@@ -8022,7 +7991,7 @@ class DBTabList {
     </ul>
   </div> `, isInline: true, styles: [":host{display:contents}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: DBTabList, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: DBTabList, decorators: [{
             type: Component,
             args: [{ selector: "db-tab-list", standalone: true, imports: [CommonModule], template: `<div
     #_ref
@@ -8035,7 +8004,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
   </div> `, styles: [":host{display:contents}\n"] }]
         }], ctorParameters: () => [], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], propOverrides: [{ type: i0.Input, args: [{ isSignal: true, alias: "propOverrides", required: false }] }], className: [{ type: i0.Input, args: [{ isSignal: true, alias: "className", required: false }] }], _ref: [{ type: i0.ViewChild, args: ["_ref", { isSignal: true }] }] } });
 
-const defaultProps$2 = {};
+const defaultProps$a = {};
 class DBTabPanel {
     constructor() {
         this.cls = cls;
@@ -8082,13 +8051,11 @@ class DBTabPanel {
         }
     }
     ngAfterViewInit() {
-        if (typeof window !== "undefined") {
-            const element = this._ref()?.nativeElement;
-            this.enableAttributePassing(element, "db-tab-panel");
-        }
+        const element = this._ref()?.nativeElement;
+        this.enableAttributePassing(element, "db-tab-panel");
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: DBTabPanel, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", 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 }, propOverrides: { classPropertyName: "propOverrides", publicName: "propOverrides", 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: "21.2.16", ngImport: i0, type: DBTabPanel, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.16", 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 }, propOverrides: { classPropertyName: "propOverrides", publicName: "propOverrides", 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())"
@@ -8097,7 +8064,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: "21.2.14", ngImport: i0, type: DBTabPanel, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: DBTabPanel, decorators: [{
             type: Component,
             args: [{ selector: "db-tab-panel", standalone: true, imports: [CommonModule], template: `<section
     role="tabpanel"
@@ -8109,6 +8076,988 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
   </section> `, styles: [":host{display:contents}\n"] }]
         }], ctorParameters: () => [], propDecorators: { className: [{ type: i0.Input, args: [{ isSignal: true, alias: "className", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], propOverrides: [{ type: i0.Input, args: [{ isSignal: true, alias: "propOverrides", required: false }] }], content: [{ type: i0.Input, args: [{ isSignal: true, alias: "content", required: false }] }], _ref: [{ type: i0.ViewChild, args: ["_ref", { isSignal: true }] }] } });
 
+const defaultProps$9 = {};
+class DBTableDataCell {
+    constructor() {
+        this.cls = cls;
+        this.getNumber = getNumber;
+        this.id = input(...(ngDevMode ? [undefined, { debugName: "id" }] : /* istanbul ignore next */ []));
+        this.className = input(...(ngDevMode ? [undefined, { debugName: "className" }] : /* istanbul ignore next */ []));
+        this.horizontalAlignment = input(...(ngDevMode ? [undefined, { debugName: "horizontalAlignment" }] : /* istanbul ignore next */ []));
+        this.verticalAlignment = input(...(ngDevMode ? [undefined, { debugName: "verticalAlignment" }] : /* istanbul ignore next */ []));
+        this.colSpan = input(...(ngDevMode ? [undefined, { debugName: "colSpan" }] : /* istanbul ignore next */ []));
+        this.colspan = input(...(ngDevMode ? [undefined, { debugName: "colspan" }] : /* istanbul ignore next */ []));
+        this.rowSpan = input(...(ngDevMode ? [undefined, { debugName: "rowSpan" }] : /* istanbul ignore next */ []));
+        this.rowspan = input(...(ngDevMode ? [undefined, { debugName: "rowspan" }] : /* istanbul ignore next */ []));
+        this.headers = input(...(ngDevMode ? [undefined, { debugName: "headers" }] : /* istanbul ignore next */ []));
+        this._ref = viewChild("_ref", ...(ngDevMode ? [{ debugName: "_ref" }] : /* istanbul ignore next */ []));
+    }
+    /**
+     * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.
+     * @param element  the ref for the component
+     * @param customElementSelector  the custom element like `my-component`
+     */
+    enableAttributePassing(element, customElementSelector) {
+        const parent = element?.closest(customElementSelector);
+        if (element && parent) {
+            const attributes = parent.attributes;
+            for (let i = 0; i < attributes.length; i++) {
+                const attr = attributes.item(i);
+                if (attr && attr.name !== 'data-density' &&
+                    (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))) {
+                    element.setAttribute(attr.name, attr.value);
+                    parent.removeAttribute(attr.name);
+                }
+                else if (attr && attr.name !== 'data-density' && attr.name !== "class" && attr.name === "style") {
+                    element.setAttribute(attr.name, attr.value);
+                    parent.removeAttribute(attr.name);
+                }
+                else if (attr && attr.name === "class") {
+                    const isWebComponent = attr.value.includes("hydrated");
+                    const value = attr.value.replace("hydrated", "").trim();
+                    const currentClass = element.getAttribute("class");
+                    element.setAttribute(attr.name, `${currentClass ? `${currentClass} ` : ""}${value}`);
+                    if (isWebComponent) {
+                        // Stencil is using this class for lazy loading component
+                        parent.setAttribute("class", "hydrated");
+                    }
+                    else {
+                        parent.removeAttribute(attr.name);
+                    }
+                }
+            }
+        }
+    }
+    ngAfterViewInit() {
+        const element = this._ref()?.nativeElement;
+        this.enableAttributePassing(element, "db-table-data-cell");
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: DBTableDataCell, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.16", type: DBTableDataCell, isStandalone: true, selector: "db-table-data-cell", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, horizontalAlignment: { classPropertyName: "horizontalAlignment", publicName: "horizontalAlignment", isSignal: true, isRequired: false, transformFunction: null }, verticalAlignment: { classPropertyName: "verticalAlignment", publicName: "verticalAlignment", isSignal: true, isRequired: false, transformFunction: null }, colSpan: { classPropertyName: "colSpan", publicName: "colSpan", isSignal: true, isRequired: false, transformFunction: null }, colspan: { classPropertyName: "colspan", publicName: "colspan", isSignal: true, isRequired: false, transformFunction: null }, rowSpan: { classPropertyName: "rowSpan", publicName: "rowSpan", isSignal: true, isRequired: false, transformFunction: null }, rowspan: { classPropertyName: "rowspan", publicName: "rowspan", isSignal: true, isRequired: false, transformFunction: null }, headers: { classPropertyName: "headers", publicName: "headers", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "_ref", first: true, predicate: ["_ref"], descendants: true, isSignal: true }], ngImport: i0, template: `<td
+    #_ref
+    [attr.id]="id()"
+    [class]="cls('db-table-data-cell', className())"
+    [attr.data-horizontal-alignment]="horizontalAlignment()"
+    [attr.data-vertical-alignment]="verticalAlignment()"
+    [attr.colSpan]="getNumber(colSpan(), colspan())"
+    [attr.rowSpan]="getNumber(rowSpan(), rowspan())"
+    [attr.headers]="headers()"
+  >
+    <ng-content></ng-content>
+  </td> `, isInline: true, styles: [":host{display:contents}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: DBTableDataCell, decorators: [{
+            type: Component,
+            args: [{ selector: "db-table-data-cell", standalone: true, imports: [CommonModule], template: `<td
+    #_ref
+    [attr.id]="id()"
+    [class]="cls('db-table-data-cell', className())"
+    [attr.data-horizontal-alignment]="horizontalAlignment()"
+    [attr.data-vertical-alignment]="verticalAlignment()"
+    [attr.colSpan]="getNumber(colSpan(), colspan())"
+    [attr.rowSpan]="getNumber(rowSpan(), rowspan())"
+    [attr.headers]="headers()"
+  >
+    <ng-content></ng-content>
+  </td> `, styles: [":host{display:contents}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], className: [{ type: i0.Input, args: [{ isSignal: true, alias: "className", required: false }] }], horizontalAlignment: [{ type: i0.Input, args: [{ isSignal: true, alias: "horizontalAlignment", required: false }] }], verticalAlignment: [{ type: i0.Input, args: [{ isSignal: true, alias: "verticalAlignment", required: false }] }], colSpan: [{ type: i0.Input, args: [{ isSignal: true, alias: "colSpan", required: false }] }], colspan: [{ type: i0.Input, args: [{ isSignal: true, alias: "colspan", required: false }] }], rowSpan: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowSpan", required: false }] }], rowspan: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowspan", required: false }] }], headers: [{ type: i0.Input, args: [{ isSignal: true, alias: "headers", required: false }] }], _ref: [{ type: i0.ViewChild, args: ["_ref", { isSignal: true }] }] } });
+
+const defaultProps$8 = {};
+class DBTableHeaderCell {
+    constructor() {
+        this.cls = cls;
+        this.getBooleanAsString = getBooleanAsString;
+        this.getNumber = getNumber;
+        this.id = input(...(ngDevMode ? [undefined, { debugName: "id" }] : /* istanbul ignore next */ []));
+        this.className = input(...(ngDevMode ? [undefined, { debugName: "className" }] : /* istanbul ignore next */ []));
+        this.horizontalAlignment = input(...(ngDevMode ? [undefined, { debugName: "horizontalAlignment" }] : /* istanbul ignore next */ []));
+        this.verticalAlignment = input(...(ngDevMode ? [undefined, { debugName: "verticalAlignment" }] : /* istanbul ignore next */ []));
+        this.noText = input(...(ngDevMode ? [undefined, { debugName: "noText" }] : /* istanbul ignore next */ []));
+        this.scope = input(...(ngDevMode ? [undefined, { debugName: "scope" }] : /* istanbul ignore next */ []));
+        this.colSpan = input(...(ngDevMode ? [undefined, { debugName: "colSpan" }] : /* istanbul ignore next */ []));
+        this.colspan = input(...(ngDevMode ? [undefined, { debugName: "colspan" }] : /* istanbul ignore next */ []));
+        this.rowSpan = input(...(ngDevMode ? [undefined, { debugName: "rowSpan" }] : /* istanbul ignore next */ []));
+        this.rowspan = input(...(ngDevMode ? [undefined, { debugName: "rowspan" }] : /* istanbul ignore next */ []));
+        this.headers = input(...(ngDevMode ? [undefined, { debugName: "headers" }] : /* istanbul ignore next */ []));
+        this.abbr = input(...(ngDevMode ? [undefined, { debugName: "abbr" }] : /* istanbul ignore next */ []));
+        this._ref = viewChild("_ref", ...(ngDevMode ? [{ debugName: "_ref" }] : /* istanbul ignore next */ []));
+    }
+    /**
+     * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.
+     * @param element  the ref for the component
+     * @param customElementSelector  the custom element like `my-component`
+     */
+    enableAttributePassing(element, customElementSelector) {
+        const parent = element?.closest(customElementSelector);
+        if (element && parent) {
+            const attributes = parent.attributes;
+            for (let i = 0; i < attributes.length; i++) {
+                const attr = attributes.item(i);
+                if (attr && attr.name !== 'data-density' &&
+                    (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))) {
+                    element.setAttribute(attr.name, attr.value);
+                    parent.removeAttribute(attr.name);
+                }
+                else if (attr && attr.name !== 'data-density' && attr.name !== "class" && attr.name === "style") {
+                    element.setAttribute(attr.name, attr.value);
+                    parent.removeAttribute(attr.name);
+                }
+                else if (attr && attr.name === "class") {
+                    const isWebComponent = attr.value.includes("hydrated");
+                    const value = attr.value.replace("hydrated", "").trim();
+                    const currentClass = element.getAttribute("class");
+                    element.setAttribute(attr.name, `${currentClass ? `${currentClass} ` : ""}${value}`);
+                    if (isWebComponent) {
+                        // Stencil is using this class for lazy loading component
+                        parent.setAttribute("class", "hydrated");
+                    }
+                    else {
+                        parent.removeAttribute(attr.name);
+                    }
+                }
+            }
+        }
+    }
+    ngAfterViewInit() {
+        const element = this._ref()?.nativeElement;
+        this.enableAttributePassing(element, "db-table-header-cell");
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: DBTableHeaderCell, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.16", type: DBTableHeaderCell, isStandalone: true, selector: "db-table-header-cell", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, horizontalAlignment: { classPropertyName: "horizontalAlignment", publicName: "horizontalAlignment", isSignal: true, isRequired: false, transformFunction: null }, verticalAlignment: { classPropertyName: "verticalAlignment", publicName: "verticalAlignment", isSignal: true, isRequired: false, transformFunction: null }, noText: { classPropertyName: "noText", publicName: "noText", isSignal: true, isRequired: false, transformFunction: null }, scope: { classPropertyName: "scope", publicName: "scope", isSignal: true, isRequired: false, transformFunction: null }, colSpan: { classPropertyName: "colSpan", publicName: "colSpan", isSignal: true, isRequired: false, transformFunction: null }, colspan: { classPropertyName: "colspan", publicName: "colspan", isSignal: true, isRequired: false, transformFunction: null }, rowSpan: { classPropertyName: "rowSpan", publicName: "rowSpan", isSignal: true, isRequired: false, transformFunction: null }, rowspan: { classPropertyName: "rowspan", publicName: "rowspan", isSignal: true, isRequired: false, transformFunction: null }, headers: { classPropertyName: "headers", publicName: "headers", isSignal: true, isRequired: false, transformFunction: null }, abbr: { classPropertyName: "abbr", publicName: "abbr", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "_ref", first: true, predicate: ["_ref"], descendants: true, isSignal: true }], ngImport: i0, template: `<th
+    #_ref
+    [attr.id]="id()"
+    [class]="cls('db-table-header-cell', className())"
+    [attr.data-horizontal-alignment]="horizontalAlignment()"
+    [attr.data-vertical-alignment]="verticalAlignment()"
+    [attr.data-no-text]="getBooleanAsString(noText())"
+    [attr.scope]="scope()"
+    [attr.colSpan]="getNumber(colSpan(), colspan())"
+    [attr.rowSpan]="getNumber(rowSpan(), rowspan())"
+    [attr.headers]="headers()"
+    [attr.abbr]="abbr()"
+  >
+    <ng-content></ng-content>
+  </th> `, isInline: true, styles: [":host{display:contents}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: DBTableHeaderCell, decorators: [{
+            type: Component,
+            args: [{ selector: "db-table-header-cell", standalone: true, imports: [CommonModule], template: `<th
+    #_ref
+    [attr.id]="id()"
+    [class]="cls('db-table-header-cell', className())"
+    [attr.data-horizontal-alignment]="horizontalAlignment()"
+    [attr.data-vertical-alignment]="verticalAlignment()"
+    [attr.data-no-text]="getBooleanAsString(noText())"
+    [attr.scope]="scope()"
+    [attr.colSpan]="getNumber(colSpan(), colspan())"
+    [attr.rowSpan]="getNumber(rowSpan(), rowspan())"
+    [attr.headers]="headers()"
+    [attr.abbr]="abbr()"
+  >
+    <ng-content></ng-content>
+  </th> `, styles: [":host{display:contents}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], className: [{ type: i0.Input, args: [{ isSignal: true, alias: "className", required: false }] }], horizontalAlignment: [{ type: i0.Input, args: [{ isSignal: true, alias: "horizontalAlignment", required: false }] }], verticalAlignment: [{ type: i0.Input, args: [{ isSignal: true, alias: "verticalAlignment", required: false }] }], noText: [{ type: i0.Input, args: [{ isSignal: true, alias: "noText", required: false }] }], scope: [{ type: i0.Input, args: [{ isSignal: true, alias: "scope", required: false }] }], colSpan: [{ type: i0.Input, args: [{ isSignal: true, alias: "colSpan", required: false }] }], colspan: [{ type: i0.Input, args: [{ isSignal: true, alias: "colspan", required: false }] }], rowSpan: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowSpan", required: false }] }], rowspan: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowspan", required: false }] }], headers: [{ type: i0.Input, args: [{ isSignal: true, alias: "headers", required: false }] }], abbr: [{ type: i0.Input, args: [{ isSignal: true, alias: "abbr", required: false }] }], _ref: [{ type: i0.ViewChild, args: ["_ref", { isSignal: true }] }] } });
+
+const defaultProps$7 = {};
+class DBTableRow {
+    getHeaderCell(cell) {
+        if (cell.headerCell) {
+            return cell;
+        }
+        return undefined;
+    }
+    constructor() {
+        this.cls = cls;
+        this.getBooleanAsString = getBooleanAsString;
+        this.uuid = uuid;
+        this.id = input(...(ngDevMode ? [undefined, { debugName: "id" }] : /* istanbul ignore next */ []));
+        this.className = input(...(ngDevMode ? [undefined, { debugName: "className" }] : /* istanbul ignore next */ []));
+        this.interactive = input(...(ngDevMode ? [undefined, { debugName: "interactive" }] : /* istanbul ignore next */ []));
+        this.subHeaderEmphasis = input(...(ngDevMode ? [undefined, { debugName: "subHeaderEmphasis" }] : /* istanbul ignore next */ []));
+        this.cells = input(...(ngDevMode ? [undefined, { debugName: "cells" }] : /* istanbul ignore next */ []));
+        this._ref = viewChild("_ref", ...(ngDevMode ? [{ debugName: "_ref" }] : /* istanbul ignore next */ []));
+    }
+    /**
+     * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.
+     * @param element  the ref for the component
+     * @param customElementSelector  the custom element like `my-component`
+     */
+    enableAttributePassing(element, customElementSelector) {
+        const parent = element?.closest(customElementSelector);
+        if (element && parent) {
+            const attributes = parent.attributes;
+            for (let i = 0; i < attributes.length; i++) {
+                const attr = attributes.item(i);
+                if (attr && attr.name !== 'data-density' &&
+                    (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))) {
+                    element.setAttribute(attr.name, attr.value);
+                    parent.removeAttribute(attr.name);
+                }
+                else if (attr && attr.name !== 'data-density' && attr.name !== "class" && attr.name === "style") {
+                    element.setAttribute(attr.name, attr.value);
+                    parent.removeAttribute(attr.name);
+                }
+                else if (attr && attr.name === "class") {
+                    const isWebComponent = attr.value.includes("hydrated");
+                    const value = attr.value.replace("hydrated", "").trim();
+                    const currentClass = element.getAttribute("class");
+                    element.setAttribute(attr.name, `${currentClass ? `${currentClass} ` : ""}${value}`);
+                    if (isWebComponent) {
+                        // Stencil is using this class for lazy loading component
+                        parent.setAttribute("class", "hydrated");
+                    }
+                    else {
+                        parent.removeAttribute(attr.name);
+                    }
+                }
+            }
+        }
+    }
+    ngAfterViewInit() {
+        const element = this._ref()?.nativeElement;
+        this.enableAttributePassing(element, "db-table-row");
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: DBTableRow, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.16", type: DBTableRow, isStandalone: true, selector: "db-table-row", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, interactive: { classPropertyName: "interactive", publicName: "interactive", isSignal: true, isRequired: false, transformFunction: null }, subHeaderEmphasis: { classPropertyName: "subHeaderEmphasis", publicName: "subHeaderEmphasis", isSignal: true, isRequired: false, transformFunction: null }, cells: { classPropertyName: "cells", publicName: "cells", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "_ref", first: true, predicate: ["_ref"], descendants: true, isSignal: true }], ngImport: i0, template: `<tr
+    #_ref
+    [attr.id]="id()"
+    [class]="cls('db-table-row', className())"
+    [attr.data-interactive]="getBooleanAsString(interactive())"
+    [attr.data-sub-header-emphasis]="subHeaderEmphasis()"
+  >
+    @if(cells()){ @for (cell of cells();track index;let index = $index) {
+    @if(cell.headerCell){
+    <db-table-header-cell
+      [id]="cell.id"
+      [abbr]="getHeaderCell(cell)?.abbr"
+      [scope]="getHeaderCell(cell)?.scope"
+      [noText]="getHeaderCell(cell)?.noText"
+      [className]="cell.className ?? cell.class"
+      [horizontalAlignment]="cell.horizontalAlignment"
+      [verticalAlignment]="cell.verticalAlignment"
+      [headers]="cell.headers"
+      [colSpan]="cell.colSpan"
+      [colspan]="cell.colspan"
+      [rowSpan]="cell.rowSpan"
+      [rowspan]="cell.rowspan"
+      >@if(cell.link){
+      <db-link
+        [content]="cell.link?.content"
+        [size]="cell.link?.size"
+        [variant]="cell.link?.variant"
+        [className]="cell.link?.className ?? cell.link?.class"
+        [id]="cell.link?.id"
+        [autofocus]="cell.link?.autofocus"
+        [disabled]="cell.link?.disabled"
+        [href]="cell.link?.href"
+        [hreflang]="cell.link?.hreflang"
+        [target]="cell.link?.target"
+        [rel]="cell.link?.rel"
+        [referrerPolicy]="cell.link?.referrerPolicy"
+        [role]="cell.link?.role"
+        [showIcon]="cell.link?.showIcon"
+        [text]="cell.link?.text"
+        [wrap]="cell.link?.wrap"
+        >{{cell.link?.children}}</db-link
+      >
+      }@else{{{cell.content}}}</db-table-header-cell
+    >
+    }@else{
+    <db-table-data-cell
+      [id]="cell.id"
+      [className]="cell.className ?? cell.class"
+      [horizontalAlignment]="cell.horizontalAlignment"
+      [verticalAlignment]="cell.verticalAlignment"
+      [headers]="cell.headers"
+      [colSpan]="cell.colSpan"
+      [colspan]="cell.colspan"
+      [rowSpan]="cell.rowSpan"
+      [rowspan]="cell.rowspan"
+      >@if(cell.link){
+      <db-link
+        [content]="cell.link?.content"
+        [size]="cell.link?.size"
+        [variant]="cell.link?.variant"
+        [className]="cell.link?.className ?? cell.link?.class"
+        [id]="cell.link?.id"
+        [autofocus]="cell.link?.autofocus"
+        [disabled]="cell.link?.disabled"
+        [href]="cell.link?.href"
+        [hreflang]="cell.link?.hreflang"
+        [target]="cell.link?.target"
+        [rel]="cell.link?.rel"
+        [referrerPolicy]="cell.link?.referrerPolicy"
+        [role]="cell.link?.role"
+        [showIcon]="cell.link?.showIcon"
+        [text]="cell.link?.text"
+        [wrap]="cell.link?.wrap"
+        >{{cell.link?.children}}</db-link
+      >
+      }@else{{{cell.content}}}</db-table-data-cell
+    >
+    } } }@else{
+    <ng-content></ng-content>
+    }
+  </tr> `, isInline: true, styles: [":host{display:contents}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: DBTableDataCell, selector: "db-table-data-cell", inputs: ["id", "className", "horizontalAlignment", "verticalAlignment", "colSpan", "colspan", "rowSpan", "rowspan", "headers"] }, { kind: "component", type: DBLink, selector: "db-link", inputs: ["id", "propOverrides", "className", "href", "target", "rel", "role", "referrerpolicy", "referrerPolicy", "hreflang", "disabled", "size", "showIcon", "variant", "content", "wrap", "text"] }, { kind: "component", type: DBTableHeaderCell, selector: "db-table-header-cell", inputs: ["id", "className", "horizontalAlignment", "verticalAlignment", "noText", "scope", "colSpan", "colspan", "rowSpan", "rowspan", "headers", "abbr"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: DBTableRow, decorators: [{
+            type: Component,
+            args: [{ selector: "db-table-row", standalone: true, imports: [CommonModule, DBTableDataCell, DBLink, DBTableHeaderCell], template: `<tr
+    #_ref
+    [attr.id]="id()"
+    [class]="cls('db-table-row', className())"
+    [attr.data-interactive]="getBooleanAsString(interactive())"
+    [attr.data-sub-header-emphasis]="subHeaderEmphasis()"
+  >
+    @if(cells()){ @for (cell of cells();track index;let index = $index) {
+    @if(cell.headerCell){
+    <db-table-header-cell
+      [id]="cell.id"
+      [abbr]="getHeaderCell(cell)?.abbr"
+      [scope]="getHeaderCell(cell)?.scope"
+      [noText]="getHeaderCell(cell)?.noText"
+      [className]="cell.className ?? cell.class"
+      [horizontalAlignment]="cell.horizontalAlignment"
+      [verticalAlignment]="cell.verticalAlignment"
+      [headers]="cell.headers"
+      [colSpan]="cell.colSpan"
+      [colspan]="cell.colspan"
+      [rowSpan]="cell.rowSpan"
+      [rowspan]="cell.rowspan"
+      >@if(cell.link){
+      <db-link
+        [content]="cell.link?.content"
+        [size]="cell.link?.size"
+        [variant]="cell.link?.variant"
+        [className]="cell.link?.className ?? cell.link?.class"
+        [id]="cell.link?.id"
+        [autofocus]="cell.link?.autofocus"
+        [disabled]="cell.link?.disabled"
+        [href]="cell.link?.href"
+        [hreflang]="cell.link?.hreflang"
+        [target]="cell.link?.target"
+        [rel]="cell.link?.rel"
+        [referrerPolicy]="cell.link?.referrerPolicy"
+        [role]="cell.link?.role"
+        [showIcon]="cell.link?.showIcon"
+        [text]="cell.link?.text"
+        [wrap]="cell.link?.wrap"
+        >{{cell.link?.children}}</db-link
+      >
+      }@else{{{cell.content}}}</db-table-header-cell
+    >
+    }@else{
+    <db-table-data-cell
+      [id]="cell.id"
+      [className]="cell.className ?? cell.class"
+      [horizontalAlignment]="cell.horizontalAlignment"
+      [verticalAlignment]="cell.verticalAlignment"
+      [headers]="cell.headers"
+      [colSpan]="cell.colSpan"
+      [colspan]="cell.colspan"
+      [rowSpan]="cell.rowSpan"
+      [rowspan]="cell.rowspan"
+      >@if(cell.link){
+      <db-link
+        [content]="cell.link?.content"
+        [size]="cell.link?.size"
+        [variant]="cell.link?.variant"
+        [className]="cell.link?.className ?? cell.link?.class"
+        [id]="cell.link?.id"
+        [autofocus]="cell.link?.autofocus"
+        [disabled]="cell.link?.disabled"
+        [href]="cell.link?.href"
+        [hreflang]="cell.link?.hreflang"
+        [target]="cell.link?.target"
+        [rel]="cell.link?.rel"
+        [referrerPolicy]="cell.link?.referrerPolicy"
+        [role]="cell.link?.role"
+        [showIcon]="cell.link?.showIcon"
+        [text]="cell.link?.text"
+        [wrap]="cell.link?.wrap"
+        >{{cell.link?.children}}</db-link
+      >
+      }@else{{{cell.content}}}</db-table-data-cell
+    >
+    } } }@else{
+    <ng-content></ng-content>
+    }
+  </tr> `, styles: [":host{display:contents}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], className: [{ type: i0.Input, args: [{ isSignal: true, alias: "className", required: false }] }], interactive: [{ type: i0.Input, args: [{ isSignal: true, alias: "interactive", required: false }] }], subHeaderEmphasis: [{ type: i0.Input, args: [{ isSignal: true, alias: "subHeaderEmphasis", required: false }] }], cells: [{ type: i0.Input, args: [{ isSignal: true, alias: "cells", required: false }] }], _ref: [{ type: i0.ViewChild, args: ["_ref", { isSignal: true }] }] } });
+
+const defaultProps$6 = {};
+class DBTableBody {
+    trackByRow0(index, row) {
+        return `${row.id ?? this.id() ?? uuid()}-table-body-row-${index}`;
+    }
+    constructor() {
+        this.cls = cls;
+        this.uuid = uuid;
+        this.id = input(...(ngDevMode ? [undefined, { debugName: "id" }] : /* istanbul ignore next */ []));
+        this.className = input(...(ngDevMode ? [undefined, { debugName: "className" }] : /* istanbul ignore next */ []));
+        this.rows = input(...(ngDevMode ? [undefined, { debugName: "rows" }] : /* istanbul ignore next */ []));
+        this._ref = viewChild("_ref", ...(ngDevMode ? [{ debugName: "_ref" }] : /* istanbul ignore next */ []));
+    }
+    /**
+     * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.
+     * @param element  the ref for the component
+     * @param customElementSelector  the custom element like `my-component`
+     */
+    enableAttributePassing(element, customElementSelector) {
+        const parent = element?.closest(customElementSelector);
+        if (element && parent) {
+            const attributes = parent.attributes;
+            for (let i = 0; i < attributes.length; i++) {
+                const attr = attributes.item(i);
+                if (attr && attr.name !== 'data-density' &&
+                    (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))) {
+                    element.setAttribute(attr.name, attr.value);
+                    parent.removeAttribute(attr.name);
+                }
+                else if (attr && attr.name !== 'data-density' && attr.name !== "class" && attr.name === "style") {
+                    element.setAttribute(attr.name, attr.value);
+                    parent.removeAttribute(attr.name);
+                }
+                else if (attr && attr.name === "class") {
+                    const isWebComponent = attr.value.includes("hydrated");
+                    const value = attr.value.replace("hydrated", "").trim();
+                    const currentClass = element.getAttribute("class");
+                    element.setAttribute(attr.name, `${currentClass ? `${currentClass} ` : ""}${value}`);
+                    if (isWebComponent) {
+                        // Stencil is using this class for lazy loading component
+                        parent.setAttribute("class", "hydrated");
+                    }
+                    else {
+                        parent.removeAttribute(attr.name);
+                    }
+                }
+            }
+        }
+    }
+    ngAfterViewInit() {
+        const element = this._ref()?.nativeElement;
+        this.enableAttributePassing(element, "db-table-body");
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: DBTableBody, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.16", type: DBTableBody, isStandalone: true, selector: "db-table-body", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "_ref", first: true, predicate: ["_ref"], descendants: true, isSignal: true }], ngImport: i0, template: `<tbody
+    #_ref
+    [attr.id]="id()"
+    [class]="cls('db-table-body', className())"
+  >
+    @if(rows()){ @for (row of rows();track trackByRow0(index, row);let index =
+    $index) {
+    <db-table-row
+      [cells]="row.cells"
+      [className]="row.className ?? row.class"
+      [interactive]="row.interactive"
+      [id]="row.id"
+    ></db-table-row>
+    } }@else{
+    <ng-content></ng-content>
+    }
+  </tbody> `, isInline: true, styles: [":host{display:contents}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: DBTableRow, selector: "db-table-row", inputs: ["id", "className", "interactive", "subHeaderEmphasis", "cells"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: DBTableBody, decorators: [{
+            type: Component,
+            args: [{ selector: "db-table-body", standalone: true, imports: [CommonModule, DBTableRow], template: `<tbody
+    #_ref
+    [attr.id]="id()"
+    [class]="cls('db-table-body', className())"
+  >
+    @if(rows()){ @for (row of rows();track trackByRow0(index, row);let index =
+    $index) {
+    <db-table-row
+      [cells]="row.cells"
+      [className]="row.className ?? row.class"
+      [interactive]="row.interactive"
+      [id]="row.id"
+    ></db-table-row>
+    } }@else{
+    <ng-content></ng-content>
+    }
+  </tbody> `, styles: [":host{display:contents}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], className: [{ type: i0.Input, args: [{ isSignal: true, alias: "className", required: false }] }], rows: [{ type: i0.Input, args: [{ isSignal: true, alias: "rows", required: false }] }], _ref: [{ type: i0.ViewChild, args: ["_ref", { isSignal: true }] }] } });
+
+const defaultProps$5 = {};
+class DBTableFooter {
+    trackByRow0(index, row) {
+        return `${row.id ?? this.id() ?? uuid()}-table-footer-row-${index}`;
+    }
+    constructor() {
+        this.cls = cls;
+        this.uuid = uuid;
+        this.id = input(...(ngDevMode ? [undefined, { debugName: "id" }] : /* istanbul ignore next */ []));
+        this.className = input(...(ngDevMode ? [undefined, { debugName: "className" }] : /* istanbul ignore next */ []));
+        this.rows = input(...(ngDevMode ? [undefined, { debugName: "rows" }] : /* istanbul ignore next */ []));
+        this._ref = viewChild("_ref", ...(ngDevMode ? [{ debugName: "_ref" }] : /* istanbul ignore next */ []));
+    }
+    /**
+     * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.
+     * @param element  the ref for the component
+     * @param customElementSelector  the custom element like `my-component`
+     */
+    enableAttributePassing(element, customElementSelector) {
+        const parent = element?.closest(customElementSelector);
+        if (element && parent) {
+            const attributes = parent.attributes;
+            for (let i = 0; i < attributes.length; i++) {
+                const attr = attributes.item(i);
+                if (attr && attr.name !== 'data-density' &&
+                    (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))) {
+                    element.setAttribute(attr.name, attr.value);
+                    parent.removeAttribute(attr.name);
+                }
+                else if (attr && attr.name !== 'data-density' && attr.name !== "class" && attr.name === "style") {
+                    element.setAttribute(attr.name, attr.value);
+                    parent.removeAttribute(attr.name);
+                }
+                else if (attr && attr.name === "class") {
+                    const isWebComponent = attr.value.includes("hydrated");
+                    const value = attr.value.replace("hydrated", "").trim();
+                    const currentClass = element.getAttribute("class");
+                    element.setAttribute(attr.name, `${currentClass ? `${currentClass} ` : ""}${value}`);
+                    if (isWebComponent) {
+                        // Stencil is using this class for lazy loading component
+                        parent.setAttribute("class", "hydrated");
+                    }
+                    else {
+                        parent.removeAttribute(attr.name);
+                    }
+                }
+            }
+        }
+    }
+    ngAfterViewInit() {
+        const element = this._ref()?.nativeElement;
+        this.enableAttributePassing(element, "db-table-footer");
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: DBTableFooter, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.16", type: DBTableFooter, isStandalone: true, selector: "db-table-footer", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "_ref", first: true, predicate: ["_ref"], descendants: true, isSignal: true }], ngImport: i0, template: `<tfoot
+    #_ref
+    [attr.id]="id()"
+    [class]="cls('db-table-footer', className())"
+  >
+    @if(rows()){ @for (row of rows();track trackByRow0(index, row);let index =
+    $index) {
+    <db-table-row
+      [cells]="row.cells"
+      [className]="row.className ?? row.class"
+      [interactive]="row.interactive"
+      [id]="row.id"
+    ></db-table-row>
+    } }@else{
+    <ng-content></ng-content>
+    }
+  </tfoot> `, isInline: true, styles: [":host{display:contents}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: DBTableRow, selector: "db-table-row", inputs: ["id", "className", "interactive", "subHeaderEmphasis", "cells"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: DBTableFooter, decorators: [{
+            type: Component,
+            args: [{ selector: "db-table-footer", standalone: true, imports: [CommonModule, DBTableRow], template: `<tfoot
+    #_ref
+    [attr.id]="id()"
+    [class]="cls('db-table-footer', className())"
+  >
+    @if(rows()){ @for (row of rows();track trackByRow0(index, row);let index =
+    $index) {
+    <db-table-row
+      [cells]="row.cells"
+      [className]="row.className ?? row.class"
+      [interactive]="row.interactive"
+      [id]="row.id"
+    ></db-table-row>
+    } }@else{
+    <ng-content></ng-content>
+    }
+  </tfoot> `, styles: [":host{display:contents}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], className: [{ type: i0.Input, args: [{ isSignal: true, alias: "className", required: false }] }], rows: [{ type: i0.Input, args: [{ isSignal: true, alias: "rows", required: false }] }], _ref: [{ type: i0.ViewChild, args: ["_ref", { isSignal: true }] }] } });
+
+const defaultProps$4 = {};
+class DBTableHead {
+    getCells(cells) {
+        return cells?.map((cell) => ({
+            ...cell,
+            headerCell: true,
+        }));
+    }
+    trackByRow0(index, row) {
+        return `${row.id ?? this.id() ?? uuid()}-table-head-row-${index}`;
+    }
+    constructor() {
+        this.cls = cls;
+        this.uuid = uuid;
+        this.id = input(...(ngDevMode ? [undefined, { debugName: "id" }] : /* istanbul ignore next */ []));
+        this.className = input(...(ngDevMode ? [undefined, { debugName: "className" }] : /* istanbul ignore next */ []));
+        this.rows = input(...(ngDevMode ? [undefined, { debugName: "rows" }] : /* istanbul ignore next */ []));
+        this._ref = viewChild("_ref", ...(ngDevMode ? [{ debugName: "_ref" }] : /* istanbul ignore next */ []));
+    }
+    /**
+     * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.
+     * @param element  the ref for the component
+     * @param customElementSelector  the custom element like `my-component`
+     */
+    enableAttributePassing(element, customElementSelector) {
+        const parent = element?.closest(customElementSelector);
+        if (element && parent) {
+            const attributes = parent.attributes;
+            for (let i = 0; i < attributes.length; i++) {
+                const attr = attributes.item(i);
+                if (attr && attr.name !== 'data-density' &&
+                    (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))) {
+                    element.setAttribute(attr.name, attr.value);
+                    parent.removeAttribute(attr.name);
+                }
+                else if (attr && attr.name !== 'data-density' && attr.name !== "class" && attr.name === "style") {
+                    element.setAttribute(attr.name, attr.value);
+                    parent.removeAttribute(attr.name);
+                }
+                else if (attr && attr.name === "class") {
+                    const isWebComponent = attr.value.includes("hydrated");
+                    const value = attr.value.replace("hydrated", "").trim();
+                    const currentClass = element.getAttribute("class");
+                    element.setAttribute(attr.name, `${currentClass ? `${currentClass} ` : ""}${value}`);
+                    if (isWebComponent) {
+                        // Stencil is using this class for lazy loading component
+                        parent.setAttribute("class", "hydrated");
+                    }
+                    else {
+                        parent.removeAttribute(attr.name);
+                    }
+                }
+            }
+        }
+    }
+    ngAfterViewInit() {
+        const element = this._ref()?.nativeElement;
+        this.enableAttributePassing(element, "db-table-head");
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: DBTableHead, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.16", type: DBTableHead, isStandalone: true, selector: "db-table-head", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "_ref", first: true, predicate: ["_ref"], descendants: true, isSignal: true }], ngImport: i0, template: `<thead
+    #_ref
+    [attr.id]="id()"
+    [class]="cls('db-table-head', className())"
+  >
+    @if(rows()){ @for (row of rows();track trackByRow0(index, row);let index =
+    $index) {
+    <db-table-row
+      [cells]="getCells(row.cells)"
+      [className]="row.className ?? row.class"
+      [subHeaderEmphasis]="row.subHeaderEmphasis"
+      [interactive]="row.interactive"
+      [id]="row.id"
+    ></db-table-row>
+    } }@else{
+    <ng-content></ng-content>
+    }
+  </thead> `, isInline: true, styles: [":host{display:contents}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: DBTableRow, selector: "db-table-row", inputs: ["id", "className", "interactive", "subHeaderEmphasis", "cells"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: DBTableHead, decorators: [{
+            type: Component,
+            args: [{ selector: "db-table-head", standalone: true, imports: [CommonModule, DBTableRow], template: `<thead
+    #_ref
+    [attr.id]="id()"
+    [class]="cls('db-table-head', className())"
+  >
+    @if(rows()){ @for (row of rows();track trackByRow0(index, row);let index =
+    $index) {
+    <db-table-row
+      [cells]="getCells(row.cells)"
+      [className]="row.className ?? row.class"
+      [subHeaderEmphasis]="row.subHeaderEmphasis"
+      [interactive]="row.interactive"
+      [id]="row.id"
+    ></db-table-row>
+    } }@else{
+    <ng-content></ng-content>
+    }
+  </thead> `, styles: [":host{display:contents}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], className: [{ type: i0.Input, args: [{ isSignal: true, alias: "className", required: false }] }], rows: [{ type: i0.Input, args: [{ isSignal: true, alias: "rows", required: false }] }], _ref: [{ type: i0.ViewChild, args: ["_ref", { isSignal: true }] }] } });
+
+const defaultProps$3 = {};
+class DBTable {
+    convertData() {
+        try {
+            if (typeof this.data() === "string") {
+                return JSON.parse(this.data());
+            }
+            return this.data();
+        }
+        catch (error) {
+            console.error(error);
+        }
+        return {};
+    }
+    constructor() {
+        this.cls = cls;
+        this.getBooleanAsString = getBooleanAsString;
+        this.data = input(...(ngDevMode ? [undefined, { debugName: "data" }] : /* istanbul ignore next */ []));
+        this.mobileVariant = input(...(ngDevMode ? [undefined, { debugName: "mobileVariant" }] : /* istanbul ignore next */ []));
+        this.columnSizes = input(...(ngDevMode ? [undefined, { debugName: "columnSizes" }] : /* istanbul ignore next */ []));
+        this.className = input(...(ngDevMode ? [undefined, { debugName: "className" }] : /* istanbul ignore next */ []));
+        this.width = input(...(ngDevMode ? [undefined, { debugName: "width" }] : /* istanbul ignore next */ []));
+        this.size = input(...(ngDevMode ? [undefined, { debugName: "size" }] : /* istanbul ignore next */ []));
+        this.divider = input(...(ngDevMode ? [undefined, { debugName: "divider" }] : /* istanbul ignore next */ []));
+        this.variant = input(...(ngDevMode ? [undefined, { debugName: "variant" }] : /* istanbul ignore next */ []));
+        this.showCaption = input(...(ngDevMode ? [undefined, { debugName: "showCaption" }] : /* istanbul ignore next */ []));
+        this.stickyHeader = input(...(ngDevMode ? [undefined, { debugName: "stickyHeader" }] : /* istanbul ignore next */ []));
+        this.id = input(...(ngDevMode ? [undefined, { debugName: "id" }] : /* istanbul ignore next */ []));
+        this.captionPlain = input(...(ngDevMode ? [undefined, { debugName: "captionPlain" }] : /* istanbul ignore next */ []));
+        this._ref = viewChild("_ref", ...(ngDevMode ? [{ debugName: "_ref" }] : /* istanbul ignore next */ []));
+        this._data = signal(undefined, ...(ngDevMode ? [{ debugName: "_data" }] : /* istanbul ignore next */ []));
+        this._style = signal(undefined, ...(ngDevMode ? [{ debugName: "_style" }] : /* istanbul ignore next */ []));
+        if (typeof window !== "undefined") {
+            effect(() => {
+                // --- Mitosis: Workaround to make sure the effect() is triggered ---
+                this.data();
+                // ---
+                if (this.data()) {
+                    this._data.set(this.convertData());
+                }
+                else {
+                    this._data.set(undefined);
+                }
+            }, Number(VERSION.major) < 19
+                ? { allowSignalWrites: true }
+                : undefined);
+            effect(() => {
+                // --- Mitosis: Workaround to make sure the effect() is triggered ---
+                this.mobileVariant();
+                this._ref();
+                this._data();
+                // ---
+                if (this._ref()?.nativeElement && this.mobileVariant() === "list") {
+                    // Delay for angular
+                    void delay(() => {
+                        const table = this._ref()?.nativeElement;
+                        if (!table)
+                            return;
+                        const headerCells = table.querySelectorAll("thead tr th");
+                        if (headerCells.length) {
+                            const otherRows = table.querySelectorAll(":is(tbody,tfoot) tr");
+                            otherRows.forEach((row) => {
+                                const cells = row.querySelectorAll(":is(td,th)");
+                                cells.forEach((cell, index) => {
+                                    const headerCell = headerCells[index];
+                                    if (headerCell) {
+                                        // Use only direct text nodes to avoid including text from nested elements (e.g. sort buttons)
+                                        const directText = Array.from(headerCell.childNodes)
+                                            .filter((node) => node.nodeType === Node.TEXT_NODE)
+                                            .map((node) => node.textContent?.trim())
+                                            .filter(Boolean)
+                                            .join(" ");
+                                        if (directText) {
+                                            cell.dataset["header"] = directText;
+                                        }
+                                    }
+                                });
+                            });
+                        }
+                    }, 1);
+                }
+            }, Number(VERSION.major) < 19
+                ? { allowSignalWrites: true }
+                : undefined);
+            effect(() => {
+                // --- Mitosis: Workaround to make sure the effect() is triggered ---
+                this.columnSizes();
+                // ---
+                if (this.columnSizes()) {
+                    const columnStyles = {};
+                    Object.entries(this.columnSizes()).forEach(([key, value]) => {
+                        columnStyles[`--db-table-column-size-${key}`] = value;
+                    });
+                    this._style.set(columnStyles);
+                }
+                else {
+                    this._style.set(undefined);
+                }
+            }, Number(VERSION.major) < 19
+                ? { allowSignalWrites: true }
+                : undefined);
+        }
+    }
+    /**
+     * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.
+     * @param element  the ref for the component
+     * @param customElementSelector  the custom element like `my-component`
+     */
+    enableAttributePassing(element, customElementSelector) {
+        const parent = element?.closest(customElementSelector);
+        if (element && parent) {
+            const attributes = parent.attributes;
+            for (let i = 0; i < attributes.length; i++) {
+                const attr = attributes.item(i);
+                if (attr && attr.name !== 'data-density' &&
+                    (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))) {
+                    element.setAttribute(attr.name, attr.value);
+                    parent.removeAttribute(attr.name);
+                }
+                else if (attr && attr.name !== 'data-density' && attr.name !== "class" && attr.name === "style") {
+                    element.setAttribute(attr.name, attr.value);
+                    parent.removeAttribute(attr.name);
+                }
+                else if (attr && attr.name === "class") {
+                    const isWebComponent = attr.value.includes("hydrated");
+                    const value = attr.value.replace("hydrated", "").trim();
+                    const currentClass = element.getAttribute("class");
+                    element.setAttribute(attr.name, `${currentClass ? `${currentClass} ` : ""}${value}`);
+                    if (isWebComponent) {
+                        // Stencil is using this class for lazy loading component
+                        parent.setAttribute("class", "hydrated");
+                    }
+                    else {
+                        parent.removeAttribute(attr.name);
+                    }
+                }
+            }
+        }
+    }
+    ngAfterViewInit() {
+        const element = this._ref()?.nativeElement;
+        this.enableAttributePassing(element, "db-table");
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: DBTable, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.16", type: DBTable, isStandalone: true, selector: "db-table", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, mobileVariant: { classPropertyName: "mobileVariant", publicName: "mobileVariant", isSignal: true, isRequired: false, transformFunction: null }, columnSizes: { classPropertyName: "columnSizes", publicName: "columnSizes", 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 }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, divider: { classPropertyName: "divider", publicName: "divider", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, showCaption: { classPropertyName: "showCaption", publicName: "showCaption", isSignal: true, isRequired: false, transformFunction: null }, stickyHeader: { classPropertyName: "stickyHeader", publicName: "stickyHeader", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, captionPlain: { classPropertyName: "captionPlain", publicName: "captionPlain", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "_ref", first: true, predicate: ["_ref"], descendants: true, isSignal: true }], ngImport: i0, template: `<div
+    [class]="cls('db-table', className())"
+    [ngStyle]="_style()"
+    [attr.data-width]="width()"
+    [attr.data-size]="size()"
+    [attr.data-divider]="divider()"
+    [attr.data-variant]="variant()"
+    [attr.data-mobile-variant]="mobileVariant()"
+    [attr.data-show-caption]="getBooleanAsString(showCaption())"
+    [attr.data-sticky-header]="stickyHeader()"
+  >
+    <table #_ref [attr.id]="id()">
+      @if(captionPlain()){
+      <caption>
+        {{captionPlain()}}
+      </caption>
+      }@else{
+      <ng-content select="[caption]"> </ng-content>
+      } @if(_data()){ @if(_data()?.header){
+      <db-table-head [rows]="_data()?.header"></db-table-head>
+      } @if(_data()?.body){
+      <db-table-body [rows]="_data()?.body"></db-table-body>
+      } @if(_data()?.footer){
+      <db-table-footer [rows]="_data()?.footer"></db-table-footer>
+      } }@else{
+      <ng-content></ng-content>
+      }
+    </table>
+  </div> `, isInline: true, styles: [":host{display:contents}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: DBTableHead, selector: "db-table-head", inputs: ["id", "className", "rows"] }, { kind: "component", type: DBTableBody, selector: "db-table-body", inputs: ["id", "className", "rows"] }, { kind: "component", type: DBTableFooter, selector: "db-table-footer", inputs: ["id", "className", "rows"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: DBTable, decorators: [{
+            type: Component,
+            args: [{ selector: "db-table", standalone: true, imports: [CommonModule, DBTableHead, DBTableBody, DBTableFooter], template: `<div
+    [class]="cls('db-table', className())"
+    [ngStyle]="_style()"
+    [attr.data-width]="width()"
+    [attr.data-size]="size()"
+    [attr.data-divider]="divider()"
+    [attr.data-variant]="variant()"
+    [attr.data-mobile-variant]="mobileVariant()"
+    [attr.data-show-caption]="getBooleanAsString(showCaption())"
+    [attr.data-sticky-header]="stickyHeader()"
+  >
+    <table #_ref [attr.id]="id()">
+      @if(captionPlain()){
+      <caption>
+        {{captionPlain()}}
+      </caption>
+      }@else{
+      <ng-content select="[caption]"> </ng-content>
+      } @if(_data()){ @if(_data()?.header){
+      <db-table-head [rows]="_data()?.header"></db-table-head>
+      } @if(_data()?.body){
+      <db-table-body [rows]="_data()?.body"></db-table-body>
+      } @if(_data()?.footer){
+      <db-table-footer [rows]="_data()?.footer"></db-table-footer>
+      } }@else{
+      <ng-content></ng-content>
+      }
+    </table>
+  </div> `, styles: [":host{display:contents}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], mobileVariant: [{ type: i0.Input, args: [{ isSignal: true, alias: "mobileVariant", required: false }] }], columnSizes: [{ type: i0.Input, args: [{ isSignal: true, alias: "columnSizes", required: false }] }], className: [{ type: i0.Input, args: [{ isSignal: true, alias: "className", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], divider: [{ type: i0.Input, args: [{ isSignal: true, alias: "divider", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], showCaption: [{ type: i0.Input, args: [{ isSignal: true, alias: "showCaption", required: false }] }], stickyHeader: [{ type: i0.Input, args: [{ isSignal: true, alias: "stickyHeader", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], captionPlain: [{ type: i0.Input, args: [{ isSignal: true, alias: "captionPlain", required: false }] }], _ref: [{ type: i0.ViewChild, args: ["_ref", { isSignal: true }] }] } });
+
+const defaultProps$2 = {};
+class DBTableCaption {
+    constructor() {
+        this.cls = cls;
+        this.id = input(...(ngDevMode ? [undefined, { debugName: "id" }] : /* istanbul ignore next */ []));
+        this.className = input(...(ngDevMode ? [undefined, { debugName: "className" }] : /* istanbul ignore next */ []));
+        this._ref = viewChild("_ref", ...(ngDevMode ? [{ debugName: "_ref" }] : /* istanbul ignore next */ []));
+    }
+    /**
+     * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.
+     * @param element  the ref for the component
+     * @param customElementSelector  the custom element like `my-component`
+     */
+    enableAttributePassing(element, customElementSelector) {
+        const parent = element?.closest(customElementSelector);
+        if (element && parent) {
+            const attributes = parent.attributes;
+            for (let i = 0; i < attributes.length; i++) {
+                const attr = attributes.item(i);
+                if (attr && attr.name !== 'data-density' &&
+                    (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))) {
+                    element.setAttribute(attr.name, attr.value);
+                    parent.removeAttribute(attr.name);
+                }
+                else if (attr && attr.name !== 'data-density' && attr.name !== "class" && attr.name === "style") {
+                    element.setAttribute(attr.name, attr.value);
+                    parent.removeAttribute(attr.name);
+                }
+                else if (attr && attr.name === "class") {
+                    const isWebComponent = attr.value.includes("hydrated");
+                    const value = attr.value.replace("hydrated", "").trim();
+                    const currentClass = element.getAttribute("class");
+                    element.setAttribute(attr.name, `${currentClass ? `${currentClass} ` : ""}${value}`);
+                    if (isWebComponent) {
+                        // Stencil is using this class for lazy loading component
+                        parent.setAttribute("class", "hydrated");
+                    }
+                    else {
+                        parent.removeAttribute(attr.name);
+                    }
+                }
+            }
+        }
+    }
+    ngAfterViewInit() {
+        const element = this._ref()?.nativeElement;
+        this.enableAttributePassing(element, "db-table-caption");
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: DBTableCaption, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.16", type: DBTableCaption, isStandalone: true, selector: "db-table-caption", 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: `<caption
+    #_ref
+    [attr.id]="id()"
+    [class]="cls('db-table-caption', className())"
+  >
+    <ng-content></ng-content>
+  </caption> `, isInline: true, styles: [":host{display:contents}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: DBTableCaption, decorators: [{
+            type: Component,
+            args: [{ selector: "db-table-caption", standalone: true, imports: [CommonModule], template: `<caption
+    #_ref
+    [attr.id]="id()"
+    [class]="cls('db-table-caption', className())"
+  >
+    <ng-content></ng-content>
+  </caption> `, styles: [":host{display:contents}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], className: [{ type: i0.Input, args: [{ isSignal: true, alias: "className", required: false }] }], _ref: [{ type: i0.ViewChild, args: ["_ref", { isSignal: true }] }] } });
+
+const DBTableHeaderCellScopeList = ['row', 'col', 'rowgroup', 'colgroup'];
+
+const DBTableRowSubHeaderEmphasisList = ['none', 'weak', 'strong'];
+
+const DBTableRowSizeList = ['x-small', 'small', 'medium', 'large'];
+const DBTableVariantList = ['flat', 'zebra', 'spaced'];
+const DBTableDividerList = ['none', 'both', 'horizontal', 'vertical'];
+const DBTableMobileVariantList = ['table', 'list'];
+const DBTableStickyHeaderList = ['none', 'both', 'horizontal', 'vertical'];
+const DBTableColumnsSizeList = ['auto', '1fr', 'min-content', 'max-content'];
+
 const defaultProps$1 = {};
 class DBTabs {
     convertTabs() {
@@ -8284,9 +9233,9 @@ class DBTabs {
                     }
                     this.initialized.set(false);
                 }
-            }, {
-            // Enable writing to signals inside effects
-            });
+            }, Number(VERSION.major) < 19
+                ? { allowSignalWrites: true }
+                : undefined);
         }
     }
     /**
@@ -8326,9 +9275,9 @@ class DBTabs {
         }
     }
     ngAfterViewInit() {
+        const element = this._ref()?.nativeElement;
+        this.enableAttributePassing(element, "db-tabs");
         if (typeof window !== "undefined") {
-            const element = this._ref()?.nativeElement;
-            this.enableAttributePassing(element, "db-tabs");
             this._name.set(`tabs-${this.name() || uuid()}`);
             this.initialized.set(true);
         }
@@ -8337,8 +9286,8 @@ class DBTabs {
         this._resizeObserver()?.disconnect();
         this._resizeObserver.set(undefined);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: DBTabs, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: DBTabs, isStandalone: true, selector: "db-tabs", inputs: { 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 }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, propOverrides: { classPropertyName: "propOverrides", publicName: "propOverrides", 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: "21.2.16", ngImport: i0, type: DBTabs, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.16", type: DBTabs, isStandalone: true, selector: "db-tabs", inputs: { 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 }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, propOverrides: { classPropertyName: "propOverrides", publicName: "propOverrides", 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() ?? propOverrides()?.id"
     [class]="cls('db-tabs', className())"
@@ -8392,7 +9341,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", "propOverrides", "className", "disabled", "iconLeading", "icon", "showIconLeading", "showIcon", "iconTrailing", "showIconTrailing", "size", "width", "variant", "wrap", "noText", "name", "form", "value", "text"], outputs: ["click"] }, { kind: "component", type: DBTabList, selector: "db-tab-list", inputs: ["id", "propOverrides", "className"] }, { kind: "component", type: DBTabItem, selector: "db-tab-item", inputs: ["active", "name", "className", "id", "propOverrides", "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", "propOverrides", "content"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: DBTabs, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: DBTabs, decorators: [{
             type: Component,
             args: [{ selector: "db-tabs", standalone: true, imports: [CommonModule, DBButton, DBTabList, DBTabItem, DBTabPanel], template: `<div
     #_ref
@@ -8591,9 +9540,9 @@ class DBTextarea {
                 if (this.id() ?? this.propOverrides()?.id) {
                     this.resetIds();
                 }
-            }, {
-            // Enable writing to signals inside effects
-            });
+            }, Number(VERSION.major) < 19
+                ? { allowSignalWrites: true }
+                : undefined);
             effect(() => {
                 // --- Mitosis: Workaround to make sure the effect() is triggered ---
                 this._ref();
@@ -8602,9 +9551,9 @@ class DBTextarea {
                 this._invalidMessage.set(this.invalidMessage() ||
                     this._ref()?.nativeElement?.validationMessage ||
                     DEFAULT_INVALID_MESSAGE);
-            }, {
-            // Enable writing to signals inside effects
-            });
+            }, Number(VERSION.major) < 19
+                ? { allowSignalWrites: true }
+                : undefined);
             effect(() => {
                 // --- Mitosis: Workaround to make sure the effect() is triggered ---
                 this._id();
@@ -8619,17 +9568,17 @@ class DBTextarea {
                     }
                     this.handleValidation();
                 }
-            }, {
-            // Enable writing to signals inside effects
-            });
+            }, Number(VERSION.major) < 19
+                ? { allowSignalWrites: true }
+                : undefined);
             effect(() => {
                 // --- Mitosis: Workaround to make sure the effect() is triggered ---
                 this.value();
                 // ---
                 this._value.set(this.value());
-            }, {
-            // Enable writing to signals inside effects
-            });
+            }, Number(VERSION.major) < 19
+                ? { allowSignalWrites: true }
+                : undefined);
             effect(() => {
                 // --- Mitosis: Workaround to make sure the effect() is triggered ---
                 this._ref();
@@ -8652,9 +9601,9 @@ class DBTextarea {
                         this.handleInput(event, true);
                     }, controller.signal);
                 }
-            }, {
-            // Enable writing to signals inside effects
-            });
+            }, Number(VERSION.major) < 19
+                ? { allowSignalWrites: true }
+                : undefined);
         }
     }
     /**
@@ -8709,9 +9658,9 @@ class DBTextarea {
         this.disabled.set(disabled);
     }
     ngAfterViewInit() {
+        const element = this._ref()?.nativeElement;
+        this.enableAttributePassing(element, "db-textarea");
         if (typeof window !== "undefined") {
-            const element = this._ref()?.nativeElement;
-            this.enableAttributePassing(element, "db-textarea");
             this.resetIds();
             this._invalidMessage.set(this.invalidMessage() || DEFAULT_INVALID_MESSAGE);
         }
@@ -8719,8 +9668,8 @@ class DBTextarea {
     ngOnDestroy() {
         this.abortController()?.abort();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: DBTextarea, deps: [{ token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: DBTextarea, isStandalone: true, selector: "db-textarea", inputs: { invalidMessage: { classPropertyName: "invalidMessage", publicName: "invalidMessage", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, propOverrides: { classPropertyName: "propOverrides", publicName: "propOverrides", 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: "21.2.16", ngImport: i0, type: DBTextarea, deps: [{ token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.16", type: DBTextarea, isStandalone: true, selector: "db-textarea", inputs: { invalidMessage: { classPropertyName: "invalidMessage", publicName: "invalidMessage", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, propOverrides: { classPropertyName: "propOverrides", publicName: "propOverrides", 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
@@ -8787,7 +9736,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", "propOverrides", "className", "icon", "semantic", "size", "wrap", "showIcon", "text"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: DBTextarea, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: DBTextarea, decorators: [{
             type: Component,
             args: [{ providers: [{
                             provide: NG_VALUE_ACCESSOR,
@@ -8884,11 +9833,11 @@ 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'];
-const AlignmentList = ['start', 'center'];
+const AlignmentList = ['start', 'center', 'end'];
 
 /**
  * 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, DBCustomButton, DBCustomSelect, DBCustomSelectDropdown, DBCustomSelectFormField, DBCustomSelectList, DBCustomSelectListItem, DBDivider, DBDrawer, DBHeader, DBIcon, DBInfotext, DBInput, DBLink, DBNavigation, DBNavigationItem, DBNotification, DBPage, DBPopover, DBRadio, DBSection, DBSelect, DBStack, DBSwitch, DBTabItem, DBTabList, DBTabPanel, DBTabs, DBTag, DBTextarea, DBTooltip, DB_UX_LOCAL_STORAGE_FRAMEWORK, DB_UX_LOCAL_STORAGE_MODE, DEFAULT_BACK, DEFAULT_BURGER_MENU, DEFAULT_CLOSE_BUTTON, DEFAULT_DATALIST_ID_SUFFIX, DEFAULT_ICON, DEFAULT_ID, DEFAULT_INVALID_MESSAGE, DEFAULT_INVALID_MESSAGE_ID_SUFFIX, DEFAULT_LABEL, DEFAULT_LABEL_ID_SUFFIX, DEFAULT_MESSAGE, DEFAULT_MESSAGE_ID_SUFFIX, DEFAULT_PLACEHOLDER, DEFAULT_PLACEHOLDER_ID_SUFFIX, DEFAULT_REMOVE, DEFAULT_ROWS, DEFAULT_SELECTED, DEFAULT_SELECT_ID_SUFFIX, DEFAULT_VALID_MESSAGE, DEFAULT_VALID_MESSAGE_ID_SUFFIX, DEFAULT_VIEWPORT, DENSITIES, DENSITY, DENSITY_CONST, DESKTOP_VIEWPORT, DividerMarginList, DividerVariantList, DocumentClickListener, DocumentScrollListener, DrawerBackdropList, DrawerDirectionList, DrawerPositionList, DrawerVariantList, EmphasisList, FieldSizingList, GapSpacingList, IconWeightList, InputTypeList, LabelVariantHorizontalList, LabelVariantList, LinkContentList, LinkReferrerPolicyList, LinkSizeList, LinkTargetList, LinkVariantList, MarginList, MaxWidthList, MetaNavigationDirective, NavigationContentDirective, NavigationDirective, NavigationItemSafeTriangle, NotificationAriaLiveList, NotificationLinkVariantList, NotificationVariantList, OrientationList, PageDocumentOverflowList, PageVariantList, PlacementHorizontalList, PlacementList, PlacementVerticalList, PopoverDelayList, PopoverWidthList, SEMANTIC, SEMANTICS, SecondaryActionDirective, SelectedTypeList, SemanticList, SizeList, SpacingList, StackAlignmentList, StackDirectionList, StackJustifyContentList, StackVariantList, TESTING_VIEWPORTS, TabsBehaviorList, TabsInitialSelectedModeList, TagBehaviorList, TextareaResizeList, TextareaWrapList, TooltipVariantList, ValidationList, WidthList, addAttributeToChildren, cls, delay, getBoolean, getBooleanAsString, getFloatingProps, getHideProp, getInputValue, getNotificationRole, getNumber, getOptionKey, getSearchInput, getStep, handleDataOutside, handleFixedDropdown, handleFixedPopover, hasVoiceOver, isArrayOfStrings, isEventTargetNavigationItem, isIOSSafari, isKeyboardEvent, stringPropVisible, uuid };
+export { AccordionBehaviorList, AccordionVariantList, AlignmentList, AutoCompleteList, BadgePlacementList, ButtonTypeList, ButtonVariantList, COLOR, COLORS, COLORS_SIMPLE, COLOR_CONST, COLOR_SIMPLE, CardBehaviorList, CardElevationLevelList, CustomSelectDropdownWidthList, CustomSelectListItemTypeList, DBAccordion, DBAccordionItem, DBBadge, DBBrand, DBButton, DBCard, DBCheckbox, DBCustomButton, 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, DBTable, DBTableBody, DBTableCaption, DBTableColumnsSizeList, DBTableDataCell, DBTableDividerList, DBTableFooter, DBTableHead, DBTableHeaderCell, DBTableHeaderCellScopeList, DBTableMobileVariantList, DBTableRow, DBTableRowSizeList, DBTableRowSubHeaderEmphasisList, DBTableStickyHeaderList, DBTableVariantList, DBTabs, DBTag, DBTextarea, DBTooltip, DB_UX_LOCAL_STORAGE_FRAMEWORK, DB_UX_LOCAL_STORAGE_MODE, DEFAULT_BACK, DEFAULT_BURGER_MENU, DEFAULT_CLOSE_BUTTON, DEFAULT_DATALIST_ID_SUFFIX, DEFAULT_ICON, DEFAULT_ID, DEFAULT_INVALID_MESSAGE, DEFAULT_INVALID_MESSAGE_ID_SUFFIX, DEFAULT_LABEL, DEFAULT_LABEL_ID_SUFFIX, DEFAULT_MESSAGE, DEFAULT_MESSAGE_ID_SUFFIX, DEFAULT_PLACEHOLDER, DEFAULT_PLACEHOLDER_ID_SUFFIX, DEFAULT_REMOVE, DEFAULT_ROWS, DEFAULT_SELECTED, DEFAULT_SELECT_ID_SUFFIX, DEFAULT_VALID_MESSAGE, DEFAULT_VALID_MESSAGE_ID_SUFFIX, DEFAULT_VIEWPORT, DENSITIES, DENSITY, DENSITY_CONST, DESKTOP_VIEWPORT, DividerMarginList, DividerVariantList, DocumentClickListener, DocumentScrollListener, DrawerBackdropList, DrawerDirectionList, DrawerPositionList, DrawerVariantList, EmphasisList, FieldSizingList, GapSpacingList, IconWeightList, InputTypeList, LabelVariantHorizontalList, LabelVariantList, LinkContentList, LinkReferrerPolicyList, LinkSizeList, LinkTargetList, LinkVariantList, MarginList, MaxWidthList, MetaNavigationDirective, NavigationContentDirective, NavigationDirective, NavigationItemSafeTriangle, NotificationAriaLiveList, NotificationLinkVariantList, NotificationVariantList, OrientationList, PageDocumentOverflowList, PageVariantList, PlacementHorizontalList, PlacementList, PlacementVerticalList, PopoverDelayList, PopoverWidthList, SEMANTIC, SEMANTICS, SecondaryActionDirective, SelectedTypeList, SemanticList, SizeList, SpacingList, StackAlignmentList, StackDirectionList, StackJustifyContentList, StackVariantList, TESTING_VIEWPORTS, TabsBehaviorList, TabsInitialSelectedModeList, TagBehaviorList, TextareaResizeList, TextareaWrapList, TooltipVariantList, ValidationList, WidthList, addAttributeToChildren, cls, delay, getBoolean, getBooleanAsString, getFloatingProps, getHideProp, getInputValue, getNotificationRole, getNumber, getOptionKey, getSearchInput, getStep, handleDataOutside, handleFixedDropdown, handleFixedPopover, hasVoiceOver, isArrayOfStrings, isEventTargetNavigationItem, isIOSSafari, isKeyboardEvent, stringPropVisible, uuid };
 //# sourceMappingURL=db-ux-ngx-core-components.mjs.map