@egose/shadcn-theme-ng 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 +44 -9
- package/form-autocomplete/types/form-autocomplete.d.ts +22 -1
- package/form-checkbox/README.md +20 -19
- package/form-checkbox/fesm2022/form-checkbox.mjs +99 -15
- package/form-checkbox/types/form-checkbox.d.ts +43 -3
- package/form-combobox/README.md +21 -20
- package/form-combobox/fesm2022/form-combobox.mjs +44 -9
- 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 +45 -15
- 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 +45 -15
- 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 +45 -15
- 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 +43 -8
- 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 +45 -15
- 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 +44 -14
- 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 +44 -14
- 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 +44 -14
- 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 +44 -14
- 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 +44 -14
- package/form-select/types/form-select.d.ts +22 -1
- package/form-slider/README.md +19 -18
- package/form-slider/fesm2022/form-slider.mjs +43 -8
- package/form-slider/types/form-slider.d.ts +22 -1
- package/form-switch/README.md +16 -15
- package/form-switch/fesm2022/form-switch.mjs +44 -14
- 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 +44 -14
- 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 +44 -14
- package/form-textarea/types/form-textarea.d.ts +22 -1
- package/form-toggle/README.md +17 -16
- package/form-toggle/fesm2022/form-toggle.mjs +47 -10
- 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 +44 -14
- 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 +396 -0
- package/stepper/package.json +24 -0
- package/stepper/types/stepper.d.ts +116 -0
|
@@ -1,17 +1,37 @@
|
|
|
1
1
|
import * as _angular_core from '@angular/core';
|
|
2
|
-
import { ValueProvider } from '@angular/core';
|
|
2
|
+
import { DoCheck, AfterContentInit, OnDestroy, ValueProvider } from '@angular/core';
|
|
3
3
|
import { ClassValue } from 'clsx';
|
|
4
4
|
|
|
5
|
-
declare class EgFormCheckbox {
|
|
5
|
+
declare class EgFormCheckbox implements DoCheck, AfterContentInit, OnDestroy {
|
|
6
6
|
private readonly formGroupDirective;
|
|
7
|
+
private readonly _errorMessages;
|
|
7
8
|
private readonly generatedId;
|
|
8
9
|
private readonly _config;
|
|
10
|
+
private readonly _shared;
|
|
11
|
+
/**
|
|
12
|
+
* Mirrors control status + parent submit state into signals so `showError`
|
|
13
|
+
* stays reactive under OnPush. `FormGroupDirective.submitted` and
|
|
14
|
+
* `ValidationErrors` are plain (non-signal) values, so without this the
|
|
15
|
+
* error would not appear on submit when the control was never
|
|
16
|
+
* touched/dirty (OnPush child is otherwise skipped). Same pattern as
|
|
17
|
+
* `EgFormToggle`.
|
|
18
|
+
*/
|
|
19
|
+
private readonly _status;
|
|
20
|
+
private readonly _submitted;
|
|
21
|
+
private _trackedControl;
|
|
22
|
+
private _controlSub;
|
|
9
23
|
readonly userClass: _angular_core.InputSignal<ClassValue>;
|
|
10
24
|
protected readonly _computedClass: _angular_core.Signal<string>;
|
|
11
25
|
label: _angular_core.InputSignal<string>;
|
|
12
26
|
controlId: _angular_core.InputSignal<string | undefined>;
|
|
13
27
|
controlName: _angular_core.InputSignal<string>;
|
|
14
28
|
error: _angular_core.InputSignal<string | undefined>;
|
|
29
|
+
/**
|
|
30
|
+
* Auto-resolve the displayed message from the control's `ValidationErrors`
|
|
31
|
+
* when `error()` is unset. Explicit `error()` always wins. Set to `false`
|
|
32
|
+
* for manual-only messages.
|
|
33
|
+
*/
|
|
34
|
+
autoError: _angular_core.InputSignal<boolean>;
|
|
15
35
|
hint: _angular_core.InputSignal<string | undefined>;
|
|
16
36
|
id: _angular_core.InputSignal<string | undefined>;
|
|
17
37
|
name: _angular_core.InputSignal<string | undefined>;
|
|
@@ -21,7 +41,27 @@ declare class EgFormCheckbox {
|
|
|
21
41
|
readonly effectiveId: _angular_core.Signal<string>;
|
|
22
42
|
readonly errorId: _angular_core.Signal<string>;
|
|
23
43
|
readonly hintId: _angular_core.Signal<string>;
|
|
44
|
+
/**
|
|
45
|
+
* Displayed message: explicit `error()` wins; otherwise (when `autoError()`)
|
|
46
|
+
* auto-resolved from the control's `ValidationErrors`. Plain method (not a
|
|
47
|
+
* computed): `ValidationErrors` is not a signal, so the control must be read
|
|
48
|
+
* fresh on every evaluation (`showError()` re-evaluates with it via the
|
|
49
|
+
* `_status`/`_submitted` signals).
|
|
50
|
+
*/
|
|
51
|
+
protected resolvedError(): string | undefined;
|
|
52
|
+
/**
|
|
53
|
+
* Whether the error is surfaced: message present + control invalid +
|
|
54
|
+
* touched/dirty/submitted. Gates the visual `<hlm-error>` (and
|
|
55
|
+
* `describedBy()`, where present) so sighted and screen-reader output agree.
|
|
56
|
+
* Computed over `_status`/`_submitted` signals so it re-evaluates under
|
|
57
|
+
* OnPush when the parent form is submitted or the control status changes.
|
|
58
|
+
*/
|
|
59
|
+
protected readonly showError: _angular_core.Signal<boolean>;
|
|
24
60
|
describedBy(): string | null;
|
|
61
|
+
ngAfterContentInit(): void;
|
|
62
|
+
ngDoCheck(): void;
|
|
63
|
+
ngOnDestroy(): void;
|
|
64
|
+
private _trackControl;
|
|
25
65
|
checkboxClass: _angular_core.InputSignal<string>;
|
|
26
66
|
labelClass: _angular_core.InputSignal<string>;
|
|
27
67
|
errorClass: _angular_core.InputSignal<string>;
|
|
@@ -31,7 +71,7 @@ declare class EgFormCheckbox {
|
|
|
31
71
|
$errorClass: _angular_core.Signal<string>;
|
|
32
72
|
$hintClass: _angular_core.Signal<string>;
|
|
33
73
|
static ɵfac: _angular_core.ɵɵFactoryDeclaration<EgFormCheckbox, never>;
|
|
34
|
-
static ɵcmp: _angular_core.ɵɵComponentDeclaration<EgFormCheckbox, "eg-form-checkbox", never, { "userClass": { "alias": "class"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "controlId": { "alias": "controlId"; "required": false; "isSignal": true; }; "controlName": { "alias": "controlName"; "required": false; "isSignal": true; }; "error": { "alias": "error"; "required": false; "isSignal": true; }; "hint": { "alias": "hint"; "required": false; "isSignal": true; }; "id": { "alias": "id"; "required": false; "isSignal": true; }; "name": { "alias": "name"; "required": false; "isSignal": true; }; "checked": { "alias": "checked"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "checkboxClass": { "alias": "checkboxClass"; "required": false; "isSignal": true; }; "labelClass": { "alias": "labelClass"; "required": false; "isSignal": true; }; "errorClass": { "alias": "errorClass"; "required": false; "isSignal": true; }; "hintClass": { "alias": "hintClass"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
|
|
74
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<EgFormCheckbox, "eg-form-checkbox", never, { "userClass": { "alias": "class"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "controlId": { "alias": "controlId"; "required": false; "isSignal": true; }; "controlName": { "alias": "controlName"; "required": false; "isSignal": true; }; "error": { "alias": "error"; "required": false; "isSignal": true; }; "autoError": { "alias": "autoError"; "required": false; "isSignal": true; }; "hint": { "alias": "hint"; "required": false; "isSignal": true; }; "id": { "alias": "id"; "required": false; "isSignal": true; }; "name": { "alias": "name"; "required": false; "isSignal": true; }; "checked": { "alias": "checked"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "checkboxClass": { "alias": "checkboxClass"; "required": false; "isSignal": true; }; "labelClass": { "alias": "labelClass"; "required": false; "isSignal": true; }; "errorClass": { "alias": "errorClass"; "required": false; "isSignal": true; }; "hintClass": { "alias": "hintClass"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
|
|
35
75
|
}
|
|
36
76
|
|
|
37
77
|
interface EgFormCheckboxConfig {
|
package/form-combobox/README.md
CHANGED
|
@@ -47,26 +47,27 @@ Selector (from source): `eg-form-combobox` (standalone component, host `tw:w-ful
|
|
|
47
47
|
|
|
48
48
|
### `EgFormCombobox` — `eg-form-combobox`
|
|
49
49
|
|
|
50
|
-
| Input | Type | Default | Description
|
|
51
|
-
| -------------- | ------------------------ | ------------------------ |
|
|
52
|
-
| `controlName` | `string` | `''` | `formControlName` key inside the parent `FormGroup`. **Required.**
|
|
53
|
-
| `mode` | `'single' \| 'multiple'` | `'multiple'` | `multiple` renders chips + multi-select (`string[]`); `single` renders a trigger button (`string \| null`).
|
|
54
|
-
| `label` | `string \| undefined` | — | Label text (hidden when omitted).
|
|
55
|
-
| `error` | `string \| undefined` | — | Error text shown when invalid.
|
|
56
|
-
| `
|
|
57
|
-
| `
|
|
58
|
-
| `
|
|
59
|
-
| `
|
|
60
|
-
| `
|
|
61
|
-
| `
|
|
62
|
-
| `
|
|
63
|
-
| `
|
|
64
|
-
| `
|
|
65
|
-
| `
|
|
66
|
-
| `
|
|
67
|
-
| `
|
|
68
|
-
| `
|
|
69
|
-
| `
|
|
50
|
+
| Input | Type | Default | Description |
|
|
51
|
+
| -------------- | ------------------------ | ------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
|
|
52
|
+
| `controlName` | `string` | `''` | `formControlName` key inside the parent `FormGroup`. **Required.** |
|
|
53
|
+
| `mode` | `'single' \| 'multiple'` | `'multiple'` | `multiple` renders chips + multi-select (`string[]`); `single` renders a trigger button (`string \| null`). |
|
|
54
|
+
| `label` | `string \| undefined` | — | Label text (hidden when omitted). |
|
|
55
|
+
| `error` | `string \| undefined` | — | Error text shown when invalid. |
|
|
56
|
+
| `autoError` | `boolean` | `true` | Auto-resolve the message from the control's `ValidationErrors` when `error` is unset. Explicit `error` always wins; `error=""` counts as unset. Global wording via `provideEgFormErrorMessages`. |
|
|
57
|
+
| `hint` | `string \| undefined` | — | Hint text shown otherwise. |
|
|
58
|
+
| `controlId` | `string \| undefined` | — | Explicit id (first priority for `effectiveId`). |
|
|
59
|
+
| `id` | `string \| undefined` | — | Fallback id (second priority). |
|
|
60
|
+
| `placeholder` | `string` | `'Pick…'` | Search input placeholder. |
|
|
61
|
+
| `emptyText` | `string` | `'Nothing left to add.'` | Text shown when no option matches. |
|
|
62
|
+
| `disabled` | `boolean` | `false` | Locks interaction (form control stays enabled). |
|
|
63
|
+
| `required` | `boolean` | `false` | Shows a red `*` next to the label. |
|
|
64
|
+
| `options` | `string[]` | `[]` | Rendered as `hlm-combobox-item` entries. |
|
|
65
|
+
| `class` | `ClassValue` | `''` | Extra host classes (base `tw:w-full`). |
|
|
66
|
+
| `labelClass` | `string` | `''` | Extra label classes (base `tw:mb-1`). |
|
|
67
|
+
| `controlClass` | `string` | `''` | Extra multi-root classes. |
|
|
68
|
+
| `chipsClass` | `string` | `''` | Extra chips-anchor classes. |
|
|
69
|
+
| `errorClass` | `string` | `''` | Extra error classes (base `tw:mt-0`). |
|
|
70
|
+
| `hintClass` | `string` | `''` | Extra hint classes (base `tw:mt-0`). |
|
|
70
71
|
|
|
71
72
|
| Member | Description |
|
|
72
73
|
| -------------------- | ---------------------------------------------------------------------------------- |
|
|
@@ -2,7 +2,7 @@ import * as i0 from '@angular/core';
|
|
|
2
2
|
import { InjectionToken, inject, viewChild, 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, injectEgFormSharedConfig, resolveEgFormError, HlmFormField, HlmError, HlmHint } from '@egose/shadcn-theme-ng/form-field';
|
|
6
6
|
import { HlmLabel } from '@egose/shadcn-theme-ng/label';
|
|
7
7
|
import { HlmCombobox, HlmComboboxChip, HlmComboboxChipInput, HlmComboboxChips, HlmComboboxContent, HlmComboboxEmpty, HlmComboboxInput, HlmComboboxItem, HlmComboboxList, HlmComboboxMultiple, HlmComboboxPortal, HlmComboboxTrigger } from '@egose/shadcn-theme-ng/combobox';
|
|
8
8
|
import { BrnComboboxMultiple, BrnCombobox } from '@spartan-ng/brain/combobox';
|
|
@@ -18,8 +18,10 @@ function injectEgFormComboboxConfig() {
|
|
|
18
18
|
|
|
19
19
|
class EgFormCombobox {
|
|
20
20
|
formGroupDirective = inject(FormGroupDirective);
|
|
21
|
+
_errorMessages = injectEgFormErrorMessages();
|
|
21
22
|
generatedId = inject(HlmFormIdGenerator).generate('eg-form-combobox');
|
|
22
23
|
_config = injectEgFormComboboxConfig();
|
|
24
|
+
_shared = injectEgFormSharedConfig();
|
|
23
25
|
_picker = viewChild((BrnComboboxMultiple), /* @ts-ignore */
|
|
24
26
|
...(ngDevMode ? [{ debugName: "_picker" }] : /* istanbul ignore next */ []));
|
|
25
27
|
_single = viewChild((BrnCombobox), /* @ts-ignore */
|
|
@@ -32,6 +34,13 @@ class EgFormCombobox {
|
|
|
32
34
|
...(ngDevMode ? [{ debugName: "controlName" }] : /* istanbul ignore next */ []));
|
|
33
35
|
error = input(undefined, /* @ts-ignore */
|
|
34
36
|
...(ngDevMode ? [{ debugName: "error" }] : /* istanbul ignore next */ []));
|
|
37
|
+
/**
|
|
38
|
+
* Auto-resolve the displayed message from the control's `ValidationErrors`
|
|
39
|
+
* when `error()` is unset. Explicit `error()` always wins. Set to `false`
|
|
40
|
+
* for manual-only messages.
|
|
41
|
+
*/
|
|
42
|
+
autoError = input(true, /* @ts-ignore */
|
|
43
|
+
...(ngDevMode ? [{ debugName: "autoError" }] : /* istanbul ignore next */ []));
|
|
35
44
|
hint = input(undefined, /* @ts-ignore */
|
|
36
45
|
...(ngDevMode ? [{ debugName: "hint" }] : /* istanbul ignore next */ []));
|
|
37
46
|
id = input(undefined, /* @ts-ignore */
|
|
@@ -59,6 +68,32 @@ class EgFormCombobox {
|
|
|
59
68
|
...(ngDevMode ? [{ debugName: "errorId" }] : /* istanbul ignore next */ []));
|
|
60
69
|
hintId = computed(() => `${this.effectiveId()}-hint`, /* @ts-ignore */
|
|
61
70
|
...(ngDevMode ? [{ debugName: "hintId" }] : /* istanbul ignore next */ []));
|
|
71
|
+
/**
|
|
72
|
+
* Displayed message: explicit `error()` wins; otherwise (when `autoError()`)
|
|
73
|
+
* auto-resolved from the control's `ValidationErrors`. Plain method (not a
|
|
74
|
+
* computed): `ValidationErrors` is not a signal, so the control must be read
|
|
75
|
+
* fresh on every change-detection pass.
|
|
76
|
+
*/
|
|
77
|
+
resolvedError() {
|
|
78
|
+
const explicit = this.error();
|
|
79
|
+
if (explicit)
|
|
80
|
+
return explicit;
|
|
81
|
+
if (!this.autoError())
|
|
82
|
+
return undefined;
|
|
83
|
+
const control = this.formGroupDirective.form.get(this.controlName());
|
|
84
|
+
return resolveEgFormError(control?.errors ?? null, this.label(), this._errorMessages);
|
|
85
|
+
}
|
|
86
|
+
/**
|
|
87
|
+
* Whether the error is surfaced: message present + control invalid +
|
|
88
|
+
* touched/dirty/submitted. Gates the visual `<hlm-error>` (and
|
|
89
|
+
* `describedBy()`, where present) so sighted and screen-reader output agree.
|
|
90
|
+
*/
|
|
91
|
+
showError() {
|
|
92
|
+
const control = this.formGroupDirective.form.get(this.controlName());
|
|
93
|
+
return (!!this.resolvedError() &&
|
|
94
|
+
!!control?.invalid &&
|
|
95
|
+
(control.dirty || control.touched || this.formGroupDirective.submitted));
|
|
96
|
+
}
|
|
62
97
|
/** Selected values read reactively from the brain model so chips track selection. */
|
|
63
98
|
selectedValues = computed(() => this._picker()?.value() ?? [], /* @ts-ignore */
|
|
64
99
|
...(ngDevMode ? [{ debugName: "selectedValues" }] : /* istanbul ignore next */ []));
|
|
@@ -90,18 +125,18 @@ class EgFormCombobox {
|
|
|
90
125
|
// ids render without an input-level describedby link.
|
|
91
126
|
$userClass = computed(() => hlm("w-full", this.userClass()), /* @ts-ignore */
|
|
92
127
|
...(ngDevMode ? [{ debugName: "$userClass" }] : /* istanbul ignore next */ []));
|
|
93
|
-
$labelClass = computed(() => hlm("mb-1", this._config.labelClass, this.labelClass()), /* @ts-ignore */
|
|
128
|
+
$labelClass = computed(() => hlm("mb-1", this._shared.labelClass, this._config.labelClass, this.labelClass()), /* @ts-ignore */
|
|
94
129
|
...(ngDevMode ? [{ debugName: "$labelClass" }] : /* istanbul ignore next */ []));
|
|
95
|
-
$controlClass = computed(() => hlm(this._config.controlClass, this.controlClass()), /* @ts-ignore */
|
|
130
|
+
$controlClass = computed(() => hlm(this._shared.controlClass, this._config.controlClass, this.controlClass()), /* @ts-ignore */
|
|
96
131
|
...(ngDevMode ? [{ debugName: "$controlClass" }] : /* istanbul ignore next */ []));
|
|
97
|
-
$chipsClass = computed(() => hlm(this._config.chipsClass, this.chipsClass()), /* @ts-ignore */
|
|
132
|
+
$chipsClass = computed(() => hlm(this._shared.chipsClass, this._config.chipsClass, this.chipsClass()), /* @ts-ignore */
|
|
98
133
|
...(ngDevMode ? [{ debugName: "$chipsClass" }] : /* istanbul ignore next */ []));
|
|
99
|
-
$errorClass = computed(() => hlm("mt-0", this._config.errorClass, this.errorClass()), /* @ts-ignore */
|
|
134
|
+
$errorClass = computed(() => hlm("mt-0", this._shared.errorClass, this._config.errorClass, this.errorClass()), /* @ts-ignore */
|
|
100
135
|
...(ngDevMode ? [{ debugName: "$errorClass" }] : /* istanbul ignore next */ []));
|
|
101
|
-
$hintClass = computed(() => hlm("mt-0", this._config.hintClass, this.hintClass()), /* @ts-ignore */
|
|
136
|
+
$hintClass = computed(() => hlm("mt-0", this._shared.hintClass, this._config.hintClass, this.hintClass()), /* @ts-ignore */
|
|
102
137
|
...(ngDevMode ? [{ debugName: "$hintClass" }] : /* istanbul ignore next */ []));
|
|
103
138
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: EgFormCombobox, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
104
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.3", type: EgFormCombobox, isStandalone: true, selector: "eg-form-combobox", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, controlId: { classPropertyName: "controlId", publicName: "controlId", isSignal: true, isRequired: false, transformFunction: null }, controlName: { classPropertyName: "controlName", publicName: "controlName", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, emptyText: { classPropertyName: "emptyText", publicName: "emptyText", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, labelClass: { classPropertyName: "labelClass", publicName: "labelClass", isSignal: true, isRequired: false, transformFunction: null }, controlClass: { classPropertyName: "controlClass", publicName: "controlClass", isSignal: true, isRequired: false, transformFunction: null }, chipsClass: { classPropertyName: "chipsClass", publicName: "chipsClass", 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 }], viewQueries: [{ propertyName: "_picker", first: true, predicate: (BrnComboboxMultiple), descendants: true, isSignal: true }, { propertyName: "_single", first: true, predicate: (BrnCombobox), descendants: true, isSignal: true }], ngImport: i0, template: "\n @let lbl = label();\n @let cnm = controlName();\n @let
|
|
139
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.3", type: EgFormCombobox, isStandalone: true, selector: "eg-form-combobox", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, controlId: { classPropertyName: "controlId", publicName: "controlId", isSignal: true, isRequired: false, transformFunction: null }, controlName: { classPropertyName: "controlName", publicName: "controlName", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, autoError: { classPropertyName: "autoError", publicName: "autoError", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, emptyText: { classPropertyName: "emptyText", publicName: "emptyText", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, labelClass: { classPropertyName: "labelClass", publicName: "labelClass", isSignal: true, isRequired: false, transformFunction: null }, controlClass: { classPropertyName: "controlClass", publicName: "controlClass", isSignal: true, isRequired: false, transformFunction: null }, chipsClass: { classPropertyName: "chipsClass", publicName: "chipsClass", 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 }], viewQueries: [{ propertyName: "_picker", first: true, predicate: (BrnComboboxMultiple), descendants: true, isSignal: true }, { propertyName: "_single", first: true, predicate: (BrnCombobox), descendants: true, isSignal: true }], 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 @if (mode() === 'single') {\n <hlm-combobox [formControlName]=\"cnm\" [disabled]=\"effectiveDisabled()\">\n <hlm-combobox-trigger [buttonId]=\"effectiveId()\" [class]=\"$controlClass()\">\n {{ singleDisplay() ?? placeholder() }}\n </hlm-combobox-trigger>\n <hlm-combobox-content *hlmComboboxPortal>\n <hlm-combobox-input [inputId]=\"effectiveId()\" [placeholder]=\"placeholder()\" />\n <div hlmComboboxList>\n @for (option of options(); track option) {\n <hlm-combobox-item [value]=\"option\">{{ option }}</hlm-combobox-item>\n }\n </div>\n <div hlmComboboxEmpty>{{ emptyText() }}</div>\n </hlm-combobox-content>\n </hlm-combobox>\n } @else {\n <hlm-combobox-multiple [formControlName]=\"cnm\" [disabled]=\"effectiveDisabled()\" [class]=\"$controlClass()\">\n <hlm-combobox-chips [class]=\"$chipsClass()\">\n @for (v of selectedValues(); track v) {\n <hlm-combobox-chip [value]=\"v\">{{ v }}</hlm-combobox-chip>\n }\n <input hlmComboboxChipInput [id]=\"effectiveId()\" [placeholder]=\"placeholder()\" />\n </hlm-combobox-chips>\n <hlm-combobox-content *hlmComboboxPortal>\n <div hlmComboboxList>\n @for (option of options(); track option) {\n <hlm-combobox-item [value]=\"option\">{{ option }}</hlm-combobox-item>\n }\n </div>\n <div hlmComboboxEmpty>{{ emptyText() }}</div>\n </hlm-combobox-content>\n </hlm-combobox-multiple>\n }\n\n @if (showError()) {\n <hlm-error [id]=\"errorId()\" [class]=\"$errorClass()\">\n {{ resolvedError() }}\n </hlm-error>\n }\n\n @if (hnt) {\n <hlm-hint [id]=\"hintId()\" [class]=\"$hintClass()\">\n {{ hnt }}\n </hlm-hint>\n }\n </hlm-form-field>\n ", isInline: true, dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: HlmFormField, selector: "hlm-form-field", inputs: ["class"] }, { kind: "directive", type: HlmError, selector: "hlm-error", inputs: ["class"] }, { kind: "directive", type: HlmHint, selector: "hlm-hint", inputs: ["class"] }, { kind: "directive", type: HlmLabel, selector: "[hlmLabel]", inputs: ["class"] }, { kind: "directive", type: HlmCombobox, selector: "[hlmCombobox],hlm-combobox" }, { kind: "component", type: HlmComboboxChip, selector: "hlm-combobox-chip", inputs: ["showRemove"] }, { kind: "directive", type: HlmComboboxChipInput, selector: "input[hlmComboboxChipInput]" }, { kind: "directive", type: HlmComboboxChips, selector: "[hlmComboboxChips],hlm-combobox-chips", inputs: ["forceInvalid"] }, { kind: "directive", type: HlmComboboxContent, selector: "[hlmComboboxContent],hlm-combobox-content" }, { kind: "directive", type: HlmComboboxEmpty, selector: "[hlmComboboxEmpty],hlm-combobox-empty" }, { kind: "component", type: HlmComboboxInput, selector: "hlm-combobox-input", inputs: ["inputId", "placeholder", "showTrigger", "showClear", "forceInvalid", "aria-invalid"] }, { kind: "component", type: HlmComboboxItem, selector: "hlm-combobox-item" }, { kind: "directive", type: HlmComboboxList, selector: "[hlmComboboxList]" }, { kind: "directive", type: HlmComboboxMultiple, selector: "[hlmComboboxMultiple],hlm-combobox-multiple" }, { kind: "directive", type: HlmComboboxPortal, selector: "[hlmComboboxPortal]" }, { kind: "component", type: HlmComboboxTrigger, selector: "hlm-combobox-trigger", inputs: ["class", "buttonId", "variant", "forceInvalid"] }] });
|
|
105
140
|
}
|
|
106
141
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: EgFormCombobox, decorators: [{
|
|
107
142
|
type: Component,
|
|
@@ -131,9 +166,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImpor
|
|
|
131
166
|
HlmComboboxTrigger,
|
|
132
167
|
],
|
|
133
168
|
providers: [{ provide: ControlContainer, useExisting: FormGroupDirective }],
|
|
134
|
-
template: "\n @let lbl = label();\n @let cnm = controlName();\n @let
|
|
169
|
+
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 @if (mode() === 'single') {\n <hlm-combobox [formControlName]=\"cnm\" [disabled]=\"effectiveDisabled()\">\n <hlm-combobox-trigger [buttonId]=\"effectiveId()\" [class]=\"$controlClass()\">\n {{ singleDisplay() ?? placeholder() }}\n </hlm-combobox-trigger>\n <hlm-combobox-content *hlmComboboxPortal>\n <hlm-combobox-input [inputId]=\"effectiveId()\" [placeholder]=\"placeholder()\" />\n <div hlmComboboxList>\n @for (option of options(); track option) {\n <hlm-combobox-item [value]=\"option\">{{ option }}</hlm-combobox-item>\n }\n </div>\n <div hlmComboboxEmpty>{{ emptyText() }}</div>\n </hlm-combobox-content>\n </hlm-combobox>\n } @else {\n <hlm-combobox-multiple [formControlName]=\"cnm\" [disabled]=\"effectiveDisabled()\" [class]=\"$controlClass()\">\n <hlm-combobox-chips [class]=\"$chipsClass()\">\n @for (v of selectedValues(); track v) {\n <hlm-combobox-chip [value]=\"v\">{{ v }}</hlm-combobox-chip>\n }\n <input hlmComboboxChipInput [id]=\"effectiveId()\" [placeholder]=\"placeholder()\" />\n </hlm-combobox-chips>\n <hlm-combobox-content *hlmComboboxPortal>\n <div hlmComboboxList>\n @for (option of options(); track option) {\n <hlm-combobox-item [value]=\"option\">{{ option }}</hlm-combobox-item>\n }\n </div>\n <div hlmComboboxEmpty>{{ emptyText() }}</div>\n </hlm-combobox-content>\n </hlm-combobox-multiple>\n }\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 ",
|
|
135
170
|
}]
|
|
136
|
-
}], propDecorators: { _picker: [{ type: i0.ViewChild, args: [i0.forwardRef(() => BrnComboboxMultiple), { isSignal: true }] }], _single: [{ type: i0.ViewChild, args: [i0.forwardRef(() => BrnCombobox), { isSignal: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], controlId: [{ type: i0.Input, args: [{ isSignal: true, alias: "controlId", required: false }] }], controlName: [{ type: i0.Input, args: [{ isSignal: true, alias: "controlName", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], emptyText: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyText", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], labelClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelClass", required: false }] }], controlClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "controlClass", required: false }] }], chipsClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "chipsClass", required: false }] }], errorClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorClass", required: false }] }], hintClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "hintClass", required: false }] }] } });
|
|
171
|
+
}], propDecorators: { _picker: [{ type: i0.ViewChild, args: [i0.forwardRef(() => BrnComboboxMultiple), { isSignal: true }] }], _single: [{ type: i0.ViewChild, args: [i0.forwardRef(() => BrnCombobox), { isSignal: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], controlId: [{ type: i0.Input, args: [{ isSignal: true, alias: "controlId", required: false }] }], controlName: [{ type: i0.Input, args: [{ isSignal: true, alias: "controlName", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], autoError: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoError", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], emptyText: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyText", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], labelClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelClass", required: false }] }], controlClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "controlClass", required: false }] }], chipsClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "chipsClass", required: false }] }], errorClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorClass", required: false }] }], hintClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "hintClass", required: false }] }] } });
|
|
137
172
|
|
|
138
173
|
/*
|
|
139
174
|
* Public API Surface of form-combobox
|
|
@@ -4,14 +4,22 @@ import { ClassValue } from 'clsx';
|
|
|
4
4
|
|
|
5
5
|
declare class EgFormCombobox {
|
|
6
6
|
private readonly formGroupDirective;
|
|
7
|
+
private readonly _errorMessages;
|
|
7
8
|
private readonly generatedId;
|
|
8
9
|
private readonly _config;
|
|
10
|
+
private readonly _shared;
|
|
9
11
|
private readonly _picker;
|
|
10
12
|
private readonly _single;
|
|
11
13
|
label: _angular_core.InputSignal<string | undefined>;
|
|
12
14
|
controlId: _angular_core.InputSignal<string | undefined>;
|
|
13
15
|
controlName: _angular_core.InputSignal<string>;
|
|
14
16
|
error: _angular_core.InputSignal<string | undefined>;
|
|
17
|
+
/**
|
|
18
|
+
* Auto-resolve the displayed message from the control's `ValidationErrors`
|
|
19
|
+
* when `error()` is unset. Explicit `error()` always wins. Set to `false`
|
|
20
|
+
* for manual-only messages.
|
|
21
|
+
*/
|
|
22
|
+
autoError: _angular_core.InputSignal<boolean>;
|
|
15
23
|
hint: _angular_core.InputSignal<string | undefined>;
|
|
16
24
|
id: _angular_core.InputSignal<string | undefined>;
|
|
17
25
|
placeholder: _angular_core.InputSignal<string>;
|
|
@@ -28,6 +36,19 @@ declare class EgFormCombobox {
|
|
|
28
36
|
readonly effectiveId: _angular_core.Signal<string>;
|
|
29
37
|
readonly errorId: _angular_core.Signal<string>;
|
|
30
38
|
readonly hintId: _angular_core.Signal<string>;
|
|
39
|
+
/**
|
|
40
|
+
* Displayed message: explicit `error()` wins; otherwise (when `autoError()`)
|
|
41
|
+
* auto-resolved from the control's `ValidationErrors`. Plain method (not a
|
|
42
|
+
* computed): `ValidationErrors` is not a signal, so the control must be read
|
|
43
|
+
* fresh on every change-detection pass.
|
|
44
|
+
*/
|
|
45
|
+
protected resolvedError(): string | undefined;
|
|
46
|
+
/**
|
|
47
|
+
* Whether the error is surfaced: message present + control invalid +
|
|
48
|
+
* touched/dirty/submitted. Gates the visual `<hlm-error>` (and
|
|
49
|
+
* `describedBy()`, where present) so sighted and screen-reader output agree.
|
|
50
|
+
*/
|
|
51
|
+
protected showError(): boolean;
|
|
31
52
|
/** Selected values read reactively from the brain model so chips track selection. */
|
|
32
53
|
readonly selectedValues: _angular_core.Signal<string[]>;
|
|
33
54
|
/** Single-mode display value read reactively from the brain model. */
|
|
@@ -51,7 +72,7 @@ declare class EgFormCombobox {
|
|
|
51
72
|
$errorClass: _angular_core.Signal<string>;
|
|
52
73
|
$hintClass: _angular_core.Signal<string>;
|
|
53
74
|
static ɵfac: _angular_core.ɵɵFactoryDeclaration<EgFormCombobox, never>;
|
|
54
|
-
static ɵcmp: _angular_core.ɵɵComponentDeclaration<EgFormCombobox, "eg-form-combobox", never, { "label": { "alias": "label"; "required": false; "isSignal": true; }; "controlId": { "alias": "controlId"; "required": false; "isSignal": true; }; "controlName": { "alias": "controlName"; "required": false; "isSignal": true; }; "error": { "alias": "error"; "required": false; "isSignal": true; }; "hint": { "alias": "hint"; "required": false; "isSignal": true; }; "id": { "alias": "id"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "emptyText": { "alias": "emptyText"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "mode": { "alias": "mode"; "required": false; "isSignal": true; }; "options": { "alias": "options"; "required": false; "isSignal": true; }; "userClass": { "alias": "class"; "required": false; "isSignal": true; }; "labelClass": { "alias": "labelClass"; "required": false; "isSignal": true; }; "controlClass": { "alias": "controlClass"; "required": false; "isSignal": true; }; "chipsClass": { "alias": "chipsClass"; "required": false; "isSignal": true; }; "errorClass": { "alias": "errorClass"; "required": false; "isSignal": true; }; "hintClass": { "alias": "hintClass"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
|
|
75
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<EgFormCombobox, "eg-form-combobox", never, { "label": { "alias": "label"; "required": false; "isSignal": true; }; "controlId": { "alias": "controlId"; "required": false; "isSignal": true; }; "controlName": { "alias": "controlName"; "required": false; "isSignal": true; }; "error": { "alias": "error"; "required": false; "isSignal": true; }; "autoError": { "alias": "autoError"; "required": false; "isSignal": true; }; "hint": { "alias": "hint"; "required": false; "isSignal": true; }; "id": { "alias": "id"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "emptyText": { "alias": "emptyText"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "mode": { "alias": "mode"; "required": false; "isSignal": true; }; "options": { "alias": "options"; "required": false; "isSignal": true; }; "userClass": { "alias": "class"; "required": false; "isSignal": true; }; "labelClass": { "alias": "labelClass"; "required": false; "isSignal": true; }; "controlClass": { "alias": "controlClass"; "required": false; "isSignal": true; }; "chipsClass": { "alias": "chipsClass"; "required": false; "isSignal": true; }; "errorClass": { "alias": "errorClass"; "required": false; "isSignal": true; }; "hintClass": { "alias": "hintClass"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
|
|
55
76
|
}
|
|
56
77
|
|
|
57
78
|
interface EgFormComboboxConfig {
|
|
@@ -84,33 +84,34 @@ Selector (from source): `eg-form-date-picker` (standalone component, host `tw:w-
|
|
|
84
84
|
|
|
85
85
|
### `EgFormDatePicker` — `eg-form-date-picker`
|
|
86
86
|
|
|
87
|
-
| Input | Type | Default | Description
|
|
88
|
-
| ------------------- | --------------------------------- | --------------- |
|
|
89
|
-
| `controlName` | `string` | `''` | `formControlName` key inside the parent `FormGroup`. **Required.**
|
|
90
|
-
| `label` | `string \| undefined` | — | Label text (hidden when omitted).
|
|
91
|
-
| `error` | `string \| undefined` | — | Error text shown when invalid.
|
|
92
|
-
| `
|
|
93
|
-
| `
|
|
94
|
-
| `
|
|
95
|
-
| `
|
|
96
|
-
| `
|
|
97
|
-
| `
|
|
98
|
-
| `
|
|
99
|
-
| `
|
|
100
|
-
| `
|
|
101
|
-
| `
|
|
102
|
-
| `
|
|
103
|
-
| `
|
|
104
|
-
| `
|
|
105
|
-
| `
|
|
106
|
-
| `
|
|
107
|
-
| `
|
|
108
|
-
| `
|
|
109
|
-
| `
|
|
110
|
-
| `
|
|
111
|
-
| `
|
|
112
|
-
| `
|
|
113
|
-
| `
|
|
87
|
+
| Input | Type | Default | Description |
|
|
88
|
+
| ------------------- | --------------------------------- | --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
|
|
89
|
+
| `controlName` | `string` | `''` | `formControlName` key inside the parent `FormGroup`. **Required.** |
|
|
90
|
+
| `label` | `string \| undefined` | — | Label text (hidden when omitted). |
|
|
91
|
+
| `error` | `string \| undefined` | — | Error text shown when invalid. |
|
|
92
|
+
| `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`. |
|
|
93
|
+
| `hint` | `string \| undefined` | — | Hint text shown otherwise. |
|
|
94
|
+
| `controlId` | `string \| undefined` | — | Explicit id (first priority for `effectiveId`). |
|
|
95
|
+
| `id` | `string \| undefined` | — | Fallback id (second priority). |
|
|
96
|
+
| `name` | `string \| undefined` | — | Native `name` forwarded to the inner input (`controlName` wins when set, like `eg-form-text-input`). |
|
|
97
|
+
| `placeholder` | `string` | `'Pick a date'` | Input placeholder. |
|
|
98
|
+
| `readonly` | `boolean` | `false` | Native `readonly` forwarded to the inner input (locks typed text; use `disabled` to lock the calendar too). |
|
|
99
|
+
| `disabled` | `boolean` | `false` | Locks interaction via picker `wrapperDisabled` (form control stays enabled). |
|
|
100
|
+
| `required` | `boolean` | `false` | Shows a red `*` next to the label. |
|
|
101
|
+
| `min` | `Date \| string \| null` | `null` | Minimum date forwarded to `hlm-date-picker`. |
|
|
102
|
+
| `max` | `Date \| string \| null` | `null` | Maximum date forwarded to `hlm-date-picker`. |
|
|
103
|
+
| `autoCloseOnSelect` | `boolean` | config default | Forwarded to `hlm-date-picker` (falls back to `provideHlmDatePickerConfig`, default `false`). |
|
|
104
|
+
| `captionLayout` | union | `'label'` | Forwarded to `hlm-date-picker` (`'dropdown' \| 'label' \| 'dropdown-months' \| 'dropdown-years'`). |
|
|
105
|
+
| `formatDate` | `(date: Date) => string` | config default | Display format, forwarded to `hlm-date-picker` (falls back to `provideHlmDatePickerConfig`). |
|
|
106
|
+
| `transformDate` | `(date: Date) => Date` | config default | Model transform, forwarded to `hlm-date-picker` (falls back to `provideHlmDatePickerConfig`). |
|
|
107
|
+
| `parseDate` | `(value: string) => Date \| null` | config default | Input parsing, forwarded to `hlm-date-picker-input` (falls back to `provideHlmDatePickerConfig`). |
|
|
108
|
+
| `formatInputDate` | `(date: Date) => string` | config default | Edit format while focused, forwarded to `hlm-date-picker-input` (falls back to `provideHlmDatePickerConfig`). |
|
|
109
|
+
| `class` | `ClassValue` | `''` | Extra host classes (base `tw:w-full`). |
|
|
110
|
+
| `labelClass` | `string` | `''` | Extra label classes (base `tw:mb-1`). |
|
|
111
|
+
| `pickerClass` | `string` | `''` | Extra picker-container classes (base `tw:mb-1`). |
|
|
112
|
+
| `inputClass` | `string` | `''` | Extra inner-input classes (e.g. `tw:text-lg` for text size). |
|
|
113
|
+
| `errorClass` | `string` | `''` | Extra error classes (base `tw:mt-0`). |
|
|
114
|
+
| `hintClass` | `string` | `''` | Extra hint classes (base `tw:mt-0`). |
|
|
114
115
|
|
|
115
116
|
| Member | Description |
|
|
116
117
|
| -------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------- |
|