@egose/shadcn-theme-ng 0.5.0 → 0.5.2

package/form-checkbox/README.md

@@ -94,7 +94,7 @@ Selector (from source): `eg-form-checkbox` (standalone component).
 | `id`            | `string \| undefined` | —       | Fallback id (second priority).                                                                                                                                                                   |
 | `name`          | `string \| undefined` | —       | Checkbox `name` attribute (defaults to `controlName`).                                                                                                                                           |
 | `checked`       | `boolean`             | `false` | Initial checked state passed to `hlm-checkbox`.                                                                                                                                                  |
-| `required`      | `boolean`             | `false` | Shows a red `*` and sets checkbox `required`.                                                                                                                                                    |
+| `required`      | `boolean`             | `false` | Shows a red `*` and sets checkbox `required` (boolean-coerced, so bare `required` works). Presentation only — it does not validate by itself; add `Validators.requiredTrue` to the `FormControl` or the control is never invalid and no error is shown. |
 | `disabled`      | `boolean`             | `false` | Locks interaction via checkbox `wrapperDisabled` (does not write to the form control).                                                                                                           |
 | `class`         | `ClassValue`          | `''`    | Extra host classes.                                                                                                                                                                              |
 | `checkboxClass` | `string`              | `''`    | Extra classes for `hlm-checkbox`.                                                                                                                                                                |

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

@@ -1,5 +1,6 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, inject, signal, input, computed, ChangeDetectionStrategy, Component } from '@angular/core';
+import { InjectionToken, inject, DestroyRef, signal, input, computed, booleanAttribute, ChangeDetectionStrategy, Component } from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import * as i1 from '@angular/forms';
 import { FormGroupDirective, ReactiveFormsModule, ControlContainer } from '@angular/forms';
 import { HlmLabel } from '@egose/shadcn-theme-ng/label';
@@ -18,6 +19,7 @@ function injectEgFormCheckboxConfig() {
 
 class EgFormCheckbox {
     formGroupDirective = inject(FormGroupDirective);
+    _destroyRef = inject(DestroyRef);
     _errorMessages = injectEgFormErrorMessages();
     generatedId = inject(HlmFormIdGenerator).generate('eg-form-checkbox');
     _config = injectEgFormCheckboxConfig();
@@ -34,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
@@ -64,8 +74,13 @@ class EgFormCheckbox {
     ...(ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []));
     checked = input(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "checked" }] : /* istanbul ignore next */ []));
-    required = input(false, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "required" }] : /* istanbul ignore next */ []));
+    /**
+     * Shows the red `*` marker and sets the native `required` on the checkbox.
+     * Note: this does not add validation by itself — pair it with
+     * `Validators.requiredTrue` on the `FormControl`, otherwise the control is
+     * never invalid and no error is displayed.
+     */
+    required = input(false, { ...(ngDevMode ? { debugName: "required" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     disabled = input(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
     effectiveId = computed(() => this.controlId() || this.id() || this.generatedId, /* @ts-ignore */
@@ -100,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() {
@@ -111,6 +125,16 @@ class EgFormCheckbox {
     }
     ngAfterContentInit() {
         this._trackControl();
+        // `ngSubmit` emits synchronously during event dispatch, before change
+        // detection traverses. Flipping the signal here (instead of only polling
+        // `submitted` in `ngDoCheck`) marks this OnPush view dirty up-front, so
+        // the error renders in the same pass even when no `@Input()` changed and
+        // the control itself never became touched/dirty. `ngDoCheck` below stays
+        // as the fallback (e.g. `resetForm()` clears `submitted` silently).
+        this.formGroupDirective.ngSubmit.pipe(takeUntilDestroyed(this._destroyRef)).subscribe(() => {
+            if (!this._submitted())
+                this._submitted.set(true);
+        });
     }
     ngDoCheck() {
         const submitted = !!this.formGroupDirective?.submitted;
@@ -119,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() {
@@ -136,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

@@ -1,9 +1,11 @@
 import * as _angular_core from '@angular/core';
 import { DoCheck, AfterContentInit, OnDestroy, ValueProvider } from '@angular/core';
+import { BooleanInput } from '@angular/cdk/coercion';
 import { ClassValue } from 'clsx';
 
 declare class EgFormCheckbox implements DoCheck, AfterContentInit, OnDestroy {
     private readonly formGroupDirective;
+    private readonly _destroyRef;
     private readonly _errorMessages;
     private readonly generatedId;
     private readonly _config;
@@ -18,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>;
@@ -36,7 +45,13 @@ declare class EgFormCheckbox implements DoCheck, AfterContentInit, OnDestroy {
     id: _angular_core.InputSignal<string | undefined>;
     name: _angular_core.InputSignal<string | undefined>;
     checked: _angular_core.InputSignal<boolean>;
-    required: _angular_core.InputSignal<boolean>;
+    /**
+     * Shows the red `*` marker and sets the native `required` on the checkbox.
+     * Note: this does not add validation by itself — pair it with
+     * `Validators.requiredTrue` on the `FormControl`, otherwise the control is
+     * never invalid and no error is displayed.
+     */
+    required: _angular_core.InputSignalWithTransform<boolean, BooleanInput>;
     disabled: _angular_core.InputSignal<boolean>;
     readonly effectiveId: _angular_core.Signal<string>;
     readonly errorId: _angular_core.Signal<string>;

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.0",
+  "version": "0.5.2",
   "description": "Angular shadcn UI theme",
   "author": "Junmin Ahn",
   "bundles": [