@i-cell/ids-angular 0.1.13 → 0.2.1

package/fesm2022/i-cell-ids-angular-table.mjs

@@ -1,16 +1,16 @@
 import { DEFAULT_PAGE_SIZE } from '@i-cell/ids-angular/paginator';
 import { BehaviorSubject, Subject, map, merge, debounceTime, switchMap, Observable, catchError, of, tap, finalize, startWith } from 'rxjs';
 import * as i0 from '@angular/core';
-import { input, Directive, inject, TemplateRef, InjectionToken, Injectable, Optional, SkipSelf, ElementRef, computed, signal, Component, ChangeDetectorRef, viewChildren, contentChildren, output, ViewEncapsulation, ChangeDetectionStrategy } from '@angular/core';
-import { isString, isTypeDerivedFrom, IdsSize, ComponentBaseWithDefaults, coerceBooleanAttribute } from '@i-cell/ids-angular/core';
+import { input, Directive, inject, TemplateRef, InjectionToken, Injectable, Optional, SkipSelf, ElementRef, computed, signal, Component, ChangeDetectorRef, viewChildren, contentChildren, output, ChangeDetectionStrategy, ViewEncapsulation } from '@angular/core';
+import { isTypeDerivedFrom, isString, IdsSize, ComponentBaseWithDefaults, coerceBooleanAttribute } from '@i-cell/ids-angular/core';
 import { NgComponentOutlet, NgTemplateOutlet, NgClass } from '@angular/common';
 import { toSignal, takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { IdsIconComponent } from '@i-cell/ids-angular/icon';
-import { trigger, state, style, transition, animate } from '@angular/animations';
+import { trigger, state, transition, style, animate } from '@angular/animations';
 import { SelectionModel } from '@angular/cdk/collections';
 import { CdkCell, CdkCellDef, CdkColumnDef, CdkHeaderCell, CdkHeaderCellDef, CdkHeaderRow, CdkHeaderRowDef, CdkNoDataRow, CdkRow, CdkRowDef, CdkTable } from '@angular/cdk/table';
 import { IdsCheckboxComponent } from '@i-cell/ids-angular/checkbox';
-import { IdsIconButtonVariant, IdsIconButtonAppearance, IDS_ICON_BUTTON_PARENT, IdsIconButtonComponent } from '@i-cell/ids-angular/icon-button';
+import { IdsIconButtonVariant, IdsIconButtonAppearance, IdsIconButtonComponent, IDS_ICON_BUTTON_PARENT } from '@i-cell/ids-angular/icon-button';
 
 const DEFAULT_DATA_LOAD_DEBOUNCE_TIME = 100;
 class ServerSideDataSource {
@@ -122,9 +122,9 @@ class IdsTableCellRenderer {
             { rx: '\'', entity: ''' },
             { rx: '/', entity: '/' },
         ];
-        this.cellValue = input('', { transform: (value) => this._preSanitize(String(value ?? '')) });
-        this.colDef = input.required();
-        this.rowData = input();
+        this.cellValue = input('', ...(ngDevMode ? [{ debugName: "cellValue", transform: (value) => this._preSanitize(String(value ?? '')) }] : [{ transform: (value) => this._preSanitize(String(value ?? '')) }]));
+        this.colDef = input.required(...(ngDevMode ? [{ debugName: "colDef" }] : []));
+        this.rowData = input(...(ngDevMode ? [undefined, { debugName: "rowData" }] : []));
     }
     _isComponentCellRenderer(cellRendererDef) {
         return !!cellRendererDef && !isString(cellRendererDef) && isTypeDerivedFrom(cellRendererDef, IdsTableCellRenderer);
@@ -136,22 +136,22 @@ class IdsTableCellRenderer {
         // Convert & to &amp;, Convert < to &lt;, Convert > to &gt;, Convert " to &quot;, Convert ' to &#x27;, Convert / to &#x2F;
         return this._entities.reduce((result, item) => result.replaceAll(item.rx, item.entity), input);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.2", ngImport: i0, type: IdsTableCellRenderer, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.1.2", type: IdsTableCellRenderer, isStandalone: true, inputs: { cellValue: { classPropertyName: "cellValue", publicName: "cellValue", isSignal: true, isRequired: false, transformFunction: null }, colDef: { classPropertyName: "colDef", publicName: "colDef", isSignal: true, isRequired: true, transformFunction: null }, rowData: { classPropertyName: "rowData", publicName: "rowData", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: IdsTableCellRenderer, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.1.7", type: IdsTableCellRenderer, isStandalone: true, inputs: { cellValue: { classPropertyName: "cellValue", publicName: "cellValue", isSignal: true, isRequired: false, transformFunction: null }, colDef: { classPropertyName: "colDef", publicName: "colDef", isSignal: true, isRequired: true, transformFunction: null }, rowData: { classPropertyName: "rowData", publicName: "rowData", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.2", ngImport: i0, type: IdsTableCellRenderer, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: IdsTableCellRenderer, decorators: [{
             type: Directive
         }] });
 
 class IdsTableCellTemplateDirective {
     constructor() {
-        this.templateName = input.required({ alias: 'idsCellTemplate' });
+        this.templateName = input.required(...(ngDevMode ? [{ debugName: "templateName", alias: 'idsCellTemplate' }] : [{ alias: 'idsCellTemplate' }]));
         this.templateRef = inject(TemplateRef);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.2", ngImport: i0, type: IdsTableCellTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.1.2", type: IdsTableCellTemplateDirective, isStandalone: true, selector: "[idsCellTemplate]", inputs: { templateName: { classPropertyName: "templateName", publicName: "idsCellTemplate", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: IdsTableCellTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.1.7", type: IdsTableCellTemplateDirective, isStandalone: true, selector: "[idsCellTemplate]", inputs: { templateName: { classPropertyName: "templateName", publicName: "idsCellTemplate", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.2", ngImport: i0, type: IdsTableCellTemplateDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: IdsTableCellTemplateDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[idsCellTemplate]',
@@ -234,10 +234,10 @@ class IdsTableIntl {
     getColLabel(colDef) {
         return colDef.label || '';
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.2", ngImport: i0, type: IdsTableIntl, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.1.2", ngImport: i0, type: IdsTableIntl, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: IdsTableIntl, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: IdsTableIntl, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.2", ngImport: i0, type: IdsTableIntl, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: IdsTableIntl, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }] });
@@ -270,9 +270,9 @@ class IdsCellContentComponent extends IdsTableCellRenderer {
         this._intl = inject(IdsTableIntl);
         this._isHeader = this._elementRef.nativeElement.hasAttribute('idsHeaderCellContent');
         this._numberFormat = toSignal(this._intl.changes.pipe(map(() => this._intl.numberFormat), startWith(this._intl.numberFormat)));
-        this.externalCellTemplates = input();
-        this._cellRendererDef = computed(() => (this._isHeader ? this.colDef().headerCellRenderer : this.colDef().cellRenderer));
-        this._updateCellContent = signal(true);
+        this.externalCellTemplates = input(...(ngDevMode ? [undefined, { debugName: "externalCellTemplates" }] : []));
+        this._cellRendererDef = computed(() => (this._isHeader ? this.colDef().headerCellRenderer : this.colDef().cellRenderer), ...(ngDevMode ? [{ debugName: "_cellRendererDef" }] : []));
+        this._updateCellContent = signal(true, ...(ngDevMode ? [{ debugName: "_updateCellContent" }] : []));
         this._cellValue = computed(() => {
             // Forces recalculation of this computed signal
             this._updateCellContent();
@@ -287,38 +287,38 @@ class IdsCellContentComponent extends IdsTableCellRenderer {
             const valueFn = this.colDef().value ?? (() => '');
             const rawResult = field && Object.hasOwn(rowData, field) ? rowData[field] : valueFn(rowData);
             return isString(rawResult) ? this._preSanitize(rawResult) : rawResult;
-        });
-        this._stringCellValue = computed(() => String(this._cellValue() ?? ''));
+        }, ...(ngDevMode ? [{ debugName: "_cellValue" }] : []));
+        this._stringCellValue = computed(() => String(this._cellValue() ?? ''), ...(ngDevMode ? [{ debugName: "_stringCellValue" }] : []));
         this._numericCellValue = computed(() => {
             const stringValue = this._stringCellValue();
             return this._numberFormat()?.format(parseFloat(stringValue)) ?? stringValue;
-        });
+        }, ...(ngDevMode ? [{ debugName: "_numericCellValue" }] : []));
         this._cellRendererComp = computed(() => {
             const renderer = this._cellRendererDef();
             if (this._isComponentCellRenderer(renderer)) {
                 return renderer;
             }
             return null;
-        });
+        }, ...(ngDevMode ? [{ debugName: "_cellRendererComp" }] : []));
         this._cellTemplateName = computed(() => {
             if (isString(this._cellRendererDef())) {
                 return this._cellRendererDef();
             }
             return undefined;
-        });
+        }, ...(ngDevMode ? [{ debugName: "_cellTemplateName" }] : []));
         this._cellTemplate = computed(() => {
             const templateName = this._cellTemplateName();
             const templates = this.externalCellTemplates();
             return isString(templateName) && templates?.has(templateName) ? templates.get(templateName) ?? null : null;
-        });
+        }, ...(ngDevMode ? [{ debugName: "_cellTemplate" }] : []));
     }
     updateValue() {
         this._updateCellContent.set(!this._updateCellContent());
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.2", ngImport: i0, type: IdsCellContentComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.2", type: IdsCellContentComponent, isStandalone: true, selector: "th[idsCellContent],td[idsCellContent],th[idsHeaderCellContent],td[idsHeaderCellContent]", inputs: { externalCellTemplates: { classPropertyName: "externalCellTemplates", publicName: "externalCellTemplates", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: "<ng-content select=\"[colStart]\" />\r\n\r\n@if (_cellRendererComp()) {\r\n  <ng-container *ngComponentOutlet=\"_cellRendererComp(); inputs: { rowData: rowData(), colDef: colDef(), cellValue: _cellValue() }\" />\r\n} @else {\r\n  @switch (_cellTemplateName()) {\r\n    @case ('strong') {\r\n      <strong class=\"ids-cell-content ids-cell-content__strong\">{{ _cellValue() }}</strong>\r\n    }\r\n    @case ('numeric') {\r\n      <div class=\"ids-cell-content ids-cell-content__numeric\">{{ _numericCellValue() }}</div>\r\n    }\r\n    @case ('icon') {\r\n      <ids-icon\r\n        class=\"ids-cell-content ids-cell-content__icon\"\r\n        [fontIcon]=\"_stringCellValue()\"\r\n        [aria-hidden]=\"true\"\r\n      />\r\n    }\r\n    <!-- TODO: label-description template (needs further discussion) -->\r\n    @default {\r\n      @let template = _cellTemplate();\r\n      @if (template) {\r\n        <!-- external template ref -->\r\n        <ng-container *ngTemplateOutlet=\"template; context: { $implicit: rowData(), colDef: colDef(), cellValue: _cellValue() }\" />\r\n      } @else {\r\n        <!-- default basic cell content -->\r\n        <div class=\"ids-cell-content ids-cell-content__default\">{{ _cellValue() }}</div>\r\n      }\r\n    }\r\n  }\r\n}\r\n\r\n<ng-content select=\"[colEnd]\" />\r\n", dependencies: [{ kind: "component", type: IdsIconComponent, selector: "ids-icon", inputs: ["size", "sizeCollection", "variant", "fontIcon", "svgIcon", "aria-hidden"] }, { kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"], exportAs: ["ngComponentOutlet"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: IdsCellContentComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.7", type: IdsCellContentComponent, isStandalone: true, selector: "th[idsCellContent],td[idsCellContent],th[idsHeaderCellContent],td[idsHeaderCellContent]", inputs: { externalCellTemplates: { classPropertyName: "externalCellTemplates", publicName: "externalCellTemplates", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: "<ng-content select=\"[colStart]\" />\r\n\r\n@if (_cellRendererComp()) {\r\n  <ng-container *ngComponentOutlet=\"_cellRendererComp(); inputs: { rowData: rowData(), colDef: colDef(), cellValue: _cellValue() }\" />\r\n} @else {\r\n  @switch (_cellTemplateName()) {\r\n    @case ('strong') {\r\n      <strong class=\"ids-cell-content ids-cell-content__strong\">{{ _cellValue() }}</strong>\r\n    }\r\n    @case ('numeric') {\r\n      <div class=\"ids-cell-content ids-cell-content__numeric\">{{ _numericCellValue() }}</div>\r\n    }\r\n    @case ('icon') {\r\n      <ids-icon\r\n        class=\"ids-cell-content ids-cell-content__icon\"\r\n        [fontIcon]=\"_stringCellValue()\"\r\n        [aria-hidden]=\"true\"\r\n      />\r\n    }\r\n    <!-- TODO: label-description template (needs further discussion) -->\r\n    @default {\r\n      @let template = _cellTemplate();\r\n      @if (template) {\r\n        <!-- external template ref -->\r\n        <ng-container *ngTemplateOutlet=\"template; context: { $implicit: rowData(), colDef: colDef(), cellValue: _cellValue() }\" />\r\n      } @else {\r\n        <!-- default basic cell content -->\r\n        <div class=\"ids-cell-content ids-cell-content__default\">{{ _cellValue() }}</div>\r\n      }\r\n    }\r\n  }\r\n}\r\n\r\n<ng-content select=\"[colEnd]\" />\r\n", dependencies: [{ kind: "component", type: IdsIconComponent, selector: "ids-icon", inputs: ["size", "sizeCollection", "variant", "fontIcon", "svgIcon", "aria-hidden"] }, { kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"], exportAs: ["ngComponentOutlet"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.2", ngImport: i0, type: IdsCellContentComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: IdsCellContentComponent, decorators: [{
             type: Component,
             args: [{ selector: 'th[idsCellContent],td[idsCellContent],th[idsHeaderCellContent],td[idsHeaderCellContent]', imports: [
                         IdsIconComponent,
@@ -329,12 +329,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.2", ngImpor
 
 class RowInfoHolderDirective {
     constructor() {
-        this.rowInfo = input.required();
+        this.rowInfo = input.required(...(ngDevMode ? [{ debugName: "rowInfo" }] : []));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.2", ngImport: i0, type: RowInfoHolderDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.1.2", type: RowInfoHolderDirective, isStandalone: true, selector: "[rowInfo]", inputs: { rowInfo: { classPropertyName: "rowInfo", publicName: "rowInfo", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: RowInfoHolderDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.1.7", type: RowInfoHolderDirective, isStandalone: true, selector: "[rowInfo]", inputs: { rowInfo: { classPropertyName: "rowInfo", publicName: "rowInfo", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.2", ngImport: i0, type: RowInfoHolderDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: RowInfoHolderDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[rowInfo]',
@@ -356,48 +356,48 @@ class IdsTableComponent extends ComponentBaseWithDefaults {
         this._defaultConfig = this._getDefaultConfig(defaultConfig, IDS_TABLE_DEFAULT_CONFIG);
         this._cdRef = inject(ChangeDetectorRef);
         this._intl = inject(IdsTableIntl);
-        this._viewCellTemplates = viewChildren(IdsTableCellTemplateDirective);
-        this._rowDataHolders = viewChildren((RowInfoHolderDirective));
-        this._selectorCheckboxes = viewChildren(IdsCheckboxComponent);
-        this._cellContentRenderers = viewChildren((IdsCellContentComponent));
-        this._contentCellTemplates = contentChildren(IdsTableCellTemplateDirective);
-        this.columnDefs = input.required();
-        this.dataSource = input.required();
+        this._viewCellTemplates = viewChildren(IdsTableCellTemplateDirective, ...(ngDevMode ? [{ debugName: "_viewCellTemplates" }] : []));
+        this._rowDataHolders = viewChildren((RowInfoHolderDirective), ...(ngDevMode ? [{ debugName: "_rowDataHolders" }] : []));
+        this._selectorCheckboxes = viewChildren(IdsCheckboxComponent, ...(ngDevMode ? [{ debugName: "_selectorCheckboxes" }] : []));
+        this._cellContentRenderers = viewChildren((IdsCellContentComponent), ...(ngDevMode ? [{ debugName: "_cellContentRenderers" }] : []));
+        this._contentCellTemplates = contentChildren(IdsTableCellTemplateDirective, ...(ngDevMode ? [{ debugName: "_contentCellTemplates" }] : []));
+        this.columnDefs = input.required(...(ngDevMode ? [{ debugName: "columnDefs" }] : []));
+        this.dataSource = input.required(...(ngDevMode ? [{ debugName: "dataSource" }] : []));
         /** Flag to have sticky header. */
-        this.fixedHeader = input(this._defaultConfig.fixedHeader, { transform: coerceBooleanAttribute });
+        this.fixedHeader = input(this._defaultConfig.fixedHeader, ...(ngDevMode ? [{ debugName: "fixedHeader", transform: coerceBooleanAttribute }] : [{ transform: coerceBooleanAttribute }]));
         /** Enable sorting feature */
-        this.enableSorting = input(this._defaultConfig.enableSorting, { transform: coerceBooleanAttribute });
+        this.enableSorting = input(this._defaultConfig.enableSorting, ...(ngDevMode ? [{ debugName: "enableSorting", transform: coerceBooleanAttribute }] : [{ transform: coerceBooleanAttribute }]));
         /** Enable master-detail rows */
-        this.masterDetail = input(this._defaultConfig.masterDetail, { transform: coerceBooleanAttribute });
+        this.masterDetail = input(this._defaultConfig.masterDetail, ...(ngDevMode ? [{ debugName: "masterDetail", transform: coerceBooleanAttribute }] : [{ transform: coerceBooleanAttribute }]));
         /** Name of the detail row renderer template */
-        this.detailTemplateName = input(this._defaultConfig.detailTemplateName);
+        this.detailTemplateName = input(this._defaultConfig.detailTemplateName, ...(ngDevMode ? [{ debugName: "detailTemplateName" }] : []));
         /** If true the detail cell will not span sticky and stickyEnd columns. If false the detail cell will span the table's full width */
-        this.detailStickyColumns = input(this._defaultConfig.detailStickyColumns, { transform: coerceBooleanAttribute });
+        this.detailStickyColumns = input(this._defaultConfig.detailStickyColumns, ...(ngDevMode ? [{ debugName: "detailStickyColumns", transform: coerceBooleanAttribute }] : [{ transform: coerceBooleanAttribute }]));
         /** Whether to show the master-detail column label or not. */
-        this.showDetailHeader = input(this._defaultConfig.showDetailHeader, { transform: coerceBooleanAttribute });
+        this.showDetailHeader = input(this._defaultConfig.showDetailHeader, ...(ngDevMode ? [{ debugName: "showDetailHeader", transform: coerceBooleanAttribute }] : [{ transform: coerceBooleanAttribute }]));
         /** Predicate function to decide whether a data row has details or not */
-        this.hasDetailRow = input(() => false);
+        this.hasDetailRow = input(() => false, ...(ngDevMode ? [{ debugName: "hasDetailRow" }] : []));
         /** Enable row selection feature */
-        this.enableRowSelection = input(this._defaultConfig.enableRowSelection, { transform: coerceBooleanAttribute });
+        this.enableRowSelection = input(this._defaultConfig.enableRowSelection, ...(ngDevMode ? [{ debugName: "enableRowSelection", transform: coerceBooleanAttribute }] : [{ transform: coerceBooleanAttribute }]));
         /** Clear row selection if the table's content changes */
-        this.clearSelectionOnChange = input(this._defaultConfig.clearSelectionOnChange, { transform: coerceBooleanAttribute });
+        this.clearSelectionOnChange = input(this._defaultConfig.clearSelectionOnChange, ...(ngDevMode ? [{ debugName: "clearSelectionOnChange", transform: coerceBooleanAttribute }] : [{ transform: coerceBooleanAttribute }]));
         /** Predicate function to decide whether a row can be selected or not */
-        this.isRowSelectable = input(() => true);
+        this.isRowSelectable = input(() => true, ...(ngDevMode ? [{ debugName: "isRowSelectable" }] : []));
         /** Render "no rows to show" overlay below the table instead of as a row */
-        this.noRowsToShowOverlayBelow = input(this._defaultConfig.noRowsToShowOverlayBelow, { transform: coerceBooleanAttribute });
+        this.noRowsToShowOverlayBelow = input(this._defaultConfig.noRowsToShowOverlayBelow, ...(ngDevMode ? [{ debugName: "noRowsToShowOverlayBelow", transform: coerceBooleanAttribute }] : [{ transform: coerceBooleanAttribute }]));
         /** Whether to show a border around the table or not. */
-        this.withBorder = input(this._defaultConfig.withBorder, { transform: coerceBooleanAttribute });
+        this.withBorder = input(this._defaultConfig.withBorder, ...(ngDevMode ? [{ debugName: "withBorder", transform: coerceBooleanAttribute }] : [{ transform: coerceBooleanAttribute }]));
         /**
          * The table's appearance type. Availabla options:
          * - "line-division": row backgrounds are uniformly colored and divided by thin border lines
          * - "zebra": the backgrounds of even and odd rows are different colors
          * - "plain": row backgrounds are uniformly colored without border lines
          */
-        this.appearance = input(this._defaultConfig.appearance);
+        this.appearance = input(this._defaultConfig.appearance, ...(ngDevMode ? [{ debugName: "appearance" }] : []));
         /** The size type of the table. Affects paddings, margins, gaps, typography, etc. */
-        this.size = input(this._defaultConfig.size);
+        this.size = input(this._defaultConfig.size, ...(ngDevMode ? [{ debugName: "size" }] : []));
         /** The color variant of the table. Availabla options: "primary", "secondary", "surface" */
-        this.variant = input(this._defaultConfig.variant);
+        this.variant = input(this._defaultConfig.variant, ...(ngDevMode ? [{ debugName: "variant" }] : []));
         /** Emits if the column sorting has changed */
         this.sortChange = output();
         /** Emits if the user clicked a cell */
@@ -417,9 +417,9 @@ class IdsTableComponent extends ComponentBaseWithDefaults {
                 default:
                     return tableVariant;
             }
-        });
-        this.embeddedIconButtonAppearance = signal(IdsIconButtonAppearance.STANDARD);
-        this.disabled = signal(false);
+        }, ...(ngDevMode ? [{ debugName: "embeddedIconButtonVariant" }] : []));
+        this.embeddedIconButtonAppearance = signal(IdsIconButtonAppearance.STANDARD, ...(ngDevMode ? [{ debugName: "embeddedIconButtonAppearance" }] : []));
+        this.disabled = signal(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
         //#endregion
         /** Signal that holds the current table contents as an array of objects */
         this.rowData = computed(() => {
@@ -437,18 +437,18 @@ class IdsTableComponent extends ComponentBaseWithDefaults {
             catch {
                 return [];
             }
-        });
+        }, ...(ngDevMode ? [{ debugName: "rowData" }] : []));
         /** The row selection model for the table */
         this.rowSelection = new SelectionModel(true, [], true);
         this._expandedRows = new Set();
-        this._allRowsExpanded = signal(false);
-        this._sortState = signal(null);
+        this._allRowsExpanded = signal(false, ...(ngDevMode ? [{ debugName: "_allRowsExpanded" }] : []));
+        this._sortState = signal(null, ...(ngDevMode ? [{ debugName: "_sortState" }] : []));
         this._hostClasses = computed(() => this._getHostClasses([
             this.appearance(),
             this.size(),
             this.variant(),
             (this.withBorder() ? 'with-border' : null),
-        ]));
+        ]), ...(ngDevMode ? [{ debugName: "_hostClasses" }] : []));
         this._actualColumns = computed(() => {
             const cols = this.columnDefs()
                 // Filter non-visible columns
@@ -478,10 +478,10 @@ class IdsTableComponent extends ComponentBaseWithDefaults {
                 cols.unshift('$selectBoxes');
             }
             return cols;
-        });
+        }, ...(ngDevMode ? [{ debugName: "_actualColumns" }] : []));
         this._hiddenColumns = computed(() => this.columnDefs()
             .filter((colDef) => (colDef.visible === false))
-            .map((colDef) => ({ ...colDef, visible: true })));
+            .map((colDef) => ({ ...colDef, visible: true })), ...(ngDevMode ? [{ debugName: "_hiddenColumns" }] : []));
         this._detailRowTemplates = computed(() => {
             if (!this.detailStickyColumns()) {
                 return ['$expandedDetail'];
@@ -493,7 +493,7 @@ class IdsTableComponent extends ComponentBaseWithDefaults {
                 ...this.columnDefs().filter((colDef) => colDef.stickyEnd).map(() => '$emptyEnd'),
                 ...(this.masterDetail() ? ['$emptyEnd'] : []),
             ];
-        });
+        }, ...(ngDevMode ? [{ debugName: "_detailRowTemplates" }] : []));
         this._detailColSpan = computed(() => {
             const colDefs = this.columnDefs();
             let detailColSpan = colDefs.length;
@@ -501,7 +501,7 @@ class IdsTableComponent extends ComponentBaseWithDefaults {
                 detailColSpan = colDefs.filter((def) => (!def.sticky && !def.stickyEnd && def.visible !== false)).length;
             }
             return detailColSpan;
-        });
+        }, ...(ngDevMode ? [{ debugName: "_detailColSpan" }] : []));
         this._cellTemplatesByName = computed(() => {
             const templateMap = new Map();
             for (const cellTemplate of this._viewCellTemplates()) {
@@ -511,23 +511,23 @@ class IdsTableComponent extends ComponentBaseWithDefaults {
                 templateMap.set(cellTemplate.templateName(), cellTemplate.templateRef);
             }
             return templateMap;
-        });
-        this._defaulDetailTemplate = computed(() => this._viewCellTemplates().find((cellTemplate) => cellTemplate.templateName() === this._defaultMasterDetailTemplateName)?.templateRef);
-        this._detailTemplate = computed(() => this._cellTemplatesByName().get(this.detailTemplateName()));
-        this._hasNoRows = computed(() => this.rowData().length === 0);
-        this._masterDetailEnabled = computed(() => this.masterDetail() && this._cellTemplatesByName().has(this._defaultMasterDetailTemplateName));
+        }, ...(ngDevMode ? [{ debugName: "_cellTemplatesByName" }] : []));
+        this._defaulDetailTemplate = computed(() => this._viewCellTemplates().find((cellTemplate) => cellTemplate.templateName() === this._defaultMasterDetailTemplateName)?.templateRef, ...(ngDevMode ? [{ debugName: "_defaulDetailTemplate" }] : []));
+        this._detailTemplate = computed(() => this._cellTemplatesByName().get(this.detailTemplateName()), ...(ngDevMode ? [{ debugName: "_detailTemplate" }] : []));
+        this._hasNoRows = computed(() => this.rowData().length === 0, ...(ngDevMode ? [{ debugName: "_hasNoRows" }] : []));
+        this._masterDetailEnabled = computed(() => this.masterDetail() && this._cellTemplatesByName().has(this._defaultMasterDetailTemplateName), ...(ngDevMode ? [{ debugName: "_masterDetailEnabled" }] : []));
         this._unselectableRows = computed(() => {
             const rows = this.rowData();
             return new Set(rows.filter((rowData, index) => !this.isRowSelectable()(index, rowData)));
-        });
+        }, ...(ngDevMode ? [{ debugName: "_unselectableRows" }] : []));
         this._rowSelectorCheckboxes = computed(() => {
             const disabledRows = this._unselectableRows();
             return this._selectorCheckboxes().filter((component) => {
                 const value = component.value();
                 return value && !disabledRows.has(value);
             });
-        });
-        this._selectableRowData = computed(() => this._rowSelectorCheckboxes().map((component) => component.value()));
+        }, ...(ngDevMode ? [{ debugName: "_rowSelectorCheckboxes" }] : []));
+        this._selectableRowData = computed(() => this._rowSelectorCheckboxes().map((component) => component.value()), ...(ngDevMode ? [{ debugName: "_selectableRowData" }] : []));
         this._rowSelectionChange = toSignal(this.rowSelection.changed);
         this._isAllSelected = computed(() => {
             const selectionChange = this._rowSelectionChange();
@@ -539,8 +539,8 @@ class IdsTableComponent extends ComponentBaseWithDefaults {
             const numSelected = selectionChange.source.selected.length;
             const activeRowCount = data.filter((row) => !disabledRows.has(row)).length;
             return numSelected === activeRowCount;
-        });
-        this._isSelectAllDisabled = computed(() => this._unselectableRows().size === this._selectableRowData().length);
+        }, ...(ngDevMode ? [{ debugName: "_isAllSelected" }] : []));
+        this._isSelectAllDisabled = computed(() => this._unselectableRows().size === this._selectableRowData().length, ...(ngDevMode ? [{ debugName: "_isSelectAllDisabled" }] : []));
     }
     get _hostName() {
         return 'table';
@@ -615,8 +615,8 @@ class IdsTableComponent extends ComponentBaseWithDefaults {
         }
         this.rowSelection.select(...data);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.2", ngImport: i0, type: IdsTableComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.2", type: IdsTableComponent, isStandalone: true, selector: "ids-table", inputs: { columnDefs: { classPropertyName: "columnDefs", publicName: "columnDefs", isSignal: true, isRequired: true, transformFunction: null }, dataSource: { classPropertyName: "dataSource", publicName: "dataSource", isSignal: true, isRequired: true, transformFunction: null }, fixedHeader: { classPropertyName: "fixedHeader", publicName: "fixedHeader", isSignal: true, isRequired: false, transformFunction: null }, enableSorting: { classPropertyName: "enableSorting", publicName: "enableSorting", isSignal: true, isRequired: false, transformFunction: null }, masterDetail: { classPropertyName: "masterDetail", publicName: "masterDetail", isSignal: true, isRequired: false, transformFunction: null }, detailTemplateName: { classPropertyName: "detailTemplateName", publicName: "detailTemplateName", isSignal: true, isRequired: false, transformFunction: null }, detailStickyColumns: { classPropertyName: "detailStickyColumns", publicName: "detailStickyColumns", isSignal: true, isRequired: false, transformFunction: null }, showDetailHeader: { classPropertyName: "showDetailHeader", publicName: "showDetailHeader", isSignal: true, isRequired: false, transformFunction: null }, hasDetailRow: { classPropertyName: "hasDetailRow", publicName: "hasDetailRow", isSignal: true, isRequired: false, transformFunction: null }, enableRowSelection: { classPropertyName: "enableRowSelection", publicName: "enableRowSelection", isSignal: true, isRequired: false, transformFunction: null }, clearSelectionOnChange: { classPropertyName: "clearSelectionOnChange", publicName: "clearSelectionOnChange", isSignal: true, isRequired: false, transformFunction: null }, isRowSelectable: { classPropertyName: "isRowSelectable", publicName: "isRowSelectable", isSignal: true, isRequired: false, transformFunction: null }, noRowsToShowOverlayBelow: { classPropertyName: "noRowsToShowOverlayBelow", publicName: "noRowsToShowOverlayBelow", isSignal: true, isRequired: false, transformFunction: null }, withBorder: { classPropertyName: "withBorder", publicName: "withBorder", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { sortChange: "sortChange", cellClick: "cellClick", rowClick: "rowClick", rowKeydown: "rowKeydown", contentChanged: "contentChanged" }, providers: [{ provide: IDS_ICON_BUTTON_PARENT, useExisting: IdsTableComponent }], queries: [{ propertyName: "_contentCellTemplates", predicate: IdsTableCellTemplateDirective, isSignal: true }], viewQueries: [{ propertyName: "_viewCellTemplates", predicate: IdsTableCellTemplateDirective, descendants: true, isSignal: true }, { propertyName: "_rowDataHolders", predicate: (RowInfoHolderDirective), descendants: true, isSignal: true }, { propertyName: "_selectorCheckboxes", predicate: IdsCheckboxComponent, descendants: true, isSignal: true }, { propertyName: "_cellContentRenderers", predicate: (IdsCellContentComponent), descendants: true, isSignal: true }], exportAs: ["idsTable"], usesInheritance: true, ngImport: i0, template: "<!-- eslint-disable @angular-eslint/template/prefer-self-closing-tags -->\n\n<!-- Empty table message template  -->\n<ng-template #noRowsToShow>\n  <div class=\"ids-table__no-rows-to-show\">\n    <ng-content select=\"[idsNoRowsToShow]\">No rows to show</ng-content>\n  </div>\n</ng-template>\n\n<!-- Default detail cell template (a table showing the non-visible columns) -->\n<ng-template #defaultDetail let-row let-cols=\"cols\" [idsCellTemplate]=\"_defaultMasterDetailTemplateName\">\n  <ids-table appearance=\"zebra\" [dataSource]=\"[row]\" [columnDefs]=\"cols\"></ids-table>\n</ng-template>\n\n<!-- TODO: Loading spinner -->\n\n<div class=\"ids-table__horizontal-scroll\">\n  <table\n    cdk-table\n    cdkDropListGroup\n    multiTemplateDataRows\n    [id]=\"id()\"\n    [dataSource]=\"dataSource()\"\n    (contentChanged)=\"_tableContentChanged()\"\n    >\n    <caption><ng-content select=\"[idsTableCaption]\"></ng-content></caption>\n\n    <!-- Column and row definitions for row selection -->\n    <ng-container cdkColumnDef=\"$selectBoxes\" sticky>\n      <th\n        *cdkHeaderCellDef\n        cdk-header-cell\n        scope=\"col\"\n        role=\"cell\"\n        class=\"ids-table__header-cell ids-table__header-cell--select-all-rows\"\n      >\n        @let isRowSelected = rowSelection.hasValue();\n        @let isTableVariantPrimary = variant() === 'primary';\n        <ids-checkbox\n          [indeterminate]=\"isRowSelected && !_isAllSelected()\"\n          [checked]=\"isRowSelected && _isAllSelected()\"\n          [disabled]=\"_isSelectAllDisabled()\"\n          [aria-label]=\"_intl.headerSelectorAriaLabel\"\n          [variant]=\"isTableVariantPrimary && isRowSelected ? 'light' : 'surface'\"\n          (change)=\"$event ? _masterToggle() : null\"\n        >\n        </ids-checkbox>\n      </th>\n      <td\n        *cdkCellDef=\"let row; let idx = index\"\n        cdk-cell\n        class=\"ids-table__cell ids-table__cell--row-select\"\n      >\n          <ids-checkbox\n            class=\"ids-table__checkbox--row-selector\"\n            [disabled]=\"_unselectableRows().has(row)\"\n            [checked]=\"rowSelection.isSelected(row)\"\n            [value]=\"row\"\n            [aria-label]=\"_intl.rowSelectorAriaLabel\"\n            (click)=\"$event.stopPropagation()\"\n            (change)=\"$event ? rowSelection.toggle(row) : null\"\n          >\n          </ids-checkbox>\n      </td>\n    </ng-container>\n\n    <!-- Column and row definitions for the master-detail toggle feature -->\n    <ng-container cdkColumnDef=\"$masterDetail\" stickyEnd>\n      <th\n        *cdkHeaderCellDef\n        cdk-header-cell\n        scope=\"col\"\n        class=\"ids-table__header-cell ids-table__header-cell--master-detail-toggle\"\n        [class.ids-table__header-cell--master-detail-toggle-expand]=\"showDetailHeader()\"\n      >\n        @if (showDetailHeader()) {\n          <span>{{ _intl.detailHeaderLabel }}</span>\n        }\n      </th>\n      <td\n        *cdkCellDef=\"let row; let idx = $index\"\n        cdk-cell\n        class=\"ids-table__cell ids-table__cell--master-detail-toggle\"\n        [class.ids-table__cell--master-detail-toggle-expand]=\"showDetailHeader()\"\n      >\n        @let hasDetail = hasDetailRow()(idx, row);\n        @let rowExpanded = _expandedRows.has(row);\n        @if (hasDetail) {\n          <button\n            type=\"button\"\n            idsIconButton\n            class=\"ids-table__button--master-detail\"\n            [attr.aria-expanded]=\"rowExpanded || false\"\n            [attr.aria-label]=\"_intl.getDetailExpandButtonAriaLabel(row) || null\"\n            (click)=\"_handleMasterDetailClick(row)\"\n          >\n            <ids-icon aria-hidden=\"true\" alt=\"\" [fontIcon]=\"rowExpanded ? 'chevron-up' : 'chevron-down'\" />\n          </button>\n        }\n      </td>\n    </ng-container>\n    <!-- Column definition for the detail cells -->\n    <ng-container cdkColumnDef=\"$expandedDetail\">\n      <td *cdkCellDef=\"let row; let idx = index\" cdk-cell class=\"ids-table__cell ids-table__detail-cell\" [attr.colspan]=\"_detailColSpan()\">\n        <div class=\"ids-table__detail-cell--content-wrapper\" [@detailExpand]=\"_expandedRows.has(row) ? 'expanded' : 'collapsed'\">\n          @let isDefaultTemplate = _detailTemplate() === _defaulDetailTemplate();\n          @let context = isDefaultTemplate ? { $implicit: row, cols: _hiddenColumns() } : { $implicit: row };\n          <ng-container *ngTemplateOutlet=\"_detailTemplate() ?? defaultDetail; context: context\"></ng-container>\n        </div>\n      </td>\n    </ng-container>\n\n    <!-- Column definitions for sticky empty cells -->\n    <ng-container cdkColumnDef=\"$empty\" sticky>\n      <td *cdkCellDef=\"let row; let idx = index\" cdk-cell class=\"ids-table__cell\"></td>\n    </ng-container>\n    <ng-container cdkColumnDef=\"$emptyEnd\" stickyEnd>\n      <td *cdkCellDef=\"let row; let idx = index\" cdk-cell class=\"ids-table__cell\"></td>\n    </ng-container>\n\n    <!-- Column and row definitions for the actual data -->\n    @for (col of columnDefs(); track col.id; let colIndex = $index; let isLast = $last ) {\n      <ng-container\n        [cdkColumnDef]=\"col.id\"\n        [sticky]=\"col.sticky && !col.stickyEnd\"\n        [stickyEnd]=\"col.stickyEnd && !col.sticky\"\n      >\n        @let colSortable = col.sortable && enableSorting();\n        @let colNumeric = col.cellRenderer === 'numeric';\n        @let orderName = col.orderName || col.field || col.id;\n        @let sortDirection = colSortable && _sortState()?.sortBy === orderName ? _sortState()?.direction : null;\n        @let nextSortDirection = _getNextSortDirectionFor(orderName);\n        <th\n          *cdkHeaderCellDef\n          cdk-header-cell\n          class=\"ids-table__header-cell\"\n          idsHeaderCellContent\n          scope=\"col\"\n          [class.ids-table__header-cell--sortable]=\"colSortable\"\n          [class.ids-table__header-cell--numeric]=\"colNumeric\"\n          [class]=\"col.columnClasses || ''\"\n          [colDef]=\"col\"\n          [externalCellTemplates]=\"_cellTemplatesByName()\"\n          [id]=\"id() + '-header-' + col.id\"\n        >\n          @if (colSortable) {\n            <button\n              type=\"button\"\n              idsIconButton\n              colEnd\n              class=\"ids-table__header-cell--sort-button\"\n              [attr.aria-label]=\"_intl.getSortButtonAriaLabel(col, nextSortDirection)\"\n              (click)=\"_handleSortClick(orderName)\"\n            >\n              @switch (sortDirection) {\n                @case ('asc') {\n                  <ids-icon [fontIcon]=\"'chevron-up'\"></ids-icon>\n                }\n                @case ('desc') {\n                  <ids-icon [fontIcon]=\"'chevron-down'\"></ids-icon>\n                }\n                @default {\n                  <ids-icon [fontIcon]=\"'adjustments-horizontal'\"></ids-icon>\n                }\n              }\n            </button>\n          }\n        </th>\n\n        @if (col.identifier) {\n          <th\n            *cdkCellDef=\"let row; let idx = index\"\n            cdk-cell\n            idsCellContent\n            class=\"ids-table__cell ids-table__cell--identifier\"\n            role=\"gridcell\"\n            scope=\"row\"\n            [class]=\"col.cellClasses || ''\"\n            [colDef]=\"col\"\n            [rowData]=\"row\"\n            [externalCellTemplates]=\"_cellTemplatesByName()\"\n            (click)=\"_handleCellClick($event, row, col)\"\n          ></th>\n        } @else {\n          <td\n            *cdkCellDef=\"let row; let idx = index\"\n            cdk-cell\n            class=\"ids-table__cell\"\n            idsCellContent\n            [class]=\"col.cellClasses || ''\"\n            [colDef]=\"col\"\n            [rowData]=\"row\"\n            [externalCellTemplates]=\"_cellTemplatesByName()\"\n            (click)=\"_handleCellClick($event, row, col)\"\n          ></td>\n        }\n      </ng-container>\n    }\n\n    <!-- Header row render definition -->\n    <tr *cdkHeaderRowDef=\"_actualColumns(); sticky: fixedHeader()\" cdk-header-row class=\"ids-table__header-row\"></tr>\n\n    <!-- Row render definition -->\n    <tr\n      *cdkRowDef=\"let row; columns: _actualColumns(); let idx = dataIndex\"\n      cdk-row\n      class=\"ids-table__row\"\n      [rowInfo]=\"{ rowData: row, index: idx }\"\n      [ngClass]=\"(appearance() !== _appearanceZebra || idx % 2 === 0) ? 'ids-table__row--surface' : 'ids-table__row--secondary'\"\n      (click)=\"_handleRowClick($event, row)\"\n      (keydown)=\"_handleRowKeyDown($event, row)\"\n    ></tr>\n\n    <!-- Detail row render definition -->\n    @if (masterDetail()) {\n      <tr\n        *cdkRowDef=\"let row; columns: _detailRowTemplates(); when: hasDetailRow()\"\n        cdk-row\n        class=\"ids-table__detail-row ids-table__row--surface\"\n        [class.ids-table__detail-row--expanded]=\"_expandedRows.has(row) || _allRowsExpanded()\"\n      ></tr>\n    }\n\n    <!-- Empty table message (inside the table) -->\n    @if (!noRowsToShowOverlayBelow()) {\n      <tr *cdkNoDataRow class=\"ids-table__row\">\n        <td class=\"ids-table__cell\" [attr.colspan]=\"_actualColumns().length\">\n          <ng-container [ngTemplateOutlet]=\"noRowsToShow\"></ng-container>\n        </td>\n      </tr>\n    }\n  </table>\n</div>\n<!-- Empty table message (outside the table) -->\n@if (noRowsToShowOverlayBelow() && _hasNoRows()) {\n  <ng-container [ngTemplateOutlet]=\"noRowsToShow\"></ng-container>\n}\n", dependencies: [{ kind: "component", type: IdsTableComponent, selector: "ids-table", inputs: ["columnDefs", "dataSource", "fixedHeader", "enableSorting", "masterDetail", "detailTemplateName", "detailStickyColumns", "showDetailHeader", "hasDetailRow", "enableRowSelection", "clearSelectionOnChange", "isRowSelectable", "noRowsToShowOverlayBelow", "withBorder", "appearance", "size", "variant"], outputs: ["sortChange", "cellClick", "rowClick", "rowKeydown", "contentChanged"], exportAs: ["idsTable"] }, { kind: "component", type: IdsCellContentComponent, selector: "th[idsCellContent],td[idsCellContent],th[idsHeaderCellContent],td[idsHeaderCellContent]", inputs: ["externalCellTemplates"] }, { kind: "component", type: IdsCheckboxComponent, selector: "ids-checkbox", inputs: ["name", "required", "readonly", "size", "tabIndex", "value", "variant", "checked", "indeterminate", "aria-label", "aria-labelledby", "aria-describedby", "disabled"], outputs: ["disabledChange", "change", "indeterminateChange"] }, { kind: "component", type: IdsIconComponent, selector: "ids-icon", inputs: ["size", "sizeCollection", "variant", "fontIcon", "svgIcon", "aria-hidden"] }, { kind: "component", type: IdsIconButtonComponent, selector: "button[idsIconButton], a[idsIconButton]", inputs: ["appearance", "size", "variant", "disabled"] }, { kind: "directive", type: IdsTableCellTemplateDirective, selector: "[idsCellTemplate]", inputs: ["idsCellTemplate"] }, { kind: "directive", type: CdkCell, selector: "cdk-cell, td[cdk-cell]" }, { kind: "directive", type: CdkCellDef, selector: "[cdkCellDef]" }, { kind: "directive", type: CdkColumnDef, selector: "[cdkColumnDef]", inputs: ["cdkColumnDef", "sticky", "stickyEnd"] }, { kind: "directive", type: CdkHeaderCell, selector: "cdk-header-cell, th[cdk-header-cell]" }, { kind: "directive", type: CdkHeaderCellDef, selector: "[cdkHeaderCellDef]" }, { kind: "component", type: CdkHeaderRow, selector: "cdk-header-row, tr[cdk-header-row]" }, { kind: "directive", type: CdkHeaderRowDef, selector: "[cdkHeaderRowDef]", inputs: ["cdkHeaderRowDef", "cdkHeaderRowDefSticky"] }, { kind: "directive", type: CdkNoDataRow, selector: "ng-template[cdkNoDataRow]" }, { kind: "component", type: CdkRow, selector: "cdk-row, tr[cdk-row]" }, { kind: "directive", type: CdkRowDef, selector: "[cdkRowDef]", inputs: ["cdkRowDefColumns", "cdkRowDefWhen"] }, { kind: "component", type: CdkTable, selector: "cdk-table, table[cdk-table]", inputs: ["trackBy", "dataSource", "multiTemplateDataRows", "fixedLayout"], outputs: ["contentChanged"], exportAs: ["cdkTable"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: RowInfoHolderDirective, selector: "[rowInfo]", inputs: ["rowInfo"] }], animations: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: IdsTableComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.7", type: IdsTableComponent, isStandalone: true, selector: "ids-table", inputs: { columnDefs: { classPropertyName: "columnDefs", publicName: "columnDefs", isSignal: true, isRequired: true, transformFunction: null }, dataSource: { classPropertyName: "dataSource", publicName: "dataSource", isSignal: true, isRequired: true, transformFunction: null }, fixedHeader: { classPropertyName: "fixedHeader", publicName: "fixedHeader", isSignal: true, isRequired: false, transformFunction: null }, enableSorting: { classPropertyName: "enableSorting", publicName: "enableSorting", isSignal: true, isRequired: false, transformFunction: null }, masterDetail: { classPropertyName: "masterDetail", publicName: "masterDetail", isSignal: true, isRequired: false, transformFunction: null }, detailTemplateName: { classPropertyName: "detailTemplateName", publicName: "detailTemplateName", isSignal: true, isRequired: false, transformFunction: null }, detailStickyColumns: { classPropertyName: "detailStickyColumns", publicName: "detailStickyColumns", isSignal: true, isRequired: false, transformFunction: null }, showDetailHeader: { classPropertyName: "showDetailHeader", publicName: "showDetailHeader", isSignal: true, isRequired: false, transformFunction: null }, hasDetailRow: { classPropertyName: "hasDetailRow", publicName: "hasDetailRow", isSignal: true, isRequired: false, transformFunction: null }, enableRowSelection: { classPropertyName: "enableRowSelection", publicName: "enableRowSelection", isSignal: true, isRequired: false, transformFunction: null }, clearSelectionOnChange: { classPropertyName: "clearSelectionOnChange", publicName: "clearSelectionOnChange", isSignal: true, isRequired: false, transformFunction: null }, isRowSelectable: { classPropertyName: "isRowSelectable", publicName: "isRowSelectable", isSignal: true, isRequired: false, transformFunction: null }, noRowsToShowOverlayBelow: { classPropertyName: "noRowsToShowOverlayBelow", publicName: "noRowsToShowOverlayBelow", isSignal: true, isRequired: false, transformFunction: null }, withBorder: { classPropertyName: "withBorder", publicName: "withBorder", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { sortChange: "sortChange", cellClick: "cellClick", rowClick: "rowClick", rowKeydown: "rowKeydown", contentChanged: "contentChanged" }, providers: [{ provide: IDS_ICON_BUTTON_PARENT, useExisting: IdsTableComponent }], queries: [{ propertyName: "_contentCellTemplates", predicate: IdsTableCellTemplateDirective, isSignal: true }], viewQueries: [{ propertyName: "_viewCellTemplates", predicate: IdsTableCellTemplateDirective, descendants: true, isSignal: true }, { propertyName: "_rowDataHolders", predicate: (RowInfoHolderDirective), descendants: true, isSignal: true }, { propertyName: "_selectorCheckboxes", predicate: IdsCheckboxComponent, descendants: true, isSignal: true }, { propertyName: "_cellContentRenderers", predicate: (IdsCellContentComponent), descendants: true, isSignal: true }], exportAs: ["idsTable"], usesInheritance: true, ngImport: i0, template: "<!-- eslint-disable @angular-eslint/template/prefer-self-closing-tags -->\n\n<!-- Empty table message template  -->\n<ng-template #noRowsToShow>\n  <div class=\"ids-table__no-rows-to-show\">\n    <ng-content select=\"[idsNoRowsToShow]\">No rows to show</ng-content>\n  </div>\n</ng-template>\n\n<!-- Default detail cell template (a table showing the non-visible columns) -->\n<ng-template #defaultDetail let-row let-cols=\"cols\" [idsCellTemplate]=\"_defaultMasterDetailTemplateName\">\n  <ids-table appearance=\"zebra\" [dataSource]=\"[row]\" [columnDefs]=\"cols\"></ids-table>\n</ng-template>\n\n<!-- TODO: Loading spinner -->\n\n<div class=\"ids-table__horizontal-scroll\">\n  <table\n    cdk-table\n    cdkDropListGroup\n    multiTemplateDataRows\n    [id]=\"id()\"\n    [dataSource]=\"dataSource()\"\n    (contentChanged)=\"_tableContentChanged()\"\n    >\n    <caption><ng-content select=\"[idsTableCaption]\"></ng-content></caption>\n\n    <!-- Column and row definitions for row selection -->\n    <ng-container cdkColumnDef=\"$selectBoxes\" sticky>\n      <th\n        *cdkHeaderCellDef\n        cdk-header-cell\n        scope=\"col\"\n        role=\"cell\"\n        class=\"ids-table__header-cell ids-table__header-cell--select-all-rows\"\n      >\n        @let isRowSelected = rowSelection.hasValue();\n        @let isTableVariantPrimary = variant() === 'primary';\n        <ids-checkbox\n          [indeterminate]=\"isRowSelected && !_isAllSelected()\"\n          [checked]=\"isRowSelected && _isAllSelected()\"\n          [disabled]=\"_isSelectAllDisabled()\"\n          [aria-label]=\"_intl.headerSelectorAriaLabel\"\n          [variant]=\"isTableVariantPrimary && isRowSelected ? 'light' : 'surface'\"\n          (change)=\"$event ? _masterToggle() : null\"\n        >\n        </ids-checkbox>\n      </th>\n      <td\n        *cdkCellDef=\"let row; let idx = index\"\n        cdk-cell\n        class=\"ids-table__cell ids-table__cell--row-select\"\n      >\n          <ids-checkbox\n            class=\"ids-table__checkbox--row-selector\"\n            [disabled]=\"_unselectableRows().has(row)\"\n            [checked]=\"rowSelection.isSelected(row)\"\n            [value]=\"row\"\n            [aria-label]=\"_intl.rowSelectorAriaLabel\"\n            (click)=\"$event.stopPropagation()\"\n            (change)=\"$event ? rowSelection.toggle(row) : null\"\n          >\n          </ids-checkbox>\n      </td>\n    </ng-container>\n\n    <!-- Column and row definitions for the master-detail toggle feature -->\n    <ng-container cdkColumnDef=\"$masterDetail\" stickyEnd>\n      <th\n        *cdkHeaderCellDef\n        cdk-header-cell\n        scope=\"col\"\n        class=\"ids-table__header-cell ids-table__header-cell--master-detail-toggle\"\n        [class.ids-table__header-cell--master-detail-toggle-expand]=\"showDetailHeader()\"\n      >\n        @if (showDetailHeader()) {\n          <span>{{ _intl.detailHeaderLabel }}</span>\n        }\n      </th>\n      <td\n        *cdkCellDef=\"let row; let idx = $index\"\n        cdk-cell\n        class=\"ids-table__cell ids-table__cell--master-detail-toggle\"\n        [class.ids-table__cell--master-detail-toggle-expand]=\"showDetailHeader()\"\n      >\n        @let hasDetail = hasDetailRow()(idx, row);\n        @let rowExpanded = _expandedRows.has(row);\n        @if (hasDetail) {\n          <button\n            type=\"button\"\n            idsIconButton\n            class=\"ids-table__button--master-detail\"\n            [attr.aria-expanded]=\"rowExpanded || false\"\n            [attr.aria-label]=\"_intl.getDetailExpandButtonAriaLabel(row) || null\"\n            (click)=\"_handleMasterDetailClick(row)\"\n          >\n            <ids-icon aria-hidden=\"true\" alt=\"\" [fontIcon]=\"rowExpanded ? 'chevron-up' : 'chevron-down'\" />\n          </button>\n        }\n      </td>\n    </ng-container>\n    <!-- Column definition for the detail cells -->\n    <ng-container cdkColumnDef=\"$expandedDetail\">\n      <td *cdkCellDef=\"let row; let idx = index\" cdk-cell class=\"ids-table__cell ids-table__detail-cell\" [attr.colspan]=\"_detailColSpan()\">\n        <div class=\"ids-table__detail-cell--content-wrapper\" [@detailExpand]=\"_expandedRows.has(row) ? 'expanded' : 'collapsed'\">\n          @let isDefaultTemplate = _detailTemplate() === _defaulDetailTemplate();\n          @let context = isDefaultTemplate ? { $implicit: row, cols: _hiddenColumns() } : { $implicit: row };\n          <ng-container *ngTemplateOutlet=\"_detailTemplate() ?? defaultDetail; context: context\"></ng-container>\n        </div>\n      </td>\n    </ng-container>\n\n    <!-- Column definitions for sticky empty cells -->\n    <ng-container cdkColumnDef=\"$empty\" sticky>\n      <td *cdkCellDef=\"let row; let idx = index\" cdk-cell class=\"ids-table__cell\"></td>\n    </ng-container>\n    <ng-container cdkColumnDef=\"$emptyEnd\" stickyEnd>\n      <td *cdkCellDef=\"let row; let idx = index\" cdk-cell class=\"ids-table__cell\"></td>\n    </ng-container>\n\n    <!-- Column and row definitions for the actual data -->\n    @for (col of columnDefs(); track col.id; let colIndex = $index; let isLast = $last ) {\n      <ng-container\n        [cdkColumnDef]=\"col.id\"\n        [sticky]=\"col.sticky && !col.stickyEnd\"\n        [stickyEnd]=\"col.stickyEnd && !col.sticky\"\n      >\n        @let colSortable = col.sortable && enableSorting();\n        @let colNumeric = col.cellRenderer === 'numeric';\n        @let orderName = col.orderName || col.field || col.id;\n        @let sortDirection = colSortable && _sortState()?.sortBy === orderName ? _sortState()?.direction : null;\n        @let nextSortDirection = _getNextSortDirectionFor(orderName);\n        <th\n          *cdkHeaderCellDef\n          cdk-header-cell\n          class=\"ids-table__header-cell\"\n          idsHeaderCellContent\n          scope=\"col\"\n          [class.ids-table__header-cell--sortable]=\"colSortable\"\n          [class.ids-table__header-cell--numeric]=\"colNumeric\"\n          [class]=\"col.columnClasses || ''\"\n          [colDef]=\"col\"\n          [externalCellTemplates]=\"_cellTemplatesByName()\"\n          [id]=\"id() + '-header-' + col.id\"\n        >\n          @if (colSortable) {\n            <button\n              type=\"button\"\n              idsIconButton\n              colEnd\n              class=\"ids-table__header-cell--sort-button\"\n              [attr.aria-label]=\"_intl.getSortButtonAriaLabel(col, nextSortDirection)\"\n              (click)=\"_handleSortClick(orderName)\"\n            >\n              @switch (sortDirection) {\n                @case ('asc') {\n                  <ids-icon [fontIcon]=\"'chevron-up'\"></ids-icon>\n                }\n                @case ('desc') {\n                  <ids-icon [fontIcon]=\"'chevron-down'\"></ids-icon>\n                }\n                @default {\n                  <ids-icon [fontIcon]=\"'adjustments-horizontal'\"></ids-icon>\n                }\n              }\n            </button>\n          }\n        </th>\n\n        @if (col.identifier) {\n          <th\n            *cdkCellDef=\"let row; let idx = index\"\n            cdk-cell\n            idsCellContent\n            class=\"ids-table__cell ids-table__cell--identifier\"\n            role=\"gridcell\"\n            scope=\"row\"\n            [class]=\"col.cellClasses || ''\"\n            [colDef]=\"col\"\n            [rowData]=\"row\"\n            [externalCellTemplates]=\"_cellTemplatesByName()\"\n            (click)=\"_handleCellClick($event, row, col)\"\n          ></th>\n        } @else {\n          <td\n            *cdkCellDef=\"let row; let idx = index\"\n            cdk-cell\n            class=\"ids-table__cell\"\n            idsCellContent\n            [class]=\"col.cellClasses || ''\"\n            [colDef]=\"col\"\n            [rowData]=\"row\"\n            [externalCellTemplates]=\"_cellTemplatesByName()\"\n            (click)=\"_handleCellClick($event, row, col)\"\n          ></td>\n        }\n      </ng-container>\n    }\n\n    <!-- Header row render definition -->\n    <tr *cdkHeaderRowDef=\"_actualColumns(); sticky: fixedHeader()\" cdk-header-row class=\"ids-table__header-row\"></tr>\n\n    <!-- Row render definition -->\n    <tr\n      *cdkRowDef=\"let row; columns: _actualColumns(); let idx = dataIndex\"\n      cdk-row\n      class=\"ids-table__row\"\n      [rowInfo]=\"{ rowData: row, index: idx }\"\n      [ngClass]=\"(appearance() !== _appearanceZebra || idx % 2 === 0) ? 'ids-table__row--surface' : 'ids-table__row--secondary'\"\n      (click)=\"_handleRowClick($event, row)\"\n      (keydown)=\"_handleRowKeyDown($event, row)\"\n    ></tr>\n\n    <!-- Detail row render definition -->\n    @if (masterDetail()) {\n      <tr\n        *cdkRowDef=\"let row; columns: _detailRowTemplates(); when: hasDetailRow()\"\n        cdk-row\n        class=\"ids-table__detail-row ids-table__row--surface\"\n        [class.ids-table__detail-row--expanded]=\"_expandedRows.has(row) || _allRowsExpanded()\"\n      ></tr>\n    }\n\n    <!-- Empty table message (inside the table) -->\n    @if (!noRowsToShowOverlayBelow()) {\n      <tr *cdkNoDataRow class=\"ids-table__row\">\n        <td class=\"ids-table__cell\" [attr.colspan]=\"_actualColumns().length\">\n          <ng-container [ngTemplateOutlet]=\"noRowsToShow\"></ng-container>\n        </td>\n      </tr>\n    }\n  </table>\n</div>\n<!-- Empty table message (outside the table) -->\n@if (noRowsToShowOverlayBelow() && _hasNoRows()) {\n  <ng-container [ngTemplateOutlet]=\"noRowsToShow\"></ng-container>\n}\n", dependencies: [{ kind: "component", type: IdsTableComponent, selector: "ids-table", inputs: ["columnDefs", "dataSource", "fixedHeader", "enableSorting", "masterDetail", "detailTemplateName", "detailStickyColumns", "showDetailHeader", "hasDetailRow", "enableRowSelection", "clearSelectionOnChange", "isRowSelectable", "noRowsToShowOverlayBelow", "withBorder", "appearance", "size", "variant"], outputs: ["sortChange", "cellClick", "rowClick", "rowKeydown", "contentChanged"], exportAs: ["idsTable"] }, { kind: "component", type: IdsCellContentComponent, selector: "th[idsCellContent],td[idsCellContent],th[idsHeaderCellContent],td[idsHeaderCellContent]", inputs: ["externalCellTemplates"] }, { kind: "component", type: IdsCheckboxComponent, selector: "ids-checkbox", inputs: ["name", "required", "readonly", "size", "tabIndex", "value", "variant", "checked", "indeterminate", "aria-label", "aria-labelledby", "aria-describedby", "disabled"], outputs: ["disabledChange", "change", "indeterminateChange"] }, { kind: "component", type: IdsIconComponent, selector: "ids-icon", inputs: ["size", "sizeCollection", "variant", "fontIcon", "svgIcon", "aria-hidden"] }, { kind: "component", type: IdsIconButtonComponent, selector: "button[idsIconButton], a[idsIconButton]", inputs: ["appearance", "size", "variant", "disabled"] }, { kind: "directive", type: IdsTableCellTemplateDirective, selector: "[idsCellTemplate]", inputs: ["idsCellTemplate"] }, { kind: "directive", type: CdkCell, selector: "cdk-cell, td[cdk-cell]" }, { kind: "directive", type: CdkCellDef, selector: "[cdkCellDef]" }, { kind: "directive", type: CdkColumnDef, selector: "[cdkColumnDef]", inputs: ["cdkColumnDef", "sticky", "stickyEnd"] }, { kind: "directive", type: CdkHeaderCell, selector: "cdk-header-cell, th[cdk-header-cell]" }, { kind: "directive", type: CdkHeaderCellDef, selector: "[cdkHeaderCellDef]" }, { kind: "component", type: CdkHeaderRow, selector: "cdk-header-row, tr[cdk-header-row]" }, { kind: "directive", type: CdkHeaderRowDef, selector: "[cdkHeaderRowDef]", inputs: ["cdkHeaderRowDef", "cdkHeaderRowDefSticky"] }, { kind: "directive", type: CdkNoDataRow, selector: "ng-template[cdkNoDataRow]" }, { kind: "component", type: CdkRow, selector: "cdk-row, tr[cdk-row]" }, { kind: "directive", type: CdkRowDef, selector: "[cdkRowDef]", inputs: ["cdkRowDefColumns", "cdkRowDefWhen"] }, { kind: "component", type: CdkTable, selector: "cdk-table, table[cdk-table]", inputs: ["trackBy", "dataSource", "multiTemplateDataRows", "fixedLayout"], outputs: ["contentChanged"], exportAs: ["cdkTable"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: RowInfoHolderDirective, selector: "[rowInfo]", inputs: ["rowInfo"] }], animations: [
             trigger('detailExpand', [
                 state('collapsed', style({ height: '0px', minHeight: '0', visibility: 'hidden' })),
                 state('expanded', style({ height: '*', visibility: 'visible' })),
@@ -624,7 +624,7 @@ class IdsTableComponent extends ComponentBaseWithDefaults {
             ]),
         ], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.2", ngImport: i0, type: IdsTableComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: IdsTableComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ids-table', imports: [
                         IdsCellContentComponent,