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

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

@@ -0,0 +1,184 @@
+import * as i0 from '@angular/core';
+import { inject, model, input, ChangeDetectionStrategy, Component } from '@angular/core';
+import { FormField } from '@angular/forms/signals';
+import * as i1 from '@ng-forge/dynamic-forms/integration';
+import { NgForgeField, NgForgeControl, DynamicTextPipe, injectNgForgeField, NgForgeFieldHost } from '@ng-forge/dynamic-forms/integration';
+import { AsyncPipe } from '@angular/common';
+
+class BsRadioGroupComponent {
+    parentField = inject(NgForgeField, { optional: true });
+        value = model(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+        disabled = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    readonly = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "readonly" }] : /* istanbul ignore next */ []));
+    name = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []));
+        label = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "label" }] : /* istanbul ignore next */ []));
+    options = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
+    properties = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "properties" }] : /* istanbul ignore next */ []));
+        onRadioChange(newValue) {
+        if (!this.disabled() && !this.readonly()) {
+            this.value.set(newValue);
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: BsRadioGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: BsRadioGroupComponent, isStandalone: true, selector: "df-bs-radio-group", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: true, transformFunction: null }, properties: { classPropertyName: "properties", publicName: "properties", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { attributes: { "role": "radiogroup" }, properties: { "attr.aria-invalid": "parentField?.ariaInvalid() || null", "attr.aria-required": "parentField?.ariaRequired()", "attr.aria-describedby": "parentField?.ariaDescribedBy()" } }, ngImport: i0, template: `
+    @let props = properties();
+    @if (props?.buttonGroup) {
+      <div class="btn-group" role="group" [attr.aria-label]="label() | dynamicText | async">
+        @for (option of options(); track option.value; let i = $index) {
+          <input
+            ngForgeControl
+            type="radio"
+            [name]="name()"
+            [value]="option.value"
+            [checked]="value() === option.value"
+            (change)="onRadioChange(option.value)"
+            [disabled]="disabled() || option.disabled || false"
+            class="btn-check"
+            [id]="name() + '_' + i"
+            autocomplete="off"
+          />
+          <label
+            class="btn btn-outline-primary"
+            [class.btn-sm]="props?.buttonSize === 'sm'"
+            [class.btn-lg]="props?.buttonSize === 'lg'"
+            [for]="name() + '_' + i"
+          >
+            {{ option.label | dynamicText | async }}
+          </label>
+        }
+      </div>
+    } @else {
+      @for (option of options(); track option.value; let i = $index) {
+        <div class="form-check" [class.form-check-inline]="props?.inline" [class.form-check-reverse]="props?.reverse">
+          <input
+            ngForgeControl
+            type="radio"
+            [name]="name()"
+            [value]="option.value"
+            [checked]="value() === option.value"
+            (change)="onRadioChange(option.value)"
+            [disabled]="disabled() || option.disabled || false"
+            class="form-check-input"
+            [id]="name() + '_' + i"
+          />
+          <label class="form-check-label" [for]="name() + '_' + i">
+            {{ option.label | dynamicText | async }}
+          </label>
+        </div>
+      }
+    }
+  `, isInline: true, styles: [":host{display:block}\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.0.1", ngImport: i0, type: BsRadioGroupComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'df-bs-radio-group', imports: [DynamicTextPipe, AsyncPipe, NgForgeControl], host: {
+                        role: 'radiogroup',
+                        '[attr.aria-invalid]': 'parentField?.ariaInvalid() || null',
+                        '[attr.aria-required]': 'parentField?.ariaRequired()',
+                        '[attr.aria-describedby]': 'parentField?.ariaDescribedBy()',
+                    }, template: `
+    @let props = properties();
+    @if (props?.buttonGroup) {
+      <div class="btn-group" role="group" [attr.aria-label]="label() | dynamicText | async">
+        @for (option of options(); track option.value; let i = $index) {
+          <input
+            ngForgeControl
+            type="radio"
+            [name]="name()"
+            [value]="option.value"
+            [checked]="value() === option.value"
+            (change)="onRadioChange(option.value)"
+            [disabled]="disabled() || option.disabled || false"
+            class="btn-check"
+            [id]="name() + '_' + i"
+            autocomplete="off"
+          />
+          <label
+            class="btn btn-outline-primary"
+            [class.btn-sm]="props?.buttonSize === 'sm'"
+            [class.btn-lg]="props?.buttonSize === 'lg'"
+            [for]="name() + '_' + i"
+          >
+            {{ option.label | dynamicText | async }}
+          </label>
+        }
+      </div>
+    } @else {
+      @for (option of options(); track option.value; let i = $index) {
+        <div class="form-check" [class.form-check-inline]="props?.inline" [class.form-check-reverse]="props?.reverse">
+          <input
+            ngForgeControl
+            type="radio"
+            [name]="name()"
+            [value]="option.value"
+            [checked]="value() === option.value"
+            (change)="onRadioChange(option.value)"
+            [disabled]="disabled() || option.disabled || false"
+            class="form-check-input"
+            [id]="name() + '_' + i"
+          />
+          <label class="form-check-label" [for]="name() + '_' + i">
+            {{ option.label | dynamicText | async }}
+          </label>
+        </div>
+      }
+    }
+  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:block}\n"] }]
+        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: true }] }], properties: [{ type: i0.Input, args: [{ isSignal: true, alias: "properties", required: false }] }] } });
+
+class BsRadioFieldComponent {
+    ngf = injectNgForgeField();
+    options = input([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
+    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: BsRadioFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: BsRadioFieldComponent, isStandalone: true, selector: "df-bs-radio", 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();
+
+    <div class="mb-3">
+      @if (ngf.label(); as label) {
+        <div class="form-label">{{ label | dynamicText | async }}</div>
+      }
+
+      <df-bs-radio-group [formField]="f" [label]="ngf.label()" [options]="options()" [properties]="props()" />
+
+      @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>
+      }
+    </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: "component", type: BsRadioGroupComponent, selector: "df-bs-radio-group", inputs: ["value", "disabled", "readonly", "name", "label", "options", "properties"], outputs: ["valueChange"] }, { kind: "directive", type: FormField, selector: "[formField]", inputs: ["formField"], exportAs: ["formField"] }, { 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: BsRadioFieldComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'df-bs-radio', imports: [BsRadioGroupComponent, FormField, DynamicTextPipe, AsyncPipe], hostDirectives: [NgForgeFieldHost], template: `
+    @let f = ngf.field();
+
+    <div class="mb-3">
+      @if (ngf.label(); as label) {
+        <div class="form-label">{{ label | dynamicText | async }}</div>
+      }
+
+      <df-bs-radio-group [formField]="f" [label]="ngf.label()" [options]="options()" [properties]="props()" />
+
+      @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>
+      }
+    </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: { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], props: [{ type: i0.Input, args: [{ isSignal: true, alias: "props", required: false }] }] } });
+
+
+export { BsRadioFieldComponent };
+//# sourceMappingURL=ng-forge-dynamic-forms-bootstrap-lazy-radio.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ng-forge-dynamic-forms-bootstrap-lazy-radio.mjs","mappings":";;;;;;;;;;;;;;;;;IAuGW;;;;AAEA;;IAGC;AACR;AACE;;;;AAnBO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAVV;;;;;AApDC;AACA;AACA;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ACYU;;;;AAIH;;;AAJU;;;;;;;;;;;;;;;;AAdlB;;;;AApBS","names":[],"ignoreList":[],"sources":["../../../../packages/dynamic-forms-bootstrap/src/lib/fields/radio/bs-radio-group.component.ts","../../../../packages/dynamic-forms-bootstrap/src/lib/fields/radio/bs-radio.component.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, inject, input, model } from '@angular/core';\nimport type { FormValueControl } from '@angular/forms/signals';\nimport { DynamicText, FieldOption, ValueType } from '@ng-forge/dynamic-forms';\nimport { DynamicTextPipe } from '@ng-forge/dynamic-forms/integration';\nimport { NgForgeControl, NgForgeField } from '@ng-forge/dynamic-forms/integration';\nimport { AsyncPipe } from '@angular/common';\n\nexport interface BsRadioGroupProps {\n  /** Display radio buttons inline (horizontal) */\n  inline?: boolean;\n  /** Reverse the position of the radio button and label */\n  reverse?: boolean;\n  /** Display as button group instead of radio buttons */\n  buttonGroup?: boolean;\n  /** Button size when using button group */\n  buttonSize?: 'sm' | 'lg';\n  /** Hint text to display below the radio group */\n  hint?: DynamicText;\n}\n\n/**\n * Bootstrap radio group implementing FormValueControl. Rendered inside\n * `df-bs-radio` — each `<input type=\"radio\">` carries `ngForgeControl`, so\n * the marker absorbs meta + aria from the ambient parent NgForgeField.\n */\n@Component({\n  selector: 'df-bs-radio-group',\n  imports: [DynamicTextPipe, AsyncPipe, NgForgeControl],\n  host: {\n    role: 'radiogroup',\n    '[attr.aria-invalid]': 'parentField?.ariaInvalid() || null',\n    '[attr.aria-required]': 'parentField?.ariaRequired()',\n    '[attr.aria-describedby]': 'parentField?.ariaDescribedBy()',\n  },\n  template: `\n    @let props = properties();\n    @if (props?.buttonGroup) {\n      <div class=\"btn-group\" role=\"group\" [attr.aria-label]=\"label() | dynamicText | async\">\n        @for (option of options(); track option.value; let i = $index) {\n          <input\n            ngForgeControl\n            type=\"radio\"\n            [name]=\"name()\"\n            [value]=\"option.value\"\n            [checked]=\"value() === option.value\"\n            (change)=\"onRadioChange(option.value)\"\n            [disabled]=\"disabled() || option.disabled || false\"\n            class=\"btn-check\"\n            [id]=\"name() + '_' + i\"\n            autocomplete=\"off\"\n          />\n          <label\n            class=\"btn btn-outline-primary\"\n            [class.btn-sm]=\"props?.buttonSize === 'sm'\"\n            [class.btn-lg]=\"props?.buttonSize === 'lg'\"\n            [for]=\"name() + '_' + i\"\n          >\n            {{ option.label | dynamicText | async }}\n          </label>\n        }\n      </div>\n    } @else {\n      @for (option of options(); track option.value; let i = $index) {\n        <div class=\"form-check\" [class.form-check-inline]=\"props?.inline\" [class.form-check-reverse]=\"props?.reverse\">\n          <input\n            ngForgeControl\n            type=\"radio\"\n            [name]=\"name()\"\n            [value]=\"option.value\"\n            [checked]=\"value() === option.value\"\n            (change)=\"onRadioChange(option.value)\"\n            [disabled]=\"disabled() || option.disabled || false\"\n            class=\"form-check-input\"\n            [id]=\"name() + '_' + i\"\n          />\n          <label class=\"form-check-label\" [for]=\"name() + '_' + i\">\n            {{ option.label | dynamicText | async }}\n          </label>\n        </div>\n      }\n    }\n  `,\n  styles: [\n    `\n      :host {\n        display: block;\n      }\n    `,\n  ],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class BsRadioGroupComponent implements FormValueControl<ValueType | undefined> {\n  protected readonly parentField = inject(NgForgeField, { optional: true });\n\n  // Value model - FormField directive binds form value to this\n  readonly value = model<ValueType | undefined>(undefined);\n\n  // Optional FormValueControl properties - Field directive will bind these\n  readonly disabled = input<boolean>(false);\n  readonly readonly = input<boolean>(false);\n  readonly name = input<string>('');\n\n  // Component-specific inputs\n  readonly label = input<DynamicText>();\n  readonly options = input.required<FieldOption<ValueType>[]>();\n  readonly properties = input<BsRadioGroupProps>();\n\n  /** Handle radio button change event */\n  protected onRadioChange(newValue: ValueType): void {\n    if (!this.disabled() && !this.readonly()) {\n      this.value.set(newValue);\n    }\n  }\n}\n","import { ChangeDetectionStrategy, Component, input } from '@angular/core';\nimport { FormField } from '@angular/forms/signals';\nimport { FieldOption, ValueType } from '@ng-forge/dynamic-forms';\nimport { DynamicTextPipe } from '@ng-forge/dynamic-forms/integration';\nimport { injectNgForgeField, NgForgeFieldHost } from '@ng-forge/dynamic-forms/integration';\nimport { BsRadioProps } from './bs-radio.type';\nimport { AsyncPipe } from '@angular/common';\nimport { BsRadioGroupComponent } from './bs-radio-group.component';\n\n@Component({\n  selector: 'df-bs-radio',\n  imports: [BsRadioGroupComponent, FormField, DynamicTextPipe, AsyncPipe],\n  styleUrl: '../../styles/_form-field.scss',\n  hostDirectives: [NgForgeFieldHost],\n  template: `\n    @let f = ngf.field();\n\n    <div class=\"mb-3\">\n      @if (ngf.label(); as label) {\n        <div class=\"form-label\">{{ label | dynamicText | async }}</div>\n      }\n\n      <df-bs-radio-group [formField]=\"f\" [label]=\"ngf.label()\" [options]=\"options()\" [properties]=\"props()\" />\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    </div>\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 BsRadioFieldComponent {\n  protected readonly ngf = injectNgForgeField<ValueType>();\n\n  readonly options = input<FieldOption<ValueType>[]>([]);\n  readonly props = input<BsRadioProps>();\n}\n"]}

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

