@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
|
@@ -2,13 +2,14 @@ import * as i0 from '@angular/core';
|
|
|
2
2
|
import { 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 { injectHlmMonthYearPickerConfig, HlmMonthYearPicker, HlmMonthYearInput } from '@egose/shadcn-theme-ng/date-picker';
|
|
8
8
|
import { hlm } from '@egose/shadcn-theme-ng/utils';
|
|
9
9
|
|
|
10
10
|
class EgFormMonthYearPicker {
|
|
11
11
|
formGroupDirective = inject(FormGroupDirective);
|
|
12
|
+
_errorMessages = injectEgFormErrorMessages();
|
|
12
13
|
generatedId = inject(HlmFormIdGenerator).generate('eg-form-month-year-picker');
|
|
13
14
|
_config = injectHlmMonthYearPickerConfig();
|
|
14
15
|
label = input(undefined, /* @ts-ignore */
|
|
@@ -19,6 +20,13 @@ class EgFormMonthYearPicker {
|
|
|
19
20
|
...(ngDevMode ? [{ debugName: "controlName" }] : /* istanbul ignore next */ []));
|
|
20
21
|
error = input(undefined, /* @ts-ignore */
|
|
21
22
|
...(ngDevMode ? [{ debugName: "error" }] : /* istanbul ignore next */ []));
|
|
23
|
+
/**
|
|
24
|
+
* Auto-resolve the displayed message from the control's `ValidationErrors`
|
|
25
|
+
* when `error()` is unset. Explicit `error()` always wins. Set to `false`
|
|
26
|
+
* for manual-only messages.
|
|
27
|
+
*/
|
|
28
|
+
autoError = input(true, /* @ts-ignore */
|
|
29
|
+
...(ngDevMode ? [{ debugName: "autoError" }] : /* istanbul ignore next */ []));
|
|
22
30
|
hint = input(undefined, /* @ts-ignore */
|
|
23
31
|
...(ngDevMode ? [{ debugName: "hint" }] : /* istanbul ignore next */ []));
|
|
24
32
|
id = input(undefined, /* @ts-ignore */
|
|
@@ -54,6 +62,32 @@ class EgFormMonthYearPicker {
|
|
|
54
62
|
...(ngDevMode ? [{ debugName: "errorId" }] : /* istanbul ignore next */ []));
|
|
55
63
|
hintId = computed(() => `${this.effectiveId()}-hint`, /* @ts-ignore */
|
|
56
64
|
...(ngDevMode ? [{ debugName: "hintId" }] : /* istanbul ignore next */ []));
|
|
65
|
+
/**
|
|
66
|
+
* Displayed message: explicit `error()` wins; otherwise (when `autoError()`)
|
|
67
|
+
* auto-resolved from the control's `ValidationErrors`. Plain method (not a
|
|
68
|
+
* computed): `ValidationErrors` is not a signal, so the control must be read
|
|
69
|
+
* fresh on every change-detection pass.
|
|
70
|
+
*/
|
|
71
|
+
resolvedError() {
|
|
72
|
+
const explicit = this.error();
|
|
73
|
+
if (explicit)
|
|
74
|
+
return explicit;
|
|
75
|
+
if (!this.autoError())
|
|
76
|
+
return undefined;
|
|
77
|
+
const control = this.formGroupDirective.form.get(this.controlName());
|
|
78
|
+
return resolveEgFormError(control?.errors ?? null, this.label(), this._errorMessages);
|
|
79
|
+
}
|
|
80
|
+
/**
|
|
81
|
+
* Whether the error is surfaced: message present + control invalid +
|
|
82
|
+
* touched/dirty/submitted. Gates the visual `<hlm-error>` (and
|
|
83
|
+
* `describedBy()`, where present) so sighted and screen-reader output agree.
|
|
84
|
+
*/
|
|
85
|
+
showError() {
|
|
86
|
+
const control = this.formGroupDirective.form.get(this.controlName());
|
|
87
|
+
return (!!this.resolvedError() &&
|
|
88
|
+
!!control?.invalid &&
|
|
89
|
+
(control.dirty || control.touched || this.formGroupDirective.submitted));
|
|
90
|
+
}
|
|
57
91
|
/**
|
|
58
92
|
* Bounds projected onto the picker's `Date` model. The cast keeps the
|
|
59
93
|
* template's generic inference on `Date` while passing runtime values
|
|
@@ -64,12 +98,7 @@ class EgFormMonthYearPicker {
|
|
|
64
98
|
$max = computed(() => this.max(), /* @ts-ignore */
|
|
65
99
|
...(ngDevMode ? [{ debugName: "$max" }] : /* istanbul ignore next */ []));
|
|
66
100
|
describedBy() {
|
|
67
|
-
|
|
68
|
-
return this.error() && control?.invalid && (control.dirty || control.touched)
|
|
69
|
-
? this.errorId()
|
|
70
|
-
: this.hint()
|
|
71
|
-
? this.hintId()
|
|
72
|
-
: null;
|
|
101
|
+
return this.showError() ? this.errorId() : this.hint() ? this.hintId() : null;
|
|
73
102
|
}
|
|
74
103
|
// Styling
|
|
75
104
|
userClass = input('', { ...(ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {}), alias: 'class' });
|
|
@@ -97,7 +126,7 @@ class EgFormMonthYearPicker {
|
|
|
97
126
|
$hintClass = computed(() => hlm("mt-0", this._config.hintClass, this.hintClass()), /* @ts-ignore */
|
|
98
127
|
...(ngDevMode ? [{ debugName: "$hintClass" }] : /* istanbul ignore next */ []));
|
|
99
128
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: EgFormMonthYearPicker, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
100
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.3", type: EgFormMonthYearPicker, isStandalone: true, selector: "eg-form-month-year-picker", 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 }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", 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 }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, autoCloseOnSelect: { classPropertyName: "autoCloseOnSelect", publicName: "autoCloseOnSelect", isSignal: true, isRequired: false, transformFunction: null }, formatDate: { classPropertyName: "formatDate", publicName: "formatDate", isSignal: true, isRequired: false, transformFunction: null }, transformDate: { classPropertyName: "transformDate", publicName: "transformDate", isSignal: true, isRequired: false, transformFunction: null }, parseDate: { classPropertyName: "parseDate", publicName: "parseDate", isSignal: true, isRequired: false, transformFunction: null }, formatInputDate: { classPropertyName: "formatInputDate", publicName: "formatInputDate", 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 }, pickerClass: { classPropertyName: "pickerClass", publicName: "pickerClass", 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
|
|
129
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.3", type: EgFormMonthYearPicker, isStandalone: true, selector: "eg-form-month-year-picker", 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 }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", 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 }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, autoCloseOnSelect: { classPropertyName: "autoCloseOnSelect", publicName: "autoCloseOnSelect", isSignal: true, isRequired: false, transformFunction: null }, formatDate: { classPropertyName: "formatDate", publicName: "formatDate", isSignal: true, isRequired: false, transformFunction: null }, transformDate: { classPropertyName: "transformDate", publicName: "transformDate", isSignal: true, isRequired: false, transformFunction: null }, parseDate: { classPropertyName: "parseDate", publicName: "parseDate", isSignal: true, isRequired: false, transformFunction: null }, formatInputDate: { classPropertyName: "formatInputDate", publicName: "formatInputDate", 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 }, pickerClass: { classPropertyName: "pickerClass", publicName: "pickerClass", 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 <hlm-month-year-picker\n [min]=\"$min()\"\n [max]=\"$max()\"\n [disabled]=\"disabled()\"\n [autoCloseOnSelect]=\"autoCloseOnSelect()\"\n [formatDate]=\"formatDate()\"\n [transformDate]=\"transformDate()\"\n [formControlName]=\"cnm\"\n [class]=\"$pickerClass()\"\n >\n <hlm-month-year-input\n [inputId]=\"effectiveId()\"\n [name]=\"cnm || name()\"\n [readonly]=\"readonly()\"\n [ariaLabel]=\"lbl\"\n [ariaDescribedby]=\"describedBy()\"\n [placeholder]=\"placeholder()\"\n [parseDate]=\"parseDate()\"\n [formatInputDate]=\"formatInputDate()\"\n [inputClass]=\"$inputClass()\"\n />\n </hlm-month-year-picker>\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: "component", type: HlmMonthYearPicker, selector: "hlm-month-year-picker", inputs: ["min", "max", "disabled", "date", "defaultFocusedDate", "autoCloseOnSelect", "formatDate", "transformDate"], outputs: ["dateChange"] }, { kind: "component", type: HlmMonthYearInput, selector: "hlm-month-year-input", inputs: ["name", "readonly", "ariaLabel", "ariaDescribedby", "class", "inputClass", "parseDate", "formatInputDate"] }] });
|
|
101
130
|
}
|
|
102
131
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: EgFormMonthYearPicker, decorators: [{
|
|
103
132
|
type: Component,
|
|
@@ -109,9 +138,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImpor
|
|
|
109
138
|
},
|
|
110
139
|
imports: [ReactiveFormsModule, HlmFormField, HlmError, HlmHint, HlmLabel, HlmMonthYearPicker, HlmMonthYearInput],
|
|
111
140
|
providers: [{ provide: ControlContainer, useExisting: FormGroupDirective }],
|
|
112
|
-
template: "\n @let lbl = label();\n @let cnm = controlName();\n @let
|
|
141
|
+
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 <hlm-month-year-picker\n [min]=\"$min()\"\n [max]=\"$max()\"\n [disabled]=\"disabled()\"\n [autoCloseOnSelect]=\"autoCloseOnSelect()\"\n [formatDate]=\"formatDate()\"\n [transformDate]=\"transformDate()\"\n [formControlName]=\"cnm\"\n [class]=\"$pickerClass()\"\n >\n <hlm-month-year-input\n [inputId]=\"effectiveId()\"\n [name]=\"cnm || name()\"\n [readonly]=\"readonly()\"\n [ariaLabel]=\"lbl\"\n [ariaDescribedby]=\"describedBy()\"\n [placeholder]=\"placeholder()\"\n [parseDate]=\"parseDate()\"\n [formatInputDate]=\"formatInputDate()\"\n [inputClass]=\"$inputClass()\"\n />\n </hlm-month-year-picker>\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
142
|
}]
|
|
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 }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], autoCloseOnSelect: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoCloseOnSelect", required: false }] }], formatDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "formatDate", required: false }] }], transformDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "transformDate", required: false }] }], parseDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "parseDate", required: false }] }], formatInputDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "formatInputDate", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], labelClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelClass", required: false }] }], pickerClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "pickerClass", 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 }] }] } });
|
|
143
|
+
}], 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 }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], autoCloseOnSelect: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoCloseOnSelect", required: false }] }], formatDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "formatDate", required: false }] }], transformDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "transformDate", required: false }] }], parseDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "parseDate", required: false }] }], formatInputDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "formatInputDate", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], labelClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelClass", required: false }] }], pickerClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "pickerClass", 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
144
|
|
|
116
145
|
/*
|
|
117
146
|
* Public API Surface of form-month-year-picker
|
|
@@ -3,12 +3,19 @@ import { ClassValue } from 'clsx';
|
|
|
3
3
|
|
|
4
4
|
declare class EgFormMonthYearPicker {
|
|
5
5
|
private readonly formGroupDirective;
|
|
6
|
+
private readonly _errorMessages;
|
|
6
7
|
private readonly generatedId;
|
|
7
8
|
private readonly _config;
|
|
8
9
|
label: _angular_core.InputSignal<string | undefined>;
|
|
9
10
|
controlId: _angular_core.InputSignal<string | undefined>;
|
|
10
11
|
controlName: _angular_core.InputSignal<string>;
|
|
11
12
|
error: _angular_core.InputSignal<string | undefined>;
|
|
13
|
+
/**
|
|
14
|
+
* Auto-resolve the displayed message from the control's `ValidationErrors`
|
|
15
|
+
* when `error()` is unset. Explicit `error()` always wins. Set to `false`
|
|
16
|
+
* for manual-only messages.
|
|
17
|
+
*/
|
|
18
|
+
autoError: _angular_core.InputSignal<boolean>;
|
|
12
19
|
hint: _angular_core.InputSignal<string | undefined>;
|
|
13
20
|
id: _angular_core.InputSignal<string | undefined>;
|
|
14
21
|
name: _angular_core.InputSignal<string | undefined>;
|
|
@@ -26,6 +33,19 @@ declare class EgFormMonthYearPicker {
|
|
|
26
33
|
readonly effectiveId: _angular_core.Signal<string>;
|
|
27
34
|
readonly errorId: _angular_core.Signal<string>;
|
|
28
35
|
readonly hintId: _angular_core.Signal<string>;
|
|
36
|
+
/**
|
|
37
|
+
* Displayed message: explicit `error()` wins; otherwise (when `autoError()`)
|
|
38
|
+
* auto-resolved from the control's `ValidationErrors`. Plain method (not a
|
|
39
|
+
* computed): `ValidationErrors` is not a signal, so the control must be read
|
|
40
|
+
* fresh on every change-detection pass.
|
|
41
|
+
*/
|
|
42
|
+
protected resolvedError(): string | undefined;
|
|
43
|
+
/**
|
|
44
|
+
* Whether the error is surfaced: message present + control invalid +
|
|
45
|
+
* touched/dirty/submitted. Gates the visual `<hlm-error>` (and
|
|
46
|
+
* `describedBy()`, where present) so sighted and screen-reader output agree.
|
|
47
|
+
*/
|
|
48
|
+
protected showError(): boolean;
|
|
29
49
|
/**
|
|
30
50
|
* Bounds projected onto the picker's `Date` model. The cast keeps the
|
|
31
51
|
* template's generic inference on `Date` while passing runtime values
|
|
@@ -47,7 +67,7 @@ declare class EgFormMonthYearPicker {
|
|
|
47
67
|
$errorClass: _angular_core.Signal<string>;
|
|
48
68
|
$hintClass: _angular_core.Signal<string>;
|
|
49
69
|
static ɵfac: _angular_core.ɵɵFactoryDeclaration<EgFormMonthYearPicker, never>;
|
|
50
|
-
static ɵcmp: _angular_core.ɵɵComponentDeclaration<EgFormMonthYearPicker, "eg-form-month-year-picker", 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; }; "name": { "alias": "name"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "min": { "alias": "min"; "required": false; "isSignal": true; }; "max": { "alias": "max"; "required": false; "isSignal": true; }; "autoCloseOnSelect": { "alias": "autoCloseOnSelect"; "required": false; "isSignal": true; }; "formatDate": { "alias": "formatDate"; "required": false; "isSignal": true; }; "transformDate": { "alias": "transformDate"; "required": false; "isSignal": true; }; "parseDate": { "alias": "parseDate"; "required": false; "isSignal": true; }; "formatInputDate": { "alias": "formatInputDate"; "required": false; "isSignal": true; }; "userClass": { "alias": "class"; "required": false; "isSignal": true; }; "labelClass": { "alias": "labelClass"; "required": false; "isSignal": true; }; "pickerClass": { "alias": "pickerClass"; "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>;
|
|
70
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<EgFormMonthYearPicker, "eg-form-month-year-picker", 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; }; "name": { "alias": "name"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "min": { "alias": "min"; "required": false; "isSignal": true; }; "max": { "alias": "max"; "required": false; "isSignal": true; }; "autoCloseOnSelect": { "alias": "autoCloseOnSelect"; "required": false; "isSignal": true; }; "formatDate": { "alias": "formatDate"; "required": false; "isSignal": true; }; "transformDate": { "alias": "transformDate"; "required": false; "isSignal": true; }; "parseDate": { "alias": "parseDate"; "required": false; "isSignal": true; }; "formatInputDate": { "alias": "formatInputDate"; "required": false; "isSignal": true; }; "userClass": { "alias": "class"; "required": false; "isSignal": true; }; "labelClass": { "alias": "labelClass"; "required": false; "isSignal": true; }; "pickerClass": { "alias": "pickerClass"; "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>;
|
|
51
71
|
}
|
|
52
72
|
|
|
53
73
|
export { EgFormMonthYearPicker };
|
|
@@ -76,23 +76,24 @@ Selector (from source): `eg-form-native-select` (standalone component, host `tw:
|
|
|
76
76
|
|
|
77
77
|
### `EgFormNativeSelect` — `eg-form-native-select`
|
|
78
78
|
|
|
79
|
-
| Input | Type | Default | Description
|
|
80
|
-
| ------------- | ------------------------------- | ------- |
|
|
81
|
-
| `controlName` | `string` | `''` | `formControlName` key inside the parent `FormGroup`. **Required.**
|
|
82
|
-
| `label` | `string \| undefined` | — | Label text (hidden when omitted).
|
|
83
|
-
| `error` | `string \| undefined` | — | Error text shown when invalid.
|
|
84
|
-
| `
|
|
85
|
-
| `
|
|
86
|
-
| `
|
|
87
|
-
| `
|
|
88
|
-
| `
|
|
89
|
-
| `
|
|
90
|
-
| `
|
|
91
|
-
| `
|
|
92
|
-
| `
|
|
93
|
-
| `
|
|
94
|
-
| `
|
|
95
|
-
| `
|
|
79
|
+
| Input | Type | Default | Description |
|
|
80
|
+
| ------------- | ------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
|
|
81
|
+
| `controlName` | `string` | `''` | `formControlName` key inside the parent `FormGroup`. **Required.** |
|
|
82
|
+
| `label` | `string \| undefined` | — | Label text (hidden when omitted). |
|
|
83
|
+
| `error` | `string \| undefined` | — | Error text shown when invalid. |
|
|
84
|
+
| `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`. |
|
|
85
|
+
| `hint` | `string \| undefined` | — | Hint text shown otherwise. |
|
|
86
|
+
| `controlId` | `string \| undefined` | — | Explicit id (first priority for `effectiveId`). |
|
|
87
|
+
| `id` | `string \| undefined` | — | Fallback id (second priority). |
|
|
88
|
+
| `name` | `string \| undefined` | — | Native `name` forwarded to the inner `<select>` (`controlName` wins). |
|
|
89
|
+
| `disabled` | `boolean` | `false` | Locks interaction (form control stays enabled). |
|
|
90
|
+
| `required` | `boolean` | `false` | Shows a red `*` next to the label. |
|
|
91
|
+
| `options` | `{ value, label, disabled? }[]` | `[]` | Rendered as native `<option>` elements. |
|
|
92
|
+
| `class` | `ClassValue` | `''` | Extra host classes (base `tw:w-full`). |
|
|
93
|
+
| `labelClass` | `string` | `''` | Extra label classes (base `tw:mb-1 tw:gap-0`). |
|
|
94
|
+
| `selectClass` | `string` | `''` | Extra inner-select classes, merged into `HlmNativeSelect.selectClass`. |
|
|
95
|
+
| `errorClass` | `string` | `''` | Extra error classes (base `tw:mt-0`). |
|
|
96
|
+
| `hintClass` | `string` | `''` | Extra hint classes (base `tw:mt-0`). |
|
|
96
97
|
|
|
97
98
|
| Member | Description |
|
|
98
99
|
| -------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------ |
|
|
@@ -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 { HlmNativeSelect } from '@egose/shadcn-theme-ng/native-select';
|
|
8
8
|
import { hlm } from '@egose/shadcn-theme-ng/utils';
|
|
@@ -17,6 +17,7 @@ function injectEgFormNativeSelectConfig() {
|
|
|
17
17
|
|
|
18
18
|
class EgFormNativeSelect {
|
|
19
19
|
formGroupDirective = inject(FormGroupDirective);
|
|
20
|
+
_errorMessages = injectEgFormErrorMessages();
|
|
20
21
|
generatedId = inject(HlmFormIdGenerator).generate('eg-form-native-select');
|
|
21
22
|
_config = injectEgFormNativeSelectConfig();
|
|
22
23
|
label = input(undefined, /* @ts-ignore */
|
|
@@ -27,6 +28,13 @@ class EgFormNativeSelect {
|
|
|
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 */
|
|
@@ -45,13 +53,34 @@ class EgFormNativeSelect {
|
|
|
45
53
|
...(ngDevMode ? [{ debugName: "errorId" }] : /* istanbul ignore next */ []));
|
|
46
54
|
hintId = computed(() => `${this.effectiveId()}-hint`, /* @ts-ignore */
|
|
47
55
|
...(ngDevMode ? [{ debugName: "hintId" }] : /* istanbul ignore next */ []));
|
|
48
|
-
|
|
56
|
+
/**
|
|
57
|
+
* Displayed message: explicit `error()` wins; otherwise (when `autoError()`)
|
|
58
|
+
* auto-resolved from the control's `ValidationErrors`. Plain method (not a
|
|
59
|
+
* computed): `ValidationErrors` is not a signal, so the control must be read
|
|
60
|
+
* fresh on every change-detection pass.
|
|
61
|
+
*/
|
|
62
|
+
resolvedError() {
|
|
63
|
+
const explicit = this.error();
|
|
64
|
+
if (explicit)
|
|
65
|
+
return explicit;
|
|
66
|
+
if (!this.autoError())
|
|
67
|
+
return undefined;
|
|
68
|
+
const control = this.formGroupDirective.form.get(this.controlName());
|
|
69
|
+
return resolveEgFormError(control?.errors ?? null, this.label(), this._errorMessages);
|
|
70
|
+
}
|
|
71
|
+
/**
|
|
72
|
+
* Whether the error is surfaced: message present + control invalid +
|
|
73
|
+
* touched/dirty/submitted. Gates the visual `<hlm-error>` (and
|
|
74
|
+
* `describedBy()`, where present) so sighted and screen-reader output agree.
|
|
75
|
+
*/
|
|
76
|
+
showError() {
|
|
49
77
|
const control = this.formGroupDirective.form.get(this.controlName());
|
|
50
|
-
return this.
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
78
|
+
return (!!this.resolvedError() &&
|
|
79
|
+
!!control?.invalid &&
|
|
80
|
+
(control.dirty || control.touched || this.formGroupDirective.submitted));
|
|
81
|
+
}
|
|
82
|
+
describedBy() {
|
|
83
|
+
return this.showError() ? this.errorId() : this.hint() ? this.hintId() : null;
|
|
55
84
|
}
|
|
56
85
|
// Styling
|
|
57
86
|
userClass = input('', { ...(ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {}), alias: 'class' });
|
|
@@ -75,7 +104,7 @@ class EgFormNativeSelect {
|
|
|
75
104
|
$hintClass = computed(() => hlm("mt-0", this._config.hintClass, this.hintClass()), /* @ts-ignore */
|
|
76
105
|
...(ngDevMode ? [{ debugName: "$hintClass" }] : /* istanbul ignore next */ []));
|
|
77
106
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: EgFormNativeSelect, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
78
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.3", type: EgFormNativeSelect, isStandalone: true, selector: "eg-form-native-select", 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 }, name: { classPropertyName: "name", publicName: "name", 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 }, selectClass: { classPropertyName: "selectClass", publicName: "selectClass", 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
|
|
107
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.3", type: EgFormNativeSelect, isStandalone: true, selector: "eg-form-native-select", 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 }, name: { classPropertyName: "name", publicName: "name", 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 }, selectClass: { classPropertyName: "selectClass", publicName: "selectClass", 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 <hlm-native-select\n [selectId]=\"effectiveId()\"\n [name]=\"cnm || name()\"\n [ariaDescribedby]=\"describedBy()\"\n [disabled]=\"disabled()\"\n [formControlName]=\"cnm\"\n [selectClass]=\"$selectClass()\"\n >\n @for (option of options(); track option.value) {\n <option\n class=\"bg-[Canvas] text-[CanvasText]\"\n [value]=\"option.value\"\n [disabled]=\"option.disabled ?? false\"\n >\n {{ option.label }}\n </option>\n }\n </hlm-native-select>\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.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { 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: "component", type: HlmNativeSelect, selector: "hlm-native-select", inputs: ["selectId", "name", "ariaDescribedby", "selectClass", "selectIconClass", "size", "disabled", "forceInvalid", "aria-invalid", "value"], outputs: ["valueChange"] }] });
|
|
79
108
|
}
|
|
80
109
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: EgFormNativeSelect, decorators: [{
|
|
81
110
|
type: Component,
|
|
@@ -87,9 +116,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImpor
|
|
|
87
116
|
},
|
|
88
117
|
imports: [ReactiveFormsModule, HlmFormField, HlmError, HlmHint, HlmLabel, HlmNativeSelect],
|
|
89
118
|
providers: [{ provide: ControlContainer, useExisting: FormGroupDirective }],
|
|
90
|
-
template: "\n @let lbl = label();\n @let cnm = controlName();\n @let
|
|
119
|
+
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 <hlm-native-select\n [selectId]=\"effectiveId()\"\n [name]=\"cnm || name()\"\n [ariaDescribedby]=\"describedBy()\"\n [disabled]=\"disabled()\"\n [formControlName]=\"cnm\"\n [selectClass]=\"$selectClass()\"\n >\n @for (option of options(); track option.value) {\n <option\n class=\"bg-[Canvas] text-[CanvasText]\"\n [value]=\"option.value\"\n [disabled]=\"option.disabled ?? false\"\n >\n {{ option.label }}\n </option>\n }\n </hlm-native-select>\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 ",
|
|
91
120
|
}]
|
|
92
|
-
}], 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 }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", 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 }] }], selectClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectClass", required: false }] }], errorClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorClass", required: false }] }], hintClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "hintClass", required: false }] }] } });
|
|
121
|
+
}], 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 }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", 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 }] }], selectClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectClass", required: false }] }], errorClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorClass", required: false }] }], hintClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "hintClass", required: false }] }] } });
|
|
93
122
|
|
|
94
123
|
/*
|
|
95
124
|
* Public API Surface of form-native-select
|
|
@@ -9,12 +9,19 @@ interface NativeSelectOption {
|
|
|
9
9
|
}
|
|
10
10
|
declare class EgFormNativeSelect {
|
|
11
11
|
private readonly formGroupDirective;
|
|
12
|
+
private readonly _errorMessages;
|
|
12
13
|
private readonly generatedId;
|
|
13
14
|
private readonly _config;
|
|
14
15
|
label: _angular_core.InputSignal<string | undefined>;
|
|
15
16
|
controlId: _angular_core.InputSignal<string | undefined>;
|
|
16
17
|
controlName: _angular_core.InputSignal<string>;
|
|
17
18
|
error: _angular_core.InputSignal<string | undefined>;
|
|
19
|
+
/**
|
|
20
|
+
* Auto-resolve the displayed message from the control's `ValidationErrors`
|
|
21
|
+
* when `error()` is unset. Explicit `error()` always wins. Set to `false`
|
|
22
|
+
* for manual-only messages.
|
|
23
|
+
*/
|
|
24
|
+
autoError: _angular_core.InputSignal<boolean>;
|
|
18
25
|
hint: _angular_core.InputSignal<string | undefined>;
|
|
19
26
|
id: _angular_core.InputSignal<string | undefined>;
|
|
20
27
|
name: _angular_core.InputSignal<string | undefined>;
|
|
@@ -24,6 +31,19 @@ declare class EgFormNativeSelect {
|
|
|
24
31
|
readonly effectiveId: _angular_core.Signal<string>;
|
|
25
32
|
readonly errorId: _angular_core.Signal<string>;
|
|
26
33
|
readonly hintId: _angular_core.Signal<string>;
|
|
34
|
+
/**
|
|
35
|
+
* Displayed message: explicit `error()` wins; otherwise (when `autoError()`)
|
|
36
|
+
* auto-resolved from the control's `ValidationErrors`. Plain method (not a
|
|
37
|
+
* computed): `ValidationErrors` is not a signal, so the control must be read
|
|
38
|
+
* fresh on every change-detection pass.
|
|
39
|
+
*/
|
|
40
|
+
protected resolvedError(): string | undefined;
|
|
41
|
+
/**
|
|
42
|
+
* Whether the error is surfaced: message present + control invalid +
|
|
43
|
+
* touched/dirty/submitted. Gates the visual `<hlm-error>` (and
|
|
44
|
+
* `describedBy()`, where present) so sighted and screen-reader output agree.
|
|
45
|
+
*/
|
|
46
|
+
protected showError(): boolean;
|
|
27
47
|
describedBy(): string | null;
|
|
28
48
|
userClass: _angular_core.InputSignal<ClassValue>;
|
|
29
49
|
labelClass: _angular_core.InputSignal<string>;
|
|
@@ -36,7 +56,7 @@ declare class EgFormNativeSelect {
|
|
|
36
56
|
$errorClass: _angular_core.Signal<string>;
|
|
37
57
|
$hintClass: _angular_core.Signal<string>;
|
|
38
58
|
static ɵfac: _angular_core.ɵɵFactoryDeclaration<EgFormNativeSelect, never>;
|
|
39
|
-
static ɵcmp: _angular_core.ɵɵComponentDeclaration<EgFormNativeSelect, "eg-form-native-select", 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; }; "name": { "alias": "name"; "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; }; "selectClass": { "alias": "selectClass"; "required": false; "isSignal": true; }; "errorClass": { "alias": "errorClass"; "required": false; "isSignal": true; }; "hintClass": { "alias": "hintClass"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
|
|
59
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<EgFormNativeSelect, "eg-form-native-select", 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; }; "name": { "alias": "name"; "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; }; "selectClass": { "alias": "selectClass"; "required": false; "isSignal": true; }; "errorClass": { "alias": "errorClass"; "required": false; "isSignal": true; }; "hintClass": { "alias": "hintClass"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
|
|
40
60
|
}
|
|
41
61
|
|
|
42
62
|
interface EgFormNativeSelectConfig {
|
|
@@ -71,28 +71,29 @@ Selector (from source): `eg-form-phone-input` (standalone component, host `tw:w-
|
|
|
71
71
|
|
|
72
72
|
### `EgFormPhoneInput` — `eg-form-phone-input`
|
|
73
73
|
|
|
74
|
-
| Input | Type | Default | Description
|
|
75
|
-
| ------------------- | ---------------------------- | ----------------------- |
|
|
76
|
-
| `controlName` | `string` | `''` | `formControlName` key inside the parent `FormGroup`. **Required.**
|
|
77
|
-
| `label` | `string \| undefined` | — | Label text (hidden when omitted).
|
|
78
|
-
| `error` | `string \| undefined` | — | Error text shown when invalid.
|
|
79
|
-
| `
|
|
80
|
-
| `
|
|
81
|
-
| `
|
|
82
|
-
| `
|
|
83
|
-
| `
|
|
84
|
-
| `
|
|
85
|
-
| `
|
|
86
|
-
| `
|
|
87
|
-
| `
|
|
88
|
-
| `
|
|
89
|
-
| `
|
|
90
|
-
| `
|
|
91
|
-
| `
|
|
92
|
-
| `
|
|
93
|
-
| `
|
|
94
|
-
| `
|
|
95
|
-
| `
|
|
74
|
+
| Input | Type | Default | Description |
|
|
75
|
+
| ------------------- | ---------------------------- | ----------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
|
|
76
|
+
| `controlName` | `string` | `''` | `formControlName` key inside the parent `FormGroup`. **Required.** |
|
|
77
|
+
| `label` | `string \| undefined` | — | Label text (hidden when omitted). |
|
|
78
|
+
| `error` | `string \| undefined` | — | Error text shown when invalid. |
|
|
79
|
+
| `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`. |
|
|
80
|
+
| `hint` | `string \| undefined` | — | Hint text shown otherwise. |
|
|
81
|
+
| `controlId` | `string \| undefined` | — | Explicit id (first priority for `effectiveId`). |
|
|
82
|
+
| `id` | `string \| undefined` | — | Fallback id (second priority). |
|
|
83
|
+
| `name` | `string \| undefined` | — | Native `name` forwarded to the inner input (`controlName` wins). |
|
|
84
|
+
| `placeholder` | `string` | `'(555) 123-4567'` | Input placeholder. |
|
|
85
|
+
| `autocomplete` | `string` | `'tel'` | Native autocomplete token. |
|
|
86
|
+
| `readonly` | `boolean` | `false` | Native `readonly` forwarded to the inner input. |
|
|
87
|
+
| `disabled` | `boolean` | `false` | Locks interaction (form control stays enabled). |
|
|
88
|
+
| `required` | `boolean` | `false` | Shows a red `*` next to the label. |
|
|
89
|
+
| `maxDigits` | `number` | `10` | Maximum digit count kept in the model. |
|
|
90
|
+
| `modelFormat` | `'digits' \| 'formatted'` | `'digits'` | Model shape: raw digits or formatted display text. |
|
|
91
|
+
| `formatPhoneNumber` | `(digits: string) => string` | `formatNanpPhoneNumber` | Display formatter forwarded to the input. |
|
|
92
|
+
| `class` | `ClassValue` | `''` | Extra host classes (base `tw:w-full`). |
|
|
93
|
+
| `labelClass` | `string` | `''` | Extra label classes (base `tw:mb-1 tw:gap-0`). |
|
|
94
|
+
| `inputClass` | `string` | `''` | Extra inner-input classes. |
|
|
95
|
+
| `errorClass` | `string` | `''` | Extra error classes (base `tw:mt-0`). |
|
|
96
|
+
| `hintClass` | `string` | `''` | Extra hint classes (base `tw:mt-0`). |
|
|
96
97
|
|
|
97
98
|
| Member | Description |
|
|
98
99
|
| -------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------- |
|