@wlcm/angular 19.2.5 → 22.0.1

package/README.md

@@ -4,6 +4,43 @@
 
 ✨ **This workspace has been generated by [Nx, Smart Monorepos · Fast CI.](https://nx.dev)** ✨
 
+## Migrating to `@wlcm/angular` v22
+
+v22 upgrades the library to **Angular 22** (peer `^22.0.0`, Node `>=22.12.0`, TypeScript 6) and modernizes the whole codebase. It is a **breaking major** for TypeScript consumers — the changes below are intentional and not reversible.
+
+### Angular 22 baseline
+
+- Requires **Angular 22** and **Node 22.12+**. The library is **zoneless-safe** and every component ships with `ChangeDetectionStrategy.OnPush`. If your app is still zone-based it keeps working; new apps should adopt `provideZonelessChangeDetection()`.
+- Reactive Forms are unchanged (no signal-forms rewrite).
+
+### Signal-based public API (breaking)
+
+All component inputs/outputs and view/content queries are now **signals**. Read values by calling them and set two-way values with `.set()`:
+
+- `@Input() foo` → **`input()`** — read as `cmp.foo()`, not `cmp.foo`. Template bindings (`[foo]="…"`) are unchanged.
+- `@Output() fooChange` → **`output()`** — `(fooChange)="…"` template bindings are unchanged; imperative `cmp.fooChange.subscribe(…)` still works.
+- Two-way inputs (e.g. search-field `queryParams`, stepper step `key`/`completed`) are **`model()`** — bind with `[(queryParams)]` or read/write via `cmp.queryParams()` / `cmp.queryParams.set(…)`.
+
+### `WlcmStep` signal contract (breaking)
+
+`WlcmStep` members are now signals — the previous `key$`/`label$`/`completed$`/`disabled$` observable bridges have been **removed**:
+
+- `step.completed` / `step.key` / `step.disabled` are `model()` signals — `step.completed()` to read, `step.completed.set(true)` to write.
+- `step.label` is a required `input()` — read as `step.label()`.
+
+### Removed button `type` input (breaking)
+
+The deprecated `type` input on the button (and its legacy `--primary/--secondary/--accent/--borderless/--paddingless` SCSS variants) is **removed**. Use `styleType`/`color` instead — e.g. `type="paddingless"` → `styleType="compact"`, `type="borderless"` → `styleType="text"`.
+
+### NgModules (still shipped, prefer standalone)
+
+The thin per-feature `Wlcm*Module` re-export modules are still exported and continue to work, but all components are standalone — **prefer importing the components directly** over the modules going forward. `WlcmFormsModule` also provides `MAT_RADIO_DEFAULT_OPTIONS` (`{ color: 'primary' }`); if you import the form components standalone, provide that yourself where needed.
+
+### Theming: CSS custom-property tokens + Material M3
+
+The SCSS config-map entry point is unchanged (non-breaking), but the mixins now emit `--wlcm-*` CSS custom properties and component styles consume them via `var(--wlcm-*)`, so runtime retheming is possible. If you theme Material widgets alongside the library, migrate the deprecated `mat.m2-*` APIs to `mat.theme()` (M3) as the sandbox does.
+
+
 ## Integrate with editors
 
 Enhance your Nx experience by installing [Nx Console](https://nx.dev/nx-console) for your favorite editor. Nx Console

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

@@ -1,51 +1,45 @@
 import * as i0 from '@angular/core';
-import { input, EventEmitter, Component, ChangeDetectionStrategy, Input, Output, NgModule } from '@angular/core';
-import * as i2 from '@angular/material/progress-spinner';
+import { input, output, ChangeDetectionStrategy, Component, NgModule } from '@angular/core';
 import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
 import * as i1 from '@angular/common';
 import { CommonModule } from '@angular/common';
+import { WlcmLoaderComponent } from '@wlcm/angular/core';
 
 class WlcmButtonComponent {
     constructor() {
-        /**
-         * @deprecated Use `styleType` instead. This input will be removed in a future release.
-         */
-        this.type = 'primary';
-        this.size = input('large');
-        this.styleType = input('filled');
-        this.buttonColor = input('primary');
-        this.buttonType = input('button');
-        this.isDisabled = false;
-        this.isLoading = false;
-        this.clicked = new EventEmitter();
+        this.size = input('large', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+        this.styleType = input('filled', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "styleType" }] : /* istanbul ignore next */ []));
+        this.buttonColor = input('primary', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "buttonColor" }] : /* istanbul ignore next */ []));
+        this.buttonType = input('button', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "buttonType" }] : /* istanbul ignore next */ []));
+        this.isDisabled = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
+        this.isLoading = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isLoading" }] : /* istanbul ignore next */ []));
+        this.clicked = output();
     }
     onClick() {
-        if (this.isDisabled || this.isLoading)
+        if (this.isDisabled() || this.isLoading())
             return;
         this.clicked.emit();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: WlcmButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.1.4", type: WlcmButtonComponent, isStandalone: true, selector: "wlcm-button", inputs: { type: { classPropertyName: "type", publicName: "type", isSignal: false, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, styleType: { classPropertyName: "styleType", publicName: "styleType", isSignal: true, isRequired: false, transformFunction: null }, buttonColor: { classPropertyName: "buttonColor", publicName: "buttonColor", isSignal: true, isRequired: false, transformFunction: null }, buttonType: { classPropertyName: "buttonType", publicName: "buttonType", isSignal: true, isRequired: false, transformFunction: null }, isDisabled: { classPropertyName: "isDisabled", publicName: "isDisabled", isSignal: false, isRequired: false, transformFunction: null }, isLoading: { classPropertyName: "isLoading", publicName: "isLoading", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { clicked: "clicked" }, ngImport: i0, template: "<button\n  (click)=\"onClick()\"\n  class=\"wlcm-button\n   wlcm-button--{{ type }}\n   wlcm-button--{{ size() }}\n   wlcm-button--style-{{ styleType() }}\n   wlcm-button--color-{{ buttonColor() }}\"\n  [ngClass]=\"{\n    'wlcm-button--loading': isLoading,\n    'wlcm-button--disabled': isDisabled\n  }\"\n  [type]=\"buttonType()\"\n>\n  <div class=\"wlcm-button__content\">\n    <mat-spinner\n      *ngIf=\"isLoading\"\n      [color]=\"type === 'primary' ? 'accent' : 'primary'\"\n      [diameter]=\"16\"\n    ></mat-spinner>\n\n    <ng-content></ng-content>\n  </div>\n</button>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "component", type: i2.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: WlcmButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: WlcmButtonComponent, isStandalone: true, selector: "wlcm-button", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, styleType: { classPropertyName: "styleType", publicName: "styleType", isSignal: true, isRequired: false, transformFunction: null }, buttonColor: { classPropertyName: "buttonColor", publicName: "buttonColor", isSignal: true, isRequired: false, transformFunction: null }, buttonType: { classPropertyName: "buttonType", publicName: "buttonType", isSignal: true, isRequired: false, transformFunction: null }, isDisabled: { classPropertyName: "isDisabled", publicName: "isDisabled", isSignal: true, isRequired: false, transformFunction: null }, isLoading: { classPropertyName: "isLoading", publicName: "isLoading", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clicked: "clicked" }, ngImport: i0, template: "<button\n  (click)=\"onClick()\"\n  class=\"wlcm-button\n   wlcm-button--{{ size() }}\n   wlcm-button--style-{{ styleType() }}\n   wlcm-button--color-{{ buttonColor() }}\"\n  [ngClass]=\"{\n    'wlcm-button--loading': isLoading(),\n    'wlcm-button--disabled': isDisabled(),\n  }\"\n  [type]=\"buttonType()\"\n>\n  <div class=\"wlcm-button__content\">\n    @if (isLoading()) {\n      <wlcm-loader [diameter]=\"'1.3em'\" />\n    }\n\n    <ng-content></ng-content>\n  </div>\n</button>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "component", type: WlcmLoaderComponent, selector: "wlcm-loader", inputs: ["hidden", "diameter"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: WlcmButtonComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: WlcmButtonComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'wlcm-button', standalone: true, imports: [CommonModule, MatProgressSpinnerModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\n  (click)=\"onClick()\"\n  class=\"wlcm-button\n   wlcm-button--{{ type }}\n   wlcm-button--{{ size() }}\n   wlcm-button--style-{{ styleType() }}\n   wlcm-button--color-{{ buttonColor() }}\"\n  [ngClass]=\"{\n    'wlcm-button--loading': isLoading,\n    'wlcm-button--disabled': isDisabled\n  }\"\n  [type]=\"buttonType()\"\n>\n  <div class=\"wlcm-button__content\">\n    <mat-spinner\n      *ngIf=\"isLoading\"\n      [color]=\"type === 'primary' ? 'accent' : 'primary'\"\n      [diameter]=\"16\"\n    ></mat-spinner>\n\n    <ng-content></ng-content>\n  </div>\n</button>\n" }]
