@ng-forge/dynamic-forms-bootstrap 1.2.0-next.6 → 1.2.0-next.7

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

@@ -0,0 +1,77 @@
+import { AsyncPipe } from '@angular/common';
+import * as i0 from '@angular/core';
+import { computed, ChangeDetectionStrategy, Component } from '@angular/core';
+import * as i1 from '@ng-forge/dynamic-forms/integration';
+import { injectNgForgeAddonAction, DynamicTextPipe, NgForgeAddonAction } from '@ng-forge/dynamic-forms/integration';
+
+class BsButtonAddonComponent {
+    action = injectNgForgeAddonAction();
+        addon = this.action.addon;
+    label = computed(() => this.addon().label, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    ariaLabel = computed(() => this.addon().ariaLabel, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+    iconClass = computed(() => {
+        const icon = this.addon().icon;
+        return icon ? `bi bi-${icon}` : '';
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "iconClass" }] : /* istanbul ignore next */ []));
+    buttonClass = computed(() => `btn btn-outline-${this.addon().severity ?? 'secondary'}`, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "buttonClass" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: BsButtonAddonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: BsButtonAddonComponent, isStandalone: true, selector: "df-bs-button-addon", hostDirectives: [{ directive: i1.NgForgeAddonAction }], ngImport: i0, template: `
+    <button
+      type="button"
+      [class]="buttonClass()"
+      [disabled]="action.disabled() || action.loading()"
+      [attr.aria-label]="(ariaLabel() | dynamicText | async) ?? null"
+      [attr.aria-busy]="action.loading() || null"
+      (click)="action.dispatch()"
+    >
+      @if (action.loading()) {
+        <!-- Visually-hidden role=status text gives a reliable AT announcement (VO/JAWS/NVDA). -->
+        <span class="spinner-border spinner-border-sm" aria-hidden="true"></span>
+        <span class="visually-hidden" role="status">Loading…</span>
+      } @else if (iconClass(); as ic) {
+        <i [class]="ic" aria-hidden="true"></i>
+      }
+      @if (label(); as l) {
+        <span>{{ l | dynamicText | async }}</span>
+      }
+    </button>
+  `, isInline: true, dependencies: [{ kind: "pipe", type: DynamicTextPipe, name: "dynamicText" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: BsButtonAddonComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'df-bs-button-addon',
+                    imports: [DynamicTextPipe, AsyncPipe],
+                    hostDirectives: [NgForgeAddonAction],
+                    template: `
+    <button
+      type="button"
+      [class]="buttonClass()"
+      [disabled]="action.disabled() || action.loading()"
+      [attr.aria-label]="(ariaLabel() | dynamicText | async) ?? null"
+      [attr.aria-busy]="action.loading() || null"
+      (click)="action.dispatch()"
+    >
+      @if (action.loading()) {
+        <!-- Visually-hidden role=status text gives a reliable AT announcement (VO/JAWS/NVDA). -->
+        <span class="spinner-border spinner-border-sm" aria-hidden="true"></span>
+        <span class="visually-hidden" role="status">Loading…</span>
+      } @else if (iconClass(); as ic) {
+        <i [class]="ic" aria-hidden="true"></i>
+      }
+      @if (label(); as l) {
+        <span>{{ l | dynamicText | async }}</span>
+      }
+    </button>
+  `,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }] });
+
+
+export { BsButtonAddonComponent };
+//# sourceMappingURL=ng-forge-dynamic-forms-bootstrap-lazy-addon-button.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ng-forge-dynamic-forms-bootstrap-lazy-addon-button.mjs","mappings":";;;;;;;;IAsCqB;;;;;AAIA;;;;;AAIA;;;AAZR;;;;;;;;;;;;;;;;;;;;;;;;AA3BF;AACT;AACA;;AAEA;;;;;;;;;;;;;;;;;;;;AAoBC;;AAEF","names":[],"ignoreList":[],"sources":["../../../../packages/dynamic-forms-bootstrap/src/lib/addons/bs-button-addon.component.ts"],"sourcesContent":["import { AsyncPipe } from '@angular/common';\nimport { ChangeDetectionStrategy, Component, computed } from '@angular/core';\nimport { DynamicTextPipe } from '@ng-forge/dynamic-forms/integration';\nimport { injectNgForgeAddonAction, NgForgeAddonAction } from '@ng-forge/dynamic-forms/integration';\nimport type { BsButtonAddon } from '@ng-forge/dynamic-forms-bootstrap/shared';\n\n/** Renderer for the `bs-button` addon type. */\n@Component({\n  selector: 'df-bs-button-addon',\n  imports: [DynamicTextPipe, AsyncPipe],\n  hostDirectives: [NgForgeAddonAction],\n  template: `\n    <button\n      type=\"button\"\n      [class]=\"buttonClass()\"\n      [disabled]=\"action.disabled() || action.loading()\"\n      [attr.aria-label]=\"(ariaLabel() | dynamicText | async) ?? null\"\n      [attr.aria-busy]=\"action.loading() || null\"\n      (click)=\"action.dispatch()\"\n    >\n      @if (action.loading()) {\n        <!-- Visually-hidden role=status text gives a reliable AT announcement (VO/JAWS/NVDA). -->\n        <span class=\"spinner-border spinner-border-sm\" aria-hidden=\"true\"></span>\n        <span class=\"visually-hidden\" role=\"status\">Loading…</span>\n      } @else if (iconClass(); as ic) {\n        <i [class]=\"ic\" aria-hidden=\"true\"></i>\n      }\n      @if (label(); as l) {\n        <span>{{ l | dynamicText | async }}</span>\n      }\n    </button>\n  `,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class BsButtonAddonComponent {\n  protected readonly action = injectNgForgeAddonAction<BsButtonAddon>();\n\n  /** Re-exposed for template binding — same signal stored on the directive. */\n  protected readonly addon = this.action.addon;\n\n  protected readonly label = computed(() => this.addon().label);\n  protected readonly ariaLabel = computed(() => this.addon().ariaLabel);\n  protected readonly iconClass = computed(() => {\n    const icon = this.addon().icon;\n    return icon ? `bi bi-${icon}` : '';\n  });\n  protected readonly buttonClass = computed(() => `btn btn-outline-${this.addon().severity ?? 'secondary'}`);\n}\n"]}

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

