@wlcm/angular 19.2.6 → 22.0.1

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

@@ -1,32 +1,28 @@
 import * as i0 from '@angular/core';
-import { ChangeDetectionStrategy, Component, Injectable, InjectionToken, inject, Directive, Inject, Pipe, HostListener, forwardRef, ChangeDetectorRef, HostBinding, ViewChild, ContentChild, Input, Optional, EventEmitter, NgZone, Output, Host, input, output, runInInjectionContext, ElementRef, Injector, contentChildren, computed, signal, effect, viewChildren, NgModule } from '@angular/core';
-import { __decorate, __metadata } from 'tslib';
+import { ChangeDetectionStrategy, Component, Injectable, InjectionToken, inject, ElementRef, Directive, ChangeDetectorRef, Pipe, HostListener, input, contentChild, viewChild, DestroyRef, forwardRef, output, linkedSignal, signal, Injector, runInInjectionContext, contentChildren, computed, effect, viewChildren, NgModule } from '@angular/core';
+import { takeUntilDestroyed, toObservable, outputToObservable } from '@angular/core/rxjs-interop';
 import * as i3 from '@angular/forms';
-import { Validators, NgControl, ControlContainer, FormControl, ReactiveFormsModule, NG_VALUE_ACCESSOR, NG_VALIDATORS } from '@angular/forms';
-import * as i1 from '@angular/common';
-import { CommonModule } from '@angular/common';
+import { NgControl, ControlContainer, Validators, FormControl, ReactiveFormsModule, NG_VALUE_ACCESSOR, NG_VALIDATORS } from '@angular/forms';
 import { Subject, Observable, takeUntil, merge, fromEvent, observeOn, asyncScheduler, BehaviorSubject, EMPTY, switchMap, first, take, tap, concatMap, map, filter, timer, of } from 'rxjs';
-import * as i1$2 from '@wlcm/angular/core';
 import { WlcmAutocompleteOption, DEFAULT_QUERY_PARAMS, WlcmIconName, WlcmIconDirective, WlcmLoaderComponent, ScrollDetectionApi } from '@wlcm/angular/core';
-import { untilDestroyed, UntilDestroy } from '@ngneat/until-destroy';
-import * as i4 from '@angular/material/select';
-import { MatOption, MatSelectModule, MatSelect, MAT_SELECT_CONFIG } from '@angular/material/select';
+import * as i1 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import * as i3$1 from '@angular/material/select';
+import { MatSelect, MatOption, MatSelectModule, MAT_SELECT_CONFIG } from '@angular/material/select';
 import * as i2 from '@angular/material/autocomplete';
-import { MatAutocomplete, MatAutocompleteOrigin, MatAutocompleteModule, MatAutocompleteTrigger, MAT_AUTOCOMPLETE_DEFAULT_OPTIONS } from '@angular/material/autocomplete';
-import { RxLet } from '@rx-angular/template/let';
+import { MatAutocomplete, MatAutocompleteTrigger, MatAutocompleteOrigin, MatAutocompleteModule, MAT_AUTOCOMPLETE_DEFAULT_OPTIONS } from '@angular/material/autocomplete';
 import { cloneDeep, mergeWith } from 'lodash-es';
 import * as i1$1 from '@angular/material/checkbox';
 import { MatCheckboxModule } from '@angular/material/checkbox';
-import { toObservable } from '@angular/core/rxjs-interop';
 import { MatRadioModule, MAT_RADIO_DEFAULT_OPTIONS } from '@angular/material/radio';
 
 class WlcmErrorComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: WlcmErrorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.9", type: WlcmErrorComponent, isStandalone: true, selector: "wlcm-error", host: { classAttribute: "wlcm-error" }, ngImport: i0, template: "<ng-content></ng-content>\n", styles: [""], 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: WlcmErrorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.5", type: WlcmErrorComponent, isStandalone: true, selector: "wlcm-error", host: { classAttribute: "wlcm-error" }, ngImport: i0, template: "<ng-content></ng-content>\n", styles: [""], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: WlcmErrorComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: WlcmErrorComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'wlcm-error', standalone: true, imports: [CommonModule], host: { class: 'wlcm-error' }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content></ng-content>\n" }]
+            args: [{ selector: 'wlcm-error', imports: [], host: { class: 'wlcm-error' }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content></ng-content>\n" }]
         }] });
 
 class FormStateHandlerService {
@@ -37,10 +33,10 @@ class FormStateHandlerService {
     updateFormState() {
         this._stateChanges$.next();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: FormStateHandlerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: FormStateHandlerService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: FormStateHandlerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: FormStateHandlerService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: FormStateHandlerService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: FormStateHandlerService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }] });
@@ -98,17 +94,17 @@ class WlcmDefaultPlacesApi {
     get autocompleteService() {
         return this._autocompleteService;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: WlcmDefaultPlacesApi, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: WlcmDefaultPlacesApi }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: WlcmDefaultPlacesApi, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: WlcmDefaultPlacesApi }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: WlcmDefaultPlacesApi, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: WlcmDefaultPlacesApi, decorators: [{
             type: Injectable
         }], ctorParameters: () => [] });
 class WlcmPlacesApi {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: WlcmPlacesApi, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: WlcmPlacesApi, providedIn: 'root', useClass: WlcmDefaultPlacesApi }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: WlcmPlacesApi, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: WlcmPlacesApi, providedIn: 'root', useClass: WlcmDefaultPlacesApi }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: WlcmPlacesApi, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: WlcmPlacesApi, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -128,25 +124,24 @@ const WLCM_FORM_CONTROL_PROVIDER = {
 };
 
 class WlcmFormFieldCustomContainerDirective {
-    constructor(elementRef) {
-        this.elementRef = elementRef;
+    constructor() {
+        this.elementRef = inject((ElementRef));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: WlcmFormFieldCustomContainerDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.9", type: WlcmFormFieldCustomContainerDirective, isStandalone: true, selector: "[wlcmFormFieldCustomContainer]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: WlcmFormFieldCustomContainerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.5", type: WlcmFormFieldCustomContainerDirective, isStandalone: true, selector: "[wlcmFormFieldCustomContainer]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: WlcmFormFieldCustomContainerDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: WlcmFormFieldCustomContainerDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[wlcmFormFieldCustomContainer]',
-                    standalone: true,
                 }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }] });
+        }] });
 
 class ErrorsMapperPipe {
-    constructor(changeDetectorRef, errors, priorityErrors) {
-        this.changeDetectorRef = changeDetectorRef;
-        this.errors = errors;
-        this.priorityErrors = priorityErrors;
+    constructor() {
+        this.changeDetectorRef = inject(ChangeDetectorRef);
+        this.errors = inject(WLCM_ERRORS);
+        this.priorityErrors = inject(WLCM_PRIORITY_ERRORS);
         this.destroy$ = new Subject();
         this.currentError = null;
     }
@@ -173,23 +168,16 @@ class ErrorsMapperPipe {
             this.changeDetectorRef.markForCheck();
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: ErrorsMapperPipe, deps: [{ token: i0.ChangeDetectorRef }, { token: WLCM_ERRORS }, { token: WLCM_PRIORITY_ERRORS }], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.2.9", ngImport: i0, type: ErrorsMapperPipe, isStandalone: true, name: "errorsMapper", pure: false }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: ErrorsMapperPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.0.5", ngImport: i0, type: ErrorsMapperPipe, isStandalone: true, name: "errorsMapper", pure: false }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: ErrorsMapperPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: ErrorsMapperPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'errorsMapper',
-                    standalone: true,
                     pure: false,
                 }]
-        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: undefined, decorators: [{
-                    type: Inject,
-                    args: [WLCM_ERRORS]
-                }] }, { type: Set, decorators: [{
-                    type: Inject,
-                    args: [WLCM_PRIORITY_ERRORS]
-                }] }] });
+        }] });
 
 class WlcmFormFieldPrefixDirective {
     constructor() {
@@ -197,14 +185,13 @@ class WlcmFormFieldPrefixDirective {
             event.stopPropagation();
         };
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: WlcmFormFieldPrefixDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.9", type: WlcmFormFieldPrefixDirective, isStandalone: true, selector: "[wlcmFormFieldPrefix]", host: { listeners: { "click": "handlerClick($event)" } }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: WlcmFormFieldPrefixDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.5", type: WlcmFormFieldPrefixDirective, isStandalone: true, selector: "[wlcmFormFieldPrefix]", host: { listeners: { "click": "handlerClick($event)" } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: WlcmFormFieldPrefixDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: WlcmFormFieldPrefixDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[wlcmFormFieldPrefix]',
-                    standalone: true,
                 }]
         }], propDecorators: { handlerClick: [{
                 type: HostListener,
@@ -212,18 +199,36 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.9", ngImpor
             }] } });
 
 class WlcmFormFieldSuffixDirective {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: WlcmFormFieldSuffixDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.9", type: WlcmFormFieldSuffixDirective, isStandalone: true, selector: "[wlcmFormFieldSuffix]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: WlcmFormFieldSuffixDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.5", type: WlcmFormFieldSuffixDirective, isStandalone: true, selector: "[wlcmFormFieldSuffix]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: WlcmFormFieldSuffixDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: WlcmFormFieldSuffixDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[wlcmFormFieldSuffix]',
-                    standalone: true,
                 }]
         }] });
 
-let WlcmFormFieldComponent = class WlcmFormFieldComponent {
+class WlcmFormFieldComponent {
+    constructor() {
+        this.displayErrorMessages = input(true, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "displayErrorMessages" }] : /* istanbul ignore next */ []));
+        this.ngControl = contentChild(NgControl, { ...(ngDevMode ? { debugName: "ngControl" } : /* istanbul ignore next */ {}), descendants: true });
+        this.controlContainer = contentChild(ControlContainer, { ...(ngDevMode ? { debugName: "controlContainer" } : /* istanbul ignore next */ {}), descendants: true });
+        this._inputRef = contentChild(WLCM_INPUT, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "_inputRef" }] : /* istanbul ignore next */ []));
+        this.prefix = contentChild(WlcmFormFieldPrefixDirective, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "prefix" }] : /* istanbul ignore next */ []));
+        this.suffix = contentChild(WlcmFormFieldSuffixDirective, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "suffix" }] : /* istanbul ignore next */ []));
+        this.customContainer = contentChild(WlcmFormFieldCustomContainerDirective, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "customContainer" }] : /* istanbul ignore next */ []));
+        this.defaultContainer = viewChild('defaultContainer', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "defaultContainer" }] : /* istanbul ignore next */ []));
+        this.parentFormMember = inject(WLCM_FORM_CONTROL, { optional: true });
+        this.changeDetectorRef = inject(ChangeDetectorRef);
+        this.destroyRef = inject(DestroyRef);
+    }
     get isFocused() {
         return this.inputRef?.isFocused() ?? false;
     }
