@ethlete/core 2.7.0 → 2.7.1

package/fesm2022/ethlete-core.mjs

@@ -1,9 +1,9 @@
 import * as i0 from '@angular/core';
-import { inject, Component, ChangeDetectionStrategy, ViewEncapsulation, Input, HostBinding, InjectionToken, assertInInjectionContext, DestroyRef, ElementRef, isDevMode, Directive, Injectable, Inject, Optional, NgZone, EventEmitter, Output, Injector, ViewContainerRef, Pipe, QueryList } from '@angular/core';
+import { inject, Component, ChangeDetectionStrategy, ViewEncapsulation, Input, HostBinding, InjectionToken, assertInInjectionContext, DestroyRef, ElementRef, isDevMode, Directive, Injectable, NgZone, EventEmitter, booleanAttribute, numberAttribute, Output, Injector, ViewContainerRef, TemplateRef, Pipe, QueryList } from '@angular/core';
 import { DomSanitizer, Meta, Title } from '@angular/platform-browser';
 import { Subject, BehaviorSubject, takeUntil, switchMap, of, tap, Observable, combineLatest, startWith, map, distinctUntilChanged, shareReplay, skip, take, debounceTime, merge, fromEvent, filter, pairwise, finalize } from 'rxjs';
 import { END, HOME, PAGE_DOWN, PAGE_UP, UP_ARROW, DOWN_ARROW } from '@angular/cdk/keycodes';
-import { coerceCssPixelValue, coerceElement, coerceBooleanProperty, coerceNumberProperty } from '@angular/cdk/coercion';
+import { coerceCssPixelValue, coerceElement } from '@angular/cdk/coercion';
 import { supportsScrollBehavior } from '@angular/cdk/platform';
 import { Overlay } from '@angular/cdk/overlay';
 import { ComponentPortal } from '@angular/cdk/portal';
@@ -11,7 +11,7 @@ import { createPopper } from '@popperjs/core';
 import { DOCUMENT } from '@angular/common';
 import { Router, NavigationEnd } from '@angular/router';
 import { __decorate, __metadata } from 'tslib';
