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

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

@@ -0,0 +1,163 @@
+import * as i0 from '@angular/core';
+import { inject, input, computed, ChangeDetectionStrategy, Component } from '@angular/core';
+import { FormField } from '@angular/forms/signals';
+import { MatFormField, MatLabel, MatError, MatPrefix, MatSuffix } from '@angular/material/form-field';
+import { MatSelect, MatOption } from '@angular/material/select';
+import { MatHint } from '@angular/material/input';
+import * as i1 from '@ng-forge/dynamic-forms/integration';
+import { injectNgForgeField, injectNgForgeAddons, NgForgeControl, DfAddonSlot, DynamicTextPipe, NgForgeFieldHost, NgForgeAddons } from '@ng-forge/dynamic-forms/integration';
+import { AsyncPipe } from '@angular/common';
+import { MATERIAL_CONFIG } from '@ng-forge/dynamic-forms-material/shared';
+
+class MatSelectFieldComponent {
+    materialConfig = inject(MATERIAL_CONFIG, { optional: true });
+    ngf = injectNgForgeField();
+    ngfa = injectNgForgeAddons();
+    options = input([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
+        fieldInputs = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "fieldInputs" }] : /* istanbul ignore next */ []));
+    props = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "props" }] : /* istanbul ignore next */ []));
+    appearance = computed(() => this.props()?.appearance ?? this.materialConfig?.appearance ?? 'outline', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "appearance" }] : /* istanbul ignore next */ []));
+    subscriptSizing = computed(() => this.props()?.subscriptSizing ?? this.materialConfig?.subscriptSizing ?? 'dynamic', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "subscriptSizing" }] : /* istanbul ignore next */ []));
+    floatLabel = computed(() => this.props()?.floatLabel ?? this.materialConfig?.floatLabel ?? 'auto', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "floatLabel" }] : /* istanbul ignore next */ []));
+    hideRequiredMarker = computed(() => this.props()?.hideRequiredMarker ?? this.materialConfig?.hideRequiredMarker ?? false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hideRequiredMarker" }] : /* istanbul ignore next */ []));
+    defaultCompare = Object.is;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: MatSelectFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.5", type: MatSelectFieldComponent, isStandalone: true, selector: "df-mat-select", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, fieldInputs: { classPropertyName: "fieldInputs", publicName: "fieldInputs", isSignal: true, isRequired: false, transformFunction: null }, props: { classPropertyName: "props", publicName: "props", isSignal: true, isRequired: false, transformFunction: null } }, hostDirectives: [{ directive: i1.NgForgeFieldHost }, { directive: i1.NgForgeAddons }], ngImport: i0, template: `
+    @let selectId = ngf.key() + '-select';
+
+    <mat-form-field
+      [appearance]="appearance()"
+      [subscriptSizing]="subscriptSizing()"
+      [floatLabel]="floatLabel()"
+      [hideRequiredMarker]="hideRequiredMarker()"
+    >
+      @if (ngf.label(); as label) {
+        <mat-label>{{ label | dynamicText | async }}</mat-label>
+      }
+
+      @for (a of ngfa.prefixAddons(); track $index) {
+        <df-addon-slot
+          matPrefix
+          [class.df-mat-addon-text]="a.type === 'text'"
+          [addon]="a"
+          [fieldInputs]="fieldInputs()"
+          [hidden]="ngfa.hiddenSignalCache().get(a)"
+          (click)="$event.stopPropagation()"
+        />
+      }
+      <mat-select
+        ngForgeControl
+        [id]="selectId"
+        [formField]="ngf.field()"
+        [placeholder]="(ngf.placeholder() | dynamicText | async) ?? ''"
+        [multiple]="props()?.multiple || false"
+        [compareWith]="props()?.compareWith || defaultCompare"
+      >
+        @for (option of options(); track option.value) {
+          <mat-option [value]="option.value" [disabled]="option.disabled || false">
+            {{ option.label | dynamicText | async }}
+          </mat-option>
+        }
+      </mat-select>
+      @for (a of ngfa.suffixAddons(); track $index) {
+        <df-addon-slot
+          matSuffix
+          [class.df-mat-addon-text]="a.type === 'text'"
+          [addon]="a"
+          [fieldInputs]="fieldInputs()"
+          [hidden]="ngfa.hiddenSignalCache().get(a)"
+          (click)="$event.stopPropagation()"
+        />
+      }
+
+      @if (ngf.errorsToDisplay()[0]; as error) {
+        <mat-error [id]="ngf.errorId()">{{ error.message }}</mat-error>
+      } @else if (props()?.hint; as hint) {
+        <mat-hint [id]="ngf.hintId()">{{ hint | dynamicText | async }}</mat-hint>
+      }
+    </mat-form-field>
+  `, isInline: true, styles: [":host{display:block;width:100%}:host([hidden]){display:none!important}.df-mat-field{display:flex;flex-direction:column;gap:var(--df-field-gap, .5rem);width:100%}.df-mat-label{font-weight:var(--df-label-font-weight, 500);color:var(--df-label-color, inherit)}.df-mat-hint{color:var(--df-hint-color, rgba(0, 0, 0, .6));font-size:var(--df-hint-font-size, .875rem)}.df-mat-error{color:var(--df-error-color, #f44336);font-size:var(--df-error-font-size, .875rem)}:host{--df-mat-addon-prefix-outer-padding: .75em;--df-mat-addon-prefix-inner-padding: .5em;--df-mat-addon-suffix-inner-padding: .5em;--df-mat-addon-suffix-outer-padding: .75em;--df-mat-addon-prefix-text-outer-padding: 1em;--df-mat-addon-prefix-text-inner-padding: 1em;--df-mat-addon-suffix-text-inner-padding: 1em;--df-mat-addon-suffix-text-outer-padding: 1em}df-addon-slot[matprefix]{padding-left:var(--df-mat-addon-prefix-outer-padding);padding-right:var(--df-mat-addon-prefix-inner-padding)}df-addon-slot[matsuffix]{padding-left:var(--df-mat-addon-suffix-inner-padding);padding-right:var(--df-mat-addon-suffix-outer-padding)}df-addon-slot[matprefix].df-mat-addon-text{padding-left:var(--df-mat-addon-prefix-text-outer-padding);padding-right:var(--df-mat-addon-prefix-text-inner-padding)}df-addon-slot[matsuffix].df-mat-addon-text{padding-left:var(--df-mat-addon-suffix-text-inner-padding);padding-right:var(--df-mat-addon-suffix-text-outer-padding)}\n", "mat-form-field{width:100%}\n"], dependencies: [{ kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: MatLabel, selector: "mat-label" }, { kind: "component", type: MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: FormField, selector: "[formField]", inputs: ["formField"], exportAs: ["formField"] }, { kind: "directive", type: MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: NgForgeControl, selector: "[ngForgeControl]", inputs: ["ngForgeControl"] }, { kind: "component", type: DfAddonSlot, selector: "df-addon-slot", inputs: ["addon", "fieldInputs", "hidden"] }, { kind: "pipe", type: DynamicTextPipe, name: "dynamicText" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: MatSelectFieldComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'df-mat-select', imports: [
+                        MatFormField,
+                        MatLabel,
+                        MatSelect,
+                        MatOption,
+                        MatHint,
+                        FormField,
+                        MatError,
+                        MatPrefix,
+                        MatSuffix,
+                        DynamicTextPipe,
+                        AsyncPipe,
+                        NgForgeControl,
+                        DfAddonSlot,
+                    ], hostDirectives: [NgForgeFieldHost, NgForgeAddons], template: `
+    @let selectId = ngf.key() + '-select';
+
+    <mat-form-field
+      [appearance]="appearance()"
+      [subscriptSizing]="subscriptSizing()"
+      [floatLabel]="floatLabel()"
+      [hideRequiredMarker]="hideRequiredMarker()"
+    >
+      @if (ngf.label(); as label) {
+        <mat-label>{{ label | dynamicText | async }}</mat-label>
+      }
+
+      @for (a of ngfa.prefixAddons(); track $index) {
+        <df-addon-slot
+          matPrefix
+          [class.df-mat-addon-text]="a.type === 'text'"
+          [addon]="a"
+          [fieldInputs]="fieldInputs()"
+          [hidden]="ngfa.hiddenSignalCache().get(a)"
+          (click)="$event.stopPropagation()"
+        />
+      }
+      <mat-select
+        ngForgeControl
+        [id]="selectId"
+        [formField]="ngf.field()"
+        [placeholder]="(ngf.placeholder() | dynamicText | async) ?? ''"
+        [multiple]="props()?.multiple || false"
+        [compareWith]="props()?.compareWith || defaultCompare"
+      >
+        @for (option of options(); track option.value) {
+          <mat-option [value]="option.value" [disabled]="option.disabled || false">
+            {{ option.label | dynamicText | async }}
+          </mat-option>
+        }
+      </mat-select>
+      @for (a of ngfa.suffixAddons(); track $index) {
+        <df-addon-slot
+          matSuffix
+          [class.df-mat-addon-text]="a.type === 'text'"
+          [addon]="a"
+          [fieldInputs]="fieldInputs()"
+          [hidden]="ngfa.hiddenSignalCache().get(a)"
+          (click)="$event.stopPropagation()"
+        />
+      }
+
+      @if (ngf.errorsToDisplay()[0]; as error) {
+        <mat-error [id]="ngf.errorId()">{{ error.message }}</mat-error>
+      } @else if (props()?.hint; as hint) {
+        <mat-hint [id]="ngf.hintId()">{{ hint | dynamicText | async }}</mat-hint>
+      }
+    </mat-form-field>
+  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:block;width:100%}:host([hidden]){display:none!important}.df-mat-field{display:flex;flex-direction:column;gap:var(--df-field-gap, .5rem);width:100%}.df-mat-label{font-weight:var(--df-label-font-weight, 500);color:var(--df-label-color, inherit)}.df-mat-hint{color:var(--df-hint-color, rgba(0, 0, 0, .6));font-size:var(--df-hint-font-size, .875rem)}.df-mat-error{color:var(--df-error-color, #f44336);font-size:var(--df-error-font-size, .875rem)}:host{--df-mat-addon-prefix-outer-padding: .75em;--df-mat-addon-prefix-inner-padding: .5em;--df-mat-addon-suffix-inner-padding: .5em;--df-mat-addon-suffix-outer-padding: .75em;--df-mat-addon-prefix-text-outer-padding: 1em;--df-mat-addon-prefix-text-inner-padding: 1em;--df-mat-addon-suffix-text-inner-padding: 1em;--df-mat-addon-suffix-text-outer-padding: 1em}df-addon-slot[matprefix]{padding-left:var(--df-mat-addon-prefix-outer-padding);padding-right:var(--df-mat-addon-prefix-inner-padding)}df-addon-slot[matsuffix]{padding-left:var(--df-mat-addon-suffix-inner-padding);padding-right:var(--df-mat-addon-suffix-outer-padding)}df-addon-slot[matprefix].df-mat-addon-text{padding-left:var(--df-mat-addon-prefix-text-outer-padding);padding-right:var(--df-mat-addon-prefix-text-inner-padding)}df-addon-slot[matsuffix].df-mat-addon-text{padding-left:var(--df-mat-addon-suffix-text-inner-padding);padding-right:var(--df-mat-addon-suffix-text-outer-padding)}\n", "mat-form-field{width:100%}\n"] }]
+        }], propDecorators: { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], fieldInputs: [{ type: i0.Input, args: [{ isSignal: true, alias: "fieldInputs", required: false }] }], props: [{ type: i0.Input, args: [{ isSignal: true, alias: "props", required: false }] }] } });
+
+
+export { MatSelectFieldComponent };
+//# sourceMappingURL=ng-forge-dynamic-forms-material-lazy-select.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ng-forge-dynamic-forms-material-lazy-select.mjs","mappings":";;;;;;;;;;;AAuGc;;;;;;AAOZ,IAKS;;AACA;;AAEA;;AAEA;;AAEA;;AAEA;;AAET;;AAvBmB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAlFT;;;;;;;;;;;;;;AAeT","names":[],"ignoreList":[],"sources":["../../../../packages/dynamic-forms-material/src/lib/fields/select/mat-select.component.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, computed, inject, input } from '@angular/core';\nimport { FormField } from '@angular/forms/signals';\nimport { MatError, MatFormField, MatLabel, MatPrefix, MatSuffix } from '@angular/material/form-field';\nimport { MatOption, MatSelect } from '@angular/material/select';\nimport { MatHint } from '@angular/material/input';\nimport { FieldOption, ValueType } from '@ng-forge/dynamic-forms';\nimport { DynamicTextPipe } from '@ng-forge/dynamic-forms/integration';\nimport {\n  DfAddonSlot,\n  injectNgForgeAddons,\n  injectNgForgeField,\n  NgForgeAddons,\n  NgForgeControl,\n  NgForgeFieldHost,\n  WrapperFieldInputs,\n} from '@ng-forge/dynamic-forms/integration';\nimport { MatSelectProps } from './mat-select.type';\nimport { AsyncPipe } from '@angular/common';\nimport { MATERIAL_CONFIG } from '@ng-forge/dynamic-forms-material/shared';\n\n@Component({\n  selector: 'df-mat-select',\n  imports: [\n    MatFormField,\n    MatLabel,\n    MatSelect,\n    MatOption,\n    MatHint,\n    FormField,\n    MatError,\n    MatPrefix,\n    MatSuffix,\n    DynamicTextPipe,\n    AsyncPipe,\n    NgForgeControl,\n    DfAddonSlot,\n  ],\n  hostDirectives: [NgForgeFieldHost, NgForgeAddons],\n  template: `\n    @let selectId = ngf.key() + '-select';\n\n    <mat-form-field\n      [appearance]=\"appearance()\"\n      [subscriptSizing]=\"subscriptSizing()\"\n      [floatLabel]=\"floatLabel()\"\n      [hideRequiredMarker]=\"hideRequiredMarker()\"\n    >\n      @if (ngf.label(); as label) {\n        <mat-label>{{ label | dynamicText | async }}</mat-label>\n      }\n\n      @for (a of ngfa.prefixAddons(); track $index) {\n        <df-addon-slot\n          matPrefix\n          [class.df-mat-addon-text]=\"a.type === 'text'\"\n          [addon]=\"a\"\n          [fieldInputs]=\"fieldInputs()\"\n          [hidden]=\"ngfa.hiddenSignalCache().get(a)\"\n          (click)=\"$event.stopPropagation()\"\n        />\n      }\n      <mat-select\n        ngForgeControl\n        [id]=\"selectId\"\n        [formField]=\"ngf.field()\"\n        [placeholder]=\"(ngf.placeholder() | dynamicText | async) ?? ''\"\n        [multiple]=\"props()?.multiple || false\"\n        [compareWith]=\"props()?.compareWith || defaultCompare\"\n      >\n        @for (option of options(); track option.value) {\n          <mat-option [value]=\"option.value\" [disabled]=\"option.disabled || false\">\n            {{ option.label | dynamicText | async }}\n          </mat-option>\n        }\n      </mat-select>\n      @for (a of ngfa.suffixAddons(); track $index) {\n        <df-addon-slot\n          matSuffix\n          [class.df-mat-addon-text]=\"a.type === 'text'\"\n          [addon]=\"a\"\n          [fieldInputs]=\"fieldInputs()\"\n          [hidden]=\"ngfa.hiddenSignalCache().get(a)\"\n          (click)=\"$event.stopPropagation()\"\n        />\n      }\n\n      @if (ngf.errorsToDisplay()[0]; as error) {\n        <mat-error [id]=\"ngf.errorId()\">{{ error.message }}</mat-error>\n      } @else if (props()?.hint; as hint) {\n        <mat-hint [id]=\"ngf.hintId()\">{{ hint | dynamicText | async }}</mat-hint>\n      }\n    </mat-form-field>\n  `,\n  styleUrl: '../../styles/_form-field.scss',\n  styles: [\n    `\n      mat-form-field {\n        width: 100%;\n      }\n    `,\n  ],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport default class MatSelectFieldComponent {\n  private materialConfig = inject(MATERIAL_CONFIG, { optional: true });\n\n  protected readonly ngf = injectNgForgeField<ValueType>();\n  protected readonly ngfa = injectNgForgeAddons();\n\n  readonly options = input<FieldOption<ValueType>[]>([]);\n  /**\n   * Wrapper-style host bag pushed by `DfFieldOutlet`. Declared at the\n   * component level so `setInputIfDeclared` (which uses\n   * `reflectComponentType`) can write it.\n   */\n  readonly fieldInputs = input<WrapperFieldInputs | undefined>();\n  readonly props = input<MatSelectProps>();\n\n  readonly appearance = computed(() => this.props()?.appearance ?? this.materialConfig?.appearance ?? 'outline');\n\n  readonly subscriptSizing = computed(() => this.props()?.subscriptSizing ?? this.materialConfig?.subscriptSizing ?? 'dynamic');\n\n  readonly floatLabel = computed(() => this.props()?.floatLabel ?? this.materialConfig?.floatLabel ?? 'auto');\n\n  readonly hideRequiredMarker = computed(() => this.props()?.hideRequiredMarker ?? this.materialConfig?.hideRequiredMarker ?? false);\n\n  defaultCompare = Object.is;\n}\n"]}

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