-        }], propDecorators: { type: [{
-                type: Input
-            }], isDisabled: [{
-                type: Input
-            }], isLoading: [{
-                type: Input
-            }], clicked: [{
-                type: Output
-            }] } });
+            args: [{ selector: 'wlcm-button', imports: [CommonModule, MatProgressSpinnerModule, WlcmLoaderComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\n  (click)=\"onClick()\"\n  class=\"wlcm-button\n   wlcm-button--{{ size() }}\n   wlcm-button--style-{{ styleType() }}\n   wlcm-button--color-{{ buttonColor() }}\"\n  [ngClass]=\"{\n    'wlcm-button--loading': isLoading(),\n    'wlcm-button--disabled': isDisabled(),\n  }\"\n  [type]=\"buttonType()\"\n>\n  <div class=\"wlcm-button__content\">\n    @if (isLoading()) {\n      <wlcm-loader [diameter]=\"'1.3em'\" />\n    }\n\n    <ng-content></ng-content>\n  </div>\n</button>\n" }]
+        }], propDecorators: { size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], styleType: [{ type: i0.Input, args: [{ isSignal: true, alias: "styleType", required: false }] }], buttonColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "buttonColor", required: false }] }], buttonType: [{ type: i0.Input, args: [{ isSignal: true, alias: "buttonType", required: false }] }], isDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "isDisabled", required: false }] }], isLoading: [{ type: i0.Input, args: [{ isSignal: true, alias: "isLoading", required: false }] }], clicked: [{ type: i0.Output, args: ["clicked"] }] } });
 
 class WlcmButtonModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: WlcmButtonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.1.4", ngImport: i0, type: WlcmButtonModule, imports: [WlcmButtonComponent], exports: [WlcmButtonComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: WlcmButtonModule, imports: [WlcmButtonComponent] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: WlcmButtonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.0.5", ngImport: i0, type: WlcmButtonModule, imports: [WlcmButtonComponent], exports: [WlcmButtonComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: WlcmButtonModule, imports: [WlcmButtonComponent] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: WlcmButtonModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: WlcmButtonModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [WlcmButtonComponent],

package/button/fesm2022/wlcm-angular-button.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"wlcm-angular-button.mjs","sources":["../../../../modules/button/src/lib/components/button/button.component.ts","../../../../modules/button/src/lib/components/button/button.component.html","../../../../modules/button/src/lib/button.module.ts","../../../../modules/button/src/wlcm-angular-button.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, Input, Output, EventEmitter, InputSignal, input } from '@angular/core';\nimport { WlcmButtonColor, WlcmButtonSize, WlcmButtonStyleType, WlcmButtonType } from '../../models/button.models';\nimport { MatProgressSpinnerModule } from '@angular/material/progress-spinner';\nimport { CommonModule } from '@angular/common';\n\n@Component({\n  selector: 'wlcm-button',\n  standalone: true,\n  imports: [CommonModule, MatProgressSpinnerModule],\n  templateUrl: './button.component.html',\n  styleUrls: ['./button.component.scss'],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class WlcmButtonComponent {\n  /**\n   * @deprecated Use `styleType` instead. This input will be removed in a future release.\n   */\n  @Input() type = 'primary';\n\n  size: InputSignal<WlcmButtonSize> = input<WlcmButtonSize>('large');\n\n  styleType: InputSignal<WlcmButtonStyleType> = input<WlcmButtonStyleType>('filled');\n\n  buttonColor: InputSignal<WlcmButtonColor> = input<WlcmButtonColor>('primary');\n\n  buttonType: InputSignal<WlcmButtonType> = input<WlcmButtonType>('button');\n\n  @Input() isDisabled = false;\n\n  @Input() isLoading = false;\n\n  @Output() clicked: EventEmitter<void> = new EventEmitter();\n\n  onClick() {\n    if (this.isDisabled || this.isLoading) return;\n\n    this.clicked.emit();\n  }\n}\n","<button\n  (click)=\"onClick()\"\n  class=\"wlcm-button\n   wlcm-button--{{ type }}\n   wlcm-button--{{ size() }}\n   wlcm-button--style-{{ styleType() }}\n   wlcm-button--color-{{ buttonColor() }}\"\n  [ngClass]=\"{\n    'wlcm-button--loading': isLoading,\n    'wlcm-button--disabled': isDisabled\n  }\"\n  [type]=\"buttonType()\"\n>\n  <div class=\"wlcm-button__content\">\n    <mat-spinner\n      *ngIf=\"isLoading\"\n      [color]=\"type === 'primary' ? 'accent' : 'primary'\"\n      [diameter]=\"16\"\n    ></mat-spinner>\n\n    <ng-content></ng-content>\n  </div>\n</button>\n","import { NgModule } from '@angular/core';\nimport { WlcmButtonComponent } from './components/button/button.component';\n\n@NgModule({\n  imports: [WlcmButtonComponent],\n  exports: [WlcmButtonComponent],\n})\nexport class WlcmButtonModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"wlcm-angular-button.mjs","sources":["../../../../modules/button/src/lib/components/button/button.component.ts","../../../../modules/button/src/lib/components/button/button.component.html","../../../../modules/button/src/lib/button.module.ts","../../../../modules/button/src/wlcm-angular-button.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, input, InputSignal, output, OutputEmitterRef } from '@angular/core';\nimport { WlcmButtonColor, WlcmButtonSize, WlcmButtonStyleType, WlcmButtonType } from '../../models/button.models';\nimport { MatProgressSpinnerModule } from '@angular/material/progress-spinner';\nimport { CommonModule } from '@angular/common';\nimport { WlcmLoaderComponent } from '@wlcm/angular/core';\n\n@Component({\n  selector: 'wlcm-button',\n  imports: [CommonModule, MatProgressSpinnerModule, WlcmLoaderComponent],\n  templateUrl: './button.component.html',\n  styleUrls: ['./button.component.scss'],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class WlcmButtonComponent {\n  size: InputSignal<WlcmButtonSize> = input<WlcmButtonSize>('large');\n\n  styleType: InputSignal<WlcmButtonStyleType> = input<WlcmButtonStyleType>('filled');\n\n  buttonColor: InputSignal<WlcmButtonColor> = input<WlcmButtonColor>('primary');\n\n  buttonType: InputSignal<WlcmButtonType> = input<WlcmButtonType>('button');\n\n  isDisabled: InputSignal<boolean> = input(false);\n\n  isLoading: InputSignal<boolean> = input(false);\n\n  clicked: OutputEmitterRef<void> = output<void>();\n\n  onClick() {\n    if (this.isDisabled() || this.isLoading()) return;\n\n    this.clicked.emit();\n  }\n}\n","<button\n  (click)=\"onClick()\"\n  class=\"wlcm-button\n   wlcm-button--{{ size() }}\n   wlcm-button--style-{{ styleType() }}\n   wlcm-button--color-{{ buttonColor() }}\"\n  [ngClass]=\"{\n    'wlcm-button--loading': isLoading(),\n    'wlcm-button--disabled': isDisabled(),\n  }\"\n  [type]=\"buttonType()\"\n>\n  <div class=\"wlcm-button__content\">\n    @if (isLoading()) {\n      <wlcm-loader [diameter]=\"'1.3em'\" />\n    }\n\n    <ng-content></ng-content>\n  </div>\n</button>\n","import { NgModule } from '@angular/core';\nimport { WlcmButtonComponent } from './components/button/button.component';\n\n@NgModule({\n  imports: [WlcmButtonComponent],\n  exports: [WlcmButtonComponent],\n})\nexport class WlcmButtonModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;;;MAaa,mBAAmB,CAAA;AAPhC,IAAA,WAAA,GAAA;QAQE,IAAA,CAAA,IAAI,GAAgC,KAAK,CAAiB,OAAO;iFAAC;QAElE,IAAA,CAAA,SAAS,GAAqC,KAAK,CAAsB,QAAQ;sFAAC;QAElF,IAAA,CAAA,WAAW,GAAiC,KAAK,CAAkB,SAAS;wFAAC;QAE7E,IAAA,CAAA,UAAU,GAAgC,KAAK,CAAiB,QAAQ;uFAAC;QAEzE,IAAA,CAAA,UAAU,GAAyB,KAAK,CAAC,KAAK;uFAAC;QAE/C,IAAA,CAAA,SAAS,GAAyB,KAAK,CAAC,KAAK;sFAAC;QAE9C,IAAA,CAAA,OAAO,GAA2B,MAAM,EAAQ;AAOjD,IAAA;IALC,OAAO,GAAA;QACL,IAAI,IAAI,CAAC,UAAU,EAAE,IAAI,IAAI,CAAC,SAAS,EAAE;YAAE;AAE3C,QAAA,IAAI,CAAC,OAAO,CAAC,IAAI,EAAE;IACrB;8GAnBW,mBAAmB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAAnB,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,mBAAmB,y4BCbhC,ueAoBA,EAAA,MAAA,EAAA,CAAA,EAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EDZY,YAAY,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,OAAA,EAAA,QAAA,EAAA,WAAA,EAAA,MAAA,EAAA,CAAA,OAAA,EAAA,SAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAAE,wBAAwB,+BAAE,mBAAmB,EAAA,QAAA,EAAA,aAAA,EAAA,MAAA,EAAA,CAAA,QAAA,EAAA,UAAA,CAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA,CAAA;;2FAK1D,mBAAmB,EAAA,UAAA,EAAA,CAAA;kBAP/B,SAAS;+BACE,aAAa,EAAA,OAAA,EACd,CAAC,YAAY,EAAE,wBAAwB,EAAE,mBAAmB,CAAC,EAAA,eAAA,EAGrD,uBAAuB,CAAC,MAAM,EAAA,QAAA,EAAA,ueAAA,EAAA;;;MEJpC,gBAAgB,CAAA;8GAAhB,gBAAgB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,QAAA,EAAA,CAAA,CAAA;+GAAhB,gBAAgB,EAAA,OAAA,EAAA,CAHjB,mBAAmB,CAAA,EAAA,OAAA,EAAA,CACnB,mBAAmB,CAAA,EAAA,CAAA,CAAA;AAElB,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,mBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,gBAAgB,YAHjB,mBAAmB,CAAA,EAAA,CAAA,CAAA;;2FAGlB,gBAAgB,EAAA,UAAA,EAAA,CAAA;kBAJ5B,QAAQ;AAAC,YAAA,IAAA,EAAA,CAAA;oBACR,OAAO,EAAE,CAAC,mBAAmB,CAAC;oBAC9B,OAAO,EAAE,CAAC,mBAAmB,CAAC;AAC/B,iBAAA;;;ACND;;AAEG;;;;"}

package/button/package.json

@@ -0,0 +1,25 @@
+{
+  "name": "@wlcm/angular/button",
+  "version": "0.0.1",
+  "peerDependencies": {
+    "@angular/common": "^22.0.0",
+    "@angular/core": "^22.0.0",
+    "@angular/material": "^22.0.0"
+  },
+  "dependencies": {
+    "tslib": "^2.3.0"
+  },
+  "sideEffects": false,
+  "module": "fesm2022/wlcm-angular-button.mjs",
+  "typings": "types/wlcm-angular-button.d.ts",
+  "exports": {
+    "./package.json": {
+      "default": "./package.json"
+    },
+    ".": {
+      "types": "./types/wlcm-angular-button.d.ts",
+      "default": "./fesm2022/wlcm-angular-button.mjs"
+    }
+  },
+  "type": "module"
+}

package/button/types/wlcm-angular-button.d.ts

@@ -0,0 +1,28 @@
+import * as i0 from '@angular/core';
+import { InputSignal, OutputEmitterRef } from '@angular/core';
+
+type WlcmButtonType = 'button' | 'submit' | 'reset';
+type WlcmButtonStyleType = 'text' | 'filled' | 'compact' | (string & NonNullable<unknown>);
+type WlcmButtonColor = 'primary' | 'secondary' | 'warn' | (string & NonNullable<unknown>);
+type WlcmButtonSize = 'small' | 'medium' | 'large' | (string & NonNullable<unknown>);
+
+declare class WlcmButtonComponent {
+    size: InputSignal<WlcmButtonSize>;
+    styleType: InputSignal<WlcmButtonStyleType>;
+    buttonColor: InputSignal<WlcmButtonColor>;
+    buttonType: InputSignal<WlcmButtonType>;
+    isDisabled: InputSignal<boolean>;
+    isLoading: InputSignal<boolean>;
+    clicked: OutputEmitterRef<void>;
+    onClick(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<WlcmButtonComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<WlcmButtonComponent, "wlcm-button", never, { "size": { "alias": "size"; "required": false; "isSignal": true; }; "styleType": { "alias": "styleType"; "required": false; "isSignal": true; }; "buttonColor": { "alias": "buttonColor"; "required": false; "isSignal": true; }; "buttonType": { "alias": "buttonType"; "required": false; "isSignal": true; }; "isDisabled": { "alias": "isDisabled"; "required": false; "isSignal": true; }; "isLoading": { "alias": "isLoading"; "required": false; "isSignal": true; }; }, { "clicked": "clicked"; }, never, ["*"], true, never>;
+}
+
+declare class WlcmButtonModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<WlcmButtonModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<WlcmButtonModule, never, [typeof WlcmButtonComponent], [typeof WlcmButtonComponent]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<WlcmButtonModule>;
+}
+
+export { WlcmButtonComponent, WlcmButtonModule };

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

@@ -1,9 +1,7 @@
-import { finalize, Observable, of, Subject, fromEvent, takeUntil, filter } from 'rxjs';
+import { finalize, Observable, of, fromEvent, filter } from 'rxjs';
 import * as i0 from '@angular/core';
-import { Component, ChangeDetectionStrategy, InjectionToken, Injectable, input, output, ViewContainerRef, Directive, Inject, viewChild, effect, HostBinding } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { __decorate, __metadata } from 'tslib';
-import { untilDestroyed, UntilDestroy } from '@ngneat/until-destroy';
+import { ChangeDetectionStrategy, Component, InjectionToken, Injectable, inject, ViewContainerRef, DestroyRef, input, output, Directive, computed, viewChild, effect } from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 
 class WlcmStreamUtils {
     static loadingDetector(subject) {
@@ -70,30 +68,30 @@ const DEFAULT_QUERY_PARAMS = {
 };
 
 class ChevronDownIconComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: ChevronDownIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.4", type: ChevronDownIconComponent, isStandalone: true, selector: "wlcm-chevron-down-icon", ngImport: i0, template: "<svg\n  width=\"12px\"\n  height=\"7px\"\n  viewBox=\"0 0 12 7\"\n  version=\"1.1\"\n  xmlns=\"http://www.w3.org/2000/svg\"\n  xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n>\n  <g\n    id=\"4-Media-Library\"\n    stroke=\"none\"\n    stroke-width=\"1\"\n    fill=\"none\"\n    fill-rule=\"evenodd\"\n  >\n    <g id=\"4.1.0-Filter-by-type\" transform=\"translate(-303.000000, -73.000000)\">\n      <g id=\"Group-7\" transform=\"translate(45.000000, 64.000000)\">\n        <g id=\"Group\" transform=\"translate(258.000000, 6.000000)\">\n          <rect id=\"Rectangle\" x=\"0\" y=\"0\" width=\"12\" height=\"12\"></rect>\n          <polyline\n            id=\"Path\"\n            stroke=\"currentColor\"\n            stroke-width=\"2\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n            points=\"1 4 6 9 11 4\"\n          ></polyline>\n        </g>\n      </g>\n    </g>\n  </g>\n</svg>\n", styles: [":host{display:block}:host svg{display:block}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: ChevronDownIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.5", type: ChevronDownIconComponent, isStandalone: true, selector: "wlcm-chevron-down-icon", ngImport: i0, template: "<svg\n  width=\"12px\"\n  height=\"7px\"\n  viewBox=\"0 0 12 7\"\n  version=\"1.1\"\n  xmlns=\"http://www.w3.org/2000/svg\"\n  xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n>\n  <g\n    id=\"4-Media-Library\"\n    stroke=\"none\"\n    stroke-width=\"1\"\n    fill=\"none\"\n    fill-rule=\"evenodd\"\n  >\n    <g id=\"4.1.0-Filter-by-type\" transform=\"translate(-303.000000, -73.000000)\">\n      <g id=\"Group-7\" transform=\"translate(45.000000, 64.000000)\">\n        <g id=\"Group\" transform=\"translate(258.000000, 6.000000)\">\n          <rect id=\"Rectangle\" x=\"0\" y=\"0\" width=\"12\" height=\"12\"></rect>\n          <polyline\n            id=\"Path\"\n            stroke=\"currentColor\"\n            stroke-width=\"2\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n            points=\"1 4 6 9 11 4\"\n          ></polyline>\n        </g>\n      </g>\n    </g>\n  </g>\n</svg>\n", styles: [":host{display:block}:host svg{display:block}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: ChevronDownIconComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: ChevronDownIconComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'wlcm-chevron-down-icon', standalone: true, imports: [CommonModule], template: "<svg\n  width=\"12px\"\n  height=\"7px\"\n  viewBox=\"0 0 12 7\"\n  version=\"1.1\"\n  xmlns=\"http://www.w3.org/2000/svg\"\n  xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n>\n  <g\n    id=\"4-Media-Library\"\n    stroke=\"none\"\n    stroke-width=\"1\"\n    fill=\"none\"\n    fill-rule=\"evenodd\"\n  >\n    <g id=\"4.1.0-Filter-by-type\" transform=\"translate(-303.000000, -73.000000)\">\n      <g id=\"Group-7\" transform=\"translate(45.000000, 64.000000)\">\n        <g id=\"Group\" transform=\"translate(258.000000, 6.000000)\">\n          <rect id=\"Rectangle\" x=\"0\" y=\"0\" width=\"12\" height=\"12\"></rect>\n          <polyline\n            id=\"Path\"\n            stroke=\"currentColor\"\n            stroke-width=\"2\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n            points=\"1 4 6 9 11 4\"\n          ></polyline>\n        </g>\n      </g>\n    </g>\n  </g>\n</svg>\n", styles: [":host{display:block}:host svg{display:block}\n"] }]
+            args: [{ selector: 'wlcm-chevron-down-icon', imports: [], changeDetection: ChangeDetectionStrategy.OnPush, template: "<svg\n  width=\"12px\"\n  height=\"7px\"\n  viewBox=\"0 0 12 7\"\n  version=\"1.1\"\n  xmlns=\"http://www.w3.org/2000/svg\"\n  xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n>\n  <g\n    id=\"4-Media-Library\"\n    stroke=\"none\"\n    stroke-width=\"1\"\n    fill=\"none\"\n    fill-rule=\"evenodd\"\n  >\n    <g id=\"4.1.0-Filter-by-type\" transform=\"translate(-303.000000, -73.000000)\">\n      <g id=\"Group-7\" transform=\"translate(45.000000, 64.000000)\">\n        <g id=\"Group\" transform=\"translate(258.000000, 6.000000)\">\n          <rect id=\"Rectangle\" x=\"0\" y=\"0\" width=\"12\" height=\"12\"></rect>\n          <polyline\n            id=\"Path\"\n            stroke=\"currentColor\"\n            stroke-width=\"2\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n            points=\"1 4 6 9 11 4\"\n          ></polyline>\n        </g>\n      </g>\n    </g>\n  </g>\n</svg>\n", styles: [":host{display:block}:host svg{display:block}\n"] }]
         }] });
 
 class CalendarIconComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: CalendarIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.4", type: CalendarIconComponent, isStandalone: true, selector: "wlcm-calendar-icon", ngImport: i0, template: "<svg\n  width=\"16px\"\n  height=\"16px\"\n  viewBox=\"0 0 16 16\"\n  version=\"1.1\"\n  xmlns=\"http://www.w3.org/2000/svg\"\n  xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n>\n  <g\n    id=\"icon/date-grey\"\n    stroke=\"none\"\n    stroke-width=\"1\"\n    fill=\"none\"\n    fill-rule=\"evenodd\"\n  >\n    <rect id=\"Rectangle\" x=\"0\" y=\"0\" width=\"16\" height=\"16\"></rect>\n    <path\n      d=\"M11,0 C11.5522847,0 12,0.44771525 12,1 L14,1 C15.1045695,1 16,1.8954305 16,3 L16,14 C16,15.1045695 15.1045695,16 14,16 L2,16 C0.8954305,16 0,15.1045695 0,14 L0,3 C0,1.8954305 0.8954305,1 2,1 L4,1 C4,0.44771525 4.44771525,0 5,0 C5.55228475,0 6,0.44771525 6,1 L10,1 C10,0.44771525 10.4477153,0 11,0 Z M14,7 L2,7 L2,14 L14,14 L14,7 Z M4,3 L2,3 L2,5 L14,5 L14,3 L12,3 C12,3.55228475 11.5522847,4 11,4 C10.4477153,4 10,3.55228475 10,3 L6,3 C6,3.55228475 5.55228475,4 5,4 C4.44771525,4 4,3.55228475 4,3 Z\"\n      id=\"Combined-Shape\"\n      fill=\"#8E9498\"\n      fill-rule=\"nonzero\"\n    ></path>\n    <rect\n      id=\"Rectangle\"\n      fill=\"#8E9498\"\n      x=\"9\"\n      y=\"9\"\n      width=\"3\"\n      height=\"3\"\n      rx=\"1\"\n    ></rect>\n  </g>\n</svg>\n", styles: [":host{display:block;cursor:pointer}:host svg{display:block}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CalendarIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.5", type: CalendarIconComponent, isStandalone: true, selector: "wlcm-calendar-icon", ngImport: i0, template: "<svg\n  width=\"16px\"\n  height=\"16px\"\n  viewBox=\"0 0 16 16\"\n  version=\"1.1\"\n  xmlns=\"http://www.w3.org/2000/svg\"\n  xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n>\n  <g\n    id=\"icon/date-grey\"\n    stroke=\"none\"\n    stroke-width=\"1\"\n    fill=\"none\"\n    fill-rule=\"evenodd\"\n  >\n    <rect id=\"Rectangle\" x=\"0\" y=\"0\" width=\"16\" height=\"16\"></rect>\n    <path\n      d=\"M11,0 C11.5522847,0 12,0.44771525 12,1 L14,1 C15.1045695,1 16,1.8954305 16,3 L16,14 C16,15.1045695 15.1045695,16 14,16 L2,16 C0.8954305,16 0,15.1045695 0,14 L0,3 C0,1.8954305 0.8954305,1 2,1 L4,1 C4,0.44771525 4.44771525,0 5,0 C5.55228475,0 6,0.44771525 6,1 L10,1 C10,0.44771525 10.4477153,0 11,0 Z M14,7 L2,7 L2,14 L14,14 L14,7 Z M4,3 L2,3 L2,5 L14,5 L14,3 L12,3 C12,3.55228475 11.5522847,4 11,4 C10.4477153,4 10,3.55228475 10,3 L6,3 C6,3.55228475 5.55228475,4 5,4 C4.44771525,4 4,3.55228475 4,3 Z\"\n      id=\"Combined-Shape\"\n      fill=\"#8E9498\"\n      fill-rule=\"nonzero\"\n    ></path>\n    <rect\n      id=\"Rectangle\"\n      fill=\"#8E9498\"\n      x=\"9\"\n      y=\"9\"\n      width=\"3\"\n      height=\"3\"\n      rx=\"1\"\n    ></rect>\n  </g>\n</svg>\n", styles: [":host{display:block;cursor:pointer}:host svg{display:block}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: CalendarIconComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CalendarIconComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'wlcm-calendar-icon', standalone: true, imports: [CommonModule], template: "<svg\n  width=\"16px\"\n  height=\"16px\"\n  viewBox=\"0 0 16 16\"\n  version=\"1.1\"\n  xmlns=\"http://www.w3.org/2000/svg\"\n  xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n>\n  <g\n    id=\"icon/date-grey\"\n    stroke=\"none\"\n    stroke-width=\"1\"\n    fill=\"none\"\n    fill-rule=\"evenodd\"\n  >\n    <rect id=\"Rectangle\" x=\"0\" y=\"0\" width=\"16\" height=\"16\"></rect>\n    <path\n      d=\"M11,0 C11.5522847,0 12,0.44771525 12,1 L14,1 C15.1045695,1 16,1.8954305 16,3 L16,14 C16,15.1045695 15.1045695,16 14,16 L2,16 C0.8954305,16 0,15.1045695 0,14 L0,3 C0,1.8954305 0.8954305,1 2,1 L4,1 C4,0.44771525 4.44771525,0 5,0 C5.55228475,0 6,0.44771525 6,1 L10,1 C10,0.44771525 10.4477153,0 11,0 Z M14,7 L2,7 L2,14 L14,14 L14,7 Z M4,3 L2,3 L2,5 L14,5 L14,3 L12,3 C12,3.55228475 11.5522847,4 11,4 C10.4477153,4 10,3.55228475 10,3 L6,3 C6,3.55228475 5.55228475,4 5,4 C4.44771525,4 4,3.55228475 4,3 Z\"\n      id=\"Combined-Shape\"\n      fill=\"#8E9498\"\n      fill-rule=\"nonzero\"\n    ></path>\n    <rect\n      id=\"Rectangle\"\n      fill=\"#8E9498\"\n      x=\"9\"\n      y=\"9\"\n      width=\"3\"\n      height=\"3\"\n      rx=\"1\"\n    ></rect>\n  </g>\n</svg>\n", styles: [":host{display:block;cursor:pointer}:host svg{display:block}\n"] }]