@@ -239,13 +244,8 @@ let WlcmFormFieldComponent = class WlcmFormFieldComponent {
     get isDisabled() {
         return this.control?.disabled;
     }
-    constructor(parentFormMember, changeDetectorRef) {
-        this.parentFormMember = parentFormMember;
-        this.changeDetectorRef = changeDetectorRef;
-        this.displayErrorMessages = true;
-    }
     ngAfterViewInit() {
-        if (!this.inputRef && !this.customContainer) {
+        if (!this.inputRef && !this.customContainer()) {
             throw new Error('Input element should be bound to the wlcmInput directive.');
         }
         this.handleStateChanges();
@@ -256,10 +256,10 @@ let WlcmFormFieldComponent = class WlcmFormFieldComponent {
         this.inputRef?.focus();
     }
     get control() {
-        return (this.controlContainer?.control || this.ngControl?.control) ?? null;
+        return (this.controlContainer()?.control || this.ngControl()?.control) ?? null;
     }
     get inputContainer() {
-        return this.customContainer?.elementRef || this.defaultContainer;
+        return this.customContainer()?.elementRef || this.defaultContainer();
     }
     handleStateChanges() {
         const events = this.controlEvents;
@@ -267,11 +267,11 @@ let WlcmFormFieldComponent = class WlcmFormFieldComponent {
             events.push(this.parentFormMember.stateChanges$);
         }
         merge(...events)
-            .pipe(untilDestroyed(this))
+            .pipe(takeUntilDestroyed(this.destroyRef))
             .subscribe(() => this.changeDetectorRef.markForCheck());
     }
     get inputRef() {
-        return this._inputRef?.get();
+        return this._inputRef()?.get();
     }
     get controlEvents() {
         const events = [];
@@ -279,87 +279,50 @@ let WlcmFormFieldComponent = class WlcmFormFieldComponent {
             events.push(this.inputRef.focus$, this.inputRef.blur$);
         }
         if (this.control) {
-            events.push(this.control.statusChanges);
+            // control.events fires on status, value, touched and pristine changes —
+            // statusChanges alone never emits on touched changes, so the
+            // wlcm-field-touched host class would go stale under OnPush.
+            events.push(this.control.events);
         }
         return events;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: WlcmFormFieldComponent, deps: [{ token: WLCM_FORM_CONTROL, optional: true }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.9", type: WlcmFormFieldComponent, isStandalone: true, selector: "wlcm-form-field", inputs: { displayErrorMessages: "displayErrorMessages" }, host: { properties: { "class.wlcm-field-focused": "this.isFocused", "class.wlcm-field-required": "this.isRequired", "class.wlcm-field-invalid": "this.isInvalid", "class.wlcm-field-touched": "this.isTouched", "class.wlcm-field-disabled": "this.isDisabled" }, classAttribute: "wlcm-form-field" }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: WlcmFormFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: WlcmFormFieldComponent, isStandalone: true, selector: "wlcm-form-field", inputs: { displayErrorMessages: { classPropertyName: "displayErrorMessages", publicName: "displayErrorMessages", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.wlcm-field-focused": "isFocused", "class.wlcm-field-required": "isRequired", "class.wlcm-field-invalid": "isInvalid", "class.wlcm-field-touched": "isTouched", "class.wlcm-field-disabled": "isDisabled" }, classAttribute: "wlcm-form-field" }, providers: [
             WLCM_FORM_CONTROL_PROVIDER,
             { provide: WLCM_FORM_FIELD, useExisting: forwardRef(() => WlcmFormFieldComponent) },
-        ], queries: [{ propertyName: "ngControl", first: true, predicate: NgControl, descendants: true }, { propertyName: "controlContainer", first: true, predicate: ControlContainer, descendants: true }, { propertyName: "_inputRef", first: true, predicate: WLCM_INPUT, descendants: true }, { propertyName: "prefix", first: true, predicate: WlcmFormFieldPrefixDirective, descendants: true }, { propertyName: "suffix", first: true, predicate: WlcmFormFieldSuffixDirective, descendants: true }, { propertyName: "customContainer", first: true, predicate: WlcmFormFieldCustomContainerDirective, descendants: true }], viewQueries: [{ propertyName: "defaultContainer", first: true, predicate: ["defaultContainer"], descendants: true }], ngImport: i0, template: "<ng-content select=\"wlcm-label\"></ng-content>\n\n<ng-content select=\"[wlcmFormFieldCustomContainer]\"></ng-content>\n\n<div\n  class=\"wlcm-field-container\"\n  (click)=\"focus()\"\n  #defaultContainer\n  *ngIf=\"!customContainer\"\n>\n  <div class=\"wlcm-field-prefix\" [class.contains-children]=\"prefix\">\n    <ng-content select=\"[wlcmFormFieldPrefix]\"></ng-content>\n  </div>\n\n  <ng-content select=\"[wlcmInput]\"></ng-content>\n\n  <div class=\"wlcm-field-suffix\" [class.contains-children]=\"suffix\">\n    <ng-content select=\"[wlcmFormFieldSuffix]\"></ng-content>\n  </div>\n</div>\n\n<ng-content select=\"[wlcmFormFieldHint]\"></ng-content>\n\n<div class=\"wlcm-field-error-container\" *ngIf=\"control && displayErrorMessages\">\n  <wlcm-error>{{ $any(control) | errorsMapper }}</wlcm-error>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: WlcmErrorComponent, selector: "wlcm-error" }, { kind: "pipe", type: ErrorsMapperPipe, name: "errorsMapper" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-};
-WlcmFormFieldComponent = __decorate([
-    UntilDestroy(),
-    __metadata("design:paramtypes", [Object, ChangeDetectorRef])
-], WlcmFormFieldComponent);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: WlcmFormFieldComponent, decorators: [{
+        ], queries: [{ propertyName: "ngControl", first: true, predicate: NgControl, descendants: true, isSignal: true }, { propertyName: "controlContainer", first: true, predicate: ControlContainer, descendants: true, isSignal: true }, { propertyName: "_inputRef", first: true, predicate: WLCM_INPUT, descendants: true, isSignal: true }, { propertyName: "prefix", first: true, predicate: WlcmFormFieldPrefixDirective, descendants: true, isSignal: true }, { propertyName: "suffix", first: true, predicate: WlcmFormFieldSuffixDirective, descendants: true, isSignal: true }, { propertyName: "customContainer", first: true, predicate: WlcmFormFieldCustomContainerDirective, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "defaultContainer", first: true, predicate: ["defaultContainer"], descendants: true, isSignal: true }], ngImport: i0, template: "<ng-content select=\"wlcm-label\"></ng-content>\n\n<ng-content select=\"[wlcmFormFieldCustomContainer]\"></ng-content>\n\n@if (!customContainer()) {\n  <div\n    class=\"wlcm-field-container\"\n    (click)=\"focus()\"\n    #defaultContainer\n    >\n    <div class=\"wlcm-field-prefix\" [class.contains-children]=\"prefix()\">\n      <ng-content select=\"[wlcmFormFieldPrefix]\"></ng-content>\n    </div>\n    <ng-content select=\"[wlcmInput]\"></ng-content>\n    <div class=\"wlcm-field-suffix\" [class.contains-children]=\"suffix()\">\n      <ng-content select=\"[wlcmFormFieldSuffix]\"></ng-content>\n    </div>\n  </div>\n}\n\n<ng-content select=\"[wlcmFormFieldHint]\"></ng-content>\n\n@if (control && displayErrorMessages()) {\n  <div class=\"wlcm-field-error-container\">\n    <wlcm-error>{{ $any(control) | errorsMapper }}</wlcm-error>\n  </div>\n}\n", styles: [""], dependencies: [{ kind: "component", type: WlcmErrorComponent, selector: "wlcm-error" }, { kind: "pipe", type: ErrorsMapperPipe, name: "errorsMapper" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: WlcmFormFieldComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'wlcm-form-field', standalone: true, imports: [CommonModule, WlcmErrorComponent, ErrorsMapperPipe], host: { class: 'wlcm-form-field' }, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
+            args: [{ selector: 'wlcm-form-field', imports: [WlcmErrorComponent, ErrorsMapperPipe], host: {
+                        class: 'wlcm-form-field',
+                        '[class.wlcm-field-focused]': 'isFocused',
+                        '[class.wlcm-field-required]': 'isRequired',
+                        '[class.wlcm-field-invalid]': 'isInvalid',
+                        '[class.wlcm-field-touched]': 'isTouched',
+                        '[class.wlcm-field-disabled]': 'isDisabled',
+                    }, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
                         WLCM_FORM_CONTROL_PROVIDER,
                         { provide: WLCM_FORM_FIELD, useExisting: forwardRef(() => WlcmFormFieldComponent) },
-                    ], template: "<ng-content select=\"wlcm-label\"></ng-content>\n\n<ng-content select=\"[wlcmFormFieldCustomContainer]\"></ng-content>\n\n<div\n  class=\"wlcm-field-container\"\n  (click)=\"focus()\"\n  #defaultContainer\n  *ngIf=\"!customContainer\"\n>\n  <div class=\"wlcm-field-prefix\" [class.contains-children]=\"prefix\">\n    <ng-content select=\"[wlcmFormFieldPrefix]\"></ng-content>\n  </div>\n\n  <ng-content select=\"[wlcmInput]\"></ng-content>\n\n  <div class=\"wlcm-field-suffix\" [class.contains-children]=\"suffix\">\n    <ng-content select=\"[wlcmFormFieldSuffix]\"></ng-content>\n  </div>\n</div>\n\n<ng-content select=\"[wlcmFormFieldHint]\"></ng-content>\n\n<div class=\"wlcm-field-error-container\" *ngIf=\"control && displayErrorMessages\">\n  <wlcm-error>{{ $any(control) | errorsMapper }}</wlcm-error>\n</div>\n" }]
-        }], ctorParameters: () => [{ type: undefined, decorators: [{
-                    type: Optional
-                }, {
-                    type: Inject,
-                    args: [WLCM_FORM_CONTROL]
-                }] }, { type: i0.ChangeDetectorRef }], propDecorators: { displayErrorMessages: [{
-                type: Input
-            }], ngControl: [{
-                type: ContentChild,
-                args: [NgControl, { descendants: true }]
-            }], controlContainer: [{
-                type: ContentChild,
-                args: [ControlContainer, { descendants: true }]
-            }], _inputRef: [{
-                type: ContentChild,
-                args: [WLCM_INPUT]
-            }], prefix: [{
-                type: ContentChild,
-                args: [WlcmFormFieldPrefixDirective]
-            }], suffix: [{
-                type: ContentChild,
-                args: [WlcmFormFieldSuffixDirective]
-            }], customContainer: [{
-                type: ContentChild,
-                args: [WlcmFormFieldCustomContainerDirective]
-            }], defaultContainer: [{
-                type: ViewChild,
-                args: ['defaultContainer']
-            }], isFocused: [{
-                type: HostBinding,
-                args: ['class.wlcm-field-focused']
-            }], isRequired: [{
-                type: HostBinding,
-                args: ['class.wlcm-field-required']
-            }], isInvalid: [{
-                type: HostBinding,
-                args: ['class.wlcm-field-invalid']
-            }], isTouched: [{
-                type: HostBinding,
-                args: ['class.wlcm-field-touched']
-            }], isDisabled: [{
-                type: HostBinding,
-                args: ['class.wlcm-field-disabled']
-            }] } });
+                    ], template: "<ng-content select=\"wlcm-label\"></ng-content>\n\n<ng-content select=\"[wlcmFormFieldCustomContainer]\"></ng-content>\n\n@if (!customContainer()) {\n  <div\n    class=\"wlcm-field-container\"\n    (click)=\"focus()\"\n    #defaultContainer\n    >\n    <div class=\"wlcm-field-prefix\" [class.contains-children]=\"prefix()\">\n      <ng-content select=\"[wlcmFormFieldPrefix]\"></ng-content>\n    </div>\n    <ng-content select=\"[wlcmInput]\"></ng-content>\n    <div class=\"wlcm-field-suffix\" [class.contains-children]=\"suffix()\">\n      <ng-content select=\"[wlcmFormFieldSuffix]\"></ng-content>\n    </div>\n  </div>\n}\n\n<ng-content select=\"[wlcmFormFieldHint]\"></ng-content>\n\n@if (control && displayErrorMessages()) {\n  <div class=\"wlcm-field-error-container\">\n    <wlcm-error>{{ $any(control) | errorsMapper }}</wlcm-error>\n  </div>\n}\n" }]
+        }], propDecorators: { displayErrorMessages: [{ type: i0.Input, args: [{ isSignal: true, alias: "displayErrorMessages", required: false }] }], ngControl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => NgControl), { ...{ descendants: true }, isSignal: true }] }], controlContainer: [{ type: i0.ContentChild, args: [i0.forwardRef(() => ControlContainer), { ...{ descendants: true }, isSignal: true }] }], _inputRef: [{ type: i0.ContentChild, args: [i0.forwardRef(() => WLCM_INPUT), { isSignal: true }] }], prefix: [{ type: i0.ContentChild, args: [i0.forwardRef(() => WlcmFormFieldPrefixDirective), { isSignal: true }] }], suffix: [{ type: i0.ContentChild, args: [i0.forwardRef(() => WlcmFormFieldSuffixDirective), { isSignal: true }] }], customContainer: [{ type: i0.ContentChild, args: [i0.forwardRef(() => WlcmFormFieldCustomContainerDirective), { isSignal: true }] }], defaultContainer: [{ type: i0.ViewChild, args: ['defaultContainer', { isSignal: true }] }] } });
 
 const WLCM_FORM_FIELD_INPUT_CLASS = 'wlcm-form-field-input';
 
 class WlcmInputDirective {
-    constructor(_elementRef) {
-        this._elementRef = _elementRef;
+    constructor() {
+        this._elementRef = inject((ElementRef));
         this.focus = () => this._elementRef.nativeElement.focus();
         this.isFocused = () => this._elementRef.nativeElement === document.activeElement;
         this.focus$ = fromEvent(this._elementRef.nativeElement, 'focus');
         this.blur$ = fromEvent(this._elementRef.nativeElement, 'blur');
-        const element = _elementRef.nativeElement;
+        const element = this._elementRef.nativeElement;
         if (element.nodeName === 'INPUT' || element.nodeName === 'TEXTAREA') {
             element.classList.add(WLCM_FORM_FIELD_INPUT_CLASS);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: WlcmInputDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.9", type: WlcmInputDirective, isStandalone: true, selector: "[wlcmInput]", providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: WlcmInputDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.5", type: WlcmInputDirective, isStandalone: true, selector: "[wlcmInput]", providers: [
             {
                 provide: WLCM_INPUT,
                 useFactory: () => {
@@ -370,7 +333,7 @@ class WlcmInputDirective {
             },
         ], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: WlcmInputDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: WlcmInputDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[wlcmInput]',
@@ -384,56 +347,50 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.9", ngImpor
                             },
                         },
                     ],
-                    standalone: true,
                 }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }] });
