@egose/shadcn-theme-ng 0.5.1 → 0.5.2

package/form-checkbox/fesm2022/form-checkbox.mjs

@@ -36,6 +36,14 @@ class EgFormCheckbox {
     ...(ngDevMode ? [{ debugName: "_status" }] : /* istanbul ignore next */ []));
     _submitted = signal(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "_submitted" }] : /* istanbul ignore next */ []));
+    /**
+     * `touched`/`dirty` are plain flags with no observable: a stepper surfacing
+     * errors via `markAllAsTouched()` (no status change, no submit) would
+     * otherwise stay invisible under OnPush. Polled in `ngDoCheck` so the
+     * computed below recomputes on interaction changes too.
+     */
+    _interacted = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_interacted" }] : /* istanbul ignore next */ []));
     _trackedControl = null;
     _controlSub = null;
     // Classes
@@ -107,10 +115,9 @@ class EgFormCheckbox {
     showError = computed(() => {
         this._status();
         this._submitted();
+        this._interacted();
         const control = this.formGroupDirective.form.get(this.controlName());
-        return (!!this.resolvedError() &&
-            !!control?.invalid &&
-            (control.dirty || control.touched || this._submitted()));
+        return !!this.resolvedError() && !!control?.invalid && (this._interacted() || this._submitted());
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "showError" }] : /* istanbul ignore next */ []));
     describedBy() {
@@ -136,11 +143,14 @@ class EgFormCheckbox {
         const control = this.formGroupDirective.form.get(this.controlName()) ?? null;
         if (control !== this._trackedControl) {
             this._trackControl();
+            return;
         }
-        else if (control && this._status() !== control.status) {
-            // Fallback poll: catches status changes missed by the subscription
-            // (e.g. control replaced without re-init).
-            this._status.set(control.status);
+        if (control) {
+            if (this._status() !== control.status)
+                this._status.set(control.status);
+            const interacted = control.touched || control.dirty;
+            if (this._interacted() !== interacted)
+                this._interacted.set(interacted);
         }
     }
     ngOnDestroy() {
@@ -153,6 +163,7 @@ class EgFormCheckbox {
         const control = this.formGroupDirective.form.get(this.controlName()) ?? null;
         this._trackedControl = control;
         this._status.set(control?.status ?? null);
+        this._interacted.set(!!control && (control.touched || control.dirty));
         if (control) {
             this._controlSub = control.statusChanges.subscribe((status) => {
                 if (this._status() !== status)

package/form-checkbox/types/form-checkbox.d.ts

@@ -20,6 +20,13 @@ declare class EgFormCheckbox implements DoCheck, AfterContentInit, OnDestroy {
      */
     private readonly _status;
     private readonly _submitted;
+    /**
+     * `touched`/`dirty` are plain flags with no observable: a stepper surfacing
+     * errors via `markAllAsTouched()` (no status change, no submit) would
+     * otherwise stay invisible under OnPush. Polled in `ngDoCheck` so the
+     * computed below recomputes on interaction changes too.
+     */
+    private readonly _interacted;
     private _trackedControl;
     private _controlSub;
     readonly userClass: _angular_core.InputSignal<ClassValue>;

package/form-field-simple/fesm2022/form-field-simple.mjs

@@ -21,6 +21,14 @@ class EgFormField {
      */
     submittedSignal = signal(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "submittedSignal" }] : /* istanbul ignore next */ []));
+    /**
+     * `touched`/`dirty` are plain flags with no observable: surfacing errors via
+     * `markAllAsTouched()` (e.g. a stepper blocking `Next` without changing the
+     * control status) would otherwise stay invisible under OnPush. Polled in
+     * `ngDoCheck` so `hasError` recomputes on interaction changes too.
+     */
+    interactedSignal = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "interactedSignal" }] : /* istanbul ignore next */ []));
     sub = new Subscription();
     ngAfterContentInit() {
         const ctrlDir = this.control();
@@ -29,32 +37,41 @@ class EgFormField {
                 this.statusSignal.set(status);
             }));
             this.statusSignal.set(ctrlDir.control.status);
+            this.interactedSignal.set(ctrlDir.control.touched || ctrlDir.control.dirty);
         }
     }
     ngDoCheck() {
         const submitted = !!this.formGroupDirective?.submitted;
         if (this.submittedSignal() !== submitted)
             this.submittedSignal.set(submitted);
+        // NOTE: `control` itself may still be unset on the first pass (this hook
+        // runs before the content child's setup), so optional-chain everything.
+        const ctrl = this.control()?.control ?? null;
+        if (ctrl) {
+            const interacted = ctrl.touched || ctrl.dirty;
+            if (this.interactedSignal() !== interacted)
+                this.interactedSignal.set(interacted);
+        }
     }
     ngOnDestroy() {
         this.sub.unsubscribe();
     }
     hasError = computed(() => {
-        const ctrlDir = this.control();
-        if (!ctrlDir)
+        const ctrl = this.control()?.control ?? null;
+        if (!ctrl)
             return false;
         this.statusSignal();
         this.submittedSignal();
-        return (!!ctrlDir.control.errors &&
-            (ctrlDir.control.touched || ctrlDir.control.dirty || !!this.formGroupDirective?.submitted));
+        this.interactedSignal();
+        return !!ctrl.errors && (this.interactedSignal() || this.submittedSignal());
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "hasError" }] : /* istanbul ignore next */ []));
     firstErrorKey = computed(() => {
-        const ctrlDir = this.control();
-        if (!ctrlDir || !ctrlDir.control.errors)
+        const ctrl = this.control()?.control ?? null;
+        if (!ctrl?.errors)
             return null;
         this.statusSignal();
-        return Object.keys(ctrlDir.control.errors)[0] ?? null;
+        return Object.keys(ctrl.errors)[0] ?? null;
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "firstErrorKey" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: EgFormField, deps: [], target: i0.ɵɵFactoryTarget.Component });

package/form-field-simple/types/form-field-simple.d.ts

@@ -16,6 +16,13 @@ declare class EgFormField implements AfterContentInit, DoCheck, OnDestroy {
      * even when the control was never touched/dirty.
      */
     private submittedSignal;
+    /**
+     * `touched`/`dirty` are plain flags with no observable: surfacing errors via
+     * `markAllAsTouched()` (e.g. a stepper blocking `Next` without changing the
+     * control status) would otherwise stay invisible under OnPush. Polled in
+     * `ngDoCheck` so `hasError` recomputes on interaction changes too.
+     */
+    private interactedSignal;
     private sub;
     ngAfterContentInit(): void;
     ngDoCheck(): void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@egose/shadcn-theme-ng",
-  "version": "0.5.1",
+  "version": "0.5.2",
   "description": "Angular shadcn UI theme",
   "author": "Junmin Ahn",
   "bundles": [