+            args: [{ selector: 'wlcm-calendar-icon', imports: [], changeDetection: ChangeDetectionStrategy.OnPush, template: "<svg\n  width=\"16px\"\n  height=\"16px\"\n  viewBox=\"0 0 16 16\"\n  version=\"1.1\"\n  xmlns=\"http://www.w3.org/2000/svg\"\n  xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n>\n  <g\n    id=\"icon/date-grey\"\n    stroke=\"none\"\n    stroke-width=\"1\"\n    fill=\"none\"\n    fill-rule=\"evenodd\"\n  >\n    <rect id=\"Rectangle\" x=\"0\" y=\"0\" width=\"16\" height=\"16\"></rect>\n    <path\n      d=\"M11,0 C11.5522847,0 12,0.44771525 12,1 L14,1 C15.1045695,1 16,1.8954305 16,3 L16,14 C16,15.1045695 15.1045695,16 14,16 L2,16 C0.8954305,16 0,15.1045695 0,14 L0,3 C0,1.8954305 0.8954305,1 2,1 L4,1 C4,0.44771525 4.44771525,0 5,0 C5.55228475,0 6,0.44771525 6,1 L10,1 C10,0.44771525 10.4477153,0 11,0 Z M14,7 L2,7 L2,14 L14,14 L14,7 Z M4,3 L2,3 L2,5 L14,5 L14,3 L12,3 C12,3.55228475 11.5522847,4 11,4 C10.4477153,4 10,3.55228475 10,3 L6,3 C6,3.55228475 5.55228475,4 5,4 C4.44771525,4 4,3.55228475 4,3 Z\"\n      id=\"Combined-Shape\"\n      fill=\"#8E9498\"\n      fill-rule=\"nonzero\"\n    ></path>\n    <rect\n      id=\"Rectangle\"\n      fill=\"#8E9498\"\n      x=\"9\"\n      y=\"9\"\n      width=\"3\"\n      height=\"3\"\n      rx=\"1\"\n    ></rect>\n  </g>\n</svg>\n", styles: [":host{display:block;cursor:pointer}:host svg{display:block}\n"] }]
         }] });
 
 class SearchIconComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: SearchIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.4", type: SearchIconComponent, isStandalone: true, selector: "wlcm-search-icon", ngImport: i0, template: "<svg\n  width=\"16px\"\n  height=\"16px\"\n  viewBox=\"0 0 16 16\"\n  version=\"1.1\"\n  xmlns=\"http://www.w3.org/2000/svg\"\n  xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n  style=\"display: block\"\n>\n  <g\n    id=\"icons/search\"\n    stroke=\"none\"\n    stroke-width=\"1\"\n    fill=\"none\"\n    fill-rule=\"evenodd\"\n  >\n    <rect id=\"Rectangle\" x=\"0\" y=\"0\" width=\"16\" height=\"16\"></rect>\n    <path\n      d=\"M7,0 C10.8659932,0 14,3.13400675 14,7 C14,8.57234957 13.4815869,10.0236173 12.6063605,11.1922034 L15.1213203,13.7071068 C15.5118446,14.0976311 15.5118446,14.7307961 15.1213203,15.1213203 C14.7307961,15.5118446 14.0976311,15.5118446 13.7071068,15.1213203 L11.1922034,12.6063605 C10.0236173,13.4815869 8.57234957,14 7,14 C3.13400675,14 0,10.8659932 0,7 C0,3.13400675 3.13400675,0 7,0 Z M7,2 C4.23857625,2 2,4.23857625 2,7 C2,9.76142375 4.23857625,12 7,12 C9.76142375,12 12,9.76142375 12,7 C12,4.23857625 9.76142375,2 7,2 Z\"\n      id=\"Combined-Shape\"\n      fill=\"currentColor\"\n      fill-rule=\"nonzero\"\n    ></path>\n  </g>\n</svg>\n", styles: [":host{display:block;color:#5a5a5a}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: SearchIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.5", type: SearchIconComponent, isStandalone: true, selector: "wlcm-search-icon", ngImport: i0, template: "<svg\n  width=\"16px\"\n  height=\"16px\"\n  viewBox=\"0 0 16 16\"\n  version=\"1.1\"\n  xmlns=\"http://www.w3.org/2000/svg\"\n  xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n  style=\"display: block\"\n>\n  <g\n    id=\"icons/search\"\n    stroke=\"none\"\n    stroke-width=\"1\"\n    fill=\"none\"\n    fill-rule=\"evenodd\"\n  >\n    <rect id=\"Rectangle\" x=\"0\" y=\"0\" width=\"16\" height=\"16\"></rect>\n    <path\n      d=\"M7,0 C10.8659932,0 14,3.13400675 14,7 C14,8.57234957 13.4815869,10.0236173 12.6063605,11.1922034 L15.1213203,13.7071068 C15.5118446,14.0976311 15.5118446,14.7307961 15.1213203,15.1213203 C14.7307961,15.5118446 14.0976311,15.5118446 13.7071068,15.1213203 L11.1922034,12.6063605 C10.0236173,13.4815869 8.57234957,14 7,14 C3.13400675,14 0,10.8659932 0,7 C0,3.13400675 3.13400675,0 7,0 Z M7,2 C4.23857625,2 2,4.23857625 2,7 C2,9.76142375 4.23857625,12 7,12 C9.76142375,12 12,9.76142375 12,7 C12,4.23857625 9.76142375,2 7,2 Z\"\n      id=\"Combined-Shape\"\n      fill=\"currentColor\"\n      fill-rule=\"nonzero\"\n    ></path>\n  </g>\n</svg>\n", styles: [":host{display:block;color:#5a5a5a}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: SearchIconComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: SearchIconComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'wlcm-search-icon', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<svg\n  width=\"16px\"\n  height=\"16px\"\n  viewBox=\"0 0 16 16\"\n  version=\"1.1\"\n  xmlns=\"http://www.w3.org/2000/svg\"\n  xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n  style=\"display: block\"\n>\n  <g\n    id=\"icons/search\"\n    stroke=\"none\"\n    stroke-width=\"1\"\n    fill=\"none\"\n    fill-rule=\"evenodd\"\n  >\n    <rect id=\"Rectangle\" x=\"0\" y=\"0\" width=\"16\" height=\"16\"></rect>\n    <path\n      d=\"M7,0 C10.8659932,0 14,3.13400675 14,7 C14,8.57234957 13.4815869,10.0236173 12.6063605,11.1922034 L15.1213203,13.7071068 C15.5118446,14.0976311 15.5118446,14.7307961 15.1213203,15.1213203 C14.7307961,15.5118446 14.0976311,15.5118446 13.7071068,15.1213203 L11.1922034,12.6063605 C10.0236173,13.4815869 8.57234957,14 7,14 C3.13400675,14 0,10.8659932 0,7 C0,3.13400675 3.13400675,0 7,0 Z M7,2 C4.23857625,2 2,4.23857625 2,7 C2,9.76142375 4.23857625,12 7,12 C9.76142375,12 12,9.76142375 12,7 C12,4.23857625 9.76142375,2 7,2 Z\"\n      id=\"Combined-Shape\"\n      fill=\"currentColor\"\n      fill-rule=\"nonzero\"\n    ></path>\n  </g>\n</svg>\n", styles: [":host{display:block;color:#5a5a5a}\n"] }]