+        }], ctorParameters: () => [] });
 
 class WlcmLabelComponent {
     constructor() {
-        this.required = false;
+        this.required = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "required" }] : /* istanbul ignore next */ []));
     }
-    get isRequired() {
-        return this.required;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: WlcmLabelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.9", type: WlcmLabelComponent, isStandalone: true, selector: "wlcm-label", inputs: { required: "required" }, host: { properties: { "class.required": "this.isRequired" }, classAttribute: "wlcm-label" }, ngImport: i0, template: "<span class=\"wlcm-label-asterisk\">*</span>\n\n<ng-content></ng-content>\n", styles: [""], 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: WlcmLabelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.5", type: WlcmLabelComponent, isStandalone: true, selector: "wlcm-label", inputs: { required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.required": "required()" }, classAttribute: "wlcm-label" }, ngImport: i0, template: "<span class=\"wlcm-label-asterisk\">*</span>\n\n<ng-content></ng-content>\n", styles: [""], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: WlcmLabelComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: WlcmLabelComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'wlcm-label', standalone: true, imports: [CommonModule], host: { class: 'wlcm-label' }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<span class=\"wlcm-label-asterisk\">*</span>\n\n<ng-content></ng-content>\n" }]
-        }], propDecorators: { required: [{
-                type: Input
-            }], isRequired: [{
-                type: HostBinding,
-                args: ['class.required']
-            }] } });
+            args: [{ selector: 'wlcm-label', imports: [], host: { class: 'wlcm-label', '[class.required]': 'required()' }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<span class=\"wlcm-label-asterisk\">*</span>\n\n<ng-content></ng-content>\n" }]
+        }], propDecorators: { required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }] } });
 
-let AutocompleteDirective = class AutocompleteDirective {
-    constructor(zone, autocomplete) {
-        this.zone = zone;
-        this.autocomplete = autocomplete;
-        this.panelScrolled = new EventEmitter();
+class AutocompleteDirective {
+    constructor() {
+        this.panelScrolled = output();
         this._scrollHeight = 0;
         this._scrollHeightChanged = false;
+        this.autocomplete = inject(MatAutocomplete, { host: true, optional: true });
+        this.destroyRef = inject(DestroyRef);
         this.handleOpenEvent();
     }
     handleOpenEvent() {
         this.autocomplete.opened
-            .pipe(untilDestroyed(this))
-            .pipe(observeOn(asyncScheduler))
-            .subscribe(() => this.zone.runOutsideAngular(() => this.handleScrolling()));
+            .pipe(observeOn(asyncScheduler), takeUntilDestroyed(this.destroyRef))
+            .subscribe(() => this.handleScrolling());
     }
     handleScrolling() {
         const panel = this.autocomplete.panel.nativeElement;
         this.setScrollHscrollHeight(panel.scrollHeight);
-        fromEvent(panel, 'scroll')
+        // Zone-free: the scroll listener no longer runs outside/inside NgZone.
+        // Under zoneless CD the panelScrolled output drives change detection on
+        // its own, so no zone.run wrapper is needed.
+        fromEvent(panel, 'scroll', { passive: true })
             .pipe(takeUntil(this.autocomplete.closed))
             .subscribe(() => {
             if (this._scrollHeight !== panel.scrollHeight) {
                 this.setScrollHscrollHeight(panel.scrollHeight);
             }
             if (panel.scrollHeight * 0.8 <= panel.scrollTop + panel.clientHeight && this._scrollHeightChanged) {
-                this.zone.run(() => this.panelScrolled.emit());
+                this.panelScrolled.emit();
                 this._scrollHeightChanged = false;
             }
         });
@@ -442,66 +399,78 @@ let AutocompleteDirective = class AutocompleteDirective {
         this._scrollHeight = height;
         this._scrollHeightChanged = true;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: AutocompleteDirective, deps: [{ token: i0.NgZone }, { token: i2.MatAutocomplete, host: true, optional: true }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.9", type: AutocompleteDirective, isStandalone: true, selector: "[wlcmAutocomplete]", outputs: { panelScrolled: "panelScrolled" }, ngImport: i0 }); }
-};
-AutocompleteDirective = __decorate([
-    UntilDestroy(),
-    __metadata("design:paramtypes", [NgZone,
-        MatAutocomplete])
-], AutocompleteDirective);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: AutocompleteDirective, decorators: [{
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: AutocompleteDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.5", type: AutocompleteDirective, isStandalone: true, selector: "[wlcmAutocomplete]", outputs: { panelScrolled: "panelScrolled" }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: AutocompleteDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[wlcmAutocomplete]',
-                    standalone: true,
                 }]
-        }], ctorParameters: () => [{ type: i0.NgZone }, { type: i2.MatAutocomplete, decorators: [{
-                    type: Host
-                }, {
-                    type: Optional
-                }] }], propDecorators: { panelScrolled: [{
-                type: Output
-            }] } });
+        }], ctorParameters: () => [], propDecorators: { panelScrolled: [{ type: i0.Output, args: ["panelScrolled"] }] } });
 
 class WlcmAutocomplete {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: WlcmAutocomplete, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.9", type: WlcmAutocomplete, isStandalone: true, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: WlcmAutocomplete, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.5", type: WlcmAutocomplete, isStandalone: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: WlcmAutocomplete, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: WlcmAutocomplete, decorators: [{
             type: Directive
         }] });
 
 const PANEL_CLASS$1 = 'wlcm-autocomplete-panel';
-let WlcmAutocompleteComponent = class WlcmAutocompleteComponent extends WlcmAutocomplete {
-    constructor(injector, formField) {
+class WlcmAutocompleteComponent extends WlcmAutocomplete {
+    constructor() {
         super();
-        this.injector = injector;
-        this.formField = formField;
-        this.required = false;
-        this.placeholder = '';
-        this.queryParams = cloneDeep({
-            ...DEFAULT_QUERY_PARAMS,
-            limit: 15,
-        });
-        this.selectOptionFormat = input('ValueOnly');
-        this.noResultsTemplate = input();
+        this.fetchPaginatedOptions = input.required(/* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "fetchPaginatedOptions" }] : /* istanbul ignore next */ []));
+        // Unused internally and not always bound by consumers (e.g. sandbox); keep optional
+        // to preserve the previous non-required @Input() label!: string contract.
+        this.label = input('', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+        this.required = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "required" }] : /* istanbul ignore next */ []));
+        this.placeholder = input('', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
+        this.optionTemplate = input(undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "optionTemplate" }] : /* istanbul ignore next */ []));
+        // queryParams is a public input that is also mutated internally (query text and
+        // page cursor on every load). A read-only signal input can't be written, so the
+        // input seeds a mutable linkedSignal working copy (cloneDeep preserves the
+        // original transform semantics: never mutate the caller's object).
+        this.queryParams = input(cloneDeep({ ...DEFAULT_QUERY_PARAMS, limit: 15 }), { ...(ngDevMode ? { debugName: "queryParams" } : /* istanbul ignore next */ {}), transform: (params) => cloneDeep(params) });
+        this._queryParams = linkedSignal(() => cloneDeep(this.queryParams()), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "_queryParams" }] : /* istanbul ignore next */ []));
+        this.selectOptionFormat = input('ValueOnly', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "selectOptionFormat" }] : /* istanbul ignore next */ []));
+        this.noResultsTemplate = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "noResultsTemplate" }] : /* istanbul ignore next */ []));
         this.selected = output();
         this.control = new FormControl('');
         this._loadMore$ = new Subject();
-        this._options$ = new BehaviorSubject([]);
-        this.options$ = this._options$.asObservable();
+        this.options = signal([], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
         this.closed$ = new Subject();
         this._focusStream$ = new BehaviorSubject(EMPTY);
         this._blurStream$ = new BehaviorSubject(EMPTY);
-        this._loading$ = new BehaviorSubject(false);
+        this.loading = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "loading" }] : /* istanbul ignore next */ []));
+        // WlcmAutocomplete contract + the autocomplete-suffix partial consume loading$
+        // as an observable, so bridge the internal loading signal back to an observable.
+        this.loading$ = toObservable(this.loading);
         this.focus$ = this._focusStream$.pipe(switchMap((stream) => stream));
         this.blur$ = this._blurStream$.pipe(switchMap((stream) => stream));
-        this.loading$ = this._loading$.asObservable();
         this.adjustedValue$ = new BehaviorSubject(null);
         this._paginatedData = null;
         this._reloadOptions$ = new Subject();
         this.viewReady$ = new Subject();
+        this.inputElement = viewChild(WLCM_INPUT, { ...(ngDevMode ? { debugName: "inputElement" } : /* istanbul ignore next */ {}), read: ElementRef });
+        this.autocompleteTrigger = viewChild(MatAutocompleteTrigger, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "autocompleteTrigger" }] : /* istanbul ignore next */ []));
+        this.autocomplete = viewChild(MatAutocomplete, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "autocomplete" }] : /* istanbul ignore next */ []));
+        this.injector = inject(Injector);
+        this.formField = inject(WLCM_FORM_FIELD);
+        this.destroyRef = inject(DestroyRef);
         this.handleLoadMoreEvent();
         this.handleControlValueChanges();
         this.handleAdjustedValue();
