@i-cell/ids-angular 0.1.2 → 0.1.4

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

@@ -1,8 +1,9 @@
 import * as i1 from '@angular/cdk/menu';
 import { CdkMenuTrigger, CdkMenuItem } from '@angular/cdk/menu';
 import * as i0 from '@angular/core';
-import { inject, Directive, InjectionToken, ElementRef, input, contentChildren, computed, Component, ViewEncapsulation, ChangeDetectionStrategy } from '@angular/core';
+import { inject, Directive, InjectionToken, ElementRef, input, contentChildren, computed, effect, Component, ViewEncapsulation, ChangeDetectionStrategy, contentChild } from '@angular/core';
 import { IdsSize, ComponentBaseWithDefaults, coerceBooleanAttribute } from '@i-cell/ids-angular/core';
+import { RouterLink } from '@angular/router';
 
 class IdsActionMenuTriggerDirective {
     constructor() {
@@ -45,6 +46,7 @@ const IdsMenuItemAppearance = {
 
 const IdsMenuItemVariant = {
     SURFACE: 'surface',
+    LIGHT: 'light',
 };
 
 const IDS_MENU_ITEM_DEFAULT_CONFIG = new InjectionToken('IDS_MENU_ITEM_DEFAULT_CONFIG', {
@@ -56,40 +58,65 @@ function IDS_MENU_ITEM_DEFAULT_CONFIG_FACTORY() {
         appearance: IdsMenuItemAppearance.TEXT,
         size: IdsSize.COMPACT,
         variant: IdsMenuItemVariant.SURFACE,
+        showLabel: true,
     };
 }
 
 const defaultConfig = IDS_MENU_ITEM_DEFAULT_CONFIG_FACTORY();
 class IdsMenuItemComponent extends ComponentBaseWithDefaults {
+    get _hostName() {
+        return 'menu-item';
+    }
+    get buttonType() {
+        return this._hostElement.tagName === 'BUTTON' ? 'button' : null;
+    }
     constructor() {
-        super(...arguments);
+        super();
         this._hostElement = inject((ElementRef)).nativeElement;
+        this._routerLink = inject(RouterLink, { optional: true, self: true });
         this._defaultConfig = this._getDefaultConfig(defaultConfig, IDS_MENU_ITEM_DEFAULT_CONFIG);
-        this.label = input.required();
+        this.label = input();
         this.appearance = input(this._defaultConfig.appearance);
         this.size = input(this._defaultConfig.size);
         this.variant = input(this._defaultConfig.variant);
-        this.active = input(false);
-        this.disabled = input(false, {
-            transform: (value) => coerceBooleanAttribute(value),
-        });
+        this.disabled = input(false, { transform: coerceBooleanAttribute });
         this.iconLeading = contentChildren('[icon-leading]');
         this.iconTrailing = contentChildren('[icon-trailing]');
         this._hostClasses = computed(() => this._getHostClasses([
             this.appearance(),
             this.size(),
             this.variant(),
-            this.active() ? 'active' : null,
+            this.disabled() ? 'disabled' : null,
+            !this.label() ? 'no-label' : null,
         ]));
+        effect(() => {
+            if (this.buttonType) {
+                return;
+            }
+            const link = this._hostElement;
+            if (this.disabled()) {
+                this._disableLink(link);
+            }
+            else {
+                this._enableLink(link);
+            }
+        });
     }
-    get _hostName() {
-        return 'menu-item';
+    _disableLink(link) {
+        if (!this._routerLink) {
+            link.setAttribute('data-href', link.href);
+        }
+        link.removeAttribute('href');
     }
-    get buttonType() {
-        return this._hostElement.tagName === 'BUTTON' ? 'button' : null;
+    _enableLink(link) {
+        const prevHref = this._routerLink?.href ?? link.getAttribute('data-href') ?? '';
+        if (prevHref) {
+            link.href = prevHref;
+            link.removeAttribute('data-href');
+        }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.2", ngImport: i0, type: IdsMenuItemComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.2", type: IdsMenuItemComponent, isStandalone: true, selector: "button[idsMenuItem],a[idsMenuItem]", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, 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 }, active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "type": "buttonType", "attr.disabled": "disabled() ? \"\" : null", "attr.aria-disabled": "disabled() || null" } }, queries: [{ propertyName: "iconLeading", predicate: ["[icon-leading]"], isSignal: true }, { propertyName: "iconTrailing", predicate: ["[icon-trailing]"], isSignal: true }], usesInheritance: true, hostDirectives: [{ directive: i1.CdkMenuItem }], ngImport: i0, template: "@if (iconLeading()) {\n  <ng-content select=\"ids-icon[icon-leading]\" />\n}\n<span class=\"ids-menu-item-label\">{{ label() }}</span>\n@if (iconTrailing()) {\n  <ng-content select=\"ids-icon[icon-trailing]\" />\n}\n", changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.2", ngImport: i0, type: IdsMenuItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.2", type: IdsMenuItemComponent, isStandalone: true, selector: "button[idsMenuItem],a[idsMenuItem]", inputs: { label: { classPropertyName: "label", publicName: "label", 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 }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "type": "buttonType", "attr.disabled": "disabled() ? \"\" : null", "attr.aria-disabled": "disabled() || null" } }, queries: [{ propertyName: "iconLeading", predicate: ["[icon-leading]"], isSignal: true }, { propertyName: "iconTrailing", predicate: ["[icon-trailing]"], isSignal: true }], usesInheritance: true, hostDirectives: [{ directive: i1.CdkMenuItem }], ngImport: i0, template: "@if (iconLeading()) {\n  <ng-content select=\"ids-icon[icon-leading]\" />\n}\n@if (label()) {\n  <div class=\"ids-menu-item-label--wrapper\"><span class=\"ids-menu-item-label\">{{ label() }}</span></div>\n}\n\n@if (iconTrailing()) {\n  <ng-content select=\"ids-icon[icon-trailing]\" />\n}\n", changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.2", ngImport: i0, type: IdsMenuItemComponent, decorators: [{
             type: Component,
@@ -97,12 +124,31 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.2", ngImpor
                         '[type]': 'buttonType',
                         '[attr.disabled]': 'disabled() ? "" : null',
                         '[attr.aria-disabled]': 'disabled() || null',
-                    }, template: "@if (iconLeading()) {\n  <ng-content select=\"ids-icon[icon-leading]\" />\n}\n<span class=\"ids-menu-item-label\">{{ label() }}</span>\n@if (iconTrailing()) {\n  <ng-content select=\"ids-icon[icon-trailing]\" />\n}\n" }]
+                    }, template: "@if (iconLeading()) {\n  <ng-content select=\"ids-icon[icon-leading]\" />\n}\n@if (label()) {\n  <div class=\"ids-menu-item-label--wrapper\"><span class=\"ids-menu-item-label\">{{ label() }}</span></div>\n}\n\n@if (iconTrailing()) {\n  <ng-content select=\"ids-icon[icon-trailing]\" />\n}\n" }]
+        }], ctorParameters: () => [] });
+
+class IdsActiveIndicatorDirective {
+    constructor() {
+        this._menuItem = contentChild.required(IdsMenuItemComponent);
+        this.active = input.required();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.2", ngImport: i0, type: IdsActiveIndicatorDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "19.1.2", type: IdsActiveIndicatorDirective, isStandalone: true, selector: "[idsActiveIndicator]", inputs: { active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: true, transformFunction: null } }, host: { properties: { "class.ids-active-indicator": "true", "class.ids-active-indicator--active": "active()" } }, queries: [{ propertyName: "_menuItem", first: true, predicate: IdsMenuItemComponent, descendants: true, isSignal: true }], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.2", ngImport: i0, type: IdsActiveIndicatorDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[idsActiveIndicator]',
+                    host: {
+                        '[class.ids-active-indicator]': 'true',
+                        '[class.ids-active-indicator--active]': 'active()',
+                    },
+                }]
         }] });
 
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { IDS_MENU_ITEM_DEFAULT_CONFIG, IDS_MENU_ITEM_DEFAULT_CONFIG_FACTORY, IdsActionMenuTriggerDirective, IdsMenuItemAppearance, IdsMenuItemComponent, IdsMenuItemVariant };
+export { IDS_MENU_ITEM_DEFAULT_CONFIG, IDS_MENU_ITEM_DEFAULT_CONFIG_FACTORY, IdsActionMenuTriggerDirective, IdsActiveIndicatorDirective, IdsMenuItemAppearance, IdsMenuItemComponent, IdsMenuItemVariant };
 //# sourceMappingURL=i-cell-ids-angular-menu.mjs.map

