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

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

@@ -0,0 +1,106 @@
+import { AsyncPipe } from '@angular/common';
+import * as i0 from '@angular/core';
+import { computed, ChangeDetectionStrategy, Component } from '@angular/core';
+import { MatButton, MatIconButton } from '@angular/material/button';
+import { MatIcon } from '@angular/material/icon';
+import { MatProgressSpinner } from '@angular/material/progress-spinner';
+import * as i1 from '@ng-forge/dynamic-forms/integration';
+import { injectNgForgeAddonAction, DynamicTextPipe, NgForgeAddonAction } from '@ng-forge/dynamic-forms/integration';
+
+class MatButtonAddonComponent {
+    action = injectNgForgeAddonAction();
+        addon = this.action.addon;
+    label = computed(() => this.addon().label, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    ariaLabel = computed(() => this.addon().ariaLabel, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+    isIconOnly = computed(() => {
+        const a = this.addon();
+        return !!a.icon && !a.label;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isIconOnly" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: MatButtonAddonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: MatButtonAddonComponent, isStandalone: true, selector: "df-mat-button-addon", hostDirectives: [{ directive: i1.NgForgeAddonAction }], ngImport: i0, template: `
+    @if (isIconOnly()) {
+      <button
+        mat-icon-button
+        type="button"
+        [color]="addon().color ?? null"
+        [disabled]="action.disabled() || action.loading()"
+        [attr.aria-label]="(ariaLabel() | dynamicText | async) ?? null"
+        [attr.aria-busy]="action.loading() || null"
+        (click)="action.dispatch()"
+      >
+        @if (action.loading()) {
+          <mat-progress-spinner mode="indeterminate" diameter="18" aria-hidden="true" />
+          <span class="df-mat-sr-only" role="status">Loading…</span>
+        } @else {
+          <mat-icon aria-hidden="true">{{ addon().icon }}</mat-icon>
+        }
+      </button>
+    } @else {
+      <button
+        mat-button
+        type="button"
+        [color]="addon().color ?? null"
+        [disabled]="action.disabled() || action.loading()"
+        [attr.aria-label]="(ariaLabel() | dynamicText | async) ?? null"
+        [attr.aria-busy]="action.loading() || null"
+        (click)="action.dispatch()"
+      >
+        @if (action.loading()) {
+          <mat-progress-spinner mode="indeterminate" diameter="18" aria-hidden="true" />
+          <span class="df-mat-sr-only" role="status">Loading…</span>
+        } @else if (addon().icon; as icon) {
+          <mat-icon aria-hidden="true">{{ icon }}</mat-icon>
+        }
+        {{ label() | dynamicText | async }}
+      </button>
+    }
+  `, isInline: true, styles: [".df-mat-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}\n"], dependencies: [{ kind: "component", type: MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "pipe", type: DynamicTextPipe, name: "dynamicText" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: MatButtonAddonComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'df-mat-button-addon', imports: [MatButton, MatIconButton, MatIcon, MatProgressSpinner, DynamicTextPipe, AsyncPipe], hostDirectives: [NgForgeAddonAction], template: `
+    @if (isIconOnly()) {
+      <button
+        mat-icon-button
+        type="button"
+        [color]="addon().color ?? null"
+        [disabled]="action.disabled() || action.loading()"
+        [attr.aria-label]="(ariaLabel() | dynamicText | async) ?? null"
+        [attr.aria-busy]="action.loading() || null"
+        (click)="action.dispatch()"
+      >
+        @if (action.loading()) {
+          <mat-progress-spinner mode="indeterminate" diameter="18" aria-hidden="true" />
+          <span class="df-mat-sr-only" role="status">Loading…</span>
+        } @else {
+          <mat-icon aria-hidden="true">{{ addon().icon }}</mat-icon>
+        }
+      </button>
+    } @else {
+      <button
+        mat-button
+        type="button"
+        [color]="addon().color ?? null"
+        [disabled]="action.disabled() || action.loading()"
+        [attr.aria-label]="(ariaLabel() | dynamicText | async) ?? null"
+        [attr.aria-busy]="action.loading() || null"
+        (click)="action.dispatch()"
+      >
+        @if (action.loading()) {
+          <mat-progress-spinner mode="indeterminate" diameter="18" aria-hidden="true" />
+          <span class="df-mat-sr-only" role="status">Loading…</span>
+        } @else if (addon().icon; as icon) {
+          <mat-icon aria-hidden="true">{{ icon }}</mat-icon>
+        }
+        {{ label() | dynamicText | async }}
+      </button>
+    }
+  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".df-mat-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}\n"] }]
+        }] });
+
+
+export { MatButtonAddonComponent };
+//# sourceMappingURL=ng-forge-dynamic-forms-material-lazy-addon-button.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ng-forge-dynamic-forms-material-lazy-addon-button.mjs","mappings":";;;;;;;;;;;IAyEqB;;;;;AAIA;AACjB;;;;;AATS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA1DD","names":[],"ignoreList":[],"sources":["../../../../packages/dynamic-forms-material/src/lib/addons/mat-button-addon.component.ts"],"sourcesContent":["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/fesm2022/ng-forge-dynamic-forms-material-lazy-addon-icon.mjs

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"ng-forge-dynamic-forms-material-lazy-addon-icon.mjs","mappings":";;;;;;;;;IAoBW;;;;AAGU;;;AANR;;;;AATF;AACT;AACA;AACA;AACA;AACE;AACD;;AAEF","names":[],"ignoreList":[],"sources":["../../../../packages/dynamic-forms-material/src/lib/addons/mat-icon-addon.component.ts"],"sourcesContent":["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"]}

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