+            args: [{ selector: 'wlcm-search-icon', imports: [], changeDetection: ChangeDetectionStrategy.OnPush, template: "<svg\n  width=\"16px\"\n  height=\"16px\"\n  viewBox=\"0 0 16 16\"\n  version=\"1.1\"\n  xmlns=\"http://www.w3.org/2000/svg\"\n  xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n  style=\"display: block\"\n>\n  <g\n    id=\"icons/search\"\n    stroke=\"none\"\n    stroke-width=\"1\"\n    fill=\"none\"\n    fill-rule=\"evenodd\"\n  >\n    <rect id=\"Rectangle\" x=\"0\" y=\"0\" width=\"16\" height=\"16\"></rect>\n    <path\n      d=\"M7,0 C10.8659932,0 14,3.13400675 14,7 C14,8.57234957 13.4815869,10.0236173 12.6063605,11.1922034 L15.1213203,13.7071068 C15.5118446,14.0976311 15.5118446,14.7307961 15.1213203,15.1213203 C14.7307961,15.5118446 14.0976311,15.5118446 13.7071068,15.1213203 L11.1922034,12.6063605 C10.0236173,13.4815869 8.57234957,14 7,14 C3.13400675,14 0,10.8659932 0,7 C0,3.13400675 3.13400675,0 7,0 Z M7,2 C4.23857625,2 2,4.23857625 2,7 C2,9.76142375 4.23857625,12 7,12 C9.76142375,12 12,9.76142375 12,7 C12,4.23857625 9.76142375,2 7,2 Z\"\n      id=\"Combined-Shape\"\n      fill=\"currentColor\"\n      fill-rule=\"nonzero\"\n    ></path>\n  </g>\n</svg>\n", styles: [":host{display:block;color:#5a5a5a}\n"] }]
         }] });
 
 const DEFAULT_WLCM_ICONS = {
@@ -107,51 +105,41 @@ const WLCM_ICONS = new InjectionToken('WLCM_ICONS', {
 });
 
 class ScrollDetectionApi {
-    constructor(zone) {
-        this.zone = zone;
-    }
     onScrolledDown(element, threshold = 0.8) {
         let lastScrollHeight = 0, scrollHeightChanged = false;
-        return new Observable((subscriber) => {
-            const destroy$ = new Subject();
-            this.zone.runOutsideAngular(() => {
-                fromEvent(element, 'scroll')
-                    .pipe(takeUntil(destroy$), filter(() => {
-                    const currentScrollHeight = element.scrollHeight;
-                    if (currentScrollHeight !== lastScrollHeight) {
-                        lastScrollHeight = currentScrollHeight;
-                        scrollHeightChanged = true;
-                    }
-                    const scrolledRatio = (element.scrollTop + element.clientHeight) / currentScrollHeight;
-                    if (scrollHeightChanged && scrolledRatio >= threshold) {
-                        scrollHeightChanged = false;
-                        return true;
-                    }
-                    return false;
-                }))
-                    .subscribe((event) => this.zone.run(() => subscriber.next(event)));
-            });
-            return () => destroy$.next();
-        });
+        return fromEvent(element, 'scroll', { passive: true }).pipe(filter(() => {
+            const currentScrollHeight = element.scrollHeight;
+            if (currentScrollHeight !== lastScrollHeight) {
+                lastScrollHeight = currentScrollHeight;
+                scrollHeightChanged = true;
+            }
+            const scrolledRatio = (element.scrollTop + element.clientHeight) / currentScrollHeight;
+            if (scrollHeightChanged && scrolledRatio >= threshold) {
+                scrollHeightChanged = false;
+                return true;
+            }
+            return false;
+        }));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: ScrollDetectionApi, deps: [{ token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: ScrollDetectionApi, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: ScrollDetectionApi, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: ScrollDetectionApi, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: ScrollDetectionApi, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: ScrollDetectionApi, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
-        }], ctorParameters: () => [{ type: i0.NgZone }] });
-
-let WlcmIconDirective = class WlcmIconDirective {
-    constructor(icons, viewContainer) {
-        this.icons = icons;
-        this.viewContainer = viewContainer;
-        this.name = input.required({ alias: 'wlcmIcon' });
-        this.stopPropagation = input(false, { alias: 'wlcmIconStopPropagation' });
+        }] });
+
+class WlcmIconDirective {
+    constructor() {
+        this.icons = inject(WLCM_ICONS);
+        this.viewContainer = inject(ViewContainerRef);
+        this.destroyRef = inject(DestroyRef);
+        this.name = input.required({ ...(ngDevMode ? { debugName: "name" } : /* istanbul ignore next */ {}), alias: 'wlcmIcon' });
+        this.stopPropagation = input(false, { ...(ngDevMode ? { debugName: "stopPropagation" } : /* istanbul ignore next */ {}), alias: 'wlcmIconStopPropagation' });
         this.clicked = output({ alias: 'wlcmIconClicked' });
         this.handleClick = (ref) => {
             fromEvent(ref.location.nativeElement, 'click', (event) => event)
-                .pipe(untilDestroyed(this))
+                .pipe(takeUntilDestroyed(this.destroyRef))
                 .subscribe((event) => {
                 if (this.stopPropagation())
                     event.stopPropagation();
@@ -166,40 +154,32 @@ let WlcmIconDirective = class WlcmIconDirective {
             this.handleClick(ref);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: WlcmIconDirective, deps: [{ token: WLCM_ICONS }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.1.4", type: WlcmIconDirective, isStandalone: true, selector: "[wlcmIcon]", inputs: { name: { classPropertyName: "name", publicName: "wlcmIcon", isSignal: true, isRequired: true, transformFunction: null }, stopPropagation: { classPropertyName: "stopPropagation", publicName: "wlcmIconStopPropagation", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clicked: "wlcmIconClicked" }, ngImport: i0 }); }
-};
-WlcmIconDirective = __decorate([
-    UntilDestroy(),
-    __metadata("design:paramtypes", [Object, ViewContainerRef])
-], WlcmIconDirective);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: WlcmIconDirective, decorators: [{
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: WlcmIconDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.5", type: WlcmIconDirective, isStandalone: true, selector: "[wlcmIcon]", inputs: { name: { classPropertyName: "name", publicName: "wlcmIcon", isSignal: true, isRequired: true, transformFunction: null }, stopPropagation: { classPropertyName: "stopPropagation", publicName: "wlcmIconStopPropagation", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clicked: "wlcmIconClicked" }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: WlcmIconDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[wlcmIcon]',
-                    standalone: true,
                 }]
-        }], ctorParameters: () => [{ type: undefined, decorators: [{
-                    type: Inject,
-                    args: [WLCM_ICONS]
-                }] }, { type: i0.ViewContainerRef }] });
+        }], propDecorators: { name: [{ type: i0.Input, args: [{ isSignal: true, alias: "wlcmIcon", required: true }] }], stopPropagation: [{ type: i0.Input, args: [{ isSignal: true, alias: "wlcmIconStopPropagation", required: false }] }], clicked: [{ type: i0.Output, args: ["wlcmIconClicked"] }] } });
 
 class CloseIconComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: CloseIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.4", type: CloseIconComponent, isStandalone: true, selector: "wlcm-close-icon", ngImport: i0, template: "<svg\n  width=\"16px\"\n  height=\"16px\"\n  viewBox=\"0 0 16 16\"\n  version=\"1.1\"\n  xmlns=\"http://www.w3.org/2000/svg\"\n  xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n>\n  <g\n    id=\"2-User-Management\"\n    stroke=\"none\"\n    stroke-width=\"1\"\n    fill=\"none\"\n    fill-rule=\"evenodd\"\n  >\n    <g\n      id=\"2.0.1-Export-users-two-filters\"\n      transform=\"translate(-310.000000, -54.000000)\"\n    >\n      <g id=\"icons/close\" transform=\"translate(310.000000, 54.000000)\">\n        <rect\n          id=\"Rectangle\"\n          fill=\"#EDF0F3\"\n          x=\"0\"\n          y=\"0\"\n          width=\"16\"\n          height=\"16\"\n          rx=\"4\"\n        ></rect>\n        <path\n          d=\"M12,4 L4,12 M4,4 L12,12\"\n          id=\"Combined-Shape\"\n          stroke=\"#4A5056\"\n          stroke-width=\"2\"\n          stroke-linecap=\"round\"\n        ></path>\n      </g>\n    </g>\n  </g>\n</svg>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CloseIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.5", type: CloseIconComponent, isStandalone: true, selector: "wlcm-close-icon", ngImport: i0, template: "<svg\n  width=\"16px\"\n  height=\"16px\"\n  viewBox=\"0 0 16 16\"\n  version=\"1.1\"\n  xmlns=\"http://www.w3.org/2000/svg\"\n  xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n>\n  <g\n    id=\"2-User-Management\"\n    stroke=\"none\"\n    stroke-width=\"1\"\n    fill=\"none\"\n    fill-rule=\"evenodd\"\n  >\n    <g\n      id=\"2.0.1-Export-users-two-filters\"\n      transform=\"translate(-310.000000, -54.000000)\"\n    >\n      <g id=\"icons/close\" transform=\"translate(310.000000, 54.000000)\">\n        <rect\n          id=\"Rectangle\"\n          fill=\"#EDF0F3\"\n          x=\"0\"\n          y=\"0\"\n          width=\"16\"\n          height=\"16\"\n          rx=\"4\"\n        ></rect>\n        <path\n          d=\"M12,4 L4,12 M4,4 L12,12\"\n          id=\"Combined-Shape\"\n          stroke=\"#4A5056\"\n          stroke-width=\"2\"\n          stroke-linecap=\"round\"\n        ></path>\n      </g>\n    </g>\n  </g>\n</svg>\n", styles: [""], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: CloseIconComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CloseIconComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'wlcm-close-icon', standalone: true, imports: [CommonModule], template: "<svg\n  width=\"16px\"\n  height=\"16px\"\n  viewBox=\"0 0 16 16\"\n  version=\"1.1\"\n  xmlns=\"http://www.w3.org/2000/svg\"\n  xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n>\n  <g\n    id=\"2-User-Management\"\n    stroke=\"none\"\n    stroke-width=\"1\"\n    fill=\"none\"\n    fill-rule=\"evenodd\"\n  >\n    <g\n      id=\"2.0.1-Export-users-two-filters\"\n      transform=\"translate(-310.000000, -54.000000)\"\n    >\n      <g id=\"icons/close\" transform=\"translate(310.000000, 54.000000)\">\n        <rect\n          id=\"Rectangle\"\n          fill=\"#EDF0F3\"\n          x=\"0\"\n          y=\"0\"\n          width=\"16\"\n          height=\"16\"\n          rx=\"4\"\n        ></rect>\n        <path\n          d=\"M12,4 L4,12 M4,4 L12,12\"\n          id=\"Combined-Shape\"\n          stroke=\"#4A5056\"\n          stroke-width=\"2\"\n          stroke-linecap=\"round\"\n        ></path>\n      </g>\n    </g>\n  </g>\n</svg>\n" }]