@@ -0,0 +1,102 @@
+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 BsSelectFieldComponent {
+    ngf = injectNgForgeField();
+    options = input([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
+    props = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "props" }] : /* istanbul ignore next */ []));
+    defaultCompare = Object.is;
+    isSelected(optionValue, fieldValue) {
+        const compareWith = this.props()?.compareWith || this.defaultCompare;
+        if (Array.isArray(fieldValue)) {
+            return fieldValue.some((v) => compareWith(v, optionValue));
+        }
+        return fieldValue !== null && compareWith(fieldValue, optionValue);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: BsSelectFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: BsSelectFieldComponent, isStandalone: true, selector: "df-bs-select", 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 selectId = ngf.key() + '-select';
+
+    <div class="mb-3">
+      @if (ngf.label(); as label) {
+        <label [for]="selectId" class="form-label">{{ label | dynamicText | async }}</label>
+      }
+      <select
+        ngForgeControl
+        [formField]="f"
+        [id]="selectId"
+        [attr.tabindex]="ngf.tabIndex()"
+        class="form-select"
+        [class.form-select-sm]="props()?.size === 'sm'"
+        [class.form-select-lg]="props()?.size === 'lg'"
+        [class.is-invalid]="f().invalid() && f().touched()"
+        [multiple]="props()?.multiple || false"
+        [attr.size]="props()?.htmlSize ?? null"
+      >
+        @if (ngf.placeholder(); as placeholder) {
+          <option value="" disabled [selected]="!f().value()">{{ placeholder | dynamicText | async }}</option>
+        }
+        @for (option of options(); track option.value) {
+          <option [value]="option.value" [disabled]="option.disabled || false" [selected]="isSelected(option.value, f().value())">
+            {{ option.label | dynamicText | async }}
+          </option>
+        }
+      </select>
+
+      @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>
+      }
+    </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: 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: BsSelectFieldComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'df-bs-select', imports: [FormField, DynamicTextPipe, AsyncPipe, NgForgeControl], hostDirectives: [NgForgeFieldHost], template: `
+    @let f = ngf.field(); @let selectId = ngf.key() + '-select';
+
+    <div class="mb-3">
+      @if (ngf.label(); as label) {
+        <label [for]="selectId" class="form-label">{{ label | dynamicText | async }}</label>
+      }
+      <select
+        ngForgeControl
+        [formField]="f"
+        [id]="selectId"
+        [attr.tabindex]="ngf.tabIndex()"
+        class="form-select"
+        [class.form-select-sm]="props()?.size === 'sm'"
+        [class.form-select-lg]="props()?.size === 'lg'"
+        [class.is-invalid]="f().invalid() && f().touched()"
+        [multiple]="props()?.multiple || false"
+        [attr.size]="props()?.htmlSize ?? null"
+      >
+        @if (ngf.placeholder(); as placeholder) {
+          <option value="" disabled [selected]="!f().value()">{{ placeholder | dynamicText | async }}</option>
+        }
+        @for (option of options(); track option.value) {
+          <option [value]="option.value" [disabled]="option.disabled || false" [selected]="isSelected(option.value, f().value())">
+            {{ option.label | dynamicText | async }}
+          </option>
+        }
+      </select>
+
+      @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>
+      }
+    </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: { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], props: [{ type: i0.Input, args: [{ isSignal: true, alias: "props", required: false }] }] } });
+
+
+export { BsSelectFieldComponent };
+//# sourceMappingURL=ng-forge-dynamic-forms-bootstrap-lazy-select.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ng-forge-dynamic-forms-bootstrap-lazy-select.mjs","mappings":";;;;;;;AA0Dc;;;;AAIH;;AAET;;AAGE;AAEA;AACE;;;;;AAZe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAVlB;;;;AAvCS","names":[],"ignoreList":[],"sources":["../../../../packages/dynamic-forms-bootstrap/src/lib/fields/select/bs-select.component.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, input } from '@angular/core';\nimport { FormField } from '@angular/forms/signals';\nimport { FieldOption } from '@ng-forge/dynamic-forms';\nimport { DynamicTextPipe } from '@ng-forge/dynamic-forms/integration';\nimport { NgForgeControl, injectNgForgeField, NgForgeFieldHost } from '@ng-forge/dynamic-forms/integration';\nimport { BsSelectProps } from './bs-select.type';\nimport { AsyncPipe } from '@angular/common';\n\n@Component({\n  selector: 'df-bs-select',\n  imports: [FormField, DynamicTextPipe, AsyncPipe, NgForgeControl],\n  styleUrl: '../../styles/_form-field.scss',\n  hostDirectives: [NgForgeFieldHost],\n  template: `\n    @let f = ngf.field(); @let selectId = ngf.key() + '-select';\n\n    <div class=\"mb-3\">\n      @if (ngf.label(); as label) {\n        <label [for]=\"selectId\" class=\"form-label\">{{ label | dynamicText | async }}</label>\n      }\n      <select\n        ngForgeControl\n        [formField]=\"f\"\n        [id]=\"selectId\"\n        [attr.tabindex]=\"ngf.tabIndex()\"\n        class=\"form-select\"\n        [class.form-select-sm]=\"props()?.size === 'sm'\"\n        [class.form-select-lg]=\"props()?.size === 'lg'\"\n        [class.is-invalid]=\"f().invalid() && f().touched()\"\n        [multiple]=\"props()?.multiple || false\"\n        [attr.size]=\"props()?.htmlSize ?? null\"\n      >\n        @if (ngf.placeholder(); as placeholder) {\n          <option value=\"\" disabled [selected]=\"!f().value()\">{{ placeholder | dynamicText | async }}</option>\n        }\n        @for (option of options(); track option.value) {\n          <option [value]=\"option.value\" [disabled]=\"option.disabled || false\" [selected]=\"isSelected(option.value, f().value())\">\n            {{ option.label | dynamicText | async }}\n          </option>\n        }\n      </select>\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    </div>\n  `,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  styles: [\n    `\n      :host([hidden]) {\n        display: none !important;\n      }\n    `,\n  ],\n})\nexport default class BsSelectFieldComponent {\n  protected readonly ngf = injectNgForgeField<string>();\n\n  readonly options = input<FieldOption<string>[]>([]);\n  readonly props = input<BsSelectProps>();\n\n  defaultCompare = Object.is;\n\n  protected isSelected(optionValue: string, fieldValue: string | string[] | null): boolean {\n    const compareWith = this.props()?.compareWith || this.defaultCompare;\n\n    if (Array.isArray(fieldValue)) {\n      return fieldValue.some((v) => compareWith(v, optionValue));\n    }\n\n    return fieldValue !== null && compareWith(fieldValue, optionValue);\n  }\n}\n"]}

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

