@ng-forge/dynamic-forms-bootstrap 1.3.0-next.1 → 1.3.0-next.3
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.
- package/fesm2022/ng-forge-dynamic-forms-bootstrap-bs-field-errors-wrapper.component-42hynKVO.mjs +56 -0
- package/fesm2022/ng-forge-dynamic-forms-bootstrap-bs-field-errors-wrapper.component-42hynKVO.mjs.map +1 -0
- package/fesm2022/ng-forge-dynamic-forms-bootstrap-lazy-addon-button.mjs +64 -37
- package/fesm2022/ng-forge-dynamic-forms-bootstrap-lazy-addon-button.mjs.map +1 -1
- package/fesm2022/ng-forge-dynamic-forms-bootstrap-lazy-addon-icon.mjs +92 -34
- package/fesm2022/ng-forge-dynamic-forms-bootstrap-lazy-addon-icon.mjs.map +1 -1
- package/fesm2022/ng-forge-dynamic-forms-bootstrap-lazy-button.mjs +94 -49
- package/fesm2022/ng-forge-dynamic-forms-bootstrap-lazy-button.mjs.map +1 -1
- package/fesm2022/ng-forge-dynamic-forms-bootstrap-lazy-checkbox.mjs +97 -23
- package/fesm2022/ng-forge-dynamic-forms-bootstrap-lazy-checkbox.mjs.map +1 -1
- package/fesm2022/ng-forge-dynamic-forms-bootstrap-lazy-datepicker.mjs +169 -40
- package/fesm2022/ng-forge-dynamic-forms-bootstrap-lazy-datepicker.mjs.map +1 -1
- package/fesm2022/ng-forge-dynamic-forms-bootstrap-lazy-input.mjs +180 -88
- package/fesm2022/ng-forge-dynamic-forms-bootstrap-lazy-input.mjs.map +1 -1
- package/fesm2022/ng-forge-dynamic-forms-bootstrap-lazy-multi-checkbox.mjs +143 -66
- package/fesm2022/ng-forge-dynamic-forms-bootstrap-lazy-multi-checkbox.mjs.map +1 -1
- package/fesm2022/ng-forge-dynamic-forms-bootstrap-lazy-radio.mjs +326 -61
- package/fesm2022/ng-forge-dynamic-forms-bootstrap-lazy-radio.mjs.map +1 -1
- package/fesm2022/ng-forge-dynamic-forms-bootstrap-lazy-select.mjs +123 -33
- package/fesm2022/ng-forge-dynamic-forms-bootstrap-lazy-select.mjs.map +1 -1
- package/fesm2022/ng-forge-dynamic-forms-bootstrap-lazy-slider.mjs +161 -30
- package/fesm2022/ng-forge-dynamic-forms-bootstrap-lazy-slider.mjs.map +1 -1
- package/fesm2022/ng-forge-dynamic-forms-bootstrap-lazy-textarea.mjs +97 -23
- package/fesm2022/ng-forge-dynamic-forms-bootstrap-lazy-textarea.mjs.map +1 -1
- package/fesm2022/ng-forge-dynamic-forms-bootstrap-lazy-toggle.mjs +97 -23
- package/fesm2022/ng-forge-dynamic-forms-bootstrap-lazy-toggle.mjs.map +1 -1
- package/fesm2022/ng-forge-dynamic-forms-bootstrap-shared.mjs +100 -41
- package/fesm2022/ng-forge-dynamic-forms-bootstrap-shared.mjs.map +1 -1
- package/fesm2022/ng-forge-dynamic-forms-bootstrap.mjs +238 -251
- package/fesm2022/ng-forge-dynamic-forms-bootstrap.mjs.map +1 -1
- package/package.json +2 -2
- package/types/ng-forge-dynamic-forms-bootstrap-lazy-addon-button.d.ts +18 -18
- package/types/ng-forge-dynamic-forms-bootstrap-lazy-addon-icon.d.ts +24 -17
- package/types/ng-forge-dynamic-forms-bootstrap-lazy-button.d.ts +94 -88
- package/types/ng-forge-dynamic-forms-bootstrap-lazy-checkbox.d.ts +24 -18
- package/types/ng-forge-dynamic-forms-bootstrap-lazy-datepicker.d.ts +49 -28
- package/types/ng-forge-dynamic-forms-bootstrap-lazy-input.d.ts +51 -38
- package/types/ng-forge-dynamic-forms-bootstrap-lazy-multi-checkbox.d.ts +34 -23
- package/types/ng-forge-dynamic-forms-bootstrap-lazy-radio.d.ts +30 -19
- package/types/ng-forge-dynamic-forms-bootstrap-lazy-select.d.ts +36 -24
- package/types/ng-forge-dynamic-forms-bootstrap-lazy-slider.d.ts +56 -35
- package/types/ng-forge-dynamic-forms-bootstrap-lazy-textarea.d.ts +24 -18
- package/types/ng-forge-dynamic-forms-bootstrap-lazy-toggle.d.ts +23 -17
- package/types/ng-forge-dynamic-forms-bootstrap-shared.d.ts +78 -71
- package/types/ng-forge-dynamic-forms-bootstrap.d.ts +225 -251
- package/fesm2022/ng-forge-dynamic-forms-bootstrap-bs-field-errors-wrapper.component-D4qTxFSp.mjs +0 -25
- package/fesm2022/ng-forge-dynamic-forms-bootstrap-bs-field-errors-wrapper.component-D4qTxFSp.mjs.map +0 -1
|
@@ -1,55 +1,76 @@
|
|
|
1
|
-
import { AsyncPipe } from
|
|
2
|
-
import * as i0 from
|
|
3
|
-
import {
|
|
4
|
-
import { FormField } from
|
|
5
|
-
import { DynamicFormLogger } from
|
|
6
|
-
import * as i1 from
|
|
7
|
-
import {
|
|
8
|
-
import { BOOTSTRAP_CONFIG, BS_INPUT_TYPE_OVERRIDE, runBsPresetAction } from
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
1
|
+
import { AsyncPipe } from "@angular/common";
|
|
2
|
+
import * as i0 from "@angular/core";
|
|
3
|
+
import { ChangeDetectionStrategy, Component, computed, forwardRef, inject, input, signal } from "@angular/core";
|
|
4
|
+
import { FormField } from "@angular/forms/signals";
|
|
5
|
+
import { DynamicFormLogger } from "@ng-forge/dynamic-forms";
|
|
6
|
+
import * as i1 from "@ng-forge/dynamic-forms/integration";
|
|
7
|
+
import { ADDON_PRESET_HANDLER, DfAddonSlot, DynamicTextPipe, FIELD_SIGNAL_CONTEXT, NgForgeAddons, NgForgeControl, NgForgeFieldHost, injectNgForgeAddons, injectNgForgeField } from "@ng-forge/dynamic-forms/integration";
|
|
8
|
+
import { BOOTSTRAP_CONFIG, BS_INPUT_TYPE_OVERRIDE, runBsPresetAction } from "@ng-forge/dynamic-forms-bootstrap/shared";
|
|
9
|
+
var BsInputFieldComponent = class BsInputFieldComponent {
|
|
10
|
+
bootstrapConfig = inject(BOOTSTRAP_CONFIG, { optional: true });
|
|
11
|
+
ngf = injectNgForgeField();
|
|
12
|
+
ngfa = injectNgForgeAddons();
|
|
13
|
+
props = input(...ngDevMode ? [void 0, { debugName: "props" }] : /* istanbul ignore next */ []);
|
|
14
|
+
fieldInputs = input(...ngDevMode ? [void 0, { debugName: "fieldInputs" }] : /* istanbul ignore next */ []);
|
|
15
|
+
typeOverride = inject(BS_INPUT_TYPE_OVERRIDE);
|
|
16
|
+
size = computed(() => this.props()?.size ?? this.bootstrapConfig?.size, ...ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []);
|
|
17
|
+
floatingLabel = computed(() => this.props()?.floatingLabel ?? this.bootstrapConfig?.floatingLabel ?? false, ...ngDevMode ? [{ debugName: "floatingLabel" }] : /* istanbul ignore next */ []);
|
|
18
|
+
type = computed(() => this.typeOverride() ?? this.props()?.type ?? "text", ...ngDevMode ? [{ debugName: "type" }] : /* istanbul ignore next */ []);
|
|
19
|
+
static ɵfac = i0.ɵɵngDeclareFactory({
|
|
20
|
+
minVersion: "12.0.0",
|
|
21
|
+
version: "22.2.5",
|
|
22
|
+
ngImport: i0,
|
|
23
|
+
type: BsInputFieldComponent,
|
|
24
|
+
deps: [],
|
|
25
|
+
target: i0.ɵɵFactoryTarget.Component
|
|
26
|
+
});
|
|
27
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({
|
|
28
|
+
minVersion: "17.0.0",
|
|
29
|
+
version: "22.2.5",
|
|
30
|
+
type: BsInputFieldComponent,
|
|
31
|
+
isStandalone: true,
|
|
32
|
+
selector: "df-bs-input",
|
|
33
|
+
inputs: {
|
|
34
|
+
props: {
|
|
35
|
+
classPropertyName: "props",
|
|
36
|
+
publicName: "props",
|
|
37
|
+
isSignal: true,
|
|
38
|
+
isRequired: false,
|
|
39
|
+
transformFunction: null
|
|
40
|
+
},
|
|
41
|
+
fieldInputs: {
|
|
42
|
+
classPropertyName: "fieldInputs",
|
|
43
|
+
publicName: "fieldInputs",
|
|
44
|
+
isSignal: true,
|
|
45
|
+
isRequired: false,
|
|
46
|
+
transformFunction: null
|
|
47
|
+
}
|
|
48
|
+
},
|
|
49
|
+
providers: [{
|
|
50
|
+
provide: BS_INPUT_TYPE_OVERRIDE,
|
|
51
|
+
useFactory: () => signal(void 0)
|
|
52
|
+
}, {
|
|
53
|
+
provide: ADDON_PRESET_HANDLER,
|
|
54
|
+
useFactory: () => {
|
|
55
|
+
const typeOverride = inject(BS_INPUT_TYPE_OVERRIDE);
|
|
56
|
+
const fsc = inject(FIELD_SIGNAL_CONTEXT, { optional: true });
|
|
57
|
+
const logger = inject(DynamicFormLogger);
|
|
58
|
+
const host = inject(forwardRef(() => BsInputFieldComponent));
|
|
59
|
+
return { run: (preset, ctx) => {
|
|
60
|
+
const fieldKey = ctx.field.key;
|
|
61
|
+
return runBsPresetAction(preset, ctx, {
|
|
62
|
+
typeOverride,
|
|
63
|
+
fieldValueSetter: ctx.setValue,
|
|
64
|
+
fieldDefaultValueGetter: fsc && fieldKey ? () => fsc.defaultValues()?.[fieldKey] : void 0,
|
|
65
|
+
baselineType: () => host.props()?.type,
|
|
66
|
+
logger
|
|
67
|
+
});
|
|
68
|
+
} };
|
|
69
|
+
}
|
|
70
|
+
}],
|
|
71
|
+
hostDirectives: [{ directive: i1.NgForgeFieldHost }, { directive: i1.NgForgeAddons }],
|
|
72
|
+
ngImport: i0,
|
|
73
|
+
template: `
|
|
53
74
|
@let f = ngf.field(); @let p = props(); @let inputId = ngf.key() + '-input';
|
|
54
75
|
@if (floatingLabel()) {
|
|
55
76
|
<div class="mb-3">
|
|
@@ -175,11 +196,65 @@ class BsInputFieldComponent {
|
|
|
175
196
|
}
|
|
176
197
|
</div>
|
|
177
198
|
}
|
|
178
|
-
`,
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
199
|
+
`,
|
|
200
|
+
isInline: true,
|
|
201
|
+
styles: [".df-bs-field{display:flex;flex-direction:column;gap:var(--df-field-gap, .5rem);width:100%;margin-bottom:var(--df-bs-field-margin-bottom, 1rem)}.df-bs-label{font-weight:var(--df-label-font-weight, 500);color:var(--df-label-color, inherit);margin-bottom:0}.df-bs-hint{color:var(--df-hint-color, var(--bs-secondary-color, #6c757d));font-size:var(--df-hint-font-size, .875rem);margin-top:var(--df-bs-hint-margin-top, .25rem)}.df-bs-field:has(.df-bs-hint){margin-bottom:var(--df-bs-field-with-hint-margin-bottom, .5rem)}:host([hidden]){display:none!important}\n", ":host([hidden]){display:none!important}:host{--df-bs-addon-prefix-outer-padding: .75rem;--df-bs-addon-prefix-inner-padding: .75rem;--df-bs-addon-suffix-inner-padding: .75rem;--df-bs-addon-suffix-outer-padding: .75rem}:host ::ng-deep .input-group>.input-group-text:first-child{padding-left:var(--df-bs-addon-prefix-outer-padding);padding-right:var(--df-bs-addon-prefix-inner-padding)}:host ::ng-deep .input-group>.input-group-text:last-child{padding-left:var(--df-bs-addon-suffix-inner-padding);padding-right:var(--df-bs-addon-suffix-outer-padding)}:host ::ng-deep .input-group-text df-bs-button-addon .btn{--bs-btn-bg: transparent;--bs-btn-color: var(--bs-body-color);--bs-btn-border-color: transparent;--bs-btn-hover-bg: rgba(127, 127, 127, .12);--bs-btn-hover-color: var(--bs-body-color);--bs-btn-hover-border-color: transparent;--bs-btn-active-bg: rgba(127, 127, 127, .18);--bs-btn-active-border-color: transparent;--bs-btn-focus-shadow-rgb: 0, 0, 0;--bs-btn-padding-x: 0;--bs-btn-padding-y: 0;box-shadow:none}:host ::ng-deep .input-group-text df-bs-button-addon .btn:focus-visible{box-shadow:none;outline:2px solid currentColor;outline-offset:2px}\n"],
|
|
202
|
+
dependencies: [
|
|
203
|
+
{
|
|
204
|
+
kind: "directive",
|
|
205
|
+
type: FormField,
|
|
206
|
+
selector: "[formField]",
|
|
207
|
+
inputs: ["formField"],
|
|
208
|
+
exportAs: ["formField"]
|
|
209
|
+
},
|
|
210
|
+
{
|
|
211
|
+
kind: "directive",
|
|
212
|
+
type: NgForgeControl,
|
|
213
|
+
selector: "[ngForgeControl]",
|
|
214
|
+
inputs: ["ngForgeControl"]
|
|
215
|
+
},
|
|
216
|
+
{
|
|
217
|
+
kind: "component",
|
|
218
|
+
type: DfAddonSlot,
|
|
219
|
+
selector: "df-addon-slot",
|
|
220
|
+
inputs: [
|
|
221
|
+
"addon",
|
|
222
|
+
"fieldInputs",
|
|
223
|
+
"hidden"
|
|
224
|
+
]
|
|
225
|
+
},
|
|
226
|
+
{
|
|
227
|
+
kind: "pipe",
|
|
228
|
+
type: DynamicTextPipe,
|
|
229
|
+
name: "dynamicText"
|
|
230
|
+
},
|
|
231
|
+
{
|
|
232
|
+
kind: "pipe",
|
|
233
|
+
type: AsyncPipe,
|
|
234
|
+
name: "async"
|
|
235
|
+
}
|
|
236
|
+
],
|
|
237
|
+
changeDetection: i0.ChangeDetectionStrategy.OnPush
|
|
238
|
+
});
|
|
239
|
+
};
|
|
240
|
+
i0.ɵɵngDeclareClassMetadata({
|
|
241
|
+
minVersion: "12.0.0",
|
|
242
|
+
version: "22.2.5",
|
|
243
|
+
ngImport: i0,
|
|
244
|
+
type: BsInputFieldComponent,
|
|
245
|
+
decorators: [{
|
|
246
|
+
type: Component,
|
|
247
|
+
args: [{
|
|
248
|
+
selector: "df-bs-input",
|
|
249
|
+
imports: [
|
|
250
|
+
FormField,
|
|
251
|
+
DynamicTextPipe,
|
|
252
|
+
AsyncPipe,
|
|
253
|
+
NgForgeControl,
|
|
254
|
+
DfAddonSlot
|
|
255
|
+
],
|
|
256
|
+
hostDirectives: [NgForgeFieldHost, NgForgeAddons],
|
|
257
|
+
template: `
|
|
183
258
|
@let f = ngf.field(); @let p = props(); @let inputId = ngf.key() + '-input';
|
|
184
259
|
@if (floatingLabel()) {
|
|
185
260
|
<div class="mb-3">
|
|
@@ -305,35 +380,52 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImpor
|
|
|
305
380
|
}
|
|
306
381
|
</div>
|
|
307
382
|
}
|
|
308
|
-
`,
|
|
309
|
-
|
|
310
|
-
|
|
311
|
-
|
|
312
|
-
|
|
313
|
-
|
|
314
|
-
|
|
315
|
-
|
|
316
|
-
|
|
317
|
-
|
|
318
|
-
|
|
319
|
-
|
|
320
|
-
|
|
321
|
-
|
|
322
|
-
|
|
323
|
-
|
|
324
|
-
|
|
325
|
-
|
|
326
|
-
|
|
327
|
-
|
|
328
|
-
|
|
329
|
-
|
|
330
|
-
|
|
331
|
-
|
|
332
|
-
|
|
333
|
-
|
|
334
|
-
|
|
335
|
-
|
|
336
|
-
|
|
337
|
-
|
|
383
|
+
`,
|
|
384
|
+
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
385
|
+
providers: [{
|
|
386
|
+
provide: BS_INPUT_TYPE_OVERRIDE,
|
|
387
|
+
useFactory: () => signal(void 0)
|
|
388
|
+
}, {
|
|
389
|
+
provide: ADDON_PRESET_HANDLER,
|
|
390
|
+
useFactory: () => {
|
|
391
|
+
const typeOverride = inject(BS_INPUT_TYPE_OVERRIDE);
|
|
392
|
+
const fsc = inject(FIELD_SIGNAL_CONTEXT, { optional: true });
|
|
393
|
+
const logger = inject(DynamicFormLogger);
|
|
394
|
+
const host = inject(forwardRef(() => BsInputFieldComponent));
|
|
395
|
+
return { run: (preset, ctx) => {
|
|
396
|
+
const fieldKey = ctx.field.key;
|
|
397
|
+
return runBsPresetAction(preset, ctx, {
|
|
398
|
+
typeOverride,
|
|
399
|
+
fieldValueSetter: ctx.setValue,
|
|
400
|
+
fieldDefaultValueGetter: fsc && fieldKey ? () => fsc.defaultValues()?.[fieldKey] : void 0,
|
|
401
|
+
baselineType: () => host.props()?.type,
|
|
402
|
+
logger
|
|
403
|
+
});
|
|
404
|
+
} };
|
|
405
|
+
}
|
|
406
|
+
}],
|
|
407
|
+
styles: [".df-bs-field{display:flex;flex-direction:column;gap:var(--df-field-gap, .5rem);width:100%;margin-bottom:var(--df-bs-field-margin-bottom, 1rem)}.df-bs-label{font-weight:var(--df-label-font-weight, 500);color:var(--df-label-color, inherit);margin-bottom:0}.df-bs-hint{color:var(--df-hint-color, var(--bs-secondary-color, #6c757d));font-size:var(--df-hint-font-size, .875rem);margin-top:var(--df-bs-hint-margin-top, .25rem)}.df-bs-field:has(.df-bs-hint){margin-bottom:var(--df-bs-field-with-hint-margin-bottom, .5rem)}:host([hidden]){display:none!important}\n", ":host([hidden]){display:none!important}:host{--df-bs-addon-prefix-outer-padding: .75rem;--df-bs-addon-prefix-inner-padding: .75rem;--df-bs-addon-suffix-inner-padding: .75rem;--df-bs-addon-suffix-outer-padding: .75rem}:host ::ng-deep .input-group>.input-group-text:first-child{padding-left:var(--df-bs-addon-prefix-outer-padding);padding-right:var(--df-bs-addon-prefix-inner-padding)}:host ::ng-deep .input-group>.input-group-text:last-child{padding-left:var(--df-bs-addon-suffix-inner-padding);padding-right:var(--df-bs-addon-suffix-outer-padding)}:host ::ng-deep .input-group-text df-bs-button-addon .btn{--bs-btn-bg: transparent;--bs-btn-color: var(--bs-body-color);--bs-btn-border-color: transparent;--bs-btn-hover-bg: rgba(127, 127, 127, .12);--bs-btn-hover-color: var(--bs-body-color);--bs-btn-hover-border-color: transparent;--bs-btn-active-bg: rgba(127, 127, 127, .18);--bs-btn-active-border-color: transparent;--bs-btn-focus-shadow-rgb: 0, 0, 0;--bs-btn-padding-x: 0;--bs-btn-padding-y: 0;box-shadow:none}:host ::ng-deep .input-group-text df-bs-button-addon .btn:focus-visible{box-shadow:none;outline:2px solid currentColor;outline-offset:2px}\n"]
|
|
408
|
+
}]
|
|
409
|
+
}],
|
|
410
|
+
propDecorators: {
|
|
411
|
+
props: [{
|
|
412
|
+
type: i0.Input,
|
|
413
|
+
args: [{
|
|
414
|
+
isSignal: true,
|
|
415
|
+
alias: "props",
|
|
416
|
+
required: false
|
|
417
|
+
}]
|
|
418
|
+
}],
|
|
419
|
+
fieldInputs: [{
|
|
420
|
+
type: i0.Input,
|
|
421
|
+
args: [{
|
|
422
|
+
isSignal: true,
|
|
423
|
+
alias: "fieldInputs",
|
|
424
|
+
required: false
|
|
425
|
+
}]
|
|
426
|
+
}]
|
|
427
|
+
}
|
|
428
|
+
});
|
|
338
429
|
export { BsInputFieldComponent };
|
|
339
|
-
|
|
430
|
+
|
|
431
|
+
//# sourceMappingURL=ng-forge-dynamic-forms-bootstrap-lazy-input.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ng-forge-dynamic-forms-bootstrap-lazy-input.mjs","mappings":";;;;;;;;;AA6Oc;;;;AAMH;;AAET,IAKS;;IAGQ;AAER;;AACA;;IAGU;;;AAtBA;AApFjB;AACE;AACA;AACD;AACD;gFAME;;AAEE;AACA;AACA;oBAEA;;AAEE;AACE;AACA;;;;;;AAOC;;;;AAIR;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AApKO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAqIR;AACE;AACA;AACD;AACD;4IAME;;AAEE;AACA;AACA;;;AAIE;AACE;AACA;;;;;;AAOC;;;;AAIR;AACF","names":[],"ignoreList":[],"sources":["../../../../packages/dynamic-forms-bootstrap/src/lib/fields/input/bs-input.component.ts"],"sourcesContent":["import { AsyncPipe } from '@angular/common';\nimport { ChangeDetectionStrategy, Component, computed, forwardRef, inject, input, signal } from '@angular/core';\nimport { FormField } from '@angular/forms/signals';\nimport { AddonActionContext, AddonActionPreset, DynamicFormLogger } from '@ng-forge/dynamic-forms';\nimport { DfAddonSlot } from '@ng-forge/dynamic-forms/integration';\nimport { WrapperFieldInputs } from '@ng-forge/dynamic-forms/integration';\nimport { DynamicTextPipe, FIELD_SIGNAL_CONTEXT } from '@ng-forge/dynamic-forms/integration';\nimport {\n ADDON_PRESET_HANDLER,\n AddonPresetHandler,\n injectNgForgeAddons,\n injectNgForgeField,\n NgForgeAddons,\n NgForgeControl,\n NgForgeFieldHost,\n} from '@ng-forge/dynamic-forms/integration';\nimport { BOOTSTRAP_CONFIG, BS_INPUT_TYPE_OVERRIDE, runBsPresetAction } from '@ng-forge/dynamic-forms-bootstrap/shared';\nimport { BsInputAddon, BsInputProps } from './bs-input.type';\n\n@Component({\n selector: 'df-bs-input',\n imports: [FormField, DynamicTextPipe, AsyncPipe, NgForgeControl, DfAddonSlot],\n styleUrl: '../../styles/_form-field.scss',\n hostDirectives: [NgForgeFieldHost, NgForgeAddons],\n template: `\n @let f = ngf.field(); @let p = props(); @let inputId = ngf.key() + '-input';\n @if (floatingLabel()) {\n <div class=\"mb-3\">\n @if (ngfa.hasAddons()) {\n <div class=\"input-group\">\n @for (a of ngfa.prefixAddons(); track $index) {\n <span class=\"input-group-text\">\n <df-addon-slot [addon]=\"a\" [fieldInputs]=\"fieldInputs()\" [hidden]=\"ngfa.hiddenSignalCache().get(a)\" />\n </span>\n }\n <div class=\"form-floating\">\n <input\n ngForgeControl\n [formField]=\"f\"\n [id]=\"inputId\"\n [type]=\"type()\"\n [placeholder]=\"(ngf.placeholder() | dynamicText | async) ?? ''\"\n [attr.tabindex]=\"ngf.tabIndex()\"\n class=\"form-control\"\n [class.form-control-sm]=\"size() === 'sm'\"\n [class.form-control-lg]=\"size() === 'lg'\"\n [class.form-control-plaintext]=\"p?.plaintext\"\n [class.is-invalid]=\"f().invalid() && f().touched()\"\n [class.is-valid]=\"f().valid() && f().touched() && p?.validFeedback\"\n />\n @if (ngf.label()) {\n <label [for]=\"inputId\">{{ ngf.label() | dynamicText | async }}</label>\n }\n </div>\n @for (a of ngfa.suffixAddons(); track $index) {\n <span class=\"input-group-text\">\n <df-addon-slot [addon]=\"a\" [fieldInputs]=\"fieldInputs()\" [hidden]=\"ngfa.hiddenSignalCache().get(a)\" />\n </span>\n }\n </div>\n } @else {\n <div class=\"form-floating\">\n <input\n ngForgeControl\n [formField]=\"f\"\n [id]=\"inputId\"\n [type]=\"type()\"\n [placeholder]=\"(ngf.placeholder() | dynamicText | async) ?? ''\"\n [attr.tabindex]=\"ngf.tabIndex()\"\n class=\"form-control\"\n [class.form-control-sm]=\"size() === 'sm'\"\n [class.form-control-lg]=\"size() === 'lg'\"\n [class.form-control-plaintext]=\"p?.plaintext\"\n [class.is-invalid]=\"f().invalid() && f().touched()\"\n [class.is-valid]=\"f().valid() && f().touched() && p?.validFeedback\"\n />\n @if (ngf.label()) {\n <label [for]=\"inputId\">{{ ngf.label() | dynamicText | async }}</label>\n }\n </div>\n }\n @if (p?.validFeedback && f().valid() && f().touched()) {\n <div class=\"valid-feedback d-block\">\n {{ p?.validFeedback | dynamicText | async }}\n </div>\n }\n @if (ngf.errorsToDisplay()[0]; as error) {\n <div class=\"invalid-feedback d-block\" [id]=\"ngf.errorId()\" role=\"alert\">{{ error.message }}</div>\n }\n </div>\n } @else {\n <div class=\"mb-3\">\n @if (ngf.label()) {\n <label [for]=\"inputId\" class=\"form-label\">{{ ngf.label() | dynamicText | async }}</label>\n }\n @if (ngfa.hasAddons()) {\n <div class=\"input-group\">\n @for (a of ngfa.prefixAddons(); track $index) {\n <span class=\"input-group-text\">\n <df-addon-slot [addon]=\"a\" [fieldInputs]=\"fieldInputs()\" [hidden]=\"ngfa.hiddenSignalCache().get(a)\" />\n </span>\n }\n <input\n ngForgeControl\n [formField]=\"f\"\n [id]=\"inputId\"\n [type]=\"type()\"\n [placeholder]=\"(ngf.placeholder() | dynamicText | async) ?? ''\"\n [attr.tabindex]=\"ngf.tabIndex()\"\n class=\"form-control\"\n [class.form-control-sm]=\"size() === 'sm'\"\n [class.form-control-lg]=\"size() === 'lg'\"\n [class.form-control-plaintext]=\"p?.plaintext\"\n [class.is-invalid]=\"f().invalid() && f().touched()\"\n [class.is-valid]=\"f().valid() && f().touched() && p?.validFeedback\"\n />\n @for (a of ngfa.suffixAddons(); track $index) {\n <span class=\"input-group-text\">\n <df-addon-slot [addon]=\"a\" [fieldInputs]=\"fieldInputs()\" [hidden]=\"ngfa.hiddenSignalCache().get(a)\" />\n </span>\n }\n </div>\n } @else {\n <input\n ngForgeControl\n [formField]=\"f\"\n [id]=\"inputId\"\n [type]=\"type()\"\n [placeholder]=\"(ngf.placeholder() | dynamicText | async) ?? ''\"\n [attr.tabindex]=\"ngf.tabIndex()\"\n class=\"form-control\"\n [class.form-control-sm]=\"size() === 'sm'\"\n [class.form-control-lg]=\"size() === 'lg'\"\n [class.form-control-plaintext]=\"p?.plaintext\"\n [class.is-invalid]=\"f().invalid() && f().touched()\"\n [class.is-valid]=\"f().valid() && f().touched() && p?.validFeedback\"\n />\n }\n @if (p?.validFeedback && f().valid() && f().touched()) {\n <div class=\"valid-feedback d-block\">\n {{ p?.validFeedback | dynamicText | async }}\n </div>\n }\n @if (ngf.errorsToDisplay()[0]; as error) {\n <div class=\"invalid-feedback d-block\" [id]=\"ngf.errorId()\" role=\"alert\">{{ error.message }}</div>\n } @else if (p?.hint) {\n <div class=\"form-text\" [id]=\"ngf.hintId()\">{{ p?.hint | dynamicText | async }}</div>\n }\n </div>\n }\n `,\n changeDetection: ChangeDetectionStrategy.OnPush,\n providers: [\n {\n provide: BS_INPUT_TYPE_OVERRIDE,\n useFactory: () => signal<string | undefined>(undefined),\n },\n {\n // Adapter-specific preset semantics for `bs-button` addons (clear /\n // reset / paste / copy / toggle-password-visibility). The directive\n // (`NgForgeAddonAction`) delegates here when an addon configures a\n // `preset`. Per-bs-input-instance so the `typeOverride` signal is\n // scoped to one field.\n provide: ADDON_PRESET_HANDLER,\n useFactory: (): AddonPresetHandler => {\n const typeOverride = inject(BS_INPUT_TYPE_OVERRIDE);\n const fsc = inject(FIELD_SIGNAL_CONTEXT, { optional: true });\n const logger = inject(DynamicFormLogger);\n // forwardRef for baselineType only — host.props()?.type gates toggle-password-visibility.\n const host = inject(forwardRef(() => BsInputFieldComponent));\n return {\n run: (preset: string, ctx: AddonActionContext) => {\n const fieldKey = ctx.field.key;\n return runBsPresetAction(preset as AddonActionPreset, ctx, {\n typeOverride,\n fieldValueSetter: ctx.setValue,\n fieldDefaultValueGetter:\n fsc && fieldKey ? () => (fsc.defaultValues() as Record<string, unknown> | undefined)?.[fieldKey] : undefined,\n baselineType: () => host.props()?.type,\n logger,\n });\n },\n };\n },\n },\n ],\n styles: [\n `\n :host([hidden]) {\n display: none !important;\n }\n /* Per-side padding on the .input-group-text addon containers — each\n side is its own knob so consumers can tune the prefix's gap from\n the border (outer-left), the prefix's gap to the input text\n (inner-right), and the symmetric suffix counterparts independently. */\n :host {\n --df-bs-addon-prefix-outer-padding: 0.75rem;\n --df-bs-addon-prefix-inner-padding: 0.75rem;\n --df-bs-addon-suffix-inner-padding: 0.75rem;\n --df-bs-addon-suffix-outer-padding: 0.75rem;\n }\n :host ::ng-deep .input-group > .input-group-text:first-child {\n padding-left: var(--df-bs-addon-prefix-outer-padding);\n padding-right: var(--df-bs-addon-prefix-inner-padding);\n }\n :host ::ng-deep .input-group > .input-group-text:last-child {\n padding-left: var(--df-bs-addon-suffix-inner-padding);\n padding-right: var(--df-bs-addon-suffix-outer-padding);\n }\n /* bs-button addons live inside .input-group-text for visual parity with\n bs-icon (shared grey container). Strip the inner .btn's own visual\n chrome (border, background, focus ring) so the button blends with\n the addon container — done via Bootstrap's own CSS variables so the\n cascade reaches the rendered <button> in any theme. No !important. */\n :host ::ng-deep .input-group-text df-bs-button-addon .btn {\n --bs-btn-bg: transparent;\n --bs-btn-color: var(--bs-body-color);\n --bs-btn-border-color: transparent;\n --bs-btn-hover-bg: rgba(127, 127, 127, 0.12);\n --bs-btn-hover-color: var(--bs-body-color);\n --bs-btn-hover-border-color: transparent;\n --bs-btn-active-bg: rgba(127, 127, 127, 0.18);\n --bs-btn-active-border-color: transparent;\n --bs-btn-focus-shadow-rgb: 0, 0, 0;\n --bs-btn-padding-x: 0;\n --bs-btn-padding-y: 0;\n box-shadow: none;\n }\n :host ::ng-deep .input-group-text df-bs-button-addon .btn:focus-visible {\n /* 2px solid for WCAG 2.4.11; currentColor adapts to light/dark themes. */\n box-shadow: none;\n outline: 2px solid currentColor;\n outline-offset: 2px;\n }\n `,\n ],\n})\nexport default class BsInputFieldComponent {\n private bootstrapConfig = inject(BOOTSTRAP_CONFIG, { optional: true });\n\n protected readonly ngf = injectNgForgeField<string>();\n protected readonly ngfa = injectNgForgeAddons<BsInputAddon>();\n\n readonly props = input<BsInputProps>();\n\n /**\n * Wrapper-style host bag pushed by `DfFieldOutlet`. Declared at the\n * component level so `setInputIfDeclared` (which uses\n * `reflectComponentType`) can write it.\n */\n readonly fieldInputs = input<WrapperFieldInputs | undefined>();\n\n /** Per-instance type override populated by `toggle-password-visibility` preset. */\n private readonly typeOverride = inject(BS_INPUT_TYPE_OVERRIDE);\n\n readonly size = computed(() => this.props()?.size ?? this.bootstrapConfig?.size);\n readonly floatingLabel = computed(() => this.props()?.floatingLabel ?? this.bootstrapConfig?.floatingLabel ?? false);\n\n /** Override (set by `toggle-password-visibility` preset) wins over `props().type`. */\n protected readonly type = computed(() => this.typeOverride() ?? this.props()?.type ?? 'text');\n}\n"]}
|
|
1
|
+
{"version":3,"file":"ng-forge-dynamic-forms-bootstrap-lazy-input.mjs","names":[],"sources":["../../../../packages/dynamic-forms-bootstrap/src/lib/fields/input/bs-input.component.ts"],"sourcesContent":["import { AsyncPipe } from '@angular/common';\nimport { ChangeDetectionStrategy, Component, computed, forwardRef, inject, input, signal } from '@angular/core';\nimport { FormField } from '@angular/forms/signals';\nimport { AddonActionContext, AddonActionPreset, DynamicFormLogger } from '@ng-forge/dynamic-forms';\nimport { DfAddonSlot } from '@ng-forge/dynamic-forms/integration';\nimport { WrapperFieldInputs } from '@ng-forge/dynamic-forms/integration';\nimport { DynamicTextPipe, FIELD_SIGNAL_CONTEXT } from '@ng-forge/dynamic-forms/integration';\nimport {\n ADDON_PRESET_HANDLER,\n AddonPresetHandler,\n injectNgForgeAddons,\n injectNgForgeField,\n NgForgeAddons,\n NgForgeControl,\n NgForgeFieldHost,\n} from '@ng-forge/dynamic-forms/integration';\nimport { BOOTSTRAP_CONFIG, BS_INPUT_TYPE_OVERRIDE, runBsPresetAction } from '@ng-forge/dynamic-forms-bootstrap/shared';\nimport { BsInputAddon, BsInputProps } from './bs-input.type';\n\n@Component({\n selector: 'df-bs-input',\n imports: [FormField, DynamicTextPipe, AsyncPipe, NgForgeControl, DfAddonSlot],\n styleUrl: '../../styles/_form-field.scss',\n hostDirectives: [NgForgeFieldHost, NgForgeAddons],\n template: `\n @let f = ngf.field(); @let p = props(); @let inputId = ngf.key() + '-input';\n @if (floatingLabel()) {\n <div class=\"mb-3\">\n @if (ngfa.hasAddons()) {\n <div class=\"input-group\">\n @for (a of ngfa.prefixAddons(); track $index) {\n <span class=\"input-group-text\">\n <df-addon-slot [addon]=\"a\" [fieldInputs]=\"fieldInputs()\" [hidden]=\"ngfa.hiddenSignalCache().get(a)\" />\n </span>\n }\n <div class=\"form-floating\">\n <input\n ngForgeControl\n [formField]=\"f\"\n [id]=\"inputId\"\n [type]=\"type()\"\n [placeholder]=\"(ngf.placeholder() | dynamicText | async) ?? ''\"\n [attr.tabindex]=\"ngf.tabIndex()\"\n class=\"form-control\"\n [class.form-control-sm]=\"size() === 'sm'\"\n [class.form-control-lg]=\"size() === 'lg'\"\n [class.form-control-plaintext]=\"p?.plaintext\"\n [class.is-invalid]=\"f().invalid() && f().touched()\"\n [class.is-valid]=\"f().valid() && f().touched() && p?.validFeedback\"\n />\n @if (ngf.label()) {\n <label [for]=\"inputId\">{{ ngf.label() | dynamicText | async }}</label>\n }\n </div>\n @for (a of ngfa.suffixAddons(); track $index) {\n <span class=\"input-group-text\">\n <df-addon-slot [addon]=\"a\" [fieldInputs]=\"fieldInputs()\" [hidden]=\"ngfa.hiddenSignalCache().get(a)\" />\n </span>\n }\n </div>\n } @else {\n <div class=\"form-floating\">\n <input\n ngForgeControl\n [formField]=\"f\"\n [id]=\"inputId\"\n [type]=\"type()\"\n [placeholder]=\"(ngf.placeholder() | dynamicText | async) ?? ''\"\n [attr.tabindex]=\"ngf.tabIndex()\"\n class=\"form-control\"\n [class.form-control-sm]=\"size() === 'sm'\"\n [class.form-control-lg]=\"size() === 'lg'\"\n [class.form-control-plaintext]=\"p?.plaintext\"\n [class.is-invalid]=\"f().invalid() && f().touched()\"\n [class.is-valid]=\"f().valid() && f().touched() && p?.validFeedback\"\n />\n @if (ngf.label()) {\n <label [for]=\"inputId\">{{ ngf.label() | dynamicText | async }}</label>\n }\n </div>\n }\n @if (p?.validFeedback && f().valid() && f().touched()) {\n <div class=\"valid-feedback d-block\">\n {{ p?.validFeedback | dynamicText | async }}\n </div>\n }\n @if (ngf.errorsToDisplay()[0]; as error) {\n <div class=\"invalid-feedback d-block\" [id]=\"ngf.errorId()\" role=\"alert\">{{ error.message }}</div>\n }\n </div>\n } @else {\n <div class=\"mb-3\">\n @if (ngf.label()) {\n <label [for]=\"inputId\" class=\"form-label\">{{ ngf.label() | dynamicText | async }}</label>\n }\n @if (ngfa.hasAddons()) {\n <div class=\"input-group\">\n @for (a of ngfa.prefixAddons(); track $index) {\n <span class=\"input-group-text\">\n <df-addon-slot [addon]=\"a\" [fieldInputs]=\"fieldInputs()\" [hidden]=\"ngfa.hiddenSignalCache().get(a)\" />\n </span>\n }\n <input\n ngForgeControl\n [formField]=\"f\"\n [id]=\"inputId\"\n [type]=\"type()\"\n [placeholder]=\"(ngf.placeholder() | dynamicText | async) ?? ''\"\n [attr.tabindex]=\"ngf.tabIndex()\"\n class=\"form-control\"\n [class.form-control-sm]=\"size() === 'sm'\"\n [class.form-control-lg]=\"size() === 'lg'\"\n [class.form-control-plaintext]=\"p?.plaintext\"\n [class.is-invalid]=\"f().invalid() && f().touched()\"\n [class.is-valid]=\"f().valid() && f().touched() && p?.validFeedback\"\n />\n @for (a of ngfa.suffixAddons(); track $index) {\n <span class=\"input-group-text\">\n <df-addon-slot [addon]=\"a\" [fieldInputs]=\"fieldInputs()\" [hidden]=\"ngfa.hiddenSignalCache().get(a)\" />\n </span>\n }\n </div>\n } @else {\n <input\n ngForgeControl\n [formField]=\"f\"\n [id]=\"inputId\"\n [type]=\"type()\"\n [placeholder]=\"(ngf.placeholder() | dynamicText | async) ?? ''\"\n [attr.tabindex]=\"ngf.tabIndex()\"\n class=\"form-control\"\n [class.form-control-sm]=\"size() === 'sm'\"\n [class.form-control-lg]=\"size() === 'lg'\"\n [class.form-control-plaintext]=\"p?.plaintext\"\n [class.is-invalid]=\"f().invalid() && f().touched()\"\n [class.is-valid]=\"f().valid() && f().touched() && p?.validFeedback\"\n />\n }\n @if (p?.validFeedback && f().valid() && f().touched()) {\n <div class=\"valid-feedback d-block\">\n {{ p?.validFeedback | dynamicText | async }}\n </div>\n }\n @if (ngf.errorsToDisplay()[0]; as error) {\n <div class=\"invalid-feedback d-block\" [id]=\"ngf.errorId()\" role=\"alert\">{{ error.message }}</div>\n } @else if (p?.hint) {\n <div class=\"form-text\" [id]=\"ngf.hintId()\">{{ p?.hint | dynamicText | async }}</div>\n }\n </div>\n }\n `,\n changeDetection: ChangeDetectionStrategy.OnPush,\n providers: [\n {\n provide: BS_INPUT_TYPE_OVERRIDE,\n useFactory: () => signal<string | undefined>(undefined),\n },\n {\n // Adapter-specific preset semantics for `bs-button` addons (clear /\n // reset / paste / copy / toggle-password-visibility). The directive\n // (`NgForgeAddonAction`) delegates here when an addon configures a\n // `preset`. Per-bs-input-instance so the `typeOverride` signal is\n // scoped to one field.\n provide: ADDON_PRESET_HANDLER,\n useFactory: (): AddonPresetHandler => {\n const typeOverride = inject(BS_INPUT_TYPE_OVERRIDE);\n const fsc = inject(FIELD_SIGNAL_CONTEXT, { optional: true });\n const logger = inject(DynamicFormLogger);\n // forwardRef for baselineType only — host.props()?.type gates toggle-password-visibility.\n const host = inject(forwardRef(() => BsInputFieldComponent));\n return {\n run: (preset: string, ctx: AddonActionContext) => {\n const fieldKey = ctx.field.key;\n return runBsPresetAction(preset as AddonActionPreset, ctx, {\n typeOverride,\n fieldValueSetter: ctx.setValue,\n fieldDefaultValueGetter:\n fsc && fieldKey ? () => (fsc.defaultValues() as Record<string, unknown> | undefined)?.[fieldKey] : undefined,\n baselineType: () => host.props()?.type,\n logger,\n });\n },\n };\n },\n },\n ],\n styles: [\n `\n :host([hidden]) {\n display: none !important;\n }\n /* Per-side padding on the .input-group-text addon containers — each\n side is its own knob so consumers can tune the prefix's gap from\n the border (outer-left), the prefix's gap to the input text\n (inner-right), and the symmetric suffix counterparts independently. */\n :host {\n --df-bs-addon-prefix-outer-padding: 0.75rem;\n --df-bs-addon-prefix-inner-padding: 0.75rem;\n --df-bs-addon-suffix-inner-padding: 0.75rem;\n --df-bs-addon-suffix-outer-padding: 0.75rem;\n }\n :host ::ng-deep .input-group > .input-group-text:first-child {\n padding-left: var(--df-bs-addon-prefix-outer-padding);\n padding-right: var(--df-bs-addon-prefix-inner-padding);\n }\n :host ::ng-deep .input-group > .input-group-text:last-child {\n padding-left: var(--df-bs-addon-suffix-inner-padding);\n padding-right: var(--df-bs-addon-suffix-outer-padding);\n }\n /* bs-button addons live inside .input-group-text for visual parity with\n bs-icon (shared grey container). Strip the inner .btn's own visual\n chrome (border, background, focus ring) so the button blends with\n the addon container — done via Bootstrap's own CSS variables so the\n cascade reaches the rendered <button> in any theme. No !important. */\n :host ::ng-deep .input-group-text df-bs-button-addon .btn {\n --bs-btn-bg: transparent;\n --bs-btn-color: var(--bs-body-color);\n --bs-btn-border-color: transparent;\n --bs-btn-hover-bg: rgba(127, 127, 127, 0.12);\n --bs-btn-hover-color: var(--bs-body-color);\n --bs-btn-hover-border-color: transparent;\n --bs-btn-active-bg: rgba(127, 127, 127, 0.18);\n --bs-btn-active-border-color: transparent;\n --bs-btn-focus-shadow-rgb: 0, 0, 0;\n --bs-btn-padding-x: 0;\n --bs-btn-padding-y: 0;\n box-shadow: none;\n }\n :host ::ng-deep .input-group-text df-bs-button-addon .btn:focus-visible {\n /* 2px solid for WCAG 2.4.11; currentColor adapts to light/dark themes. */\n box-shadow: none;\n outline: 2px solid currentColor;\n outline-offset: 2px;\n }\n `,\n ],\n})\nexport default class BsInputFieldComponent {\n private bootstrapConfig = inject(BOOTSTRAP_CONFIG, { optional: true });\n\n protected readonly ngf = injectNgForgeField<string>();\n protected readonly ngfa = injectNgForgeAddons<BsInputAddon>();\n\n readonly props = input<BsInputProps>();\n\n /**\n * Wrapper-style host bag pushed by `DfFieldOutlet`. Declared at the\n * component level so `setInputIfDeclared` (which uses\n * `reflectComponentType`) can write it.\n */\n readonly fieldInputs = input<WrapperFieldInputs | undefined>();\n\n /** Per-instance type override populated by `toggle-password-visibility` preset. */\n private readonly typeOverride = inject(BS_INPUT_TYPE_OVERRIDE);\n\n readonly size = computed(() => this.props()?.size ?? this.bootstrapConfig?.size);\n readonly floatingLabel = computed(() => this.props()?.floatingLabel ?? this.bootstrapConfig?.floatingLabel ?? false);\n\n /** Override (set by `toggle-password-visibility` preset) wins over `props().type`. */\n protected readonly type = computed(() => this.typeOverride() ?? this.props()?.type ?? 'text');\n}\n"],"mappings":"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"}
|
|
@@ -1,59 +1,79 @@
|
|
|
1
|
-
import * as i0 from
|
|
2
|
-
import {
|
|
3
|
-
import * as i1 from
|
|
4
|
-
import {
|
|
5
|
-
import { explicitEffect } from
|
|
6
|
-
import { AsyncPipe } from
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
1
|
+
import * as i0 from "@angular/core";
|
|
2
|
+
import { ChangeDetectionStrategy, Component, computed, input, linkedSignal } from "@angular/core";
|
|
3
|
+
import * as i1 from "@ng-forge/dynamic-forms/integration";
|
|
4
|
+
import { DynamicTextPipe, NgForgeControl, NgForgeFieldHost, injectNgForgeField, isEqual } from "@ng-forge/dynamic-forms/integration";
|
|
5
|
+
import { explicitEffect } from "ngxtension/explicit-effect";
|
|
6
|
+
import { AsyncPipe } from "@angular/common";
|
|
7
|
+
var BsMultiCheckboxFieldComponent = class BsMultiCheckboxFieldComponent {
|
|
8
|
+
ngf = injectNgForgeField();
|
|
9
|
+
options = input([], ...ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []);
|
|
10
|
+
props = input(...ngDevMode ? [void 0, { debugName: "props" }] : /* istanbul ignore next */ []);
|
|
11
|
+
checkedValuesMap = computed(() => {
|
|
12
|
+
const map = {};
|
|
13
|
+
for (const opt of this.valueViewModel()) map[String(opt.value)] = true;
|
|
14
|
+
return map;
|
|
15
|
+
}, ...ngDevMode ? [{ debugName: "checkedValuesMap" }] : /* istanbul ignore next */ []);
|
|
16
|
+
valueViewModel = linkedSignal(() => {
|
|
17
|
+
const currentValues = this.ngf.field()().value();
|
|
18
|
+
return this.options().filter((option) => currentValues.includes(option.value));
|
|
19
|
+
}, {
|
|
20
|
+
...ngDevMode ? { debugName: "valueViewModel" } : /* istanbul ignore next */ {},
|
|
21
|
+
equal: isEqual
|
|
22
|
+
});
|
|
23
|
+
constructor() {
|
|
24
|
+
explicitEffect([this.valueViewModel], ([selectedOptions]) => {
|
|
25
|
+
const selectedValues = selectedOptions.map((option) => option.value);
|
|
26
|
+
if (!isEqual(selectedValues, this.ngf.field()().value())) this.ngf.field()().value.set(selectedValues);
|
|
27
|
+
});
|
|
28
|
+
explicitEffect([this.options], ([options]) => {
|
|
29
|
+
const values = options.map((option) => option.value);
|
|
30
|
+
const uniqueValues = new Set(values);
|
|
31
|
+
if (values.length !== uniqueValues.size) {
|
|
32
|
+
const duplicates = values.filter((value, index) => values.indexOf(value) !== index);
|
|
33
|
+
throw new Error(`Duplicate option values detected in bs-multi-checkbox: ${duplicates.join(", ")}`);
|
|
34
|
+
}
|
|
35
|
+
});
|
|
36
|
+
}
|
|
37
|
+
onCheckboxChange(option, event) {
|
|
38
|
+
const checked = event.target.checked;
|
|
39
|
+
this.valueViewModel.update((currentOptions) => {
|
|
40
|
+
if (checked) return currentOptions.some((opt) => opt.value === option.value) ? currentOptions : [...currentOptions, option];
|
|
41
|
+
else return currentOptions.filter((opt) => opt.value !== option.value);
|
|
42
|
+
});
|
|
43
|
+
}
|
|
44
|
+
static ɵfac = i0.ɵɵngDeclareFactory({
|
|
45
|
+
minVersion: "12.0.0",
|
|
46
|
+
version: "22.2.5",
|
|
47
|
+
ngImport: i0,
|
|
48
|
+
type: BsMultiCheckboxFieldComponent,
|
|
49
|
+
deps: [],
|
|
50
|
+
target: i0.ɵɵFactoryTarget.Component
|
|
51
|
+
});
|
|
52
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({
|
|
53
|
+
minVersion: "17.0.0",
|
|
54
|
+
version: "22.2.5",
|
|
55
|
+
type: BsMultiCheckboxFieldComponent,
|
|
56
|
+
isStandalone: true,
|
|
57
|
+
selector: "df-bs-multi-checkbox",
|
|
58
|
+
inputs: {
|
|
59
|
+
options: {
|
|
60
|
+
classPropertyName: "options",
|
|
61
|
+
publicName: "options",
|
|
62
|
+
isSignal: true,
|
|
63
|
+
isRequired: false,
|
|
64
|
+
transformFunction: null
|
|
65
|
+
},
|
|
66
|
+
props: {
|
|
67
|
+
classPropertyName: "props",
|
|
68
|
+
publicName: "props",
|
|
69
|
+
isSignal: true,
|
|
70
|
+
isRequired: false,
|
|
71
|
+
transformFunction: null
|
|
72
|
+
}
|
|
73
|
+
},
|
|
74
|
+
hostDirectives: [{ directive: i1.NgForgeFieldHost }],
|
|
75
|
+
ngImport: i0,
|
|
76
|
+
template: `
|
|
57
77
|
@let f = ngf.field();
|
|
58
78
|
@let checked = checkedValuesMap();
|
|
59
79
|
@if (ngf.label(); as label) {
|
|
@@ -91,11 +111,46 @@ class BsMultiCheckboxFieldComponent {
|
|
|
91
111
|
} @else if (props()?.hint; as hint) {
|
|
92
112
|
<div class="form-text" [id]="ngf.hintId()">{{ hint | dynamicText | async }}</div>
|
|
93
113
|
}
|
|
94
|
-
`,
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
114
|
+
`,
|
|
115
|
+
isInline: true,
|
|
116
|
+
styles: [".df-bs-field{display:flex;flex-direction:column;gap:var(--df-field-gap, .5rem);width:100%;margin-bottom:var(--df-bs-field-margin-bottom, 1rem)}.df-bs-label{font-weight:var(--df-label-font-weight, 500);color:var(--df-label-color, inherit);margin-bottom:0}.df-bs-hint{color:var(--df-hint-color, var(--bs-secondary-color, #6c757d));font-size:var(--df-hint-font-size, .875rem);margin-top:var(--df-bs-hint-margin-top, .25rem)}.df-bs-field:has(.df-bs-hint){margin-bottom:var(--df-bs-field-with-hint-margin-bottom, .5rem)}:host([hidden]){display:none!important}\n", ":host{display:block}.checkbox-group{margin-bottom:.5rem}:host([hidden]){display:none!important}\n"],
|
|
117
|
+
dependencies: [
|
|
118
|
+
{
|
|
119
|
+
kind: "directive",
|
|
120
|
+
type: NgForgeControl,
|
|
121
|
+
selector: "[ngForgeControl]",
|
|
122
|
+
inputs: ["ngForgeControl"]
|
|
123
|
+
},
|
|
124
|
+
{
|
|
125
|
+
kind: "pipe",
|
|
126
|
+
type: DynamicTextPipe,
|
|
127
|
+
name: "dynamicText"
|
|
128
|
+
},
|
|
129
|
+
{
|
|
130
|
+
kind: "pipe",
|
|
131
|
+
type: AsyncPipe,
|
|
132
|
+
name: "async"
|
|
133
|
+
}
|
|
134
|
+
],
|
|
135
|
+
changeDetection: i0.ChangeDetectionStrategy.OnPush
|
|
136
|
+
});
|
|
137
|
+
};
|
|
138
|
+
i0.ɵɵngDeclareClassMetadata({
|
|
139
|
+
minVersion: "12.0.0",
|
|
140
|
+
version: "22.2.5",
|
|
141
|
+
ngImport: i0,
|
|
142
|
+
type: BsMultiCheckboxFieldComponent,
|
|
143
|
+
decorators: [{
|
|
144
|
+
type: Component,
|
|
145
|
+
args: [{
|
|
146
|
+
selector: "df-bs-multi-checkbox",
|
|
147
|
+
imports: [
|
|
148
|
+
DynamicTextPipe,
|
|
149
|
+
AsyncPipe,
|
|
150
|
+
NgForgeControl
|
|
151
|
+
],
|
|
152
|
+
hostDirectives: [NgForgeFieldHost],
|
|
153
|
+
template: `
|
|
99
154
|
@let f = ngf.field();
|
|
100
155
|
@let checked = checkedValuesMap();
|
|
101
156
|
@if (ngf.label(); as label) {
|
|
@@ -133,9 +188,31 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImpor
|
|
|
133
188
|
} @else if (props()?.hint; as hint) {
|
|
134
189
|
<div class="form-text" [id]="ngf.hintId()">{{ hint | dynamicText | async }}</div>
|
|
135
190
|
}
|
|
136
|
-
`,
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
191
|
+
`,
|
|
192
|
+
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
193
|
+
styles: [".df-bs-field{display:flex;flex-direction:column;gap:var(--df-field-gap, .5rem);width:100%;margin-bottom:var(--df-bs-field-margin-bottom, 1rem)}.df-bs-label{font-weight:var(--df-label-font-weight, 500);color:var(--df-label-color, inherit);margin-bottom:0}.df-bs-hint{color:var(--df-hint-color, var(--bs-secondary-color, #6c757d));font-size:var(--df-hint-font-size, .875rem);margin-top:var(--df-bs-hint-margin-top, .25rem)}.df-bs-field:has(.df-bs-hint){margin-bottom:var(--df-bs-field-with-hint-margin-bottom, .5rem)}:host([hidden]){display:none!important}\n", ":host{display:block}.checkbox-group{margin-bottom:.5rem}:host([hidden]){display:none!important}\n"]
|
|
194
|
+
}]
|
|
195
|
+
}],
|
|
196
|
+
ctorParameters: () => [],
|
|
197
|
+
propDecorators: {
|
|
198
|
+
options: [{
|
|
199
|
+
type: i0.Input,
|
|
200
|
+
args: [{
|
|
201
|
+
isSignal: true,
|
|
202
|
+
alias: "options",
|
|
203
|
+
required: false
|
|
204
|
+
}]
|
|
205
|
+
}],
|
|
206
|
+
props: [{
|
|
207
|
+
type: i0.Input,
|
|
208
|
+
args: [{
|
|
209
|
+
isSignal: true,
|
|
210
|
+
alias: "props",
|
|
211
|
+
required: false
|
|
212
|
+
}]
|
|
213
|
+
}]
|
|
214
|
+
}
|
|
215
|
+
});
|
|
140
216
|
export { BsMultiCheckboxFieldComponent };
|
|
141
|
-
|
|
217
|
+
|
|
218
|
+
//# sourceMappingURL=ng-forge-dynamic-forms-bootstrap-lazy-multi-checkbox.mjs.map
|