@@ -0,0 +1,35 @@
+import { AsyncPipe } from '@angular/common';
+import * as i0 from '@angular/core';
+import { input, computed, ChangeDetectionStrategy, Component } from '@angular/core';
+import { DynamicTextPipe } from '@ng-forge/dynamic-forms/integration';
+
+class BsIconAddonComponent {
+    addon = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "addon" }] : /* istanbul ignore next */ []));
+        fieldInputs = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "fieldInputs" }] : /* istanbul ignore next */ []));
+    iconClass = computed(() => `bi bi-${this.addon().icon}`, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "iconClass" }] : /* istanbul ignore next */ []));
+    ariaLabel = computed(() => this.addon().ariaLabel, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+    hasAriaLabel = computed(() => this.addon().ariaLabel !== undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hasAriaLabel" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: BsIconAddonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.1", type: BsIconAddonComponent, isStandalone: true, selector: "df-bs-icon-addon", inputs: { addon: { classPropertyName: "addon", publicName: "addon", isSignal: true, isRequired: true, transformFunction: null }, fieldInputs: { classPropertyName: "fieldInputs", publicName: "fieldInputs", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.aria-hidden": "hasAriaLabel() ? null : \"true\"" } }, ngImport: i0, template: `<i [class]="iconClass()" [attr.aria-label]="(ariaLabel() | dynamicText | async) ?? null"></i>`, isInline: true, dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: DynamicTextPipe, name: "dynamicText" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: BsIconAddonComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'df-bs-icon-addon',
+                    imports: [AsyncPipe, DynamicTextPipe],
+                    template: `<i [class]="iconClass()" [attr.aria-label]="(ariaLabel() | dynamicText | async) ?? null"></i>`,
+                    host: {
+                        '[attr.aria-hidden]': 'hasAriaLabel() ? null : "true"',
+                    },
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }], propDecorators: { addon: [{ type: i0.Input, args: [{ isSignal: true, alias: "addon", required: true }] }], fieldInputs: [{ type: i0.Input, args: [{ isSignal: true, alias: "fieldInputs", required: false }] }] } });
+
+
+export { BsIconAddonComponent };
+//# sourceMappingURL=ng-forge-dynamic-forms-bootstrap-lazy-addon-icon.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ng-forge-dynamic-forms-bootstrap-lazy-addon-icon.mjs","mappings":";;;;;;;;IAmBW;;AAEU;;;;AAEA;;;AAPR;;;;AATF;AACT;AACA;AACA;AACA;AACE;AACD;;AAEF","names":[],"ignoreList":[],"sources":["../../../../packages/dynamic-forms-bootstrap/src/lib/addons/bs-icon-addon.component.ts"],"sourcesContent":["import { AsyncPipe } from '@angular/common';\nimport { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';\nimport { WrapperFieldInputs } from '@ng-forge/dynamic-forms/integration';\nimport { DynamicTextPipe } from '@ng-forge/dynamic-forms/integration';\nimport type { BsIconAddon } from '@ng-forge/dynamic-forms-bootstrap/shared';\n\n/** Renderer for the `bs-icon` addon type. */\n@Component({\n  selector: 'df-bs-icon-addon',\n  imports: [AsyncPipe, DynamicTextPipe],\n  template: `<i [class]=\"iconClass()\" [attr.aria-label]=\"(ariaLabel() | dynamicText | async) ?? null\"></i>`,\n  host: {\n    '[attr.aria-hidden]': 'hasAriaLabel() ? null : \"true\"',\n  },\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class BsIconAddonComponent {\n  readonly addon = input.required<BsIconAddon>();\n  /** Accepted for contract uniformity — `NgComponentOutlet` setInput is strict; every type must declare it. */\n  readonly fieldInputs = input<WrapperFieldInputs | undefined>();\n\n  protected readonly iconClass = computed(() => `bi bi-${this.addon().icon}`);\n  protected readonly ariaLabel = computed(() => this.addon().ariaLabel);\n  protected readonly hasAriaLabel = computed(() => this.addon().ariaLabel !== undefined);\n}\n"]}

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