+            args: [{ selector: 'wlcm-close-icon', imports: [], changeDetection: ChangeDetectionStrategy.OnPush, template: "<svg\n  width=\"16px\"\n  height=\"16px\"\n  viewBox=\"0 0 16 16\"\n  version=\"1.1\"\n  xmlns=\"http://www.w3.org/2000/svg\"\n  xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n>\n  <g\n    id=\"2-User-Management\"\n    stroke=\"none\"\n    stroke-width=\"1\"\n    fill=\"none\"\n    fill-rule=\"evenodd\"\n  >\n    <g\n      id=\"2.0.1-Export-users-two-filters\"\n      transform=\"translate(-310.000000, -54.000000)\"\n    >\n      <g id=\"icons/close\" transform=\"translate(310.000000, 54.000000)\">\n        <rect\n          id=\"Rectangle\"\n          fill=\"#EDF0F3\"\n          x=\"0\"\n          y=\"0\"\n          width=\"16\"\n          height=\"16\"\n          rx=\"4\"\n        ></rect>\n        <path\n          d=\"M12,4 L4,12 M4,4 L12,12\"\n          id=\"Combined-Shape\"\n          stroke=\"#4A5056\"\n          stroke-width=\"2\"\n          stroke-linecap=\"round\"\n        ></path>\n      </g>\n    </g>\n  </g>\n</svg>\n" }]
         }] });
 
 class WlcmDefaultLoaderComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: WlcmDefaultLoaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.4", type: WlcmDefaultLoaderComponent, isStandalone: true, selector: "wlcm-default-loader", host: { classAttribute: "wlcm-default-loader" }, ngImport: i0, template: "<div class=\"spinner center\">\n  <div class=\"spinner-blade\"></div>\n  <div class=\"spinner-blade\"></div>\n  <div class=\"spinner-blade\"></div>\n  <div class=\"spinner-blade\"></div>\n  <div class=\"spinner-blade\"></div>\n  <div class=\"spinner-blade\"></div>\n  <div class=\"spinner-blade\"></div>\n  <div class=\"spinner-blade\"></div>\n  <div class=\"spinner-blade\"></div>\n  <div class=\"spinner-blade\"></div>\n  <div class=\"spinner-blade\"></div>\n  <div class=\"spinner-blade\"></div>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: WlcmDefaultLoaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.5", type: WlcmDefaultLoaderComponent, isStandalone: true, selector: "wlcm-default-loader", host: { classAttribute: "wlcm-default-loader" }, ngImport: i0, template: "<div class=\"spinner center\">\n  <div class=\"spinner-blade\"></div>\n  <div class=\"spinner-blade\"></div>\n  <div class=\"spinner-blade\"></div>\n  <div class=\"spinner-blade\"></div>\n  <div class=\"spinner-blade\"></div>\n  <div class=\"spinner-blade\"></div>\n  <div class=\"spinner-blade\"></div>\n  <div class=\"spinner-blade\"></div>\n  <div class=\"spinner-blade\"></div>\n  <div class=\"spinner-blade\"></div>\n  <div class=\"spinner-blade\"></div>\n  <div class=\"spinner-blade\"></div>\n</div>\n", styles: [""], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: WlcmDefaultLoaderComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: WlcmDefaultLoaderComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'wlcm-default-loader', host: { class: 'wlcm-default-loader' }, standalone: true, imports: [CommonModule], template: "<div class=\"spinner center\">\n  <div class=\"spinner-blade\"></div>\n  <div class=\"spinner-blade\"></div>\n  <div class=\"spinner-blade\"></div>\n  <div class=\"spinner-blade\"></div>\n  <div class=\"spinner-blade\"></div>\n  <div class=\"spinner-blade\"></div>\n  <div class=\"spinner-blade\"></div>\n  <div class=\"spinner-blade\"></div>\n  <div class=\"spinner-blade\"></div>\n  <div class=\"spinner-blade\"></div>\n  <div class=\"spinner-blade\"></div>\n  <div class=\"spinner-blade\"></div>\n</div>\n" }]
