@wlcm/angular 19.2.5 → 22.0.1

package/styles/core/_all-theme.scss

@@ -1,5 +1,4 @@
-@use 'sass:map';
-@use 'utils' as utils;
+@use 'tokens' as tokens;
 @use '../components/common/index' as common;
 @use '../components/forms/index' as forms;
 @use '../components/button/index' as button;
@@ -11,7 +10,13 @@
 @use '../components/loader/index' as loader;
 @use '../components/table/index' as table;
 
-@mixin all-component-themes($theme-config) {
+@mixin theme($theme-config) {
+  // Emit the `--wlcm-*` token contract; `emit-tokens` owns its own selectors
+  // (`:root` for light, plus `prefers-color-scheme` / `[data-theme]` blocks for
+  // dark) so component styles below can consume the `--wlcm-*` / `--mat-sys-*`
+  // `var()` references directly under either scheme.
+  @include tokens.emit-tokens($theme-config);
+
   @include common.theme($theme-config);
   @include forms.theme($theme-config);
   @include button.theme($theme-config);

package/styles/core/_tokens.scss

@@ -0,0 +1,41 @@
+@use 'sass:map';
+@use 'utils' as utils;
+
+// Default numeric weights applied when the consumer does NOT pass a named
+// family for a tier. Named WLCM fonts (e.g. `Montserrat-Bold`) are registered
+// via `@font-face` at `font-weight: normal` — the weight lives in the file — so
+// whenever a family is present we pin the weight to `normal` to avoid faux-bold.
+$default-weights: (
+  bold: 700,
+  medium: 500,
+  regular: 400,
+);
+
+// prettier-ignore
+@mixin emit-tokens($theme-config) {
+  $typography: map-get($theme_config, typography) or ();
+
+  // Typography is scheme-independent.
+  //
+  // For each tier we emit a `--wlcm-<tier>-font-family` and a paired
+  // `--wlcm-<tier>-font-weight`. If the consumer supplied a named family, the
+  // family carries the weight so the weight token is `normal`; otherwise the
+  // family token is empty (so `font-family` inherits) and the weight token holds
+  // the real numeric weight. `utils.font()` consumes both.
+  @include emit-font-tier(bold, $typography);
+  @include emit-font-tier(medium, $typography);
+  @include emit-font-tier(regular, $typography);
+}
+
+// prettier-ignore
+@mixin emit-font-tier($tier, $typography) {
+  $family: map-get($typography, #{$tier}-font-family);
+
+  @if $family {
+    --wlcm-#{$tier}-font-family: #{$family};
+    --wlcm-#{$tier}-font-weight: normal;
+  } @else {
+    --wlcm-#{$tier}-font-family: ;
+    --wlcm-#{$tier}-font-weight: #{map-get($default-weights, $tier)};
+  }
+}

package/styles/core/_utils.scss

@@ -1,9 +1,5 @@
 @use 'sass:map';
 
-@function get-color-config($theme-config) {
-  @return map-get($theme_config, color);
-}
-
 @function get-specific-color-config($theme-config) {
   @return map-get($theme_config, specific-color);
 }
@@ -12,44 +8,15 @@
   @return map-get($theme_config, typography);
 }
 
-@function get-bold-typography($typography-config) {
-  @return map-get($typography-config, bold);
-}
-
-@function get-medium-typography($typography-config) {
-  @return map-get($typography-config, medium);
-}
-
-@function get-regular-typography($typography-config) {
-  @return map-get($typography-config, regular);
-}
-
-@function using-theme($theme-config) {
-  $color-config: get-color-config($theme_config);
-
-  $specific-color-config: get-specific-color-config($theme_config);
-
-  $typography-config: get-typography-config($theme_config);
-
-  @return (
-    // Color
-    primary-color: map-get($color-config, primary),
-    accent-color: map-get($color-config, accent),
-    warn-color: map-get($color-config, warn),
-    // Specific Color
-    text-black-color: map-get($specific-color-config, text-black-color),
-    field-outline-color: map-get($specific-color-config, field-outline-color),
-    focus-field-outline-color:
-      map-get($specific-color-config, focus-field-outline-color),
-    hover-field-outline-color:
-      map-get($specific-color-config, hover-field-outline-color),
-    selected-option-color:
-      map-get($specific-color-config, selected-option-color),
-    field-text-color: map-get($specific-color-config, field-text-color),
-    placeholder-color: map-get($specific-color-config, placeholder-color),
-    // Typography
-    bold-font-family: get-bold-typography($typography-config),
-    medium-font-family: get-medium-typography($typography-config),
-    regular-font-family: get-regular-typography($typography-config)
-  );
+// Applies a named font tier (`bold` | `medium` | `regular`).
+//
+// Components consume `--wlcm-*` tokens directly rather than going through a
+// theme map. Each tier resolves to a family/weight pair emitted by
+// `tokens.emit-tokens()`: when the consumer supplied a named family the weight
+// is `normal` (the font file carries the weight — avoids faux-bold); when no
+// family was supplied the family is empty (so `font-family` inherits) and the
+// weight token holds the real numeric weight.
+@mixin font($tier) {
+  font-family: var(--wlcm-#{$tier}-font-family);
+  font-weight: var(--wlcm-#{$tier}-font-weight);
 }

package/styles/wlcm.scss

@@ -1,3 +1 @@
-@forward './core/core' show core;
-
-@forward './core/all-theme' show all-component-themes;
+@forward './core/all-theme' show theme;

package/table/fesm2022/wlcm-angular-table.mjs

@@ -1,15 +1,12 @@
 import * as i0 from '@angular/core';
-import { Component, InjectionToken, inject, Injector, Pipe, input, Inject, signal, ElementRef, HostBinding, output, NgZone, Directive, NgModule } from '@angular/core';
-import * as i3 from '@angular/common';
+import { signal, ChangeDetectionStrategy, Component, InjectionToken, inject, Injector, Pipe, input, DestroyRef, Inject, output, ElementRef, Directive, NgModule } from '@angular/core';
+import * as i1 from '@angular/common';
 import { CommonModule } from '@angular/common';
-import { __decorate, __metadata } from 'tslib';
-import { BehaviorSubject, map, switchMap, takeUntil, skip, filter, finalize, fromEvent, debounceTime } from 'rxjs';
-import { untilDestroyed, UntilDestroy } from '@ngneat/until-destroy';
-import { toObservable } from '@angular/core/rxjs-interop';
-import { RxLet } from '@rx-angular/template/let';
-import * as i2 from '@wlcm/angular/forms';
+import { toObservable, takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { BehaviorSubject, map, switchMap, takeUntil, skip, filter, fromEvent, debounceTime } from 'rxjs';
+import * as i1$1 from '@wlcm/angular/forms';
 import { WlcmFormsModule } from '@wlcm/angular/forms';
-import * as i3$1 from '@angular/forms';
+import * as i2 from '@angular/forms';
 import { FormControl, ReactiveFormsModule, FormsModule } from '@angular/forms';
 
 class WlcmTableSelectionModel {
@@ -64,25 +61,27 @@ class TableConfigManager {
 class DefaultTableConfigManager extends TableConfigManager {
     constructor() {
         super(...arguments);
-        this.#selectable$ = new BehaviorSubject(false);
-        this.selectable$ = this.#selectable$.asObservable();
+        this.#selectable = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "#selectable" }] : /* istanbul ignore next */ []));
+        this.selectableSignal = this.#selectable.asReadonly();
+        this.selectable$ = toObservable(this.#selectable);
     }
-    #selectable$;
+    #selectable;
     get selectable() {
-        return this.#selectable$.value;
+        return this.#selectable();
     }
     set selectable(value) {
-        this.#selectable$.next(value);
+        this.#selectable.set(value);
     }
 }
 
 class WlcmTableRowSpacerComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: WlcmTableRowSpacerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.4", type: WlcmTableRowSpacerComponent, isStandalone: true, selector: "wlcm-table-row-spacer", host: { classAttribute: "wlcm-table-row-spacer" }, ngImport: i0, template: "", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: WlcmTableRowSpacerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.5", type: WlcmTableRowSpacerComponent, isStandalone: true, selector: "wlcm-table-row-spacer", host: { classAttribute: "wlcm-table-row-spacer" }, ngImport: i0, template: "", styles: [""], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: WlcmTableRowSpacerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: WlcmTableRowSpacerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'wlcm-table-row-spacer', host: { class: 'wlcm-table-row-spacer' }, standalone: true, imports: [CommonModule], template: "" }]
+            args: [{ selector: 'wlcm-table-row-spacer', host: { class: 'wlcm-table-row-spacer' }, changeDetection: ChangeDetectionStrategy.OnPush, template: "" }]
         }] });
 
 const WLCM_TABLE_ROW_CONTEXT = new InjectionToken('WLCM_TABLE_ROW_CONTEXT');
@@ -97,14 +96,13 @@ class WlcmTableRowInjectorPipe {
             parent: this.injector,
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: WlcmTableRowInjectorPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.1.4", ngImport: i0, type: WlcmTableRowInjectorPipe, isStandalone: true, name: "wlcmTableRowInjector" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: WlcmTableRowInjectorPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.0.5", ngImport: i0, type: WlcmTableRowInjectorPipe, isStandalone: true, name: "wlcmTableRowInjector" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: WlcmTableRowInjectorPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: WlcmTableRowInjectorPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'wlcmTableRowInjector',
-                    standalone: true,
                 }]
         }] });
 
