@ethlete/cdk 4.53.0 → 4.53.1

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @ethlete/cdk
 
+## 4.53.1
+
+### Patch Changes
+
+- [`6670b69`](https://github.com/ethlete-io/ethdk/commit/6670b693070a4755bdfbc8ca3ec6a7bf984a5adf) Thanks [@TomTomB](https://github.com/TomTomB)! - Fix `etAutosize` directive throwing an error during init phase
+
 ## 4.53.0
 
 ### Minor Changes

package/fesm2022/ethlete-cdk.mjs

@@ -5546,38 +5546,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImpor
 
 class AutosizeTextareaDirective {
     constructor() {
-        this._input = inject(INPUT_TOKEN, { host: true });
-        this._resizeObserver = inject(ResizeObserverService);
-        this._destroy$ = createDestroy();
-    }
-    get element() {
-        if (!this._input.nativeInputRef?.element) {
-            if (isDevMode()) {
-                throw new Error('AutosizeTextareaDirective must be used with an input that has a native input element');
-            }
-            return null;
-        }
-        return this._input.nativeInputRef.element.nativeElement;
-    }
-    ngOnInit() {
-        if (!this.element) {
-            return;
-        }
-        this._resizeObserver
-            .observe(this.element)
-            .pipe(debounceTime(1), takeUntil(this._destroy$))
-            .subscribe(() => this.updateSize());
-        this.updateSize();
+        this.input = inject(INPUT_TOKEN, { host: true });
+        this.resizeObserver = inject(ResizeObserverService);
+        this.maxHeight = input(null, { transform: numberAttribute, alias: 'etAutosizeMaxHeight' });
+        combineLatest([this.input.nativeInputElement$, toObservable(this.maxHeight)])
+            .pipe(switchMap(([el, maxHeight]) => el
+            ? combineLatest([this.resizeObserver.observe(el), this.input.value$]).pipe(tap(() => {
+                this.updateSize(el, maxHeight);
+            }))
+            : of(null)), takeUntilDestroyed())
+            .subscribe();
     }
-    updateSize() {
-        if (!this.element) {
-            return;
-        }
-        this.element.style.height = '0';
-        this.element.style.height = `${this.element.scrollHeight}px`;
+    updateSize(el, maxHeight) {
+        el.style.height = '0';
+        const newHeight = maxHeight ? Math.min(el.scrollHeight, maxHeight) : el.scrollHeight;
+        el.style.height = `${newHeight}px`;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: AutosizeTextareaDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.2", type: AutosizeTextareaDirective, isStandalone: true, selector: "et-textarea-input[etAutosize]", host: { classAttribute: "et-textarea--autosize" }, ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.2", type: AutosizeTextareaDirective, isStandalone: true, selector: "et-textarea-input[etAutosize]", inputs: { maxHeight: { classPropertyName: "maxHeight", publicName: "etAutosizeMaxHeight", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "et-textarea--autosize" }, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: AutosizeTextareaDirective, decorators: [{
             type: Directive,
@@ -5588,7 +5574,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImpor
                         class: 'et-textarea--autosize',
                     },
                 }]
-        }] });
+        }], ctorParameters: () => [] });
 
 // Browser compatibility for the HTMLElement.showPicker method as of 14.02.2024
 // https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/showPicker#browser_compatibility