@egose/shadcn-theme-ng-tw 0.5.0 → 0.5.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/form-checkbox/README.md
CHANGED
|
@@ -94,7 +94,7 @@ Selector (from source): `eg-form-checkbox` (standalone component).
|
|
|
94
94
|
| `id` | `string \| undefined` | — | Fallback id (second priority). |
|
|
95
95
|
| `name` | `string \| undefined` | — | Checkbox `name` attribute (defaults to `controlName`). |
|
|
96
96
|
| `checked` | `boolean` | `false` | Initial checked state passed to `hlm-checkbox`. |
|
|
97
|
-
| `required` | `boolean` | `false` | Shows a red `*` and sets checkbox `required
|
|
97
|
+
| `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. |
|
|
98
98
|
| `disabled` | `boolean` | `false` | Locks interaction via checkbox `wrapperDisabled` (does not write to the form control). |
|
|
99
99
|
| `class` | `ClassValue` | `''` | Extra host classes. |
|
|
100
100
|
| `checkboxClass` | `string` | `''` | Extra classes for `hlm-checkbox`. |
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { InjectionToken, inject, signal, input, computed, ChangeDetectionStrategy, Component } from '@angular/core';
|
|
2
|
+
import { InjectionToken, inject, DestroyRef, signal, input, computed, booleanAttribute, ChangeDetectionStrategy, Component } from '@angular/core';
|
|
3
|
+
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
|
|
3
4
|
import * as i1 from '@angular/forms';
|
|
4
5
|
import { FormGroupDirective, ReactiveFormsModule, ControlContainer } from '@angular/forms';
|
|
5
6
|
import { HlmLabel } from '@egose/shadcn-theme-ng-tw/label';
|
|
@@ -18,6 +19,7 @@ function injectEgFormCheckboxConfig() {
|
|
|
18
19
|
|
|
19
20
|
class EgFormCheckbox {
|
|
20
21
|
formGroupDirective = inject(FormGroupDirective);
|
|
22
|
+
_destroyRef = inject(DestroyRef);
|
|
21
23
|
_errorMessages = injectEgFormErrorMessages();
|
|
22
24
|
generatedId = inject(HlmFormIdGenerator).generate('eg-form-checkbox');
|
|
23
25
|
_config = injectEgFormCheckboxConfig();
|
|
@@ -64,8 +66,13 @@ class EgFormCheckbox {
|
|
|
64
66
|
...(ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []));
|
|
65
67
|
checked = input(false, /* @ts-ignore */
|
|
66
68
|
...(ngDevMode ? [{ debugName: "checked" }] : /* istanbul ignore next */ []));
|
|
67
|
-
|
|
68
|
-
|
|
69
|
+
/**
|
|
70
|
+
* Shows the red `*` marker and sets the native `required` on the checkbox.
|
|
71
|
+
* Note: this does not add validation by itself — pair it with
|
|
72
|
+
* `Validators.requiredTrue` on the `FormControl`, otherwise the control is
|
|
73
|
+
* never invalid and no error is displayed.
|
|
74
|
+
*/
|
|
75
|
+
required = input(false, { ...(ngDevMode ? { debugName: "required" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
69
76
|
disabled = input(false, /* @ts-ignore */
|
|
70
77
|
...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
|
|
71
78
|
effectiveId = computed(() => this.controlId() || this.id() || this.generatedId, /* @ts-ignore */
|
|
@@ -111,6 +118,16 @@ class EgFormCheckbox {
|
|
|
111
118
|
}
|
|
112
119
|
ngAfterContentInit() {
|
|
113
120
|
this._trackControl();
|
|
121
|
+
// `ngSubmit` emits synchronously during event dispatch, before change
|
|
122
|
+
// detection traverses. Flipping the signal here (instead of only polling
|
|
123
|
+
// `submitted` in `ngDoCheck`) marks this OnPush view dirty up-front, so
|
|
124
|
+
// the error renders in the same pass even when no `@Input()` changed and
|
|
125
|
+
// the control itself never became touched/dirty. `ngDoCheck` below stays
|
|
126
|
+
// as the fallback (e.g. `resetForm()` clears `submitted` silently).
|
|
127
|
+
this.formGroupDirective.ngSubmit.pipe(takeUntilDestroyed(this._destroyRef)).subscribe(() => {
|
|
128
|
+
if (!this._submitted())
|
|
129
|
+
this._submitted.set(true);
|
|
130
|
+
});
|
|
114
131
|
}
|
|
115
132
|
ngDoCheck() {
|
|
116
133
|
const submitted = !!this.formGroupDirective?.submitted;
|
|
@@ -1,9 +1,11 @@
|
|
|
1
1
|
import * as _angular_core from '@angular/core';
|
|
2
2
|
import { DoCheck, AfterContentInit, OnDestroy, ValueProvider } from '@angular/core';
|
|
3
|
+
import { BooleanInput } from '@angular/cdk/coercion';
|
|
3
4
|
import { ClassValue } from 'clsx';
|
|
4
5
|
|
|
5
6
|
declare class EgFormCheckbox implements DoCheck, AfterContentInit, OnDestroy {
|
|
6
7
|
private readonly formGroupDirective;
|
|
8
|
+
private readonly _destroyRef;
|
|
7
9
|
private readonly _errorMessages;
|
|
8
10
|
private readonly generatedId;
|
|
9
11
|
private readonly _config;
|
|
@@ -36,7 +38,13 @@ declare class EgFormCheckbox implements DoCheck, AfterContentInit, OnDestroy {
|
|
|
36
38
|
id: _angular_core.InputSignal<string | undefined>;
|
|
37
39
|
name: _angular_core.InputSignal<string | undefined>;
|
|
38
40
|
checked: _angular_core.InputSignal<boolean>;
|
|
39
|
-
|
|
41
|
+
/**
|
|
42
|
+
* Shows the red `*` marker and sets the native `required` on the checkbox.
|
|
43
|
+
* Note: this does not add validation by itself — pair it with
|
|
44
|
+
* `Validators.requiredTrue` on the `FormControl`, otherwise the control is
|
|
45
|
+
* never invalid and no error is displayed.
|
|
46
|
+
*/
|
|
47
|
+
required: _angular_core.InputSignalWithTransform<boolean, BooleanInput>;
|
|
40
48
|
disabled: _angular_core.InputSignal<boolean>;
|
|
41
49
|
readonly effectiveId: _angular_core.Signal<string>;
|
|
42
50
|
readonly errorId: _angular_core.Signal<string>;
|