@@ -0,0 +1,76 @@
+import * as i0 from '@angular/core';
+import { input, ChangeDetectionStrategy, Component } from '@angular/core';
+import { FormField } from '@angular/forms/signals';
+import { MatSlider, MatSliderThumb } from '@angular/material/slider';
+import * as i1 from '@ng-forge/dynamic-forms/integration';
+import { injectNgForgeField, NgForgeControl, DynamicTextPipe, NgForgeFieldHost } from '@ng-forge/dynamic-forms/integration';
+import { MatError } from '@angular/material/input';
+import { AsyncPipe } from '@angular/common';
+
+class MatSliderFieldComponent {
+    ngf = injectNgForgeField();
+    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.1.5", ngImport: i0, type: MatSliderFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.5", type: MatSliderFieldComponent, isStandalone: true, selector: "df-mat-slider", inputs: { 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';
+
+    @if (ngf.label(); as label) {
+      <label class="slider-label" [for]="inputId">{{ label | dynamicText | async }}</label>
+    }
+
+    <mat-slider
+      [min]="f().min?.() ?? 0"
+      [max]="f().max?.() ?? 100"
+      [step]="step() ?? props()?.step ?? 1"
+      [discrete]="props()?.thumbLabel || props()?.showThumbLabel"
+      [showTickMarks]="props()?.tickInterval !== undefined"
+      [color]="props()?.color || 'primary'"
+      class="slider-container"
+    >
+      <input matSliderThumb ngForgeControl [id]="inputId" [formField]="f" [attr.tabindex]="ngf.tabIndex()" />
+    </mat-slider>
+
+    @if (ngf.errorsToDisplay()[0]; as error) {
+      <mat-error [id]="ngf.errorId()">{{ error.message }}</mat-error>
+    } @else if (props()?.hint; as hint) {
+      <div class="mat-hint" [id]="ngf.hintId()">{{ hint | dynamicText | async }}</div>
+    }
+  `, isInline: true, styles: [":host{display:block;width:100%}:host([hidden]){display:none!important}.df-mat-field{display:flex;flex-direction:column;gap:var(--df-field-gap, .5rem);width:100%}.df-mat-label{font-weight:var(--df-label-font-weight, 500);color:var(--df-label-color, inherit)}.df-mat-hint{color:var(--df-hint-color, rgba(0, 0, 0, .6));font-size:var(--df-hint-font-size, .875rem)}.df-mat-error{color:var(--df-error-color, #f44336);font-size:var(--df-error-font-size, .875rem)}:host{--df-mat-addon-prefix-outer-padding: .75em;--df-mat-addon-prefix-inner-padding: .5em;--df-mat-addon-suffix-inner-padding: .5em;--df-mat-addon-suffix-outer-padding: .75em;--df-mat-addon-prefix-text-outer-padding: 1em;--df-mat-addon-prefix-text-inner-padding: 1em;--df-mat-addon-suffix-text-inner-padding: 1em;--df-mat-addon-suffix-text-outer-padding: 1em}df-addon-slot[matprefix]{padding-left:var(--df-mat-addon-prefix-outer-padding);padding-right:var(--df-mat-addon-prefix-inner-padding)}df-addon-slot[matsuffix]{padding-left:var(--df-mat-addon-suffix-inner-padding);padding-right:var(--df-mat-addon-suffix-outer-padding)}df-addon-slot[matprefix].df-mat-addon-text{padding-left:var(--df-mat-addon-prefix-text-outer-padding);padding-right:var(--df-mat-addon-prefix-text-inner-padding)}df-addon-slot[matsuffix].df-mat-addon-text{padding-left:var(--df-mat-addon-suffix-text-inner-padding);padding-right:var(--df-mat-addon-suffix-text-outer-padding)}\n", ".slider-container{width:100%}\n"], dependencies: [{ kind: "component", type: MatSlider, selector: "mat-slider", inputs: ["disabled", "discrete", "showTickMarks", "min", "color", "disableRipple", "max", "step", "displayWith"], exportAs: ["matSlider"] }, { kind: "directive", type: MatSliderThumb, selector: "input[matSliderThumb]", inputs: ["value"], outputs: ["valueChange", "dragStart", "dragEnd"], exportAs: ["matSliderThumb"] }, { kind: "directive", type: MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { 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: MatSliderFieldComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'df-mat-slider', imports: [MatSlider, MatSliderThumb, MatError, DynamicTextPipe, AsyncPipe, FormField, NgForgeControl], hostDirectives: [NgForgeFieldHost], template: `
+    @let f = ngf.field();
+    @let inputId = ngf.key() + '-input';
+
+    @if (ngf.label(); as label) {
+      <label class="slider-label" [for]="inputId">{{ label | dynamicText | async }}</label>
+    }
+
+    <mat-slider
+      [min]="f().min?.() ?? 0"
+      [max]="f().max?.() ?? 100"
+      [step]="step() ?? props()?.step ?? 1"
+      [discrete]="props()?.thumbLabel || props()?.showThumbLabel"
+      [showTickMarks]="props()?.tickInterval !== undefined"
+      [color]="props()?.color || 'primary'"
+      class="slider-container"
+    >
+      <input matSliderThumb ngForgeControl [id]="inputId" [formField]="f" [attr.tabindex]="ngf.tabIndex()" />
+    </mat-slider>
+
+    @if (ngf.errorsToDisplay()[0]; as error) {
+      <mat-error [id]="ngf.errorId()">{{ error.message }}</mat-error>
+    } @else if (props()?.hint; as hint) {
+      <div class="mat-hint" [id]="ngf.hintId()">{{ hint | dynamicText | async }}</div>
+    }
+  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:block;width:100%}:host([hidden]){display:none!important}.df-mat-field{display:flex;flex-direction:column;gap:var(--df-field-gap, .5rem);width:100%}.df-mat-label{font-weight:var(--df-label-font-weight, 500);color:var(--df-label-color, inherit)}.df-mat-hint{color:var(--df-hint-color, rgba(0, 0, 0, .6));font-size:var(--df-hint-font-size, .875rem)}.df-mat-error{color:var(--df-error-color, #f44336);font-size:var(--df-error-font-size, .875rem)}:host{--df-mat-addon-prefix-outer-padding: .75em;--df-mat-addon-prefix-inner-padding: .5em;--df-mat-addon-suffix-inner-padding: .5em;--df-mat-addon-suffix-outer-padding: .75em;--df-mat-addon-prefix-text-outer-padding: 1em;--df-mat-addon-prefix-text-inner-padding: 1em;--df-mat-addon-suffix-text-inner-padding: 1em;--df-mat-addon-suffix-text-outer-padding: 1em}df-addon-slot[matprefix]{padding-left:var(--df-mat-addon-prefix-outer-padding);padding-right:var(--df-mat-addon-prefix-inner-padding)}df-addon-slot[matsuffix]{padding-left:var(--df-mat-addon-suffix-inner-padding);padding-right:var(--df-mat-addon-suffix-outer-padding)}df-addon-slot[matprefix].df-mat-addon-text{padding-left:var(--df-mat-addon-prefix-text-outer-padding);padding-right:var(--df-mat-addon-prefix-text-inner-padding)}df-addon-slot[matsuffix].df-mat-addon-text{padding-left:var(--df-mat-addon-suffix-text-inner-padding);padding-right:var(--df-mat-addon-suffix-text-outer-padding)}\n", ".slider-container{width:100%}\n"] }]
+        }], propDecorators: { step: [{ type: i0.Input, args: [{ isSignal: true, alias: "step", required: false }] }], props: [{ type: i0.Input, args: [{ isSignal: true, alias: "props", required: false }] }] } });
+
+
+export { MatSliderFieldComponent };
+//# sourceMappingURL=ng-forge-dynamic-forms-material-lazy-slider.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ng-forge-dynamic-forms-material-lazy-slider.mjs","mappings":";;;;;;;;;AAiDc;;AAGH;;AAEA;;;AALU;;;;;;;;;;;;;;;;;;;;;;;;;AAXlB","names":[],"ignoreList":[],"sources":["../../../../packages/dynamic-forms-material/src/lib/fields/slider/mat-slider.component.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, input } from '@angular/core';\nimport { FormField } from '@angular/forms/signals';\nimport { MatSlider, MatSliderThumb } from '@angular/material/slider';\nimport { DynamicTextPipe } from '@ng-forge/dynamic-forms/integration';\nimport { NgForgeControl, injectNgForgeField, NgForgeFieldHost } from '@ng-forge/dynamic-forms/integration';\nimport { MatSliderProps } from './mat-slider.type';\nimport { MatError } from '@angular/material/input';\nimport { AsyncPipe } from '@angular/common';\n\n@Component({\n  selector: 'df-mat-slider',\n  imports: [MatSlider, MatSliderThumb, MatError, DynamicTextPipe, AsyncPipe, FormField, NgForgeControl],\n  hostDirectives: [NgForgeFieldHost],\n  template: `\n    @let f = ngf.field();\n    @let inputId = ngf.key() + '-input';\n\n    @if (ngf.label(); as label) {\n      <label class=\"slider-label\" [for]=\"inputId\">{{ label | dynamicText | async }}</label>\n    }\n\n    <mat-slider\n      [min]=\"f().min?.() ?? 0\"\n      [max]=\"f().max?.() ?? 100\"\n      [step]=\"step() ?? props()?.step ?? 1\"\n      [discrete]=\"props()?.thumbLabel || props()?.showThumbLabel\"\n      [showTickMarks]=\"props()?.tickInterval !== undefined\"\n      [color]=\"props()?.color || 'primary'\"\n      class=\"slider-container\"\n    >\n      <input matSliderThumb ngForgeControl [id]=\"inputId\" [formField]=\"f\" [attr.tabindex]=\"ngf.tabIndex()\" />\n    </mat-slider>\n\n    @if (ngf.errorsToDisplay()[0]; as error) {\n      <mat-error [id]=\"ngf.errorId()\">{{ error.message }}</mat-error>\n    } @else if (props()?.hint; as hint) {\n      <div class=\"mat-hint\" [id]=\"ngf.hintId()\">{{ hint | dynamicText | async }}</div>\n    }\n  `,\n  styleUrl: '../../styles/_form-field.scss',\n  styles: [\n    `\n      .slider-container {\n        width: 100%;\n      }\n    `,\n  ],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport default class MatSliderFieldComponent {\n  protected readonly ngf = injectNgForgeField<number>();\n\n  readonly step = input<number>();\n\n  readonly props = input<MatSliderProps>();\n}\n"]}

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