@@ -0,0 +1,93 @@
+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';
+import { InputConstraintsDirective } from '@ng-forge/dynamic-forms-bootstrap/shared';
+
+class BsSliderFieldComponent {
+    ngf = injectNgForgeField();
+    min = input(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "min" }] : /* istanbul ignore next */ []));
+    max = input(100, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "max" }] : /* istanbul ignore next */ []));
+    step = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "step" }] : /* istanbul ignore next */ []));
+    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: BsSliderFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: BsSliderFieldComponent, isStandalone: true, selector: "df-bs-slider", inputs: { min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, step: { classPropertyName: "step", publicName: "step", isSignal: true, isRequired: false, transformFunction: null }, props: { classPropertyName: "props", publicName: "props", isSignal: true, isRequired: false, transformFunction: null } }, hostDirectives: [{ directive: i1.NgForgeFieldHost }], ngImport: i0, template: `
+    @let f = ngf.field(); @let inputId = ngf.key() + '-input';
+
+    <div class="mb-3">
+      @if (ngf.label(); as label) {
+        <label [for]="inputId" class="form-label">
+          {{ label | dynamicText | async }}
+          @if (props()?.showValue) {
+            <span class="ms-2 badge bg-secondary"> {{ props()?.valuePrefix }}{{ f().value() }}{{ props()?.valueSuffix }} </span>
+          }
+        </label>
+      }
+
+      <input
+        ngForgeControl
+        type="range"
+        dfBsInputConstraints
+        [formField]="f"
+        [id]="inputId"
+        [dfMin]="f().min?.() ?? props()?.min ?? min()"
+        [dfMax]="f().max?.() ?? props()?.max ?? max()"
+        [dfStep]="step() ?? props()?.step ?? 1"
+        [attr.tabindex]="ngf.tabIndex()"
+        class="form-range"
+      />
+
+      @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>
+      }
+    </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: 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: BsSliderFieldComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'df-bs-slider', imports: [FormField, DynamicTextPipe, AsyncPipe, InputConstraintsDirective, NgForgeControl], hostDirectives: [NgForgeFieldHost], template: `
+    @let f = ngf.field(); @let inputId = ngf.key() + '-input';
+
+    <div class="mb-3">
+      @if (ngf.label(); as label) {
+        <label [for]="inputId" class="form-label">
+          {{ label | dynamicText | async }}
+          @if (props()?.showValue) {
+            <span class="ms-2 badge bg-secondary"> {{ props()?.valuePrefix }}{{ f().value() }}{{ props()?.valueSuffix }} </span>
+          }
+        </label>
+      }
+
+      <input
+        ngForgeControl
+        type="range"
+        dfBsInputConstraints
+        [formField]="f"
+        [id]="inputId"
+        [dfMin]="f().min?.() ?? props()?.min ?? min()"
+        [dfMax]="f().max?.() ?? props()?.max ?? max()"
+        [dfStep]="step() ?? props()?.step ?? 1"
+        [attr.tabindex]="ngf.tabIndex()"
+        class="form-range"
+      />
+
+      @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>
+      }
+    </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: { min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], step: [{ type: i0.Input, args: [{ isSignal: true, alias: "step", required: false }] }], props: [{ type: i0.Input, args: [{ isSignal: true, alias: "props", required: false }] }] } });
+
+
+export { BsSliderFieldComponent };
+//# sourceMappingURL=ng-forge-dynamic-forms-bootstrap-lazy-slider.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ng-forge-dynamic-forms-bootstrap-lazy-slider.mjs","mappings":";;;;;;;;AA2Dc;;;;;;AAKH;;AAEA;;;AAPU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAlDT","names":[],"ignoreList":[],"sources":["../../../../packages/dynamic-forms-bootstrap/src/lib/fields/slider/bs-slider.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 { BsSliderProps } from './bs-slider.type';\nimport { AsyncPipe } from '@angular/common';\nimport { InputConstraintsDirective } from '@ng-forge/dynamic-forms-bootstrap/shared';\n\n@Component({\n  selector: 'df-bs-slider',\n  imports: [FormField, DynamicTextPipe, AsyncPipe, InputConstraintsDirective, 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 class=\"mb-3\">\n      @if (ngf.label(); as label) {\n        <label [for]=\"inputId\" class=\"form-label\">\n          {{ label | dynamicText | async }}\n          @if (props()?.showValue) {\n            <span class=\"ms-2 badge bg-secondary\"> {{ props()?.valuePrefix }}{{ f().value() }}{{ props()?.valueSuffix }} </span>\n          }\n        </label>\n      }\n\n      <input\n        ngForgeControl\n        type=\"range\"\n        dfBsInputConstraints\n        [formField]=\"f\"\n        [id]=\"inputId\"\n        [dfMin]=\"f().min?.() ?? props()?.min ?? min()\"\n        [dfMax]=\"f().max?.() ?? props()?.max ?? max()\"\n        [dfStep]=\"step() ?? props()?.step ?? 1\"\n        [attr.tabindex]=\"ngf.tabIndex()\"\n        class=\"form-range\"\n      />\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    </div>\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 BsSliderFieldComponent {\n  protected readonly ngf = injectNgForgeField<number>();\n\n  readonly min = input<number>(0);\n  readonly max = input<number>(100);\n  readonly step = input<number>();\n\n  readonly props = input<BsSliderProps>();\n}\n"]}

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

