@egose/shadcn-theme-ng 0.3.0 → 0.4.0
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-autocomplete/README.md +20 -19
- package/form-autocomplete/fesm2022/form-autocomplete.mjs +38 -4
- package/form-autocomplete/types/form-autocomplete.d.ts +21 -1
- package/form-checkbox/README.md +18 -17
- package/form-checkbox/fesm2022/form-checkbox.mjs +39 -10
- package/form-checkbox/types/form-checkbox.d.ts +21 -1
- package/form-combobox/README.md +21 -20
- package/form-combobox/fesm2022/form-combobox.mjs +38 -4
- package/form-combobox/types/form-combobox.d.ts +21 -1
- package/form-date-picker/README.md +28 -27
- package/form-date-picker/fesm2022/form-date-picker.mjs +39 -10
- package/form-date-picker/types/form-date-picker.d.ts +21 -1
- package/form-date-picker-multi/README.md +28 -27
- package/form-date-picker-multi/fesm2022/form-date-picker-multi.mjs +39 -10
- package/form-date-picker-multi/types/form-date-picker-multi.d.ts +21 -1
- package/form-date-range-picker/README.md +28 -27
- package/form-date-range-picker/fesm2022/form-date-range-picker.mjs +39 -10
- package/form-date-range-picker/types/form-date-range-picker.d.ts +21 -1
- package/form-field/README.md +9 -0
- package/form-field/fesm2022/form-field.mjs +80 -5
- package/form-field/types/form-field.d.ts +50 -2
- package/form-field-simple/fesm2022/form-field-simple.mjs +15 -1
- package/form-field-simple/types/form-field-simple.d.ts +9 -2
- package/form-input-otp/README.md +17 -16
- package/form-input-otp/fesm2022/form-input-otp.mjs +38 -4
- package/form-input-otp/types/form-input-otp.d.ts +21 -1
- package/form-month-year-picker/README.md +26 -25
- package/form-month-year-picker/fesm2022/form-month-year-picker.mjs +39 -10
- package/form-month-year-picker/types/form-month-year-picker.d.ts +21 -1
- package/form-native-select/README.md +18 -17
- package/form-native-select/fesm2022/form-native-select.mjs +39 -10
- package/form-native-select/types/form-native-select.d.ts +21 -1
- package/form-phone-input/README.md +23 -22
- package/form-phone-input/fesm2022/form-phone-input.mjs +39 -10
- package/form-phone-input/types/form-phone-input.d.ts +21 -1
- package/form-radio-group/README.md +18 -17
- package/form-radio-group/fesm2022/form-radio-group.mjs +39 -10
- package/form-radio-group/types/form-radio-group.d.ts +21 -1
- package/form-searchable-multiselect/README.md +18 -17
- package/form-searchable-multiselect/fesm2022/form-searchable-multiselect.mjs +39 -10
- package/form-searchable-multiselect/types/form-searchable-multiselect.d.ts +21 -1
- package/form-select/README.md +20 -19
- package/form-select/fesm2022/form-select.mjs +39 -10
- package/form-select/types/form-select.d.ts +21 -1
- package/form-slider/README.md +19 -18
- package/form-slider/fesm2022/form-slider.mjs +38 -4
- package/form-slider/types/form-slider.d.ts +21 -1
- package/form-switch/README.md +16 -15
- package/form-switch/fesm2022/form-switch.mjs +39 -10
- package/form-switch/types/form-switch.d.ts +21 -1
- package/form-text-input/README.md +27 -26
- package/form-text-input/fesm2022/form-text-input.mjs +39 -10
- package/form-text-input/types/form-text-input.d.ts +21 -1
- package/form-textarea/README.md +23 -22
- package/form-textarea/fesm2022/form-textarea.mjs +39 -10
- package/form-textarea/types/form-textarea.d.ts +21 -1
- package/form-toggle/README.md +17 -16
- package/form-toggle/fesm2022/form-toggle.mjs +40 -6
- package/form-toggle/types/form-toggle.d.ts +21 -3
- package/form-toggle-group/README.md +20 -19
- package/form-toggle-group/fesm2022/form-toggle-group.mjs +39 -10
- package/form-toggle-group/types/form-toggle-group.d.ts +21 -1
- package/package.json +1 -1
|
@@ -53,25 +53,26 @@ Selector (from source): `eg-form-autocomplete` (standalone component, host `tw:w
|
|
|
53
53
|
|
|
54
54
|
### `EgFormAutocomplete` — `eg-form-autocomplete`
|
|
55
55
|
|
|
56
|
-
| Input | Type | Default | Description
|
|
57
|
-
| -------------- | --------------------- | ------------------- |
|
|
58
|
-
| `controlName` | `string` | `''` | `formControlName` key inside the parent `FormGroup`. **Required.**
|
|
59
|
-
| `label` | `string \| undefined` | — | Label text (hidden when omitted).
|
|
60
|
-
| `error` | `string \| undefined` | — | Error text shown when invalid.
|
|
61
|
-
| `
|
|
62
|
-
| `
|
|
63
|
-
| `
|
|
64
|
-
| `
|
|
65
|
-
| `
|
|
66
|
-
| `
|
|
67
|
-
| `
|
|
68
|
-
| `
|
|
69
|
-
| `
|
|
70
|
-
| `
|
|
71
|
-
| `
|
|
72
|
-
| `
|
|
73
|
-
| `
|
|
74
|
-
| `
|
|
56
|
+
| Input | Type | Default | Description |
|
|
57
|
+
| -------------- | --------------------- | ------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
|
|
58
|
+
| `controlName` | `string` | `''` | `formControlName` key inside the parent `FormGroup`. **Required.** |
|
|
59
|
+
| `label` | `string \| undefined` | — | Label text (hidden when omitted). |
|
|
60
|
+
| `error` | `string \| undefined` | — | Error text shown when invalid. |
|
|
61
|
+
| `autoError` | `boolean` | `true` | Auto-resolve the message from the control's `ValidationErrors` when `error` is unset. Explicit `error` always wins; `error=""` counts as unset. Global wording via `provideEgFormErrorMessages`. |
|
|
62
|
+
| `hint` | `string \| undefined` | — | Hint text shown otherwise. |
|
|
63
|
+
| `controlId` | `string \| undefined` | — | Explicit id (first priority for `effectiveId`). |
|
|
64
|
+
| `id` | `string \| undefined` | — | Fallback id (second priority). |
|
|
65
|
+
| `placeholder` | `string` | `'Type to search…'` | Input placeholder. |
|
|
66
|
+
| `emptyText` | `string` | `'No result.'` | Text shown when no option matches. |
|
|
67
|
+
| `disabled` | `boolean` | `false` | Locks interaction (form control stays enabled). |
|
|
68
|
+
| `required` | `boolean` | `false` | Shows a red `*` next to the label. |
|
|
69
|
+
| `options` | `string[]` | `[]` | Rendered as `hlm-autocomplete-item` entries. |
|
|
70
|
+
| `class` | `ClassValue` | `''` | Extra host classes (base `tw:w-full`). |
|
|
71
|
+
| `labelClass` | `string` | `''` | Extra label classes (base `tw:mb-1`). |
|
|
72
|
+
| `controlClass` | `string` | `''` | Extra autocomplete-root classes. |
|
|
73
|
+
| `inputClass` | `string` | `''` | Extra text-input classes. |
|
|
74
|
+
| `errorClass` | `string` | `''` | Extra error classes (base `tw:mt-0`). |
|
|
75
|
+
| `hintClass` | `string` | `''` | Extra hint classes (base `tw:mt-0`). |
|
|
75
76
|
|
|
76
77
|
| Member | Description |
|
|
77
78
|
| -------------------- | ---------------------------------------------------------------------------------- |
|
|
@@ -2,7 +2,7 @@ import * as i0 from '@angular/core';
|
|
|
2
2
|
import { InjectionToken, inject, input, computed, Component } from '@angular/core';
|
|
3
3
|
import * as i1 from '@angular/forms';
|
|
4
4
|
import { FormGroupDirective, ReactiveFormsModule, ControlContainer } from '@angular/forms';
|
|
5
|
-
import { HlmFormIdGenerator, HlmFormField, HlmError, HlmHint } from '@egose/shadcn-theme-ng/form-field';
|
|
5
|
+
import { injectEgFormErrorMessages, HlmFormIdGenerator, resolveEgFormError, HlmFormField, HlmError, HlmHint } from '@egose/shadcn-theme-ng/form-field';
|
|
6
6
|
import { HlmLabel } from '@egose/shadcn-theme-ng/label';
|
|
7
7
|
import { HlmAutocomplete, HlmAutocompleteContent, HlmAutocompleteEmpty, HlmAutocompleteGroup, HlmAutocompleteInput, HlmAutocompleteItem, HlmAutocompleteList, HlmAutocompleteLabel } from '@egose/shadcn-theme-ng/autocomplete';
|
|
8
8
|
import { hlm } from '@egose/shadcn-theme-ng/utils';
|
|
@@ -17,6 +17,7 @@ function injectEgFormAutocompleteConfig() {
|
|
|
17
17
|
|
|
18
18
|
class EgFormAutocomplete {
|
|
19
19
|
formGroupDirective = inject(FormGroupDirective);
|
|
20
|
+
_errorMessages = injectEgFormErrorMessages();
|
|
20
21
|
generatedId = inject(HlmFormIdGenerator).generate('eg-form-autocomplete');
|
|
21
22
|
_config = injectEgFormAutocompleteConfig();
|
|
22
23
|
label = input(undefined, /* @ts-ignore */
|
|
@@ -27,6 +28,13 @@ class EgFormAutocomplete {
|
|
|
27
28
|
...(ngDevMode ? [{ debugName: "controlName" }] : /* istanbul ignore next */ []));
|
|
28
29
|
error = input(undefined, /* @ts-ignore */
|
|
29
30
|
...(ngDevMode ? [{ debugName: "error" }] : /* istanbul ignore next */ []));
|
|
31
|
+
/**
|
|
32
|
+
* Auto-resolve the displayed message from the control's `ValidationErrors`
|
|
33
|
+
* when `error()` is unset. Explicit `error()` always wins. Set to `false`
|
|
34
|
+
* for manual-only messages.
|
|
35
|
+
*/
|
|
36
|
+
autoError = input(true, /* @ts-ignore */
|
|
37
|
+
...(ngDevMode ? [{ debugName: "autoError" }] : /* istanbul ignore next */ []));
|
|
30
38
|
hint = input(undefined, /* @ts-ignore */
|
|
31
39
|
...(ngDevMode ? [{ debugName: "hint" }] : /* istanbul ignore next */ []));
|
|
32
40
|
id = input(undefined, /* @ts-ignore */
|
|
@@ -47,6 +55,32 @@ class EgFormAutocomplete {
|
|
|
47
55
|
...(ngDevMode ? [{ debugName: "errorId" }] : /* istanbul ignore next */ []));
|
|
48
56
|
hintId = computed(() => `${this.effectiveId()}-hint`, /* @ts-ignore */
|
|
49
57
|
...(ngDevMode ? [{ debugName: "hintId" }] : /* istanbul ignore next */ []));
|
|
58
|
+
/**
|
|
59
|
+
* Displayed message: explicit `error()` wins; otherwise (when `autoError()`)
|
|
60
|
+
* auto-resolved from the control's `ValidationErrors`. Plain method (not a
|
|
61
|
+
* computed): `ValidationErrors` is not a signal, so the control must be read
|
|
62
|
+
* fresh on every change-detection pass.
|
|
63
|
+
*/
|
|
64
|
+
resolvedError() {
|
|
65
|
+
const explicit = this.error();
|
|
66
|
+
if (explicit)
|
|
67
|
+
return explicit;
|
|
68
|
+
if (!this.autoError())
|
|
69
|
+
return undefined;
|
|
70
|
+
const control = this.formGroupDirective.form.get(this.controlName());
|
|
71
|
+
return resolveEgFormError(control?.errors ?? null, this.label(), this._errorMessages);
|
|
72
|
+
}
|
|
73
|
+
/**
|
|
74
|
+
* Whether the error is surfaced: message present + control invalid +
|
|
75
|
+
* touched/dirty/submitted. Gates the visual `<hlm-error>` (and
|
|
76
|
+
* `describedBy()`, where present) so sighted and screen-reader output agree.
|
|
77
|
+
*/
|
|
78
|
+
showError() {
|
|
79
|
+
const control = this.formGroupDirective.form.get(this.controlName());
|
|
80
|
+
return (!!this.resolvedError() &&
|
|
81
|
+
!!control?.invalid &&
|
|
82
|
+
(control.dirty || control.touched || this.formGroupDirective.submitted));
|
|
83
|
+
}
|
|
50
84
|
/**
|
|
51
85
|
* Combined lock for the brain `linkedSignal`-based disabled state: the raw
|
|
52
86
|
* input write always carries the resolved value, so a same-pass
|
|
@@ -83,7 +117,7 @@ class EgFormAutocomplete {
|
|
|
83
117
|
$hintClass = computed(() => hlm("mt-0", this._config.hintClass, this.hintClass()), /* @ts-ignore */
|
|
84
118
|
...(ngDevMode ? [{ debugName: "$hintClass" }] : /* istanbul ignore next */ []));
|
|
85
119
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: EgFormAutocomplete, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
86
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.3", type: EgFormAutocomplete, isStandalone: true, selector: "eg-form-autocomplete", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, controlId: { classPropertyName: "controlId", publicName: "controlId", isSignal: true, isRequired: false, transformFunction: null }, controlName: { classPropertyName: "controlName", publicName: "controlName", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, emptyText: { classPropertyName: "emptyText", publicName: "emptyText", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, labelClass: { classPropertyName: "labelClass", publicName: "labelClass", isSignal: true, isRequired: false, transformFunction: null }, controlClass: { classPropertyName: "controlClass", publicName: "controlClass", isSignal: true, isRequired: false, transformFunction: null }, inputClass: { classPropertyName: "inputClass", publicName: "inputClass", isSignal: true, isRequired: false, transformFunction: null }, errorClass: { classPropertyName: "errorClass", publicName: "errorClass", isSignal: true, isRequired: false, transformFunction: null }, hintClass: { classPropertyName: "hintClass", publicName: "hintClass", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "$userClass()" } }, providers: [{ provide: ControlContainer, useExisting: FormGroupDirective }], ngImport: i0, template: "\n @let lbl = label();\n @let cnm = controlName();\n @let
|
|
120
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.3", type: EgFormAutocomplete, isStandalone: true, selector: "eg-form-autocomplete", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, controlId: { classPropertyName: "controlId", publicName: "controlId", isSignal: true, isRequired: false, transformFunction: null }, controlName: { classPropertyName: "controlName", publicName: "controlName", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, autoError: { classPropertyName: "autoError", publicName: "autoError", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, emptyText: { classPropertyName: "emptyText", publicName: "emptyText", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, labelClass: { classPropertyName: "labelClass", publicName: "labelClass", isSignal: true, isRequired: false, transformFunction: null }, controlClass: { classPropertyName: "controlClass", publicName: "controlClass", isSignal: true, isRequired: false, transformFunction: null }, inputClass: { classPropertyName: "inputClass", publicName: "inputClass", isSignal: true, isRequired: false, transformFunction: null }, errorClass: { classPropertyName: "errorClass", publicName: "errorClass", isSignal: true, isRequired: false, transformFunction: null }, hintClass: { classPropertyName: "hintClass", publicName: "hintClass", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "$userClass()" } }, providers: [{ provide: ControlContainer, useExisting: FormGroupDirective }], ngImport: i0, template: "\n @let lbl = label();\n @let cnm = controlName();\n @let hnt = hint();\n @let rqrd = required();\n\n <hlm-form-field>\n @if (lbl) {\n <label hlmLabel [for]=\"effectiveId()\" [class]=\"$labelClass()\"\n >{{ lbl }}\n @if (rqrd) {\n <span class=\"text-red-500\">*</span>\n }\n </label>\n }\n\n <div hlmAutocomplete [formControlName]=\"cnm\" [disabled]=\"effectiveDisabled()\" [class]=\"$controlClass()\">\n <hlm-autocomplete-input [inputId]=\"effectiveId()\" [placeholder]=\"placeholder()\" [class]=\"$inputClass()\" />\n <hlm-autocomplete-content>\n <div hlmAutocompleteList>\n <div hlmAutocompleteGroup>\n @for (option of options(); track option) {\n <hlm-autocomplete-item [value]=\"option\">{{ option }}</hlm-autocomplete-item>\n }\n </div>\n </div>\n <div hlmAutocompleteEmpty>{{ emptyText() }}</div>\n </hlm-autocomplete-content>\n </div>\n\n @if (showError()) {\n <hlm-error [id]=\"errorId()\" [class]=\"$errorClass()\">\n {{ resolvedError() }}\n </hlm-error>\n }\n\n @if (hnt) {\n <hlm-hint [id]=\"hintId()\" [class]=\"$hintClass()\">\n {{ hnt }}\n </hlm-hint>\n }\n </hlm-form-field>\n ", isInline: true, dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: HlmFormField, selector: "hlm-form-field", inputs: ["class"] }, { kind: "directive", type: HlmError, selector: "hlm-error", inputs: ["class"] }, { kind: "directive", type: HlmHint, selector: "hlm-hint", inputs: ["class"] }, { kind: "directive", type: HlmLabel, selector: "[hlmLabel]", inputs: ["class"] }, { kind: "directive", type: HlmAutocomplete, selector: "[hlmAutocomplete],hlm-autocomplete" }, { kind: "directive", type: HlmAutocompleteContent, selector: "[hlmAutocompleteContent],hlm-autocomplete-content" }, { kind: "directive", type: HlmAutocompleteEmpty, selector: "[hlmAutocompleteEmpty],hlm-autocomplete-empty" }, { kind: "directive", type: HlmAutocompleteGroup, selector: "[hlmAutocompleteGroup]" }, { kind: "component", type: HlmAutocompleteInput, selector: "hlm-autocomplete-input", inputs: ["inputId", "placeholder", "showSearch", "showClear", "forceInvalid", "aria-invalid"] }, { kind: "component", type: HlmAutocompleteItem, selector: "hlm-autocomplete-item" }, { kind: "directive", type: HlmAutocompleteList, selector: "[hlmAutocompleteList]" }] });
|
|
87
121
|
}
|
|
88
122
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: EgFormAutocomplete, decorators: [{
|
|
89
123
|
type: Component,
|
|
@@ -109,9 +143,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImpor
|
|
|
109
143
|
HlmAutocompleteList,
|
|
110
144
|
],
|
|
111
145
|
providers: [{ provide: ControlContainer, useExisting: FormGroupDirective }],
|
|
112
|
-
template: "\n @let lbl = label();\n @let cnm = controlName();\n @let
|
|
146
|
+
template: "\n @let lbl = label();\n @let cnm = controlName();\n @let hnt = hint();\n @let rqrd = required();\n\n <hlm-form-field>\n @if (lbl) {\n <label hlmLabel [for]=\"effectiveId()\" [class]=\"$labelClass()\"\n >{{ lbl }}\n @if (rqrd) {\n <span class=\"text-red-500\">*</span>\n }\n </label>\n }\n\n <div hlmAutocomplete [formControlName]=\"cnm\" [disabled]=\"effectiveDisabled()\" [class]=\"$controlClass()\">\n <hlm-autocomplete-input [inputId]=\"effectiveId()\" [placeholder]=\"placeholder()\" [class]=\"$inputClass()\" />\n <hlm-autocomplete-content>\n <div hlmAutocompleteList>\n <div hlmAutocompleteGroup>\n @for (option of options(); track option) {\n <hlm-autocomplete-item [value]=\"option\">{{ option }}</hlm-autocomplete-item>\n }\n </div>\n </div>\n <div hlmAutocompleteEmpty>{{ emptyText() }}</div>\n </hlm-autocomplete-content>\n </div>\n\n @if (showError()) {\n <hlm-error [id]=\"errorId()\" [class]=\"$errorClass()\">\n {{ resolvedError() }}\n </hlm-error>\n }\n\n @if (hnt) {\n <hlm-hint [id]=\"hintId()\" [class]=\"$hintClass()\">\n {{ hnt }}\n </hlm-hint>\n }\n </hlm-form-field>\n ",
|
|
113
147
|
}]
|
|
114
|
-
}], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], controlId: [{ type: i0.Input, args: [{ isSignal: true, alias: "controlId", required: false }] }], controlName: [{ type: i0.Input, args: [{ isSignal: true, alias: "controlName", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], emptyText: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyText", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], labelClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelClass", required: false }] }], controlClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "controlClass", required: false }] }], inputClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputClass", required: false }] }], errorClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorClass", required: false }] }], hintClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "hintClass", required: false }] }] } });
|
|
148
|
+
}], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], controlId: [{ type: i0.Input, args: [{ isSignal: true, alias: "controlId", required: false }] }], controlName: [{ type: i0.Input, args: [{ isSignal: true, alias: "controlName", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], autoError: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoError", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], emptyText: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyText", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], labelClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelClass", required: false }] }], controlClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "controlClass", required: false }] }], inputClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputClass", required: false }] }], errorClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorClass", required: false }] }], hintClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "hintClass", required: false }] }] } });
|
|
115
149
|
|
|
116
150
|
/*
|
|
117
151
|
* Public API Surface of form-autocomplete
|
|
@@ -4,12 +4,19 @@ import { ClassValue } from 'clsx';
|
|
|
4
4
|
|
|
5
5
|
declare class EgFormAutocomplete {
|
|
6
6
|
private readonly formGroupDirective;
|
|
7
|
+
private readonly _errorMessages;
|
|
7
8
|
private readonly generatedId;
|
|
8
9
|
private readonly _config;
|
|
9
10
|
label: _angular_core.InputSignal<string | undefined>;
|
|
10
11
|
controlId: _angular_core.InputSignal<string | undefined>;
|
|
11
12
|
controlName: _angular_core.InputSignal<string>;
|
|
12
13
|
error: _angular_core.InputSignal<string | undefined>;
|
|
14
|
+
/**
|
|
15
|
+
* Auto-resolve the displayed message from the control's `ValidationErrors`
|
|
16
|
+
* when `error()` is unset. Explicit `error()` always wins. Set to `false`
|
|
17
|
+
* for manual-only messages.
|
|
18
|
+
*/
|
|
19
|
+
autoError: _angular_core.InputSignal<boolean>;
|
|
13
20
|
hint: _angular_core.InputSignal<string | undefined>;
|
|
14
21
|
id: _angular_core.InputSignal<string | undefined>;
|
|
15
22
|
placeholder: _angular_core.InputSignal<string>;
|
|
@@ -20,6 +27,19 @@ declare class EgFormAutocomplete {
|
|
|
20
27
|
readonly effectiveId: _angular_core.Signal<string>;
|
|
21
28
|
readonly errorId: _angular_core.Signal<string>;
|
|
22
29
|
readonly hintId: _angular_core.Signal<string>;
|
|
30
|
+
/**
|
|
31
|
+
* Displayed message: explicit `error()` wins; otherwise (when `autoError()`)
|
|
32
|
+
* auto-resolved from the control's `ValidationErrors`. Plain method (not a
|
|
33
|
+
* computed): `ValidationErrors` is not a signal, so the control must be read
|
|
34
|
+
* fresh on every change-detection pass.
|
|
35
|
+
*/
|
|
36
|
+
protected resolvedError(): string | undefined;
|
|
37
|
+
/**
|
|
38
|
+
* Whether the error is surfaced: message present + control invalid +
|
|
39
|
+
* touched/dirty/submitted. Gates the visual `<hlm-error>` (and
|
|
40
|
+
* `describedBy()`, where present) so sighted and screen-reader output agree.
|
|
41
|
+
*/
|
|
42
|
+
protected showError(): boolean;
|
|
23
43
|
/**
|
|
24
44
|
* Combined lock for the brain `linkedSignal`-based disabled state: the raw
|
|
25
45
|
* input write always carries the resolved value, so a same-pass
|
|
@@ -39,7 +59,7 @@ declare class EgFormAutocomplete {
|
|
|
39
59
|
$errorClass: _angular_core.Signal<string>;
|
|
40
60
|
$hintClass: _angular_core.Signal<string>;
|
|
41
61
|
static ɵfac: _angular_core.ɵɵFactoryDeclaration<EgFormAutocomplete, never>;
|
|
42
|
-
static ɵcmp: _angular_core.ɵɵComponentDeclaration<EgFormAutocomplete, "eg-form-autocomplete", never, { "label": { "alias": "label"; "required": false; "isSignal": true; }; "controlId": { "alias": "controlId"; "required": false; "isSignal": true; }; "controlName": { "alias": "controlName"; "required": false; "isSignal": true; }; "error": { "alias": "error"; "required": false; "isSignal": true; }; "hint": { "alias": "hint"; "required": false; "isSignal": true; }; "id": { "alias": "id"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "emptyText": { "alias": "emptyText"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "options": { "alias": "options"; "required": false; "isSignal": true; }; "userClass": { "alias": "class"; "required": false; "isSignal": true; }; "labelClass": { "alias": "labelClass"; "required": false; "isSignal": true; }; "controlClass": { "alias": "controlClass"; "required": false; "isSignal": true; }; "inputClass": { "alias": "inputClass"; "required": false; "isSignal": true; }; "errorClass": { "alias": "errorClass"; "required": false; "isSignal": true; }; "hintClass": { "alias": "hintClass"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
|
|
62
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<EgFormAutocomplete, "eg-form-autocomplete", never, { "label": { "alias": "label"; "required": false; "isSignal": true; }; "controlId": { "alias": "controlId"; "required": false; "isSignal": true; }; "controlName": { "alias": "controlName"; "required": false; "isSignal": true; }; "error": { "alias": "error"; "required": false; "isSignal": true; }; "autoError": { "alias": "autoError"; "required": false; "isSignal": true; }; "hint": { "alias": "hint"; "required": false; "isSignal": true; }; "id": { "alias": "id"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "emptyText": { "alias": "emptyText"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "options": { "alias": "options"; "required": false; "isSignal": true; }; "userClass": { "alias": "class"; "required": false; "isSignal": true; }; "labelClass": { "alias": "labelClass"; "required": false; "isSignal": true; }; "controlClass": { "alias": "controlClass"; "required": false; "isSignal": true; }; "inputClass": { "alias": "inputClass"; "required": false; "isSignal": true; }; "errorClass": { "alias": "errorClass"; "required": false; "isSignal": true; }; "hintClass": { "alias": "hintClass"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
|
|
43
63
|
}
|
|
44
64
|
|
|
45
65
|
interface EgFormAutocompleteConfig {
|
package/form-checkbox/README.md
CHANGED
|
@@ -83,23 +83,24 @@ Selector (from source): `eg-form-checkbox` (standalone component).
|
|
|
83
83
|
|
|
84
84
|
### `EgFormCheckbox` — `eg-form-checkbox`
|
|
85
85
|
|
|
86
|
-
| Input | Type | Default | Description
|
|
87
|
-
| --------------- | --------------------- | ------- |
|
|
88
|
-
| `controlName` | `string` | `''` | `formControlName` key inside the parent `FormGroup`. **Required.**
|
|
89
|
-
| `label` | `string` | `''` | Label text next to the checkbox.
|
|
90
|
-
| `error` | `string \| undefined` | — | Error text shown when the control is invalid + touched/dirty (via `EgFormField` switching).
|
|
91
|
-
| `
|
|
92
|
-
| `
|
|
93
|
-
| `
|
|
94
|
-
| `
|
|
95
|
-
| `
|
|
96
|
-
| `
|
|
97
|
-
| `
|
|
98
|
-
| `
|
|
99
|
-
| `
|
|
100
|
-
| `
|
|
101
|
-
| `
|
|
102
|
-
| `
|
|
86
|
+
| Input | Type | Default | Description |
|
|
87
|
+
| --------------- | --------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
|
|
88
|
+
| `controlName` | `string` | `''` | `formControlName` key inside the parent `FormGroup`. **Required.** |
|
|
89
|
+
| `label` | `string` | `''` | Label text next to the checkbox. |
|
|
90
|
+
| `error` | `string \| undefined` | — | Error text shown when the control is invalid + touched/dirty (via `EgFormField` switching). |
|
|
91
|
+
| `autoError` | `boolean` | `true` | Auto-resolve the message from the control's `ValidationErrors` when `error` is unset. Explicit `error` always wins; `error=""` counts as unset. Global wording via `provideEgFormErrorMessages`. |
|
|
92
|
+
| `hint` | `string \| undefined` | — | Hint text shown when there is no error to display. |
|
|
93
|
+
| `controlId` | `string \| undefined` | — | Explicit control id (first priority for `effectiveId`). |
|
|
94
|
+
| `id` | `string \| undefined` | — | Fallback id (second priority). |
|
|
95
|
+
| `name` | `string \| undefined` | — | Checkbox `name` attribute (defaults to `controlName`). |
|
|
96
|
+
| `checked` | `boolean` | `false` | Initial checked state passed to `hlm-checkbox`. |
|
|
97
|
+
| `required` | `boolean` | `false` | Shows a red `*` and sets checkbox `required`. |
|
|
98
|
+
| `disabled` | `boolean` | `false` | Locks interaction via checkbox `wrapperDisabled` (does not write to the form control). |
|
|
99
|
+
| `class` | `ClassValue` | `''` | Extra host classes. |
|
|
100
|
+
| `checkboxClass` | `string` | `''` | Extra classes for `hlm-checkbox`. |
|
|
101
|
+
| `labelClass` | `string` | `''` | Extra classes for the label. |
|
|
102
|
+
| `errorClass` | `string` | `''` | Extra classes for `hlm-error`. |
|
|
103
|
+
| `hintClass` | `string` | `''` | Extra classes for `hlm-hint`. |
|
|
103
104
|
|
|
104
105
|
| Member | Description |
|
|
105
106
|
| -------------------- | ------------------------------------------------------------------------------------------------------------------------------------ |
|
|
@@ -4,7 +4,7 @@ import * as i1 from '@angular/forms';
|
|
|
4
4
|
import { FormGroupDirective, ReactiveFormsModule, ControlContainer } from '@angular/forms';
|
|
5
5
|
import { HlmLabel } from '@egose/shadcn-theme-ng/label';
|
|
6
6
|
import { HlmCheckbox } from '@egose/shadcn-theme-ng/checkbox';
|
|
7
|
-
import { HlmFormIdGenerator, HlmError, HlmHint } from '@egose/shadcn-theme-ng/form-field';
|
|
7
|
+
import { injectEgFormErrorMessages, HlmFormIdGenerator, resolveEgFormError, HlmError, HlmHint } from '@egose/shadcn-theme-ng/form-field';
|
|
8
8
|
import { EgFormField } from '@egose/shadcn-theme-ng/form-field-simple';
|
|
9
9
|
import { hlm } from '@egose/shadcn-theme-ng/utils';
|
|
10
10
|
|
|
@@ -18,6 +18,7 @@ function injectEgFormCheckboxConfig() {
|
|
|
18
18
|
|
|
19
19
|
class EgFormCheckbox {
|
|
20
20
|
formGroupDirective = inject(FormGroupDirective);
|
|
21
|
+
_errorMessages = injectEgFormErrorMessages();
|
|
21
22
|
generatedId = inject(HlmFormIdGenerator).generate('eg-form-checkbox');
|
|
22
23
|
_config = injectEgFormCheckboxConfig();
|
|
23
24
|
// Classes
|
|
@@ -33,6 +34,13 @@ class EgFormCheckbox {
|
|
|
33
34
|
...(ngDevMode ? [{ debugName: "controlName" }] : /* istanbul ignore next */ []));
|
|
34
35
|
error = input(undefined, /* @ts-ignore */
|
|
35
36
|
...(ngDevMode ? [{ debugName: "error" }] : /* istanbul ignore next */ []));
|
|
37
|
+
/**
|
|
38
|
+
* Auto-resolve the displayed message from the control's `ValidationErrors`
|
|
39
|
+
* when `error()` is unset. Explicit `error()` always wins. Set to `false`
|
|
40
|
+
* for manual-only messages.
|
|
41
|
+
*/
|
|
42
|
+
autoError = input(true, /* @ts-ignore */
|
|
43
|
+
...(ngDevMode ? [{ debugName: "autoError" }] : /* istanbul ignore next */ []));
|
|
36
44
|
hint = input(undefined, /* @ts-ignore */
|
|
37
45
|
...(ngDevMode ? [{ debugName: "hint" }] : /* istanbul ignore next */ []));
|
|
38
46
|
id = input(undefined, /* @ts-ignore */
|
|
@@ -51,13 +59,34 @@ class EgFormCheckbox {
|
|
|
51
59
|
...(ngDevMode ? [{ debugName: "errorId" }] : /* istanbul ignore next */ []));
|
|
52
60
|
hintId = computed(() => `${this.effectiveId()}-hint`, /* @ts-ignore */
|
|
53
61
|
...(ngDevMode ? [{ debugName: "hintId" }] : /* istanbul ignore next */ []));
|
|
54
|
-
|
|
62
|
+
/**
|
|
63
|
+
* Displayed message: explicit `error()` wins; otherwise (when `autoError()`)
|
|
64
|
+
* auto-resolved from the control's `ValidationErrors`. Plain method (not a
|
|
65
|
+
* computed): `ValidationErrors` is not a signal, so the control must be read
|
|
66
|
+
* fresh on every change-detection pass.
|
|
67
|
+
*/
|
|
68
|
+
resolvedError() {
|
|
69
|
+
const explicit = this.error();
|
|
70
|
+
if (explicit)
|
|
71
|
+
return explicit;
|
|
72
|
+
if (!this.autoError())
|
|
73
|
+
return undefined;
|
|
74
|
+
const control = this.formGroupDirective.form.get(this.controlName());
|
|
75
|
+
return resolveEgFormError(control?.errors ?? null, this.label(), this._errorMessages);
|
|
76
|
+
}
|
|
77
|
+
/**
|
|
78
|
+
* Whether the error is surfaced: message present + control invalid +
|
|
79
|
+
* touched/dirty/submitted. Gates the visual `<hlm-error>` (and
|
|
80
|
+
* `describedBy()`, where present) so sighted and screen-reader output agree.
|
|
81
|
+
*/
|
|
82
|
+
showError() {
|
|
55
83
|
const control = this.formGroupDirective.form.get(this.controlName());
|
|
56
|
-
return this.
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
84
|
+
return (!!this.resolvedError() &&
|
|
85
|
+
!!control?.invalid &&
|
|
86
|
+
(control.dirty || control.touched || this.formGroupDirective.submitted));
|
|
87
|
+
}
|
|
88
|
+
describedBy() {
|
|
89
|
+
return this.showError() ? this.errorId() : this.hint() ? this.hintId() : null;
|
|
61
90
|
}
|
|
62
91
|
// Styling
|
|
63
92
|
checkboxClass = input('', /* @ts-ignore */
|
|
@@ -78,7 +107,7 @@ class EgFormCheckbox {
|
|
|
78
107
|
$hintClass = computed(() => hlm(this._config.hintClass, this.hintClass()), /* @ts-ignore */
|
|
79
108
|
...(ngDevMode ? [{ debugName: "$hintClass" }] : /* istanbul ignore next */ []));
|
|
80
109
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: EgFormCheckbox, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
81
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.3", type: EgFormCheckbox, isStandalone: true, selector: "eg-form-checkbox", inputs: { userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, controlId: { classPropertyName: "controlId", publicName: "controlId", isSignal: true, isRequired: false, transformFunction: null }, controlName: { classPropertyName: "controlName", publicName: "controlName", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, checkboxClass: { classPropertyName: "checkboxClass", publicName: "checkboxClass", isSignal: true, isRequired: false, transformFunction: null }, labelClass: { classPropertyName: "labelClass", publicName: "labelClass", isSignal: true, isRequired: false, transformFunction: null }, errorClass: { classPropertyName: "errorClass", publicName: "errorClass", isSignal: true, isRequired: false, transformFunction: null }, hintClass: { classPropertyName: "hintClass", publicName: "hintClass", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "_computedClass()" } }, providers: [{ provide: ControlContainer, useExisting: FormGroupDirective }], ngImport: i0, template: "\n @let lbl = label();\n @let cnm = controlName();\n @let
|
|
110
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.3", type: EgFormCheckbox, isStandalone: true, selector: "eg-form-checkbox", inputs: { userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, controlId: { classPropertyName: "controlId", publicName: "controlId", isSignal: true, isRequired: false, transformFunction: null }, controlName: { classPropertyName: "controlName", publicName: "controlName", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, autoError: { classPropertyName: "autoError", publicName: "autoError", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, checkboxClass: { classPropertyName: "checkboxClass", publicName: "checkboxClass", isSignal: true, isRequired: false, transformFunction: null }, labelClass: { classPropertyName: "labelClass", publicName: "labelClass", isSignal: true, isRequired: false, transformFunction: null }, errorClass: { classPropertyName: "errorClass", publicName: "errorClass", isSignal: true, isRequired: false, transformFunction: null }, hintClass: { classPropertyName: "hintClass", publicName: "hintClass", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "_computedClass()" } }, providers: [{ provide: ControlContainer, useExisting: FormGroupDirective }], ngImport: i0, template: "\n @let lbl = label();\n @let cnm = controlName();\n @let hnt = hint();\n @let rqrd = required();\n\n <eg-form-field>\n <div class=\"flex items-center gap-1\">\n <hlm-checkbox\n [id]=\"effectiveId()\"\n [name]=\"cnm || name() || null\"\n [formControlName]=\"cnm\"\n [class]=\"$checkboxClass()\"\n [checked]=\"checked()\"\n [required]=\"rqrd\"\n [wrapperDisabled]=\"disabled()\"\n [aria-describedby]=\"describedBy()\"\n />\n <label hlmLabel [for]=\"effectiveId()\" [class]=\"$labelClass()\">\n {{ lbl }}\n @if (rqrd) {\n <span class=\"text-red-500\">*</span>\n }\n </label>\n </div>\n\n @if (showError()) {\n <hlm-error [id]=\"errorId()\" [class]=\"$errorClass()\">\n {{ resolvedError() }}\n </hlm-error>\n }\n\n @if (hnt) {\n <hlm-hint [id]=\"hintId()\" [class]=\"$hintClass()\">\n {{ hnt }}\n </hlm-hint>\n }\n </eg-form-field>\n ", isInline: true, dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: HlmCheckbox, selector: "hlm-checkbox", inputs: ["class", "id", "aria-label", "aria-labelledby", "aria-describedby", "checked", "name", "required", "disabled", "wrapperDisabled"], outputs: ["checkedChange", "changed"] }, { kind: "directive", type: HlmLabel, selector: "[hlmLabel]", inputs: ["class"] }, { kind: "component", type: EgFormField, selector: "eg-form-field", inputs: ["class"] }, { kind: "directive", type: HlmError, selector: "hlm-error", inputs: ["class"] }, { kind: "directive", type: HlmHint, selector: "hlm-hint", inputs: ["class"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
82
111
|
}
|
|
83
112
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: EgFormCheckbox, decorators: [{
|
|
84
113
|
type: Component,
|
|
@@ -91,9 +120,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImpor
|
|
|
91
120
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
92
121
|
imports: [ReactiveFormsModule, HlmCheckbox, HlmLabel, EgFormField, HlmError, HlmHint],
|
|
93
122
|
providers: [{ provide: ControlContainer, useExisting: FormGroupDirective }],
|
|
94
|
-
template: "\n @let lbl = label();\n @let cnm = controlName();\n @let
|
|
123
|
+
template: "\n @let lbl = label();\n @let cnm = controlName();\n @let hnt = hint();\n @let rqrd = required();\n\n <eg-form-field>\n <div class=\"flex items-center gap-1\">\n <hlm-checkbox\n [id]=\"effectiveId()\"\n [name]=\"cnm || name() || null\"\n [formControlName]=\"cnm\"\n [class]=\"$checkboxClass()\"\n [checked]=\"checked()\"\n [required]=\"rqrd\"\n [wrapperDisabled]=\"disabled()\"\n [aria-describedby]=\"describedBy()\"\n />\n <label hlmLabel [for]=\"effectiveId()\" [class]=\"$labelClass()\">\n {{ lbl }}\n @if (rqrd) {\n <span class=\"text-red-500\">*</span>\n }\n </label>\n </div>\n\n @if (showError()) {\n <hlm-error [id]=\"errorId()\" [class]=\"$errorClass()\">\n {{ resolvedError() }}\n </hlm-error>\n }\n\n @if (hnt) {\n <hlm-hint [id]=\"hintId()\" [class]=\"$hintClass()\">\n {{ hnt }}\n </hlm-hint>\n }\n </eg-form-field>\n ",
|
|
95
124
|
}]
|
|
96
|
-
}], propDecorators: { userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], controlId: [{ type: i0.Input, args: [{ isSignal: true, alias: "controlId", required: false }] }], controlName: [{ type: i0.Input, args: [{ isSignal: true, alias: "controlName", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], checked: [{ type: i0.Input, args: [{ isSignal: true, alias: "checked", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], checkboxClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "checkboxClass", required: false }] }], labelClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelClass", required: false }] }], errorClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorClass", required: false }] }], hintClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "hintClass", required: false }] }] } });
|
|
125
|
+
}], propDecorators: { userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], controlId: [{ type: i0.Input, args: [{ isSignal: true, alias: "controlId", required: false }] }], controlName: [{ type: i0.Input, args: [{ isSignal: true, alias: "controlName", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], autoError: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoError", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], checked: [{ type: i0.Input, args: [{ isSignal: true, alias: "checked", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], checkboxClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "checkboxClass", required: false }] }], labelClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelClass", required: false }] }], errorClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorClass", required: false }] }], hintClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "hintClass", required: false }] }] } });
|
|
97
126
|
|
|
98
127
|
/*
|
|
99
128
|
* Public API Surface of form-checkbox
|
|
@@ -4,6 +4,7 @@ import { ClassValue } from 'clsx';
|
|
|
4
4
|
|
|
5
5
|
declare class EgFormCheckbox {
|
|
6
6
|
private readonly formGroupDirective;
|
|
7
|
+
private readonly _errorMessages;
|
|
7
8
|
private readonly generatedId;
|
|
8
9
|
private readonly _config;
|
|
9
10
|
readonly userClass: _angular_core.InputSignal<ClassValue>;
|
|
@@ -12,6 +13,12 @@ declare class EgFormCheckbox {
|
|
|
12
13
|
controlId: _angular_core.InputSignal<string | undefined>;
|
|
13
14
|
controlName: _angular_core.InputSignal<string>;
|
|
14
15
|
error: _angular_core.InputSignal<string | undefined>;
|
|
16
|
+
/**
|
|
17
|
+
* Auto-resolve the displayed message from the control's `ValidationErrors`
|
|
18
|
+
* when `error()` is unset. Explicit `error()` always wins. Set to `false`
|
|
19
|
+
* for manual-only messages.
|
|
20
|
+
*/
|
|
21
|
+
autoError: _angular_core.InputSignal<boolean>;
|
|
15
22
|
hint: _angular_core.InputSignal<string | undefined>;
|
|
16
23
|
id: _angular_core.InputSignal<string | undefined>;
|
|
17
24
|
name: _angular_core.InputSignal<string | undefined>;
|
|
@@ -21,6 +28,19 @@ declare class EgFormCheckbox {
|
|
|
21
28
|
readonly effectiveId: _angular_core.Signal<string>;
|
|
22
29
|
readonly errorId: _angular_core.Signal<string>;
|
|
23
30
|
readonly hintId: _angular_core.Signal<string>;
|
|
31
|
+
/**
|
|
32
|
+
* Displayed message: explicit `error()` wins; otherwise (when `autoError()`)
|
|
33
|
+
* auto-resolved from the control's `ValidationErrors`. Plain method (not a
|
|
34
|
+
* computed): `ValidationErrors` is not a signal, so the control must be read
|
|
35
|
+
* fresh on every change-detection pass.
|
|
36
|
+
*/
|
|
37
|
+
protected resolvedError(): string | undefined;
|
|
38
|
+
/**
|
|
39
|
+
* Whether the error is surfaced: message present + control invalid +
|
|
40
|
+
* touched/dirty/submitted. Gates the visual `<hlm-error>` (and
|
|
41
|
+
* `describedBy()`, where present) so sighted and screen-reader output agree.
|
|
42
|
+
*/
|
|
43
|
+
protected showError(): boolean;
|
|
24
44
|
describedBy(): string | null;
|
|
25
45
|
checkboxClass: _angular_core.InputSignal<string>;
|
|
26
46
|
labelClass: _angular_core.InputSignal<string>;
|
|
@@ -31,7 +51,7 @@ declare class EgFormCheckbox {
|
|
|
31
51
|
$errorClass: _angular_core.Signal<string>;
|
|
32
52
|
$hintClass: _angular_core.Signal<string>;
|
|
33
53
|
static ɵfac: _angular_core.ɵɵFactoryDeclaration<EgFormCheckbox, never>;
|
|
34
|
-
static ɵcmp: _angular_core.ɵɵComponentDeclaration<EgFormCheckbox, "eg-form-checkbox", never, { "userClass": { "alias": "class"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "controlId": { "alias": "controlId"; "required": false; "isSignal": true; }; "controlName": { "alias": "controlName"; "required": false; "isSignal": true; }; "error": { "alias": "error"; "required": false; "isSignal": true; }; "hint": { "alias": "hint"; "required": false; "isSignal": true; }; "id": { "alias": "id"; "required": false; "isSignal": true; }; "name": { "alias": "name"; "required": false; "isSignal": true; }; "checked": { "alias": "checked"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "checkboxClass": { "alias": "checkboxClass"; "required": false; "isSignal": true; }; "labelClass": { "alias": "labelClass"; "required": false; "isSignal": true; }; "errorClass": { "alias": "errorClass"; "required": false; "isSignal": true; }; "hintClass": { "alias": "hintClass"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
|
|
54
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<EgFormCheckbox, "eg-form-checkbox", never, { "userClass": { "alias": "class"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "controlId": { "alias": "controlId"; "required": false; "isSignal": true; }; "controlName": { "alias": "controlName"; "required": false; "isSignal": true; }; "error": { "alias": "error"; "required": false; "isSignal": true; }; "autoError": { "alias": "autoError"; "required": false; "isSignal": true; }; "hint": { "alias": "hint"; "required": false; "isSignal": true; }; "id": { "alias": "id"; "required": false; "isSignal": true; }; "name": { "alias": "name"; "required": false; "isSignal": true; }; "checked": { "alias": "checked"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "checkboxClass": { "alias": "checkboxClass"; "required": false; "isSignal": true; }; "labelClass": { "alias": "labelClass"; "required": false; "isSignal": true; }; "errorClass": { "alias": "errorClass"; "required": false; "isSignal": true; }; "hintClass": { "alias": "hintClass"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
|
|
35
55
|
}
|
|
36
56
|
|
|
37
57
|
interface EgFormCheckboxConfig {
|
package/form-combobox/README.md
CHANGED
|
@@ -47,26 +47,27 @@ Selector (from source): `eg-form-combobox` (standalone component, host `tw:w-ful
|
|
|
47
47
|
|
|
48
48
|
### `EgFormCombobox` — `eg-form-combobox`
|
|
49
49
|
|
|
50
|
-
| Input | Type | Default | Description
|
|
51
|
-
| -------------- | ------------------------ | ------------------------ |
|
|
52
|
-
| `controlName` | `string` | `''` | `formControlName` key inside the parent `FormGroup`. **Required.**
|
|
53
|
-
| `mode` | `'single' \| 'multiple'` | `'multiple'` | `multiple` renders chips + multi-select (`string[]`); `single` renders a trigger button (`string \| null`).
|
|
54
|
-
| `label` | `string \| undefined` | — | Label text (hidden when omitted).
|
|
55
|
-
| `error` | `string \| undefined` | — | Error text shown when invalid.
|
|
56
|
-
| `
|
|
57
|
-
| `
|
|
58
|
-
| `
|
|
59
|
-
| `
|
|
60
|
-
| `
|
|
61
|
-
| `
|
|
62
|
-
| `
|
|
63
|
-
| `
|
|
64
|
-
| `
|
|
65
|
-
| `
|
|
66
|
-
| `
|
|
67
|
-
| `
|
|
68
|
-
| `
|
|
69
|
-
| `
|
|
50
|
+
| Input | Type | Default | Description |
|
|
51
|
+
| -------------- | ------------------------ | ------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
|
|
52
|
+
| `controlName` | `string` | `''` | `formControlName` key inside the parent `FormGroup`. **Required.** |
|
|
53
|
+
| `mode` | `'single' \| 'multiple'` | `'multiple'` | `multiple` renders chips + multi-select (`string[]`); `single` renders a trigger button (`string \| null`). |
|
|
54
|
+
| `label` | `string \| undefined` | — | Label text (hidden when omitted). |
|
|
55
|
+
| `error` | `string \| undefined` | — | Error text shown when invalid. |
|
|
56
|
+
| `autoError` | `boolean` | `true` | Auto-resolve the message from the control's `ValidationErrors` when `error` is unset. Explicit `error` always wins; `error=""` counts as unset. Global wording via `provideEgFormErrorMessages`. |
|
|
57
|
+
| `hint` | `string \| undefined` | — | Hint text shown otherwise. |
|
|
58
|
+
| `controlId` | `string \| undefined` | — | Explicit id (first priority for `effectiveId`). |
|
|
59
|
+
| `id` | `string \| undefined` | — | Fallback id (second priority). |
|
|
60
|
+
| `placeholder` | `string` | `'Pick…'` | Search input placeholder. |
|
|
61
|
+
| `emptyText` | `string` | `'Nothing left to add.'` | Text shown when no option matches. |
|
|
62
|
+
| `disabled` | `boolean` | `false` | Locks interaction (form control stays enabled). |
|
|
63
|
+
| `required` | `boolean` | `false` | Shows a red `*` next to the label. |
|
|
64
|
+
| `options` | `string[]` | `[]` | Rendered as `hlm-combobox-item` entries. |
|
|
65
|
+
| `class` | `ClassValue` | `''` | Extra host classes (base `tw:w-full`). |
|
|
66
|
+
| `labelClass` | `string` | `''` | Extra label classes (base `tw:mb-1`). |
|
|
67
|
+
| `controlClass` | `string` | `''` | Extra multi-root classes. |
|
|
68
|
+
| `chipsClass` | `string` | `''` | Extra chips-anchor classes. |
|
|
69
|
+
| `errorClass` | `string` | `''` | Extra error classes (base `tw:mt-0`). |
|
|
70
|
+
| `hintClass` | `string` | `''` | Extra hint classes (base `tw:mt-0`). |
|
|
70
71
|
|
|
71
72
|
| Member | Description |
|
|
72
73
|
| -------------------- | ---------------------------------------------------------------------------------- |
|