@@ -118,24 +116,32 @@ const WLCM_TABLE_CONFIG = new InjectionToken('WLCM_TABLE_CONFIG', {
     factory: () => ({ selectable: false }),
 });
 
-let WlcmTableComponent = class WlcmTableComponent {
+class WlcmTableComponent {
     #streamOfRows$;
-    constructor(selectionModel, config, configManager) {
-        this.selectionModel = selectionModel;
-        this.config = config;
-        this.configManager = configManager;
-        this.rows = input([]);
-        this.headTemplate = input();
-        this.rowTemplate = input.required();
-        this.isRowSelectable = input(() => true);
-        this.selectId = input();
-        this.trackBy = input((_, row) => row);
-        this.selectable = input();
+    constructor() {
+        this.rows = input([], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "rows" }] : /* istanbul ignore next */ []));
+        this.headTemplate = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "headTemplate" }] : /* istanbul ignore next */ []));
+        this.rowTemplate = input.required(/* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "rowTemplate" }] : /* istanbul ignore next */ []));
+        this.isRowSelectable = input(() => true, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isRowSelectable" }] : /* istanbul ignore next */ []));
+        this.selectId = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "selectId" }] : /* istanbul ignore next */ []));
+        this.trackBy = input((_, row) => row, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "trackBy" }] : /* istanbul ignore next */ []));
+        this.selectable = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "selectable" }] : /* istanbul ignore next */ []));
         this.injector = inject(Injector);
