@ethlete/cdk 3.18.3 → 3.19.1

package/fesm2022/ethlete-cdk.mjs

@@ -4,10 +4,11 @@ import { AsyncPipe, NgIf, NgClass, NgTemplateOutlet, NgForOf, NgFor, NgComponent
 import * as i0 from '@angular/core';
 import { Component, ViewEncapsulation, ChangeDetectionStrategy, Directive, InjectionToken, booleanAttribute, Input, ContentChild, ContentChildren, inject, ElementRef, Injector, HostBinding, computed, signal, Optional, Inject, Injectable, SkipSelf, HostListener, ViewContainerRef, EventEmitter, NgZone, isDevMode, Output, NgModule, ChangeDetectorRef, ViewChild, runInInjectionContext, TemplateRef, forwardRef, LOCALE_ID, numberAttribute, ViewChildren, Renderer2, Attribute } from '@angular/core';
 import * as i1$2 from '@ethlete/core';
-import { LetDirective, createDestroy, ScrollObserverFirstElementDirective, ScrollObserverLastElementDirective, Memo, createReactiveBindings, signalHostClasses, AnimatedIfDirective, AnimatedLifecycleDirective, SmartBlockScrollStrategy, RouterStateService, ANIMATED_LIFECYCLE_TOKEN, nextFrame, elementCanScroll, equal, ViewportService, AnimatedOverlayDirective, ClickObserverService, FocusVisibleService, cloneFormGroup, getFormGroupValue, ObserveVisibilityDirective, signalVisibilityChangeClasses, IS_EMAIL, MUST_MATCH, IS_ARRAY_NOT_EMPTY, AT_LEAST_ONE_REQUIRED, ResizeObserverService, createFlipAnimation, RuntimeError, SelectionModel, ActiveSelectionModel, KeyPressManager, scrollToElement, isEmptyArray, isObjectArray, isPrimitiveArray, ClickOutsideDirective, ObserveContentDirective, clamp, DELAYABLE_TOKEN, ObserveResizeDirective, getElementVisibleStates, IS_ACTIVE_ELEMENT, IS_ELEMENT, CursorDragScrollDirective, ObserveScrollStateDirective, IsElementDirective, IsActiveElementDirective, ScrollObserverIgnoreTargetDirective, TypedQueryList } from '@ethlete/core';
-import { BehaviorSubject, startWith, map, switchMap, combineLatest, pairwise, tap, takeUntil, skip, of, Subject, filter, take, merge, skipUntil, defer, fromEvent, partition, debounceTime as debounceTime$1, distinctUntilChanged as distinctUntilChanged$1, withLatestFrom, skipWhile, catchError, throwError, firstValueFrom, timer, Subscription, Observable } from 'rxjs';
+import { LetDirective, createDestroy, ScrollObserverFirstElementDirective, ScrollObserverLastElementDirective, Memo, signalHostAttributes, signalHostClasses, AnimatedIfDirective, AnimatedLifecycleDirective, SmartBlockScrollStrategy, RouterStateService, ANIMATED_LIFECYCLE_TOKEN, nextFrame, elementCanScroll, equal, ViewportService, AnimatedOverlayDirective, ClickObserverService, FocusVisibleService, cloneFormGroup, getFormGroupValue, ObserveVisibilityDirective, signalVisibilityChangeClasses, IS_EMAIL, MUST_MATCH, IS_ARRAY_NOT_EMPTY, AT_LEAST_ONE_REQUIRED, switchQueryListChanges, signalAttributes, ResizeObserverService, createFlipAnimation, RuntimeError, SelectionModel, ActiveSelectionModel, KeyPressManager, signalClasses, scrollToElement, isEmptyArray, isObjectArray, isPrimitiveArray, ClickOutsideDirective, ObserveContentDirective, clamp, DELAYABLE_TOKEN, ObserveResizeDirective, getElementVisibleStates, IS_ACTIVE_ELEMENT, IS_ELEMENT, CursorDragScrollDirective, ObserveScrollStateDirective, IsElementDirective, IsActiveElementDirective, ScrollObserverIgnoreTargetDirective, TypedQueryList } from '@ethlete/core';
+import { BehaviorSubject, startWith, map, switchMap, combineLatest, pairwise, tap, takeUntil, skip, of, Subject, filter, take, merge, skipUntil, defer, fromEvent, partition, debounceTime as debounceTime$1, Observable, distinctUntilChanged as distinctUntilChanged$1, withLatestFrom, skipWhile, catchError, throwError, firstValueFrom, timer, Subscription } from 'rxjs';
 import { trigger, state, style, transition, animate } from '@angular/animations';
 import { __decorate, __metadata } from 'tslib';
+import { toSignal, takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { extractQuery, isQueryStateLoading, isQueryStateSuccess, isQueryStateFailure, QueryDirective, shouldRetryRequest, isClassValidatorError, isSymfonyFormViolationListError } from '@ethlete/query';
 import { CdkDialogContainer, Dialog, DialogConfig, DIALOG_SCROLL_STRATEGY_PROVIDER as DIALOG_SCROLL_STRATEGY_PROVIDER$1 } from '@angular/cdk/dialog';
 import * as i1$1 from '@angular/cdk/a11y';
@@ -17,12 +18,11 @@ import { ViewportRuler, STANDARD_DROPDOWN_BELOW_POSITIONS, Overlay, OverlayConfi
 import { ESCAPE, hasModifierKey, UP_ARROW, DOWN_ARROW, LEFT_ARROW, RIGHT_ARROW, ENTER, SPACE, TAB as TAB$1, BACKSPACE, A, PAGE_DOWN, PAGE_UP, END, HOME } from '@angular/cdk/keycodes';
 import * as i1$4 from '@angular/cdk/bidi';
 import { Directionality } from '@angular/cdk/bidi';
-import { coerceBooleanProperty, coerceCssPixelValue, _isNumberValue } from '@angular/cdk/coercion';
+import { coerceBooleanProperty, coerceCssPixelValue, coerceElement, _isNumberValue } from '@angular/cdk/coercion';
 import * as i2$1 from '@angular/cdk/platform';
 import { _getEventTarget } from '@angular/cdk/platform';
 import { startWith as startWith$1, debounceTime, distinctUntilChanged, takeUntil as takeUntil$1, skip as skip$1, filter as filter$1, mergeMap, mapTo, mergeAll, switchMap as switchMap$1, take as take$1 } from 'rxjs/operators';
 import { UniqueSelectionDispatcher, _VIEW_REPEATER_STRATEGY, _RecycleViewRepeaterStrategy, _DisposeViewRepeaterStrategy, DataSource } from '@angular/cdk/collections';
-import { toSignal } from '@angular/core/rxjs-interop';
 import { AutofillMonitor } from '@angular/cdk/text-field';
 import { FormControl, NgControl, Validators, NG_VALUE_ACCESSOR } from '@angular/forms';
 import { Title } from '@angular/platform-browser';
@@ -1027,27 +1027,11 @@ class ButtonDirective {
         this._disabled$ = new BehaviorSubject(false);
         this._type$ = new BehaviorSubject('button');
         this._pressed$ = new BehaviorSubject(false);
-        this._bindings = createReactiveBindings({
-            attribute: ['disabled', 'aria-disabled'],
-            observable: this.disabled$.pipe(map((disabled) => ({
-                render: disabled,
-                value: true,
-            }))),
-        }, {
-            attribute: ['tabindex'],
-            observable: this.disabled$.pipe(map((disabled) => ({
-                render: disabled && this.isAnchor,
-                value: -1,
-            }))),
-        }, {
-            attribute: ['type'],
-            observable: this.type$.pipe(map((type) => ({
-                render: this.isButton,
-                value: type,
-            }))),
-        }, {
-            attribute: ['aria-pressed'],
-            observable: this._pressed$,
+        this.hostAttributeBindings = signalHostAttributes({
+            'disabled aria-disabled': toSignal(this.disabled$),
+            'aria-pressed': toSignal(this._pressed$),
+            ...(this.isAnchor ? { tabindex: toSignal(this.disabled$.pipe(map((disabled) => (disabled ? -1 : 0)))) } : {}),
+            ...(this.isButton ? { type: toSignal(this.type$) } : {}),
         });
     }
     get disabled() {
@@ -1075,10 +1059,10 @@ class ButtonDirective {
         this._pressed$.next(booleanAttribute(value));
     }
     _removeDisabledBindings() {
-        this._bindings.remove('disabled', 'aria-disabled');
+        this.hostAttributeBindings.remove('disabled', 'aria-disabled');
     }
     _removeTabIndexBindings() {
-        this._bindings.remove('tabindex');
+        this.hostAttributeBindings.remove('tabindex');
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: ButtonDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
     static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.5", type: ButtonDirective, isStandalone: true, inputs: { disabled: "disabled", type: "type", pressed: "pressed" }, exportAs: ["etButton"], ngImport: i0 }); }
@@ -1133,7 +1117,6 @@ class QueryButtonDirective {
         classList.remove(CLASSES.success);
         classList.remove(CLASSES.failure);
         classList.remove(CLASSES.loading);
-        this._bindings.reset();
         const query = extractQuery(this._query$.value);
         if (!query) {
             return;
@@ -1184,15 +1167,9 @@ class QueryButtonDirective {
         this._skipFailure = false;
         this._skipLoading = false;
         this._query$ = new BehaviorSubject(null);
-        this._bindings = createReactiveBindings({
-            attribute: ['disabled', 'aria-disabled'],
-            observable: combineLatest([this._button.disabled$, this.showFailure$, this.showSuccess$, this.isLoading$]).pipe(map(([disabled, showFailure, showSuccess, isLoading]) => ({
-                render: disabled || showFailure || showSuccess || isLoading,
-                value: true,
-            }))),
-        }, {
-            attribute: ['aria-live'],
-            observable: combineLatest([
+        this.hostAttributeBindings = signalHostAttributes({
+            'disabled aria-disabled': toSignal(combineLatest([this._button.disabled$, this.showFailure$, this.showSuccess$, this.isLoading$]).pipe(map(([disabled, showFailure, showSuccess, isLoading]) => disabled || showFailure || showSuccess || isLoading))),
+            'aria-live': toSignal(combineLatest([
                 this.query$.pipe(map((q) => extractQuery(q)), switchMap((q) => q?.state$ ?? of(null))),
                 this.didLoadOnce$,
             ]).pipe(map(([state, didLoadOnce]) => {
@@ -1200,11 +1177,8 @@ class QueryButtonDirective {
                 if (isQueryStateLoading(state) || isQueryStateSuccess(state) || isQueryStateFailure(state) || didLoadOnce) {
                     value = 'assertive';
                 }
-                return {
-                    render: true,
-                    value,
-                };
-            })),
+                return value;
+            }))),
         });
         this._button._removeDisabledBindings();
     }
@@ -5683,10 +5657,11 @@ class RichFilterHostComponent {
         this.buttonSlot$ = new BehaviorSubject(null);
         this.content$ = new BehaviorSubject(null);
         this.top$ = new BehaviorSubject(this._implicitTop);
-        this.buttonSlotVisibilityChanges$ = this.buttonSlot$.pipe(switchMap((buttonSlot) => buttonSlot?.visibilityObserver.etObserveVisibility.pipe(startWith(null)) ?? of(null)));
-        this.contentVisibilityChanges$ = this.content$.pipe(switchMap((content) => content?.visibilityObserver.etObserveVisibility.pipe(startWith(null)) ?? of(null)));
+        this.buttonSlotVisibilityChanges$ = this.buttonSlot$.pipe(switchMap((buttonSlot) => buttonSlot?.visibilityObserver.currentVisibility$ ?? of(null)));
+        this.contentVisibilityChanges$ = this.content$.pipe(switchMap((content) => content?.visibilityObserver.currentVisibility$ ?? of(null)));
         this.buttonSlotVisibilityChanges = toSignal(this.buttonSlotVisibilityChanges$, { requireSync: true });
         this.contentVisibilityChanges = toSignal(this.contentVisibilityChanges$, { requireSync: true });
+        this.topElementRef = toSignal(this.top$.pipe(map((top) => top.elementRef)), { requireSync: true });
         signalHostClasses({
             ...signalVisibilityChangeClasses({
                 name: 'et-rich-filter-host-button',
@@ -5853,8 +5828,25 @@ class InputStateService {
         this.valueIsTruthy = toSignal(this.valueIsTruthy$, { requireSync: true });
         this.valueIsFalsy$ = this.value$.pipe(map((value) => !value));
         this.valueIsFalsy = toSignal(this.valueIsFalsy$, { requireSync: true });
-        this.valueIsEmpty$ = combineLatest([this.value$, this.autofilled$]).pipe(map(([value, autofilled]) => (value === null || value === undefined || value === '' || (Array.isArray(value) && !value.length)) &&
-            !autofilled));
+        /**
+         * Selects might have a option that is "null".
+         * This helper can be used to enhance the detection of empty values.
+         * The input is empty if the helper returns a falsy value and the value itself is falsy or an empty array.
+         */
+        this.isEmptyHelper$ = new BehaviorSubject(undefined);
+        this.isEmptyHelper = toSignal(this.isEmptyHelper$, { requireSync: true });
+        this.valueIsEmpty$ = combineLatest([
+            this.value$,
+            this.autofilled$,
+            this.isEmptyHelper$.pipe(switchMap((isEmptyHelper) => (isEmptyHelper instanceof Observable ? isEmptyHelper : of(isEmptyHelper)))),
+        ]).pipe(map(([value, autofilled, isEmptyHelper]) => {
+            const defaultIsEmpty = (value === null || value === undefined || value === '' || (Array.isArray(value) && !value.length)) &&
+                !autofilled;
+            if (isEmptyHelper !== undefined) {
+                return !isEmptyHelper && defaultIsEmpty;
+            }
+            return defaultIsEmpty;
+        }));
         this.valueIsEmpty = toSignal(this.valueIsEmpty$, { requireSync: true });
         this.errors$ = new BehaviorSubject(null);
         this.errors = toSignal(this.errors$, { requireSync: true });
@@ -6334,6 +6326,9 @@ class InputDirective {
         }
         this._inputStateService.shouldDisplayError$.next(value);
     }
+    _setEmptyHelper(value) {
+        this._inputStateService.isEmptyHelper$.next(value);
+    }
     _detectControlRequiredValidationChanges() {
         const hasRequired = this.control.hasValidator(Validators.required) ?? false;
         const hasRequiredTrue = this.control.hasValidator(Validators.requiredTrue) ?? false;
@@ -6617,27 +6612,14 @@ const WRITEABLE_INPUT_VALUE_ACCESSOR = {
 class WriteableInputDirective {
     constructor() {
         this._inputStateService = inject(InputStateService);
-        this._bindings = createReactiveBindings({
-            attribute: 'class.et-required',
-            observable: this._inputStateService.required$,
-        }, {
-            attribute: 'class.et-disabled',
-            observable: this._inputStateService.disabled$,
-        }, {
-            attribute: 'class.et-value-is-truthy',
-            observable: this._inputStateService.valueIsTruthy$,
-        }, {
-            attribute: 'class.et-value-is-falsy',
-            observable: this._inputStateService.valueIsFalsy$,
-        }, {
-            attribute: 'class.et-empty',
-            observable: this._inputStateService.valueIsEmpty$,
-        }, {
-            attribute: 'class.et-should-display-error',
-            observable: this._inputStateService.shouldDisplayError$,
-        }, {
-            attribute: 'class.et-autofilled',
-            observable: this._inputStateService.autofilled$,
+        this.hostClassBindings = signalHostClasses({
+            'et-required': this._inputStateService.required,
+            'et-disabled': this._inputStateService.disabled,
+            'et-value-is-truthy': this._inputStateService.valueIsTruthy,
+            'et-value-is-falsy': this._inputStateService.valueIsFalsy,
+            'et-empty': this._inputStateService.valueIsEmpty,
+            'et-should-display-error': this._inputStateService.shouldDisplayError,
+            'et-autofilled': this._inputStateService.autofilled,
         });
     }
     writeValue(value) {
@@ -6681,12 +6663,9 @@ class ErrorComponent {
         this.errorText$ = new BehaviorSubject(null);
         this.id = `et-error-${_uniqueIdCounter++}`;
         this._errors = null;
-        this._bindings = createReactiveBindings({
-            attribute: 'class.et-error--has-errors',
-            observable: this.errorText$.pipe(map((v) => !!v)),
-        }, {
-            attribute: 'class.cdk-visually-hidden',
-            observable: this._dynamicFormGroupOrField.hideErrorMessage$,
+        this.hostClassBindings = signalHostClasses({
+            'et-error--has-errors': toSignal(this.errorText$),
+            'cdk-visually-hidden': toSignal(this._dynamicFormGroupOrField.hideErrorMessage$),
         });
     }
     get errors() {
@@ -6725,19 +6704,21 @@ const CHECKBOX_FIELD_TOKEN = new InjectionToken('ET_CHECKBOX_FIELD_DIRECTIVE_TOK
 class CheckboxFieldDirective {
     constructor() {
         this.inputState = inject(InputStateService);
-        this._bindings = createReactiveBindings();
-    }
-    ngAfterContentInit() {
-        if (!this._checkbox) {
-            return;
-        }
-        this._bindings.push({
-            attribute: 'class.et-checkbox-field--indeterminate',
-            observable: this._checkbox.changes.pipe(startWith(this._checkbox)).pipe(switchMap((checkboxes) => combineLatest(checkboxes.filter((cb) => !!cb).map((checkbox) => checkbox.indeterminate$))), map((checked) => checked.some((value) => value))),
+        this._checkbox$ = new BehaviorSubject(null);
+        this.hostClassBindings = signalHostClasses({
+            'et-checkbox-field--indeterminate': toSignal(this._checkbox$.pipe(switchQueryListChanges(), switchMap((checkboxes) => {
+                if (!checkboxes?.length) {
+                    return of(null);
+                }
+                return combineLatest(checkboxes.map((checkbox) => checkbox.indeterminate$)).pipe(map((indeterminateStates) => indeterminateStates.some((isIndeterminate) => isIndeterminate)));
+            }))),
         });
     }
+    set checkbox(checkbox) {
+        this._checkbox$.next(checkbox);
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: CheckboxFieldDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.5", type: CheckboxFieldDirective, isStandalone: true, providers: [{ provide: CHECKBOX_FIELD_TOKEN, useExisting: CheckboxFieldDirective }], queries: [{ propertyName: "_checkbox", predicate: i0.forwardRef(function () { return CHECKBOX_TOKEN; }), descendants: true }], exportAs: ["etCheckboxGroup"], ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.5", type: CheckboxFieldDirective, isStandalone: true, providers: [{ provide: CHECKBOX_FIELD_TOKEN, useExisting: CheckboxFieldDirective }], queries: [{ propertyName: "checkbox", predicate: i0.forwardRef(function () { return CHECKBOX_TOKEN; }), descendants: true }], exportAs: ["etCheckboxGroup"], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: CheckboxFieldDirective, decorators: [{
             type: Directive,
@@ -6746,7 +6727,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.5", ngImpor
                     providers: [{ provide: CHECKBOX_FIELD_TOKEN, useExisting: CheckboxFieldDirective }],
                     exportAs: 'etCheckboxGroup',
                 }]
-        }], propDecorators: { _checkbox: [{
+        }], propDecorators: { checkbox: [{
                 type: ContentChildren,
                 args: [forwardRef(() => CHECKBOX_TOKEN), { descendants: true }]
             }] } });
@@ -6757,15 +6738,10 @@ class CheckboxDirective {
         this.input = inject(INPUT_TOKEN);
         this.checked$ = this.input.value$.pipe(map((value) => !!value));
         this.indeterminate$ = new BehaviorSubject(false);
-        this._bindings = createReactiveBindings({
-            attribute: ['class.et-checkbox--checked'],
-            observable: this.checked$,
-        }, {
-            attribute: ['class.et-checkbox--disabled'],
-            observable: this.input.disabled$,
-        }, {
-            attribute: ['class.et-checkbox--indeterminate'],
-            observable: combineLatest([this.checked$, this.indeterminate$]).pipe(map(([checked, indeterminate]) => !checked && indeterminate)),
+        this.hostClassBindings = signalHostClasses({
+            'et-checkbox--checked': toSignal(this.checked$),
+            'et-checkbox--disabled': toSignal(this.input.disabled$),
+            'et-checkbox--indeterminate': toSignal(combineLatest([this.checked$, this.indeterminate$]).pipe(map(([checked, indeterminate]) => !checked && indeterminate))),
         });
     }
     _onInputInteraction(event) {
@@ -6873,16 +6849,8 @@ class CheckboxGroupControlDirective {
         this.checkbox = inject(CHECKBOX_TOKEN);
         this.input = inject(INPUT_TOKEN);
         this.group = inject(CHECKBOX_GROUP_TOKEN);
-        this._bindings = createReactiveBindings();
-    }
-    ngAfterContentInit() {
-        this._bindings.push({
-            attribute: ['aria-controls'],
-            elementRef: this.input.nativeInputRef?.element,
-            observable: this.group.checkboxesWithoutGroupCtrl$.pipe(map((checkboxes) => ({
-                render: true,
-                value: checkboxes.map((checkbox) => checkbox.input.id).join(' '),
-            }))) ?? of(false),
+        this.inputAttributeBindings = signalAttributes(this.input.nativeInputRef$.pipe(map((el) => el?.element)), {
+            'aria-controls': toSignal(this.group.checkboxesWithoutGroupCtrl$.pipe(map((checkboxes) => checkboxes.map((checkbox) => checkbox.input.id).join(' ')))),
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: CheckboxGroupControlDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
@@ -6946,12 +6914,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.5", ngImpor
 class DecoratedFormFieldBase {
     constructor() {
         this._formFieldStateService = inject(FormFieldStateService);
-        this._bindings = createReactiveBindings({
-            attribute: 'class.et-form-field--has-prefix',
-            observable: this._formFieldStateService.hasPrefix$,
-        }, {
-            attribute: 'class.et-form-field--has-suffix',
-            observable: this._formFieldStateService.hasSuffix$,
+        this.hostClassBindings = signalHostClasses({
+            'et-form-field--has-prefix': this._formFieldStateService.hasPrefix,
+            'et-form-field--has-suffix': this._formFieldStateService.hasSuffix,
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: DecoratedFormFieldBase, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
@@ -6979,35 +6944,37 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.5", ngImpor
             }] } });
 
 class DecoratedInputBase extends InputBase {
+    set inputPrefix(inputPrefix) {
+        this.inputPrefix$.next(inputPrefix);
+    }
+    set inputSuffix(inputSuffix) {
+        this.inputSuffix$.next(inputSuffix);
+    }
     constructor() {
-        super(...arguments);
+        super();
         this._formFieldStateService = inject(FormFieldStateService);
         this._destroy$ = createDestroy();
-        this._bindings = createReactiveBindings({
-            attribute: 'class.et-input--has-prefix',
-            observable: this._formFieldStateService.hasPrefix$,
-        }, {
-            attribute: 'class.et-input--has-suffix',
-            observable: this._formFieldStateService.hasSuffix$,
+        this.inputPrefix$ = new BehaviorSubject(null);
+        this.inputSuffix$ = new BehaviorSubject(null);
+        this.hasPrefix$ = this.inputPrefix$.pipe(switchQueryListChanges(), map((list) => !!list && list?.length > 0));
+        this.hasSuffix$ = this.inputSuffix$.pipe(switchQueryListChanges(), map((list) => !!list && list?.length > 0));
+        this.hostClassBindings = signalHostClasses({
+            'et-input--has-prefix': toSignal(this.hasPrefix$),
+            'et-input--has-suffix': toSignal(this.hasSuffix$),
         });
+        this.hasPrefix$
+            .pipe(takeUntilDestroyed(), tap((hasPrefix) => this._formFieldStateService.hasPrefix$.next(hasPrefix)))
+            .subscribe();
+        this.hasSuffix$
+            .pipe(takeUntilDestroyed(), tap((hasSuffix) => this._formFieldStateService.hasSuffix$.next(hasSuffix)))
+            .subscribe();
     }
-    ngAfterContentInit() {
-        if (!this.inputPrefix || !this.inputSuffix) {
-            return;
-        }
-        this.inputPrefix.changes
-            .pipe(takeUntil(this._destroy$), startWith(this.inputPrefix), map((list) => list.length > 0))
-            .subscribe(this._formFieldStateService.hasPrefix$);
-        this.inputSuffix.changes
-            .pipe(takeUntil(this._destroy$), startWith(this.inputSuffix), map((list) => list.length > 0))
-            .subscribe(this._formFieldStateService.hasSuffix$);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: DecoratedInputBase, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: DecoratedInputBase, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
     static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.5", type: DecoratedInputBase, queries: [{ propertyName: "inputPrefix", predicate: INPUT_PREFIX_TOKEN }, { propertyName: "inputSuffix", predicate: INPUT_SUFFIX_TOKEN }], usesInheritance: true, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: DecoratedInputBase, decorators: [{
             type: Directive
-        }], propDecorators: { inputPrefix: [{
+        }], ctorParameters: function () { return []; }, propDecorators: { inputPrefix: [{
                 type: ContentChildren,
                 args: [INPUT_PREFIX_TOKEN]
             }], inputSuffix: [{
@@ -7638,12 +7605,9 @@ class RadioDirective {
         this._disabled$ = new BehaviorSubject(false);
         this.checked$ = combineLatest([this.input.value$, this._value$]).pipe(map(([inputValue, value]) => inputValue === value));
         this.disabled$ = combineLatest([this.input.disabled$, this._disabled$]).pipe(map(([inputDisabled, disabled]) => inputDisabled || disabled));
-        this._bindings = createReactiveBindings({
-            attribute: ['class.et-radio--checked'],
-            observable: this.checked$,
-        }, {
-            attribute: ['class.et-radio--disabled'],
-            observable: this.disabled$,
+        this.hostClassBindings = signalHostClasses({
+            'et-radio--checked': toSignal(this.disabled$),
+            'et-radio--disabled': toSignal(this.disabled$),
         });
     }
     get value() {
@@ -7691,23 +7655,18 @@ const RADIO_FIELD_TOKEN = new InjectionToken('ET_RADIO_FIELD_DIRECTIVE_TOKEN');
 class RadioFieldDirective {
     constructor() {
         this.inputState = inject(InputStateService);
-        this._bindings = createReactiveBindings();
-    }
-    ngAfterContentInit() {
-        if (!this._radio) {
-            return;
-        }
-        this._bindings.push({
-            attribute: 'class.et-radio-field--checked',
-            observable: this._radio.changes.pipe(startWith(this._radio)).pipe(switchMap((radios) => combineLatest(radios.filter((radio) => !!radio).map((radio) => radio.checked$))), map((checked) => checked.some((value) => value))),
-        });
-        this._bindings.push({
-            attribute: 'class.et-radio-field--disabled',
-            observable: this._radio.changes.pipe(startWith(this._radio)).pipe(switchMap((radios) => combineLatest(radios.filter((radio) => !!radio).map((radio) => radio.disabled$))), map((disabled) => disabled.some((value) => value))),
+        this._radio$ = new BehaviorSubject(null);
+        this.radioQueryList$ = this._radio$.pipe(switchQueryListChanges());
+        this.hostClassBindings = signalHostClasses({
+            'et-radio-field--checked': toSignal(this.radioQueryList$.pipe(switchMap((radios) => (radios?.length ? combineLatest(radios.map((radio) => radio.disabled$)) : of([]))), map((checked) => checked.some((value) => value)))),
+            'et-radio-field--disabled': toSignal(this.radioQueryList$.pipe(switchMap((radios) => (radios?.length ? combineLatest(radios.map((radio) => radio.disabled$)) : of([]))), map((disabled) => disabled.some((value) => value)))),
         });
     }
+    set radio(radio) {
+        this._radio$.next(radio);
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: RadioFieldDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.5", type: RadioFieldDirective, isStandalone: true, providers: [{ provide: RADIO_FIELD_TOKEN, useExisting: RadioFieldDirective }], queries: [{ propertyName: "_radio", predicate: i0.forwardRef(function () { return RADIO_TOKEN; }), descendants: true }], exportAs: ["etRadioField"], ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.5", type: RadioFieldDirective, isStandalone: true, providers: [{ provide: RADIO_FIELD_TOKEN, useExisting: RadioFieldDirective }], queries: [{ propertyName: "radio", predicate: i0.forwardRef(function () { return RADIO_TOKEN; }), descendants: true }], exportAs: ["etRadioField"], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: RadioFieldDirective, decorators: [{
             type: Directive,
@@ -7716,7 +7675,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.5", ngImpor
                     providers: [{ provide: RADIO_FIELD_TOKEN, useExisting: RadioFieldDirective }],
                     exportAs: 'etRadioField',
                 }]
-        }], propDecorators: { _radio: [{
+        }], propDecorators: { radio: [{
                 type: ContentChildren,
                 args: [forwardRef(() => RADIO_TOKEN), { descendants: true }]
             }] } });
@@ -7727,14 +7686,8 @@ class RadioGroupDirective {
     constructor() {
         this._formGroupStateService = inject(FormGroupStateService);
         this.name = `et-radio-group-${++nextUniqueId$3}`;
-        this._bindings = createReactiveBindings({
-            attribute: 'aria-labelledby',
-            observable: this._formGroupStateService.describedBy$.pipe(map((describedBy) => {
-                return {
-                    render: !!describedBy,
-                    value: `${describedBy}`,
-                };
-            })),
+        this.hostAttributeBindings = signalHostAttributes({
+            'aria-labelledby': toSignal(this._formGroupStateService.describedBy$),
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: RadioGroupDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
@@ -7835,12 +7788,9 @@ class SegmentedButtonDirective {
         this._disabled$ = new BehaviorSubject(false);
         this.checked$ = combineLatest([this.input.value$, this._value$]).pipe(map(([inputValue, value]) => inputValue === value));
         this.disabled$ = combineLatest([this.input.disabled$, this._disabled$]).pipe(map(([inputDisabled, disabled]) => inputDisabled || disabled));
-        this._bindings = createReactiveBindings({
-            attribute: ['class.et-segmented-button--checked'],
-            observable: this.checked$,
-        }, {
-            attribute: ['class.et-segmented-button--disabled'],
-            observable: this.disabled$,
+        this.hostClassBindings = signalHostClasses({
+            'et-segmented-button--checked': toSignal(this.checked$),
+            'et-segmented-button--disabled': toSignal(this.disabled$),
         });
     }
     get value() {
@@ -7897,23 +7847,18 @@ const SEGMENTED_BUTTON_FIELD_TOKEN = new InjectionToken('ET_SEGMENTED_BUTTON_FIE
 class SegmentedButtonFieldDirective {
     constructor() {
         this.inputState = inject(InputStateService);
-        this._bindings = createReactiveBindings();
-    }
-    ngAfterContentInit() {
-        if (!this._segmentedButton) {
-            return;
-        }
-        this._bindings.push({
-            attribute: 'class.et-segmented-button-field--checked',
-            observable: this._segmentedButton.changes.pipe(startWith(this._segmentedButton)).pipe(switchMap((buttons) => combineLatest(buttons.filter((radio) => !!radio).map((button) => button.checked$))), map((checked) => checked.some((value) => value))),
-        });
-        this._bindings.push({
-            attribute: 'class.et-segmented-button-field--disabled',
-            observable: this._segmentedButton.changes.pipe(startWith(this._segmentedButton)).pipe(switchMap((buttons) => combineLatest(buttons.filter((radio) => !!radio).map((button) => button.disabled$))), map((disabled) => disabled.some((value) => value))),
+        this._segmentedButton$ = new BehaviorSubject(null);
+        this.segmentedButtonQueryList$ = this._segmentedButton$.pipe(switchQueryListChanges());
+        this.hostClassBindings = signalHostClasses({
+            'et-segmented-button-field--checked': toSignal(this.segmentedButtonQueryList$.pipe(switchMap((buttons) => (buttons?.length ? combineLatest(buttons.map((radio) => radio.disabled$)) : of([]))), map((checked) => checked.some((value) => value)))),
+            'et-segmented-button-field--disabled': toSignal(this.segmentedButtonQueryList$.pipe(switchMap((buttons) => (buttons?.length ? combineLatest(buttons.map((radio) => radio.disabled$)) : of([]))), map((disabled) => disabled.some((value) => value)))),
         });
     }
+    set segmentedButton(segmentedButton) {
+        this._segmentedButton$.next(segmentedButton);
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: SegmentedButtonFieldDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.5", type: SegmentedButtonFieldDirective, isStandalone: true, providers: [{ provide: SEGMENTED_BUTTON_FIELD_TOKEN, useExisting: SegmentedButtonFieldDirective }], queries: [{ propertyName: "_segmentedButton", predicate: i0.forwardRef(function () { return SEGMENTED_BUTTON_TOKEN; }), descendants: true }], exportAs: ["etSegmentedButtonField"], ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.5", type: SegmentedButtonFieldDirective, isStandalone: true, providers: [{ provide: SEGMENTED_BUTTON_FIELD_TOKEN, useExisting: SegmentedButtonFieldDirective }], queries: [{ propertyName: "segmentedButton", predicate: i0.forwardRef(function () { return SEGMENTED_BUTTON_TOKEN; }), descendants: true }], exportAs: ["etSegmentedButtonField"], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: SegmentedButtonFieldDirective, decorators: [{
             type: Directive,
@@ -7922,7 +7867,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.5", ngImpor
                     providers: [{ provide: SEGMENTED_BUTTON_FIELD_TOKEN, useExisting: SegmentedButtonFieldDirective }],
                     exportAs: 'etSegmentedButtonField',
                 }]
-        }], propDecorators: { _segmentedButton: [{
+        }], propDecorators: { segmentedButton: [{
                 type: ContentChildren,
                 args: [forwardRef(() => SEGMENTED_BUTTON_TOKEN), { descendants: true }]
             }] } });
@@ -7935,14 +7880,8 @@ class SegmentedButtonGroupDirective {
         this._inputStateService = inject(InputStateService);
         this._destroy$ = createDestroy();
         this.name = `et-segmented-button-group-${++nextUniqueId$2}`;
-        this._bindings = createReactiveBindings({
-            attribute: 'aria-labelledby',
-            observable: this._formGroupStateService.describedBy$.pipe(map((describedBy) => {
-                return {
-                    render: !!describedBy,
-                    value: `${describedBy}`,
-                };
-            })),
+        this.hostAttributeBindings = signalHostAttributes({
+            'aria-labelledby': toSignal(this._formGroupStateService.describedBy$),
         });
     }
     ngAfterContentInit() {
@@ -8077,7 +8016,7 @@ const SegmentedButtonImports = [
 const SELECT_FIELD_TOKEN = new InjectionToken('ET_SELECT_FIELD_DIRECTIVE_TOKEN');
 class SelectFieldDirective {
     constructor() {
-        this._bindings = createReactiveBindings();
+        this.elementRef = inject(ElementRef);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: SelectFieldDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
     static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.5", type: SelectFieldDirective, isStandalone: true, providers: [{ provide: SELECT_FIELD_TOKEN, useExisting: SelectFieldDirective }], exportAs: ["etSelectField"], ngImport: i0 }); }
@@ -8525,6 +8464,7 @@ class ComboboxDirective {
         this.activeOptionId$ = new BehaviorSubject(null);
         this._currentFilter$ = new BehaviorSubject('');
         this.isOpen$ = this._animatedOverlay.isMounted$;
+        this.isOpen = toSignal(this.isOpen$);
         this._selectionModel = new SelectionModel();
         this._activeSelectionModel = new ActiveSelectionModel();
         this._backspaceKeyPressManager = new KeyPressManager(BACKSPACE);
@@ -8539,21 +8479,16 @@ class ComboboxDirective {
         this._bodyErrorTemplate$ = new BehaviorSubject(null);
         this._bodyEmptyTemplate$ = new BehaviorSubject(null);
         this._bodyMoreItemsHintTemplate$ = new BehaviorSubject(null);
-        this._bindings = createReactiveBindings({
-            attribute: 'class.et-combobox--loading',
-            observable: this._loading$,
-        }, {
-            attribute: 'class.et-combobox--error',
-            observable: this._error$.pipe(map((v) => !!v)),
-        }, {
-            attribute: 'class.et-combobox--open',
-            observable: this.isOpen$,
-        }, {
-            attribute: 'class.et-select-field--multiple',
-            observable: this.multiple$,
-        }, {
-            attribute: 'class.et-select-field--open',
-            observable: this.isOpen$,
+        this.hostClassBindings = signalHostClasses({
+            'et-combobox--loading': toSignal(this._loading$),
+            'et-combobox--error': toSignal(this._error$.pipe(map((v) => !!v))),
+            'et-combobox--open': toSignal(this.isOpen$),
+            'et-select-field--multiple': toSignal(this.multiple$),
+            'et-select-field--open': this.isOpen,
+        });
+        this.fieldHostClassBindings = signalClasses(this._selectField.elementRef, {
+            'et-select-field--open': toSignal(this.isOpen$),
+            'et-select-field--multiple': toSignal(this.multiple$),
         });
         this._comboboxBodyComponent = null;
         //#endregion
@@ -8575,14 +8510,7 @@ class ComboboxDirective {
         this._animatedOverlay.placement = 'bottom';
         this._animatedOverlay.fallbackPlacements = ['bottom', 'top'];
         this._animatedOverlay.autoResize = true;
-        this._selectField._bindings.push({
-            attribute: 'class.et-select-field--open',
-            observable: this.isOpen$,
-        });
-        this._selectField._bindings.push({
-            attribute: 'class.et-select-field--multiple',
-            observable: this.multiple$,
-        });
+        this._input._setEmptyHelper(this._currentFilter$);
     }
     ngOnInit() {
         this._initDispatchFilterChanges();
@@ -9025,27 +8953,14 @@ class ComboboxOptionComponent {
         this.disabled$ = this._option$.pipe(map((opt) => isOptionDisabled(opt)));
         this.selected$ = this._option$.pipe(switchMap((opt) => this.combobox.isOptionSelected(opt)));
         this.active$ = this._option$.pipe(switchMap((opt) => this.combobox.isOptionActive(opt)));
-        this._bindings = createReactiveBindings({
-            attribute: 'class.et-combobox-option--selected',
-            observable: this.selected$,
-        }, {
-            attribute: 'class.et-combobox-option--disabled',
-            observable: this.disabled$,
-        }, {
-            attribute: 'class.et-combobox-option--active',
-            observable: this.active$,
-        }, {
-            attribute: 'aria-selected',
-            observable: this.selected$.pipe(map((selected) => ({
-                render: true,
-                value: selected,
-            }))),
-        }, {
-            attribute: 'aria-diabled',
-            observable: this.disabled$.pipe(map((selected) => ({
-                render: true,
-                value: selected,
-            }))),
+        this.hostClassBindings = signalHostClasses({
+            'et-combobox-option--selected': toSignal(this.selected$),
+            'et-combobox-option--disabled': toSignal(this.disabled$),
+            'et-combobox-option--active': toSignal(this.active$),
+        });
+        this.hostAttributeBindings = signalHostAttributes({
+            'aria-selected': toSignal(this.selected$),
+            'aria-disabled': toSignal(this.disabled$),
         });
     }
     get option() {
@@ -9100,24 +9015,13 @@ class ComboboxBodyComponent {
         this._clickOutside = inject(ClickOutsideDirective);
         this.combobox = inject(COMBOBOX_TOKEN);
         this._options$ = new BehaviorSubject(null);
-        this._bindings = createReactiveBindings({
-            attribute: 'class.et-combobox-body--loading',
-            observable: this.combobox.loading$,
-        }, {
-            attribute: 'class.et-combobox-body--multiple',
-            observable: this.combobox.multiple$,
-        }, {
-            attribute: 'aria-multiselectable',
-            observable: this.combobox.multiple$.pipe(map((multiple) => ({
-                render: true,
-                value: multiple,
-            }))),
-        }, {
-            attribute: 'aria-labelledby',
-            observable: this.combobox._input.labelId$.pipe(map((labelId) => ({
-                render: !!labelId,
-                value: labelId,
-            }))),
+        this.hostClassBindings = signalHostClasses({
+            'et-combobox-body--loading': toSignal(this.combobox.loading$),
+            'et-combobox-body--multiple': toSignal(this.combobox.multiple$),
+        });
+        this.hostAttributeBindings = signalHostAttributes({
+            'aria-multiselectable': toSignal(this.combobox.multiple$),
+            'aria-labelledby': toSignal(this.combobox._input.labelId$),
         });
         this._bodyTemplate = null;
         this.trackByFn = (index, item) => this.combobox._selectionModel.getKey(item);
@@ -9136,7 +9040,7 @@ class ComboboxBodyComponent {
                 provide: COMBOBOX_BODY_TOKEN,
                 useExisting: ComboboxBodyComponent,
             },
-        ], viewQueries: [{ propertyName: "_containerElementRef", first: true, predicate: ["containerElement"], descendants: true, read: ElementRef, static: true }, { propertyName: "_animatedLifecycle", first: true, predicate: ANIMATED_LIFECYCLE_TOKEN, descendants: true, static: true }, { propertyName: "_options", predicate: ComboboxOptionComponent, descendants: true }], hostDirectives: [{ directive: i1$2.ClickOutsideDirective }], ngImport: i0, template: "<div #containerElement class=\"et-combobox-body-container\" etAnimatedLifecycle>\n  <ng-container *etLet=\"combobox.options$ | async as options\">\n    <ng-container *ngIf=\"!options?.length && !combobox.error && !combobox.loading\">\n      <ng-container *ngIf=\"combobox.customBodyEmptyTpl$ | async as tpl; else componentOrNone\">\n        <ng-container *ngTemplateOutlet=\"tpl\" />\n      </ng-container>\n      <ng-template #componentOrNone>\n        <ng-container *ngIf=\"combobox.customBodyEmptyComponent$ | async as comp; else default\">\n          <ng-container *ngComponentOutlet=\"comp\" />\n        </ng-container>\n        <ng-template #default>\n          <p class=\"et-combobox-body--empty\">{{ combobox._tempEmptyText }}</p>\n        </ng-template>\n      </ng-template>\n    </ng-container>\n\n    <ng-container *ngIf=\"combobox.error && !combobox.loading\">\n      <ng-container *ngIf=\"combobox.customBodyErrorTpl$ | async as tpl; else componentOrNone\">\n        <ng-container *ngTemplateOutlet=\"tpl; context: { error: combobox.error }\" />\n      </ng-container>\n      <ng-template #componentOrNone>\n        <ng-container *ngIf=\"combobox.customBodyErrorComponent$ | async as comp\">\n          <ng-container *ngComponentOutlet=\"comp; inputs: { error: combobox.error }\" />\n        </ng-container>\n      </ng-template>\n    </ng-container>\n\n    <ng-container *ngIf=\"combobox.loading\">\n      <ng-container *ngIf=\"combobox.customBodyLoadingTpl$ | async as tpl; else componentOrNone\">\n        <ng-container *ngTemplateOutlet=\"tpl\" />\n      </ng-container>\n      <ng-template #componentOrNone>\n        <ng-container *ngIf=\"combobox.customBodyLoadingComponent$ | async as comp\">\n          <ng-container *ngComponentOutlet=\"comp\" />\n        </ng-container>\n      </ng-template>\n    </ng-container>\n\n    <et-combobox-option *ngFor=\"let option of options; trackBy: trackByFn\" [option]=\"option\" />\n\n    <ng-container *ngIf=\"options?.length && combobox.showBodyMoreItemsHint\">\n      <ng-container *ngIf=\"combobox.customBodyMoreItemsHintTpl$ | async as tpl; else componentOrNone\">\n        <ng-container *ngTemplateOutlet=\"tpl\" />\n      </ng-container>\n      <ng-template #componentOrNone>\n        <ng-container *ngIf=\"combobox.customBodyMoreItemsHintComponent$ | async as comp; else default\">\n          <ng-container *ngComponentOutlet=\"comp\" />\n        </ng-container>\n        <ng-template #default>\n          <p *ngIf=\"combobox.bodyMoreItemsHintText\" class=\"et-combobox-body--more-items-hint\">\n            {{ combobox.bodyMoreItemsHintText }}\n          </p>\n        </ng-template>\n      </ng-template>\n    </ng-container>\n  </ng-container>\n</div>\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: ComboboxOptionComponent, selector: "et-combobox-option", inputs: ["option"] }, { kind: "directive", type: LetDirective, selector: "[etLet]", inputs: ["etLet"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "directive", type: AnimatedLifecycleDirective, selector: "[etAnimatedLifecycle]", exportAs: ["etAnimatedLifecycle"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+        ], viewQueries: [{ propertyName: "_containerElementRef", first: true, predicate: ["containerElement"], descendants: true, read: ElementRef, static: true }, { propertyName: "_animatedLifecycle", first: true, predicate: ANIMATED_LIFECYCLE_TOKEN, descendants: true, static: true }, { propertyName: "_options", predicate: ComboboxOptionComponent, descendants: true }], hostDirectives: [{ directive: i1$2.ClickOutsideDirective }], ngImport: i0, template: "<div #containerElement class=\"et-combobox-body-container\" etAnimatedLifecycle>\n  <ng-container *etLet=\"combobox.options$ | async as options\">\n    <ng-container *ngIf=\"!options?.length && !combobox.error && !combobox.loading\">\n      <ng-container *ngIf=\"combobox.customBodyEmptyTpl$ | async as tpl; else componentOrNone\">\n        <ng-container *ngTemplateOutlet=\"tpl\" />\n      </ng-container>\n      <ng-template #componentOrNone>\n        <ng-container *ngIf=\"combobox.customBodyEmptyComponent$ | async as comp; else default\">\n          <ng-container *ngComponentOutlet=\"comp\" />\n        </ng-container>\n        <ng-template #default>\n          <p class=\"et-combobox-body--empty\">{{ combobox._tempEmptyText }}</p>\n        </ng-template>\n      </ng-template>\n    </ng-container>\n\n    <ng-container *ngIf=\"combobox.error && !combobox.loading\">\n      <ng-container *ngIf=\"combobox.customBodyErrorTpl$ | async as tpl; else componentOrNone\">\n        <ng-container *ngTemplateOutlet=\"tpl; context: { error: combobox.error }\" />\n      </ng-container>\n      <ng-template #componentOrNone>\n        <ng-container *ngIf=\"combobox.customBodyErrorComponent$ | async as comp\">\n          <ng-container *ngComponentOutlet=\"comp; inputs: { error: combobox.error }\" />\n        </ng-container>\n      </ng-template>\n    </ng-container>\n\n    <ng-container *ngIf=\"combobox.loading$ | async\">\n      <ng-container *ngIf=\"combobox.customBodyLoadingTpl$ | async as tpl; else componentOrNone\">\n        <ng-container *ngTemplateOutlet=\"tpl\" />\n      </ng-container>\n      <ng-template #componentOrNone>\n        <ng-container *ngIf=\"combobox.customBodyLoadingComponent$ | async as comp\">\n          <ng-container *ngComponentOutlet=\"comp\" />\n        </ng-container>\n      </ng-template>\n    </ng-container>\n\n    <et-combobox-option *ngFor=\"let option of options; trackBy: trackByFn\" [option]=\"option\" />\n\n    <ng-container *ngIf=\"options?.length && combobox.showBodyMoreItemsHint\">\n      <ng-container *ngIf=\"combobox.customBodyMoreItemsHintTpl$ | async as tpl; else componentOrNone\">\n        <ng-container *ngTemplateOutlet=\"tpl\" />\n      </ng-container>\n      <ng-template #componentOrNone>\n        <ng-container *ngIf=\"combobox.customBodyMoreItemsHintComponent$ | async as comp; else default\">\n          <ng-container *ngComponentOutlet=\"comp\" />\n        </ng-container>\n        <ng-template #default>\n          <p *ngIf=\"combobox.bodyMoreItemsHintText\" class=\"et-combobox-body--more-items-hint\">\n            {{ combobox.bodyMoreItemsHintText }}\n          </p>\n        </ng-template>\n      </ng-template>\n    </ng-container>\n  </ng-container>\n</div>\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: ComboboxOptionComponent, selector: "et-combobox-option", inputs: ["option"] }, { kind: "directive", type: LetDirective, selector: "[etLet]", inputs: ["etLet"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "directive", type: AnimatedLifecycleDirective, selector: "[etAnimatedLifecycle]", exportAs: ["etAnimatedLifecycle"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: ComboboxBodyComponent, decorators: [{
             type: Component,
@@ -9159,7 +9063,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.5", ngImpor
                             provide: COMBOBOX_BODY_TOKEN,
                             useExisting: ComboboxBodyComponent,
                         },
-                    ], template: "<div #containerElement class=\"et-combobox-body-container\" etAnimatedLifecycle>\n  <ng-container *etLet=\"combobox.options$ | async as options\">\n    <ng-container *ngIf=\"!options?.length && !combobox.error && !combobox.loading\">\n      <ng-container *ngIf=\"combobox.customBodyEmptyTpl$ | async as tpl; else componentOrNone\">\n        <ng-container *ngTemplateOutlet=\"tpl\" />\n      </ng-container>\n      <ng-template #componentOrNone>\n        <ng-container *ngIf=\"combobox.customBodyEmptyComponent$ | async as comp; else default\">\n          <ng-container *ngComponentOutlet=\"comp\" />\n        </ng-container>\n        <ng-template #default>\n          <p class=\"et-combobox-body--empty\">{{ combobox._tempEmptyText }}</p>\n        </ng-template>\n      </ng-template>\n    </ng-container>\n\n    <ng-container *ngIf=\"combobox.error && !combobox.loading\">\n      <ng-container *ngIf=\"combobox.customBodyErrorTpl$ | async as tpl; else componentOrNone\">\n        <ng-container *ngTemplateOutlet=\"tpl; context: { error: combobox.error }\" />\n      </ng-container>\n      <ng-template #componentOrNone>\n        <ng-container *ngIf=\"combobox.customBodyErrorComponent$ | async as comp\">\n          <ng-container *ngComponentOutlet=\"comp; inputs: { error: combobox.error }\" />\n        </ng-container>\n      </ng-template>\n    </ng-container>\n\n    <ng-container *ngIf=\"combobox.loading\">\n      <ng-container *ngIf=\"combobox.customBodyLoadingTpl$ | async as tpl; else componentOrNone\">\n        <ng-container *ngTemplateOutlet=\"tpl\" />\n      </ng-container>\n      <ng-template #componentOrNone>\n        <ng-container *ngIf=\"combobox.customBodyLoadingComponent$ | async as comp\">\n          <ng-container *ngComponentOutlet=\"comp\" />\n        </ng-container>\n      </ng-template>\n    </ng-container>\n\n    <et-combobox-option *ngFor=\"let option of options; trackBy: trackByFn\" [option]=\"option\" />\n\n    <ng-container *ngIf=\"options?.length && combobox.showBodyMoreItemsHint\">\n      <ng-container *ngIf=\"combobox.customBodyMoreItemsHintTpl$ | async as tpl; else componentOrNone\">\n        <ng-container *ngTemplateOutlet=\"tpl\" />\n      </ng-container>\n      <ng-template #componentOrNone>\n        <ng-container *ngIf=\"combobox.customBodyMoreItemsHintComponent$ | async as comp; else default\">\n          <ng-container *ngComponentOutlet=\"comp\" />\n        </ng-container>\n        <ng-template #default>\n          <p *ngIf=\"combobox.bodyMoreItemsHintText\" class=\"et-combobox-body--more-items-hint\">\n            {{ combobox.bodyMoreItemsHintText }}\n          </p>\n        </ng-template>\n      </ng-template>\n    </ng-container>\n  </ng-container>\n</div>\n" }]
+                    ], template: "<div #containerElement class=\"et-combobox-body-container\" etAnimatedLifecycle>\n  <ng-container *etLet=\"combobox.options$ | async as options\">\n    <ng-container *ngIf=\"!options?.length && !combobox.error && !combobox.loading\">\n      <ng-container *ngIf=\"combobox.customBodyEmptyTpl$ | async as tpl; else componentOrNone\">\n        <ng-container *ngTemplateOutlet=\"tpl\" />\n      </ng-container>\n      <ng-template #componentOrNone>\n        <ng-container *ngIf=\"combobox.customBodyEmptyComponent$ | async as comp; else default\">\n          <ng-container *ngComponentOutlet=\"comp\" />\n        </ng-container>\n        <ng-template #default>\n          <p class=\"et-combobox-body--empty\">{{ combobox._tempEmptyText }}</p>\n        </ng-template>\n      </ng-template>\n    </ng-container>\n\n    <ng-container *ngIf=\"combobox.error && !combobox.loading\">\n      <ng-container *ngIf=\"combobox.customBodyErrorTpl$ | async as tpl; else componentOrNone\">\n        <ng-container *ngTemplateOutlet=\"tpl; context: { error: combobox.error }\" />\n      </ng-container>\n      <ng-template #componentOrNone>\n        <ng-container *ngIf=\"combobox.customBodyErrorComponent$ | async as comp\">\n          <ng-container *ngComponentOutlet=\"comp; inputs: { error: combobox.error }\" />\n        </ng-container>\n      </ng-template>\n    </ng-container>\n\n    <ng-container *ngIf=\"combobox.loading$ | async\">\n      <ng-container *ngIf=\"combobox.customBodyLoadingTpl$ | async as tpl; else componentOrNone\">\n        <ng-container *ngTemplateOutlet=\"tpl\" />\n      </ng-container>\n      <ng-template #componentOrNone>\n        <ng-container *ngIf=\"combobox.customBodyLoadingComponent$ | async as comp\">\n          <ng-container *ngComponentOutlet=\"comp\" />\n        </ng-container>\n      </ng-template>\n    </ng-container>\n\n    <et-combobox-option *ngFor=\"let option of options; trackBy: trackByFn\" [option]=\"option\" />\n\n    <ng-container *ngIf=\"options?.length && combobox.showBodyMoreItemsHint\">\n      <ng-container *ngIf=\"combobox.customBodyMoreItemsHintTpl$ | async as tpl; else componentOrNone\">\n        <ng-container *ngTemplateOutlet=\"tpl\" />\n      </ng-container>\n      <ng-template #componentOrNone>\n        <ng-container *ngIf=\"combobox.customBodyMoreItemsHintComponent$ | async as comp; else default\">\n          <ng-container *ngComponentOutlet=\"comp\" />\n        </ng-container>\n        <ng-template #default>\n          <p *ngIf=\"combobox.bodyMoreItemsHintText\" class=\"et-combobox-body--more-items-hint\">\n            {{ combobox.bodyMoreItemsHintText }}\n          </p>\n        </ng-template>\n      </ng-template>\n    </ng-container>\n  </ng-container>\n</div>\n" }]
         }], propDecorators: { _containerElementRef: [{
                 type: ViewChild,
                 args: ['containerElement', { static: true, read: ElementRef }]
@@ -9405,21 +9309,16 @@ class SelectOptionDirective {
             }
             return selectValue === optionValue;
         }));
+        this.isSelected = toSignal(this.isSelected$);
         this.viewValue$ = this._viewValue$.asObservable();
         this.disabled$ = this._disabled$.asObservable();
         this.isActive$ = this._isActive$.asObservable();
-        this._bindings = createReactiveBindings({
-            attribute: 'class.et-select-option--selected',
-            observable: this.isSelected$,
-        }, {
-            attribute: 'class.et-select-option--active',
-            observable: this._isActive$,
-        }, {
-            attribute: 'aria-selected',
-            observable: this.isSelected$.pipe(map((selected) => ({
-                render: true,
-                value: selected,
-            }))),
+        this.hostClassBindings = signalHostClasses({
+            'et-select-option--selected': this.isSelected,
+            'et-select-option--active': toSignal(this._isActive$),
+        });
+        this.hostAttributeBindings = signalHostAttributes({
+            'aria-selected': this.isSelected,
         });
     }
     get value() {
@@ -9434,6 +9333,9 @@ class SelectOptionDirective {
     set disabled(value) {
         this._disabled$.next(booleanAttribute(value));
     }
+    get viewValue() {
+        return this._viewValue$.value;
+    }
     ngAfterContentInit() {
         this._updateViewValue();
     }
@@ -9524,14 +9426,15 @@ class SelectDirective {
         this.input = inject(INPUT_TOKEN);
         this._selectBodyId$ = new BehaviorSubject(null);
         this._isOpen$ = new BehaviorSubject(false);
+        this.elementRef = inject(ElementRef);
+        this._selectionModel = new SelectionModel();
+        this._activeSelectionModel = new ActiveSelectionModel();
         this._multiple$ = new BehaviorSubject(false);
         this._selectOptionsQueryList$ = new BehaviorSubject(null);
-        this.selectOptions$ = this._selectOptionsQueryList$.pipe(switchMap((queryList) => queryList?.changes.pipe(startWith(queryList)) ?? of(null)), switchMap((queryList) => {
+        this.selectOptions$ = this._selectOptionsQueryList$.pipe(switchQueryListChanges(), switchMap((queryList) => {
             if (!queryList)
                 return of(null);
-            const items = queryList
-                .filter((i) => !!i)
-                .map((opt) => combineLatest([opt.isSelected$, opt.isActive$]).pipe(map(([selected, active]) => ({ opt, selected, active }))));
+            const items = queryList.map((opt) => combineLatest([opt.isSelected$, opt.isActive$]).pipe(map(([selected, active]) => ({ opt, selected, active }))));
             return combineLatest(items ?? of(null));
         }));
         this.activeOption$ = this.selectOptions$.pipe(map((options) => {
@@ -9558,6 +9461,7 @@ class SelectDirective {
         this.selectedOption$ = this.selectedOptions$.pipe(map((options) => options?.[0] ?? null));
         this.selectBodyId$ = this._selectBodyId$.asObservable();
         this.isOpen$ = this._isOpen$.asObservable();
+        this.isOpen = toSignal(this.isOpen$);
         this.multiple$ = this._multiple$.asObservable();
         this.selectCurrentValueId = `et-select-current-value-${uniqueId$1++}`;
         this.ariaViewValue$ = this.selectedOptions$.pipe(switchMap((options) => {
@@ -9585,25 +9489,26 @@ class SelectDirective {
             const ids = [labelId, this.selectCurrentValueId];
             return ids.filter((id) => !!id).join(' ');
         }));
-        this._bindings = createReactiveBindings({
-            attribute: 'class.et-select--is-open',
-            observable: this.isOpen$,
-        }, {
-            attribute: 'class.et-select--disabled',
-            observable: this.input.disabled$,
+        this.hostClassBindings = signalHostClasses({
+            'et-select--is-open': this.isOpen,
+            'et-select--disabled': toSignal(this.input.disabled$),
+        });
+        this.fieldHostClassBindings = signalClasses(this._selectField.elementRef, {
+            'et-select-field--open': this.isOpen,
+            'et-select-field--multiple': toSignal(this.multiple$),
         });
         this.trackByFn = (_, item) => item.id;
         this._animatedOverlay.placement = 'bottom';
         this._animatedOverlay.fallbackPlacements = ['bottom', 'top'];
         this._animatedOverlay.autoResize = true;
-        this._selectField._bindings.push({
-            attribute: 'class.et-select-field--open',
-            observable: this._isOpen$,
-        });
-        this._selectField._bindings.push({
-            attribute: 'class.et-select-field--multiple',
-            observable: this.multiple$,
-        });
+        this.input._setEmptyHelper(this.ariaViewValue$);
+        this._selectionModel
+            .setOptionsFromQueryList$(this._selectOptionsQueryList$)
+            .setLabelBinding((v) => v.viewValue)
+            .setValueBinding((v) => v.value)
+            .setDisabledBinding((v) => v.disabled);
+        this._activeSelectionModel.setSelectionModel(this._selectionModel);
+        //TODO: TO BE CONTINUED...
     }
     ngOnInit() {
         this._unmountSelectBodyOnDisable();
@@ -9959,18 +9864,9 @@ class SelectBodyDirective {
         this._select = inject(SELECT_TOKEN);
         this._clickOutside = inject(ClickOutsideDirective);
         this.id = `et-select-body-${uniqueId++}`;
-        this._bindings = createReactiveBindings({
-            attribute: 'aria-multiselectable',
-            observable: this._select.multiple$.pipe(map((multiple) => ({
-                render: true,
-                value: multiple,
-            }))),
-        }, {
-            attribute: 'aria-labelledby',
-            observable: this._select.input.labelId$.pipe(map((labelId) => ({
-                render: !!labelId,
-                value: labelId,
-            }))),
+        this.hostAttributeBindings = signalHostAttributes({
+            'aria-multiselectable': toSignal(this._select.multiple$),
+            'aria-labelledby': toSignal(this._select.input.labelId$),
         });
     }
     ngOnInit() {
@@ -10413,12 +10309,9 @@ class SlideToggleDirective {
     constructor() {
         this.input = inject(INPUT_TOKEN);
         this.checked$ = this.input.value$.pipe(map((value) => !!value));
-        this._bindings = createReactiveBindings({
-            attribute: ['class.et-slide-toggle--checked'],
-            observable: this.checked$,
-        }, {
-            attribute: ['class.et-slide-toggle--disabled'],
-            observable: this.input.disabled$,
+        this.hostClassBindings = signalHostClasses({
+            'et-slide-toggle--checked': toSignal(this.checked$),
+            'et-slide-toggle--disabled': toSignal(this.input.disabled$),
         });
     }
     _onInputInteraction(event) {
@@ -10603,45 +10496,21 @@ class SliderComponent {
         this.disableAnimations$ = new BehaviorSubject(false);
         this.touchId$ = new BehaviorSubject(null);
         this.lastPointerEvent$ = new BehaviorSubject(null);
-        this._bindings = createReactiveBindings({
-            attribute: 'aria-orientation',
-            observable: this._vertical$.pipe(map((vertical) => ({
-                render: true,
-                value: vertical ? 'vertical' : 'horizontal',
-            }))),
-        }, {
-            attribute: 'aria-disabled',
-            observable: this._input.disabled$,
-        }, {
-            attribute: 'aria-valuenow',
-            observable: this._value$.pipe(map((value) => ({ render: true, value }))),
-        }, {
-            attribute: 'aria-valuemin',
-            observable: this._min$.pipe(map((value) => ({ render: true, value }))),
-        }, {
-            attribute: 'aria-valuemax',
-            observable: this._max$.pipe(map((value) => ({ render: true, value }))),
-        }, {
-            attribute: 'aria-valuetext',
-            observable: this.valueText$.pipe(map((value) => ({ render: true, value }))),
-        }, {
-            attribute: 'tabindex',
-            observable: this._input.disabled$.pipe(map((disabled) => ({ render: true, value: disabled ? -1 : 0 }))),
-        }, {
-            attribute: 'class.et-slider--is-sliding',
-            observable: this.isSlidingVia$.pipe(map((isSlidingVia) => !!isSlidingVia)),
-        }, {
-            attribute: 'class.et-slider--inverted',
-            observable: this._inverted$,
-        }, {
-            attribute: 'class.et-slider--disable-animations',
-            observable: this.disableAnimations$,
-        }, {
-            attribute: 'aria-labeledby',
-            observable: this._formFieldStateService.labelId$.pipe(map((labelId) => ({ render: !!labelId, value: labelId ?? '' }))),
-        }, {
-            attribute: 'aria-describedby',
-            observable: this._formFieldStateService.describedBy$.pipe(map((describedBy) => ({ render: !!describedBy, value: describedBy ?? '' }))),
+        this.hostClassBindings = signalHostClasses({
+            'et-slider--is-sliding': toSignal(this.isSlidingVia$),
+            'et-slider--inverted': toSignal(this._inverted$),
+            'et-slider--disable-animations': toSignal(this.disableAnimations$),
+        });
+        this.hostAttributeBindings = signalHostAttributes({
+            'aria-orientation': toSignal(this._vertical$.pipe(map((vertical) => (vertical ? 'vertical' : 'horizontal')))),
+            'aria-disabled': toSignal(this._input.disabled$),
+            'aria-valuenow': toSignal(this._value$),
+            'aria-valuemin': toSignal(this._min$),
+            'aria-valuemax': toSignal(this._max$),
+            'aria-valuetext': toSignal(this.valueText$),
+            tabindex: toSignal(this._input.disabled$.pipe(map((disabled) => (disabled ? -1 : 0)))),
+            'aria-labeledby': this._formFieldStateService.labelId,
+            'aria-describedby': this._formFieldStateService.describedBy,
         });
         this._updateValueFromPosition = (pos, sliderDimensions, shouldInvertMouseCoords) => {
             const offset = this.vertical ? sliderDimensions.top : sliderDimensions.left;
@@ -10931,12 +10800,9 @@ class MasonryComponent {
         this._didResize$ = new BehaviorSubject(false);
         this._didInitialize$ = new BehaviorSubject(false);
         this._hideOverflow$ = new BehaviorSubject(false);
-        this._bindings = createReactiveBindings({
-            attribute: 'class.et-masonry--initialized',
-            observable: this._didInitialize$,
-        }, {
-            attribute: 'class.et-masonry--hide-overflow',
-            observable: this._hideOverflow$,
+        this.hostClassBindings = signalHostClasses({
+            'et-masonry--initialized': toSignal(this._didInitialize$),
+            'et-masonry--hide-overflow': toSignal(this._hideOverflow$),
         });
         this._state = {
             preferredColumnWidth: 0,
@@ -11369,7 +11235,8 @@ class PaginationComponent {
         this.pageControl?.setValue(page.page);
         this._paginationHeadService._updateHead(page.page);
         if (this.pageChangeScrollAnchor) {
-            this.pageChangeScrollAnchor.scrollIntoView();
+            const el = coerceElement(this.pageChangeScrollAnchor);
+            el?.scrollIntoView();
         }
     }
     _subscribeToPageControlChanges() {