@egose/shadcn-theme-ng 0.4.0 → 0.5.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (47) hide show
  1. package/README.md +1 -1
  2. package/form-autocomplete/fesm2022/form-autocomplete.mjs +7 -6
  3. package/form-autocomplete/types/form-autocomplete.d.ts +1 -0
  4. package/form-checkbox/README.md +4 -4
  5. package/form-checkbox/fesm2022/form-checkbox.mjs +84 -12
  6. package/form-checkbox/types/form-checkbox.d.ts +33 -5
  7. package/form-combobox/fesm2022/form-combobox.mjs +7 -6
  8. package/form-combobox/types/form-combobox.d.ts +1 -0
  9. package/form-date-picker/fesm2022/form-date-picker.mjs +7 -6
  10. package/form-date-picker/types/form-date-picker.d.ts +1 -0
  11. package/form-date-picker-multi/fesm2022/form-date-picker-multi.mjs +7 -6
  12. package/form-date-picker-multi/types/form-date-picker-multi.d.ts +1 -0
  13. package/form-date-range-picker/fesm2022/form-date-range-picker.mjs +7 -6
  14. package/form-date-range-picker/types/form-date-range-picker.d.ts +1 -0
  15. package/form-field/fesm2022/form-field.mjs +18 -1
  16. package/form-field/types/form-field.d.ts +48 -2
  17. package/form-input-otp/fesm2022/form-input-otp.mjs +6 -5
  18. package/form-input-otp/types/form-input-otp.d.ts +1 -0
  19. package/form-month-year-picker/fesm2022/form-month-year-picker.mjs +7 -6
  20. package/form-month-year-picker/types/form-month-year-picker.d.ts +1 -0
  21. package/form-native-select/fesm2022/form-native-select.mjs +6 -5
  22. package/form-native-select/types/form-native-select.d.ts +1 -0
  23. package/form-phone-input/fesm2022/form-phone-input.mjs +6 -5
  24. package/form-phone-input/types/form-phone-input.d.ts +1 -0
  25. package/form-radio-group/fesm2022/form-radio-group.mjs +6 -5
  26. package/form-radio-group/types/form-radio-group.d.ts +1 -0
  27. package/form-searchable-multiselect/fesm2022/form-searchable-multiselect.mjs +6 -5
  28. package/form-searchable-multiselect/types/form-searchable-multiselect.d.ts +1 -0
  29. package/form-select/fesm2022/form-select.mjs +6 -5
  30. package/form-select/types/form-select.d.ts +1 -0
  31. package/form-slider/fesm2022/form-slider.mjs +6 -5
  32. package/form-slider/types/form-slider.d.ts +1 -0
  33. package/form-switch/fesm2022/form-switch.mjs +6 -5
  34. package/form-switch/types/form-switch.d.ts +1 -0
  35. package/form-text-input/fesm2022/form-text-input.mjs +6 -5
  36. package/form-text-input/types/form-text-input.d.ts +1 -0
  37. package/form-textarea/fesm2022/form-textarea.mjs +6 -5
  38. package/form-textarea/types/form-textarea.d.ts +1 -0
  39. package/form-toggle/fesm2022/form-toggle.mjs +8 -5
  40. package/form-toggle/types/form-toggle.d.ts +1 -0
  41. package/form-toggle-group/fesm2022/form-toggle-group.mjs +6 -5
  42. package/form-toggle-group/types/form-toggle-group.d.ts +1 -0
  43. package/package.json +5 -1
  44. package/stepper/README.md +353 -0
  45. package/stepper/fesm2022/stepper.mjs +396 -0
  46. package/stepper/package.json +24 -0
  47. package/stepper/types/stepper.d.ts +116 -0