@@ -0,0 +1,74 @@
+import { AsyncPipe } from '@angular/common';
+import * as i0 from '@angular/core';
+import { input, computed, ChangeDetectionStrategy, Component } from '@angular/core';
+import * as i1 from '@ng-forge/dynamic-forms/integration';
+import { injectNgForgeAction, DynamicTextPipe, NgForgeActionHost } from '@ng-forge/dynamic-forms/integration';
+
+class BsButtonFieldComponent {
+    action = injectNgForgeAction();
+    props = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "props" }] : /* istanbul ignore next */ []));
+        buttonType = computed(() => this.props()?.type ?? 'button', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "buttonType" }] : /* istanbul ignore next */ []));
+    buttonTestId = computed(() => `${this.buttonType()}-${this.action.key()}`, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "buttonTestId" }] : /* istanbul ignore next */ []));
+    buttonClasses = computed(() => {
+        const p = this.props();
+        const variant = p?.variant || 'primary';
+        const outline = p?.outline ? 'outline-' : '';
+        return [
+            'btn',
+            `btn-${outline}${variant}`,
+            p?.size === 'sm' && 'btn-sm',
+            p?.size === 'lg' && 'btn-lg',
+            p?.block && 'w-100',
+            p?.active && 'active',
+            this.action.className(),
+        ]
+            .filter(Boolean)
+            .join(' ');
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "buttonClasses" }] : /* istanbul ignore next */ []));
+        onClick() {
+        if (this.buttonType() === 'submit')
+            return;
+        this.action.dispatch();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: BsButtonFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.1", type: BsButtonFieldComponent, isStandalone: true, selector: "df-bs-button", inputs: { props: { classPropertyName: "props", publicName: "props", isSignal: true, isRequired: false, transformFunction: null } }, hostDirectives: [{ directive: i1.NgForgeActionHost }], ngImport: i0, template: `
+    @let buttonId = action.key() + '-button';
+    <button
+      [id]="buttonId"
+      [type]="buttonType()"
+      [disabled]="action.disabled()"
+      [class]="buttonClasses()"
+      [attr.tabindex]="action.tabIndex()"
+      [attr.data-testid]="buttonTestId()"
+      (click)="onClick()"
+    >
+      {{ action.label() | dynamicText | async }}
+    </button>
+  `, 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"], dependencies: [{ kind: "pipe", type: DynamicTextPipe, name: "dynamicText" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: BsButtonFieldComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'df-bs-button', imports: [DynamicTextPipe, AsyncPipe], hostDirectives: [NgForgeActionHost], template: `
+    @let buttonId = action.key() + '-button';
+    <button
+      [id]="buttonId"
+      [type]="buttonType()"
+      [disabled]="action.disabled()"
+      [class]="buttonClasses()"
+      [attr.tabindex]="action.tabIndex()"
+      [attr.data-testid]="buttonTestId()"
+      (click)="onClick()"
+    >
+      {{ action.label() | dynamicText | async }}
+    </button>
+  `, 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"] }]
+        }], propDecorators: { props: [{ type: i0.Input, args: [{ isSignal: true, alias: "props", required: false }] }] } });
+
+
+
+export { BsButtonFieldComponent };
+//# sourceMappingURL=ng-forge-dynamic-forms-bootstrap-lazy-button.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ng-forge-dynamic-forms-bootstrap-lazy-button.mjs","mappings":";;;;;;AA4Bc;;AAGH;;IAGA;;AAEA;;AAEA;AACP;AACA;AACA;;;;AAKE;AACA;;;AAGA;AACD;;;;;;AAOD;;AACA;;;AA/BiB","names":[],"ignoreList":[],"sources":["../../../../packages/dynamic-forms-bootstrap/src/lib/fields/button/bs-button.component.ts"],"sourcesContent":["import { AsyncPipe } from '@angular/common';\nimport { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';\nimport { FormEvent } from '@ng-forge/dynamic-forms';\nimport { DynamicTextPipe } from '@ng-forge/dynamic-forms/integration';\nimport { injectNgForgeAction, NgForgeActionHost } from '@ng-forge/dynamic-forms/integration';\nimport { BsButtonProps } from './bs-button.type';\n\n@Component({\n  selector: 'df-bs-button',\n  imports: [DynamicTextPipe, AsyncPipe],\n  styleUrl: '../../styles/_form-field.scss',\n  hostDirectives: [NgForgeActionHost],\n  template: `\n    @let buttonId = action.key() + '-button';\n    <button\n      [id]=\"buttonId\"\n      [type]=\"buttonType()\"\n      [disabled]=\"action.disabled()\"\n      [class]=\"buttonClasses()\"\n      [attr.tabindex]=\"action.tabIndex()\"\n      [attr.data-testid]=\"buttonTestId()\"\n      (click)=\"onClick()\"\n    >\n      {{ action.label() | dynamicText | async }}\n    </button>\n  `,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport default class BsButtonFieldComponent<TEvent extends FormEvent> {\n  protected readonly action = injectNgForgeAction<TEvent>();\n\n  readonly props = input<BsButtonProps>();\n\n  /** Resolved button type — defaults to 'button' unless overridden via props. */\n  readonly buttonType = computed(() => this.props()?.type ?? 'button');\n\n  readonly buttonTestId = computed(() => `${this.buttonType()}-${this.action.key()}`);\n\n  readonly buttonClasses = computed(() => {\n    const p = this.props();\n    const variant = p?.variant || 'primary';\n    const outline = p?.outline ? 'outline-' : '';\n\n    return [\n      'btn',\n      `btn-${outline}${variant}`,\n      p?.size === 'sm' && 'btn-sm',\n      p?.size === 'lg' && 'btn-lg',\n      p?.block && 'w-100',\n      p?.active && 'active',\n      this.action.className(),\n    ]\n      .filter(Boolean)\n      .join(' ');\n  });\n\n  /** Submit buttons let the native form handle submission; other buttons dispatch via the directive. */\n  onClick(): void {\n    if (this.buttonType() === 'submit') return;\n    this.action.dispatch();\n  }\n}\n"]}

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