+        this.selectionModel = inject(WlcmTableSelectionModel);
+        this.config = inject(WLCM_TABLE_CONFIG);
+        this.configManager = inject(TableConfigManager);
+        this.destroyRef = inject(DestroyRef);
         this.#streamOfRows$ = toObservable(this.rows);
-        this.configManager.selectable = config.selectable;
+        this.configManager.selectable = this.config.selectable;
         toObservable(this.selectable)
-            .pipe(untilDestroyed(this))
+            .pipe(takeUntilDestroyed())
             .subscribe((value) => {
             if (value === undefined)
                 return;
@@ -148,7 +154,7 @@ let WlcmTableComponent = class WlcmTableComponent {
                 WlcmTableErrorsUtils.throwNoSelectIdError();
         }
         this.#streamOfRows$
-            .pipe(untilDestroyed(this))
+            .pipe(takeUntilDestroyed(this.destroyRef))
             .pipe(switchMap((rows) => this.configManager.selectable$.pipe(map(() => rows))))
             .subscribe((rows) => {
             if (!this.configManager.selectable) {
@@ -158,31 +164,25 @@ let WlcmTableComponent = class WlcmTableComponent {
             this.selectionModel.updateCollection(rows.filter(this.isRowSelectable()).map(this.selectId()));
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: WlcmTableComponent, deps: [{ token: WlcmTableSelectionModel }, { token: WLCM_TABLE_CONFIG }, { token: TableConfigManager }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.4", type: WlcmTableComponent, isStandalone: true, selector: "wlcm-table", inputs: { rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: false, transformFunction: null }, headTemplate: { classPropertyName: "headTemplate", publicName: "headTemplate", isSignal: true, isRequired: false, transformFunction: null }, rowTemplate: { classPropertyName: "rowTemplate", publicName: "rowTemplate", isSignal: true, isRequired: true, transformFunction: null }, isRowSelectable: { classPropertyName: "isRowSelectable", publicName: "isRowSelectable", isSignal: true, isRequired: false, transformFunction: null }, selectId: { classPropertyName: "selectId", publicName: "selectId", isSignal: true, isRequired: false, transformFunction: null }, trackBy: { classPropertyName: "trackBy", publicName: "trackBy", isSignal: true, isRequired: false, transformFunction: null }, selectable: { classPropertyName: "selectable", publicName: "selectable", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "wlcm-table" }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: WlcmTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: WlcmTableComponent, isStandalone: true, selector: "wlcm-table", inputs: { rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: false, transformFunction: null }, headTemplate: { classPropertyName: "headTemplate", publicName: "headTemplate", isSignal: true, isRequired: false, transformFunction: null }, rowTemplate: { classPropertyName: "rowTemplate", publicName: "rowTemplate", isSignal: true, isRequired: true, transformFunction: null }, isRowSelectable: { classPropertyName: "isRowSelectable", publicName: "isRowSelectable", isSignal: true, isRequired: false, transformFunction: null }, selectId: { classPropertyName: "selectId", publicName: "selectId", isSignal: true, isRequired: false, transformFunction: null }, trackBy: { classPropertyName: "trackBy", publicName: "trackBy", isSignal: true, isRequired: false, transformFunction: null }, selectable: { classPropertyName: "selectable", publicName: "selectable", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "wlcm-table" }, providers: [
             { provide: TableConfigManager, useClass: DefaultTableConfigManager },
             { provide: WlcmTableSelectionModel, useClass: DefaultWlcmTableSelectionModel },
-        ], ngImport: i0, template: "@if (headTemplate()) {\n  <ng-container\n    *ngTemplateOutlet=\"headTemplate()!; injector: injector\"\n  ></ng-container>\n}\n\n<tbody>\n  <ng-container\n    *ngFor=\"\n      let row of rows();\n      trackBy: trackBy();\n      let index = index;\n      let first = first;\n      let last = last\n    \"\n  >\n    @if ((first && headTemplate()) || !first) {\n      <wlcm-table-row-spacer></wlcm-table-row-spacer>\n    }\n\n    <ng-container\n      *rxLet=\"\n        {\n          $implicit: row,\n          selectId: selectId(),\n          isRowSelectable: isRowSelectable(),\n          index: index,\n          first: first,\n          last: last\n        };\n        let context\n      \"\n    >\n      <ng-container\n        *ngTemplateOutlet=\"\n          rowTemplate();\n          context: context;\n          injector: context | wlcmTableRowInjector\n        \"\n      >\n      </ng-container>\n    </ng-container>\n  </ng-container>\n</tbody>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: WlcmTableRowInjectorPipe, name: "wlcmTableRowInjector" }, { kind: "component", type: WlcmTableRowSpacerComponent, selector: "wlcm-table-row-spacer" }, { kind: "directive", type: RxLet, selector: "[rxLet]", inputs: ["rxLet", "rxLetStrategy", "rxLetComplete", "rxLetError", "rxLetSuspense", "rxLetContextTrigger", "rxLetCompleteTrigger", "rxLetErrorTrigger", "rxLetSuspenseTrigger", "rxLetNextTrigger", "rxLetRenderCallback", "rxLetParent", "rxLetPatchZone"], outputs: ["rendered"] }] }); }
-};
-WlcmTableComponent = __decorate([
-    UntilDestroy(),
-    __metadata("design:paramtypes", [WlcmTableSelectionModel, Object, TableConfigManager])
-], WlcmTableComponent);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: WlcmTableComponent, decorators: [{
+        ], ngImport: i0, template: "@if (headTemplate()) {\n  <ng-container\n    *ngTemplateOutlet=\"headTemplate()!; injector: injector\"\n  ></ng-container>\n}\n\n<tbody>\n  @for (\n    row of rows(); track trackBy()(index,\n    row); let index = $index; let first = $first; let last = $last) {\n    @if ((first && headTemplate()) || !first) {\n      <wlcm-table-row-spacer></wlcm-table-row-spacer>\n    }\n    @let context =\n    {\n    $implicit: row,\n    selectId: selectId(),\n    isRowSelectable: isRowSelectable(),\n    index: index,\n    first: first,\n    last: last,\n    };\n    <ng-container>\n      <ng-container\n        *ngTemplateOutlet=\"\n          rowTemplate();\n          context: context;\n          injector: context | wlcmTableRowInjector\n        \"\n        >\n      </ng-container>\n    </ng-container>\n  }\n</tbody>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: WlcmTableRowSpacerComponent, selector: "wlcm-table-row-spacer" }, { kind: "pipe", type: WlcmTableRowInjectorPipe, name: "wlcmTableRowInjector" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: WlcmTableComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'wlcm-table', host: { class: 'wlcm-table' }, standalone: true, imports: [CommonModule, WlcmTableRowInjectorPipe, WlcmTableRowSpacerComponent, RxLet], providers: [
+            args: [{ selector: 'wlcm-table', host: { class: 'wlcm-table' }, imports: [CommonModule, WlcmTableRowInjectorPipe, WlcmTableRowSpacerComponent], providers: [
                         { provide: TableConfigManager, useClass: DefaultTableConfigManager },
                         { provide: WlcmTableSelectionModel, useClass: DefaultWlcmTableSelectionModel },
-                    ], template: "@if (headTemplate()) {\n  <ng-container\n    *ngTemplateOutlet=\"headTemplate()!; injector: injector\"\n  ></ng-container>\n}\n\n<tbody>\n  <ng-container\n    *ngFor=\"\n      let row of rows();\n      trackBy: trackBy();\n      let index = index;\n      let first = first;\n      let last = last\n    \"\n  >\n    @if ((first && headTemplate()) || !first) {\n      <wlcm-table-row-spacer></wlcm-table-row-spacer>\n    }\n\n    <ng-container\n      *rxLet=\"\n        {\n          $implicit: row,\n          selectId: selectId(),\n          isRowSelectable: isRowSelectable(),\n          index: index,\n          first: first,\n          last: last\n        };\n        let context\n      \"\n    >\n      <ng-container\n        *ngTemplateOutlet=\"\n          rowTemplate();\n          context: context;\n          injector: context | wlcmTableRowInjector\n        \"\n      >\n      </ng-container>\n    </ng-container>\n  </ng-container>\n</tbody>\n" }]
-        }], ctorParameters: () => [{ type: WlcmTableSelectionModel }, { type: undefined, decorators: [{
-                    type: Inject,
-                    args: [WLCM_TABLE_CONFIG]
-                }] }, { type: TableConfigManager }] });
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (headTemplate()) {\n  <ng-container\n    *ngTemplateOutlet=\"headTemplate()!; injector: injector\"\n  ></ng-container>\n}\n\n<tbody>\n  @for (\n    row of rows(); track trackBy()(index,\n    row); let index = $index; let first = $first; let last = $last) {\n    @if ((first && headTemplate()) || !first) {\n      <wlcm-table-row-spacer></wlcm-table-row-spacer>\n    }\n    @let context =\n    {\n    $implicit: row,\n    selectId: selectId(),\n    isRowSelectable: isRowSelectable(),\n    index: index,\n    first: first,\n    last: last,\n    };\n    <ng-container>\n      <ng-container\n        *ngTemplateOutlet=\"\n          rowTemplate();\n          context: context;\n          injector: context | wlcmTableRowInjector\n        \"\n        >\n      </ng-container>\n    </ng-container>\n  }\n</tbody>\n" }]
+        }], ctorParameters: () => [], propDecorators: { rows: [{ type: i0.Input, args: [{ isSignal: true, alias: "rows", required: false }] }], headTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "headTemplate", required: false }] }], rowTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowTemplate", required: true }] }], isRowSelectable: [{ type: i0.Input, args: [{ isSignal: true, alias: "isRowSelectable", required: false }] }], selectId: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectId", required: false }] }], trackBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "trackBy", required: false }] }], selectable: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectable", required: false }] }] } });
 