@@ -0,0 +1,144 @@
+import * as i0 from '@angular/core';
+import { inject, input, computed, ChangeDetectionStrategy, Component } from '@angular/core';
+import { FormField } from '@angular/forms/signals';
+import { MatFormField, MatLabel, MatError, MatPrefix, MatSuffix } from '@angular/material/form-field';
+import { MatInput, MatHint } from '@angular/material/input';
+import * as i1 from '@ng-forge/dynamic-forms/integration';
+import { injectNgForgeField, injectNgForgeAddons, NgForgeControl, DfAddonSlot, DynamicTextPipe, NgForgeFieldHost, NgForgeAddons } from '@ng-forge/dynamic-forms/integration';
+import { AsyncPipe } from '@angular/common';
+import { MATERIAL_CONFIG } from '@ng-forge/dynamic-forms-material/shared';
+
+class MatTextareaFieldComponent {
+    materialConfig = inject(MATERIAL_CONFIG, { optional: true });
+    ngf = injectNgForgeField();
+    ngfa = injectNgForgeAddons();
+    props = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "props" }] : /* istanbul ignore next */ []));
+        fieldInputs = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "fieldInputs" }] : /* istanbul ignore next */ []));
+    appearance = computed(() => this.props()?.appearance ?? this.materialConfig?.appearance ?? 'outline', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "appearance" }] : /* istanbul ignore next */ []));
+    subscriptSizing = computed(() => this.props()?.subscriptSizing ?? this.materialConfig?.subscriptSizing ?? 'dynamic', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "subscriptSizing" }] : /* istanbul ignore next */ []));
+    floatLabel = computed(() => this.props()?.floatLabel ?? this.materialConfig?.floatLabel ?? 'auto', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "floatLabel" }] : /* istanbul ignore next */ []));
+    hideRequiredMarker = computed(() => this.props()?.hideRequiredMarker ?? this.materialConfig?.hideRequiredMarker ?? false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hideRequiredMarker" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: MatTextareaFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.5", type: MatTextareaFieldComponent, isStandalone: true, selector: "df-mat-textarea", inputs: { props: { classPropertyName: "props", publicName: "props", isSignal: true, isRequired: false, transformFunction: null }, fieldInputs: { classPropertyName: "fieldInputs", publicName: "fieldInputs", isSignal: true, isRequired: false, transformFunction: null } }, hostDirectives: [{ directive: i1.NgForgeFieldHost }, { directive: i1.NgForgeAddons }], ngImport: i0, template: `
+    @let textareaId = ngf.key() + '-textarea';
+
+    <mat-form-field
+      [appearance]="appearance()"
+      [subscriptSizing]="subscriptSizing()"
+      [floatLabel]="floatLabel()"
+      [hideRequiredMarker]="hideRequiredMarker()"
+    >
+      @if (ngf.label()) {
+        <mat-label>{{ ngf.label() | dynamicText | async }}</mat-label>
+      }
+
+      @for (a of ngfa.prefixAddons(); track $index) {
+        <df-addon-slot
+          matPrefix
+          [class.df-mat-addon-text]="a.type === 'text'"
+          [addon]="a"
+          [fieldInputs]="fieldInputs()"
+          [hidden]="ngfa.hiddenSignalCache().get(a)"
+        />
+      }
+      <textarea
+        ngForgeControl
+        matInput
+        [id]="textareaId"
+        [formField]="ngf.field()"
+        [placeholder]="(ngf.placeholder() | dynamicText | async) ?? ''"
+        [attr.tabindex]="ngf.tabIndex()"
+        [style.resize]="props()?.resize || 'vertical'"
+      ></textarea>
+      @for (a of ngfa.suffixAddons(); track $index) {
+        <df-addon-slot
+          matSuffix
+          [class.df-mat-addon-text]="a.type === 'text'"
+          [addon]="a"
+          [fieldInputs]="fieldInputs()"
+          [hidden]="ngfa.hiddenSignalCache().get(a)"
+        />
+      }
+
+      @if (ngf.errorsToDisplay()[0]; as error) {
+        <mat-error [id]="ngf.errorId()">{{ error.message }}</mat-error>
+      } @else if (props()?.hint; as hint) {
+        <mat-hint [id]="ngf.hintId()">{{ hint | dynamicText | async }}</mat-hint>
+      }
+    </mat-form-field>
+  `, isInline: true, styles: [":host{display:block;width:100%}:host([hidden]){display:none!important}.df-mat-field{display:flex;flex-direction:column;gap:var(--df-field-gap, .5rem);width:100%}.df-mat-label{font-weight:var(--df-label-font-weight, 500);color:var(--df-label-color, inherit)}.df-mat-hint{color:var(--df-hint-color, rgba(0, 0, 0, .6));font-size:var(--df-hint-font-size, .875rem)}.df-mat-error{color:var(--df-error-color, #f44336);font-size:var(--df-error-font-size, .875rem)}:host{--df-mat-addon-prefix-outer-padding: .75em;--df-mat-addon-prefix-inner-padding: .5em;--df-mat-addon-suffix-inner-padding: .5em;--df-mat-addon-suffix-outer-padding: .75em;--df-mat-addon-prefix-text-outer-padding: 1em;--df-mat-addon-prefix-text-inner-padding: 1em;--df-mat-addon-suffix-text-inner-padding: 1em;--df-mat-addon-suffix-text-outer-padding: 1em}df-addon-slot[matprefix]{padding-left:var(--df-mat-addon-prefix-outer-padding);padding-right:var(--df-mat-addon-prefix-inner-padding)}df-addon-slot[matsuffix]{padding-left:var(--df-mat-addon-suffix-inner-padding);padding-right:var(--df-mat-addon-suffix-outer-padding)}df-addon-slot[matprefix].df-mat-addon-text{padding-left:var(--df-mat-addon-prefix-text-outer-padding);padding-right:var(--df-mat-addon-prefix-text-inner-padding)}df-addon-slot[matsuffix].df-mat-addon-text{padding-left:var(--df-mat-addon-suffix-text-inner-padding);padding-right:var(--df-mat-addon-suffix-text-outer-padding)}\n", "mat-form-field{width:100%}\n"], dependencies: [{ kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: MatLabel, selector: "mat-label" }, { kind: "directive", type: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: FormField, selector: "[formField]", inputs: ["formField"], exportAs: ["formField"] }, { kind: "directive", type: MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: NgForgeControl, selector: "[ngForgeControl]", inputs: ["ngForgeControl"] }, { kind: "component", type: DfAddonSlot, selector: "df-addon-slot", inputs: ["addon", "fieldInputs", "hidden"] }, { kind: "pipe", type: DynamicTextPipe, name: "dynamicText" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: MatTextareaFieldComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'df-mat-textarea', imports: [
+                        MatFormField,
+                        MatLabel,
+                        MatInput,
+                        MatHint,
+                        FormField,
+                        MatError,
+                        MatPrefix,
+                        MatSuffix,
+                        DynamicTextPipe,
+                        AsyncPipe,
+                        NgForgeControl,
+                        DfAddonSlot,
+                    ], hostDirectives: [NgForgeFieldHost, NgForgeAddons], template: `
+    @let textareaId = ngf.key() + '-textarea';
+
+    <mat-form-field
+      [appearance]="appearance()"
+      [subscriptSizing]="subscriptSizing()"
+      [floatLabel]="floatLabel()"
+      [hideRequiredMarker]="hideRequiredMarker()"
+    >
+      @if (ngf.label()) {
+        <mat-label>{{ ngf.label() | dynamicText | async }}</mat-label>
+      }
+
+      @for (a of ngfa.prefixAddons(); track $index) {
+        <df-addon-slot
+          matPrefix
+          [class.df-mat-addon-text]="a.type === 'text'"
+          [addon]="a"
+          [fieldInputs]="fieldInputs()"
+          [hidden]="ngfa.hiddenSignalCache().get(a)"
+        />
+      }
+      <textarea
+        ngForgeControl
+        matInput
+        [id]="textareaId"
+        [formField]="ngf.field()"
+        [placeholder]="(ngf.placeholder() | dynamicText | async) ?? ''"
+        [attr.tabindex]="ngf.tabIndex()"
+        [style.resize]="props()?.resize || 'vertical'"
+      ></textarea>
+      @for (a of ngfa.suffixAddons(); track $index) {
+        <df-addon-slot
+          matSuffix
+          [class.df-mat-addon-text]="a.type === 'text'"
+          [addon]="a"
+          [fieldInputs]="fieldInputs()"
+          [hidden]="ngfa.hiddenSignalCache().get(a)"
+        />
+      }
+
+      @if (ngf.errorsToDisplay()[0]; as error) {
+        <mat-error [id]="ngf.errorId()">{{ error.message }}</mat-error>
+      } @else if (props()?.hint; as hint) {
+        <mat-hint [id]="ngf.hintId()">{{ hint | dynamicText | async }}</mat-hint>
+      }
+    </mat-form-field>
+  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:block;width:100%}:host([hidden]){display:none!important}.df-mat-field{display:flex;flex-direction:column;gap:var(--df-field-gap, .5rem);width:100%}.df-mat-label{font-weight:var(--df-label-font-weight, 500);color:var(--df-label-color, inherit)}.df-mat-hint{color:var(--df-hint-color, rgba(0, 0, 0, .6));font-size:var(--df-hint-font-size, .875rem)}.df-mat-error{color:var(--df-error-color, #f44336);font-size:var(--df-error-font-size, .875rem)}:host{--df-mat-addon-prefix-outer-padding: .75em;--df-mat-addon-prefix-inner-padding: .5em;--df-mat-addon-suffix-inner-padding: .5em;--df-mat-addon-suffix-outer-padding: .75em;--df-mat-addon-prefix-text-outer-padding: 1em;--df-mat-addon-prefix-text-inner-padding: 1em;--df-mat-addon-suffix-text-inner-padding: 1em;--df-mat-addon-suffix-text-outer-padding: 1em}df-addon-slot[matprefix]{padding-left:var(--df-mat-addon-prefix-outer-padding);padding-right:var(--df-mat-addon-prefix-inner-padding)}df-addon-slot[matsuffix]{padding-left:var(--df-mat-addon-suffix-inner-padding);padding-right:var(--df-mat-addon-suffix-outer-padding)}df-addon-slot[matprefix].df-mat-addon-text{padding-left:var(--df-mat-addon-prefix-text-outer-padding);padding-right:var(--df-mat-addon-prefix-text-inner-padding)}df-addon-slot[matsuffix].df-mat-addon-text{padding-left:var(--df-mat-addon-suffix-text-inner-padding);padding-right:var(--df-mat-addon-suffix-text-outer-padding)}\n", "mat-form-field{width:100%}\n"] }]
+        }], propDecorators: { props: [{ type: i0.Input, args: [{ isSignal: true, alias: "props", required: false }] }], fieldInputs: [{ type: i0.Input, args: [{ isSignal: true, alias: "fieldInputs", required: false }] }] } });
+
+
+export { MatTextareaFieldComponent };
+//# sourceMappingURL=ng-forge-dynamic-forms-material-lazy-textarea.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ng-forge-dynamic-forms-material-lazy-textarea.mjs","mappings":";;;;;;;;;;AA6Fc;;;;AAMH;;AACT,IAKS;;AAEA;;AACA;;AAEA;;AACA;;;AAlBU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA1ET;;;;;;;;;;;;;AAcT","names":[],"ignoreList":[],"sources":["../../../../packages/dynamic-forms-material/src/lib/fields/textarea/mat-textarea.component.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, computed, inject, input } from '@angular/core';\nimport { FormField } from '@angular/forms/signals';\nimport { MatError, MatFormField, MatLabel, MatPrefix, MatSuffix } from '@angular/material/form-field';\nimport { MatHint, MatInput } from '@angular/material/input';\nimport { DynamicTextPipe } from '@ng-forge/dynamic-forms/integration';\nimport {\n  DfAddonSlot,\n  injectNgForgeAddons,\n  injectNgForgeField,\n  NgForgeAddons,\n  NgForgeControl,\n  NgForgeFieldHost,\n  WrapperFieldInputs,\n} from '@ng-forge/dynamic-forms/integration';\nimport { MatTextareaProps } from './mat-textarea.type';\nimport { AsyncPipe } from '@angular/common';\nimport { MATERIAL_CONFIG } from '@ng-forge/dynamic-forms-material/shared';\n\n@Component({\n  selector: 'df-mat-textarea',\n  imports: [\n    MatFormField,\n    MatLabel,\n    MatInput,\n    MatHint,\n    FormField,\n    MatError,\n    MatPrefix,\n    MatSuffix,\n    DynamicTextPipe,\n    AsyncPipe,\n    NgForgeControl,\n    DfAddonSlot,\n  ],\n  hostDirectives: [NgForgeFieldHost, NgForgeAddons],\n  template: `\n    @let textareaId = ngf.key() + '-textarea';\n\n    <mat-form-field\n      [appearance]=\"appearance()\"\n      [subscriptSizing]=\"subscriptSizing()\"\n      [floatLabel]=\"floatLabel()\"\n      [hideRequiredMarker]=\"hideRequiredMarker()\"\n    >\n      @if (ngf.label()) {\n        <mat-label>{{ ngf.label() | dynamicText | async }}</mat-label>\n      }\n\n      @for (a of ngfa.prefixAddons(); track $index) {\n        <df-addon-slot\n          matPrefix\n          [class.df-mat-addon-text]=\"a.type === 'text'\"\n          [addon]=\"a\"\n          [fieldInputs]=\"fieldInputs()\"\n          [hidden]=\"ngfa.hiddenSignalCache().get(a)\"\n        />\n      }\n      <textarea\n        ngForgeControl\n        matInput\n        [id]=\"textareaId\"\n        [formField]=\"ngf.field()\"\n        [placeholder]=\"(ngf.placeholder() | dynamicText | async) ?? ''\"\n        [attr.tabindex]=\"ngf.tabIndex()\"\n        [style.resize]=\"props()?.resize || 'vertical'\"\n      ></textarea>\n      @for (a of ngfa.suffixAddons(); track $index) {\n        <df-addon-slot\n          matSuffix\n          [class.df-mat-addon-text]=\"a.type === 'text'\"\n          [addon]=\"a\"\n          [fieldInputs]=\"fieldInputs()\"\n          [hidden]=\"ngfa.hiddenSignalCache().get(a)\"\n        />\n      }\n\n      @if (ngf.errorsToDisplay()[0]; as error) {\n        <mat-error [id]=\"ngf.errorId()\">{{ error.message }}</mat-error>\n      } @else if (props()?.hint; as hint) {\n        <mat-hint [id]=\"ngf.hintId()\">{{ hint | dynamicText | async }}</mat-hint>\n      }\n    </mat-form-field>\n  `,\n  styleUrl: '../../styles/_form-field.scss',\n  styles: [\n    `\n      mat-form-field {\n        width: 100%;\n      }\n    `,\n  ],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport default class MatTextareaFieldComponent {\n  private materialConfig = inject(MATERIAL_CONFIG, { optional: true });\n\n  protected readonly ngf = injectNgForgeField<string>();\n  protected readonly ngfa = injectNgForgeAddons();\n\n  readonly props = input<MatTextareaProps>();\n  /**\n   * Wrapper-style host bag pushed by `DfFieldOutlet`. Declared at the\n   * component level so `setInputIfDeclared` (which uses\n   * `reflectComponentType`) can write it.\n   */\n  readonly fieldInputs = input<WrapperFieldInputs | undefined>();\n\n  readonly appearance = computed(() => this.props()?.appearance ?? this.materialConfig?.appearance ?? 'outline');\n  readonly subscriptSizing = computed(() => this.props()?.subscriptSizing ?? this.materialConfig?.subscriptSizing ?? 'dynamic');\n\n  readonly floatLabel = computed(() => this.props()?.floatLabel ?? this.materialConfig?.floatLabel ?? 'auto');\n  readonly hideRequiredMarker = computed(() => this.props()?.hideRequiredMarker ?? this.materialConfig?.hideRequiredMarker ?? false);\n}\n"]}

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

@@ -0,0 +1,76 @@
+import * as i0 from '@angular/core';
+import { inject, input, computed, ChangeDetectionStrategy, Component } from '@angular/core';
+import { FormField } from '@angular/forms/signals';
+import { MatSlideToggle } from '@angular/material/slide-toggle';
+import * as i1 from '@ng-forge/dynamic-forms/integration';
+import { injectNgForgeField, NgForgeControl, DynamicTextPipe, NgForgeFieldHost } from '@ng-forge/dynamic-forms/integration';
+import { MatError } from '@angular/material/input';
+import { AsyncPipe } from '@angular/common';
+import { MATERIAL_CONFIG } from '@ng-forge/dynamic-forms-material/shared';
+
+class MatToggleFieldComponent {
+    materialConfig = inject(MATERIAL_CONFIG, { optional: true });
+    ngf = injectNgForgeField();
+    props = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "props" }] : /* istanbul ignore next */ []));
+    disableRipple = computed(() => this.props()?.disableRipple ?? this.materialConfig?.disableRipple ?? false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "disableRipple" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: MatToggleFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.5", type: MatToggleFieldComponent, isStandalone: true, selector: "df-mat-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 toggleId = ngf.key() + '-toggle';
+
+    <mat-slide-toggle
+      ngForgeControl="button[role='switch']"
+      [id]="toggleId"
+      [formField]="f"
+      [color]="props()?.color || 'primary'"
+      [labelPosition]="props()?.labelPosition || 'after'"
+      [hideIcon]="props()?.hideIcon || false"
+      [disableRipple]="disableRipple()"
+      [required]="!!f().required()"
+      [tabIndex]="ngf.tabIndex() ?? 0"
+      class="toggle-container"
+    >
+      {{ ngf.label() | dynamicText | async }}
+    </mat-slide-toggle>
+
+    @if (ngf.errorsToDisplay()[0]; as error) {
+      <mat-error [id]="ngf.errorId()">{{ error.message }}</mat-error>
+    } @else if (props()?.hint; as hint) {
+      <div class="mat-hint" [id]="ngf.hintId()">{{ hint | dynamicText | async }}</div>
+    }
+  `, isInline: true, styles: [":host{display:block;width:100%}:host([hidden]){display:none!important}.df-mat-field{display:flex;flex-direction:column;gap:var(--df-field-gap, .5rem);width:100%}.df-mat-label{font-weight:var(--df-label-font-weight, 500);color:var(--df-label-color, inherit)}.df-mat-hint{color:var(--df-hint-color, rgba(0, 0, 0, .6));font-size:var(--df-hint-font-size, .875rem)}.df-mat-error{color:var(--df-error-color, #f44336);font-size:var(--df-error-font-size, .875rem)}:host{--df-mat-addon-prefix-outer-padding: .75em;--df-mat-addon-prefix-inner-padding: .5em;--df-mat-addon-suffix-inner-padding: .5em;--df-mat-addon-suffix-outer-padding: .75em;--df-mat-addon-prefix-text-outer-padding: 1em;--df-mat-addon-prefix-text-inner-padding: 1em;--df-mat-addon-suffix-text-inner-padding: 1em;--df-mat-addon-suffix-text-outer-padding: 1em}df-addon-slot[matprefix]{padding-left:var(--df-mat-addon-prefix-outer-padding);padding-right:var(--df-mat-addon-prefix-inner-padding)}df-addon-slot[matsuffix]{padding-left:var(--df-mat-addon-suffix-inner-padding);padding-right:var(--df-mat-addon-suffix-outer-padding)}df-addon-slot[matprefix].df-mat-addon-text{padding-left:var(--df-mat-addon-prefix-text-outer-padding);padding-right:var(--df-mat-addon-prefix-text-inner-padding)}df-addon-slot[matsuffix].df-mat-addon-text{padding-left:var(--df-mat-addon-suffix-text-inner-padding);padding-right:var(--df-mat-addon-suffix-text-outer-padding)}\n"], dependencies: [{ kind: "component", type: MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "fullWidth", "disableRipple", "tabIndex", "checked", "hideIcon", "disabledInteractive"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { kind: "directive", type: FormField, selector: "[formField]", inputs: ["formField"], exportAs: ["formField"] }, { kind: "directive", type: MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { 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: MatToggleFieldComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'df-mat-toggle', imports: [MatSlideToggle, FormField, MatError, DynamicTextPipe, AsyncPipe, NgForgeControl], hostDirectives: [NgForgeFieldHost], template: `
+    @let f = ngf.field();
+    @let toggleId = ngf.key() + '-toggle';
+
+    <mat-slide-toggle
+      ngForgeControl="button[role='switch']"
+      [id]="toggleId"
+      [formField]="f"
+      [color]="props()?.color || 'primary'"
+      [labelPosition]="props()?.labelPosition || 'after'"
+      [hideIcon]="props()?.hideIcon || false"
+      [disableRipple]="disableRipple()"
+      [required]="!!f().required()"
+      [tabIndex]="ngf.tabIndex() ?? 0"
+      class="toggle-container"
+    >
+      {{ ngf.label() | dynamicText | async }}
+    </mat-slide-toggle>
+
+    @if (ngf.errorsToDisplay()[0]; as error) {
+      <mat-error [id]="ngf.errorId()">{{ error.message }}</mat-error>
+    } @else if (props()?.hint; as hint) {
+      <div class="mat-hint" [id]="ngf.hintId()">{{ hint | dynamicText | async }}</div>
+    }
+  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:block;width:100%}:host([hidden]){display:none!important}.df-mat-field{display:flex;flex-direction:column;gap:var(--df-field-gap, .5rem);width:100%}.df-mat-label{font-weight:var(--df-label-font-weight, 500);color:var(--df-label-color, inherit)}.df-mat-hint{color:var(--df-hint-color, rgba(0, 0, 0, .6));font-size:var(--df-hint-font-size, .875rem)}.df-mat-error{color:var(--df-error-color, #f44336);font-size:var(--df-error-font-size, .875rem)}:host{--df-mat-addon-prefix-outer-padding: .75em;--df-mat-addon-prefix-inner-padding: .5em;--df-mat-addon-suffix-inner-padding: .5em;--df-mat-addon-suffix-outer-padding: .75em;--df-mat-addon-prefix-text-outer-padding: 1em;--df-mat-addon-prefix-text-inner-padding: 1em;--df-mat-addon-suffix-text-inner-padding: 1em;--df-mat-addon-suffix-text-outer-padding: 1em}df-addon-slot[matprefix]{padding-left:var(--df-mat-addon-prefix-outer-padding);padding-right:var(--df-mat-addon-prefix-inner-padding)}df-addon-slot[matsuffix]{padding-left:var(--df-mat-addon-suffix-inner-padding);padding-right:var(--df-mat-addon-suffix-outer-padding)}df-addon-slot[matprefix].df-mat-addon-text{padding-left:var(--df-mat-addon-prefix-text-outer-padding);padding-right:var(--df-mat-addon-prefix-text-inner-padding)}df-addon-slot[matsuffix].df-mat-addon-text{padding-left:var(--df-mat-addon-suffix-text-inner-padding);padding-right:var(--df-mat-addon-suffix-text-outer-padding)}\n"] }]
+        }], propDecorators: { props: [{ type: i0.Input, args: [{ isSignal: true, alias: "props", required: false }] }] } });
+
+
+export { MatToggleFieldComponent };
+//# sourceMappingURL=ng-forge-dynamic-forms-material-lazy-toggle.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ng-forge-dynamic-forms-material-lazy-toggle.mjs","mappings":";;;;;;;;;;AA2Cc;;;AAKH;;AAEA;;;AAPU;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA/BT","names":[],"ignoreList":[],"sources":["../../../../packages/dynamic-forms-material/src/lib/fields/toggle/mat-toggle.component.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, computed, inject, input } from '@angular/core';\nimport { FormField } from '@angular/forms/signals';\nimport { MatSlideToggle } from '@angular/material/slide-toggle';\nimport { DynamicTextPipe } from '@ng-forge/dynamic-forms/integration';\nimport { NgForgeControl, injectNgForgeField, NgForgeFieldHost } from '@ng-forge/dynamic-forms/integration';\n\nimport { MatToggleProps } from './mat-toggle.type';\nimport { MatError } from '@angular/material/input';\nimport { AsyncPipe } from '@angular/common';\nimport { MATERIAL_CONFIG } from '@ng-forge/dynamic-forms-material/shared';\n\n@Component({\n  selector: 'df-mat-toggle',\n  imports: [MatSlideToggle, FormField, MatError, DynamicTextPipe, AsyncPipe, NgForgeControl],\n  hostDirectives: [NgForgeFieldHost],\n  template: `\n    @let f = ngf.field();\n    @let toggleId = ngf.key() + '-toggle';\n\n    <mat-slide-toggle\n      ngForgeControl=\"button[role='switch']\"\n      [id]=\"toggleId\"\n      [formField]=\"f\"\n      [color]=\"props()?.color || 'primary'\"\n      [labelPosition]=\"props()?.labelPosition || 'after'\"\n      [hideIcon]=\"props()?.hideIcon || false\"\n      [disableRipple]=\"disableRipple()\"\n      [required]=\"!!f().required()\"\n      [tabIndex]=\"ngf.tabIndex() ?? 0\"\n      class=\"toggle-container\"\n    >\n      {{ ngf.label() | dynamicText | async }}\n    </mat-slide-toggle>\n\n    @if (ngf.errorsToDisplay()[0]; as error) {\n      <mat-error [id]=\"ngf.errorId()\">{{ error.message }}</mat-error>\n    } @else if (props()?.hint; as hint) {\n      <div class=\"mat-hint\" [id]=\"ngf.hintId()\">{{ hint | dynamicText | async }}</div>\n    }\n  `,\n  styleUrl: '../../styles/_form-field.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport default class MatToggleFieldComponent {\n  private materialConfig = inject(MATERIAL_CONFIG, { optional: true });\n\n  protected readonly ngf = injectNgForgeField<boolean>();\n\n  readonly props = input<MatToggleProps>();\n\n  readonly disableRipple = computed(() => this.props()?.disableRipple ?? this.materialConfig?.disableRipple ?? false);\n}\n"]}