@@ -511,9 +480,16 @@ let WlcmAutocompleteComponent = class WlcmAutocompleteComponent extends WlcmAuto
     }
     ngAfterViewInit() {
         this.viewReady$.next();
-        this.autocompleteTrigger.connectedTo = runInInjectionContext(this.injector, () => {
-            return new MatAutocompleteOrigin(this.formField.inputContainer);
-        });
+        const trigger = this.autocompleteTrigger();
+        if (trigger) {
+            trigger.connectedTo = runInInjectionContext(this.injector, () => {
+                // Material 22 made MatAutocompleteOrigin a directive with a no-arg constructor that injects
+                // its own ElementRef; point it at the form-field input container after construction.
+                const origin = new MatAutocompleteOrigin();
+                origin.elementRef = this.formField.inputContainer;
+                return origin;
+            });
+        }
         this.attachFocusBlurListeners();
     }
     displayWith(value) {
@@ -523,10 +499,10 @@ let WlcmAutocompleteComponent = class WlcmAutocompleteComponent extends WlcmAuto
         return value;
     }
     focus() {
-        this.inputElement.nativeElement.focus();
+        this.inputElement()?.nativeElement.focus();
     }
     isFocused() {
-        return this.inputElement?.nativeElement === document.activeElement || this.autocomplete?.isOpen;
+        return this.inputElement()?.nativeElement === document.activeElement || (this.autocomplete()?.isOpen ?? false);
     }
     loadMore() {
         this._loadMore$.next();
@@ -551,9 +527,12 @@ let WlcmAutocompleteComponent = class WlcmAutocompleteComponent extends WlcmAuto
         this._reloadOptions$.next();
     }
     blured() {
-        if (!this.autocomplete.isOpen)
+        const autocomplete = this.autocomplete();
+        if (!autocomplete)
+            return;
+        if (!autocomplete.isOpen)
             this._touched?.();
-        this.autocomplete.closed.pipe(take(1)).subscribe(() => this._touched?.());
+        autocomplete.closed.pipe(take(1)).subscribe(() => this._touched?.());
     }
     validate(control) {
         if (this.control.value) {
@@ -573,24 +552,24 @@ let WlcmAutocompleteComponent = class WlcmAutocompleteComponent extends WlcmAuto
         return value;
     }
     loadOptions(query = '') {
-        this._loading$.next(true);
-        this.queryParams = { ...this.queryParams, query, page: 1 };
-        return this.fetchPaginatedOptions(this.queryParams).pipe(tap((paginatedData) => {
+        this.loading.set(true);
+        this._queryParams.update((params) => ({ ...params, query, page: 1 }));
+        return this.fetchPaginatedOptions()(this._queryParams()).pipe(tap((paginatedData) => {
             this._paginatedData = paginatedData;
-            this._options$.next(paginatedData.data);
-            this._loading$.next(false);
+            this.options.set(paginatedData.data);
+            this.loading.set(false);
         }));
     }
     handleLoadMoreEvent() {
         this._loadMore$
             .pipe(concatMap(() => {
             if (this._paginatedData && this._paginatedData.currPage + 1 <= this._paginatedData.totalPages) {
-                this.queryParams.page++;
-                this._loading$.next(true);
-                return this.fetchPaginatedOptions(this.queryParams).pipe(tap((paginatedData) => {
+                this._queryParams.update((params) => ({ ...params, page: params.page + 1 }));
+                this.loading.set(true);
+                return this.fetchPaginatedOptions()(this._queryParams()).pipe(tap((paginatedData) => {
                     this._paginatedData = paginatedData;
-                    this._options$.next([...this._options$.value, ...paginatedData.data]);
-                    this._loading$.next(false);
+                    this.options.update((options) => [...options, ...paginatedData.data]);
+                    this.loading.set(false);
                 }));
             }
             return EMPTY;
@@ -599,7 +578,7 @@ let WlcmAutocompleteComponent = class WlcmAutocompleteComponent extends WlcmAuto
     }
     handleControlValueChanges() {
         merge(this.control.valueChanges, this._reloadOptions$.pipe(map(() => this.control.value)))
-            .pipe(untilDestroyed(this))
+            .pipe(takeUntilDestroyed(this.destroyRef))
             .pipe(filter((value) => {
             let _value = value ?? '';
             if (value instanceof Object && this.selectOptionFormat() === 'ValueOnly')
@@ -612,10 +591,14 @@ let WlcmAutocompleteComponent = class WlcmAutocompleteComponent extends WlcmAuto
             .subscribe();
     }
     attachFocusBlurListeners() {
-        const inputFocus = fromEvent(this.inputElement.nativeElement, 'focus');
-        const inputBlur = fromEvent(this.inputElement.nativeElement, 'blur');
-        const focusObservables = [inputFocus, this.autocomplete.opened];
-        const blurObservables = [inputBlur, this.autocomplete.closed];
+        const inputElement = this.inputElement();
+        const autocomplete = this.autocomplete();
+        if (!inputElement || !autocomplete)
+            return;
+        const inputFocus = fromEvent(inputElement.nativeElement, 'focus');
+        const inputBlur = fromEvent(inputElement.nativeElement, 'blur');
+        const focusObservables = [inputFocus, autocomplete.opened];
+        const blurObservables = [inputBlur, autocomplete.closed];
         this._focusStream$.next(merge(...focusObservables).pipe(map(() => undefined)));
         this._blurStream$.next(merge(...blurObservables).pipe(map(() => this.control?.markAsTouched())));
     }
@@ -624,8 +607,8 @@ let WlcmAutocompleteComponent = class WlcmAutocompleteComponent extends WlcmAuto
             .pipe(switchMap(() => this.adjustedValue$.pipe(filter(Boolean))))
             .subscribe((value) => this._changed?.(value));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: WlcmAutocompleteComponent, deps: [{ token: i0.Injector }, { token: WLCM_FORM_FIELD }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.9", type: WlcmAutocompleteComponent, isStandalone: true, selector: "wlcm-autocomplete", inputs: { fetchPaginatedOptions: { classPropertyName: "fetchPaginatedOptions", publicName: "fetchPaginatedOptions", isSignal: false, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: false, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: false, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: false, isRequired: false, transformFunction: null }, optionTemplate: { classPropertyName: "optionTemplate", publicName: "optionTemplate", isSignal: false, isRequired: false, transformFunction: null }, queryParams: { classPropertyName: "queryParams", publicName: "queryParams", isSignal: false, isRequired: false, transformFunction: (params) => cloneDeep(params) }, selectOptionFormat: { classPropertyName: "selectOptionFormat", publicName: "selectOptionFormat", isSignal: true, isRequired: false, transformFunction: null }, noResultsTemplate: { classPropertyName: "noResultsTemplate", publicName: "noResultsTemplate", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selected: "selected" }, host: { classAttribute: "wlcm-autocomplete" }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: WlcmAutocompleteComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: WlcmAutocompleteComponent, isStandalone: true, selector: "wlcm-autocomplete", inputs: { fetchPaginatedOptions: { classPropertyName: "fetchPaginatedOptions", publicName: "fetchPaginatedOptions", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, optionTemplate: { classPropertyName: "optionTemplate", publicName: "optionTemplate", isSignal: true, isRequired: false, transformFunction: null }, queryParams: { classPropertyName: "queryParams", publicName: "queryParams", isSignal: true, isRequired: false, transformFunction: null }, selectOptionFormat: { classPropertyName: "selectOptionFormat", publicName: "selectOptionFormat", isSignal: true, isRequired: false, transformFunction: null }, noResultsTemplate: { classPropertyName: "noResultsTemplate", publicName: "noResultsTemplate", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selected: "selected" }, host: { classAttribute: "wlcm-autocomplete" }, providers: [
             { provide: MAT_AUTOCOMPLETE_DEFAULT_OPTIONS, useValue: { overlayPanelClass: PANEL_CLASS$1 } },
             { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => WlcmAutocompleteComponent), multi: true },
             { provide: NG_VALIDATORS, useExisting: forwardRef(() => WlcmAutocompleteComponent), multi: true },
@@ -636,15 +619,11 @@ let WlcmAutocompleteComponent = class WlcmAutocompleteComponent extends WlcmAuto
                     return { bind: () => autocomplete };
                 },
             },
-        ], viewQueries: [{ propertyName: "inputElement", first: true, predicate: WLCM_INPUT, descendants: true, read: ElementRef }, { propertyName: "autocompleteTrigger", first: true, predicate: MatAutocompleteTrigger, descendants: true }, { propertyName: "autocomplete", first: true, predicate: MatAutocomplete, descendants: true }], exportAs: ["wlcmAutocomplete"], usesInheritance: true, ngImport: i0, template: "<input\n  wlcmInput\n  type=\"text\"\n  [matAutocomplete]=\"autocomplete\"\n  [placeholder]=\"placeholder\"\n  [formControl]=\"control\"\n  (blur)=\"blured()\"\n/>\n\n<mat-autocomplete\n  #autocomplete=\"matAutocomplete\"\n  wlcmAutocomplete\n  [disableRipple]=\"true\"\n  [displayWith]=\"displayWith\"\n  [hideSingleSelectionIndicator]=\"true\"\n  (panelScrolled)=\"loadMore()\"\n>\n  <ng-container *rxLet=\"$any(options$ | async); let options\">\n    <mat-option\n      *ngFor=\"let option of options\"\n      [ngClass]=\"{ 'wlcm-custom-option-content': optionTemplate }\"\n      [value]=\"option\"\n    >\n      @if (optionTemplate) {\n        <ng-container\n          *ngTemplateOutlet=\"optionTemplate; context: { $implicit: option }\"\n        ></ng-container>\n      } @else {\n        {{ option.viewValue }}\n      }\n    </mat-option>\n\n    <mat-option [disabled]=\"true\" *ngIf=\"options.length === 0\">\n      @if (noResultsTemplate()) {\n        <ng-container\n          *ngTemplateOutlet=\"\n            noResultsTemplate()!;\n            context: { $implicit: control.value, loading: loading$ | async }\n          \"\n        ></ng-container>\n      } @else {\n        <ng-container\n          *ngTemplateOutlet=\"\n            defaultNoResultsTemplate;\n            context: { $implicit: control.value, loading: loading$ | async }\n          \"\n        ></ng-container>\n      }\n    </mat-option>\n  </ng-container>\n</mat-autocomplete>\n\n<ng-template #defaultNoResultsTemplate let-loading=\"loading\">\n  @if (loading) {\n    Please wait...\n  } @else {\n    No results found\n  }\n</ng-template>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "ngmodule", type: MatAutocompleteModule }, { kind: "component", type: i2.MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "component", type: i2.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i2.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "directive", type: AutocompleteDirective, selector: "[wlcmAutocomplete]", outputs: ["panelScrolled"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: WlcmInputDirective, selector: "[wlcmInput]" }, { kind: "directive", type: RxLet, selector: "[rxLet]", inputs: ["rxLet", "rxLetStrategy", "rxLetComplete", "rxLetError", "rxLetSuspense", "rxLetContextTrigger", "rxLetCompleteTrigger", "rxLetErrorTrigger", "rxLetSuspenseTrigger", "rxLetNextTrigger", "rxLetRenderCallback", "rxLetParent", "rxLetPatchZone"], outputs: ["rendered"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-};
-WlcmAutocompleteComponent = __decorate([
-    UntilDestroy(),
-    __metadata("design:paramtypes", [Injector, Object])
-], WlcmAutocompleteComponent);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: WlcmAutocompleteComponent, decorators: [{
+        ], viewQueries: [{ propertyName: "inputElement", first: true, predicate: WLCM_INPUT, descendants: true, read: ElementRef, isSignal: true }, { propertyName: "autocompleteTrigger", first: true, predicate: MatAutocompleteTrigger, descendants: true, isSignal: true }, { propertyName: "autocomplete", first: true, predicate: MatAutocomplete, descendants: true, isSignal: true }], exportAs: ["wlcmAutocomplete"], usesInheritance: true, ngImport: i0, template: "<input\n  wlcmInput\n  type=\"text\"\n  [matAutocomplete]=\"autocomplete\"\n  [placeholder]=\"placeholder()\"\n  [formControl]=\"control\"\n  (blur)=\"blured()\"\n  />\n\n<mat-autocomplete\n  #autocomplete=\"matAutocomplete\"\n  wlcmAutocomplete\n  [disableRipple]=\"true\"\n  [displayWith]=\"displayWith\"\n  [hideSingleSelectionIndicator]=\"true\"\n  (panelScrolled)=\"loadMore()\"\n  >\n  <ng-container>\n    @for (option of options(); track option) {\n      <mat-option\n        [ngClass]=\"{ 'wlcm-custom-option-content': optionTemplate() }\"\n        [value]=\"option\"\n        >\n        @if (optionTemplate(); as optionTemplate) {\n          <ng-container\n            *ngTemplateOutlet=\"optionTemplate; context: { $implicit: option }\"\n          ></ng-container>\n        } @else {\n          {{ option.viewValue }}\n        }\n      </mat-option>\n    }\n\n    @if (options().length === 0) {\n      <mat-option [disabled]=\"true\">\n        @if (noResultsTemplate()) {\n          <ng-container\n          *ngTemplateOutlet=\"\n            noResultsTemplate()!;\n            context: { $implicit: control.value, loading: loading() }\n          \"\n          ></ng-container>\n        } @else {\n          <ng-container\n          *ngTemplateOutlet=\"\n            defaultNoResultsTemplate;\n            context: { $implicit: control.value, loading: loading() }\n          \"\n          ></ng-container>\n        }\n      </mat-option>\n    }\n  </ng-container>\n</mat-autocomplete>\n\n<ng-template #defaultNoResultsTemplate let-loading=\"loading\">\n  @if (loading) {\n    Please wait...\n  } @else {\n    No results found\n  }\n</ng-template>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: MatAutocompleteModule }, { kind: "component", type: i2.MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "component", type: i2.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i2.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "directive", type: AutocompleteDirective, selector: "[wlcmAutocomplete]", outputs: ["panelScrolled"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: WlcmInputDirective, selector: "[wlcmInput]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: WlcmAutocompleteComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'wlcm-autocomplete', exportAs: 'wlcmAutocomplete', host: { class: 'wlcm-autocomplete' }, standalone: true, imports: [CommonModule, MatAutocompleteModule, AutocompleteDirective, ReactiveFormsModule, WlcmInputDirective, RxLet], changeDetection: ChangeDetectionStrategy.OnPush, providers: [
+            args: [{ selector: 'wlcm-autocomplete', exportAs: 'wlcmAutocomplete', host: { class: 'wlcm-autocomplete' }, imports: [CommonModule, MatAutocompleteModule, AutocompleteDirective, ReactiveFormsModule, WlcmInputDirective], changeDetection: ChangeDetectionStrategy.OnPush, providers: [
                         { provide: MAT_AUTOCOMPLETE_DEFAULT_OPTIONS, useValue: { overlayPanelClass: PANEL_CLASS$1 } },
                         { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => WlcmAutocompleteComponent), multi: true },
                         { provide: NG_VALIDATORS, useExisting: forwardRef(() => WlcmAutocompleteComponent), multi: true },
@@ -655,40 +634,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.9", ngImpor
                                 return { bind: () => autocomplete };
                             },
                         },
-                    ], template: "<input\n  wlcmInput\n  type=\"text\"\n  [matAutocomplete]=\"autocomplete\"\n  [placeholder]=\"placeholder\"\n  [formControl]=\"control\"\n  (blur)=\"blured()\"\n/>\n\n<mat-autocomplete\n  #autocomplete=\"matAutocomplete\"\n  wlcmAutocomplete\n  [disableRipple]=\"true\"\n  [displayWith]=\"displayWith\"\n  [hideSingleSelectionIndicator]=\"true\"\n  (panelScrolled)=\"loadMore()\"\n>\n  <ng-container *rxLet=\"$any(options$ | async); let options\">\n    <mat-option\n      *ngFor=\"let option of options\"\n      [ngClass]=\"{ 'wlcm-custom-option-content': optionTemplate }\"\n      [value]=\"option\"\n    >\n      @if (optionTemplate) {\n        <ng-container\n          *ngTemplateOutlet=\"optionTemplate; context: { $implicit: option }\"\n        ></ng-container>\n      } @else {\n        {{ option.viewValue }}\n      }\n    </mat-option>\n\n    <mat-option [disabled]=\"true\" *ngIf=\"options.length === 0\">\n      @if (noResultsTemplate()) {\n        <ng-container\n          *ngTemplateOutlet=\"\n            noResultsTemplate()!;\n            context: { $implicit: control.value, loading: loading$ | async }\n          \"\n        ></ng-container>\n      } @else {\n        <ng-container\n          *ngTemplateOutlet=\"\n            defaultNoResultsTemplate;\n            context: { $implicit: control.value, loading: loading$ | async }\n          \"\n        ></ng-container>\n      }\n    </mat-option>\n  </ng-container>\n</mat-autocomplete>\n\n<ng-template #defaultNoResultsTemplate let-loading=\"loading\">\n  @if (loading) {\n    Please wait...\n  } @else {\n    No results found\n  }\n</ng-template>\n" }]
-        }], ctorParameters: () => [{ type: i0.Injector }, { type: undefined, decorators: [{
-                    type: Inject,
-                    args: [WLCM_FORM_FIELD]
-                }] }], propDecorators: { fetchPaginatedOptions: [{
-                type: Input
-            }], label: [{
-                type: Input
-            }], required: [{
-                type: Input
-            }], placeholder: [{
-                type: Input
-            }], optionTemplate: [{
-                type: Input
-            }], queryParams: [{
-                type: Input,
-                args: [{ transform: (params) => cloneDeep(params) }]
-            }], inputElement: [{
-                type: ViewChild,
-                args: [WLCM_INPUT, { read: ElementRef }]
-            }], autocompleteTrigger: [{
-                type: ViewChild,
-                args: [MatAutocompleteTrigger]
-            }], autocomplete: [{
-                type: ViewChild,
-                args: [MatAutocomplete]
-            }] } });
+                    ], template: "<input\n  wlcmInput\n  type=\"text\"\n  [matAutocomplete]=\"autocomplete\"\n  [placeholder]=\"placeholder()\"\n  [formControl]=\"control\"\n  (blur)=\"blured()\"\n  />\n\n<mat-autocomplete\n  #autocomplete=\"matAutocomplete\"\n  wlcmAutocomplete\n  [disableRipple]=\"true\"\n  [displayWith]=\"displayWith\"\n  [hideSingleSelectionIndicator]=\"true\"\n  (panelScrolled)=\"loadMore()\"\n  >\n  <ng-container>\n    @for (option of options(); track option) {\n      <mat-option\n        [ngClass]=\"{ 'wlcm-custom-option-content': optionTemplate() }\"\n        [value]=\"option\"\n        >\n        @if (optionTemplate(); as optionTemplate) {\n          <ng-container\n            *ngTemplateOutlet=\"optionTemplate; context: { $implicit: option }\"\n          ></ng-container>\n        } @else {\n          {{ option.viewValue }}\n        }\n      </mat-option>\n    }\n\n    @if (options().length === 0) {\n      <mat-option [disabled]=\"true\">\n        @if (noResultsTemplate()) {\n          <ng-container\n          *ngTemplateOutlet=\"\n            noResultsTemplate()!;\n            context: { $implicit: control.value, loading: loading() }\n          \"\n          ></ng-container>\n        } @else {\n          <ng-container\n          *ngTemplateOutlet=\"\n            defaultNoResultsTemplate;\n            context: { $implicit: control.value, loading: loading() }\n          \"\n          ></ng-container>\n        }\n      </mat-option>\n    }\n  </ng-container>\n</mat-autocomplete>\n\n<ng-template #defaultNoResultsTemplate let-loading=\"loading\">\n  @if (loading) {\n    Please wait...\n  } @else {\n    No results found\n  }\n</ng-template>\n" }]
+        }], ctorParameters: () => [], propDecorators: { fetchPaginatedOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "fetchPaginatedOptions", required: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], optionTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionTemplate", required: false }] }], queryParams: [{ type: i0.Input, args: [{ isSignal: true, alias: "queryParams", required: false }] }], selectOptionFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectOptionFormat", required: false }] }], noResultsTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "noResultsTemplate", required: false }] }], selected: [{ type: i0.Output, args: ["selected"] }], inputElement: [{ type: i0.ViewChild, args: [i0.forwardRef(() => WLCM_INPUT), { ...{ read: ElementRef }, isSignal: true }] }], autocompleteTrigger: [{ type: i0.ViewChild, args: [i0.forwardRef(() => MatAutocompleteTrigger), { isSignal: true }] }], autocomplete: [{ type: i0.ViewChild, args: [i0.forwardRef(() => MatAutocomplete), { isSignal: true }] }] } });
 