-let WlcmTableHeadActionsComponent = class WlcmTableHeadActionsComponent {
-    constructor(selectionModel) {
-        this.selectionModel = selectionModel;
+class WlcmTableHeadActionsComponent {
+    constructor() {
         this.control = new FormControl(false);
+        this.selectionModel = inject(WlcmTableSelectionModel);
+        this.destroyRef = inject(DestroyRef);
         this.handleSelectionChange();
     }
     toggle(isChecked) {
@@ -193,73 +193,59 @@ let WlcmTableHeadActionsComponent = class WlcmTableHeadActionsComponent {
     }
     handleSelectionChange() {
         this.selectionModel.allSelected
-            .pipe(untilDestroyed(this))
+            .pipe(takeUntilDestroyed(this.destroyRef))
             .subscribe((isSelected) => this.control.setValue(isSelected));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: WlcmTableHeadActionsComponent, deps: [{ token: WlcmTableSelectionModel }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.4", type: WlcmTableHeadActionsComponent, isStandalone: true, selector: "wlcm-table-head-actions", host: { classAttribute: "wlcm-table-head-actions" }, ngImport: i0, template: "<wlcm-checkbox\n  [formControl]=\"control\"\n  (changed)=\"toggle($event)\"\n></wlcm-checkbox>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: WlcmFormsModule }, { kind: "component", type: i2.WlcmCheckboxComponent, selector: "wlcm-checkbox", inputs: ["value"], outputs: ["changed"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] }); }
-};
-WlcmTableHeadActionsComponent = __decorate([
-    UntilDestroy(),
-    __metadata("design:paramtypes", [WlcmTableSelectionModel])
-], WlcmTableHeadActionsComponent);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: WlcmTableHeadActionsComponent, decorators: [{
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: WlcmTableHeadActionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.5", type: WlcmTableHeadActionsComponent, isStandalone: true, selector: "wlcm-table-head-actions", host: { classAttribute: "wlcm-table-head-actions" }, ngImport: i0, template: "<wlcm-checkbox\n  [formControl]=\"control\"\n  (changed)=\"toggle($event)\"\n></wlcm-checkbox>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: WlcmFormsModule }, { kind: "component", type: i1$1.WlcmCheckboxComponent, selector: "wlcm-checkbox", inputs: ["value"], outputs: ["changed"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: WlcmTableHeadActionsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'wlcm-table-head-actions', host: { class: 'wlcm-table-head-actions' }, standalone: true, imports: [CommonModule, WlcmFormsModule, ReactiveFormsModule], template: "<wlcm-checkbox\n  [formControl]=\"control\"\n  (changed)=\"toggle($event)\"\n></wlcm-checkbox>\n" }]
-        }], ctorParameters: () => [{ type: WlcmTableSelectionModel }] });
+            args: [{ selector: 'wlcm-table-head-actions', host: { class: 'wlcm-table-head-actions' }, imports: [WlcmFormsModule, ReactiveFormsModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<wlcm-checkbox\n  [formControl]=\"control\"\n  (changed)=\"toggle($event)\"\n></wlcm-checkbox>\n" }]
+        }], ctorParameters: () => [] });
 
 class WlcmTableHeadComponent {
-    constructor(tableConfigManager) {
-        this.tableConfigManager = tableConfigManager;
+    constructor() {
+        this.tableConfigManager = inject(TableConfigManager);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: WlcmTableHeadComponent, deps: [{ token: TableConfigManager }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.4", type: WlcmTableHeadComponent, isStandalone: true, selector: "wlcm-table-head", host: { classAttribute: "wlcm-table-head" }, ngImport: i0, template: "@if (tableConfigManager.selectable) {\n  <wlcm-table-head-actions></wlcm-table-head-actions>\n}\n\n<ng-content select=\"wlcm-table-head-data\"></ng-content>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: WlcmTableHeadActionsComponent, selector: "wlcm-table-head-actions" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: WlcmTableHeadComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: WlcmTableHeadComponent, isStandalone: true, selector: "wlcm-table-head", host: { classAttribute: "wlcm-table-head" }, ngImport: i0, template: "@if (tableConfigManager.selectable) {\n  <wlcm-table-head-actions></wlcm-table-head-actions>\n}\n\n<ng-content select=\"wlcm-table-head-data\"></ng-content>\n", styles: [""], dependencies: [{ kind: "component", type: WlcmTableHeadActionsComponent, selector: "wlcm-table-head-actions" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: WlcmTableHeadComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: WlcmTableHeadComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'wlcm-table-head', host: { class: 'wlcm-table-head' }, standalone: true, imports: [CommonModule, WlcmTableHeadActionsComponent], template: "@if (tableConfigManager.selectable) {\n  <wlcm-table-head-actions></wlcm-table-head-actions>\n}\n\n<ng-content select=\"wlcm-table-head-data\"></ng-content>\n" }]
-        }], ctorParameters: () => [{ type: TableConfigManager }] });
+            args: [{ selector: 'wlcm-table-head', host: { class: 'wlcm-table-head' }, imports: [WlcmTableHeadActionsComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (tableConfigManager.selectable) {\n  <wlcm-table-head-actions></wlcm-table-head-actions>\n}\n\n<ng-content select=\"wlcm-table-head-data\"></ng-content>\n" }]
+        }] });
 
 class WlcmTableHeadDataComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: WlcmTableHeadDataComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.4", type: WlcmTableHeadDataComponent, isStandalone: true, selector: "wlcm-table-head-data", host: { classAttribute: "wlcm-table-head-data" }, ngImport: i0, template: "<ng-content></ng-content>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: WlcmTableHeadDataComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.5", type: WlcmTableHeadDataComponent, isStandalone: true, selector: "wlcm-table-head-data", host: { classAttribute: "wlcm-table-head-data" }, ngImport: i0, template: "<ng-content></ng-content>\n", styles: [""], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: WlcmTableHeadDataComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: WlcmTableHeadDataComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'wlcm-table-head-data', host: { class: 'wlcm-table-head-data' }, standalone: true, imports: [CommonModule], template: "<ng-content></ng-content>\n" }]
