@db-ux/ngx-core-components 4.5.4-mcp-e4cd7e6 → 4.5.4-table-c758ae7

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

@@ -170,7 +170,7 @@ const getNotificationRole = ({ semantic, role, ariaLive }) => {
     }
 };
 
-const defaultProps$A = {};
+const defaultProps$I = {};
 class DBAccordionItem {
     handleNameAttribute() {
         if (this._ref()?.nativeElement) {
@@ -327,7 +327,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", 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 }] }], 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 {
@@ -622,7 +622,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;
@@ -742,7 +742,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", 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;
@@ -827,7 +827,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", 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()) {
@@ -962,7 +962,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", 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) {
@@ -1104,7 +1104,7 @@ const addValueResetEventListener = (element, props, resetFunction, signal) => {
     }, signal);
 };
 
-const defaultProps$u = {};
+const defaultProps$C = {};
 class DBInfotext {
     constructor() {
         this.cls = cls;
@@ -1194,7 +1194,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
   > `, 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");
@@ -1574,7 +1574,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", 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;
@@ -2100,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" }] : []));
         this.propOverrides = input(...(ngDevMode ? [undefined, { debugName: "propOverrides" }] : []));
         this.className = input(...(ngDevMode ? [undefined, { debugName: "className" }] : []));
-        this.width = input(defaultProps$r["width"], ...(ngDevMode ? [{ debugName: "width" }] : []));
+        this.width = input(defaultProps$z["width"], ...(ngDevMode ? [{ debugName: "width" }] : []));
         this._ref = viewChild("_ref", ...(ngDevMode ? [{ debugName: "_ref" }] : []));
     }
     /**
@@ -2176,7 +2176,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", 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();
@@ -2362,7 +2362,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", 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;
@@ -2443,7 +2443,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", 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");
@@ -2931,7 +2931,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", 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();
@@ -3139,7 +3139,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
   ></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 }] }], _ref: [{ type: i0.ViewChild, args: ["_ref", { isSignal: true }] }] } });
 
-const defaultProps$m = {};
+const defaultProps$u = {};
 class DBTag {
     handleRemove(event) {
         if (!event)
@@ -3279,7 +3279,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", 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,
 };
@@ -3779,8 +3779,8 @@ class DBCustomSelect {
         this.loadingText = input(...(ngDevMode ? [undefined, { debugName: "loadingText" }] : []));
         this.noResultsText = input(...(ngDevMode ? [undefined, { debugName: "noResultsText" }] : []));
         this.mobileCloseButtonText = input(...(ngDevMode ? [undefined, { debugName: "mobileCloseButtonText" }] : []));
-        this.showClearSelection = input(defaultProps$l["showClearSelection"], ...(ngDevMode ? [{ debugName: "showClearSelection" }] : []));
-        this.clearSelectionText = input(defaultProps$l["clearSelectionText"], ...(ngDevMode ? [{ debugName: "clearSelectionText" }] : []));
+        this.showClearSelection = input(defaultProps$t["showClearSelection"], ...(ngDevMode ? [{ debugName: "showClearSelection" }] : []));
+        this.clearSelectionText = input(defaultProps$t["clearSelectionText"], ...(ngDevMode ? [{ debugName: "clearSelectionText" }] : []));
         this.placeholder = input(...(ngDevMode ? [undefined, { debugName: "placeholder" }] : []));
         this.messageIcon = input(...(ngDevMode ? [undefined, { debugName: "messageIcon" }] : []));
         this.amountChange = output();
@@ -4618,7 +4618,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
 
 const CustomSelectDropdownWidthList = ['fixed', 'auto', 'full'];
 
-const defaultProps$k = {};
+const defaultProps$s = {};
 class DBCustomSelectFormField {
     constructor() {
         this.cls = cls;
@@ -4693,7 +4693,7 @@ const CustomSelectListItemTypeList = ['checkbox', 'radio'];
 
 const SelectedTypeList = ['amount', 'text', 'tag'];
 
-const defaultProps$j = {};
+const defaultProps$r = {};
 class DBDivider {
     constructor() {
         this.cls = cls;
@@ -4775,7 +4775,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
 const DividerMarginList = ['none', '_'];
 const DividerVariantList = ['horizontal', 'vertical'];
 
-const defaultProps$i = {};
+const defaultProps$q = {};
 class DBDrawer {
     handleClose(event, forceClose) {
         if (!event)
@@ -5183,7 +5183,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
                 }]
         }] });
 
-const defaultProps$h = {};
+const defaultProps$p = {};
 class DBHeader {
     handleToggle(event) {
         if (event && event.stopPropagation) {
@@ -5412,7 +5412,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", 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 }] }], closeButtonId: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeButtonId", required: false }] }], closeButtonText: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeButtonText", required: false }] }], burgerMenuLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "burgerMenuLabel", 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;
@@ -5505,7 +5505,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;
@@ -5623,7 +5623,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;
@@ -5707,7 +5707,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
                 }]
         }] });
 
-const defaultProps$d = {};
+const defaultProps$l = {};
 class DBNavigationItem {
     handleNavigationItemClick(event) {
         if (event?.target?.nodeName === "A") {
@@ -5950,7 +5950,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", 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 }] }], 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)
@@ -6122,7 +6122,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;
@@ -6238,7 +6238,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
 const PageVariantList = ['auto', 'fixed'];
 const PageDocumentOverflowList = ['hidden', 'auto'];
 
-const defaultProps$a = {};
+const defaultProps$i = {};
 class DBPopover {
     handleEscape(event) {
         if (!event || event.key === "Escape") {
@@ -6463,7 +6463,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", 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) {
@@ -6712,7 +6712,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
   > `, 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;
@@ -6789,7 +6789,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", 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");
@@ -7295,7 +7295,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", 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;
@@ -7390,7 +7390,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");
@@ -7766,7 +7766,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", 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();
@@ -7980,7 +7980,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", 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;
@@ -8055,7 +8055,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", 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;
@@ -8129,7 +8129,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", 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$1 = {};
+const defaultProps$9 = {};
 class DBTabs {
     convertTabs() {
         try {
@@ -8474,7 +8474,7 @@ const TabsInitialSelectedModeList = ['auto', 'manually'];
 
 const TagBehaviorList = ['static', 'removable'];
 
-const defaultProps = {};
+const defaultProps$8 = {};
 class DBTextarea {
     hasValidState() {
         return !!(this.validMessage() ?? this.validation() === "valid");
@@ -8906,11 +8906,992 @@ 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'];
+
+const defaultProps$7 = {};
+class DBTableDataCell {
+    constructor() {
+        this.cls = cls;
+        this.getNumber = getNumber;
+        this.id = input(...(ngDevMode ? [undefined, { debugName: "id" }] : []));
+        this.className = input(...(ngDevMode ? [undefined, { debugName: "className" }] : []));
+        this.horizontalAlignment = input(...(ngDevMode ? [undefined, { debugName: "horizontalAlignment" }] : []));
+        this.verticalAlignment = input(...(ngDevMode ? [undefined, { debugName: "verticalAlignment" }] : []));
+        this.colSpan = input(...(ngDevMode ? [undefined, { debugName: "colSpan" }] : []));
+        this.colspan = input(...(ngDevMode ? [undefined, { debugName: "colspan" }] : []));
+        this.rowSpan = input(...(ngDevMode ? [undefined, { debugName: "rowSpan" }] : []));
+        this.rowspan = input(...(ngDevMode ? [undefined, { debugName: "rowspan" }] : []));
+        this.headers = input(...(ngDevMode ? [undefined, { debugName: "headers" }] : []));
+        this._ref = viewChild("_ref", ...(ngDevMode ? [{ debugName: "_ref" }] : []));
+    }
+    /**
+     * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.
+     * @param element  the ref for the component
+     * @param customElementSelector  the custom element like `my-component`
+     */
+    enableAttributePassing(element, customElementSelector) {
+        const parent = element?.closest(customElementSelector);
+        if (element && parent) {
+            const attributes = parent.attributes;
+            for (let i = 0; i < attributes.length; i++) {
+                const attr = attributes.item(i);
+                if (attr && attr.name !== '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() {
+        if (typeof window !== "undefined") {
+            const element = this._ref()?.nativeElement;
+            this.enableAttributePassing(element, "db-table-data-cell");
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: DBTableDataCell, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.3.18", 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: "20.3.18", 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$6 = {};
+class DBTableHeaderCell {
+    constructor() {
+        this.cls = cls;
+        this.getBooleanAsString = getBooleanAsString;
+        this.getNumber = getNumber;
+        this.id = input(...(ngDevMode ? [undefined, { debugName: "id" }] : []));
+        this.className = input(...(ngDevMode ? [undefined, { debugName: "className" }] : []));
+        this.horizontalAlignment = input(...(ngDevMode ? [undefined, { debugName: "horizontalAlignment" }] : []));
+        this.verticalAlignment = input(...(ngDevMode ? [undefined, { debugName: "verticalAlignment" }] : []));
+        this.noText = input(...(ngDevMode ? [undefined, { debugName: "noText" }] : []));
+        this.scope = input(...(ngDevMode ? [undefined, { debugName: "scope" }] : []));
+        this.colSpan = input(...(ngDevMode ? [undefined, { debugName: "colSpan" }] : []));
+        this.colspan = input(...(ngDevMode ? [undefined, { debugName: "colspan" }] : []));
+        this.rowSpan = input(...(ngDevMode ? [undefined, { debugName: "rowSpan" }] : []));
+        this.rowspan = input(...(ngDevMode ? [undefined, { debugName: "rowspan" }] : []));
+        this.headers = input(...(ngDevMode ? [undefined, { debugName: "headers" }] : []));
+        this.abbr = input(...(ngDevMode ? [undefined, { debugName: "abbr" }] : []));
+        this._ref = viewChild("_ref", ...(ngDevMode ? [{ debugName: "_ref" }] : []));
+    }
+    /**
+     * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.
+     * @param element  the ref for the component
+     * @param customElementSelector  the custom element like `my-component`
+     */
+    enableAttributePassing(element, customElementSelector) {
+        const parent = element?.closest(customElementSelector);
+        if (element && parent) {
+            const attributes = parent.attributes;
+            for (let i = 0; i < attributes.length; i++) {
+                const attr = attributes.item(i);
+                if (attr && attr.name !== '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() {
+        if (typeof window !== "undefined") {
+            const element = this._ref()?.nativeElement;
+            this.enableAttributePassing(element, "db-table-header-cell");
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: DBTableHeaderCell, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.3.18", 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: "20.3.18", 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$5 = {};
+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" }] : []));
+        this.className = input(...(ngDevMode ? [undefined, { debugName: "className" }] : []));
+        this.interactive = input(...(ngDevMode ? [undefined, { debugName: "interactive" }] : []));
+        this.subHeaderEmphasis = input(...(ngDevMode ? [undefined, { debugName: "subHeaderEmphasis" }] : []));
+        this.cells = input(...(ngDevMode ? [undefined, { debugName: "cells" }] : []));
+        this._ref = viewChild("_ref", ...(ngDevMode ? [{ debugName: "_ref" }] : []));
+    }
+    /**
+     * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.
+     * @param element  the ref for the component
+     * @param customElementSelector  the custom element like `my-component`
+     */
+    enableAttributePassing(element, customElementSelector) {
+        const parent = element?.closest(customElementSelector);
+        if (element && parent) {
+            const attributes = parent.attributes;
+            for (let i = 0; i < attributes.length; i++) {
+                const attr = attributes.item(i);
+                if (attr && attr.name !== '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() {
+        if (typeof window !== "undefined") {
+            const element = this._ref()?.nativeElement;
+            this.enableAttributePassing(element, "db-table-row");
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: DBTableRow, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", 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: "20.3.18", 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$4 = {};
+class DBTableBody {
+    trackByRow0(index, row) {
+        return `${this.id() ?? uuid()}-table-body-row-${index}`;
+    }
+    constructor() {
+        this.cls = cls;
+        this.uuid = uuid;
+        this.id = input(...(ngDevMode ? [undefined, { debugName: "id" }] : []));
+        this.className = input(...(ngDevMode ? [undefined, { debugName: "className" }] : []));
+        this.rows = input(...(ngDevMode ? [undefined, { debugName: "rows" }] : []));
+        this._ref = viewChild("_ref", ...(ngDevMode ? [{ debugName: "_ref" }] : []));
+    }
+    /**
+     * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.
+     * @param element  the ref for the component
+     * @param customElementSelector  the custom element like `my-component`
+     */
+    enableAttributePassing(element, customElementSelector) {
+        const parent = element?.closest(customElementSelector);
+        if (element && parent) {
+            const attributes = parent.attributes;
+            for (let i = 0; i < attributes.length; i++) {
+                const attr = attributes.item(i);
+                if (attr && attr.name !== '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() {
+        if (typeof window !== "undefined") {
+            const element = this._ref()?.nativeElement;
+            this.enableAttributePassing(element, "db-table-body");
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: DBTableBody, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", 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"
+      [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: "20.3.18", 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"
+      [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$3 = {};
+class DBTableFooter {
+    trackByRow0(index, row) {
+        return `${this.id() ?? uuid()}-table-footer-row-${index}`;
+    }
+    constructor() {
+        this.cls = cls;
+        this.uuid = uuid;
+        this.id = input(...(ngDevMode ? [undefined, { debugName: "id" }] : []));
+        this.className = input(...(ngDevMode ? [undefined, { debugName: "className" }] : []));
+        this.rows = input(...(ngDevMode ? [undefined, { debugName: "rows" }] : []));
+        this._ref = viewChild("_ref", ...(ngDevMode ? [{ debugName: "_ref" }] : []));
+    }
+    /**
+     * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.
+     * @param element  the ref for the component
+     * @param customElementSelector  the custom element like `my-component`
+     */
+    enableAttributePassing(element, customElementSelector) {
+        const parent = element?.closest(customElementSelector);
+        if (element && parent) {
+            const attributes = parent.attributes;
+            for (let i = 0; i < attributes.length; i++) {
+                const attr = attributes.item(i);
+                if (attr && attr.name !== '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() {
+        if (typeof window !== "undefined") {
+            const element = this._ref()?.nativeElement;
+            this.enableAttributePassing(element, "db-table-footer");
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: DBTableFooter, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", 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"
+      [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: "20.3.18", 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"
+      [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$2 = {};
+class DBTableHead {
+    getCells(cells) {
+        return cells?.map((cell) => ({
+            ...cell,
+            headerCell: true,
+        }));
+    }
+    trackByRow0(index, row) {
+        return `${this.id() ?? uuid()}-table-head-row-${index}`;
+    }
+    constructor() {
+        this.cls = cls;
+        this.uuid = uuid;
+        this.id = input(...(ngDevMode ? [undefined, { debugName: "id" }] : []));
+        this.className = input(...(ngDevMode ? [undefined, { debugName: "className" }] : []));
+        this.rows = input(...(ngDevMode ? [undefined, { debugName: "rows" }] : []));
+        this._ref = viewChild("_ref", ...(ngDevMode ? [{ debugName: "_ref" }] : []));
+    }
+    /**
+     * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.
+     * @param element  the ref for the component
+     * @param customElementSelector  the custom element like `my-component`
+     */
+    enableAttributePassing(element, customElementSelector) {
+        const parent = element?.closest(customElementSelector);
+        if (element && parent) {
+            const attributes = parent.attributes;
+            for (let i = 0; i < attributes.length; i++) {
+                const attr = attributes.item(i);
+                if (attr && attr.name !== '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() {
+        if (typeof window !== "undefined") {
+            const element = this._ref()?.nativeElement;
+            this.enableAttributePassing(element, "db-table-head");
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: DBTableHead, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", 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"
+      [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: "20.3.18", 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"
+      [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$1 = {};
+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" }] : []));
+        this.mobileVariant = input(...(ngDevMode ? [undefined, { debugName: "mobileVariant" }] : []));
+        this.columnSizes = input(...(ngDevMode ? [undefined, { debugName: "columnSizes" }] : []));
+        this.className = input(...(ngDevMode ? [undefined, { debugName: "className" }] : []));
+        this.width = input(...(ngDevMode ? [undefined, { debugName: "width" }] : []));
+        this.size = input(...(ngDevMode ? [undefined, { debugName: "size" }] : []));
+        this.divider = input(...(ngDevMode ? [undefined, { debugName: "divider" }] : []));
+        this.variant = input(...(ngDevMode ? [undefined, { debugName: "variant" }] : []));
+        this.showCaption = input(...(ngDevMode ? [undefined, { debugName: "showCaption" }] : []));
+        this.stickyHeader = input(...(ngDevMode ? [undefined, { debugName: "stickyHeader" }] : []));
+        this.id = input(...(ngDevMode ? [undefined, { debugName: "id" }] : []));
+        this.captionPlain = input(...(ngDevMode ? [undefined, { debugName: "captionPlain" }] : []));
+        this._ref = viewChild("_ref", ...(ngDevMode ? [{ debugName: "_ref" }] : []));
+        this._data = signal(undefined, ...(ngDevMode ? [{ debugName: "_data" }] : []));
+        this._style = signal(undefined, ...(ngDevMode ? [{ debugName: "_style" }] : []));
+        if (typeof window !== "undefined") {
+            effect(() => {
+                // --- Mitosis: Workaround to make sure the effect() is triggered ---
+                this.data();
+                // ---
+                if (this.data()) {
+                    this._data.set(this.convertData());
+                }
+            }, {
+            // Enable writing to signals inside effects
+            });
+            effect(() => {
+                // --- Mitosis: Workaround to make sure the effect() is triggered ---
+                this.mobileVariant();
+                this._ref();
+                // ---
+                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 &&
+                                        headerCell.textContent &&
+                                        !cell.dataset["header"]) {
+                                        cell.dataset["header"] = headerCell.textContent.trim();
+                                    }
+                                });
+                            });
+                        }
+                    }, 1);
+                }
+            }, {
+            // Enable writing to signals inside effects
+            });
+            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);
+                }
+            }, {
+            // Enable writing to signals inside effects
+            });
+        }
+    }
+    /**
+     * 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() {
+        if (typeof window !== "undefined") {
+            const element = this._ref()?.nativeElement;
+            this.enableAttributePassing(element, "db-table");
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: DBTable, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", 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()">
+      <caption>
+        @if(captionPlain()){
+        {{captionPlain()}}
+        }@else{
+        <ng-content select="[caption]"> </ng-content>
+        }
+      </caption>
+      @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: "20.3.18", 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()">
+      <caption>
+        @if(captionPlain()){
+        {{captionPlain()}}
+        }@else{
+        <ng-content select="[caption]"> </ng-content>
+        }
+      </caption>
+      @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 DBTableRowSizeList = ['x-small', 'small', 'medium', 'large'];
+const DBTableVariantList = ['joined', 'zebra', 'floating'];
+const DBTableDividerList = ['none', 'both', 'horizontal', 'vertical'];
+const DBTableMobileVariantList = ['table', 'list'];
+const DBTableStickHeaderList = ['none', 'both', 'horizontal', 'vertical'];
+const DBTableColumnsSizeList = ['auto', '1fr', 'min-content', 'max-content'];
+
+const defaultProps = {};
+class DBTableCaption {
+    constructor() {
+        this.cls = cls;
+        this.id = input(...(ngDevMode ? [undefined, { debugName: "id" }] : []));
+        this.className = input(...(ngDevMode ? [undefined, { debugName: "className" }] : []));
+        this._ref = viewChild("_ref", ...(ngDevMode ? [{ debugName: "_ref" }] : []));
+    }
+    /**
+     * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.
+     * @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() {
+        if (typeof window !== "undefined") {
+            const element = this._ref()?.nativeElement;
+            this.enableAttributePassing(element, "db-table-caption");
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: DBTableCaption, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.3.18", 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: "20.3.18", 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 DBTableRowSubHeaderEmphasisList = ['none', 'weak', 'strong'];
+
+const DBTableHeaderCellScopeList = ['row', 'col', 'rowgroup', 'colgroup'];
 
 /**
  * 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, DBTableStickHeaderList, 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