@ng-forge/dynamic-forms-bootstrap 1.1.0 → 1.2.0-next.10

package/fesm2022/ng-forge-dynamic-forms-bootstrap-lazy-input.mjs

@@ -0,0 +1,339 @@
+import { AsyncPipe } from '@angular/common';
+import * as i0 from '@angular/core';
+import { inject, input, computed, signal, forwardRef, ChangeDetectionStrategy, Component } from '@angular/core';
+import { FormField } from '@angular/forms/signals';
+import { DynamicFormLogger } from '@ng-forge/dynamic-forms';
+import * as i1 from '@ng-forge/dynamic-forms/integration';
+import { injectNgForgeField, injectNgForgeAddons, NgForgeControl, DfAddonSlot, DynamicTextPipe, ADDON_PRESET_HANDLER, FIELD_SIGNAL_CONTEXT, NgForgeFieldHost, NgForgeAddons } from '@ng-forge/dynamic-forms/integration';
+import { BOOTSTRAP_CONFIG, BS_INPUT_TYPE_OVERRIDE, runBsPresetAction } from '@ng-forge/dynamic-forms-bootstrap/shared';
+
+class BsInputFieldComponent {
+    bootstrapConfig = inject(BOOTSTRAP_CONFIG, { optional: true });
+    ngf = injectNgForgeField();
+    ngfa = injectNgForgeAddons();
+    props = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "props" }] : /* istanbul ignore next */ []));
+        fieldInputs = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "fieldInputs" }] : /* istanbul ignore next */ []));
+        typeOverride = inject(BS_INPUT_TYPE_OVERRIDE);
+    size = computed(() => this.props()?.size ?? this.bootstrapConfig?.size, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    floatingLabel = computed(() => this.props()?.floatingLabel ?? this.bootstrapConfig?.floatingLabel ?? false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "floatingLabel" }] : /* istanbul ignore next */ []));
+        type = computed(() => this.typeOverride() ?? this.props()?.type ?? 'text', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "type" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: BsInputFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.5", type: BsInputFieldComponent, isStandalone: true, selector: "df-bs-input", inputs: { props: { classPropertyName: "props", publicName: "props", isSignal: true, isRequired: false, transformFunction: null }, fieldInputs: { classPropertyName: "fieldInputs", publicName: "fieldInputs", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
+            {
+                provide: BS_INPUT_TYPE_OVERRIDE,
+                useFactory: () => signal(undefined),
+            },
+            {
+                                                                                                provide: ADDON_PRESET_HANDLER,
+                useFactory: () => {
+                    const typeOverride = inject(BS_INPUT_TYPE_OVERRIDE);
+                    const fsc = inject(FIELD_SIGNAL_CONTEXT, { optional: true });
+                    const logger = inject(DynamicFormLogger);
+                                        const host = inject(forwardRef(() => BsInputFieldComponent));
+                    return {
+                        run: (preset, ctx) => {
+                            const fieldKey = ctx.field.key;
+                            return runBsPresetAction(preset, ctx, {
+                                typeOverride,
+                                fieldValueSetter: ctx.setValue,
+                                fieldDefaultValueGetter: fsc && fieldKey ? () => fsc.defaultValues()?.[fieldKey] : undefined,
+                                baselineType: () => host.props()?.type,
+                                logger,
+                            });
+                        },
+                    };
+                },
+            },
+        ], hostDirectives: [{ directive: i1.NgForgeFieldHost }, { directive: i1.NgForgeAddons }], ngImport: i0, template: `
+    @let f = ngf.field(); @let p = props(); @let inputId = ngf.key() + '-input';
+    @if (floatingLabel()) {
+      <div class="mb-3">
+        @if (ngfa.hasAddons()) {
+          <div class="input-group">
+            @for (a of ngfa.prefixAddons(); track $index) {
+              <span class="input-group-text">
+                <df-addon-slot [addon]="a" [fieldInputs]="fieldInputs()" [hidden]="ngfa.hiddenSignalCache().get(a)" />
+              </span>
+            }
+            <div class="form-floating">
+              <input
+                ngForgeControl
+                [formField]="f"
+                [id]="inputId"
+                [type]="type()"
+                [placeholder]="(ngf.placeholder() | dynamicText | async) ?? ''"
+                [attr.tabindex]="ngf.tabIndex()"
+                class="form-control"
+                [class.form-control-sm]="size() === 'sm'"
+                [class.form-control-lg]="size() === 'lg'"
+                [class.form-control-plaintext]="p?.plaintext"
+                [class.is-invalid]="f().invalid() && f().touched()"
+                [class.is-valid]="f().valid() && f().touched() && p?.validFeedback"
+              />
+              @if (ngf.label()) {
+                <label [for]="inputId">{{ ngf.label() | dynamicText | async }}</label>
+              }
+            </div>
+            @for (a of ngfa.suffixAddons(); track $index) {
+              <span class="input-group-text">
+                <df-addon-slot [addon]="a" [fieldInputs]="fieldInputs()" [hidden]="ngfa.hiddenSignalCache().get(a)" />
+              </span>
+            }
+          </div>
+        } @else {
+          <div class="form-floating">
+            <input
+              ngForgeControl
+              [formField]="f"
+              [id]="inputId"
+              [type]="type()"
+              [placeholder]="(ngf.placeholder() | dynamicText | async) ?? ''"
+              [attr.tabindex]="ngf.tabIndex()"
+              class="form-control"
+              [class.form-control-sm]="size() === 'sm'"
+              [class.form-control-lg]="size() === 'lg'"
+              [class.form-control-plaintext]="p?.plaintext"
+              [class.is-invalid]="f().invalid() && f().touched()"
+              [class.is-valid]="f().valid() && f().touched() && p?.validFeedback"
+            />
+            @if (ngf.label()) {
+              <label [for]="inputId">{{ ngf.label() | dynamicText | async }}</label>
+            }
+          </div>
+        }
+        @if (p?.validFeedback && f().valid() && f().touched()) {
+          <div class="valid-feedback d-block">
+            {{ p?.validFeedback | dynamicText | async }}
+          </div>
+        }
+        @if (ngf.errorsToDisplay()[0]; as error) {
+          <div class="invalid-feedback d-block" [id]="ngf.errorId()" role="alert">{{ error.message }}</div>
+        }
+      </div>
+    } @else {
+      <div class="mb-3">
+        @if (ngf.label()) {
+          <label [for]="inputId" class="form-label">{{ ngf.label() | dynamicText | async }}</label>
+        }
+        @if (ngfa.hasAddons()) {
+          <div class="input-group">
+            @for (a of ngfa.prefixAddons(); track $index) {
+              <span class="input-group-text">
+                <df-addon-slot [addon]="a" [fieldInputs]="fieldInputs()" [hidden]="ngfa.hiddenSignalCache().get(a)" />
+              </span>
+            }
+            <input
+              ngForgeControl
+              [formField]="f"
+              [id]="inputId"
+              [type]="type()"
+              [placeholder]="(ngf.placeholder() | dynamicText | async) ?? ''"
+              [attr.tabindex]="ngf.tabIndex()"
+              class="form-control"
+              [class.form-control-sm]="size() === 'sm'"
+              [class.form-control-lg]="size() === 'lg'"
+              [class.form-control-plaintext]="p?.plaintext"
+              [class.is-invalid]="f().invalid() && f().touched()"
+              [class.is-valid]="f().valid() && f().touched() && p?.validFeedback"
+            />
+            @for (a of ngfa.suffixAddons(); track $index) {
+              <span class="input-group-text">
+                <df-addon-slot [addon]="a" [fieldInputs]="fieldInputs()" [hidden]="ngfa.hiddenSignalCache().get(a)" />
+              </span>
+            }
+          </div>
+        } @else {
+          <input
+            ngForgeControl
+            [formField]="f"
+            [id]="inputId"
+            [type]="type()"
+            [placeholder]="(ngf.placeholder() | dynamicText | async) ?? ''"
+            [attr.tabindex]="ngf.tabIndex()"
+            class="form-control"
+            [class.form-control-sm]="size() === 'sm'"
+            [class.form-control-lg]="size() === 'lg'"
+            [class.form-control-plaintext]="p?.plaintext"
+            [class.is-invalid]="f().invalid() && f().touched()"
+            [class.is-valid]="f().valid() && f().touched() && p?.validFeedback"
+          />
+        }
+        @if (p?.validFeedback && f().valid() && f().touched()) {
+          <div class="valid-feedback d-block">
+            {{ p?.validFeedback | dynamicText | async }}
+          </div>
+        }
+        @if (ngf.errorsToDisplay()[0]; as error) {
+          <div class="invalid-feedback d-block" [id]="ngf.errorId()" role="alert">{{ error.message }}</div>
+        } @else if (p?.hint) {
+          <div class="form-text" [id]="ngf.hintId()">{{ p?.hint | dynamicText | async }}</div>
+        }
+      </div>
+    }
+  `, isInline: true, 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"], dependencies: [{ kind: "directive", type: FormField, selector: "[formField]", inputs: ["formField"], exportAs: ["formField"] }, { kind: "directive", type: NgForgeControl, selector: "[ngForgeControl]", inputs: ["ngForgeControl"] }, { kind: "component", type: DfAddonSlot, selector: "df-addon-slot", inputs: ["addon", "fieldInputs", "hidden"] }, { kind: "pipe", type: DynamicTextPipe, name: "dynamicText" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: BsInputFieldComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'df-bs-input', imports: [FormField, DynamicTextPipe, AsyncPipe, NgForgeControl, DfAddonSlot], hostDirectives: [NgForgeFieldHost, NgForgeAddons], template: `
+    @let f = ngf.field(); @let p = props(); @let inputId = ngf.key() + '-input';
+    @if (floatingLabel()) {
+      <div class="mb-3">
+        @if (ngfa.hasAddons()) {
+          <div class="input-group">
+            @for (a of ngfa.prefixAddons(); track $index) {
+              <span class="input-group-text">
+                <df-addon-slot [addon]="a" [fieldInputs]="fieldInputs()" [hidden]="ngfa.hiddenSignalCache().get(a)" />
+              </span>
+            }
+            <div class="form-floating">
+              <input
+                ngForgeControl
+                [formField]="f"
+                [id]="inputId"
+                [type]="type()"
+                [placeholder]="(ngf.placeholder() | dynamicText | async) ?? ''"
+                [attr.tabindex]="ngf.tabIndex()"
+                class="form-control"
+                [class.form-control-sm]="size() === 'sm'"
+                [class.form-control-lg]="size() === 'lg'"
+                [class.form-control-plaintext]="p?.plaintext"
+                [class.is-invalid]="f().invalid() && f().touched()"
+                [class.is-valid]="f().valid() && f().touched() && p?.validFeedback"
+              />
+              @if (ngf.label()) {
+                <label [for]="inputId">{{ ngf.label() | dynamicText | async }}</label>
+              }
+            </div>
+            @for (a of ngfa.suffixAddons(); track $index) {
+              <span class="input-group-text">
+                <df-addon-slot [addon]="a" [fieldInputs]="fieldInputs()" [hidden]="ngfa.hiddenSignalCache().get(a)" />
+              </span>
+            }
+          </div>
+        } @else {
+          <div class="form-floating">
+            <input
+              ngForgeControl
+              [formField]="f"
+              [id]="inputId"
+              [type]="type()"
+              [placeholder]="(ngf.placeholder() | dynamicText | async) ?? ''"
+              [attr.tabindex]="ngf.tabIndex()"
+              class="form-control"
+              [class.form-control-sm]="size() === 'sm'"
+              [class.form-control-lg]="size() === 'lg'"
+              [class.form-control-plaintext]="p?.plaintext"
+              [class.is-invalid]="f().invalid() && f().touched()"
+              [class.is-valid]="f().valid() && f().touched() && p?.validFeedback"
+            />
+            @if (ngf.label()) {
+              <label [for]="inputId">{{ ngf.label() | dynamicText | async }}</label>
+            }
+          </div>
+        }
+        @if (p?.validFeedback && f().valid() && f().touched()) {
+          <div class="valid-feedback d-block">
+            {{ p?.validFeedback | dynamicText | async }}
+          </div>
+        }
+        @if (ngf.errorsToDisplay()[0]; as error) {
+          <div class="invalid-feedback d-block" [id]="ngf.errorId()" role="alert">{{ error.message }}</div>
+        }
+      </div>
+    } @else {
+      <div class="mb-3">
+        @if (ngf.label()) {
+          <label [for]="inputId" class="form-label">{{ ngf.label() | dynamicText | async }}</label>
+        }
+        @if (ngfa.hasAddons()) {
+          <div class="input-group">
+            @for (a of ngfa.prefixAddons(); track $index) {
+              <span class="input-group-text">
+                <df-addon-slot [addon]="a" [fieldInputs]="fieldInputs()" [hidden]="ngfa.hiddenSignalCache().get(a)" />
+              </span>
+            }
+            <input
+              ngForgeControl
+              [formField]="f"
+              [id]="inputId"
+              [type]="type()"
+              [placeholder]="(ngf.placeholder() | dynamicText | async) ?? ''"
+              [attr.tabindex]="ngf.tabIndex()"
+              class="form-control"
+              [class.form-control-sm]="size() === 'sm'"
+              [class.form-control-lg]="size() === 'lg'"
+              [class.form-control-plaintext]="p?.plaintext"
+              [class.is-invalid]="f().invalid() && f().touched()"
+              [class.is-valid]="f().valid() && f().touched() && p?.validFeedback"
+            />
+            @for (a of ngfa.suffixAddons(); track $index) {
+              <span class="input-group-text">
+                <df-addon-slot [addon]="a" [fieldInputs]="fieldInputs()" [hidden]="ngfa.hiddenSignalCache().get(a)" />
+              </span>
+            }
+          </div>
+        } @else {
+          <input
+            ngForgeControl
+            [formField]="f"
+            [id]="inputId"
+            [type]="type()"
+            [placeholder]="(ngf.placeholder() | dynamicText | async) ?? ''"
+            [attr.tabindex]="ngf.tabIndex()"
+            class="form-control"
+            [class.form-control-sm]="size() === 'sm'"
+            [class.form-control-lg]="size() === 'lg'"
+            [class.form-control-plaintext]="p?.plaintext"
+            [class.is-invalid]="f().invalid() && f().touched()"
+            [class.is-valid]="f().valid() && f().touched() && p?.validFeedback"
+          />
+        }
+        @if (p?.validFeedback && f().valid() && f().touched()) {
+          <div class="valid-feedback d-block">
+            {{ p?.validFeedback | dynamicText | async }}
+          </div>
+        }
+        @if (ngf.errorsToDisplay()[0]; as error) {
+          <div class="invalid-feedback d-block" [id]="ngf.errorId()" role="alert">{{ error.message }}</div>
+        } @else if (p?.hint) {
+          <div class="form-text" [id]="ngf.hintId()">{{ p?.hint | dynamicText | async }}</div>
+        }
+      </div>
+    }
+  `, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
+                        {
+                            provide: BS_INPUT_TYPE_OVERRIDE,
+                            useFactory: () => signal(undefined),
+                        },
+                        {
+                                                                                                                                                                        provide: ADDON_PRESET_HANDLER,
+                            useFactory: () => {
+                                const typeOverride = inject(BS_INPUT_TYPE_OVERRIDE);
+                                const fsc = inject(FIELD_SIGNAL_CONTEXT, { optional: true });
+                                const logger = inject(DynamicFormLogger);
+                                                                const host = inject(forwardRef(() => BsInputFieldComponent));
+                                return {
+                                    run: (preset, ctx) => {
+                                        const fieldKey = ctx.field.key;
+                                        return runBsPresetAction(preset, ctx, {
+                                            typeOverride,
+                                            fieldValueSetter: ctx.setValue,
+                                            fieldDefaultValueGetter: fsc && fieldKey ? () => fsc.defaultValues()?.[fieldKey] : undefined,
+                                            baselineType: () => host.props()?.type,
+                                            logger,
+                                        });
+                                    },
+                                };
+                            },
+                        },
+                    ], 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"] }]
+        }], propDecorators: { props: [{ type: i0.Input, args: [{ isSignal: true, alias: "props", required: false }] }], fieldInputs: [{ type: i0.Input, args: [{ isSignal: true, alias: "fieldInputs", required: false }] }] } });
+
+
+export { BsInputFieldComponent };
+//# sourceMappingURL=ng-forge-dynamic-forms-bootstrap-lazy-input.mjs.map

package/fesm2022/ng-forge-dynamic-forms-bootstrap-lazy-input.mjs.map

@@ -0,0 +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"]}

package/fesm2022/ng-forge-dynamic-forms-bootstrap-lazy-multi-checkbox.mjs

@@ -0,0 +1,141 @@
+import * as i0 from '@angular/core';
+import { input, computed, linkedSignal, ChangeDetectionStrategy, Component } from '@angular/core';
+import * as i1 from '@ng-forge/dynamic-forms/integration';
+import { injectNgForgeField, isEqual, NgForgeControl, DynamicTextPipe, NgForgeFieldHost } from '@ng-forge/dynamic-forms/integration';
+import { explicitEffect } from 'ngxtension/explicit-effect';
+import { AsyncPipe } from '@angular/common';
+
+class BsMultiCheckboxFieldComponent {
+    ngf = injectNgForgeField();
+    options = input([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
+    props = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "props" }] : /* istanbul ignore next */ []));
+        checkedValuesMap = computed(() => {
+        const map = {};
+        for (const opt of this.valueViewModel()) {
+            map[String(opt.value)] = true;
+        }
+        return map;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "checkedValuesMap" }] : /* istanbul ignore next */ []));
+    valueViewModel = linkedSignal(() => {
+        const currentValues = this.ngf.field()().value();
+        return this.options().filter((option) => currentValues.includes(option.value));
+    }, { ...(ngDevMode ? { debugName: "valueViewModel" } : /* istanbul ignore next */ {}), equal: isEqual });
+    constructor() {
+        explicitEffect([this.valueViewModel], ([selectedOptions]) => {
+            const selectedValues = selectedOptions.map((option) => option.value);
+            if (!isEqual(selectedValues, this.ngf.field()().value())) {
+                this.ngf.field()().value.set(selectedValues);
+            }
+        });
+        explicitEffect([this.options], ([options]) => {
+            const values = options.map((option) => option.value);
+            const uniqueValues = new Set(values);
+            if (values.length !== uniqueValues.size) {
+                const duplicates = values.filter((value, index) => values.indexOf(value) !== index);
+                throw new Error(`Duplicate option values detected in bs-multi-checkbox: ${duplicates.join(', ')}`);
+            }
+        });
+    }
+    onCheckboxChange(option, event) {
+        const checked = event.target.checked;
+        this.valueViewModel.update((currentOptions) => {
+            if (checked) {
+                return currentOptions.some((opt) => opt.value === option.value)
+                    ? currentOptions
+                    : [...currentOptions, option];
+            }
+            else {
+                return currentOptions.filter((opt) => opt.value !== option.value);
+            }
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: BsMultiCheckboxFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.5", type: BsMultiCheckboxFieldComponent, isStandalone: true, selector: "df-bs-multi-checkbox", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, props: { classPropertyName: "props", publicName: "props", isSignal: true, isRequired: false, transformFunction: null } }, hostDirectives: [{ directive: i1.NgForgeFieldHost }], ngImport: i0, template: `
+    @let f = ngf.field();
+    @let checked = checkedValuesMap();
+    @if (ngf.label(); as label) {
+      <div class="form-label">{{ label | dynamicText | async }}</div>
+    }
+
+    <div class="checkbox-group">
+      @for (option of options(); track option.value; let i = $index) {
+        <div
+          class="form-check"
+          [class.form-switch]="props()?.switch"
+          [class.form-check-inline]="props()?.inline"
+          [class.form-check-reverse]="props()?.reverse"
+        >
+          <input
+            ngForgeControl
+            type="checkbox"
+            [id]="ngf.key() + '_' + i"
+            [checked]="checked['' + option.value]"
+            [disabled]="f().disabled() || option.disabled"
+            (change)="onCheckboxChange(option, $event)"
+            class="form-check-input"
+            [class.is-invalid]="f().invalid() && f().touched()"
+            [attr.tabindex]="ngf.tabIndex()"
+          />
+          <label [for]="ngf.key() + '_' + i" class="form-check-label">
+            {{ option.label | dynamicText | async }}
+          </label>
+        </div>
+      }
+    </div>
+
+    @if (ngf.errorsToDisplay()[0]; as error) {
+      <div class="invalid-feedback d-block" [id]="ngf.errorId()" role="alert">{{ error.message }}</div>
+    } @else if (props()?.hint; as hint) {
+      <div class="form-text" [id]="ngf.hintId()">{{ hint | dynamicText | async }}</div>
+    }
+  `, isInline: true, 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"], dependencies: [{ kind: "directive", type: NgForgeControl, selector: "[ngForgeControl]", inputs: ["ngForgeControl"] }, { kind: "pipe", type: DynamicTextPipe, name: "dynamicText" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: BsMultiCheckboxFieldComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'df-bs-multi-checkbox', imports: [DynamicTextPipe, AsyncPipe, NgForgeControl], hostDirectives: [NgForgeFieldHost], template: `
+    @let f = ngf.field();
+    @let checked = checkedValuesMap();
+    @if (ngf.label(); as label) {
+      <div class="form-label">{{ label | dynamicText | async }}</div>
+    }
+
+    <div class="checkbox-group">
+      @for (option of options(); track option.value; let i = $index) {
+        <div
+          class="form-check"
+          [class.form-switch]="props()?.switch"
+          [class.form-check-inline]="props()?.inline"
+          [class.form-check-reverse]="props()?.reverse"
+        >
+          <input
+            ngForgeControl
+            type="checkbox"
+            [id]="ngf.key() + '_' + i"
+            [checked]="checked['' + option.value]"
+            [disabled]="f().disabled() || option.disabled"
+            (change)="onCheckboxChange(option, $event)"
+            class="form-check-input"
+            [class.is-invalid]="f().invalid() && f().touched()"
+            [attr.tabindex]="ngf.tabIndex()"
+          />
+          <label [for]="ngf.key() + '_' + i" class="form-check-label">
+            {{ option.label | dynamicText | async }}
+          </label>
+        </div>
+      }
+    </div>
+
+    @if (ngf.errorsToDisplay()[0]; as error) {
+      <div class="invalid-feedback d-block" [id]="ngf.errorId()" role="alert">{{ error.message }}</div>
+    } @else if (props()?.hint; as hint) {
+      <div class="form-text" [id]="ngf.hintId()">{{ hint | dynamicText | async }}</div>
+    }
+  `, changeDetection: ChangeDetectionStrategy.OnPush, 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"] }]
+        }], ctorParameters: () => [], propDecorators: { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], props: [{ type: i0.Input, args: [{ isSignal: true, alias: "props", required: false }] }] } });
+
+
+export { BsMultiCheckboxFieldComponent };
+//# sourceMappingURL=ng-forge-dynamic-forms-bootstrap-lazy-multi-checkbox.mjs.map

package/fesm2022/ng-forge-dynamic-forms-bootstrap-lazy-multi-checkbox.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ng-forge-dynamic-forms-bootstrap-lazy-multi-checkbox.mjs","mappings":";;;;;;;AAqEc;;;;AAIH;;IAGA;;;;;AAKP;;;AAGF;AAEI;;AAEF;AAIF;AACE;AACE;AAEA;AACE;;AAEJ;AAEA;AACE;AACA;;;AAIE;;AAEJ;;;AAIA;;;AAGI;AACE;AACA;;;AAEF;;AAEJ;;;AArDiB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAlBlB;;;;AA1CS","names":[],"ignoreList":[],"sources":["../../../../packages/dynamic-forms-bootstrap/src/lib/fields/multi-checkbox/bs-multi-checkbox.component.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, computed, input, linkedSignal } from '@angular/core';\nimport { FieldOption, ValueType } from '@ng-forge/dynamic-forms';\nimport { DynamicTextPipe } from '@ng-forge/dynamic-forms/integration';\nimport { injectNgForgeField, NgForgeFieldHost, isEqual, NgForgeControl } from '@ng-forge/dynamic-forms/integration';\nimport { explicitEffect } from 'ngxtension/explicit-effect';\nimport { BsMultiCheckboxProps } from './bs-multi-checkbox.type';\nimport { AsyncPipe } from '@angular/common';\n\n@Component({\n  selector: 'df-bs-multi-checkbox',\n  imports: [DynamicTextPipe, AsyncPipe, NgForgeControl],\n  styleUrl: '../../styles/_form-field.scss',\n  hostDirectives: [NgForgeFieldHost],\n  template: `\n    @let f = ngf.field();\n    @let checked = checkedValuesMap();\n    @if (ngf.label(); as label) {\n      <div class=\"form-label\">{{ label | dynamicText | async }}</div>\n    }\n\n    <div class=\"checkbox-group\">\n      @for (option of options(); track option.value; let i = $index) {\n        <div\n          class=\"form-check\"\n          [class.form-switch]=\"props()?.switch\"\n          [class.form-check-inline]=\"props()?.inline\"\n          [class.form-check-reverse]=\"props()?.reverse\"\n        >\n          <input\n            ngForgeControl\n            type=\"checkbox\"\n            [id]=\"ngf.key() + '_' + i\"\n            [checked]=\"checked['' + option.value]\"\n            [disabled]=\"f().disabled() || option.disabled\"\n            (change)=\"onCheckboxChange(option, $event)\"\n            class=\"form-check-input\"\n            [class.is-invalid]=\"f().invalid() && f().touched()\"\n            [attr.tabindex]=\"ngf.tabIndex()\"\n          />\n          <label [for]=\"ngf.key() + '_' + i\" class=\"form-check-label\">\n            {{ option.label | dynamicText | async }}\n          </label>\n        </div>\n      }\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 (props()?.hint; as hint) {\n      <div class=\"form-text\" [id]=\"ngf.hintId()\">{{ hint | dynamicText | async }}</div>\n    }\n  `,\n  styles: [\n    `\n      :host {\n        display: block;\n      }\n\n      .checkbox-group {\n        margin-bottom: 0.5rem;\n      }\n\n      :host([hidden]) {\n        display: none !important;\n      }\n    `,\n  ],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport default class BsMultiCheckboxFieldComponent {\n  protected readonly ngf = injectNgForgeField<ValueType[]>();\n\n  readonly options = input<FieldOption<ValueType>[]>([]);\n  readonly props = input<BsMultiCheckboxProps>();\n\n  /** Computed map of checked option values for O(1) lookup in template */\n  readonly checkedValuesMap = computed(() => {\n    const map: Record<string, boolean> = {};\n    for (const opt of this.valueViewModel()) {\n      map[String(opt.value)] = true;\n    }\n    return map;\n  });\n\n  valueViewModel = linkedSignal<FieldOption<ValueType>[]>(\n    () => {\n      const currentValues = this.ngf.field()().value();\n      return this.options().filter((option) => currentValues.includes(option.value));\n    },\n    { equal: isEqual },\n  );\n\n  constructor() {\n    explicitEffect([this.valueViewModel], ([selectedOptions]: [FieldOption<ValueType>[]]) => {\n      const selectedValues = selectedOptions.map((option: FieldOption<ValueType>) => option.value);\n\n      if (!isEqual(selectedValues, this.ngf.field()().value())) {\n        this.ngf.field()().value.set(selectedValues);\n      }\n    });\n\n    explicitEffect([this.options], ([options]: [FieldOption<ValueType>[]]) => {\n      const values = options.map((option: FieldOption<ValueType>) => option.value);\n      const uniqueValues = new Set(values);\n\n      if (values.length !== uniqueValues.size) {\n        const duplicates = values.filter((value, index) => values.indexOf(value) !== index);\n        throw new Error(`Duplicate option values detected in bs-multi-checkbox: ${duplicates.join(', ')}`);\n      }\n    });\n  }\n\n  onCheckboxChange(option: FieldOption<ValueType>, event: Event): void {\n    const checked = (event.target as HTMLInputElement).checked;\n    this.valueViewModel.update((currentOptions: FieldOption<ValueType>[]) => {\n      if (checked) {\n        return currentOptions.some((opt: FieldOption<ValueType>) => opt.value === option.value)\n          ? currentOptions\n          : [...currentOptions, option];\n      } else {\n        return currentOptions.filter((opt: FieldOption<ValueType>) => opt.value !== option.value);\n      }\n    });\n  }\n}\n"]}