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