-import * as i1 from '@angular/cdk/layout';
+import { BreakpointObserver } from '@angular/cdk/layout';
 import { debounceTime as debounceTime$1 } from 'rxjs/operators';
 
 class StructuredDataComponent {
@@ -566,7 +566,7 @@ const createReactiveBindings = (...values) => {
     const pushedAttributes = [];
     const defaults = {};
     const push = (value) => {
-        const { attribute, observable, elementRef } = value;
+        const { attribute, observable, elementRef, eager } = value;
         const elRef = elementRef || rootElementRef;
         const attributes = Array.isArray(attribute) ? attribute : [attribute];
         pushedAttributes.push(attributes);
@@ -584,7 +584,7 @@ const createReactiveBindings = (...values) => {
                 return a.render === b.render && a.value === b.value;
             }
             return false;
-        }), switchMap((v) => fromNextFrame().pipe(map(() => v))))
+        }), switchMap((v) => (eager ? of(v) : fromNextFrame().pipe(map(() => v)))))
             .subscribe((value) => {
             const currentAttributes = pushedAttributes.find((s) => s.some((current) => attributes.includes(current))) || [];
             for (const attribute of currentAttributes) {
@@ -1324,6 +1324,7 @@ class AnimatedLifecycleDirective {
         this._bindings = createReactiveBindings({
             attribute: 'class.et-force-invisible',
             observable: this._state$.pipe(map((state) => state === 'init')),
+            eager: true,
         });
     }
     get state() {
@@ -1423,8 +1424,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.0", ngImpor
             args: [{ providedIn: 'root' }]
         }] });
 class ClickObserverService {
-    constructor(_clickObserverFactory) {
-        this._clickObserverFactory = _clickObserverFactory;
+    constructor() {
+        this._clickObserverFactory = inject(ClickObserverFactory);
         this._observedElements = new Map();
     }
     ngOnDestroy() {
@@ -1471,13 +1472,13 @@ class ClickObserverService {
             this._observedElements.delete(element);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.0", ngImport: i0, type: ClickObserverService, deps: [{ token: ClickObserverFactory }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.0", ngImport: i0, type: ClickObserverService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.1.0", ngImport: i0, type: ClickObserverService, providedIn: 'root' }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.0", ngImport: i0, type: ClickObserverService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
-        }], ctorParameters: function () { return [{ type: ClickObserverFactory }]; } });
+        }] });
 
 /* eslint-disable @typescript-eslint/no-non-null-assertion */
 class MutationObserverFactory {
@@ -1492,8 +1493,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.0", ngImpor
             args: [{ providedIn: 'root' }]
         }] });
 class ContentObserverService {
-    constructor(_mutationObserverFactory) {
-        this._mutationObserverFactory = _mutationObserverFactory;
+    constructor() {
+        this._mutationObserverFactory = inject(MutationObserverFactory);
         this._observedElements = new Map();
     }
     ngOnDestroy() {
@@ -1546,13 +1547,13 @@ class ContentObserverService {
             this._observedElements.delete(element);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.0", ngImport: i0, type: ContentObserverService, deps: [{ token: MutationObserverFactory }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.0", ngImport: i0, type: ContentObserverService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.1.0", ngImport: i0, type: ContentObserverService, providedIn: 'root' }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.0", ngImport: i0, type: ContentObserverService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
-        }], ctorParameters: function () { return [{ type: MutationObserverFactory }]; } });
+        }] });
 
 class FocusVisibleService {
     get isFocusVisible() {
@@ -1598,8 +1599,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.0", ngImpor
             args: [{ providedIn: 'root' }]
         }] });
 class ResizeObserverService {
-    constructor(_mutationObserverFactory) {
-        this._mutationObserverFactory = _mutationObserverFactory;
+    constructor() {
+        this._mutationObserverFactory = inject(ResizeObserverFactory);
         this._observedElements = new Map();
     }
     ngOnDestroy() {
@@ -1648,13 +1649,13 @@ class ResizeObserverService {
             this._observedElements.delete(element);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.0", ngImport: i0, type: ResizeObserverService, deps: [{ token: ResizeObserverFactory }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.0", ngImport: i0, type: ResizeObserverService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.1.0", ngImport: i0, type: ResizeObserverService, providedIn: 'root' }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.0", ngImport: i0, type: ResizeObserverService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
-        }], ctorParameters: function () { return [{ type: ResizeObserverFactory }]; } });
+        }] });
 
 const ET_DISABLE_SCROLL_TOP = Symbol('ET_DISABLE_SCROLL_TOP');
 const ET_DISABLE_SCROLL_TOP_AS_RETURN_ROUTE = Symbol('ET_DISABLE_SCROLL_TOP_AS_RETURN_ROUTE');