@@ -0,0 +1,60 @@
+import * as i0 from '@angular/core';
+import { input, computed, ChangeDetectionStrategy, Component } from '@angular/core';
+import { MatButton } from '@angular/material/button';
+import { AsyncPipe } from '@angular/common';
+import * as i1 from '@ng-forge/dynamic-forms/integration';
+import { injectNgForgeAction, DynamicTextPipe, NgForgeActionHost } from '@ng-forge/dynamic-forms/integration';
+
+class MatButtonFieldComponent {
+    action = injectNgForgeAction();
+    props = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "props" }] : /* istanbul ignore next */ []));
+    buttonType = computed(() => this.props()?.type ?? 'button', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "buttonType" }] : /* istanbul ignore next */ []));
+    buttonTestId = computed(() => `${this.buttonType()}-${this.action.key()}`, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "buttonTestId" }] : /* istanbul ignore next */ []));
+    onClick() {
+        if (this.buttonType() === 'submit')
+            return;
+        this.action.dispatch();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: MatButtonFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.1", type: MatButtonFieldComponent, isStandalone: true, selector: "df-mat-button", inputs: { props: { classPropertyName: "props", publicName: "props", isSignal: true, isRequired: false, transformFunction: null } }, hostDirectives: [{ directive: i1.NgForgeActionHost }], ngImport: i0, template: `
+    @let buttonId = action.key() + '-button';
+    <button
+      mat-raised-button
+      [id]="buttonId"
+      [type]="buttonType()"
+      [color]="props()?.color || 'primary'"
+      [disabled]="action.disabled()"
+      [attr.tabindex]="action.tabIndex()"
+      [attr.data-testid]="buttonTestId()"
+      (click)="onClick()"
+    >
+      {{ action.label() | dynamicText | async }}
+    </button>
+  `, isInline: true, styles: [":host{display:block;width:100%}:host([hidden]){display:none!important}.df-mat-field{display:flex;flex-direction:column;gap:var(--df-field-gap, .5rem);width:100%}.df-mat-label{font-weight:var(--df-label-font-weight, 500);color:var(--df-label-color, inherit)}.df-mat-hint{color:var(--df-hint-color, rgba(0, 0, 0, .6));font-size:var(--df-hint-font-size, .875rem)}.df-mat-error{color:var(--df-error-color, #f44336);font-size:var(--df-error-font-size, .875rem)}\n", "button{min-width:fit-content}\n"], dependencies: [{ kind: "component", type: MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "pipe", type: DynamicTextPipe, name: "dynamicText" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: MatButtonFieldComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'df-mat-button', imports: [MatButton, DynamicTextPipe, AsyncPipe], hostDirectives: [NgForgeActionHost], template: `
+    @let buttonId = action.key() + '-button';
+    <button
+      mat-raised-button
+      [id]="buttonId"
+      [type]="buttonType()"
+      [color]="props()?.color || 'primary'"
+      [disabled]="action.disabled()"
+      [attr.tabindex]="action.tabIndex()"
+      [attr.data-testid]="buttonTestId()"
+      (click)="onClick()"
+    >
+      {{ action.label() | dynamicText | async }}
+    </button>
+  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:block;width:100%}:host([hidden]){display:none!important}.df-mat-field{display:flex;flex-direction:column;gap:var(--df-field-gap, .5rem);width:100%}.df-mat-label{font-weight:var(--df-label-font-weight, 500);color:var(--df-label-color, inherit)}.df-mat-hint{color:var(--df-hint-color, rgba(0, 0, 0, .6));font-size:var(--df-hint-font-size, .875rem)}.df-mat-error{color:var(--df-error-color, #f44336);font-size:var(--df-error-font-size, .875rem)}\n", "button{min-width:fit-content}\n"] }]
+        }], propDecorators: { props: [{ type: i0.Input, args: [{ isSignal: true, alias: "props", required: false }] }] } });
+
+
+
+export { MatButtonFieldComponent };
+//# sourceMappingURL=ng-forge-dynamic-forms-material-lazy-button.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ng-forge-dynamic-forms-material-lazy-button.mjs","mappings":";;;;;;;AAqCc;;AAGH;;AAEA;;AAEA;;;AAGP;;AACA;;;AAXiB;;;;;;;;;;;;;;AAXlB;;;;AAjBS","names":[],"ignoreList":[],"sources":["../../../../packages/dynamic-forms-material/src/lib/fields/button/mat-button.component.ts"],"sourcesContent":["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"]}

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

