@ethlete/cdk 2.7.0 → 2.7.1

package/fesm2022/ethlete-cdk.mjs

@@ -1,11 +1,10 @@
-import { coerceBooleanProperty, coerceNumberProperty, _isNumberValue } from '@angular/cdk/coercion';
 import * as i1 from '@angular/cdk/portal';
 import { CdkPortal, PortalModule, ComponentPortal, CdkPortalOutlet, TemplatePortal } from '@angular/cdk/portal';
 import { AsyncPipe, NgIf, NgClass, NgTemplateOutlet, NgForOf, JsonPipe, NgFor, DOCUMENT } from '@angular/common';
 import * as i0 from '@angular/core';
-import { Component, ViewEncapsulation, ChangeDetectionStrategy, Directive, InjectionToken, Input, ContentChild, ContentChildren, inject, ElementRef, Injector, HostBinding, isDevMode, Injectable, TemplateRef, ViewContainerRef, forwardRef, ViewChild, EventEmitter, Output, Optional, Inject, SkipSelf, HostListener, ChangeDetectorRef, Renderer2, booleanAttribute, numberAttribute, Attribute } from '@angular/core';
+import { Component, ViewEncapsulation, ChangeDetectionStrategy, Directive, InjectionToken, booleanAttribute, Input, ContentChild, ContentChildren, inject, ElementRef, Injector, HostBinding, isDevMode, Injectable, TemplateRef, ViewContainerRef, forwardRef, ViewChild, numberAttribute, EventEmitter, Output, Optional, Inject, SkipSelf, HostListener, ChangeDetectorRef, Renderer2, Attribute, NgZone } from '@angular/core';
 import * as i1$1 from '@ethlete/core';
-import { LetDirective, createDestroy, ScrollObserverFirstElementDirective, ScrollObserverLastElementDirective, Memo, createReactiveBindings, IS_EMAIL, MUST_MATCH, IS_ARRAY_NOT_EMPTY, equal, ResizeObserverService, createFlipAnimation, ClickOutsideDirective, ANIMATED_LIFECYCLE_TOKEN, AnimatedLifecycleDirective, RuntimeError, AnimatedOverlayDirective, SelectionModel, ActiveSelectionModel, ObserveContentDirective, clamp, nextFrame, DELAYABLE_TOKEN, ObserveResizeDirective, SmartBlockScrollStrategy, RouterStateService, ClickObserverService, FocusVisibleService, scrollToElement, getElementVisibleStates, IS_ACTIVE_ELEMENT, IS_ELEMENT, CursorDragScrollDirective, ObserveScrollStateDirective, IsElementDirective, IsActiveElementDirective, ScrollObserverIgnoreTargetDirective, TypedQueryList } from '@ethlete/core';
+import { LetDirective, createDestroy, ScrollObserverFirstElementDirective, ScrollObserverLastElementDirective, Memo, createReactiveBindings, IS_EMAIL, MUST_MATCH, IS_ARRAY_NOT_EMPTY, equal, ResizeObserverService, createFlipAnimation, ClickOutsideDirective, ANIMATED_LIFECYCLE_TOKEN, AnimatedLifecycleDirective, RuntimeError, AnimatedOverlayDirective, SelectionModel, ActiveSelectionModel, ObserveContentDirective, clamp, nextFrame, DELAYABLE_TOKEN, ObserveResizeDirective, SmartBlockScrollStrategy, RouterStateService, ClickObserverService, FocusVisibleService, ViewportService, scrollToElement, 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, debounceTime, filter, distinctUntilChanged, withLatestFrom, skipWhile, catchError, throwError, firstValueFrom, fromEvent, merge, take, timer, skipUntil, defer, Subscription, Observable } from 'rxjs';
 import { trigger, state, style, transition, animate } from '@angular/animations';
 import { __decorate, __metadata } from 'tslib';