@@ -0,0 +1,82 @@
+import * as i0 from '@angular/core';
+import { input, ChangeDetectionStrategy, Component } from '@angular/core';
+import { FormField } from '@angular/forms/signals';
+import * as i1 from '@ng-forge/dynamic-forms/integration';
+import { injectNgForgeField, NgForgeControl, DynamicTextPipe, NgForgeFieldHost } from '@ng-forge/dynamic-forms/integration';
+import { AsyncPipe } from '@angular/common';
+
+class BsCheckboxFieldComponent {
+    ngf = injectNgForgeField();
+    props = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "props" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: BsCheckboxFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: BsCheckboxFieldComponent, isStandalone: true, selector: "df-bs-checkbox", inputs: { props: { classPropertyName: "props", publicName: "props", isSignal: true, isRequired: false, transformFunction: null } }, hostDirectives: [{ directive: i1.NgForgeFieldHost }], ngImport: i0, template: `
+    @let f = ngf.field(); @let checkboxId = ngf.key() + '-checkbox';
+
+    <div
+      class="form-check"
+      [class.form-switch]="props()?.switch"
+      [class.form-check-inline]="props()?.inline"
+      [class.form-check-reverse]="props()?.reverse"
+      [attr.hidden]="f().hidden() || null"
+    >
+      <input
+        ngForgeControl
+        type="checkbox"
+        [formField]="f"
+        [id]="checkboxId"
+        [indeterminate]="props()?.indeterminate ?? false"
+        class="form-check-input"
+        [class.is-invalid]="f().invalid() && f().touched()"
+        [attr.tabindex]="ngf.tabIndex()"
+      />
+      <label [for]="checkboxId" class="form-check-label">
+        {{ ngf.label() | dynamicText | async }}
+      </label>
+    </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()" [attr.hidden]="f().hidden() || null">{{ 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}:host([hidden]){display:none!important}\n"], dependencies: [{ kind: "directive", type: FormField, selector: "[formField]", inputs: ["formField"], exportAs: ["formField"] }, { 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.0.1", ngImport: i0, type: BsCheckboxFieldComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'df-bs-checkbox', imports: [FormField, DynamicTextPipe, AsyncPipe, NgForgeControl], hostDirectives: [NgForgeFieldHost], template: `
+    @let f = ngf.field(); @let checkboxId = ngf.key() + '-checkbox';
+
+    <div
+      class="form-check"
+      [class.form-switch]="props()?.switch"
+      [class.form-check-inline]="props()?.inline"
+      [class.form-check-reverse]="props()?.reverse"
+      [attr.hidden]="f().hidden() || null"
+    >
+      <input
+        ngForgeControl
+        type="checkbox"
+        [formField]="f"
+        [id]="checkboxId"
+        [indeterminate]="props()?.indeterminate ?? false"
+        class="form-check-input"
+        [class.is-invalid]="f().invalid() && f().touched()"
+        [attr.tabindex]="ngf.tabIndex()"
+      />
+      <label [for]="checkboxId" class="form-check-label">
+        {{ ngf.label() | dynamicText | async }}
+      </label>
+    </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()" [attr.hidden]="f().hidden() || null">{{ 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}:host([hidden]){display:none!important}\n"] }]
+        }], propDecorators: { props: [{ type: i0.Input, args: [{ isSignal: true, alias: "props", required: false }] }] } });
+
+
+export { BsCheckboxFieldComponent };
+//# sourceMappingURL=ng-forge-dynamic-forms-bootstrap-lazy-checkbox.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ng-forge-dynamic-forms-bootstrap-lazy-checkbox.mjs","mappings":";;;;;;;AAwDc;;AAGH;;;AAHU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAdlB;;;;AAlCS","names":[],"ignoreList":[],"sources":["../../../../packages/dynamic-forms-bootstrap/src/lib/fields/checkbox/bs-checkbox.component.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, input } from '@angular/core';\nimport { FormField } from '@angular/forms/signals';\nimport { DynamicTextPipe } from '@ng-forge/dynamic-forms/integration';\nimport { NgForgeControl, injectNgForgeField, NgForgeFieldHost } from '@ng-forge/dynamic-forms/integration';\nimport { BsCheckboxProps } from './bs-checkbox.type';\nimport { AsyncPipe } from '@angular/common';\n\n@Component({\n  selector: 'df-bs-checkbox',\n  imports: [FormField, DynamicTextPipe, AsyncPipe, NgForgeControl],\n  styleUrl: '../../styles/_form-field.scss',\n  hostDirectives: [NgForgeFieldHost],\n  template: `\n    @let f = ngf.field(); @let checkboxId = ngf.key() + '-checkbox';\n\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      [attr.hidden]=\"f().hidden() || null\"\n    >\n      <input\n        ngForgeControl\n        type=\"checkbox\"\n        [formField]=\"f\"\n        [id]=\"checkboxId\"\n        [indeterminate]=\"props()?.indeterminate ?? false\"\n        class=\"form-check-input\"\n        [class.is-invalid]=\"f().invalid() && f().touched()\"\n        [attr.tabindex]=\"ngf.tabIndex()\"\n      />\n      <label [for]=\"checkboxId\" class=\"form-check-label\">\n        {{ ngf.label() | dynamicText | async }}\n      </label>\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()\" [attr.hidden]=\"f().hidden() || null\">{{ hint | dynamicText | async }}</div>\n    }\n  `,\n  styles: [\n    `\n      :host {\n        display: block;\n      }\n\n      :host([hidden]) {\n        display: none !important;\n      }\n    `,\n  ],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport default class BsCheckboxFieldComponent {\n  protected readonly ngf = injectNgForgeField<boolean>();\n\n  readonly props = input<BsCheckboxProps>();\n}\n"]}

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