-let WlcmCheckboxComponent = class WlcmCheckboxComponent {
-    constructor(changeDetectorRef, parentFormMember) {
-        this.changeDetectorRef = changeDetectorRef;
-        this.parentFormMember = parentFormMember;
-        this.value = input();
-        this.changed = new EventEmitter();
+class WlcmCheckboxComponent {
+    constructor() {
+        this.changeDetectorRef = inject(ChangeDetectorRef);
+        this.parentFormMember = inject(WLCM_FORM_CONTROL, { optional: true });
+        this.destroyRef = inject(DestroyRef);
+        this.value = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "value" }] : /* istanbul ignore next */ []));
+        this.changed = output();
         this.control = new FormControl(false);
         this.validate = () => null;
         if (this.parentFormMember) {
@@ -725,45 +681,38 @@ let WlcmCheckboxComponent = class WlcmCheckboxComponent {
         this.control.setValue(value);
     }
     handleStateChange() {
-        this.parentFormMember.stateChanges$.pipe(untilDestroyed(this)).subscribe(() => {
+        this.parentFormMember.stateChanges$.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(() => {
             this._validatorChanged?.();
             this.changeDetectorRef.markForCheck();
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: WlcmCheckboxComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: WLCM_FORM_CONTROL, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.9", type: WlcmCheckboxComponent, isStandalone: true, selector: "wlcm-checkbox", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { changed: "changed" }, host: { classAttribute: "wlcm-checkbox" }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: WlcmCheckboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.5", type: WlcmCheckboxComponent, isStandalone: true, selector: "wlcm-checkbox", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { changed: "changed" }, host: { classAttribute: "wlcm-checkbox" }, providers: [
             WLCM_FORM_CONTROL_PROVIDER,
             { provide: NG_VALIDATORS, useExisting: forwardRef(() => WlcmCheckboxComponent), multi: true },
             { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => WlcmCheckboxComponent), multi: true },
-        ], ngImport: i0, template: "<mat-checkbox [formControl]=\"control\" (change)=\"handleChange($event)\">\n  <ng-content></ng-content>\n</mat-checkbox>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i1$1.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] }); }
-};
-WlcmCheckboxComponent = __decorate([
-    UntilDestroy(),
-    __metadata("design:paramtypes", [ChangeDetectorRef, Object])
-], WlcmCheckboxComponent);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: WlcmCheckboxComponent, decorators: [{
+        ], ngImport: i0, template: "<mat-checkbox [formControl]=\"control\" (change)=\"handleChange($event)\">\n  <ng-content></ng-content>\n</mat-checkbox>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i1$1.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.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: WlcmCheckboxComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'wlcm-checkbox', host: { class: 'wlcm-checkbox' }, standalone: true, imports: [CommonModule, MatCheckboxModule, ReactiveFormsModule], providers: [
+            args: [{ selector: 'wlcm-checkbox', host: { class: 'wlcm-checkbox' }, imports: [MatCheckboxModule, ReactiveFormsModule], changeDetection: ChangeDetectionStrategy.OnPush, providers: [
                         WLCM_FORM_CONTROL_PROVIDER,
                         { provide: NG_VALIDATORS, useExisting: forwardRef(() => WlcmCheckboxComponent), multi: true },
                         { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => WlcmCheckboxComponent), multi: true },
                     ], template: "<mat-checkbox [formControl]=\"control\" (change)=\"handleChange($event)\">\n  <ng-content></ng-content>\n</mat-checkbox>\n" }]
-        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: undefined, decorators: [{
-                    type: Optional
-                }, {
-                    type: Inject,
-                    args: [WLCM_FORM_CONTROL]
-                }] }], propDecorators: { changed: [{
-                type: Output
-            }] } });
+        }], ctorParameters: () => [], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], changed: [{ type: i0.Output, args: ["changed"] }] } });
 
-let WlcmCheckboxGroupComponent = class WlcmCheckboxGroupComponent {
+class WlcmCheckboxGroupComponent {
     constructor() {
-        this.checkboxes = contentChildren(WlcmCheckboxComponent);
+        this.destroyRef = inject(DestroyRef);
+        this.checkboxes = contentChildren(WlcmCheckboxComponent, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "checkboxes" }] : /* istanbul ignore next */ []));
         this.checkboxesMap = computed(() => {
             return new Map(this.checkboxes().map((checkbox) => [checkbox.value(), checkbox]));
-        });
-        this.values = signal(new Set());
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "checkboxesMap" }] : /* istanbul ignore next */ []));
+        this.values = signal(new Set(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "values" }] : /* istanbul ignore next */ []));
         this.checkboxesListUpdated = new Subject();
         this.validate = () => null;
         effect(() => this.handleCheckboxesToggle(this.checkboxes()));
@@ -810,47 +759,44 @@ let WlcmCheckboxGroupComponent = class WlcmCheckboxGroupComponent {
             });
         };
         const changeHandlers = Array.from(checkboxes.values()).map((checkbox) => {
-            return checkbox.changed.asObservable().pipe(tap(() => handleCheck(checkbox)));
+            return outputToObservable(checkbox.changed).pipe(tap(() => handleCheck(checkbox)));
         });
         merge(...changeHandlers)
-            .pipe(untilDestroyed(this))
+            .pipe(takeUntilDestroyed(this.destroyRef))
             .pipe(takeUntil(this.checkboxesListUpdated))
             .subscribe();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: WlcmCheckboxGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.2.9", type: WlcmCheckboxGroupComponent, isStandalone: true, selector: "wlcm-checkbox-group", host: { classAttribute: "wlcm-checkbox-group" }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: WlcmCheckboxGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.0.5", type: WlcmCheckboxGroupComponent, isStandalone: true, selector: "wlcm-checkbox-group", host: { classAttribute: "wlcm-checkbox-group" }, providers: [
             { provide: NG_VALIDATORS, useExisting: forwardRef(() => WlcmCheckboxGroupComponent), multi: true },
             { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => WlcmCheckboxGroupComponent), multi: true },