@@ -1881,9 +1882,10 @@ class ViewportService {
     get currentViewport() {
         return this.getCurrentViewport([this.isXs, this.isSm, this.isMd, this.isLg, this.isXl, this.is2Xl]);
     }
-    constructor(_viewportConfig, _breakpointObserver) {
-        this._breakpointObserver = _breakpointObserver;
+    constructor() {
         this._resizeObserverService = inject(ResizeObserverService);
+        this._viewportConfig = inject(VIEWPORT_CONFIG, { optional: true }) || DEFAULT_VIEWPORT_CONFIG;
+        this._breakpointObserver = inject(BreakpointObserver);
         this._viewportMonitorStop$ = new Subject();
         this._isViewportMonitorEnabled = false;
         this._isXs$ = new BehaviorSubject(false);
@@ -1895,7 +1897,6 @@ class ViewportService {
         this._viewportSize$ = new BehaviorSubject(null);
         this._scrollbarSize$ = new BehaviorSubject(null);
         this.currentViewport$ = combineLatest([this.isXs$, this.isSm$, this.isMd$, this.isLg$, this.isXl$, this.is2Xl$]).pipe(map((val) => this.getCurrentViewport(val)), shareReplay(1));
-        this._viewportConfig = _viewportConfig || DEFAULT_VIEWPORT_CONFIG;
         this._observeDefaultBreakpoints();
     }
     observe(options) {
@@ -2026,7 +2027,7 @@ class ViewportService {
         }
         return 'xs';
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.0", ngImport: i0, type: ViewportService, deps: [{ token: VIEWPORT_CONFIG, optional: true }, { token: i1.BreakpointObserver }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.0", ngImport: i0, type: ViewportService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.1.0", ngImport: i0, type: ViewportService, providedIn: 'root' }); }
 }
 __decorate([
@@ -2050,12 +2051,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.0", ngImpor
             args: [{
                     providedIn: 'root',
                 }]
-        }], ctorParameters: function () { return [{ type: undefined, decorators: [{
-                    type: Inject,
-                    args: [VIEWPORT_CONFIG]
-                }, {
-                    type: Optional
-                }] }, { type: i1.BreakpointObserver }]; }, propDecorators: { _getViewportSize: [], _buildMediaQuery: [] } });
+        }], ctorParameters: function () { return []; }, propDecorators: { _getViewportSize: [], _buildMediaQuery: [] } });
 
 class ObserveResizeDirective {
     constructor() {
@@ -2071,14 +2067,14 @@ class ObserveResizeDirective {
         return this._disabled;
     }
     set disabled(value) {
-        this._disabled = coerceBooleanProperty(value);
+        this._disabled = booleanAttribute(value);
         this._disabled ? this._unsubscribe() : this._subscribe();
     }
     get debounce() {
         return this._debounce;
     }
     set debounce(value) {
-        this._debounce = coerceNumberProperty(value);
+        this._debounce = numberAttribute(value) ?? null;
         this._subscribe();
     }
     ngAfterContentInit() {
@@ -2421,7 +2417,7 @@ class CursorDragScrollDirective {
         return this._enabled;
     }
     set enabled(value) {
-        this._enabled = coerceBooleanProperty(value);
+        this._enabled = booleanAttribute(value);
         if (this._enabled) {
             this._enableCursorDragScroll();
         }
@@ -2614,16 +2610,10 @@ const IS_ACTIVE_ELEMENT = new InjectionToken('ET_IS_ACTIVE_ELEMENT');
 class IsActiveElementDirective {
     constructor() {
         this.elementRef = inject(ElementRef);
-        this._isActiveElement = false;
-    }
-    get isActiveElement() {
-        return this._isActiveElement;
-    }
-    set isActiveElement(value) {
-        this._isActiveElement = coerceBooleanProperty(value);
+        this.isActiveElement = false;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.0", ngImport: i0, type: IsActiveElementDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.1.0", type: IsActiveElementDirective, isStandalone: true, selector: "[etIsActiveElement]", inputs: { isActiveElement: ["etIsActiveElement", "isActiveElement"] }, providers: [
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.1.0", type: IsActiveElementDirective, isStandalone: true, selector: "[etIsActiveElement]", inputs: { isActiveElement: ["etIsActiveElement", "isActiveElement", booleanAttribute] }, providers: [
             {
                 provide: IS_ACTIVE_ELEMENT,
                 useExisting: IsActiveElementDirective,
@@ -2644,23 +2634,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.0", ngImpor
                 }]
         }], propDecorators: { isActiveElement: [{
                 type: Input,
-                args: ['etIsActiveElement']
+                args: [{ alias: 'etIsActiveElement', transform: booleanAttribute }]
             }] } });
 
 const IS_ELEMENT = new InjectionToken('ET_IS_ELEMENT');
 class IsElementDirective {
     constructor() {
         this.elementRef = inject(ElementRef);
-        this._isElement = false;
-    }
-    get isElement() {
-        return this._isElement;
-    }
-    set isElement(value) {
-        this._isElement = coerceBooleanProperty(value);
+        this.isElement = false;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.0", ngImport: i0, type: IsElementDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.1.0", type: IsElementDirective, isStandalone: true, selector: "[etIsElement]", inputs: { isElement: ["etIsElement", "isElement"] }, providers: [
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.1.0", type: IsElementDirective, isStandalone: true, selector: "[etIsElement]", inputs: { isElement: ["etIsElement", "isElement", booleanAttribute] }, providers: [
             {
                 provide: IS_ELEMENT,
                 useExisting: IsElementDirective,
@@ -2681,7 +2665,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.0", ngImpor
                 }]
         }], propDecorators: { isElement: [{
                 type: Input,
-                args: ['etIsElement']
+                args: [{ alias: 'etIsElement', transform: booleanAttribute }]
             }] } });
 
 class LetContext {
@@ -2694,17 +2678,16 @@ class LetContext {
 }
 
 class LetDirective {
+    constructor() {
+        this._viewContainer = inject(ViewContainerRef);
+        this._context = new LetContext();
+        this._templateRef = inject(TemplateRef);
+        this._viewRef = null;
+    }
     set etLet(value) {
         this._context.$implicit = this._context.etLet = value;
         this._updateView();
     }
-    constructor(_viewContainer, templateRef) {
-        this._viewContainer = _viewContainer;
-        this._context = new LetContext();
-        this._templateRef = null;
-        this._viewRef = null;
-        this._templateRef = templateRef;
-    }
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     static ngTemplateContextGuard(dir, ctx) {
         return true;
@@ -2717,7 +2700,7 @@ class LetDirective {
             }
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.0", ngImport: i0, type: LetDirective, deps: [{ token: i0.ViewContainerRef }, { token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.0", ngImport: i0, type: LetDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
     static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.1.0", type: LetDirective, isStandalone: true, selector: "[etLet]", inputs: { etLet: "etLet" }, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.0", ngImport: i0, type: LetDirective, decorators: [{
@@ -2726,7 +2709,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.0", ngImpor
                     selector: '[etLet]',
                     standalone: true,
                 }]
-        }], ctorParameters: function () { return [{ type: i0.ViewContainerRef }, { type: i0.TemplateRef }]; }, propDecorators: { etLet: [{
+        }], propDecorators: { etLet: [{
                 type: Input
             }] } });
 
