@ng-forge/dynamic-forms-bootstrap 0.1.2 → 0.2.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.
|
@@ -1,8 +1,9 @@
|
|
|
1
1
|
import { AsyncPipe } from '@angular/common';
|
|
2
2
|
import * as i0 from '@angular/core';
|
|
3
|
-
import { inject, input, computed, ChangeDetectionStrategy, Component, viewChild, effect, ElementRef, Directive, InjectionToken, linkedSignal, model, isSignal } from '@angular/core';
|
|
4
|
-
import { EventBus, ARRAY_CONTEXT, resolveTokens, DynamicTextPipe,
|
|
3
|
+
import { inject, input, computed, ChangeDetectionStrategy, Component, viewChild, effect, ElementRef, Directive, InjectionToken, afterRenderEffect, linkedSignal, model, isSignal } from '@angular/core';
|
|
4
|
+
import { EventBus, ARRAY_CONTEXT, resolveTokens, DynamicTextPipe, buildBaseInputs, FIELD_SIGNAL_CONTEXT, resolveSubmitButtonDisabled, resolveNextButtonDisabled, NextPageEvent, PreviousPageEvent, DynamicFormLogger, AddArrayItemEvent, RemoveArrayItemEvent } from '@ng-forge/dynamic-forms';
|
|
5
5
|
import { Field } from '@angular/forms/signals';
|
|
6
|
+
import { createResolvedErrorsSignal, shouldShowErrors, isEqual, valueFieldMapper, optionsFieldMapper, checkboxFieldMapper, datepickerFieldMapper } from '@ng-forge/dynamic-forms/integration';
|
|
6
7
|
import { explicitEffect } from 'ngxtension/explicit-effect';
|
|
7
8
|
|
|
8
9
|
class BsButtonFieldComponent {
|
|
@@ -77,8 +78,8 @@ class BsButtonFieldComponent {
|
|
|
77
78
|
this.eventBus.dispatch(event);
|
|
78
79
|
}
|
|
79
80
|
}
|
|
80
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.
|
|
81
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.
|
|
81
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: BsButtonFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
82
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.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()", "hidden": "hidden()" } }, ngImport: i0, template: `
|
|
82
83
|
<button
|
|
83
84
|
[id]="key()"
|
|
84
85
|
[type]="buttonType()"
|
|
@@ -92,7 +93,7 @@ class BsButtonFieldComponent {
|
|
|
92
93
|
</button>
|
|
93
94
|
`, isInline: true, styles: [":host{--df-bs-field-gap: .5rem;--df-bs-label-font-weight: 500;--df-bs-label-color: inherit;--df-bs-hint-color: var(--bs-secondary-color, #6c757d);--df-bs-hint-font-size: .875rem;--df-bs-error-color: var(--bs-danger, #dc3545);--df-bs-error-font-size: .875rem}.df-bs-field{display:flex;flex-direction:column;gap:var(--df-bs-field-gap);width:100%;margin-bottom:1rem}.df-bs-label{font-weight:var(--df-bs-label-font-weight);color:var(--df-bs-label-color);margin-bottom:0}.df-bs-hint{color:var(--df-bs-hint-color);font-size:var(--df-bs-hint-font-size);margin-top:.25rem}.df-bs-field:has(.df-bs-hint){margin-bottom:.5rem}\n"], dependencies: [{ kind: "pipe", type: DynamicTextPipe, name: "dynamicText" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
94
95
|
}
|
|
95
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.
|
|
96
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: BsButtonFieldComponent, decorators: [{
|
|
96
97
|
type: Component,
|
|
97
98
|
args: [{ selector: 'df-bs-button', imports: [DynamicTextPipe, AsyncPipe], host: {
|
|
98
99
|
'[id]': '`${key()}`',
|
|
@@ -168,8 +169,8 @@ class BsCheckboxFieldComponent {
|
|
|
168
169
|
});
|
|
169
170
|
return ids.length > 0 ? ids.join(' ') : null;
|
|
170
171
|
}, ...(ngDevMode ? [{ debugName: "ariaDescribedBy" }] : []));
|
|
171
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.
|
|
172
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.
|
|
172
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: BsCheckboxFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
173
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.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 } }, host: { properties: { "class": "className()", "id": "`${key()}`", "attr.data-testid": "key()", "attr.hidden": "field()().hidden() || null" } }, viewQueries: [{ propertyName: "checkboxInput", first: true, predicate: ["checkboxInput"], descendants: true, isSignal: true }], ngImport: i0, template: `
|
|
173
174
|
@let f = field();
|
|
174
175
|
@let ariaInvalid = this.ariaInvalid(); @let ariaRequired = this.ariaRequired();
|
|
175
176
|
@let ariaDescribedBy = this.ariaDescribedBy();
|
|
@@ -209,7 +210,7 @@ class BsCheckboxFieldComponent {
|
|
|
209
210
|
}
|
|
210
211
|
`, isInline: true, styles: [":host{--df-bs-field-gap: .5rem;--df-bs-label-font-weight: 500;--df-bs-label-color: inherit;--df-bs-hint-color: var(--bs-secondary-color, #6c757d);--df-bs-hint-font-size: .875rem;--df-bs-error-color: var(--bs-danger, #dc3545);--df-bs-error-font-size: .875rem}.df-bs-field{display:flex;flex-direction:column;gap:var(--df-bs-field-gap);width:100%;margin-bottom:1rem}.df-bs-label{font-weight:var(--df-bs-label-font-weight);color:var(--df-bs-label-color);margin-bottom:0}.df-bs-hint{color:var(--df-bs-hint-color);font-size:var(--df-bs-hint-font-size);margin-top:.25rem}.df-bs-field:has(.df-bs-hint){margin-bottom:.5rem}\n", ":host{display:block}:host([hidden]){display:none!important}\n"], dependencies: [{ kind: "directive", type: Field, selector: "[field]", inputs: ["field"] }, { kind: "pipe", type: DynamicTextPipe, name: "dynamicText" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
211
212
|
}
|
|
212
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.
|
|
213
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: BsCheckboxFieldComponent, decorators: [{
|
|
213
214
|
type: Component,
|
|
214
215
|
args: [{ selector: 'df-bs-checkbox', imports: [Field, DynamicTextPipe, AsyncPipe], template: `
|
|
215
216
|
@let f = field();
|
|
@@ -297,10 +298,10 @@ class InputConstraintsDirective {
|
|
|
297
298
|
nativeElement.removeAttribute('step');
|
|
298
299
|
}
|
|
299
300
|
});
|
|
300
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.
|
|
301
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.0.
|
|
301
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: InputConstraintsDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
302
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.0.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 });
|
|
302
303
|
}
|
|
303
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.
|
|
304
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: InputConstraintsDirective, decorators: [{
|
|
304
305
|
type: Directive,
|
|
305
306
|
args: [{
|
|
306
307
|
selector: '[dfBsInputConstraints]',
|
|
@@ -355,8 +356,8 @@ class BsDatepickerFieldComponent {
|
|
|
355
356
|
});
|
|
356
357
|
return ids.length > 0 ? ids.join(' ') : null;
|
|
357
358
|
}, ...(ngDevMode ? [{ debugName: "ariaDescribedBy" }] : []));
|
|
358
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.
|
|
359
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.
|
|
359
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: BsDatepickerFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
360
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.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 } }, host: { properties: { "id": "`${key()}`", "attr.data-testid": "key()", "class": "className()", "attr.hidden": "field()().hidden() || null" } }, ngImport: i0, template: `
|
|
360
361
|
@let f = field(); @let p = props(); @let ariaInvalid = this.ariaInvalid(); @let ariaRequired = this.ariaRequired();
|
|
361
362
|
@let ariaDescribedBy = this.ariaDescribedBy();
|
|
362
363
|
@if (p?.floatingLabel) {
|
|
@@ -435,7 +436,7 @@ class BsDatepickerFieldComponent {
|
|
|
435
436
|
}
|
|
436
437
|
`, isInline: true, styles: [":host{--df-bs-field-gap: .5rem;--df-bs-label-font-weight: 500;--df-bs-label-color: inherit;--df-bs-hint-color: var(--bs-secondary-color, #6c757d);--df-bs-hint-font-size: .875rem;--df-bs-error-color: var(--bs-danger, #dc3545);--df-bs-error-font-size: .875rem}.df-bs-field{display:flex;flex-direction:column;gap:var(--df-bs-field-gap);width:100%;margin-bottom:1rem}.df-bs-label{font-weight:var(--df-bs-label-font-weight);color:var(--df-bs-label-color);margin-bottom:0}.df-bs-hint{color:var(--df-bs-hint-color);font-size:var(--df-bs-hint-font-size);margin-top:.25rem}.df-bs-field:has(.df-bs-hint){margin-bottom:.5rem}\n", ":host([hidden]){display:none!important}\n"], dependencies: [{ kind: "directive", type: Field, selector: "[field]", inputs: ["field"] }, { kind: "directive", type: InputConstraintsDirective, selector: "[dfBsInputConstraints]", inputs: ["dfMin", "dfMax", "dfStep"] }, { kind: "pipe", type: DynamicTextPipe, name: "dynamicText" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
437
438
|
}
|
|
438
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.
|
|
439
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: BsDatepickerFieldComponent, decorators: [{
|
|
439
440
|
type: Component,
|
|
440
441
|
args: [{ selector: 'df-bs-datepicker', imports: [Field, DynamicTextPipe, AsyncPipe, InputConstraintsDirective], template: `
|
|
441
442
|
@let f = field(); @let p = props(); @let ariaInvalid = this.ariaInvalid(); @let ariaRequired = this.ariaRequired();
|
|
@@ -554,6 +555,38 @@ class BsInputFieldComponent {
|
|
|
554
555
|
bootstrapConfig = inject(BOOTSTRAP_CONFIG, { optional: true });
|
|
555
556
|
field = input.required(...(ngDevMode ? [{ debugName: "field" }] : []));
|
|
556
557
|
key = input.required(...(ngDevMode ? [{ debugName: "key" }] : []));
|
|
558
|
+
/**
|
|
559
|
+
* Reference to the native input element.
|
|
560
|
+
* Used to imperatively sync the readonly attribute since Angular Signal Forms'
|
|
561
|
+
* [field] directive doesn't sync FieldState.readonly() to the DOM.
|
|
562
|
+
*/
|
|
563
|
+
inputRef = viewChild('inputRef', ...(ngDevMode ? [{ debugName: "inputRef" }] : []));
|
|
564
|
+
/**
|
|
565
|
+
* Computed signal that extracts the readonly state from the field.
|
|
566
|
+
* Used by the effect to reactively sync the readonly attribute to the DOM.
|
|
567
|
+
*/
|
|
568
|
+
isReadonly = computed(() => this.field()().readonly(), ...(ngDevMode ? [{ debugName: "isReadonly" }] : []));
|
|
569
|
+
/**
|
|
570
|
+
* Workaround: Angular Signal Forms' [field] directive does NOT sync the readonly
|
|
571
|
+
* attribute to the DOM. This effect imperatively sets/removes the readonly attribute
|
|
572
|
+
* on the native input element whenever the readonly state changes.
|
|
573
|
+
*
|
|
574
|
+
* Uses afterRenderEffect to ensure DOM is ready before manipulating attributes.
|
|
575
|
+
*/
|
|
576
|
+
syncReadonlyToDom = afterRenderEffect({
|
|
577
|
+
write: () => {
|
|
578
|
+
const inputRef = this.inputRef();
|
|
579
|
+
const isReadonly = this.isReadonly();
|
|
580
|
+
if (inputRef?.nativeElement) {
|
|
581
|
+
if (isReadonly) {
|
|
582
|
+
inputRef.nativeElement.setAttribute('readonly', '');
|
|
583
|
+
}
|
|
584
|
+
else {
|
|
585
|
+
inputRef.nativeElement.removeAttribute('readonly');
|
|
586
|
+
}
|
|
587
|
+
}
|
|
588
|
+
},
|
|
589
|
+
});
|
|
557
590
|
label = input(...(ngDevMode ? [undefined, { debugName: "label" }] : []));
|
|
558
591
|
placeholder = input(...(ngDevMode ? [undefined, { debugName: "placeholder" }] : []));
|
|
559
592
|
className = input('', ...(ngDevMode ? [{ debugName: "className" }] : []));
|
|
@@ -594,8 +627,8 @@ class BsInputFieldComponent {
|
|
|
594
627
|
});
|
|
595
628
|
return ids.length > 0 ? ids.join(' ') : null;
|
|
596
629
|
}, ...(ngDevMode ? [{ debugName: "ariaDescribedBy" }] : []));
|
|
597
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.
|
|
598
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.
|
|
630
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: BsInputFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
631
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.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 } }, 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: `
|
|
599
632
|
@let f = field(); @let p = props(); @let effectiveSize = this.effectiveSize();
|
|
600
633
|
@let effectiveFloatingLabel = this.effectiveFloatingLabel();
|
|
601
634
|
@let ariaInvalid = this.ariaInvalid(); @let ariaRequired = this.ariaRequired();
|
|
@@ -603,116 +636,23 @@ class BsInputFieldComponent {
|
|
|
603
636
|
@if (effectiveFloatingLabel) {
|
|
604
637
|
<!-- Floating label variant -->
|
|
605
638
|
<div class="form-floating mb-3">
|
|
606
|
-
|
|
607
|
-
|
|
608
|
-
|
|
609
|
-
|
|
610
|
-
|
|
611
|
-
|
|
612
|
-
|
|
613
|
-
|
|
614
|
-
|
|
615
|
-
|
|
616
|
-
|
|
617
|
-
|
|
618
|
-
|
|
619
|
-
|
|
620
|
-
|
|
621
|
-
|
|
622
|
-
|
|
623
|
-
/>
|
|
624
|
-
}
|
|
625
|
-
@case ('password') {
|
|
626
|
-
<input
|
|
627
|
-
type="password"
|
|
628
|
-
[field]="f"
|
|
629
|
-
[id]="key()"
|
|
630
|
-
[placeholder]="(placeholder() | dynamicText | async) ?? ''"
|
|
631
|
-
[attr.tabindex]="tabIndex()"
|
|
632
|
-
[attr.aria-invalid]="ariaInvalid"
|
|
633
|
-
[attr.aria-required]="ariaRequired"
|
|
634
|
-
[attr.aria-describedby]="ariaDescribedBy"
|
|
635
|
-
class="form-control"
|
|
636
|
-
[class.form-control-sm]="effectiveSize === 'sm'"
|
|
637
|
-
[class.form-control-lg]="effectiveSize === 'lg'"
|
|
638
|
-
[class.form-control-plaintext]="p?.plaintext"
|
|
639
|
-
[class.is-invalid]="f().invalid() && f().touched()"
|
|
640
|
-
[class.is-valid]="f().valid() && f().touched() && p?.validFeedback"
|
|
641
|
-
/>
|
|
642
|
-
}
|
|
643
|
-
@case ('number') {
|
|
644
|
-
<input
|
|
645
|
-
type="number"
|
|
646
|
-
[field]="f"
|
|
647
|
-
[id]="key()"
|
|
648
|
-
[placeholder]="(placeholder() | dynamicText | async) ?? ''"
|
|
649
|
-
[attr.tabindex]="tabIndex()"
|
|
650
|
-
[attr.aria-invalid]="ariaInvalid"
|
|
651
|
-
[attr.aria-required]="ariaRequired"
|
|
652
|
-
[attr.aria-describedby]="ariaDescribedBy"
|
|
653
|
-
class="form-control"
|
|
654
|
-
[class.form-control-sm]="effectiveSize === 'sm'"
|
|
655
|
-
[class.form-control-lg]="effectiveSize === 'lg'"
|
|
656
|
-
[class.form-control-plaintext]="p?.plaintext"
|
|
657
|
-
[class.is-invalid]="f().invalid() && f().touched()"
|
|
658
|
-
[class.is-valid]="f().valid() && f().touched() && p?.validFeedback"
|
|
659
|
-
/>
|
|
660
|
-
}
|
|
661
|
-
@case ('tel') {
|
|
662
|
-
<input
|
|
663
|
-
type="tel"
|
|
664
|
-
[field]="f"
|
|
665
|
-
[id]="key()"
|
|
666
|
-
[placeholder]="(placeholder() | dynamicText | async) ?? ''"
|
|
667
|
-
[attr.tabindex]="tabIndex()"
|
|
668
|
-
[attr.aria-invalid]="ariaInvalid"
|
|
669
|
-
[attr.aria-required]="ariaRequired"
|
|
670
|
-
[attr.aria-describedby]="ariaDescribedBy"
|
|
671
|
-
class="form-control"
|
|
672
|
-
[class.form-control-sm]="effectiveSize === 'sm'"
|
|
673
|
-
[class.form-control-lg]="effectiveSize === 'lg'"
|
|
674
|
-
[class.form-control-plaintext]="p?.plaintext"
|
|
675
|
-
[class.is-invalid]="f().invalid() && f().touched()"
|
|
676
|
-
[class.is-valid]="f().valid() && f().touched() && p?.validFeedback"
|
|
677
|
-
/>
|
|
678
|
-
}
|
|
679
|
-
@case ('url') {
|
|
680
|
-
<input
|
|
681
|
-
type="url"
|
|
682
|
-
[field]="f"
|
|
683
|
-
[id]="key()"
|
|
684
|
-
[placeholder]="(placeholder() | dynamicText | async) ?? ''"
|
|
685
|
-
[attr.tabindex]="tabIndex()"
|
|
686
|
-
[attr.aria-invalid]="ariaInvalid"
|
|
687
|
-
[attr.aria-required]="ariaRequired"
|
|
688
|
-
[attr.aria-describedby]="ariaDescribedBy"
|
|
689
|
-
class="form-control"
|
|
690
|
-
[class.form-control-sm]="effectiveSize === 'sm'"
|
|
691
|
-
[class.form-control-lg]="effectiveSize === 'lg'"
|
|
692
|
-
[class.form-control-plaintext]="p?.plaintext"
|
|
693
|
-
[class.is-invalid]="f().invalid() && f().touched()"
|
|
694
|
-
[class.is-valid]="f().valid() && f().touched() && p?.validFeedback"
|
|
695
|
-
/>
|
|
696
|
-
}
|
|
697
|
-
@default {
|
|
698
|
-
<input
|
|
699
|
-
type="text"
|
|
700
|
-
[field]="f"
|
|
701
|
-
[id]="key()"
|
|
702
|
-
[placeholder]="(placeholder() | dynamicText | async) ?? ''"
|
|
703
|
-
[attr.tabindex]="tabIndex()"
|
|
704
|
-
[attr.aria-invalid]="ariaInvalid"
|
|
705
|
-
[attr.aria-required]="ariaRequired"
|
|
706
|
-
[attr.aria-describedby]="ariaDescribedBy"
|
|
707
|
-
class="form-control"
|
|
708
|
-
[class.form-control-sm]="effectiveSize === 'sm'"
|
|
709
|
-
[class.form-control-lg]="effectiveSize === 'lg'"
|
|
710
|
-
[class.form-control-plaintext]="p?.plaintext"
|
|
711
|
-
[class.is-invalid]="f().invalid() && f().touched()"
|
|
712
|
-
[class.is-valid]="f().valid() && f().touched() && p?.validFeedback"
|
|
713
|
-
/>
|
|
714
|
-
}
|
|
715
|
-
}
|
|
639
|
+
<input
|
|
640
|
+
#inputRef
|
|
641
|
+
[type]="p?.type ?? 'text'"
|
|
642
|
+
[field]="f"
|
|
643
|
+
[id]="key()"
|
|
644
|
+
[placeholder]="(placeholder() | dynamicText | async) ?? ''"
|
|
645
|
+
[attr.tabindex]="tabIndex()"
|
|
646
|
+
[attr.aria-invalid]="ariaInvalid"
|
|
647
|
+
[attr.aria-required]="ariaRequired"
|
|
648
|
+
[attr.aria-describedby]="ariaDescribedBy"
|
|
649
|
+
class="form-control"
|
|
650
|
+
[class.form-control-sm]="effectiveSize === 'sm'"
|
|
651
|
+
[class.form-control-lg]="effectiveSize === 'lg'"
|
|
652
|
+
[class.form-control-plaintext]="p?.plaintext"
|
|
653
|
+
[class.is-invalid]="f().invalid() && f().touched()"
|
|
654
|
+
[class.is-valid]="f().valid() && f().touched() && p?.validFeedback"
|
|
655
|
+
/>
|
|
716
656
|
@if (label()) {
|
|
717
657
|
<label [for]="key()">{{ label() | dynamicText | async }}</label>
|
|
718
658
|
}
|
|
@@ -731,116 +671,23 @@ class BsInputFieldComponent {
|
|
|
731
671
|
@if (label()) {
|
|
732
672
|
<label [for]="key()" class="form-label">{{ label() | dynamicText | async }}</label>
|
|
733
673
|
}
|
|
734
|
-
|
|
735
|
-
|
|
736
|
-
|
|
737
|
-
|
|
738
|
-
|
|
739
|
-
|
|
740
|
-
|
|
741
|
-
|
|
742
|
-
|
|
743
|
-
|
|
744
|
-
|
|
745
|
-
|
|
746
|
-
|
|
747
|
-
|
|
748
|
-
|
|
749
|
-
|
|
750
|
-
|
|
751
|
-
/>
|
|
752
|
-
}
|
|
753
|
-
@case ('password') {
|
|
754
|
-
<input
|
|
755
|
-
type="password"
|
|
756
|
-
[field]="f"
|
|
757
|
-
[id]="key()"
|
|
758
|
-
[placeholder]="(placeholder() | dynamicText | async) ?? ''"
|
|
759
|
-
[attr.tabindex]="tabIndex()"
|
|
760
|
-
[attr.aria-invalid]="ariaInvalid"
|
|
761
|
-
[attr.aria-required]="ariaRequired"
|
|
762
|
-
[attr.aria-describedby]="ariaDescribedBy"
|
|
763
|
-
class="form-control"
|
|
764
|
-
[class.form-control-sm]="effectiveSize === 'sm'"
|
|
765
|
-
[class.form-control-lg]="effectiveSize === 'lg'"
|
|
766
|
-
[class.form-control-plaintext]="p?.plaintext"
|
|
767
|
-
[class.is-invalid]="f().invalid() && f().touched()"
|
|
768
|
-
[class.is-valid]="f().valid() && f().touched() && p?.validFeedback"
|
|
769
|
-
/>
|
|
770
|
-
}
|
|
771
|
-
@case ('number') {
|
|
772
|
-
<input
|
|
773
|
-
type="number"
|
|
774
|
-
[field]="f"
|
|
775
|
-
[id]="key()"
|
|
776
|
-
[placeholder]="(placeholder() | dynamicText | async) ?? ''"
|
|
777
|
-
[attr.tabindex]="tabIndex()"
|
|
778
|
-
[attr.aria-invalid]="ariaInvalid"
|
|
779
|
-
[attr.aria-required]="ariaRequired"
|
|
780
|
-
[attr.aria-describedby]="ariaDescribedBy"
|
|
781
|
-
class="form-control"
|
|
782
|
-
[class.form-control-sm]="effectiveSize === 'sm'"
|
|
783
|
-
[class.form-control-lg]="effectiveSize === 'lg'"
|
|
784
|
-
[class.form-control-plaintext]="p?.plaintext"
|
|
785
|
-
[class.is-invalid]="f().invalid() && f().touched()"
|
|
786
|
-
[class.is-valid]="f().valid() && f().touched() && p?.validFeedback"
|
|
787
|
-
/>
|
|
788
|
-
}
|
|
789
|
-
@case ('tel') {
|
|
790
|
-
<input
|
|
791
|
-
type="tel"
|
|
792
|
-
[field]="f"
|
|
793
|
-
[id]="key()"
|
|
794
|
-
[placeholder]="(placeholder() | dynamicText | async) ?? ''"
|
|
795
|
-
[attr.tabindex]="tabIndex()"
|
|
796
|
-
[attr.aria-invalid]="ariaInvalid"
|
|
797
|
-
[attr.aria-required]="ariaRequired"
|
|
798
|
-
[attr.aria-describedby]="ariaDescribedBy"
|
|
799
|
-
class="form-control"
|
|
800
|
-
[class.form-control-sm]="effectiveSize === 'sm'"
|
|
801
|
-
[class.form-control-lg]="effectiveSize === 'lg'"
|
|
802
|
-
[class.form-control-plaintext]="p?.plaintext"
|
|
803
|
-
[class.is-invalid]="f().invalid() && f().touched()"
|
|
804
|
-
[class.is-valid]="f().valid() && f().touched() && p?.validFeedback"
|
|
805
|
-
/>
|
|
806
|
-
}
|
|
807
|
-
@case ('url') {
|
|
808
|
-
<input
|
|
809
|
-
type="url"
|
|
810
|
-
[field]="f"
|
|
811
|
-
[id]="key()"
|
|
812
|
-
[placeholder]="(placeholder() | dynamicText | async) ?? ''"
|
|
813
|
-
[attr.tabindex]="tabIndex()"
|
|
814
|
-
[attr.aria-invalid]="ariaInvalid"
|
|
815
|
-
[attr.aria-required]="ariaRequired"
|
|
816
|
-
[attr.aria-describedby]="ariaDescribedBy"
|
|
817
|
-
class="form-control"
|
|
818
|
-
[class.form-control-sm]="effectiveSize === 'sm'"
|
|
819
|
-
[class.form-control-lg]="effectiveSize === 'lg'"
|
|
820
|
-
[class.form-control-plaintext]="p?.plaintext"
|
|
821
|
-
[class.is-invalid]="f().invalid() && f().touched()"
|
|
822
|
-
[class.is-valid]="f().valid() && f().touched() && p?.validFeedback"
|
|
823
|
-
/>
|
|
824
|
-
}
|
|
825
|
-
@default {
|
|
826
|
-
<input
|
|
827
|
-
type="text"
|
|
828
|
-
[field]="f"
|
|
829
|
-
[id]="key()"
|
|
830
|
-
[placeholder]="(placeholder() | dynamicText | async) ?? ''"
|
|
831
|
-
[attr.tabindex]="tabIndex()"
|
|
832
|
-
[attr.aria-invalid]="ariaInvalid"
|
|
833
|
-
[attr.aria-required]="ariaRequired"
|
|
834
|
-
[attr.aria-describedby]="ariaDescribedBy"
|
|
835
|
-
class="form-control"
|
|
836
|
-
[class.form-control-sm]="effectiveSize === 'sm'"
|
|
837
|
-
[class.form-control-lg]="effectiveSize === 'lg'"
|
|
838
|
-
[class.form-control-plaintext]="p?.plaintext"
|
|
839
|
-
[class.is-invalid]="f().invalid() && f().touched()"
|
|
840
|
-
[class.is-valid]="f().valid() && f().touched() && p?.validFeedback"
|
|
841
|
-
/>
|
|
842
|
-
}
|
|
843
|
-
}
|
|
674
|
+
<input
|
|
675
|
+
#inputRef
|
|
676
|
+
[type]="p?.type ?? 'text'"
|
|
677
|
+
[field]="f"
|
|
678
|
+
[id]="key()"
|
|
679
|
+
[placeholder]="(placeholder() | dynamicText | async) ?? ''"
|
|
680
|
+
[attr.tabindex]="tabIndex()"
|
|
681
|
+
[attr.aria-invalid]="ariaInvalid"
|
|
682
|
+
[attr.aria-required]="ariaRequired"
|
|
683
|
+
[attr.aria-describedby]="ariaDescribedBy"
|
|
684
|
+
class="form-control"
|
|
685
|
+
[class.form-control-sm]="effectiveSize === 'sm'"
|
|
686
|
+
[class.form-control-lg]="effectiveSize === 'lg'"
|
|
687
|
+
[class.form-control-plaintext]="p?.plaintext"
|
|
688
|
+
[class.is-invalid]="f().invalid() && f().touched()"
|
|
689
|
+
[class.is-valid]="f().valid() && f().touched() && p?.validFeedback"
|
|
690
|
+
/>
|
|
844
691
|
@if (p?.helpText) {
|
|
845
692
|
<div class="form-text" [id]="helpTextId()">
|
|
846
693
|
{{ p?.helpText | dynamicText | async }}
|
|
@@ -858,7 +705,7 @@ class BsInputFieldComponent {
|
|
|
858
705
|
}
|
|
859
706
|
`, isInline: true, styles: [":host{--df-bs-field-gap: .5rem;--df-bs-label-font-weight: 500;--df-bs-label-color: inherit;--df-bs-hint-color: var(--bs-secondary-color, #6c757d);--df-bs-hint-font-size: .875rem;--df-bs-error-color: var(--bs-danger, #dc3545);--df-bs-error-font-size: .875rem}.df-bs-field{display:flex;flex-direction:column;gap:var(--df-bs-field-gap);width:100%;margin-bottom:1rem}.df-bs-label{font-weight:var(--df-bs-label-font-weight);color:var(--df-bs-label-color);margin-bottom:0}.df-bs-hint{color:var(--df-bs-hint-color);font-size:var(--df-bs-hint-font-size);margin-top:.25rem}.df-bs-field:has(.df-bs-hint){margin-bottom:.5rem}\n", ":host([hidden]){display:none!important}\n"], dependencies: [{ kind: "directive", type: Field, selector: "[field]", inputs: ["field"] }, { kind: "pipe", type: DynamicTextPipe, name: "dynamicText" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
860
707
|
}
|
|
861
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.
|
|
708
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: BsInputFieldComponent, decorators: [{
|
|
862
709
|
type: Component,
|
|
863
710
|
args: [{ selector: 'df-bs-input', imports: [Field, DynamicTextPipe, AsyncPipe], template: `
|
|
864
711
|
@let f = field(); @let p = props(); @let effectiveSize = this.effectiveSize();
|
|
@@ -868,116 +715,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.5", ngImpor
|
|
|
868
715
|
@if (effectiveFloatingLabel) {
|
|
869
716
|
<!-- Floating label variant -->
|
|
870
717
|
<div class="form-floating mb-3">
|
|
871
|
-
|
|
872
|
-
|
|
873
|
-
|
|
874
|
-
|
|
875
|
-
|
|
876
|
-
|
|
877
|
-
|
|
878
|
-
|
|
879
|
-
|
|
880
|
-
|
|
881
|
-
|
|
882
|
-
|
|
883
|
-
|
|
884
|
-
|
|
885
|
-
|
|
886
|
-
|
|
887
|
-
|
|
888
|
-
/>
|
|
889
|
-
}
|
|
890
|
-
@case ('password') {
|
|
891
|
-
<input
|
|
892
|
-
type="password"
|
|
893
|
-
[field]="f"
|
|
894
|
-
[id]="key()"
|
|
895
|
-
[placeholder]="(placeholder() | dynamicText | async) ?? ''"
|
|
896
|
-
[attr.tabindex]="tabIndex()"
|
|
897
|
-
[attr.aria-invalid]="ariaInvalid"
|
|
898
|
-
[attr.aria-required]="ariaRequired"
|
|
899
|
-
[attr.aria-describedby]="ariaDescribedBy"
|
|
900
|
-
class="form-control"
|
|
901
|
-
[class.form-control-sm]="effectiveSize === 'sm'"
|
|
902
|
-
[class.form-control-lg]="effectiveSize === 'lg'"
|
|
903
|
-
[class.form-control-plaintext]="p?.plaintext"
|
|
904
|
-
[class.is-invalid]="f().invalid() && f().touched()"
|
|
905
|
-
[class.is-valid]="f().valid() && f().touched() && p?.validFeedback"
|
|
906
|
-
/>
|
|
907
|
-
}
|
|
908
|
-
@case ('number') {
|
|
909
|
-
<input
|
|
910
|
-
type="number"
|
|
911
|
-
[field]="f"
|
|
912
|
-
[id]="key()"
|
|
913
|
-
[placeholder]="(placeholder() | dynamicText | async) ?? ''"
|
|
914
|
-
[attr.tabindex]="tabIndex()"
|
|
915
|
-
[attr.aria-invalid]="ariaInvalid"
|
|
916
|
-
[attr.aria-required]="ariaRequired"
|
|
917
|
-
[attr.aria-describedby]="ariaDescribedBy"
|
|
918
|
-
class="form-control"
|
|
919
|
-
[class.form-control-sm]="effectiveSize === 'sm'"
|
|
920
|
-
[class.form-control-lg]="effectiveSize === 'lg'"
|
|
921
|
-
[class.form-control-plaintext]="p?.plaintext"
|
|
922
|
-
[class.is-invalid]="f().invalid() && f().touched()"
|
|
923
|
-
[class.is-valid]="f().valid() && f().touched() && p?.validFeedback"
|
|
924
|
-
/>
|
|
925
|
-
}
|
|
926
|
-
@case ('tel') {
|
|
927
|
-
<input
|
|
928
|
-
type="tel"
|
|
929
|
-
[field]="f"
|
|
930
|
-
[id]="key()"
|
|
931
|
-
[placeholder]="(placeholder() | dynamicText | async) ?? ''"
|
|
932
|
-
[attr.tabindex]="tabIndex()"
|
|
933
|
-
[attr.aria-invalid]="ariaInvalid"
|
|
934
|
-
[attr.aria-required]="ariaRequired"
|
|
935
|
-
[attr.aria-describedby]="ariaDescribedBy"
|
|
936
|
-
class="form-control"
|
|
937
|
-
[class.form-control-sm]="effectiveSize === 'sm'"
|
|
938
|
-
[class.form-control-lg]="effectiveSize === 'lg'"
|
|
939
|
-
[class.form-control-plaintext]="p?.plaintext"
|
|
940
|
-
[class.is-invalid]="f().invalid() && f().touched()"
|
|
941
|
-
[class.is-valid]="f().valid() && f().touched() && p?.validFeedback"
|
|
942
|
-
/>
|
|
943
|
-
}
|
|
944
|
-
@case ('url') {
|
|
945
|
-
<input
|
|
946
|
-
type="url"
|
|
947
|
-
[field]="f"
|
|
948
|
-
[id]="key()"
|
|
949
|
-
[placeholder]="(placeholder() | dynamicText | async) ?? ''"
|
|
950
|
-
[attr.tabindex]="tabIndex()"
|
|
951
|
-
[attr.aria-invalid]="ariaInvalid"
|
|
952
|
-
[attr.aria-required]="ariaRequired"
|
|
953
|
-
[attr.aria-describedby]="ariaDescribedBy"
|
|
954
|
-
class="form-control"
|
|
955
|
-
[class.form-control-sm]="effectiveSize === 'sm'"
|
|
956
|
-
[class.form-control-lg]="effectiveSize === 'lg'"
|
|
957
|
-
[class.form-control-plaintext]="p?.plaintext"
|
|
958
|
-
[class.is-invalid]="f().invalid() && f().touched()"
|
|
959
|
-
[class.is-valid]="f().valid() && f().touched() && p?.validFeedback"
|
|
960
|
-
/>
|
|
961
|
-
}
|
|
962
|
-
@default {
|
|
963
|
-
<input
|
|
964
|
-
type="text"
|
|
965
|
-
[field]="f"
|
|
966
|
-
[id]="key()"
|
|
967
|
-
[placeholder]="(placeholder() | dynamicText | async) ?? ''"
|
|
968
|
-
[attr.tabindex]="tabIndex()"
|
|
969
|
-
[attr.aria-invalid]="ariaInvalid"
|
|
970
|
-
[attr.aria-required]="ariaRequired"
|
|
971
|
-
[attr.aria-describedby]="ariaDescribedBy"
|
|
972
|
-
class="form-control"
|
|
973
|
-
[class.form-control-sm]="effectiveSize === 'sm'"
|
|
974
|
-
[class.form-control-lg]="effectiveSize === 'lg'"
|
|
975
|
-
[class.form-control-plaintext]="p?.plaintext"
|
|
976
|
-
[class.is-invalid]="f().invalid() && f().touched()"
|
|
977
|
-
[class.is-valid]="f().valid() && f().touched() && p?.validFeedback"
|
|
978
|
-
/>
|
|
979
|
-
}
|
|
980
|
-
}
|
|
718
|
+
<input
|
|
719
|
+
#inputRef
|
|
720
|
+
[type]="p?.type ?? 'text'"
|
|
721
|
+
[field]="f"
|
|
722
|
+
[id]="key()"
|
|
723
|
+
[placeholder]="(placeholder() | dynamicText | async) ?? ''"
|
|
724
|
+
[attr.tabindex]="tabIndex()"
|
|
725
|
+
[attr.aria-invalid]="ariaInvalid"
|
|
726
|
+
[attr.aria-required]="ariaRequired"
|
|
727
|
+
[attr.aria-describedby]="ariaDescribedBy"
|
|
728
|
+
class="form-control"
|
|
729
|
+
[class.form-control-sm]="effectiveSize === 'sm'"
|
|
730
|
+
[class.form-control-lg]="effectiveSize === 'lg'"
|
|
731
|
+
[class.form-control-plaintext]="p?.plaintext"
|
|
732
|
+
[class.is-invalid]="f().invalid() && f().touched()"
|
|
733
|
+
[class.is-valid]="f().valid() && f().touched() && p?.validFeedback"
|
|
734
|
+
/>
|
|
981
735
|
@if (label()) {
|
|
982
736
|
<label [for]="key()">{{ label() | dynamicText | async }}</label>
|
|
983
737
|
}
|
|
@@ -996,116 +750,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.5", ngImpor
|
|
|
996
750
|
@if (label()) {
|
|
997
751
|
<label [for]="key()" class="form-label">{{ label() | dynamicText | async }}</label>
|
|
998
752
|
}
|
|
999
|
-
|
|
1000
|
-
|
|
1001
|
-
|
|
1002
|
-
|
|
1003
|
-
|
|
1004
|
-
|
|
1005
|
-
|
|
1006
|
-
|
|
1007
|
-
|
|
1008
|
-
|
|
1009
|
-
|
|
1010
|
-
|
|
1011
|
-
|
|
1012
|
-
|
|
1013
|
-
|
|
1014
|
-
|
|
1015
|
-
|
|
1016
|
-
/>
|
|
1017
|
-
}
|
|
1018
|
-
@case ('password') {
|
|
1019
|
-
<input
|
|
1020
|
-
type="password"
|
|
1021
|
-
[field]="f"
|
|
1022
|
-
[id]="key()"
|
|
1023
|
-
[placeholder]="(placeholder() | dynamicText | async) ?? ''"
|
|
1024
|
-
[attr.tabindex]="tabIndex()"
|
|
1025
|
-
[attr.aria-invalid]="ariaInvalid"
|
|
1026
|
-
[attr.aria-required]="ariaRequired"
|
|
1027
|
-
[attr.aria-describedby]="ariaDescribedBy"
|
|
1028
|
-
class="form-control"
|
|
1029
|
-
[class.form-control-sm]="effectiveSize === 'sm'"
|
|
1030
|
-
[class.form-control-lg]="effectiveSize === 'lg'"
|
|
1031
|
-
[class.form-control-plaintext]="p?.plaintext"
|
|
1032
|
-
[class.is-invalid]="f().invalid() && f().touched()"
|
|
1033
|
-
[class.is-valid]="f().valid() && f().touched() && p?.validFeedback"
|
|
1034
|
-
/>
|
|
1035
|
-
}
|
|
1036
|
-
@case ('number') {
|
|
1037
|
-
<input
|
|
1038
|
-
type="number"
|
|
1039
|
-
[field]="f"
|
|
1040
|
-
[id]="key()"
|
|
1041
|
-
[placeholder]="(placeholder() | dynamicText | async) ?? ''"
|
|
1042
|
-
[attr.tabindex]="tabIndex()"
|
|
1043
|
-
[attr.aria-invalid]="ariaInvalid"
|
|
1044
|
-
[attr.aria-required]="ariaRequired"
|
|
1045
|
-
[attr.aria-describedby]="ariaDescribedBy"
|
|
1046
|
-
class="form-control"
|
|
1047
|
-
[class.form-control-sm]="effectiveSize === 'sm'"
|
|
1048
|
-
[class.form-control-lg]="effectiveSize === 'lg'"
|
|
1049
|
-
[class.form-control-plaintext]="p?.plaintext"
|
|
1050
|
-
[class.is-invalid]="f().invalid() && f().touched()"
|
|
1051
|
-
[class.is-valid]="f().valid() && f().touched() && p?.validFeedback"
|
|
1052
|
-
/>
|
|
1053
|
-
}
|
|
1054
|
-
@case ('tel') {
|
|
1055
|
-
<input
|
|
1056
|
-
type="tel"
|
|
1057
|
-
[field]="f"
|
|
1058
|
-
[id]="key()"
|
|
1059
|
-
[placeholder]="(placeholder() | dynamicText | async) ?? ''"
|
|
1060
|
-
[attr.tabindex]="tabIndex()"
|
|
1061
|
-
[attr.aria-invalid]="ariaInvalid"
|
|
1062
|
-
[attr.aria-required]="ariaRequired"
|
|
1063
|
-
[attr.aria-describedby]="ariaDescribedBy"
|
|
1064
|
-
class="form-control"
|
|
1065
|
-
[class.form-control-sm]="effectiveSize === 'sm'"
|
|
1066
|
-
[class.form-control-lg]="effectiveSize === 'lg'"
|
|
1067
|
-
[class.form-control-plaintext]="p?.plaintext"
|
|
1068
|
-
[class.is-invalid]="f().invalid() && f().touched()"
|
|
1069
|
-
[class.is-valid]="f().valid() && f().touched() && p?.validFeedback"
|
|
1070
|
-
/>
|
|
1071
|
-
}
|
|
1072
|
-
@case ('url') {
|
|
1073
|
-
<input
|
|
1074
|
-
type="url"
|
|
1075
|
-
[field]="f"
|
|
1076
|
-
[id]="key()"
|
|
1077
|
-
[placeholder]="(placeholder() | dynamicText | async) ?? ''"
|
|
1078
|
-
[attr.tabindex]="tabIndex()"
|
|
1079
|
-
[attr.aria-invalid]="ariaInvalid"
|
|
1080
|
-
[attr.aria-required]="ariaRequired"
|
|
1081
|
-
[attr.aria-describedby]="ariaDescribedBy"
|
|
1082
|
-
class="form-control"
|
|
1083
|
-
[class.form-control-sm]="effectiveSize === 'sm'"
|
|
1084
|
-
[class.form-control-lg]="effectiveSize === 'lg'"
|
|
1085
|
-
[class.form-control-plaintext]="p?.plaintext"
|
|
1086
|
-
[class.is-invalid]="f().invalid() && f().touched()"
|
|
1087
|
-
[class.is-valid]="f().valid() && f().touched() && p?.validFeedback"
|
|
1088
|
-
/>
|
|
1089
|
-
}
|
|
1090
|
-
@default {
|
|
1091
|
-
<input
|
|
1092
|
-
type="text"
|
|
1093
|
-
[field]="f"
|
|
1094
|
-
[id]="key()"
|
|
1095
|
-
[placeholder]="(placeholder() | dynamicText | async) ?? ''"
|
|
1096
|
-
[attr.tabindex]="tabIndex()"
|
|
1097
|
-
[attr.aria-invalid]="ariaInvalid"
|
|
1098
|
-
[attr.aria-required]="ariaRequired"
|
|
1099
|
-
[attr.aria-describedby]="ariaDescribedBy"
|
|
1100
|
-
class="form-control"
|
|
1101
|
-
[class.form-control-sm]="effectiveSize === 'sm'"
|
|
1102
|
-
[class.form-control-lg]="effectiveSize === 'lg'"
|
|
1103
|
-
[class.form-control-plaintext]="p?.plaintext"
|
|
1104
|
-
[class.is-invalid]="f().invalid() && f().touched()"
|
|
1105
|
-
[class.is-valid]="f().valid() && f().touched() && p?.validFeedback"
|
|
1106
|
-
/>
|
|
1107
|
-
}
|
|
1108
|
-
}
|
|
753
|
+
<input
|
|
754
|
+
#inputRef
|
|
755
|
+
[type]="p?.type ?? 'text'"
|
|
756
|
+
[field]="f"
|
|
757
|
+
[id]="key()"
|
|
758
|
+
[placeholder]="(placeholder() | dynamicText | async) ?? ''"
|
|
759
|
+
[attr.tabindex]="tabIndex()"
|
|
760
|
+
[attr.aria-invalid]="ariaInvalid"
|
|
761
|
+
[attr.aria-required]="ariaRequired"
|
|
762
|
+
[attr.aria-describedby]="ariaDescribedBy"
|
|
763
|
+
class="form-control"
|
|
764
|
+
[class.form-control-sm]="effectiveSize === 'sm'"
|
|
765
|
+
[class.form-control-lg]="effectiveSize === 'lg'"
|
|
766
|
+
[class.form-control-plaintext]="p?.plaintext"
|
|
767
|
+
[class.is-invalid]="f().invalid() && f().touched()"
|
|
768
|
+
[class.is-valid]="f().valid() && f().touched() && p?.validFeedback"
|
|
769
|
+
/>
|
|
1109
770
|
@if (p?.helpText) {
|
|
1110
771
|
<div class="form-text" [id]="helpTextId()">
|
|
1111
772
|
{{ p?.helpText | dynamicText | async }}
|
|
@@ -1127,41 +788,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.5", ngImpor
|
|
|
1127
788
|
'[class]': 'className()',
|
|
1128
789
|
'[attr.hidden]': 'field()().hidden() || null',
|
|
1129
790
|
}, styles: [":host{--df-bs-field-gap: .5rem;--df-bs-label-font-weight: 500;--df-bs-label-color: inherit;--df-bs-hint-color: var(--bs-secondary-color, #6c757d);--df-bs-hint-font-size: .875rem;--df-bs-error-color: var(--bs-danger, #dc3545);--df-bs-error-font-size: .875rem}.df-bs-field{display:flex;flex-direction:column;gap:var(--df-bs-field-gap);width:100%;margin-bottom:1rem}.df-bs-label{font-weight:var(--df-bs-label-font-weight);color:var(--df-bs-label-color);margin-bottom:0}.df-bs-hint{color:var(--df-bs-hint-color);font-size:var(--df-bs-hint-font-size);margin-top:.25rem}.df-bs-field:has(.df-bs-hint){margin-bottom:.5rem}\n", ":host([hidden]){display:none!important}\n"] }]
|
|
1130
|
-
}], propDecorators: { field: [{ type: i0.Input, args: [{ isSignal: true, alias: "field", required: true }] }], key: [{ type: i0.Input, args: [{ isSignal: true, alias: "key", required: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], className: [{ type: i0.Input, args: [{ isSignal: true, alias: "className", required: false }] }], tabIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "tabIndex", required: false }] }], props: [{ type: i0.Input, args: [{ isSignal: true, alias: "props", required: false }] }], validationMessages: [{ type: i0.Input, args: [{ isSignal: true, alias: "validationMessages", required: false }] }], defaultValidationMessages: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultValidationMessages", required: false }] }] } });
|
|
791
|
+
}], propDecorators: { field: [{ type: i0.Input, args: [{ isSignal: true, alias: "field", required: true }] }], key: [{ type: i0.Input, args: [{ isSignal: true, alias: "key", required: true }] }], inputRef: [{ type: i0.ViewChild, args: ['inputRef', { isSignal: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], className: [{ type: i0.Input, args: [{ isSignal: true, alias: "className", required: false }] }], tabIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "tabIndex", required: false }] }], props: [{ type: i0.Input, args: [{ isSignal: true, alias: "props", required: false }] }], validationMessages: [{ type: i0.Input, args: [{ isSignal: true, alias: "validationMessages", required: false }] }], defaultValidationMessages: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultValidationMessages", required: false }] }] } });
|
|
1131
792
|
|
|
1132
793
|
var bsInput_component = /*#__PURE__*/Object.freeze({
|
|
1133
794
|
__proto__: null,
|
|
1134
795
|
default: BsInputFieldComponent
|
|
1135
796
|
});
|
|
1136
797
|
|
|
1137
|
-
/**
|
|
1138
|
-
* Performs a deep equality comparison between two values
|
|
1139
|
-
*/
|
|
1140
|
-
function isEqual(a, b) {
|
|
1141
|
-
if (a === b)
|
|
1142
|
-
return true;
|
|
1143
|
-
if (a == null || b == null)
|
|
1144
|
-
return false;
|
|
1145
|
-
if (typeof a !== typeof b)
|
|
1146
|
-
return false;
|
|
1147
|
-
if (a instanceof Date && b instanceof Date) {
|
|
1148
|
-
return a.getTime() === b.getTime();
|
|
1149
|
-
}
|
|
1150
|
-
if (Array.isArray(a) && Array.isArray(b)) {
|
|
1151
|
-
if (a.length !== b.length)
|
|
1152
|
-
return false;
|
|
1153
|
-
return a.every((item, index) => isEqual(item, b[index]));
|
|
1154
|
-
}
|
|
1155
|
-
if (typeof a === 'object' && typeof b === 'object') {
|
|
1156
|
-
const keysA = Object.keys(a);
|
|
1157
|
-
const keysB = Object.keys(b);
|
|
1158
|
-
if (keysA.length !== keysB.length)
|
|
1159
|
-
return false;
|
|
1160
|
-
return keysA.every((key) => keysB.includes(key) && isEqual(a[key], b[key]));
|
|
1161
|
-
}
|
|
1162
|
-
return Object.is(a, b);
|
|
1163
|
-
}
|
|
1164
|
-
|
|
1165
798
|
class BsMultiCheckboxFieldComponent {
|
|
1166
799
|
field = input.required(...(ngDevMode ? [{ debugName: "field" }] : []));
|
|
1167
800
|
key = input.required(...(ngDevMode ? [{ debugName: "key" }] : []));
|
|
@@ -1232,8 +865,8 @@ class BsMultiCheckboxFieldComponent {
|
|
|
1232
865
|
});
|
|
1233
866
|
return ids.length > 0 ? ids.join(' ') : null;
|
|
1234
867
|
}, ...(ngDevMode ? [{ debugName: "ariaDescribedBy" }] : []));
|
|
1235
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.
|
|
1236
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.
|
|
868
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: BsMultiCheckboxFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
869
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.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 } }, host: { properties: { "class": "className() || \"\"", "id": "`${key()}`", "attr.data-testid": "key()", "attr.hidden": "field()().hidden() || null" } }, ngImport: i0, template: `
|
|
1237
870
|
@let f = field();
|
|
1238
871
|
@let ariaInvalid = this.ariaInvalid(); @let ariaRequired = this.ariaRequired();
|
|
1239
872
|
@let ariaDescribedBy = this.ariaDescribedBy();
|
|
@@ -1279,7 +912,7 @@ class BsMultiCheckboxFieldComponent {
|
|
|
1279
912
|
}
|
|
1280
913
|
`, isInline: true, styles: [":host{--df-bs-field-gap: .5rem;--df-bs-label-font-weight: 500;--df-bs-label-color: inherit;--df-bs-hint-color: var(--bs-secondary-color, #6c757d);--df-bs-hint-font-size: .875rem;--df-bs-error-color: var(--bs-danger, #dc3545);--df-bs-error-font-size: .875rem}.df-bs-field{display:flex;flex-direction:column;gap:var(--df-bs-field-gap);width:100%;margin-bottom:1rem}.df-bs-label{font-weight:var(--df-bs-label-font-weight);color:var(--df-bs-label-color);margin-bottom:0}.df-bs-hint{color:var(--df-bs-hint-color);font-size:var(--df-bs-hint-font-size);margin-top:.25rem}.df-bs-field:has(.df-bs-hint){margin-bottom:.5rem}\n", ":host{display:block}.checkbox-group{margin-bottom:.5rem}:host([hidden]){display:none!important}\n"], dependencies: [{ kind: "pipe", type: DynamicTextPipe, name: "dynamicText" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1281
914
|
}
|
|
1282
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.
|
|
915
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: BsMultiCheckboxFieldComponent, decorators: [{
|
|
1283
916
|
type: Component,
|
|
1284
917
|
args: [{ selector: 'df-bs-multi-checkbox', imports: [DynamicTextPipe, AsyncPipe], template: `
|
|
1285
918
|
@let f = field();
|
|
@@ -1359,8 +992,8 @@ class BsRadioGroupComponent {
|
|
|
1359
992
|
this.value.set(newValue);
|
|
1360
993
|
}
|
|
1361
994
|
}
|
|
1362
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.
|
|
1363
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.
|
|
995
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: BsRadioGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
996
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: BsRadioGroupComponent, isStandalone: true, selector: "df-bs-radio-group", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: true, transformFunction: null }, properties: { classPropertyName: "properties", publicName: "properties", isSignal: true, isRequired: false, transformFunction: null }, ariaDescribedBy: { classPropertyName: "ariaDescribedBy", publicName: "ariaDescribedBy", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, ngImport: i0, template: `
|
|
1364
997
|
@let props = properties();
|
|
1365
998
|
@let ariaDescribedBy = this.ariaDescribedBy();
|
|
1366
999
|
@if (props?.buttonGroup) {
|
|
@@ -1410,7 +1043,7 @@ class BsRadioGroupComponent {
|
|
|
1410
1043
|
}
|
|
1411
1044
|
`, isInline: true, styles: [":host{display:block}\n"], dependencies: [{ kind: "pipe", type: DynamicTextPipe, name: "dynamicText" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1412
1045
|
}
|
|
1413
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.
|
|
1046
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: BsRadioGroupComponent, decorators: [{
|
|
1414
1047
|
type: Component,
|
|
1415
1048
|
args: [{ selector: 'df-bs-radio-group', imports: [DynamicTextPipe, AsyncPipe], template: `
|
|
1416
1049
|
@let props = properties();
|
|
@@ -1500,8 +1133,8 @@ class BsRadioFieldComponent {
|
|
|
1500
1133
|
});
|
|
1501
1134
|
return ids.length > 0 ? ids.join(' ') : null;
|
|
1502
1135
|
}, ...(ngDevMode ? [{ debugName: "ariaDescribedBy" }] : []));
|
|
1503
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.
|
|
1504
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.
|
|
1136
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: BsRadioFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1137
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.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 }, validationMessages: { classPropertyName: "validationMessages", publicName: "validationMessages", isSignal: true, isRequired: false, transformFunction: null }, defaultValidationMessages: { classPropertyName: "defaultValidationMessages", publicName: "defaultValidationMessages", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "id": "`${key()}`", "attr.data-testid": "key()", "class": "className()", "attr.hidden": "field()().hidden() || null" } }, ngImport: i0, template: `
|
|
1505
1138
|
@let f = field();
|
|
1506
1139
|
@let ariaDescribedBy = this.ariaDescribedBy();
|
|
1507
1140
|
|
|
@@ -1527,7 +1160,7 @@ class BsRadioFieldComponent {
|
|
|
1527
1160
|
</div>
|
|
1528
1161
|
`, isInline: true, styles: [":host{--df-bs-field-gap: .5rem;--df-bs-label-font-weight: 500;--df-bs-label-color: inherit;--df-bs-hint-color: var(--bs-secondary-color, #6c757d);--df-bs-hint-font-size: .875rem;--df-bs-error-color: var(--bs-danger, #dc3545);--df-bs-error-font-size: .875rem}.df-bs-field{display:flex;flex-direction:column;gap:var(--df-bs-field-gap);width:100%;margin-bottom:1rem}.df-bs-label{font-weight:var(--df-bs-label-font-weight);color:var(--df-bs-label-color);margin-bottom:0}.df-bs-hint{color:var(--df-bs-hint-color);font-size:var(--df-bs-hint-font-size);margin-top:.25rem}.df-bs-field:has(.df-bs-hint){margin-bottom:.5rem}\n", ":host{display:block}:host([hidden]){display:none!important}\n"], dependencies: [{ kind: "component", type: BsRadioGroupComponent, selector: "df-bs-radio-group", inputs: ["value", "disabled", "readonly", "name", "label", "options", "properties", "ariaDescribedBy"], outputs: ["valueChange"] }, { kind: "directive", type: Field, selector: "[field]", inputs: ["field"] }, { kind: "pipe", type: DynamicTextPipe, name: "dynamicText" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1529
1162
|
}
|
|
1530
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.
|
|
1163
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: BsRadioFieldComponent, decorators: [{
|
|
1531
1164
|
type: Component,
|
|
1532
1165
|
args: [{ selector: 'df-bs-radio', imports: [BsRadioGroupComponent, Field, DynamicTextPipe, AsyncPipe], template: `
|
|
1533
1166
|
@let f = field();
|
|
@@ -1611,8 +1244,8 @@ class BsSelectFieldComponent {
|
|
|
1611
1244
|
});
|
|
1612
1245
|
return ids.length > 0 ? ids.join(' ') : null;
|
|
1613
1246
|
}, ...(ngDevMode ? [{ debugName: "ariaDescribedBy" }] : []));
|
|
1614
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.
|
|
1615
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.
|
|
1247
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: BsSelectFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1248
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.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 } }, host: { properties: { "id": "`${key()}`", "attr.data-testid": "key()", "class": "className()", "attr.hidden": "field()().hidden() || null" } }, ngImport: i0, template: `
|
|
1616
1249
|
@let f = field();
|
|
1617
1250
|
@let ariaInvalid = this.ariaInvalid(); @let ariaRequired = this.ariaRequired();
|
|
1618
1251
|
@let ariaDescribedBy = this.ariaDescribedBy();
|
|
@@ -1653,7 +1286,7 @@ class BsSelectFieldComponent {
|
|
|
1653
1286
|
</div>
|
|
1654
1287
|
`, isInline: true, styles: [":host{--df-bs-field-gap: .5rem;--df-bs-label-font-weight: 500;--df-bs-label-color: inherit;--df-bs-hint-color: var(--bs-secondary-color, #6c757d);--df-bs-hint-font-size: .875rem;--df-bs-error-color: var(--bs-danger, #dc3545);--df-bs-error-font-size: .875rem}.df-bs-field{display:flex;flex-direction:column;gap:var(--df-bs-field-gap);width:100%;margin-bottom:1rem}.df-bs-label{font-weight:var(--df-bs-label-font-weight);color:var(--df-bs-label-color);margin-bottom:0}.df-bs-hint{color:var(--df-bs-hint-color);font-size:var(--df-bs-hint-font-size);margin-top:.25rem}.df-bs-field:has(.df-bs-hint){margin-bottom:.5rem}\n", ":host([hidden]){display:none!important}\n"], dependencies: [{ kind: "directive", type: Field, selector: "[field]", inputs: ["field"] }, { kind: "pipe", type: DynamicTextPipe, name: "dynamicText" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1655
1288
|
}
|
|
1656
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.
|
|
1289
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: BsSelectFieldComponent, decorators: [{
|
|
1657
1290
|
type: Component,
|
|
1658
1291
|
args: [{ selector: 'df-bs-select', imports: [Field, DynamicTextPipe, AsyncPipe], template: `
|
|
1659
1292
|
@let f = field();
|
|
@@ -1746,8 +1379,8 @@ class BsSliderFieldComponent {
|
|
|
1746
1379
|
});
|
|
1747
1380
|
return ids.length > 0 ? ids.join(' ') : null;
|
|
1748
1381
|
}, ...(ngDevMode ? [{ debugName: "ariaDescribedBy" }] : []));
|
|
1749
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.
|
|
1750
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.
|
|
1382
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: BsSliderFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1383
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.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 } }, host: { properties: { "class": "className()", "id": "`${key()}`", "attr.data-testid": "key()", "attr.hidden": "field()().hidden() || null" } }, ngImport: i0, template: `
|
|
1751
1384
|
@let f = field();
|
|
1752
1385
|
@let ariaInvalid = this.ariaInvalid(); @let ariaRequired = this.ariaRequired();
|
|
1753
1386
|
@let ariaDescribedBy = this.ariaDescribedBy();
|
|
@@ -1788,7 +1421,7 @@ class BsSliderFieldComponent {
|
|
|
1788
1421
|
</div>
|
|
1789
1422
|
`, isInline: true, styles: [":host{--df-bs-field-gap: .5rem;--df-bs-label-font-weight: 500;--df-bs-label-color: inherit;--df-bs-hint-color: var(--bs-secondary-color, #6c757d);--df-bs-hint-font-size: .875rem;--df-bs-error-color: var(--bs-danger, #dc3545);--df-bs-error-font-size: .875rem}.df-bs-field{display:flex;flex-direction:column;gap:var(--df-bs-field-gap);width:100%;margin-bottom:1rem}.df-bs-label{font-weight:var(--df-bs-label-font-weight);color:var(--df-bs-label-color);margin-bottom:0}.df-bs-hint{color:var(--df-bs-hint-color);font-size:var(--df-bs-hint-font-size);margin-top:.25rem}.df-bs-field:has(.df-bs-hint){margin-bottom:.5rem}\n", ":host{display:block}:host([hidden]){display:none!important}\n"], dependencies: [{ kind: "directive", type: Field, selector: "[field]", inputs: ["field"] }, { kind: "directive", type: InputConstraintsDirective, selector: "[dfBsInputConstraints]", inputs: ["dfMin", "dfMax", "dfStep"] }, { kind: "pipe", type: DynamicTextPipe, name: "dynamicText" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1790
1423
|
}
|
|
1791
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.
|
|
1424
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: BsSliderFieldComponent, decorators: [{
|
|
1792
1425
|
type: Component,
|
|
1793
1426
|
args: [{ selector: 'df-bs-slider', imports: [Field, DynamicTextPipe, AsyncPipe, InputConstraintsDirective], template: `
|
|
1794
1427
|
@let f = field();
|
|
@@ -1878,8 +1511,8 @@ class BsTextareaFieldComponent {
|
|
|
1878
1511
|
});
|
|
1879
1512
|
return ids.length > 0 ? ids.join(' ') : null;
|
|
1880
1513
|
}, ...(ngDevMode ? [{ debugName: "ariaDescribedBy" }] : []));
|
|
1881
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.
|
|
1882
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.
|
|
1514
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: BsTextareaFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1515
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.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 } }, host: { properties: { "id": "`${key()}`", "attr.data-testid": "key()", "class": "className()", "attr.hidden": "field()().hidden() || null" } }, ngImport: i0, template: `
|
|
1883
1516
|
@let f = field(); @let p = props(); @let ariaInvalid = this.ariaInvalid(); @let ariaRequired = this.ariaRequired();
|
|
1884
1517
|
@let ariaDescribedBy = this.ariaDescribedBy();
|
|
1885
1518
|
@if (p?.floatingLabel) {
|
|
@@ -1953,7 +1586,7 @@ class BsTextareaFieldComponent {
|
|
|
1953
1586
|
}
|
|
1954
1587
|
`, isInline: true, styles: [":host{--df-bs-field-gap: .5rem;--df-bs-label-font-weight: 500;--df-bs-label-color: inherit;--df-bs-hint-color: var(--bs-secondary-color, #6c757d);--df-bs-hint-font-size: .875rem;--df-bs-error-color: var(--bs-danger, #dc3545);--df-bs-error-font-size: .875rem}.df-bs-field{display:flex;flex-direction:column;gap:var(--df-bs-field-gap);width:100%;margin-bottom:1rem}.df-bs-label{font-weight:var(--df-bs-label-font-weight);color:var(--df-bs-label-color);margin-bottom:0}.df-bs-hint{color:var(--df-bs-hint-color);font-size:var(--df-bs-hint-font-size);margin-top:.25rem}.df-bs-field:has(.df-bs-hint){margin-bottom:.5rem}\n", ":host([hidden]){display:none!important}\n"], dependencies: [{ kind: "directive", type: Field, selector: "[field]", inputs: ["field"] }, { kind: "pipe", type: DynamicTextPipe, name: "dynamicText" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1955
1588
|
}
|
|
1956
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.
|
|
1589
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: BsTextareaFieldComponent, decorators: [{
|
|
1957
1590
|
type: Component,
|
|
1958
1591
|
args: [{ selector: 'df-bs-textarea', imports: [Field, DynamicTextPipe, AsyncPipe], template: `
|
|
1959
1592
|
@let f = field(); @let p = props(); @let ariaInvalid = this.ariaInvalid(); @let ariaRequired = this.ariaRequired();
|
|
@@ -2076,8 +1709,8 @@ class BsToggleFieldComponent {
|
|
|
2076
1709
|
});
|
|
2077
1710
|
return ids.length > 0 ? ids.join(' ') : null;
|
|
2078
1711
|
}, ...(ngDevMode ? [{ debugName: "ariaDescribedBy" }] : []));
|
|
2079
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.
|
|
2080
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.
|
|
1712
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: BsToggleFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1713
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.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 } }, host: { properties: { "class": "className()", "id": "`${key()}`", "attr.data-testid": "key()", "attr.hidden": "field()().hidden() || null" } }, ngImport: i0, template: `
|
|
2081
1714
|
@let f = field();
|
|
2082
1715
|
@let ariaInvalid = this.ariaInvalid(); @let ariaRequired = this.ariaRequired();
|
|
2083
1716
|
@let ariaDescribedBy = this.ariaDescribedBy();
|
|
@@ -2117,7 +1750,7 @@ class BsToggleFieldComponent {
|
|
|
2117
1750
|
}
|
|
2118
1751
|
`, isInline: true, styles: [":host{--df-bs-field-gap: .5rem;--df-bs-label-font-weight: 500;--df-bs-label-color: inherit;--df-bs-hint-color: var(--bs-secondary-color, #6c757d);--df-bs-hint-font-size: .875rem;--df-bs-error-color: var(--bs-danger, #dc3545);--df-bs-error-font-size: .875rem}.df-bs-field{display:flex;flex-direction:column;gap:var(--df-bs-field-gap);width:100%;margin-bottom:1rem}.df-bs-label{font-weight:var(--df-bs-label-font-weight);color:var(--df-bs-label-color);margin-bottom:0}.df-bs-hint{color:var(--df-bs-hint-color);font-size:var(--df-bs-hint-font-size);margin-top:.25rem}.df-bs-field:has(.df-bs-hint){margin-bottom:.5rem}\n", ":host{display:block}:host([hidden]){display:none!important}.form-switch-sm .form-check-input{width:1.75rem;height:1rem;font-size:.875rem}.form-switch-lg .form-check-input{width:3rem;height:1.75rem;font-size:1.125rem}\n"], dependencies: [{ kind: "directive", type: Field, selector: "[field]", inputs: ["field"] }, { kind: "pipe", type: DynamicTextPipe, name: "dynamicText" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
2119
1752
|
}
|
|
2120
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.
|
|
1753
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: BsToggleFieldComponent, decorators: [{
|
|
2121
1754
|
type: Component,
|
|
2122
1755
|
args: [{ selector: 'df-bs-toggle', imports: [Field, DynamicTextPipe, AsyncPipe], template: `
|
|
2123
1756
|
@let f = field();
|
|
@@ -2349,11 +1982,12 @@ function addArrayItemButtonFieldMapper(fieldDef) {
|
|
|
2349
1982
|
// Try to get array context (available when inside an array)
|
|
2350
1983
|
// Use optional injection so it doesn't fail when outside an array
|
|
2351
1984
|
const arrayContext = inject(ARRAY_CONTEXT, { optional: true });
|
|
1985
|
+
const logger = inject(DynamicFormLogger);
|
|
2352
1986
|
// Determine the target array key
|
|
2353
1987
|
// Priority: explicit arrayKey from fieldDef > arrayKey from context
|
|
2354
1988
|
const targetArrayKey = fieldDef.arrayKey ?? arrayContext?.arrayKey;
|
|
2355
1989
|
if (!targetArrayKey) {
|
|
2356
|
-
|
|
1990
|
+
logger.warn(`addArrayItem button "${fieldDef.key}" has no array context. ` +
|
|
2357
1991
|
'Either place it inside an array field, or provide an explicit arrayKey property.');
|
|
2358
1992
|
}
|
|
2359
1993
|
// Build base inputs (static, from field definition)
|
|
@@ -2404,11 +2038,12 @@ function removeArrayItemButtonFieldMapper(fieldDef) {
|
|
|
2404
2038
|
// Try to get array context (available when inside an array)
|
|
2405
2039
|
// Use optional injection so it doesn't fail when outside an array
|
|
2406
2040
|
const arrayContext = inject(ARRAY_CONTEXT, { optional: true });
|
|
2041
|
+
const logger = inject(DynamicFormLogger);
|
|
2407
2042
|
// Determine the target array key
|
|
2408
2043
|
// Priority: explicit arrayKey from fieldDef > arrayKey from context
|
|
2409
2044
|
const targetArrayKey = fieldDef.arrayKey ?? arrayContext?.arrayKey;
|
|
2410
2045
|
if (!targetArrayKey) {
|
|
2411
|
-
|
|
2046
|
+
logger.warn(`removeArrayItem button "${fieldDef.key}" has no array context. ` +
|
|
2412
2047
|
'Either place it inside an array field, or provide an explicit arrayKey property.');
|
|
2413
2048
|
}
|
|
2414
2049
|
// Build base inputs (static, from field definition)
|