+            args: [{ selector: 'wlcm-table-head-data', host: { class: 'wlcm-table-head-data' }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content></ng-content>\n" }]
         }] });
 
 class WlcmTableRowActionsComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: WlcmTableRowActionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.4", type: WlcmTableRowActionsComponent, isStandalone: true, selector: "wlcm-table-row-actions", host: { classAttribute: "wlcm-table-row-actions" }, ngImport: i0, template: "<ng-content></ng-content>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: WlcmTableRowActionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.5", type: WlcmTableRowActionsComponent, isStandalone: true, selector: "wlcm-table-row-actions", host: { classAttribute: "wlcm-table-row-actions" }, ngImport: i0, template: "<ng-content></ng-content>\n", styles: [""], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: WlcmTableRowActionsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: WlcmTableRowActionsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'wlcm-table-row-actions', host: { class: 'wlcm-table-row-actions' }, standalone: true, imports: [CommonModule], template: "<ng-content></ng-content>\n" }]
+            args: [{ selector: 'wlcm-table-row-actions', host: { class: 'wlcm-table-row-actions' }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content></ng-content>\n" }]
         }] });
 
-let WlcmTableRowComponent = class WlcmTableRowComponent {
-    get first() {
-        return this.rowContext.first;
-    }
-    get last() {
-        return this.rowContext.last;
-    }
-    constructor(elementRef, tableConfigManager, selectionModel, rowContext) {
-        this.elementRef = elementRef;
-        this.tableConfigManager = tableConfigManager;
-        this.selectionModel = selectionModel;
+class WlcmTableRowComponent {
+    constructor(rowContext) {
         this.rowContext = rowContext;
-        this.isSelected = signal(false);
-        this.isSelectable = signal(false);
-        this.markAsSelected = () => {
-            this.elementRef.nativeElement.classList.add('wlcm-table-row-selected');
-        };
-        this.markAsUnselected = () => {
-            this.elementRef.nativeElement.classList.remove('wlcm-table-row-selected');
-        };
-        this.tableConfigManager.selectable$.pipe(untilDestroyed(this)).subscribe((value) => {
-            this.isSelectable.update(() => value && this.rowContext.isRowSelectable(rowContext.$implicit));
+        this.isSelected = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isSelected" }] : /* istanbul ignore next */ []));
+        this.isSelectable = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isSelectable" }] : /* istanbul ignore next */ []));
+        this.destroyRef = inject(DestroyRef);
+        this.tableConfigManager = inject(TableConfigManager);
+        this.selectionModel = inject(WlcmTableSelectionModel);
+        this.tableConfigManager.selectable$.pipe(takeUntilDestroyed(this.destroyRef)).subscribe((value) => {
+            this.isSelectable.set(value && this.rowContext.isRowSelectable(this.rowContext.$implicit));
             if (this.isSelectable()) {
                 this.rowId = this.rowContext.selectId(this.rowContext.$implicit);
                 this.handleSelectionChanges();
@@ -275,87 +261,69 @@ let WlcmTableRowComponent = class WlcmTableRowComponent {
     }
     handleSelectionChanges() {
         this.selectionModel.selectionChanged
-            .pipe(untilDestroyed(this))
+            .pipe(takeUntilDestroyed(this.destroyRef))
             .pipe(takeUntil(this.tableConfigManager.selectable$.pipe(skip(1))))
             .pipe(map((collection) => collection.has(this.rowId)))
             .pipe(filter((isSelected) => isSelected !== this.isSelected()))
-            .pipe(finalize(() => this.markAsUnselected()))
-            .subscribe((isSelected) => {
-            this.isSelected.set(isSelected);
-            isSelected ? this.markAsSelected() : this.markAsUnselected();
-        });
+            .subscribe((isSelected) => this.isSelected.set(isSelected));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: WlcmTableRowComponent, deps: [{ token: i0.ElementRef }, { token: TableConfigManager }, { token: WlcmTableSelectionModel }, { token: WLCM_TABLE_ROW_CONTEXT }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.4", type: WlcmTableRowComponent, isStandalone: true, selector: "wlcm-table-row", host: { properties: { "class.wlcm-table-row-first": "this.first", "class.wlcm-table-row-last": "this.last" }, classAttribute: "wlcm-table-row" }, ngImport: i0, template: "@if (tableConfigManager.selectable) {\n  <wlcm-table-row-actions>\n    @if (isSelectable()) {\n      <wlcm-checkbox\n        [ngModel]=\"isSelected()\"\n        (changed)=\"selectionChanged($event)\"\n      ></wlcm-checkbox>\n    }\n  </wlcm-table-row-actions>\n}\n\n<ng-content select=\"wlcm-table-row-data\"></ng-content>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: WlcmTableRowActionsComponent, selector: "wlcm-table-row-actions" }, { kind: "ngmodule", type: WlcmFormsModule }, { kind: "component", type: i2.WlcmCheckboxComponent, selector: "wlcm-checkbox", inputs: ["value"], outputs: ["changed"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] }); }
-};
-WlcmTableRowComponent = __decorate([
-    UntilDestroy(),
-    __metadata("design:paramtypes", [ElementRef,
-        TableConfigManager,
-        WlcmTableSelectionModel, Object])
-], WlcmTableRowComponent);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: WlcmTableRowComponent, decorators: [{
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: WlcmTableRowComponent, deps: [{ token: WLCM_TABLE_ROW_CONTEXT }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: WlcmTableRowComponent, isStandalone: true, selector: "wlcm-table-row", host: { properties: { "class.wlcm-table-row-first": "rowContext.first", "class.wlcm-table-row-last": "rowContext.last", "class.wlcm-table-row-selected": "isSelected()" }, classAttribute: "wlcm-table-row" }, ngImport: i0, template: "@if (tableConfigManager.selectable) {\n  <wlcm-table-row-actions>\n    @if (isSelectable()) {\n      <wlcm-checkbox\n        [ngModel]=\"isSelected()\"\n        (changed)=\"selectionChanged($event)\"\n      ></wlcm-checkbox>\n    }\n  </wlcm-table-row-actions>\n}\n\n<ng-content select=\"wlcm-table-row-data\"></ng-content>\n", styles: [""], dependencies: [{ kind: "component", type: WlcmTableRowActionsComponent, selector: "wlcm-table-row-actions" }, { kind: "ngmodule", type: WlcmFormsModule }, { kind: "component", type: i1$1.WlcmCheckboxComponent, selector: "wlcm-checkbox", inputs: ["value"], outputs: ["changed"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: WlcmTableRowComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'wlcm-table-row', host: { class: 'wlcm-table-row' }, standalone: true, imports: [CommonModule, WlcmTableRowActionsComponent, WlcmFormsModule, FormsModule], template: "@if (tableConfigManager.selectable) {\n  <wlcm-table-row-actions>\n    @if (isSelectable()) {\n      <wlcm-checkbox\n        [ngModel]=\"isSelected()\"\n        (changed)=\"selectionChanged($event)\"\n      ></wlcm-checkbox>\n    }\n  </wlcm-table-row-actions>\n}\n\n<ng-content select=\"wlcm-table-row-data\"></ng-content>\n" }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: TableConfigManager }, { type: WlcmTableSelectionModel }, { type: undefined, decorators: [{
+            args: [{ selector: 'wlcm-table-row', host: {
+                        class: 'wlcm-table-row',
+                        '[class.wlcm-table-row-first]': 'rowContext.first',
+                        '[class.wlcm-table-row-last]': 'rowContext.last',
+                        '[class.wlcm-table-row-selected]': 'isSelected()',
+                    }, imports: [WlcmTableRowActionsComponent, WlcmFormsModule, FormsModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (tableConfigManager.selectable) {\n  <wlcm-table-row-actions>\n    @if (isSelectable()) {\n      <wlcm-checkbox\n        [ngModel]=\"isSelected()\"\n        (changed)=\"selectionChanged($event)\"\n      ></wlcm-checkbox>\n    }\n  </wlcm-table-row-actions>\n}\n\n<ng-content select=\"wlcm-table-row-data\"></ng-content>\n" }]
+        }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Inject,
                     args: [WLCM_TABLE_ROW_CONTEXT]
-                }] }], propDecorators: { first: [{
-                type: HostBinding,
-                args: ['class.wlcm-table-row-first']
-            }], last: [{
-                type: HostBinding,
-                args: ['class.wlcm-table-row-last']
-            }] } });
+                }] }] });
 
 class WlcmTableRowDataComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: WlcmTableRowDataComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.4", type: WlcmTableRowDataComponent, isStandalone: true, selector: "wlcm-table-row-data", host: { classAttribute: "wlcm-table-row-data" }, ngImport: i0, template: "<ng-content></ng-content>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: WlcmTableRowDataComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.5", type: WlcmTableRowDataComponent, isStandalone: true, selector: "wlcm-table-row-data", host: { classAttribute: "wlcm-table-row-data" }, ngImport: i0, template: "<ng-content></ng-content>\n", styles: [""], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: WlcmTableRowDataComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: WlcmTableRowDataComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'wlcm-table-row-data', host: { class: 'wlcm-table-row-data' }, standalone: true, imports: [CommonModule], template: "<ng-content></ng-content>\n" }]
+            args: [{ selector: 'wlcm-table-row-data', host: { class: 'wlcm-table-row-data' }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content></ng-content>\n" }]
         }] });
 
-let WlcmScrollableTableContainerDirective = class WlcmScrollableTableContainerDirective {
-    constructor(zone, elementRef) {
-        this.zone = zone;
-        this.elementRef = elementRef;
-        this.scrollDownOffsetPercent = input(0.8);
+class WlcmScrollableTableContainerDirective {
+    constructor() {
+        this.scrollDownOffsetPercent = input(0.8, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "scrollDownOffsetPercent" }] : /* istanbul ignore next */ []));
         this.scrolledDown = output();
+        this.elementRef = inject(ElementRef);
         this.handleScrolling();
     }
     get element() {
         return this.elementRef.nativeElement;
     }
     handleScrolling() {
-        this.zone.runOutsideAngular(() => {
-            fromEvent(this.element, 'scroll')
-                .pipe(debounceTime(50))
-                .pipe(untilDestroyed(this))
-                .subscribe(() => {
-                if (this.element.scrollHeight * this.scrollDownOffsetPercent() <=
-                    this.element.scrollTop + this.element.clientHeight) {
-                    this.zone.run(() => this.scrolledDown.emit());
-                }
-            });
+        fromEvent(this.element, 'scroll', { passive: true })
+            .pipe(debounceTime(50))
+            .pipe(takeUntilDestroyed())
+            .subscribe(() => {
+            if (this.element.scrollHeight * this.scrollDownOffsetPercent() <=
+                this.element.scrollTop + this.element.clientHeight) {
+                this.scrolledDown.emit();
+            }
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: WlcmScrollableTableContainerDirective, deps: [{ token: i0.NgZone }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.1.4", type: WlcmScrollableTableContainerDirective, isStandalone: true, selector: "[wlcmScrollableTableContainer]", inputs: { scrollDownOffsetPercent: { classPropertyName: "scrollDownOffsetPercent", publicName: "scrollDownOffsetPercent", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { scrolledDown: "scrolledDown" }, host: { classAttribute: "wlcm-scrollable-table-container" }, ngImport: i0 }); }
-};
-WlcmScrollableTableContainerDirective = __decorate([
-    UntilDestroy(),
-    __metadata("design:paramtypes", [NgZone, ElementRef])
-], WlcmScrollableTableContainerDirective);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: WlcmScrollableTableContainerDirective, decorators: [{
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: WlcmScrollableTableContainerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.5", type: WlcmScrollableTableContainerDirective, isStandalone: true, selector: "[wlcmScrollableTableContainer]", inputs: { scrollDownOffsetPercent: { classPropertyName: "scrollDownOffsetPercent", publicName: "scrollDownOffsetPercent", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { scrolledDown: "scrolledDown" }, host: { classAttribute: "wlcm-scrollable-table-container" }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: WlcmScrollableTableContainerDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[wlcmScrollableTableContainer]',
                     host: { class: 'wlcm-scrollable-table-container' },
-                    standalone: true,
                 }]
-        }], ctorParameters: () => [{ type: i0.NgZone }, { type: i0.ElementRef }] });
+        }], ctorParameters: () => [], propDecorators: { scrollDownOffsetPercent: [{ type: i0.Input, args: [{ isSignal: true, alias: "scrollDownOffsetPercent", required: false }] }], scrolledDown: [{ type: i0.Output, args: ["scrolledDown"] }] } });
 
 const publicComponents = [
     WlcmTableComponent,
@@ -366,8 +334,8 @@ const publicComponents = [
 ];
 const publicDirectives = [WlcmScrollableTableContainerDirective];
 class WlcmTableModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: WlcmTableModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.1.4", ngImport: i0, type: WlcmTableModule, imports: [CommonModule, WlcmTableComponent,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: WlcmTableModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.0.5", ngImport: i0, type: WlcmTableModule, imports: [CommonModule, WlcmTableComponent,
             WlcmTableHeadComponent,
             WlcmTableHeadDataComponent,
             WlcmTableRowDataComponent,
@@ -376,9 +344,11 @@ class WlcmTableModule {
             WlcmTableHeadDataComponent,
             WlcmTableRowDataComponent,
             WlcmTableRowComponent, WlcmScrollableTableContainerDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: WlcmTableModule, imports: [CommonModule, publicComponents] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: WlcmTableModule, imports: [CommonModule, WlcmTableComponent,
+            WlcmTableHeadComponent,
+            WlcmTableRowComponent] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: WlcmTableModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: WlcmTableModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [CommonModule, ...publicComponents, ...publicDirectives],