@@ -2744,14 +2727,14 @@ class ObserveContentDirective {
         return this._disabled;
     }
     set disabled(value) {
-        this._disabled = coerceBooleanProperty(value);
+        this._disabled = booleanAttribute(value);
         this._disabled ? this._unsubscribe() : this._subscribe();
     }
     get debounce() {
         return this._debounce;
     }
     set debounce(value) {
-        this._debounce = coerceNumberProperty(value);
+        this._debounce = numberAttribute(value) ?? null;
         this._subscribe();
     }
     ngAfterContentInit() {
@@ -2796,16 +2779,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.0", ngImpor
 const SCROLL_OBSERVER_FIRST_ELEMENT_CLASS = 'et-scroll-observer-first-element';
 class ScrollObserverFirstElementDirective {
     constructor() {
-        this._isFirstElement = false;
-    }
-    get isFirstElement() {
-        return this._isFirstElement;
-    }
-    set isFirstElement(value) {
-        this._isFirstElement = coerceBooleanProperty(value);
+        this.isFirstElement = false;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.0", ngImport: i0, type: ScrollObserverFirstElementDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.1.0", type: ScrollObserverFirstElementDirective, isStandalone: true, selector: "[etScrollObserverFirstElement]", inputs: { isFirstElement: ["etScrollObserverFirstElement", "isFirstElement"] }, host: { properties: { "class.et-scroll-observer-first-element": "this.isFirstElement" } }, ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.1.0", type: ScrollObserverFirstElementDirective, isStandalone: true, selector: "[etScrollObserverFirstElement]", inputs: { isFirstElement: ["etScrollObserverFirstElement", "isFirstElement", booleanAttribute] }, host: { properties: { "class.et-scroll-observer-first-element": "this.isFirstElement" } }, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.0", ngImport: i0, type: ScrollObserverFirstElementDirective, decorators: [{
             type: Directive,
@@ -2815,7 +2792,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.0", ngImpor
                 }]
         }], propDecorators: { isFirstElement: [{
                 type: Input,
-                args: ['etScrollObserverFirstElement']
+                args: [{ alias: 'etScrollObserverFirstElement', transform: booleanAttribute }]
             }, {
                 type: HostBinding,
                 args: [`class.${SCROLL_OBSERVER_FIRST_ELEMENT_CLASS}`]
@@ -2840,16 +2817,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.0", ngImpor
 const SCROLL_OBSERVER_LAST_ELEMENT_CLASS = 'et-scroll-observer-last-element';
 class ScrollObserverLastElementDirective {
     constructor() {
-        this._isLastElement = false;
-    }
-    get isLastElement() {
-        return this._isLastElement;
-    }
-    set isLastElement(value) {
-        this._isLastElement = coerceBooleanProperty(value);
+        this.isLastElement = false;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.0", ngImport: i0, type: ScrollObserverLastElementDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.1.0", type: ScrollObserverLastElementDirective, isStandalone: true, selector: "[etScrollObserverLastElement]", inputs: { isLastElement: ["etScrollObserverLastElement", "isLastElement"] }, host: { properties: { "class.et-scroll-observer-last-element": "this.isLastElement" }, classAttribute: "et-scroll-observer-last-element" }, ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.1.0", type: ScrollObserverLastElementDirective, isStandalone: true, selector: "[etScrollObserverLastElement]", inputs: { isLastElement: ["etScrollObserverLastElement", "isLastElement", booleanAttribute] }, host: { properties: { "class.et-scroll-observer-last-element": "this.isLastElement" }, classAttribute: "et-scroll-observer-last-element" }, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.0", ngImport: i0, type: ScrollObserverLastElementDirective, decorators: [{
             type: Directive,
@@ -2862,7 +2833,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.0", ngImpor
                 }]
         }], propDecorators: { isLastElement: [{
                 type: Input,
-                args: ['etScrollObserverLastElement']
+                args: [{ alias: 'etScrollObserverLastElement', transform: booleanAttribute }]
             }, {
                 type: HostBinding,
                 args: [`class.${SCROLL_OBSERVER_LAST_ELEMENT_CLASS}`]
@@ -2882,7 +2853,7 @@ class ObserveScrollStateDirective {
             first: this._firstCurrentChild,
             last: this._lastCurrentChild,
         };
-        this._rootMargin = 0;
+        this.rootMargin = 0;
         this._threshold = [0.99999, 0.9999, 0.999, 0.99, 1];
         this._intersectionObserver = null;
         this.valueChange = new EventEmitter();
@@ -2903,21 +2874,15 @@ class ObserveScrollStateDirective {
         const element = this._elementRef.nativeElement.children[this._elementRef.nativeElement.children.length - 1];
         return this._getNonIgnoredChild(element, 'previous');
     }
-    get observerRootMargin() {
-        return this._rootMargin;
-    }
-    set observerRootMargin(value) {
-        this._rootMargin = coerceNumberProperty(value);
-    }
     get observerThreshold() {
         return this._threshold;
     }
     set observerThreshold(value) {
         if (Array.isArray(value)) {
-            this._threshold = value;
+            this._threshold = value.map((threshold) => numberAttribute(threshold));
             return;
         }
-        this._threshold = coerceNumberProperty(value);
+        this._threshold = numberAttribute(value);
     }
     ngOnInit() {
         this._contentObserverService
@@ -2970,7 +2935,7 @@ class ObserveScrollStateDirective {
             });
         }, {
             root: this._elementRef.nativeElement,
-            rootMargin: this._rootMargin ? `${this._rootMargin}px` : undefined,
+            rootMargin: this.rootMargin ? `${this.rootMargin}px` : undefined,
             threshold: this._threshold,
         });
         return observer;
@@ -3012,7 +2977,7 @@ class ObserveScrollStateDirective {
         return element;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.0", ngImport: i0, type: ObserveScrollStateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.1.0", type: ObserveScrollStateDirective, isStandalone: true, selector: "[etObserveScrollState]", inputs: { observerRootMargin: "observerRootMargin", observerThreshold: "observerThreshold" }, outputs: { valueChange: "etObserveScrollState" }, providers: [
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.1.0", type: ObserveScrollStateDirective, isStandalone: true, selector: "[etObserveScrollState]", inputs: { rootMargin: ["rootMargin", "rootMargin", numberAttribute], observerThreshold: "observerThreshold" }, outputs: { valueChange: "etObserveScrollState" }, providers: [
             {
                 provide: OBSERVE_SCROLL_STATE,
                 useExisting: ObserveScrollStateDirective,
@@ -3032,8 +2997,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.0", ngImpor
                         },
                     ],
                 }]
-        }], propDecorators: { observerRootMargin: [{
-                type: Input
+        }], propDecorators: { rootMargin: [{
+                type: Input,
+                args: [{ transform: numberAttribute }]
             }], observerThreshold: [{
                 type: Input
             }], valueChange: [{
@@ -3046,7 +3012,7 @@ class RepeatDirective {
         return this._repeatCount;
     }
     set repeatCount(value) {
-        this._repeatCount = coerceNumberProperty(value);
+        this._repeatCount = numberAttribute(value);
         this._render();
     }
     constructor(_mainTemplateRef, _viewContainerRef) {