@ng-forge/dynamic-forms-bootstrap 0.1.0 → 0.1.2
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.
|
@@ -8,20 +8,20 @@ import { explicitEffect } from 'ngxtension/explicit-effect';
|
|
|
8
8
|
class BsButtonFieldComponent {
|
|
9
9
|
eventBus = inject(EventBus);
|
|
10
10
|
arrayContext = inject(ARRAY_CONTEXT, { optional: true });
|
|
11
|
-
key = input.required(
|
|
12
|
-
label = input.required(
|
|
13
|
-
disabled = input(false,
|
|
14
|
-
hidden = input(false,
|
|
15
|
-
tabIndex = input(
|
|
16
|
-
className = input('',
|
|
11
|
+
key = input.required(...(ngDevMode ? [{ debugName: "key" }] : []));
|
|
12
|
+
label = input.required(...(ngDevMode ? [{ debugName: "label" }] : []));
|
|
13
|
+
disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
|
|
14
|
+
hidden = input(false, ...(ngDevMode ? [{ debugName: "hidden" }] : []));
|
|
15
|
+
tabIndex = input(...(ngDevMode ? [undefined, { debugName: "tabIndex" }] : []));
|
|
16
|
+
className = input('', ...(ngDevMode ? [{ debugName: "className" }] : []));
|
|
17
17
|
/** Event to dispatch on click. Optional for submit buttons (native form submit handles it). */
|
|
18
|
-
event = input(
|
|
19
|
-
eventArgs = input(
|
|
20
|
-
props = input(
|
|
21
|
-
eventContext = input(
|
|
18
|
+
event = input(...(ngDevMode ? [undefined, { debugName: "event" }] : []));
|
|
19
|
+
eventArgs = input(...(ngDevMode ? [undefined, { debugName: "eventArgs" }] : []));
|
|
20
|
+
props = input(...(ngDevMode ? [undefined, { debugName: "props" }] : []));
|
|
21
|
+
eventContext = input(...(ngDevMode ? [undefined, { debugName: "eventContext" }] : []));
|
|
22
22
|
/** Resolved button type - defaults to 'button' if not specified in props */
|
|
23
|
-
buttonType = computed(() => this.props()?.type ?? 'button',
|
|
24
|
-
buttonTestId = computed(() => `${this.buttonType()}-${this.key()}`,
|
|
23
|
+
buttonType = computed(() => this.props()?.type ?? 'button', ...(ngDevMode ? [{ debugName: "buttonType" }] : []));
|
|
24
|
+
buttonTestId = computed(() => `${this.buttonType()}-${this.key()}`, ...(ngDevMode ? [{ debugName: "buttonTestId" }] : []));
|
|
25
25
|
buttonClasses = computed(() => {
|
|
26
26
|
const p = this.props();
|
|
27
27
|
const variant = p?.variant || 'primary';
|
|
@@ -37,7 +37,7 @@ class BsButtonFieldComponent {
|
|
|
37
37
|
]
|
|
38
38
|
.filter(Boolean)
|
|
39
39
|
.join(' ');
|
|
40
|
-
},
|
|
40
|
+
}, ...(ngDevMode ? [{ debugName: "buttonClasses" }] : []));
|
|
41
41
|
/**
|
|
42
42
|
* Handle button click.
|
|
43
43
|
* - For submit buttons (type="submit"): do nothing, native form submit handles it
|
|
@@ -77,8 +77,8 @@ class BsButtonFieldComponent {
|
|
|
77
77
|
this.eventBus.dispatch(event);
|
|
78
78
|
}
|
|
79
79
|
}
|
|
80
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.
|
|
81
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.
|
|
80
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: BsButtonFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
81
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.5", 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()", "hidden": "hidden()" } }, ngImport: i0, template: `
|
|
82
82
|
<button
|
|
83
83
|
[id]="key()"
|
|
84
84
|
[type]="buttonType()"
|
|
@@ -92,7 +92,7 @@ class BsButtonFieldComponent {
|
|
|
92
92
|
</button>
|
|
93
93
|
`, isInline: true, styles: [":host{--df-bs-field-gap: .5rem;--df-bs-label-font-weight: 500;--df-bs-label-color: inherit;--df-bs-hint-color: var(--bs-secondary-color, #6c757d);--df-bs-hint-font-size: .875rem;--df-bs-error-color: var(--bs-danger, #dc3545);--df-bs-error-font-size: .875rem}.df-bs-field{display:flex;flex-direction:column;gap:var(--df-bs-field-gap);width:100%;margin-bottom:1rem}.df-bs-label{font-weight:var(--df-bs-label-font-weight);color:var(--df-bs-label-color);margin-bottom:0}.df-bs-hint{color:var(--df-bs-hint-color);font-size:var(--df-bs-hint-font-size);margin-top:.25rem}.df-bs-field:has(.df-bs-hint){margin-bottom:.5rem}\n"], dependencies: [{ kind: "pipe", type: DynamicTextPipe, name: "dynamicText" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
94
94
|
}
|
|
95
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.
|
|
95
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: BsButtonFieldComponent, decorators: [{
|
|
96
96
|
type: Component,
|
|
97
97
|
args: [{ selector: 'df-bs-button', imports: [DynamicTextPipe, AsyncPipe], host: {
|
|
98
98
|
'[id]': '`${key()}`',
|
|
@@ -122,19 +122,19 @@ var bsButton_component = /*#__PURE__*/Object.freeze({
|
|
|
122
122
|
// Public API - component
|
|
123
123
|
|
|
124
124
|
class BsCheckboxFieldComponent {
|
|
125
|
-
field = input.required(
|
|
126
|
-
key = input.required(
|
|
127
|
-
label = input(
|
|
128
|
-
placeholder = input(
|
|
129
|
-
className = input('',
|
|
130
|
-
tabIndex = input(
|
|
131
|
-
props = input(
|
|
132
|
-
validationMessages = input(
|
|
133
|
-
defaultValidationMessages = input(
|
|
125
|
+
field = input.required(...(ngDevMode ? [{ debugName: "field" }] : []));
|
|
126
|
+
key = input.required(...(ngDevMode ? [{ debugName: "key" }] : []));
|
|
127
|
+
label = input(...(ngDevMode ? [undefined, { debugName: "label" }] : []));
|
|
128
|
+
placeholder = input(...(ngDevMode ? [undefined, { debugName: "placeholder" }] : []));
|
|
129
|
+
className = input('', ...(ngDevMode ? [{ debugName: "className" }] : []));
|
|
130
|
+
tabIndex = input(...(ngDevMode ? [undefined, { debugName: "tabIndex" }] : []));
|
|
131
|
+
props = input(...(ngDevMode ? [undefined, { debugName: "props" }] : []));
|
|
132
|
+
validationMessages = input(...(ngDevMode ? [undefined, { debugName: "validationMessages" }] : []));
|
|
133
|
+
defaultValidationMessages = input(...(ngDevMode ? [undefined, { debugName: "defaultValidationMessages" }] : []));
|
|
134
134
|
resolvedErrors = createResolvedErrorsSignal(this.field, this.validationMessages, this.defaultValidationMessages);
|
|
135
135
|
showErrors = shouldShowErrors(this.field);
|
|
136
|
-
errorsToDisplay = computed(() => (this.showErrors() ? this.resolvedErrors() : []),
|
|
137
|
-
checkboxInput = viewChild('checkboxInput',
|
|
136
|
+
errorsToDisplay = computed(() => (this.showErrors() ? this.resolvedErrors() : []), ...(ngDevMode ? [{ debugName: "errorsToDisplay" }] : []));
|
|
137
|
+
checkboxInput = viewChild('checkboxInput', ...(ngDevMode ? [{ debugName: "checkboxInput" }] : []));
|
|
138
138
|
constructor() {
|
|
139
139
|
// Handle indeterminate state
|
|
140
140
|
effect(() => {
|
|
@@ -148,15 +148,15 @@ class BsCheckboxFieldComponent {
|
|
|
148
148
|
// ─────────────────────────────────────────────────────────────────────────────
|
|
149
149
|
// Accessibility
|
|
150
150
|
// ─────────────────────────────────────────────────────────────────────────────
|
|
151
|
-
helpTextId = computed(() => `${this.key()}-help`,
|
|
152
|
-
errorId = computed(() => `${this.key()}-error`,
|
|
151
|
+
helpTextId = computed(() => `${this.key()}-help`, ...(ngDevMode ? [{ debugName: "helpTextId" }] : []));
|
|
152
|
+
errorId = computed(() => `${this.key()}-error`, ...(ngDevMode ? [{ debugName: "errorId" }] : []));
|
|
153
153
|
ariaInvalid = computed(() => {
|
|
154
154
|
const fieldState = this.field()();
|
|
155
155
|
return fieldState.invalid() && fieldState.touched();
|
|
156
|
-
},
|
|
156
|
+
}, ...(ngDevMode ? [{ debugName: "ariaInvalid" }] : []));
|
|
157
157
|
ariaRequired = computed(() => {
|
|
158
158
|
return this.field()().required?.() === true ? true : null;
|
|
159
|
-
},
|
|
159
|
+
}, ...(ngDevMode ? [{ debugName: "ariaRequired" }] : []));
|
|
160
160
|
ariaDescribedBy = computed(() => {
|
|
161
161
|
const ids = [];
|
|
162
162
|
if (this.props()?.helpText) {
|
|
@@ -167,9 +167,9 @@ class BsCheckboxFieldComponent {
|
|
|
167
167
|
ids.push(`${this.errorId()}-${i}`);
|
|
168
168
|
});
|
|
169
169
|
return ids.length > 0 ? ids.join(' ') : null;
|
|
170
|
-
},
|
|
171
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.
|
|
172
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.
|
|
170
|
+
}, ...(ngDevMode ? [{ debugName: "ariaDescribedBy" }] : []));
|
|
171
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: BsCheckboxFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
172
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.5", 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 } }, 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: `
|
|
173
173
|
@let f = field();
|
|
174
174
|
@let ariaInvalid = this.ariaInvalid(); @let ariaRequired = this.ariaRequired();
|
|
175
175
|
@let ariaDescribedBy = this.ariaDescribedBy();
|
|
@@ -209,7 +209,7 @@ class BsCheckboxFieldComponent {
|
|
|
209
209
|
}
|
|
210
210
|
`, isInline: true, styles: [":host{--df-bs-field-gap: .5rem;--df-bs-label-font-weight: 500;--df-bs-label-color: inherit;--df-bs-hint-color: var(--bs-secondary-color, #6c757d);--df-bs-hint-font-size: .875rem;--df-bs-error-color: var(--bs-danger, #dc3545);--df-bs-error-font-size: .875rem}.df-bs-field{display:flex;flex-direction:column;gap:var(--df-bs-field-gap);width:100%;margin-bottom:1rem}.df-bs-label{font-weight:var(--df-bs-label-font-weight);color:var(--df-bs-label-color);margin-bottom:0}.df-bs-hint{color:var(--df-bs-hint-color);font-size:var(--df-bs-hint-font-size);margin-top:.25rem}.df-bs-field:has(.df-bs-hint){margin-bottom:.5rem}\n", ":host{display:block}:host([hidden]){display:none!important}\n"], dependencies: [{ kind: "directive", type: Field, selector: "[field]", inputs: ["field"] }, { kind: "pipe", type: DynamicTextPipe, name: "dynamicText" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
211
211
|
}
|
|
212
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.
|
|
212
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: BsCheckboxFieldComponent, decorators: [{
|
|
213
213
|
type: Component,
|
|
214
214
|
args: [{ selector: 'df-bs-checkbox', imports: [Field, DynamicTextPipe, AsyncPipe], template: `
|
|
215
215
|
@let f = field();
|
|
@@ -266,9 +266,9 @@ var bsCheckbox_component = /*#__PURE__*/Object.freeze({
|
|
|
266
266
|
* Directive to set min, max, and step attributes on form inputs
|
|
267
267
|
*/
|
|
268
268
|
class InputConstraintsDirective {
|
|
269
|
-
dfMin = input(
|
|
270
|
-
dfMax = input(
|
|
271
|
-
dfStep = input(
|
|
269
|
+
dfMin = input(...(ngDevMode ? [undefined, { debugName: "dfMin" }] : []));
|
|
270
|
+
dfMax = input(...(ngDevMode ? [undefined, { debugName: "dfMax" }] : []));
|
|
271
|
+
dfStep = input(...(ngDevMode ? [undefined, { debugName: "dfStep" }] : []));
|
|
272
272
|
el = inject(ElementRef);
|
|
273
273
|
minEffect = explicitEffect([this.dfMin], ([minValue]) => {
|
|
274
274
|
const nativeElement = this.el.nativeElement;
|
|
@@ -297,10 +297,10 @@ class InputConstraintsDirective {
|
|
|
297
297
|
nativeElement.removeAttribute('step');
|
|
298
298
|
}
|
|
299
299
|
});
|
|
300
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.
|
|
301
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.0.
|
|
300
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: InputConstraintsDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
301
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.0.5", 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 });
|
|
302
302
|
}
|
|
303
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.
|
|
303
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: InputConstraintsDirective, decorators: [{
|
|
304
304
|
type: Directive,
|
|
305
305
|
args: [{
|
|
306
306
|
selector: '[dfBsInputConstraints]',
|
|
@@ -308,42 +308,42 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImpor
|
|
|
308
308
|
}], propDecorators: { dfMin: [{ type: i0.Input, args: [{ isSignal: true, alias: "dfMin", required: false }] }], dfMax: [{ type: i0.Input, args: [{ isSignal: true, alias: "dfMax", required: false }] }], dfStep: [{ type: i0.Input, args: [{ isSignal: true, alias: "dfStep", required: false }] }] } });
|
|
309
309
|
|
|
310
310
|
class BsDatepickerFieldComponent {
|
|
311
|
-
field = input.required(
|
|
312
|
-
key = input.required(
|
|
313
|
-
label = input(
|
|
314
|
-
placeholder = input(
|
|
315
|
-
className = input('',
|
|
316
|
-
tabIndex = input(
|
|
317
|
-
minDate = input(null,
|
|
318
|
-
maxDate = input(null,
|
|
319
|
-
startAt = input(null,
|
|
320
|
-
props = input(
|
|
321
|
-
validationMessages = input(
|
|
322
|
-
defaultValidationMessages = input(
|
|
311
|
+
field = input.required(...(ngDevMode ? [{ debugName: "field" }] : []));
|
|
312
|
+
key = input.required(...(ngDevMode ? [{ debugName: "key" }] : []));
|
|
313
|
+
label = input(...(ngDevMode ? [undefined, { debugName: "label" }] : []));
|
|
314
|
+
placeholder = input(...(ngDevMode ? [undefined, { debugName: "placeholder" }] : []));
|
|
315
|
+
className = input('', ...(ngDevMode ? [{ debugName: "className" }] : []));
|
|
316
|
+
tabIndex = input(...(ngDevMode ? [undefined, { debugName: "tabIndex" }] : []));
|
|
317
|
+
minDate = input(null, ...(ngDevMode ? [{ debugName: "minDate" }] : []));
|
|
318
|
+
maxDate = input(null, ...(ngDevMode ? [{ debugName: "maxDate" }] : []));
|
|
319
|
+
startAt = input(null, ...(ngDevMode ? [{ debugName: "startAt" }] : []));
|
|
320
|
+
props = input(...(ngDevMode ? [undefined, { debugName: "props" }] : []));
|
|
321
|
+
validationMessages = input(...(ngDevMode ? [undefined, { debugName: "validationMessages" }] : []));
|
|
322
|
+
defaultValidationMessages = input(...(ngDevMode ? [undefined, { debugName: "defaultValidationMessages" }] : []));
|
|
323
323
|
resolvedErrors = createResolvedErrorsSignal(this.field, this.validationMessages, this.defaultValidationMessages);
|
|
324
324
|
showErrors = shouldShowErrors(this.field);
|
|
325
|
-
errorsToDisplay = computed(() => (this.showErrors() ? this.resolvedErrors() : []),
|
|
325
|
+
errorsToDisplay = computed(() => (this.showErrors() ? this.resolvedErrors() : []), ...(ngDevMode ? [{ debugName: "errorsToDisplay" }] : []));
|
|
326
326
|
// Helper methods to convert Date to string for HTML attributes
|
|
327
327
|
minAsString = computed(() => {
|
|
328
328
|
const min = this.minDate();
|
|
329
329
|
return min instanceof Date ? min.toISOString().split('T')[0] : min;
|
|
330
|
-
},
|
|
330
|
+
}, ...(ngDevMode ? [{ debugName: "minAsString" }] : []));
|
|
331
331
|
maxAsString = computed(() => {
|
|
332
332
|
const max = this.maxDate();
|
|
333
333
|
return max instanceof Date ? max.toISOString().split('T')[0] : max;
|
|
334
|
-
},
|
|
334
|
+
}, ...(ngDevMode ? [{ debugName: "maxAsString" }] : []));
|
|
335
335
|
// ─────────────────────────────────────────────────────────────────────────────
|
|
336
336
|
// Accessibility
|
|
337
337
|
// ─────────────────────────────────────────────────────────────────────────────
|
|
338
|
-
helpTextId = computed(() => `${this.key()}-help`,
|
|
339
|
-
errorId = computed(() => `${this.key()}-error`,
|
|
338
|
+
helpTextId = computed(() => `${this.key()}-help`, ...(ngDevMode ? [{ debugName: "helpTextId" }] : []));
|
|
339
|
+
errorId = computed(() => `${this.key()}-error`, ...(ngDevMode ? [{ debugName: "errorId" }] : []));
|
|
340
340
|
ariaInvalid = computed(() => {
|
|
341
341
|
const fieldState = this.field()();
|
|
342
342
|
return fieldState.invalid() && fieldState.touched();
|
|
343
|
-
},
|
|
343
|
+
}, ...(ngDevMode ? [{ debugName: "ariaInvalid" }] : []));
|
|
344
344
|
ariaRequired = computed(() => {
|
|
345
345
|
return this.field()().required?.() === true ? true : null;
|
|
346
|
-
},
|
|
346
|
+
}, ...(ngDevMode ? [{ debugName: "ariaRequired" }] : []));
|
|
347
347
|
ariaDescribedBy = computed(() => {
|
|
348
348
|
const ids = [];
|
|
349
349
|
if (this.props()?.helpText) {
|
|
@@ -354,9 +354,9 @@ class BsDatepickerFieldComponent {
|
|
|
354
354
|
ids.push(`${this.errorId()}-${i}`);
|
|
355
355
|
});
|
|
356
356
|
return ids.length > 0 ? ids.join(' ') : null;
|
|
357
|
-
},
|
|
358
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.
|
|
359
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.
|
|
357
|
+
}, ...(ngDevMode ? [{ debugName: "ariaDescribedBy" }] : []));
|
|
358
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: BsDatepickerFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
359
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.5", 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 } }, host: { properties: { "id": "`${key()}`", "attr.data-testid": "key()", "class": "className()", "attr.hidden": "field()().hidden() || null" } }, ngImport: i0, template: `
|
|
360
360
|
@let f = field(); @let p = props(); @let ariaInvalid = this.ariaInvalid(); @let ariaRequired = this.ariaRequired();
|
|
361
361
|
@let ariaDescribedBy = this.ariaDescribedBy();
|
|
362
362
|
@if (p?.floatingLabel) {
|
|
@@ -435,7 +435,7 @@ class BsDatepickerFieldComponent {
|
|
|
435
435
|
}
|
|
436
436
|
`, isInline: true, styles: [":host{--df-bs-field-gap: .5rem;--df-bs-label-font-weight: 500;--df-bs-label-color: inherit;--df-bs-hint-color: var(--bs-secondary-color, #6c757d);--df-bs-hint-font-size: .875rem;--df-bs-error-color: var(--bs-danger, #dc3545);--df-bs-error-font-size: .875rem}.df-bs-field{display:flex;flex-direction:column;gap:var(--df-bs-field-gap);width:100%;margin-bottom:1rem}.df-bs-label{font-weight:var(--df-bs-label-font-weight);color:var(--df-bs-label-color);margin-bottom:0}.df-bs-hint{color:var(--df-bs-hint-color);font-size:var(--df-bs-hint-font-size);margin-top:.25rem}.df-bs-field:has(.df-bs-hint){margin-bottom:.5rem}\n", ":host([hidden]){display:none!important}\n"], dependencies: [{ kind: "directive", type: Field, selector: "[field]", inputs: ["field"] }, { 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 });
|
|
437
437
|
}
|
|
438
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.
|
|
438
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: BsDatepickerFieldComponent, decorators: [{
|
|
439
439
|
type: Component,
|
|
440
440
|
args: [{ selector: 'df-bs-datepicker', imports: [Field, DynamicTextPipe, AsyncPipe, InputConstraintsDirective], template: `
|
|
441
441
|
@let f = field(); @let p = props(); @let ariaInvalid = this.ariaInvalid(); @let ariaRequired = this.ariaRequired();
|
|
@@ -552,36 +552,36 @@ const BOOTSTRAP_CONFIG = new InjectionToken('BOOTSTRAP_CONFIG');
|
|
|
552
552
|
|
|
553
553
|
class BsInputFieldComponent {
|
|
554
554
|
bootstrapConfig = inject(BOOTSTRAP_CONFIG, { optional: true });
|
|
555
|
-
field = input.required(
|
|
556
|
-
key = input.required(
|
|
557
|
-
label = input(
|
|
558
|
-
placeholder = input(
|
|
559
|
-
className = input('',
|
|
560
|
-
tabIndex = input(
|
|
561
|
-
props = input(
|
|
562
|
-
validationMessages = input(
|
|
563
|
-
defaultValidationMessages = input(
|
|
564
|
-
effectiveSize = computed(() => this.props()?.size ?? this.bootstrapConfig?.size,
|
|
565
|
-
effectiveFloatingLabel = computed(() => this.props()?.floatingLabel ?? this.bootstrapConfig?.floatingLabel ?? false,
|
|
555
|
+
field = input.required(...(ngDevMode ? [{ debugName: "field" }] : []));
|
|
556
|
+
key = input.required(...(ngDevMode ? [{ debugName: "key" }] : []));
|
|
557
|
+
label = input(...(ngDevMode ? [undefined, { debugName: "label" }] : []));
|
|
558
|
+
placeholder = input(...(ngDevMode ? [undefined, { debugName: "placeholder" }] : []));
|
|
559
|
+
className = input('', ...(ngDevMode ? [{ debugName: "className" }] : []));
|
|
560
|
+
tabIndex = input(...(ngDevMode ? [undefined, { debugName: "tabIndex" }] : []));
|
|
561
|
+
props = input(...(ngDevMode ? [undefined, { debugName: "props" }] : []));
|
|
562
|
+
validationMessages = input(...(ngDevMode ? [undefined, { debugName: "validationMessages" }] : []));
|
|
563
|
+
defaultValidationMessages = input(...(ngDevMode ? [undefined, { debugName: "defaultValidationMessages" }] : []));
|
|
564
|
+
effectiveSize = computed(() => this.props()?.size ?? this.bootstrapConfig?.size, ...(ngDevMode ? [{ debugName: "effectiveSize" }] : []));
|
|
565
|
+
effectiveFloatingLabel = computed(() => this.props()?.floatingLabel ?? this.bootstrapConfig?.floatingLabel ?? false, ...(ngDevMode ? [{ debugName: "effectiveFloatingLabel" }] : []));
|
|
566
566
|
resolvedErrors = createResolvedErrorsSignal(this.field, this.validationMessages, this.defaultValidationMessages);
|
|
567
567
|
showErrors = shouldShowErrors(this.field);
|
|
568
|
-
errorsToDisplay = computed(() => (this.showErrors() ? this.resolvedErrors() : []),
|
|
568
|
+
errorsToDisplay = computed(() => (this.showErrors() ? this.resolvedErrors() : []), ...(ngDevMode ? [{ debugName: "errorsToDisplay" }] : []));
|
|
569
569
|
// ─────────────────────────────────────────────────────────────────────────────
|
|
570
570
|
// Accessibility
|
|
571
571
|
// ─────────────────────────────────────────────────────────────────────────────
|
|
572
572
|
/** Unique ID for the help text element, used for aria-describedby */
|
|
573
|
-
helpTextId = computed(() => `${this.key()}-help`,
|
|
573
|
+
helpTextId = computed(() => `${this.key()}-help`, ...(ngDevMode ? [{ debugName: "helpTextId" }] : []));
|
|
574
574
|
/** Base ID for error elements, used for aria-describedby */
|
|
575
|
-
errorId = computed(() => `${this.key()}-error`,
|
|
575
|
+
errorId = computed(() => `${this.key()}-error`, ...(ngDevMode ? [{ debugName: "errorId" }] : []));
|
|
576
576
|
/** aria-invalid: true when field is invalid AND touched, false otherwise */
|
|
577
577
|
ariaInvalid = computed(() => {
|
|
578
578
|
const fieldState = this.field()();
|
|
579
579
|
return fieldState.invalid() && fieldState.touched();
|
|
580
|
-
},
|
|
580
|
+
}, ...(ngDevMode ? [{ debugName: "ariaInvalid" }] : []));
|
|
581
581
|
/** aria-required: true if field is required, null otherwise (to remove attribute) */
|
|
582
582
|
ariaRequired = computed(() => {
|
|
583
583
|
return this.field()().required?.() === true ? true : null;
|
|
584
|
-
},
|
|
584
|
+
}, ...(ngDevMode ? [{ debugName: "ariaRequired" }] : []));
|
|
585
585
|
/** aria-describedby: links to help text and error messages for screen readers */
|
|
586
586
|
ariaDescribedBy = computed(() => {
|
|
587
587
|
const ids = [];
|
|
@@ -593,9 +593,9 @@ class BsInputFieldComponent {
|
|
|
593
593
|
ids.push(`${this.errorId()}-${i}`);
|
|
594
594
|
});
|
|
595
595
|
return ids.length > 0 ? ids.join(' ') : null;
|
|
596
|
-
},
|
|
597
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.
|
|
598
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.
|
|
596
|
+
}, ...(ngDevMode ? [{ debugName: "ariaDescribedBy" }] : []));
|
|
597
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: BsInputFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
598
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.5", 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 } }, host: { properties: { "id": "`${key()}`", "attr.data-testid": "key()", "class": "className()", "attr.hidden": "field()().hidden() || null" } }, ngImport: i0, template: `
|
|
599
599
|
@let f = field(); @let p = props(); @let effectiveSize = this.effectiveSize();
|
|
600
600
|
@let effectiveFloatingLabel = this.effectiveFloatingLabel();
|
|
601
601
|
@let ariaInvalid = this.ariaInvalid(); @let ariaRequired = this.ariaRequired();
|
|
@@ -858,7 +858,7 @@ class BsInputFieldComponent {
|
|
|
858
858
|
}
|
|
859
859
|
`, isInline: true, styles: [":host{--df-bs-field-gap: .5rem;--df-bs-label-font-weight: 500;--df-bs-label-color: inherit;--df-bs-hint-color: var(--bs-secondary-color, #6c757d);--df-bs-hint-font-size: .875rem;--df-bs-error-color: var(--bs-danger, #dc3545);--df-bs-error-font-size: .875rem}.df-bs-field{display:flex;flex-direction:column;gap:var(--df-bs-field-gap);width:100%;margin-bottom:1rem}.df-bs-label{font-weight:var(--df-bs-label-font-weight);color:var(--df-bs-label-color);margin-bottom:0}.df-bs-hint{color:var(--df-bs-hint-color);font-size:var(--df-bs-hint-font-size);margin-top:.25rem}.df-bs-field:has(.df-bs-hint){margin-bottom:.5rem}\n", ":host([hidden]){display:none!important}\n"], dependencies: [{ kind: "directive", type: Field, selector: "[field]", inputs: ["field"] }, { kind: "pipe", type: DynamicTextPipe, name: "dynamicText" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
860
860
|
}
|
|
861
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.
|
|
861
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: BsInputFieldComponent, decorators: [{
|
|
862
862
|
type: Component,
|
|
863
863
|
args: [{ selector: 'df-bs-input', imports: [Field, DynamicTextPipe, AsyncPipe], template: `
|
|
864
864
|
@let f = field(); @let p = props(); @let effectiveSize = this.effectiveSize();
|
|
@@ -1163,19 +1163,19 @@ function isEqual(a, b) {
|
|
|
1163
1163
|
}
|
|
1164
1164
|
|
|
1165
1165
|
class BsMultiCheckboxFieldComponent {
|
|
1166
|
-
field = input.required(
|
|
1167
|
-
key = input.required(
|
|
1168
|
-
label = input(
|
|
1169
|
-
placeholder = input(
|
|
1170
|
-
className = input('',
|
|
1171
|
-
tabIndex = input(
|
|
1172
|
-
options = input([],
|
|
1173
|
-
props = input(
|
|
1174
|
-
validationMessages = input(
|
|
1175
|
-
defaultValidationMessages = input(
|
|
1166
|
+
field = input.required(...(ngDevMode ? [{ debugName: "field" }] : []));
|
|
1167
|
+
key = input.required(...(ngDevMode ? [{ debugName: "key" }] : []));
|
|
1168
|
+
label = input(...(ngDevMode ? [undefined, { debugName: "label" }] : []));
|
|
1169
|
+
placeholder = input(...(ngDevMode ? [undefined, { debugName: "placeholder" }] : []));
|
|
1170
|
+
className = input('', ...(ngDevMode ? [{ debugName: "className" }] : []));
|
|
1171
|
+
tabIndex = input(...(ngDevMode ? [undefined, { debugName: "tabIndex" }] : []));
|
|
1172
|
+
options = input([], ...(ngDevMode ? [{ debugName: "options" }] : []));
|
|
1173
|
+
props = input(...(ngDevMode ? [undefined, { debugName: "props" }] : []));
|
|
1174
|
+
validationMessages = input(...(ngDevMode ? [undefined, { debugName: "validationMessages" }] : []));
|
|
1175
|
+
defaultValidationMessages = input(...(ngDevMode ? [undefined, { debugName: "defaultValidationMessages" }] : []));
|
|
1176
1176
|
resolvedErrors = createResolvedErrorsSignal(this.field, this.validationMessages, this.defaultValidationMessages);
|
|
1177
1177
|
showErrors = shouldShowErrors(this.field);
|
|
1178
|
-
errorsToDisplay = computed(() => (this.showErrors() ? this.resolvedErrors() : []),
|
|
1178
|
+
errorsToDisplay = computed(() => (this.showErrors() ? this.resolvedErrors() : []), ...(ngDevMode ? [{ debugName: "errorsToDisplay" }] : []));
|
|
1179
1179
|
valueViewModel = linkedSignal(() => {
|
|
1180
1180
|
const currentValues = this.field()().value();
|
|
1181
1181
|
return this.options().filter((option) => currentValues.includes(option.value));
|
|
@@ -1212,15 +1212,15 @@ class BsMultiCheckboxFieldComponent {
|
|
|
1212
1212
|
// ─────────────────────────────────────────────────────────────────────────────
|
|
1213
1213
|
// Accessibility
|
|
1214
1214
|
// ─────────────────────────────────────────────────────────────────────────────
|
|
1215
|
-
helpTextId = computed(() => `${this.key()}-help`,
|
|
1216
|
-
errorId = computed(() => `${this.key()}-error`,
|
|
1215
|
+
helpTextId = computed(() => `${this.key()}-help`, ...(ngDevMode ? [{ debugName: "helpTextId" }] : []));
|
|
1216
|
+
errorId = computed(() => `${this.key()}-error`, ...(ngDevMode ? [{ debugName: "errorId" }] : []));
|
|
1217
1217
|
ariaInvalid = computed(() => {
|
|
1218
1218
|
const fieldState = this.field()();
|
|
1219
1219
|
return fieldState.invalid() && fieldState.touched();
|
|
1220
|
-
},
|
|
1220
|
+
}, ...(ngDevMode ? [{ debugName: "ariaInvalid" }] : []));
|
|
1221
1221
|
ariaRequired = computed(() => {
|
|
1222
1222
|
return this.field()().required?.() === true ? true : null;
|
|
1223
|
-
},
|
|
1223
|
+
}, ...(ngDevMode ? [{ debugName: "ariaRequired" }] : []));
|
|
1224
1224
|
ariaDescribedBy = computed(() => {
|
|
1225
1225
|
const ids = [];
|
|
1226
1226
|
if (this.props()?.helpText) {
|
|
@@ -1231,9 +1231,9 @@ class BsMultiCheckboxFieldComponent {
|
|
|
1231
1231
|
ids.push(`${this.errorId()}-${i}`);
|
|
1232
1232
|
});
|
|
1233
1233
|
return ids.length > 0 ? ids.join(' ') : null;
|
|
1234
|
-
},
|
|
1235
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.
|
|
1236
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.
|
|
1234
|
+
}, ...(ngDevMode ? [{ debugName: "ariaDescribedBy" }] : []));
|
|
1235
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: BsMultiCheckboxFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1236
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.5", 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 } }, host: { properties: { "class": "className() || \"\"", "id": "`${key()}`", "attr.data-testid": "key()", "attr.hidden": "field()().hidden() || null" } }, ngImport: i0, template: `
|
|
1237
1237
|
@let f = field();
|
|
1238
1238
|
@let ariaInvalid = this.ariaInvalid(); @let ariaRequired = this.ariaRequired();
|
|
1239
1239
|
@let ariaDescribedBy = this.ariaDescribedBy();
|
|
@@ -1279,7 +1279,7 @@ class BsMultiCheckboxFieldComponent {
|
|
|
1279
1279
|
}
|
|
1280
1280
|
`, isInline: true, styles: [":host{--df-bs-field-gap: .5rem;--df-bs-label-font-weight: 500;--df-bs-label-color: inherit;--df-bs-hint-color: var(--bs-secondary-color, #6c757d);--df-bs-hint-font-size: .875rem;--df-bs-error-color: var(--bs-danger, #dc3545);--df-bs-error-font-size: .875rem}.df-bs-field{display:flex;flex-direction:column;gap:var(--df-bs-field-gap);width:100%;margin-bottom:1rem}.df-bs-label{font-weight:var(--df-bs-label-font-weight);color:var(--df-bs-label-color);margin-bottom:0}.df-bs-hint{color:var(--df-bs-hint-color);font-size:var(--df-bs-hint-font-size);margin-top:.25rem}.df-bs-field:has(.df-bs-hint){margin-bottom:.5rem}\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 });
|
|
1281
1281
|
}
|
|
1282
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.
|
|
1282
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: BsMultiCheckboxFieldComponent, decorators: [{
|
|
1283
1283
|
type: Component,
|
|
1284
1284
|
args: [{ selector: 'df-bs-multi-checkbox', imports: [DynamicTextPipe, AsyncPipe], template: `
|
|
1285
1285
|
@let f = field();
|
|
@@ -1340,17 +1340,17 @@ var bsMultiCheckbox_component = /*#__PURE__*/Object.freeze({
|
|
|
1340
1340
|
|
|
1341
1341
|
class BsRadioGroupComponent {
|
|
1342
1342
|
// Required by FormValueControl
|
|
1343
|
-
value = model.required(
|
|
1343
|
+
value = model.required(...(ngDevMode ? [{ debugName: "value" }] : []));
|
|
1344
1344
|
// Optional FormValueControl properties - Field directive will bind these
|
|
1345
|
-
disabled = input(false,
|
|
1346
|
-
readonly = input(false,
|
|
1347
|
-
name = input('',
|
|
1345
|
+
disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
|
|
1346
|
+
readonly = input(false, ...(ngDevMode ? [{ debugName: "readonly" }] : []));
|
|
1347
|
+
name = input('', ...(ngDevMode ? [{ debugName: "name" }] : []));
|
|
1348
1348
|
// Component-specific inputs
|
|
1349
|
-
label = input(
|
|
1350
|
-
options = input.required(
|
|
1351
|
-
properties = input(
|
|
1349
|
+
label = input(...(ngDevMode ? [undefined, { debugName: "label" }] : []));
|
|
1350
|
+
options = input.required(...(ngDevMode ? [{ debugName: "options" }] : []));
|
|
1351
|
+
properties = input(...(ngDevMode ? [undefined, { debugName: "properties" }] : []));
|
|
1352
1352
|
// Accessibility - this will be provided by parent component through input
|
|
1353
|
-
ariaDescribedBy = input(null,
|
|
1353
|
+
ariaDescribedBy = input(null, ...(ngDevMode ? [{ debugName: "ariaDescribedBy" }] : []));
|
|
1354
1354
|
/**
|
|
1355
1355
|
* Handle radio button change event
|
|
1356
1356
|
*/
|
|
@@ -1359,8 +1359,8 @@ class BsRadioGroupComponent {
|
|
|
1359
1359
|
this.value.set(newValue);
|
|
1360
1360
|
}
|
|
1361
1361
|
}
|
|
1362
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.
|
|
1363
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.
|
|
1362
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: BsRadioGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1363
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.5", type: BsRadioGroupComponent, isStandalone: true, selector: "df-bs-radio-group", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, 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 }, ariaDescribedBy: { classPropertyName: "ariaDescribedBy", publicName: "ariaDescribedBy", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, ngImport: i0, template: `
|
|
1364
1364
|
@let props = properties();
|
|
1365
1365
|
@let ariaDescribedBy = this.ariaDescribedBy();
|
|
1366
1366
|
@if (props?.buttonGroup) {
|
|
@@ -1410,7 +1410,7 @@ class BsRadioGroupComponent {
|
|
|
1410
1410
|
}
|
|
1411
1411
|
`, isInline: true, styles: [":host{display:block}\n"], dependencies: [{ kind: "pipe", type: DynamicTextPipe, name: "dynamicText" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1412
1412
|
}
|
|
1413
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.
|
|
1413
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: BsRadioGroupComponent, decorators: [{
|
|
1414
1414
|
type: Component,
|
|
1415
1415
|
args: [{ selector: 'df-bs-radio-group', imports: [DynamicTextPipe, AsyncPipe], template: `
|
|
1416
1416
|
@let props = properties();
|
|
@@ -1464,31 +1464,31 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImpor
|
|
|
1464
1464
|
}], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }, { type: i0.Output, args: ["valueChange"] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: true }] }], properties: [{ type: i0.Input, args: [{ isSignal: true, alias: "properties", required: false }] }], ariaDescribedBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaDescribedBy", required: false }] }] } });
|
|
1465
1465
|
|
|
1466
1466
|
class BsRadioFieldComponent {
|
|
1467
|
-
field = input.required(
|
|
1468
|
-
key = input.required(
|
|
1469
|
-
label = input(
|
|
1470
|
-
placeholder = input(
|
|
1471
|
-
className = input('',
|
|
1472
|
-
tabIndex = input(
|
|
1473
|
-
options = input([],
|
|
1474
|
-
props = input(
|
|
1475
|
-
validationMessages = input(
|
|
1476
|
-
defaultValidationMessages = input(
|
|
1467
|
+
field = input.required(...(ngDevMode ? [{ debugName: "field" }] : []));
|
|
1468
|
+
key = input.required(...(ngDevMode ? [{ debugName: "key" }] : []));
|
|
1469
|
+
label = input(...(ngDevMode ? [undefined, { debugName: "label" }] : []));
|
|
1470
|
+
placeholder = input(...(ngDevMode ? [undefined, { debugName: "placeholder" }] : []));
|
|
1471
|
+
className = input('', ...(ngDevMode ? [{ debugName: "className" }] : []));
|
|
1472
|
+
tabIndex = input(...(ngDevMode ? [undefined, { debugName: "tabIndex" }] : []));
|
|
1473
|
+
options = input([], ...(ngDevMode ? [{ debugName: "options" }] : []));
|
|
1474
|
+
props = input(...(ngDevMode ? [undefined, { debugName: "props" }] : []));
|
|
1475
|
+
validationMessages = input(...(ngDevMode ? [undefined, { debugName: "validationMessages" }] : []));
|
|
1476
|
+
defaultValidationMessages = input(...(ngDevMode ? [undefined, { debugName: "defaultValidationMessages" }] : []));
|
|
1477
1477
|
resolvedErrors = createResolvedErrorsSignal(this.field, this.validationMessages, this.defaultValidationMessages);
|
|
1478
1478
|
showErrors = shouldShowErrors(this.field);
|
|
1479
|
-
errorsToDisplay = computed(() => (this.showErrors() ? this.resolvedErrors() : []),
|
|
1479
|
+
errorsToDisplay = computed(() => (this.showErrors() ? this.resolvedErrors() : []), ...(ngDevMode ? [{ debugName: "errorsToDisplay" }] : []));
|
|
1480
1480
|
// ─────────────────────────────────────────────────────────────────────────────
|
|
1481
1481
|
// Accessibility
|
|
1482
1482
|
// ─────────────────────────────────────────────────────────────────────────────
|
|
1483
|
-
helpTextId = computed(() => `${this.key()}-help`,
|
|
1484
|
-
errorId = computed(() => `${this.key()}-error`,
|
|
1483
|
+
helpTextId = computed(() => `${this.key()}-help`, ...(ngDevMode ? [{ debugName: "helpTextId" }] : []));
|
|
1484
|
+
errorId = computed(() => `${this.key()}-error`, ...(ngDevMode ? [{ debugName: "errorId" }] : []));
|
|
1485
1485
|
ariaInvalid = computed(() => {
|
|
1486
1486
|
const fieldState = this.field()();
|
|
1487
1487
|
return fieldState.invalid() && fieldState.touched();
|
|
1488
|
-
},
|
|
1488
|
+
}, ...(ngDevMode ? [{ debugName: "ariaInvalid" }] : []));
|
|
1489
1489
|
ariaRequired = computed(() => {
|
|
1490
1490
|
return this.field()().required?.() === true ? true : null;
|
|
1491
|
-
},
|
|
1491
|
+
}, ...(ngDevMode ? [{ debugName: "ariaRequired" }] : []));
|
|
1492
1492
|
ariaDescribedBy = computed(() => {
|
|
1493
1493
|
const ids = [];
|
|
1494
1494
|
if (this.props()?.helpText) {
|
|
@@ -1499,11 +1499,10 @@ class BsRadioFieldComponent {
|
|
|
1499
1499
|
ids.push(`${this.errorId()}-${i}`);
|
|
1500
1500
|
});
|
|
1501
1501
|
return ids.length > 0 ? ids.join(' ') : null;
|
|
1502
|
-
},
|
|
1503
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.
|
|
1504
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.
|
|
1502
|
+
}, ...(ngDevMode ? [{ debugName: "ariaDescribedBy" }] : []));
|
|
1503
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: BsRadioFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1504
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.5", 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 }, 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: `
|
|
1505
1505
|
@let f = field();
|
|
1506
|
-
@let ariaInvalid = this.ariaInvalid(); @let ariaRequired = this.ariaRequired();
|
|
1507
1506
|
@let ariaDescribedBy = this.ariaDescribedBy();
|
|
1508
1507
|
|
|
1509
1508
|
<div class="mb-3">
|
|
@@ -1528,11 +1527,10 @@ class BsRadioFieldComponent {
|
|
|
1528
1527
|
</div>
|
|
1529
1528
|
`, isInline: true, styles: [":host{--df-bs-field-gap: .5rem;--df-bs-label-font-weight: 500;--df-bs-label-color: inherit;--df-bs-hint-color: var(--bs-secondary-color, #6c757d);--df-bs-hint-font-size: .875rem;--df-bs-error-color: var(--bs-danger, #dc3545);--df-bs-error-font-size: .875rem}.df-bs-field{display:flex;flex-direction:column;gap:var(--df-bs-field-gap);width:100%;margin-bottom:1rem}.df-bs-label{font-weight:var(--df-bs-label-font-weight);color:var(--df-bs-label-color);margin-bottom:0}.df-bs-hint{color:var(--df-bs-hint-color);font-size:var(--df-bs-hint-font-size);margin-top:.25rem}.df-bs-field:has(.df-bs-hint){margin-bottom:.5rem}\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", "ariaDescribedBy"], outputs: ["valueChange"] }, { kind: "directive", type: Field, selector: "[field]", inputs: ["field"] }, { kind: "pipe", type: DynamicTextPipe, name: "dynamicText" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1530
1529
|
}
|
|
1531
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.
|
|
1530
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: BsRadioFieldComponent, decorators: [{
|
|
1532
1531
|
type: Component,
|
|
1533
1532
|
args: [{ selector: 'df-bs-radio', imports: [BsRadioGroupComponent, Field, DynamicTextPipe, AsyncPipe], template: `
|
|
1534
1533
|
@let f = field();
|
|
1535
|
-
@let ariaInvalid = this.ariaInvalid(); @let ariaRequired = this.ariaRequired();
|
|
1536
1534
|
@let ariaDescribedBy = this.ariaDescribedBy();
|
|
1537
1535
|
|
|
1538
1536
|
<div class="mb-3">
|
|
@@ -1569,19 +1567,19 @@ var bsRadio_component = /*#__PURE__*/Object.freeze({
|
|
|
1569
1567
|
});
|
|
1570
1568
|
|
|
1571
1569
|
class BsSelectFieldComponent {
|
|
1572
|
-
field = input.required(
|
|
1573
|
-
key = input.required(
|
|
1574
|
-
label = input(
|
|
1575
|
-
placeholder = input(
|
|
1576
|
-
className = input('',
|
|
1577
|
-
tabIndex = input(
|
|
1578
|
-
options = input([],
|
|
1579
|
-
props = input(
|
|
1580
|
-
validationMessages = input(
|
|
1581
|
-
defaultValidationMessages = input(
|
|
1570
|
+
field = input.required(...(ngDevMode ? [{ debugName: "field" }] : []));
|
|
1571
|
+
key = input.required(...(ngDevMode ? [{ debugName: "key" }] : []));
|
|
1572
|
+
label = input(...(ngDevMode ? [undefined, { debugName: "label" }] : []));
|
|
1573
|
+
placeholder = input(...(ngDevMode ? [undefined, { debugName: "placeholder" }] : []));
|
|
1574
|
+
className = input('', ...(ngDevMode ? [{ debugName: "className" }] : []));
|
|
1575
|
+
tabIndex = input(...(ngDevMode ? [undefined, { debugName: "tabIndex" }] : []));
|
|
1576
|
+
options = input([], ...(ngDevMode ? [{ debugName: "options" }] : []));
|
|
1577
|
+
props = input(...(ngDevMode ? [undefined, { debugName: "props" }] : []));
|
|
1578
|
+
validationMessages = input(...(ngDevMode ? [undefined, { debugName: "validationMessages" }] : []));
|
|
1579
|
+
defaultValidationMessages = input(...(ngDevMode ? [undefined, { debugName: "defaultValidationMessages" }] : []));
|
|
1582
1580
|
resolvedErrors = createResolvedErrorsSignal(this.field, this.validationMessages, this.defaultValidationMessages);
|
|
1583
1581
|
showErrors = shouldShowErrors(this.field);
|
|
1584
|
-
errorsToDisplay = computed(() => (this.showErrors() ? this.resolvedErrors() : []),
|
|
1582
|
+
errorsToDisplay = computed(() => (this.showErrors() ? this.resolvedErrors() : []), ...(ngDevMode ? [{ debugName: "errorsToDisplay" }] : []));
|
|
1585
1583
|
defaultCompare = Object.is;
|
|
1586
1584
|
isSelected(optionValue, fieldValue) {
|
|
1587
1585
|
const compareWith = this.props()?.compareWith || this.defaultCompare;
|
|
@@ -1593,15 +1591,15 @@ class BsSelectFieldComponent {
|
|
|
1593
1591
|
// ─────────────────────────────────────────────────────────────────────────────
|
|
1594
1592
|
// Accessibility
|
|
1595
1593
|
// ─────────────────────────────────────────────────────────────────────────────
|
|
1596
|
-
helpTextId = computed(() => `${this.key()}-help`,
|
|
1597
|
-
errorId = computed(() => `${this.key()}-error`,
|
|
1594
|
+
helpTextId = computed(() => `${this.key()}-help`, ...(ngDevMode ? [{ debugName: "helpTextId" }] : []));
|
|
1595
|
+
errorId = computed(() => `${this.key()}-error`, ...(ngDevMode ? [{ debugName: "errorId" }] : []));
|
|
1598
1596
|
ariaInvalid = computed(() => {
|
|
1599
1597
|
const fieldState = this.field()();
|
|
1600
1598
|
return fieldState.invalid() && fieldState.touched();
|
|
1601
|
-
},
|
|
1599
|
+
}, ...(ngDevMode ? [{ debugName: "ariaInvalid" }] : []));
|
|
1602
1600
|
ariaRequired = computed(() => {
|
|
1603
1601
|
return this.field()().required?.() === true ? true : null;
|
|
1604
|
-
},
|
|
1602
|
+
}, ...(ngDevMode ? [{ debugName: "ariaRequired" }] : []));
|
|
1605
1603
|
ariaDescribedBy = computed(() => {
|
|
1606
1604
|
const ids = [];
|
|
1607
1605
|
if (this.props()?.helpText) {
|
|
@@ -1612,9 +1610,9 @@ class BsSelectFieldComponent {
|
|
|
1612
1610
|
ids.push(`${this.errorId()}-${i}`);
|
|
1613
1611
|
});
|
|
1614
1612
|
return ids.length > 0 ? ids.join(' ') : null;
|
|
1615
|
-
},
|
|
1616
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.
|
|
1617
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.
|
|
1613
|
+
}, ...(ngDevMode ? [{ debugName: "ariaDescribedBy" }] : []));
|
|
1614
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: BsSelectFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1615
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.5", 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 } }, host: { properties: { "id": "`${key()}`", "attr.data-testid": "key()", "class": "className()", "attr.hidden": "field()().hidden() || null" } }, ngImport: i0, template: `
|
|
1618
1616
|
@let f = field();
|
|
1619
1617
|
@let ariaInvalid = this.ariaInvalid(); @let ariaRequired = this.ariaRequired();
|
|
1620
1618
|
@let ariaDescribedBy = this.ariaDescribedBy();
|
|
@@ -1655,7 +1653,7 @@ class BsSelectFieldComponent {
|
|
|
1655
1653
|
</div>
|
|
1656
1654
|
`, isInline: true, styles: [":host{--df-bs-field-gap: .5rem;--df-bs-label-font-weight: 500;--df-bs-label-color: inherit;--df-bs-hint-color: var(--bs-secondary-color, #6c757d);--df-bs-hint-font-size: .875rem;--df-bs-error-color: var(--bs-danger, #dc3545);--df-bs-error-font-size: .875rem}.df-bs-field{display:flex;flex-direction:column;gap:var(--df-bs-field-gap);width:100%;margin-bottom:1rem}.df-bs-label{font-weight:var(--df-bs-label-font-weight);color:var(--df-bs-label-color);margin-bottom:0}.df-bs-hint{color:var(--df-bs-hint-color);font-size:var(--df-bs-hint-font-size);margin-top:.25rem}.df-bs-field:has(.df-bs-hint){margin-bottom:.5rem}\n", ":host([hidden]){display:none!important}\n"], dependencies: [{ kind: "directive", type: Field, selector: "[field]", inputs: ["field"] }, { kind: "pipe", type: DynamicTextPipe, name: "dynamicText" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1657
1655
|
}
|
|
1658
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.
|
|
1656
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: BsSelectFieldComponent, decorators: [{
|
|
1659
1657
|
type: Component,
|
|
1660
1658
|
args: [{ selector: 'df-bs-select', imports: [Field, DynamicTextPipe, AsyncPipe], template: `
|
|
1661
1659
|
@let f = field();
|
|
@@ -1710,33 +1708,33 @@ var bsSelect_component = /*#__PURE__*/Object.freeze({
|
|
|
1710
1708
|
});
|
|
1711
1709
|
|
|
1712
1710
|
class BsSliderFieldComponent {
|
|
1713
|
-
field = input.required(
|
|
1714
|
-
key = input.required(
|
|
1715
|
-
label = input(
|
|
1716
|
-
placeholder = input(
|
|
1717
|
-
className = input('',
|
|
1718
|
-
tabIndex = input(
|
|
1719
|
-
min = input(0,
|
|
1720
|
-
max = input(100,
|
|
1721
|
-
step = input(1,
|
|
1722
|
-
props = input(
|
|
1723
|
-
validationMessages = input(
|
|
1724
|
-
defaultValidationMessages = input(
|
|
1711
|
+
field = input.required(...(ngDevMode ? [{ debugName: "field" }] : []));
|
|
1712
|
+
key = input.required(...(ngDevMode ? [{ debugName: "key" }] : []));
|
|
1713
|
+
label = input(...(ngDevMode ? [undefined, { debugName: "label" }] : []));
|
|
1714
|
+
placeholder = input(...(ngDevMode ? [undefined, { debugName: "placeholder" }] : []));
|
|
1715
|
+
className = input('', ...(ngDevMode ? [{ debugName: "className" }] : []));
|
|
1716
|
+
tabIndex = input(...(ngDevMode ? [undefined, { debugName: "tabIndex" }] : []));
|
|
1717
|
+
min = input(0, ...(ngDevMode ? [{ debugName: "min" }] : []));
|
|
1718
|
+
max = input(100, ...(ngDevMode ? [{ debugName: "max" }] : []));
|
|
1719
|
+
step = input(1, ...(ngDevMode ? [{ debugName: "step" }] : []));
|
|
1720
|
+
props = input(...(ngDevMode ? [undefined, { debugName: "props" }] : []));
|
|
1721
|
+
validationMessages = input(...(ngDevMode ? [undefined, { debugName: "validationMessages" }] : []));
|
|
1722
|
+
defaultValidationMessages = input(...(ngDevMode ? [undefined, { debugName: "defaultValidationMessages" }] : []));
|
|
1725
1723
|
resolvedErrors = createResolvedErrorsSignal(this.field, this.validationMessages, this.defaultValidationMessages);
|
|
1726
1724
|
showErrors = shouldShowErrors(this.field);
|
|
1727
|
-
errorsToDisplay = computed(() => (this.showErrors() ? this.resolvedErrors() : []),
|
|
1725
|
+
errorsToDisplay = computed(() => (this.showErrors() ? this.resolvedErrors() : []), ...(ngDevMode ? [{ debugName: "errorsToDisplay" }] : []));
|
|
1728
1726
|
// ─────────────────────────────────────────────────────────────────────────────
|
|
1729
1727
|
// Accessibility
|
|
1730
1728
|
// ─────────────────────────────────────────────────────────────────────────────
|
|
1731
|
-
helpTextId = computed(() => `${this.key()}-help`,
|
|
1732
|
-
errorId = computed(() => `${this.key()}-error`,
|
|
1729
|
+
helpTextId = computed(() => `${this.key()}-help`, ...(ngDevMode ? [{ debugName: "helpTextId" }] : []));
|
|
1730
|
+
errorId = computed(() => `${this.key()}-error`, ...(ngDevMode ? [{ debugName: "errorId" }] : []));
|
|
1733
1731
|
ariaInvalid = computed(() => {
|
|
1734
1732
|
const fieldState = this.field()();
|
|
1735
1733
|
return fieldState.invalid() && fieldState.touched();
|
|
1736
|
-
},
|
|
1734
|
+
}, ...(ngDevMode ? [{ debugName: "ariaInvalid" }] : []));
|
|
1737
1735
|
ariaRequired = computed(() => {
|
|
1738
1736
|
return this.field()().required?.() === true ? true : null;
|
|
1739
|
-
},
|
|
1737
|
+
}, ...(ngDevMode ? [{ debugName: "ariaRequired" }] : []));
|
|
1740
1738
|
ariaDescribedBy = computed(() => {
|
|
1741
1739
|
const ids = [];
|
|
1742
1740
|
if (this.props()?.helpText) {
|
|
@@ -1747,9 +1745,9 @@ class BsSliderFieldComponent {
|
|
|
1747
1745
|
ids.push(`${this.errorId()}-${i}`);
|
|
1748
1746
|
});
|
|
1749
1747
|
return ids.length > 0 ? ids.join(' ') : null;
|
|
1750
|
-
},
|
|
1751
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.
|
|
1752
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.
|
|
1748
|
+
}, ...(ngDevMode ? [{ debugName: "ariaDescribedBy" }] : []));
|
|
1749
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: BsSliderFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1750
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.5", 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 } }, host: { properties: { "class": "className()", "id": "`${key()}`", "attr.data-testid": "key()", "attr.hidden": "field()().hidden() || null" } }, ngImport: i0, template: `
|
|
1753
1751
|
@let f = field();
|
|
1754
1752
|
@let ariaInvalid = this.ariaInvalid(); @let ariaRequired = this.ariaRequired();
|
|
1755
1753
|
@let ariaDescribedBy = this.ariaDescribedBy();
|
|
@@ -1790,7 +1788,7 @@ class BsSliderFieldComponent {
|
|
|
1790
1788
|
</div>
|
|
1791
1789
|
`, isInline: true, styles: [":host{--df-bs-field-gap: .5rem;--df-bs-label-font-weight: 500;--df-bs-label-color: inherit;--df-bs-hint-color: var(--bs-secondary-color, #6c757d);--df-bs-hint-font-size: .875rem;--df-bs-error-color: var(--bs-danger, #dc3545);--df-bs-error-font-size: .875rem}.df-bs-field{display:flex;flex-direction:column;gap:var(--df-bs-field-gap);width:100%;margin-bottom:1rem}.df-bs-label{font-weight:var(--df-bs-label-font-weight);color:var(--df-bs-label-color);margin-bottom:0}.df-bs-hint{color:var(--df-bs-hint-color);font-size:var(--df-bs-hint-font-size);margin-top:.25rem}.df-bs-field:has(.df-bs-hint){margin-bottom:.5rem}\n", ":host{display:block}:host([hidden]){display:none!important}\n"], dependencies: [{ kind: "directive", type: Field, selector: "[field]", inputs: ["field"] }, { 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 });
|
|
1792
1790
|
}
|
|
1793
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.
|
|
1791
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: BsSliderFieldComponent, decorators: [{
|
|
1794
1792
|
type: Component,
|
|
1795
1793
|
args: [{ selector: 'df-bs-slider', imports: [Field, DynamicTextPipe, AsyncPipe, InputConstraintsDirective], template: `
|
|
1796
1794
|
@let f = field();
|
|
@@ -1845,30 +1843,30 @@ var bsSlider_component = /*#__PURE__*/Object.freeze({
|
|
|
1845
1843
|
});
|
|
1846
1844
|
|
|
1847
1845
|
class BsTextareaFieldComponent {
|
|
1848
|
-
field = input.required(
|
|
1849
|
-
key = input.required(
|
|
1850
|
-
label = input(
|
|
1851
|
-
placeholder = input(
|
|
1852
|
-
className = input('',
|
|
1853
|
-
tabIndex = input(
|
|
1854
|
-
props = input(
|
|
1855
|
-
validationMessages = input(
|
|
1856
|
-
defaultValidationMessages = input(
|
|
1846
|
+
field = input.required(...(ngDevMode ? [{ debugName: "field" }] : []));
|
|
1847
|
+
key = input.required(...(ngDevMode ? [{ debugName: "key" }] : []));
|
|
1848
|
+
label = input(...(ngDevMode ? [undefined, { debugName: "label" }] : []));
|
|
1849
|
+
placeholder = input(...(ngDevMode ? [undefined, { debugName: "placeholder" }] : []));
|
|
1850
|
+
className = input('', ...(ngDevMode ? [{ debugName: "className" }] : []));
|
|
1851
|
+
tabIndex = input(...(ngDevMode ? [undefined, { debugName: "tabIndex" }] : []));
|
|
1852
|
+
props = input(...(ngDevMode ? [undefined, { debugName: "props" }] : []));
|
|
1853
|
+
validationMessages = input(...(ngDevMode ? [undefined, { debugName: "validationMessages" }] : []));
|
|
1854
|
+
defaultValidationMessages = input(...(ngDevMode ? [undefined, { debugName: "defaultValidationMessages" }] : []));
|
|
1857
1855
|
resolvedErrors = createResolvedErrorsSignal(this.field, this.validationMessages, this.defaultValidationMessages);
|
|
1858
1856
|
showErrors = shouldShowErrors(this.field);
|
|
1859
|
-
errorsToDisplay = computed(() => (this.showErrors() ? this.resolvedErrors() : []),
|
|
1857
|
+
errorsToDisplay = computed(() => (this.showErrors() ? this.resolvedErrors() : []), ...(ngDevMode ? [{ debugName: "errorsToDisplay" }] : []));
|
|
1860
1858
|
// ─────────────────────────────────────────────────────────────────────────────
|
|
1861
1859
|
// Accessibility
|
|
1862
1860
|
// ─────────────────────────────────────────────────────────────────────────────
|
|
1863
|
-
helpTextId = computed(() => `${this.key()}-help`,
|
|
1864
|
-
errorId = computed(() => `${this.key()}-error`,
|
|
1861
|
+
helpTextId = computed(() => `${this.key()}-help`, ...(ngDevMode ? [{ debugName: "helpTextId" }] : []));
|
|
1862
|
+
errorId = computed(() => `${this.key()}-error`, ...(ngDevMode ? [{ debugName: "errorId" }] : []));
|
|
1865
1863
|
ariaInvalid = computed(() => {
|
|
1866
1864
|
const fieldState = this.field()();
|
|
1867
1865
|
return fieldState.invalid() && fieldState.touched();
|
|
1868
|
-
},
|
|
1866
|
+
}, ...(ngDevMode ? [{ debugName: "ariaInvalid" }] : []));
|
|
1869
1867
|
ariaRequired = computed(() => {
|
|
1870
1868
|
return this.field()().required?.() === true ? true : null;
|
|
1871
|
-
},
|
|
1869
|
+
}, ...(ngDevMode ? [{ debugName: "ariaRequired" }] : []));
|
|
1872
1870
|
ariaDescribedBy = computed(() => {
|
|
1873
1871
|
const ids = [];
|
|
1874
1872
|
if (this.props()?.helpText) {
|
|
@@ -1879,9 +1877,9 @@ class BsTextareaFieldComponent {
|
|
|
1879
1877
|
ids.push(`${this.errorId()}-${i}`);
|
|
1880
1878
|
});
|
|
1881
1879
|
return ids.length > 0 ? ids.join(' ') : null;
|
|
1882
|
-
},
|
|
1883
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.
|
|
1884
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.
|
|
1880
|
+
}, ...(ngDevMode ? [{ debugName: "ariaDescribedBy" }] : []));
|
|
1881
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: BsTextareaFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1882
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.5", 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 } }, host: { properties: { "id": "`${key()}`", "attr.data-testid": "key()", "class": "className()", "attr.hidden": "field()().hidden() || null" } }, ngImport: i0, template: `
|
|
1885
1883
|
@let f = field(); @let p = props(); @let ariaInvalid = this.ariaInvalid(); @let ariaRequired = this.ariaRequired();
|
|
1886
1884
|
@let ariaDescribedBy = this.ariaDescribedBy();
|
|
1887
1885
|
@if (p?.floatingLabel) {
|
|
@@ -1955,7 +1953,7 @@ class BsTextareaFieldComponent {
|
|
|
1955
1953
|
}
|
|
1956
1954
|
`, isInline: true, styles: [":host{--df-bs-field-gap: .5rem;--df-bs-label-font-weight: 500;--df-bs-label-color: inherit;--df-bs-hint-color: var(--bs-secondary-color, #6c757d);--df-bs-hint-font-size: .875rem;--df-bs-error-color: var(--bs-danger, #dc3545);--df-bs-error-font-size: .875rem}.df-bs-field{display:flex;flex-direction:column;gap:var(--df-bs-field-gap);width:100%;margin-bottom:1rem}.df-bs-label{font-weight:var(--df-bs-label-font-weight);color:var(--df-bs-label-color);margin-bottom:0}.df-bs-hint{color:var(--df-bs-hint-color);font-size:var(--df-bs-hint-font-size);margin-top:.25rem}.df-bs-field:has(.df-bs-hint){margin-bottom:.5rem}\n", ":host([hidden]){display:none!important}\n"], dependencies: [{ kind: "directive", type: Field, selector: "[field]", inputs: ["field"] }, { kind: "pipe", type: DynamicTextPipe, name: "dynamicText" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1957
1955
|
}
|
|
1958
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.
|
|
1956
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: BsTextareaFieldComponent, decorators: [{
|
|
1959
1957
|
type: Component,
|
|
1960
1958
|
args: [{ selector: 'df-bs-textarea', imports: [Field, DynamicTextPipe, AsyncPipe], template: `
|
|
1961
1959
|
@let f = field(); @let p = props(); @let ariaInvalid = this.ariaInvalid(); @let ariaRequired = this.ariaRequired();
|
|
@@ -2043,30 +2041,30 @@ var bsTextarea_component = /*#__PURE__*/Object.freeze({
|
|
|
2043
2041
|
});
|
|
2044
2042
|
|
|
2045
2043
|
class BsToggleFieldComponent {
|
|
2046
|
-
field = input.required(
|
|
2047
|
-
key = input.required(
|
|
2048
|
-
label = input(
|
|
2049
|
-
placeholder = input(
|
|
2050
|
-
className = input('',
|
|
2051
|
-
tabIndex = input(
|
|
2052
|
-
props = input(
|
|
2053
|
-
validationMessages = input(
|
|
2054
|
-
defaultValidationMessages = input(
|
|
2044
|
+
field = input.required(...(ngDevMode ? [{ debugName: "field" }] : []));
|
|
2045
|
+
key = input.required(...(ngDevMode ? [{ debugName: "key" }] : []));
|
|
2046
|
+
label = input(...(ngDevMode ? [undefined, { debugName: "label" }] : []));
|
|
2047
|
+
placeholder = input(...(ngDevMode ? [undefined, { debugName: "placeholder" }] : []));
|
|
2048
|
+
className = input('', ...(ngDevMode ? [{ debugName: "className" }] : []));
|
|
2049
|
+
tabIndex = input(...(ngDevMode ? [undefined, { debugName: "tabIndex" }] : []));
|
|
2050
|
+
props = input(...(ngDevMode ? [undefined, { debugName: "props" }] : []));
|
|
2051
|
+
validationMessages = input(...(ngDevMode ? [undefined, { debugName: "validationMessages" }] : []));
|
|
2052
|
+
defaultValidationMessages = input(...(ngDevMode ? [undefined, { debugName: "defaultValidationMessages" }] : []));
|
|
2055
2053
|
resolvedErrors = createResolvedErrorsSignal(this.field, this.validationMessages, this.defaultValidationMessages);
|
|
2056
2054
|
showErrors = shouldShowErrors(this.field);
|
|
2057
|
-
errorsToDisplay = computed(() => (this.showErrors() ? this.resolvedErrors() : []),
|
|
2055
|
+
errorsToDisplay = computed(() => (this.showErrors() ? this.resolvedErrors() : []), ...(ngDevMode ? [{ debugName: "errorsToDisplay" }] : []));
|
|
2058
2056
|
// ─────────────────────────────────────────────────────────────────────────────
|
|
2059
2057
|
// Accessibility
|
|
2060
2058
|
// ─────────────────────────────────────────────────────────────────────────────
|
|
2061
|
-
helpTextId = computed(() => `${this.key()}-help`,
|
|
2062
|
-
errorId = computed(() => `${this.key()}-error`,
|
|
2059
|
+
helpTextId = computed(() => `${this.key()}-help`, ...(ngDevMode ? [{ debugName: "helpTextId" }] : []));
|
|
2060
|
+
errorId = computed(() => `${this.key()}-error`, ...(ngDevMode ? [{ debugName: "errorId" }] : []));
|
|
2063
2061
|
ariaInvalid = computed(() => {
|
|
2064
2062
|
const fieldState = this.field()();
|
|
2065
2063
|
return fieldState.invalid() && fieldState.touched();
|
|
2066
|
-
},
|
|
2064
|
+
}, ...(ngDevMode ? [{ debugName: "ariaInvalid" }] : []));
|
|
2067
2065
|
ariaRequired = computed(() => {
|
|
2068
2066
|
return this.field()().required?.() === true ? true : null;
|
|
2069
|
-
},
|
|
2067
|
+
}, ...(ngDevMode ? [{ debugName: "ariaRequired" }] : []));
|
|
2070
2068
|
ariaDescribedBy = computed(() => {
|
|
2071
2069
|
const ids = [];
|
|
2072
2070
|
if (this.props()?.helpText) {
|
|
@@ -2077,9 +2075,9 @@ class BsToggleFieldComponent {
|
|
|
2077
2075
|
ids.push(`${this.errorId()}-${i}`);
|
|
2078
2076
|
});
|
|
2079
2077
|
return ids.length > 0 ? ids.join(' ') : null;
|
|
2080
|
-
},
|
|
2081
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.
|
|
2082
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.
|
|
2078
|
+
}, ...(ngDevMode ? [{ debugName: "ariaDescribedBy" }] : []));
|
|
2079
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: BsToggleFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2080
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.5", 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 } }, host: { properties: { "class": "className()", "id": "`${key()}`", "attr.data-testid": "key()", "attr.hidden": "field()().hidden() || null" } }, ngImport: i0, template: `
|
|
2083
2081
|
@let f = field();
|
|
2084
2082
|
@let ariaInvalid = this.ariaInvalid(); @let ariaRequired = this.ariaRequired();
|
|
2085
2083
|
@let ariaDescribedBy = this.ariaDescribedBy();
|
|
@@ -2119,7 +2117,7 @@ class BsToggleFieldComponent {
|
|
|
2119
2117
|
}
|
|
2120
2118
|
`, isInline: true, styles: [":host{--df-bs-field-gap: .5rem;--df-bs-label-font-weight: 500;--df-bs-label-color: inherit;--df-bs-hint-color: var(--bs-secondary-color, #6c757d);--df-bs-hint-font-size: .875rem;--df-bs-error-color: var(--bs-danger, #dc3545);--df-bs-error-font-size: .875rem}.df-bs-field{display:flex;flex-direction:column;gap:var(--df-bs-field-gap);width:100%;margin-bottom:1rem}.df-bs-label{font-weight:var(--df-bs-label-font-weight);color:var(--df-bs-label-color);margin-bottom:0}.df-bs-hint{color:var(--df-bs-hint-color);font-size:var(--df-bs-hint-font-size);margin-top:.25rem}.df-bs-field:has(.df-bs-hint){margin-bottom:.5rem}\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: Field, selector: "[field]", inputs: ["field"] }, { kind: "pipe", type: DynamicTextPipe, name: "dynamicText" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
2121
2119
|
}
|
|
2122
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.
|
|
2120
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: BsToggleFieldComponent, decorators: [{
|
|
2123
2121
|
type: Component,
|
|
2124
2122
|
args: [{ selector: 'df-bs-toggle', imports: [Field, DynamicTextPipe, AsyncPipe], template: `
|
|
2125
2123
|
@let f = field();
|