-        ], queries: [{ propertyName: "checkboxes", predicate: WlcmCheckboxComponent, isSignal: true }], ngImport: i0, template: "<ng-content select=\"wlcm-checkbox\"></ng-content>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }] }); }
-};
-WlcmCheckboxGroupComponent = __decorate([
-    UntilDestroy(),
-    __metadata("design:paramtypes", [])
-], WlcmCheckboxGroupComponent);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: WlcmCheckboxGroupComponent, decorators: [{
+        ], queries: [{ propertyName: "checkboxes", predicate: WlcmCheckboxComponent, isSignal: true }], ngImport: i0, template: "<ng-content select=\"wlcm-checkbox\"></ng-content>\n", styles: [""], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: WlcmCheckboxGroupComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'wlcm-checkbox-group', host: { class: 'wlcm-checkbox-group' }, standalone: true, imports: [CommonModule], providers: [
+            args: [{ selector: 'wlcm-checkbox-group', host: { class: 'wlcm-checkbox-group' }, imports: [], changeDetection: ChangeDetectionStrategy.OnPush, providers: [
                         { provide: NG_VALIDATORS, useExisting: forwardRef(() => WlcmCheckboxGroupComponent), multi: true },
                         { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => WlcmCheckboxGroupComponent), multi: true },
                     ], template: "<ng-content select=\"wlcm-checkbox\"></ng-content>\n" }]
-        }], ctorParameters: () => [] });
+        }], ctorParameters: () => [], propDecorators: { checkboxes: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => WlcmCheckboxComponent), { isSignal: true }] }] } });
 
 class WlcmAutocompleteSuffixComponent {
     constructor() {
-        this.autocomplete = input.required();
+        this.autocomplete = input.required(/* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "autocomplete" }] : /* istanbul ignore next */ []));
         this.WlcmIconName = WlcmIconName;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: WlcmAutocompleteSuffixComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.9", type: WlcmAutocompleteSuffixComponent, isStandalone: true, selector: "wlcm-autocomplete-suffix", inputs: { autocomplete: { classPropertyName: "autocomplete", publicName: "autocomplete", isSignal: true, isRequired: true, transformFunction: null } }, host: { classAttribute: "wlcm-autocomplete-suffix" }, ngImport: i0, template: "<ng-container *rxLet=\"autocomplete().loading$ | async; let loading\">\n  @if (!loading) {\n    <ng-container [wlcmIcon]=\"WlcmIconName.CHEVRON_DOWN\"></ng-container>\n  }\n\n  <wlcm-loader [hidden]=\"!loading\"></wlcm-loader>\n</ng-container>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "directive", type: WlcmIconDirective, selector: "[wlcmIcon]", inputs: ["wlcmIcon", "wlcmIconStopPropagation"], outputs: ["wlcmIconClicked"] }, { kind: "component", type: WlcmLoaderComponent, selector: "wlcm-loader", inputs: ["hidden"] }, { kind: "directive", type: RxLet, selector: "[rxLet]", inputs: ["rxLet", "rxLetStrategy", "rxLetComplete", "rxLetError", "rxLetSuspense", "rxLetContextTrigger", "rxLetCompleteTrigger", "rxLetErrorTrigger", "rxLetSuspenseTrigger", "rxLetNextTrigger", "rxLetRenderCallback", "rxLetParent", "rxLetPatchZone"], outputs: ["rendered"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: WlcmAutocompleteSuffixComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: WlcmAutocompleteSuffixComponent, isStandalone: true, selector: "wlcm-autocomplete-suffix", inputs: { autocomplete: { classPropertyName: "autocomplete", publicName: "autocomplete", isSignal: true, isRequired: true, transformFunction: null } }, host: { classAttribute: "wlcm-autocomplete-suffix" }, ngImport: i0, template: "@let loading = autocomplete().loading$ | async;\n<ng-container>\n  @if (!loading) {\n    <ng-container [wlcmIcon]=\"WlcmIconName.CHEVRON_DOWN\"></ng-container>\n  }\n\n  <wlcm-loader [hidden]=\"!loading\"></wlcm-loader>\n</ng-container>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: WlcmIconDirective, selector: "[wlcmIcon]", inputs: ["wlcmIcon", "wlcmIconStopPropagation"], outputs: ["wlcmIconClicked"] }, { kind: "component", type: WlcmLoaderComponent, selector: "wlcm-loader", inputs: ["hidden", "diameter"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: WlcmAutocompleteSuffixComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: WlcmAutocompleteSuffixComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'wlcm-autocomplete-suffix', host: { class: 'wlcm-autocomplete-suffix' }, standalone: true, imports: [CommonModule, WlcmIconDirective, WlcmLoaderComponent, RxLet], template: "<ng-container *rxLet=\"autocomplete().loading$ | async; let loading\">\n  @if (!loading) {\n    <ng-container [wlcmIcon]=\"WlcmIconName.CHEVRON_DOWN\"></ng-container>\n  }\n\n  <wlcm-loader [hidden]=\"!loading\"></wlcm-loader>\n</ng-container>\n" }]
-        }] });
+            args: [{ selector: 'wlcm-autocomplete-suffix', host: { class: 'wlcm-autocomplete-suffix' }, imports: [CommonModule, WlcmIconDirective, WlcmLoaderComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "@let loading = autocomplete().loading$ | async;\n<ng-container>\n  @if (!loading) {\n    <ng-container [wlcmIcon]=\"WlcmIconName.CHEVRON_DOWN\"></ng-container>\n  }\n\n  <wlcm-loader [hidden]=\"!loading\"></wlcm-loader>\n</ng-container>\n" }]
+        }], propDecorators: { autocomplete: [{ type: i0.Input, args: [{ isSignal: true, alias: "autocomplete", required: true }] }] } });
 
 class WlcmSelectInputBinderDirective {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: WlcmSelectInputBinderDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.9", type: WlcmSelectInputBinderDirective, isStandalone: true, selector: "[wlcmSelectInputBinder]", providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: WlcmSelectInputBinderDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.5", type: WlcmSelectInputBinderDirective, isStandalone: true, selector: "[wlcmSelectInputBinder]", providers: [
             {
                 provide: WLCM_INPUT_BINDER,
                 useFactory: () => {
@@ -860,10 +806,9 @@ class WlcmSelectInputBinderDirective {
             },
         ], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: WlcmSelectInputBinderDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: WlcmSelectInputBinderDirective, decorators: [{
             type: Directive,
             args: [{
-                    standalone: true,
                     selector: '[wlcmSelectInputBinder]',
                     providers: [
                         {
@@ -886,45 +831,60 @@ const mergeConfig = (config) => {
     };
     return mergeWith({ ...DEFAULT_CONFIG }, config, customizer);
 };
-let WlcmSelectComponent = class WlcmSelectComponent {
+class WlcmSelectComponent {
     openPanel() {
-        this.matSelect.open();
-    }
-    constructor(zone, changeDetectorRef, scrollDetectionApi, formField, parentFormMember) {
-        this.zone = zone;
-        this.changeDetectorRef = changeDetectorRef;
-        this.scrollDetectionApi = scrollDetectionApi;
-        this.formField = formField;
-        this.parentFormMember = parentFormMember;
-        this.multiple = false;
-        this.placeholder = 'Not selected';
-        this.canSelect = (_) => true;
-        this.queryParams = { ...DEFAULT_QUERY_PARAMS };
-        this.paginated = input(false);
-        this.options = input([]);
-        this.paginatedOptions = signal([]);
-        this.selectOptionFormat = input('ValueOnly');
-        this.optionTemplate = input(null);
-        this.triggerTemplate = input();
-        this.isOptionDisabled = input(() => false);
+        this.matSelect()?.open();
+    }
+    constructor() {
+        this.multiple = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "multiple" }] : /* istanbul ignore next */ []));
+        this.placeholder = input('Not selected', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
+        this.fetchPaginatedOptions = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "fetchPaginatedOptions" }] : /* istanbul ignore next */ []));
+        this.canSelect = input((_) => true, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "canSelect" }] : /* istanbul ignore next */ []));
+        // queryParams is both a public input AND mutated internally (page pagination),
+        // so it can't be a plain read-only signal input. linkedSignal seeds a mutable
+        // working copy from the input (structuredClone so we never mutate the caller's
+        // object) and re-seeds if the input changes.
+        this.queryParams = input({ ...DEFAULT_QUERY_PARAMS }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "queryParams" }] : /* istanbul ignore next */ []));
+        this._queryParams = linkedSignal(() => structuredClone(this.queryParams()), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "_queryParams" }] : /* istanbul ignore next */ []));
+        this.paginated = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "paginated" }] : /* istanbul ignore next */ []));
+        this.options = input([], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
+        this.paginatedOptions = signal([], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "paginatedOptions" }] : /* istanbul ignore next */ []));
+        this.selectOptionFormat = input('ValueOnly', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "selectOptionFormat" }] : /* istanbul ignore next */ []));
+        this.optionTemplate = input(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "optionTemplate" }] : /* istanbul ignore next */ []));
+        this.triggerTemplate = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "triggerTemplate" }] : /* istanbul ignore next */ []));
+        this.isOptionDisabled = input(() => false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isOptionDisabled" }] : /* istanbul ignore next */ []));
         this.selectionChange = output();
         this.opened = output();
         this.closed = output();
-        this.value = signal(null);
-        this.disabled = signal(false);
+        this.value = signal(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+        this.disabled = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
         this.WlcmIconName = WlcmIconName;
         this._paginatedData = null;
         this._previousValue = null;
         this._optionsCache = new Set();
-        this.computedOptions = computed(() => {
-            const options = this.paginated() ? this.paginatedOptions() : this.options();
-            if (this.isOptionDisabled() && options.length > 0) {
-                this.updateOptionsStatus();
-            }
-            return options;
-        });
-        this.prefilledOptions = signal([]);
-        this.matOptions = viewChildren(MatOption);
+        this.computedOptions = computed(() => this.paginated() ? this.paginatedOptions() : this.options(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "computedOptions" }] : /* istanbul ignore next */ []));
+        this.prefilledOptions = signal([], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "prefilledOptions" }] : /* istanbul ignore next */ []));
+        this.matSelect = viewChild(MatSelect, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "matSelect" }] : /* istanbul ignore next */ []));
+        this.matOptions = viewChildren(MatOption, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "matOptions" }] : /* istanbul ignore next */ []));
         this._focusStream$ = new BehaviorSubject(EMPTY);
         this._blurStream$ = new BehaviorSubject(EMPTY);
         this.focus$ = this._focusStream$.pipe(switchMap((stream) => stream));
