@egose/shadcn-theme-ng 0.4.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/fesm2022/form-autocomplete.mjs +7 -6
- package/form-autocomplete/types/form-autocomplete.d.ts +1 -0
- package/form-checkbox/README.md +3 -3
- package/form-checkbox/fesm2022/form-checkbox.mjs +65 -10
- package/form-checkbox/types/form-checkbox.d.ts +24 -4
- package/form-combobox/fesm2022/form-combobox.mjs +7 -6
- package/form-combobox/types/form-combobox.d.ts +1 -0
- package/form-date-picker/fesm2022/form-date-picker.mjs +7 -6
- package/form-date-picker/types/form-date-picker.d.ts +1 -0
- package/form-date-picker-multi/fesm2022/form-date-picker-multi.mjs +7 -6
- package/form-date-picker-multi/types/form-date-picker-multi.d.ts +1 -0
- package/form-date-range-picker/fesm2022/form-date-range-picker.mjs +7 -6
- package/form-date-range-picker/types/form-date-range-picker.d.ts +1 -0
- package/form-field/fesm2022/form-field.mjs +18 -1
- package/form-field/types/form-field.d.ts +48 -2
- package/form-input-otp/fesm2022/form-input-otp.mjs +6 -5
- package/form-input-otp/types/form-input-otp.d.ts +1 -0
- package/form-month-year-picker/fesm2022/form-month-year-picker.mjs +7 -6
- package/form-month-year-picker/types/form-month-year-picker.d.ts +1 -0
- package/form-native-select/fesm2022/form-native-select.mjs +6 -5
- package/form-native-select/types/form-native-select.d.ts +1 -0
- package/form-phone-input/fesm2022/form-phone-input.mjs +6 -5
- package/form-phone-input/types/form-phone-input.d.ts +1 -0
- package/form-radio-group/fesm2022/form-radio-group.mjs +6 -5
- package/form-radio-group/types/form-radio-group.d.ts +1 -0
- package/form-searchable-multiselect/fesm2022/form-searchable-multiselect.mjs +6 -5
- package/form-searchable-multiselect/types/form-searchable-multiselect.d.ts +1 -0
- package/form-select/fesm2022/form-select.mjs +6 -5
- package/form-select/types/form-select.d.ts +1 -0
- package/form-slider/fesm2022/form-slider.mjs +6 -5
- package/form-slider/types/form-slider.d.ts +1 -0
- package/form-switch/fesm2022/form-switch.mjs +6 -5
- package/form-switch/types/form-switch.d.ts +1 -0
- package/form-text-input/fesm2022/form-text-input.mjs +6 -5
- package/form-text-input/types/form-text-input.d.ts +1 -0
- package/form-textarea/fesm2022/form-textarea.mjs +6 -5
- package/form-textarea/types/form-textarea.d.ts +1 -0
- package/form-toggle/fesm2022/form-toggle.mjs +8 -5
- package/form-toggle/types/form-toggle.d.ts +1 -0
- package/form-toggle-group/fesm2022/form-toggle-group.mjs +6 -5
- package/form-toggle-group/types/form-toggle-group.d.ts +1 -0
- 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
|
@@ -83,6 +83,52 @@ declare class HlmFormIdGenerator {
|
|
|
83
83
|
static ɵprov: i0.ɵɵInjectableDeclaration<HlmFormIdGenerator>;
|
|
84
84
|
}
|
|
85
85
|
|
|
86
|
+
/**
|
|
87
|
+
* Global styling defaults applied to every `eg-form-*` wrapper that follows
|
|
88
|
+
* the shared label / control / error / hint skeleton.
|
|
89
|
+
*
|
|
90
|
+
* `labelClass` / `errorClass` / `hintClass` apply to every wrapper.
|
|
91
|
+
* Each control slot only applies to wrappers that declare the matching slot
|
|
92
|
+
* (e.g. `inputClass` → text-input, phone-input, autocomplete, date-pickers;
|
|
93
|
+
* `selectClass` → select, native-select; `pickerClass` → date-pickers).
|
|
94
|
+
*
|
|
95
|
+
* Each slot is merged under the matching per-component global config and the
|
|
96
|
+
* per-instance `*Class` input:
|
|
97
|
+
*
|
|
98
|
+
* library base < shared global < component global < per-instance
|
|
99
|
+
*
|
|
100
|
+
* `eg-form-toggle` picks up only the `labelClass` / `errorClass` / `hintClass`
|
|
101
|
+
* slots (it keeps its own CVA / exclusive error-hint behavior and local
|
|
102
|
+
* `toggleClass`).
|
|
103
|
+
*/
|
|
104
|
+
interface EgFormSharedConfig {
|
|
105
|
+
labelClass?: string;
|
|
106
|
+
errorClass?: string;
|
|
107
|
+
hintClass?: string;
|
|
108
|
+
inputClass?: string;
|
|
109
|
+
textareaClass?: string;
|
|
110
|
+
selectClass?: string;
|
|
111
|
+
controlClass?: string;
|
|
112
|
+
chipsClass?: string;
|
|
113
|
+
checkboxClass?: string;
|
|
114
|
+
switchClass?: string;
|
|
115
|
+
sliderClass?: string;
|
|
116
|
+
groupClass?: string;
|
|
117
|
+
otpClass?: string;
|
|
118
|
+
pickerClass?: string;
|
|
119
|
+
}
|
|
120
|
+
/**
|
|
121
|
+
* Sets shared label / error / hint / control classes app-wide, e.g.:
|
|
122
|
+
*
|
|
123
|
+
* ```ts
|
|
124
|
+
* provideEgFormSharedConfig({ labelClass: 'tw:font-semibold', errorClass: 'tw:text-red-600' })
|
|
125
|
+
* provideEgFormSharedConfig({ inputClass: 'tw:border-dashed', selectClass: 'tw:rounded-none' })
|
|
126
|
+
* ```
|
|
127
|
+
*/
|
|
128
|
+
declare function provideEgFormSharedConfig(config: Partial<EgFormSharedConfig>): ValueProvider;
|
|
129
|
+
/** Merged shared config (empty object when not provided). */
|
|
130
|
+
declare function injectEgFormSharedConfig(): EgFormSharedConfig;
|
|
131
|
+
|
|
86
132
|
declare const HlmFormFieldImports: (typeof HlmError | typeof HlmFormField | typeof HlmHint)[];
|
|
87
133
|
declare class HlmFormFieldModule {
|
|
88
134
|
static ɵfac: i0.ɵɵFactoryDeclaration<HlmFormFieldModule, never>;
|
|
@@ -90,5 +136,5 @@ declare class HlmFormFieldModule {
|
|
|
90
136
|
static ɵinj: i0.ɵɵInjectorDeclaration<HlmFormFieldModule>;
|
|
91
137
|
}
|
|
92
138
|
|
|
93
|
-
export { DEFAULT_EG_FORM_ERROR_MESSAGES, EG_FORM_DEFAULT_ERROR_LABEL, HlmError, HlmFormField, HlmFormFieldImports, HlmFormFieldModule, HlmFormIdGenerator, HlmHint, injectEgFormErrorMessages, provideEgFormErrorMessages, resolveEgFormError };
|
|
94
|
-
export type { EgFormErrorMessageFn, EgFormErrorMessages };
|
|
139
|
+
export { DEFAULT_EG_FORM_ERROR_MESSAGES, EG_FORM_DEFAULT_ERROR_LABEL, HlmError, HlmFormField, HlmFormFieldImports, HlmFormFieldModule, HlmFormIdGenerator, HlmHint, injectEgFormErrorMessages, injectEgFormSharedConfig, provideEgFormErrorMessages, provideEgFormSharedConfig, resolveEgFormError };
|
|
140
|
+
export type { EgFormErrorMessageFn, EgFormErrorMessages, EgFormSharedConfig };
|
|
@@ -2,7 +2,7 @@ import * as i0 from '@angular/core';
|
|
|
2
2
|
import { InjectionToken, inject, input, numberAttribute, computed, Component } from '@angular/core';
|
|
3
3
|
import * as i1 from '@angular/forms';
|
|
4
4
|
import { FormGroupDirective, ReactiveFormsModule, ControlContainer } from '@angular/forms';
|
|
5
|
-
import { 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 { BrnInputOtp } from '@spartan-ng/brain/input-otp';
|
|
8
8
|
import * as i2 from '@egose/shadcn-theme-ng/input-otp';
|
|
@@ -22,6 +22,7 @@ class EgFormInputOtp {
|
|
|
22
22
|
_errorMessages = injectEgFormErrorMessages();
|
|
23
23
|
generatedId = inject(HlmFormIdGenerator).generate('eg-form-input-otp');
|
|
24
24
|
_config = injectEgFormInputOtpConfig();
|
|
25
|
+
_shared = injectEgFormSharedConfig();
|
|
25
26
|
label = input(undefined, /* @ts-ignore */
|
|
26
27
|
...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
|
|
27
28
|
controlId = input(undefined, /* @ts-ignore */
|
|
@@ -103,13 +104,13 @@ class EgFormInputOtp {
|
|
|
103
104
|
// Computed classes (library base < global config < per-instance)
|
|
104
105
|
$userClass = computed(() => hlm("w-full", this.userClass()), /* @ts-ignore */
|
|
105
106
|
...(ngDevMode ? [{ debugName: "$userClass" }] : /* istanbul ignore next */ []));
|
|
106
|
-
$labelClass = computed(() => hlm("mb-1", this._config.labelClass, this.labelClass()), /* @ts-ignore */
|
|
107
|
+
$labelClass = computed(() => hlm("mb-1", this._shared.labelClass, this._config.labelClass, this.labelClass()), /* @ts-ignore */
|
|
107
108
|
...(ngDevMode ? [{ debugName: "$labelClass" }] : /* istanbul ignore next */ []));
|
|
108
|
-
$otpClass = computed(() => hlm(this._config.otpClass, this.otpClass()), /* @ts-ignore */
|
|
109
|
+
$otpClass = computed(() => hlm(this._shared.otpClass, this._config.otpClass, this.otpClass()), /* @ts-ignore */
|
|
109
110
|
...(ngDevMode ? [{ debugName: "$otpClass" }] : /* istanbul ignore next */ []));
|
|
110
|
-
$errorClass = computed(() => hlm("mt-0", this._config.errorClass, this.errorClass()), /* @ts-ignore */
|
|
111
|
+
$errorClass = computed(() => hlm("mt-0", this._shared.errorClass, this._config.errorClass, this.errorClass()), /* @ts-ignore */
|
|
111
112
|
...(ngDevMode ? [{ debugName: "$errorClass" }] : /* istanbul ignore next */ []));
|
|
112
|
-
$hintClass = computed(() => hlm("mt-0", this._config.hintClass, this.hintClass()), /* @ts-ignore */
|
|
113
|
+
$hintClass = computed(() => hlm("mt-0", this._shared.hintClass, this._config.hintClass, this.hintClass()), /* @ts-ignore */
|
|
113
114
|
...(ngDevMode ? [{ debugName: "$hintClass" }] : /* istanbul ignore next */ []));
|
|
114
115
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: EgFormInputOtp, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
115
116
|
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.3", type: EgFormInputOtp, isStandalone: true, selector: "eg-form-input-otp", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, controlId: { classPropertyName: "controlId", publicName: "controlId", isSignal: true, isRequired: false, transformFunction: null }, controlName: { classPropertyName: "controlName", publicName: "controlName", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, autoError: { classPropertyName: "autoError", publicName: "autoError", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, length: { classPropertyName: "length", publicName: "length", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, labelClass: { classPropertyName: "labelClass", publicName: "labelClass", isSignal: true, isRequired: false, transformFunction: null }, otpClass: { classPropertyName: "otpClass", publicName: "otpClass", isSignal: true, isRequired: false, transformFunction: null }, errorClass: { classPropertyName: "errorClass", publicName: "errorClass", isSignal: true, isRequired: false, transformFunction: null }, hintClass: { classPropertyName: "hintClass", publicName: "hintClass", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "$userClass()" } }, providers: [{ provide: ControlContainer, useExisting: FormGroupDirective }], ngImport: i0, template: "\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 <brn-input-otp\n hlmInputOtp\n [length]=\"length()\"\n [formControlName]=\"cnm\"\n [inputId]=\"effectiveId()\"\n [disabled]=\"effectiveDisabled()\"\n [class]=\"$otpClass()\"\n >\n <div hlmInputOtpGroup>\n @for (i of slotIndexes(); track i) {\n <hlm-input-otp-slot [index]=\"i\" />\n }\n </div>\n </brn-input-otp>\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: BrnInputOtp, selector: "brn-input-otp", inputs: ["hostStyles", "inputId", "inputAutocomplete", "inputStyles", "containerStyles", "disabled", "length", "inputMode", "inputClass", "autofocus", "transformPaste", "value"], outputs: ["valueChange", "completed"] }, { kind: "directive", type: i2.HlmInputOtp, selector: "brn-input-otp[hlmInputOtp], brn-input-otp[hlm]" }, { kind: "directive", type: i2.HlmInputOtpGroup, selector: "[hlmInputOtpGroup],hlm-input-otp-group" }, { kind: "component", type: i2.HlmInputOtpSlot, selector: "hlm-input-otp-slot", inputs: ["index"] }] });
|
|
@@ -8,6 +8,7 @@ declare class EgFormInputOtp {
|
|
|
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>;
|
|
@@ -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 { injectHlmMonthYearPickerConfig, HlmMonthYearPicker, HlmMonthYearInput } from '@egose/shadcn-theme-ng/date-picker';
|
|
8
8
|
import { hlm } from '@egose/shadcn-theme-ng/utils';
|
|
@@ -12,6 +12,7 @@ class EgFormMonthYearPicker {
|
|
|
12
12
|
_errorMessages = injectEgFormErrorMessages();
|
|
13
13
|
generatedId = inject(HlmFormIdGenerator).generate('eg-form-month-year-picker');
|
|
14
14
|
_config = injectHlmMonthYearPickerConfig();
|
|
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 */
|
|
@@ -115,15 +116,15 @@ class EgFormMonthYearPicker {
|
|
|
115
116
|
// Computed classes (library base < global config < per-instance)
|
|
116
117
|
$userClass = computed(() => hlm("w-full", this.userClass()), /* @ts-ignore */
|
|
117
118
|
...(ngDevMode ? [{ debugName: "$userClass" }] : /* istanbul ignore next */ []));
|
|
118
|
-
$labelClass = computed(() => hlm("mb-1", this._config.labelClass, this.labelClass()), /* @ts-ignore */
|
|
119
|
+
$labelClass = computed(() => hlm("mb-1", this._shared.labelClass, this._config.labelClass, this.labelClass()), /* @ts-ignore */
|
|
119
120
|
...(ngDevMode ? [{ debugName: "$labelClass" }] : /* istanbul ignore next */ []));
|
|
120
|
-
$pickerClass = computed(() => hlm("mb-1", this._config.pickerClass, this.pickerClass()), /* @ts-ignore */
|
|
121
|
+
$pickerClass = computed(() => hlm("mb-1", this._shared.pickerClass, this._config.pickerClass, this.pickerClass()), /* @ts-ignore */
|
|
121
122
|
...(ngDevMode ? [{ debugName: "$pickerClass" }] : /* istanbul ignore next */ []));
|
|
122
|
-
$inputClass = computed(() => hlm(this._config.inputClass, this.inputClass()), /* @ts-ignore */
|
|
123
|
+
$inputClass = computed(() => hlm(this._shared.inputClass, this._config.inputClass, this.inputClass()), /* @ts-ignore */
|
|
123
124
|
...(ngDevMode ? [{ debugName: "$inputClass" }] : /* istanbul ignore next */ []));
|
|
124
|
-
$errorClass = computed(() => hlm("mt-0", this._config.errorClass, this.errorClass()), /* @ts-ignore */
|
|
125
|
+
$errorClass = computed(() => hlm("mt-0", this._shared.errorClass, this._config.errorClass, this.errorClass()), /* @ts-ignore */
|
|
125
126
|
...(ngDevMode ? [{ debugName: "$errorClass" }] : /* istanbul ignore next */ []));
|
|
126
|
-
$hintClass = computed(() => hlm("mt-0", this._config.hintClass, this.hintClass()), /* @ts-ignore */
|
|
127
|
+
$hintClass = computed(() => hlm("mt-0", this._shared.hintClass, this._config.hintClass, this.hintClass()), /* @ts-ignore */
|
|
127
128
|
...(ngDevMode ? [{ debugName: "$hintClass" }] : /* istanbul ignore next */ []));
|
|
128
129
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: EgFormMonthYearPicker, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
129
130
|
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.3", type: EgFormMonthYearPicker, isStandalone: true, selector: "eg-form-month-year-picker", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, controlId: { classPropertyName: "controlId", publicName: "controlId", isSignal: true, isRequired: false, transformFunction: null }, controlName: { classPropertyName: "controlName", publicName: "controlName", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, autoError: { classPropertyName: "autoError", publicName: "autoError", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, autoCloseOnSelect: { classPropertyName: "autoCloseOnSelect", publicName: "autoCloseOnSelect", isSignal: true, isRequired: false, transformFunction: null }, formatDate: { classPropertyName: "formatDate", publicName: "formatDate", isSignal: true, isRequired: false, transformFunction: null }, transformDate: { classPropertyName: "transformDate", publicName: "transformDate", isSignal: true, isRequired: false, transformFunction: null }, parseDate: { classPropertyName: "parseDate", publicName: "parseDate", isSignal: true, isRequired: false, transformFunction: null }, formatInputDate: { classPropertyName: "formatInputDate", publicName: "formatInputDate", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, labelClass: { classPropertyName: "labelClass", publicName: "labelClass", isSignal: true, isRequired: false, transformFunction: null }, pickerClass: { classPropertyName: "pickerClass", publicName: "pickerClass", isSignal: true, isRequired: false, transformFunction: null }, inputClass: { classPropertyName: "inputClass", publicName: "inputClass", isSignal: true, isRequired: false, transformFunction: null }, errorClass: { classPropertyName: "errorClass", publicName: "errorClass", isSignal: true, isRequired: false, transformFunction: null }, hintClass: { classPropertyName: "hintClass", publicName: "hintClass", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "$userClass()" } }, providers: [{ provide: ControlContainer, useExisting: FormGroupDirective }], ngImport: i0, template: "\n @let lbl = label();\n @let cnm = controlName();\n @let hnt = hint();\n @let rqrd = required();\n\n <hlm-form-field>\n @if (lbl) {\n <label hlmLabel [for]=\"effectiveId()\" [class]=\"$labelClass()\"\n >{{ lbl }}\n @if (rqrd) {\n <span class=\"text-red-500\">*</span>\n }\n </label>\n }\n\n <hlm-month-year-picker\n [min]=\"$min()\"\n [max]=\"$max()\"\n [disabled]=\"disabled()\"\n [autoCloseOnSelect]=\"autoCloseOnSelect()\"\n [formatDate]=\"formatDate()\"\n [transformDate]=\"transformDate()\"\n [formControlName]=\"cnm\"\n [class]=\"$pickerClass()\"\n >\n <hlm-month-year-input\n [inputId]=\"effectiveId()\"\n [name]=\"cnm || name()\"\n [readonly]=\"readonly()\"\n [ariaLabel]=\"lbl\"\n [ariaDescribedby]=\"describedBy()\"\n [placeholder]=\"placeholder()\"\n [parseDate]=\"parseDate()\"\n [formatInputDate]=\"formatInputDate()\"\n [inputClass]=\"$inputClass()\"\n />\n </hlm-month-year-picker>\n\n @if (showError()) {\n <hlm-error [id]=\"errorId()\" [class]=\"$errorClass()\">\n {{ resolvedError() }}\n </hlm-error>\n }\n\n @if (hnt) {\n <hlm-hint [id]=\"hintId()\" [class]=\"$hintClass()\">\n {{ hnt }}\n </hlm-hint>\n }\n </hlm-form-field>\n ", isInline: true, dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: HlmFormField, selector: "hlm-form-field", inputs: ["class"] }, { kind: "directive", type: HlmError, selector: "hlm-error", inputs: ["class"] }, { kind: "directive", type: HlmHint, selector: "hlm-hint", inputs: ["class"] }, { kind: "directive", type: HlmLabel, selector: "[hlmLabel]", inputs: ["class"] }, { kind: "component", type: HlmMonthYearPicker, selector: "hlm-month-year-picker", inputs: ["min", "max", "disabled", "date", "defaultFocusedDate", "autoCloseOnSelect", "formatDate", "transformDate"], outputs: ["dateChange"] }, { kind: "component", type: HlmMonthYearInput, selector: "hlm-month-year-input", inputs: ["name", "readonly", "ariaLabel", "ariaDescribedby", "class", "inputClass", "parseDate", "formatInputDate"] }] });
|
|
@@ -6,6 +6,7 @@ declare class EgFormMonthYearPicker {
|
|
|
6
6
|
private readonly _errorMessages;
|
|
7
7
|
private readonly generatedId;
|
|
8
8
|
private readonly _config;
|
|
9
|
+
private readonly _shared;
|
|
9
10
|
label: _angular_core.InputSignal<string | undefined>;
|
|
10
11
|
controlId: _angular_core.InputSignal<string | undefined>;
|
|
11
12
|
controlName: _angular_core.InputSignal<string>;
|
|
@@ -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 { HlmNativeSelect } from '@egose/shadcn-theme-ng/native-select';
|
|
8
8
|
import { hlm } from '@egose/shadcn-theme-ng/utils';
|
|
@@ -20,6 +20,7 @@ class EgFormNativeSelect {
|
|
|
20
20
|
_errorMessages = injectEgFormErrorMessages();
|
|
21
21
|
generatedId = inject(HlmFormIdGenerator).generate('eg-form-native-select');
|
|
22
22
|
_config = injectEgFormNativeSelectConfig();
|
|
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 */
|
|
@@ -95,13 +96,13 @@ class EgFormNativeSelect {
|
|
|
95
96
|
// Computed classes (library base < global config < per-instance)
|
|
96
97
|
$userClass = computed(() => hlm("w-full", this.userClass()), /* @ts-ignore */
|
|
97
98
|
...(ngDevMode ? [{ debugName: "$userClass" }] : /* istanbul ignore next */ []));
|
|
98
|
-
$labelClass = computed(() => hlm("mb-1 gap-0", this._config.labelClass, this.labelClass()), /* @ts-ignore */
|
|
99
|
+
$labelClass = computed(() => hlm("mb-1 gap-0", this._shared.labelClass, this._config.labelClass, this.labelClass()), /* @ts-ignore */
|
|
99
100
|
...(ngDevMode ? [{ debugName: "$labelClass" }] : /* istanbul ignore next */ []));
|
|
100
|
-
$selectClass = computed(() => hlm("w-full", this._config.selectClass, this.selectClass()), /* @ts-ignore */
|
|
101
|
+
$selectClass = computed(() => hlm("w-full", this._shared.selectClass, this._config.selectClass, this.selectClass()), /* @ts-ignore */
|
|
101
102
|
...(ngDevMode ? [{ debugName: "$selectClass" }] : /* istanbul ignore next */ []));
|
|
102
|
-
$errorClass = computed(() => hlm("mt-0", this._config.errorClass, this.errorClass()), /* @ts-ignore */
|
|
103
|
+
$errorClass = computed(() => hlm("mt-0", this._shared.errorClass, this._config.errorClass, this.errorClass()), /* @ts-ignore */
|
|
103
104
|
...(ngDevMode ? [{ debugName: "$errorClass" }] : /* istanbul ignore next */ []));
|
|
104
|
-
$hintClass = computed(() => hlm("mt-0", this._config.hintClass, this.hintClass()), /* @ts-ignore */
|
|
105
|
+
$hintClass = computed(() => hlm("mt-0", this._shared.hintClass, this._config.hintClass, this.hintClass()), /* @ts-ignore */
|
|
105
106
|
...(ngDevMode ? [{ debugName: "$hintClass" }] : /* istanbul ignore next */ []));
|
|
106
107
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: EgFormNativeSelect, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
107
108
|
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.3", type: EgFormNativeSelect, isStandalone: true, selector: "eg-form-native-select", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, controlId: { classPropertyName: "controlId", publicName: "controlId", isSignal: true, isRequired: false, transformFunction: null }, controlName: { classPropertyName: "controlName", publicName: "controlName", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, autoError: { classPropertyName: "autoError", publicName: "autoError", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, labelClass: { classPropertyName: "labelClass", publicName: "labelClass", isSignal: true, isRequired: false, transformFunction: null }, selectClass: { classPropertyName: "selectClass", publicName: "selectClass", isSignal: true, isRequired: false, transformFunction: null }, errorClass: { classPropertyName: "errorClass", publicName: "errorClass", isSignal: true, isRequired: false, transformFunction: null }, hintClass: { classPropertyName: "hintClass", publicName: "hintClass", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "$userClass()" } }, providers: [{ provide: ControlContainer, useExisting: FormGroupDirective }], ngImport: i0, template: "\n @let lbl = label();\n @let cnm = controlName();\n @let hnt = hint();\n @let rqrd = required();\n\n <hlm-form-field>\n @if (lbl) {\n <label hlmLabel [for]=\"effectiveId()\" [class]=\"$labelClass()\"\n >{{ lbl }}\n @if (rqrd) {\n <span class=\"text-red-500\">*</span>\n }\n </label>\n }\n\n <hlm-native-select\n [selectId]=\"effectiveId()\"\n [name]=\"cnm || name()\"\n [ariaDescribedby]=\"describedBy()\"\n [disabled]=\"disabled()\"\n [formControlName]=\"cnm\"\n [selectClass]=\"$selectClass()\"\n >\n @for (option of options(); track option.value) {\n <option\n class=\"bg-[Canvas] text-[CanvasText]\"\n [value]=\"option.value\"\n [disabled]=\"option.disabled ?? false\"\n >\n {{ option.label }}\n </option>\n }\n </hlm-native-select>\n\n @if (showError()) {\n <hlm-error [id]=\"errorId()\" [class]=\"$errorClass()\">\n {{ resolvedError() }}\n </hlm-error>\n }\n\n @if (hnt) {\n <hlm-hint [id]=\"hintId()\" [class]=\"$hintClass()\">\n {{ hnt }}\n </hlm-hint>\n }\n </hlm-form-field>\n ", isInline: true, dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: HlmFormField, selector: "hlm-form-field", inputs: ["class"] }, { kind: "directive", type: HlmError, selector: "hlm-error", inputs: ["class"] }, { kind: "directive", type: HlmHint, selector: "hlm-hint", inputs: ["class"] }, { kind: "directive", type: HlmLabel, selector: "[hlmLabel]", inputs: ["class"] }, { kind: "component", type: HlmNativeSelect, selector: "hlm-native-select", inputs: ["selectId", "name", "ariaDescribedby", "selectClass", "selectIconClass", "size", "disabled", "forceInvalid", "aria-invalid", "value"], outputs: ["valueChange"] }] });
|
|
@@ -12,6 +12,7 @@ declare class EgFormNativeSelect {
|
|
|
12
12
|
private readonly _errorMessages;
|
|
13
13
|
private readonly generatedId;
|
|
14
14
|
private readonly _config;
|
|
15
|
+
private readonly _shared;
|
|
15
16
|
label: _angular_core.InputSignal<string | undefined>;
|
|
16
17
|
controlId: _angular_core.InputSignal<string | undefined>;
|
|
17
18
|
controlName: _angular_core.InputSignal<string>;
|
|
@@ -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 { formatNanpPhoneNumber, HlmPhoneInput } from '@egose/shadcn-theme-ng/phone-input';
|
|
8
8
|
import { hlm } from '@egose/shadcn-theme-ng/utils';
|
|
@@ -20,6 +20,7 @@ class EgFormPhoneInput {
|
|
|
20
20
|
_errorMessages = injectEgFormErrorMessages();
|
|
21
21
|
generatedId = inject(HlmFormIdGenerator).generate('eg-form-phone-input');
|
|
22
22
|
_config = injectEgFormPhoneInputConfig();
|
|
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 */
|
|
@@ -105,13 +106,13 @@ class EgFormPhoneInput {
|
|
|
105
106
|
// Computed classes (library base < global config < per-instance)
|
|
106
107
|
$userClass = computed(() => hlm("w-full", this.userClass()), /* @ts-ignore */
|
|
107
108
|
...(ngDevMode ? [{ debugName: "$userClass" }] : /* istanbul ignore next */ []));
|
|
108
|
-
$labelClass = computed(() => hlm("mb-1 gap-0", this._config.labelClass, this.labelClass()), /* @ts-ignore */
|
|
109
|
+
$labelClass = computed(() => hlm("mb-1 gap-0", this._shared.labelClass, this._config.labelClass, this.labelClass()), /* @ts-ignore */
|
|
109
110
|
...(ngDevMode ? [{ debugName: "$labelClass" }] : /* istanbul ignore next */ []));
|
|
110
|
-
$inputClass = computed(() => hlm("mb-1", this._config.inputClass, this.inputClass()), /* @ts-ignore */
|
|
111
|
+
$inputClass = computed(() => hlm("mb-1", this._shared.inputClass, this._config.inputClass, this.inputClass()), /* @ts-ignore */
|
|
111
112
|
...(ngDevMode ? [{ debugName: "$inputClass" }] : /* istanbul ignore next */ []));
|
|
112
|
-
$errorClass = computed(() => hlm("mt-0", this._config.errorClass, this.errorClass()), /* @ts-ignore */
|
|
113
|
+
$errorClass = computed(() => hlm("mt-0", this._shared.errorClass, this._config.errorClass, this.errorClass()), /* @ts-ignore */
|
|
113
114
|
...(ngDevMode ? [{ debugName: "$errorClass" }] : /* istanbul ignore next */ []));
|
|
114
|
-
$hintClass = computed(() => hlm("mt-0", this._config.hintClass, this.hintClass()), /* @ts-ignore */
|
|
115
|
+
$hintClass = computed(() => hlm("mt-0", this._shared.hintClass, this._config.hintClass, this.hintClass()), /* @ts-ignore */
|
|
115
116
|
...(ngDevMode ? [{ debugName: "$hintClass" }] : /* istanbul ignore next */ []));
|
|
116
117
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: EgFormPhoneInput, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
117
118
|
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.3", type: EgFormPhoneInput, isStandalone: true, selector: "eg-form-phone-input", 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 }, autocomplete: { classPropertyName: "autocomplete", publicName: "autocomplete", 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 }, maxDigits: { classPropertyName: "maxDigits", publicName: "maxDigits", isSignal: true, isRequired: false, transformFunction: null }, formatPhoneNumber: { classPropertyName: "formatPhoneNumber", publicName: "formatPhoneNumber", isSignal: true, isRequired: false, transformFunction: null }, modelFormat: { classPropertyName: "modelFormat", publicName: "modelFormat", 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 }, 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-phone-input\n [inputId]=\"effectiveId()\"\n [name]=\"cnm || name()\"\n [readonly]=\"readonly()\"\n [ariaLabel]=\"lbl\"\n [ariaDescribedby]=\"describedBy()\"\n [placeholder]=\"placeholder()\"\n [autocomplete]=\"autocomplete()\"\n [maxDigits]=\"maxDigits()\"\n [formatPhoneNumber]=\"formatPhoneNumber()\"\n [modelFormat]=\"modelFormat()\"\n [disabled]=\"disabled()\"\n [formControlName]=\"cnm\"\n [class]=\"$inputClass()\"\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: "component", type: HlmPhoneInput, selector: "hlm-phone-input", inputs: ["inputId", "name", "ariaLabel", "ariaDescribedby", "placeholder", "autocomplete", "readonly", "disabled", "forceInvalid", "maxDigits", "modelFormat", "formatPhoneNumber", "class", "inputClass"] }] });
|
|
@@ -8,6 +8,7 @@ declare class EgFormPhoneInput {
|
|
|
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>;
|
|
@@ -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 { HlmRadioGroup, HlmRadio, HlmRadioIndicator } from '@egose/shadcn-theme-ng/radio-group';
|
|
8
8
|
import { hlm } from '@egose/shadcn-theme-ng/utils';
|
|
@@ -20,6 +20,7 @@ class EgFormRadioGroup {
|
|
|
20
20
|
_errorMessages = injectEgFormErrorMessages();
|
|
21
21
|
generatedId = inject(HlmFormIdGenerator).generate('eg-form-radio-group');
|
|
22
22
|
_config = injectEgFormRadioGroupConfig();
|
|
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 */
|
|
@@ -103,13 +104,13 @@ class EgFormRadioGroup {
|
|
|
103
104
|
// Computed classes (library base < global config < per-instance)
|
|
104
105
|
$userClass = computed(() => hlm("w-full", this.userClass()), /* @ts-ignore */
|
|
105
106
|
...(ngDevMode ? [{ debugName: "$userClass" }] : /* istanbul ignore next */ []));
|
|
106
|
-
$labelClass = computed(() => hlm("mb-1", this._config.labelClass, this.labelClass()), /* @ts-ignore */
|
|
107
|
+
$labelClass = computed(() => hlm("mb-1", this._shared.labelClass, this._config.labelClass, this.labelClass()), /* @ts-ignore */
|
|
107
108
|
...(ngDevMode ? [{ debugName: "$labelClass" }] : /* istanbul ignore next */ []));
|
|
108
|
-
$groupClass = computed(() => hlm("flex flex-col gap-2", this._config.groupClass, this.groupClass()), /* @ts-ignore */
|
|
109
|
+
$groupClass = computed(() => hlm("flex flex-col gap-2", this._shared.groupClass, this._config.groupClass, this.groupClass()), /* @ts-ignore */
|
|
109
110
|
...(ngDevMode ? [{ debugName: "$groupClass" }] : /* istanbul ignore next */ []));
|
|
110
|
-
$errorClass = computed(() => hlm("mt-0", this._config.errorClass, this.errorClass()), /* @ts-ignore */
|
|
111
|
+
$errorClass = computed(() => hlm("mt-0", this._shared.errorClass, this._config.errorClass, this.errorClass()), /* @ts-ignore */
|
|
111
112
|
...(ngDevMode ? [{ debugName: "$errorClass" }] : /* istanbul ignore next */ []));
|
|
112
|
-
$hintClass = computed(() => hlm("mt-0", this._config.hintClass, this.hintClass()), /* @ts-ignore */
|
|
113
|
+
$hintClass = computed(() => hlm("mt-0", this._shared.hintClass, this._config.hintClass, this.hintClass()), /* @ts-ignore */
|
|
113
114
|
...(ngDevMode ? [{ debugName: "$hintClass" }] : /* istanbul ignore next */ []));
|
|
114
115
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: EgFormRadioGroup, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
115
116
|
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.3", type: EgFormRadioGroup, isStandalone: true, selector: "eg-form-radio-group", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, controlId: { classPropertyName: "controlId", publicName: "controlId", isSignal: true, isRequired: false, transformFunction: null }, controlName: { classPropertyName: "controlName", publicName: "controlName", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, autoError: { classPropertyName: "autoError", publicName: "autoError", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, labelClass: { classPropertyName: "labelClass", publicName: "labelClass", isSignal: true, isRequired: false, transformFunction: null }, groupClass: { classPropertyName: "groupClass", publicName: "groupClass", 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 <span hlmLabel [class]=\"$labelClass()\"\n >{{ lbl }}\n @if (rqrd) {\n <span class=\"text-red-500\">*</span>\n }\n </span>\n }\n\n <hlm-radio-group\n [formControlName]=\"cnm\"\n [name]=\"cnm || name() || ''\"\n [disabled]=\"effectiveDisabled()\"\n [required]=\"rqrd\"\n [class]=\"$groupClass()\"\n >\n @for (option of options(); track option.value) {\n <label class=\"flex items-center gap-2\">\n <hlm-radio\n [value]=\"option.value\"\n [disabled]=\"option.disabled ?? false\"\n [aria-describedby]=\"describedBy() ?? undefined\"\n >\n <hlm-radio-indicator />\n </hlm-radio>\n <span>{{ option.label }}</span>\n </label>\n }\n </hlm-radio-group>\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.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: 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: HlmRadioGroup, selector: "[hlmRadioGroup],hlm-radio-group", inputs: ["class"] }, { kind: "component", type: HlmRadio, selector: "hlm-radio", inputs: ["class", "inputId", "aria-label", "aria-labelledby", "aria-describedby", "value", "required", "disabled"], outputs: ["change"] }, { kind: "component", type: HlmRadioIndicator, selector: "hlm-radio-indicator" }] });
|
|
@@ -12,6 +12,7 @@ declare class EgFormRadioGroup {
|
|
|
12
12
|
private readonly _errorMessages;
|
|
13
13
|
private readonly generatedId;
|
|
14
14
|
private readonly _config;
|
|
15
|
+
private readonly _shared;
|
|
15
16
|
label: _angular_core.InputSignal<string | undefined>;
|
|
16
17
|
controlId: _angular_core.InputSignal<string | undefined>;
|
|
17
18
|
controlName: _angular_core.InputSignal<string>;
|
|
@@ -4,7 +4,7 @@ import * as i1 from '@angular/forms';
|
|
|
4
4
|
import { FormGroupDirective, ReactiveFormsModule, ControlContainer } from '@angular/forms';
|
|
5
5
|
import { HlmLabel } from '@egose/shadcn-theme-ng/label';
|
|
6
6
|
import { EgFormField } from '@egose/shadcn-theme-ng/form-field-simple';
|
|
7
|
-
import { injectEgFormErrorMessages, HlmFormIdGenerator, resolveEgFormError, HlmError, HlmHint } from '@egose/shadcn-theme-ng/form-field';
|
|
7
|
+
import { injectEgFormErrorMessages, HlmFormIdGenerator, injectEgFormSharedConfig, resolveEgFormError, HlmError, HlmHint } from '@egose/shadcn-theme-ng/form-field';
|
|
8
8
|
import { hlm } from '@egose/shadcn-theme-ng/utils';
|
|
9
9
|
import { EgSearchableMultiselect } from '@egose/shadcn-theme-ng/searchable-multiselect';
|
|
10
10
|
|
|
@@ -21,6 +21,7 @@ class EgFormSearchableMultiselect {
|
|
|
21
21
|
_errorMessages = injectEgFormErrorMessages();
|
|
22
22
|
generatedId = inject(HlmFormIdGenerator).generate('eg-form-searchable-multiselect');
|
|
23
23
|
_config = injectEgFormSearchableMultiselectConfig();
|
|
24
|
+
_shared = injectEgFormSharedConfig();
|
|
24
25
|
// Form field inputs
|
|
25
26
|
label = input(undefined, /* @ts-ignore */
|
|
26
27
|
...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
|
|
@@ -99,13 +100,13 @@ class EgFormSearchableMultiselect {
|
|
|
99
100
|
// Computed class names (library base < global config < per-instance)
|
|
100
101
|
$userClass = computed(() => hlm("w-full", this.userClass()), /* @ts-ignore */
|
|
101
102
|
...(ngDevMode ? [{ debugName: "$userClass" }] : /* istanbul ignore next */ []));
|
|
102
|
-
$labelClass = computed(() => hlm("mb-1 gap-0", this._config.labelClass, this.labelClass()), /* @ts-ignore */
|
|
103
|
+
$labelClass = computed(() => hlm("mb-1 gap-0", this._shared.labelClass, this._config.labelClass, this.labelClass()), /* @ts-ignore */
|
|
103
104
|
...(ngDevMode ? [{ debugName: "$labelClass" }] : /* istanbul ignore next */ []));
|
|
104
|
-
$controlClass = computed(() => hlm("w-full", this._config.controlClass, this.controlClass()), /* @ts-ignore */
|
|
105
|
+
$controlClass = computed(() => hlm("w-full", this._shared.controlClass, this._config.controlClass, this.controlClass()), /* @ts-ignore */
|
|
105
106
|
...(ngDevMode ? [{ debugName: "$controlClass" }] : /* istanbul ignore next */ []));
|
|
106
|
-
$errorClass = computed(() => hlm("mt-0", this._config.errorClass, this.errorClass()), /* @ts-ignore */
|
|
107
|
+
$errorClass = computed(() => hlm("mt-0", this._shared.errorClass, this._config.errorClass, this.errorClass()), /* @ts-ignore */
|
|
107
108
|
...(ngDevMode ? [{ debugName: "$errorClass" }] : /* istanbul ignore next */ []));
|
|
108
|
-
$hintClass = computed(() => hlm("mt-0", this._config.hintClass, this.hintClass()), /* @ts-ignore */
|
|
109
|
+
$hintClass = computed(() => hlm("mt-0", this._shared.hintClass, this._config.hintClass, this.hintClass()), /* @ts-ignore */
|
|
109
110
|
...(ngDevMode ? [{ debugName: "$hintClass" }] : /* istanbul ignore next */ []));
|
|
110
111
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: EgFormSearchableMultiselect, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
111
112
|
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.3", type: EgFormSearchableMultiselect, isStandalone: true, selector: "eg-form-searchable-multiselect", 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 }, 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 }, 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 <eg-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 <eg-searchable-multiselect\n [id]=\"effectiveId()\"\n [options]=\"options()\"\n [placeholder]=\"placeholder()\"\n [formControlName]=\"cnm\"\n [required]=\"rqrd\"\n [wrapperDisabled]=\"disabled()\"\n [ariaLabel]=\"lbl\"\n [ariaDescribedby]=\"describedBy()\"\n [class]=\"$controlClass()\"\n ></eg-searchable-multiselect>\n\n @if (showError()) {\n <hlm-error [id]=\"errorId()\" [class]=\"$errorClass()\">\n {{ resolvedError() }}\n </hlm-error>\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: 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"] }, { kind: "directive", type: HlmLabel, selector: "[hlmLabel]", inputs: ["class"] }, { kind: "component", type: EgSearchableMultiselect, selector: "eg-searchable-multiselect", inputs: ["options", "placeholder", "id", "disabled", "wrapperDisabled", "ariaLabel", "ariaDescribedby", "class", "value"], outputs: ["valueChange"] }] });
|
|
@@ -8,6 +8,7 @@ declare class EgFormSearchableMultiselect {
|
|
|
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>;
|
|
@@ -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 { hlm } from '@egose/shadcn-theme-ng/utils';
|
|
8
8
|
import { BrnSelectImports } from '@spartan-ng/brain/select';
|
|
@@ -22,6 +22,7 @@ class EgFormSelect {
|
|
|
22
22
|
_errorMessages = injectEgFormErrorMessages();
|
|
23
23
|
generatedId = inject(HlmFormIdGenerator).generate('eg-form-select');
|
|
24
24
|
_config = injectEgFormSelectConfig();
|
|
25
|
+
_shared = injectEgFormSharedConfig();
|
|
25
26
|
label = input(undefined, /* @ts-ignore */
|
|
26
27
|
...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
|
|
27
28
|
controlId = input(undefined, /* @ts-ignore */
|
|
@@ -103,13 +104,13 @@ class EgFormSelect {
|
|
|
103
104
|
// Computed classes (library base < global config < per-instance)
|
|
104
105
|
$userClass = computed(() => hlm("w-full", this.userClass()), /* @ts-ignore */
|
|
105
106
|
...(ngDevMode ? [{ debugName: "$userClass" }] : /* istanbul ignore next */ []));
|
|
106
|
-
$labelClass = computed(() => hlm("mb-1 gap-0", this._config.labelClass, this.labelClass()), /* @ts-ignore */
|
|
107
|
+
$labelClass = computed(() => hlm("mb-1 gap-0", this._shared.labelClass, this._config.labelClass, this.labelClass()), /* @ts-ignore */
|
|
107
108
|
...(ngDevMode ? [{ debugName: "$labelClass" }] : /* istanbul ignore next */ []));
|
|
108
|
-
$selectClass = computed(() => hlm("w-full", this._config.selectClass, this.selectClass()), /* @ts-ignore */
|
|
109
|
+
$selectClass = computed(() => hlm("w-full", this._shared.selectClass, this._config.selectClass, this.selectClass()), /* @ts-ignore */
|
|
109
110
|
...(ngDevMode ? [{ debugName: "$selectClass" }] : /* istanbul ignore next */ []));
|
|
110
|
-
$errorClass = computed(() => hlm("mt-0", this._config.errorClass, this.errorClass()), /* @ts-ignore */
|
|
111
|
+
$errorClass = computed(() => hlm("mt-0", this._shared.errorClass, this._config.errorClass, this.errorClass()), /* @ts-ignore */
|
|
111
112
|
...(ngDevMode ? [{ debugName: "$errorClass" }] : /* istanbul ignore next */ []));
|
|
112
|
-
$hintClass = computed(() => hlm("mt-0", this._config.hintClass, this.hintClass()), /* @ts-ignore */
|
|
113
|
+
$hintClass = computed(() => hlm("mt-0", this._shared.hintClass, this._config.hintClass, this.hintClass()), /* @ts-ignore */
|
|
113
114
|
...(ngDevMode ? [{ debugName: "$hintClass" }] : /* istanbul ignore next */ []));
|
|
114
115
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: EgFormSelect, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
115
116
|
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.3", type: EgFormSelect, isStandalone: true, selector: "eg-form-select", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, controlId: { classPropertyName: "controlId", publicName: "controlId", isSignal: true, isRequired: false, transformFunction: null }, controlName: { classPropertyName: "controlName", publicName: "controlName", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, autoError: { classPropertyName: "autoError", publicName: "autoError", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", 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 }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, optionsLabel: { classPropertyName: "optionsLabel", publicName: "optionsLabel", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, labelClass: { classPropertyName: "labelClass", publicName: "labelClass", isSignal: true, isRequired: false, transformFunction: null }, selectClass: { classPropertyName: "selectClass", publicName: "selectClass", isSignal: true, isRequired: false, transformFunction: null }, errorClass: { classPropertyName: "errorClass", publicName: "errorClass", isSignal: true, isRequired: false, transformFunction: null }, hintClass: { classPropertyName: "hintClass", publicName: "hintClass", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "$userClass()" } }, providers: [{ provide: ControlContainer, useExisting: FormGroupDirective }], ngImport: i0, template: "\n @let lbl = label();\n @let cnm = controlName();\n @let hnt = hint();\n @let rqrd = required();\n\n <hlm-form-field>\n @if (lbl) {\n <label hlmLabel [for]=\"effectiveId()\" [class]=\"$labelClass()\"\n >{{ lbl }}\n @if (rqrd) {\n <span class=\"text-red-500\">*</span>\n }\n </label>\n }\n\n @if (multiple()) {\n <brn-select-multiple hlmSelect [formControlName]=\"cnm\">\n <hlm-select-trigger\n [buttonId]=\"effectiveId()\"\n [ariaDescribedby]=\"describedBy()\"\n [wrapperDisabled]=\"disabled()\"\n [class]=\"$selectClass()\"\n >\n <hlm-select-value [placeholder]=\"placeholder()\" />\n </hlm-select-trigger>\n\n <hlm-select-content *hlmSelectPortal>\n @if (options().length) {\n @if (optionsLabel()) {\n <hlm-select-label>{{ optionsLabel() }}</hlm-select-label>\n }\n @for (option of options(); track option.value) {\n <hlm-select-item [value]=\"option.value\">{{ option.label }}</hlm-select-item>\n }\n }\n </hlm-select-content>\n </brn-select-multiple>\n } @else {\n <brn-select hlmSelect [formControlName]=\"cnm\">\n <hlm-select-trigger\n [buttonId]=\"effectiveId()\"\n [ariaDescribedby]=\"describedBy()\"\n [wrapperDisabled]=\"disabled()\"\n [class]=\"$selectClass()\"\n >\n <hlm-select-value [placeholder]=\"placeholder()\" />\n </hlm-select-trigger>\n\n <hlm-select-content *hlmSelectPortal>\n @if (options().length) {\n @if (optionsLabel()) {\n <hlm-select-label>{{ optionsLabel() }}</hlm-select-label>\n }\n @for (option of options(); track option.value) {\n <hlm-select-item [value]=\"option.value\">{{ option.label }}</hlm-select-item>\n }\n }\n </hlm-select-content>\n </brn-select>\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: i2.HlmSelect, selector: "[hlmSelect],hlm-select" }, { kind: "component", type: i2.HlmSelectContent, selector: "hlm-select-content", inputs: ["showScroll"] }, { kind: "component", type: i2.HlmSelectItem, selector: "hlm-select-item" }, { kind: "directive", type: i2.HlmSelectLabel, selector: "[hlmSelectLabel],hlm-select-label" }, { kind: "directive", type: i2.HlmSelectPortal, selector: "[hlmSelectPortal]" }, { kind: "component", type: i2.HlmSelectTrigger, selector: "hlm-select-trigger", inputs: ["class", "buttonId", "ariaDescribedby", "wrapperDisabled", "size", "forceInvalid"] }, { kind: "directive", type: i2.HlmSelectValue, selector: "[hlmSelectValue],hlm-select-value" }] });
|
|
@@ -11,6 +11,7 @@ declare class EgFormSelect {
|
|
|
11
11
|
private readonly _errorMessages;
|
|
12
12
|
private readonly generatedId;
|
|
13
13
|
private readonly _config;
|
|
14
|
+
private readonly _shared;
|
|
14
15
|
label: _angular_core.InputSignal<string | undefined>;
|
|
15
16
|
controlId: _angular_core.InputSignal<string | undefined>;
|
|
16
17
|
controlName: _angular_core.InputSignal<string>;
|
|
@@ -2,7 +2,7 @@ import * as i0 from '@angular/core';
|
|
|
2
2
|
import { InjectionToken, inject, input, numberAttribute, computed, Component } from '@angular/core';
|
|
3
3
|
import * as i1 from '@angular/forms';
|
|
4
4
|
import { FormGroupDirective, ReactiveFormsModule, ControlContainer } from '@angular/forms';
|
|
5
|
-
import { 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 { HlmSlider } from '@egose/shadcn-theme-ng/slider';
|
|
8
8
|
import { hlm } from '@egose/shadcn-theme-ng/utils';
|
|
@@ -20,6 +20,7 @@ class EgFormSlider {
|
|
|
20
20
|
_errorMessages = injectEgFormErrorMessages();
|
|
21
21
|
generatedId = inject(HlmFormIdGenerator).generate('eg-form-slider');
|
|
22
22
|
_config = injectEgFormSliderConfig();
|
|
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 */
|
|
@@ -103,13 +104,13 @@ class EgFormSlider {
|
|
|
103
104
|
// Computed classes (library base < global config < per-instance)
|
|
104
105
|
$userClass = computed(() => hlm("w-full", this.userClass()), /* @ts-ignore */
|
|
105
106
|
...(ngDevMode ? [{ debugName: "$userClass" }] : /* istanbul ignore next */ []));
|
|
106
|
-
$labelClass = computed(() => hlm("mb-1", this._config.labelClass, this.labelClass()), /* @ts-ignore */
|
|
107
|
+
$labelClass = computed(() => hlm("mb-1", this._shared.labelClass, this._config.labelClass, this.labelClass()), /* @ts-ignore */
|
|
107
108
|
...(ngDevMode ? [{ debugName: "$labelClass" }] : /* istanbul ignore next */ []));
|
|
108
|
-
$sliderClass = computed(() => hlm("w-full", this._config.sliderClass, this.sliderClass()), /* @ts-ignore */
|
|
109
|
+
$sliderClass = computed(() => hlm("w-full", this._shared.sliderClass, this._config.sliderClass, this.sliderClass()), /* @ts-ignore */
|
|
109
110
|
...(ngDevMode ? [{ debugName: "$sliderClass" }] : /* istanbul ignore next */ []));
|
|
110
|
-
$errorClass = computed(() => hlm("mt-0", this._config.errorClass, this.errorClass()), /* @ts-ignore */
|
|
111
|
+
$errorClass = computed(() => hlm("mt-0", this._shared.errorClass, this._config.errorClass, this.errorClass()), /* @ts-ignore */
|
|
111
112
|
...(ngDevMode ? [{ debugName: "$errorClass" }] : /* istanbul ignore next */ []));
|
|
112
|
-
$hintClass = computed(() => hlm("mt-0", this._config.hintClass, this.hintClass()), /* @ts-ignore */
|
|
113
|
+
$hintClass = computed(() => hlm("mt-0", this._shared.hintClass, this._config.hintClass, this.hintClass()), /* @ts-ignore */
|
|
113
114
|
...(ngDevMode ? [{ debugName: "$hintClass" }] : /* istanbul ignore next */ []));
|
|
114
115
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: EgFormSlider, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
115
116
|
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.3", type: EgFormSlider, isStandalone: true, selector: "eg-form-slider", 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 }, 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 }, step: { classPropertyName: "step", publicName: "step", 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 }, sliderClass: { classPropertyName: "sliderClass", publicName: "sliderClass", 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 [id]=\"labelId()\" [class]=\"$labelClass()\"\n >{{ lbl }}\n @if (rqrd) {\n <span class=\"text-red-500\">*</span>\n }\n </label>\n }\n\n <hlm-slider\n [id]=\"effectiveId()\"\n [formControlName]=\"cnm\"\n [min]=\"min()\"\n [max]=\"max()\"\n [step]=\"step()\"\n [disabled]=\"effectiveDisabled()\"\n [aria-labelledby]=\"lbl ? labelId() : null\"\n [class]=\"$sliderClass()\"\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: "component", type: HlmSlider, selector: "hlm-slider, brn-slider [hlm]" }] });
|
|
@@ -8,6 +8,7 @@ declare class EgFormSlider {
|
|
|
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>;
|
|
@@ -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, HlmError, HlmHint } from '@egose/shadcn-theme-ng/form-field';
|
|
5
|
+
import { injectEgFormErrorMessages, HlmFormIdGenerator, injectEgFormSharedConfig, resolveEgFormError, HlmError, HlmHint } from '@egose/shadcn-theme-ng/form-field';
|
|
6
6
|
import { EgFormField } from '@egose/shadcn-theme-ng/form-field-simple';
|
|
7
7
|
import { HlmLabel } from '@egose/shadcn-theme-ng/label';
|
|
8
8
|
import { HlmSwitch } from '@egose/shadcn-theme-ng/switch';
|
|
@@ -21,6 +21,7 @@ class EgFormSwitch {
|
|
|
21
21
|
_errorMessages = injectEgFormErrorMessages();
|
|
22
22
|
generatedId = inject(HlmFormIdGenerator).generate('eg-form-switch');
|
|
23
23
|
_config = injectEgFormSwitchConfig();
|
|
24
|
+
_shared = injectEgFormSharedConfig();
|
|
24
25
|
label = input(undefined, /* @ts-ignore */
|
|
25
26
|
...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
|
|
26
27
|
controlId = input(undefined, /* @ts-ignore */
|
|
@@ -92,13 +93,13 @@ class EgFormSwitch {
|
|
|
92
93
|
// Computed classes (library base < global config < per-instance)
|
|
93
94
|
$userClass = computed(() => hlm("w-full", this.userClass()), /* @ts-ignore */
|
|
94
95
|
...(ngDevMode ? [{ debugName: "$userClass" }] : /* istanbul ignore next */ []));
|
|
95
|
-
$switchClass = computed(() => hlm(this._config.switchClass, this.switchClass()), /* @ts-ignore */
|
|
96
|
+
$switchClass = computed(() => hlm(this._shared.switchClass, this._config.switchClass, this.switchClass()), /* @ts-ignore */
|
|
96
97
|
...(ngDevMode ? [{ debugName: "$switchClass" }] : /* istanbul ignore next */ []));
|
|
97
|
-
$labelClass = computed(() => hlm(this._config.labelClass, this.labelClass()), /* @ts-ignore */
|
|
98
|
+
$labelClass = computed(() => hlm(this._shared.labelClass, this._config.labelClass, this.labelClass()), /* @ts-ignore */
|
|
98
99
|
...(ngDevMode ? [{ debugName: "$labelClass" }] : /* istanbul ignore next */ []));
|
|
99
|
-
$errorClass = computed(() => hlm("mt-0", this._config.errorClass, this.errorClass()), /* @ts-ignore */
|
|
100
|
+
$errorClass = computed(() => hlm("mt-0", this._shared.errorClass, this._config.errorClass, this.errorClass()), /* @ts-ignore */
|
|
100
101
|
...(ngDevMode ? [{ debugName: "$errorClass" }] : /* istanbul ignore next */ []));
|
|
101
|
-
$hintClass = computed(() => hlm("mt-0", this._config.hintClass, this.hintClass()), /* @ts-ignore */
|
|
102
|
+
$hintClass = computed(() => hlm("mt-0", this._shared.hintClass, this._config.hintClass, this.hintClass()), /* @ts-ignore */
|
|
102
103
|
...(ngDevMode ? [{ debugName: "$hintClass" }] : /* istanbul ignore next */ []));
|
|
103
104
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: EgFormSwitch, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
104
105
|
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.3", type: EgFormSwitch, isStandalone: true, selector: "eg-form-switch", 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 }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, switchClass: { classPropertyName: "switchClass", publicName: "switchClass", 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": "$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 <eg-form-field>\n <div class=\"flex items-center gap-1\">\n <hlm-switch\n [id]=\"effectiveId()\"\n [formControlName]=\"cnm\"\n [required]=\"rqrd\"\n [disabled]=\"disabled()\"\n [aria-describedby]=\"describedBy()\"\n [class]=\"$switchClass()\"\n />\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 </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: "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: HlmSwitch, selector: "hlm-switch", inputs: ["class", "checked", "disabled", "id", "aria-label", "aria-labelledby", "aria-describedby"], outputs: ["checkedChange", "changed"] }, { kind: "component", type: EgFormField, selector: "eg-form-field", inputs: ["class"] }] });
|
|
@@ -7,6 +7,7 @@ declare class EgFormSwitch {
|
|
|
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>;
|