@ng-forge/dynamic-forms-bootstrap 0.6.1 → 0.8.0-next.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.
|
@@ -9,20 +9,20 @@ import { createResolvedErrorsSignal, shouldShowErrors, setupMetaTracking, isEqua
|
|
|
9
9
|
class BsButtonFieldComponent {
|
|
10
10
|
eventBus = inject(EventBus);
|
|
11
11
|
arrayContext = inject(ARRAY_CONTEXT, { optional: true });
|
|
12
|
-
key = input.required(...(ngDevMode ? [{ debugName: "key" }] : []));
|
|
13
|
-
label = input.required(...(ngDevMode ? [{ debugName: "label" }] : []));
|
|
14
|
-
disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
|
|
15
|
-
hidden = input(false, ...(ngDevMode ? [{ debugName: "hidden" }] : []));
|
|
16
|
-
tabIndex = input(...(ngDevMode ? [undefined, { debugName: "tabIndex" }] : []));
|
|
17
|
-
className = input('', ...(ngDevMode ? [{ debugName: "className" }] : []));
|
|
12
|
+
key = input.required(...(ngDevMode ? [{ debugName: "key" }] : /* istanbul ignore next */ []));
|
|
13
|
+
label = input.required(...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
|
|
14
|
+
disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
|
|
15
|
+
hidden = input(false, ...(ngDevMode ? [{ debugName: "hidden" }] : /* istanbul ignore next */ []));
|
|
16
|
+
tabIndex = input(...(ngDevMode ? [undefined, { debugName: "tabIndex" }] : /* istanbul ignore next */ []));
|
|
17
|
+
className = input('', ...(ngDevMode ? [{ debugName: "className" }] : /* istanbul ignore next */ []));
|
|
18
18
|
/** Event to dispatch on click. Optional for submit buttons (native form submit handles it). */
|
|
19
|
-
event = input(...(ngDevMode ? [undefined, { debugName: "event" }] : []));
|
|
20
|
-
eventArgs = input(...(ngDevMode ? [undefined, { debugName: "eventArgs" }] : []));
|
|
21
|
-
props = input(...(ngDevMode ? [undefined, { debugName: "props" }] : []));
|
|
22
|
-
eventContext = input(...(ngDevMode ? [undefined, { debugName: "eventContext" }] : []));
|
|
19
|
+
event = input(...(ngDevMode ? [undefined, { debugName: "event" }] : /* istanbul ignore next */ []));
|
|
20
|
+
eventArgs = input(...(ngDevMode ? [undefined, { debugName: "eventArgs" }] : /* istanbul ignore next */ []));
|
|
21
|
+
props = input(...(ngDevMode ? [undefined, { debugName: "props" }] : /* istanbul ignore next */ []));
|
|
22
|
+
eventContext = input(...(ngDevMode ? [undefined, { debugName: "eventContext" }] : /* istanbul ignore next */ []));
|
|
23
23
|
/** Resolved button type - defaults to 'button' if not specified in props */
|
|
24
|
-
buttonType = computed(() => this.props()?.type ?? 'button', ...(ngDevMode ? [{ debugName: "buttonType" }] : []));
|
|
25
|
-
buttonTestId = computed(() => `${this.buttonType()}-${this.key()}`, ...(ngDevMode ? [{ debugName: "buttonTestId" }] : []));
|
|
24
|
+
buttonType = computed(() => this.props()?.type ?? 'button', ...(ngDevMode ? [{ debugName: "buttonType" }] : /* istanbul ignore next */ []));
|
|
25
|
+
buttonTestId = computed(() => `${this.buttonType()}-${this.key()}`, ...(ngDevMode ? [{ debugName: "buttonTestId" }] : /* istanbul ignore next */ []));
|
|
26
26
|
buttonClasses = computed(() => {
|
|
27
27
|
const p = this.props();
|
|
28
28
|
const variant = p?.variant || 'primary';
|
|
@@ -38,7 +38,7 @@ class BsButtonFieldComponent {
|
|
|
38
38
|
]
|
|
39
39
|
.filter(Boolean)
|
|
40
40
|
.join(' ');
|
|
41
|
-
}, ...(ngDevMode ? [{ debugName: "buttonClasses" }] : []));
|
|
41
|
+
}, ...(ngDevMode ? [{ debugName: "buttonClasses" }] : /* istanbul ignore next */ []));
|
|
42
42
|
/**
|
|
43
43
|
* Handle button click.
|
|
44
44
|
* - For submit buttons (type="submit"): do nothing, native form submit handles it
|
|
@@ -78,8 +78,8 @@ class BsButtonFieldComponent {
|
|
|
78
78
|
this.eventBus.dispatch(event);
|
|
79
79
|
}
|
|
80
80
|
}
|
|
81
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
82
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.
|
|
81
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: BsButtonFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
82
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.8", type: BsButtonFieldComponent, isStandalone: true, selector: "df-bs-button", inputs: { key: { classPropertyName: "key", publicName: "key", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, hidden: { classPropertyName: "hidden", publicName: "hidden", isSignal: true, isRequired: false, transformFunction: null }, tabIndex: { classPropertyName: "tabIndex", publicName: "tabIndex", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, event: { classPropertyName: "event", publicName: "event", isSignal: true, isRequired: false, transformFunction: null }, eventArgs: { classPropertyName: "eventArgs", publicName: "eventArgs", isSignal: true, isRequired: false, transformFunction: null }, props: { classPropertyName: "props", publicName: "props", isSignal: true, isRequired: false, transformFunction: null }, eventContext: { classPropertyName: "eventContext", publicName: "eventContext", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "id": "`${key()}`", "attr.data-testid": "key()", "class": "className()", "attr.hidden": "hidden() || null" } }, ngImport: i0, template: `
|
|
83
83
|
@let buttonId = key() + '-button';
|
|
84
84
|
<button
|
|
85
85
|
[id]="buttonId"
|
|
@@ -94,7 +94,7 @@ class BsButtonFieldComponent {
|
|
|
94
94
|
</button>
|
|
95
95
|
`, isInline: true, styles: [":host{--df-field-gap: .5rem;--df-label-font-weight: 500;--df-label-color: inherit;--df-hint-color: var(--bs-secondary-color, #6c757d);--df-hint-font-size: .875rem;--df-error-color: var(--bs-danger, #dc3545);--df-error-font-size: .875rem}.df-bs-field{display:flex;flex-direction:column;gap:var(--df-field-gap);width:100%;margin-bottom:1rem}.df-bs-label{font-weight:var(--df-label-font-weight);color:var(--df-label-color);margin-bottom:0}.df-bs-hint{color:var(--df-hint-color);font-size:var(--df-hint-font-size);margin-top:.25rem}.df-bs-field:has(.df-bs-hint){margin-bottom:.5rem}:host([hidden]){display:none!important}\n"], dependencies: [{ kind: "pipe", type: DynamicTextPipe, name: "dynamicText" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
96
96
|
}
|
|
97
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
97
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: BsButtonFieldComponent, decorators: [{
|
|
98
98
|
type: Component,
|
|
99
99
|
args: [{ selector: 'df-bs-button', imports: [DynamicTextPipe, AsyncPipe], host: {
|
|
100
100
|
'[id]': '`${key()}`',
|
|
@@ -149,20 +149,20 @@ function createAriaDescribedBySignal(errorsToDisplay, errorId, hintId, hasHint)
|
|
|
149
149
|
|
|
150
150
|
class BsCheckboxFieldComponent {
|
|
151
151
|
elementRef = inject((ElementRef));
|
|
152
|
-
field = input.required(...(ngDevMode ? [{ debugName: "field" }] : []));
|
|
153
|
-
key = input.required(...(ngDevMode ? [{ debugName: "key" }] : []));
|
|
154
|
-
label = input(...(ngDevMode ? [undefined, { debugName: "label" }] : []));
|
|
155
|
-
placeholder = input(...(ngDevMode ? [undefined, { debugName: "placeholder" }] : []));
|
|
156
|
-
className = input('', ...(ngDevMode ? [{ debugName: "className" }] : []));
|
|
157
|
-
tabIndex = input(...(ngDevMode ? [undefined, { debugName: "tabIndex" }] : []));
|
|
158
|
-
props = input(...(ngDevMode ? [undefined, { debugName: "props" }] : []));
|
|
159
|
-
validationMessages = input(...(ngDevMode ? [undefined, { debugName: "validationMessages" }] : []));
|
|
160
|
-
defaultValidationMessages = input(...(ngDevMode ? [undefined, { debugName: "defaultValidationMessages" }] : []));
|
|
161
|
-
meta = input(...(ngDevMode ? [undefined, { debugName: "meta" }] : []));
|
|
152
|
+
field = input.required(...(ngDevMode ? [{ debugName: "field" }] : /* istanbul ignore next */ []));
|
|
153
|
+
key = input.required(...(ngDevMode ? [{ debugName: "key" }] : /* istanbul ignore next */ []));
|
|
154
|
+
label = input(...(ngDevMode ? [undefined, { debugName: "label" }] : /* istanbul ignore next */ []));
|
|
155
|
+
placeholder = input(...(ngDevMode ? [undefined, { debugName: "placeholder" }] : /* istanbul ignore next */ []));
|
|
156
|
+
className = input('', ...(ngDevMode ? [{ debugName: "className" }] : /* istanbul ignore next */ []));
|
|
157
|
+
tabIndex = input(...(ngDevMode ? [undefined, { debugName: "tabIndex" }] : /* istanbul ignore next */ []));
|
|
158
|
+
props = input(...(ngDevMode ? [undefined, { debugName: "props" }] : /* istanbul ignore next */ []));
|
|
159
|
+
validationMessages = input(...(ngDevMode ? [undefined, { debugName: "validationMessages" }] : /* istanbul ignore next */ []));
|
|
160
|
+
defaultValidationMessages = input(...(ngDevMode ? [undefined, { debugName: "defaultValidationMessages" }] : /* istanbul ignore next */ []));
|
|
161
|
+
meta = input(...(ngDevMode ? [undefined, { debugName: "meta" }] : /* istanbul ignore next */ []));
|
|
162
162
|
resolvedErrors = createResolvedErrorsSignal(this.field, this.validationMessages, this.defaultValidationMessages);
|
|
163
163
|
showErrors = shouldShowErrors(this.field);
|
|
164
|
-
errorsToDisplay = computed(() => (this.showErrors() ? this.resolvedErrors() : []), ...(ngDevMode ? [{ debugName: "errorsToDisplay" }] : []));
|
|
165
|
-
checkboxInput = viewChild('checkboxInput', ...(ngDevMode ? [{ debugName: "checkboxInput" }] : []));
|
|
164
|
+
errorsToDisplay = computed(() => (this.showErrors() ? this.resolvedErrors() : []), ...(ngDevMode ? [{ debugName: "errorsToDisplay" }] : /* istanbul ignore next */ []));
|
|
165
|
+
checkboxInput = viewChild('checkboxInput', ...(ngDevMode ? [{ debugName: "checkboxInput" }] : /* istanbul ignore next */ []));
|
|
166
166
|
constructor() {
|
|
167
167
|
setupMetaTracking(this.elementRef, this.meta, { selector: 'input[type="checkbox"]' });
|
|
168
168
|
// Handle indeterminate state
|
|
@@ -177,18 +177,18 @@ class BsCheckboxFieldComponent {
|
|
|
177
177
|
// ─────────────────────────────────────────────────────────────────────────────
|
|
178
178
|
// Accessibility
|
|
179
179
|
// ─────────────────────────────────────────────────────────────────────────────
|
|
180
|
-
hintId = computed(() => `${this.key()}-hint`, ...(ngDevMode ? [{ debugName: "hintId" }] : []));
|
|
181
|
-
errorId = computed(() => `${this.key()}-error`, ...(ngDevMode ? [{ debugName: "errorId" }] : []));
|
|
180
|
+
hintId = computed(() => `${this.key()}-hint`, ...(ngDevMode ? [{ debugName: "hintId" }] : /* istanbul ignore next */ []));
|
|
181
|
+
errorId = computed(() => `${this.key()}-error`, ...(ngDevMode ? [{ debugName: "errorId" }] : /* istanbul ignore next */ []));
|
|
182
182
|
ariaInvalid = computed(() => {
|
|
183
183
|
const fieldState = this.field()();
|
|
184
184
|
return fieldState.invalid() && fieldState.touched();
|
|
185
|
-
}, ...(ngDevMode ? [{ debugName: "ariaInvalid" }] : []));
|
|
185
|
+
}, ...(ngDevMode ? [{ debugName: "ariaInvalid" }] : /* istanbul ignore next */ []));
|
|
186
186
|
ariaRequired = computed(() => {
|
|
187
187
|
return this.field()().required?.() === true ? true : null;
|
|
188
|
-
}, ...(ngDevMode ? [{ debugName: "ariaRequired" }] : []));
|
|
188
|
+
}, ...(ngDevMode ? [{ debugName: "ariaRequired" }] : /* istanbul ignore next */ []));
|
|
189
189
|
ariaDescribedBy = createAriaDescribedBySignal(this.errorsToDisplay, this.errorId, this.hintId, () => !!this.props()?.hint);
|
|
190
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
191
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.
|
|
190
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: BsCheckboxFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
191
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: BsCheckboxFieldComponent, isStandalone: true, selector: "df-bs-checkbox", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null }, key: { classPropertyName: "key", publicName: "key", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, tabIndex: { classPropertyName: "tabIndex", publicName: "tabIndex", isSignal: true, isRequired: false, transformFunction: null }, props: { classPropertyName: "props", publicName: "props", isSignal: true, isRequired: false, transformFunction: null }, validationMessages: { classPropertyName: "validationMessages", publicName: "validationMessages", isSignal: true, isRequired: false, transformFunction: null }, defaultValidationMessages: { classPropertyName: "defaultValidationMessages", publicName: "defaultValidationMessages", isSignal: true, isRequired: false, transformFunction: null }, meta: { classPropertyName: "meta", publicName: "meta", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "className()", "id": "`${key()}`", "attr.data-testid": "key()", "attr.hidden": "field()().hidden() || null" } }, viewQueries: [{ propertyName: "checkboxInput", first: true, predicate: ["checkboxInput"], descendants: true, isSignal: true }], ngImport: i0, template: `
|
|
192
192
|
@let f = field(); @let checkboxId = key() + '-checkbox';
|
|
193
193
|
|
|
194
194
|
<div
|
|
@@ -222,7 +222,7 @@ class BsCheckboxFieldComponent {
|
|
|
222
222
|
}
|
|
223
223
|
`, isInline: true, styles: [":host{--df-field-gap: .5rem;--df-label-font-weight: 500;--df-label-color: inherit;--df-hint-color: var(--bs-secondary-color, #6c757d);--df-hint-font-size: .875rem;--df-error-color: var(--bs-danger, #dc3545);--df-error-font-size: .875rem}.df-bs-field{display:flex;flex-direction:column;gap:var(--df-field-gap);width:100%;margin-bottom:1rem}.df-bs-label{font-weight:var(--df-label-font-weight);color:var(--df-label-color);margin-bottom:0}.df-bs-hint{color:var(--df-hint-color);font-size:var(--df-hint-font-size);margin-top:.25rem}.df-bs-field:has(.df-bs-hint){margin-bottom:.5rem}:host([hidden]){display:none!important}\n", ":host{display:block}:host([hidden]){display:none!important}\n"], dependencies: [{ kind: "directive", type: FormField, selector: "[formField]", inputs: ["formField"], exportAs: ["formField"] }, { kind: "pipe", type: DynamicTextPipe, name: "dynamicText" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
224
224
|
}
|
|
225
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
225
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: BsCheckboxFieldComponent, decorators: [{
|
|
226
226
|
type: Component,
|
|
227
227
|
args: [{ selector: 'df-bs-checkbox', imports: [FormField, DynamicTextPipe, AsyncPipe], template: `
|
|
228
228
|
@let f = field(); @let checkboxId = key() + '-checkbox';
|
|
@@ -273,9 +273,9 @@ var bsCheckbox_component = /*#__PURE__*/Object.freeze({
|
|
|
273
273
|
* Directive to set min, max, and step attributes on form inputs
|
|
274
274
|
*/
|
|
275
275
|
class InputConstraintsDirective {
|
|
276
|
-
dfMin = input(...(ngDevMode ? [undefined, { debugName: "dfMin" }] : []));
|
|
277
|
-
dfMax = input(...(ngDevMode ? [undefined, { debugName: "dfMax" }] : []));
|
|
278
|
-
dfStep = input(...(ngDevMode ? [undefined, { debugName: "dfStep" }] : []));
|
|
276
|
+
dfMin = input(...(ngDevMode ? [undefined, { debugName: "dfMin" }] : /* istanbul ignore next */ []));
|
|
277
|
+
dfMax = input(...(ngDevMode ? [undefined, { debugName: "dfMax" }] : /* istanbul ignore next */ []));
|
|
278
|
+
dfStep = input(...(ngDevMode ? [undefined, { debugName: "dfStep" }] : /* istanbul ignore next */ []));
|
|
279
279
|
el = inject(ElementRef);
|
|
280
280
|
minEffect = explicitEffect([this.dfMin], ([minValue]) => {
|
|
281
281
|
const nativeElement = this.el.nativeElement;
|
|
@@ -304,10 +304,10 @@ class InputConstraintsDirective {
|
|
|
304
304
|
nativeElement.removeAttribute('step');
|
|
305
305
|
}
|
|
306
306
|
});
|
|
307
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
308
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.
|
|
307
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: InputConstraintsDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
308
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.8", type: InputConstraintsDirective, isStandalone: true, selector: "[dfBsInputConstraints]", inputs: { dfMin: { classPropertyName: "dfMin", publicName: "dfMin", isSignal: true, isRequired: false, transformFunction: null }, dfMax: { classPropertyName: "dfMax", publicName: "dfMax", isSignal: true, isRequired: false, transformFunction: null }, dfStep: { classPropertyName: "dfStep", publicName: "dfStep", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 });
|
|
309
309
|
}
|
|
310
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
310
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: InputConstraintsDirective, decorators: [{
|
|
311
311
|
type: Directive,
|
|
312
312
|
args: [{
|
|
313
313
|
selector: '[dfBsInputConstraints]',
|
|
@@ -316,22 +316,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
|
|
|
316
316
|
|
|
317
317
|
class BsDatepickerFieldComponent {
|
|
318
318
|
elementRef = inject((ElementRef));
|
|
319
|
-
field = input.required(...(ngDevMode ? [{ debugName: "field" }] : []));
|
|
320
|
-
key = input.required(...(ngDevMode ? [{ debugName: "key" }] : []));
|
|
321
|
-
label = input(...(ngDevMode ? [undefined, { debugName: "label" }] : []));
|
|
322
|
-
placeholder = input(...(ngDevMode ? [undefined, { debugName: "placeholder" }] : []));
|
|
323
|
-
className = input('', ...(ngDevMode ? [{ debugName: "className" }] : []));
|
|
324
|
-
tabIndex = input(...(ngDevMode ? [undefined, { debugName: "tabIndex" }] : []));
|
|
325
|
-
minDate = input(null, ...(ngDevMode ? [{ debugName: "minDate" }] : []));
|
|
326
|
-
maxDate = input(null, ...(ngDevMode ? [{ debugName: "maxDate" }] : []));
|
|
327
|
-
startAt = input(null, ...(ngDevMode ? [{ debugName: "startAt" }] : []));
|
|
328
|
-
props = input(...(ngDevMode ? [undefined, { debugName: "props" }] : []));
|
|
329
|
-
validationMessages = input(...(ngDevMode ? [undefined, { debugName: "validationMessages" }] : []));
|
|
330
|
-
defaultValidationMessages = input(...(ngDevMode ? [undefined, { debugName: "defaultValidationMessages" }] : []));
|
|
331
|
-
meta = input(...(ngDevMode ? [undefined, { debugName: "meta" }] : []));
|
|
319
|
+
field = input.required(...(ngDevMode ? [{ debugName: "field" }] : /* istanbul ignore next */ []));
|
|
320
|
+
key = input.required(...(ngDevMode ? [{ debugName: "key" }] : /* istanbul ignore next */ []));
|
|
321
|
+
label = input(...(ngDevMode ? [undefined, { debugName: "label" }] : /* istanbul ignore next */ []));
|
|
322
|
+
placeholder = input(...(ngDevMode ? [undefined, { debugName: "placeholder" }] : /* istanbul ignore next */ []));
|
|
323
|
+
className = input('', ...(ngDevMode ? [{ debugName: "className" }] : /* istanbul ignore next */ []));
|
|
324
|
+
tabIndex = input(...(ngDevMode ? [undefined, { debugName: "tabIndex" }] : /* istanbul ignore next */ []));
|
|
325
|
+
minDate = input(null, ...(ngDevMode ? [{ debugName: "minDate" }] : /* istanbul ignore next */ []));
|
|
326
|
+
maxDate = input(null, ...(ngDevMode ? [{ debugName: "maxDate" }] : /* istanbul ignore next */ []));
|
|
327
|
+
startAt = input(null, ...(ngDevMode ? [{ debugName: "startAt" }] : /* istanbul ignore next */ []));
|
|
328
|
+
props = input(...(ngDevMode ? [undefined, { debugName: "props" }] : /* istanbul ignore next */ []));
|
|
329
|
+
validationMessages = input(...(ngDevMode ? [undefined, { debugName: "validationMessages" }] : /* istanbul ignore next */ []));
|
|
330
|
+
defaultValidationMessages = input(...(ngDevMode ? [undefined, { debugName: "defaultValidationMessages" }] : /* istanbul ignore next */ []));
|
|
331
|
+
meta = input(...(ngDevMode ? [undefined, { debugName: "meta" }] : /* istanbul ignore next */ []));
|
|
332
332
|
resolvedErrors = createResolvedErrorsSignal(this.field, this.validationMessages, this.defaultValidationMessages);
|
|
333
333
|
showErrors = shouldShowErrors(this.field);
|
|
334
|
-
errorsToDisplay = computed(() => (this.showErrors() ? this.resolvedErrors() : []), ...(ngDevMode ? [{ debugName: "errorsToDisplay" }] : []));
|
|
334
|
+
errorsToDisplay = computed(() => (this.showErrors() ? this.resolvedErrors() : []), ...(ngDevMode ? [{ debugName: "errorsToDisplay" }] : /* istanbul ignore next */ []));
|
|
335
335
|
constructor() {
|
|
336
336
|
setupMetaTracking(this.elementRef, this.meta, { selector: 'input' });
|
|
337
337
|
}
|
|
@@ -339,26 +339,26 @@ class BsDatepickerFieldComponent {
|
|
|
339
339
|
minAsString = computed(() => {
|
|
340
340
|
const min = this.minDate();
|
|
341
341
|
return min instanceof Date ? min.toISOString().split('T')[0] : min;
|
|
342
|
-
}, ...(ngDevMode ? [{ debugName: "minAsString" }] : []));
|
|
342
|
+
}, ...(ngDevMode ? [{ debugName: "minAsString" }] : /* istanbul ignore next */ []));
|
|
343
343
|
maxAsString = computed(() => {
|
|
344
344
|
const max = this.maxDate();
|
|
345
345
|
return max instanceof Date ? max.toISOString().split('T')[0] : max;
|
|
346
|
-
}, ...(ngDevMode ? [{ debugName: "maxAsString" }] : []));
|
|
346
|
+
}, ...(ngDevMode ? [{ debugName: "maxAsString" }] : /* istanbul ignore next */ []));
|
|
347
347
|
// ─────────────────────────────────────────────────────────────────────────────
|
|
348
348
|
// Accessibility
|
|
349
349
|
// ─────────────────────────────────────────────────────────────────────────────
|
|
350
|
-
hintId = computed(() => `${this.key()}-hint`, ...(ngDevMode ? [{ debugName: "hintId" }] : []));
|
|
351
|
-
errorId = computed(() => `${this.key()}-error`, ...(ngDevMode ? [{ debugName: "errorId" }] : []));
|
|
350
|
+
hintId = computed(() => `${this.key()}-hint`, ...(ngDevMode ? [{ debugName: "hintId" }] : /* istanbul ignore next */ []));
|
|
351
|
+
errorId = computed(() => `${this.key()}-error`, ...(ngDevMode ? [{ debugName: "errorId" }] : /* istanbul ignore next */ []));
|
|
352
352
|
ariaInvalid = computed(() => {
|
|
353
353
|
const fieldState = this.field()();
|
|
354
354
|
return fieldState.invalid() && fieldState.touched();
|
|
355
|
-
}, ...(ngDevMode ? [{ debugName: "ariaInvalid" }] : []));
|
|
355
|
+
}, ...(ngDevMode ? [{ debugName: "ariaInvalid" }] : /* istanbul ignore next */ []));
|
|
356
356
|
ariaRequired = computed(() => {
|
|
357
357
|
return this.field()().required?.() === true ? true : null;
|
|
358
|
-
}, ...(ngDevMode ? [{ debugName: "ariaRequired" }] : []));
|
|
358
|
+
}, ...(ngDevMode ? [{ debugName: "ariaRequired" }] : /* istanbul ignore next */ []));
|
|
359
359
|
ariaDescribedBy = createAriaDescribedBySignal(this.errorsToDisplay, this.errorId, this.hintId, () => !!this.props()?.hint);
|
|
360
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
361
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.
|
|
360
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: BsDatepickerFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
361
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: BsDatepickerFieldComponent, isStandalone: true, selector: "df-bs-datepicker", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null }, key: { classPropertyName: "key", publicName: "key", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, tabIndex: { classPropertyName: "tabIndex", publicName: "tabIndex", isSignal: true, isRequired: false, transformFunction: null }, minDate: { classPropertyName: "minDate", publicName: "minDate", isSignal: true, isRequired: false, transformFunction: null }, maxDate: { classPropertyName: "maxDate", publicName: "maxDate", isSignal: true, isRequired: false, transformFunction: null }, startAt: { classPropertyName: "startAt", publicName: "startAt", isSignal: true, isRequired: false, transformFunction: null }, props: { classPropertyName: "props", publicName: "props", isSignal: true, isRequired: false, transformFunction: null }, validationMessages: { classPropertyName: "validationMessages", publicName: "validationMessages", isSignal: true, isRequired: false, transformFunction: null }, defaultValidationMessages: { classPropertyName: "defaultValidationMessages", publicName: "defaultValidationMessages", isSignal: true, isRequired: false, transformFunction: null }, meta: { classPropertyName: "meta", publicName: "meta", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "id": "`${key()}`", "attr.data-testid": "key()", "class": "className()", "attr.hidden": "field()().hidden() || null" } }, ngImport: i0, template: `
|
|
362
362
|
@let f = field(); @let p = props(); @let inputId = key() + '-input';
|
|
363
363
|
@if (p?.floatingLabel) {
|
|
364
364
|
<!-- Floating label variant -->
|
|
@@ -433,7 +433,7 @@ class BsDatepickerFieldComponent {
|
|
|
433
433
|
}
|
|
434
434
|
`, isInline: true, styles: [":host{--df-field-gap: .5rem;--df-label-font-weight: 500;--df-label-color: inherit;--df-hint-color: var(--bs-secondary-color, #6c757d);--df-hint-font-size: .875rem;--df-error-color: var(--bs-danger, #dc3545);--df-error-font-size: .875rem}.df-bs-field{display:flex;flex-direction:column;gap:var(--df-field-gap);width:100%;margin-bottom:1rem}.df-bs-label{font-weight:var(--df-label-font-weight);color:var(--df-label-color);margin-bottom:0}.df-bs-hint{color:var(--df-hint-color);font-size:var(--df-hint-font-size);margin-top:.25rem}.df-bs-field:has(.df-bs-hint){margin-bottom:.5rem}:host([hidden]){display:none!important}\n", ":host([hidden]){display:none!important}\n"], dependencies: [{ kind: "directive", type: FormField, selector: "[formField]", inputs: ["formField"], exportAs: ["formField"] }, { kind: "directive", type: InputConstraintsDirective, selector: "[dfBsInputConstraints]", inputs: ["dfMin", "dfMax", "dfStep"] }, { kind: "pipe", type: DynamicTextPipe, name: "dynamicText" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
435
435
|
}
|
|
436
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
436
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: BsDatepickerFieldComponent, decorators: [{
|
|
437
437
|
type: Component,
|
|
438
438
|
args: [{ selector: 'df-bs-datepicker', imports: [FormField, DynamicTextPipe, AsyncPipe, InputConstraintsDirective], template: `
|
|
439
439
|
@let f = field(); @let p = props(); @let inputId = key() + '-input';
|
|
@@ -547,27 +547,27 @@ const BOOTSTRAP_CONFIG = new InjectionToken('BOOTSTRAP_CONFIG');
|
|
|
547
547
|
class BsInputFieldComponent {
|
|
548
548
|
bootstrapConfig = inject(BOOTSTRAP_CONFIG, { optional: true });
|
|
549
549
|
elementRef = inject((ElementRef));
|
|
550
|
-
field = input.required(...(ngDevMode ? [{ debugName: "field" }] : []));
|
|
551
|
-
key = input.required(...(ngDevMode ? [{ debugName: "key" }] : []));
|
|
552
|
-
label = input(...(ngDevMode ? [undefined, { debugName: "label" }] : []));
|
|
553
|
-
placeholder = input(...(ngDevMode ? [undefined, { debugName: "placeholder" }] : []));
|
|
554
|
-
className = input('', ...(ngDevMode ? [{ debugName: "className" }] : []));
|
|
555
|
-
tabIndex = input(...(ngDevMode ? [undefined, { debugName: "tabIndex" }] : []));
|
|
556
|
-
props = input(...(ngDevMode ? [undefined, { debugName: "props" }] : []));
|
|
557
|
-
validationMessages = input(...(ngDevMode ? [undefined, { debugName: "validationMessages" }] : []));
|
|
558
|
-
defaultValidationMessages = input(...(ngDevMode ? [undefined, { debugName: "defaultValidationMessages" }] : []));
|
|
559
|
-
meta = input(...(ngDevMode ? [undefined, { debugName: "meta" }] : []));
|
|
550
|
+
field = input.required(...(ngDevMode ? [{ debugName: "field" }] : /* istanbul ignore next */ []));
|
|
551
|
+
key = input.required(...(ngDevMode ? [{ debugName: "key" }] : /* istanbul ignore next */ []));
|
|
552
|
+
label = input(...(ngDevMode ? [undefined, { debugName: "label" }] : /* istanbul ignore next */ []));
|
|
553
|
+
placeholder = input(...(ngDevMode ? [undefined, { debugName: "placeholder" }] : /* istanbul ignore next */ []));
|
|
554
|
+
className = input('', ...(ngDevMode ? [{ debugName: "className" }] : /* istanbul ignore next */ []));
|
|
555
|
+
tabIndex = input(...(ngDevMode ? [undefined, { debugName: "tabIndex" }] : /* istanbul ignore next */ []));
|
|
556
|
+
props = input(...(ngDevMode ? [undefined, { debugName: "props" }] : /* istanbul ignore next */ []));
|
|
557
|
+
validationMessages = input(...(ngDevMode ? [undefined, { debugName: "validationMessages" }] : /* istanbul ignore next */ []));
|
|
558
|
+
defaultValidationMessages = input(...(ngDevMode ? [undefined, { debugName: "defaultValidationMessages" }] : /* istanbul ignore next */ []));
|
|
559
|
+
meta = input(...(ngDevMode ? [undefined, { debugName: "meta" }] : /* istanbul ignore next */ []));
|
|
560
560
|
/**
|
|
561
561
|
* Reference to the native input element.
|
|
562
562
|
* Used to imperatively sync the readonly attribute since Angular Signal Forms'
|
|
563
563
|
* [field] directive doesn't sync FieldState.readonly() to the DOM.
|
|
564
564
|
*/
|
|
565
|
-
inputRef = viewChild('inputRef', ...(ngDevMode ? [{ debugName: "inputRef" }] : []));
|
|
565
|
+
inputRef = viewChild('inputRef', ...(ngDevMode ? [{ debugName: "inputRef" }] : /* istanbul ignore next */ []));
|
|
566
566
|
/**
|
|
567
567
|
* Computed signal that extracts the readonly state from the field.
|
|
568
568
|
* Used by the effect to reactively sync the readonly attribute to the DOM.
|
|
569
569
|
*/
|
|
570
|
-
isReadonly = computed(() => this.field()().readonly(), ...(ngDevMode ? [{ debugName: "isReadonly" }] : []));
|
|
570
|
+
isReadonly = computed(() => this.field()().readonly(), ...(ngDevMode ? [{ debugName: "isReadonly" }] : /* istanbul ignore next */ []));
|
|
571
571
|
/**
|
|
572
572
|
* Workaround: Angular Signal Forms' [field] directive does NOT sync the readonly
|
|
573
573
|
* attribute to the DOM. This effect imperatively sets/removes the readonly attribute
|
|
@@ -592,31 +592,31 @@ class BsInputFieldComponent {
|
|
|
592
592
|
constructor() {
|
|
593
593
|
setupMetaTracking(this.elementRef, this.meta, { selector: 'input' });
|
|
594
594
|
}
|
|
595
|
-
effectiveSize = computed(() => this.props()?.size ?? this.bootstrapConfig?.size, ...(ngDevMode ? [{ debugName: "effectiveSize" }] : []));
|
|
596
|
-
effectiveFloatingLabel = computed(() => this.props()?.floatingLabel ?? this.bootstrapConfig?.floatingLabel ?? false, ...(ngDevMode ? [{ debugName: "effectiveFloatingLabel" }] : []));
|
|
595
|
+
effectiveSize = computed(() => this.props()?.size ?? this.bootstrapConfig?.size, ...(ngDevMode ? [{ debugName: "effectiveSize" }] : /* istanbul ignore next */ []));
|
|
596
|
+
effectiveFloatingLabel = computed(() => this.props()?.floatingLabel ?? this.bootstrapConfig?.floatingLabel ?? false, ...(ngDevMode ? [{ debugName: "effectiveFloatingLabel" }] : /* istanbul ignore next */ []));
|
|
597
597
|
resolvedErrors = createResolvedErrorsSignal(this.field, this.validationMessages, this.defaultValidationMessages);
|
|
598
598
|
showErrors = shouldShowErrors(this.field);
|
|
599
|
-
errorsToDisplay = computed(() => (this.showErrors() ? this.resolvedErrors() : []), ...(ngDevMode ? [{ debugName: "errorsToDisplay" }] : []));
|
|
599
|
+
errorsToDisplay = computed(() => (this.showErrors() ? this.resolvedErrors() : []), ...(ngDevMode ? [{ debugName: "errorsToDisplay" }] : /* istanbul ignore next */ []));
|
|
600
600
|
// ─────────────────────────────────────────────────────────────────────────────
|
|
601
601
|
// Accessibility
|
|
602
602
|
// ─────────────────────────────────────────────────────────────────────────────
|
|
603
603
|
/** Unique ID for the hint element, used for aria-describedby */
|
|
604
|
-
hintId = computed(() => `${this.key()}-hint`, ...(ngDevMode ? [{ debugName: "hintId" }] : []));
|
|
604
|
+
hintId = computed(() => `${this.key()}-hint`, ...(ngDevMode ? [{ debugName: "hintId" }] : /* istanbul ignore next */ []));
|
|
605
605
|
/** Base ID for error elements, used for aria-describedby */
|
|
606
|
-
errorId = computed(() => `${this.key()}-error`, ...(ngDevMode ? [{ debugName: "errorId" }] : []));
|
|
606
|
+
errorId = computed(() => `${this.key()}-error`, ...(ngDevMode ? [{ debugName: "errorId" }] : /* istanbul ignore next */ []));
|
|
607
607
|
/** aria-invalid: true when field is invalid AND touched, false otherwise */
|
|
608
608
|
ariaInvalid = computed(() => {
|
|
609
609
|
const fieldState = this.field()();
|
|
610
610
|
return fieldState.invalid() && fieldState.touched();
|
|
611
|
-
}, ...(ngDevMode ? [{ debugName: "ariaInvalid" }] : []));
|
|
611
|
+
}, ...(ngDevMode ? [{ debugName: "ariaInvalid" }] : /* istanbul ignore next */ []));
|
|
612
612
|
/** aria-required: true if field is required, null otherwise (to remove attribute) */
|
|
613
613
|
ariaRequired = computed(() => {
|
|
614
614
|
return this.field()().required?.() === true ? true : null;
|
|
615
|
-
}, ...(ngDevMode ? [{ debugName: "ariaRequired" }] : []));
|
|
615
|
+
}, ...(ngDevMode ? [{ debugName: "ariaRequired" }] : /* istanbul ignore next */ []));
|
|
616
616
|
/** aria-describedby: links to hint and error messages for screen readers */
|
|
617
617
|
ariaDescribedBy = createAriaDescribedBySignal(this.errorsToDisplay, this.errorId, this.hintId, () => !!this.props()?.hint);
|
|
618
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
619
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.
|
|
618
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: BsInputFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
619
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: BsInputFieldComponent, isStandalone: true, selector: "df-bs-input", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null }, key: { classPropertyName: "key", publicName: "key", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, tabIndex: { classPropertyName: "tabIndex", publicName: "tabIndex", isSignal: true, isRequired: false, transformFunction: null }, props: { classPropertyName: "props", publicName: "props", isSignal: true, isRequired: false, transformFunction: null }, validationMessages: { classPropertyName: "validationMessages", publicName: "validationMessages", isSignal: true, isRequired: false, transformFunction: null }, defaultValidationMessages: { classPropertyName: "defaultValidationMessages", publicName: "defaultValidationMessages", isSignal: true, isRequired: false, transformFunction: null }, meta: { classPropertyName: "meta", publicName: "meta", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "id": "`${key()}`", "attr.data-testid": "key()", "class": "className()", "attr.hidden": "field()().hidden() || null" } }, viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["inputRef"], descendants: true, isSignal: true }], ngImport: i0, template: `
|
|
620
620
|
@let f = field(); @let p = props(); @let inputId = key() + '-input';
|
|
621
621
|
@if (effectiveFloatingLabel()) {
|
|
622
622
|
<!-- Floating label variant -->
|
|
@@ -687,7 +687,7 @@ class BsInputFieldComponent {
|
|
|
687
687
|
}
|
|
688
688
|
`, isInline: true, styles: [":host{--df-field-gap: .5rem;--df-label-font-weight: 500;--df-label-color: inherit;--df-hint-color: var(--bs-secondary-color, #6c757d);--df-hint-font-size: .875rem;--df-error-color: var(--bs-danger, #dc3545);--df-error-font-size: .875rem}.df-bs-field{display:flex;flex-direction:column;gap:var(--df-field-gap);width:100%;margin-bottom:1rem}.df-bs-label{font-weight:var(--df-label-font-weight);color:var(--df-label-color);margin-bottom:0}.df-bs-hint{color:var(--df-hint-color);font-size:var(--df-hint-font-size);margin-top:.25rem}.df-bs-field:has(.df-bs-hint){margin-bottom:.5rem}:host([hidden]){display:none!important}\n", ":host([hidden]){display:none!important}\n"], dependencies: [{ kind: "directive", type: FormField, selector: "[formField]", inputs: ["formField"], exportAs: ["formField"] }, { kind: "pipe", type: DynamicTextPipe, name: "dynamicText" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
689
689
|
}
|
|
690
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
690
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: BsInputFieldComponent, decorators: [{
|
|
691
691
|
type: Component,
|
|
692
692
|
args: [{ selector: 'df-bs-input', imports: [FormField, DynamicTextPipe, AsyncPipe], template: `
|
|
693
693
|
@let f = field(); @let p = props(); @let inputId = key() + '-input';
|
|
@@ -773,20 +773,20 @@ var bsInput_component = /*#__PURE__*/Object.freeze({
|
|
|
773
773
|
|
|
774
774
|
class BsMultiCheckboxFieldComponent {
|
|
775
775
|
elementRef = inject((ElementRef));
|
|
776
|
-
field = input.required(...(ngDevMode ? [{ debugName: "field" }] : []));
|
|
777
|
-
key = input.required(...(ngDevMode ? [{ debugName: "key" }] : []));
|
|
778
|
-
label = input(...(ngDevMode ? [undefined, { debugName: "label" }] : []));
|
|
779
|
-
placeholder = input(...(ngDevMode ? [undefined, { debugName: "placeholder" }] : []));
|
|
780
|
-
className = input('', ...(ngDevMode ? [{ debugName: "className" }] : []));
|
|
781
|
-
tabIndex = input(...(ngDevMode ? [undefined, { debugName: "tabIndex" }] : []));
|
|
782
|
-
options = input([], ...(ngDevMode ? [{ debugName: "options" }] : []));
|
|
783
|
-
props = input(...(ngDevMode ? [undefined, { debugName: "props" }] : []));
|
|
784
|
-
validationMessages = input(...(ngDevMode ? [undefined, { debugName: "validationMessages" }] : []));
|
|
785
|
-
defaultValidationMessages = input(...(ngDevMode ? [undefined, { debugName: "defaultValidationMessages" }] : []));
|
|
786
|
-
meta = input(...(ngDevMode ? [undefined, { debugName: "meta" }] : []));
|
|
776
|
+
field = input.required(...(ngDevMode ? [{ debugName: "field" }] : /* istanbul ignore next */ []));
|
|
777
|
+
key = input.required(...(ngDevMode ? [{ debugName: "key" }] : /* istanbul ignore next */ []));
|
|
778
|
+
label = input(...(ngDevMode ? [undefined, { debugName: "label" }] : /* istanbul ignore next */ []));
|
|
779
|
+
placeholder = input(...(ngDevMode ? [undefined, { debugName: "placeholder" }] : /* istanbul ignore next */ []));
|
|
780
|
+
className = input('', ...(ngDevMode ? [{ debugName: "className" }] : /* istanbul ignore next */ []));
|
|
781
|
+
tabIndex = input(...(ngDevMode ? [undefined, { debugName: "tabIndex" }] : /* istanbul ignore next */ []));
|
|
782
|
+
options = input([], ...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
|
|
783
|
+
props = input(...(ngDevMode ? [undefined, { debugName: "props" }] : /* istanbul ignore next */ []));
|
|
784
|
+
validationMessages = input(...(ngDevMode ? [undefined, { debugName: "validationMessages" }] : /* istanbul ignore next */ []));
|
|
785
|
+
defaultValidationMessages = input(...(ngDevMode ? [undefined, { debugName: "defaultValidationMessages" }] : /* istanbul ignore next */ []));
|
|
786
|
+
meta = input(...(ngDevMode ? [undefined, { debugName: "meta" }] : /* istanbul ignore next */ []));
|
|
787
787
|
resolvedErrors = createResolvedErrorsSignal(this.field, this.validationMessages, this.defaultValidationMessages);
|
|
788
788
|
showErrors = shouldShowErrors(this.field);
|
|
789
|
-
errorsToDisplay = computed(() => (this.showErrors() ? this.resolvedErrors() : []), ...(ngDevMode ? [{ debugName: "errorsToDisplay" }] : []));
|
|
789
|
+
errorsToDisplay = computed(() => (this.showErrors() ? this.resolvedErrors() : []), ...(ngDevMode ? [{ debugName: "errorsToDisplay" }] : /* istanbul ignore next */ []));
|
|
790
790
|
/** Computed map of checked option values for O(1) lookup in template */
|
|
791
791
|
checkedValuesMap = computed(() => {
|
|
792
792
|
const map = {};
|
|
@@ -794,11 +794,11 @@ class BsMultiCheckboxFieldComponent {
|
|
|
794
794
|
map[String(opt.value)] = true;
|
|
795
795
|
}
|
|
796
796
|
return map;
|
|
797
|
-
}, ...(ngDevMode ? [{ debugName: "checkedValuesMap" }] : []));
|
|
797
|
+
}, ...(ngDevMode ? [{ debugName: "checkedValuesMap" }] : /* istanbul ignore next */ []));
|
|
798
798
|
valueViewModel = linkedSignal(() => {
|
|
799
799
|
const currentValues = this.field()().value();
|
|
800
800
|
return this.options().filter((option) => currentValues.includes(option.value));
|
|
801
|
-
}, { ...(ngDevMode ? { debugName: "valueViewModel" } : {}), equal: isEqual });
|
|
801
|
+
}, { ...(ngDevMode ? { debugName: "valueViewModel" } : /* istanbul ignore next */ {}), equal: isEqual });
|
|
802
802
|
constructor() {
|
|
803
803
|
setupMetaTracking(this.elementRef, this.meta, { selector: 'input[type="checkbox"]', dependents: [this.options] });
|
|
804
804
|
explicitEffect([this.valueViewModel], ([selectedOptions]) => {
|
|
@@ -832,18 +832,18 @@ class BsMultiCheckboxFieldComponent {
|
|
|
832
832
|
// ─────────────────────────────────────────────────────────────────────────────
|
|
833
833
|
// Accessibility
|
|
834
834
|
// ─────────────────────────────────────────────────────────────────────────────
|
|
835
|
-
hintId = computed(() => `${this.key()}-hint`, ...(ngDevMode ? [{ debugName: "hintId" }] : []));
|
|
836
|
-
errorId = computed(() => `${this.key()}-error`, ...(ngDevMode ? [{ debugName: "errorId" }] : []));
|
|
835
|
+
hintId = computed(() => `${this.key()}-hint`, ...(ngDevMode ? [{ debugName: "hintId" }] : /* istanbul ignore next */ []));
|
|
836
|
+
errorId = computed(() => `${this.key()}-error`, ...(ngDevMode ? [{ debugName: "errorId" }] : /* istanbul ignore next */ []));
|
|
837
837
|
ariaInvalid = computed(() => {
|
|
838
838
|
const fieldState = this.field()();
|
|
839
839
|
return fieldState.invalid() && fieldState.touched();
|
|
840
|
-
}, ...(ngDevMode ? [{ debugName: "ariaInvalid" }] : []));
|
|
840
|
+
}, ...(ngDevMode ? [{ debugName: "ariaInvalid" }] : /* istanbul ignore next */ []));
|
|
841
841
|
ariaRequired = computed(() => {
|
|
842
842
|
return this.field()().required?.() === true ? true : null;
|
|
843
|
-
}, ...(ngDevMode ? [{ debugName: "ariaRequired" }] : []));
|
|
843
|
+
}, ...(ngDevMode ? [{ debugName: "ariaRequired" }] : /* istanbul ignore next */ []));
|
|
844
844
|
ariaDescribedBy = createAriaDescribedBySignal(this.errorsToDisplay, this.errorId, this.hintId, () => !!this.props()?.hint);
|
|
845
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
846
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.
|
|
845
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: BsMultiCheckboxFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
846
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: BsMultiCheckboxFieldComponent, isStandalone: true, selector: "df-bs-multi-checkbox", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null }, key: { classPropertyName: "key", publicName: "key", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, tabIndex: { classPropertyName: "tabIndex", publicName: "tabIndex", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, props: { classPropertyName: "props", publicName: "props", isSignal: true, isRequired: false, transformFunction: null }, validationMessages: { classPropertyName: "validationMessages", publicName: "validationMessages", isSignal: true, isRequired: false, transformFunction: null }, defaultValidationMessages: { classPropertyName: "defaultValidationMessages", publicName: "defaultValidationMessages", isSignal: true, isRequired: false, transformFunction: null }, meta: { classPropertyName: "meta", publicName: "meta", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "className() || \"\"", "id": "`${key()}`", "attr.data-testid": "key()", "attr.hidden": "field()().hidden() || null" } }, ngImport: i0, template: `
|
|
847
847
|
@let f = field();
|
|
848
848
|
@let checked = checkedValuesMap();
|
|
849
849
|
@if (label(); as label) {
|
|
@@ -885,7 +885,7 @@ class BsMultiCheckboxFieldComponent {
|
|
|
885
885
|
}
|
|
886
886
|
`, isInline: true, styles: [":host{--df-field-gap: .5rem;--df-label-font-weight: 500;--df-label-color: inherit;--df-hint-color: var(--bs-secondary-color, #6c757d);--df-hint-font-size: .875rem;--df-error-color: var(--bs-danger, #dc3545);--df-error-font-size: .875rem}.df-bs-field{display:flex;flex-direction:column;gap:var(--df-field-gap);width:100%;margin-bottom:1rem}.df-bs-label{font-weight:var(--df-label-font-weight);color:var(--df-label-color);margin-bottom:0}.df-bs-hint{color:var(--df-hint-color);font-size:var(--df-hint-font-size);margin-top:.25rem}.df-bs-field:has(.df-bs-hint){margin-bottom:.5rem}:host([hidden]){display:none!important}\n", ":host{display:block}.checkbox-group{margin-bottom:.5rem}:host([hidden]){display:none!important}\n"], dependencies: [{ kind: "pipe", type: DynamicTextPipe, name: "dynamicText" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
887
887
|
}
|
|
888
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
888
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: BsMultiCheckboxFieldComponent, decorators: [{
|
|
889
889
|
type: Component,
|
|
890
890
|
args: [{ selector: 'df-bs-multi-checkbox', imports: [DynamicTextPipe, AsyncPipe], template: `
|
|
891
891
|
@let f = field();
|
|
@@ -943,18 +943,18 @@ var bsMultiCheckbox_component = /*#__PURE__*/Object.freeze({
|
|
|
943
943
|
class BsRadioGroupComponent {
|
|
944
944
|
elementRef = inject((ElementRef));
|
|
945
945
|
// Value model - FormField directive binds form value to this
|
|
946
|
-
value = model(undefined, ...(ngDevMode ? [{ debugName: "value" }] : []));
|
|
946
|
+
value = model(undefined, ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
|
|
947
947
|
// Optional FormValueControl properties - Field directive will bind these
|
|
948
|
-
disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
|
|
949
|
-
readonly = input(false, ...(ngDevMode ? [{ debugName: "readonly" }] : []));
|
|
950
|
-
name = input('', ...(ngDevMode ? [{ debugName: "name" }] : []));
|
|
948
|
+
disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
|
|
949
|
+
readonly = input(false, ...(ngDevMode ? [{ debugName: "readonly" }] : /* istanbul ignore next */ []));
|
|
950
|
+
name = input('', ...(ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []));
|
|
951
951
|
// Component-specific inputs
|
|
952
|
-
label = input(...(ngDevMode ? [undefined, { debugName: "label" }] : []));
|
|
953
|
-
options = input.required(...(ngDevMode ? [{ debugName: "options" }] : []));
|
|
954
|
-
properties = input(...(ngDevMode ? [undefined, { debugName: "properties" }] : []));
|
|
955
|
-
meta = input(...(ngDevMode ? [undefined, { debugName: "meta" }] : []));
|
|
952
|
+
label = input(...(ngDevMode ? [undefined, { debugName: "label" }] : /* istanbul ignore next */ []));
|
|
953
|
+
options = input.required(...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
|
|
954
|
+
properties = input(...(ngDevMode ? [undefined, { debugName: "properties" }] : /* istanbul ignore next */ []));
|
|
955
|
+
meta = input(...(ngDevMode ? [undefined, { debugName: "meta" }] : /* istanbul ignore next */ []));
|
|
956
956
|
// Accessibility - this will be provided by parent component through input
|
|
957
|
-
ariaDescribedBy = input(null, ...(ngDevMode ? [{ debugName: "ariaDescribedBy" }] : []));
|
|
957
|
+
ariaDescribedBy = input(null, ...(ngDevMode ? [{ debugName: "ariaDescribedBy" }] : /* istanbul ignore next */ []));
|
|
958
958
|
constructor() {
|
|
959
959
|
setupMetaTracking(this.elementRef, this.meta, { selector: 'input[type="radio"]', dependents: [this.options] });
|
|
960
960
|
}
|
|
@@ -966,8 +966,8 @@ class BsRadioGroupComponent {
|
|
|
966
966
|
this.value.set(newValue);
|
|
967
967
|
}
|
|
968
968
|
}
|
|
969
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
970
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.
|
|
969
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: BsRadioGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
970
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: BsRadioGroupComponent, isStandalone: true, selector: "df-bs-radio-group", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: true, transformFunction: null }, properties: { classPropertyName: "properties", publicName: "properties", isSignal: true, isRequired: false, transformFunction: null }, meta: { classPropertyName: "meta", publicName: "meta", isSignal: true, isRequired: false, transformFunction: null }, ariaDescribedBy: { classPropertyName: "ariaDescribedBy", publicName: "ariaDescribedBy", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, ngImport: i0, template: `
|
|
971
971
|
@let props = properties();
|
|
972
972
|
@if (props?.buttonGroup) {
|
|
973
973
|
<div class="btn-group" role="group" [attr.aria-label]="label() | dynamicText | async">
|
|
@@ -1016,7 +1016,7 @@ class BsRadioGroupComponent {
|
|
|
1016
1016
|
}
|
|
1017
1017
|
`, isInline: true, styles: [":host{display:block}\n"], dependencies: [{ kind: "pipe", type: DynamicTextPipe, name: "dynamicText" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1018
1018
|
}
|
|
1019
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
1019
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: BsRadioGroupComponent, decorators: [{
|
|
1020
1020
|
type: Component,
|
|
1021
1021
|
args: [{ selector: 'df-bs-radio-group', imports: [DynamicTextPipe, AsyncPipe], template: `
|
|
1022
1022
|
@let props = properties();
|
|
@@ -1070,17 +1070,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
|
|
|
1070
1070
|
|
|
1071
1071
|
class BsRadioFieldComponent {
|
|
1072
1072
|
elementRef = inject((ElementRef));
|
|
1073
|
-
field = input.required(...(ngDevMode ? [{ debugName: "field" }] : []));
|
|
1074
|
-
key = input.required(...(ngDevMode ? [{ debugName: "key" }] : []));
|
|
1075
|
-
label = input(...(ngDevMode ? [undefined, { debugName: "label" }] : []));
|
|
1076
|
-
placeholder = input(...(ngDevMode ? [undefined, { debugName: "placeholder" }] : []));
|
|
1077
|
-
className = input('', ...(ngDevMode ? [{ debugName: "className" }] : []));
|
|
1078
|
-
tabIndex = input(...(ngDevMode ? [undefined, { debugName: "tabIndex" }] : []));
|
|
1079
|
-
options = input([], ...(ngDevMode ? [{ debugName: "options" }] : []));
|
|
1080
|
-
props = input(...(ngDevMode ? [undefined, { debugName: "props" }] : []));
|
|
1081
|
-
meta = input(...(ngDevMode ? [undefined, { debugName: "meta" }] : []));
|
|
1082
|
-
validationMessages = input(...(ngDevMode ? [undefined, { debugName: "validationMessages" }] : []));
|
|
1083
|
-
defaultValidationMessages = input(...(ngDevMode ? [undefined, { debugName: "defaultValidationMessages" }] : []));
|
|
1073
|
+
field = input.required(...(ngDevMode ? [{ debugName: "field" }] : /* istanbul ignore next */ []));
|
|
1074
|
+
key = input.required(...(ngDevMode ? [{ debugName: "key" }] : /* istanbul ignore next */ []));
|
|
1075
|
+
label = input(...(ngDevMode ? [undefined, { debugName: "label" }] : /* istanbul ignore next */ []));
|
|
1076
|
+
placeholder = input(...(ngDevMode ? [undefined, { debugName: "placeholder" }] : /* istanbul ignore next */ []));
|
|
1077
|
+
className = input('', ...(ngDevMode ? [{ debugName: "className" }] : /* istanbul ignore next */ []));
|
|
1078
|
+
tabIndex = input(...(ngDevMode ? [undefined, { debugName: "tabIndex" }] : /* istanbul ignore next */ []));
|
|
1079
|
+
options = input([], ...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
|
|
1080
|
+
props = input(...(ngDevMode ? [undefined, { debugName: "props" }] : /* istanbul ignore next */ []));
|
|
1081
|
+
meta = input(...(ngDevMode ? [undefined, { debugName: "meta" }] : /* istanbul ignore next */ []));
|
|
1082
|
+
validationMessages = input(...(ngDevMode ? [undefined, { debugName: "validationMessages" }] : /* istanbul ignore next */ []));
|
|
1083
|
+
defaultValidationMessages = input(...(ngDevMode ? [undefined, { debugName: "defaultValidationMessages" }] : /* istanbul ignore next */ []));
|
|
1084
1084
|
resolvedErrors = createResolvedErrorsSignal(this.field, this.validationMessages, this.defaultValidationMessages);
|
|
1085
1085
|
showErrors = shouldShowErrors(this.field);
|
|
1086
1086
|
constructor() {
|
|
@@ -1089,22 +1089,22 @@ class BsRadioFieldComponent {
|
|
|
1089
1089
|
dependents: [this.options],
|
|
1090
1090
|
});
|
|
1091
1091
|
}
|
|
1092
|
-
errorsToDisplay = computed(() => (this.showErrors() ? this.resolvedErrors() : []), ...(ngDevMode ? [{ debugName: "errorsToDisplay" }] : []));
|
|
1092
|
+
errorsToDisplay = computed(() => (this.showErrors() ? this.resolvedErrors() : []), ...(ngDevMode ? [{ debugName: "errorsToDisplay" }] : /* istanbul ignore next */ []));
|
|
1093
1093
|
// ─────────────────────────────────────────────────────────────────────────────
|
|
1094
1094
|
// Accessibility
|
|
1095
1095
|
// ─────────────────────────────────────────────────────────────────────────────
|
|
1096
|
-
hintId = computed(() => `${this.key()}-hint`, ...(ngDevMode ? [{ debugName: "hintId" }] : []));
|
|
1097
|
-
errorId = computed(() => `${this.key()}-error`, ...(ngDevMode ? [{ debugName: "errorId" }] : []));
|
|
1096
|
+
hintId = computed(() => `${this.key()}-hint`, ...(ngDevMode ? [{ debugName: "hintId" }] : /* istanbul ignore next */ []));
|
|
1097
|
+
errorId = computed(() => `${this.key()}-error`, ...(ngDevMode ? [{ debugName: "errorId" }] : /* istanbul ignore next */ []));
|
|
1098
1098
|
ariaInvalid = computed(() => {
|
|
1099
1099
|
const fieldState = this.field()();
|
|
1100
1100
|
return fieldState.invalid() && fieldState.touched();
|
|
1101
|
-
}, ...(ngDevMode ? [{ debugName: "ariaInvalid" }] : []));
|
|
1101
|
+
}, ...(ngDevMode ? [{ debugName: "ariaInvalid" }] : /* istanbul ignore next */ []));
|
|
1102
1102
|
ariaRequired = computed(() => {
|
|
1103
1103
|
return this.field()().required?.() === true ? true : null;
|
|
1104
|
-
}, ...(ngDevMode ? [{ debugName: "ariaRequired" }] : []));
|
|
1104
|
+
}, ...(ngDevMode ? [{ debugName: "ariaRequired" }] : /* istanbul ignore next */ []));
|
|
1105
1105
|
ariaDescribedBy = createAriaDescribedBySignal(this.errorsToDisplay, this.errorId, this.hintId, () => !!this.props()?.hint);
|
|
1106
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
1107
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.
|
|
1106
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: BsRadioFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1107
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: BsRadioFieldComponent, isStandalone: true, selector: "df-bs-radio", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null }, key: { classPropertyName: "key", publicName: "key", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, tabIndex: { classPropertyName: "tabIndex", publicName: "tabIndex", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, props: { classPropertyName: "props", publicName: "props", isSignal: true, isRequired: false, transformFunction: null }, meta: { classPropertyName: "meta", publicName: "meta", isSignal: true, isRequired: false, transformFunction: null }, validationMessages: { classPropertyName: "validationMessages", publicName: "validationMessages", isSignal: true, isRequired: false, transformFunction: null }, defaultValidationMessages: { classPropertyName: "defaultValidationMessages", publicName: "defaultValidationMessages", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "id": "`${key()}`", "attr.data-testid": "key()", "class": "className()", "attr.hidden": "field()().hidden() || null" } }, ngImport: i0, template: `
|
|
1108
1108
|
@let f = field();
|
|
1109
1109
|
|
|
1110
1110
|
<div class="mb-3">
|
|
@@ -1128,7 +1128,7 @@ class BsRadioFieldComponent {
|
|
|
1128
1128
|
</div>
|
|
1129
1129
|
`, isInline: true, styles: [":host{--df-field-gap: .5rem;--df-label-font-weight: 500;--df-label-color: inherit;--df-hint-color: var(--bs-secondary-color, #6c757d);--df-hint-font-size: .875rem;--df-error-color: var(--bs-danger, #dc3545);--df-error-font-size: .875rem}.df-bs-field{display:flex;flex-direction:column;gap:var(--df-field-gap);width:100%;margin-bottom:1rem}.df-bs-label{font-weight:var(--df-label-font-weight);color:var(--df-label-color);margin-bottom:0}.df-bs-hint{color:var(--df-hint-color);font-size:var(--df-hint-font-size);margin-top:.25rem}.df-bs-field:has(.df-bs-hint){margin-bottom:.5rem}:host([hidden]){display:none!important}\n", ":host{display:block}:host([hidden]){display:none!important}\n"], dependencies: [{ kind: "component", type: BsRadioGroupComponent, selector: "df-bs-radio-group", inputs: ["value", "disabled", "readonly", "name", "label", "options", "properties", "meta", "ariaDescribedBy"], outputs: ["valueChange"] }, { kind: "directive", type: FormField, selector: "[formField]", inputs: ["formField"], exportAs: ["formField"] }, { kind: "pipe", type: DynamicTextPipe, name: "dynamicText" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1130
1130
|
}
|
|
1131
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
1131
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: BsRadioFieldComponent, decorators: [{
|
|
1132
1132
|
type: Component,
|
|
1133
1133
|
args: [{ selector: 'df-bs-radio', imports: [BsRadioGroupComponent, FormField, DynamicTextPipe, AsyncPipe], template: `
|
|
1134
1134
|
@let f = field();
|
|
@@ -1167,20 +1167,20 @@ var bsRadio_component = /*#__PURE__*/Object.freeze({
|
|
|
1167
1167
|
|
|
1168
1168
|
class BsSelectFieldComponent {
|
|
1169
1169
|
elementRef = inject((ElementRef));
|
|
1170
|
-
field = input.required(...(ngDevMode ? [{ debugName: "field" }] : []));
|
|
1171
|
-
key = input.required(...(ngDevMode ? [{ debugName: "key" }] : []));
|
|
1172
|
-
label = input(...(ngDevMode ? [undefined, { debugName: "label" }] : []));
|
|
1173
|
-
placeholder = input(...(ngDevMode ? [undefined, { debugName: "placeholder" }] : []));
|
|
1174
|
-
className = input('', ...(ngDevMode ? [{ debugName: "className" }] : []));
|
|
1175
|
-
tabIndex = input(...(ngDevMode ? [undefined, { debugName: "tabIndex" }] : []));
|
|
1176
|
-
options = input([], ...(ngDevMode ? [{ debugName: "options" }] : []));
|
|
1177
|
-
props = input(...(ngDevMode ? [undefined, { debugName: "props" }] : []));
|
|
1178
|
-
validationMessages = input(...(ngDevMode ? [undefined, { debugName: "validationMessages" }] : []));
|
|
1179
|
-
defaultValidationMessages = input(...(ngDevMode ? [undefined, { debugName: "defaultValidationMessages" }] : []));
|
|
1180
|
-
meta = input(...(ngDevMode ? [undefined, { debugName: "meta" }] : []));
|
|
1170
|
+
field = input.required(...(ngDevMode ? [{ debugName: "field" }] : /* istanbul ignore next */ []));
|
|
1171
|
+
key = input.required(...(ngDevMode ? [{ debugName: "key" }] : /* istanbul ignore next */ []));
|
|
1172
|
+
label = input(...(ngDevMode ? [undefined, { debugName: "label" }] : /* istanbul ignore next */ []));
|
|
1173
|
+
placeholder = input(...(ngDevMode ? [undefined, { debugName: "placeholder" }] : /* istanbul ignore next */ []));
|
|
1174
|
+
className = input('', ...(ngDevMode ? [{ debugName: "className" }] : /* istanbul ignore next */ []));
|
|
1175
|
+
tabIndex = input(...(ngDevMode ? [undefined, { debugName: "tabIndex" }] : /* istanbul ignore next */ []));
|
|
1176
|
+
options = input([], ...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
|
|
1177
|
+
props = input(...(ngDevMode ? [undefined, { debugName: "props" }] : /* istanbul ignore next */ []));
|
|
1178
|
+
validationMessages = input(...(ngDevMode ? [undefined, { debugName: "validationMessages" }] : /* istanbul ignore next */ []));
|
|
1179
|
+
defaultValidationMessages = input(...(ngDevMode ? [undefined, { debugName: "defaultValidationMessages" }] : /* istanbul ignore next */ []));
|
|
1180
|
+
meta = input(...(ngDevMode ? [undefined, { debugName: "meta" }] : /* istanbul ignore next */ []));
|
|
1181
1181
|
resolvedErrors = createResolvedErrorsSignal(this.field, this.validationMessages, this.defaultValidationMessages);
|
|
1182
1182
|
showErrors = shouldShowErrors(this.field);
|
|
1183
|
-
errorsToDisplay = computed(() => (this.showErrors() ? this.resolvedErrors() : []), ...(ngDevMode ? [{ debugName: "errorsToDisplay" }] : []));
|
|
1183
|
+
errorsToDisplay = computed(() => (this.showErrors() ? this.resolvedErrors() : []), ...(ngDevMode ? [{ debugName: "errorsToDisplay" }] : /* istanbul ignore next */ []));
|
|
1184
1184
|
constructor() {
|
|
1185
1185
|
setupMetaTracking(this.elementRef, this.meta, { selector: 'select' });
|
|
1186
1186
|
}
|
|
@@ -1195,18 +1195,18 @@ class BsSelectFieldComponent {
|
|
|
1195
1195
|
// ─────────────────────────────────────────────────────────────────────────────
|
|
1196
1196
|
// Accessibility
|
|
1197
1197
|
// ─────────────────────────────────────────────────────────────────────────────
|
|
1198
|
-
hintId = computed(() => `${this.key()}-hint`, ...(ngDevMode ? [{ debugName: "hintId" }] : []));
|
|
1199
|
-
errorId = computed(() => `${this.key()}-error`, ...(ngDevMode ? [{ debugName: "errorId" }] : []));
|
|
1198
|
+
hintId = computed(() => `${this.key()}-hint`, ...(ngDevMode ? [{ debugName: "hintId" }] : /* istanbul ignore next */ []));
|
|
1199
|
+
errorId = computed(() => `${this.key()}-error`, ...(ngDevMode ? [{ debugName: "errorId" }] : /* istanbul ignore next */ []));
|
|
1200
1200
|
ariaInvalid = computed(() => {
|
|
1201
1201
|
const fieldState = this.field()();
|
|
1202
1202
|
return fieldState.invalid() && fieldState.touched();
|
|
1203
|
-
}, ...(ngDevMode ? [{ debugName: "ariaInvalid" }] : []));
|
|
1203
|
+
}, ...(ngDevMode ? [{ debugName: "ariaInvalid" }] : /* istanbul ignore next */ []));
|
|
1204
1204
|
ariaRequired = computed(() => {
|
|
1205
1205
|
return this.field()().required?.() === true ? true : null;
|
|
1206
|
-
}, ...(ngDevMode ? [{ debugName: "ariaRequired" }] : []));
|
|
1206
|
+
}, ...(ngDevMode ? [{ debugName: "ariaRequired" }] : /* istanbul ignore next */ []));
|
|
1207
1207
|
ariaDescribedBy = createAriaDescribedBySignal(this.errorsToDisplay, this.errorId, this.hintId, () => !!this.props()?.hint);
|
|
1208
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
1209
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.
|
|
1208
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: BsSelectFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1209
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: BsSelectFieldComponent, isStandalone: true, selector: "df-bs-select", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null }, key: { classPropertyName: "key", publicName: "key", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, tabIndex: { classPropertyName: "tabIndex", publicName: "tabIndex", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, props: { classPropertyName: "props", publicName: "props", isSignal: true, isRequired: false, transformFunction: null }, validationMessages: { classPropertyName: "validationMessages", publicName: "validationMessages", isSignal: true, isRequired: false, transformFunction: null }, defaultValidationMessages: { classPropertyName: "defaultValidationMessages", publicName: "defaultValidationMessages", isSignal: true, isRequired: false, transformFunction: null }, meta: { classPropertyName: "meta", publicName: "meta", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "id": "`${key()}`", "attr.data-testid": "key()", "class": "className()", "attr.hidden": "field()().hidden() || null" } }, ngImport: i0, template: `
|
|
1210
1210
|
@let f = field(); @let selectId = key() + '-select';
|
|
1211
1211
|
|
|
1212
1212
|
<div class="mb-3">
|
|
@@ -1244,7 +1244,7 @@ class BsSelectFieldComponent {
|
|
|
1244
1244
|
</div>
|
|
1245
1245
|
`, isInline: true, styles: [":host{--df-field-gap: .5rem;--df-label-font-weight: 500;--df-label-color: inherit;--df-hint-color: var(--bs-secondary-color, #6c757d);--df-hint-font-size: .875rem;--df-error-color: var(--bs-danger, #dc3545);--df-error-font-size: .875rem}.df-bs-field{display:flex;flex-direction:column;gap:var(--df-field-gap);width:100%;margin-bottom:1rem}.df-bs-label{font-weight:var(--df-label-font-weight);color:var(--df-label-color);margin-bottom:0}.df-bs-hint{color:var(--df-hint-color);font-size:var(--df-hint-font-size);margin-top:.25rem}.df-bs-field:has(.df-bs-hint){margin-bottom:.5rem}:host([hidden]){display:none!important}\n", ":host([hidden]){display:none!important}\n"], dependencies: [{ kind: "directive", type: FormField, selector: "[formField]", inputs: ["formField"], exportAs: ["formField"] }, { kind: "pipe", type: DynamicTextPipe, name: "dynamicText" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1246
1246
|
}
|
|
1247
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
1247
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: BsSelectFieldComponent, decorators: [{
|
|
1248
1248
|
type: Component,
|
|
1249
1249
|
args: [{ selector: 'df-bs-select', imports: [FormField, DynamicTextPipe, AsyncPipe], template: `
|
|
1250
1250
|
@let f = field(); @let selectId = key() + '-select';
|
|
@@ -1297,40 +1297,40 @@ var bsSelect_component = /*#__PURE__*/Object.freeze({
|
|
|
1297
1297
|
|
|
1298
1298
|
class BsSliderFieldComponent {
|
|
1299
1299
|
elementRef = inject((ElementRef));
|
|
1300
|
-
field = input.required(...(ngDevMode ? [{ debugName: "field" }] : []));
|
|
1301
|
-
key = input.required(...(ngDevMode ? [{ debugName: "key" }] : []));
|
|
1302
|
-
label = input(...(ngDevMode ? [undefined, { debugName: "label" }] : []));
|
|
1303
|
-
placeholder = input(...(ngDevMode ? [undefined, { debugName: "placeholder" }] : []));
|
|
1304
|
-
className = input('', ...(ngDevMode ? [{ debugName: "className" }] : []));
|
|
1305
|
-
tabIndex = input(...(ngDevMode ? [undefined, { debugName: "tabIndex" }] : []));
|
|
1306
|
-
min = input(0, ...(ngDevMode ? [{ debugName: "min" }] : []));
|
|
1307
|
-
max = input(100, ...(ngDevMode ? [{ debugName: "max" }] : []));
|
|
1308
|
-
step = input(1, ...(ngDevMode ? [{ debugName: "step" }] : []));
|
|
1309
|
-
props = input(...(ngDevMode ? [undefined, { debugName: "props" }] : []));
|
|
1310
|
-
validationMessages = input(...(ngDevMode ? [undefined, { debugName: "validationMessages" }] : []));
|
|
1311
|
-
defaultValidationMessages = input(...(ngDevMode ? [undefined, { debugName: "defaultValidationMessages" }] : []));
|
|
1312
|
-
meta = input(...(ngDevMode ? [undefined, { debugName: "meta" }] : []));
|
|
1300
|
+
field = input.required(...(ngDevMode ? [{ debugName: "field" }] : /* istanbul ignore next */ []));
|
|
1301
|
+
key = input.required(...(ngDevMode ? [{ debugName: "key" }] : /* istanbul ignore next */ []));
|
|
1302
|
+
label = input(...(ngDevMode ? [undefined, { debugName: "label" }] : /* istanbul ignore next */ []));
|
|
1303
|
+
placeholder = input(...(ngDevMode ? [undefined, { debugName: "placeholder" }] : /* istanbul ignore next */ []));
|
|
1304
|
+
className = input('', ...(ngDevMode ? [{ debugName: "className" }] : /* istanbul ignore next */ []));
|
|
1305
|
+
tabIndex = input(...(ngDevMode ? [undefined, { debugName: "tabIndex" }] : /* istanbul ignore next */ []));
|
|
1306
|
+
min = input(0, ...(ngDevMode ? [{ debugName: "min" }] : /* istanbul ignore next */ []));
|
|
1307
|
+
max = input(100, ...(ngDevMode ? [{ debugName: "max" }] : /* istanbul ignore next */ []));
|
|
1308
|
+
step = input(1, ...(ngDevMode ? [{ debugName: "step" }] : /* istanbul ignore next */ []));
|
|
1309
|
+
props = input(...(ngDevMode ? [undefined, { debugName: "props" }] : /* istanbul ignore next */ []));
|
|
1310
|
+
validationMessages = input(...(ngDevMode ? [undefined, { debugName: "validationMessages" }] : /* istanbul ignore next */ []));
|
|
1311
|
+
defaultValidationMessages = input(...(ngDevMode ? [undefined, { debugName: "defaultValidationMessages" }] : /* istanbul ignore next */ []));
|
|
1312
|
+
meta = input(...(ngDevMode ? [undefined, { debugName: "meta" }] : /* istanbul ignore next */ []));
|
|
1313
1313
|
resolvedErrors = createResolvedErrorsSignal(this.field, this.validationMessages, this.defaultValidationMessages);
|
|
1314
1314
|
showErrors = shouldShowErrors(this.field);
|
|
1315
|
-
errorsToDisplay = computed(() => (this.showErrors() ? this.resolvedErrors() : []), ...(ngDevMode ? [{ debugName: "errorsToDisplay" }] : []));
|
|
1315
|
+
errorsToDisplay = computed(() => (this.showErrors() ? this.resolvedErrors() : []), ...(ngDevMode ? [{ debugName: "errorsToDisplay" }] : /* istanbul ignore next */ []));
|
|
1316
1316
|
constructor() {
|
|
1317
1317
|
setupMetaTracking(this.elementRef, this.meta, { selector: 'input' });
|
|
1318
1318
|
}
|
|
1319
1319
|
// ─────────────────────────────────────────────────────────────────────────────
|
|
1320
1320
|
// Accessibility
|
|
1321
1321
|
// ─────────────────────────────────────────────────────────────────────────────
|
|
1322
|
-
hintId = computed(() => `${this.key()}-hint`, ...(ngDevMode ? [{ debugName: "hintId" }] : []));
|
|
1323
|
-
errorId = computed(() => `${this.key()}-error`, ...(ngDevMode ? [{ debugName: "errorId" }] : []));
|
|
1322
|
+
hintId = computed(() => `${this.key()}-hint`, ...(ngDevMode ? [{ debugName: "hintId" }] : /* istanbul ignore next */ []));
|
|
1323
|
+
errorId = computed(() => `${this.key()}-error`, ...(ngDevMode ? [{ debugName: "errorId" }] : /* istanbul ignore next */ []));
|
|
1324
1324
|
ariaInvalid = computed(() => {
|
|
1325
1325
|
const fieldState = this.field()();
|
|
1326
1326
|
return fieldState.invalid() && fieldState.touched();
|
|
1327
|
-
}, ...(ngDevMode ? [{ debugName: "ariaInvalid" }] : []));
|
|
1327
|
+
}, ...(ngDevMode ? [{ debugName: "ariaInvalid" }] : /* istanbul ignore next */ []));
|
|
1328
1328
|
ariaRequired = computed(() => {
|
|
1329
1329
|
return this.field()().required?.() === true ? true : null;
|
|
1330
|
-
}, ...(ngDevMode ? [{ debugName: "ariaRequired" }] : []));
|
|
1330
|
+
}, ...(ngDevMode ? [{ debugName: "ariaRequired" }] : /* istanbul ignore next */ []));
|
|
1331
1331
|
ariaDescribedBy = createAriaDescribedBySignal(this.errorsToDisplay, this.errorId, this.hintId, () => !!this.props()?.hint);
|
|
1332
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
1333
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.
|
|
1332
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: BsSliderFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1333
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: BsSliderFieldComponent, isStandalone: true, selector: "df-bs-slider", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null }, key: { classPropertyName: "key", publicName: "key", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, tabIndex: { classPropertyName: "tabIndex", publicName: "tabIndex", 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 }, props: { classPropertyName: "props", publicName: "props", isSignal: true, isRequired: false, transformFunction: null }, validationMessages: { classPropertyName: "validationMessages", publicName: "validationMessages", isSignal: true, isRequired: false, transformFunction: null }, defaultValidationMessages: { classPropertyName: "defaultValidationMessages", publicName: "defaultValidationMessages", isSignal: true, isRequired: false, transformFunction: null }, meta: { classPropertyName: "meta", publicName: "meta", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "className()", "id": "`${key()}`", "attr.data-testid": "key()", "attr.hidden": "field()().hidden() || null" } }, ngImport: i0, template: `
|
|
1334
1334
|
@let f = field(); @let inputId = key() + '-input';
|
|
1335
1335
|
|
|
1336
1336
|
<div class="mb-3">
|
|
@@ -1366,7 +1366,7 @@ class BsSliderFieldComponent {
|
|
|
1366
1366
|
</div>
|
|
1367
1367
|
`, isInline: true, styles: [":host{--df-field-gap: .5rem;--df-label-font-weight: 500;--df-label-color: inherit;--df-hint-color: var(--bs-secondary-color, #6c757d);--df-hint-font-size: .875rem;--df-error-color: var(--bs-danger, #dc3545);--df-error-font-size: .875rem}.df-bs-field{display:flex;flex-direction:column;gap:var(--df-field-gap);width:100%;margin-bottom:1rem}.df-bs-label{font-weight:var(--df-label-font-weight);color:var(--df-label-color);margin-bottom:0}.df-bs-hint{color:var(--df-hint-color);font-size:var(--df-hint-font-size);margin-top:.25rem}.df-bs-field:has(.df-bs-hint){margin-bottom:.5rem}:host([hidden]){display:none!important}\n", ":host{display:block}:host([hidden]){display:none!important}\n"], dependencies: [{ kind: "directive", type: FormField, selector: "[formField]", inputs: ["formField"], exportAs: ["formField"] }, { kind: "directive", type: InputConstraintsDirective, selector: "[dfBsInputConstraints]", inputs: ["dfMin", "dfMax", "dfStep"] }, { kind: "pipe", type: DynamicTextPipe, name: "dynamicText" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1368
1368
|
}
|
|
1369
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
1369
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: BsSliderFieldComponent, decorators: [{
|
|
1370
1370
|
type: Component,
|
|
1371
1371
|
args: [{ selector: 'df-bs-slider', imports: [FormField, DynamicTextPipe, AsyncPipe, InputConstraintsDirective], template: `
|
|
1372
1372
|
@let f = field(); @let inputId = key() + '-input';
|
|
@@ -1417,26 +1417,26 @@ var bsSlider_component = /*#__PURE__*/Object.freeze({
|
|
|
1417
1417
|
|
|
1418
1418
|
class BsTextareaFieldComponent {
|
|
1419
1419
|
elementRef = inject((ElementRef));
|
|
1420
|
-
field = input.required(...(ngDevMode ? [{ debugName: "field" }] : []));
|
|
1421
|
-
key = input.required(...(ngDevMode ? [{ debugName: "key" }] : []));
|
|
1422
|
-
label = input(...(ngDevMode ? [undefined, { debugName: "label" }] : []));
|
|
1423
|
-
placeholder = input(...(ngDevMode ? [undefined, { debugName: "placeholder" }] : []));
|
|
1424
|
-
className = input('', ...(ngDevMode ? [{ debugName: "className" }] : []));
|
|
1425
|
-
tabIndex = input(...(ngDevMode ? [undefined, { debugName: "tabIndex" }] : []));
|
|
1426
|
-
props = input(...(ngDevMode ? [undefined, { debugName: "props" }] : []));
|
|
1427
|
-
validationMessages = input(...(ngDevMode ? [undefined, { debugName: "validationMessages" }] : []));
|
|
1428
|
-
defaultValidationMessages = input(...(ngDevMode ? [undefined, { debugName: "defaultValidationMessages" }] : []));
|
|
1429
|
-
meta = input(...(ngDevMode ? [undefined, { debugName: "meta" }] : []));
|
|
1420
|
+
field = input.required(...(ngDevMode ? [{ debugName: "field" }] : /* istanbul ignore next */ []));
|
|
1421
|
+
key = input.required(...(ngDevMode ? [{ debugName: "key" }] : /* istanbul ignore next */ []));
|
|
1422
|
+
label = input(...(ngDevMode ? [undefined, { debugName: "label" }] : /* istanbul ignore next */ []));
|
|
1423
|
+
placeholder = input(...(ngDevMode ? [undefined, { debugName: "placeholder" }] : /* istanbul ignore next */ []));
|
|
1424
|
+
className = input('', ...(ngDevMode ? [{ debugName: "className" }] : /* istanbul ignore next */ []));
|
|
1425
|
+
tabIndex = input(...(ngDevMode ? [undefined, { debugName: "tabIndex" }] : /* istanbul ignore next */ []));
|
|
1426
|
+
props = input(...(ngDevMode ? [undefined, { debugName: "props" }] : /* istanbul ignore next */ []));
|
|
1427
|
+
validationMessages = input(...(ngDevMode ? [undefined, { debugName: "validationMessages" }] : /* istanbul ignore next */ []));
|
|
1428
|
+
defaultValidationMessages = input(...(ngDevMode ? [undefined, { debugName: "defaultValidationMessages" }] : /* istanbul ignore next */ []));
|
|
1429
|
+
meta = input(...(ngDevMode ? [undefined, { debugName: "meta" }] : /* istanbul ignore next */ []));
|
|
1430
1430
|
/**
|
|
1431
1431
|
* Reference to the native textarea element.
|
|
1432
1432
|
* Used to imperatively sync the readonly attribute since Angular Signal Forms'
|
|
1433
1433
|
* [field] directive doesn't sync FieldState.readonly() to the DOM.
|
|
1434
1434
|
*/
|
|
1435
|
-
textareaRef = viewChild('textareaRef', ...(ngDevMode ? [{ debugName: "textareaRef" }] : []));
|
|
1435
|
+
textareaRef = viewChild('textareaRef', ...(ngDevMode ? [{ debugName: "textareaRef" }] : /* istanbul ignore next */ []));
|
|
1436
1436
|
/**
|
|
1437
1437
|
* Computed signal that extracts the readonly state from the field.
|
|
1438
1438
|
*/
|
|
1439
|
-
isReadonly = computed(() => this.field()().readonly(), ...(ngDevMode ? [{ debugName: "isReadonly" }] : []));
|
|
1439
|
+
isReadonly = computed(() => this.field()().readonly(), ...(ngDevMode ? [{ debugName: "isReadonly" }] : /* istanbul ignore next */ []));
|
|
1440
1440
|
/**
|
|
1441
1441
|
* Workaround: Angular Signal Forms' [field] directive does NOT sync the readonly
|
|
1442
1442
|
* attribute to the DOM. This effect imperatively sets/removes the readonly attribute
|
|
@@ -1458,25 +1458,25 @@ class BsTextareaFieldComponent {
|
|
|
1458
1458
|
});
|
|
1459
1459
|
resolvedErrors = createResolvedErrorsSignal(this.field, this.validationMessages, this.defaultValidationMessages);
|
|
1460
1460
|
showErrors = shouldShowErrors(this.field);
|
|
1461
|
-
errorsToDisplay = computed(() => (this.showErrors() ? this.resolvedErrors() : []), ...(ngDevMode ? [{ debugName: "errorsToDisplay" }] : []));
|
|
1461
|
+
errorsToDisplay = computed(() => (this.showErrors() ? this.resolvedErrors() : []), ...(ngDevMode ? [{ debugName: "errorsToDisplay" }] : /* istanbul ignore next */ []));
|
|
1462
1462
|
constructor() {
|
|
1463
1463
|
setupMetaTracking(this.elementRef, this.meta, { selector: 'textarea' });
|
|
1464
1464
|
}
|
|
1465
1465
|
// ─────────────────────────────────────────────────────────────────────────────
|
|
1466
1466
|
// Accessibility
|
|
1467
1467
|
// ─────────────────────────────────────────────────────────────────────────────
|
|
1468
|
-
hintId = computed(() => `${this.key()}-hint`, ...(ngDevMode ? [{ debugName: "hintId" }] : []));
|
|
1469
|
-
errorId = computed(() => `${this.key()}-error`, ...(ngDevMode ? [{ debugName: "errorId" }] : []));
|
|
1468
|
+
hintId = computed(() => `${this.key()}-hint`, ...(ngDevMode ? [{ debugName: "hintId" }] : /* istanbul ignore next */ []));
|
|
1469
|
+
errorId = computed(() => `${this.key()}-error`, ...(ngDevMode ? [{ debugName: "errorId" }] : /* istanbul ignore next */ []));
|
|
1470
1470
|
ariaInvalid = computed(() => {
|
|
1471
1471
|
const fieldState = this.field()();
|
|
1472
1472
|
return fieldState.invalid() && fieldState.touched();
|
|
1473
|
-
}, ...(ngDevMode ? [{ debugName: "ariaInvalid" }] : []));
|
|
1473
|
+
}, ...(ngDevMode ? [{ debugName: "ariaInvalid" }] : /* istanbul ignore next */ []));
|
|
1474
1474
|
ariaRequired = computed(() => {
|
|
1475
1475
|
return this.field()().required?.() === true ? true : null;
|
|
1476
|
-
}, ...(ngDevMode ? [{ debugName: "ariaRequired" }] : []));
|
|
1476
|
+
}, ...(ngDevMode ? [{ debugName: "ariaRequired" }] : /* istanbul ignore next */ []));
|
|
1477
1477
|
ariaDescribedBy = createAriaDescribedBySignal(this.errorsToDisplay, this.errorId, this.hintId, () => !!this.props()?.hint);
|
|
1478
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
1479
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.
|
|
1478
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: BsTextareaFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1479
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: BsTextareaFieldComponent, isStandalone: true, selector: "df-bs-textarea", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null }, key: { classPropertyName: "key", publicName: "key", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, tabIndex: { classPropertyName: "tabIndex", publicName: "tabIndex", isSignal: true, isRequired: false, transformFunction: null }, props: { classPropertyName: "props", publicName: "props", isSignal: true, isRequired: false, transformFunction: null }, validationMessages: { classPropertyName: "validationMessages", publicName: "validationMessages", isSignal: true, isRequired: false, transformFunction: null }, defaultValidationMessages: { classPropertyName: "defaultValidationMessages", publicName: "defaultValidationMessages", isSignal: true, isRequired: false, transformFunction: null }, meta: { classPropertyName: "meta", publicName: "meta", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "id": "`${key()}`", "attr.data-testid": "key()", "class": "className()", "attr.hidden": "field()().hidden() || null" } }, viewQueries: [{ propertyName: "textareaRef", first: true, predicate: ["textareaRef"], descendants: true, isSignal: true }], ngImport: i0, template: `
|
|
1480
1480
|
@let f = field(); @let p = props(); @let textareaId = key() + '-textarea';
|
|
1481
1481
|
@if (p?.floatingLabel) {
|
|
1482
1482
|
<!-- Floating label variant -->
|
|
@@ -1548,7 +1548,7 @@ class BsTextareaFieldComponent {
|
|
|
1548
1548
|
}
|
|
1549
1549
|
`, isInline: true, styles: [":host{--df-field-gap: .5rem;--df-label-font-weight: 500;--df-label-color: inherit;--df-hint-color: var(--bs-secondary-color, #6c757d);--df-hint-font-size: .875rem;--df-error-color: var(--bs-danger, #dc3545);--df-error-font-size: .875rem}.df-bs-field{display:flex;flex-direction:column;gap:var(--df-field-gap);width:100%;margin-bottom:1rem}.df-bs-label{font-weight:var(--df-label-font-weight);color:var(--df-label-color);margin-bottom:0}.df-bs-hint{color:var(--df-hint-color);font-size:var(--df-hint-font-size);margin-top:.25rem}.df-bs-field:has(.df-bs-hint){margin-bottom:.5rem}:host([hidden]){display:none!important}\n", ":host([hidden]){display:none!important}\n"], dependencies: [{ kind: "directive", type: FormField, selector: "[formField]", inputs: ["formField"], exportAs: ["formField"] }, { kind: "pipe", type: DynamicTextPipe, name: "dynamicText" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1550
1550
|
}
|
|
1551
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
1551
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: BsTextareaFieldComponent, decorators: [{
|
|
1552
1552
|
type: Component,
|
|
1553
1553
|
args: [{ selector: 'df-bs-textarea', imports: [FormField, DynamicTextPipe, AsyncPipe], template: `
|
|
1554
1554
|
@let f = field(); @let p = props(); @let textareaId = key() + '-textarea';
|
|
@@ -1635,37 +1635,37 @@ var bsTextarea_component = /*#__PURE__*/Object.freeze({
|
|
|
1635
1635
|
|
|
1636
1636
|
class BsToggleFieldComponent {
|
|
1637
1637
|
elementRef = inject((ElementRef));
|
|
1638
|
-
field = input.required(...(ngDevMode ? [{ debugName: "field" }] : []));
|
|
1639
|
-
key = input.required(...(ngDevMode ? [{ debugName: "key" }] : []));
|
|
1640
|
-
label = input(...(ngDevMode ? [undefined, { debugName: "label" }] : []));
|
|
1641
|
-
placeholder = input(...(ngDevMode ? [undefined, { debugName: "placeholder" }] : []));
|
|
1642
|
-
className = input('', ...(ngDevMode ? [{ debugName: "className" }] : []));
|
|
1643
|
-
tabIndex = input(...(ngDevMode ? [undefined, { debugName: "tabIndex" }] : []));
|
|
1644
|
-
props = input(...(ngDevMode ? [undefined, { debugName: "props" }] : []));
|
|
1645
|
-
validationMessages = input(...(ngDevMode ? [undefined, { debugName: "validationMessages" }] : []));
|
|
1646
|
-
defaultValidationMessages = input(...(ngDevMode ? [undefined, { debugName: "defaultValidationMessages" }] : []));
|
|
1647
|
-
meta = input(...(ngDevMode ? [undefined, { debugName: "meta" }] : []));
|
|
1638
|
+
field = input.required(...(ngDevMode ? [{ debugName: "field" }] : /* istanbul ignore next */ []));
|
|
1639
|
+
key = input.required(...(ngDevMode ? [{ debugName: "key" }] : /* istanbul ignore next */ []));
|
|
1640
|
+
label = input(...(ngDevMode ? [undefined, { debugName: "label" }] : /* istanbul ignore next */ []));
|
|
1641
|
+
placeholder = input(...(ngDevMode ? [undefined, { debugName: "placeholder" }] : /* istanbul ignore next */ []));
|
|
1642
|
+
className = input('', ...(ngDevMode ? [{ debugName: "className" }] : /* istanbul ignore next */ []));
|
|
1643
|
+
tabIndex = input(...(ngDevMode ? [undefined, { debugName: "tabIndex" }] : /* istanbul ignore next */ []));
|
|
1644
|
+
props = input(...(ngDevMode ? [undefined, { debugName: "props" }] : /* istanbul ignore next */ []));
|
|
1645
|
+
validationMessages = input(...(ngDevMode ? [undefined, { debugName: "validationMessages" }] : /* istanbul ignore next */ []));
|
|
1646
|
+
defaultValidationMessages = input(...(ngDevMode ? [undefined, { debugName: "defaultValidationMessages" }] : /* istanbul ignore next */ []));
|
|
1647
|
+
meta = input(...(ngDevMode ? [undefined, { debugName: "meta" }] : /* istanbul ignore next */ []));
|
|
1648
1648
|
resolvedErrors = createResolvedErrorsSignal(this.field, this.validationMessages, this.defaultValidationMessages);
|
|
1649
1649
|
showErrors = shouldShowErrors(this.field);
|
|
1650
|
-
errorsToDisplay = computed(() => (this.showErrors() ? this.resolvedErrors() : []), ...(ngDevMode ? [{ debugName: "errorsToDisplay" }] : []));
|
|
1650
|
+
errorsToDisplay = computed(() => (this.showErrors() ? this.resolvedErrors() : []), ...(ngDevMode ? [{ debugName: "errorsToDisplay" }] : /* istanbul ignore next */ []));
|
|
1651
1651
|
constructor() {
|
|
1652
1652
|
setupMetaTracking(this.elementRef, this.meta, { selector: 'input[type="checkbox"]' });
|
|
1653
1653
|
}
|
|
1654
1654
|
// ─────────────────────────────────────────────────────────────────────────────
|
|
1655
1655
|
// Accessibility
|
|
1656
1656
|
// ─────────────────────────────────────────────────────────────────────────────
|
|
1657
|
-
hintId = computed(() => `${this.key()}-hint`, ...(ngDevMode ? [{ debugName: "hintId" }] : []));
|
|
1658
|
-
errorId = computed(() => `${this.key()}-error`, ...(ngDevMode ? [{ debugName: "errorId" }] : []));
|
|
1657
|
+
hintId = computed(() => `${this.key()}-hint`, ...(ngDevMode ? [{ debugName: "hintId" }] : /* istanbul ignore next */ []));
|
|
1658
|
+
errorId = computed(() => `${this.key()}-error`, ...(ngDevMode ? [{ debugName: "errorId" }] : /* istanbul ignore next */ []));
|
|
1659
1659
|
ariaInvalid = computed(() => {
|
|
1660
1660
|
const fieldState = this.field()();
|
|
1661
1661
|
return fieldState.invalid() && fieldState.touched();
|
|
1662
|
-
}, ...(ngDevMode ? [{ debugName: "ariaInvalid" }] : []));
|
|
1662
|
+
}, ...(ngDevMode ? [{ debugName: "ariaInvalid" }] : /* istanbul ignore next */ []));
|
|
1663
1663
|
ariaRequired = computed(() => {
|
|
1664
1664
|
return this.field()().required?.() === true ? true : null;
|
|
1665
|
-
}, ...(ngDevMode ? [{ debugName: "ariaRequired" }] : []));
|
|
1665
|
+
}, ...(ngDevMode ? [{ debugName: "ariaRequired" }] : /* istanbul ignore next */ []));
|
|
1666
1666
|
ariaDescribedBy = createAriaDescribedBySignal(this.errorsToDisplay, this.errorId, this.hintId, () => !!this.props()?.hint);
|
|
1667
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
1668
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.
|
|
1667
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: BsToggleFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1668
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: BsToggleFieldComponent, isStandalone: true, selector: "df-bs-toggle", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null }, key: { classPropertyName: "key", publicName: "key", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, tabIndex: { classPropertyName: "tabIndex", publicName: "tabIndex", isSignal: true, isRequired: false, transformFunction: null }, props: { classPropertyName: "props", publicName: "props", isSignal: true, isRequired: false, transformFunction: null }, validationMessages: { classPropertyName: "validationMessages", publicName: "validationMessages", isSignal: true, isRequired: false, transformFunction: null }, defaultValidationMessages: { classPropertyName: "defaultValidationMessages", publicName: "defaultValidationMessages", isSignal: true, isRequired: false, transformFunction: null }, meta: { classPropertyName: "meta", publicName: "meta", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "className()", "id": "`${key()}`", "attr.data-testid": "key()", "attr.hidden": "field()().hidden() || null" } }, ngImport: i0, template: `
|
|
1669
1669
|
@let f = field(); @let inputId = key() + '-input';
|
|
1670
1670
|
|
|
1671
1671
|
<div
|
|
@@ -1699,7 +1699,7 @@ class BsToggleFieldComponent {
|
|
|
1699
1699
|
}
|
|
1700
1700
|
`, isInline: true, styles: [":host{--df-field-gap: .5rem;--df-label-font-weight: 500;--df-label-color: inherit;--df-hint-color: var(--bs-secondary-color, #6c757d);--df-hint-font-size: .875rem;--df-error-color: var(--bs-danger, #dc3545);--df-error-font-size: .875rem}.df-bs-field{display:flex;flex-direction:column;gap:var(--df-field-gap);width:100%;margin-bottom:1rem}.df-bs-label{font-weight:var(--df-label-font-weight);color:var(--df-label-color);margin-bottom:0}.df-bs-hint{color:var(--df-hint-color);font-size:var(--df-hint-font-size);margin-top:.25rem}.df-bs-field:has(.df-bs-hint){margin-bottom:.5rem}:host([hidden]){display:none!important}\n", ":host{display:block}:host([hidden]){display:none!important}.form-switch-sm .form-check-input{width:1.75rem;height:1rem;font-size:.875rem}.form-switch-lg .form-check-input{width:3rem;height:1.75rem;font-size:1.125rem}\n"], dependencies: [{ kind: "directive", type: FormField, selector: "[formField]", inputs: ["formField"], exportAs: ["formField"] }, { kind: "pipe", type: DynamicTextPipe, name: "dynamicText" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1701
1701
|
}
|
|
1702
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
1702
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: BsToggleFieldComponent, decorators: [{
|
|
1703
1703
|
type: Component,
|
|
1704
1704
|
args: [{ selector: 'df-bs-toggle', imports: [FormField, DynamicTextPipe, AsyncPipe], template: `
|
|
1705
1705
|
@let f = field(); @let inputId = key() + '-input';
|
|
@@ -1835,113 +1835,135 @@ function buttonFieldMapper(fieldDef) {
|
|
|
1835
1835
|
* disabled state resolution based on form validity and options.
|
|
1836
1836
|
*/
|
|
1837
1837
|
|
|
1838
|
+
const BUTTON_FIELD_TYPES_BASE = {
|
|
1839
|
+
renderReadyWhen: [],
|
|
1840
|
+
};
|
|
1838
1841
|
const BOOTSTRAP_FIELD_TYPES = [
|
|
1839
1842
|
{
|
|
1840
1843
|
name: BsField.Input,
|
|
1841
1844
|
loadComponent: () => Promise.resolve().then(function () { return bsInput_component; }),
|
|
1842
1845
|
mapper: valueFieldMapper,
|
|
1843
1846
|
propsToMeta: ['type'],
|
|
1847
|
+
scope: ['text-input', 'numeric'],
|
|
1844
1848
|
},
|
|
1845
1849
|
{
|
|
1846
1850
|
name: BsField.Select,
|
|
1847
1851
|
loadComponent: () => Promise.resolve().then(function () { return bsSelect_component; }),
|
|
1848
1852
|
mapper: optionsFieldMapper,
|
|
1853
|
+
scope: 'single-select',
|
|
1849
1854
|
},
|
|
1850
1855
|
{
|
|
1851
1856
|
name: BsField.Checkbox,
|
|
1852
1857
|
loadComponent: () => Promise.resolve().then(function () { return bsCheckbox_component; }),
|
|
1853
1858
|
mapper: checkboxFieldMapper,
|
|
1859
|
+
scope: 'boolean',
|
|
1854
1860
|
},
|
|
1855
1861
|
{
|
|
1856
1862
|
name: BsField.Button,
|
|
1857
1863
|
loadComponent: () => Promise.resolve().then(function () { return bsButton_component; }),
|
|
1858
1864
|
mapper: buttonFieldMapper,
|
|
1859
1865
|
valueHandling: 'exclude',
|
|
1866
|
+
...BUTTON_FIELD_TYPES_BASE,
|
|
1860
1867
|
},
|
|
1861
1868
|
{
|
|
1862
1869
|
name: BsField.Submit,
|
|
1863
1870
|
loadComponent: () => Promise.resolve().then(function () { return bsButton_component; }),
|
|
1864
1871
|
mapper: submitButtonFieldMapper,
|
|
1865
1872
|
valueHandling: 'exclude',
|
|
1873
|
+
...BUTTON_FIELD_TYPES_BASE,
|
|
1866
1874
|
},
|
|
1867
1875
|
{
|
|
1868
1876
|
name: BsField.Next,
|
|
1869
1877
|
loadComponent: () => Promise.resolve().then(function () { return bsButton_component; }),
|
|
1870
1878
|
mapper: nextButtonFieldMapper,
|
|
1871
1879
|
valueHandling: 'exclude',
|
|
1880
|
+
...BUTTON_FIELD_TYPES_BASE,
|
|
1872
1881
|
},
|
|
1873
1882
|
{
|
|
1874
1883
|
name: BsField.Previous,
|
|
1875
1884
|
loadComponent: () => Promise.resolve().then(function () { return bsButton_component; }),
|
|
1876
1885
|
mapper: previousButtonFieldMapper,
|
|
1877
1886
|
valueHandling: 'exclude',
|
|
1887
|
+
...BUTTON_FIELD_TYPES_BASE,
|
|
1878
1888
|
},
|
|
1879
1889
|
{
|
|
1880
1890
|
name: BsField.AddArrayItem,
|
|
1881
1891
|
loadComponent: () => Promise.resolve().then(function () { return bsButton_component; }),
|
|
1882
1892
|
mapper: addArrayItemButtonMapper,
|
|
1883
1893
|
valueHandling: 'exclude',
|
|
1894
|
+
...BUTTON_FIELD_TYPES_BASE,
|
|
1884
1895
|
},
|
|
1885
1896
|
{
|
|
1886
1897
|
name: BsField.PrependArrayItem,
|
|
1887
1898
|
loadComponent: () => Promise.resolve().then(function () { return bsButton_component; }),
|
|
1888
1899
|
mapper: prependArrayItemButtonMapper,
|
|
1889
1900
|
valueHandling: 'exclude',
|
|
1901
|
+
...BUTTON_FIELD_TYPES_BASE,
|
|
1890
1902
|
},
|
|
1891
1903
|
{
|
|
1892
1904
|
name: BsField.InsertArrayItem,
|
|
1893
1905
|
loadComponent: () => Promise.resolve().then(function () { return bsButton_component; }),
|
|
1894
1906
|
mapper: insertArrayItemButtonMapper,
|
|
1895
1907
|
valueHandling: 'exclude',
|
|
1908
|
+
...BUTTON_FIELD_TYPES_BASE,
|
|
1896
1909
|
},
|
|
1897
1910
|
{
|
|
1898
1911
|
name: BsField.RemoveArrayItem,
|
|
1899
1912
|
loadComponent: () => Promise.resolve().then(function () { return bsButton_component; }),
|
|
1900
1913
|
mapper: removeArrayItemButtonMapper,
|
|
1901
1914
|
valueHandling: 'exclude',
|
|
1915
|
+
...BUTTON_FIELD_TYPES_BASE,
|
|
1902
1916
|
},
|
|
1903
1917
|
{
|
|
1904
1918
|
name: BsField.PopArrayItem,
|
|
1905
1919
|
loadComponent: () => Promise.resolve().then(function () { return bsButton_component; }),
|
|
1906
1920
|
mapper: popArrayItemButtonMapper,
|
|
1907
1921
|
valueHandling: 'exclude',
|
|
1922
|
+
...BUTTON_FIELD_TYPES_BASE,
|
|
1908
1923
|
},
|
|
1909
1924
|
{
|
|
1910
1925
|
name: BsField.ShiftArrayItem,
|
|
1911
1926
|
loadComponent: () => Promise.resolve().then(function () { return bsButton_component; }),
|
|
1912
1927
|
mapper: shiftArrayItemButtonMapper,
|
|
1913
1928
|
valueHandling: 'exclude',
|
|
1929
|
+
...BUTTON_FIELD_TYPES_BASE,
|
|
1914
1930
|
},
|
|
1915
1931
|
{
|
|
1916
1932
|
name: BsField.Textarea,
|
|
1917
1933
|
loadComponent: () => Promise.resolve().then(function () { return bsTextarea_component; }),
|
|
1918
1934
|
mapper: valueFieldMapper,
|
|
1919
1935
|
propsToMeta: ['rows'],
|
|
1936
|
+
scope: 'text-input',
|
|
1920
1937
|
},
|
|
1921
1938
|
{
|
|
1922
1939
|
name: BsField.Radio,
|
|
1923
1940
|
loadComponent: () => Promise.resolve().then(function () { return bsRadio_component; }),
|
|
1924
1941
|
mapper: optionsFieldMapper,
|
|
1942
|
+
scope: 'single-select',
|
|
1925
1943
|
},
|
|
1926
1944
|
{
|
|
1927
1945
|
name: BsField.MultiCheckbox,
|
|
1928
1946
|
loadComponent: () => Promise.resolve().then(function () { return bsMultiCheckbox_component; }),
|
|
1929
1947
|
mapper: optionsFieldMapper,
|
|
1948
|
+
scope: 'multi-select',
|
|
1930
1949
|
},
|
|
1931
1950
|
{
|
|
1932
1951
|
name: BsField.Datepicker,
|
|
1933
1952
|
loadComponent: () => Promise.resolve().then(function () { return bsDatepicker_component; }),
|
|
1934
1953
|
mapper: datepickerFieldMapper,
|
|
1954
|
+
scope: 'date',
|
|
1935
1955
|
},
|
|
1936
1956
|
{
|
|
1937
1957
|
name: BsField.Slider,
|
|
1938
1958
|
loadComponent: () => Promise.resolve().then(function () { return bsSlider_component; }),
|
|
1939
1959
|
mapper: valueFieldMapper,
|
|
1960
|
+
scope: 'numeric',
|
|
1940
1961
|
},
|
|
1941
1962
|
{
|
|
1942
1963
|
name: BsField.Toggle,
|
|
1943
1964
|
loadComponent: () => Promise.resolve().then(function () { return bsToggle_component; }),
|
|
1944
1965
|
mapper: checkboxFieldMapper,
|
|
1966
|
+
scope: 'boolean',
|
|
1945
1967
|
},
|
|
1946
1968
|
];
|
|
1947
1969
|
|
|
@@ -1951,54 +1973,19 @@ const BOOTSTRAP_FIELD_TYPES = [
|
|
|
1951
1973
|
* all Bootstrap field types provided by this library.
|
|
1952
1974
|
*/
|
|
1953
1975
|
|
|
1954
|
-
/**
|
|
1955
|
-
* Provides Bootstrap field types for the dynamic form system.
|
|
1956
|
-
* Use with provideDynamicForm(...withBootstrapFields())
|
|
1957
|
-
*
|
|
1958
|
-
* @param config - Optional global configuration for Bootstrap form fields
|
|
1959
|
-
*
|
|
1960
|
-
* @example
|
|
1961
|
-
* ```typescript
|
|
1962
|
-
* // Application-level setup
|
|
1963
|
-
* import { ApplicationConfig } from '@angular/core';
|
|
1964
|
-
* import { provideDynamicForm } from '@ng-forge/dynamic-form';
|
|
1965
|
-
* import { withBootstrapFields } from '@ng-forge/dynamic-form-bootstrap';
|
|
1966
|
-
*
|
|
1967
|
-
* export const appConfig: ApplicationConfig = {
|
|
1968
|
-
* providers: [
|
|
1969
|
-
* provideDynamicForm(...withBootstrapFields())
|
|
1970
|
-
* ]
|
|
1971
|
-
* };
|
|
1972
|
-
* ```
|
|
1973
|
-
*
|
|
1974
|
-
* @example
|
|
1975
|
-
* ```typescript
|
|
1976
|
-
* // With global configuration
|
|
1977
|
-
* export const appConfig: ApplicationConfig = {
|
|
1978
|
-
* providers: [
|
|
1979
|
-
* provideDynamicForm(
|
|
1980
|
-
* ...withBootstrapFields({
|
|
1981
|
-
* floatingLabel: true,
|
|
1982
|
-
* size: 'lg'
|
|
1983
|
-
* })
|
|
1984
|
-
* )
|
|
1985
|
-
* ]
|
|
1986
|
-
* };
|
|
1987
|
-
* ```
|
|
1988
|
-
*
|
|
1989
|
-
* @returns Array of field type definitions for Bootstrap components
|
|
1990
|
-
*/
|
|
1991
1976
|
function withBootstrapFields(config) {
|
|
1992
|
-
|
|
1993
|
-
|
|
1994
|
-
fields.__configProviders = [
|
|
1995
|
-
{
|
|
1996
|
-
provide: BOOTSTRAP_CONFIG,
|
|
1997
|
-
useValue: config,
|
|
1998
|
-
},
|
|
1999
|
-
];
|
|
1977
|
+
if (!config) {
|
|
1978
|
+
return BOOTSTRAP_FIELD_TYPES;
|
|
2000
1979
|
}
|
|
2001
|
-
|
|
1980
|
+
const fieldsWithConfig = [
|
|
1981
|
+
...BOOTSTRAP_FIELD_TYPES,
|
|
1982
|
+
{
|
|
1983
|
+
ɵkind: 'bootstrap-config',
|
|
1984
|
+
ɵproviders: [{ provide: BOOTSTRAP_CONFIG, useValue: config }],
|
|
1985
|
+
},
|
|
1986
|
+
];
|
|
1987
|
+
// Safe: this preserves all bootstrap field definitions and appends exactly one config feature.
|
|
1988
|
+
return fieldsWithConfig;
|
|
2002
1989
|
}
|
|
2003
1990
|
|
|
2004
1991
|
// Field components
|