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

package/fesm2022/ng-forge-dynamic-forms-bootstrap-lazy-toggle.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 BsToggleFieldComponent {
+    ngf = injectNgForgeField();
+    props = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "props" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: BsToggleFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.5", type: BsToggleFieldComponent, isStandalone: true, selector: "df-bs-toggle", inputs: { props: { classPropertyName: "props", publicName: "props", isSignal: true, isRequired: false, transformFunction: null } }, hostDirectives: [{ directive: i1.NgForgeFieldHost }], ngImport: i0, template: `
+    @let f = ngf.field(); @let inputId = ngf.key() + '-input';
+
+    <div
+      class="form-check form-switch"
+      [class.form-check-inline]="props()?.inline"
+      [class.form-check-reverse]="props()?.reverse"
+      [class.form-switch-sm]="props()?.size === 'sm'"
+      [class.form-switch-lg]="props()?.size === 'lg'"
+      [attr.hidden]="f().hidden() || null"
+    >
+      <input
+        ngForgeControl
+        type="checkbox"
+        [formField]="f"
+        [id]="inputId"
+        class="form-check-input"
+        [class.is-invalid]="f().invalid() && f().touched()"
+        [attr.tabindex]="ngf.tabIndex()"
+      />
+      <label [for]="inputId" 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}.form-switch-sm .form-check-input{width:1.75rem;height:1rem;font-size:.875rem}.form-switch-lg .form-check-input{width:3rem;height:1.75rem;font-size:1.125rem}\n"], dependencies: [{ kind: "directive", type: FormField, selector: "[formField]", inputs: ["formField"], exportAs: ["formField"] }, { kind: "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: BsToggleFieldComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'df-bs-toggle', imports: [FormField, DynamicTextPipe, AsyncPipe, NgForgeControl], hostDirectives: [NgForgeFieldHost], template: `
+    @let f = ngf.field(); @let inputId = ngf.key() + '-input';
+
+    <div
+      class="form-check form-switch"
+      [class.form-check-inline]="props()?.inline"
+      [class.form-check-reverse]="props()?.reverse"
+      [class.form-switch-sm]="props()?.size === 'sm'"
+      [class.form-switch-lg]="props()?.size === 'lg'"
+      [attr.hidden]="f().hidden() || null"
+    >
+      <input
+        ngForgeControl
+        type="checkbox"
+        [formField]="f"
+        [id]="inputId"
+        class="form-check-input"
+        [class.is-invalid]="f().invalid() && f().touched()"
+        [attr.tabindex]="ngf.tabIndex()"
+      />
+      <label [for]="inputId" 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}.form-switch-sm .form-check-input{width:1.75rem;height:1rem;font-size:.875rem}.form-switch-lg .form-check-input{width:3rem;height:1.75rem;font-size:1.125rem}\n"] }]
+        }], propDecorators: { props: [{ type: i0.Input, args: [{ isSignal: true, alias: "props", required: false }] }] } });
+
+
+export { BsToggleFieldComponent };
+//# sourceMappingURL=ng-forge-dynamic-forms-bootstrap-lazy-toggle.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ng-forge-dynamic-forms-bootstrap-lazy-toggle.mjs","mappings":";;;;;;;AAqEc;;AAGH;;;AAHU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA3BlB;;;;AAlCS","names":[],"ignoreList":[],"sources":["../../../../packages/dynamic-forms-bootstrap/src/lib/fields/toggle/bs-toggle.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 { BsToggleProps } from './bs-toggle.type';\nimport { AsyncPipe } from '@angular/common';\n\n@Component({\n  selector: 'df-bs-toggle',\n  imports: [FormField, DynamicTextPipe, AsyncPipe, NgForgeControl],\n  styleUrl: '../../styles/_form-field.scss',\n  hostDirectives: [NgForgeFieldHost],\n  template: `\n    @let f = ngf.field(); @let inputId = ngf.key() + '-input';\n\n    <div\n      class=\"form-check form-switch\"\n      [class.form-check-inline]=\"props()?.inline\"\n      [class.form-check-reverse]=\"props()?.reverse\"\n      [class.form-switch-sm]=\"props()?.size === 'sm'\"\n      [class.form-switch-lg]=\"props()?.size === 'lg'\"\n      [attr.hidden]=\"f().hidden() || null\"\n    >\n      <input\n        ngForgeControl\n        type=\"checkbox\"\n        [formField]=\"f\"\n        [id]=\"inputId\"\n        class=\"form-check-input\"\n        [class.is-invalid]=\"f().invalid() && f().touched()\"\n        [attr.tabindex]=\"ngf.tabIndex()\"\n      />\n      <label [for]=\"inputId\" 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      /* Custom size variants for switches */\n      .form-switch-sm .form-check-input {\n        width: 1.75rem;\n        height: 1rem;\n        font-size: 0.875rem;\n      }\n\n      .form-switch-lg .form-check-input {\n        width: 3rem;\n        height: 1.75rem;\n        font-size: 1.125rem;\n      }\n    `,\n  ],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport default class BsToggleFieldComponent {\n  protected readonly ngf = injectNgForgeField<boolean>();\n\n  readonly props = input<BsToggleProps>();\n}\n"]}