@@ -932,6 +892,11 @@ let WlcmSelectComponent = class WlcmSelectComponent {
         this.adjustedValue$ = new BehaviorSubject(null);
         this.viewReady$ = new Subject();
         this.selected$ = new Subject();
+        this.changeDetectorRef = inject(ChangeDetectorRef);
+        this.scrollDetectionApi = inject(ScrollDetectionApi);
+        this.formField = inject(WLCM_FORM_FIELD);
+        this.parentFormMember = inject(WLCM_FORM_CONTROL, { optional: true });
+        this.destroyRef = inject(DestroyRef);
         this.compareWith = (optionA, optionB) => {
             if (this.areOptionsEqual(optionA, optionB)) {
                 if (this.selectOptionFormat() === 'CompleteOption' && typeof optionB !== 'object') {
@@ -941,14 +906,24 @@ let WlcmSelectComponent = class WlcmSelectComponent {
             }
             return false;
         };
-        this.focus = () => this.matSelect.open();
+        this.focus = () => this.matSelect()?.open();
         this.isFocused = () => this.isOpen;
         if (this.parentFormMember) {
             this.handleStateChange();
         }
         this.handleAdjustedValue();
+        // Keep each rendered MatOption's disabled state in sync with the
+        // isOptionDisabled predicate. Runs as an effect (not inside computedOptions)
+        // because MatOption.disabled is a signal-backed setter as of Material 20 and
+        // writing to it from within a computed throws NG0600.
+        effect(() => {
+            const options = this.computedOptions();
+            if (this.isOptionDisabled() && options.length > 0) {
+                this.updateOptionsStatus();
+            }
+        });
         toObservable(this.paginated)
-            .pipe(untilDestroyed(this))
+            .pipe(takeUntilDestroyed(this.destroyRef))
             .subscribe((paginated) => {
             if (paginated)
                 this.loadPaginatedOptions();
@@ -956,15 +931,36 @@ let WlcmSelectComponent = class WlcmSelectComponent {
     }
     ngAfterViewInit() {
         this.viewReady$.next();
-        if (this.formField) {
-            this.matSelect._preferredOverlayOrigin = this.formField.inputContainer;
+        // At runtime the MatSelect view query always resolves; under
+        // jest-preset-angular the lookup can return undefined in the harness, so
+        // every access is guarded.
+        const matSelect = this.matSelect();
+        if (this.formField && matSelect) {
+            this.setPreferredOverlayOrigin(matSelect);
         }
-        this._focusStream$.next(this.matSelect._openedStream);
-        this._blurStream$.next(this.matSelect._closedStream);
+        if (matSelect) {
+            // Material exposes no public focus/blur streams for MatSelect. Derive both
+            // from the public openedChange emitter (true = opened/focus, false =
+            // closed/blur) instead of the private _openedStream/_closedStream.
+            this._focusStream$.next(matSelect.openedChange.pipe(filter(Boolean), map(() => undefined)));
+            this._blurStream$.next(matSelect.openedChange.pipe(filter((opened) => !opened), map(() => undefined)));
+        }
+    }
+    // MatSelect has no public API to override the overlay origin; _preferredOverlayOrigin
+    // is the only lever. Isolated here with a dev-mode assertion so a Material upgrade
+    // that renames/removes the field fails loudly instead of silently misplacing the panel.
+    setPreferredOverlayOrigin(matSelect) {
+        if (typeof ngDevMode !== 'undefined' && ngDevMode && !('_preferredOverlayOrigin' in matSelect)) {
+            throw new Error('WlcmSelect: MatSelect._preferredOverlayOrigin is no longer available — the overlay origin ' +
+                'override needs to be reworked for this @angular/material version.');
+        }
+        matSelect._preferredOverlayOrigin = this.formField.inputContainer;
     }
     select(event) {
         this.selected$.next();
-        this.matSelect.value = event.value;
+        const matSelect = this.matSelect();
+        if (matSelect)
+            matSelect.value = event.value;
         this.validateSelectedOption(event.value)
             .pipe(takeUntil(this.selected$))
             .subscribe((canSelect) => {
@@ -980,7 +976,9 @@ let WlcmSelectComponent = class WlcmSelectComponent {
         return (optionA?.value || optionA) === (optionB?.value || optionB);
     }
     revertPreviousValue() {
-        this.matSelect.value = this._previousValue;
+        const matSelect = this.matSelect();
+        if (matSelect)
+            matSelect.value = this._previousValue;
     }
     updateValue(value) {
         this.value.set(value);
@@ -988,7 +986,7 @@ let WlcmSelectComponent = class WlcmSelectComponent {
     }
     validateSelectedOption(value) {
         return new Observable((observer) => {
-            const response = this.canSelect(value);
+            const response = this.canSelect()(value);
             const source = response instanceof Observable ? response.pipe(first()) : of(response);
             source.subscribe((result) => {
                 observer.next(result);
@@ -1031,7 +1029,7 @@ let WlcmSelectComponent = class WlcmSelectComponent {
         return null;
     }
     get isOpen() {
-        return this.matSelect?.panelOpen ?? false;
+        return this.matSelect()?.panelOpen ?? false;
     }
     prepareValueForPatch(value) {
         const formatedValue = this.formatValue(value);
@@ -1061,9 +1059,9 @@ let WlcmSelectComponent = class WlcmSelectComponent {
         return { changed: false, value };
     }
     loadPaginatedOptions() {
-        this.queryParams.page = 1;
-        this.fetchPaginatedOptions(this.queryParams)
-            .pipe(untilDestroyed(this), first())
+        this._queryParams.update((params) => ({ ...params, page: 1 }));
+        this.fetchPaginatedOptions()(this._queryParams())
+            .pipe(takeUntilDestroyed(this.destroyRef), first())
             .subscribe((paginatedData) => {
             this._optionsCache.clear();
             this.cacheOptions(paginatedData.data);
@@ -1074,9 +1072,9 @@ let WlcmSelectComponent = class WlcmSelectComponent {
     loadMorePaginatedOptions() {
         if (!this._paginatedData || this._paginatedData.currPage + 1 > this._paginatedData.totalPages)
             return;
-        this.queryParams.page++;
-        this.fetchPaginatedOptions({ ...this.queryParams })
-            .pipe(untilDestroyed(this), first())
+        this._queryParams.update((params) => ({ ...params, page: params.page + 1 }));
+        this.fetchPaginatedOptions()({ ...this._queryParams() })
+            .pipe(takeUntilDestroyed(this.destroyRef), first())
             .subscribe((paginatedData) => {
             this.cacheOptions(paginatedData.data);
             this._paginatedData = paginatedData;
@@ -1105,15 +1103,19 @@ let WlcmSelectComponent = class WlcmSelectComponent {
         this.prefilledOptions.set(prefilledOptions);
     }
     handleScrollDown() {
-        const element = document.querySelector('.mat-mdc-select-panel');
-        this.zone.runOutsideAngular(() => {
-            this.scrollDetectionApi.onScrolledDown(element).subscribe(() => {
-                this.zone.run(() => this.loadMorePaginatedOptions());
-            });
-        });
+        const panel = this.matSelect()?.panel;
+        if (!panel)
+            return;
+        // ScrollDetectionApi is zone-free (fromEvent with passive listener); no NgZone
+        // dance needed under zoneless CD. panel.nativeElement replaces the old
+        // document.querySelector('.mat-mdc-select-panel') internal-DOM lookup.
+        this.scrollDetectionApi
+            .onScrolledDown(panel.nativeElement)
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe(() => this.loadMorePaginatedOptions());
     }
     handleStateChange() {
-        this.parentFormMember.stateChanges$.pipe(untilDestroyed(this)).subscribe(() => {
+        this.parentFormMember.stateChanges$.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(() => {
             this._validatorChanged?.();
             this.changeDetectorRef.markForCheck();
         });
@@ -1123,8 +1125,8 @@ let WlcmSelectComponent = class WlcmSelectComponent {
             .pipe(switchMap(() => this.adjustedValue$.pipe(filter(Boolean))))
             .subscribe((value) => this._changed?.(value));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: WlcmSelectComponent, deps: [{ token: i0.NgZone }, { token: i0.ChangeDetectorRef }, { token: i1$2.ScrollDetectionApi }, { token: WLCM_FORM_FIELD }, { token: WLCM_FORM_CONTROL, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.9", type: WlcmSelectComponent, isStandalone: true, selector: "wlcm-select", inputs: { multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: false, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: false, isRequired: false, transformFunction: null }, fetchPaginatedOptions: { classPropertyName: "fetchPaginatedOptions", publicName: "fetchPaginatedOptions", isSignal: false, isRequired: false, transformFunction: null }, canSelect: { classPropertyName: "canSelect", publicName: "canSelect", isSignal: false, isRequired: false, transformFunction: null }, queryParams: { classPropertyName: "queryParams", publicName: "queryParams", isSignal: false, isRequired: false, transformFunction: null }, paginated: { classPropertyName: "paginated", publicName: "paginated", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, selectOptionFormat: { classPropertyName: "selectOptionFormat", publicName: "selectOptionFormat", isSignal: true, isRequired: false, transformFunction: null }, optionTemplate: { classPropertyName: "optionTemplate", publicName: "optionTemplate", isSignal: true, isRequired: false, transformFunction: null }, triggerTemplate: { classPropertyName: "triggerTemplate", publicName: "triggerTemplate", isSignal: true, isRequired: false, transformFunction: null }, isOptionDisabled: { classPropertyName: "isOptionDisabled", publicName: "isOptionDisabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectionChange: "selectionChange", opened: "opened", closed: "closed" }, host: { listeners: { "click": "openPanel()" }, classAttribute: "wlcm-select" }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: WlcmSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: WlcmSelectComponent, isStandalone: true, selector: "wlcm-select", inputs: { multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, fetchPaginatedOptions: { classPropertyName: "fetchPaginatedOptions", publicName: "fetchPaginatedOptions", isSignal: true, isRequired: false, transformFunction: null }, canSelect: { classPropertyName: "canSelect", publicName: "canSelect", isSignal: true, isRequired: false, transformFunction: null }, queryParams: { classPropertyName: "queryParams", publicName: "queryParams", isSignal: true, isRequired: false, transformFunction: null }, paginated: { classPropertyName: "paginated", publicName: "paginated", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, selectOptionFormat: { classPropertyName: "selectOptionFormat", publicName: "selectOptionFormat", isSignal: true, isRequired: false, transformFunction: null }, optionTemplate: { classPropertyName: "optionTemplate", publicName: "optionTemplate", isSignal: true, isRequired: false, transformFunction: null }, triggerTemplate: { classPropertyName: "triggerTemplate", publicName: "triggerTemplate", isSignal: true, isRequired: false, transformFunction: null }, isOptionDisabled: { classPropertyName: "isOptionDisabled", publicName: "isOptionDisabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectionChange: "selectionChange", opened: "opened", closed: "closed" }, host: { listeners: { "click": "openPanel()" }, classAttribute: "wlcm-select" }, providers: [
             WLCM_FORM_CONTROL_PROVIDER,
             {
                 provide: MAT_SELECT_CONFIG,
@@ -1135,17 +1137,11 @@ let WlcmSelectComponent = class WlcmSelectComponent {
             },
             { provide: NG_VALIDATORS, useExisting: forwardRef(() => WlcmSelectComponent), multi: true },
             { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => WlcmSelectComponent), multi: true },
-        ], viewQueries: [{ propertyName: "matOptions", predicate: MatOption, descendants: true, isSignal: true }, { propertyName: "matSelect", first: true, predicate: MatSelect, descendants: true }], hostDirectives: [{ directive: WlcmSelectInputBinderDirective }], ngImport: i0, template: "<mat-select\n  #selectComponent\n  [value]=\"value()\"\n  [disabled]=\"disabled()\"\n  [multiple]=\"multiple\"\n  [disableRipple]=\"true\"\n  [placeholder]=\"placeholder\"\n  [hideSingleSelectionIndicator]=\"true\"\n  [ngClass]=\"{ focused: selectComponent.focused }\"\n  (selectionChange)=\"select($event)\"\n  [compareWith]=\"compareWith\"\n  (opened)=\"panelOpened()\"\n  (closed)=\"panelClosed()\"\n>\n  @if (triggerTemplate()) {\n    <mat-select-trigger>\n      <ng-container\n        *ngTemplateOutlet=\"\n          triggerTemplate()!;\n          context: $any({ $implicit: selectComponent.selected })\n        \"\n      ></ng-container>\n    </mat-select-trigger>\n  }\n\n  <mat-option\n    *ngFor=\"let option of prefilledOptions()\"\n    [value]=\"selectOptionFormat() === 'CompleteOption' ? option : option.value\"\n  >\n    <ng-container\n      [ngTemplateOutlet]=\"wlcmSelectOptionContent\"\n      [ngTemplateOutletContext]=\"{ $implicit: option }\"\n    ></ng-container>\n  </mat-option>\n\n  <mat-option\n    *ngFor=\"let option of computedOptions()\"\n    [value]=\"selectOptionFormat() === 'CompleteOption' ? option : option.value\"\n  >\n    <ng-container\n      [ngTemplateOutlet]=\"wlcmSelectOptionContent\"\n      [ngTemplateOutletContext]=\"{ $implicit: option }\"\n    ></ng-container>\n  </mat-option>\n</mat-select>\n\n<div class=\"wlcm-select-arrow\">\n  <ng-container\n    [wlcmIcon]=\"WlcmIconName.CHEVRON_DOWN\"\n    [wlcmIconStopPropagation]=\"false\"\n  ></ng-container>\n</div>\n\n<ng-template #wlcmSelectOptionContent let-option>\n  @if (optionTemplate()) {\n    <ng-container\n      *ngTemplateOutlet=\"optionTemplate(); context: $any({ $implicit: option })\"\n    ></ng-container>\n  } @else {\n    {{ option.viewValue }}\n  }\n</ng-template>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i4.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "directive", type: i4.MatSelectTrigger, selector: "mat-select-trigger" }, { kind: "component", type: i2.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: WlcmIconDirective, selector: "[wlcmIcon]", inputs: ["wlcmIcon", "wlcmIconStopPropagation"], outputs: ["wlcmIconClicked"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-};
-WlcmSelectComponent = __decorate([
-    UntilDestroy(),
-    __metadata("design:paramtypes", [NgZone,
-        ChangeDetectorRef,
-        ScrollDetectionApi, Object, Object])
-], WlcmSelectComponent);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: WlcmSelectComponent, decorators: [{
+        ], viewQueries: [{ propertyName: "matSelect", first: true, predicate: MatSelect, descendants: true, isSignal: true }, { propertyName: "matOptions", predicate: MatOption, descendants: true, isSignal: true }], hostDirectives: [{ directive: WlcmSelectInputBinderDirective }], ngImport: i0, template: "<mat-select\n  #selectComponent\n  [value]=\"value()\"\n  [disabled]=\"disabled()\"\n  [multiple]=\"multiple()\"\n  [disableRipple]=\"true\"\n  [placeholder]=\"placeholder()\"\n  [hideSingleSelectionIndicator]=\"true\"\n  [ngClass]=\"{ focused: selectComponent.focused }\"\n  (selectionChange)=\"select($event)\"\n  [compareWith]=\"compareWith\"\n  (opened)=\"panelOpened()\"\n  (closed)=\"panelClosed()\"\n  >\n  @if (triggerTemplate()) {\n    <mat-select-trigger>\n      <ng-container\n        *ngTemplateOutlet=\"\n          triggerTemplate()!;\n          context: $any({ $implicit: selectComponent.selected })\n        \"\n      ></ng-container>\n    </mat-select-trigger>\n  }\n\n  @for (option of prefilledOptions(); track option) {\n    <mat-option\n      [value]=\"selectOptionFormat() === 'CompleteOption' ? option : option.value\"\n      >\n      <ng-container\n        [ngTemplateOutlet]=\"wlcmSelectOptionContent\"\n        [ngTemplateOutletContext]=\"{ $implicit: option }\"\n      ></ng-container>\n    </mat-option>\n  }\n\n  @for (option of computedOptions(); track option) {\n    <mat-option\n      [value]=\"selectOptionFormat() === 'CompleteOption' ? option : option.value\"\n      >\n      <ng-container\n        [ngTemplateOutlet]=\"wlcmSelectOptionContent\"\n        [ngTemplateOutletContext]=\"{ $implicit: option }\"\n      ></ng-container>\n    </mat-option>\n  }\n</mat-select>\n\n<div class=\"wlcm-select-arrow\">\n  <ng-container\n    [wlcmIcon]=\"WlcmIconName.CHEVRON_DOWN\"\n    [wlcmIconStopPropagation]=\"false\"\n  ></ng-container>\n</div>\n\n<ng-template #wlcmSelectOptionContent let-option>\n  @if (optionTemplate()) {\n    <ng-container\n      *ngTemplateOutlet=\"optionTemplate(); context: $any({ $implicit: option })\"\n    ></ng-container>\n  } @else {\n    {{ option.viewValue }}\n  }\n</ng-template>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i3$1.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "directive", type: i3$1.MatSelectTrigger, selector: "mat-select-trigger" }, { kind: "component", type: i2.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: WlcmIconDirective, selector: "[wlcmIcon]", inputs: ["wlcmIcon", "wlcmIconStopPropagation"], outputs: ["wlcmIconClicked"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: WlcmSelectComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'wlcm-select', standalone: true, host: { class: 'wlcm-select' }, imports: [CommonModule, MatSelectModule, ReactiveFormsModule, WlcmIconDirective], changeDetection: ChangeDetectionStrategy.OnPush, hostDirectives: [WlcmSelectInputBinderDirective], providers: [
+            args: [{ selector: 'wlcm-select', host: { class: 'wlcm-select', '(click)': 'openPanel()' }, imports: [CommonModule, MatSelectModule, ReactiveFormsModule, WlcmIconDirective], changeDetection: ChangeDetectionStrategy.OnPush, hostDirectives: [WlcmSelectInputBinderDirective], providers: [
                         WLCM_FORM_CONTROL_PROVIDER,
                         {
                             provide: MAT_SELECT_CONFIG,
@@ -1156,43 +1152,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.9", ngImpor
                         },
                         { provide: NG_VALIDATORS, useExisting: forwardRef(() => WlcmSelectComponent), multi: true },
                         { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => WlcmSelectComponent), multi: true },
-                    ], template: "<mat-select\n  #selectComponent\n  [value]=\"value()\"\n  [disabled]=\"disabled()\"\n  [multiple]=\"multiple\"\n  [disableRipple]=\"true\"\n  [placeholder]=\"placeholder\"\n  [hideSingleSelectionIndicator]=\"true\"\n  [ngClass]=\"{ focused: selectComponent.focused }\"\n  (selectionChange)=\"select($event)\"\n  [compareWith]=\"compareWith\"\n  (opened)=\"panelOpened()\"\n  (closed)=\"panelClosed()\"\n>\n  @if (triggerTemplate()) {\n    <mat-select-trigger>\n      <ng-container\n        *ngTemplateOutlet=\"\n          triggerTemplate()!;\n          context: $any({ $implicit: selectComponent.selected })\n        \"\n      ></ng-container>\n    </mat-select-trigger>\n  }\n\n  <mat-option\n    *ngFor=\"let option of prefilledOptions()\"\n    [value]=\"selectOptionFormat() === 'CompleteOption' ? option : option.value\"\n  >\n    <ng-container\n      [ngTemplateOutlet]=\"wlcmSelectOptionContent\"\n      [ngTemplateOutletContext]=\"{ $implicit: option }\"\n    ></ng-container>\n  </mat-option>\n\n  <mat-option\n    *ngFor=\"let option of computedOptions()\"\n    [value]=\"selectOptionFormat() === 'CompleteOption' ? option : option.value\"\n  >\n    <ng-container\n      [ngTemplateOutlet]=\"wlcmSelectOptionContent\"\n      [ngTemplateOutletContext]=\"{ $implicit: option }\"\n    ></ng-container>\n  </mat-option>\n</mat-select>\n\n<div class=\"wlcm-select-arrow\">\n  <ng-container\n    [wlcmIcon]=\"WlcmIconName.CHEVRON_DOWN\"\n    [wlcmIconStopPropagation]=\"false\"\n  ></ng-container>\n</div>\n\n<ng-template #wlcmSelectOptionContent let-option>\n  @if (optionTemplate()) {\n    <ng-container\n      *ngTemplateOutlet=\"optionTemplate(); context: $any({ $implicit: option })\"\n    ></ng-container>\n  } @else {\n    {{ option.viewValue }}\n  }\n</ng-template>\n" }]
-        }], ctorParameters: () => [{ type: i0.NgZone }, { type: i0.ChangeDetectorRef }, { type: i1$2.ScrollDetectionApi }, { type: undefined, decorators: [{
-                    type: Inject,
-                    args: [WLCM_FORM_FIELD]
-                }] }, { type: undefined, decorators: [{
-                    type: Optional
-                }, {
-                    type: Inject,
-                    args: [WLCM_FORM_CONTROL]
-                }] }], propDecorators: { multiple: [{
-                type: Input
-            }], placeholder: [{
-                type: Input
-            }], fetchPaginatedOptions: [{
-                type: Input
-            }], canSelect: [{
-                type: Input
-            }], queryParams: [{
-                type: Input
-            }], matSelect: [{
-                type: ViewChild,
-                args: [MatSelect]
-            }], openPanel: [{
-                type: HostListener,
-                args: ['click']
-            }] } });
+                    ], template: "<mat-select\n  #selectComponent\n  [value]=\"value()\"\n  [disabled]=\"disabled()\"\n  [multiple]=\"multiple()\"\n  [disableRipple]=\"true\"\n  [placeholder]=\"placeholder()\"\n  [hideSingleSelectionIndicator]=\"true\"\n  [ngClass]=\"{ focused: selectComponent.focused }\"\n  (selectionChange)=\"select($event)\"\n  [compareWith]=\"compareWith\"\n  (opened)=\"panelOpened()\"\n  (closed)=\"panelClosed()\"\n  >\n  @if (triggerTemplate()) {\n    <mat-select-trigger>\n      <ng-container\n        *ngTemplateOutlet=\"\n          triggerTemplate()!;\n          context: $any({ $implicit: selectComponent.selected })\n        \"\n      ></ng-container>\n    </mat-select-trigger>\n  }\n\n  @for (option of prefilledOptions(); track option) {\n    <mat-option\n      [value]=\"selectOptionFormat() === 'CompleteOption' ? option : option.value\"\n      >\n      <ng-container\n        [ngTemplateOutlet]=\"wlcmSelectOptionContent\"\n        [ngTemplateOutletContext]=\"{ $implicit: option }\"\n      ></ng-container>\n    </mat-option>\n  }\n\n  @for (option of computedOptions(); track option) {\n    <mat-option\n      [value]=\"selectOptionFormat() === 'CompleteOption' ? option : option.value\"\n      >\n      <ng-container\n        [ngTemplateOutlet]=\"wlcmSelectOptionContent\"\n        [ngTemplateOutletContext]=\"{ $implicit: option }\"\n      ></ng-container>\n    </mat-option>\n  }\n</mat-select>\n\n<div class=\"wlcm-select-arrow\">\n  <ng-container\n    [wlcmIcon]=\"WlcmIconName.CHEVRON_DOWN\"\n    [wlcmIconStopPropagation]=\"false\"\n  ></ng-container>\n</div>\n\n<ng-template #wlcmSelectOptionContent let-option>\n  @if (optionTemplate()) {\n    <ng-container\n      *ngTemplateOutlet=\"optionTemplate(); context: $any({ $implicit: option })\"\n    ></ng-container>\n  } @else {\n    {{ option.viewValue }}\n  }\n</ng-template>\n" }]
+        }], ctorParameters: () => [], propDecorators: { multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], fetchPaginatedOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "fetchPaginatedOptions", required: false }] }], canSelect: [{ type: i0.Input, args: [{ isSignal: true, alias: "canSelect", required: false }] }], queryParams: [{ type: i0.Input, args: [{ isSignal: true, alias: "queryParams", required: false }] }], paginated: [{ type: i0.Input, args: [{ isSignal: true, alias: "paginated", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], selectOptionFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectOptionFormat", required: false }] }], optionTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionTemplate", required: false }] }], triggerTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "triggerTemplate", required: false }] }], isOptionDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "isOptionDisabled", required: false }] }], selectionChange: [{ type: i0.Output, args: ["selectionChange"] }], opened: [{ type: i0.Output, args: ["opened"] }], closed: [{ type: i0.Output, args: ["closed"] }], matSelect: [{ type: i0.ViewChild, args: [i0.forwardRef(() => MatSelect), { isSignal: true }] }], matOptions: [{ type: i0.ViewChildren, args: [i0.forwardRef(() => MatOption), { isSignal: true }] }] } });
 
 class WlcmFormFieldHintDirective {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: WlcmFormFieldHintDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.9", type: WlcmFormFieldHintDirective, isStandalone: true, selector: "[wlcmFormFieldHint]", host: { classAttribute: "wlcm-hint" }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: WlcmFormFieldHintDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.5", type: WlcmFormFieldHintDirective, isStandalone: true, selector: "[wlcmFormFieldHint]", host: { classAttribute: "wlcm-hint" }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: WlcmFormFieldHintDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: WlcmFormFieldHintDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[wlcmFormFieldHint]',
                     host: { class: 'wlcm-hint' },
-                    standalone: true,
                 }]
         }] });
 