package/fesm2022/ng-forge-dynamic-forms-material-mat-field-errors-wrapper.component-Dz2-IbBh.mjs

@@ -0,0 +1,26 @@
+import * as i0 from '@angular/core';
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { MatError } from '@angular/material/form-field';
+import { FieldErrorsWrapperBase, provideFieldErrorDisplay } from '@ng-forge/dynamic-forms/integration';
+
+class MatFieldErrorsWrapperComponent extends FieldErrorsWrapperBase {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: MatFieldErrorsWrapperComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.5", type: MatFieldErrorsWrapperComponent, isStandalone: true, selector: "df-mat-field-errors", providers: [provideFieldErrorDisplay(() => MatFieldErrorsWrapperComponent)], usesInheritance: true, ngImport: i0, template: `
+    <ng-container #fieldComponent></ng-container>
+    @if (ngf.errorsToDisplay()[0]; as error) {
+      <mat-error class="df-mat-field-error" role="alert" [id]="ngf.errorId()">{{ error.message }}</mat-error>
+    }
+  `, isInline: true, styles: [".df-mat-field-error{display:block;color:var(--df-error-color, var(--mat-form-field-error-text-color, #f44336));font-family:var(--mat-form-field-subscript-text-font, inherit);font-size:var(--df-error-font-size, var(--mat-form-field-subscript-text-size, 12px));font-weight:var(--mat-form-field-subscript-text-weight, 400);line-height:var(--mat-form-field-subscript-text-line-height, 20px);letter-spacing:var(--mat-form-field-subscript-text-tracking, .0333333333em);margin-top:var(--df-field-gap, .5rem);padding-inline-start:var(--df-mat-error-inset, 16px)}\n"], dependencies: [{ kind: "directive", type: MatError, selector: "mat-error, [matError]", inputs: ["id"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: MatFieldErrorsWrapperComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'df-mat-field-errors', imports: [MatError], template: `
+    <ng-container #fieldComponent></ng-container>
+    @if (ngf.errorsToDisplay()[0]; as error) {
+      <mat-error class="df-mat-field-error" role="alert" [id]="ngf.errorId()">{{ error.message }}</mat-error>
+    }
+  `, changeDetection: ChangeDetectionStrategy.OnPush, providers: [provideFieldErrorDisplay(() => MatFieldErrorsWrapperComponent)], styles: [".df-mat-field-error{display:block;color:var(--df-error-color, var(--mat-form-field-error-text-color, #f44336));font-family:var(--mat-form-field-subscript-text-font, inherit);font-size:var(--df-error-font-size, var(--mat-form-field-subscript-text-size, 12px));font-weight:var(--mat-form-field-subscript-text-weight, 400);line-height:var(--mat-form-field-subscript-text-line-height, 20px);letter-spacing:var(--mat-form-field-subscript-text-tracking, .0333333333em);margin-top:var(--df-field-gap, .5rem);padding-inline-start:var(--df-mat-error-inset, 16px)}\n"] }]
+        }] });
+
+export { MatFieldErrorsWrapperComponent, MatFieldErrorsWrapperComponent as default };
+//# sourceMappingURL=ng-forge-dynamic-forms-material-mat-field-errors-wrapper.component-Dz2-IbBh.mjs.map

package/fesm2022/ng-forge-dynamic-forms-material-mat-field-errors-wrapper.component-Dz2-IbBh.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ng-forge-dynamic-forms-material-mat-field-errors-wrapper.component-Dz2-IbBh.mjs","mappings":";;;;;AAkBc;;;;;;;AALX;;;;AAPS","names":[],"ignoreList":[],"sources":["../../../../packages/dynamic-forms-material/src/lib/wrappers/field-errors/mat-field-errors-wrapper.component.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component } from '@angular/core';\nimport { MatError } from '@angular/material/form-field';\nimport { FieldErrorsWrapperBase, provideFieldErrorDisplay } from '@ng-forge/dynamic-forms/integration';\n\n/** Material rendering of a validation message for the wrapped field. Replaces the core default. */\n@Component({\n  selector: 'df-mat-field-errors',\n  imports: [MatError],\n  template: `\n    <ng-container #fieldComponent></ng-container>\n    @if (ngf.errorsToDisplay()[0]; as error) {\n      <mat-error class=\"df-mat-field-error\" role=\"alert\" [id]=\"ngf.errorId()\">{{ error.message }}</mat-error>\n    }\n  `,\n  styleUrl: './mat-field-errors-wrapper.component.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  providers: [provideFieldErrorDisplay(() => MatFieldErrorsWrapperComponent)],\n})\nexport default class MatFieldErrorsWrapperComponent extends FieldErrorsWrapperBase {}\n\nexport { MatFieldErrorsWrapperComponent };\n"]}

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

@@ -0,0 +1,14 @@
+import { InjectionToken } from '@angular/core';
+import { runPresetAction } from '@ng-forge/dynamic-forms/integration';
+
+const MATERIAL_CONFIG = new InjectionToken('MATERIAL_CONFIG');
+
+const MAT_INPUT_TYPE_OVERRIDE = new InjectionToken('MAT_INPUT_TYPE_OVERRIDE');
+
+function runMatPresetAction(preset, context, collaborators) {
+    return runPresetAction(preset, context, collaborators, 'Material', 'mat-input');
+}
+
+
+export { MATERIAL_CONFIG, MAT_INPUT_TYPE_OVERRIDE, runMatPresetAction };
+//# sourceMappingURL=ng-forge-dynamic-forms-material-shared.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ng-forge-dynamic-forms-material-shared.mjs","mappings":";;;;;;;;AAWE;AACF","names":[],"ignoreList":[],"sources":["../../../../packages/dynamic-forms-material/shared/preset-actions.ts"],"sourcesContent":["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/** Material adapter binding for the shared preset runner. */\nexport function runMatPresetAction(\n  preset: AddonActionPreset,\n  context: AddonActionContext,\n  collaborators: PresetCollaborators,\n): Promise<void> {\n  return runPresetAction(preset, context, collaborators, 'Material', 'mat-input');\n}\n"]}