@ng-forge/dynamic-forms-material 1.2.0-next.7 → 1.2.0-next.8

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

@@ -1 +1 @@
-{"version":3,"file":"ng-forge-dynamic-forms-material.mjs","mappings":";;;;;;;;;;;;;;;;;;;;;;;AA0Cc;;;AAKH;;AAEA;;;AAPU;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA/BT;;;;;;;;;;;;;;;;;;;;;;;;;;;ACiEE;;;;;;;;;AAQH;;AAEA;;AAEA;;AAEA;;AAEA;;;AAhBU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA/DT;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmDT;;;ACwGW;;;;AAMH;;AAET,IAKS;;IAGQ;AAER;;AAEA;;AAEA;;AAEA;;IAGU;;;AA3BA;AAlCjB;AACE;AACA;AACD;AACD;gFAME;;AAEE;AACA;AACA;oBAEA;;AAEE;AACE;AACA;;;;;;AAOC;;;;AAIR;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA/IO;;;;;;;;;;;;;AAcT;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkGC;AACE;AACA;AACD;AACD;4IAME;;AAEE;AACA;AACA;;;AAIE;AACE;AACA;;;;;;AAOC;;;;AAIR;AACF;;;AChHW;;;;AAIH;;AAET;AAEI;;AAEF;IAKO;;;;;AAKP;;;AAGF;AACE;AACE;AAEA;AACE;;AAEJ;AAEA;AACE;AACA;;;AAIE;;AAEJ;;;;;AAMI;;;AAEA;;AAEJ;;;AAlDiB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA3CT;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ACwCE;;;;AAIH;;;AAJU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAJlB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ACcW;;;;;AAMH;;AAEA;;AAEA;;AAEA;;AAEA;;AAET;;AAhBmB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAXlB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ACDW;;AAGH;;AAEA;;;AALU;;;;;;;;;;;;;;;;;;;;;;;;;AAXlB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ACDW;;AAGH;;AAEA;;AAEA;;;AAGP;;AACA;;;AAXiB;;;;;;;;;;;;;;AAXlB;;;;AAjBS;;;;;;;;;;;;;;;;;;AC6CE;;;AAKH;;AAEA;;AACA;;AAEA;;AACA;;;AAXU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAXlB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ACAW;;;AAKH;;AAEA;;;AAPU;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA/BT;;;;;;;;;;;;;;;;;;;;;;;;;;;;ACRL;AACL;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;ACXI;AACJ;AACA;AACA;;;AAKE;AACE;AACA;;;AAKA;;;AAKA;;QAIF;AACA;;AAGI;;AACA;AACF;;;;AAKE;AACA;AACE;;;;;AAMN;AACF;AACF;;;AClCA;;;AAQA;AACE;AACA;;AAGF;AAEA;AAEA;AAEA;AAEA;AAEA;AAEA;AAIA;AAEA;AAEA;AAOO;AACL;;AAEE;AACA;;AAEA;AACA;AACE;AACD;AACD;AACD;AACD;;AAEE;AACA;AACA;AACA;AACD;AACD;;AAEE;AACA;AACA;AACA;AACD;AACD;;AAEE;AACA;AACA;AACD;AACD;;AAEE;AACA;AACA;AACD;AACD;;AAEE;AACA;AACA;AACD;AACD;;AAEE;AACA;AACA;AACD;AACD;;AAEE;AACA;AACA;AACD;AACD;;AAEE;AACA;AACA;AACD;AACD;;AAEE;AACA;AACA;AACD;AACD;;AAEE;AACA;AACA;AACD;AACD;;AAEE;AACA;AACA;AACD;AACD;;AAEE;AACA;AACA;AACD;AACD;;AAEE;AACA;AACA;AACA;AACA;AACD;AACD;;AAEE;AACA;AACA;AACA;AACD;AACD;;AAEE;AACA;AACA;AACA;AACD;AACD;;AAEE;AACA;AACA;AACA;AACD;AACD;;AAEE;AACA;AACA;AACA;AACD;AACD;;AAEE;AACA;AACA;AACA;AACD;;;;ACnKH;AACE;AACA;AACA;;AAeI;;;;AAOA;;AAE+B;AACjC;;AAGF;AACF;AAEA;AAEA;AACE;AACA;AACA;AACE;AACE;;;;AAKN;AACE;AACA;AACA;;AAIE;AACE;;QAKF;AACE;;;;;;AAkBF;AACA;;;AAGC;;AAEL;;;;;IC5FW;;;;AAGU;;;AANR;;;;AATF;AACT;AACA;AACA;AACA;AACE;AACD;;AAEF;;;;;ICyDoB;;;;;AAIA;AACjB;;;;;AATS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA1DD","names":[],"ignoreList":[],"sources":["../../../../packages/dynamic-forms-material/src/lib/fields/checkbox/mat-checkbox.component.ts","../../../../packages/dynamic-forms-material/src/lib/fields/datepicker/mat-datepicker.component.ts","../../../../packages/dynamic-forms-material/src/lib/fields/input/mat-input.component.ts","../../../../packages/dynamic-forms-material/src/lib/fields/multi-checkbox/mat-multi-checkbox.component.ts","../../../../packages/dynamic-forms-material/src/lib/fields/radio/mat-radio.component.ts","../../../../packages/dynamic-forms-material/src/lib/fields/select/mat-select.component.ts","../../../../packages/dynamic-forms-material/src/lib/fields/slider/mat-slider.component.ts","../../../../packages/dynamic-forms-material/src/lib/fields/button/mat-button.component.ts","../../../../packages/dynamic-forms-material/src/lib/fields/textarea/mat-textarea.component.ts","../../../../packages/dynamic-forms-material/src/lib/fields/toggle/mat-toggle.component.ts","../../../../packages/dynamic-forms-material/src/lib/types/types.ts","../../../../packages/dynamic-forms-material/src/lib/fields/button/mat-button.mapper.ts","../../../../packages/dynamic-forms-material/src/lib/config/material-field-config.ts","../../../../packages/dynamic-forms-material/src/lib/providers/material-providers.ts","../../../../packages/dynamic-forms-material/src/lib/addons/mat-icon-addon.component.ts","../../../../packages/dynamic-forms-material/src/lib/addons/mat-button-addon.component.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, computed, inject, input } from '@angular/core';\nimport { FormField } from '@angular/forms/signals';\nimport { MatCheckbox } from '@angular/material/checkbox';\nimport { DynamicTextPipe } from '@ng-forge/dynamic-forms/integration';\nimport { NgForgeControl, injectNgForgeField, NgForgeFieldHost } from '@ng-forge/dynamic-forms/integration';\nimport { MatCheckboxProps } from './mat-checkbox.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-checkbox',\n  imports: [MatCheckbox, FormField, MatError, DynamicTextPipe, AsyncPipe, NgForgeControl],\n  hostDirectives: [NgForgeFieldHost],\n  template: `\n    @let f = ngf.field();\n    @let checkboxId = ngf.key() + '-checkbox';\n\n    <mat-checkbox\n      ngForgeControl=\"input[type='checkbox']\"\n      [id]=\"checkboxId\"\n      [formField]=\"f\"\n      [labelPosition]=\"props()?.labelPosition || 'after'\"\n      [indeterminate]=\"props()?.indeterminate || false\"\n      [color]=\"props()?.color || 'primary'\"\n      [disableRipple]=\"disableRipple()\"\n      [required]=\"!!f().required()\"\n      [tabIndex]=\"ngf.tabIndex() ?? 0\"\n      [attr.hidden]=\"f().hidden() || null\"\n    >\n      {{ ngf.label() | dynamicText | async }}\n    </mat-checkbox>\n\n    @if (ngf.errorsToDisplay()[0]; as error) {\n      <mat-error [id]=\"ngf.errorId()\" [attr.hidden]=\"f().hidden() || null\">{{ error.message }}</mat-error>\n    } @else if (props()?.hint; as hint) {\n      <div class=\"mat-hint\" [id]=\"ngf.hintId()\" [attr.hidden]=\"f().hidden() || null\">{{ hint | dynamicText | async }}</div>\n    }\n  `,\n  styleUrl: '../../styles/_form-field.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport default class MatCheckboxFieldComponent {\n  private materialConfig = inject(MATERIAL_CONFIG, { optional: true });\n\n  protected readonly ngf = injectNgForgeField<boolean>();\n\n  readonly props = input<MatCheckboxProps>();\n\n  readonly disableRipple = computed(() => this.props()?.disableRipple ?? this.materialConfig?.disableRipple ?? false);\n}\n","import { ChangeDetectionStrategy, Component, computed, inject, input } from '@angular/core';\nimport { FormField } from '@angular/forms/signals';\nimport { MatError, MatFormField, MatLabel, MatSuffix } from '@angular/material/form-field';\nimport { MatHint, MatInput } from '@angular/material/input';\nimport { MatDatepicker, MatDatepickerInput, MatDatepickerToggle } from '@angular/material/datepicker';\nimport { DynamicTextPipe } from '@ng-forge/dynamic-forms/integration';\nimport { NgForgeControl, injectNgForgeField, NgForgeFieldHost } from '@ng-forge/dynamic-forms/integration';\nimport { MatDatepickerProps } from './mat-datepicker.type';\nimport { provideNativeDateAdapter } from '@angular/material/core';\nimport { AsyncPipe } from '@angular/common';\nimport { MATERIAL_CONFIG } from '@ng-forge/dynamic-forms-material/shared';\n\n@Component({\n  selector: 'df-mat-datepicker',\n  imports: [\n    MatFormField,\n    MatLabel,\n    MatInput,\n    MatHint,\n    MatDatepicker,\n    MatDatepickerInput,\n    MatDatepickerToggle,\n    MatSuffix,\n    FormField,\n    MatError,\n    DynamicTextPipe,\n    AsyncPipe,\n    NgForgeControl,\n  ],\n  hostDirectives: [NgForgeFieldHost],\n  template: `\n    @let inputId = ngf.key() + '-input';\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      <input\n        matInput\n        ngForgeControl\n        [id]=\"inputId\"\n        [matDatepicker]=\"picker\"\n        [formField]=\"ngf.field()\"\n        [placeholder]=\"(ngf.placeholder() | dynamicText | async) ?? ''\"\n        [attr.tabindex]=\"ngf.tabIndex()\"\n        [min]=\"minDate()\"\n        [max]=\"maxDate()\"\n      />\n\n      <mat-datepicker-toggle matIconSuffix [for]=\"picker\" />\n      <mat-datepicker #picker [startAt]=\"startAt()\" [startView]=\"props()?.startView || 'month'\" [touchUi]=\"props()?.touchUi ?? false\" />\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  providers: [provideNativeDateAdapter()],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport default class MatDatepickerFieldComponent {\n  private materialConfig = inject(MATERIAL_CONFIG, { optional: true });\n\n  protected readonly ngf = injectNgForgeField<string>();\n\n  readonly minDate = input<Date | null>(null);\n  readonly maxDate = input<Date | null>(null);\n  readonly startAt = input<Date | null>(null);\n  readonly props = input<MatDatepickerProps>();\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","import { AsyncPipe } from '@angular/common';\nimport { ChangeDetectionStrategy, Component, computed, forwardRef, inject, input, signal } 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 { AddonActionContext, AddonActionPreset, DynamicFormLogger } from '@ng-forge/dynamic-forms';\nimport { DfAddonSlot } from '@ng-forge/dynamic-forms/integration';\nimport { WrapperFieldInputs } from '@ng-forge/dynamic-forms/integration';\nimport { DynamicTextPipe, FIELD_SIGNAL_CONTEXT } from '@ng-forge/dynamic-forms/integration';\nimport {\n  ADDON_PRESET_HANDLER,\n  AddonPresetHandler,\n  injectNgForgeAddons,\n  injectNgForgeField,\n  NgForgeAddons,\n  NgForgeControl,\n  NgForgeFieldHost,\n} from '@ng-forge/dynamic-forms/integration';\nimport { MATERIAL_CONFIG, MAT_INPUT_TYPE_OVERRIDE, runMatPresetAction } from '@ng-forge/dynamic-forms-material/shared';\nimport { MatInputAddon, MatInputProps } from './mat-input.type';\n\n@Component({\n  selector: 'df-mat-input',\n  imports: [\n    MatFormField,\n    MatLabel,\n    MatInput,\n    MatHint,\n    MatError,\n    MatPrefix,\n    MatSuffix,\n    FormField,\n    DynamicTextPipe,\n    AsyncPipe,\n    NgForgeControl,\n    DfAddonSlot,\n  ],\n  hostDirectives: [NgForgeFieldHost, NgForgeAddons],\n  template: `\n    @let inputId = ngf.key() + '-input';\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      @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      <input\n        matInput\n        ngForgeControl\n        [id]=\"inputId\"\n        [formField]=\"ngf.field()\"\n        [type]=\"type()\"\n        [placeholder]=\"(ngf.placeholder() | dynamicText | async) ?? ''\"\n        [attr.tabindex]=\"ngf.tabIndex()\"\n      />\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      @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      :host([hidden]) {\n        display: none !important;\n      }\n      /* matPrefix/matSuffix elements have no default Material spacing.\n         All four sides + the text-type variants are independent CSS custom\n         properties so consumers can tune each individually:\n           prefix-outer = prefix slot's left (border-facing) padding\n           prefix-inner = prefix slot's right (text-facing) padding\n           suffix-inner = suffix slot's left (text-facing) padding\n           suffix-outer = suffix slot's right (border-facing) padding\n         Text variants override only the INNER side because <mat-icon> has\n         ~4-6px optical padding inside its glyph box (so it looks \"padded\"\n         even with a small CSS value) while text glyphs sit flush against\n         their bounding box and need the extra room to match. */\n      :host {\n        --df-mat-addon-prefix-outer-padding: 0.75em;\n        --df-mat-addon-prefix-inner-padding: 0.5em;\n        --df-mat-addon-suffix-inner-padding: 0.5em;\n        --df-mat-addon-suffix-outer-padding: 0.75em;\n        --df-mat-addon-prefix-text-outer-padding: 1em;\n        --df-mat-addon-prefix-text-inner-padding: 1em;\n        --df-mat-addon-suffix-text-inner-padding: 1em;\n        --df-mat-addon-suffix-text-outer-padding: 1em;\n      }\n      df-addon-slot[matprefix] {\n        padding-left: var(--df-mat-addon-prefix-outer-padding);\n        padding-right: var(--df-mat-addon-prefix-inner-padding);\n      }\n      df-addon-slot[matsuffix] {\n        padding-left: var(--df-mat-addon-suffix-inner-padding);\n        padding-right: var(--df-mat-addon-suffix-outer-padding);\n      }\n      df-addon-slot[matprefix].df-mat-addon-text {\n        padding-left: var(--df-mat-addon-prefix-text-outer-padding);\n        padding-right: var(--df-mat-addon-prefix-text-inner-padding);\n      }\n      df-addon-slot[matsuffix].df-mat-addon-text {\n        padding-left: var(--df-mat-addon-suffix-text-inner-padding);\n        padding-right: var(--df-mat-addon-suffix-text-outer-padding);\n      }\n    `,\n  ],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  providers: [\n    {\n      provide: MAT_INPUT_TYPE_OVERRIDE,\n      useFactory: () => signal<string | undefined>(undefined),\n    },\n    {\n      // Adapter-specific preset semantics for `mat-button` addons (clear /\n      // reset / paste / copy / toggle-password-visibility). The directive\n      // (`NgForgeAddonAction`) delegates here when an addon configures a\n      // `preset`. Per-mat-input-instance so the `typeOverride` signal is\n      // scoped to one field.\n      provide: ADDON_PRESET_HANDLER,\n      useFactory: (): AddonPresetHandler => {\n        const typeOverride = inject(MAT_INPUT_TYPE_OVERRIDE);\n        const fsc = inject(FIELD_SIGNAL_CONTEXT, { optional: true });\n        const logger = inject(DynamicFormLogger);\n        // forwardRef for baselineType only — host.props()?.type gates toggle-password-visibility.\n        const host = inject(forwardRef(() => MatInputFieldComponent));\n        return {\n          run: (preset: string, ctx: AddonActionContext) => {\n            const fieldKey = ctx.field.key;\n            return runMatPresetAction(preset as AddonActionPreset, ctx, {\n              typeOverride,\n              fieldValueSetter: ctx.setValue,\n              fieldDefaultValueGetter:\n                fsc && fieldKey ? () => (fsc.defaultValues() as Record<string, unknown> | undefined)?.[fieldKey] : undefined,\n              baselineType: () => host.props()?.type,\n              logger,\n            });\n          },\n        };\n      },\n    },\n  ],\n})\nexport default class MatInputFieldComponent {\n  private materialConfig = inject(MATERIAL_CONFIG, { optional: true });\n\n  protected readonly ngf = injectNgForgeField<string>();\n  protected readonly ngfa = injectNgForgeAddons<MatInputAddon>();\n\n  readonly props = input<MatInputProps>();\n\n  /**\n   * Wrapper-style host bag pushed by `DfFieldOutlet`. Declared at the\n   * component level so `setInputIfDeclared` (which uses\n   * `reflectComponentType`) can write it.\n   */\n  readonly fieldInputs = input<WrapperFieldInputs | undefined>();\n\n  /** Per-instance type override populated by `toggle-password-visibility` preset. */\n  private readonly typeOverride = inject(MAT_INPUT_TYPE_OVERRIDE);\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  /** Override (set by `toggle-password-visibility` preset) wins over `props().type`. */\n  protected readonly type = computed(() => this.typeOverride() ?? this.props()?.type ?? 'text');\n}\n","import { ChangeDetectionStrategy, Component, computed, input, linkedSignal } from '@angular/core';\nimport { MatCheckbox } from '@angular/material/checkbox';\nimport { FieldOption, ValueType } from '@ng-forge/dynamic-forms';\nimport { DynamicTextPipe } from '@ng-forge/dynamic-forms/integration';\nimport { injectNgForgeField, NgForgeFieldHost, isEqual, NgForgeControl } from '@ng-forge/dynamic-forms/integration';\nimport { explicitEffect } from 'ngxtension/explicit-effect';\nimport { MatMultiCheckboxProps } from './mat-multi-checkbox.type';\nimport { MatError } from '@angular/material/input';\nimport { AsyncPipe } from '@angular/common';\n\n@Component({\n  selector: 'df-mat-multi-checkbox',\n  imports: [MatCheckbox, MatError, DynamicTextPipe, AsyncPipe, NgForgeControl],\n  hostDirectives: [NgForgeFieldHost],\n  template: `\n    @let f = ngf.field();\n    @let checkboxGroupId = ngf.key() + '-checkbox-group';\n    @let checked = checkedValuesMap();\n\n    @if (ngf.label(); as label) {\n      <div class=\"checkbox-group-label\">{{ label | dynamicText | async }}</div>\n    }\n\n    <div\n      [id]=\"checkboxGroupId\"\n      class=\"checkbox-group\"\n      role=\"group\"\n      [attr.aria-invalid]=\"ngf.ariaInvalid()\"\n      [attr.aria-required]=\"ngf.ariaRequired()\"\n      [attr.aria-describedby]=\"ngf.ariaDescribedBy()\"\n    >\n      @for (option of options(); track option.value) {\n        <mat-checkbox\n          ngForgeControl=\"input[type='checkbox']\"\n          [checked]=\"checked['' + option.value]\"\n          [disabled]=\"f().disabled() || option.disabled\"\n          [color]=\"props()?.color || 'primary'\"\n          [labelPosition]=\"props()?.labelPosition || 'after'\"\n          (change)=\"onCheckboxChange(option, $event.checked)\"\n        >\n          {{ option.label | dynamicText | async }}\n        </mat-checkbox>\n      }\n    </div>\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 MatMultiCheckboxFieldComponent {\n  protected readonly ngf = injectNgForgeField<ValueType[]>();\n\n  readonly options = input<FieldOption<ValueType>[]>([]);\n  readonly props = input<MatMultiCheckboxProps>();\n\n  valueViewModel = linkedSignal<FieldOption<ValueType>[]>(\n    () => {\n      const currentValues = this.ngf.field()().value();\n      return this.options().filter((option) => currentValues.includes(option.value));\n    },\n    { equal: isEqual },\n  );\n\n  /** Computed map of checked option values for O(1) lookup in template */\n  readonly checkedValuesMap = computed(() => {\n    const map: Record<string, boolean> = {};\n    for (const opt of this.valueViewModel()) {\n      map[String(opt.value)] = true;\n    }\n    return map;\n  });\n\n  constructor() {\n    explicitEffect([this.valueViewModel], ([selectedOptions]) => {\n      const selectedValues = selectedOptions.map((option) => option.value);\n\n      if (!isEqual(selectedValues, this.ngf.field()().value())) {\n        this.ngf.field()().value.set(selectedValues);\n      }\n    });\n\n    explicitEffect([this.options], ([options]) => {\n      const values = options.map((option) => option.value);\n      const uniqueValues = new Set(values);\n\n      if (values.length !== uniqueValues.size) {\n        const duplicates = values.filter((value, index) => values.indexOf(value) !== index);\n        throw new Error(`Duplicate option values detected in mat-multi-checkbox: ${duplicates.join(', ')}`);\n      }\n    });\n  }\n\n  onCheckboxChange(option: FieldOption<ValueType>, checked: boolean): void {\n    this.valueViewModel.update((currentOptions) => {\n      if (checked) {\n        return currentOptions.some((opt) => opt.value === option.value) ? currentOptions : [...currentOptions, option];\n      } else {\n        return currentOptions.filter((opt) => opt.value !== option.value);\n      }\n    });\n  }\n}\n","import { ChangeDetectionStrategy, Component, input } from '@angular/core';\nimport { FormField } from '@angular/forms/signals';\nimport { MatRadioButton, MatRadioGroup } from '@angular/material/radio';\nimport { FieldOption, ValueType } from '@ng-forge/dynamic-forms';\nimport { DynamicTextPipe } from '@ng-forge/dynamic-forms/integration';\nimport { NgForgeControl, injectNgForgeField, NgForgeFieldHost } from '@ng-forge/dynamic-forms/integration';\nimport { MatRadioProps } from './mat-radio.type';\nimport { MatError } from '@angular/material/input';\nimport { AsyncPipe } from '@angular/common';\n\n@Component({\n  selector: 'df-mat-radio',\n  imports: [MatRadioGroup, MatRadioButton, FormField, MatError, DynamicTextPipe, AsyncPipe, NgForgeControl],\n  hostDirectives: [NgForgeFieldHost],\n  template: `\n    @let f = ngf.field();\n    @let radioGroupId = ngf.key() + '-radio-group';\n\n    @if (ngf.label()) {\n      <div class=\"radio-label\">{{ ngf.label() | dynamicText | async }}</div>\n    }\n\n    <mat-radio-group\n      [id]=\"radioGroupId\"\n      [formField]=\"f\"\n      [attr.aria-invalid]=\"ngf.ariaInvalid()\"\n      [attr.aria-required]=\"ngf.ariaRequired()\"\n      [attr.aria-describedby]=\"ngf.ariaDescribedBy()\"\n    >\n      @for (option of options(); track option.value) {\n        <mat-radio-button\n          ngForgeControl=\"input[type='radio']\"\n          [value]=\"option.value\"\n          [disabled]=\"option.disabled || false\"\n          [color]=\"props()?.color || 'primary'\"\n          [labelPosition]=\"props()?.labelPosition || 'after'\"\n        >\n          {{ option.label | dynamicText | async }}\n        </mat-radio-button>\n      }\n    </mat-radio-group>\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 MatRadioFieldComponent {\n  protected readonly ngf = injectNgForgeField<ValueType>();\n\n  readonly options = input<FieldOption<ValueType>[]>([]);\n  readonly props = input<MatRadioProps>();\n}\n","import { ChangeDetectionStrategy, Component, computed, inject, input } from '@angular/core';\nimport { FormField } from '@angular/forms/signals';\nimport { MatError, MatFormField, MatLabel } 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 { NgForgeControl, injectNgForgeField, NgForgeFieldHost } 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: [MatFormField, MatLabel, MatSelect, MatOption, MatHint, FormField, MatError, DynamicTextPipe, AsyncPipe, NgForgeControl],\n  hostDirectives: [NgForgeFieldHost],\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      <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\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\n  readonly options = input<FieldOption<ValueType>[]>([]);\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","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","import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';\nimport { MatButton } from '@angular/material/button';\nimport { AsyncPipe } from '@angular/common';\nimport { FormEvent } from '@ng-forge/dynamic-forms';\nimport { DynamicTextPipe } from '@ng-forge/dynamic-forms/integration';\nimport { injectNgForgeAction, NgForgeActionHost } from '@ng-forge/dynamic-forms/integration';\nimport { MatButtonProps } from './mat-button.type';\n\n@Component({\n  selector: 'df-mat-button',\n  imports: [MatButton, DynamicTextPipe, AsyncPipe],\n  hostDirectives: [NgForgeActionHost],\n  template: `\n    @let buttonId = action.key() + '-button';\n    <button\n      mat-raised-button\n      [id]=\"buttonId\"\n      [type]=\"buttonType()\"\n      [color]=\"props()?.color || 'primary'\"\n      [disabled]=\"action.disabled()\"\n      [attr.tabindex]=\"action.tabIndex()\"\n      [attr.data-testid]=\"buttonTestId()\"\n      (click)=\"onClick()\"\n    >\n      {{ action.label() | dynamicText | async }}\n    </button>\n  `,\n  styleUrl: '../../styles/_form-field.scss',\n  styles: [\n    `\n      button {\n        min-width: fit-content;\n      }\n    `,\n  ],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport default class MatButtonFieldComponent<TEvent extends FormEvent> {\n  protected readonly action = injectNgForgeAction<TEvent>();\n\n  readonly props = input<MatButtonProps>();\n\n  readonly buttonType = computed(() => this.props()?.type ?? 'button');\n\n  readonly buttonTestId = computed(() => `${this.buttonType()}-${this.action.key()}`);\n\n  onClick(): void {\n    if (this.buttonType() === 'submit') return;\n    this.action.dispatch();\n  }\n}\n","import { ChangeDetectionStrategy, Component, computed, inject, input } from '@angular/core';\nimport { FormField } from '@angular/forms/signals';\nimport { MatError, MatFormField, MatLabel } from '@angular/material/form-field';\nimport { MatHint, MatInput } from '@angular/material/input';\nimport { DynamicTextPipe } from '@ng-forge/dynamic-forms/integration';\nimport { NgForgeControl, injectNgForgeField, NgForgeFieldHost } 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: [MatFormField, MatLabel, MatInput, MatHint, FormField, MatError, DynamicTextPipe, AsyncPipe, NgForgeControl],\n  hostDirectives: [NgForgeFieldHost],\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      <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\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\n  readonly props = input<MatTextareaProps>();\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","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","/**\n * Material Design field type constants\n * Based on available field components in the /fields folder\n */\nexport const MatField = {\n  Input: 'input',\n  Select: 'select',\n  Checkbox: 'checkbox',\n  Button: 'button',\n  Submit: 'submit',\n  Next: 'next',\n  Previous: 'previous',\n  AddArrayItem: 'add-array-item',\n  PrependArrayItem: 'prepend-array-item',\n  InsertArrayItem: 'insert-array-item',\n  RemoveArrayItem: 'remove-array-item',\n  PopArrayItem: 'pop-array-item',\n  ShiftArrayItem: 'shift-array-item',\n  Textarea: 'textarea',\n  Radio: 'radio',\n  MultiCheckbox: 'multi-checkbox',\n  Datepicker: 'datepicker',\n  Slider: 'slider',\n  Toggle: 'toggle',\n} as const;\n\nexport type MatFieldType = (typeof MatField)[keyof typeof MatField];\n","import { computed, inject, isSignal, Signal } from '@angular/core';\nimport { FieldDef } from '@ng-forge/dynamic-forms';\nimport { ARRAY_CONTEXT, buildBaseInputs, DEFAULT_PROPS, injectNonFieldLogicResolver } from '@ng-forge/dynamic-forms/integration';\n\n/**\n * Generic button mapper for custom events or basic buttons.\n * For specific button types (submit, next, prev, add/remove array items),\n * use the dedicated field types and their specific mappers.\n *\n * @param fieldDef The button field definition\n * @returns Signal containing Record of input names to values for ngComponentOutlet\n */\nexport function buttonFieldMapper(fieldDef: FieldDef<Record<string, unknown>>): Signal<Record<string, unknown>> {\n  const defaultProps = inject(DEFAULT_PROPS);\n  const arrayContext = inject(ARRAY_CONTEXT, { optional: true });\n  const resolveLogic = injectNonFieldLogicResolver(fieldDef);\n\n  return computed(() => {\n    const baseInputs = buildBaseInputs(fieldDef, defaultProps());\n\n    const inputs: Record<string, unknown> = {\n      ...baseInputs,\n      ...resolveLogic(),\n    };\n\n    // Add event binding for button events\n    if ('event' in fieldDef && fieldDef.event !== undefined) {\n      inputs['event'] = fieldDef.event;\n    }\n\n    // Add eventArgs binding if provided\n    if ('eventArgs' in fieldDef && fieldDef.eventArgs !== undefined) {\n      inputs['eventArgs'] = fieldDef.eventArgs;\n    }\n\n    // Add eventContext for token resolution (supports $template, $arrayKey, $index, etc.)\n    const template = 'template' in fieldDef ? fieldDef.template : undefined;\n    if (template || arrayContext) {\n      // Read signal value if index is a signal (supports differential updates)\n      const getIndex = () => {\n        if (!arrayContext) return -1;\n        return isSignal(arrayContext.index) ? arrayContext.index() : arrayContext.index;\n      };\n\n      inputs['eventContext'] = {\n        key: fieldDef.key,\n        index: getIndex(),\n        arrayKey: arrayContext?.arrayKey ?? '',\n        get formValue() {\n          return arrayContext?.formValue ?? {};\n        },\n        template,\n      };\n    }\n\n    return inputs;\n  });\n}\n","/* eslint-disable @nx/enforce-module-boundaries -- Package self-imports preserve ng-packagr secondary entry points. */\nimport { FieldTypeDefinition } from '@ng-forge/dynamic-forms/integration';\nimport {\n  addArrayItemButtonMapper,\n  checkboxFieldMapper,\n  datepickerFieldMapper,\n  insertArrayItemButtonMapper,\n  optionsFieldMapper,\n  popArrayItemButtonMapper,\n  prependArrayItemButtonMapper,\n  removeArrayItemButtonMapper,\n  shiftArrayItemButtonMapper,\n  valueFieldMapper,\n} from '@ng-forge/dynamic-forms/integration';\nimport { MatField } from '../types/types';\nimport { buttonFieldMapper } from '../fields/button/mat-button.mapper';\nimport { nextButtonFieldMapper, previousButtonFieldMapper, submitButtonFieldMapper } from '../fields/button/mat-specific-button.mapper';\n\n/**\n * Base for value-bearing field types — waits for the mapper to emit the `field`\n * input before instantiating the component (matches NgForgeField's\n * `input.required<FieldTree<T>>()` contract).\n */\nconst VALUE_FIELD_TYPES_BASE = {\n  renderReadyWhen: ['field'],\n} as const;\n\n/**\n * Base for action/button field types that don't bind to a form value.\n * Renders immediately, opted out of form-value collection.\n */\nconst BUTTON_FIELD_TYPES_BASE = {\n  renderReadyWhen: [],\n  valueHandling: 'exclude',\n} as const;\n\nconst loadInputComponent = () =>\n  import('@ng-forge/dynamic-forms-material/lazy/input').then(({ MatInputFieldComponent }) => MatInputFieldComponent);\nconst loadSelectComponent = () =>\n  import('@ng-forge/dynamic-forms-material/lazy/select').then(({ MatSelectFieldComponent }) => MatSelectFieldComponent);\nconst loadCheckboxComponent = () =>\n  import('@ng-forge/dynamic-forms-material/lazy/checkbox').then(({ MatCheckboxFieldComponent }) => MatCheckboxFieldComponent);\nconst loadButtonComponent = () =>\n  import('@ng-forge/dynamic-forms-material/lazy/button').then(({ MatButtonFieldComponent }) => MatButtonFieldComponent);\nconst loadTextareaComponent = () =>\n  import('@ng-forge/dynamic-forms-material/lazy/textarea').then(({ MatTextareaFieldComponent }) => MatTextareaFieldComponent);\nconst loadRadioComponent = () =>\n  import('@ng-forge/dynamic-forms-material/lazy/radio').then(({ MatRadioFieldComponent }) => MatRadioFieldComponent);\nconst loadMultiCheckboxComponent = () =>\n  import('@ng-forge/dynamic-forms-material/lazy/multi-checkbox').then(\n    ({ MatMultiCheckboxFieldComponent }) => MatMultiCheckboxFieldComponent,\n  );\nconst loadDatepickerComponent = () =>\n  import('@ng-forge/dynamic-forms-material/lazy/datepicker').then(({ MatDatepickerFieldComponent }) => MatDatepickerFieldComponent);\nconst loadSliderComponent = () =>\n  import('@ng-forge/dynamic-forms-material/lazy/slider').then(({ MatSliderFieldComponent }) => MatSliderFieldComponent);\nconst loadToggleComponent = () =>\n  import('@ng-forge/dynamic-forms-material/lazy/toggle').then(({ MatToggleFieldComponent }) => MatToggleFieldComponent);\n\n/**\n * Material Design field type definitions\n * Follows the FieldTypeDefinition interface for proper registry integration\n */\nexport const MATERIAL_FIELD_TYPES: FieldTypeDefinition[] = [\n  {\n    name: MatField.Input,\n    loadComponent: loadInputComponent,\n    mapper: valueFieldMapper,\n    propsToMeta: ['type'],\n    scope: ['text-input', 'numeric'],\n    addons: {\n      slots: ['prefix', 'suffix'],\n    },\n    ...VALUE_FIELD_TYPES_BASE,\n  },\n  {\n    name: MatField.Select,\n    loadComponent: loadSelectComponent,\n    mapper: optionsFieldMapper,\n    scope: 'single-select',\n    ...VALUE_FIELD_TYPES_BASE,\n  },\n  {\n    name: MatField.Checkbox,\n    loadComponent: loadCheckboxComponent,\n    mapper: checkboxFieldMapper,\n    scope: 'boolean',\n    ...VALUE_FIELD_TYPES_BASE,\n  },\n  {\n    name: MatField.Button,\n    loadComponent: loadButtonComponent,\n    mapper: buttonFieldMapper,\n    ...BUTTON_FIELD_TYPES_BASE,\n  },\n  {\n    name: MatField.Submit,\n    loadComponent: loadButtonComponent,\n    mapper: submitButtonFieldMapper,\n    ...BUTTON_FIELD_TYPES_BASE,\n  },\n  {\n    name: MatField.Next,\n    loadComponent: loadButtonComponent,\n    mapper: nextButtonFieldMapper,\n    ...BUTTON_FIELD_TYPES_BASE,\n  },\n  {\n    name: MatField.Previous,\n    loadComponent: loadButtonComponent,\n    mapper: previousButtonFieldMapper,\n    ...BUTTON_FIELD_TYPES_BASE,\n  },\n  {\n    name: MatField.AddArrayItem,\n    loadComponent: loadButtonComponent,\n    mapper: addArrayItemButtonMapper,\n    ...BUTTON_FIELD_TYPES_BASE,\n  },\n  {\n    name: MatField.PrependArrayItem,\n    loadComponent: loadButtonComponent,\n    mapper: prependArrayItemButtonMapper,\n    ...BUTTON_FIELD_TYPES_BASE,\n  },\n  {\n    name: MatField.InsertArrayItem,\n    loadComponent: loadButtonComponent,\n    mapper: insertArrayItemButtonMapper,\n    ...BUTTON_FIELD_TYPES_BASE,\n  },\n  {\n    name: MatField.RemoveArrayItem,\n    loadComponent: loadButtonComponent,\n    mapper: removeArrayItemButtonMapper,\n    ...BUTTON_FIELD_TYPES_BASE,\n  },\n  {\n    name: MatField.PopArrayItem,\n    loadComponent: loadButtonComponent,\n    mapper: popArrayItemButtonMapper,\n    ...BUTTON_FIELD_TYPES_BASE,\n  },\n  {\n    name: MatField.ShiftArrayItem,\n    loadComponent: loadButtonComponent,\n    mapper: shiftArrayItemButtonMapper,\n    ...BUTTON_FIELD_TYPES_BASE,\n  },\n  {\n    name: MatField.Textarea,\n    loadComponent: loadTextareaComponent,\n    mapper: valueFieldMapper,\n    propsToMeta: ['rows', 'cols'],\n    scope: 'text-input',\n    ...VALUE_FIELD_TYPES_BASE,\n  },\n  {\n    name: MatField.Radio,\n    loadComponent: loadRadioComponent,\n    mapper: optionsFieldMapper,\n    scope: 'single-select',\n    ...VALUE_FIELD_TYPES_BASE,\n  },\n  {\n    name: MatField.MultiCheckbox,\n    loadComponent: loadMultiCheckboxComponent,\n    mapper: optionsFieldMapper,\n    scope: 'multi-select',\n    ...VALUE_FIELD_TYPES_BASE,\n  },\n  {\n    name: MatField.Datepicker,\n    loadComponent: loadDatepickerComponent,\n    mapper: datepickerFieldMapper,\n    scope: 'date',\n    ...VALUE_FIELD_TYPES_BASE,\n  },\n  {\n    name: MatField.Slider,\n    loadComponent: loadSliderComponent,\n    mapper: valueFieldMapper,\n    scope: 'numeric',\n    ...VALUE_FIELD_TYPES_BASE,\n  },\n  {\n    name: MatField.Toggle,\n    loadComponent: loadToggleComponent,\n    mapper: checkboxFieldMapper,\n    scope: 'boolean',\n    ...VALUE_FIELD_TYPES_BASE,\n  },\n];\n","/* eslint-disable @nx/enforce-module-boundaries -- Package self-imports preserve ng-packagr secondary entry points. */\nimport type { Provider } from '@angular/core';\nimport { DynamicFormError, type AddonTypeDefinition } from '@ng-forge/dynamic-forms';\nimport { ADDON_TYPE_DEFINITIONS, type FieldTypeDefinition, type WrapperTypeDefinition } from '@ng-forge/dynamic-forms/integration';\nimport { MATERIAL_CONFIG, type MaterialConfig, type MatButtonAddon, type MatIconAddon } from '@ng-forge/dynamic-forms-material/shared';\nimport { MATERIAL_FIELD_TYPES } from '../config/material-field-config';\n\n/** Field type definitions for Material Design components. */\nexport type MaterialFieldTypes = FieldTypeDefinition[];\n\ntype MaterialConfigFeature = {\n  ɵkind: 'material-config';\n  ɵproviders: Provider[];\n};\n\n/**\n * Default `withMaterialFields()` shape — field defs + the auto-included\n * addons feature so `mat-icon` / `mat-button` work out of the box.\n */\ntype MaterialFieldsWithAddons = [...MaterialFieldTypes, MaterialAddonsFeature, WrapperTypeDefinition];\n\ntype MaterialFieldsWithConfig = [...MaterialFieldTypes, MaterialAddonsFeature, WrapperTypeDefinition, MaterialConfigFeature];\n\n/**\n * Replaces the neutral core `field-errors` wrapper with the Material one, so\n * a container-level validation message renders like a field-level one.\n * Registered under the same name, so the later registration wins.\n */\nconst MATERIAL_FIELD_ERRORS_WRAPPER: WrapperTypeDefinition = {\n  wrapperName: 'field-errors',\n  loadComponent: () => import('../wrappers/field-errors/mat-field-errors-wrapper.component'),\n  rendersFieldErrors: true,\n};\n\n/**\n * Configure dynamic forms with Material Design field types, with\n * Material-shipped addon types (`mat-icon`, `mat-button`) auto-included so\n * addons work out of the box.\n *\n * @param config - Optional global configuration for Material form fields\n * @returns Tuple of field type definitions, the addons feature, and\n *   optionally a config feature.\n */\nexport function withMaterialFields(): MaterialFieldsWithAddons;\nexport function withMaterialFields(config: MaterialConfig): MaterialFieldsWithConfig;\nexport function withMaterialFields(config: MaterialConfig | undefined): MaterialFieldsWithAddons | MaterialFieldsWithConfig;\nexport function withMaterialFields(config?: MaterialConfig): MaterialFieldsWithAddons | MaterialFieldsWithConfig {\n  // Always include the addons feature — mat-icon / mat-button are part of\n  // the canonical Material surface.\n  const base: unknown[] = [...MATERIAL_FIELD_TYPES, withMaterialAddons(), MATERIAL_FIELD_ERRORS_WRAPPER];\n\n  if (config) {\n    base.push({\n      ɵkind: 'material-config',\n      ɵproviders: [{ provide: MATERIAL_CONFIG, useValue: config }],\n    } satisfies MaterialConfigFeature);\n    return base as MaterialFieldsWithConfig;\n  }\n\n  return base as MaterialFieldsWithAddons;\n}\n\n/* -- Material addon types ----------------------------------------------- */\n\nconst MAT_ICON_KIND: AddonTypeDefinition<MatIconAddon> = {\n  type: 'mat-icon',\n  loadComponent: () => import('@ng-forge/dynamic-forms-material/lazy/addon-icon').then((m) => m.MatIconAddonComponent),\n  validate: (addon, fieldKey) => {\n    if (typeof addon.icon !== 'string' || addon.icon.length === 0) {\n      throw new DynamicFormError(`Addon type 'mat-icon' requires a non-empty 'icon' string (field: '${fieldKey}').`);\n    }\n  },\n};\n\nconst MAT_BUTTON_KIND: AddonTypeDefinition<MatButtonAddon> = {\n  type: 'mat-button',\n  loadComponent: () => import('@ng-forge/dynamic-forms-material/lazy/addon-button').then((m) => m.MatButtonAddonComponent),\n  validate: (addon, fieldKey) => {\n    // Exactly one of preset / actionRef / action — validator drops the addon\n    // (with warning) if the rule is violated.\n    const set = [addon.preset, addon.actionRef, addon.action].filter((v) => v !== undefined);\n    if (set.length > 1) {\n      throw new DynamicFormError(\n        `Addon type 'mat-button' on field '${fieldKey}' has more than one of preset/actionRef/action — exactly one allowed.`,\n      );\n    }\n    // Icon-only buttons require ariaLabel for screen readers.\n    if (addon.icon && !addon.label && !addon.ariaLabel) {\n      throw new DynamicFormError(`Addon type 'mat-button' on field '${fieldKey}' is icon-only — provide 'ariaLabel' for accessibility.`);\n    }\n  },\n};\n\n/**\n * Feature type discriminant for the Material addons feature. Matches core's\n * `'addons'` type so providers flow through the standard addon-type pipeline\n * in `provideDynamicForm`.\n */\ntype MaterialAddonsFeature = {\n  ɵkind: 'addons';\n  ɵproviders: Provider[];\n};\n\n/** Register Material-shipped addon types (`mat-icon`, `mat-button`) standalone. */\nexport function withMaterialAddons(): MaterialAddonsFeature {\n  return {\n    ɵkind: 'addons',\n    ɵproviders: [\n      { provide: ADDON_TYPE_DEFINITIONS, useValue: MAT_ICON_KIND, multi: true },\n      { provide: ADDON_TYPE_DEFINITIONS, useValue: MAT_BUTTON_KIND, multi: true },\n    ],\n  };\n}\n","import { AsyncPipe } from '@angular/common';\nimport { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';\nimport { MatIcon } from '@angular/material/icon';\nimport { WrapperFieldInputs } from '@ng-forge/dynamic-forms/integration';\nimport { DynamicTextPipe } from '@ng-forge/dynamic-forms/integration';\nimport type { MatIconAddon } from '@ng-forge/dynamic-forms-material/shared';\n\n/** Renderer for the `mat-icon` addon type. */\n@Component({\n  selector: 'df-mat-icon-addon',\n  imports: [MatIcon, AsyncPipe, DynamicTextPipe],\n  template: `<mat-icon [attr.aria-label]=\"(ariaLabel() | dynamicText | async) ?? null\">{{ addon().icon }}</mat-icon>`,\n  host: {\n    '[attr.aria-hidden]': 'hasAriaLabel() ? null : \"true\"',\n  },\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class MatIconAddonComponent {\n  readonly addon = input.required<MatIconAddon>();\n  /** Accepted for contract uniformity — `NgComponentOutlet` setInput is strict; every type must declare it. */\n  readonly fieldInputs = input<WrapperFieldInputs | undefined>();\n\n  protected readonly ariaLabel = computed(() => this.addon().ariaLabel);\n  protected readonly hasAriaLabel = computed(() => this.addon().ariaLabel !== undefined);\n}\n","import { AsyncPipe } from '@angular/common';\nimport { ChangeDetectionStrategy, Component, computed } from '@angular/core';\nimport { MatButton, MatIconButton } from '@angular/material/button';\nimport { MatIcon } from '@angular/material/icon';\nimport { MatProgressSpinner } from '@angular/material/progress-spinner';\nimport { DynamicTextPipe } from '@ng-forge/dynamic-forms/integration';\nimport { injectNgForgeAddonAction, NgForgeAddonAction } from '@ng-forge/dynamic-forms/integration';\nimport type { MatButtonAddon } from '@ng-forge/dynamic-forms-material/shared';\n\n/** Renderer for the `mat-button` addon type. */\n@Component({\n  selector: 'df-mat-button-addon',\n  imports: [MatButton, MatIconButton, MatIcon, MatProgressSpinner, DynamicTextPipe, AsyncPipe],\n  hostDirectives: [NgForgeAddonAction],\n  template: `\n    @if (isIconOnly()) {\n      <button\n        mat-icon-button\n        type=\"button\"\n        [color]=\"addon().color ?? null\"\n        [disabled]=\"action.disabled() || action.loading()\"\n        [attr.aria-label]=\"(ariaLabel() | dynamicText | async) ?? null\"\n        [attr.aria-busy]=\"action.loading() || null\"\n        (click)=\"action.dispatch()\"\n      >\n        @if (action.loading()) {\n          <mat-progress-spinner mode=\"indeterminate\" diameter=\"18\" aria-hidden=\"true\" />\n          <span class=\"df-mat-sr-only\" role=\"status\">Loading…</span>\n        } @else {\n          <mat-icon aria-hidden=\"true\">{{ addon().icon }}</mat-icon>\n        }\n      </button>\n    } @else {\n      <button\n        mat-button\n        type=\"button\"\n        [color]=\"addon().color ?? null\"\n        [disabled]=\"action.disabled() || action.loading()\"\n        [attr.aria-label]=\"(ariaLabel() | dynamicText | async) ?? null\"\n        [attr.aria-busy]=\"action.loading() || null\"\n        (click)=\"action.dispatch()\"\n      >\n        @if (action.loading()) {\n          <mat-progress-spinner mode=\"indeterminate\" diameter=\"18\" aria-hidden=\"true\" />\n          <span class=\"df-mat-sr-only\" role=\"status\">Loading…</span>\n        } @else if (addon().icon; as icon) {\n          <mat-icon aria-hidden=\"true\">{{ icon }}</mat-icon>\n        }\n        {{ label() | dynamicText | async }}\n      </button>\n    }\n  `,\n  styles: [\n    `\n      .df-mat-sr-only {\n        position: absolute;\n        width: 1px;\n        height: 1px;\n        padding: 0;\n        margin: -1px;\n        overflow: hidden;\n        clip: rect(0, 0, 0, 0);\n        white-space: nowrap;\n        border: 0;\n      }\n    `,\n  ],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class MatButtonAddonComponent {\n  protected readonly action = injectNgForgeAddonAction<MatButtonAddon>();\n\n  /** Re-exposed for template binding — same signal stored on the directive. */\n  protected readonly addon = this.action.addon;\n\n  protected readonly label = computed(() => this.addon().label);\n  protected readonly ariaLabel = computed(() => this.addon().ariaLabel);\n  protected readonly isIconOnly = computed(() => {\n    const a = this.addon();\n    return !!a.icon && !a.label;\n  });\n}\n"]}
+{"version":3,"file":"ng-forge-dynamic-forms-material.mjs","mappings":";;;;;;;;;;;;;;;;;;;;;;;AA0Cc;;;AAKH;;AAEA;;;AAPU;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA/BT;;;;;;;;;;;;;;;;;;;;;;;;;;;AC6FE;;;;;;;;;;AASH;;AACT,IAKS;;AAEA;;AAEA;;AAEA;;AAEA;;;AAvBU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAZlB;;;;AAvES;;;;;;;;;;;;;;;;AAiBT;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAsDA;;;ACuCW;;;;AAMH;;AAET,IAKS;;IAGQ;AAER;;AAEA;;AAEA;;AAEA;;IAGU;;;AA3BA;AAlCjB;AACE;AACA;AACD;AACD;gFAME;;AAEE;AACA;AACA;oBAEA;;AAEE;AACE;AACA;;;;;;AAOC;;;;AAIR;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA1GO;;;;;;;;;;;;;AAcT;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA6DC;AACE;AACA;AACD;AACD;4IAME;;AAEE;AACA;AACA;;;AAIE;AACE;AACA;;;;;;AAOC;;;;AAIR;AACF;;;AC3EW;;;;AAIH;;AAET;AAEI;;AAEF;IAKO;;;;;AAKP;;;AAGF;AACE;AACE;AAEA;AACE;;AAEJ;AAEA;AACE;AACA;;;AAIE;;AAEJ;;;;;AAMI;;;AAEA;;AAEJ;;;AAlDiB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA3CT;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ACwCE;;;;AAIH;;;AAJU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAJlB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ACwDW;;;;;;AAOZ,IAKS;;AACA;;AAEA;;AAEA;;AAEA;;AAEA;;AAET;;AAvBmB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAlFT;;;;;;;;;;;;;;AAeT;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ACaW;;AAGH;;AAEA;;;AALU;;;;;;;;;;;;;;;;;;;;;;;;;AAXlB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ACDW;;AAGH;;AAEA;;AAEA;;;AAGP;;AACA;;;AAXiB;;;;;;;;;;;;;;AAXlB;;;;AAjBS;;;;;;;;;;;;;;;;;;ACoFE;;;;AAMH;;AACT,IAKS;;AAEA;;AACA;;AAEA;;AACA;;;AAlBU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA1ET;;;;;;;;;;;;;AAcT;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ACUW;;;AAKH;;AAEA;;;AAPU;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA/BT;;;;;;;;;;;;;;;;;;;;;;;;;;;;ACRL;AACL;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;ACXI;AACJ;AACA;AACA;;;AAKE;AACE;AACA;;;AAKA;;;AAKA;;QAIF;AACA;;AAGI;;AACA;AACF;;;;AAKE;AACA;AACE;;;;;AAMN;AACF;AACF;;;AClCA;;;AAQA;AACE;AACA;;AAGF;AAEA;AAEA;AAEA;AAEA;AAEA;AAEA;AAIA;AAEA;AAEA;AAOO;AACL;;AAEE;AACA;;AAEA;AACA;AACE;AACD;AACD;AACD;AACD;;AAEE;AACA;AACA;AACA;AACE;AACD;AACD;AACD;AACD;;AAEE;AACA;AACA;AACA;AACD;AACD;;AAEE;AACA;AACA;AACD;AACD;;AAEE;AACA;AACA;AACD;AACD;;AAEE;AACA;AACA;AACD;AACD;;AAEE;AACA;AACA;AACD;AACD;;AAEE;AACA;AACA;AACD;AACD;;AAEE;AACA;AACA;AACD;AACD;;AAEE;AACA;AACA;AACD;AACD;;AAEE;AACA;AACA;AACD;AACD;;AAEE;AACA;AACA;AACD;AACD;;AAEE;AACA;AACA;AACD;AACD;;AAEE;AACA;AACA;AACA;AACA;AACE;AACD;AACD;AACD;AACD;;AAEE;AACA;AACA;AACA;AACD;AACD;;AAEE;AACA;AACA;AACA;AACD;AACD;;AAEE;AACA;AACA;AACA;AACE;AACD;AACD;AACD;AACD;;AAEE;AACA;AACA;AACA;AACD;AACD;;AAEE;AACA;AACA;AACA;AACD;;;;AC5KH;AACE;AACA;AACA;;AAeI;;;;AAOA;;AAE+B;AACjC;;AAGF;AACF;AAEA;AAEA;AACE;AACA;AACA;AACE;AACE;;;;AAKN;AACE;AACA;AACA;;AAIE;AACE;;QAKF;AACE;;;;;;AAkBF;AACA;;;AAGC;;AAEL;;;;;IC5FW;;;;AAGU;;;AANR;;;;AATF;AACT;AACA;AACA;AACA;AACE;AACD;;AAEF;;;;;ICyDoB;;;;;AAIA;AACjB;;;;;AATS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA1DD","names":[],"ignoreList":[],"sources":["../../../../packages/dynamic-forms-material/src/lib/fields/checkbox/mat-checkbox.component.ts","../../../../packages/dynamic-forms-material/src/lib/fields/datepicker/mat-datepicker.component.ts","../../../../packages/dynamic-forms-material/src/lib/fields/input/mat-input.component.ts","../../../../packages/dynamic-forms-material/src/lib/fields/multi-checkbox/mat-multi-checkbox.component.ts","../../../../packages/dynamic-forms-material/src/lib/fields/radio/mat-radio.component.ts","../../../../packages/dynamic-forms-material/src/lib/fields/select/mat-select.component.ts","../../../../packages/dynamic-forms-material/src/lib/fields/slider/mat-slider.component.ts","../../../../packages/dynamic-forms-material/src/lib/fields/button/mat-button.component.ts","../../../../packages/dynamic-forms-material/src/lib/fields/textarea/mat-textarea.component.ts","../../../../packages/dynamic-forms-material/src/lib/fields/toggle/mat-toggle.component.ts","../../../../packages/dynamic-forms-material/src/lib/types/types.ts","../../../../packages/dynamic-forms-material/src/lib/fields/button/mat-button.mapper.ts","../../../../packages/dynamic-forms-material/src/lib/config/material-field-config.ts","../../../../packages/dynamic-forms-material/src/lib/providers/material-providers.ts","../../../../packages/dynamic-forms-material/src/lib/addons/mat-icon-addon.component.ts","../../../../packages/dynamic-forms-material/src/lib/addons/mat-button-addon.component.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, computed, inject, input } from '@angular/core';\nimport { FormField } from '@angular/forms/signals';\nimport { MatCheckbox } from '@angular/material/checkbox';\nimport { DynamicTextPipe } from '@ng-forge/dynamic-forms/integration';\nimport { NgForgeControl, injectNgForgeField, NgForgeFieldHost } from '@ng-forge/dynamic-forms/integration';\nimport { MatCheckboxProps } from './mat-checkbox.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-checkbox',\n  imports: [MatCheckbox, FormField, MatError, DynamicTextPipe, AsyncPipe, NgForgeControl],\n  hostDirectives: [NgForgeFieldHost],\n  template: `\n    @let f = ngf.field();\n    @let checkboxId = ngf.key() + '-checkbox';\n\n    <mat-checkbox\n      ngForgeControl=\"input[type='checkbox']\"\n      [id]=\"checkboxId\"\n      [formField]=\"f\"\n      [labelPosition]=\"props()?.labelPosition || 'after'\"\n      [indeterminate]=\"props()?.indeterminate || false\"\n      [color]=\"props()?.color || 'primary'\"\n      [disableRipple]=\"disableRipple()\"\n      [required]=\"!!f().required()\"\n      [tabIndex]=\"ngf.tabIndex() ?? 0\"\n      [attr.hidden]=\"f().hidden() || null\"\n    >\n      {{ ngf.label() | dynamicText | async }}\n    </mat-checkbox>\n\n    @if (ngf.errorsToDisplay()[0]; as error) {\n      <mat-error [id]=\"ngf.errorId()\" [attr.hidden]=\"f().hidden() || null\">{{ error.message }}</mat-error>\n    } @else if (props()?.hint; as hint) {\n      <div class=\"mat-hint\" [id]=\"ngf.hintId()\" [attr.hidden]=\"f().hidden() || null\">{{ hint | dynamicText | async }}</div>\n    }\n  `,\n  styleUrl: '../../styles/_form-field.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport default class MatCheckboxFieldComponent {\n  private materialConfig = inject(MATERIAL_CONFIG, { optional: true });\n\n  protected readonly ngf = injectNgForgeField<boolean>();\n\n  readonly props = input<MatCheckboxProps>();\n\n  readonly disableRipple = computed(() => this.props()?.disableRipple ?? this.materialConfig?.disableRipple ?? false);\n}\n","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 { MatDatepicker, MatDatepickerInput, MatDatepickerToggle } from '@angular/material/datepicker';\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 { MatDatepickerProps } from './mat-datepicker.type';\nimport { provideNativeDateAdapter } from '@angular/material/core';\nimport { AsyncPipe } from '@angular/common';\nimport { MATERIAL_CONFIG } from '@ng-forge/dynamic-forms-material/shared';\n\n@Component({\n  selector: 'df-mat-datepicker',\n  imports: [\n    MatFormField,\n    MatLabel,\n    MatInput,\n    MatHint,\n    MatDatepicker,\n    MatDatepickerInput,\n    MatDatepickerToggle,\n    MatSuffix,\n    MatPrefix,\n    FormField,\n    MatError,\n    DynamicTextPipe,\n    AsyncPipe,\n    NgForgeControl,\n    DfAddonSlot,\n  ],\n  hostDirectives: [NgForgeFieldHost, NgForgeAddons],\n  template: `\n    @let inputId = ngf.key() + '-input';\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        />\n      }\n      <input\n        matInput\n        ngForgeControl\n        [id]=\"inputId\"\n        [matDatepicker]=\"picker\"\n        [formField]=\"ngf.field()\"\n        [placeholder]=\"(ngf.placeholder() | dynamicText | async) ?? ''\"\n        [attr.tabindex]=\"ngf.tabIndex()\"\n        [min]=\"minDate()\"\n        [max]=\"maxDate()\"\n      />\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      <mat-datepicker-toggle matIconSuffix [for]=\"picker\" />\n      <mat-datepicker #picker [startAt]=\"startAt()\" [startView]=\"props()?.startView || 'month'\" [touchUi]=\"props()?.touchUi ?? false\" />\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  providers: [provideNativeDateAdapter()],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport default class MatDatepickerFieldComponent {\n  private materialConfig = inject(MATERIAL_CONFIG, { optional: true });\n\n  protected readonly ngf = injectNgForgeField<string>();\n  protected readonly ngfa = injectNgForgeAddons();\n\n  readonly minDate = input<Date | null>(null);\n  readonly maxDate = input<Date | null>(null);\n  readonly startAt = input<Date | null>(null);\n  readonly props = input<MatDatepickerProps>();\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\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","import { AsyncPipe } from '@angular/common';\nimport { ChangeDetectionStrategy, Component, computed, forwardRef, inject, input, signal } 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 { AddonActionContext, AddonActionPreset, DynamicFormLogger } from '@ng-forge/dynamic-forms';\nimport { DfAddonSlot } from '@ng-forge/dynamic-forms/integration';\nimport { WrapperFieldInputs } from '@ng-forge/dynamic-forms/integration';\nimport { DynamicTextPipe, FIELD_SIGNAL_CONTEXT } from '@ng-forge/dynamic-forms/integration';\nimport {\n  ADDON_PRESET_HANDLER,\n  AddonPresetHandler,\n  injectNgForgeAddons,\n  injectNgForgeField,\n  NgForgeAddons,\n  NgForgeControl,\n  NgForgeFieldHost,\n} from '@ng-forge/dynamic-forms/integration';\nimport { MATERIAL_CONFIG, MAT_INPUT_TYPE_OVERRIDE, runMatPresetAction } from '@ng-forge/dynamic-forms-material/shared';\nimport { MatInputAddon, MatInputProps } from './mat-input.type';\n\n@Component({\n  selector: 'df-mat-input',\n  imports: [\n    MatFormField,\n    MatLabel,\n    MatInput,\n    MatHint,\n    MatError,\n    MatPrefix,\n    MatSuffix,\n    FormField,\n    DynamicTextPipe,\n    AsyncPipe,\n    NgForgeControl,\n    DfAddonSlot,\n  ],\n  hostDirectives: [NgForgeFieldHost, NgForgeAddons],\n  template: `\n    @let inputId = ngf.key() + '-input';\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      @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      <input\n        matInput\n        ngForgeControl\n        [id]=\"inputId\"\n        [formField]=\"ngf.field()\"\n        [type]=\"type()\"\n        [placeholder]=\"(ngf.placeholder() | dynamicText | async) ?? ''\"\n        [attr.tabindex]=\"ngf.tabIndex()\"\n      />\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      @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      :host([hidden]) {\n        display: none !important;\n      }\n    `,\n  ],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  providers: [\n    {\n      provide: MAT_INPUT_TYPE_OVERRIDE,\n      useFactory: () => signal<string | undefined>(undefined),\n    },\n    {\n      // Adapter-specific preset semantics for `mat-button` addons (clear /\n      // reset / paste / copy / toggle-password-visibility). The directive\n      // (`NgForgeAddonAction`) delegates here when an addon configures a\n      // `preset`. Per-mat-input-instance so the `typeOverride` signal is\n      // scoped to one field.\n      provide: ADDON_PRESET_HANDLER,\n      useFactory: (): AddonPresetHandler => {\n        const typeOverride = inject(MAT_INPUT_TYPE_OVERRIDE);\n        const fsc = inject(FIELD_SIGNAL_CONTEXT, { optional: true });\n        const logger = inject(DynamicFormLogger);\n        // forwardRef for baselineType only — host.props()?.type gates toggle-password-visibility.\n        const host = inject(forwardRef(() => MatInputFieldComponent));\n        return {\n          run: (preset: string, ctx: AddonActionContext) => {\n            const fieldKey = ctx.field.key;\n            return runMatPresetAction(preset as AddonActionPreset, ctx, {\n              typeOverride,\n              fieldValueSetter: ctx.setValue,\n              fieldDefaultValueGetter:\n                fsc && fieldKey ? () => (fsc.defaultValues() as Record<string, unknown> | undefined)?.[fieldKey] : undefined,\n              baselineType: () => host.props()?.type,\n              logger,\n            });\n          },\n        };\n      },\n    },\n  ],\n})\nexport default class MatInputFieldComponent {\n  private materialConfig = inject(MATERIAL_CONFIG, { optional: true });\n\n  protected readonly ngf = injectNgForgeField<string>();\n  protected readonly ngfa = injectNgForgeAddons<MatInputAddon>();\n\n  readonly props = input<MatInputProps>();\n\n  /**\n   * Wrapper-style host bag pushed by `DfFieldOutlet`. Declared at the\n   * component level so `setInputIfDeclared` (which uses\n   * `reflectComponentType`) can write it.\n   */\n  readonly fieldInputs = input<WrapperFieldInputs | undefined>();\n\n  /** Per-instance type override populated by `toggle-password-visibility` preset. */\n  private readonly typeOverride = inject(MAT_INPUT_TYPE_OVERRIDE);\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  /** Override (set by `toggle-password-visibility` preset) wins over `props().type`. */\n  protected readonly type = computed(() => this.typeOverride() ?? this.props()?.type ?? 'text');\n}\n","import { ChangeDetectionStrategy, Component, computed, input, linkedSignal } from '@angular/core';\nimport { MatCheckbox } from '@angular/material/checkbox';\nimport { FieldOption, ValueType } from '@ng-forge/dynamic-forms';\nimport { DynamicTextPipe } from '@ng-forge/dynamic-forms/integration';\nimport { injectNgForgeField, NgForgeFieldHost, isEqual, NgForgeControl } from '@ng-forge/dynamic-forms/integration';\nimport { explicitEffect } from 'ngxtension/explicit-effect';\nimport { MatMultiCheckboxProps } from './mat-multi-checkbox.type';\nimport { MatError } from '@angular/material/input';\nimport { AsyncPipe } from '@angular/common';\n\n@Component({\n  selector: 'df-mat-multi-checkbox',\n  imports: [MatCheckbox, MatError, DynamicTextPipe, AsyncPipe, NgForgeControl],\n  hostDirectives: [NgForgeFieldHost],\n  template: `\n    @let f = ngf.field();\n    @let checkboxGroupId = ngf.key() + '-checkbox-group';\n    @let checked = checkedValuesMap();\n\n    @if (ngf.label(); as label) {\n      <div class=\"checkbox-group-label\">{{ label | dynamicText | async }}</div>\n    }\n\n    <div\n      [id]=\"checkboxGroupId\"\n      class=\"checkbox-group\"\n      role=\"group\"\n      [attr.aria-invalid]=\"ngf.ariaInvalid()\"\n      [attr.aria-required]=\"ngf.ariaRequired()\"\n      [attr.aria-describedby]=\"ngf.ariaDescribedBy()\"\n    >\n      @for (option of options(); track option.value) {\n        <mat-checkbox\n          ngForgeControl=\"input[type='checkbox']\"\n          [checked]=\"checked['' + option.value]\"\n          [disabled]=\"f().disabled() || option.disabled\"\n          [color]=\"props()?.color || 'primary'\"\n          [labelPosition]=\"props()?.labelPosition || 'after'\"\n          (change)=\"onCheckboxChange(option, $event.checked)\"\n        >\n          {{ option.label | dynamicText | async }}\n        </mat-checkbox>\n      }\n    </div>\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 MatMultiCheckboxFieldComponent {\n  protected readonly ngf = injectNgForgeField<ValueType[]>();\n\n  readonly options = input<FieldOption<ValueType>[]>([]);\n  readonly props = input<MatMultiCheckboxProps>();\n\n  valueViewModel = linkedSignal<FieldOption<ValueType>[]>(\n    () => {\n      const currentValues = this.ngf.field()().value();\n      return this.options().filter((option) => currentValues.includes(option.value));\n    },\n    { equal: isEqual },\n  );\n\n  /** Computed map of checked option values for O(1) lookup in template */\n  readonly checkedValuesMap = computed(() => {\n    const map: Record<string, boolean> = {};\n    for (const opt of this.valueViewModel()) {\n      map[String(opt.value)] = true;\n    }\n    return map;\n  });\n\n  constructor() {\n    explicitEffect([this.valueViewModel], ([selectedOptions]) => {\n      const selectedValues = selectedOptions.map((option) => option.value);\n\n      if (!isEqual(selectedValues, this.ngf.field()().value())) {\n        this.ngf.field()().value.set(selectedValues);\n      }\n    });\n\n    explicitEffect([this.options], ([options]) => {\n      const values = options.map((option) => option.value);\n      const uniqueValues = new Set(values);\n\n      if (values.length !== uniqueValues.size) {\n        const duplicates = values.filter((value, index) => values.indexOf(value) !== index);\n        throw new Error(`Duplicate option values detected in mat-multi-checkbox: ${duplicates.join(', ')}`);\n      }\n    });\n  }\n\n  onCheckboxChange(option: FieldOption<ValueType>, checked: boolean): void {\n    this.valueViewModel.update((currentOptions) => {\n      if (checked) {\n        return currentOptions.some((opt) => opt.value === option.value) ? currentOptions : [...currentOptions, option];\n      } else {\n        return currentOptions.filter((opt) => opt.value !== option.value);\n      }\n    });\n  }\n}\n","import { ChangeDetectionStrategy, Component, input } from '@angular/core';\nimport { FormField } from '@angular/forms/signals';\nimport { MatRadioButton, MatRadioGroup } from '@angular/material/radio';\nimport { FieldOption, ValueType } from '@ng-forge/dynamic-forms';\nimport { DynamicTextPipe } from '@ng-forge/dynamic-forms/integration';\nimport { NgForgeControl, injectNgForgeField, NgForgeFieldHost } from '@ng-forge/dynamic-forms/integration';\nimport { MatRadioProps } from './mat-radio.type';\nimport { MatError } from '@angular/material/input';\nimport { AsyncPipe } from '@angular/common';\n\n@Component({\n  selector: 'df-mat-radio',\n  imports: [MatRadioGroup, MatRadioButton, FormField, MatError, DynamicTextPipe, AsyncPipe, NgForgeControl],\n  hostDirectives: [NgForgeFieldHost],\n  template: `\n    @let f = ngf.field();\n    @let radioGroupId = ngf.key() + '-radio-group';\n\n    @if (ngf.label()) {\n      <div class=\"radio-label\">{{ ngf.label() | dynamicText | async }}</div>\n    }\n\n    <mat-radio-group\n      [id]=\"radioGroupId\"\n      [formField]=\"f\"\n      [attr.aria-invalid]=\"ngf.ariaInvalid()\"\n      [attr.aria-required]=\"ngf.ariaRequired()\"\n      [attr.aria-describedby]=\"ngf.ariaDescribedBy()\"\n    >\n      @for (option of options(); track option.value) {\n        <mat-radio-button\n          ngForgeControl=\"input[type='radio']\"\n          [value]=\"option.value\"\n          [disabled]=\"option.disabled || false\"\n          [color]=\"props()?.color || 'primary'\"\n          [labelPosition]=\"props()?.labelPosition || 'after'\"\n        >\n          {{ option.label | dynamicText | async }}\n        </mat-radio-button>\n      }\n    </mat-radio-group>\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 MatRadioFieldComponent {\n  protected readonly ngf = injectNgForgeField<ValueType>();\n\n  readonly options = input<FieldOption<ValueType>[]>([]);\n  readonly props = input<MatRadioProps>();\n}\n","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","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","import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';\nimport { MatButton } from '@angular/material/button';\nimport { AsyncPipe } from '@angular/common';\nimport { FormEvent } from '@ng-forge/dynamic-forms';\nimport { DynamicTextPipe } from '@ng-forge/dynamic-forms/integration';\nimport { injectNgForgeAction, NgForgeActionHost } from '@ng-forge/dynamic-forms/integration';\nimport { MatButtonProps } from './mat-button.type';\n\n@Component({\n  selector: 'df-mat-button',\n  imports: [MatButton, DynamicTextPipe, AsyncPipe],\n  hostDirectives: [NgForgeActionHost],\n  template: `\n    @let buttonId = action.key() + '-button';\n    <button\n      mat-raised-button\n      [id]=\"buttonId\"\n      [type]=\"buttonType()\"\n      [color]=\"props()?.color || 'primary'\"\n      [disabled]=\"action.disabled()\"\n      [attr.tabindex]=\"action.tabIndex()\"\n      [attr.data-testid]=\"buttonTestId()\"\n      (click)=\"onClick()\"\n    >\n      {{ action.label() | dynamicText | async }}\n    </button>\n  `,\n  styleUrl: '../../styles/_form-field.scss',\n  styles: [\n    `\n      button {\n        min-width: fit-content;\n      }\n    `,\n  ],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport default class MatButtonFieldComponent<TEvent extends FormEvent> {\n  protected readonly action = injectNgForgeAction<TEvent>();\n\n  readonly props = input<MatButtonProps>();\n\n  readonly buttonType = computed(() => this.props()?.type ?? 'button');\n\n  readonly buttonTestId = computed(() => `${this.buttonType()}-${this.action.key()}`);\n\n  onClick(): void {\n    if (this.buttonType() === 'submit') return;\n    this.action.dispatch();\n  }\n}\n","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","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","/**\n * Material Design field type constants\n * Based on available field components in the /fields folder\n */\nexport const MatField = {\n  Input: 'input',\n  Select: 'select',\n  Checkbox: 'checkbox',\n  Button: 'button',\n  Submit: 'submit',\n  Next: 'next',\n  Previous: 'previous',\n  AddArrayItem: 'add-array-item',\n  PrependArrayItem: 'prepend-array-item',\n  InsertArrayItem: 'insert-array-item',\n  RemoveArrayItem: 'remove-array-item',\n  PopArrayItem: 'pop-array-item',\n  ShiftArrayItem: 'shift-array-item',\n  Textarea: 'textarea',\n  Radio: 'radio',\n  MultiCheckbox: 'multi-checkbox',\n  Datepicker: 'datepicker',\n  Slider: 'slider',\n  Toggle: 'toggle',\n} as const;\n\nexport type MatFieldType = (typeof MatField)[keyof typeof MatField];\n","import { computed, inject, isSignal, Signal } from '@angular/core';\nimport { FieldDef } from '@ng-forge/dynamic-forms';\nimport { ARRAY_CONTEXT, buildBaseInputs, DEFAULT_PROPS, injectNonFieldLogicResolver } from '@ng-forge/dynamic-forms/integration';\n\n/**\n * Generic button mapper for custom events or basic buttons.\n * For specific button types (submit, next, prev, add/remove array items),\n * use the dedicated field types and their specific mappers.\n *\n * @param fieldDef The button field definition\n * @returns Signal containing Record of input names to values for ngComponentOutlet\n */\nexport function buttonFieldMapper(fieldDef: FieldDef<Record<string, unknown>>): Signal<Record<string, unknown>> {\n  const defaultProps = inject(DEFAULT_PROPS);\n  const arrayContext = inject(ARRAY_CONTEXT, { optional: true });\n  const resolveLogic = injectNonFieldLogicResolver(fieldDef);\n\n  return computed(() => {\n    const baseInputs = buildBaseInputs(fieldDef, defaultProps());\n\n    const inputs: Record<string, unknown> = {\n      ...baseInputs,\n      ...resolveLogic(),\n    };\n\n    // Add event binding for button events\n    if ('event' in fieldDef && fieldDef.event !== undefined) {\n      inputs['event'] = fieldDef.event;\n    }\n\n    // Add eventArgs binding if provided\n    if ('eventArgs' in fieldDef && fieldDef.eventArgs !== undefined) {\n      inputs['eventArgs'] = fieldDef.eventArgs;\n    }\n\n    // Add eventContext for token resolution (supports $template, $arrayKey, $index, etc.)\n    const template = 'template' in fieldDef ? fieldDef.template : undefined;\n    if (template || arrayContext) {\n      // Read signal value if index is a signal (supports differential updates)\n      const getIndex = () => {\n        if (!arrayContext) return -1;\n        return isSignal(arrayContext.index) ? arrayContext.index() : arrayContext.index;\n      };\n\n      inputs['eventContext'] = {\n        key: fieldDef.key,\n        index: getIndex(),\n        arrayKey: arrayContext?.arrayKey ?? '',\n        get formValue() {\n          return arrayContext?.formValue ?? {};\n        },\n        template,\n      };\n    }\n\n    return inputs;\n  });\n}\n","/* eslint-disable @nx/enforce-module-boundaries -- Package self-imports preserve ng-packagr secondary entry points. */\nimport { FieldTypeDefinition } from '@ng-forge/dynamic-forms/integration';\nimport {\n  addArrayItemButtonMapper,\n  checkboxFieldMapper,\n  datepickerFieldMapper,\n  insertArrayItemButtonMapper,\n  optionsFieldMapper,\n  popArrayItemButtonMapper,\n  prependArrayItemButtonMapper,\n  removeArrayItemButtonMapper,\n  shiftArrayItemButtonMapper,\n  valueFieldMapper,\n} from '@ng-forge/dynamic-forms/integration';\nimport { MatField } from '../types/types';\nimport { buttonFieldMapper } from '../fields/button/mat-button.mapper';\nimport { nextButtonFieldMapper, previousButtonFieldMapper, submitButtonFieldMapper } from '../fields/button/mat-specific-button.mapper';\n\n/**\n * Base for value-bearing field types — waits for the mapper to emit the `field`\n * input before instantiating the component (matches NgForgeField's\n * `input.required<FieldTree<T>>()` contract).\n */\nconst VALUE_FIELD_TYPES_BASE = {\n  renderReadyWhen: ['field'],\n} as const;\n\n/**\n * Base for action/button field types that don't bind to a form value.\n * Renders immediately, opted out of form-value collection.\n */\nconst BUTTON_FIELD_TYPES_BASE = {\n  renderReadyWhen: [],\n  valueHandling: 'exclude',\n} as const;\n\nconst loadInputComponent = () =>\n  import('@ng-forge/dynamic-forms-material/lazy/input').then(({ MatInputFieldComponent }) => MatInputFieldComponent);\nconst loadSelectComponent = () =>\n  import('@ng-forge/dynamic-forms-material/lazy/select').then(({ MatSelectFieldComponent }) => MatSelectFieldComponent);\nconst loadCheckboxComponent = () =>\n  import('@ng-forge/dynamic-forms-material/lazy/checkbox').then(({ MatCheckboxFieldComponent }) => MatCheckboxFieldComponent);\nconst loadButtonComponent = () =>\n  import('@ng-forge/dynamic-forms-material/lazy/button').then(({ MatButtonFieldComponent }) => MatButtonFieldComponent);\nconst loadTextareaComponent = () =>\n  import('@ng-forge/dynamic-forms-material/lazy/textarea').then(({ MatTextareaFieldComponent }) => MatTextareaFieldComponent);\nconst loadRadioComponent = () =>\n  import('@ng-forge/dynamic-forms-material/lazy/radio').then(({ MatRadioFieldComponent }) => MatRadioFieldComponent);\nconst loadMultiCheckboxComponent = () =>\n  import('@ng-forge/dynamic-forms-material/lazy/multi-checkbox').then(\n    ({ MatMultiCheckboxFieldComponent }) => MatMultiCheckboxFieldComponent,\n  );\nconst loadDatepickerComponent = () =>\n  import('@ng-forge/dynamic-forms-material/lazy/datepicker').then(({ MatDatepickerFieldComponent }) => MatDatepickerFieldComponent);\nconst loadSliderComponent = () =>\n  import('@ng-forge/dynamic-forms-material/lazy/slider').then(({ MatSliderFieldComponent }) => MatSliderFieldComponent);\nconst loadToggleComponent = () =>\n  import('@ng-forge/dynamic-forms-material/lazy/toggle').then(({ MatToggleFieldComponent }) => MatToggleFieldComponent);\n\n/**\n * Material Design field type definitions\n * Follows the FieldTypeDefinition interface for proper registry integration\n */\nexport const MATERIAL_FIELD_TYPES: FieldTypeDefinition[] = [\n  {\n    name: MatField.Input,\n    loadComponent: loadInputComponent,\n    mapper: valueFieldMapper,\n    propsToMeta: ['type'],\n    scope: ['text-input', 'numeric'],\n    addons: {\n      slots: ['prefix', 'suffix'],\n    },\n    ...VALUE_FIELD_TYPES_BASE,\n  },\n  {\n    name: MatField.Select,\n    loadComponent: loadSelectComponent,\n    mapper: optionsFieldMapper,\n    scope: 'single-select',\n    addons: {\n      slots: ['prefix', 'suffix'],\n    },\n    ...VALUE_FIELD_TYPES_BASE,\n  },\n  {\n    name: MatField.Checkbox,\n    loadComponent: loadCheckboxComponent,\n    mapper: checkboxFieldMapper,\n    scope: 'boolean',\n    ...VALUE_FIELD_TYPES_BASE,\n  },\n  {\n    name: MatField.Button,\n    loadComponent: loadButtonComponent,\n    mapper: buttonFieldMapper,\n    ...BUTTON_FIELD_TYPES_BASE,\n  },\n  {\n    name: MatField.Submit,\n    loadComponent: loadButtonComponent,\n    mapper: submitButtonFieldMapper,\n    ...BUTTON_FIELD_TYPES_BASE,\n  },\n  {\n    name: MatField.Next,\n    loadComponent: loadButtonComponent,\n    mapper: nextButtonFieldMapper,\n    ...BUTTON_FIELD_TYPES_BASE,\n  },\n  {\n    name: MatField.Previous,\n    loadComponent: loadButtonComponent,\n    mapper: previousButtonFieldMapper,\n    ...BUTTON_FIELD_TYPES_BASE,\n  },\n  {\n    name: MatField.AddArrayItem,\n    loadComponent: loadButtonComponent,\n    mapper: addArrayItemButtonMapper,\n    ...BUTTON_FIELD_TYPES_BASE,\n  },\n  {\n    name: MatField.PrependArrayItem,\n    loadComponent: loadButtonComponent,\n    mapper: prependArrayItemButtonMapper,\n    ...BUTTON_FIELD_TYPES_BASE,\n  },\n  {\n    name: MatField.InsertArrayItem,\n    loadComponent: loadButtonComponent,\n    mapper: insertArrayItemButtonMapper,\n    ...BUTTON_FIELD_TYPES_BASE,\n  },\n  {\n    name: MatField.RemoveArrayItem,\n    loadComponent: loadButtonComponent,\n    mapper: removeArrayItemButtonMapper,\n    ...BUTTON_FIELD_TYPES_BASE,\n  },\n  {\n    name: MatField.PopArrayItem,\n    loadComponent: loadButtonComponent,\n    mapper: popArrayItemButtonMapper,\n    ...BUTTON_FIELD_TYPES_BASE,\n  },\n  {\n    name: MatField.ShiftArrayItem,\n    loadComponent: loadButtonComponent,\n    mapper: shiftArrayItemButtonMapper,\n    ...BUTTON_FIELD_TYPES_BASE,\n  },\n  {\n    name: MatField.Textarea,\n    loadComponent: loadTextareaComponent,\n    mapper: valueFieldMapper,\n    propsToMeta: ['rows', 'cols'],\n    scope: 'text-input',\n    addons: {\n      slots: ['prefix', 'suffix'],\n    },\n    ...VALUE_FIELD_TYPES_BASE,\n  },\n  {\n    name: MatField.Radio,\n    loadComponent: loadRadioComponent,\n    mapper: optionsFieldMapper,\n    scope: 'single-select',\n    ...VALUE_FIELD_TYPES_BASE,\n  },\n  {\n    name: MatField.MultiCheckbox,\n    loadComponent: loadMultiCheckboxComponent,\n    mapper: optionsFieldMapper,\n    scope: 'multi-select',\n    ...VALUE_FIELD_TYPES_BASE,\n  },\n  {\n    name: MatField.Datepicker,\n    loadComponent: loadDatepickerComponent,\n    mapper: datepickerFieldMapper,\n    scope: 'date',\n    addons: {\n      slots: ['prefix', 'suffix'],\n    },\n    ...VALUE_FIELD_TYPES_BASE,\n  },\n  {\n    name: MatField.Slider,\n    loadComponent: loadSliderComponent,\n    mapper: valueFieldMapper,\n    scope: 'numeric',\n    ...VALUE_FIELD_TYPES_BASE,\n  },\n  {\n    name: MatField.Toggle,\n    loadComponent: loadToggleComponent,\n    mapper: checkboxFieldMapper,\n    scope: 'boolean',\n    ...VALUE_FIELD_TYPES_BASE,\n  },\n];\n","/* eslint-disable @nx/enforce-module-boundaries -- Package self-imports preserve ng-packagr secondary entry points. */\nimport type { Provider } from '@angular/core';\nimport { DynamicFormError, type AddonTypeDefinition } from '@ng-forge/dynamic-forms';\nimport { ADDON_TYPE_DEFINITIONS, type FieldTypeDefinition, type WrapperTypeDefinition } from '@ng-forge/dynamic-forms/integration';\nimport { MATERIAL_CONFIG, type MaterialConfig, type MatButtonAddon, type MatIconAddon } from '@ng-forge/dynamic-forms-material/shared';\nimport { MATERIAL_FIELD_TYPES } from '../config/material-field-config';\n\n/** Field type definitions for Material Design components. */\nexport type MaterialFieldTypes = FieldTypeDefinition[];\n\ntype MaterialConfigFeature = {\n  ɵkind: 'material-config';\n  ɵproviders: Provider[];\n};\n\n/**\n * Default `withMaterialFields()` shape — field defs + the auto-included\n * addons feature so `mat-icon` / `mat-button` work out of the box.\n */\ntype MaterialFieldsWithAddons = [...MaterialFieldTypes, MaterialAddonsFeature, WrapperTypeDefinition];\n\ntype MaterialFieldsWithConfig = [...MaterialFieldTypes, MaterialAddonsFeature, WrapperTypeDefinition, MaterialConfigFeature];\n\n/**\n * Replaces the neutral core `field-errors` wrapper with the Material one, so\n * a container-level validation message renders like a field-level one.\n * Registered under the same name, so the later registration wins.\n */\nconst MATERIAL_FIELD_ERRORS_WRAPPER: WrapperTypeDefinition = {\n  wrapperName: 'field-errors',\n  loadComponent: () => import('../wrappers/field-errors/mat-field-errors-wrapper.component'),\n  rendersFieldErrors: true,\n};\n\n/**\n * Configure dynamic forms with Material Design field types, with\n * Material-shipped addon types (`mat-icon`, `mat-button`) auto-included so\n * addons work out of the box.\n *\n * @param config - Optional global configuration for Material form fields\n * @returns Tuple of field type definitions, the addons feature, and\n *   optionally a config feature.\n */\nexport function withMaterialFields(): MaterialFieldsWithAddons;\nexport function withMaterialFields(config: MaterialConfig): MaterialFieldsWithConfig;\nexport function withMaterialFields(config: MaterialConfig | undefined): MaterialFieldsWithAddons | MaterialFieldsWithConfig;\nexport function withMaterialFields(config?: MaterialConfig): MaterialFieldsWithAddons | MaterialFieldsWithConfig {\n  // Always include the addons feature — mat-icon / mat-button are part of\n  // the canonical Material surface.\n  const base: unknown[] = [...MATERIAL_FIELD_TYPES, withMaterialAddons(), MATERIAL_FIELD_ERRORS_WRAPPER];\n\n  if (config) {\n    base.push({\n      ɵkind: 'material-config',\n      ɵproviders: [{ provide: MATERIAL_CONFIG, useValue: config }],\n    } satisfies MaterialConfigFeature);\n    return base as MaterialFieldsWithConfig;\n  }\n\n  return base as MaterialFieldsWithAddons;\n}\n\n/* -- Material addon types ----------------------------------------------- */\n\nconst MAT_ICON_KIND: AddonTypeDefinition<MatIconAddon> = {\n  type: 'mat-icon',\n  loadComponent: () => import('@ng-forge/dynamic-forms-material/lazy/addon-icon').then((m) => m.MatIconAddonComponent),\n  validate: (addon, fieldKey) => {\n    if (typeof addon.icon !== 'string' || addon.icon.length === 0) {\n      throw new DynamicFormError(`Addon type 'mat-icon' requires a non-empty 'icon' string (field: '${fieldKey}').`);\n    }\n  },\n};\n\nconst MAT_BUTTON_KIND: AddonTypeDefinition<MatButtonAddon> = {\n  type: 'mat-button',\n  loadComponent: () => import('@ng-forge/dynamic-forms-material/lazy/addon-button').then((m) => m.MatButtonAddonComponent),\n  validate: (addon, fieldKey) => {\n    // Exactly one of preset / actionRef / action — validator drops the addon\n    // (with warning) if the rule is violated.\n    const set = [addon.preset, addon.actionRef, addon.action].filter((v) => v !== undefined);\n    if (set.length > 1) {\n      throw new DynamicFormError(\n        `Addon type 'mat-button' on field '${fieldKey}' has more than one of preset/actionRef/action — exactly one allowed.`,\n      );\n    }\n    // Icon-only buttons require ariaLabel for screen readers.\n    if (addon.icon && !addon.label && !addon.ariaLabel) {\n      throw new DynamicFormError(`Addon type 'mat-button' on field '${fieldKey}' is icon-only — provide 'ariaLabel' for accessibility.`);\n    }\n  },\n};\n\n/**\n * Feature type discriminant for the Material addons feature. Matches core's\n * `'addons'` type so providers flow through the standard addon-type pipeline\n * in `provideDynamicForm`.\n */\ntype MaterialAddonsFeature = {\n  ɵkind: 'addons';\n  ɵproviders: Provider[];\n};\n\n/** Register Material-shipped addon types (`mat-icon`, `mat-button`) standalone. */\nexport function withMaterialAddons(): MaterialAddonsFeature {\n  return {\n    ɵkind: 'addons',\n    ɵproviders: [\n      { provide: ADDON_TYPE_DEFINITIONS, useValue: MAT_ICON_KIND, multi: true },\n      { provide: ADDON_TYPE_DEFINITIONS, useValue: MAT_BUTTON_KIND, multi: true },\n    ],\n  };\n}\n","import { AsyncPipe } from '@angular/common';\nimport { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';\nimport { MatIcon } from '@angular/material/icon';\nimport { WrapperFieldInputs } from '@ng-forge/dynamic-forms/integration';\nimport { DynamicTextPipe } from '@ng-forge/dynamic-forms/integration';\nimport type { MatIconAddon } from '@ng-forge/dynamic-forms-material/shared';\n\n/** Renderer for the `mat-icon` addon type. */\n@Component({\n  selector: 'df-mat-icon-addon',\n  imports: [MatIcon, AsyncPipe, DynamicTextPipe],\n  template: `<mat-icon [attr.aria-label]=\"(ariaLabel() | dynamicText | async) ?? null\">{{ addon().icon }}</mat-icon>`,\n  host: {\n    '[attr.aria-hidden]': 'hasAriaLabel() ? null : \"true\"',\n  },\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class MatIconAddonComponent {\n  readonly addon = input.required<MatIconAddon>();\n  /** Accepted for contract uniformity — `NgComponentOutlet` setInput is strict; every type must declare it. */\n  readonly fieldInputs = input<WrapperFieldInputs | undefined>();\n\n  protected readonly ariaLabel = computed(() => this.addon().ariaLabel);\n  protected readonly hasAriaLabel = computed(() => this.addon().ariaLabel !== undefined);\n}\n","import { AsyncPipe } from '@angular/common';\nimport { ChangeDetectionStrategy, Component, computed } from '@angular/core';\nimport { MatButton, MatIconButton } from '@angular/material/button';\nimport { MatIcon } from '@angular/material/icon';\nimport { MatProgressSpinner } from '@angular/material/progress-spinner';\nimport { DynamicTextPipe } from '@ng-forge/dynamic-forms/integration';\nimport { injectNgForgeAddonAction, NgForgeAddonAction } from '@ng-forge/dynamic-forms/integration';\nimport type { MatButtonAddon } from '@ng-forge/dynamic-forms-material/shared';\n\n/** Renderer for the `mat-button` addon type. */\n@Component({\n  selector: 'df-mat-button-addon',\n  imports: [MatButton, MatIconButton, MatIcon, MatProgressSpinner, DynamicTextPipe, AsyncPipe],\n  hostDirectives: [NgForgeAddonAction],\n  template: `\n    @if (isIconOnly()) {\n      <button\n        mat-icon-button\n        type=\"button\"\n        [color]=\"addon().color ?? null\"\n        [disabled]=\"action.disabled() || action.loading()\"\n        [attr.aria-label]=\"(ariaLabel() | dynamicText | async) ?? null\"\n        [attr.aria-busy]=\"action.loading() || null\"\n        (click)=\"action.dispatch()\"\n      >\n        @if (action.loading()) {\n          <mat-progress-spinner mode=\"indeterminate\" diameter=\"18\" aria-hidden=\"true\" />\n          <span class=\"df-mat-sr-only\" role=\"status\">Loading…</span>\n        } @else {\n          <mat-icon aria-hidden=\"true\">{{ addon().icon }}</mat-icon>\n        }\n      </button>\n    } @else {\n      <button\n        mat-button\n        type=\"button\"\n        [color]=\"addon().color ?? null\"\n        [disabled]=\"action.disabled() || action.loading()\"\n        [attr.aria-label]=\"(ariaLabel() | dynamicText | async) ?? null\"\n        [attr.aria-busy]=\"action.loading() || null\"\n        (click)=\"action.dispatch()\"\n      >\n        @if (action.loading()) {\n          <mat-progress-spinner mode=\"indeterminate\" diameter=\"18\" aria-hidden=\"true\" />\n          <span class=\"df-mat-sr-only\" role=\"status\">Loading…</span>\n        } @else if (addon().icon; as icon) {\n          <mat-icon aria-hidden=\"true\">{{ icon }}</mat-icon>\n        }\n        {{ label() | dynamicText | async }}\n      </button>\n    }\n  `,\n  styles: [\n    `\n      .df-mat-sr-only {\n        position: absolute;\n        width: 1px;\n        height: 1px;\n        padding: 0;\n        margin: -1px;\n        overflow: hidden;\n        clip: rect(0, 0, 0, 0);\n        white-space: nowrap;\n        border: 0;\n      }\n    `,\n  ],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class MatButtonAddonComponent {\n  protected readonly action = injectNgForgeAddonAction<MatButtonAddon>();\n\n  /** Re-exposed for template binding — same signal stored on the directive. */\n  protected readonly addon = this.action.addon;\n\n  protected readonly label = computed(() => this.addon().label);\n  protected readonly ariaLabel = computed(() => this.addon().ariaLabel);\n  protected readonly isIconOnly = computed(() => {\n    const a = this.addon();\n    return !!a.icon && !a.label;\n  });\n}\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ng-forge/dynamic-forms-material",
-  "version": "1.2.0-next.7",
+  "version": "1.2.0-next.8",
   "description": "Angular Material integration for @ng-forge/dynamic-forms. Pre-built Material Design form components.",
   "type": "module",
   "license": "MIT",
@@ -94,7 +94,7 @@
     "@angular/core": "^22.0.0",
     "@angular/forms": "^22.0.0",
     "@angular/material": "^22.0.0",
-    "@ng-forge/dynamic-forms": "~1.2.0-next.7",
+    "@ng-forge/dynamic-forms": "~1.2.0-next.8",
     "rxjs": ">=7.0.0"
   },
   "dependencies": {

package/types/ng-forge-dynamic-forms-material-lazy-datepicker.d.ts

@@ -1,9 +1,10 @@
 import * as _angular_material_form_field from '@angular/material/form-field';
 import { MatFormFieldAppearance, SubscriptSizing, FloatLabelType } from '@angular/material/form-field';
 import * as _angular_core from '@angular/core';
-import * as _ng_forge_dynamic_forms_integration from '@ng-forge/dynamic-forms/integration';
-import { DatepickerField, DatepickerProps } from '@ng-forge/dynamic-forms/integration';
+import * as _ng_forge_dynamic_forms from '@ng-forge/dynamic-forms';
 import { DynamicText } from '@ng-forge/dynamic-forms';
+import * as _ng_forge_dynamic_forms_integration from '@ng-forge/dynamic-forms/integration';
+import { DatepickerField, DatepickerProps, WrapperFieldInputs } from '@ng-forge/dynamic-forms/integration';
 
 interface MatDatepickerProps extends DatepickerProps {
     appearance?: MatFormFieldAppearance;
@@ -21,16 +22,23 @@ type MatDatepickerField = DatepickerField<MatDatepickerProps>;
 declare class MatDatepickerFieldComponent {
     private materialConfig;
     protected readonly ngf: _ng_forge_dynamic_forms_integration.TypedNgForgeField<string>;
+    protected readonly ngfa: _ng_forge_dynamic_forms_integration.TypedNgForgeAddons<_ng_forge_dynamic_forms.AnyAddon>;
     readonly minDate: _angular_core.InputSignal<Date | null>;
     readonly maxDate: _angular_core.InputSignal<Date | null>;
     readonly startAt: _angular_core.InputSignal<Date | null>;
     readonly props: _angular_core.InputSignal<MatDatepickerProps | undefined>;
+    /**
+     * Wrapper-style host bag pushed by `DfFieldOutlet`. Declared at the
+     * component level so `setInputIfDeclared` (which uses
+     * `reflectComponentType`) can write it.
+     */
+    readonly fieldInputs: _angular_core.InputSignal<WrapperFieldInputs | undefined>;
     readonly appearance: _angular_core.Signal<_angular_material_form_field.MatFormFieldAppearance>;
     readonly subscriptSizing: _angular_core.Signal<_angular_material_form_field.SubscriptSizing>;
     readonly floatLabel: _angular_core.Signal<_angular_material_form_field.FloatLabelType>;
     readonly hideRequiredMarker: _angular_core.Signal<boolean>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<MatDatepickerFieldComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<MatDatepickerFieldComponent, "df-mat-datepicker", never, { "minDate": { "alias": "minDate"; "required": false; "isSignal": true; }; "maxDate": { "alias": "maxDate"; "required": false; "isSignal": true; }; "startAt": { "alias": "startAt"; "required": false; "isSignal": true; }; "props": { "alias": "props"; "required": false; "isSignal": true; }; }, {}, never, never, true, [{ directive: typeof _ng_forge_dynamic_forms_integration.NgForgeFieldHost; inputs: {}; outputs: {}; }]>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<MatDatepickerFieldComponent, "df-mat-datepicker", never, { "minDate": { "alias": "minDate"; "required": false; "isSignal": true; }; "maxDate": { "alias": "maxDate"; "required": false; "isSignal": true; }; "startAt": { "alias": "startAt"; "required": false; "isSignal": true; }; "props": { "alias": "props"; "required": false; "isSignal": true; }; "fieldInputs": { "alias": "fieldInputs"; "required": false; "isSignal": true; }; }, {}, never, never, true, [{ directive: typeof _ng_forge_dynamic_forms_integration.NgForgeFieldHost; inputs: {}; outputs: {}; }, { directive: typeof _ng_forge_dynamic_forms_integration.NgForgeAddons; inputs: {}; outputs: {}; }]>;
 }
 
 export { MatDatepickerFieldComponent };

package/types/ng-forge-dynamic-forms-material-lazy-select.d.ts

@@ -1,9 +1,10 @@
 import * as _angular_material_form_field from '@angular/material/form-field';
 import { MatFormFieldAppearance, SubscriptSizing, FloatLabelType } from '@angular/material/form-field';
 import * as _angular_core from '@angular/core';
-import * as _ng_forge_dynamic_forms_integration from '@ng-forge/dynamic-forms/integration';
-import { SelectField, SelectProps } from '@ng-forge/dynamic-forms/integration';
+import * as _ng_forge_dynamic_forms from '@ng-forge/dynamic-forms';
 import { ValueType, DynamicText, FieldOption } from '@ng-forge/dynamic-forms';
+import * as _ng_forge_dynamic_forms_integration from '@ng-forge/dynamic-forms/integration';
+import { SelectField, SelectProps, WrapperFieldInputs } from '@ng-forge/dynamic-forms/integration';
 
 interface MatSelectProps extends SelectProps {
     appearance?: MatFormFieldAppearance;
@@ -20,7 +21,14 @@ type MatSelectField<T> = SelectField<T, MatSelectProps>;
 declare class MatSelectFieldComponent {
     private materialConfig;
     protected readonly ngf: _ng_forge_dynamic_forms_integration.TypedNgForgeField<ValueType>;
+    protected readonly ngfa: _ng_forge_dynamic_forms_integration.TypedNgForgeAddons<_ng_forge_dynamic_forms.AnyAddon>;
     readonly options: _angular_core.InputSignal<FieldOption<ValueType>[]>;
+    /**
+     * Wrapper-style host bag pushed by `DfFieldOutlet`. Declared at the
+     * component level so `setInputIfDeclared` (which uses
+     * `reflectComponentType`) can write it.
+     */
+    readonly fieldInputs: _angular_core.InputSignal<WrapperFieldInputs | undefined>;
     readonly props: _angular_core.InputSignal<MatSelectProps | undefined>;
     readonly appearance: _angular_core.Signal<_angular_material_form_field.MatFormFieldAppearance>;
     readonly subscriptSizing: _angular_core.Signal<_angular_material_form_field.SubscriptSizing>;
@@ -28,7 +36,7 @@ declare class MatSelectFieldComponent {
     readonly hideRequiredMarker: _angular_core.Signal<boolean>;
     defaultCompare: (value1: any, value2: any) => boolean;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<MatSelectFieldComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<MatSelectFieldComponent, "df-mat-select", never, { "options": { "alias": "options"; "required": false; "isSignal": true; }; "props": { "alias": "props"; "required": false; "isSignal": true; }; }, {}, never, never, true, [{ directive: typeof _ng_forge_dynamic_forms_integration.NgForgeFieldHost; inputs: {}; outputs: {}; }]>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<MatSelectFieldComponent, "df-mat-select", never, { "options": { "alias": "options"; "required": false; "isSignal": true; }; "fieldInputs": { "alias": "fieldInputs"; "required": false; "isSignal": true; }; "props": { "alias": "props"; "required": false; "isSignal": true; }; }, {}, never, never, true, [{ directive: typeof _ng_forge_dynamic_forms_integration.NgForgeFieldHost; inputs: {}; outputs: {}; }, { directive: typeof _ng_forge_dynamic_forms_integration.NgForgeAddons; inputs: {}; outputs: {}; }]>;
 }
 
 export { MatSelectFieldComponent };

package/types/ng-forge-dynamic-forms-material-lazy-textarea.d.ts

@@ -1,9 +1,10 @@
 import * as _angular_material_form_field from '@angular/material/form-field';
 import { MatFormFieldAppearance, SubscriptSizing, FloatLabelType } from '@angular/material/form-field';
 import * as _angular_core from '@angular/core';
-import * as _ng_forge_dynamic_forms_integration from '@ng-forge/dynamic-forms/integration';
-import { TextareaField, TextareaProps } from '@ng-forge/dynamic-forms/integration';
+import * as _ng_forge_dynamic_forms from '@ng-forge/dynamic-forms';
 import { DynamicText } from '@ng-forge/dynamic-forms';
+import * as _ng_forge_dynamic_forms_integration from '@ng-forge/dynamic-forms/integration';
+import { TextareaField, TextareaProps, WrapperFieldInputs } from '@ng-forge/dynamic-forms/integration';
 
 interface MatTextareaProps extends TextareaProps {
     hint?: DynamicText;
@@ -18,13 +19,20 @@ type MatTextareaField = TextareaField<MatTextareaProps>;
 declare class MatTextareaFieldComponent {
     private materialConfig;
     protected readonly ngf: _ng_forge_dynamic_forms_integration.TypedNgForgeField<string>;
+    protected readonly ngfa: _ng_forge_dynamic_forms_integration.TypedNgForgeAddons<_ng_forge_dynamic_forms.AnyAddon>;
     readonly props: _angular_core.InputSignal<MatTextareaProps | undefined>;
+    /**
+     * Wrapper-style host bag pushed by `DfFieldOutlet`. Declared at the
+     * component level so `setInputIfDeclared` (which uses
+     * `reflectComponentType`) can write it.
+     */
+    readonly fieldInputs: _angular_core.InputSignal<WrapperFieldInputs | undefined>;
     readonly appearance: _angular_core.Signal<_angular_material_form_field.MatFormFieldAppearance>;
     readonly subscriptSizing: _angular_core.Signal<_angular_material_form_field.SubscriptSizing>;
     readonly floatLabel: _angular_core.Signal<_angular_material_form_field.FloatLabelType>;
     readonly hideRequiredMarker: _angular_core.Signal<boolean>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<MatTextareaFieldComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<MatTextareaFieldComponent, "df-mat-textarea", never, { "props": { "alias": "props"; "required": false; "isSignal": true; }; }, {}, never, never, true, [{ directive: typeof _ng_forge_dynamic_forms_integration.NgForgeFieldHost; inputs: {}; outputs: {}; }]>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<MatTextareaFieldComponent, "df-mat-textarea", never, { "props": { "alias": "props"; "required": false; "isSignal": true; }; "fieldInputs": { "alias": "fieldInputs"; "required": false; "isSignal": true; }; }, {}, never, never, true, [{ directive: typeof _ng_forge_dynamic_forms_integration.NgForgeFieldHost; inputs: {}; outputs: {}; }, { directive: typeof _ng_forge_dynamic_forms_integration.NgForgeAddons; inputs: {}; outputs: {}; }]>;
 }
 
 export { MatTextareaFieldComponent };

package/types/ng-forge-dynamic-forms-material.d.ts

@@ -1,7 +1,7 @@
 import * as _angular_core from '@angular/core';
 import { Provider } from '@angular/core';
 import * as _ng_forge_dynamic_forms_integration from '@ng-forge/dynamic-forms/integration';
-import { CheckboxField, DatepickerField, DatepickerProps, InputField, InputProps, WrapperFieldInputs, MultiCheckboxField, RadioField, SelectField, SelectProps, SliderField, ButtonField, TextareaField, TextareaProps, ToggleField, FieldTypeDefinition, WrapperTypeDefinition } from '@ng-forge/dynamic-forms/integration';
+import { CheckboxField, DatepickerField, DatepickerProps, WrapperFieldInputs, InputField, InputProps, MultiCheckboxField, RadioField, SelectField, SelectProps, SliderField, ButtonField, TextareaField, TextareaProps, ToggleField, FieldTypeDefinition, WrapperTypeDefinition } from '@ng-forge/dynamic-forms/integration';
 import * as _ng_forge_dynamic_forms from '@ng-forge/dynamic-forms';
 import { DynamicText, TextAddon, TemplateAddon, ValueType, FieldOption, FormEvent, FormSubmitEvent, NextPageEvent, PreviousPageEvent, AppendArrayItemEvent, ArrayAllowedChildren, PrependArrayItemEvent, InsertArrayItemEvent, RemoveAtIndexEvent, PopArrayItemEvent, ShiftArrayItemEvent, NarrowFields, RegisteredFieldTypes, InferFormValue, FormConfig } from '@ng-forge/dynamic-forms';
 import { ThemePalette } from '@angular/material/core';
@@ -44,16 +44,23 @@ type MatDatepickerField = DatepickerField<MatDatepickerProps>;
 declare class MatDatepickerFieldComponent {
     private materialConfig;
     protected readonly ngf: _ng_forge_dynamic_forms_integration.TypedNgForgeField<string>;
+    protected readonly ngfa: _ng_forge_dynamic_forms_integration.TypedNgForgeAddons<_ng_forge_dynamic_forms.AnyAddon>;
     readonly minDate: _angular_core.InputSignal<Date | null>;
     readonly maxDate: _angular_core.InputSignal<Date | null>;
     readonly startAt: _angular_core.InputSignal<Date | null>;
     readonly props: _angular_core.InputSignal<MatDatepickerProps | undefined>;
+    /**
+     * Wrapper-style host bag pushed by `DfFieldOutlet`. Declared at the
+     * component level so `setInputIfDeclared` (which uses
+     * `reflectComponentType`) can write it.
+     */
+    readonly fieldInputs: _angular_core.InputSignal<WrapperFieldInputs | undefined>;
     readonly appearance: _angular_core.Signal<_angular_material_form_field.MatFormFieldAppearance>;
     readonly subscriptSizing: _angular_core.Signal<_angular_material_form_field.SubscriptSizing>;
     readonly floatLabel: _angular_core.Signal<_angular_material_form_field.FloatLabelType>;
     readonly hideRequiredMarker: _angular_core.Signal<boolean>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<MatDatepickerFieldComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<MatDatepickerFieldComponent, "df-mat-datepicker", never, { "minDate": { "alias": "minDate"; "required": false; "isSignal": true; }; "maxDate": { "alias": "maxDate"; "required": false; "isSignal": true; }; "startAt": { "alias": "startAt"; "required": false; "isSignal": true; }; "props": { "alias": "props"; "required": false; "isSignal": true; }; }, {}, never, never, true, [{ directive: typeof _ng_forge_dynamic_forms_integration.NgForgeFieldHost; inputs: {}; outputs: {}; }]>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<MatDatepickerFieldComponent, "df-mat-datepicker", never, { "minDate": { "alias": "minDate"; "required": false; "isSignal": true; }; "maxDate": { "alias": "maxDate"; "required": false; "isSignal": true; }; "startAt": { "alias": "startAt"; "required": false; "isSignal": true; }; "props": { "alias": "props"; "required": false; "isSignal": true; }; "fieldInputs": { "alias": "fieldInputs"; "required": false; "isSignal": true; }; }, {}, never, never, true, [{ directive: typeof _ng_forge_dynamic_forms_integration.NgForgeFieldHost; inputs: {}; outputs: {}; }, { directive: typeof _ng_forge_dynamic_forms_integration.NgForgeAddons; inputs: {}; outputs: {}; }]>;
 }
 
 interface MatInputProps extends InputProps {
@@ -153,7 +160,14 @@ type MatSelectField<T> = SelectField<T, MatSelectProps>;
 declare class MatSelectFieldComponent {
     private materialConfig;
     protected readonly ngf: _ng_forge_dynamic_forms_integration.TypedNgForgeField<ValueType>;
+    protected readonly ngfa: _ng_forge_dynamic_forms_integration.TypedNgForgeAddons<_ng_forge_dynamic_forms.AnyAddon>;
     readonly options: _angular_core.InputSignal<FieldOption<ValueType>[]>;
+    /**
+     * Wrapper-style host bag pushed by `DfFieldOutlet`. Declared at the
+     * component level so `setInputIfDeclared` (which uses
+     * `reflectComponentType`) can write it.
+     */
+    readonly fieldInputs: _angular_core.InputSignal<WrapperFieldInputs | undefined>;
     readonly props: _angular_core.InputSignal<MatSelectProps | undefined>;
     readonly appearance: _angular_core.Signal<_angular_material_form_field.MatFormFieldAppearance>;
     readonly subscriptSizing: _angular_core.Signal<_angular_material_form_field.SubscriptSizing>;
@@ -161,7 +175,7 @@ declare class MatSelectFieldComponent {
     readonly hideRequiredMarker: _angular_core.Signal<boolean>;
     defaultCompare: (value1: any, value2: any) => boolean;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<MatSelectFieldComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<MatSelectFieldComponent, "df-mat-select", never, { "options": { "alias": "options"; "required": false; "isSignal": true; }; "props": { "alias": "props"; "required": false; "isSignal": true; }; }, {}, never, never, true, [{ directive: typeof _ng_forge_dynamic_forms_integration.NgForgeFieldHost; inputs: {}; outputs: {}; }]>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<MatSelectFieldComponent, "df-mat-select", never, { "options": { "alias": "options"; "required": false; "isSignal": true; }; "fieldInputs": { "alias": "fieldInputs"; "required": false; "isSignal": true; }; "props": { "alias": "props"; "required": false; "isSignal": true; }; }, {}, never, never, true, [{ directive: typeof _ng_forge_dynamic_forms_integration.NgForgeFieldHost; inputs: {}; outputs: {}; }, { directive: typeof _ng_forge_dynamic_forms_integration.NgForgeAddons; inputs: {}; outputs: {}; }]>;
 }
 
 interface MatSliderProps {
@@ -303,13 +317,20 @@ type MatTextareaField = TextareaField<MatTextareaProps>;
 declare class MatTextareaFieldComponent {
     private materialConfig;
     protected readonly ngf: _ng_forge_dynamic_forms_integration.TypedNgForgeField<string>;
+    protected readonly ngfa: _ng_forge_dynamic_forms_integration.TypedNgForgeAddons<_ng_forge_dynamic_forms.AnyAddon>;
     readonly props: _angular_core.InputSignal<MatTextareaProps | undefined>;
+    /**
+     * Wrapper-style host bag pushed by `DfFieldOutlet`. Declared at the
+     * component level so `setInputIfDeclared` (which uses
+     * `reflectComponentType`) can write it.
+     */
+    readonly fieldInputs: _angular_core.InputSignal<WrapperFieldInputs | undefined>;
     readonly appearance: _angular_core.Signal<_angular_material_form_field.MatFormFieldAppearance>;
     readonly subscriptSizing: _angular_core.Signal<_angular_material_form_field.SubscriptSizing>;
     readonly floatLabel: _angular_core.Signal<_angular_material_form_field.FloatLabelType>;
     readonly hideRequiredMarker: _angular_core.Signal<boolean>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<MatTextareaFieldComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<MatTextareaFieldComponent, "df-mat-textarea", never, { "props": { "alias": "props"; "required": false; "isSignal": true; }; }, {}, never, never, true, [{ directive: typeof _ng_forge_dynamic_forms_integration.NgForgeFieldHost; inputs: {}; outputs: {}; }]>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<MatTextareaFieldComponent, "df-mat-textarea", never, { "props": { "alias": "props"; "required": false; "isSignal": true; }; "fieldInputs": { "alias": "fieldInputs"; "required": false; "isSignal": true; }; }, {}, never, never, true, [{ directive: typeof _ng_forge_dynamic_forms_integration.NgForgeFieldHost; inputs: {}; outputs: {}; }, { directive: typeof _ng_forge_dynamic_forms_integration.NgForgeAddons; inputs: {}; outputs: {}; }]>;
 }
 
 interface MatToggleProps {