@@ -1213,8 +1184,8 @@ const components = [
     WlcmLabelComponent,
 ];
 class WlcmFormsModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: WlcmFormsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.9", ngImport: i0, type: WlcmFormsModule, imports: [WlcmFormFieldComponent,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: WlcmFormsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.0.5", ngImport: i0, type: WlcmFormsModule, imports: [WlcmFormFieldComponent,
             WlcmAutocompleteComponent,
             WlcmAutocompleteSuffixComponent,
             WlcmCheckboxGroupComponent,
@@ -1235,9 +1206,12 @@ class WlcmFormsModule {
             WlcmFormFieldSuffixDirective,
             WlcmFormFieldPrefixDirective,
             WlcmFormFieldHintDirective, MatRadioModule] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: WlcmFormsModule, providers: [{ provide: MAT_RADIO_DEFAULT_OPTIONS, useValue: { color: 'primary' } }], imports: [components, MatRadioModule, MatRadioModule] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: WlcmFormsModule, providers: [{ provide: MAT_RADIO_DEFAULT_OPTIONS, useValue: { color: 'primary' } }], imports: [WlcmAutocompleteComponent,
+            WlcmAutocompleteSuffixComponent,
+            WlcmCheckboxComponent,
+            WlcmSelectComponent, MatRadioModule, MatRadioModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: WlcmFormsModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: WlcmFormsModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [...components, ...directives, MatRadioModule],