@@ -0,0 +1,177 @@
+import * as i0 from '@angular/core';
+import { input, computed, ChangeDetectionStrategy, Component } from '@angular/core';
+import { FormField } from '@angular/forms/signals';
+import * as i1 from '@ng-forge/dynamic-forms/integration';
+import { injectNgForgeField, NgForgeControl, DynamicTextPipe, NgForgeFieldHost } from '@ng-forge/dynamic-forms/integration';
+import { AsyncPipe } from '@angular/common';
+import { InputConstraintsDirective } from '@ng-forge/dynamic-forms-bootstrap/shared';
+
+class BsDatepickerFieldComponent {
+    ngf = injectNgForgeField();
+    minDate = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "minDate" }] : /* istanbul ignore next */ []));
+    maxDate = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "maxDate" }] : /* istanbul ignore next */ []));
+    startAt = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "startAt" }] : /* istanbul ignore next */ []));
+    props = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "props" }] : /* istanbul ignore next */ []));
+        minAsString = computed(() => {
+        const min = this.minDate();
+        return min instanceof Date ? min.toISOString().split('T')[0] : min;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "minAsString" }] : /* istanbul ignore next */ []));
+    maxAsString = computed(() => {
+        const max = this.maxDate();
+        return max instanceof Date ? max.toISOString().split('T')[0] : max;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "maxAsString" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: BsDatepickerFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: BsDatepickerFieldComponent, isStandalone: true, selector: "df-bs-datepicker", inputs: { minDate: { classPropertyName: "minDate", publicName: "minDate", isSignal: true, isRequired: false, transformFunction: null }, maxDate: { classPropertyName: "maxDate", publicName: "maxDate", isSignal: true, isRequired: false, transformFunction: null }, startAt: { classPropertyName: "startAt", publicName: "startAt", isSignal: true, isRequired: false, transformFunction: null }, props: { classPropertyName: "props", publicName: "props", isSignal: true, isRequired: false, transformFunction: null } }, hostDirectives: [{ directive: i1.NgForgeFieldHost }], ngImport: i0, template: `
+    @let f = ngf.field(); @let p = props(); @let inputId = ngf.key() + '-input';
+    @if (p?.floatingLabel) {
+      <!-- Floating label variant -->
+      <div class="form-floating mb-3">
+        <input
+          ngForgeControl
+          dfBsInputConstraints
+          [formField]="f"
+          [id]="inputId"
+          type="date"
+          [placeholder]="(ngf.placeholder() | dynamicText | async) ?? ''"
+          [dfMin]="minAsString()"
+          [dfMax]="maxAsString()"
+          [attr.tabindex]="ngf.tabIndex()"
+          class="form-control"
+          [class.form-control-sm]="p?.size === 'sm'"
+          [class.form-control-lg]="p?.size === 'lg'"
+          [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>
+        }
+        @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 {
+      <!-- Standard variant -->
+      <div class="mb-3">
+        @if (ngf.label()) {
+          <label [for]="inputId" class="form-label">{{ ngf.label() | dynamicText | async }}</label>
+        }
+
+        <input
+          ngForgeControl
+          dfBsInputConstraints
+          [formField]="f"
+          [id]="inputId"
+          type="date"
+          [placeholder]="(ngf.placeholder() | dynamicText | async) ?? ''"
+          [dfMin]="minAsString()"
+          [dfMax]="maxAsString()"
+          [attr.tabindex]="ngf.tabIndex()"
+          class="form-control"
+          [class.form-control-sm]="p?.size === 'sm'"
+          [class.form-control-lg]="p?.size === 'lg'"
+          [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}\n"], dependencies: [{ kind: "directive", type: FormField, selector: "[formField]", inputs: ["formField"], exportAs: ["formField"] }, { kind: "directive", type: InputConstraintsDirective, selector: "[dfBsInputConstraints]", inputs: ["dfMin", "dfMax", "dfStep"] }, { 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.0.1", ngImport: i0, type: BsDatepickerFieldComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'df-bs-datepicker', imports: [FormField, DynamicTextPipe, AsyncPipe, InputConstraintsDirective, NgForgeControl], hostDirectives: [NgForgeFieldHost], template: `
+    @let f = ngf.field(); @let p = props(); @let inputId = ngf.key() + '-input';
+    @if (p?.floatingLabel) {
+      <!-- Floating label variant -->
+      <div class="form-floating mb-3">
+        <input
+          ngForgeControl
+          dfBsInputConstraints
+          [formField]="f"
+          [id]="inputId"
+          type="date"
+          [placeholder]="(ngf.placeholder() | dynamicText | async) ?? ''"
+          [dfMin]="minAsString()"
+          [dfMax]="maxAsString()"
+          [attr.tabindex]="ngf.tabIndex()"
+          class="form-control"
+          [class.form-control-sm]="p?.size === 'sm'"
+          [class.form-control-lg]="p?.size === 'lg'"
+          [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>
+        }
+        @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 {
+      <!-- Standard variant -->
+      <div class="mb-3">
+        @if (ngf.label()) {
+          <label [for]="inputId" class="form-label">{{ ngf.label() | dynamicText | async }}</label>
+        }
+
+        <input
+          ngForgeControl
+          dfBsInputConstraints
+          [formField]="f"
+          [id]="inputId"
+          type="date"
+          [placeholder]="(ngf.placeholder() | dynamicText | async) ?? ''"
+          [dfMin]="minAsString()"
+          [dfMax]="maxAsString()"
+          [attr.tabindex]="ngf.tabIndex()"
+          class="form-control"
+          [class.form-control-sm]="p?.size === 'sm'"
+          [class.form-control-lg]="p?.size === 'lg'"
+          [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, 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}\n"] }]
+        }], propDecorators: { minDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "minDate", required: false }] }], maxDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxDate", required: false }] }], startAt: [{ type: i0.Input, args: [{ isSignal: true, alias: "startAt", required: false }] }], props: [{ type: i0.Input, args: [{ isSignal: true, alias: "props", required: false }] }] } });
+
+
+export { BsDatepickerFieldComponent };
+//# sourceMappingURL=ng-forge-dynamic-forms-bootstrap-lazy-datepicker.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ng-forge-dynamic-forms-bootstrap-lazy-datepicker.mjs","mappings":";;;;;;;;AA4Fc;;;;;;;;AAMH;;IAGA;AACP;;;;AAIO;AACP;;;;;AAfiB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAnFT","names":[],"ignoreList":[],"sources":["../../../../packages/dynamic-forms-bootstrap/src/lib/fields/datepicker/bs-datepicker.component.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';\nimport { FormField } from '@angular/forms/signals';\nimport { DynamicTextPipe } from '@ng-forge/dynamic-forms/integration';\nimport { NgForgeControl, injectNgForgeField, NgForgeFieldHost } from '@ng-forge/dynamic-forms/integration';\nimport { BsDatepickerProps } from './bs-datepicker.type';\nimport { AsyncPipe } from '@angular/common';\nimport { InputConstraintsDirective } from '@ng-forge/dynamic-forms-bootstrap/shared';\n\n@Component({\n  selector: 'df-bs-datepicker',\n  imports: [FormField, DynamicTextPipe, AsyncPipe, InputConstraintsDirective, NgForgeControl],\n  styleUrl: '../../styles/_form-field.scss',\n  hostDirectives: [NgForgeFieldHost],\n  template: `\n    @let f = ngf.field(); @let p = props(); @let inputId = ngf.key() + '-input';\n    @if (p?.floatingLabel) {\n      <!-- Floating label variant -->\n      <div class=\"form-floating mb-3\">\n        <input\n          ngForgeControl\n          dfBsInputConstraints\n          [formField]=\"f\"\n          [id]=\"inputId\"\n          type=\"date\"\n          [placeholder]=\"(ngf.placeholder() | dynamicText | async) ?? ''\"\n          [dfMin]=\"minAsString()\"\n          [dfMax]=\"maxAsString()\"\n          [attr.tabindex]=\"ngf.tabIndex()\"\n          class=\"form-control\"\n          [class.form-control-sm]=\"p?.size === 'sm'\"\n          [class.form-control-lg]=\"p?.size === 'lg'\"\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        @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      <!-- Standard variant -->\n      <div class=\"mb-3\">\n        @if (ngf.label()) {\n          <label [for]=\"inputId\" class=\"form-label\">{{ ngf.label() | dynamicText | async }}</label>\n        }\n\n        <input\n          ngForgeControl\n          dfBsInputConstraints\n          [formField]=\"f\"\n          [id]=\"inputId\"\n          type=\"date\"\n          [placeholder]=\"(ngf.placeholder() | dynamicText | async) ?? ''\"\n          [dfMin]=\"minAsString()\"\n          [dfMax]=\"maxAsString()\"\n          [attr.tabindex]=\"ngf.tabIndex()\"\n          class=\"form-control\"\n          [class.form-control-sm]=\"p?.size === 'sm'\"\n          [class.form-control-lg]=\"p?.size === 'lg'\"\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  styles: [\n    `\n      :host([hidden]) {\n        display: none !important;\n      }\n    `,\n  ],\n})\nexport default class BsDatepickerFieldComponent {\n  protected readonly ngf = injectNgForgeField<string>();\n\n  readonly minDate = input<Date | string | null>(null);\n  readonly maxDate = input<Date | string | null>(null);\n  readonly startAt = input<Date | null>(null);\n  readonly props = input<BsDatepickerProps>();\n\n  // Helper methods to convert Date to string for HTML attributes\n  readonly minAsString = computed(() => {\n    const min = this.minDate();\n    return min instanceof Date ? min.toISOString().split('T')[0] : min;\n  });\n\n  readonly maxAsString = computed(() => {\n    const max = this.maxDate();\n    return max instanceof Date ? max.toISOString().split('T')[0] : max;\n  });\n}\n"]}