@i-cell/ids-angular 0.0.0-watch

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

@@ -0,0 +1,663 @@
+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, 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, 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, IdsIconButtonComponent, IDS_ICON_BUTTON_PARENT } from '@i-cell/ids-angular/icon-button';
+
+const DEFAULT_DATA_LOAD_DEBOUNCE_TIME = 100;
+class ServerSideDataSource {
+    get data() {
+        return this._dataSubject.value;
+    }
+    set data(value) {
+        this._dataSubject.next(value);
+    }
+    get pageInfo() {
+        return this._pageInfoSubject.value;
+    }
+    set pageInfo(value) {
+        this._pageInfoSubject.next(value);
+    }
+    get length() {
+        return this.data.length;
+    }
+    constructor(_requestFactory, _resetDataAndPagingOnError = false) {
+        this._requestFactory = _requestFactory;
+        this._resetDataAndPagingOnError = _resetDataAndPagingOnError;
+        this._dataSubject = new BehaviorSubject([]);
+        this._sortSubject = new BehaviorSubject(null);
+        this._pageSubject = new BehaviorSubject(null);
+        this._pageInfoSubject = new BehaviorSubject(null);
+        this._loadDataTriggerSubject = new Subject();
+        this._loadingSubject = new BehaviorSubject(false);
+        this.data$ = this._dataSubject.asObservable();
+        this.isLoading$ = this._loadingSubject.asObservable();
+        this.pageInfo$ = this._pageInfoSubject.asObservable();
+        this.pageIndex$ = this.pageInfo$.pipe(map((pageInfo) => ((pageInfo?.page ?? 1) - 1)));
+    }
+    connect() {
+        this._initDataLoading();
+        this.refreshData();
+        return this.data$;
+    }
+    disconnect() {
+        this._dataSubject.complete();
+        this._sortSubject.complete();
+        this._loadingSubject.complete();
+        this._loadDataSubscription?.unsubscribe();
+    }
+    sort(sortInfo) {
+        // sorting resets the "page" to 1 (TODO: config option?)
+        this._pageSubject.next({
+            page: 1,
+            rows: this._pageSubject.value?.rows ?? DEFAULT_PAGE_SIZE,
+        });
+        this._sortSubject.next(sortInfo ?? null);
+    }
+    page(pageEvent) {
+        this._pageSubject.next(pageEvent ? {
+            page: pageEvent.pageIndex + 1,
+            rows: pageEvent.pageSize,
+        } : null);
+    }
+    /**
+     * Loads data from specified endpoint.
+     */
+    refreshData() {
+        this._loadDataTriggerSubject.next();
+    }
+    _initDataLoading() {
+        this._loadDataSubscription = merge(this._sortSubject, this._pageSubject, this._loadDataTriggerSubject)
+            .pipe(debounceTime(DEFAULT_DATA_LOAD_DEBOUNCE_TIME), switchMap(() => {
+            this._loadingSubject.next(true);
+            const pageInfo = this.pageInfo;
+            const paginationData = this._pageSubject.value;
+            let requestPaginationData = null;
+            if (pageInfo || paginationData) {
+                requestPaginationData = {
+                    page: paginationData?.page ?? pageInfo?.page ?? 1,
+                    rows: paginationData?.rows ?? pageInfo?.rows ?? DEFAULT_PAGE_SIZE,
+                };
+            }
+            const request$ = this._requestFactory(requestPaginationData, this._sortSubject.value);
+            if (!(request$ instanceof Observable)) {
+                throw new Error('The `requestFactory` should return an Observable!');
+            }
+            return request$.pipe(catchError(() => of(this._resetDataAndPagingOnError ?
+                {
+                    resultList: [],
+                    paginationParams: {
+                        page: 1,
+                        totalRows: 0,
+                        rows: this.pageInfo?.rows ?? DEFAULT_PAGE_SIZE,
+                    },
+                }
+                :
+                    {
+                        resultList: this.data,
+                        paginationParams: this.pageInfo,
+                    })), tap((response) => {
+                this.data = response.resultList ?? [];
+                this._pageInfoSubject.next(response.paginationParams);
+            }), finalize(() => this._loadingSubject.next(false)));
+        })).subscribe();
+    }
+}
+
+class IdsTableCellRenderer {
+    constructor() {
+        this._entities = [
+            { rx: '&', entity: '&' },
+            { rx: '<', entity: '&lt;' },
+            { rx: '>', entity: '&gt;' },
+            { rx: '"', entity: '&quot;' },
+            { rx: '\'', entity: '&#x27;' },
+            { rx: '/', entity: '&#x2F;' },
+        ];
+        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);
+    }
+    _preSanitize(input) {
+        if (!input) {
+            return input;
+        }
+        // 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: "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: "20.1.7", ngImport: i0, type: IdsTableCellRenderer, decorators: [{
+            type: Directive
+        }] });
+
+class IdsTableCellTemplateDirective {
+    constructor() {
+        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: "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: "20.1.7", ngImport: i0, type: IdsTableCellTemplateDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[idsCellTemplate]',
+                    standalone: true,
+                }]
+        }] });
+
+const IdsTableAppearance = {
+    PLAIN: 'plain',
+    LINE_DIVISION: 'line-division',
+    ZEBRA: 'zebra',
+};
+
+const IdsTableSortDirection = {
+    NONE: '',
+    ASC: 'asc',
+    DESC: 'desc',
+};
+
+class IdsTableSortInfo {
+    constructor(sortBy, direction) {
+        this.sortBy = sortBy;
+        this.direction = direction;
+    }
+}
+
+const IdsTableVariant = {
+    PRIMARY: 'primary',
+    SECONDARY: 'secondary',
+    SURFACE: 'surface',
+};
+
+const DEFAULT_MASTER_DETAIL_TEMPLATE_NAME = 'detail';
+const IDS_TABLE_DEFAULT_CONFIG = new InjectionToken('IDS_TABLE_DEFAULT_CONFIG', {
+    providedIn: 'root',
+    factory: IDS_TABLE_DEFAULT_CONFIG_FACTORY,
+});
+function IDS_TABLE_DEFAULT_CONFIG_FACTORY() {
+    return {
+        appearance: IdsTableAppearance.LINE_DIVISION,
+        size: IdsSize.COMPACT,
+        variant: IdsTableVariant.SURFACE,
+        fixedHeader: false,
+        enableSorting: false,
+        masterDetail: false,
+        detailTemplateName: DEFAULT_MASTER_DETAIL_TEMPLATE_NAME,
+        detailStickyColumns: true,
+        showDetailHeader: false,
+        enableRowSelection: false,
+        clearSelectionOnChange: true,
+        noRowsToShowOverlayBelow: false,
+        withBorder: false,
+    };
+}
+
+class IdsTableIntl {
+    constructor() {
+        this.changes = new Subject();
+        this.numberFormat = new Intl.NumberFormat();
+        this.headerSelectorAriaLabel = 'Select/deselect all rows';
+        this.rowSelectorAriaLabel = 'Select/deselect row';
+        this.detailHeaderLabel = 'Actions';
+    }
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    getDetailExpandButtonAriaLabel(rowData) {
+        return 'Expand row details';
+    }
+    getSortButtonAriaLabel(colDef, nextSortDirection) {
+        const label = this.getColLabel(colDef);
+        switch (nextSortDirection) {
+            case IdsTableSortDirection.NONE:
+                return `Unsort ${label}`;
+            case IdsTableSortDirection.ASC:
+                return `Sort ${label} ascending`;
+            case IdsTableSortDirection.DESC:
+                return `Sort ${label} descending`;
+        }
+    }
+    ;
+    getColLabel(colDef) {
+        return colDef.label || '';
+    }
+    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: "20.1.7", ngImport: i0, type: IdsTableIntl, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+/** @docs-private */
+function IDS_TABLE_INTL_PROVIDER_FACTORY(parentIntl) {
+    return parentIntl || new IdsTableIntl();
+}
+/** @docs-private */
+const IDS_TABLE_INTL_PROVIDER = {
+    // If there is already an IdsTableIntl available, use that. Otherwise, provide a new one.
+    provide: IdsTableIntl,
+    deps: [
+        [
+            new Optional(),
+            new SkipSelf(),
+            IdsTableIntl,
+        ],
+    ],
+    useFactory: IDS_TABLE_INTL_PROVIDER_FACTORY,
+};
+
+/**
+ * This component handles the rendering of a table cell based on the column definition and row data using internal or external cell renderer
+ * templates or components.
+ */
+class IdsCellContentComponent extends IdsTableCellRenderer {
+    constructor() {
+        super(...arguments);
+        this._elementRef = inject(ElementRef);
+        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(...(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();
+            if (this._isHeader) {
+                return this.colDef().label ?? '';
+            }
+            const rowData = this.rowData();
+            if (!rowData) {
+                return '';
+            }
+            const field = this.colDef().field ?? '';
+            const valueFn = this.colDef().value ?? (() => '');
+            const rawResult = field && Object.hasOwn(rowData, field) ? rowData[field] : valueFn(rowData);
+            return isString(rawResult) ? this._preSanitize(rawResult) : rawResult;
+        }, ...(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: "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: "20.1.7", ngImport: i0, type: IdsCellContentComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'th[idsCellContent],td[idsCellContent],th[idsHeaderCellContent],td[idsHeaderCellContent]', imports: [
+                        IdsIconComponent,
+                        NgComponentOutlet,
+                        NgTemplateOutlet,
+                    ], 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" }]
+        }] });
+
+class RowInfoHolderDirective {
+    constructor() {
+        this.rowInfo = input.required(...(ngDevMode ? [{ debugName: "rowInfo" }] : []));
+    }
+    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: "20.1.7", ngImport: i0, type: RowInfoHolderDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[rowInfo]',
+                    standalone: true,
+                }]
+        }] });
+
+const defaultConfig = IDS_TABLE_DEFAULT_CONFIG_FACTORY();
+class IdsTableComponent extends ComponentBaseWithDefaults {
+    constructor() {
+        super(...arguments);
+        this._sortDirections = [
+            '',
+            'asc',
+            'desc',
+        ];
+        this._appearanceZebra = IdsTableAppearance.ZEBRA;
+        this._defaultMasterDetailTemplateName = DEFAULT_MASTER_DETAIL_TEMPLATE_NAME;
+        this._defaultConfig = this._getDefaultConfig(defaultConfig, IDS_TABLE_DEFAULT_CONFIG);
+        this._cdRef = inject(ChangeDetectorRef);
+        this._intl = inject(IdsTableIntl);
+        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, ...(ngDevMode ? [{ debugName: "fixedHeader", transform: coerceBooleanAttribute }] : [{ transform: coerceBooleanAttribute }]));
+        /** Enable sorting feature */
+        this.enableSorting = input(this._defaultConfig.enableSorting, ...(ngDevMode ? [{ debugName: "enableSorting", transform: coerceBooleanAttribute }] : [{ transform: coerceBooleanAttribute }]));
+        /** Enable master-detail rows */
+        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, ...(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, ...(ngDevMode ? [{ debugName: "detailStickyColumns", transform: coerceBooleanAttribute }] : [{ transform: coerceBooleanAttribute }]));
+        /** Whether to show the master-detail column label or not. */
+        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, ...(ngDevMode ? [{ debugName: "hasDetailRow" }] : []));
+        /** Enable row selection feature */
+        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, ...(ngDevMode ? [{ debugName: "clearSelectionOnChange", transform: coerceBooleanAttribute }] : [{ transform: coerceBooleanAttribute }]));
+        /** Predicate function to decide whether a row can be selected or not */
+        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, ...(ngDevMode ? [{ debugName: "noRowsToShowOverlayBelow", transform: coerceBooleanAttribute }] : [{ transform: coerceBooleanAttribute }]));
+        /** Whether to show a border around the table or not. */
+        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, ...(ngDevMode ? [{ debugName: "appearance" }] : []));
+        /** The size type of the table. Affects paddings, margins, gaps, typography, etc. */
+        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, ...(ngDevMode ? [{ debugName: "variant" }] : []));
+        /** Emits if the column sorting has changed */
+        this.sortChange = output();
+        /** Emits if the user clicked a cell */
+        this.cellClick = output();
+        /** Emits if the user clicked a row */
+        this.rowClick = output();
+        /** Emits if the user hits a key while a row is in focus */
+        this.rowKeydown = output();
+        /** Emits if the table's contents have changed */
+        this.contentChanged = output();
+        //#region IdsIconButtonParent implementation
+        this.embeddedIconButtonVariant = computed(() => {
+            const tableVariant = this.variant();
+            switch (tableVariant) {
+                case IdsTableVariant.PRIMARY:
+                    return IdsIconButtonVariant.SURFACE;
+                default:
+                    return tableVariant;
+            }
+        }, ...(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(() => {
+            const dataHolders = this._rowDataHolders();
+            if (!dataHolders?.length) {
+                return [];
+            }
+            try {
+                // try-catch for now to avoid "NG0950: Input is required but no value is available yet. Find more at https://angular.dev/errors/NG0950" at "holder.rowInfo()"
+                return dataHolders
+                    .map((holder) => holder.rowInfo())
+                    .sort((data1, data2) => data1.index - data2.index)
+                    .map((data) => data.rowData);
+            }
+            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, ...(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
+                .filter((colDef) => (colDef.visible !== false))
+                // Sort sticky columns to the beginning and stickyEnd columns to the end of the list
+                .reduce((acc, colDef) => {
+                if (colDef.sticky) {
+                    // Sticky columns first
+                    acc[0].push(colDef.id);
+                }
+                else if (colDef.stickyEnd) {
+                    // StickyEnd columns last
+                    acc[2].push(colDef.id);
+                }
+                else {
+                    // The rest of the columns in between
+                    acc[1].push(colDef.id);
+                }
+                return acc;
+                // eslint-disable-next-line @stylistic/js/array-bracket-newline, @stylistic/js/array-element-newline
+            }, [[], [], []])
+                .flat();
+            if (this.masterDetail()) {
+                cols.push('$masterDetail');
+            }
+            if (this.enableRowSelection()) {
+                cols.unshift('$selectBoxes');
+            }
+            return cols;
+        }, ...(ngDevMode ? [{ debugName: "_actualColumns" }] : []));
+        this._hiddenColumns = computed(() => this.columnDefs()
+            .filter((colDef) => (colDef.visible === false))
+            .map((colDef) => ({ ...colDef, visible: true })), ...(ngDevMode ? [{ debugName: "_hiddenColumns" }] : []));
+        this._detailRowTemplates = computed(() => {
+            if (!this.detailStickyColumns()) {
+                return ['$expandedDetail'];
+            }
+            return [
+                ...(this.enableRowSelection() ? ['$empty'] : []),
+                ...this.columnDefs().filter((colDef) => colDef.sticky).map(() => '$empty'),
+                '$expandedDetail',
+                ...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;
+            if (this.detailStickyColumns()) {
+                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()) {
+                templateMap.set(cellTemplate.templateName(), cellTemplate.templateRef);
+            }
+            for (const cellTemplate of this._contentCellTemplates()) {
+                templateMap.set(cellTemplate.templateName(), cellTemplate.templateRef);
+            }
+            return templateMap;
+        }, ...(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);
+            });
+        }, ...(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();
+            const data = this._selectableRowData();
+            const disabledRows = this._unselectableRows();
+            if (!selectionChange || !data) {
+                return false;
+            }
+            const numSelected = selectionChange.source.selected.length;
+            const activeRowCount = data.filter((row) => !disabledRows.has(row)).length;
+            return numSelected === activeRowCount;
+        }, ...(ngDevMode ? [{ debugName: "_isAllSelected" }] : []));
+        this._isSelectAllDisabled = computed(() => this._unselectableRows().size === this._selectableRowData().length, ...(ngDevMode ? [{ debugName: "_isSelectAllDisabled" }] : []));
+    }
+    get _hostName() {
+        return 'table';
+    }
+    ngOnInit() {
+        this._intl.changes.pipe(takeUntilDestroyed(this._destroyRef)).subscribe(() => this._cdRef.markForCheck());
+    }
+    /**
+     * Open up all row details.
+     */
+    expandAll() {
+        this.rowData().forEach((rowData, idx) => {
+            if (!this._expandedRows.has(rowData) && this.hasDetailRow()(idx, rowData)) {
+                this._expandedRows.add(rowData);
+            }
+        });
+        this._cdRef.markForCheck();
+    }
+    /**
+     * Closes all opened row details.
+     */
+    collapseAll() {
+        this._expandedRows.clear();
+        this._cdRef.markForCheck();
+    }
+    /**
+     * Refresh rendered cell values. Useful if for eg. the `value` getter function is not pure and the values need to be refreshed manually.
+     */
+    updateCellContents() {
+        this._cellContentRenderers().forEach((cellContent) => cellContent.updateValue());
+    }
+    _tableContentChanged() {
+        this.contentChanged.emit();
+        if (this.clearSelectionOnChange()) {
+            this.rowSelection.clear();
+        }
+    }
+    _getNextSortDirectionFor(colId) {
+        const sortState = this._sortState();
+        const nextIndex = sortState?.sortBy === colId ?
+            (this._sortDirections.indexOf(sortState.direction) + 1) % this._sortDirections.length : 1;
+        return this._sortDirections[nextIndex];
+    }
+    _handleSortClick(colId) {
+        const nextSortDirection = this._getNextSortDirectionFor(colId);
+        this._sortState.set(nextSortDirection !== IdsTableSortDirection.NONE ? new IdsTableSortInfo(colId, nextSortDirection) : null);
+        this.sortChange.emit(this._sortState());
+    }
+    _handleCellClick(event, rowData, colDef) {
+        this.cellClick.emit({ event, colDef, rowData });
+    }
+    _handleRowClick(event, rowData) {
+        this.rowClick.emit({ event, rowData });
+    }
+    _handleRowKeyDown(event, rowData) {
+        this.rowKeydown.emit({ event, rowData });
+    }
+    _handleMasterDetailClick(rowData) {
+        if (this._expandedRows.has(rowData)) {
+            this._expandedRows.delete(rowData);
+        }
+        else {
+            this._expandedRows.add(rowData);
+        }
+        this._cdRef.markForCheck();
+    }
+    _masterToggle() {
+        const data = this._selectableRowData();
+        if (this._isAllSelected() || !data) {
+            this.rowSelection.clear();
+            return;
+        }
+        this.rowSelection.select(...data);
+    }
+    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' })),
+                transition('expanded <=> collapsed', animate('200ms cubic-bezier(0.4, 0.0, 0.2, 1)')),
+            ]),
+        ], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: IdsTableComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ids-table', imports: [
+                        IdsCellContentComponent,
+                        IdsCheckboxComponent,
+                        IdsIconComponent,
+                        IdsIconButtonComponent,
+                        IdsTableCellTemplateDirective,
+                        CdkCell,
+                        CdkCellDef,
+                        CdkColumnDef,
+                        CdkHeaderCell,
+                        CdkHeaderCellDef,
+                        CdkHeaderRow,
+                        CdkHeaderRowDef,
+                        CdkNoDataRow,
+                        CdkRow,
+                        CdkRowDef,
+                        CdkTable,
+                        NgClass,
+                        NgTemplateOutlet,
+                        RowInfoHolderDirective,
+                    ], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, animations: [
+                        trigger('detailExpand', [
+                            state('collapsed', style({ height: '0px', minHeight: '0', visibility: 'hidden' })),
+                            state('expanded', style({ height: '*', visibility: 'visible' })),
+                            transition('expanded <=> collapsed', animate('200ms cubic-bezier(0.4, 0.0, 0.2, 1)')),
+                        ]),
+                    ], providers: [{ provide: IDS_ICON_BUTTON_PARENT, useExisting: IdsTableComponent }], exportAs: 'idsTable', 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" }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { DEFAULT_DATA_LOAD_DEBOUNCE_TIME, DEFAULT_MASTER_DETAIL_TEMPLATE_NAME, IDS_TABLE_DEFAULT_CONFIG, IDS_TABLE_DEFAULT_CONFIG_FACTORY, IDS_TABLE_INTL_PROVIDER, IDS_TABLE_INTL_PROVIDER_FACTORY, IdsTableAppearance, IdsTableCellRenderer, IdsTableCellTemplateDirective, IdsTableComponent, IdsTableIntl, IdsTableSortDirection, IdsTableSortInfo, IdsTableVariant, ServerSideDataSource };
+//# sourceMappingURL=i-cell-ids-angular-table.mjs.map