@ng-forge/dynamic-forms-bootstrap 0.1.0 → 0.1.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.
|
@@ -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,9 +1499,9 @@ 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
1506
|
@let ariaInvalid = this.ariaInvalid(); @let ariaRequired = this.ariaRequired();
|
|
1507
1507
|
@let ariaDescribedBy = this.ariaDescribedBy();
|
|
@@ -1528,7 +1528,7 @@ class BsRadioFieldComponent {
|
|
|
1528
1528
|
</div>
|
|
1529
1529
|
`, 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
1530
|
}
|
|
1531
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.
|
|
1531
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: BsRadioFieldComponent, decorators: [{
|
|
1532
1532
|
type: Component,
|
|
1533
1533
|
args: [{ selector: 'df-bs-radio', imports: [BsRadioGroupComponent, Field, DynamicTextPipe, AsyncPipe], template: `
|
|
1534
1534
|
@let f = field();
|
|
@@ -1569,19 +1569,19 @@ var bsRadio_component = /*#__PURE__*/Object.freeze({
|
|
|
1569
1569
|
});
|
|
1570
1570
|
|
|
1571
1571
|
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(
|
|
1572
|
+
field = input.required(...(ngDevMode ? [{ debugName: "field" }] : []));
|
|
1573
|
+
key = input.required(...(ngDevMode ? [{ debugName: "key" }] : []));
|
|
1574
|
+
label = input(...(ngDevMode ? [undefined, { debugName: "label" }] : []));
|
|
1575
|
+
placeholder = input(...(ngDevMode ? [undefined, { debugName: "placeholder" }] : []));
|
|
1576
|
+
className = input('', ...(ngDevMode ? [{ debugName: "className" }] : []));
|
|
1577
|
+
tabIndex = input(...(ngDevMode ? [undefined, { debugName: "tabIndex" }] : []));
|
|
1578
|
+
options = input([], ...(ngDevMode ? [{ debugName: "options" }] : []));
|
|
1579
|
+
props = input(...(ngDevMode ? [undefined, { debugName: "props" }] : []));
|
|
1580
|
+
validationMessages = input(...(ngDevMode ? [undefined, { debugName: "validationMessages" }] : []));
|
|
1581
|
+
defaultValidationMessages = input(...(ngDevMode ? [undefined, { debugName: "defaultValidationMessages" }] : []));
|
|
1582
1582
|
resolvedErrors = createResolvedErrorsSignal(this.field, this.validationMessages, this.defaultValidationMessages);
|
|
1583
1583
|
showErrors = shouldShowErrors(this.field);
|
|
1584
|
-
errorsToDisplay = computed(() => (this.showErrors() ? this.resolvedErrors() : []),
|
|
1584
|
+
errorsToDisplay = computed(() => (this.showErrors() ? this.resolvedErrors() : []), ...(ngDevMode ? [{ debugName: "errorsToDisplay" }] : []));
|
|
1585
1585
|
defaultCompare = Object.is;
|
|
1586
1586
|
isSelected(optionValue, fieldValue) {
|
|
1587
1587
|
const compareWith = this.props()?.compareWith || this.defaultCompare;
|
|
@@ -1593,15 +1593,15 @@ class BsSelectFieldComponent {
|
|
|
1593
1593
|
// ─────────────────────────────────────────────────────────────────────────────
|
|
1594
1594
|
// Accessibility
|
|
1595
1595
|
// ─────────────────────────────────────────────────────────────────────────────
|
|
1596
|
-
helpTextId = computed(() => `${this.key()}-help`,
|
|
1597
|
-
errorId = computed(() => `${this.key()}-error`,
|
|
1596
|
+
helpTextId = computed(() => `${this.key()}-help`, ...(ngDevMode ? [{ debugName: "helpTextId" }] : []));
|
|
1597
|
+
errorId = computed(() => `${this.key()}-error`, ...(ngDevMode ? [{ debugName: "errorId" }] : []));
|
|
1598
1598
|
ariaInvalid = computed(() => {
|
|
1599
1599
|
const fieldState = this.field()();
|
|
1600
1600
|
return fieldState.invalid() && fieldState.touched();
|
|
1601
|
-
},
|
|
1601
|
+
}, ...(ngDevMode ? [{ debugName: "ariaInvalid" }] : []));
|
|
1602
1602
|
ariaRequired = computed(() => {
|
|
1603
1603
|
return this.field()().required?.() === true ? true : null;
|
|
1604
|
-
},
|
|
1604
|
+
}, ...(ngDevMode ? [{ debugName: "ariaRequired" }] : []));
|
|
1605
1605
|
ariaDescribedBy = computed(() => {
|
|
1606
1606
|
const ids = [];
|
|
1607
1607
|
if (this.props()?.helpText) {
|
|
@@ -1612,9 +1612,9 @@ class BsSelectFieldComponent {
|
|
|
1612
1612
|
ids.push(`${this.errorId()}-${i}`);
|
|
1613
1613
|
});
|
|
1614
1614
|
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.
|
|
1615
|
+
}, ...(ngDevMode ? [{ debugName: "ariaDescribedBy" }] : []));
|
|
1616
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: BsSelectFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1617
|
+
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
1618
|
@let f = field();
|
|
1619
1619
|
@let ariaInvalid = this.ariaInvalid(); @let ariaRequired = this.ariaRequired();
|
|
1620
1620
|
@let ariaDescribedBy = this.ariaDescribedBy();
|
|
@@ -1655,7 +1655,7 @@ class BsSelectFieldComponent {
|
|
|
1655
1655
|
</div>
|
|
1656
1656
|
`, 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
1657
|
}
|
|
1658
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.
|
|
1658
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: BsSelectFieldComponent, decorators: [{
|
|
1659
1659
|
type: Component,
|
|
1660
1660
|
args: [{ selector: 'df-bs-select', imports: [Field, DynamicTextPipe, AsyncPipe], template: `
|
|
1661
1661
|
@let f = field();
|
|
@@ -1710,33 +1710,33 @@ var bsSelect_component = /*#__PURE__*/Object.freeze({
|
|
|
1710
1710
|
});
|
|
1711
1711
|
|
|
1712
1712
|
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(
|
|
1713
|
+
field = input.required(...(ngDevMode ? [{ debugName: "field" }] : []));
|
|
1714
|
+
key = input.required(...(ngDevMode ? [{ debugName: "key" }] : []));
|
|
1715
|
+
label = input(...(ngDevMode ? [undefined, { debugName: "label" }] : []));
|
|
1716
|
+
placeholder = input(...(ngDevMode ? [undefined, { debugName: "placeholder" }] : []));
|
|
1717
|
+
className = input('', ...(ngDevMode ? [{ debugName: "className" }] : []));
|
|
1718
|
+
tabIndex = input(...(ngDevMode ? [undefined, { debugName: "tabIndex" }] : []));
|
|
1719
|
+
min = input(0, ...(ngDevMode ? [{ debugName: "min" }] : []));
|
|
1720
|
+
max = input(100, ...(ngDevMode ? [{ debugName: "max" }] : []));
|
|
1721
|
+
step = input(1, ...(ngDevMode ? [{ debugName: "step" }] : []));
|
|
1722
|
+
props = input(...(ngDevMode ? [undefined, { debugName: "props" }] : []));
|
|
1723
|
+
validationMessages = input(...(ngDevMode ? [undefined, { debugName: "validationMessages" }] : []));
|
|
1724
|
+
defaultValidationMessages = input(...(ngDevMode ? [undefined, { debugName: "defaultValidationMessages" }] : []));
|
|
1725
1725
|
resolvedErrors = createResolvedErrorsSignal(this.field, this.validationMessages, this.defaultValidationMessages);
|
|
1726
1726
|
showErrors = shouldShowErrors(this.field);
|
|
1727
|
-
errorsToDisplay = computed(() => (this.showErrors() ? this.resolvedErrors() : []),
|
|
1727
|
+
errorsToDisplay = computed(() => (this.showErrors() ? this.resolvedErrors() : []), ...(ngDevMode ? [{ debugName: "errorsToDisplay" }] : []));
|
|
1728
1728
|
// ─────────────────────────────────────────────────────────────────────────────
|
|
1729
1729
|
// Accessibility
|
|
1730
1730
|
// ─────────────────────────────────────────────────────────────────────────────
|
|
1731
|
-
helpTextId = computed(() => `${this.key()}-help`,
|
|
1732
|
-
errorId = computed(() => `${this.key()}-error`,
|
|
1731
|
+
helpTextId = computed(() => `${this.key()}-help`, ...(ngDevMode ? [{ debugName: "helpTextId" }] : []));
|
|
1732
|
+
errorId = computed(() => `${this.key()}-error`, ...(ngDevMode ? [{ debugName: "errorId" }] : []));
|
|
1733
1733
|
ariaInvalid = computed(() => {
|
|
1734
1734
|
const fieldState = this.field()();
|
|
1735
1735
|
return fieldState.invalid() && fieldState.touched();
|
|
1736
|
-
},
|
|
1736
|
+
}, ...(ngDevMode ? [{ debugName: "ariaInvalid" }] : []));
|
|
1737
1737
|
ariaRequired = computed(() => {
|
|
1738
1738
|
return this.field()().required?.() === true ? true : null;
|
|
1739
|
-
},
|
|
1739
|
+
}, ...(ngDevMode ? [{ debugName: "ariaRequired" }] : []));
|
|
1740
1740
|
ariaDescribedBy = computed(() => {
|
|
1741
1741
|
const ids = [];
|
|
1742
1742
|
if (this.props()?.helpText) {
|
|
@@ -1747,9 +1747,9 @@ class BsSliderFieldComponent {
|
|
|
1747
1747
|
ids.push(`${this.errorId()}-${i}`);
|
|
1748
1748
|
});
|
|
1749
1749
|
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.
|
|
1750
|
+
}, ...(ngDevMode ? [{ debugName: "ariaDescribedBy" }] : []));
|
|
1751
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: BsSliderFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1752
|
+
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
1753
|
@let f = field();
|
|
1754
1754
|
@let ariaInvalid = this.ariaInvalid(); @let ariaRequired = this.ariaRequired();
|
|
1755
1755
|
@let ariaDescribedBy = this.ariaDescribedBy();
|
|
@@ -1790,7 +1790,7 @@ class BsSliderFieldComponent {
|
|
|
1790
1790
|
</div>
|
|
1791
1791
|
`, 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
1792
|
}
|
|
1793
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.
|
|
1793
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: BsSliderFieldComponent, decorators: [{
|
|
1794
1794
|
type: Component,
|
|
1795
1795
|
args: [{ selector: 'df-bs-slider', imports: [Field, DynamicTextPipe, AsyncPipe, InputConstraintsDirective], template: `
|
|
1796
1796
|
@let f = field();
|
|
@@ -1845,30 +1845,30 @@ var bsSlider_component = /*#__PURE__*/Object.freeze({
|
|
|
1845
1845
|
});
|
|
1846
1846
|
|
|
1847
1847
|
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(
|
|
1848
|
+
field = input.required(...(ngDevMode ? [{ debugName: "field" }] : []));
|
|
1849
|
+
key = input.required(...(ngDevMode ? [{ debugName: "key" }] : []));
|
|
1850
|
+
label = input(...(ngDevMode ? [undefined, { debugName: "label" }] : []));
|
|
1851
|
+
placeholder = input(...(ngDevMode ? [undefined, { debugName: "placeholder" }] : []));
|
|
1852
|
+
className = input('', ...(ngDevMode ? [{ debugName: "className" }] : []));
|
|
1853
|
+
tabIndex = input(...(ngDevMode ? [undefined, { debugName: "tabIndex" }] : []));
|
|
1854
|
+
props = input(...(ngDevMode ? [undefined, { debugName: "props" }] : []));
|
|
1855
|
+
validationMessages = input(...(ngDevMode ? [undefined, { debugName: "validationMessages" }] : []));
|
|
1856
|
+
defaultValidationMessages = input(...(ngDevMode ? [undefined, { debugName: "defaultValidationMessages" }] : []));
|
|
1857
1857
|
resolvedErrors = createResolvedErrorsSignal(this.field, this.validationMessages, this.defaultValidationMessages);
|
|
1858
1858
|
showErrors = shouldShowErrors(this.field);
|
|
1859
|
-
errorsToDisplay = computed(() => (this.showErrors() ? this.resolvedErrors() : []),
|
|
1859
|
+
errorsToDisplay = computed(() => (this.showErrors() ? this.resolvedErrors() : []), ...(ngDevMode ? [{ debugName: "errorsToDisplay" }] : []));
|
|
1860
1860
|
// ─────────────────────────────────────────────────────────────────────────────
|
|
1861
1861
|
// Accessibility
|
|
1862
1862
|
// ─────────────────────────────────────────────────────────────────────────────
|
|
1863
|
-
helpTextId = computed(() => `${this.key()}-help`,
|
|
1864
|
-
errorId = computed(() => `${this.key()}-error`,
|
|
1863
|
+
helpTextId = computed(() => `${this.key()}-help`, ...(ngDevMode ? [{ debugName: "helpTextId" }] : []));
|
|
1864
|
+
errorId = computed(() => `${this.key()}-error`, ...(ngDevMode ? [{ debugName: "errorId" }] : []));
|
|
1865
1865
|
ariaInvalid = computed(() => {
|
|
1866
1866
|
const fieldState = this.field()();
|
|
1867
1867
|
return fieldState.invalid() && fieldState.touched();
|
|
1868
|
-
},
|
|
1868
|
+
}, ...(ngDevMode ? [{ debugName: "ariaInvalid" }] : []));
|
|
1869
1869
|
ariaRequired = computed(() => {
|
|
1870
1870
|
return this.field()().required?.() === true ? true : null;
|
|
1871
|
-
},
|
|
1871
|
+
}, ...(ngDevMode ? [{ debugName: "ariaRequired" }] : []));
|
|
1872
1872
|
ariaDescribedBy = computed(() => {
|
|
1873
1873
|
const ids = [];
|
|
1874
1874
|
if (this.props()?.helpText) {
|
|
@@ -1879,9 +1879,9 @@ class BsTextareaFieldComponent {
|
|
|
1879
1879
|
ids.push(`${this.errorId()}-${i}`);
|
|
1880
1880
|
});
|
|
1881
1881
|
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.
|
|
1882
|
+
}, ...(ngDevMode ? [{ debugName: "ariaDescribedBy" }] : []));
|
|
1883
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: BsTextareaFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1884
|
+
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
1885
|
@let f = field(); @let p = props(); @let ariaInvalid = this.ariaInvalid(); @let ariaRequired = this.ariaRequired();
|
|
1886
1886
|
@let ariaDescribedBy = this.ariaDescribedBy();
|
|
1887
1887
|
@if (p?.floatingLabel) {
|
|
@@ -1955,7 +1955,7 @@ class BsTextareaFieldComponent {
|
|
|
1955
1955
|
}
|
|
1956
1956
|
`, 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
1957
|
}
|
|
1958
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.
|
|
1958
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: BsTextareaFieldComponent, decorators: [{
|
|
1959
1959
|
type: Component,
|
|
1960
1960
|
args: [{ selector: 'df-bs-textarea', imports: [Field, DynamicTextPipe, AsyncPipe], template: `
|
|
1961
1961
|
@let f = field(); @let p = props(); @let ariaInvalid = this.ariaInvalid(); @let ariaRequired = this.ariaRequired();
|
|
@@ -2043,30 +2043,30 @@ var bsTextarea_component = /*#__PURE__*/Object.freeze({
|
|
|
2043
2043
|
});
|
|
2044
2044
|
|
|
2045
2045
|
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(
|
|
2046
|
+
field = input.required(...(ngDevMode ? [{ debugName: "field" }] : []));
|
|
2047
|
+
key = input.required(...(ngDevMode ? [{ debugName: "key" }] : []));
|
|
2048
|
+
label = input(...(ngDevMode ? [undefined, { debugName: "label" }] : []));
|
|
2049
|
+
placeholder = input(...(ngDevMode ? [undefined, { debugName: "placeholder" }] : []));
|
|
2050
|
+
className = input('', ...(ngDevMode ? [{ debugName: "className" }] : []));
|
|
2051
|
+
tabIndex = input(...(ngDevMode ? [undefined, { debugName: "tabIndex" }] : []));
|
|
2052
|
+
props = input(...(ngDevMode ? [undefined, { debugName: "props" }] : []));
|
|
2053
|
+
validationMessages = input(...(ngDevMode ? [undefined, { debugName: "validationMessages" }] : []));
|
|
2054
|
+
defaultValidationMessages = input(...(ngDevMode ? [undefined, { debugName: "defaultValidationMessages" }] : []));
|
|
2055
2055
|
resolvedErrors = createResolvedErrorsSignal(this.field, this.validationMessages, this.defaultValidationMessages);
|
|
2056
2056
|
showErrors = shouldShowErrors(this.field);
|
|
2057
|
-
errorsToDisplay = computed(() => (this.showErrors() ? this.resolvedErrors() : []),
|
|
2057
|
+
errorsToDisplay = computed(() => (this.showErrors() ? this.resolvedErrors() : []), ...(ngDevMode ? [{ debugName: "errorsToDisplay" }] : []));
|
|
2058
2058
|
// ─────────────────────────────────────────────────────────────────────────────
|
|
2059
2059
|
// Accessibility
|
|
2060
2060
|
// ─────────────────────────────────────────────────────────────────────────────
|
|
2061
|
-
helpTextId = computed(() => `${this.key()}-help`,
|
|
2062
|
-
errorId = computed(() => `${this.key()}-error`,
|
|
2061
|
+
helpTextId = computed(() => `${this.key()}-help`, ...(ngDevMode ? [{ debugName: "helpTextId" }] : []));
|
|
2062
|
+
errorId = computed(() => `${this.key()}-error`, ...(ngDevMode ? [{ debugName: "errorId" }] : []));
|
|
2063
2063
|
ariaInvalid = computed(() => {
|
|
2064
2064
|
const fieldState = this.field()();
|
|
2065
2065
|
return fieldState.invalid() && fieldState.touched();
|
|
2066
|
-
},
|
|
2066
|
+
}, ...(ngDevMode ? [{ debugName: "ariaInvalid" }] : []));
|
|
2067
2067
|
ariaRequired = computed(() => {
|
|
2068
2068
|
return this.field()().required?.() === true ? true : null;
|
|
2069
|
-
},
|
|
2069
|
+
}, ...(ngDevMode ? [{ debugName: "ariaRequired" }] : []));
|
|
2070
2070
|
ariaDescribedBy = computed(() => {
|
|
2071
2071
|
const ids = [];
|
|
2072
2072
|
if (this.props()?.helpText) {
|
|
@@ -2077,9 +2077,9 @@ class BsToggleFieldComponent {
|
|
|
2077
2077
|
ids.push(`${this.errorId()}-${i}`);
|
|
2078
2078
|
});
|
|
2079
2079
|
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.
|
|
2080
|
+
}, ...(ngDevMode ? [{ debugName: "ariaDescribedBy" }] : []));
|
|
2081
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: BsToggleFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2082
|
+
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
2083
|
@let f = field();
|
|
2084
2084
|
@let ariaInvalid = this.ariaInvalid(); @let ariaRequired = this.ariaRequired();
|
|
2085
2085
|
@let ariaDescribedBy = this.ariaDescribedBy();
|
|
@@ -2119,7 +2119,7 @@ class BsToggleFieldComponent {
|
|
|
2119
2119
|
}
|
|
2120
2120
|
`, 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
2121
|
}
|
|
2122
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.
|
|
2122
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: BsToggleFieldComponent, decorators: [{
|
|
2123
2123
|
type: Component,
|
|
2124
2124
|
args: [{ selector: 'df-bs-toggle', imports: [Field, DynamicTextPipe, AsyncPipe], template: `
|
|
2125
2125
|
@let f = field();
|