npm - @ng-forge/dynamic-forms-material - Versions diffs - 1.2.0-next.5 → 1.2.0-next.7 - Mend

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (45) hide show

package/fesm2022/ng-forge-dynamic-forms-material-lazy-input.mjs ADDED Viewed

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

package/fesm2022/ng-forge-dynamic-forms-material-lazy-input.mjs.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"ng-forge-dynamic-forms-material-lazy-input.mjs","mappings":";;;;;;;;;;;AAwKc;;;;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","names":[],"ignoreList":[],"sources":["../../../../packages/dynamic-forms-material/src/lib/fields/input/mat-input.component.ts"],"sourcesContent":["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"]}

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

@@ -0,0 +1,136 @@
+import * as i0 from '@angular/core';
+import { input, linkedSignal, computed, ChangeDetectionStrategy, Component } from '@angular/core';
+import { MatCheckbox } from '@angular/material/checkbox';
+import * as i1 from '@ng-forge/dynamic-forms/integration';
+import { injectNgForgeField, isEqual, NgForgeControl, DynamicTextPipe, NgForgeFieldHost } from '@ng-forge/dynamic-forms/integration';
+import { explicitEffect } from 'ngxtension/explicit-effect';
+import { MatError } from '@angular/material/input';
+import { AsyncPipe } from '@angular/common';
+class MatMultiCheckboxFieldComponent {
+    ngf = injectNgForgeField();
+    options = input([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
+    props = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "props" }] : /* istanbul ignore next */ []));
+    valueViewModel = linkedSignal(() => {
+        const currentValues = this.ngf.field()().value();
+        return this.options().filter((option) => currentValues.includes(option.value));
+    }, { ...(ngDevMode ? { debugName: "valueViewModel" } : /* istanbul ignore next */ {}), equal: isEqual });
+        checkedValuesMap = computed(() => {
+        const map = {};
+        for (const opt of this.valueViewModel()) {
+            map[String(opt.value)] = true;
+        }
+        return map;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "checkedValuesMap" }] : /* istanbul ignore next */ []));
+    constructor() {
+        explicitEffect([this.valueViewModel], ([selectedOptions]) => {
+            const selectedValues = selectedOptions.map((option) => option.value);
+            if (!isEqual(selectedValues, this.ngf.field()().value())) {
+                this.ngf.field()().value.set(selectedValues);
+            }
+        });
+        explicitEffect([this.options], ([options]) => {
+            const values = options.map((option) => option.value);
+            const uniqueValues = new Set(values);
+            if (values.length !== uniqueValues.size) {
+                const duplicates = values.filter((value, index) => values.indexOf(value) !== index);
+                throw new Error(`Duplicate option values detected in mat-multi-checkbox: ${duplicates.join(', ')}`);
+            }
+        });
+    }
+    onCheckboxChange(option, checked) {
+        this.valueViewModel.update((currentOptions) => {
+            if (checked) {
+                return currentOptions.some((opt) => opt.value === option.value) ? currentOptions : [...currentOptions, option];
+            }
+            else {
+                return currentOptions.filter((opt) => opt.value !== option.value);
+            }
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: MatMultiCheckboxFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: MatMultiCheckboxFieldComponent, isStandalone: true, selector: "df-mat-multi-checkbox", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, props: { classPropertyName: "props", publicName: "props", isSignal: true, isRequired: false, transformFunction: null } }, hostDirectives: [{ directive: i1.NgForgeFieldHost }], ngImport: i0, template: `
+    @let f = ngf.field();
+    @let checkboxGroupId = ngf.key() + '-checkbox-group';
+    @let checked = checkedValuesMap();
+    @if (ngf.label(); as label) {
+      <div class="checkbox-group-label">{{ label | dynamicText | async }}</div>
+    }
+    <div
+      [id]="checkboxGroupId"
+      class="checkbox-group"
+      role="group"
+      [attr.aria-invalid]="ngf.ariaInvalid()"
+      [attr.aria-required]="ngf.ariaRequired()"
+      [attr.aria-describedby]="ngf.ariaDescribedBy()"
+    >
+      @for (option of options(); track option.value) {
+        <mat-checkbox
+          ngForgeControl="input[type='checkbox']"
+          [checked]="checked['' + option.value]"
+          [disabled]="f().disabled() || option.disabled"
+          [color]="props()?.color || 'primary'"
+          [labelPosition]="props()?.labelPosition || 'after'"
+          (change)="onCheckboxChange(option, $event.checked)"
+        >
+          {{ option.label | dynamicText | async }}
+        </mat-checkbox>
+      }
+    </div>
+    @if (ngf.errorsToDisplay()[0]; as error) {
+      <mat-error [id]="ngf.errorId()">{{ error.message }}</mat-error>
+    } @else if (props()?.hint; as hint) {
+      <div class="mat-hint" [id]="ngf.hintId()">{{ hint | dynamicText | async }}</div>
+    }
+  `, isInline: true, styles: [":host{display:block;width:100%}:host([hidden]){display:none!important}.df-mat-field{display:flex;flex-direction:column;gap:var(--df-field-gap, .5rem);width:100%}.df-mat-label{font-weight:var(--df-label-font-weight, 500);color:var(--df-label-color, inherit)}.df-mat-hint{color:var(--df-hint-color, rgba(0, 0, 0, .6));font-size:var(--df-hint-font-size, .875rem)}.df-mat-error{color:var(--df-error-color, #f44336);font-size:var(--df-error-font-size, .875rem)}\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: 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: MatMultiCheckboxFieldComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'df-mat-multi-checkbox', imports: [MatCheckbox, MatError, DynamicTextPipe, AsyncPipe, NgForgeControl], hostDirectives: [NgForgeFieldHost], template: `
+    @let f = ngf.field();
+    @let checkboxGroupId = ngf.key() + '-checkbox-group';
+    @let checked = checkedValuesMap();
+    @if (ngf.label(); as label) {
+      <div class="checkbox-group-label">{{ label | dynamicText | async }}</div>
+    }
+    <div
+      [id]="checkboxGroupId"
+      class="checkbox-group"
+      role="group"
+      [attr.aria-invalid]="ngf.ariaInvalid()"
+      [attr.aria-required]="ngf.ariaRequired()"
+      [attr.aria-describedby]="ngf.ariaDescribedBy()"
+    >
+      @for (option of options(); track option.value) {
+        <mat-checkbox
+          ngForgeControl="input[type='checkbox']"
+          [checked]="checked['' + option.value]"
+          [disabled]="f().disabled() || option.disabled"
+          [color]="props()?.color || 'primary'"
+          [labelPosition]="props()?.labelPosition || 'after'"
+          (change)="onCheckboxChange(option, $event.checked)"
+        >
+          {{ option.label | dynamicText | async }}
+        </mat-checkbox>
+      }
+    </div>
+    @if (ngf.errorsToDisplay()[0]; as error) {
+      <mat-error [id]="ngf.errorId()">{{ error.message }}</mat-error>
+    } @else if (props()?.hint; as hint) {
+      <div class="mat-hint" [id]="ngf.hintId()">{{ hint | dynamicText | async }}</div>
+    }
+  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:block;width:100%}:host([hidden]){display:none!important}.df-mat-field{display:flex;flex-direction:column;gap:var(--df-field-gap, .5rem);width:100%}.df-mat-label{font-weight:var(--df-label-font-weight, 500);color:var(--df-label-color, inherit)}.df-mat-hint{color:var(--df-hint-color, rgba(0, 0, 0, .6));font-size:var(--df-hint-font-size, .875rem)}.df-mat-error{color:var(--df-error-color, #f44336);font-size:var(--df-error-font-size, .875rem)}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], props: [{ type: i0.Input, args: [{ isSignal: true, alias: "props", required: false }] }] } });
+export { MatMultiCheckboxFieldComponent };
+//# sourceMappingURL=ng-forge-dynamic-forms-material-lazy-multi-checkbox.mjs.map

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

@@ -0,0 +1 @@

+ {"version":3,"file":"ng-forge-dynamic-forms-material-lazy-multi-checkbox.mjs","mappings":";;;;;;;;;AAsDc;;;;AAIH;;AAET;AAEI;;AAEF;IAKO;;;;;AAKP;;;AAGF;AACE;AACE;AAEA;AACE;;AAEJ;AAEA;AACE;AACA;;;AAIE;;AAEJ;;;;;AAMI;;;AAEA;;AAEJ;;;AAlDiB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA3CT","names":[],"ignoreList":[],"sources":["../../../../packages/dynamic-forms-material/src/lib/fields/multi-checkbox/mat-multi-checkbox.component.ts"],"sourcesContent":["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"]}

package/fesm2022/ng-forge-dynamic-forms-material-lazy-radio.mjs ADDED Viewed

@@ -0,0 +1,92 @@
+import * as i0 from '@angular/core';
+import { input, ChangeDetectionStrategy, Component } from '@angular/core';
+import { FormField } from '@angular/forms/signals';
+import { MatRadioGroup, MatRadioButton } from '@angular/material/radio';
+import * as i1 from '@ng-forge/dynamic-forms/integration';
+import { injectNgForgeField, NgForgeControl, DynamicTextPipe, NgForgeFieldHost } from '@ng-forge/dynamic-forms/integration';
+import { MatError } from '@angular/material/input';
+import { AsyncPipe } from '@angular/common';
+class MatRadioFieldComponent {
+    ngf = injectNgForgeField();
+    options = input([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
+    props = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "props" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: MatRadioFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: MatRadioFieldComponent, isStandalone: true, selector: "df-mat-radio", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, props: { classPropertyName: "props", publicName: "props", isSignal: true, isRequired: false, transformFunction: null } }, hostDirectives: [{ directive: i1.NgForgeFieldHost }], ngImport: i0, template: `
+    @let f = ngf.field();
+    @let radioGroupId = ngf.key() + '-radio-group';
+    @if (ngf.label()) {
+      <div class="radio-label">{{ ngf.label() | dynamicText | async }}</div>
+    }
+    <mat-radio-group
+      [id]="radioGroupId"
+      [formField]="f"
+      [attr.aria-invalid]="ngf.ariaInvalid()"
+      [attr.aria-required]="ngf.ariaRequired()"
+      [attr.aria-describedby]="ngf.ariaDescribedBy()"
+    >
+      @for (option of options(); track option.value) {
+        <mat-radio-button
+          ngForgeControl="input[type='radio']"
+          [value]="option.value"
+          [disabled]="option.disabled || false"
+          [color]="props()?.color || 'primary'"
+          [labelPosition]="props()?.labelPosition || 'after'"
+        >
+          {{ option.label | dynamicText | async }}
+        </mat-radio-button>
+      }
+    </mat-radio-group>
+    @if (ngf.errorsToDisplay()[0]; as error) {
+      <mat-error [id]="ngf.errorId()">{{ error.message }}</mat-error>
+    } @else if (props()?.hint; as hint) {
+      <div class="mat-hint" [id]="ngf.hintId()">{{ hint | dynamicText | async }}</div>
+    }
+  `, isInline: true, styles: [":host{display:block;width:100%}:host([hidden]){display:none!important}.df-mat-field{display:flex;flex-direction:column;gap:var(--df-field-gap, .5rem);width:100%}.df-mat-label{font-weight:var(--df-label-font-weight, 500);color:var(--df-label-color, inherit)}.df-mat-hint{color:var(--df-hint-color, rgba(0, 0, 0, .6));font-size:var(--df-hint-font-size, .875rem)}.df-mat-error{color:var(--df-error-color, #f44336);font-size:var(--df-error-font-size, .875rem)}\n"], dependencies: [{ kind: "directive", type: MatRadioGroup, selector: "mat-radio-group", inputs: ["color", "name", "labelPosition", "value", "selected", "disabled", "required", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioGroup"] }, { kind: "component", type: MatRadioButton, selector: "mat-radio-button", inputs: ["id", "name", "aria-label", "aria-labelledby", "aria-describedby", "disableRipple", "tabIndex", "checked", "value", "labelPosition", "disabled", "required", "color", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioButton"] }, { 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: MatRadioFieldComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'df-mat-radio', imports: [MatRadioGroup, MatRadioButton, FormField, MatError, DynamicTextPipe, AsyncPipe, NgForgeControl], hostDirectives: [NgForgeFieldHost], template: `
+    @let f = ngf.field();
+    @let radioGroupId = ngf.key() + '-radio-group';
+    @if (ngf.label()) {
+      <div class="radio-label">{{ ngf.label() | dynamicText | async }}</div>
+    }
+    <mat-radio-group
+      [id]="radioGroupId"
+      [formField]="f"
+      [attr.aria-invalid]="ngf.ariaInvalid()"
+      [attr.aria-required]="ngf.ariaRequired()"
+      [attr.aria-describedby]="ngf.ariaDescribedBy()"
+    >
+      @for (option of options(); track option.value) {
+        <mat-radio-button
+          ngForgeControl="input[type='radio']"
+          [value]="option.value"
+          [disabled]="option.disabled || false"
+          [color]="props()?.color || 'primary'"
+          [labelPosition]="props()?.labelPosition || 'after'"
+        >
+          {{ option.label | dynamicText | async }}
+        </mat-radio-button>
+      }
+    </mat-radio-group>
+    @if (ngf.errorsToDisplay()[0]; as error) {
+      <mat-error [id]="ngf.errorId()">{{ error.message }}</mat-error>
+    } @else if (props()?.hint; as hint) {
+      <div class="mat-hint" [id]="ngf.hintId()">{{ hint | dynamicText | async }}</div>
+    }
+  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:block;width:100%}:host([hidden]){display:none!important}.df-mat-field{display:flex;flex-direction:column;gap:var(--df-field-gap, .5rem);width:100%}.df-mat-label{font-weight:var(--df-label-font-weight, 500);color:var(--df-label-color, inherit)}.df-mat-hint{color:var(--df-hint-color, rgba(0, 0, 0, .6));font-size:var(--df-hint-font-size, .875rem)}.df-mat-error{color:var(--df-error-color, #f44336);font-size:var(--df-error-font-size, .875rem)}\n"] }]
+        }], propDecorators: { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], props: [{ type: i0.Input, args: [{ isSignal: true, alias: "props", required: false }] }] } });
+export { MatRadioFieldComponent };
+//# sourceMappingURL=ng-forge-dynamic-forms-material-lazy-radio.mjs.map

package/fesm2022/ng-forge-dynamic-forms-material-lazy-radio.mjs.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"ng-forge-dynamic-forms-material-lazy-radio.mjs","mappings":";;;;;;;;;AAmDc;;;;AAIH;;;AAJU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAJlB","names":[],"ignoreList":[],"sources":["../../../../packages/dynamic-forms-material/src/lib/fields/radio/mat-radio.component.ts"],"sourcesContent":["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"]}

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

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

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

@@ -0,0 +1 @@

+ {"version":3,"file":"ng-forge-dynamic-forms-material-lazy-select.mjs","mappings":";;;;;;;;;;;AA6Dc;;;;;AAMH;;AAEA;;AAEA;;AAEA;;AAEA;;AAET;;AAhBmB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAXlB","names":[],"ignoreList":[],"sources":["../../../../packages/dynamic-forms-material/src/lib/fields/select/mat-select.component.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, computed, inject, input } from '@angular/core';\nimport { FormField } from '@angular/forms/signals';\nimport { MatError, MatFormField, MatLabel } 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"]}