+            args: [{ selector: 'wlcm-default-loader', host: { class: 'wlcm-default-loader' }, imports: [], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"spinner center\">\n  <div class=\"spinner-blade\"></div>\n  <div class=\"spinner-blade\"></div>\n  <div class=\"spinner-blade\"></div>\n  <div class=\"spinner-blade\"></div>\n  <div class=\"spinner-blade\"></div>\n  <div class=\"spinner-blade\"></div>\n  <div class=\"spinner-blade\"></div>\n  <div class=\"spinner-blade\"></div>\n  <div class=\"spinner-blade\"></div>\n  <div class=\"spinner-blade\"></div>\n  <div class=\"spinner-blade\"></div>\n  <div class=\"spinner-blade\"></div>\n</div>\n" }]
         }] });
 
 const WLCM_LOADER_COMPONENT = new InjectionToken('WLCM_LOADER_COMPONENT', {
@@ -208,32 +188,36 @@ const WLCM_LOADER_COMPONENT = new InjectionToken('WLCM_LOADER_COMPONENT', {
 });
 
 class WlcmLoaderComponent {
-    get isHidden() {
-        return this.hidden();
-    }
-    constructor(loaderComponent) {
-        this.loaderComponent = loaderComponent;
-        this.hidden = input(false);
-        this.container = viewChild('container', { read: ViewContainerRef });
+    constructor() {
+        this.loaderComponent = inject(WLCM_LOADER_COMPONENT);
+        this.hidden = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "hidden" }] : /* istanbul ignore next */ []));
+        /** Loader diameter. A bare number is treated as px; a string is used verbatim (e.g. '20px', '1.5rem', '1.3em'). */
+        this.diameter = input(28, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "diameter" }] : /* istanbul ignore next */ []));
+        this.size = computed(() => {
+            const value = this.diameter();
+            return typeof value === 'number' ? `${value}px` : value;
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+        this.container = viewChild('container', { ...(ngDevMode ? { debugName: "container" } : /* istanbul ignore next */ {}), read: ViewContainerRef });
         effect(() => {
             if (!this.container())
                 return;
             this.container().createComponent(this.loaderComponent);
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: WlcmLoaderComponent, deps: [{ token: WLCM_LOADER_COMPONENT }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.1.4", type: WlcmLoaderComponent, isStandalone: true, selector: "wlcm-loader", inputs: { hidden: { classPropertyName: "hidden", publicName: "hidden", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.wlcm-loader-hidden": "this.isHidden" }, classAttribute: "wlcm-loader" }, viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true, read: ViewContainerRef, isSignal: true }], ngImport: i0, template: "<div class=\"wlcm-loader-container\">\n  <ng-container #container></ng-container>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: WlcmLoaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.0.5", type: WlcmLoaderComponent, isStandalone: true, selector: "wlcm-loader", inputs: { hidden: { classPropertyName: "hidden", publicName: "hidden", isSignal: true, isRequired: false, transformFunction: null }, diameter: { classPropertyName: "diameter", publicName: "diameter", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.wlcm-loader-hidden": "hidden()", "style.--wlcm-loader-size": "size()" }, classAttribute: "wlcm-loader" }, viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true, read: ViewContainerRef, isSignal: true }], ngImport: i0, template: "<div class=\"wlcm-loader-container\">\n  <ng-container #container></ng-container>\n</div>\n", styles: [""], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: WlcmLoaderComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: WlcmLoaderComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'wlcm-loader', host: { class: 'wlcm-loader' }, standalone: true, imports: [CommonModule], template: "<div class=\"wlcm-loader-container\">\n  <ng-container #container></ng-container>\n</div>\n" }]
-        }], ctorParameters: () => [{ type: i0.Type, decorators: [{
-                    type: Inject,
-                    args: [WLCM_LOADER_COMPONENT]
-                }] }], propDecorators: { isHidden: [{
-                type: HostBinding,
-                args: ['class.wlcm-loader-hidden']
-            }] } });
+            args: [{ selector: 'wlcm-loader', host: {
+                        class: 'wlcm-loader',
+                        '[class.wlcm-loader-hidden]': 'hidden()',
+                        '[style.--wlcm-loader-size]': 'size()',
+                    }, imports: [], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"wlcm-loader-container\">\n  <ng-container #container></ng-container>\n</div>\n" }]
+        }], ctorParameters: () => [], propDecorators: { hidden: [{ type: i0.Input, args: [{ isSignal: true, alias: "hidden", required: false }] }], diameter: [{ type: i0.Input, args: [{ isSignal: true, alias: "diameter", required: false }] }], container: [{ type: i0.ViewChild, args: ['container', { ...{ read: ViewContainerRef }, isSignal: true }] }] } });
 
 /**
  * Generated bundle index. Do not edit.