@egose/shadcn-theme-ng-tw 0.3.0 → 0.5.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/README.md +1 -1
- package/form-autocomplete/README.md +20 -19
- package/form-autocomplete/fesm2022/form-autocomplete.mjs +47 -14
- package/form-autocomplete/types/form-autocomplete.d.ts +22 -1
- package/form-checkbox/README.md +20 -19
- package/form-checkbox/fesm2022/form-checkbox.mjs +102 -20
- package/form-checkbox/types/form-checkbox.d.ts +43 -3
- package/form-combobox/README.md +21 -20
- package/form-combobox/fesm2022/form-combobox.mjs +47 -14
- package/form-combobox/types/form-combobox.d.ts +22 -1
- package/form-date-picker/README.md +28 -27
- package/form-date-picker/fesm2022/form-date-picker.mjs +48 -20
- package/form-date-picker/types/form-date-picker.d.ts +22 -1
- package/form-date-picker-multi/README.md +28 -27
- package/form-date-picker-multi/fesm2022/form-date-picker-multi.mjs +48 -20
- package/form-date-picker-multi/types/form-date-picker-multi.d.ts +22 -1
- package/form-date-range-picker/README.md +28 -27
- package/form-date-range-picker/fesm2022/form-date-range-picker.mjs +48 -20
- package/form-date-range-picker/types/form-date-range-picker.d.ts +22 -1
- package/form-field/README.md +9 -0
- package/form-field/fesm2022/form-field.mjs +97 -5
- package/form-field/types/form-field.d.ts +96 -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 +46 -13
- package/form-input-otp/types/form-input-otp.d.ts +22 -1
- package/form-month-year-picker/README.md +26 -25
- package/form-month-year-picker/fesm2022/form-month-year-picker.mjs +48 -20
- package/form-month-year-picker/types/form-month-year-picker.d.ts +22 -1
- package/form-native-select/README.md +18 -17
- package/form-native-select/fesm2022/form-native-select.mjs +61 -21
- package/form-native-select/types/form-native-select.d.ts +22 -1
- package/form-phone-input/README.md +23 -22
- package/form-phone-input/fesm2022/form-phone-input.mjs +47 -19
- package/form-phone-input/types/form-phone-input.d.ts +22 -1
- package/form-radio-group/README.md +18 -17
- package/form-radio-group/fesm2022/form-radio-group.mjs +47 -19
- package/form-radio-group/types/form-radio-group.d.ts +22 -1
- package/form-searchable-multiselect/README.md +18 -17
- package/form-searchable-multiselect/fesm2022/form-searchable-multiselect.mjs +47 -19
- package/form-searchable-multiselect/types/form-searchable-multiselect.d.ts +22 -1
- package/form-select/README.md +20 -19
- package/form-select/fesm2022/form-select.mjs +47 -19
- package/form-select/types/form-select.d.ts +22 -1
- package/form-slider/README.md +19 -18
- package/form-slider/fesm2022/form-slider.mjs +46 -13
- package/form-slider/types/form-slider.d.ts +22 -1
- package/form-switch/README.md +16 -15
- package/form-switch/fesm2022/form-switch.mjs +47 -19
- package/form-switch/types/form-switch.d.ts +22 -1
- package/form-text-input/README.md +27 -26
- package/form-text-input/fesm2022/form-text-input.mjs +47 -19
- package/form-text-input/types/form-text-input.d.ts +22 -1
- package/form-textarea/README.md +23 -22
- package/form-textarea/fesm2022/form-textarea.mjs +47 -19
- package/form-textarea/types/form-textarea.d.ts +22 -1
- package/form-toggle/README.md +17 -16
- package/form-toggle/fesm2022/form-toggle.mjs +48 -11
- package/form-toggle/types/form-toggle.d.ts +22 -3
- package/form-toggle-group/README.md +20 -19
- package/form-toggle-group/fesm2022/form-toggle-group.mjs +47 -19
- package/form-toggle-group/types/form-toggle-group.d.ts +22 -1
- package/package.json +5 -1
- package/stepper/README.md +353 -0
- package/stepper/fesm2022/stepper.mjs +686 -0
- package/stepper/package.json +24 -0
- package/stepper/types/stepper.d.ts +116 -0
|
@@ -14,6 +14,13 @@ class EgFormField {
|
|
|
14
14
|
form = this.formGroupDirective.form;
|
|
15
15
|
statusSignal = signal(null, /* @ts-ignore */
|
|
16
16
|
...(ngDevMode ? [{ debugName: "statusSignal" }] : /* istanbul ignore next */ []));
|
|
17
|
+
/**
|
|
18
|
+
* Mirrors `FormGroupDirective.submitted` (plain boolean) into a signal so
|
|
19
|
+
* `hasError` stays reactive under OnPush and errors appear after submit
|
|
20
|
+
* even when the control was never touched/dirty.
|
|
21
|
+
*/
|
|
22
|
+
submittedSignal = signal(false, /* @ts-ignore */
|
|
23
|
+
...(ngDevMode ? [{ debugName: "submittedSignal" }] : /* istanbul ignore next */ []));
|
|
17
24
|
sub = new Subscription();
|
|
18
25
|
ngAfterContentInit() {
|
|
19
26
|
const ctrlDir = this.control();
|
|
@@ -24,6 +31,11 @@ class EgFormField {
|
|
|
24
31
|
this.statusSignal.set(ctrlDir.control.status);
|
|
25
32
|
}
|
|
26
33
|
}
|
|
34
|
+
ngDoCheck() {
|
|
35
|
+
const submitted = !!this.formGroupDirective?.submitted;
|
|
36
|
+
if (this.submittedSignal() !== submitted)
|
|
37
|
+
this.submittedSignal.set(submitted);
|
|
38
|
+
}
|
|
27
39
|
ngOnDestroy() {
|
|
28
40
|
this.sub.unsubscribe();
|
|
29
41
|
}
|
|
@@ -32,7 +44,9 @@ class EgFormField {
|
|
|
32
44
|
if (!ctrlDir)
|
|
33
45
|
return false;
|
|
34
46
|
this.statusSignal();
|
|
35
|
-
|
|
47
|
+
this.submittedSignal();
|
|
48
|
+
return (!!ctrlDir.control.errors &&
|
|
49
|
+
(ctrlDir.control.touched || ctrlDir.control.dirty || !!this.formGroupDirective?.submitted));
|
|
36
50
|
}, /* @ts-ignore */
|
|
37
51
|
...(ngDevMode ? [{ debugName: "hasError" }] : /* istanbul ignore next */ []));
|
|
38
52
|
firstErrorKey = computed(() => {
|
|
@@ -1,17 +1,24 @@
|
|
|
1
1
|
import * as _angular_core from '@angular/core';
|
|
2
|
-
import { AfterContentInit, OnDestroy } from '@angular/core';
|
|
2
|
+
import { AfterContentInit, DoCheck, OnDestroy } from '@angular/core';
|
|
3
3
|
import { FormControlName, FormGroup } from '@angular/forms';
|
|
4
4
|
import { ClassValue } from 'clsx';
|
|
5
5
|
|
|
6
|
-
declare class EgFormField implements AfterContentInit, OnDestroy {
|
|
6
|
+
declare class EgFormField implements AfterContentInit, DoCheck, OnDestroy {
|
|
7
7
|
readonly userClass: _angular_core.InputSignal<ClassValue>;
|
|
8
8
|
protected readonly _computedClass: _angular_core.Signal<string>;
|
|
9
9
|
readonly control: _angular_core.Signal<FormControlName | undefined>;
|
|
10
10
|
private readonly formGroupDirective;
|
|
11
11
|
readonly form: FormGroup;
|
|
12
12
|
private statusSignal;
|
|
13
|
+
/**
|
|
14
|
+
* Mirrors `FormGroupDirective.submitted` (plain boolean) into a signal so
|
|
15
|
+
* `hasError` stays reactive under OnPush and errors appear after submit
|
|
16
|
+
* even when the control was never touched/dirty.
|
|
17
|
+
*/
|
|
18
|
+
private submittedSignal;
|
|
13
19
|
private sub;
|
|
14
20
|
ngAfterContentInit(): void;
|
|
21
|
+
ngDoCheck(): void;
|
|
15
22
|
ngOnDestroy(): void;
|
|
16
23
|
readonly hasError: _angular_core.Signal<boolean>;
|
|
17
24
|
readonly firstErrorKey: _angular_core.Signal<string | null>;
|
package/form-input-otp/README.md
CHANGED
|
@@ -76,22 +76,23 @@ Selector (from source): `eg-form-input-otp` (standalone component, host `tw:w-fu
|
|
|
76
76
|
|
|
77
77
|
### `EgFormInputOtp` — `eg-form-input-otp`
|
|
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
|
-
| `
|
|
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
|
+
| `length` | `number` | `6` | Slot count; one `hlm-input-otp-slot` is rendered per unit. |
|
|
89
|
+
| `disabled` | `boolean` | `false` | Locks interaction (form control stays enabled). |
|
|
90
|
+
| `required` | `boolean` | `false` | Shows a red `*` next to the label. |
|
|
91
|
+
| `class` | `ClassValue` | `''` | Extra host classes (base `tw:w-full`). |
|
|
92
|
+
| `labelClass` | `string` | `''` | Extra label classes (base `tw:mb-1`). |
|
|
93
|
+
| `otpClass` | `string` | `''` | Extra OTP container classes. |
|
|
94
|
+
| `errorClass` | `string` | `''` | Extra error classes (base `tw:mt-0`). |
|
|
95
|
+
| `hintClass` | `string` | `''` | Extra hint classes (base `tw:mt-0`). |
|
|
95
96
|
|
|
96
97
|
| Member | Description |
|
|
97
98
|
| -------------------- | -------------------------------------------------------------------------------- |
|
|
@@ -2,7 +2,7 @@ import * as i0 from '@angular/core';
|
|
|
2
2
|
import { InjectionToken, inject, input, numberAttribute, 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-tw/form-field';
|
|
5
|
+
import { injectEgFormErrorMessages, HlmFormIdGenerator, injectEgFormSharedConfig, resolveEgFormError, HlmFormField, HlmError, HlmHint } from '@egose/shadcn-theme-ng-tw/form-field';
|
|
6
6
|
import { HlmLabel } from '@egose/shadcn-theme-ng-tw/label';
|
|
7
7
|
import { BrnInputOtp } from '@spartan-ng/brain/input-otp';
|
|
8
8
|
import * as i2 from '@egose/shadcn-theme-ng-tw/input-otp';
|
|
@@ -19,8 +19,10 @@ function injectEgFormInputOtpConfig() {
|
|
|
19
19
|
|
|
20
20
|
class EgFormInputOtp {
|
|
21
21
|
formGroupDirective = inject(FormGroupDirective);
|
|
22
|
+
_errorMessages = injectEgFormErrorMessages();
|
|
22
23
|
generatedId = inject(HlmFormIdGenerator).generate('eg-form-input-otp');
|
|
23
24
|
_config = injectEgFormInputOtpConfig();
|
|
25
|
+
_shared = injectEgFormSharedConfig();
|
|
24
26
|
label = input(undefined, /* @ts-ignore */
|
|
25
27
|
...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
|
|
26
28
|
controlId = input(undefined, /* @ts-ignore */
|
|
@@ -29,6 +31,13 @@ class EgFormInputOtp {
|
|
|
29
31
|
...(ngDevMode ? [{ debugName: "controlName" }] : /* istanbul ignore next */ []));
|
|
30
32
|
error = input(undefined, /* @ts-ignore */
|
|
31
33
|
...(ngDevMode ? [{ debugName: "error" }] : /* istanbul ignore next */ []));
|
|
34
|
+
/**
|
|
35
|
+
* Auto-resolve the displayed message from the control's `ValidationErrors`
|
|
36
|
+
* when `error()` is unset. Explicit `error()` always wins. Set to `false`
|
|
37
|
+
* for manual-only messages.
|
|
38
|
+
*/
|
|
39
|
+
autoError = input(true, /* @ts-ignore */
|
|
40
|
+
...(ngDevMode ? [{ debugName: "autoError" }] : /* istanbul ignore next */ []));
|
|
32
41
|
hint = input(undefined, /* @ts-ignore */
|
|
33
42
|
...(ngDevMode ? [{ debugName: "hint" }] : /* istanbul ignore next */ []));
|
|
34
43
|
id = input(undefined, /* @ts-ignore */
|
|
@@ -44,6 +53,32 @@ class EgFormInputOtp {
|
|
|
44
53
|
...(ngDevMode ? [{ debugName: "errorId" }] : /* istanbul ignore next */ []));
|
|
45
54
|
hintId = computed(() => `${this.effectiveId()}-hint`, /* @ts-ignore */
|
|
46
55
|
...(ngDevMode ? [{ debugName: "hintId" }] : /* istanbul ignore next */ []));
|
|
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() {
|
|
77
|
+
const control = this.formGroupDirective.form.get(this.controlName());
|
|
78
|
+
return (!!this.resolvedError() &&
|
|
79
|
+
!!control?.invalid &&
|
|
80
|
+
(control.dirty || control.touched || this.formGroupDirective.submitted));
|
|
81
|
+
}
|
|
47
82
|
slotIndexes = computed(() => Array.from({ length: this.length() }, (_, i) => i), /* @ts-ignore */
|
|
48
83
|
...(ngDevMode ? [{ debugName: "slotIndexes" }] : /* istanbul ignore next */ []));
|
|
49
84
|
/**
|
|
@@ -69,19 +104,18 @@ class EgFormInputOtp {
|
|
|
69
104
|
// Computed classes (library base < global config < per-instance)
|
|
70
105
|
$userClass = computed(() => hlm('tw:w-full', this.userClass()), /* @ts-ignore */
|
|
71
106
|
...(ngDevMode ? [{ debugName: "$userClass" }] : /* istanbul ignore next */ []));
|
|
72
|
-
$labelClass = computed(() => hlm('tw:mb-1', this._config.labelClass, this.labelClass()), /* @ts-ignore */
|
|
107
|
+
$labelClass = computed(() => hlm('tw:mb-1', this._shared.labelClass, this._config.labelClass, this.labelClass()), /* @ts-ignore */
|
|
73
108
|
...(ngDevMode ? [{ debugName: "$labelClass" }] : /* istanbul ignore next */ []));
|
|
74
|
-
$otpClass = computed(() => hlm(this._config.otpClass, this.otpClass()), /* @ts-ignore */
|
|
109
|
+
$otpClass = computed(() => hlm(this._shared.otpClass, this._config.otpClass, this.otpClass()), /* @ts-ignore */
|
|
75
110
|
...(ngDevMode ? [{ debugName: "$otpClass" }] : /* istanbul ignore next */ []));
|
|
76
|
-
$errorClass = computed(() => hlm('tw:mt-0', this._config.errorClass, this.errorClass()), /* @ts-ignore */
|
|
111
|
+
$errorClass = computed(() => hlm('tw:mt-0', this._shared.errorClass, this._config.errorClass, this.errorClass()), /* @ts-ignore */
|
|
77
112
|
...(ngDevMode ? [{ debugName: "$errorClass" }] : /* istanbul ignore next */ []));
|
|
78
|
-
$hintClass = computed(() => hlm('tw:mt-0', this._config.hintClass, this.hintClass()), /* @ts-ignore */
|
|
113
|
+
$hintClass = computed(() => hlm('tw:mt-0', this._shared.hintClass, this._config.hintClass, this.hintClass()), /* @ts-ignore */
|
|
79
114
|
...(ngDevMode ? [{ debugName: "$hintClass" }] : /* istanbul ignore next */ []));
|
|
80
115
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: EgFormInputOtp, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
81
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.3", type: EgFormInputOtp, isStandalone: true, selector: "eg-form-input-otp", 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 }, length: { classPropertyName: "length", publicName: "length", 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 }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, labelClass: { classPropertyName: "labelClass", publicName: "labelClass", isSignal: true, isRequired: false, transformFunction: null }, otpClass: { classPropertyName: "otpClass", publicName: "otpClass", 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: `
|
|
116
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.3", type: EgFormInputOtp, isStandalone: true, selector: "eg-form-input-otp", 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 }, length: { classPropertyName: "length", publicName: "length", 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 }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, labelClass: { classPropertyName: "labelClass", publicName: "labelClass", isSignal: true, isRequired: false, transformFunction: null }, otpClass: { classPropertyName: "otpClass", publicName: "otpClass", 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: `
|
|
82
117
|
@let lbl = label();
|
|
83
118
|
@let cnm = controlName();
|
|
84
|
-
@let err = error();
|
|
85
119
|
@let hnt = hint();
|
|
86
120
|
@let rqrd = required();
|
|
87
121
|
|
|
@@ -110,9 +144,9 @@ class EgFormInputOtp {
|
|
|
110
144
|
</div>
|
|
111
145
|
</brn-input-otp>
|
|
112
146
|
|
|
113
|
-
@if (
|
|
147
|
+
@if (showError()) {
|
|
114
148
|
<hlm-error [id]="errorId()" [class]="$errorClass()">
|
|
115
|
-
{{
|
|
149
|
+
{{ resolvedError() }}
|
|
116
150
|
</hlm-error>
|
|
117
151
|
}
|
|
118
152
|
|
|
@@ -137,7 +171,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImpor
|
|
|
137
171
|
template: `
|
|
138
172
|
@let lbl = label();
|
|
139
173
|
@let cnm = controlName();
|
|
140
|
-
@let err = error();
|
|
141
174
|
@let hnt = hint();
|
|
142
175
|
@let rqrd = required();
|
|
143
176
|
|
|
@@ -166,9 +199,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImpor
|
|
|
166
199
|
</div>
|
|
167
200
|
</brn-input-otp>
|
|
168
201
|
|
|
169
|
-
@if (
|
|
202
|
+
@if (showError()) {
|
|
170
203
|
<hlm-error [id]="errorId()" [class]="$errorClass()">
|
|
171
|
-
{{
|
|
204
|
+
{{ resolvedError() }}
|
|
172
205
|
</hlm-error>
|
|
173
206
|
}
|
|
174
207
|
|
|
@@ -180,7 +213,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImpor
|
|
|
180
213
|
</hlm-form-field>
|
|
181
214
|
`,
|
|
182
215
|
}]
|
|
183
|
-
}], 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 }] }], length: [{ type: i0.Input, args: [{ isSignal: true, alias: "length", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], labelClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelClass", required: false }] }], otpClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "otpClass", required: false }] }], errorClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorClass", required: false }] }], hintClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "hintClass", required: false }] }] } });
|
|
216
|
+
}], 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 }] }], length: [{ type: i0.Input, args: [{ isSignal: true, alias: "length", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], labelClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelClass", required: false }] }], otpClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "otpClass", required: false }] }], errorClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorClass", required: false }] }], hintClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "hintClass", required: false }] }] } });
|
|
184
217
|
|
|
185
218
|
/*
|
|
186
219
|
* Public API Surface of form-input-otp
|
|
@@ -5,12 +5,20 @@ import { NumberInput } from '@angular/cdk/coercion';
|
|
|
5
5
|
|
|
6
6
|
declare class EgFormInputOtp {
|
|
7
7
|
private readonly formGroupDirective;
|
|
8
|
+
private readonly _errorMessages;
|
|
8
9
|
private readonly generatedId;
|
|
9
10
|
private readonly _config;
|
|
11
|
+
private readonly _shared;
|
|
10
12
|
label: _angular_core.InputSignal<string | undefined>;
|
|
11
13
|
controlId: _angular_core.InputSignal<string | undefined>;
|
|
12
14
|
controlName: _angular_core.InputSignal<string>;
|
|
13
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>;
|
|
14
22
|
hint: _angular_core.InputSignal<string | undefined>;
|
|
15
23
|
id: _angular_core.InputSignal<string | undefined>;
|
|
16
24
|
length: _angular_core.InputSignalWithTransform<number, NumberInput>;
|
|
@@ -19,6 +27,19 @@ declare class EgFormInputOtp {
|
|
|
19
27
|
readonly effectiveId: _angular_core.Signal<string>;
|
|
20
28
|
readonly errorId: _angular_core.Signal<string>;
|
|
21
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;
|
|
22
43
|
readonly slotIndexes: _angular_core.Signal<number[]>;
|
|
23
44
|
/**
|
|
24
45
|
* Combined lock for the brain `linkedSignal`-based disabled state: the raw
|
|
@@ -37,7 +58,7 @@ declare class EgFormInputOtp {
|
|
|
37
58
|
$errorClass: _angular_core.Signal<string>;
|
|
38
59
|
$hintClass: _angular_core.Signal<string>;
|
|
39
60
|
static ɵfac: _angular_core.ɵɵFactoryDeclaration<EgFormInputOtp, never>;
|
|
40
|
-
static ɵcmp: _angular_core.ɵɵComponentDeclaration<EgFormInputOtp, "eg-form-input-otp", 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; }; "length": { "alias": "length"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "userClass": { "alias": "class"; "required": false; "isSignal": true; }; "labelClass": { "alias": "labelClass"; "required": false; "isSignal": true; }; "otpClass": { "alias": "otpClass"; "required": false; "isSignal": true; }; "errorClass": { "alias": "errorClass"; "required": false; "isSignal": true; }; "hintClass": { "alias": "hintClass"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
|
|
61
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<EgFormInputOtp, "eg-form-input-otp", 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; }; "length": { "alias": "length"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "userClass": { "alias": "class"; "required": false; "isSignal": true; }; "labelClass": { "alias": "labelClass"; "required": false; "isSignal": true; }; "otpClass": { "alias": "otpClass"; "required": false; "isSignal": true; }; "errorClass": { "alias": "errorClass"; "required": false; "isSignal": true; }; "hintClass": { "alias": "hintClass"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
|
|
41
62
|
}
|
|
42
63
|
|
|
43
64
|
interface EgFormInputOtpConfig {
|
|
@@ -61,31 +61,32 @@ Selector (from source): `eg-form-month-year-picker` (standalone component, host
|
|
|
61
61
|
|
|
62
62
|
### `EgFormMonthYearPicker` — `eg-form-month-year-picker`
|
|
63
63
|
|
|
64
|
-
| Input | Type | Default | Description
|
|
65
|
-
| ------------------- | --------------------------------- | -------------- |
|
|
66
|
-
| `controlName` | `string` | `''` | `formControlName` key inside the parent `FormGroup`. **Required.**
|
|
67
|
-
| `label` | `string \| undefined` | — | Label text (hidden when omitted).
|
|
68
|
-
| `error` | `string \| undefined` | — | Error text shown when invalid.
|
|
69
|
-
| `
|
|
70
|
-
| `
|
|
71
|
-
| `
|
|
72
|
-
| `
|
|
73
|
-
| `
|
|
74
|
-
| `
|
|
75
|
-
| `
|
|
76
|
-
| `
|
|
77
|
-
| `
|
|
78
|
-
| `
|
|
79
|
-
| `
|
|
80
|
-
| `
|
|
81
|
-
| `
|
|
82
|
-
| `
|
|
83
|
-
| `
|
|
84
|
-
| `
|
|
85
|
-
| `
|
|
86
|
-
| `
|
|
87
|
-
| `
|
|
88
|
-
| `
|
|
64
|
+
| Input | Type | Default | Description |
|
|
65
|
+
| ------------------- | --------------------------------- | -------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
|
|
66
|
+
| `controlName` | `string` | `''` | `formControlName` key inside the parent `FormGroup`. **Required.** |
|
|
67
|
+
| `label` | `string \| undefined` | — | Label text (hidden when omitted). |
|
|
68
|
+
| `error` | `string \| undefined` | — | Error text shown when invalid. |
|
|
69
|
+
| `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`. |
|
|
70
|
+
| `hint` | `string \| undefined` | — | Hint text shown otherwise. |
|
|
71
|
+
| `controlId` | `string \| undefined` | — | Explicit id (first priority for `effectiveId`). |
|
|
72
|
+
| `id` | `string \| undefined` | — | Fallback id (second priority). |
|
|
73
|
+
| `name` | `string \| undefined` | — | Native `name` forwarded to the inner input (`controlName` wins). |
|
|
74
|
+
| `placeholder` | `string` | `'MM/YYYY'` | Input placeholder. |
|
|
75
|
+
| `readonly` | `boolean` | `false` | Native `readonly` forwarded to the inner input. |
|
|
76
|
+
| `disabled` | `boolean` | `false` | Locks interaction (form control stays enabled). |
|
|
77
|
+
| `required` | `boolean` | `false` | Shows a red `*` next to the label. |
|
|
78
|
+
| `min` / `max` | `Date \| string \| null` | `null` | Date bounds forwarded to the picker. |
|
|
79
|
+
| `autoCloseOnSelect` | `boolean` | config default | Forwarded to the picker (falls back to `provideHlmMonthYearPickerConfig`, default `false`). |
|
|
80
|
+
| `formatDate` | `(date: Date) => string` | config default | Display format (falls back to `provideHlmMonthYearPickerConfig`, default `MM/YYYY`). |
|
|
81
|
+
| `transformDate` | `(date: Date) => Date` | config default | Model transform (falls back to `provideHlmMonthYearPickerConfig`). |
|
|
82
|
+
| `parseDate` | `(value: string) => Date \| null` | config default | Input parsing, forwarded to the input (falls back to `provideHlmMonthYearPickerConfig`). |
|
|
83
|
+
| `formatInputDate` | `(date: Date) => string` | config default | Edit format while focused (falls back to `provideHlmMonthYearPickerConfig`). |
|
|
84
|
+
| `class` | `ClassValue` | `''` | Extra host classes (base `tw:w-full`). |
|
|
85
|
+
| `labelClass` | `string` | `''` | Extra label classes (base `tw:mb-1`). |
|
|
86
|
+
| `pickerClass` | `string` | `''` | Extra picker-container classes (base `tw:mb-1`). |
|
|
87
|
+
| `inputClass` | `string` | `''` | Extra inner-input classes (e.g. `tw:text-lg`). |
|
|
88
|
+
| `errorClass` | `string` | `''` | Extra error classes (base `tw:mt-0`). |
|
|
89
|
+
| `hintClass` | `string` | `''` | Extra hint classes (base `tw:mt-0`). |
|
|
89
90
|
|
|
90
91
|
| Member | Description |
|
|
91
92
|
| -------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
@@ -2,15 +2,17 @@ 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-tw/form-field';
|
|
5
|
+
import { injectEgFormErrorMessages, HlmFormIdGenerator, injectEgFormSharedConfig, resolveEgFormError, HlmFormField, HlmError, HlmHint } from '@egose/shadcn-theme-ng-tw/form-field';
|
|
6
6
|
import { HlmLabel } from '@egose/shadcn-theme-ng-tw/label';
|
|
7
7
|
import { injectHlmMonthYearPickerConfig, HlmMonthYearPicker, HlmMonthYearInput } from '@egose/shadcn-theme-ng-tw/date-picker';
|
|
8
8
|
import { hlm } from '@egose/shadcn-theme-ng-tw/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();
|
|
15
|
+
_shared = injectEgFormSharedConfig();
|
|
14
16
|
label = input(undefined, /* @ts-ignore */
|
|
15
17
|
...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
|
|
16
18
|
controlId = input(undefined, /* @ts-ignore */
|
|
@@ -19,6 +21,13 @@ class EgFormMonthYearPicker {
|
|
|
19
21
|
...(ngDevMode ? [{ debugName: "controlName" }] : /* istanbul ignore next */ []));
|
|
20
22
|
error = input(undefined, /* @ts-ignore */
|
|
21
23
|
...(ngDevMode ? [{ debugName: "error" }] : /* istanbul ignore next */ []));
|
|
24
|
+
/**
|
|
25
|
+
* Auto-resolve the displayed message from the control's `ValidationErrors`
|
|
26
|
+
* when `error()` is unset. Explicit `error()` always wins. Set to `false`
|
|
27
|
+
* for manual-only messages.
|
|
28
|
+
*/
|
|
29
|
+
autoError = input(true, /* @ts-ignore */
|
|
30
|
+
...(ngDevMode ? [{ debugName: "autoError" }] : /* istanbul ignore next */ []));
|
|
22
31
|
hint = input(undefined, /* @ts-ignore */
|
|
23
32
|
...(ngDevMode ? [{ debugName: "hint" }] : /* istanbul ignore next */ []));
|
|
24
33
|
id = input(undefined, /* @ts-ignore */
|
|
@@ -54,6 +63,32 @@ class EgFormMonthYearPicker {
|
|
|
54
63
|
...(ngDevMode ? [{ debugName: "errorId" }] : /* istanbul ignore next */ []));
|
|
55
64
|
hintId = computed(() => `${this.effectiveId()}-hint`, /* @ts-ignore */
|
|
56
65
|
...(ngDevMode ? [{ debugName: "hintId" }] : /* istanbul ignore next */ []));
|
|
66
|
+
/**
|
|
67
|
+
* Displayed message: explicit `error()` wins; otherwise (when `autoError()`)
|
|
68
|
+
* auto-resolved from the control's `ValidationErrors`. Plain method (not a
|
|
69
|
+
* computed): `ValidationErrors` is not a signal, so the control must be read
|
|
70
|
+
* fresh on every change-detection pass.
|
|
71
|
+
*/
|
|
72
|
+
resolvedError() {
|
|
73
|
+
const explicit = this.error();
|
|
74
|
+
if (explicit)
|
|
75
|
+
return explicit;
|
|
76
|
+
if (!this.autoError())
|
|
77
|
+
return undefined;
|
|
78
|
+
const control = this.formGroupDirective.form.get(this.controlName());
|
|
79
|
+
return resolveEgFormError(control?.errors ?? null, this.label(), this._errorMessages);
|
|
80
|
+
}
|
|
81
|
+
/**
|
|
82
|
+
* Whether the error is surfaced: message present + control invalid +
|
|
83
|
+
* touched/dirty/submitted. Gates the visual `<hlm-error>` (and
|
|
84
|
+
* `describedBy()`, where present) so sighted and screen-reader output agree.
|
|
85
|
+
*/
|
|
86
|
+
showError() {
|
|
87
|
+
const control = this.formGroupDirective.form.get(this.controlName());
|
|
88
|
+
return (!!this.resolvedError() &&
|
|
89
|
+
!!control?.invalid &&
|
|
90
|
+
(control.dirty || control.touched || this.formGroupDirective.submitted));
|
|
91
|
+
}
|
|
57
92
|
/**
|
|
58
93
|
* Bounds projected onto the picker's `Date` model. The cast keeps the
|
|
59
94
|
* template's generic inference on `Date` while passing runtime values
|
|
@@ -64,12 +99,7 @@ class EgFormMonthYearPicker {
|
|
|
64
99
|
$max = computed(() => this.max(), /* @ts-ignore */
|
|
65
100
|
...(ngDevMode ? [{ debugName: "$max" }] : /* istanbul ignore next */ []));
|
|
66
101
|
describedBy() {
|
|
67
|
-
|
|
68
|
-
return this.error() && control?.invalid && (control.dirty || control.touched)
|
|
69
|
-
? this.errorId()
|
|
70
|
-
: this.hint()
|
|
71
|
-
? this.hintId()
|
|
72
|
-
: null;
|
|
102
|
+
return this.showError() ? this.errorId() : this.hint() ? this.hintId() : null;
|
|
73
103
|
}
|
|
74
104
|
// Styling
|
|
75
105
|
userClass = input('', { ...(ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {}), alias: 'class' });
|
|
@@ -86,21 +116,20 @@ class EgFormMonthYearPicker {
|
|
|
86
116
|
// Computed classes (library base < global config < per-instance)
|
|
87
117
|
$userClass = computed(() => hlm('tw:w-full', this.userClass()), /* @ts-ignore */
|
|
88
118
|
...(ngDevMode ? [{ debugName: "$userClass" }] : /* istanbul ignore next */ []));
|
|
89
|
-
$labelClass = computed(() => hlm('tw:mb-1', this._config.labelClass, this.labelClass()), /* @ts-ignore */
|
|
119
|
+
$labelClass = computed(() => hlm('tw:mb-1', this._shared.labelClass, this._config.labelClass, this.labelClass()), /* @ts-ignore */
|
|
90
120
|
...(ngDevMode ? [{ debugName: "$labelClass" }] : /* istanbul ignore next */ []));
|
|
91
|
-
$pickerClass = computed(() => hlm('tw:mb-1', this._config.pickerClass, this.pickerClass()), /* @ts-ignore */
|
|
121
|
+
$pickerClass = computed(() => hlm('tw:mb-1', this._shared.pickerClass, this._config.pickerClass, this.pickerClass()), /* @ts-ignore */
|
|
92
122
|
...(ngDevMode ? [{ debugName: "$pickerClass" }] : /* istanbul ignore next */ []));
|
|
93
|
-
$inputClass = computed(() => hlm(this._config.inputClass, this.inputClass()), /* @ts-ignore */
|
|
123
|
+
$inputClass = computed(() => hlm(this._shared.inputClass, this._config.inputClass, this.inputClass()), /* @ts-ignore */
|
|
94
124
|
...(ngDevMode ? [{ debugName: "$inputClass" }] : /* istanbul ignore next */ []));
|
|
95
|
-
$errorClass = computed(() => hlm('tw:mt-0', this._config.errorClass, this.errorClass()), /* @ts-ignore */
|
|
125
|
+
$errorClass = computed(() => hlm('tw:mt-0', this._shared.errorClass, this._config.errorClass, this.errorClass()), /* @ts-ignore */
|
|
96
126
|
...(ngDevMode ? [{ debugName: "$errorClass" }] : /* istanbul ignore next */ []));
|
|
97
|
-
$hintClass = computed(() => hlm('tw:mt-0', this._config.hintClass, this.hintClass()), /* @ts-ignore */
|
|
127
|
+
$hintClass = computed(() => hlm('tw:mt-0', this._shared.hintClass, this._config.hintClass, this.hintClass()), /* @ts-ignore */
|
|
98
128
|
...(ngDevMode ? [{ debugName: "$hintClass" }] : /* istanbul ignore next */ []));
|
|
99
129
|
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: `
|
|
130
|
+
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: `
|
|
101
131
|
@let lbl = label();
|
|
102
132
|
@let cnm = controlName();
|
|
103
|
-
@let err = error();
|
|
104
133
|
@let hnt = hint();
|
|
105
134
|
@let rqrd = required();
|
|
106
135
|
|
|
@@ -137,9 +166,9 @@ class EgFormMonthYearPicker {
|
|
|
137
166
|
/>
|
|
138
167
|
</hlm-month-year-picker>
|
|
139
168
|
|
|
140
|
-
@if (
|
|
169
|
+
@if (showError()) {
|
|
141
170
|
<hlm-error [id]="errorId()" [class]="$errorClass()">
|
|
142
|
-
{{
|
|
171
|
+
{{ resolvedError() }}
|
|
143
172
|
</hlm-error>
|
|
144
173
|
}
|
|
145
174
|
|
|
@@ -164,7 +193,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImpor
|
|
|
164
193
|
template: `
|
|
165
194
|
@let lbl = label();
|
|
166
195
|
@let cnm = controlName();
|
|
167
|
-
@let err = error();
|
|
168
196
|
@let hnt = hint();
|
|
169
197
|
@let rqrd = required();
|
|
170
198
|
|
|
@@ -201,9 +229,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImpor
|
|
|
201
229
|
/>
|
|
202
230
|
</hlm-month-year-picker>
|
|
203
231
|
|
|
204
|
-
@if (
|
|
232
|
+
@if (showError()) {
|
|
205
233
|
<hlm-error [id]="errorId()" [class]="$errorClass()">
|
|
206
|
-
{{
|
|
234
|
+
{{ resolvedError() }}
|
|
207
235
|
</hlm-error>
|
|
208
236
|
}
|
|
209
237
|
|
|
@@ -215,7 +243,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImpor
|
|
|
215
243
|
</hlm-form-field>
|
|
216
244
|
`,
|
|
217
245
|
}]
|
|
218
|
-
}], 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 }] }] } });
|
|
246
|
+
}], 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 }] }] } });
|
|
219
247
|
|
|
220
248
|
/*
|
|
221
249
|
* Public API Surface of form-month-year-picker
|