@@ -0,0 +1,76 @@
+import * as i0 from '@angular/core';
+import { inject, input, computed, ChangeDetectionStrategy, Component } from '@angular/core';
+import { FormField } from '@angular/forms/signals';
+import { MatCheckbox } from '@angular/material/checkbox';
+import * as i1 from '@ng-forge/dynamic-forms/integration';
+import { injectNgForgeField, NgForgeControl, DynamicTextPipe, NgForgeFieldHost } from '@ng-forge/dynamic-forms/integration';
+import { MatError } from '@angular/material/input';
+import { AsyncPipe } from '@angular/common';
+import { MATERIAL_CONFIG } from '@ng-forge/dynamic-forms-material/shared';
+
+class MatCheckboxFieldComponent {
+    materialConfig = inject(MATERIAL_CONFIG, { optional: true });
+    ngf = injectNgForgeField();
+    props = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "props" }] : /* istanbul ignore next */ []));
+    disableRipple = computed(() => this.props()?.disableRipple ?? this.materialConfig?.disableRipple ?? false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "disableRipple" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: MatCheckboxFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: MatCheckboxFieldComponent, isStandalone: true, selector: "df-mat-checkbox", inputs: { props: { classPropertyName: "props", publicName: "props", isSignal: true, isRequired: false, transformFunction: null } }, hostDirectives: [{ directive: i1.NgForgeFieldHost }], ngImport: i0, template: `
+    @let f = ngf.field();
+    @let checkboxId = ngf.key() + '-checkbox';
+
+    <mat-checkbox
+      ngForgeControl="input[type='checkbox']"
+      [id]="checkboxId"
+      [formField]="f"
+      [labelPosition]="props()?.labelPosition || 'after'"
+      [indeterminate]="props()?.indeterminate || false"
+      [color]="props()?.color || 'primary'"
+      [disableRipple]="disableRipple()"
+      [required]="!!f().required()"
+      [tabIndex]="ngf.tabIndex() ?? 0"
+      [attr.hidden]="f().hidden() || null"
+    >
+      {{ ngf.label() | dynamicText | async }}
+    </mat-checkbox>
+
+    @if (ngf.errorsToDisplay()[0]; as error) {
+      <mat-error [id]="ngf.errorId()" [attr.hidden]="f().hidden() || null">{{ error.message }}</mat-error>
+    } @else if (props()?.hint; as hint) {
+      <div class="mat-hint" [id]="ngf.hintId()" [attr.hidden]="f().hidden() || null">{{ hint | dynamicText | async }}</div>
+    }
+  `, isInline: true, styles: [":host{display:block;width:100%}:host([hidden]){display:none!important}.df-mat-field{display:flex;flex-direction:column;gap:var(--df-field-gap, .5rem);width:100%}.df-mat-label{font-weight:var(--df-label-font-weight, 500);color:var(--df-label-color, inherit)}.df-mat-hint{color:var(--df-hint-color, rgba(0, 0, 0, .6));font-size:var(--df-hint-font-size, .875rem)}.df-mat-error{color:var(--df-error-color, #f44336);font-size:var(--df-error-font-size, .875rem)}\n"], dependencies: [{ kind: "component", type: MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "directive", type: FormField, selector: "[formField]", inputs: ["formField"], exportAs: ["formField"] }, { kind: "directive", type: MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: NgForgeControl, selector: "[ngForgeControl]", inputs: ["ngForgeControl"] }, { kind: "pipe", type: DynamicTextPipe, name: "dynamicText" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: MatCheckboxFieldComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'df-mat-checkbox', imports: [MatCheckbox, FormField, MatError, DynamicTextPipe, AsyncPipe, NgForgeControl], hostDirectives: [NgForgeFieldHost], template: `
+    @let f = ngf.field();
+    @let checkboxId = ngf.key() + '-checkbox';
+
+    <mat-checkbox
+      ngForgeControl="input[type='checkbox']"
+      [id]="checkboxId"
+      [formField]="f"
+      [labelPosition]="props()?.labelPosition || 'after'"
+      [indeterminate]="props()?.indeterminate || false"
+      [color]="props()?.color || 'primary'"
+      [disableRipple]="disableRipple()"
+      [required]="!!f().required()"
+      [tabIndex]="ngf.tabIndex() ?? 0"
+      [attr.hidden]="f().hidden() || null"
+    >
+      {{ ngf.label() | dynamicText | async }}
+    </mat-checkbox>
+
+    @if (ngf.errorsToDisplay()[0]; as error) {
+      <mat-error [id]="ngf.errorId()" [attr.hidden]="f().hidden() || null">{{ error.message }}</mat-error>
+    } @else if (props()?.hint; as hint) {
+      <div class="mat-hint" [id]="ngf.hintId()" [attr.hidden]="f().hidden() || null">{{ hint | dynamicText | async }}</div>
+    }
+  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:block;width:100%}:host([hidden]){display:none!important}.df-mat-field{display:flex;flex-direction:column;gap:var(--df-field-gap, .5rem);width:100%}.df-mat-label{font-weight:var(--df-label-font-weight, 500);color:var(--df-label-color, inherit)}.df-mat-hint{color:var(--df-hint-color, rgba(0, 0, 0, .6));font-size:var(--df-hint-font-size, .875rem)}.df-mat-error{color:var(--df-error-color, #f44336);font-size:var(--df-error-font-size, .875rem)}\n"] }]
+        }], propDecorators: { props: [{ type: i0.Input, args: [{ isSignal: true, alias: "props", required: false }] }] } });
+
+
+export { MatCheckboxFieldComponent };
+//# sourceMappingURL=ng-forge-dynamic-forms-material-lazy-checkbox.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ng-forge-dynamic-forms-material-lazy-checkbox.mjs","mappings":";;;;;;;;;;AA0Cc;;;AAKH;;AAEA;;;AAPU;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA/BT","names":[],"ignoreList":[],"sources":["../../../../packages/dynamic-forms-material/src/lib/fields/checkbox/mat-checkbox.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"]}

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

@@ -0,0 +1,124 @@
+import * as i0 from '@angular/core';
+import { inject, input, computed, ChangeDetectionStrategy, Component } from '@angular/core';
+import { FormField } from '@angular/forms/signals';
+import { MatFormField, MatLabel, MatSuffix, MatError } from '@angular/material/form-field';
+import { MatInput, MatHint } from '@angular/material/input';
+import { MatDatepicker, MatDatepickerInput, MatDatepickerToggle } from '@angular/material/datepicker';
+import * as i1 from '@ng-forge/dynamic-forms/integration';
+import { injectNgForgeField, NgForgeControl, DynamicTextPipe, NgForgeFieldHost } from '@ng-forge/dynamic-forms/integration';
+import { provideNativeDateAdapter } from '@angular/material/core';
+import { AsyncPipe } from '@angular/common';
+import { MATERIAL_CONFIG } from '@ng-forge/dynamic-forms-material/shared';
+
+class MatDatepickerFieldComponent {
+    materialConfig = inject(MATERIAL_CONFIG, { optional: true });
+    ngf = injectNgForgeField();
+    minDate = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "minDate" }] : /* istanbul ignore next */ []));
+    maxDate = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "maxDate" }] : /* istanbul ignore next */ []));
+    startAt = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "startAt" }] : /* istanbul ignore next */ []));
+    props = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "props" }] : /* istanbul ignore next */ []));
+    appearance = computed(() => this.props()?.appearance ?? this.materialConfig?.appearance ?? 'outline', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "appearance" }] : /* istanbul ignore next */ []));
+    subscriptSizing = computed(() => this.props()?.subscriptSizing ?? this.materialConfig?.subscriptSizing ?? 'dynamic', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "subscriptSizing" }] : /* istanbul ignore next */ []));
+    floatLabel = computed(() => this.props()?.floatLabel ?? this.materialConfig?.floatLabel ?? 'auto', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "floatLabel" }] : /* istanbul ignore next */ []));
+    hideRequiredMarker = computed(() => this.props()?.hideRequiredMarker ?? this.materialConfig?.hideRequiredMarker ?? false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hideRequiredMarker" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: MatDatepickerFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: MatDatepickerFieldComponent, isStandalone: true, selector: "df-mat-datepicker", inputs: { minDate: { classPropertyName: "minDate", publicName: "minDate", isSignal: true, isRequired: false, transformFunction: null }, maxDate: { classPropertyName: "maxDate", publicName: "maxDate", isSignal: true, isRequired: false, transformFunction: null }, startAt: { classPropertyName: "startAt", publicName: "startAt", isSignal: true, isRequired: false, transformFunction: null }, props: { classPropertyName: "props", publicName: "props", isSignal: true, isRequired: false, transformFunction: null } }, providers: [provideNativeDateAdapter()], hostDirectives: [{ directive: i1.NgForgeFieldHost }], ngImport: i0, template: `
+    @let inputId = ngf.key() + '-input';
+
+    <mat-form-field
+      [appearance]="appearance()"
+      [subscriptSizing]="subscriptSizing()"
+      [floatLabel]="floatLabel()"
+      [hideRequiredMarker]="hideRequiredMarker()"
+    >
+      @if (ngf.label(); as label) {
+        <mat-label>{{ label | dynamicText | async }}</mat-label>
+      }
+
+      <input
+        matInput
+        ngForgeControl
+        [id]="inputId"
+        [matDatepicker]="picker"
+        [formField]="ngf.field()"
+        [placeholder]="(ngf.placeholder() | dynamicText | async) ?? ''"
+        [attr.tabindex]="ngf.tabIndex()"
+        [min]="minDate()"
+        [max]="maxDate()"
+      />
+
+      <mat-datepicker-toggle matIconSuffix [for]="picker" />
+      <mat-datepicker #picker [startAt]="startAt()" [startView]="props()?.startView || 'month'" [touchUi]="props()?.touchUi ?? false" />
+
+      @if (ngf.errorsToDisplay()[0]; as error) {
+        <mat-error [id]="ngf.errorId()">{{ error.message }}</mat-error>
+      } @else if (props()?.hint; as hint) {
+        <mat-hint [id]="ngf.hintId()">{{ hint | dynamicText | async }}</mat-hint>
+      }
+    </mat-form-field>
+  `, isInline: true, styles: [":host{display:block;width:100%}:host([hidden]){display:none!important}.df-mat-field{display:flex;flex-direction:column;gap:var(--df-field-gap, .5rem);width:100%}.df-mat-label{font-weight:var(--df-label-font-weight, 500);color:var(--df-label-color, inherit)}.df-mat-hint{color:var(--df-hint-color, rgba(0, 0, 0, .6));font-size:var(--df-hint-font-size, .875rem)}.df-mat-error{color:var(--df-error-color, #f44336);font-size:var(--df-error-font-size, .875rem)}\n", "mat-form-field{width:100%}\n"], dependencies: [{ kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: MatLabel, selector: "mat-label" }, { kind: "directive", type: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "component", type: MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "directive", type: MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: FormField, selector: "[formField]", inputs: ["formField"], exportAs: ["formField"] }, { kind: "directive", type: MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: NgForgeControl, selector: "[ngForgeControl]", inputs: ["ngForgeControl"] }, { kind: "pipe", type: DynamicTextPipe, name: "dynamicText" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: MatDatepickerFieldComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'df-mat-datepicker', imports: [
+                        MatFormField,
+                        MatLabel,
+                        MatInput,
+                        MatHint,
+                        MatDatepicker,
+                        MatDatepickerInput,
+                        MatDatepickerToggle,
+                        MatSuffix,
+                        FormField,
+                        MatError,
+                        DynamicTextPipe,
+                        AsyncPipe,
+                        NgForgeControl,
+                    ], hostDirectives: [NgForgeFieldHost], template: `
+    @let inputId = ngf.key() + '-input';
+
+    <mat-form-field
+      [appearance]="appearance()"
+      [subscriptSizing]="subscriptSizing()"
+      [floatLabel]="floatLabel()"
+      [hideRequiredMarker]="hideRequiredMarker()"
+    >
+      @if (ngf.label(); as label) {
+        <mat-label>{{ label | dynamicText | async }}</mat-label>
+      }
+
+      <input
+        matInput
+        ngForgeControl
+        [id]="inputId"
+        [matDatepicker]="picker"
+        [formField]="ngf.field()"
+        [placeholder]="(ngf.placeholder() | dynamicText | async) ?? ''"
+        [attr.tabindex]="ngf.tabIndex()"
+        [min]="minDate()"
+        [max]="maxDate()"
+      />
+
+      <mat-datepicker-toggle matIconSuffix [for]="picker" />
+      <mat-datepicker #picker [startAt]="startAt()" [startView]="props()?.startView || 'month'" [touchUi]="props()?.touchUi ?? false" />
+
+      @if (ngf.errorsToDisplay()[0]; as error) {
+        <mat-error [id]="ngf.errorId()">{{ error.message }}</mat-error>
+      } @else if (props()?.hint; as hint) {
+        <mat-hint [id]="ngf.hintId()">{{ hint | dynamicText | async }}</mat-hint>
+      }
+    </mat-form-field>
+  `, providers: [provideNativeDateAdapter()], changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:block;width:100%}:host([hidden]){display:none!important}.df-mat-field{display:flex;flex-direction:column;gap:var(--df-field-gap, .5rem);width:100%}.df-mat-label{font-weight:var(--df-label-font-weight, 500);color:var(--df-label-color, inherit)}.df-mat-hint{color:var(--df-hint-color, rgba(0, 0, 0, .6));font-size:var(--df-hint-font-size, .875rem)}.df-mat-error{color:var(--df-error-color, #f44336);font-size:var(--df-error-font-size, .875rem)}\n", "mat-form-field{width:100%}\n"] }]
+        }], propDecorators: { minDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "minDate", required: false }] }], maxDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxDate", required: false }] }], startAt: [{ type: i0.Input, args: [{ isSignal: true, alias: "startAt", required: false }] }], props: [{ type: i0.Input, args: [{ isSignal: true, alias: "props", required: false }] }] } });
+
+
+export { MatDatepickerFieldComponent };
+//# sourceMappingURL=ng-forge-dynamic-forms-material-lazy-datepicker.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ng-forge-dynamic-forms-material-lazy-datepicker.mjs","mappings":";;;;;;;;;;;;AA4Ec;;;;;;;;;AAQH;;AAEA;;AAEA;;AAEA;;AAEA;;;AAhBU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA/DT;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmDT","names":[],"ignoreList":[],"sources":["../../../../packages/dynamic-forms-material/src/lib/fields/datepicker/mat-datepicker.component.ts"],"sourcesContent":["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"]}