package/README.md CHANGED
@@ -138,7 +138,7 @@ Import by component name. Component `NameX` is reachable at `@egose/shadcn-theme
138
138
 
139
139
  <!-- BEGIN GENERATED SUBPATHS -->
140
140
 
141
- `accordion`, `alert`, `alert-dialog`, `aspect-ratio`, `autocomplete`, `avatar`, `badge`, `basic-alert`, `breadcrumb`, `button`, `button-group`, `calendar`, `card`, `carousel`, `checkbox`, `collapsible`, `combobox`, `command`, `confirmation-dialog`, `context-menu`, `date-picker`, `dialog`, `drawer`, `dropdown-menu`, `empty`, `field`, `form-autocomplete`, `form-checkbox`, `form-combobox`, `form-date-picker`, `form-date-picker-multi`, `form-date-range-picker`, `form-field`, `form-field-simple`, `form-input-otp`, `form-month-year-picker`, `form-native-select`, `form-phone-input`, `form-radio-group`, `form-searchable-multiselect`, `form-select`, `form-slider`, `form-switch`, `form-text-input`, `form-textarea`, `form-toggle`, `form-toggle-group`, `hover-card`, `icon`, `input`, `input-group`, `input-otp`, `item`, `kbd`, `label`, `layout-simple`, `menu`, `menubar`, `native-select`, `navigation-menu`, `pagination`, `phone-input`, `popover`, `progress`, `radio-group`, `resizable`, `scroll-area`, `searchable-multiselect`, `select`, `separator`, `sheet`, `sidebar`, `skeleton`, `slider`, `sonner`, `spinner`, `switch`, `table`, `tabs`, `textarea`, `toggle`, `toggle-group`, `tooltip`, `typography`, `utils`.
141
+ `accordion`, `alert`, `alert-dialog`, `aspect-ratio`, `autocomplete`, `avatar`, `badge`, `basic-alert`, `breadcrumb`, `button`, `button-group`, `calendar`, `card`, `carousel`, `checkbox`, `collapsible`, `combobox`, `command`, `confirmation-dialog`, `context-menu`, `date-picker`, `dialog`, `drawer`, `dropdown-menu`, `empty`, `field`, `form-autocomplete`, `form-checkbox`, `form-combobox`, `form-date-picker`, `form-date-picker-multi`, `form-date-range-picker`, `form-field`, `form-field-simple`, `form-input-otp`, `form-month-year-picker`, `form-native-select`, `form-phone-input`, `form-radio-group`, `form-searchable-multiselect`, `form-select`, `form-slider`, `form-switch`, `form-text-input`, `form-textarea`, `form-toggle`, `form-toggle-group`, `hover-card`, `icon`, `input`, `input-group`, `input-otp`, `item`, `kbd`, `label`, `layout-simple`, `menu`, `menubar`, `native-select`, `navigation-menu`, `pagination`, `phone-input`, `popover`, `progress`, `radio-group`, `resizable`, `scroll-area`, `searchable-multiselect`, `select`, `separator`, `sheet`, `sidebar`, `skeleton`, `slider`, `sonner`, `spinner`, `stepper`, `switch`, `table`, `tabs`, `textarea`, `toggle`, `toggle-group`, `tooltip`, `typography`, `utils`.
142
142
 
143
143
  <!-- END GENERATED SUBPATHS -->
144
144
 
package/form-autocomplete/fesm2022/form-autocomplete.mjs CHANGED
@@ -2,7 +2,7 @@ import * as i0 from '@angular/core';
2
2
  import { InjectionToken, inject, input, computed, Component } from '@angular/core';
3
3
  import * as i1 from '@angular/forms';
4
4
  import { FormGroupDirective, ReactiveFormsModule, ControlContainer } from '@angular/forms';
5
- import { injectEgFormErrorMessages, HlmFormIdGenerator, resolveEgFormError, 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 { HlmAutocomplete, HlmAutocompleteContent, HlmAutocompleteEmpty, HlmAutocompleteGroup, HlmAutocompleteInput, HlmAutocompleteItem, HlmAutocompleteList, HlmAutocompleteLabel } from '@egose/shadcn-theme-ng/autocomplete';
8
8
  import { hlm } from '@egose/shadcn-theme-ng/utils';
@@ -20,6 +20,7 @@ class EgFormAutocomplete {
20
20
  _errorMessages = injectEgFormErrorMessages();
21
21
  generatedId = inject(HlmFormIdGenerator).generate('eg-form-autocomplete');
22
22
  _config = injectEgFormAutocompleteConfig();
23
+ _shared = injectEgFormSharedConfig();
23
24
  label = input(undefined, /* @ts-ignore */
24
25
  ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
25
26
  controlId = input(undefined, /* @ts-ignore */
@@ -106,15 +107,15 @@ class EgFormAutocomplete {
106
107
  // ids render without an input-level describedby link.
107
108
  $userClass = computed(() => hlm("w-full", this.userClass()), /* @ts-ignore */
108
109
  ...(ngDevMode ? [{ debugName: "$userClass" }] : /* istanbul ignore next */ []));
109
- $labelClass = computed(() => hlm("mb-1", this._config.labelClass, this.labelClass()), /* @ts-ignore */
110
+ $labelClass = computed(() => hlm("mb-1", this._shared.labelClass, this._config.labelClass, this.labelClass()), /* @ts-ignore */
110
111
  ...(ngDevMode ? [{ debugName: "$labelClass" }] : /* istanbul ignore next */ []));
111
- $controlClass = computed(() => hlm(this._config.controlClass, this.controlClass()), /* @ts-ignore */
112
+ $controlClass = computed(() => hlm(this._shared.controlClass, this._config.controlClass, this.controlClass()), /* @ts-ignore */
112
113
  ...(ngDevMode ? [{ debugName: "$controlClass" }] : /* istanbul ignore next */ []));
113
- $inputClass = computed(() => hlm(this._config.inputClass, this.inputClass()), /* @ts-ignore */
114
+ $inputClass = computed(() => hlm(this._shared.inputClass, this._config.inputClass, this.inputClass()), /* @ts-ignore */
114
115
  ...(ngDevMode ? [{ debugName: "$inputClass" }] : /* istanbul ignore next */ []));
115
- $errorClass = computed(() => hlm("mt-0", this._config.errorClass, this.errorClass()), /* @ts-ignore */
116
+ $errorClass = computed(() => hlm("mt-0", this._shared.errorClass, this._config.errorClass, this.errorClass()), /* @ts-ignore */
116
117
  ...(ngDevMode ? [{ debugName: "$errorClass" }] : /* istanbul ignore next */ []));
117
- $hintClass = computed(() => hlm("mt-0", this._config.hintClass, this.hintClass()), /* @ts-ignore */
118
+ $hintClass = computed(() => hlm("mt-0", this._shared.hintClass, this._config.hintClass, this.hintClass()), /* @ts-ignore */
118
119
  ...(ngDevMode ? [{ debugName: "$hintClass" }] : /* istanbul ignore next */ []));
119
120
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: EgFormAutocomplete, deps: [], target: i0.ɵɵFactoryTarget.Component });
120
121
  static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.3", type: EgFormAutocomplete, isStandalone: true, selector: "eg-form-autocomplete", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, controlId: { classPropertyName: "controlId", publicName: "controlId", isSignal: true, isRequired: false, transformFunction: null }, controlName: { classPropertyName: "controlName", publicName: "controlName", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, autoError: { classPropertyName: "autoError", publicName: "autoError", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, emptyText: { classPropertyName: "emptyText", publicName: "emptyText", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, labelClass: { classPropertyName: "labelClass", publicName: "labelClass", isSignal: true, isRequired: false, transformFunction: null }, controlClass: { classPropertyName: "controlClass", publicName: "controlClass", isSignal: true, isRequired: false, transformFunction: null }, inputClass: { classPropertyName: "inputClass", publicName: "inputClass", isSignal: true, isRequired: false, transformFunction: null }, errorClass: { classPropertyName: "errorClass", publicName: "errorClass", isSignal: true, isRequired: false, transformFunction: null }, hintClass: { classPropertyName: "hintClass", publicName: "hintClass", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "$userClass()" } }, providers: [{ provide: ControlContainer, useExisting: FormGroupDirective }], ngImport: i0, template: "\n @let lbl = label();\n @let cnm = controlName();\n @let hnt = hint();\n @let rqrd = required();\n\n <hlm-form-field>\n @if (lbl) {\n <label hlmLabel [for]=\"effectiveId()\" [class]=\"$labelClass()\"\n >{{ lbl }}\n @if (rqrd) {\n <span class=\"text-red-500\">*</span>\n }\n </label>\n }\n\n <div hlmAutocomplete [formControlName]=\"cnm\" [disabled]=\"effectiveDisabled()\" [class]=\"$controlClass()\">\n <hlm-autocomplete-input [inputId]=\"effectiveId()\" [placeholder]=\"placeholder()\" [class]=\"$inputClass()\" />\n <hlm-autocomplete-content>\n <div hlmAutocompleteList>\n <div hlmAutocompleteGroup>\n @for (option of options(); track option) {\n <hlm-autocomplete-item [value]=\"option\">{{ option }}</hlm-autocomplete-item>\n }\n </div>\n </div>\n <div hlmAutocompleteEmpty>{{ emptyText() }}</div>\n </hlm-autocomplete-content>\n </div>\n\n @if (showError()) {\n <hlm-error [id]=\"errorId()\" [class]=\"$errorClass()\">\n {{ resolvedError() }}\n </hlm-error>\n }\n\n @if (hnt) {\n <hlm-hint [id]=\"hintId()\" [class]=\"$hintClass()\">\n {{ hnt }}\n </hlm-hint>\n }\n </hlm-form-field>\n ", isInline: true, dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: HlmFormField, selector: "hlm-form-field", inputs: ["class"] }, { kind: "directive", type: HlmError, selector: "hlm-error", inputs: ["class"] }, { kind: "directive", type: HlmHint, selector: "hlm-hint", inputs: ["class"] }, { kind: "directive", type: HlmLabel, selector: "[hlmLabel]", inputs: ["class"] }, { kind: "directive", type: HlmAutocomplete, selector: "[hlmAutocomplete],hlm-autocomplete" }, { kind: "directive", type: HlmAutocompleteContent, selector: "[hlmAutocompleteContent],hlm-autocomplete-content" }, { kind: "directive", type: HlmAutocompleteEmpty, selector: "[hlmAutocompleteEmpty],hlm-autocomplete-empty" }, { kind: "directive", type: HlmAutocompleteGroup, selector: "[hlmAutocompleteGroup]" }, { kind: "component", type: HlmAutocompleteInput, selector: "hlm-autocomplete-input", inputs: ["inputId", "placeholder", "showSearch", "showClear", "forceInvalid", "aria-invalid"] }, { kind: "component", type: HlmAutocompleteItem, selector: "hlm-autocomplete-item" }, { kind: "directive", type: HlmAutocompleteList, selector: "[hlmAutocompleteList]" }] });
package/form-autocomplete/types/form-autocomplete.d.ts CHANGED
@@ -7,6 +7,7 @@ declare class EgFormAutocomplete {
7
7
  private readonly _errorMessages;
8
8
  private readonly generatedId;
9
9
  private readonly _config;
10
+ private readonly _shared;
10
11
  label: _angular_core.InputSignal<string | undefined>;
11
12
  controlId: _angular_core.InputSignal<string | undefined>;
12
13
  controlName: _angular_core.InputSignal<string>;
package/form-checkbox/README.md CHANGED
@@ -87,14 +87,14 @@ Selector (from source): `eg-form-checkbox` (standalone component).
87
87
  | --------------- | --------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
88
88
  | `controlName` | `string` | `''` | `formControlName` key inside the parent `FormGroup`. **Required.** |
89
89
  | `label` | `string` | `''` | Label text next to the checkbox. |
90
- | `error` | `string \| undefined` | — | Error text shown when the control is invalid + touched/dirty (via `EgFormField` switching). |
90
+ | `error` | `string \| undefined` | — | Error text shown when the control is invalid + touched/dirty/submitted (via `EgFormField` switching). |
91
91
  | `autoError` | `boolean` | `true` | Auto-resolve the message from the control's `ValidationErrors` when `error` is unset. Explicit `error` always wins; `error=""` counts as unset. Global wording via `provideEgFormErrorMessages`. |
92
92
  | `hint` | `string \| undefined` | — | Hint text shown when there is no error to display. |
93
93
  | `controlId` | `string \| undefined` | — | Explicit control id (first priority for `effectiveId`). |
94
94
  | `id` | `string \| undefined` | — | Fallback id (second priority). |
95
95
  | `name` | `string \| undefined` | — | Checkbox `name` attribute (defaults to `controlName`). |
96
96
  | `checked` | `boolean` | `false` | Initial checked state passed to `hlm-checkbox`. |
97
- | `required` | `boolean` | `false` | Shows a red `*` and sets checkbox `required`. |
97
+ | `required` | `boolean` | `false` | Shows a red `*` and sets checkbox `required` (boolean-coerced, so bare `required` works). Presentation only — it does not validate by itself; add `Validators.requiredTrue` to the `FormControl` or the control is never invalid and no error is shown. |
98
98
  | `disabled` | `boolean` | `false` | Locks interaction via checkbox `wrapperDisabled` (does not write to the form control). |
99
99
  | `class` | `ClassValue` | `''` | Extra host classes. |
100
100
  | `checkboxClass` | `string` | `''` | Extra classes for `hlm-checkbox`. |
@@ -106,7 +106,7 @@ Selector (from source): `eg-form-checkbox` (standalone component).
106
106
  | -------------------- | ------------------------------------------------------------------------------------------------------------------------------------ |
107
107
  | `effectiveId` | `controlId() \|\| id() \|\| generated` — wired to checkbox `id` and label `for`. |
108
108
  | `errorId` / `hintId` | `effectiveId + '-error' / '-hint'` for `aria-describedby`. |
109
- | `describedBy()` | Returns `errorId` when `error()` is set and the control is invalid + dirty/touched, else `hintId` when `hint()` is set, else `null`. |
109
+ | `describedBy()` | Returns `errorId` when `error()` is set and the control is invalid + dirty/touched/submitted, else `hintId` when `hint()` is set, else `null`. |
110
110
 
111
111
  Requires a `[formGroup]` ancestor: the component injects `FormGroupDirective` and provides
112
112
  `ControlContainer → FormGroupDirective` so `formControlName` resolves.
@@ -298,7 +298,7 @@ export class SubmitCheckComponent {
298
298
  ## Accessibility notes
299
299
 
300
300
  - The checkbox `id` and label `for` are generated (`eg-form-checkbox-<app>-<n>`) unless `controlId`/`id` is given — labels are always programmatically associated.
301
- - `aria-describedby` points at the error id only while the control is invalid + touched/dirty, otherwise at the hint id — screen readers hear the right message in each state.
301
+ - `aria-describedby` points at the error id only while the control is invalid + touched/dirty/submitted, otherwise at the hint id — screen readers hear the right message in each state.
302
302
  - The required marker (`*`) is visual; the underlying `hlm-checkbox` also receives `required` so assistive tech announces it.
303
303
  - Keep the component inside a `<form>` with a submit path; the row itself is a single tab stop (the checkbox).
304
304
 
package/form-checkbox/fesm2022/form-checkbox.mjs CHANGED
@@ -1,10 +1,11 @@
1
1
  import * as i0 from '@angular/core';
2
- import { InjectionToken, inject, input, computed, ChangeDetectionStrategy, Component } from '@angular/core';
2
+ import { InjectionToken, inject, DestroyRef, signal, input, computed, booleanAttribute, ChangeDetectionStrategy, Component } from '@angular/core';
3
+ import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
3
4
  import * as i1 from '@angular/forms';
4
5
  import { FormGroupDirective, ReactiveFormsModule, ControlContainer } from '@angular/forms';
5
6
  import { HlmLabel } from '@egose/shadcn-theme-ng/label';
6
7
  import { HlmCheckbox } from '@egose/shadcn-theme-ng/checkbox';
7
- import { injectEgFormErrorMessages, HlmFormIdGenerator, resolveEgFormError, HlmError, HlmHint } from '@egose/shadcn-theme-ng/form-field';
8
+ import { injectEgFormErrorMessages, HlmFormIdGenerator, injectEgFormSharedConfig, resolveEgFormError, HlmError, HlmHint } from '@egose/shadcn-theme-ng/form-field';
8
9
  import { EgFormField } from '@egose/shadcn-theme-ng/form-field-simple';
9
10
  import { hlm } from '@egose/shadcn-theme-ng/utils';
10
11
 
@@ -18,9 +19,25 @@ function injectEgFormCheckboxConfig() {
18
19
 
19
20
  class EgFormCheckbox {
20
21
  formGroupDirective = inject(FormGroupDirective);
22
+ _destroyRef = inject(DestroyRef);
21
23
  _errorMessages = injectEgFormErrorMessages();
22
24
  generatedId = inject(HlmFormIdGenerator).generate('eg-form-checkbox');
23
25
  _config = injectEgFormCheckboxConfig();
26
+ _shared = injectEgFormSharedConfig();
27
+ /**
28
+ * Mirrors control status + parent submit state into signals so `showError`
29
+ * stays reactive under OnPush. `FormGroupDirective.submitted` and
30
+ * `ValidationErrors` are plain (non-signal) values, so without this the
31
+ * error would not appear on submit when the control was never
32
+ * touched/dirty (OnPush child is otherwise skipped). Same pattern as
33
+ * `EgFormToggle`.
34
+ */
35
+ _status = signal(null, /* @ts-ignore */
36
+ ...(ngDevMode ? [{ debugName: "_status" }] : /* istanbul ignore next */ []));
37
+ _submitted = signal(false, /* @ts-ignore */
38
+ ...(ngDevMode ? [{ debugName: "_submitted" }] : /* istanbul ignore next */ []));
39
+ _trackedControl = null;
40
+ _controlSub = null;
24
41
  // Classes
25
42
  userClass = input('', { ...(ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {}), alias: 'class' });
26
43
  _computedClass = computed(() => hlm('', this.userClass()), /* @ts-ignore */
@@ -49,8 +66,13 @@ class EgFormCheckbox {
49
66
  ...(ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []));
50
67
  checked = input(false, /* @ts-ignore */
51
68
  ...(ngDevMode ? [{ debugName: "checked" }] : /* istanbul ignore next */ []));
52
- required = input(false, /* @ts-ignore */
53
- ...(ngDevMode ? [{ debugName: "required" }] : /* istanbul ignore next */ []));
69
+ /**
70
+ * Shows the red `*` marker and sets the native `required` on the checkbox.
71
+ * Note: this does not add validation by itself — pair it with
72
+ * `Validators.requiredTrue` on the `FormControl`, otherwise the control is
73
+ * never invalid and no error is displayed.
74
+ */
75
+ required = input(false, { ...(ngDevMode ? { debugName: "required" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
54
76
  disabled = input(false, /* @ts-ignore */
55
77
  ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
56
78
  effectiveId = computed(() => this.controlId() || this.id() || this.generatedId, /* @ts-ignore */
@@ -63,7 +85,8 @@ class EgFormCheckbox {
63
85
  * Displayed message: explicit `error()` wins; otherwise (when `autoError()`)
64
86
  * auto-resolved from the control's `ValidationErrors`. Plain method (not a
65
87
  * computed): `ValidationErrors` is not a signal, so the control must be read
66
- * fresh on every change-detection pass.
88
+ * fresh on every evaluation (`showError()` re-evaluates with it via the
89
+ * `_status`/`_submitted` signals).
67
90
  */
68
91
  resolvedError() {
69
92
  const explicit = this.error();
@@ -78,16 +101,65 @@ class EgFormCheckbox {
78
101
  * Whether the error is surfaced: message present + control invalid +
79
102
  * touched/dirty/submitted. Gates the visual `<hlm-error>` (and
80
103
  * `describedBy()`, where present) so sighted and screen-reader output agree.
104
+ * Computed over `_status`/`_submitted` signals so it re-evaluates under
105
+ * OnPush when the parent form is submitted or the control status changes.
81
106
  */
82
- showError() {
107
+ showError = computed(() => {
108
+ this._status();
109
+ this._submitted();
83
110
  const control = this.formGroupDirective.form.get(this.controlName());
84
111
  return (!!this.resolvedError() &&
85
112
  !!control?.invalid &&
86
- (control.dirty || control.touched || this.formGroupDirective.submitted));
87
- }
113
+ (control.dirty || control.touched || this._submitted()));
114
+ }, /* @ts-ignore */
115
+ ...(ngDevMode ? [{ debugName: "showError" }] : /* istanbul ignore next */ []));
88
116
  describedBy() {
89
117
  return this.showError() ? this.errorId() : this.hint() ? this.hintId() : null;
90
118
  }
119
+ ngAfterContentInit() {
120
+ this._trackControl();
121
+ // `ngSubmit` emits synchronously during event dispatch, before change
122
+ // detection traverses. Flipping the signal here (instead of only polling
123
+ // `submitted` in `ngDoCheck`) marks this OnPush view dirty up-front, so
124
+ // the error renders in the same pass even when no `@Input()` changed and
125
+ // the control itself never became touched/dirty. `ngDoCheck` below stays
126
+ // as the fallback (e.g. `resetForm()` clears `submitted` silently).
127
+ this.formGroupDirective.ngSubmit.pipe(takeUntilDestroyed(this._destroyRef)).subscribe(() => {
128
+ if (!this._submitted())
129
+ this._submitted.set(true);
130
+ });
131
+ }
132
+ ngDoCheck() {
133
+ const submitted = !!this.formGroupDirective?.submitted;
134
+ if (this._submitted() !== submitted)
135
+ this._submitted.set(submitted);
136
+ const control = this.formGroupDirective.form.get(this.controlName()) ?? null;
137
+ if (control !== this._trackedControl) {
138
+ this._trackControl();
139
+ }
140
+ else if (control && this._status() !== control.status) {
141
+ // Fallback poll: catches status changes missed by the subscription
142
+ // (e.g. control replaced without re-init).
143
+ this._status.set(control.status);
144
+ }
145
+ }
146
+ ngOnDestroy() {
147
+ this._controlSub?.unsubscribe();
148
+ this._controlSub = null;
149
+ }
150
+ _trackControl() {
151
+ this._controlSub?.unsubscribe();
152
+ this._controlSub = null;
153
+ const control = this.formGroupDirective.form.get(this.controlName()) ?? null;
154
+ this._trackedControl = control;
155
+ this._status.set(control?.status ?? null);
156
+ if (control) {
157
+ this._controlSub = control.statusChanges.subscribe((status) => {
158
+ if (this._status() !== status)
159
+ this._status.set(status);
160
+ });
161
+ }
162
+ }
91
163
  // Styling
92
164
  checkboxClass = input('', /* @ts-ignore */
93
165
  ...(ngDevMode ? [{ debugName: "checkboxClass" }] : /* istanbul ignore next */ []));
@@ -98,13 +170,13 @@ class EgFormCheckbox {
98
170
  hintClass = input('', /* @ts-ignore */
99
171
  ...(ngDevMode ? [{ debugName: "hintClass" }] : /* istanbul ignore next */ []));
100
172
  // Computed styling (library base < global config < per-instance)
101
- $checkboxClass = computed(() => hlm(this._config.checkboxClass, this.checkboxClass()), /* @ts-ignore */
173
+ $checkboxClass = computed(() => hlm(this._shared.checkboxClass, this._config.checkboxClass, this.checkboxClass()), /* @ts-ignore */
102
174
  ...(ngDevMode ? [{ debugName: "$checkboxClass" }] : /* istanbul ignore next */ []));
103
- $labelClass = computed(() => hlm(this._config.labelClass, this.labelClass()), /* @ts-ignore */
175
+ $labelClass = computed(() => hlm(this._shared.labelClass, this._config.labelClass, this.labelClass()), /* @ts-ignore */
104
176
  ...(ngDevMode ? [{ debugName: "$labelClass" }] : /* istanbul ignore next */ []));
105
- $errorClass = computed(() => hlm(this._config.errorClass, this.errorClass()), /* @ts-ignore */
177
+ $errorClass = computed(() => hlm(this._shared.errorClass, this._config.errorClass, this.errorClass()), /* @ts-ignore */
106
178
  ...(ngDevMode ? [{ debugName: "$errorClass" }] : /* istanbul ignore next */ []));
107
- $hintClass = computed(() => hlm(this._config.hintClass, this.hintClass()), /* @ts-ignore */
179
+ $hintClass = computed(() => hlm(this._shared.hintClass, this._config.hintClass, this.hintClass()), /* @ts-ignore */
108
180
  ...(ngDevMode ? [{ debugName: "$hintClass" }] : /* istanbul ignore next */ []));
109
181
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: EgFormCheckbox, deps: [], target: i0.ɵɵFactoryTarget.Component });
110
182
  static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.3", type: EgFormCheckbox, isStandalone: true, selector: "eg-form-checkbox", inputs: { userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, controlId: { classPropertyName: "controlId", publicName: "controlId", isSignal: true, isRequired: false, transformFunction: null }, controlName: { classPropertyName: "controlName", publicName: "controlName", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, autoError: { classPropertyName: "autoError", publicName: "autoError", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, checkboxClass: { classPropertyName: "checkboxClass", publicName: "checkboxClass", isSignal: true, isRequired: false, transformFunction: null }, labelClass: { classPropertyName: "labelClass", publicName: "labelClass", isSignal: true, isRequired: false, transformFunction: null }, errorClass: { classPropertyName: "errorClass", publicName: "errorClass", isSignal: true, isRequired: false, transformFunction: null }, hintClass: { classPropertyName: "hintClass", publicName: "hintClass", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "_computedClass()" } }, providers: [{ provide: ControlContainer, useExisting: FormGroupDirective }], ngImport: i0, template: "\n @let lbl = label();\n @let cnm = controlName();\n @let hnt = hint();\n @let rqrd = required();\n\n <eg-form-field>\n <div class=\"flex items-center gap-1\">\n <hlm-checkbox\n [id]=\"effectiveId()\"\n [name]=\"cnm || name() || null\"\n [formControlName]=\"cnm\"\n [class]=\"$checkboxClass()\"\n [checked]=\"checked()\"\n [required]=\"rqrd\"\n [wrapperDisabled]=\"disabled()\"\n [aria-describedby]=\"describedBy()\"\n />\n <label hlmLabel [for]=\"effectiveId()\" [class]=\"$labelClass()\">\n {{ lbl }}\n @if (rqrd) {\n <span class=\"text-red-500\">*</span>\n }\n </label>\n </div>\n\n @if (showError()) {\n <hlm-error [id]=\"errorId()\" [class]=\"$errorClass()\">\n {{ resolvedError() }}\n </hlm-error>\n }\n\n @if (hnt) {\n <hlm-hint [id]=\"hintId()\" [class]=\"$hintClass()\">\n {{ hnt }}\n </hlm-hint>\n }\n </eg-form-field>\n ", isInline: true, dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: HlmCheckbox, selector: "hlm-checkbox", inputs: ["class", "id", "aria-label", "aria-labelledby", "aria-describedby", "checked", "name", "required", "disabled", "wrapperDisabled"], outputs: ["checkedChange", "changed"] }, { kind: "directive", type: HlmLabel, selector: "[hlmLabel]", inputs: ["class"] }, { kind: "component", type: EgFormField, selector: "eg-form-field", inputs: ["class"] }, { kind: "directive", type: HlmError, selector: "hlm-error", inputs: ["class"] }, { kind: "directive", type: HlmHint, selector: "hlm-hint", inputs: ["class"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
package/form-checkbox/types/form-checkbox.d.ts CHANGED
@@ -1,12 +1,27 @@
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
+ import { BooleanInput } from '@angular/cdk/coercion';
3
4
  import { ClassValue } from 'clsx';
4
5
 
5
- declare class EgFormCheckbox {
6
+ declare class EgFormCheckbox implements DoCheck, AfterContentInit, OnDestroy {
6
7
  private readonly formGroupDirective;
8
+ private readonly _destroyRef;
7
9
  private readonly _errorMessages;
8
10
  private readonly generatedId;
9
11
  private readonly _config;
12
+ private readonly _shared;
13
+ /**
14
+ * Mirrors control status + parent submit state into signals so `showError`
15
+ * stays reactive under OnPush. `FormGroupDirective.submitted` and
16
+ * `ValidationErrors` are plain (non-signal) values, so without this the
17
+ * error would not appear on submit when the control was never
18
+ * touched/dirty (OnPush child is otherwise skipped). Same pattern as
19
+ * `EgFormToggle`.
20
+ */
21
+ private readonly _status;
22
+ private readonly _submitted;
23
+ private _trackedControl;
24
+ private _controlSub;
10
25
  readonly userClass: _angular_core.InputSignal<ClassValue>;
11
26
  protected readonly _computedClass: _angular_core.Signal<string>;
12
27
  label: _angular_core.InputSignal<string>;
@@ -23,7 +38,13 @@ declare class EgFormCheckbox {
23
38
  id: _angular_core.InputSignal<string | undefined>;
24
39
  name: _angular_core.InputSignal<string | undefined>;
25
40
  checked: _angular_core.InputSignal<boolean>;
26
- required: _angular_core.InputSignal<boolean>;
41
+ /**
42
+ * Shows the red `*` marker and sets the native `required` on the checkbox.
43
+ * Note: this does not add validation by itself — pair it with
44
+ * `Validators.requiredTrue` on the `FormControl`, otherwise the control is
45
+ * never invalid and no error is displayed.
46
+ */
47
+ required: _angular_core.InputSignalWithTransform<boolean, BooleanInput>;
27
48
  disabled: _angular_core.InputSignal<boolean>;
28
49
  readonly effectiveId: _angular_core.Signal<string>;
29
50
  readonly errorId: _angular_core.Signal<string>;
@@ -32,16 +53,23 @@ declare class EgFormCheckbox {
32
53
  * Displayed message: explicit `error()` wins; otherwise (when `autoError()`)
33
54
  * auto-resolved from the control's `ValidationErrors`. Plain method (not a
34
55
  * computed): `ValidationErrors` is not a signal, so the control must be read
35
- * fresh on every change-detection pass.
56
+ * fresh on every evaluation (`showError()` re-evaluates with it via the
57
+ * `_status`/`_submitted` signals).
36
58
  */
37
59
  protected resolvedError(): string | undefined;
38
60
  /**
39
61
  * Whether the error is surfaced: message present + control invalid +
40
62
  * touched/dirty/submitted. Gates the visual `<hlm-error>` (and
41
63
  * `describedBy()`, where present) so sighted and screen-reader output agree.
64
+ * Computed over `_status`/`_submitted` signals so it re-evaluates under
65
+ * OnPush when the parent form is submitted or the control status changes.
42
66
  */
43
- protected showError(): boolean;
67
+ protected readonly showError: _angular_core.Signal<boolean>;
44
68
  describedBy(): string | null;
69
+ ngAfterContentInit(): void;
70
+ ngDoCheck(): void;
71
+ ngOnDestroy(): void;
72
+ private _trackControl;
45
73
  checkboxClass: _angular_core.InputSignal<string>;
46
74
  labelClass: _angular_core.InputSignal<string>;
47
75
  errorClass: _angular_core.InputSignal<string>;
package/form-combobox/fesm2022/form-combobox.mjs CHANGED
@@ -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 { injectEgFormErrorMessages, HlmFormIdGenerator, resolveEgFormError, 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';
@@ -21,6 +21,7 @@ class EgFormCombobox {
21
21
  _errorMessages = injectEgFormErrorMessages();
22
22
  generatedId = inject(HlmFormIdGenerator).generate('eg-form-combobox');
23
23
  _config = injectEgFormComboboxConfig();
24
+ _shared = injectEgFormSharedConfig();
24
25
  _picker = viewChild((BrnComboboxMultiple), /* @ts-ignore */
25
26
  ...(ngDevMode ? [{ debugName: "_picker" }] : /* istanbul ignore next */ []));
26
27
  _single = viewChild((BrnCombobox), /* @ts-ignore */
@@ -124,15 +125,15 @@ class EgFormCombobox {
124
125
  // ids render without an input-level describedby link.
125
126
  $userClass = computed(() => hlm("w-full", this.userClass()), /* @ts-ignore */
126
127
  ...(ngDevMode ? [{ debugName: "$userClass" }] : /* istanbul ignore next */ []));
127
- $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 */
128
129
  ...(ngDevMode ? [{ debugName: "$labelClass" }] : /* istanbul ignore next */ []));
129
- $controlClass = computed(() => hlm(this._config.controlClass, this.controlClass()), /* @ts-ignore */
130
+ $controlClass = computed(() => hlm(this._shared.controlClass, this._config.controlClass, this.controlClass()), /* @ts-ignore */
130
131
  ...(ngDevMode ? [{ debugName: "$controlClass" }] : /* istanbul ignore next */ []));
131
- $chipsClass = computed(() => hlm(this._config.chipsClass, this.chipsClass()), /* @ts-ignore */
132
+ $chipsClass = computed(() => hlm(this._shared.chipsClass, this._config.chipsClass, this.chipsClass()), /* @ts-ignore */
132
133
  ...(ngDevMode ? [{ debugName: "$chipsClass" }] : /* istanbul ignore next */ []));
133
- $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 */
134
135
  ...(ngDevMode ? [{ debugName: "$errorClass" }] : /* istanbul ignore next */ []));
135
- $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 */
136
137
  ...(ngDevMode ? [{ debugName: "$hintClass" }] : /* istanbul ignore next */ []));
137
138
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: EgFormCombobox, deps: [], target: i0.ɵɵFactoryTarget.Component });
138
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"] }] });
package/form-combobox/types/form-combobox.d.ts CHANGED
@@ -7,6 +7,7 @@ declare class EgFormCombobox {
7
7
  private readonly _errorMessages;
8
8
  private readonly generatedId;
9
9
  private readonly _config;
10
+ private readonly _shared;
10
11
  private readonly _picker;
11
12
  private readonly _single;
12
13
  label: _angular_core.InputSignal<string | undefined>;
package/form-date-picker/fesm2022/form-date-picker.mjs CHANGED
@@ -2,7 +2,7 @@ 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 { injectEgFormErrorMessages, HlmFormIdGenerator, resolveEgFormError, 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 { injectHlmDatePickerConfig, HlmDatePicker, HlmDatePickerInput } from '@egose/shadcn-theme-ng/date-picker';
8
8
  import { hlm } from '@egose/shadcn-theme-ng/utils';
@@ -12,6 +12,7 @@ class EgFormDatePicker {
12
12
  _errorMessages = injectEgFormErrorMessages();
13
13
  generatedId = inject(HlmFormIdGenerator).generate('eg-form-date-picker');
14
14
  _config = injectHlmDatePickerConfig();
15
+ _shared = injectEgFormSharedConfig();
15
16
  // Inputs
16
17
  label = input(undefined, /* @ts-ignore */
17
18
  ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
@@ -120,15 +121,15 @@ class EgFormDatePicker {
120
121
  // Computed classes (library base < global config < per-instance)
121
122
  $userClass = computed(() => hlm("w-full", this.userClass()), /* @ts-ignore */
122
123
  ...(ngDevMode ? [{ debugName: "$userClass" }] : /* istanbul ignore next */ []));
123
- $labelClass = computed(() => hlm("mb-1", this._config.labelClass, this.labelClass()), /* @ts-ignore */
124
+ $labelClass = computed(() => hlm("mb-1", this._shared.labelClass, this._config.labelClass, this.labelClass()), /* @ts-ignore */
124
125
  ...(ngDevMode ? [{ debugName: "$labelClass" }] : /* istanbul ignore next */ []));
125
- $pickerClass = computed(() => hlm("mb-1", this._config.pickerClass, this.pickerClass()), /* @ts-ignore */
126
+ $pickerClass = computed(() => hlm("mb-1", this._shared.pickerClass, this._config.pickerClass, this.pickerClass()), /* @ts-ignore */
126
127
  ...(ngDevMode ? [{ debugName: "$pickerClass" }] : /* istanbul ignore next */ []));
127
- $inputClass = computed(() => hlm(this._config.inputClass, this.inputClass()), /* @ts-ignore */
128
+ $inputClass = computed(() => hlm(this._shared.inputClass, this._config.inputClass, this.inputClass()), /* @ts-ignore */
128
129
  ...(ngDevMode ? [{ debugName: "$inputClass" }] : /* istanbul ignore next */ []));
129
- $errorClass = computed(() => hlm("mt-0", this._config.errorClass, this.errorClass()), /* @ts-ignore */
130
+ $errorClass = computed(() => hlm("mt-0", this._shared.errorClass, this._config.errorClass, this.errorClass()), /* @ts-ignore */
130
131
  ...(ngDevMode ? [{ debugName: "$errorClass" }] : /* istanbul ignore next */ []));
131
- $hintClass = computed(() => hlm("mt-0", this._config.hintClass, this.hintClass()), /* @ts-ignore */
132
+ $hintClass = computed(() => hlm("mt-0", this._shared.hintClass, this._config.hintClass, this.hintClass()), /* @ts-ignore */
132
133
  ...(ngDevMode ? [{ debugName: "$hintClass" }] : /* istanbul ignore next */ []));
133
134
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: EgFormDatePicker, deps: [], target: i0.ɵɵFactoryTarget.Component });
134
135
  static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.3", type: EgFormDatePicker, isStandalone: true, selector: "eg-form-date-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 }, captionLayout: { classPropertyName: "captionLayout", publicName: "captionLayout", isSignal: true, isRequired: false, transformFunction: null }, formatDate: { classPropertyName: "formatDate", publicName: "formatDate", isSignal: true, isRequired: false, transformFunction: null }, transformDate: { classPropertyName: "transformDate", publicName: "transformDate", isSignal: true, isRequired: false, transformFunction: null }, parseDate: { classPropertyName: "parseDate", publicName: "parseDate", isSignal: true, isRequired: false, transformFunction: null }, formatInputDate: { classPropertyName: "formatInputDate", publicName: "formatInputDate", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, labelClass: { classPropertyName: "labelClass", publicName: "labelClass", isSignal: true, isRequired: false, transformFunction: null }, pickerClass: { classPropertyName: "pickerClass", publicName: "pickerClass", isSignal: true, isRequired: false, transformFunction: null }, inputClass: { classPropertyName: "inputClass", publicName: "inputClass", isSignal: true, isRequired: false, transformFunction: null }, errorClass: { classPropertyName: "errorClass", publicName: "errorClass", isSignal: true, isRequired: false, transformFunction: null }, hintClass: { classPropertyName: "hintClass", publicName: "hintClass", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "$userClass()" } }, providers: [{ provide: ControlContainer, useExisting: FormGroupDirective }], ngImport: i0, template: "\n @let lbl = label();\n @let cnm = controlName();\n @let hnt = hint();\n @let rqrd = required();\n\n <hlm-form-field>\n @if (lbl) {\n <label hlmLabel [for]=\"effectiveId()\" [class]=\"$labelClass()\"\n >{{ lbl }}\n @if (rqrd) {\n <span class=\"text-red-500\">*</span>\n }\n </label>\n }\n\n <hlm-date-picker\n [min]=\"$min()\"\n [max]=\"$max()\"\n [wrapperDisabled]=\"disabled()\"\n [autoCloseOnSelect]=\"autoCloseOnSelect()\"\n [captionLayout]=\"captionLayout()\"\n [formatDate]=\"formatDate()\"\n [transformDate]=\"transformDate()\"\n [formControlName]=\"cnm\"\n [class]=\"$pickerClass()\"\n >\n <hlm-date-picker-input\n [inputId]=\"effectiveId()\"\n [name]=\"cnm || name()\"\n [readonly]=\"readonly()\"\n [ariaLabel]=\"lbl\"\n [ariaDescribedby]=\"describedBy()\"\n [placeholder]=\"placeholder()\"\n [parseDate]=\"parseDate()\"\n [formatInputDate]=\"formatInputDate()\"\n [inputClass]=\"$inputClass()\"\n />\n </hlm-date-picker>\n\n @if (showError()) {\n <hlm-error [id]=\"errorId()\" [class]=\"$errorClass()\">\n {{ resolvedError() }}\n </hlm-error>\n }\n\n @if (hnt) {\n <hlm-hint [id]=\"hintId()\" [class]=\"$hintClass()\">\n {{ hnt }}\n </hlm-hint>\n }\n </hlm-form-field>\n ", isInline: true, dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: HlmFormField, selector: "hlm-form-field", inputs: ["class"] }, { kind: "directive", type: HlmError, selector: "hlm-error", inputs: ["class"] }, { kind: "directive", type: HlmHint, selector: "hlm-hint", inputs: ["class"] }, { kind: "directive", type: HlmLabel, selector: "[hlmLabel]", inputs: ["class"] }, { kind: "component", type: HlmDatePicker, selector: "hlm-date-picker", inputs: ["captionLayout", "min", "max", "disabled", "wrapperDisabled", "date", "defaultFocusedDate", "autoCloseOnSelect", "formatDate", "transformDate"], outputs: ["dateChange"] }, { kind: "component", type: HlmDatePickerInput, selector: "hlm-date-picker-input", inputs: ["ariaLabel", "ariaDescribedby", "name", "readonly", "class", "inputClass", "parseDate", "formatInputDate"] }] });
package/form-date-picker/types/form-date-picker.d.ts CHANGED
@@ -7,6 +7,7 @@ declare class EgFormDatePicker {
7
7
  private readonly _errorMessages;
8
8
  private readonly generatedId;
9
9
  private readonly _config;
10
+ private readonly _shared;
10
11
  label: _angular_core.InputSignal<string | undefined>;
11
12
  controlId: _angular_core.InputSignal<string | undefined>;
12
13
  controlName: _angular_core.InputSignal<string>;
package/form-date-picker-multi/fesm2022/form-date-picker-multi.mjs CHANGED
@@ -2,7 +2,7 @@ import * as i0 from '@angular/core';
2
2
  import { 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 { injectEgFormErrorMessages, HlmFormIdGenerator, resolveEgFormError, 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 { injectHlmDatePickerMultiConfig, HlmDatePickerMulti, HlmDateMultiInput } from '@egose/shadcn-theme-ng/date-picker';
8
8
  import { hlm } from '@egose/shadcn-theme-ng/utils';
@@ -12,6 +12,7 @@ class EgFormDatePickerMulti {
12
12
  _errorMessages = injectEgFormErrorMessages();
13
13
  generatedId = inject(HlmFormIdGenerator).generate('eg-form-date-picker-multi');
14
14
  _config = injectHlmDatePickerMultiConfig();
15
+ _shared = injectEgFormSharedConfig();
15
16
  label = input(undefined, /* @ts-ignore */
16
17
  ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
17
18
  controlId = input(undefined, /* @ts-ignore */
@@ -119,15 +120,15 @@ class EgFormDatePickerMulti {
119
120
  // Computed classes (library base < global config < per-instance)
120
121
  $userClass = computed(() => hlm("w-full", this.userClass()), /* @ts-ignore */
121
122
  ...(ngDevMode ? [{ debugName: "$userClass" }] : /* istanbul ignore next */ []));
122
- $labelClass = computed(() => hlm("mb-1", this._config.labelClass, this.labelClass()), /* @ts-ignore */
123
+ $labelClass = computed(() => hlm("mb-1", this._shared.labelClass, this._config.labelClass, this.labelClass()), /* @ts-ignore */
123
124
  ...(ngDevMode ? [{ debugName: "$labelClass" }] : /* istanbul ignore next */ []));
124
- $pickerClass = computed(() => hlm("mb-1", this._config.pickerClass, this.pickerClass()), /* @ts-ignore */
125
+ $pickerClass = computed(() => hlm("mb-1", this._shared.pickerClass, this._config.pickerClass, this.pickerClass()), /* @ts-ignore */
125
126
  ...(ngDevMode ? [{ debugName: "$pickerClass" }] : /* istanbul ignore next */ []));
126
- $inputClass = computed(() => hlm(this._config.inputClass, this.inputClass()), /* @ts-ignore */
127
+ $inputClass = computed(() => hlm(this._shared.inputClass, this._config.inputClass, this.inputClass()), /* @ts-ignore */
127
128
  ...(ngDevMode ? [{ debugName: "$inputClass" }] : /* istanbul ignore next */ []));
128
- $errorClass = computed(() => hlm("mt-0", this._config.errorClass, this.errorClass()), /* @ts-ignore */
129
+ $errorClass = computed(() => hlm("mt-0", this._shared.errorClass, this._config.errorClass, this.errorClass()), /* @ts-ignore */
129
130
  ...(ngDevMode ? [{ debugName: "$errorClass" }] : /* istanbul ignore next */ []));
130
- $hintClass = computed(() => hlm("mt-0", this._config.hintClass, this.hintClass()), /* @ts-ignore */
131
+ $hintClass = computed(() => hlm("mt-0", this._shared.hintClass, this._config.hintClass, this.hintClass()), /* @ts-ignore */
131
132
  ...(ngDevMode ? [{ debugName: "$hintClass" }] : /* istanbul ignore next */ []));
132
133
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: EgFormDatePickerMulti, deps: [], target: i0.ɵɵFactoryTarget.Component });
133
134
  static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.3", type: EgFormDatePickerMulti, isStandalone: true, selector: "eg-form-date-picker-multi", 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 }, minSelection: { classPropertyName: "minSelection", publicName: "minSelection", isSignal: true, isRequired: false, transformFunction: null }, maxSelection: { classPropertyName: "maxSelection", publicName: "maxSelection", isSignal: true, isRequired: false, transformFunction: null }, autoCloseOnMaxSelection: { classPropertyName: "autoCloseOnMaxSelection", publicName: "autoCloseOnMaxSelection", isSignal: true, isRequired: false, transformFunction: null }, captionLayout: { classPropertyName: "captionLayout", publicName: "captionLayout", isSignal: true, isRequired: false, transformFunction: null }, formatDates: { classPropertyName: "formatDates", publicName: "formatDates", isSignal: true, isRequired: false, transformFunction: null }, transformDates: { classPropertyName: "transformDates", publicName: "transformDates", isSignal: true, isRequired: false, transformFunction: null }, parseDate: { classPropertyName: "parseDate", publicName: "parseDate", isSignal: true, isRequired: false, transformFunction: null }, formatInputDates: { classPropertyName: "formatInputDates", publicName: "formatInputDates", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, labelClass: { classPropertyName: "labelClass", publicName: "labelClass", isSignal: true, isRequired: false, transformFunction: null }, pickerClass: { classPropertyName: "pickerClass", publicName: "pickerClass", isSignal: true, isRequired: false, transformFunction: null }, inputClass: { classPropertyName: "inputClass", publicName: "inputClass", isSignal: true, isRequired: false, transformFunction: null }, errorClass: { classPropertyName: "errorClass", publicName: "errorClass", isSignal: true, isRequired: false, transformFunction: null }, hintClass: { classPropertyName: "hintClass", publicName: "hintClass", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "$userClass()" } }, providers: [{ provide: ControlContainer, useExisting: FormGroupDirective }], ngImport: i0, template: "\n @let lbl = label();\n @let cnm = controlName();\n @let hnt = hint();\n @let rqrd = required();\n\n <hlm-form-field>\n @if (lbl) {\n <label hlmLabel [for]=\"effectiveId()\" [class]=\"$labelClass()\"\n >{{ lbl }}\n @if (rqrd) {\n <span class=\"text-red-500\">*</span>\n }\n </label>\n }\n\n <hlm-date-picker-multi\n [min]=\"$min()\"\n [max]=\"$max()\"\n [minSelection]=\"minSelection()\"\n [maxSelection]=\"maxSelection()\"\n [disabled]=\"disabled()\"\n [autoCloseOnMaxSelection]=\"autoCloseOnMaxSelection()\"\n [captionLayout]=\"captionLayout()\"\n [formatDates]=\"formatDates()\"\n [transformDates]=\"transformDates()\"\n [formControlName]=\"cnm\"\n [class]=\"$pickerClass()\"\n >\n <hlm-date-multi-input\n [inputId]=\"effectiveId()\"\n [name]=\"cnm || name()\"\n [readonly]=\"readonly()\"\n [ariaLabel]=\"lbl\"\n [ariaDescribedby]=\"describedBy()\"\n [placeholder]=\"placeholder()\"\n [parseDate]=\"parseDate()\"\n [formatInputDates]=\"formatInputDates()\"\n [inputClass]=\"$inputClass()\"\n />\n </hlm-date-picker-multi>\n\n @if (showError()) {\n <hlm-error [id]=\"errorId()\" [class]=\"$errorClass()\">\n {{ resolvedError() }}\n </hlm-error>\n }\n\n @if (hnt) {\n <hlm-hint [id]=\"hintId()\" [class]=\"$hintClass()\">\n {{ hnt }}\n </hlm-hint>\n }\n </hlm-form-field>\n ", isInline: true, dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: HlmFormField, selector: "hlm-form-field", inputs: ["class"] }, { kind: "directive", type: HlmError, selector: "hlm-error", inputs: ["class"] }, { kind: "directive", type: HlmHint, selector: "hlm-hint", inputs: ["class"] }, { kind: "directive", type: HlmLabel, selector: "[hlmLabel]", inputs: ["class"] }, { kind: "component", type: HlmDatePickerMulti, selector: "hlm-date-picker-multi", inputs: ["captionLayout", "min", "max", "minSelection", "maxSelection", "disabled", "date", "autoCloseOnMaxSelection", "formatDates", "transformDates"], outputs: ["dateChange"] }, { kind: "component", type: HlmDateMultiInput, selector: "hlm-date-multi-input", inputs: ["name", "readonly", "ariaLabel", "ariaDescribedby", "class", "inputClass", "parseDate", "formatInputDates"] }] });
package/form-date-picker-multi/types/form-date-picker-multi.d.ts CHANGED
@@ -8,6 +8,7 @@ declare class EgFormDatePickerMulti {
8
8
  private readonly _errorMessages;
9
9
  private readonly generatedId;
10
10
  private readonly _config;
11
+ private readonly _shared;
11
12
  label: _angular_core.InputSignal<string | undefined>;
12
13
  controlId: _angular_core.InputSignal<string | undefined>;
13
14
  controlName: _angular_core.InputSignal<string>;
package/form-date-range-picker/fesm2022/form-date-range-picker.mjs CHANGED
@@ -2,7 +2,7 @@ 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 { injectEgFormErrorMessages, HlmFormIdGenerator, resolveEgFormError, 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 { injectHlmDateRangePickerConfig, HlmDateRangePicker, HlmDateRangeInput } from '@egose/shadcn-theme-ng/date-picker';
8
8
  import { hlm } from '@egose/shadcn-theme-ng/utils';
@@ -12,6 +12,7 @@ class EgFormDateRangePicker {
12
12
  _errorMessages = injectEgFormErrorMessages();
13
13
  generatedId = inject(HlmFormIdGenerator).generate('eg-form-date-range-picker');
14
14
  _config = injectHlmDateRangePickerConfig();
15
+ _shared = injectEgFormSharedConfig();
15
16
  // Inputs
16
17
  label = input(undefined, /* @ts-ignore */
17
18
  ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
@@ -120,15 +121,15 @@ class EgFormDateRangePicker {
120
121
  // Computed classes (library base < global config < per-instance)
121
122
  $userClass = computed(() => hlm("w-full", this.userClass()), /* @ts-ignore */
122
123
  ...(ngDevMode ? [{ debugName: "$userClass" }] : /* istanbul ignore next */ []));
123
- $labelClass = computed(() => hlm("mb-1", this._config.labelClass, this.labelClass()), /* @ts-ignore */
124
+ $labelClass = computed(() => hlm("mb-1", this._shared.labelClass, this._config.labelClass, this.labelClass()), /* @ts-ignore */
124
125
  ...(ngDevMode ? [{ debugName: "$labelClass" }] : /* istanbul ignore next */ []));
125
- $pickerClass = computed(() => hlm("mb-1", this._config.pickerClass, this.pickerClass()), /* @ts-ignore */
126
+ $pickerClass = computed(() => hlm("mb-1", this._shared.pickerClass, this._config.pickerClass, this.pickerClass()), /* @ts-ignore */
126
127
  ...(ngDevMode ? [{ debugName: "$pickerClass" }] : /* istanbul ignore next */ []));
127
- $inputClass = computed(() => hlm(this._config.inputClass, this.inputClass()), /* @ts-ignore */
128
+ $inputClass = computed(() => hlm(this._shared.inputClass, this._config.inputClass, this.inputClass()), /* @ts-ignore */
128
129
  ...(ngDevMode ? [{ debugName: "$inputClass" }] : /* istanbul ignore next */ []));
129
- $errorClass = computed(() => hlm("mt-0", this._config.errorClass, this.errorClass()), /* @ts-ignore */
130
+ $errorClass = computed(() => hlm("mt-0", this._shared.errorClass, this._config.errorClass, this.errorClass()), /* @ts-ignore */
130
131
  ...(ngDevMode ? [{ debugName: "$errorClass" }] : /* istanbul ignore next */ []));
131
- $hintClass = computed(() => hlm("mt-0", this._config.hintClass, this.hintClass()), /* @ts-ignore */
132
+ $hintClass = computed(() => hlm("mt-0", this._shared.hintClass, this._config.hintClass, this.hintClass()), /* @ts-ignore */
132
133
  ...(ngDevMode ? [{ debugName: "$hintClass" }] : /* istanbul ignore next */ []));
133
134
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: EgFormDateRangePicker, deps: [], target: i0.ɵɵFactoryTarget.Component });
134
135
  static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.3", type: EgFormDateRangePicker, isStandalone: true, selector: "eg-form-date-range-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 }, autoCloseOnEndSelection: { classPropertyName: "autoCloseOnEndSelection", publicName: "autoCloseOnEndSelection", isSignal: true, isRequired: false, transformFunction: null }, captionLayout: { classPropertyName: "captionLayout", publicName: "captionLayout", isSignal: true, isRequired: false, transformFunction: null }, formatDates: { classPropertyName: "formatDates", publicName: "formatDates", isSignal: true, isRequired: false, transformFunction: null }, transformDates: { classPropertyName: "transformDates", publicName: "transformDates", isSignal: true, isRequired: false, transformFunction: null }, parseDate: { classPropertyName: "parseDate", publicName: "parseDate", isSignal: true, isRequired: false, transformFunction: null }, formatInputDates: { classPropertyName: "formatInputDates", publicName: "formatInputDates", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, labelClass: { classPropertyName: "labelClass", publicName: "labelClass", isSignal: true, isRequired: false, transformFunction: null }, pickerClass: { classPropertyName: "pickerClass", publicName: "pickerClass", isSignal: true, isRequired: false, transformFunction: null }, inputClass: { classPropertyName: "inputClass", publicName: "inputClass", isSignal: true, isRequired: false, transformFunction: null }, errorClass: { classPropertyName: "errorClass", publicName: "errorClass", isSignal: true, isRequired: false, transformFunction: null }, hintClass: { classPropertyName: "hintClass", publicName: "hintClass", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "$userClass()" } }, providers: [{ provide: ControlContainer, useExisting: FormGroupDirective }], ngImport: i0, template: "\n @let lbl = label();\n @let cnm = controlName();\n @let hnt = hint();\n @let rqrd = required();\n\n <hlm-form-field>\n @if (lbl) {\n <label hlmLabel [for]=\"effectiveId()\" [class]=\"$labelClass()\"\n >{{ lbl }}\n @if (rqrd) {\n <span class=\"text-red-500\">*</span>\n }\n </label>\n }\n\n <hlm-date-range-picker\n [min]=\"$min()\"\n [max]=\"$max()\"\n [disabled]=\"disabled()\"\n [autoCloseOnEndSelection]=\"autoCloseOnEndSelection()\"\n [captionLayout]=\"captionLayout()\"\n [formatDates]=\"formatDates()\"\n [transformDates]=\"transformDates()\"\n [formControlName]=\"cnm\"\n [class]=\"$pickerClass()\"\n >\n <hlm-date-range-input\n [inputId]=\"effectiveId()\"\n [name]=\"cnm || name()\"\n [readonly]=\"readonly()\"\n [ariaLabel]=\"lbl\"\n [ariaDescribedby]=\"describedBy()\"\n [placeholder]=\"placeholder()\"\n [parseDate]=\"parseDate()\"\n [formatInputDates]=\"formatInputDates()\"\n [inputClass]=\"$inputClass()\"\n />\n </hlm-date-range-picker>\n\n @if (showError()) {\n <hlm-error [id]=\"errorId()\" [class]=\"$errorClass()\">\n {{ resolvedError() }}\n </hlm-error>\n }\n\n @if (hnt) {\n <hlm-hint [id]=\"hintId()\" [class]=\"$hintClass()\">\n {{ hnt }}\n </hlm-hint>\n }\n </hlm-form-field>\n ", isInline: true, dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: HlmFormField, selector: "hlm-form-field", inputs: ["class"] }, { kind: "directive", type: HlmError, selector: "hlm-error", inputs: ["class"] }, { kind: "directive", type: HlmHint, selector: "hlm-hint", inputs: ["class"] }, { kind: "directive", type: HlmLabel, selector: "[hlmLabel]", inputs: ["class"] }, { kind: "component", type: HlmDateRangePicker, selector: "hlm-date-range-picker", inputs: ["captionLayout", "min", "max", "disabled", "date", "autoCloseOnEndSelection", "formatDates", "transformDates"], outputs: ["dateChange"] }, { kind: "component", type: HlmDateRangeInput, selector: "hlm-date-range-input", inputs: ["name", "readonly", "ariaLabel", "ariaDescribedby", "class", "inputClass", "parseDate", "formatInputDates"] }] });