package/fesm2022/ng-forge-dynamic-forms-bootstrap-shared.mjs

@@ -0,0 +1,44 @@
+import * as i0 from '@angular/core';
+import { InjectionToken, input, inject, ElementRef, Directive } from '@angular/core';
+import { explicitEffect } from 'ngxtension/explicit-effect';
+import { runPresetAction } from '@ng-forge/dynamic-forms/integration';
+
+const BOOTSTRAP_CONFIG = new InjectionToken('BOOTSTRAP_CONFIG');
+
+const BS_INPUT_TYPE_OVERRIDE = new InjectionToken('BS_INPUT_TYPE_OVERRIDE');
+
+class InputConstraintsDirective {
+    dfMin = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "dfMin" }] : /* istanbul ignore next */ []));
+    dfMax = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "dfMax" }] : /* istanbul ignore next */ []));
+    dfStep = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "dfStep" }] : /* istanbul ignore next */ []));
+    element = inject(ElementRef);
+    minEffect = explicitEffect([this.dfMin], ([value]) => this.reflectAttribute('min', value));
+    maxEffect = explicitEffect([this.dfMax], ([value]) => this.reflectAttribute('max', value));
+    stepEffect = explicitEffect([this.dfStep], ([value]) => this.reflectAttribute('step', value));
+    reflectAttribute(name, value) {
+        if (value === null || value === undefined) {
+            this.element.nativeElement.removeAttribute(name);
+            return;
+        }
+        this.element.nativeElement.setAttribute(name, String(value));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: InputConstraintsDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.5", type: InputConstraintsDirective, isStandalone: true, selector: "[dfBsInputConstraints]", inputs: { dfMin: { classPropertyName: "dfMin", publicName: "dfMin", isSignal: true, isRequired: false, transformFunction: null }, dfMax: { classPropertyName: "dfMax", publicName: "dfMax", isSignal: true, isRequired: false, transformFunction: null }, dfStep: { classPropertyName: "dfStep", publicName: "dfStep", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: InputConstraintsDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[dfBsInputConstraints]',
+                }]
+        }], propDecorators: { dfMin: [{ type: i0.Input, args: [{ isSignal: true, alias: "dfMin", required: false }] }], dfMax: [{ type: i0.Input, args: [{ isSignal: true, alias: "dfMax", required: false }] }], dfStep: [{ type: i0.Input, args: [{ isSignal: true, alias: "dfStep", required: false }] }] } });
+
+function runBsPresetAction(preset, context, collaborators) {
+    return runPresetAction(preset, context, collaborators, 'Bootstrap', 'bs-input');
+}
+
+
+export { BOOTSTRAP_CONFIG, BS_INPUT_TYPE_OVERRIDE, InputConstraintsDirective, runBsPresetAction };
+//# sourceMappingURL=ng-forge-dynamic-forms-bootstrap-shared.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ng-forge-dynamic-forms-bootstrap-shared.mjs","mappings":";;;;;;;;;;AAQW;;AACA;;AACA;;AAEQ;;;;;;;;;AAWf;;;;;;;AAnBO;AACT;AACD;;;;ACKC;AACF","names":[],"ignoreList":[],"sources":["../../../../packages/dynamic-forms-bootstrap/shared/input-constraints.directive.ts","../../../../packages/dynamic-forms-bootstrap/shared/preset-actions.ts"],"sourcesContent":["import { Directive, ElementRef, inject, input } from '@angular/core';\nimport { explicitEffect } from 'ngxtension/explicit-effect';\n\n/** Declaratively reflects min, max, and step signal inputs to a native form control. */\n@Directive({\n  selector: '[dfBsInputConstraints]',\n})\nexport class InputConstraintsDirective {\n  readonly dfMin = input<number | string | null | undefined>();\n  readonly dfMax = input<number | string | null | undefined>();\n  readonly dfStep = input<number | string | null | undefined>();\n\n  private readonly element = inject<ElementRef<HTMLInputElement>>(ElementRef);\n\n  private readonly minEffect = explicitEffect([this.dfMin], ([value]) => this.reflectAttribute('min', value));\n  private readonly maxEffect = explicitEffect([this.dfMax], ([value]) => this.reflectAttribute('max', value));\n  private readonly stepEffect = explicitEffect([this.dfStep], ([value]) => this.reflectAttribute('step', value));\n\n  private reflectAttribute(name: 'min' | 'max' | 'step', value: number | string | null | undefined): void {\n    if (value === null || value === undefined) {\n      this.element.nativeElement.removeAttribute(name);\n      return;\n    }\n    this.element.nativeElement.setAttribute(name, String(value));\n  }\n}\n","import type { AddonActionContext, AddonActionPreset } from '@ng-forge/dynamic-forms';\nimport { runPresetAction, type PresetCollaborators } from '@ng-forge/dynamic-forms/integration';\n\nexport type { PresetCollaborators };\n\n/** Bootstrap adapter binding for the shared preset runner. */\nexport function runBsPresetAction(\n  preset: AddonActionPreset,\n  context: AddonActionContext,\n  collaborators: PresetCollaborators,\n): Promise<void> {\n  return runPresetAction(preset, context, collaborators, 'Bootstrap', 'bs-input');\n}\n"]}