@@ -21,14 +20,14 @@ import { CdkDialogContainer, Dialog, DialogConfig, DIALOG_SCROLL_STRATEGY_PROVID
 import * as i2 from '@angular/cdk/overlay';
 import { ViewportRuler } from '@angular/cdk/overlay';
 import { Meta, Title } from '@angular/platform-browser';
-import * as i3 from '@angular/router';
-import { Router, NavigationEnd } from '@angular/router';
+import { Router, NavigationEnd, RouterLink, RouterLinkActive } from '@angular/router';
 import { _VIEW_REPEATER_STRATEGY, _RecycleViewRepeaterStrategy, _DisposeViewRepeaterStrategy, DataSource } from '@angular/cdk/collections';
 import * as i2$1 from '@angular/cdk/platform';
-import * as i1$5 from '@angular/cdk/scrolling';
-import { CdkScrollableModule } from '@angular/cdk/scrolling';
+import * as i3 from '@angular/cdk/scrolling';
+import { CdkScrollableModule, ViewportRuler as ViewportRuler$1 } from '@angular/cdk/scrolling';
 import * as i1$3 from '@angular/cdk/table';
 import { CdkCell, CdkCellDef, CdkColumnDef, CDK_TABLE, CdkFooterCell, CdkFooterCellDef, CdkHeaderCell, CdkHeaderCellDef, CdkTextColumn, TEXT_COLUMN_OPTIONS, CdkFooterRow, CdkTableModule, CDK_ROW_TEMPLATE, CdkFooterRowDef, CdkHeaderRow, CdkHeaderRowDef, CdkNoDataRow, CdkRow, CdkRowDef, CdkTable, _COALESCED_STYLE_SCHEDULER, STICKY_POSITIONING_LISTENER, _CoalescedStyleScheduler } from '@angular/cdk/table';
+import { _isNumberValue } from '@angular/cdk/coercion';
 import { takeUntil as takeUntil$1, take as take$1 } from 'rxjs/operators';
 
 class ChevronIconComponent {
@@ -147,8 +146,8 @@ let accordionId = 0;
 class AccordionComponent {
     constructor() {
         this._id = `et-accordion-${accordionId++}`;
-        this._isOpenByDefault = false;
-        this._disabled = false;
+        this.isOpenByDefault = false;
+        this.disabled = false;
         this.label = '';
         this.bodyId = `${this._id}-body`;
         this.headerId = `${this._id}-header`;
@@ -156,18 +155,6 @@ class AccordionComponent {
         this._isLast = false;
         this._isOpen$ = new BehaviorSubject(false);
     }
-    get isOpenByDefault() {
-        return this._isOpenByDefault;
-    }
-    set isOpenByDefault(value) {
-        this._isOpenByDefault = coerceBooleanProperty(value);
-    }
-    get disabled() {
-        return this._disabled;
-    }
-    set disabled(value) {
-        this._disabled = coerceBooleanProperty(value);
-    }
     get isOpen$() {
         return this._isOpen$.asObservable();
     }
@@ -187,7 +174,7 @@ class AccordionComponent {
         this._isOpen$.next(false);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.0", ngImport: i0, type: AccordionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.0", type: AccordionComponent, isStandalone: true, selector: "et-accordion", inputs: { isOpenByDefault: "isOpenByDefault", disabled: "disabled", label: "label" }, host: { classAttribute: "et-accordion" }, providers: [{ provide: ACCORDION_COMPONENT, useExisting: AccordionComponent }], queries: [{ propertyName: "templateLabel", first: true, predicate: ACCORDION_LABEL_WRAPPER_DIRECTIVE, descendants: true }, { propertyName: "templateHint", first: true, predicate: ACCORDION_HINT_WRAPPER_DIRECTIVE, descendants: true }], ngImport: i0, template: "<div *etLet=\"_isOpen$ | async as isOpen\" class=\"et-accordion-container\">\n  <h3 class=\"et-accordion-header-wrapper\">\n    <button\n      [disabled]=\"disabled\"\n      [id]=\"headerId\"\n      [attr.aria-controls]=\"bodyId\"\n      [attr.aria-expanded]=\"isOpen\"\n      [class.et-accordion-has-hint]=\"!!templateHint\"\n      (click)=\"toggleAccordionOpen()\"\n      class=\"et-accordion-header\"\n      type=\"button\"\n    >\n      <div>\n        <ng-template [ngIf]=\"templateLabel\" [ngIfElse]=\"textLabelTpl\">\n          <ng-template [cdkPortalOutlet]=\"templateLabel\" />\n        </ng-template>\n\n        <ng-template #textLabelTpl\n          ><span et-accordion-label>{{ label }} </span>\n        </ng-template>\n      </div>\n\n      <ng-container *ngIf=\"templateHint\">\n        <ng-template [cdkPortalOutlet]=\"templateHint\" />\n      </ng-container>\n\n      <et-chevron-icon />\n    </button>\n  </h3>\n  <div\n    [@animateOpenClose]=\"(_isOpen$ | async) ? 'open' : 'close'\"\n    [attr.aria-labelledby]=\"headerId\"\n    [id]=\"bodyId\"\n    class=\"et-accordion-body\"\n    role=\"region\"\n  >\n    <div class=\"et-accordion-body-container\">\n      <ng-content />\n    </div>\n  </div>\n  <hr class=\"et-accordion-separator\" />\n</div>\n", styles: [":where(.et-accordion){--chevron-size: 15px}.et-accordion .et-accordion-container{position:relative;z-index:1}.et-accordion .et-chevron-icon{display:block;transform:rotate(180deg);transition:transform .3s var(--ease-5);inline-size:var(--chevron-size);block-size:var(--chevron-size)}.et-accordion [aria-expanded=true] .et-chevron-icon{transform:rotate(0)}.et-accordion .et-accordion-header{display:grid;grid-template-columns:1fr auto;inline-size:100%;block-size:100%;text-align:left;background-color:transparent;border:none;align-items:center;padding:0;gap:15px}.et-accordion .et-accordion-header:not(:disabled){cursor:pointer}.et-accordion .et-accordion-header.et-accordion-has-hint{grid-template-columns:1fr auto auto}.et-accordion .et-accordion-header-wrapper{margin:0}.et-accordion .et-accordion-body{overflow:hidden}.et-accordion .et-accordion-separator{position:relative;z-index:-1}\n"], dependencies: [{ kind: "directive", type: LetDirective, selector: "[etLet]", inputs: ["etLet"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "directive", type: AccordionLabelDirective, selector: "[et-accordion-label]" }, { kind: "ngmodule", type: PortalModule }, { kind: "directive", type: i1.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ChevronIconComponent, selector: "et-chevron-icon" }], animations: [accordionAnimations.animateOpenClose], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.0", type: AccordionComponent, isStandalone: true, selector: "et-accordion", inputs: { isOpenByDefault: ["isOpenByDefault", "isOpenByDefault", booleanAttribute], disabled: ["disabled", "disabled", booleanAttribute], label: "label" }, host: { classAttribute: "et-accordion" }, providers: [{ provide: ACCORDION_COMPONENT, useExisting: AccordionComponent }], queries: [{ propertyName: "templateLabel", first: true, predicate: ACCORDION_LABEL_WRAPPER_DIRECTIVE, descendants: true }, { propertyName: "templateHint", first: true, predicate: ACCORDION_HINT_WRAPPER_DIRECTIVE, descendants: true }], ngImport: i0, template: "<div *etLet=\"_isOpen$ | async as isOpen\" class=\"et-accordion-container\">\n  <h3 class=\"et-accordion-header-wrapper\">\n    <button\n      [disabled]=\"disabled\"\n      [id]=\"headerId\"\n      [attr.aria-controls]=\"bodyId\"\n      [attr.aria-expanded]=\"isOpen\"\n      [class.et-accordion-has-hint]=\"!!templateHint\"\n      (click)=\"toggleAccordionOpen()\"\n      class=\"et-accordion-header\"\n      type=\"button\"\n    >\n      <div>\n        <ng-template [ngIf]=\"templateLabel\" [ngIfElse]=\"textLabelTpl\">\n          <ng-template [cdkPortalOutlet]=\"templateLabel\" />\n        </ng-template>\n\n        <ng-template #textLabelTpl\n          ><span et-accordion-label>{{ label }} </span>\n        </ng-template>\n      </div>\n\n      <ng-container *ngIf=\"templateHint\">\n        <ng-template [cdkPortalOutlet]=\"templateHint\" />\n      </ng-container>\n\n      <et-chevron-icon />\n    </button>\n  </h3>\n  <div\n    [@animateOpenClose]=\"(_isOpen$ | async) ? 'open' : 'close'\"\n    [attr.aria-labelledby]=\"headerId\"\n    [id]=\"bodyId\"\n    class=\"et-accordion-body\"\n    role=\"region\"\n  >\n    <div class=\"et-accordion-body-container\">\n      <ng-content />\n    </div>\n  </div>\n  <hr class=\"et-accordion-separator\" />\n</div>\n", styles: [":where(.et-accordion){--chevron-size: 15px}.et-accordion .et-accordion-container{position:relative;z-index:1}.et-accordion .et-chevron-icon{display:block;transform:rotate(180deg);transition:transform .3s var(--ease-5);inline-size:var(--chevron-size);block-size:var(--chevron-size)}.et-accordion [aria-expanded=true] .et-chevron-icon{transform:rotate(0)}.et-accordion .et-accordion-header{display:grid;grid-template-columns:1fr auto;inline-size:100%;block-size:100%;text-align:left;background-color:transparent;border:none;align-items:center;padding:0;gap:15px}.et-accordion .et-accordion-header:not(:disabled){cursor:pointer}.et-accordion .et-accordion-header.et-accordion-has-hint{grid-template-columns:1fr auto auto}.et-accordion .et-accordion-header-wrapper{margin:0}.et-accordion .et-accordion-body{overflow:hidden}.et-accordion .et-accordion-separator{position:relative;z-index:-1}\n"], dependencies: [{ kind: "directive", type: LetDirective, selector: "[etLet]", inputs: ["etLet"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "directive", type: AccordionLabelDirective, selector: "[et-accordion-label]" }, { kind: "ngmodule", type: PortalModule }, { kind: "directive", type: i1.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ChevronIconComponent, selector: "et-chevron-icon" }], animations: [accordionAnimations.animateOpenClose], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.0", ngImport: i0, type: AccordionComponent, decorators: [{
             type: Component,
@@ -204,9 +191,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.0", ngImpor
                         class: 'et-accordion',
                     }, template: "<div *etLet=\"_isOpen$ | async as isOpen\" class=\"et-accordion-container\">\n  <h3 class=\"et-accordion-header-wrapper\">\n    <button\n      [disabled]=\"disabled\"\n      [id]=\"headerId\"\n      [attr.aria-controls]=\"bodyId\"\n      [attr.aria-expanded]=\"isOpen\"\n      [class.et-accordion-has-hint]=\"!!templateHint\"\n      (click)=\"toggleAccordionOpen()\"\n      class=\"et-accordion-header\"\n      type=\"button\"\n    >\n      <div>\n        <ng-template [ngIf]=\"templateLabel\" [ngIfElse]=\"textLabelTpl\">\n          <ng-template [cdkPortalOutlet]=\"templateLabel\" />\n        </ng-template>\n\n        <ng-template #textLabelTpl\n          ><span et-accordion-label>{{ label }} </span>\n        </ng-template>\n      </div>\n\n      <ng-container *ngIf=\"templateHint\">\n        <ng-template [cdkPortalOutlet]=\"templateHint\" />\n      </ng-container>\n\n      <et-chevron-icon />\n    </button>\n  </h3>\n  <div\n    [@animateOpenClose]=\"(_isOpen$ | async) ? 'open' : 'close'\"\n    [attr.aria-labelledby]=\"headerId\"\n    [id]=\"bodyId\"\n    class=\"et-accordion-body\"\n    role=\"region\"\n  >\n    <div class=\"et-accordion-body-container\">\n      <ng-content />\n    </div>\n  </div>\n  <hr class=\"et-accordion-separator\" />\n</div>\n", styles: [":where(.et-accordion){--chevron-size: 15px}.et-accordion .et-accordion-container{position:relative;z-index:1}.et-accordion .et-chevron-icon{display:block;transform:rotate(180deg);transition:transform .3s var(--ease-5);inline-size:var(--chevron-size);block-size:var(--chevron-size)}.et-accordion [aria-expanded=true] .et-chevron-icon{transform:rotate(0)}.et-accordion .et-accordion-header{display:grid;grid-template-columns:1fr auto;inline-size:100%;block-size:100%;text-align:left;background-color:transparent;border:none;align-items:center;padding:0;gap:15px}.et-accordion .et-accordion-header:not(:disabled){cursor:pointer}.et-accordion .et-accordion-header.et-accordion-has-hint{grid-template-columns:1fr auto auto}.et-accordion .et-accordion-header-wrapper{margin:0}.et-accordion .et-accordion-body{overflow:hidden}.et-accordion .et-accordion-separator{position:relative;z-index:-1}\n"] }]
         }], propDecorators: { isOpenByDefault: [{
-                type: Input
+                type: Input,
+                args: [{ transform: booleanAttribute }]
             }], disabled: [{
-                type: Input
+                type: Input,
+                args: [{ transform: booleanAttribute }]
             }], label: [{
                 type: Input
             }], templateLabel: [{
@@ -220,13 +209,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.0", ngImpor
 class AccordionGroupComponent {
     constructor() {
         this._destroy$ = createDestroy();
-        this._autoCloseOthers = false;
-    }
-    get autoCloseOthers() {
-        return this._autoCloseOthers;
-    }
-    set autoCloseOthers(value) {
-        this._autoCloseOthers = coerceBooleanProperty(value);
+        this.autoCloseOthers = false;
     }
     ngAfterContentInit() {
         if (!this._accordions) {
@@ -256,7 +239,7 @@ class AccordionGroupComponent {
             .subscribe();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.0", ngImport: i0, type: AccordionGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.0", type: AccordionGroupComponent, isStandalone: true, selector: "et-accordion-group", inputs: { autoCloseOthers: "autoCloseOthers" }, host: { classAttribute: "et-accordion-group" }, queries: [{ propertyName: "_accordions", predicate: ACCORDION_COMPONENT }], ngImport: i0, template: "<ng-content select=\"et-accordion\" />\n", changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.0", type: AccordionGroupComponent, isStandalone: true, selector: "et-accordion-group", inputs: { autoCloseOthers: ["autoCloseOthers", "autoCloseOthers", booleanAttribute] }, host: { classAttribute: "et-accordion-group" }, queries: [{ propertyName: "_accordions", predicate: ACCORDION_COMPONENT }], ngImport: i0, template: "<ng-content select=\"et-accordion\" />\n", changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.0", ngImport: i0, type: AccordionGroupComponent, decorators: [{
             type: Component,
@@ -264,7 +247,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.0", ngImpor
                         class: 'et-accordion-group',
                     }, template: "<ng-content select=\"et-accordion\" />\n" }]
         }], propDecorators: { autoCloseOthers: [{
-                type: Input
+                type: Input,
+                args: [{ transform: booleanAttribute }]
             }], _accordions: [{
                 type: ContentChildren,
                 args: [ACCORDION_COMPONENT]
@@ -1063,7 +1047,7 @@ class ButtonDirective {
         return this._disabled$.value;
     }
     set disabled(value) {
-        this._disabled$.next(coerceBooleanProperty(value));
+        this._disabled$.next(booleanAttribute(value));
     }
     get disabled$() {
         return this._disabled$.asObservable();
@@ -1081,7 +1065,7 @@ class ButtonDirective {
         return this._pressed$.value;
     }
     set pressed(value) {
-        this._pressed$.next(coerceBooleanProperty(value));
+        this._pressed$.next(booleanAttribute(value));
     }
     _removeDisabledBindings() {
         this._bindings.remove('disabled', 'aria-disabled');
@@ -1411,19 +1395,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.0", ngImpor
 
 class LabelSuffixDirective {
     constructor() {
-        this._showToScreenReader = false;
-    }
-    get showToScreenReader() {
-        return this._showToScreenReader;
-    }
-    set showToScreenReader(value) {
-        this._showToScreenReader = coerceBooleanProperty(value);
+        this.showToScreenReader = false;
     }
     get _attrAriaHidden() {
         return this.showToScreenReader ? null : 'true';
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.0", ngImport: i0, type: LabelSuffixDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.1.0", type: LabelSuffixDirective, isStandalone: true, selector: "[etLabelSuffix]", inputs: { showToScreenReader: "showToScreenReader" }, host: { properties: { "attr.aria-hidden": "this._attrAriaHidden" } }, exportAs: ["etLabelSuffix"], ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.1.0", type: LabelSuffixDirective, isStandalone: true, selector: "[etLabelSuffix]", inputs: { showToScreenReader: ["showToScreenReader", "showToScreenReader", booleanAttribute] }, host: { properties: { "attr.aria-hidden": "this._attrAriaHidden" } }, exportAs: ["etLabelSuffix"], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.0", ngImport: i0, type: LabelSuffixDirective, decorators: [{
             type: Directive,
@@ -1433,7 +1411,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.0", ngImpor
                     exportAs: 'etLabelSuffix',
                 }]
         }], propDecorators: { showToScreenReader: [{
-                type: Input
+                type: Input,
+                args: [{ transform: booleanAttribute }]
             }], _attrAriaHidden: [{
                 type: HostBinding,
                 args: ['attr.aria-hidden']
@@ -1450,7 +1429,7 @@ class DynamicFormFieldDirective {
         return this._explicitlyHideErrorMessage$.getValue();
     }
     set hideErrorMessage(value) {
-        this._explicitlyHideErrorMessage$.next(coerceBooleanProperty(value));
+        this._explicitlyHideErrorMessage$.next(booleanAttribute(value));
     }
     get hideErrorMessage$() {
         return this._explicitlyHideErrorMessage$.asObservable();
@@ -1488,7 +1467,7 @@ class DynamicFormGroupDirective {
         return this._explicitlyHideErrorMessage$.getValue();
     }
     set hideErrorMessage(value) {
-        this._explicitlyHideErrorMessage$.next(coerceBooleanProperty(value));
+        this._explicitlyHideErrorMessage$.next(booleanAttribute(value));
     }
     get hideErrorMessage$() {
         return this._explicitlyHideErrorMessage$.asObservable();
@@ -2884,23 +2863,11 @@ class TextareaInputComponent extends DecoratedInputBase {
     constructor() {
         super(...arguments);
         this.textareaInput = inject(TEXTAREA_INPUT_TOKEN);
-        this._cols = null;
-        this._rows = null;
-    }
-    get cols() {
-        return this._cols;
-    }
-    set cols(value) {
-        this._cols = coerceNumberProperty(value);
-    }
-    get rows() {
-        return this._rows;
-    }
-    set rows(value) {
-        this._rows = coerceNumberProperty(value);
+        this.cols = null;
+        this.rows = null;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.0", ngImport: i0, type: TextareaInputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.0", type: TextareaInputComponent, isStandalone: true, selector: "et-textarea-input", inputs: { cols: "cols", rows: "rows" }, host: { classAttribute: "et-textarea-input" }, usesInheritance: true, hostDirectives: [{ directive: TextareaInputDirective }, { directive: InputDirective, inputs: ["autocomplete", "autocomplete", "placeholder", "placeholder"] }], ngImport: i0, template: "<textarea\n  [attr.id]=\"input.id\"\n  [attr.aria-labelledby]=\"input.labelId$ | async\"\n  [required]=\"input.required$ | async\"\n  [disabled]=\"input.disabled$ | async\"\n  [attr.autocomplete]=\"input.autocomplete || null\"\n  [attr.placeholder]=\"input.placeholder || null\"\n  [attr.aria-describedby]=\"input.describedBy$ | async\"\n  [cols]=\"cols\"\n  [rows]=\"rows\"\n  (input)=\"textareaInput._onInputInteraction($event)\"\n  (blur)=\"textareaInput._controlTouched()\"\n  class=\"et-input-native-control et-textarea-input-native-control\"\n  etNativeInputRef\n></textarea>\n", styles: [""], dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "directive", type: NativeInputRefDirective, selector: "input[etNativeInputRef], textarea[etNativeInputRef], select[etNativeInputRef], button[etNativeInputRef]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.0", type: TextareaInputComponent, isStandalone: true, selector: "et-textarea-input", inputs: { cols: ["cols", "cols", numberAttribute], rows: ["rows", "rows", numberAttribute] }, host: { classAttribute: "et-textarea-input" }, usesInheritance: true, hostDirectives: [{ directive: TextareaInputDirective }, { directive: InputDirective, inputs: ["autocomplete", "autocomplete", "placeholder", "placeholder"] }], ngImport: i0, template: "<textarea\n  [attr.id]=\"input.id\"\n  [attr.aria-labelledby]=\"input.labelId$ | async\"\n  [required]=\"input.required$ | async\"\n  [disabled]=\"input.disabled$ | async\"\n  [attr.autocomplete]=\"input.autocomplete || null\"\n  [attr.placeholder]=\"input.placeholder || null\"\n  [attr.aria-describedby]=\"input.describedBy$ | async\"\n  [cols]=\"cols\"\n  [rows]=\"rows\"\n  (input)=\"textareaInput._onInputInteraction($event)\"\n  (blur)=\"textareaInput._controlTouched()\"\n  class=\"et-input-native-control et-textarea-input-native-control\"\n  etNativeInputRef\n></textarea>\n", styles: [""], dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "directive", type: NativeInputRefDirective, selector: "input[etNativeInputRef], textarea[etNativeInputRef], select[etNativeInputRef], button[etNativeInputRef]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.0", ngImport: i0, type: TextareaInputComponent, decorators: [{
             type: Component,
@@ -2908,9 +2875,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.0", ngImpor
                         class: 'et-textarea-input',
                     }, imports: [AsyncPipe, NativeInputRefDirective], hostDirectives: [TextareaInputDirective, { directive: InputDirective, inputs: ['autocomplete', 'placeholder'] }], template: "<textarea\n  [attr.id]=\"input.id\"\n  [attr.aria-labelledby]=\"input.labelId$ | async\"\n  [required]=\"input.required$ | async\"\n  [disabled]=\"input.disabled$ | async\"\n  [attr.autocomplete]=\"input.autocomplete || null\"\n  [attr.placeholder]=\"input.placeholder || null\"\n  [attr.aria-describedby]=\"input.describedBy$ | async\"\n  [cols]=\"cols\"\n  [rows]=\"rows\"\n  (input)=\"textareaInput._onInputInteraction($event)\"\n  (blur)=\"textareaInput._controlTouched()\"\n  class=\"et-input-native-control et-textarea-input-native-control\"\n  etNativeInputRef\n></textarea>\n" }]
         }], propDecorators: { cols: [{
-                type: Input
+                type: Input,
+                args: [{ transform: numberAttribute }]
             }], rows: [{
-                type: Input
+                type: Input,
+                args: [{ transform: numberAttribute }]
             }] } });
 
 class PasswordInputToggleComponent {
@@ -2990,7 +2959,7 @@ class RadioDirective {
         return this._disabled$.getValue();
     }
     set disabled(value) {
-        this._disabled$.next(coerceBooleanProperty(value));
+        this._disabled$.next(booleanAttribute(value));
     }
     _onInputInteraction(event) {
         event.stopPropagation();
@@ -3195,7 +3164,7 @@ class SegmentedButtonDirective {
         return this._disabled$.getValue();
     }
     set disabled(value) {
-        this._disabled$.next(coerceBooleanProperty(value));
+        this._disabled$.next(booleanAttribute(value));
     }
     get activeIndicatorElement$() {
         return this._activeIndicatorElement$.asObservable();
@@ -3637,7 +3606,7 @@ class ComboboxComponent extends DecoratedInputBase {
         return this._filterInternal$.value;
     }
     set filterInternal(value) {
-        const val = coerceBooleanProperty(value);
+        const val = booleanAttribute(value);
         this._filterInternal$.next(val);
         if (!val) {
             this._selectionModel.setFilter('');
@@ -3650,7 +3619,7 @@ class ComboboxComponent extends DecoratedInputBase {
         return this._loading$.value;
     }
     set loading(value) {
-        this._loading$.next(coerceBooleanProperty(value));
+        this._loading$.next(booleanAttribute(value));
     }
     get error() {
         return this._error$.value;
@@ -3665,7 +3634,7 @@ class ComboboxComponent extends DecoratedInputBase {
         this._placeholder$.next(value);
     }
     set multiple(value) {
-        this._selectionModel.setAllowMultiple(coerceBooleanProperty(value));
+        this._selectionModel.setAllowMultiple(booleanAttribute(value));
     }
     set bindLabel(value) {
         this._selectionModel.setLabelBinding(value);
@@ -3677,7 +3646,7 @@ class ComboboxComponent extends DecoratedInputBase {
         return this._allowCustomValues$.value;
     }
     set allowCustomValues(value) {
-        this._allowCustomValues$.next(coerceBooleanProperty(value));
+        this._allowCustomValues$.next(booleanAttribute(value));
     }
     //#endregion
     //#region Members
@@ -4081,8 +4050,8 @@ class NativeSelectOptionDirective {
     constructor() {
         this._textTemplate$ = new BehaviorSubject(null);
         this._value$ = new BehaviorSubject(null);
-        this._disabled = false;
-        this._hidden = false;
+        this.disabled = false;
+        this.hidden = false;
     }
     get textTemplate$() {
         return this._textTemplate$.asObservable();
@@ -4093,23 +4062,11 @@ class NativeSelectOptionDirective {
     set value(value) {
         this._value$.next(value);
     }
-    get disabled() {
-        return this._disabled;
-    }
-    set disabled(value) {
-        this._disabled = coerceBooleanProperty(value);
-    }
-    get hidden() {
-        return this._hidden;
-    }
-    set hidden(value) {
-        this._hidden = coerceBooleanProperty(value);
-    }
     _setTextTemplate(template) {
         this._textTemplate$.next(template);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.0", ngImport: i0, type: NativeSelectOptionDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.1.0", type: NativeSelectOptionDirective, isStandalone: true, inputs: { value: "value", disabled: "disabled", hidden: "hidden", key: "key" }, providers: [{ provide: NATIVE_SELECT_OPTION_TOKEN, useExisting: NativeSelectOptionDirective }], exportAs: ["etNativeSelectOption"], ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.1.0", type: NativeSelectOptionDirective, isStandalone: true, inputs: { value: "value", disabled: ["disabled", "disabled", booleanAttribute], hidden: ["hidden", "hidden", booleanAttribute], key: "key" }, providers: [{ provide: NATIVE_SELECT_OPTION_TOKEN, useExisting: NativeSelectOptionDirective }], exportAs: ["etNativeSelectOption"], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.0", ngImport: i0, type: NativeSelectOptionDirective, decorators: [{
             type: Directive,
@@ -4121,9 +4078,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.0", ngImpor
         }], propDecorators: { value: [{
                 type: Input
             }], disabled: [{
-                type: Input
+                type: Input,
+                args: [{ transform: booleanAttribute }]
             }], hidden: [{
-                type: Input
+                type: Input,
+                args: [{ transform: booleanAttribute }]
             }], key: [{
                 type: Input
             }] } });
@@ -4278,7 +4237,7 @@ class SelectOptionDirective {
         return this._disabled$.value;
     }
     set disabled(value) {
-        this._disabled$.next(coerceBooleanProperty(value));
+        this._disabled$.next(booleanAttribute(value));
     }
     ngAfterContentInit() {
         this._updateViewValue();
@@ -4355,7 +4314,7 @@ class SelectDirective {
         return this._multiple$.value;
     }
     set multiple(value) {
-        this._multiple$.next(coerceBooleanProperty(value));
+        this._multiple$.next(booleanAttribute(value));
         this._migrateSelectValue();
     }
     set _selectOptionsQueryList(value) {
@@ -5231,31 +5190,31 @@ class SliderComponent {
         return this._min$.value;
     }
     set min(value) {
-        this._min$.next(coerceNumberProperty(value));
+        this._min$.next(numberAttribute(value, 0));
     }
     get max() {
         return this._max$.value;
     }
     set max(value) {
-        this._max$.next(coerceNumberProperty(value));
+        this._max$.next(numberAttribute(value, 100));
     }
     get step() {
         return this._step$.value;
     }
     set step(value) {
-        this._step$.next(coerceNumberProperty(value));
+        this._step$.next(numberAttribute(value, 1));
     }
     get vertical() {
         return this._vertical$.value;
     }
     set vertical(value) {
-        this._vertical$.next(coerceBooleanProperty(value));
+        this._vertical$.next(booleanAttribute(value));
     }
     get inverted() {
         return this._inverted$.value;
     }
     set inverted(value) {
-        this._inverted$.next(coerceBooleanProperty(value));
+        this._inverted$.next(booleanAttribute(value));
     }
     ngOnInit() {
         merge(this._mouseDown$, this._touchStart$)
@@ -5527,16 +5486,16 @@ class MasonryComponent {
         };
     }
     get columWidth() {
-        return this._columWidth$.getValue() || 1;
+        return this._columWidth$.getValue() || 250;
     }
     set columWidth(value) {
-        this._columWidth$.next(coerceNumberProperty(value));
+        this._columWidth$.next(numberAttribute(value, 250));
     }
     get gap() {
         return this._gap$.getValue() || 0;
     }
     set gap(value) {
-        this._gap$.next(coerceNumberProperty(value));
+        this._gap$.next(numberAttribute(value, 16));
     }
     ngAfterContentInit() {
         if (!this._items) {
@@ -6790,7 +6749,7 @@ class ToggletipDirective {
         return this._showToggletip;
     }
     set showToggletip(value) {
-        this._showToggletip = coerceBooleanProperty(value);
+        this._showToggletip = booleanAttribute(value);
         if (this._showToggletip && !this._animatedOverlay.isMounted) {
             nextFrame(() => {
                 this._mountToggletip();
@@ -7188,10 +7147,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.0", ngImpor
 const TooltipImports = [TooltipDirective];
 
 class DynamicOverlayService {
-    constructor(_dialogService, _bottomSheetService, _viewportService) {
-        this._dialogService = _dialogService;
-        this._bottomSheetService = _bottomSheetService;
-        this._viewportService = _viewportService;
+    constructor() {
+        this._dialogService = inject(DialogService);
+        this._bottomSheetService = inject(BottomSheetService);
+        this._viewportService = inject(ViewportService);
     }
     open(componentOrTemplateRef, config) {
         const shouldOpenAsDialog = this._viewportService.isMatched({ min: config.isDialogFrom });
@@ -7200,7 +7159,7 @@ class DynamicOverlayService {
         }
         return this._bottomSheetService.open(componentOrTemplateRef, config.bottomSheetConfig);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.0", ngImport: i0, type: DynamicOverlayService, deps: [{ token: DialogService }, { token: BottomSheetService }, { token: i1$1.ViewportService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.0", ngImport: i0, type: DynamicOverlayService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.1.0", ngImport: i0, type: DynamicOverlayService, providedIn: 'root' }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.0", ngImport: i0, type: DynamicOverlayService, decorators: [{
@@ -7208,7 +7167,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.0", ngImpor
             args: [{
                     providedIn: 'root',
                 }]
-        }], ctorParameters: function () { return [{ type: DialogService }, { type: BottomSheetService }, { type: i1$1.ViewportService }]; } });
+        }] });
 
 class PaginationLinkDirective {
     constructor() {
@@ -7396,7 +7355,7 @@ class PaginationComponent {
         return this._totalPages;
     }
     set totalPages(value) {
-        this._totalPages = coerceNumberProperty(value);
+        this._totalPages = numberAttribute(value, 0);
         this._updatePages();
     }
     set headTitleTemplate(v) {
@@ -7408,7 +7367,7 @@ class PaginationComponent {
         this._updateHead();
     }
     set headAddCanonicalTag(v) {
-        this._paginationHeadService.addCanonicalTag = coerceBooleanProperty(v);
+        this._paginationHeadService.addCanonicalTag = v;
         this._updateHead();
     }
     ngOnInit() {
@@ -7447,7 +7406,7 @@ class PaginationComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.0", ngImport: i0, type: PaginationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.0", type: PaginationComponent, isStandalone: true, selector: "et-pagination", inputs: { pageControl: "pageControl", totalPages: "totalPages", headTitleTemplate: "headTitleTemplate", headFirstPageTitle: "headFirstPageTitle", headAddCanonicalTag: "headAddCanonicalTag", ariaLabel: "ariaLabel", pageChangeScrollAnchor: "pageChangeScrollAnchor" }, host: { classAttribute: "et-pagination" }, providers: [PaginationHeadService], ngImport: i0, template: "<nav *ngIf=\"pages$ | async as pages\" [attr.aria-label]=\"ariaLabel\" class=\"et-pagination-nav\">\n  <ul class=\"et-pagination-list\">\n    <li\n      *ngFor=\"let page of pages; trackBy: trackByPage\"\n      [class.et-pagination-hot-link]=\"page.type === 'hotLink'\"\n      [class.et-pagination-page-link]=\"page.type === 'page'\"\n      [class.et-pagination-item-disabled]=\"page.disabled\"\n      class=\"et-pagination-list-item et-pagination-{{ page.explicitType }}\"\n    >\n      <a\n        [attr.aria-current]=\"page.current ? 'page' : null\"\n        [attr.aria-label]=\"page.ariaLabel\"\n        [attr.aria-disabled]=\"page.disabled ? 'true' : null\"\n        [etPaginationLink]=\"page\"\n        [href]=\"page.disabled ? '#' : page.url\"\n        (pageClick)=\"onPageClick($event)\"\n        class=\"et-pagination-anchor\"\n      >\n        <ng-container *ngIf=\"page.type === 'page'\">\n          {{ page.page }}\n        </ng-container>\n      </a>\n    </li>\n  </ul>\n</nav>\n", styles: [""], dependencies: [{ kind: "directive", type: NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: PaginationLinkDirective, selector: "[etPaginationLink]", inputs: ["etPaginationLink"], outputs: ["pageClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.0", type: PaginationComponent, isStandalone: true, selector: "et-pagination", inputs: { pageControl: "pageControl", totalPages: "totalPages", headTitleTemplate: "headTitleTemplate", headFirstPageTitle: "headFirstPageTitle", headAddCanonicalTag: ["headAddCanonicalTag", "headAddCanonicalTag", booleanAttribute], ariaLabel: "ariaLabel", pageChangeScrollAnchor: "pageChangeScrollAnchor" }, host: { classAttribute: "et-pagination" }, providers: [PaginationHeadService], ngImport: i0, template: "<nav *ngIf=\"pages$ | async as pages\" [attr.aria-label]=\"ariaLabel\" class=\"et-pagination-nav\">\n  <ul class=\"et-pagination-list\">\n    <li\n      *ngFor=\"let page of pages; trackBy: trackByPage\"\n      [class.et-pagination-hot-link]=\"page.type === 'hotLink'\"\n      [class.et-pagination-page-link]=\"page.type === 'page'\"\n      [class.et-pagination-item-disabled]=\"page.disabled\"\n      class=\"et-pagination-list-item et-pagination-{{ page.explicitType }}\"\n    >\n      <a\n        [attr.aria-current]=\"page.current ? 'page' : null\"\n        [attr.aria-label]=\"page.ariaLabel\"\n        [attr.aria-disabled]=\"page.disabled ? 'true' : null\"\n        [etPaginationLink]=\"page\"\n        [href]=\"page.disabled ? '#' : page.url\"\n        (pageClick)=\"onPageClick($event)\"\n        class=\"et-pagination-anchor\"\n      >\n        <ng-container *ngIf=\"page.type === 'page'\">\n          {{ page.page }}\n        </ng-container>\n      </a>\n    </li>\n  </ul>\n</nav>\n", styles: [""], dependencies: [{ kind: "directive", type: NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: PaginationLinkDirective, selector: "[etPaginationLink]", inputs: ["etPaginationLink"], outputs: ["pageClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.0", ngImport: i0, type: PaginationComponent, decorators: [{
             type: Component,
@@ -7463,7 +7422,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.0", ngImpor
             }], headFirstPageTitle: [{
                 type: Input
             }], headAddCanonicalTag: [{
-                type: Input
+                type: Input,
+                args: [{ transform: booleanAttribute }]
             }], ariaLabel: [{
                 type: Input
             }], pageChangeScrollAnchor: [{
@@ -7474,7 +7434,7 @@ const PaginationImports = [PaginationComponent];
 
 class PictureDataDirective {
     constructor() {
-        this._hasPriority = false;
+        this.hasPriority = false;
         this.imgClass = null;
         this.figureClass = null;
         this.figcaptionClass = null;
@@ -7486,14 +7446,8 @@ class PictureDataDirective {
         this.height = null;
         this.sizes = null;
     }
-    get hasPriority() {
-        return this._hasPriority;
-    }
-    set hasPriority(value) {
-        this._hasPriority = coerceBooleanProperty(value);
-    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.0", ngImport: i0, type: PictureDataDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.1.0", type: PictureDataDirective, isStandalone: true, inputs: { hasPriority: "hasPriority", imgClass: "imgClass", figureClass: "figureClass", figcaptionClass: "figcaptionClass", pictureClass: "pictureClass", defaultSrc: "defaultSrc", alt: "alt", figcaption: "figcaption", width: "width", height: "height", sizes: "sizes" }, ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.1.0", type: PictureDataDirective, isStandalone: true, inputs: { hasPriority: ["hasPriority", "hasPriority", booleanAttribute], imgClass: "imgClass", figureClass: "figureClass", figcaptionClass: "figcaptionClass", pictureClass: "pictureClass", defaultSrc: "defaultSrc", alt: "alt", figcaption: "figcaption", width: "width", height: "height", sizes: "sizes" }, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.0", ngImport: i0, type: PictureDataDirective, decorators: [{
             type: Directive,
@@ -7501,7 +7455,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.0", ngImpor
                     standalone: true,
                 }]
         }], propDecorators: { hasPriority: [{
-                type: Input
+                type: Input,
+                args: [{ transform: booleanAttribute }]
             }], imgClass: [{
                 type: Input
             }], figureClass: [{
@@ -7569,37 +7524,25 @@ function PROGRESS_SPINNER_DEFAULT_OPTIONS_FACTORY() {
 const BASE_SIZE = 100;
 const BASE_STROKE_WIDTH = 10;
 class ProgressSpinnerComponent {
-    get multiColor() {
-        return this._multiColor;
-    }
-    set multiColor(value) {
-        this._multiColor = coerceBooleanProperty(value);
-    }
     get value() {
         return this.mode === 'determinate' ? this._value : 0;
     }
     set value(v) {
-        this._value = clamp(coerceNumberProperty(v));
-    }
-    get diameter() {
-        return this._diameter;
-    }
-    set diameter(size) {
-        this._diameter = coerceNumberProperty(size);
+        this._value = clamp(numberAttribute(v, 0));
     }
     get strokeWidth() {
         return this._strokeWidth ?? this.diameter / 10;
     }
     set strokeWidth(value) {
-        this._strokeWidth = coerceNumberProperty(value);
+        this._strokeWidth = numberAttribute(value);
     }
     constructor() {
         this._elementRef = inject(ElementRef);
         this._defaults = inject(PROGRESS_SPINNER_DEFAULT_OPTIONS);
-        this._multiColor = false;
+        this.multiColor = false;
         this.mode = this._elementRef.nativeElement.nodeName.toLowerCase() === 'et-spinner' ? 'indeterminate' : 'determinate';
         this._value = 0;
-        this._diameter = BASE_SIZE;
+        this.diameter = BASE_SIZE;
         this._strokeWidth = null;
         if (this._defaults) {
             if (this._defaults.diameter) {
@@ -7630,7 +7573,7 @@ class ProgressSpinnerComponent {
         return (this.strokeWidth / this.diameter) * 100;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.0", ngImport: i0, type: ProgressSpinnerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.0", type: ProgressSpinnerComponent, isStandalone: true, selector: "et-progress-spinner, et-spinner", inputs: { multiColor: "multiColor", mode: "mode", value: "value", diameter: "diameter", strokeWidth: "strokeWidth" }, host: { attributes: { "role": "progressbar", "tabindex": "-1" }, properties: { "class.et-circular-progress--indeterminate": "mode === \"indeterminate\"", "class.et-progress-spinner--multi-color": "multiColor", "style.width.px": "diameter", "style.height.px": "diameter", "attr.aria-valuemin": "0", "attr.aria-valuemax": "100", "attr.aria-valuenow": "mode === \"determinate\" ? value : null", "attr.mode": "mode" }, classAttribute: "et-progress-spinner" }, ngImport: i0, template: "<ng-template #circle>\n  <svg\n    [attr.viewBox]=\"_viewBox()\"\n    class=\"et-circular-progress__indeterminate-circle-graphic\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    focusable=\"false\"\n  >\n    <circle\n      [attr.r]=\"_circleRadius()\"\n      [style.stroke-dasharray.px]=\"_strokeCircumference()\"\n      [style.stroke-dashoffset.px]=\"_strokeCircumference() / 2\"\n      [style.stroke-width.%]=\"_circleStrokeWidth()\"\n      cx=\"50%\"\n      cy=\"50%\"\n    />\n  </svg>\n</ng-template>\n\n<ng-template #spinner>\n  <div class=\"et-circular-progress__circle-clipper et-circular-progress__circle-left\">\n    <ng-container [ngTemplateOutlet]=\"circle\" />\n  </div>\n  <div class=\"et-circular-progress__gap-patch\">\n    <ng-container [ngTemplateOutlet]=\"circle\" />\n  </div>\n  <div class=\"et-circular-progress__circle-clipper et-circular-progress__circle-right\">\n    <ng-container [ngTemplateOutlet]=\"circle\" />\n  </div>\n</ng-template>\n\n<div class=\"et-circular-progress__determinate-container\" aria-hidden=\"true\">\n  <svg\n    [attr.viewBox]=\"_viewBox()\"\n    class=\"et-circular-progress__determinate-circle-graphic\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    focusable=\"false\"\n  >\n    <circle\n      [attr.r]=\"_circleRadius()\"\n      [style.stroke-dasharray.px]=\"_strokeCircumference()\"\n      [style.stroke-dashoffset.px]=\"_strokeDashOffset()\"\n      [style.stroke-width.%]=\"_circleStrokeWidth()\"\n      class=\"et-circular-progress__determinate-circle\"\n      cx=\"50%\"\n      cy=\"50%\"\n    />\n  </svg>\n</div>\n\n<div class=\"et-circular-progress__indeterminate-container\" aria-hidden=\"true\">\n  <div [class.et-circular-progress__color-1]=\"multiColor\" class=\"et-circular-progress__spinner-layer\">\n    <ng-container [ngTemplateOutlet]=\"spinner\" />\n  </div>\n\n  <div class=\"et-circular-progress__spinner-layer et-circular-progress__color-2\">\n    <ng-container [ngTemplateOutlet]=\"spinner\" />\n  </div>\n\n  <div class=\"et-circular-progress__spinner-layer et-circular-progress__color-3\">\n    <ng-container [ngTemplateOutlet]=\"spinner\" />\n  </div>\n\n  <div class=\"et-circular-progress__spinner-layer et-circular-progress__color-4\">\n    <ng-container [ngTemplateOutlet]=\"spinner\" />\n  </div>\n</div>\n", styles: [":where(.et-progress-spinner){--et-progress-spinner-edges: round;--et-progress-spinner-color: #1e88e5;--et-progress-spinner-color-1: var(--et-progress-spinner-color);--et-progress-spinner-color-2: #f44336;--et-progress-spinner-color-3: #ff9800;--et-progress-spinner-color-4: #4caf50}.et-progress-spinner{position:relative;direction:ltr;transition:opacity .25s 0ms cubic-bezier(.4,0,.6,1);display:block;overflow:hidden;line-height:0}.et-progress-spinner.et-progress-spinner--multi-color .et-circular-progress__color-2,.et-progress-spinner.et-progress-spinner--multi-color .et-circular-progress__color-3,.et-progress-spinner.et-progress-spinner--multi-color .et-circular-progress__color-4{visibility:visible}.et-progress-spinner.et-progress-spinner--multi-color .et-circular-progress__color-1 .et-circular-progress__indeterminate-circle-graphic{stroke:var(--et-progress-spinner-color-1)}.et-circular-progress__determinate-circle,.et-circular-progress__indeterminate-circle-graphic{stroke:var(--et-progress-spinner-color);stroke-linecap:var(--et-progress-spinner-edges)}.et-circular-progress__color-2 .et-circular-progress__indeterminate-circle-graphic{stroke:var(--et-progress-spinner-color-2)}.et-circular-progress__color-3 .et-circular-progress__indeterminate-circle-graphic{stroke:var(--et-progress-spinner-color-3)}.et-circular-progress__color-4 .et-circular-progress__indeterminate-circle-graphic{stroke:var(--et-progress-spinner-color-4)}.et-circular-progress__color-2,.et-circular-progress__color-3,.et-circular-progress__color-4{visibility:hidden}.et-circular-progress__determinate-container,.et-circular-progress__indeterminate-circle-graphic,.et-circular-progress__indeterminate-container,.et-circular-progress__spinner-layer{position:absolute;width:100%;height:100%}.et-circular-progress__determinate-container{transform:rotate(-90deg)}.et-circular-progress__indeterminate-container{font-size:0;letter-spacing:0;white-space:nowrap;opacity:0}.et-circular-progress__determinate-circle-graphic,.et-circular-progress__indeterminate-circle-graphic{fill:#0000}.et-circular-progress__determinate-circle{transition:stroke-dashoffset .5s 0ms cubic-bezier(0,0,.2,1)}.et-circular-progress__gap-patch{position:absolute;top:0;left:47.5%;box-sizing:border-box;width:5%;height:100%;overflow:hidden}.et-circular-progress__gap-patch .et-circular-progress__indeterminate-circle-graphic{left:-900%;width:2000%;transform:rotate(180deg)}.et-circular-progress__circle-clipper{display:inline-flex;position:relative;width:50%;height:100%;overflow:hidden}.et-circular-progress__circle-clipper .et-circular-progress__indeterminate-circle-graphic{width:200%}.et-circular-progress__circle-right .et-circular-progress__indeterminate-circle-graphic{left:-100%}.et-circular-progress--indeterminate .et-circular-progress__determinate-container{opacity:0}.et-circular-progress--indeterminate .et-circular-progress__indeterminate-container{opacity:1}.et-circular-progress--indeterminate .et-circular-progress__indeterminate-container{animation:et-circular-progress-container-rotate 1.5682352941176s linear infinite}.et-circular-progress--indeterminate .et-circular-progress__spinner-layer{animation:et-circular-progress-spinner-layer-rotate 5332ms cubic-bezier(.4,0,.2,1) infinite both}.et-circular-progress--indeterminate .et-circular-progress__color-1{animation:et-circular-progress-spinner-layer-rotate 5332ms cubic-bezier(.4,0,.2,1) infinite both,et-circular-progress-color-1-fade-in-out 5332ms cubic-bezier(.4,0,.2,1) infinite both}.et-circular-progress--indeterminate .et-circular-progress__color-2{animation:et-circular-progress-spinner-layer-rotate 5332ms cubic-bezier(.4,0,.2,1) infinite both,et-circular-progress-color-2-fade-in-out 5332ms cubic-bezier(.4,0,.2,1) infinite both}.et-circular-progress--indeterminate .et-circular-progress__color-3{animation:et-circular-progress-spinner-layer-rotate 5332ms cubic-bezier(.4,0,.2,1) infinite both,et-circular-progress-color-3-fade-in-out 5332ms cubic-bezier(.4,0,.2,1) infinite both}.et-circular-progress--indeterminate .et-circular-progress__color-4{animation:et-circular-progress-spinner-layer-rotate 5332ms cubic-bezier(.4,0,.2,1) infinite both,et-circular-progress-color-4-fade-in-out 5332ms cubic-bezier(.4,0,.2,1) infinite both}.et-circular-progress--indeterminate .et-circular-progress__circle-left .et-circular-progress__indeterminate-circle-graphic{animation:et-circular-progress-left-spin 1333ms cubic-bezier(.4,0,.2,1) infinite both}.et-circular-progress--indeterminate .et-circular-progress__circle-right .et-circular-progress__indeterminate-circle-graphic{animation:et-circular-progress-right-spin 1333ms cubic-bezier(.4,0,.2,1) infinite both}@keyframes et-circular-progress-container-rotate{to{transform:rotate(360deg)}}@keyframes et-circular-progress-spinner-layer-rotate{12.5%{transform:rotate(135deg)}25%{transform:rotate(270deg)}37.5%{transform:rotate(405deg)}50%{transform:rotate(540deg)}62.5%{transform:rotate(675deg)}75%{transform:rotate(810deg)}87.5%{transform:rotate(945deg)}to{transform:rotate(1080deg)}}@keyframes et-circular-progress-color-1-fade-in-out{0%{opacity:.99}25%{opacity:.99}26%{opacity:0}50%{opacity:0}90%{opacity:.99}to{opacity:.99}}@keyframes et-circular-progress-color-2-fade-in-out{0%{opacity:0}15%{opacity:0}25%{opacity:.99}50%{opacity:.99}51%{opacity:0}to{opacity:0}}@keyframes et-circular-progress-color-3-fade-in-out{0%{opacity:0}40%{opacity:0}50%{opacity:.99}75%{opacity:.99}76%{opacity:0}to{opacity:0}}@keyframes et-circular-progress-color-4-fade-in-out{0%{opacity:0}65%{opacity:0}75%{opacity:.99}90%{opacity:.99}to{opacity:0}}@keyframes et-circular-progress-left-spin{0%{transform:rotate(260deg)}50%{transform:rotate(130deg)}to{transform:rotate(260deg)}}@keyframes et-circular-progress-right-spin{0%{transform:rotate(-260deg)}50%{transform:rotate(-130deg)}to{transform:rotate(-260deg)}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.0", type: ProgressSpinnerComponent, isStandalone: true, selector: "et-progress-spinner, et-spinner", inputs: { multiColor: ["multiColor", "multiColor", booleanAttribute], mode: "mode", value: "value", diameter: ["diameter", "diameter", numberAttribute], strokeWidth: "strokeWidth" }, host: { attributes: { "role": "progressbar", "tabindex": "-1" }, properties: { "class.et-circular-progress--indeterminate": "mode === \"indeterminate\"", "class.et-progress-spinner--multi-color": "multiColor", "style.width.px": "diameter", "style.height.px": "diameter", "attr.aria-valuemin": "0", "attr.aria-valuemax": "100", "attr.aria-valuenow": "mode === \"determinate\" ? value : null", "attr.mode": "mode" }, classAttribute: "et-progress-spinner" }, ngImport: i0, template: "<ng-template #circle>\n  <svg\n    [attr.viewBox]=\"_viewBox()\"\n    class=\"et-circular-progress__indeterminate-circle-graphic\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    focusable=\"false\"\n  >\n    <circle\n      [attr.r]=\"_circleRadius()\"\n      [style.stroke-dasharray.px]=\"_strokeCircumference()\"\n      [style.stroke-dashoffset.px]=\"_strokeCircumference() / 2\"\n      [style.stroke-width.%]=\"_circleStrokeWidth()\"\n      cx=\"50%\"\n      cy=\"50%\"\n    />\n  </svg>\n</ng-template>\n\n<ng-template #spinner>\n  <div class=\"et-circular-progress__circle-clipper et-circular-progress__circle-left\">\n    <ng-container [ngTemplateOutlet]=\"circle\" />\n  </div>\n  <div class=\"et-circular-progress__gap-patch\">\n    <ng-container [ngTemplateOutlet]=\"circle\" />\n  </div>\n  <div class=\"et-circular-progress__circle-clipper et-circular-progress__circle-right\">\n    <ng-container [ngTemplateOutlet]=\"circle\" />\n  </div>\n</ng-template>\n\n<div class=\"et-circular-progress__determinate-container\" aria-hidden=\"true\">\n  <svg\n    [attr.viewBox]=\"_viewBox()\"\n    class=\"et-circular-progress__determinate-circle-graphic\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    focusable=\"false\"\n  >\n    <circle\n      [attr.r]=\"_circleRadius()\"\n      [style.stroke-dasharray.px]=\"_strokeCircumference()\"\n      [style.stroke-dashoffset.px]=\"_strokeDashOffset()\"\n      [style.stroke-width.%]=\"_circleStrokeWidth()\"\n      class=\"et-circular-progress__determinate-circle\"\n      cx=\"50%\"\n      cy=\"50%\"\n    />\n  </svg>\n</div>\n\n<div class=\"et-circular-progress__indeterminate-container\" aria-hidden=\"true\">\n  <div [class.et-circular-progress__color-1]=\"multiColor\" class=\"et-circular-progress__spinner-layer\">\n    <ng-container [ngTemplateOutlet]=\"spinner\" />\n  </div>\n\n  <div class=\"et-circular-progress__spinner-layer et-circular-progress__color-2\">\n    <ng-container [ngTemplateOutlet]=\"spinner\" />\n  </div>\n\n  <div class=\"et-circular-progress__spinner-layer et-circular-progress__color-3\">\n    <ng-container [ngTemplateOutlet]=\"spinner\" />\n  </div>\n\n  <div class=\"et-circular-progress__spinner-layer et-circular-progress__color-4\">\n    <ng-container [ngTemplateOutlet]=\"spinner\" />\n  </div>\n</div>\n", styles: [":where(.et-progress-spinner){--et-progress-spinner-edges: round;--et-progress-spinner-color: #1e88e5;--et-progress-spinner-color-1: var(--et-progress-spinner-color);--et-progress-spinner-color-2: #f44336;--et-progress-spinner-color-3: #ff9800;--et-progress-spinner-color-4: #4caf50}.et-progress-spinner{position:relative;direction:ltr;transition:opacity .25s 0ms cubic-bezier(.4,0,.6,1);display:block;overflow:hidden;line-height:0}.et-progress-spinner.et-progress-spinner--multi-color .et-circular-progress__color-2,.et-progress-spinner.et-progress-spinner--multi-color .et-circular-progress__color-3,.et-progress-spinner.et-progress-spinner--multi-color .et-circular-progress__color-4{visibility:visible}.et-progress-spinner.et-progress-spinner--multi-color .et-circular-progress__color-1 .et-circular-progress__indeterminate-circle-graphic{stroke:var(--et-progress-spinner-color-1)}.et-circular-progress__determinate-circle,.et-circular-progress__indeterminate-circle-graphic{stroke:var(--et-progress-spinner-color);stroke-linecap:var(--et-progress-spinner-edges)}.et-circular-progress__color-2 .et-circular-progress__indeterminate-circle-graphic{stroke:var(--et-progress-spinner-color-2)}.et-circular-progress__color-3 .et-circular-progress__indeterminate-circle-graphic{stroke:var(--et-progress-spinner-color-3)}.et-circular-progress__color-4 .et-circular-progress__indeterminate-circle-graphic{stroke:var(--et-progress-spinner-color-4)}.et-circular-progress__color-2,.et-circular-progress__color-3,.et-circular-progress__color-4{visibility:hidden}.et-circular-progress__determinate-container,.et-circular-progress__indeterminate-circle-graphic,.et-circular-progress__indeterminate-container,.et-circular-progress__spinner-layer{position:absolute;width:100%;height:100%}.et-circular-progress__determinate-container{transform:rotate(-90deg)}.et-circular-progress__indeterminate-container{font-size:0;letter-spacing:0;white-space:nowrap;opacity:0}.et-circular-progress__determinate-circle-graphic,.et-circular-progress__indeterminate-circle-graphic{fill:#0000}.et-circular-progress__determinate-circle{transition:stroke-dashoffset .5s 0ms cubic-bezier(0,0,.2,1)}.et-circular-progress__gap-patch{position:absolute;top:0;left:47.5%;box-sizing:border-box;width:5%;height:100%;overflow:hidden}.et-circular-progress__gap-patch .et-circular-progress__indeterminate-circle-graphic{left:-900%;width:2000%;transform:rotate(180deg)}.et-circular-progress__circle-clipper{display:inline-flex;position:relative;width:50%;height:100%;overflow:hidden}.et-circular-progress__circle-clipper .et-circular-progress__indeterminate-circle-graphic{width:200%}.et-circular-progress__circle-right .et-circular-progress__indeterminate-circle-graphic{left:-100%}.et-circular-progress--indeterminate .et-circular-progress__determinate-container{opacity:0}.et-circular-progress--indeterminate .et-circular-progress__indeterminate-container{opacity:1}.et-circular-progress--indeterminate .et-circular-progress__indeterminate-container{animation:et-circular-progress-container-rotate 1.5682352941176s linear infinite}.et-circular-progress--indeterminate .et-circular-progress__spinner-layer{animation:et-circular-progress-spinner-layer-rotate 5332ms cubic-bezier(.4,0,.2,1) infinite both}.et-circular-progress--indeterminate .et-circular-progress__color-1{animation:et-circular-progress-spinner-layer-rotate 5332ms cubic-bezier(.4,0,.2,1) infinite both,et-circular-progress-color-1-fade-in-out 5332ms cubic-bezier(.4,0,.2,1) infinite both}.et-circular-progress--indeterminate .et-circular-progress__color-2{animation:et-circular-progress-spinner-layer-rotate 5332ms cubic-bezier(.4,0,.2,1) infinite both,et-circular-progress-color-2-fade-in-out 5332ms cubic-bezier(.4,0,.2,1) infinite both}.et-circular-progress--indeterminate .et-circular-progress__color-3{animation:et-circular-progress-spinner-layer-rotate 5332ms cubic-bezier(.4,0,.2,1) infinite both,et-circular-progress-color-3-fade-in-out 5332ms cubic-bezier(.4,0,.2,1) infinite both}.et-circular-progress--indeterminate .et-circular-progress__color-4{animation:et-circular-progress-spinner-layer-rotate 5332ms cubic-bezier(.4,0,.2,1) infinite both,et-circular-progress-color-4-fade-in-out 5332ms cubic-bezier(.4,0,.2,1) infinite both}.et-circular-progress--indeterminate .et-circular-progress__circle-left .et-circular-progress__indeterminate-circle-graphic{animation:et-circular-progress-left-spin 1333ms cubic-bezier(.4,0,.2,1) infinite both}.et-circular-progress--indeterminate .et-circular-progress__circle-right .et-circular-progress__indeterminate-circle-graphic{animation:et-circular-progress-right-spin 1333ms cubic-bezier(.4,0,.2,1) infinite both}@keyframes et-circular-progress-container-rotate{to{transform:rotate(360deg)}}@keyframes et-circular-progress-spinner-layer-rotate{12.5%{transform:rotate(135deg)}25%{transform:rotate(270deg)}37.5%{transform:rotate(405deg)}50%{transform:rotate(540deg)}62.5%{transform:rotate(675deg)}75%{transform:rotate(810deg)}87.5%{transform:rotate(945deg)}to{transform:rotate(1080deg)}}@keyframes et-circular-progress-color-1-fade-in-out{0%{opacity:.99}25%{opacity:.99}26%{opacity:0}50%{opacity:0}90%{opacity:.99}to{opacity:.99}}@keyframes et-circular-progress-color-2-fade-in-out{0%{opacity:0}15%{opacity:0}25%{opacity:.99}50%{opacity:.99}51%{opacity:0}to{opacity:0}}@keyframes et-circular-progress-color-3-fade-in-out{0%{opacity:0}40%{opacity:0}50%{opacity:.99}75%{opacity:.99}76%{opacity:0}to{opacity:0}}@keyframes et-circular-progress-color-4-fade-in-out{0%{opacity:0}65%{opacity:0}75%{opacity:.99}90%{opacity:.99}to{opacity:0}}@keyframes et-circular-progress-left-spin{0%{transform:rotate(260deg)}50%{transform:rotate(130deg)}to{transform:rotate(260deg)}}@keyframes et-circular-progress-right-spin{0%{transform:rotate(-260deg)}50%{transform:rotate(-130deg)}to{transform:rotate(-260deg)}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.0", ngImport: i0, type: ProgressSpinnerComponent, decorators: [{
             type: Component,
@@ -7648,13 +7591,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.0", ngImpor
                         '[attr.mode]': 'mode',
                     }, imports: [NgTemplateOutlet, NgIf], hostDirectives: [], template: "<ng-template #circle>\n  <svg\n    [attr.viewBox]=\"_viewBox()\"\n    class=\"et-circular-progress__indeterminate-circle-graphic\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    focusable=\"false\"\n  >\n    <circle\n      [attr.r]=\"_circleRadius()\"\n      [style.stroke-dasharray.px]=\"_strokeCircumference()\"\n      [style.stroke-dashoffset.px]=\"_strokeCircumference() / 2\"\n      [style.stroke-width.%]=\"_circleStrokeWidth()\"\n      cx=\"50%\"\n      cy=\"50%\"\n    />\n  </svg>\n</ng-template>\n\n<ng-template #spinner>\n  <div class=\"et-circular-progress__circle-clipper et-circular-progress__circle-left\">\n    <ng-container [ngTemplateOutlet]=\"circle\" />\n  </div>\n  <div class=\"et-circular-progress__gap-patch\">\n    <ng-container [ngTemplateOutlet]=\"circle\" />\n  </div>\n  <div class=\"et-circular-progress__circle-clipper et-circular-progress__circle-right\">\n    <ng-container [ngTemplateOutlet]=\"circle\" />\n  </div>\n</ng-template>\n\n<div class=\"et-circular-progress__determinate-container\" aria-hidden=\"true\">\n  <svg\n    [attr.viewBox]=\"_viewBox()\"\n    class=\"et-circular-progress__determinate-circle-graphic\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    focusable=\"false\"\n  >\n    <circle\n      [attr.r]=\"_circleRadius()\"\n      [style.stroke-dasharray.px]=\"_strokeCircumference()\"\n      [style.stroke-dashoffset.px]=\"_strokeDashOffset()\"\n      [style.stroke-width.%]=\"_circleStrokeWidth()\"\n      class=\"et-circular-progress__determinate-circle\"\n      cx=\"50%\"\n      cy=\"50%\"\n    />\n  </svg>\n</div>\n\n<div class=\"et-circular-progress__indeterminate-container\" aria-hidden=\"true\">\n  <div [class.et-circular-progress__color-1]=\"multiColor\" class=\"et-circular-progress__spinner-layer\">\n    <ng-container [ngTemplateOutlet]=\"spinner\" />\n  </div>\n\n  <div class=\"et-circular-progress__spinner-layer et-circular-progress__color-2\">\n    <ng-container [ngTemplateOutlet]=\"spinner\" />\n  </div>\n\n  <div class=\"et-circular-progress__spinner-layer et-circular-progress__color-3\">\n    <ng-container [ngTemplateOutlet]=\"spinner\" />\n  </div>\n\n  <div class=\"et-circular-progress__spinner-layer et-circular-progress__color-4\">\n    <ng-container [ngTemplateOutlet]=\"spinner\" />\n  </div>\n</div>\n", styles: [":where(.et-progress-spinner){--et-progress-spinner-edges: round;--et-progress-spinner-color: #1e88e5;--et-progress-spinner-color-1: var(--et-progress-spinner-color);--et-progress-spinner-color-2: #f44336;--et-progress-spinner-color-3: #ff9800;--et-progress-spinner-color-4: #4caf50}.et-progress-spinner{position:relative;direction:ltr;transition:opacity .25s 0ms cubic-bezier(.4,0,.6,1);display:block;overflow:hidden;line-height:0}.et-progress-spinner.et-progress-spinner--multi-color .et-circular-progress__color-2,.et-progress-spinner.et-progress-spinner--multi-color .et-circular-progress__color-3,.et-progress-spinner.et-progress-spinner--multi-color .et-circular-progress__color-4{visibility:visible}.et-progress-spinner.et-progress-spinner--multi-color .et-circular-progress__color-1 .et-circular-progress__indeterminate-circle-graphic{stroke:var(--et-progress-spinner-color-1)}.et-circular-progress__determinate-circle,.et-circular-progress__indeterminate-circle-graphic{stroke:var(--et-progress-spinner-color);stroke-linecap:var(--et-progress-spinner-edges)}.et-circular-progress__color-2 .et-circular-progress__indeterminate-circle-graphic{stroke:var(--et-progress-spinner-color-2)}.et-circular-progress__color-3 .et-circular-progress__indeterminate-circle-graphic{stroke:var(--et-progress-spinner-color-3)}.et-circular-progress__color-4 .et-circular-progress__indeterminate-circle-graphic{stroke:var(--et-progress-spinner-color-4)}.et-circular-progress__color-2,.et-circular-progress__color-3,.et-circular-progress__color-4{visibility:hidden}.et-circular-progress__determinate-container,.et-circular-progress__indeterminate-circle-graphic,.et-circular-progress__indeterminate-container,.et-circular-progress__spinner-layer{position:absolute;width:100%;height:100%}.et-circular-progress__determinate-container{transform:rotate(-90deg)}.et-circular-progress__indeterminate-container{font-size:0;letter-spacing:0;white-space:nowrap;opacity:0}.et-circular-progress__determinate-circle-graphic,.et-circular-progress__indeterminate-circle-graphic{fill:#0000}.et-circular-progress__determinate-circle{transition:stroke-dashoffset .5s 0ms cubic-bezier(0,0,.2,1)}.et-circular-progress__gap-patch{position:absolute;top:0;left:47.5%;box-sizing:border-box;width:5%;height:100%;overflow:hidden}.et-circular-progress__gap-patch .et-circular-progress__indeterminate-circle-graphic{left:-900%;width:2000%;transform:rotate(180deg)}.et-circular-progress__circle-clipper{display:inline-flex;position:relative;width:50%;height:100%;overflow:hidden}.et-circular-progress__circle-clipper .et-circular-progress__indeterminate-circle-graphic{width:200%}.et-circular-progress__circle-right .et-circular-progress__indeterminate-circle-graphic{left:-100%}.et-circular-progress--indeterminate .et-circular-progress__determinate-container{opacity:0}.et-circular-progress--indeterminate .et-circular-progress__indeterminate-container{opacity:1}.et-circular-progress--indeterminate .et-circular-progress__indeterminate-container{animation:et-circular-progress-container-rotate 1.5682352941176s linear infinite}.et-circular-progress--indeterminate .et-circular-progress__spinner-layer{animation:et-circular-progress-spinner-layer-rotate 5332ms cubic-bezier(.4,0,.2,1) infinite both}.et-circular-progress--indeterminate .et-circular-progress__color-1{animation:et-circular-progress-spinner-layer-rotate 5332ms cubic-bezier(.4,0,.2,1) infinite both,et-circular-progress-color-1-fade-in-out 5332ms cubic-bezier(.4,0,.2,1) infinite both}.et-circular-progress--indeterminate .et-circular-progress__color-2{animation:et-circular-progress-spinner-layer-rotate 5332ms cubic-bezier(.4,0,.2,1) infinite both,et-circular-progress-color-2-fade-in-out 5332ms cubic-bezier(.4,0,.2,1) infinite both}.et-circular-progress--indeterminate .et-circular-progress__color-3{animation:et-circular-progress-spinner-layer-rotate 5332ms cubic-bezier(.4,0,.2,1) infinite both,et-circular-progress-color-3-fade-in-out 5332ms cubic-bezier(.4,0,.2,1) infinite both}.et-circular-progress--indeterminate .et-circular-progress__color-4{animation:et-circular-progress-spinner-layer-rotate 5332ms cubic-bezier(.4,0,.2,1) infinite both,et-circular-progress-color-4-fade-in-out 5332ms cubic-bezier(.4,0,.2,1) infinite both}.et-circular-progress--indeterminate .et-circular-progress__circle-left .et-circular-progress__indeterminate-circle-graphic{animation:et-circular-progress-left-spin 1333ms cubic-bezier(.4,0,.2,1) infinite both}.et-circular-progress--indeterminate .et-circular-progress__circle-right .et-circular-progress__indeterminate-circle-graphic{animation:et-circular-progress-right-spin 1333ms cubic-bezier(.4,0,.2,1) infinite both}@keyframes et-circular-progress-container-rotate{to{transform:rotate(360deg)}}@keyframes et-circular-progress-spinner-layer-rotate{12.5%{transform:rotate(135deg)}25%{transform:rotate(270deg)}37.5%{transform:rotate(405deg)}50%{transform:rotate(540deg)}62.5%{transform:rotate(675deg)}75%{transform:rotate(810deg)}87.5%{transform:rotate(945deg)}to{transform:rotate(1080deg)}}@keyframes et-circular-progress-color-1-fade-in-out{0%{opacity:.99}25%{opacity:.99}26%{opacity:0}50%{opacity:0}90%{opacity:.99}to{opacity:.99}}@keyframes et-circular-progress-color-2-fade-in-out{0%{opacity:0}15%{opacity:0}25%{opacity:.99}50%{opacity:.99}51%{opacity:0}to{opacity:0}}@keyframes et-circular-progress-color-3-fade-in-out{0%{opacity:0}40%{opacity:0}50%{opacity:.99}75%{opacity:.99}76%{opacity:0}to{opacity:0}}@keyframes et-circular-progress-color-4-fade-in-out{0%{opacity:0}65%{opacity:0}75%{opacity:.99}90%{opacity:.99}to{opacity:0}}@keyframes et-circular-progress-left-spin{0%{transform:rotate(260deg)}50%{transform:rotate(130deg)}to{transform:rotate(260deg)}}@keyframes et-circular-progress-right-spin{0%{transform:rotate(-260deg)}50%{transform:rotate(-130deg)}to{transform:rotate(-260deg)}}\n"] }]
         }], ctorParameters: function () { return []; }, propDecorators: { multiColor: [{
-                type: Input
+                type: Input,
+                args: [{ transform: booleanAttribute }]
             }], mode: [{
                 type: Input
             }], value: [{
                 type: Input
             }], diameter: [{
-                type: Input
+                type: Input,
+                args: [{ transform: numberAttribute }]
             }], strokeWidth: [{
                 type: Input
             }] } });
@@ -7836,6 +7781,8 @@ class ScrollableComponent {
                 ?.toArray()
                 .map((e) => e?.elementRef.nativeElement)
                 .filter((e) => !!e) ?? [];
+            if (!elements.length)
+                return;
             const states = getElementVisibleStates({
                 elements,
                 container: scrollElement,
@@ -7859,7 +7806,7 @@ class ScrollableComponent {
                 };
                 return state;
             }));
-            if (isSnapping || this._isCursorDragging$.value)
+            if (isSnapping || this._isCursorDragging$.value || !this.snap)
                 return;
             const isOnlyOnePartialIntersection = states.filter((s) => s[prop] < 100 && s[prop] > 0).length === 1;
             if (isOnlyOnePartialIntersection)
@@ -7892,7 +7839,7 @@ class ScrollableComponent {
             .subscribe();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.0", ngImport: i0, type: ScrollableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.0", type: ScrollableComponent, isStandalone: true, selector: "et-scrollable", inputs: { itemSize: "itemSize", direction: "direction", scrollableRole: "scrollableRole", scrollableClass: "scrollableClass", renderMasks: ["renderMasks", "renderMasks", booleanAttribute], renderButtons: ["renderButtons", "renderButtons", booleanAttribute], renderScrollbars: ["renderScrollbars", "renderScrollbars", booleanAttribute], stickyButtons: ["stickyButtons", "stickyButtons", booleanAttribute], cursorDragScroll: ["cursorDragScroll", "cursorDragScroll", booleanAttribute], disableActiveElementScrolling: ["disableActiveElementScrolling", "disableActiveElementScrolling", booleanAttribute], scrollMode: "scrollMode", snap: ["snap", "snap", booleanAttribute], scrollMargin: ["scrollMargin", "scrollMargin", numberAttribute] }, outputs: { scrollStateChange: "scrollStateChange", intersectionChange: "intersectionChange" }, host: { properties: { "attr.item-size": "this.itemSize", "attr.direction": "this.direction", "attr.render-scrollbars": "this.renderScrollbars", "attr.sticky-buttons": "this.stickyButtons" }, classAttribute: "et-scrollable" }, queries: [{ propertyName: "activeElements", predicate: IS_ACTIVE_ELEMENT, descendants: true }, { propertyName: "elements", predicate: IS_ELEMENT, descendants: true }], viewQueries: [{ propertyName: "scrollable", first: true, predicate: ["scrollable"], descendants: true, static: true }], ngImport: i0, template: "<div\n  #scrollable\n  [attr.role]=\"scrollableRole ?? undefined\"\n  [ngClass]=\"scrollableClass\"\n  [etCursorDragScroll]=\"cursorDragScroll\"\n  [allowedDirection]=\"direction\"\n  (etObserveScrollState)=\"_scrollStateChanged($event)\"\n  (cursorDragStart)=\"setIsCursorDragging(true)\"\n  (cursorDragEnd)=\"setIsCursorDragging(false)\"\n  class=\"et-scrollable-container\"\n>\n  <ng-content />\n</div>\n\n<div *ngIf=\"renderMasks\" class=\"et-scrollable-masks\">\n  <div class=\"et-scrollable-mask et-scrollable-mask--start\"></div>\n  <div class=\"et-scrollable-mask et-scrollable-mask--end\"></div>\n</div>\n\n<div *ngIf=\"renderButtons\" class=\"et-scrollable-buttons\">\n  <button\n    (click)=\"scrollToStartDirection()\"\n    class=\"et-scrollable-button et-scrollable-button--start\"\n    aria-hidden=\"true\"\n    type=\"button\"\n    tabindex=\"-1\"\n  >\n    <et-chevron-icon />\n  </button>\n  <button\n    (click)=\"scrollToStartEnd()\"\n    class=\"et-scrollable-button et-scrollable-button--end\"\n    aria-hidden=\"true\"\n    type=\"button\"\n    tabindex=\"-1\"\n  >\n    <et-chevron-icon />\n  </button>\n</div>\n", styles: [".et-scrollable{--mask: #121212 0, transparent 100%;--mask-size: 25px;--_auto-size: min-content;--_flow: column;display:grid;position:relative}.et-scrollable[item-size=same]{--auto-size: 1fr}.et-scrollable[render-scrollbars=false] .et-scrollable-container{scrollbar-width:none}.et-scrollable[render-scrollbars=false] .et-scrollable-container::-webkit-scrollbar{display:none}.et-scrollable[direction=horizontal] .et-scrollable-container{grid-auto-columns:var(--_auto-size);overflow-x:auto;overflow-y:hidden}.et-scrollable[direction=horizontal] .et-scrollable-mask,.et-scrollable[direction=horizontal] .et-scrollable-button{inline-size:var(--mask-size);block-size:100%}.et-scrollable[direction=horizontal] .et-scrollable-mask--start,.et-scrollable[direction=horizontal] .et-scrollable-button--start{inset-block-start:0;inset-inline:0 0}.et-scrollable[direction=horizontal] .et-scrollable-mask--end,.et-scrollable[direction=horizontal] .et-scrollable-button--end{inset-block-start:0;inset-inline:calc(100% - 40px) 0}.et-scrollable[direction=horizontal] .et-scrollable-mask--start{background:linear-gradient(to right,var(--mask))}.et-scrollable[direction=horizontal] .et-scrollable-mask--end{background:linear-gradient(to left,var(--mask));inset-inline:calc(100% - var(--mask-size)) 100%}.et-scrollable[direction=horizontal] .et-scrollable-button--start{inset-block-start:calc(50% - 20px);transform:rotate(-90deg)}.et-scrollable[direction=horizontal] .et-scrollable-button--end{inset-block-start:calc(50% - 20px);transform:rotate(90deg)}.et-scrollable[direction=vertical]{--_flow: row}.et-scrollable[direction=vertical] .et-scrollable-container{grid-auto-rows:var(--_auto-size);overflow-x:hidden;overflow-y:auto}.et-scrollable[direction=vertical] .et-scrollable-mask,.et-scrollable[direction=vertical] .et-scrollable-button{block-size:var(--mask-size);inline-size:100%}.et-scrollable[direction=vertical] .et-scrollable-mask--start,.et-scrollable[direction=vertical] .et-scrollable-button--start{inset-block-start:0;inset-inline-start:0}.et-scrollable[direction=vertical] .et-scrollable-mask--end,.et-scrollable[direction=vertical] .et-scrollable-button--end{inset-block-end:0;inset-inline-start:0}.et-scrollable[direction=vertical] .et-scrollable-mask--start{background:linear-gradient(to bottom,var(--mask))}.et-scrollable[direction=vertical] .et-scrollable-mask--end{background:linear-gradient(to top,var(--mask))}.et-scrollable[at-start=false] .et-scrollable-masks .et-scrollable-mask--start,.et-scrollable[at-start=false] .et-scrollable-buttons .et-scrollable-button--start{opacity:1}.et-scrollable[at-start=false] .et-scrollable-buttons .et-scrollable-button--start{pointer-events:all}.et-scrollable[at-end=false] .et-scrollable-masks .et-scrollable-mask--end,.et-scrollable[at-end=false] .et-scrollable-buttons .et-scrollable-button--end{opacity:1}.et-scrollable[at-end=false] .et-scrollable-buttons .et-scrollable-button--end{pointer-events:all}.et-scrollable .et-scrollable-container{display:grid;grid-auto-flow:var(--_flow);overflow:auto;grid-row:1/1;grid-column:1/1}.et-scrollable .et-scrollable-masks,.et-scrollable .et-scrollable-buttons{grid-row:1/1;grid-column:1/1;pointer-events:none}.et-scrollable .et-scrollable-masks .et-scrollable-mask,.et-scrollable .et-scrollable-masks .et-scrollable-button,.et-scrollable .et-scrollable-buttons .et-scrollable-mask,.et-scrollable .et-scrollable-buttons .et-scrollable-button{position:absolute;opacity:0;transition:opacity .3s var(--ease-5)}.et-scrollable .et-scrollable-buttons .et-scrollable-button{background:transparent;border:none;padding:12px;inline-size:40px;block-size:40px;border-radius:4px;cursor:pointer}.et-scrollable .et-scrollable-buttons .et-scrollable-button .et-chevron-icon{pointer-events:none}.et-scrollable .et-scrollable-buttons .et-scrollable-button .et-scrollable-button--start{inset-inline:0 0}.et-scrollable .et-scrollable-buttons .et-scrollable-button .et-scrollable-button--end{inset-inline:calc(100% - 40px) 0}.et-scrollable[sticky-buttons=true] .et-scrollable-buttons{margin-block:10%}.et-scrollable[sticky-buttons=true] .et-scrollable-buttons .et-scrollable-button{position:sticky}\n"], dependencies: [{ kind: "directive", type: CursorDragScrollDirective, selector: "[etCursorDragScroll]", inputs: ["etCursorDragScroll", "allowedDirection"], outputs: ["cursorDragStart", "cursorDragMove", "cursorDragEnd"], exportAs: ["etCursorDragScroll"] }, { kind: "directive", type: ObserveScrollStateDirective, selector: "[etObserveScrollState]", inputs: ["observerRootMargin", "observerThreshold"], outputs: ["etObserveScrollState"], exportAs: ["etObserveScrollState"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ChevronIconComponent, selector: "et-chevron-icon" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.0", type: ScrollableComponent, isStandalone: true, selector: "et-scrollable", inputs: { itemSize: "itemSize", direction: "direction", scrollableRole: "scrollableRole", scrollableClass: "scrollableClass", renderMasks: ["renderMasks", "renderMasks", booleanAttribute], renderButtons: ["renderButtons", "renderButtons", booleanAttribute], renderScrollbars: ["renderScrollbars", "renderScrollbars", booleanAttribute], stickyButtons: ["stickyButtons", "stickyButtons", booleanAttribute], cursorDragScroll: ["cursorDragScroll", "cursorDragScroll", booleanAttribute], disableActiveElementScrolling: ["disableActiveElementScrolling", "disableActiveElementScrolling", booleanAttribute], scrollMode: "scrollMode", snap: ["snap", "snap", booleanAttribute], scrollMargin: ["scrollMargin", "scrollMargin", numberAttribute] }, outputs: { scrollStateChange: "scrollStateChange", intersectionChange: "intersectionChange" }, host: { properties: { "attr.item-size": "this.itemSize", "attr.direction": "this.direction", "attr.render-scrollbars": "this.renderScrollbars", "attr.sticky-buttons": "this.stickyButtons" }, classAttribute: "et-scrollable" }, queries: [{ propertyName: "activeElements", predicate: IS_ACTIVE_ELEMENT, descendants: true }, { propertyName: "elements", predicate: IS_ELEMENT, descendants: true }], viewQueries: [{ propertyName: "scrollable", first: true, predicate: ["scrollable"], descendants: true, static: true }], ngImport: i0, template: "<div\n  #scrollable\n  [attr.role]=\"scrollableRole ?? undefined\"\n  [ngClass]=\"scrollableClass\"\n  [etCursorDragScroll]=\"cursorDragScroll\"\n  [allowedDirection]=\"direction\"\n  (etObserveScrollState)=\"_scrollStateChanged($event)\"\n  (cursorDragStart)=\"setIsCursorDragging(true)\"\n  (cursorDragEnd)=\"setIsCursorDragging(false)\"\n  class=\"et-scrollable-container\"\n>\n  <ng-content />\n</div>\n\n<div *ngIf=\"renderMasks\" class=\"et-scrollable-masks\">\n  <div class=\"et-scrollable-mask et-scrollable-mask--start\"></div>\n  <div class=\"et-scrollable-mask et-scrollable-mask--end\"></div>\n</div>\n\n<div *ngIf=\"renderButtons\" class=\"et-scrollable-buttons\">\n  <button\n    (click)=\"scrollToStartDirection()\"\n    class=\"et-scrollable-button et-scrollable-button--start\"\n    aria-hidden=\"true\"\n    type=\"button\"\n    tabindex=\"-1\"\n  >\n    <et-chevron-icon />\n  </button>\n  <button\n    (click)=\"scrollToStartEnd()\"\n    class=\"et-scrollable-button et-scrollable-button--end\"\n    aria-hidden=\"true\"\n    type=\"button\"\n    tabindex=\"-1\"\n  >\n    <et-chevron-icon />\n  </button>\n</div>\n", styles: [".et-scrollable{--mask: #121212 0, transparent 100%;--mask-size: 25px;--_auto-size: min-content;--_flow: column;display:grid;position:relative}.et-scrollable[item-size=same]{--auto-size: 1fr}.et-scrollable[render-scrollbars=false] .et-scrollable-container{scrollbar-width:none}.et-scrollable[render-scrollbars=false] .et-scrollable-container::-webkit-scrollbar{display:none}.et-scrollable[direction=horizontal] .et-scrollable-container{grid-auto-columns:var(--_auto-size);overflow-x:auto;overflow-y:hidden}.et-scrollable[direction=horizontal] .et-scrollable-mask,.et-scrollable[direction=horizontal] .et-scrollable-button{inline-size:var(--mask-size);block-size:100%}.et-scrollable[direction=horizontal] .et-scrollable-mask--start,.et-scrollable[direction=horizontal] .et-scrollable-button--start{inset-block-start:0;inset-inline:0 0}.et-scrollable[direction=horizontal] .et-scrollable-mask--end,.et-scrollable[direction=horizontal] .et-scrollable-button--end{inset-block-start:0;inset-inline:calc(100% - 40px) 0}.et-scrollable[direction=horizontal] .et-scrollable-mask--start{background:linear-gradient(to right,var(--mask))}.et-scrollable[direction=horizontal] .et-scrollable-mask--end{background:linear-gradient(to left,var(--mask));inset-inline:calc(100% - var(--mask-size)) 100%}.et-scrollable[direction=horizontal] .et-scrollable-button--start{inset-block-start:calc(50% - 20px);transform:rotate(-90deg)}.et-scrollable[direction=horizontal] .et-scrollable-button--end{inset-block-start:calc(50% - 20px);transform:rotate(90deg)}.et-scrollable[direction=vertical]{--_flow: row}.et-scrollable[direction=vertical] .et-scrollable-container{grid-auto-rows:var(--_auto-size);overflow-x:hidden;overflow-y:auto}.et-scrollable[direction=vertical] .et-scrollable-mask,.et-scrollable[direction=vertical] .et-scrollable-button{block-size:var(--mask-size);inline-size:100%}.et-scrollable[direction=vertical] .et-scrollable-mask--start,.et-scrollable[direction=vertical] .et-scrollable-button--start{inset-block-start:0;inset-inline-start:0}.et-scrollable[direction=vertical] .et-scrollable-mask--end,.et-scrollable[direction=vertical] .et-scrollable-button--end{inset-block-end:0;inset-inline-start:0}.et-scrollable[direction=vertical] .et-scrollable-mask--start{background:linear-gradient(to bottom,var(--mask))}.et-scrollable[direction=vertical] .et-scrollable-mask--end{background:linear-gradient(to top,var(--mask))}.et-scrollable[at-start=false] .et-scrollable-masks .et-scrollable-mask--start,.et-scrollable[at-start=false] .et-scrollable-buttons .et-scrollable-button--start{opacity:1}.et-scrollable[at-start=false] .et-scrollable-buttons .et-scrollable-button--start{pointer-events:all}.et-scrollable[at-end=false] .et-scrollable-masks .et-scrollable-mask--end,.et-scrollable[at-end=false] .et-scrollable-buttons .et-scrollable-button--end{opacity:1}.et-scrollable[at-end=false] .et-scrollable-buttons .et-scrollable-button--end{pointer-events:all}.et-scrollable .et-scrollable-container{display:grid;grid-auto-flow:var(--_flow);overflow:auto;grid-row:1/1;grid-column:1/1}.et-scrollable .et-scrollable-masks,.et-scrollable .et-scrollable-buttons{grid-row:1/1;grid-column:1/1;pointer-events:none}.et-scrollable .et-scrollable-masks .et-scrollable-mask,.et-scrollable .et-scrollable-masks .et-scrollable-button,.et-scrollable .et-scrollable-buttons .et-scrollable-mask,.et-scrollable .et-scrollable-buttons .et-scrollable-button{position:absolute;opacity:0;transition:opacity .3s var(--ease-5)}.et-scrollable .et-scrollable-buttons .et-scrollable-button{background:transparent;border:none;padding:12px;inline-size:40px;block-size:40px;border-radius:4px;cursor:pointer}.et-scrollable .et-scrollable-buttons .et-scrollable-button .et-chevron-icon{pointer-events:none}.et-scrollable .et-scrollable-buttons .et-scrollable-button .et-scrollable-button--start{inset-inline:0 0}.et-scrollable .et-scrollable-buttons .et-scrollable-button .et-scrollable-button--end{inset-inline:calc(100% - 40px) 0}.et-scrollable[sticky-buttons=true] .et-scrollable-buttons{margin-block:10%}.et-scrollable[sticky-buttons=true] .et-scrollable-buttons .et-scrollable-button{position:sticky}\n"], dependencies: [{ kind: "directive", type: CursorDragScrollDirective, selector: "[etCursorDragScroll]", inputs: ["etCursorDragScroll", "allowedDirection"], outputs: ["cursorDragStart", "cursorDragMove", "cursorDragEnd"], exportAs: ["etCursorDragScroll"] }, { kind: "directive", type: ObserveScrollStateDirective, selector: "[etObserveScrollState]", inputs: ["rootMargin", "observerThreshold"], outputs: ["etObserveScrollState"], exportAs: ["etObserveScrollState"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ChevronIconComponent, selector: "et-chevron-icon" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.0", ngImport: i0, type: ScrollableComponent, decorators: [{
             type: Component,
@@ -7972,16 +7919,10 @@ const ScrollableImports = [
 class SkeletonComponent {
     constructor() {
         this.loadingAllyText = 'Loading...';
-        this._animated = true;
-    }
-    get animated() {
-        return this._animated;
-    }
-    set animated(value) {
-        this._animated = coerceBooleanProperty(value);
+        this.animated = true;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.0", ngImport: i0, type: SkeletonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.0", type: SkeletonComponent, isStandalone: true, selector: "et-skeleton", inputs: { loadingAllyText: "loadingAllyText", animated: "animated" }, host: { properties: { "class.et-skeleton--animated": "this.animated" }, classAttribute: "et-skeleton" }, ngImport: i0, template: ` <span class="cdk-visually-hidden"> {{ loadingAllyText }} </span> <ng-content />`, isInline: true, styles: [":where(.et-skeleton){--et-skeleton-gradient: linear-gradient( 90deg, rgba(190, 190, 190, 0) 15%, rgba(129, 129, 129, .5) 37%, rgba(190, 190, 190, 0) 63% );--et-skeleton-animation-duration: 3s;--et-skeleton-animation-timing-function: var(--ease-3)}.et-skeleton{display:block;cursor:progress}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.0", type: SkeletonComponent, isStandalone: true, selector: "et-skeleton", inputs: { loadingAllyText: "loadingAllyText", animated: ["animated", "animated", booleanAttribute] }, host: { properties: { "class.et-skeleton--animated": "this.animated" }, classAttribute: "et-skeleton" }, ngImport: i0, template: ` <span class="cdk-visually-hidden"> {{ loadingAllyText }} </span> <ng-content />`, isInline: true, styles: [":where(.et-skeleton){--et-skeleton-gradient: linear-gradient( 90deg, rgba(190, 190, 190, 0) 15%, rgba(129, 129, 129, .5) 37%, rgba(190, 190, 190, 0) 63% );--et-skeleton-animation-duration: 3s;--et-skeleton-animation-timing-function: var(--ease-3)}.et-skeleton{display:block;cursor:progress}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.0", ngImport: i0, type: SkeletonComponent, decorators: [{
             type: Component,
@@ -7991,7 +7932,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.0", ngImpor
         }], propDecorators: { loadingAllyText: [{
                 type: Input
             }], animated: [{
-                type: Input
+                type: Input,
+                args: [{ transform: booleanAttribute }]
             }, {
                 type: HostBinding,
                 args: ['class.et-skeleton--animated']
@@ -8354,11 +8296,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.0", ngImpor
                 }] }]; } });
 
 class TableBusyDirective {
-    constructor(templateRef) {
-        this.templateRef = templateRef;
+    constructor() {
+        this.templateRef = inject(TemplateRef);
         this._contentClassName = 'et-table-busy';
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.0", ngImport: i0, type: TableBusyDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.0", ngImport: i0, type: TableBusyDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
     static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.1.0", type: TableBusyDirective, isStandalone: true, selector: "ng-template[etTableBusy]", ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.0", ngImport: i0, type: TableBusyDirective, decorators: [{
@@ -8367,27 +8309,27 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.0", ngImpor
                     selector: 'ng-template[etTableBusy]',
                     standalone: true,
                 }]
-        }], ctorParameters: function () { return [{ type: i0.TemplateRef }]; } });
+        }] });
 
 class TableBusyOutletDirective {
-    constructor(viewContainer, elementRef) {
-        this.viewContainer = viewContainer;
-        this.elementRef = elementRef;
+    constructor() {
+        this.viewContainer = inject(ViewContainerRef);
+        this.elementRef = inject(ElementRef);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.0", ngImport: i0, type: TableBusyOutletDirective, deps: [{ token: i0.ViewContainerRef }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.0", ngImport: i0, type: TableBusyOutletDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
     static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.1.0", type: TableBusyOutletDirective, isStandalone: true, selector: "[tableBusyOutlet]", ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.0", ngImport: i0, type: TableBusyOutletDirective, decorators: [{
             type: Directive,
             args: [{ selector: '[tableBusyOutlet]', standalone: true }]
-        }], ctorParameters: function () { return [{ type: i0.ViewContainerRef }, { type: i0.ElementRef }]; } });
+        }] });
 
 class TableComponent extends CdkTable {
     get busy() {
         return this._busy;
     }
     set busy(value) {
-        this._busy = coerceBooleanProperty(value);
+        this._busy = booleanAttribute(value);
         this._updateTableBusy();
     }
     get _attrAriaBusy() {
@@ -8434,7 +8376,7 @@ class TableComponent extends CdkTable {
         this._isShowingTableBusy = shouldShow;
         this._cdr.markForCheck();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.0", ngImport: i0, type: TableComponent, deps: [{ token: i0.IterableDiffers }, { token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: 'role', attribute: true }, { token: i1$4.Directionality, optional: true }, { token: DOCUMENT }, { token: i2$1.Platform }, { token: _VIEW_REPEATER_STRATEGY }, { token: _COALESCED_STYLE_SCHEDULER }, { token: i1$5.ViewportRuler }, { token: STICKY_POSITIONING_LISTENER, optional: true, skipSelf: true }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.0", ngImport: i0, type: TableComponent, deps: [{ token: i0.IterableDiffers }, { token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: 'role', attribute: true }, { token: i1$4.Directionality, optional: true }, { token: DOCUMENT }, { token: i2$1.Platform }, { token: _VIEW_REPEATER_STRATEGY }, { token: _COALESCED_STYLE_SCHEDULER }, { token: i3.ViewportRuler }, { token: STICKY_POSITIONING_LISTENER, optional: true, skipSelf: true }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.0", type: TableComponent, isStandalone: true, selector: "et-table, table[et-table]", inputs: { busy: "busy" }, host: { properties: { "class.et-table-fixed-layout": "fixedLayout", "attr.aria-busy": "this._attrAriaBusy" }, classAttribute: "et-table et-data-table__table" }, providers: [
             { provide: CdkTable, useExisting: TableComponent },
             { provide: CDK_TABLE, useExisting: TableComponent },
@@ -8489,7 +8431,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.0", ngImpor
                 }] }, { type: i1$3._CoalescedStyleScheduler, decorators: [{
                     type: Inject,
                     args: [_COALESCED_STYLE_SCHEDULER]
-                }] }, { type: i1$5.ViewportRuler }, { type: undefined, decorators: [{
+                }] }, { type: i3.ViewportRuler }, { type: undefined, decorators: [{
                     type: Optional
                 }, {
                     type: SkipSelf
@@ -8698,26 +8640,8 @@ class TableDataSource extends DataSource {
 
 const SORT_DEFAULT_OPTIONS = new InjectionToken('SortDefaultOptions');
 class SortDirective {
-    get disabled() {
-        return this._disabled;
-    }
-    set disabled(value) {
-        this._disabled = coerceBooleanProperty(value);
-    }
-    get direction() {
-        return this._direction;
-    }
-    set direction(direction) {
-        this._direction = direction;
-    }
-    get disableClear() {
-        return this._disableClear;
-    }
-    set disableClear(v) {
-        this._disableClear = coerceBooleanProperty(v);
-    }
-    constructor(_defaultOptions) {
-        this._defaultOptions = _defaultOptions;
+    constructor() {
+        this._defaultOptions = inject(SORT_DEFAULT_OPTIONS, { optional: true });
         this.sortables = new Map();
         this._stateChanges = new Subject();
         this._isInitialized = false;
@@ -8730,13 +8654,19 @@ class SortDirective {
                 this._pendingSubscribers?.push(subscriber);
             }
         });
-        this._disabled = false;
+        this.disabled = false;
         this.start = 'asc';
         this._direction = '';
-        this._disableClear = false;
+        this.disableClear = false;
         // eslint-disable-next-line @angular-eslint/no-output-rename
         this.sortChange = new EventEmitter();
     }
+    get direction() {
+        return this._direction;
+    }
+    set direction(direction) {
+        this._direction = direction;
+    }
     register(sortable) {
         this.sortables.set(sortable.id, sortable);
     }
@@ -8795,8 +8725,8 @@ class SortDirective {
         subscriber.next();
         subscriber.complete();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.0", ngImport: i0, type: SortDirective, deps: [{ token: SORT_DEFAULT_OPTIONS, optional: true }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.1.0", type: SortDirective, isStandalone: true, selector: "[etSort]", inputs: { disabled: ["etSortDisabled", "disabled"], active: ["etSortActive", "active"], start: ["etSortStart", "start"], direction: ["etSortDirection", "direction"], disableClear: ["etSortDisableClear", "disableClear"], sortControl: "sortControl", sortByControl: "sortByControl", sortDirectionControl: "sortDirectionControl" }, outputs: { sortChange: "etSortChange" }, host: { classAttribute: "et-sort" }, exportAs: ["etSort"], usesOnChanges: true, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.0", ngImport: i0, type: SortDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.1.0", type: SortDirective, isStandalone: true, selector: "[etSort]", inputs: { disabled: ["etSortDisabled", "disabled", booleanAttribute], active: ["etSortActive", "active"], start: ["etSortStart", "start"], direction: ["etSortDirection", "direction"], disableClear: ["etSortDisableClear", "disableClear", booleanAttribute], sortControl: "sortControl", sortByControl: "sortByControl", sortDirectionControl: "sortDirectionControl" }, outputs: { sortChange: "etSortChange" }, host: { classAttribute: "et-sort" }, exportAs: ["etSort"], usesOnChanges: true, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.0", ngImport: i0, type: SortDirective, decorators: [{
             type: Directive,
@@ -8806,14 +8736,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.0", ngImpor
                     host: { class: 'et-sort' },
                     standalone: true,
                 }]
-        }], ctorParameters: function () { return [{ type: undefined, decorators: [{
-                    type: Optional
-                }, {
-                    type: Inject,
-                    args: [SORT_DEFAULT_OPTIONS]
-                }] }]; }, propDecorators: { disabled: [{
+        }], propDecorators: { disabled: [{
                 type: Input,
-                args: ['etSortDisabled']
+                args: [{ alias: 'etSortDisabled', transform: booleanAttribute }]
             }], active: [{
                 type: Input,
                 args: ['etSortActive']
@@ -8825,7 +8750,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.0", ngImpor
                 args: ['etSortDirection']
             }], disableClear: [{
                 type: Input,
-                args: ['etSortDisableClear']
+                args: [{ alias: 'etSortDisableClear', transform: booleanAttribute }]
             }], sortControl: [{
                 type: Input
             }], sortByControl: [{
@@ -8869,24 +8794,12 @@ const SORT_HEADER_INTL_PROVIDER = {
 };
 
 class SortHeaderComponent {
-    get disabled() {
-        return this._disabled;
-    }
-    set disabled(value) {
-        this._disabled = coerceBooleanProperty(value);
-    }
     get sortActionDescription() {
         return this._sortActionDescription;
     }
     set sortActionDescription(value) {
         this._updateSortActionDescription(value);
     }
-    get disableClear() {
-        return this._disableClear;
-    }
-    set disableClear(v) {
-        this._disableClear = coerceBooleanProperty(v);
-    }
     get _isSorted() {
         if (!this._sort) {
             return false;
@@ -8912,23 +8825,24 @@ class SortHeaderComponent {
         }
         return this._sort?.direction == 'asc' ? 'ascending' : 'descending';
     }
-    constructor(_intl, _changeDetectorRef, _sort, _columnDef, _focusMonitor, _elementRef, _ariaDescriber, defaultOptions) {
-        this._intl = _intl;
-        this._changeDetectorRef = _changeDetectorRef;
-        this._sort = _sort;
-        this._columnDef = _columnDef;
-        this._focusMonitor = _focusMonitor;
-        this._elementRef = _elementRef;
-        this._ariaDescriber = _ariaDescriber;
+    constructor() {
+        this._intl = inject(SortHeaderIntl);
+        this._changeDetectorRef = inject(ChangeDetectorRef);
+        this._sort = inject(SortDirective, { optional: true });
+        this._columnDef = inject(SORT_HEADER_COLUMN_DEF, { optional: true });
+        this._focusMonitor = inject(FocusMonitor);
+        this._elementRef = inject(ElementRef);
+        this._ariaDescriber = inject(AriaDescriber);
+        this._sortDefaultOptions = inject(SORT_DEFAULT_OPTIONS, { optional: true });
         this._showIndicatorHint = false;
         this._viewState = {};
         this._arrowDirection = '';
-        this._disabled = false;
+        this.disabled = false;
         this.arrowPosition = 'after';
         this._sortActionDescription = 'Sort';
-        this._disableClear = false;
-        if (defaultOptions?.arrowPosition) {
-            this.arrowPosition = defaultOptions?.arrowPosition;
+        this.disableClear = false;
+        if (this._sortDefaultOptions?.arrowPosition) {
+            this.arrowPosition = this._sortDefaultOptions?.arrowPosition;
         }
         this._handleStateChanges();
     }
@@ -9025,28 +8939,17 @@ class SortHeaderComponent {
             this._changeDetectorRef.markForCheck();
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.0", ngImport: i0, type: SortHeaderComponent, deps: [{ token: SortHeaderIntl }, { token: i0.ChangeDetectorRef }, { token: SortDirective, optional: true }, { token: SORT_HEADER_COLUMN_DEF, optional: true }, { token: i1$2.FocusMonitor }, { token: i0.ElementRef }, { token: i1$2.AriaDescriber }, { token: SORT_DEFAULT_OPTIONS, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.0", type: SortHeaderComponent, isStandalone: true, selector: "[et-sort-header]", inputs: { disabled: "disabled", id: ["et-sort-header", "id"], arrowPosition: "arrowPosition", start: "start", sortActionDescription: "sortActionDescription", disableClear: "disableClear" }, host: { listeners: { "mouseenter": "_handleMouseEnter()", "mouseleave": "_handleMouseLeave()", "click": "_handleClick()", "keydown": "_handleKeydown($event)" }, properties: { "class.et-sort-header-disabled": "this.disabled", "attr.aria-sort": "this._ariaSortAttr" }, classAttribute: "et-sort-header" }, exportAs: ["etSortHeader"], ngImport: i0, template: "<div\n  [class.et-sort-header-sorted]=\"_isSorted\"\n  [class.et-sort-header-position-before]=\"arrowPosition === 'before'\"\n  [attr.tabindex]=\"_isDisabled ? null : 0\"\n  [attr.role]=\"_isDisabled ? null : 'button'\"\n  class=\"et-sort-header-container\"\n>\n  <div class=\"et-sort-header-content\">\n    <ng-content />\n  </div>\n\n  <div *ngIf=\"_renderArrow\" class=\"et-sort-header-arrow {{ _getArrowDirectionState }} {{ _getArrowViewState }}\">\n    <et-chevron-icon />\n  </div>\n</div>\n", styles: [":where(.et-sort-header){--et-sort-header-arrow-size: 10px;--et-sort-header-gap: 8px}.et-sort-header{cursor:pointer}.et-sort-header.et-sort-header-disabled{cursor:default}.et-sort-header-container{display:flex;align-items:center;letter-spacing:normal;outline:0;gap:var(--et-sort-header-gap)}.et-sort-header-content{text-align:center;display:flex;align-items:center}.et-sort-header-position-before{flex-direction:row-reverse}.et-sort-header:hover .et-sort-header-arrow,.et-sort-header.cdk-keyboard-focused .et-sort-header-arrow{opacity:.5}.et-sort-header .et-sort-header-arrow{transition:opacity .2s var(--ease-out-5)}.et-sort-header .et-sort-header-arrow .et-chevron-icon svg{transition:transform .2s var(--ease-out-5)}.et-sort-header .et-sort-header-arrow{inline-size:var(--et-sort-header-arrow-size);opacity:0}.et-sort-header .et-sort-header-arrow.active-desc,.et-sort-header .et-sort-header-arrow.active-asc{opacity:1}.et-sort-header .et-sort-header-arrow.desc .et-chevron-icon svg,.et-sort-header .et-sort-header-arrow.asc .et-chevron-icon svg,.et-sort-header .et-sort-header-arrow.active-desc .et-chevron-icon svg{transform:rotate(180deg)}.et-sort-header .et-sort-header-arrow.active-asc .et-chevron-icon svg{transform:rotate(0)}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ChevronIconComponent, selector: "et-chevron-icon" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.0", ngImport: i0, type: SortHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.0", type: SortHeaderComponent, isStandalone: true, selector: "[et-sort-header]", inputs: { disabled: ["disabled", "disabled", booleanAttribute], id: ["et-sort-header", "id"], arrowPosition: "arrowPosition", start: "start", sortActionDescription: "sortActionDescription", disableClear: ["disableClear", "disableClear", booleanAttribute] }, host: { listeners: { "mouseenter": "_handleMouseEnter()", "mouseleave": "_handleMouseLeave()", "click": "_handleClick()", "keydown": "_handleKeydown($event)" }, properties: { "class.et-sort-header-disabled": "this.disabled", "attr.aria-sort": "this._ariaSortAttr" }, classAttribute: "et-sort-header" }, exportAs: ["etSortHeader"], ngImport: i0, template: "<div\n  [class.et-sort-header-sorted]=\"_isSorted\"\n  [class.et-sort-header-position-before]=\"arrowPosition === 'before'\"\n  [attr.tabindex]=\"_isDisabled ? null : 0\"\n  [attr.role]=\"_isDisabled ? null : 'button'\"\n  class=\"et-sort-header-container\"\n>\n  <div class=\"et-sort-header-content\">\n    <ng-content />\n  </div>\n\n  <div *ngIf=\"_renderArrow\" class=\"et-sort-header-arrow {{ _getArrowDirectionState }} {{ _getArrowViewState }}\">\n    <et-chevron-icon />\n  </div>\n</div>\n", styles: [":where(.et-sort-header){--et-sort-header-arrow-size: 10px;--et-sort-header-gap: 8px}.et-sort-header{cursor:pointer}.et-sort-header.et-sort-header-disabled{cursor:default}.et-sort-header-container{display:flex;align-items:center;letter-spacing:normal;outline:0;gap:var(--et-sort-header-gap)}.et-sort-header-content{text-align:center;display:flex;align-items:center}.et-sort-header-position-before{flex-direction:row-reverse}.et-sort-header:hover .et-sort-header-arrow,.et-sort-header.cdk-keyboard-focused .et-sort-header-arrow{opacity:.5}.et-sort-header .et-sort-header-arrow{transition:opacity .2s var(--ease-out-5)}.et-sort-header .et-sort-header-arrow .et-chevron-icon svg{transition:transform .2s var(--ease-out-5)}.et-sort-header .et-sort-header-arrow{inline-size:var(--et-sort-header-arrow-size);opacity:0}.et-sort-header .et-sort-header-arrow.active-desc,.et-sort-header .et-sort-header-arrow.active-asc{opacity:1}.et-sort-header .et-sort-header-arrow.desc .et-chevron-icon svg,.et-sort-header .et-sort-header-arrow.asc .et-chevron-icon svg,.et-sort-header .et-sort-header-arrow.active-desc .et-chevron-icon svg{transform:rotate(180deg)}.et-sort-header .et-sort-header-arrow.active-asc .et-chevron-icon svg{transform:rotate(0)}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ChevronIconComponent, selector: "et-chevron-icon" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.0", ngImport: i0, type: SortHeaderComponent, decorators: [{
             type: Component,
             args: [{ selector: '[et-sort-header]', exportAs: 'etSortHeader', host: {
                         class: 'et-sort-header',
                     }, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [NgIf, ChevronIconComponent], template: "<div\n  [class.et-sort-header-sorted]=\"_isSorted\"\n  [class.et-sort-header-position-before]=\"arrowPosition === 'before'\"\n  [attr.tabindex]=\"_isDisabled ? null : 0\"\n  [attr.role]=\"_isDisabled ? null : 'button'\"\n  class=\"et-sort-header-container\"\n>\n  <div class=\"et-sort-header-content\">\n    <ng-content />\n  </div>\n\n  <div *ngIf=\"_renderArrow\" class=\"et-sort-header-arrow {{ _getArrowDirectionState }} {{ _getArrowViewState }}\">\n    <et-chevron-icon />\n  </div>\n</div>\n", styles: [":where(.et-sort-header){--et-sort-header-arrow-size: 10px;--et-sort-header-gap: 8px}.et-sort-header{cursor:pointer}.et-sort-header.et-sort-header-disabled{cursor:default}.et-sort-header-container{display:flex;align-items:center;letter-spacing:normal;outline:0;gap:var(--et-sort-header-gap)}.et-sort-header-content{text-align:center;display:flex;align-items:center}.et-sort-header-position-before{flex-direction:row-reverse}.et-sort-header:hover .et-sort-header-arrow,.et-sort-header.cdk-keyboard-focused .et-sort-header-arrow{opacity:.5}.et-sort-header .et-sort-header-arrow{transition:opacity .2s var(--ease-out-5)}.et-sort-header .et-sort-header-arrow .et-chevron-icon svg{transition:transform .2s var(--ease-out-5)}.et-sort-header .et-sort-header-arrow{inline-size:var(--et-sort-header-arrow-size);opacity:0}.et-sort-header .et-sort-header-arrow.active-desc,.et-sort-header .et-sort-header-arrow.active-asc{opacity:1}.et-sort-header .et-sort-header-arrow.desc .et-chevron-icon svg,.et-sort-header .et-sort-header-arrow.asc .et-chevron-icon svg,.et-sort-header .et-sort-header-arrow.active-desc .et-chevron-icon svg{transform:rotate(180deg)}.et-sort-header .et-sort-header-arrow.active-asc .et-chevron-icon svg{transform:rotate(0)}\n"] }]
-        }], ctorParameters: function () { return [{ type: SortHeaderIntl }, { type: i0.ChangeDetectorRef }, { type: SortDirective, decorators: [{
-                    type: Optional
-                }] }, { type: undefined, decorators: [{
-                    type: Inject,
-                    args: [SORT_HEADER_COLUMN_DEF]
-                }, {
-                    type: Optional
-                }] }, { type: i1$2.FocusMonitor }, { type: i0.ElementRef }, { type: i1$2.AriaDescriber }, { type: undefined, decorators: [{
-                    type: Optional
-                }, {
-                    type: Inject,
-                    args: [SORT_DEFAULT_OPTIONS]
-                }] }]; }, propDecorators: { disabled: [{
-                type: Input
+        }], ctorParameters: function () { return []; }, propDecorators: { disabled: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
             }, {
                 type: HostBinding,
                 args: ['class.et-sort-header-disabled']
@@ -9060,7 +8963,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.0", ngImpor
             }], sortActionDescription: [{
                 type: Input
             }], disableClear: [{
-                type: Input
+                type: Input,
+                args: [{ transform: booleanAttribute }]
             }], _ariaSortAttr: [{
                 type: HostBinding,
                 args: ['attr.aria-sort']
@@ -9134,9 +9038,10 @@ class InlineTabBodyComponent {
         this._positionIndex = position;
         this._computePositionAnimationState();
     }
-    constructor(_elementRef, _dir, changeDetectorRef) {
-        this._elementRef = _elementRef;
-        this._dir = _dir;
+    constructor() {
+        this._elementRef = inject(ElementRef);
+        this._dir = inject(Directionality);
+        this._cdr = inject(ChangeDetectorRef);
         this._centeringSub = Subscription.EMPTY;
         this._leavingSub = Subscription.EMPTY;
         this._dirChangeSubscription = Subscription.EMPTY;
@@ -9147,10 +9052,10 @@ class InlineTabBodyComponent {
         this._onCentered = new EventEmitter(true);
         this.animationDuration = '500ms';
         this.preserveContent = false;
-        if (_dir) {
-            this._dirChangeSubscription = _dir.change.subscribe((dir) => {
+        if (this._dir) {
+            this._dirChangeSubscription = this._dir.change.subscribe((dir) => {
                 this._computePositionAnimationState(dir);
-                changeDetectorRef.markForCheck();
+                this._cdr.markForCheck();
             });
         }
         this._translateTabComplete
@@ -9220,17 +9125,15 @@ class InlineTabBodyComponent {
         }
         return 'right-origin-center';
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.0", ngImport: i0, type: InlineTabBodyComponent, deps: [{ token: i0.ElementRef }, { token: i1$4.Directionality, optional: true }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.0", type: InlineTabBodyComponent, isStandalone: true, selector: "et-inline-tab-body", inputs: { _content: ["content", "_content"], origin: "origin", animationDuration: "animationDuration", preserveContent: "preserveContent", position: "position" }, outputs: { _onCentering: "_onCentering", _beforeCentering: "_beforeCentering", _afterLeavingCenter: "_afterLeavingCenter", _onCentered: "_onCentered" }, host: { classAttribute: "et-inline-tab-body" }, viewQueries: [{ propertyName: "_portalHost", first: true, predicate: InlineTabBodyHostDirective, descendants: true, static: true }], ngImport: i0, template: "<div\n  #content\n  [@translateTab]=\"{\n    value: _position,\n    params: { animationDuration: '0ms' }\n  }\"\n  (@translateTab.start)=\"_onTranslateTabStarted($event)\"\n  (@translateTab.done)=\"_translateTabComplete.next($event)\"\n  cdkScrollable\n>\n  <ng-template etInlineTabBodyHost />\n</div>\n", dependencies: [{ kind: "ngmodule", type: CdkScrollableModule }, { kind: "directive", type: i1$5.CdkScrollable, selector: "[cdk-scrollable], [cdkScrollable]" }, { kind: "directive", type: InlineTabBodyHostDirective, selector: "[etInlineTabBodyHost]" }], animations: [tabAnimations.translateTab], changeDetection: i0.ChangeDetectionStrategy.Default, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.0", ngImport: i0, type: InlineTabBodyComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.0", type: InlineTabBodyComponent, isStandalone: true, selector: "et-inline-tab-body", inputs: { _content: ["content", "_content"], origin: "origin", animationDuration: "animationDuration", preserveContent: "preserveContent", position: "position" }, outputs: { _onCentering: "_onCentering", _beforeCentering: "_beforeCentering", _afterLeavingCenter: "_afterLeavingCenter", _onCentered: "_onCentered" }, host: { classAttribute: "et-inline-tab-body" }, viewQueries: [{ propertyName: "_portalHost", first: true, predicate: InlineTabBodyHostDirective, descendants: true, static: true }], ngImport: i0, template: "<div\n  #content\n  [@translateTab]=\"{\n    value: _position,\n    params: { animationDuration: '0ms' }\n  }\"\n  (@translateTab.start)=\"_onTranslateTabStarted($event)\"\n  (@translateTab.done)=\"_translateTabComplete.next($event)\"\n  cdkScrollable\n>\n  <ng-template etInlineTabBodyHost />\n</div>\n", dependencies: [{ kind: "ngmodule", type: CdkScrollableModule }, { kind: "directive", type: i3.CdkScrollable, selector: "[cdk-scrollable], [cdkScrollable]" }, { kind: "directive", type: InlineTabBodyHostDirective, selector: "[etInlineTabBodyHost]" }], animations: [tabAnimations.translateTab], changeDetection: i0.ChangeDetectionStrategy.Default, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.0", ngImport: i0, type: InlineTabBodyComponent, decorators: [{
             type: Component,
             args: [{ selector: 'et-inline-tab-body', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.Default, animations: [tabAnimations.translateTab], standalone: true, imports: [CdkScrollableModule, InlineTabBodyHostDirective], host: {
                         class: 'et-inline-tab-body',
                     }, template: "<div\n  #content\n  [@translateTab]=\"{\n    value: _position,\n    params: { animationDuration: '0ms' }\n  }\"\n  (@translateTab.start)=\"_onTranslateTabStarted($event)\"\n  (@translateTab.done)=\"_translateTabComplete.next($event)\"\n  cdkScrollable\n>\n  <ng-template etInlineTabBodyHost />\n</div>\n" }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i1$4.Directionality, decorators: [{
-                    type: Optional
-                }] }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { _onCentering: [{
+        }], ctorParameters: function () { return []; }, propDecorators: { _onCentering: [{
                 type: Output
             }], _beforeCentering: [{
                 type: Output
@@ -9256,10 +9159,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.0", ngImpor
 
 const TAB_CONTENT = new InjectionToken('TabContent');
 class InlineTabContentDirective {
-    constructor(template) {
-        this.template = template;
+    constructor() {
+        this.template = inject(TemplateRef);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.0", ngImport: i0, type: InlineTabContentDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.0", ngImport: i0, type: InlineTabContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
     static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.1.0", type: InlineTabContentDirective, isStandalone: true, selector: "[etInlineTabContent]", host: { classAttribute: "et-inline-tab-content" }, providers: [{ provide: TAB_CONTENT, useExisting: InlineTabContentDirective }], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.0", ngImport: i0, type: InlineTabContentDirective, decorators: [{
@@ -9272,7 +9175,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.0", ngImpor
                         class: 'et-inline-tab-content',
                     },
                 }]
-        }], ctorParameters: function () { return [{ type: i0.TemplateRef }]; } });
+        }] });
 
 const ACTIVE_CLASS = 'et-active-tab-underline--active';
 const NO_TRANSITION_CLASS = 'et-active-tab-underline--no-transition';
@@ -9305,7 +9208,7 @@ class ActiveTabUnderlineDirective {
         return this._fitToContent;
     }
     set fitUnderlineToContent(v) {
-        const newValue = coerceBooleanProperty(v);
+        const newValue = booleanAttribute(v);
         if (this._fitToContent !== newValue) {
             this._fitToContent = newValue;
             if (this._underlineElement) {
@@ -9389,8 +9292,8 @@ class PaginatedTabHeaderDirective {
     get selectedIndex() {
         return this._selectedIndex;
     }
-    set selectedIndex(value) {
-        value = coerceNumberProperty(value);
+    set selectedIndex(val) {
+        const value = numberAttribute(val);
         if (this._selectedIndex != value) {
             this._selectedIndexChanged = true;
             this._selectedIndex = value;
@@ -9399,43 +9302,25 @@ class PaginatedTabHeaderDirective {
             }
         }
     }
-    get renderMasks() {
-        return this._renderMasks;
-    }
-    set renderMasks(value) {
-        this._renderMasks = coerceBooleanProperty(value);
-    }
-    get renderButtons() {
-        return this._renderButtons;
-    }
-    set renderButtons(value) {
-        this._renderButtons = coerceBooleanProperty(value);
-    }
-    get renderScrollbars() {
-        return this._renderScrollbars;
-    }
-    set renderScrollbars(value) {
-        this._renderScrollbars = coerceBooleanProperty(value);
-    }
-    constructor(_elementRef, _cdr, _viewportRuler, _dir, _ngZone) {
-        this._elementRef = _elementRef;
-        this._cdr = _cdr;
-        this._viewportRuler = _viewportRuler;
-        this._dir = _dir;
-        this._ngZone = _ngZone;
+    constructor() {
+        this._elementRef = inject(ElementRef);
+        this._cdr = inject(ChangeDetectorRef);
+        this._viewportRuler = inject(ViewportRuler$1);
+        this._dir = inject(Directionality, { optional: true });
+        this._ngZone = inject(NgZone);
         this._scrollDistance = 0;
         this._selectedIndexChanged = false;
         this._destroy$ = createDestroy();
         this._stopScrolling = new Subject();
         this._selectedIndex = 0;
         this.itemSize = 'auto';
-        this._renderMasks = true;
-        this._renderButtons = true;
-        this._renderScrollbars = false;
+        this.renderMasks = true;
+        this.renderButtons = true;
+        this.renderScrollbars = false;
         this.selectFocusedIndex = new EventEmitter();
         this.indexFocused = new EventEmitter();
-        _ngZone.runOutsideAngular(() => {
-            fromEvent(_elementRef.nativeElement, 'mouseleave')
+        this._ngZone.runOutsideAngular(() => {
+            fromEvent(this._elementRef.nativeElement, 'mouseleave')
                 .pipe(takeUntil$1(this._destroy$))
                 .subscribe(() => {
                 this._stopInterval();
@@ -9628,25 +9513,26 @@ class PaginatedTabHeaderDirective {
         this._scrollDistanceChanged = true;
         return { maxScrollDistance, distance: this._scrollDistance };
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.0", ngImport: i0, type: PaginatedTabHeaderDirective, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i1$5.ViewportRuler }, { token: i1$4.Directionality, optional: true }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.1.0", type: PaginatedTabHeaderDirective, inputs: { selectedIndex: "selectedIndex", itemSize: "itemSize", scrollableClass: "scrollableClass", renderMasks: "renderMasks", renderButtons: "renderButtons", renderScrollbars: "renderScrollbars" }, outputs: { selectFocusedIndex: "selectFocusedIndex", indexFocused: "indexFocused" }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.0", ngImport: i0, type: PaginatedTabHeaderDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.1.0", type: PaginatedTabHeaderDirective, inputs: { selectedIndex: "selectedIndex", itemSize: "itemSize", scrollableClass: "scrollableClass", renderMasks: ["renderMasks", "renderMasks", booleanAttribute], renderButtons: ["renderButtons", "renderButtons", booleanAttribute], renderScrollbars: ["renderScrollbars", "renderScrollbars", booleanAttribute] }, outputs: { selectFocusedIndex: "selectFocusedIndex", indexFocused: "indexFocused" }, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.0", ngImport: i0, type: PaginatedTabHeaderDirective, decorators: [{
             type: Directive
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i1$5.ViewportRuler }, { type: i1$4.Directionality, decorators: [{
-                    type: Optional
-                }] }, { type: i0.NgZone }]; }, propDecorators: { selectedIndex: [{
+        }], ctorParameters: function () { return []; }, propDecorators: { selectedIndex: [{
                 type: Input
             }], itemSize: [{
                 type: Input
             }], scrollableClass: [{
                 type: Input
             }], renderMasks: [{
-                type: Input
+                type: Input,
+                args: [{ transform: booleanAttribute }]
             }], renderButtons: [{
-                type: Input
+                type: Input,
+                args: [{ transform: booleanAttribute }]
             }], renderScrollbars: [{
-                type: Input
+                type: Input,
+                args: [{ transform: booleanAttribute }]
             }], selectFocusedIndex: [{
                 type: Output
             }], indexFocused: [{
@@ -9654,19 +9540,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.0", ngImpor
             }] } });
 
 class InlineTabLabelWrapperDirective {
-    get disabled() {
-        return this._disabled;
-    }
-    set disabled(value) {
-        this._disabled = coerceBooleanProperty(value);
+    constructor() {
+        this.elementRef = inject(ElementRef);
+        this.disabled = false;
     }
     get attrAriaDisabled() {
         return this.disabled ? 'true' : null;
     }
-    constructor(elementRef) {
-        this.elementRef = elementRef;
-        this._disabled = false;
-    }
     focus() {
         this.elementRef.nativeElement.focus();
     }
@@ -9676,8 +9556,8 @@ class InlineTabLabelWrapperDirective {
     getOffsetWidth() {
         return this.elementRef.nativeElement.offsetWidth;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.0", ngImport: i0, type: InlineTabLabelWrapperDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.1.0", type: InlineTabLabelWrapperDirective, isStandalone: true, selector: "[etInlineTabLabelWrapper]", inputs: { disabled: "disabled" }, host: { properties: { "attr.aria-disabled": "this.attrAriaDisabled" }, classAttribute: "et-inline-tab-label-wrapper" }, hostDirectives: [{ directive: ActiveTabUnderlineDirective, inputs: ["fitUnderlineToContent", "fitUnderlineToContent"] }], ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.0", ngImport: i0, type: InlineTabLabelWrapperDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.1.0", type: InlineTabLabelWrapperDirective, isStandalone: true, selector: "[etInlineTabLabelWrapper]", inputs: { disabled: ["disabled", "disabled", booleanAttribute] }, host: { properties: { "attr.aria-disabled": "this.attrAriaDisabled" }, classAttribute: "et-inline-tab-label-wrapper" }, hostDirectives: [{ directive: ActiveTabUnderlineDirective, inputs: ["fitUnderlineToContent", "fitUnderlineToContent"] }], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.0", ngImport: i0, type: InlineTabLabelWrapperDirective, decorators: [{
             type: Directive,
@@ -9689,17 +9569,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.0", ngImpor
                     },
                     hostDirectives: [{ directive: ActiveTabUnderlineDirective, inputs: ['fitUnderlineToContent'] }],
                 }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { disabled: [{
-                type: Input
+        }], propDecorators: { disabled: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
             }], attrAriaDisabled: [{
                 type: HostBinding,
                 args: ['attr.aria-disabled']
             }] } });
 
 class InlineTabHeaderComponent extends PaginatedTabHeaderDirective {
-    constructor(elementRef, changeDetectorRef, viewportRuler, dir, ngZone) {
-        super(elementRef, changeDetectorRef, viewportRuler, dir, ngZone);
-    }
     ngAfterContentInit() {
         this._activeTabUnderlineManager = new ActiveTabUnderlineBarManager(this._inkBars);
         super.ngAfterContentInit();
@@ -9707,7 +9585,7 @@ class InlineTabHeaderComponent extends PaginatedTabHeaderDirective {
     _itemSelected(event) {
         event.preventDefault();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.0", ngImport: i0, type: InlineTabHeaderComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i1$5.ViewportRuler }, { token: i1$4.Directionality, optional: true }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.0", ngImport: i0, type: InlineTabHeaderComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.0", type: InlineTabHeaderComponent, isStandalone: true, selector: "et-inline-tab-header", host: { classAttribute: "et-inline-tab-header" }, queries: [{ propertyName: "_items", predicate: InlineTabLabelWrapperDirective }, { propertyName: "_inkBars", predicate: i0.forwardRef(function () { return ActiveTabUnderlineDirective; }), descendants: true }], viewQueries: [{ propertyName: "_scrollable", first: true, predicate: ScrollableComponent, descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<et-scrollable\n  [itemSize]=\"itemSize\"\n  [renderButtons]=\"renderButtons\"\n  [scrollableClass]=\"scrollableClass\"\n  [renderMasks]=\"renderMasks\"\n  [renderScrollbars]=\"renderScrollbars\"\n  (keydown)=\"_handleKeydown($event)\"\n  (contentChanged)=\"_onContentChanges()\"\n>\n  <ng-content />\n</et-scrollable>\n", dependencies: [{ kind: "component", type: ScrollableComponent, selector: "et-scrollable", inputs: ["itemSize", "direction", "scrollableRole", "scrollableClass", "renderMasks", "renderButtons", "renderScrollbars", "stickyButtons", "cursorDragScroll", "disableActiveElementScrolling", "scrollMode", "snap", "scrollMargin"], outputs: ["scrollStateChange", "intersectionChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.0", ngImport: i0, type: InlineTabHeaderComponent, decorators: [{
@@ -9715,9 +9593,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.0", ngImpor
             args: [{ selector: 'et-inline-tab-header', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [ScrollableComponent, NgClass, ObserveContentDirective, ScrollObserverIgnoreTargetDirective], host: {
                         class: 'et-inline-tab-header',
                     }, template: "<et-scrollable\n  [itemSize]=\"itemSize\"\n  [renderButtons]=\"renderButtons\"\n  [scrollableClass]=\"scrollableClass\"\n  [renderMasks]=\"renderMasks\"\n  [renderScrollbars]=\"renderScrollbars\"\n  (keydown)=\"_handleKeydown($event)\"\n  (contentChanged)=\"_onContentChanges()\"\n>\n  <ng-content />\n</et-scrollable>\n" }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i1$5.ViewportRuler }, { type: i1$4.Directionality, decorators: [{
-                    type: Optional
-                }] }, { type: i0.NgZone }]; }, propDecorators: { _items: [{
+        }], propDecorators: { _items: [{
                 type: ContentChildren,
                 args: [InlineTabLabelWrapperDirective, { descendants: false }]
             }], _scrollable: [{
@@ -9763,28 +9639,16 @@ class InlineTabComponent {
     set templateLabel(value) {
         this._setTemplateLabelInput(value);
     }
-    get fitUnderlineToContent() {
-        return this._fitToContent;
-    }
-    set fitUnderlineToContent(v) {
-        this._fitToContent = coerceBooleanProperty(v);
-    }
-    get disabled() {
-        return this._disabled;
-    }
-    set disabled(value) {
-        this._disabled = coerceBooleanProperty(value);
-    }
     get content() {
         return this._contentPortal;
     }
     constructor(_viewContainerRef, _closestTabGroup) {
         this._viewContainerRef = _viewContainerRef;
         this._closestTabGroup = _closestTabGroup;
-        this._fitToContent = false;
+        this.fitUnderlineToContent = false;
         // eslint-disable-next-line @angular-eslint/no-input-rename
         this.textLabel = '';
-        this._disabled = false;
+        this.disabled = false;
         this._contentPortal = null;
         this._stateChanges = new Subject();
         this.position = null;
@@ -9808,7 +9672,7 @@ class InlineTabComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.0", ngImport: i0, type: InlineTabComponent, deps: [{ token: i0.ViewContainerRef }, { token: TAB_GROUP, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.0", type: InlineTabComponent, isStandalone: true, selector: "et-inline-tab", inputs: { fitUnderlineToContent: "fitUnderlineToContent", textLabel: ["label", "textLabel"], ariaLabel: ["aria-label", "ariaLabel"], ariaLabelledby: ["aria-labelledby", "ariaLabelledby"], labelClass: "labelClass", bodyClass: "bodyClass", disabled: "disabled" }, host: { classAttribute: "et-inline-tab" }, providers: [{ provide: TAB, useExisting: InlineTabComponent }], queries: [{ propertyName: "templateLabel", first: true, predicate: TAB_LABEL, descendants: true }, { propertyName: "_explicitContent", first: true, predicate: TAB_CONTENT, descendants: true, read: TemplateRef, static: true }], viewQueries: [{ propertyName: "_implicitContent", first: true, predicate: TemplateRef, descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "<ng-template><ng-content /></ng-template>\n", changeDetection: i0.ChangeDetectionStrategy.Default, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.0", type: InlineTabComponent, isStandalone: true, selector: "et-inline-tab", inputs: { fitUnderlineToContent: ["fitUnderlineToContent", "fitUnderlineToContent", booleanAttribute], textLabel: ["label", "textLabel"], ariaLabel: ["aria-label", "ariaLabel"], ariaLabelledby: ["aria-labelledby", "ariaLabelledby"], labelClass: "labelClass", bodyClass: "bodyClass", disabled: ["disabled", "disabled", booleanAttribute] }, host: { classAttribute: "et-inline-tab" }, providers: [{ provide: TAB, useExisting: InlineTabComponent }], queries: [{ propertyName: "templateLabel", first: true, predicate: TAB_LABEL, descendants: true }, { propertyName: "_explicitContent", first: true, predicate: TAB_CONTENT, descendants: true, read: TemplateRef, static: true }], viewQueries: [{ propertyName: "_implicitContent", first: true, predicate: TemplateRef, descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "<ng-template><ng-content /></ng-template>\n", changeDetection: i0.ChangeDetectionStrategy.Default, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.0", ngImport: i0, type: InlineTabComponent, decorators: [{
             type: Component,
@@ -9824,7 +9688,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.0", ngImpor
                 type: ContentChild,
                 args: [TAB_LABEL]
             }], fitUnderlineToContent: [{
-                type: Input
+                type: Input,
+                args: [{ transform: booleanAttribute }]
             }], _explicitContent: [{
                 type: ContentChild,
                 args: [TAB_CONTENT, { read: TemplateRef, static: true }]
@@ -9845,7 +9710,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.0", ngImpor
             }], bodyClass: [{
                 type: Input
             }], disabled: [{
-                type: Input
+                type: Input,
+                args: [{ transform: booleanAttribute }]
             }] } });
 
 let nextUniqueId$1 = 0;
@@ -9884,14 +9750,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.0", ngImpor
             }] } });
 
 class NavTabsComponent extends PaginatedTabHeaderDirective {
+    constructor() {
+        super(...arguments);
+        this._router = inject(Router);
+    }
     get _attrRole() {
         return this._getRole();
     }
-    constructor(elementRef, dir, ngZone, _cdr, viewportRuler, _router) {
-        super(elementRef, _cdr, viewportRuler, dir, ngZone);
-        this._cdr = _cdr;
-        this._router = _router;
-    }
     ngOnInit() {
         this._router.events
             .pipe(filter((e) => e instanceof NavigationEnd), tap(() => this.updateActiveLink()), takeUntil(this._destroy$))
@@ -9932,7 +9797,7 @@ class NavTabsComponent extends PaginatedTabHeaderDirective {
     _getRole() {
         return this.tabOutlet ? 'tablist' : this._elementRef.nativeElement.getAttribute('role');
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.0", ngImport: i0, type: NavTabsComponent, deps: [{ token: i0.ElementRef }, { token: i1$4.Directionality, optional: true }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }, { token: i1$5.ViewportRuler }, { token: i3.Router }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.0", ngImport: i0, type: NavTabsComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.0", type: NavTabsComponent, isStandalone: true, selector: "[et-nav-tabs]", inputs: { tabOutlet: "tabOutlet" }, host: { properties: { "attr.role": "this._attrRole" }, classAttribute: "et-nav-tabs" }, queries: [{ propertyName: "_items", predicate: i0.forwardRef(function () { return NavTabLinkComponent; }), descendants: true }, { propertyName: "_inkBars", predicate: i0.forwardRef(function () { return ActiveTabUnderlineDirective; }), descendants: true }], viewQueries: [{ propertyName: "_scrollable", first: true, predicate: ScrollableComponent, descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<et-scrollable\n  [itemSize]=\"itemSize\"\n  [renderButtons]=\"renderButtons\"\n  [scrollableClass]=\"scrollableClass\"\n  [renderMasks]=\"renderMasks\"\n  [renderScrollbars]=\"renderScrollbars\"\n  (keydown)=\"_handleKeydown($event)\"\n  (contentChanged)=\"_onContentChanges()\"\n>\n  <ng-content />\n</et-scrollable>\n", dependencies: [{ kind: "component", type: ScrollableComponent, selector: "et-scrollable", inputs: ["itemSize", "direction", "scrollableRole", "scrollableClass", "renderMasks", "renderButtons", "renderScrollbars", "stickyButtons", "cursorDragScroll", "disableActiveElementScrolling", "scrollMode", "snap", "scrollMargin"], outputs: ["scrollStateChange", "intersectionChange"] }], changeDetection: i0.ChangeDetectionStrategy.Default, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.0", ngImport: i0, type: NavTabsComponent, decorators: [{
@@ -9940,9 +9805,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.0", ngImpor
             args: [{ selector: '[et-nav-tabs]', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.Default, standalone: true, imports: [ScrollableComponent, NgClass, ScrollObserverIgnoreTargetDirective], host: {
                         class: 'et-nav-tabs',
                     }, template: "<et-scrollable\n  [itemSize]=\"itemSize\"\n  [renderButtons]=\"renderButtons\"\n  [scrollableClass]=\"scrollableClass\"\n  [renderMasks]=\"renderMasks\"\n  [renderScrollbars]=\"renderScrollbars\"\n  (keydown)=\"_handleKeydown($event)\"\n  (contentChanged)=\"_onContentChanges()\"\n>\n  <ng-content />\n</et-scrollable>\n" }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i1$4.Directionality, decorators: [{
-                    type: Optional
-                }] }, { type: i0.NgZone }, { type: i0.ChangeDetectorRef }, { type: i1$5.ViewportRuler }, { type: i3.Router }]; }, propDecorators: { tabOutlet: [{
+        }], propDecorators: { tabOutlet: [{
                 type: Input
             }], _items: [{
                 type: ContentChildren,
@@ -9976,18 +9839,6 @@ class NavTabLinkComponent {
         const isActive = link.urlTree ? this._router.isActive(link.urlTree, options) : false;
         return isActive;
     }
-    get tabIndex() {
-        return this.disabled ? -1 : this._tabIndex;
-    }
-    set tabIndex(value) {
-        this._tabIndex = value != null ? coerceNumberProperty(value) : 0;
-    }
-    get disabled() {
-        return this._disabled;
-    }
-    set disabled(value) {
-        this._disabled = coerceBooleanProperty(value);
-    }
     get _attrAriaControls() {
         return this._getAriaControls();
     }
@@ -10006,18 +9857,19 @@ class NavTabLinkComponent {
     get _attrRole() {
         return this._getRole();
     }
-    constructor(_tabNavBar, elementRef, tabIndex, _focusMonitor, _router, _cdr, _ngZone, _link, _linkWithHref, _linkConfig) {
-        this._tabNavBar = _tabNavBar;
-        this.elementRef = elementRef;
-        this._focusMonitor = _focusMonitor;
-        this._router = _router;
-        this._cdr = _cdr;
-        this._ngZone = _ngZone;
-        this._link = _link;
-        this._linkWithHref = _linkWithHref;
-        this._linkConfig = _linkConfig;
-        this._tabIndex = 0;
-        this._disabled = false;
+    constructor(tabIndex) {
+        this._tabNavBar = inject(NavTabsComponent);
+        this.elementRef = inject(ElementRef);
+        this._focusMonitor = inject(FocusMonitor);
+        this._router = inject(Router);
+        this._cdr = inject(ChangeDetectorRef);
+        this._ngZone = inject(NgZone);
+        this._link = inject(RouterLink, { optional: true });
+        this._linkWithHref = inject(RouterLink, { optional: true });
+        this._linkConfig = inject(RouterLinkActive, { optional: true });
+        // eslint-disable-next-line @angular-eslint/no-input-rename
+        this.tabIndex = 0;
+        this.disabled = false;
         this.id = `et-nav-tab-link-${nextUniqueId++}`;
         this._haltDisabledEvents = (event) => {
             if (this.disabled) {
@@ -10080,8 +9932,8 @@ class NavTabLinkComponent {
     _markForCheck() {
         this._cdr.markForCheck();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.0", ngImport: i0, type: NavTabLinkComponent, deps: [{ token: NavTabsComponent }, { token: i0.ElementRef }, { token: 'tabindex', attribute: true }, { token: i1$2.FocusMonitor }, { token: i3.Router }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }, { token: i3.RouterLink, optional: true }, { token: i3.RouterLink, optional: true }, { token: i3.RouterLinkActive, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.0", type: NavTabLinkComponent, isStandalone: true, selector: "[et-nav-tab-link]", inputs: { tabIndex: "tabIndex", disabled: "disabled", id: "id" }, host: { listeners: { "focus": "_handleFocus()", "keydown": "_handleKeydown($event)" }, properties: { "attr.id": "this.id", "attr.aria-controls": "this._attrAriaControls", "attr.aria-current": "this._attrAriaCurrent", "attr.aria-disabled": "this._attrAriaDisabled", "attr.aria-selected": "this._attrAriaSelected", "attr.tabIndex": "this._attrTabIndex", "attr.role": "this._attrRole" }, classAttribute: "et-nav-tab-link" }, hostDirectives: [{ directive: ActiveTabUnderlineDirective, inputs: ["fitUnderlineToContent", "fitUnderlineToContent"] }], ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.0", ngImport: i0, type: NavTabLinkComponent, deps: [{ token: 'tabindex', attribute: true }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.0", type: NavTabLinkComponent, isStandalone: true, selector: "[et-nav-tab-link]", inputs: { tabIndex: ["tabIndex", "tabIndex", (v) => numberAttribute(v, 0)], disabled: ["disabled", "disabled", booleanAttribute], id: "id" }, host: { listeners: { "focus": "_handleFocus()", "keydown": "_handleKeydown($event)" }, properties: { "attr.id": "this.id", "attr.aria-controls": "this._attrAriaControls", "attr.aria-current": "this._attrAriaCurrent", "attr.aria-disabled": "this._attrAriaDisabled", "attr.aria-selected": "this._attrAriaSelected", "attr.tabIndex": "this._attrTabIndex", "attr.role": "this._attrRole" }, classAttribute: "et-nav-tab-link" }, hostDirectives: [{ directive: ActiveTabUnderlineDirective, inputs: ["fitUnderlineToContent", "fitUnderlineToContent"] }], ngImport: i0, template: `
     <span class="et-tab-content">
       <ng-content />
     </span>
@@ -10102,19 +9954,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.0", ngImpor
                     },
                     hostDirectives: [{ directive: ActiveTabUnderlineDirective, inputs: ['fitUnderlineToContent'] }],
                 }]
-        }], ctorParameters: function () { return [{ type: NavTabsComponent }, { type: i0.ElementRef }, { type: undefined, decorators: [{
+        }], ctorParameters: function () { return [{ type: undefined, decorators: [{
                     type: Attribute,
                     args: ['tabindex']
-                }] }, { type: i1$2.FocusMonitor }, { type: i3.Router }, { type: i0.ChangeDetectorRef }, { type: i0.NgZone }, { type: i3.RouterLink, decorators: [{
-                    type: Optional
-                }] }, { type: i3.RouterLink, decorators: [{
-                    type: Optional
-                }] }, { type: i3.RouterLinkActive, decorators: [{
-                    type: Optional
                 }] }]; }, propDecorators: { tabIndex: [{
-                type: Input
+                type: Input,
+                args: [{ transform: (v) => numberAttribute(v, 0) }]
             }], disabled: [{
-                type: Input
+                type: Input,
+                args: [{ transform: booleanAttribute }]
             }], id: [{
                 type: Input
             }, {
@@ -10153,57 +10001,21 @@ let nextId = 0;
 class InlineTabChangeEvent {
 }
 class InlineTabsComponent {
-    get selectedIndex() {
-        return this._selectedIndex;
-    }
-    set selectedIndex(value) {
-        this._indexToSelect = coerceNumberProperty(value, null);
-    }
-    get contentTabIndex() {
-        return this._contentTabIndex;
-    }
-    set contentTabIndex(value) {
-        this._contentTabIndex = coerceNumberProperty(value, null);
-    }
-    get preserveContent() {
-        return this._preserveContent;
-    }
-    set preserveContent(value) {
-        this._preserveContent = coerceBooleanProperty(value);
-    }
-    get renderMasks() {
-        return this._renderMasks;
-    }
-    set renderMasks(value) {
-        this._renderMasks = coerceBooleanProperty(value);
-    }
-    get renderButtons() {
-        return this._renderButtons;
-    }
-    set renderButtons(value) {
-        this._renderButtons = coerceBooleanProperty(value);
-    }
-    get renderScrollbars() {
-        return this._renderScrollbars;
-    }
-    set renderScrollbars(value) {
-        this._renderScrollbars = coerceBooleanProperty(value);
-    }
-    constructor(_cdr) {
-        this._cdr = _cdr;
-        this._selectedIndex = null;
-        this._contentTabIndex = null;
-        this._preserveContent = false;
+    constructor() {
+        this._cdr = inject(ChangeDetectorRef);
+        this.selectedIndex = null;
+        this.contentTabIndex = null;
+        this.preserveContent = false;
         this.itemSize = 'auto';
-        this._renderMasks = true;
-        this._renderButtons = true;
-        this._renderScrollbars = false;
+        this.renderMasks = true;
+        this.renderButtons = true;
+        this.renderScrollbars = false;
         this.selectedIndexChange = new EventEmitter();
         this.focusChange = new EventEmitter();
         this.selectedTabChange = new EventEmitter(true);
+        this._tabBodyWrapper = null;
         this._tabs = new TypedQueryList();
         this._groupId = nextId++;
-        this._indexToSelect = 0;
         this._lastFocusedTabIndex = null;
         this._tabsSubscription = Subscription.EMPTY;
         this._tabLabelSubscription = Subscription.EMPTY;
@@ -10213,13 +10025,13 @@ class InlineTabsComponent {
         this._subscribeToAllTabChanges();
         this._subscribeToTabLabels();
         this._tabsSubscription = this._tabs.changes.subscribe(() => {
-            const indexToSelect = this._clampTabIndex(this._indexToSelect);
-            if (indexToSelect === this._selectedIndex) {
+            const indexToSelect = this._clampTabIndex(this.selectedIndex);
+            if (indexToSelect === this.selectedIndex) {
                 const tabs = this._tabs.toArray();
                 let selectedTab;
                 for (let i = 0; i < tabs.length; i++) {
                     if (tabs[i]?.isActive) {
-                        this._indexToSelect = this._selectedIndex = i;
+                        this.selectedIndex = i;
                         this._lastFocusedTabIndex = null;
                         selectedTab = tabs[i];
                         break;
@@ -10239,12 +10051,12 @@ class InlineTabsComponent {
         });
     }
     ngAfterContentChecked() {
-        const indexToSelect = (this._indexToSelect = this._clampTabIndex(this._indexToSelect));
-        if (this._selectedIndex != indexToSelect) {
-            const isFirstRun = this._selectedIndex == null;
+        const indexToSelect = (this.selectedIndex = this._clampTabIndex(this.selectedIndex));
+        if (this.selectedIndex != indexToSelect && this._tabBodyWrapper) {
+            const isFirstRun = this.selectedIndex == null;
             if (!isFirstRun) {
                 this.selectedTabChange.emit(this._createChangeEvent(indexToSelect));
-                const wrapper = this._tabBodyWrapper.nativeElement;
+                const wrapper = this._tabBodyWrapper?.nativeElement;
                 wrapper.style.minHeight = wrapper.clientHeight + 'px';
             }
             Promise.resolve().then(() => {
@@ -10253,7 +10065,9 @@ class InlineTabsComponent {
                     .forEach((tab, index) => (tab.isActive = index === indexToSelect));
                 if (!isFirstRun) {
                     this.selectedIndexChange.emit(indexToSelect);
-                    this._tabBodyWrapper.nativeElement.style.minHeight = '';
+                    if (this._tabBodyWrapper) {
+                        this._tabBodyWrapper.nativeElement.style.minHeight = '';
+                    }
                 }
             });
         }
@@ -10261,12 +10075,12 @@ class InlineTabsComponent {
             if (!tab)
                 return;
             tab.position = index - indexToSelect;
-            if (this._selectedIndex != null && tab.position == 0 && !tab.origin) {
-                tab.origin = indexToSelect - this._selectedIndex;
+            if (this.selectedIndex != null && tab.position == 0 && !tab.origin) {
+                tab.origin = indexToSelect - this.selectedIndex;
             }
         });
-        if (this._selectedIndex !== indexToSelect) {
-            this._selectedIndex = indexToSelect;
+        if (this.selectedIndex !== indexToSelect) {
+            this.selectedIndex = indexToSelect;
             this._lastFocusedTabIndex = null;
             this._cdr.markForCheck();
         }
@@ -10349,8 +10163,8 @@ class InlineTabsComponent {
         }
         return event;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.0", ngImport: i0, type: InlineTabsComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.0", type: InlineTabsComponent, isStandalone: true, selector: "et-inline-tabs", inputs: { selectedIndex: "selectedIndex", contentTabIndex: "contentTabIndex", preserveContent: "preserveContent", tabHeaderClasses: "tabHeaderClasses", itemSize: "itemSize", scrollableClass: "scrollableClass", renderMasks: "renderMasks", renderButtons: "renderButtons", renderScrollbars: "renderScrollbars" }, outputs: { selectedIndexChange: "selectedIndexChange", focusChange: "focusChange", selectedTabChange: "selectedTabChange" }, host: { classAttribute: "et-inline-tabs" }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.0", ngImport: i0, type: InlineTabsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.0", type: InlineTabsComponent, isStandalone: true, selector: "et-inline-tabs", inputs: { selectedIndex: ["selectedIndex", "selectedIndex", numberAttribute], contentTabIndex: ["contentTabIndex", "contentTabIndex", numberAttribute], preserveContent: ["preserveContent", "preserveContent", booleanAttribute], tabHeaderClasses: "tabHeaderClasses", itemSize: "itemSize", scrollableClass: "scrollableClass", renderMasks: ["renderMasks", "renderMasks", booleanAttribute], renderButtons: ["renderButtons", "renderButtons", booleanAttribute], renderScrollbars: ["renderScrollbars", "renderScrollbars", booleanAttribute] }, outputs: { selectedIndexChange: "selectedIndexChange", focusChange: "focusChange", selectedTabChange: "selectedTabChange" }, host: { classAttribute: "et-inline-tabs" }, providers: [
             {
                 provide: TAB_GROUP,
                 useExisting: InlineTabsComponent,
@@ -10376,12 +10190,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.0", ngImpor
                     ], host: {
                         class: 'et-inline-tabs',
                     }, template: "<et-inline-tab-header\n  #tabHeader\n  [selectedIndex]=\"selectedIndex || 0\"\n  [ngClass]=\"tabHeaderClasses\"\n  [itemSize]=\"itemSize\"\n  [renderButtons]=\"renderButtons\"\n  [scrollableClass]=\"scrollableClass\"\n  [renderMasks]=\"renderMasks\"\n  [renderScrollbars]=\"renderScrollbars\"\n  (indexFocused)=\"_focusChanged($event)\"\n  (selectFocusedIndex)=\"selectedIndex = $event\"\n>\n  <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events -->\n  <div\n    *ngFor=\"let tab of _tabs; let i = index; trackBy: trackByTabFn\"\n    [id]=\"_getTabLabelId(i)\"\n    [attr.tabIndex]=\"_getTabIndex(tab, i)\"\n    [attr.aria-posinset]=\"i + 1\"\n    [attr.aria-setsize]=\"_tabs.length\"\n    [attr.aria-controls]=\"_getTabContentId(i)\"\n    [attr.aria-selected]=\"selectedIndex === i\"\n    [attr.aria-label]=\"tab.ariaLabel || null\"\n    [attr.aria-labelledby]=\"!tab.ariaLabel && tab.ariaLabelledby ? tab.ariaLabelledby : null\"\n    [disabled]=\"tab.disabled\"\n    [class.et-inline-tab-label--active]=\"selectedIndex === i\"\n    [class.et-inline-tab-label--is-text]=\"!!tab.textLabel\"\n    [fitUnderlineToContent]=\"tab.fitUnderlineToContent\"\n    (click)=\"_handleClick(tab, tabHeader, i)\"\n    (cdkFocusChange)=\"_tabFocusChanged($event, i)\"\n    role=\"tab\"\n    etInlineTabLabelWrapper\n    cdkMonitorElementFocus\n  >\n    <span class=\"et-tab-content\">\n      <ng-template [ngIf]=\"tab.templateLabel\" [ngIfElse]=\"tabTextLabel\">\n        <ng-template [cdkPortalOutlet]=\"tab.templateLabel\" />\n      </ng-template>\n\n      <ng-template #tabTextLabel>{{ tab.textLabel }}</ng-template>\n    </span>\n  </div>\n</et-inline-tab-header>\n\n<div #tabBodyWrapper>\n  <et-inline-tab-body\n    *ngFor=\"let tab of _tabs; let i = index; trackBy: trackByTabFn\"\n    [id]=\"_getTabContentId(i)\"\n    [attr.tabindex]=\"contentTabIndex !== null && selectedIndex === i ? contentTabIndex : null\"\n    [attr.aria-labelledby]=\"_getTabLabelId(i)\"\n    [class.cdk-visually-hidden]=\"selectedIndex !== i\"\n    [ngClass]=\"tab.bodyClass\"\n    [class.sr-only]=\"selectedIndex !== i\"\n    [content]=\"tab.content!\"\n    [position]=\"tab.position!\"\n    [origin]=\"tab.origin\"\n    [preserveContent]=\"preserveContent\"\n    role=\"tabpanel\"\n    animationDuration=\"0ms\"\n  />\n</div>\n", styles: [".et-inline-tabs{display:block}.et-inline-tabs .et-inline-tab-label--is-text{white-space:nowrap}.et-inline-tabs .et-inline-tab-label-wrapper:not([aria-disabled=true]){cursor:pointer}.et-inline-tabs .et-scrollable-container{position:relative}\n"] }]
-        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { selectedIndex: [{
-                type: Input
+        }], propDecorators: { selectedIndex: [{
+                type: Input,
+                args: [{ transform: numberAttribute }]
             }], contentTabIndex: [{
-                type: Input
+                type: Input,
+                args: [{ transform: numberAttribute }]
             }], preserveContent: [{
-                type: Input
+                type: Input,
+                args: [{ transform: booleanAttribute }]
             }], tabHeaderClasses: [{
                 type: Input
             }], itemSize: [{
@@ -10389,11 +10206,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.0", ngImpor
             }], scrollableClass: [{
                 type: Input
             }], renderMasks: [{
-                type: Input
+                type: Input,
+                args: [{ transform: booleanAttribute }]
             }], renderButtons: [{
-                type: Input
+                type: Input,
+                args: [{ transform: booleanAttribute }]
             }], renderScrollbars: [{
-                type: Input
+                type: Input,
+                args: [{ transform: booleanAttribute }]
             }], selectedIndexChange: [{
                 type: Output
             }], focusChange: [{