@@ -0,0 +1,150 @@
+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 BsTextareaFieldComponent {
+    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: BsTextareaFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: BsTextareaFieldComponent, isStandalone: true, selector: "df-bs-textarea", inputs: { 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 textareaId = ngf.key() + '-textarea';
+    @if (p?.floatingLabel) {
+      <!-- Floating label variant -->
+      <div class="form-floating mb-3">
+        <textarea
+          ngForgeControl
+          [formField]="f"
+          [id]="textareaId"
+          [placeholder]="(ngf.placeholder() | dynamicText | async) ?? ''"
+          [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"
+        ></textarea>
+
+        @if (ngf.label()) {
+          <label [for]="textareaId">{{ 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>
+        } @else if (p?.hint) {
+          <div class="form-text" [id]="ngf.hintId()">{{ p?.hint | dynamicText | async }}</div>
+        }
+      </div>
+    } @else {
+      <!-- Standard variant -->
+      <div class="mb-3">
+        @if (ngf.label()) {
+          <label [for]="textareaId" class="form-label">{{ ngf.label() | dynamicText | async }}</label>
+        }
+
+        <textarea
+          ngForgeControl
+          [formField]="f"
+          [id]="textareaId"
+          [placeholder]="(ngf.placeholder() | dynamicText | async) ?? ''"
+          [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"
+        ></textarea>
+
+        @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: 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: BsTextareaFieldComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'df-bs-textarea', imports: [FormField, DynamicTextPipe, AsyncPipe, NgForgeControl], hostDirectives: [NgForgeFieldHost], template: `
+    @let f = ngf.field(); @let p = props(); @let textareaId = ngf.key() + '-textarea';
+    @if (p?.floatingLabel) {
+      <!-- Floating label variant -->
+      <div class="form-floating mb-3">
+        <textarea
+          ngForgeControl
+          [formField]="f"
+          [id]="textareaId"
+          [placeholder]="(ngf.placeholder() | dynamicText | async) ?? ''"
+          [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"
+        ></textarea>
+
+        @if (ngf.label()) {
+          <label [for]="textareaId">{{ 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>
+        } @else if (p?.hint) {
+          <div class="form-text" [id]="ngf.hintId()">{{ p?.hint | dynamicText | async }}</div>
+        }
+      </div>
+    } @else {
+      <!-- Standard variant -->
+      <div class="mb-3">
+        @if (ngf.label()) {
+          <label [for]="textareaId" class="form-label">{{ ngf.label() | dynamicText | async }}</label>
+        }
+
+        <textarea
+          ngForgeControl
+          [formField]="f"
+          [id]="textareaId"
+          [placeholder]="(ngf.placeholder() | dynamicText | async) ?? ''"
+          [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"
+        ></textarea>
+
+        @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: { props: [{ type: i0.Input, args: [{ isSignal: true, alias: "props", required: false }] }] } });
+
+
+export { BsTextareaFieldComponent };
+//# sourceMappingURL=ng-forge-dynamic-forms-bootstrap-lazy-textarea.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ng-forge-dynamic-forms-bootstrap-lazy-textarea.mjs","mappings":";;;;;;;AAsFc;;AAGH;;;AAHU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAVlB;;;;AApES","names":[],"ignoreList":[],"sources":["../../../../packages/dynamic-forms-bootstrap/src/lib/fields/textarea/bs-textarea.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 { BsTextareaProps } from './bs-textarea.type';\nimport { AsyncPipe } from '@angular/common';\n\n@Component({\n  selector: 'df-bs-textarea',\n  imports: [FormField, DynamicTextPipe, AsyncPipe, NgForgeControl],\n  styleUrl: '../../styles/_form-field.scss',\n  hostDirectives: [NgForgeFieldHost],\n  template: `\n    @let f = ngf.field(); @let p = props(); @let textareaId = ngf.key() + '-textarea';\n    @if (p?.floatingLabel) {\n      <!-- Floating label variant -->\n      <div class=\"form-floating mb-3\">\n        <textarea\n          ngForgeControl\n          [formField]=\"f\"\n          [id]=\"textareaId\"\n          [placeholder]=\"(ngf.placeholder() | dynamicText | async) ?? ''\"\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        ></textarea>\n\n        @if (ngf.label()) {\n          <label [for]=\"textareaId\">{{ 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        } @else if (p?.hint) {\n          <div class=\"form-text\" [id]=\"ngf.hintId()\">{{ p?.hint | dynamicText | async }}</div>\n        }\n      </div>\n    } @else {\n      <!-- Standard variant -->\n      <div class=\"mb-3\">\n        @if (ngf.label()) {\n          <label [for]=\"textareaId\" class=\"form-label\">{{ ngf.label() | dynamicText | async }}</label>\n        }\n\n        <textarea\n          ngForgeControl\n          [formField]=\"f\"\n          [id]=\"textareaId\"\n          [placeholder]=\"(ngf.placeholder() | dynamicText | async) ?? ''\"\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        ></textarea>\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 BsTextareaFieldComponent {\n  protected readonly ngf = injectNgForgeField<string>();\n\n  readonly props = input<BsTextareaProps>();\n}\n"]}