package/fesm2022/i-cell-ids-angular-menu.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"i-cell-ids-angular-menu.mjs","sources":["../../../projects/widgets/menu/action-menu/action-menu-trigger.directive.ts","../../../projects/widgets/menu/menu-item/types/menu-item-appearance.type.ts","../../../projects/widgets/menu/menu-item/types/menu-item-variant.type.ts","../../../projects/widgets/menu/menu-item/menu-item-defaults.ts","../../../projects/widgets/menu/menu-item/menu-item.component.ts","../../../projects/widgets/menu/menu-item/menu-item.component.html","../../../projects/widgets/menu/i-cell-ids-angular-menu.ts"],"sourcesContent":["import { CdkMenuTrigger } from '@angular/cdk/menu';\nimport { Directive, inject } from '@angular/core';\n\n@Directive({\n  selector: 'button[idsActionMenuTriggerFor]',\n  standalone: true,\n  hostDirectives: [\n    {\n      directive: CdkMenuTrigger,\n      inputs: ['cdkMenuTriggerFor: idsActionMenuTriggerFor'],\n    },\n  ],\n  exportAs: 'idsActionMenuTrigger',\n})\nexport class IdsActionMenuTriggerDirective {\n  public menuTrigger = inject(CdkMenuTrigger);\n\n  get isOpen(): boolean {\n    return !!this.menuTrigger.isOpen();\n  }\n\n  public open(): void {\n    this.menuTrigger.open();\n  }\n\n  public close(): void {\n    this.menuTrigger.close();\n  }\n\n  public toggle(): void {\n    this.menuTrigger.toggle();\n  }\n}\n","export const IdsMenuItemAppearance = {\n  FILLED: 'filled',\n  TEXT: 'text',\n} as const;\n\nexport type IdsMenuItemAppearanceType = (typeof IdsMenuItemAppearance)[keyof typeof IdsMenuItemAppearance];\n","export const IdsMenuItemVariant = {\n  SURFACE: 'surface',\n} as const;\n\nexport type MenuItemVariantType = (typeof IdsMenuItemVariant)[keyof typeof IdsMenuItemVariant];\n","import { IdsMenuItemAppearance, IdsMenuItemAppearanceType } from './types/menu-item-appearance.type';\nimport { IdsMenuItemVariant, MenuItemVariantType } from './types/menu-item-variant.type';\n\nimport { InjectionToken } from '@angular/core';\nimport { IdsSize, IdsSizeType } from '@i-cell/ids-angular/core';\n\nexport interface IdsMenuItemDefaultConfig {\n  appearance?: IdsMenuItemAppearanceType,\n  size?: IdsSizeType,\n  variant?: MenuItemVariantType,\n}\n\nexport const IDS_MENU_ITEM_DEFAULT_CONFIG = new InjectionToken<IdsMenuItemDefaultConfig>(\n  'IDS_MENU_ITEM_DEFAULT_CONFIG',\n  {\n    providedIn: 'root',\n    factory: IDS_MENU_ITEM_DEFAULT_CONFIG_FACTORY,\n  },\n);\n\nexport function IDS_MENU_ITEM_DEFAULT_CONFIG_FACTORY(): Required<IdsMenuItemDefaultConfig> {\n  return {\n    appearance: IdsMenuItemAppearance.TEXT,\n    size: IdsSize.COMPACT,\n    variant: IdsMenuItemVariant.SURFACE,\n  };\n}\n\n","import { IDS_MENU_ITEM_DEFAULT_CONFIG, IDS_MENU_ITEM_DEFAULT_CONFIG_FACTORY, IdsMenuItemDefaultConfig } from './menu-item-defaults';\nimport { IdsMenuItemAppearanceType } from './types/menu-item-appearance.type';\nimport { MenuItemVariantType } from './types/menu-item-variant.type';\n\nimport { CdkMenuItem } from '@angular/cdk/menu';\nimport { ChangeDetectionStrategy, Component, ElementRef, ViewEncapsulation, computed, contentChildren, inject, input } from '@angular/core';\nimport { ComponentBaseWithDefaults, IdsSizeType, coerceBooleanAttribute } from '@i-cell/ids-angular/core';\nimport { IdsIconComponent } from '@i-cell/ids-angular/icon';\n\nconst defaultConfig = IDS_MENU_ITEM_DEFAULT_CONFIG_FACTORY();\n\n@Component({\n  selector: 'button[idsMenuItem],a[idsMenuItem]',\n  imports: [],\n  hostDirectives: [CdkMenuItem],\n  templateUrl: './menu-item.component.html',\n  encapsulation: ViewEncapsulation.None,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  host: {\n    '[type]': 'buttonType',\n    '[attr.disabled]': 'disabled() ? \"\" : null',\n    '[attr.aria-disabled]': 'disabled() || null',\n  },\n})\nexport class IdsMenuItemComponent extends ComponentBaseWithDefaults<IdsMenuItemDefaultConfig> {\n  protected override get _hostName(): string {\n    return 'menu-item';\n  }\n\n  private _hostElement = inject<ElementRef<HTMLElement>>(ElementRef<HTMLElement>).nativeElement;\n\n  protected readonly _defaultConfig = this._getDefaultConfig(defaultConfig, IDS_MENU_ITEM_DEFAULT_CONFIG);\n\n  public label = input.required<string>();\n  public appearance = input<IdsMenuItemAppearanceType>(this._defaultConfig.appearance);\n\n  public size = input<IdsSizeType>(this._defaultConfig.size);\n  public variant = input<MenuItemVariantType>(this._defaultConfig.variant);\n  public active = input(false);\n  public disabled = input(false, {\n    transform: (value: boolean | string) => coerceBooleanAttribute(value),\n  });\n\n  public iconLeading = contentChildren<IdsIconComponent>('[icon-leading]');\n  public iconTrailing = contentChildren<IdsIconComponent>('[icon-trailing]');\n\n  protected _hostClasses = computed(() => this._getHostClasses([\n    this.appearance(),\n    this.size(),\n    this.variant(),\n    this.active() ? 'active' : null,\n  ]));\n\n  public get buttonType(): string | null {\n    return this._hostElement.tagName === 'BUTTON' ? 'button' : null;\n  }\n}\n","@if (iconLeading()) {\n  <ng-content select=\"ids-icon[icon-leading]\" />\n}\n<span class=\"ids-menu-item-label\">{{ label() }}</span>\n@if (iconTrailing()) {\n  <ng-content select=\"ids-icon[icon-trailing]\" />\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"i-cell-ids-angular-menu.mjs","sources":["../../../projects/widgets/menu/action-menu/action-menu-trigger.directive.ts","../../../projects/widgets/menu/menu-item/types/menu-item-appearance.type.ts","../../../projects/widgets/menu/menu-item/types/menu-item-variant.type.ts","../../../projects/widgets/menu/menu-item/menu-item-defaults.ts","../../../projects/widgets/menu/menu-item/menu-item.component.ts","../../../projects/widgets/menu/menu-item/menu-item.component.html","../../../projects/widgets/menu/active-indicator/active-indicator.directive.ts","../../../projects/widgets/menu/i-cell-ids-angular-menu.ts"],"sourcesContent":["import { CdkMenuTrigger } from '@angular/cdk/menu';\nimport { Directive, inject } from '@angular/core';\n\n@Directive({\n  selector: 'button[idsActionMenuTriggerFor]',\n  standalone: true,\n  hostDirectives: [\n    {\n      directive: CdkMenuTrigger,\n      inputs: ['cdkMenuTriggerFor: idsActionMenuTriggerFor'],\n    },\n  ],\n  exportAs: 'idsActionMenuTrigger',\n})\nexport class IdsActionMenuTriggerDirective {\n  public menuTrigger = inject(CdkMenuTrigger);\n\n  get isOpen(): boolean {\n    return !!this.menuTrigger.isOpen();\n  }\n\n  public open(): void {\n    this.menuTrigger.open();\n  }\n\n  public close(): void {\n    this.menuTrigger.close();\n  }\n\n  public toggle(): void {\n    this.menuTrigger.toggle();\n  }\n}\n","export const IdsMenuItemAppearance = {\n  FILLED: 'filled',\n  TEXT: 'text',\n} as const;\n\nexport type IdsMenuItemAppearanceType = (typeof IdsMenuItemAppearance)[keyof typeof IdsMenuItemAppearance];\n","export const IdsMenuItemVariant = {\n  SURFACE: 'surface',\n  LIGHT: 'light',\n} as const;\n\nexport type IdsMenuItemVariantType = (typeof IdsMenuItemVariant)[keyof typeof IdsMenuItemVariant];\n","import { IdsMenuItemAppearance, IdsMenuItemAppearanceType } from './types/menu-item-appearance.type';\nimport { IdsMenuItemVariant, IdsMenuItemVariantType } from './types/menu-item-variant.type';\n\nimport { InjectionToken } from '@angular/core';\nimport { IdsSize, IdsSizeType } from '@i-cell/ids-angular/core';\n\nexport interface IdsMenuItemDefaultConfig {\n  appearance?: IdsMenuItemAppearanceType,\n  size?: IdsSizeType,\n  variant?: IdsMenuItemVariantType,\n  showLabel?: boolean,\n}\n\nexport const IDS_MENU_ITEM_DEFAULT_CONFIG = new InjectionToken<IdsMenuItemDefaultConfig>(\n  'IDS_MENU_ITEM_DEFAULT_CONFIG',\n  {\n    providedIn: 'root',\n    factory: IDS_MENU_ITEM_DEFAULT_CONFIG_FACTORY,\n  },\n);\n\nexport function IDS_MENU_ITEM_DEFAULT_CONFIG_FACTORY(): Required<IdsMenuItemDefaultConfig> {\n  return {\n    appearance: IdsMenuItemAppearance.TEXT,\n    size: IdsSize.COMPACT,\n    variant: IdsMenuItemVariant.SURFACE,\n    showLabel: true,\n  };\n}\n\n","import { IDS_MENU_ITEM_DEFAULT_CONFIG, IDS_MENU_ITEM_DEFAULT_CONFIG_FACTORY, IdsMenuItemDefaultConfig } from './menu-item-defaults';\nimport { IdsMenuItemAppearanceType } from './types/menu-item-appearance.type';\nimport { IdsMenuItemVariantType } from './types/menu-item-variant.type';\n\nimport { CdkMenuItem } from '@angular/cdk/menu';\nimport { ChangeDetectionStrategy, Component, ElementRef, ViewEncapsulation, computed, contentChildren, effect, inject, input } from '@angular/core';\nimport { RouterLink } from '@angular/router';\nimport { ComponentBaseWithDefaults, IdsSizeType, coerceBooleanAttribute } from '@i-cell/ids-angular/core';\nimport { IdsIconComponent } from '@i-cell/ids-angular/icon';\n\nconst defaultConfig = IDS_MENU_ITEM_DEFAULT_CONFIG_FACTORY();\n\n@Component({\n  selector: 'button[idsMenuItem],a[idsMenuItem]',\n  imports: [],\n  hostDirectives: [CdkMenuItem],\n  templateUrl: './menu-item.component.html',\n  encapsulation: ViewEncapsulation.None,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  host: {\n    '[type]': 'buttonType',\n    '[attr.disabled]': 'disabled() ? \"\" : null',\n    '[attr.aria-disabled]': 'disabled() || null',\n  },\n})\nexport class IdsMenuItemComponent extends ComponentBaseWithDefaults<IdsMenuItemDefaultConfig> {\n  protected override get _hostName(): string {\n    return 'menu-item';\n  }\n\n  private _hostElement = inject<ElementRef<HTMLElement>>(ElementRef<HTMLElement>).nativeElement;\n  private _routerLink = inject(RouterLink, { optional: true, self: true });\n\n  protected readonly _defaultConfig = this._getDefaultConfig(defaultConfig, IDS_MENU_ITEM_DEFAULT_CONFIG);\n\n  public label = input<string>();\n  public appearance = input<IdsMenuItemAppearanceType>(this._defaultConfig.appearance);\n  public size = input<IdsSizeType>(this._defaultConfig.size);\n  public variant = input<IdsMenuItemVariantType>(this._defaultConfig.variant);\n  public disabled = input(false, { transform: coerceBooleanAttribute });\n\n  public iconLeading = contentChildren<IdsIconComponent>('[icon-leading]');\n  public iconTrailing = contentChildren<IdsIconComponent>('[icon-trailing]');\n\n  protected _hostClasses = computed(() => this._getHostClasses([\n    this.appearance(),\n    this.size(),\n    this.variant(),\n    this.disabled() ? 'disabled' : null,\n    !this.label() ? 'no-label' : null,\n  ]));\n\n  public get buttonType(): string | null {\n    return this._hostElement.tagName === 'BUTTON' ? 'button' : null;\n  }\n\n  constructor() {\n    super();\n\n    effect(() => {\n      if (this.buttonType) {\n        return;\n      }\n\n      const link = this._hostElement as HTMLAnchorElement;\n\n      if (this.disabled()) {\n        this._disableLink(link);\n      } else {\n        this._enableLink(link);\n      }\n    });\n  }\n\n  private _disableLink(link: HTMLAnchorElement): void {\n    if (!this._routerLink) {\n      link.setAttribute('data-href', link.href);\n    }\n    link.removeAttribute('href');\n  }\n\n  private _enableLink(link: HTMLAnchorElement): void {\n    const prevHref = this._routerLink?.href ?? link.getAttribute('data-href') ?? '';\n\n    if (prevHref) {\n      link.href = prevHref;\n      link.removeAttribute('data-href');\n    }\n  }\n}\n","@if (iconLeading()) {\n  <ng-content select=\"ids-icon[icon-leading]\" />\n}\n@if (label()) {\n  <div class=\"ids-menu-item-label--wrapper\"><span class=\"ids-menu-item-label\">{{ label() }}</span></div>\n}\n\n@if (iconTrailing()) {\n  <ng-content select=\"ids-icon[icon-trailing]\" />\n}\n","import { IdsMenuItemComponent } from '../menu-item/menu-item.component';\n\nimport { contentChild, Directive, input } from '@angular/core';\n\n@Directive({\n  selector: '[idsActiveIndicator]',\n  host: {\n    '[class.ids-active-indicator]': 'true',\n    '[class.ids-active-indicator--active]': 'active()',\n  },\n})\nexport class IdsActiveIndicatorDirective {\n  private _menuItem = contentChild.required(IdsMenuItemComponent);\n\n  public active = input.required<boolean>();\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}

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

@@ -277,6 +277,7 @@ class IdsCellContentComponent extends IdsTableCellRenderer {
             // Forces recalculation of this computed signal
             this._updateCellContent();
             if (this._isHeader) {
+                // FIXME: Header label IdsTableIntl-ből kénem, h jöjjön
                 return this.colDef().label ?? '';
             }
             const rowData = this.rowData();
@@ -316,7 +317,7 @@ class IdsCellContentComponent extends IdsTableCellRenderer {
         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.ɵ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: "<!-- TODO: sortable oszlopok display: flex bekavar!!! -->\r\n\r\n<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"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.2", ngImport: i0, type: IdsCellContentComponent, decorators: [{
             type: Component,
@@ -324,7 +325,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.2", ngImpor
                         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" }]
+                    ], template: "<!-- TODO: sortable oszlopok display: flex bekavar!!! -->\r\n\r\n<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 {
@@ -370,6 +371,7 @@ class IdsTableComponent extends ComponentBaseWithDefaults {
         /** Enable master-detail rows */
         this.masterDetail = input(this._defaultConfig.masterDetail, { transform: coerceBooleanAttribute });
         /** Name of the detail row renderer template */
+        // TODO: component?
         this.detailTemplateName = input(this._defaultConfig.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 });
@@ -378,6 +380,7 @@ class IdsTableComponent extends ComponentBaseWithDefaults {
         /** Predicate function to decide whether a data row has details or not */
         this.hasDetailRow = input(() => false);
         /** Enable row selection feature */
+        // TODO: legyen `multiSelect` a prop neve
         this.enableRowSelection = input(this._defaultConfig.enableRowSelection, { transform: coerceBooleanAttribute });
         /** Clear row selection if the table's content changes */
         this.clearSelectionOnChange = input(this._defaultConfig.clearSelectionOnChange, { transform: coerceBooleanAttribute });
@@ -616,7 +619,7 @@ 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]", 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.ɵ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 ids-table__row--surface\">\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]", 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' })),
@@ -652,7 +655,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.2", ngImpor
                             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" }]
+                    ], 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 ids-table__row--surface\">\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" }]
         }] });
 
 /**