@ngx-json-forms/primeng 1.0.0

package/fesm2022/ngx-json-forms-primeng.mjs

@@ -0,0 +1,650 @@
+import * as i0 from '@angular/core';
+import { input, output, inject, signal, computed, effect, ChangeDetectionStrategy, Component } from '@angular/core';
+import * as i1 from '@angular/forms';
+import { FormGroup, FormArray, ReactiveFormsModule } from '@angular/forms';
+import { NgTemplateOutlet, NgComponentOutlet, NgOptimizedImage, NgClass } from '@angular/common';
+import * as i2 from 'primeng/inputtext';
+import { InputTextModule } from 'primeng/inputtext';
+import * as i3 from 'primeng/inputgroup';
+import { InputGroupModule } from 'primeng/inputgroup';
+import * as i4 from 'primeng/inputgroupaddon';
+import { InputGroupAddonModule } from 'primeng/inputgroupaddon';
+import * as i5 from 'primeng/floatlabel';
+import { FloatLabelModule } from 'primeng/floatlabel';
+import * as i6 from 'primeng/select';
+import { SelectModule } from 'primeng/select';
+import * as i7 from 'primeng/multiselect';
+import { MultiSelectModule } from 'primeng/multiselect';
+import * as i8 from 'primeng/cascadeselect';
+import { CascadeSelectModule } from 'primeng/cascadeselect';
+import * as i9 from 'primeng/autocomplete';
+import { AutoCompleteModule } from 'primeng/autocomplete';
+import * as i10 from 'primeng/fileupload';
+import { FileUploadModule } from 'primeng/fileupload';
+import * as i11 from 'primeng/button';
+import { ButtonModule } from 'primeng/button';
+import { DialogModule } from 'primeng/dialog';
+import * as i12 from 'primeng/divider';
+import { DividerModule } from 'primeng/divider';
+import * as i13 from 'primeng/password';
+import { PasswordModule } from 'primeng/password';
+import * as i14 from 'primeng/datepicker';
+import { DatePickerModule } from 'primeng/datepicker';
+import * as i15 from 'primeng/checkbox';
+import { CheckboxModule } from 'primeng/checkbox';
+import * as i16 from 'primeng/toggleswitch';
+import { ToggleSwitchModule } from 'primeng/toggleswitch';
+import * as i17 from 'primeng/textarea';
+import { TextareaModule } from 'primeng/textarea';
+import * as i18 from 'primeng/slider';
+import { SliderModule } from 'primeng/slider';
+import * as i19 from 'primeng/rating';
+import { RatingModule } from 'primeng/rating';
+import * as i20 from 'primeng/colorpicker';
+import { ColorPickerModule } from 'primeng/colorpicker';
+import * as i21 from 'primeng/radiobutton';
+import { RadioButtonModule } from 'primeng/radiobutton';
+import * as i22 from 'primeng/keyfilter';
+import { KeyFilterModule } from 'primeng/keyfilter';
+import * as i23 from 'primeng/editor';
+import { EditorModule } from 'primeng/editor';
+import { FormEngineService, ImageUploadService, FieldRegistry } from '@ngx-json-forms/core';
+
+class NgxJsonFormComponent {
+    // ─── Inputs / Outputs ────────────────────────────────────────────────────
+    formTitle = input('', ...(ngDevMode ? [{ debugName: "formTitle" }] : /* istanbul ignore next */ []));
+    fieldsInput = input([], ...(ngDevMode ? [{ debugName: "fieldsInput" }] : /* istanbul ignore next */ []));
+    /** Optional schema input — supersedes `fieldsInput` when provided. */
+    schema = input(null, ...(ngDevMode ? [{ debugName: "schema" }] : /* istanbul ignore next */ []));
+    /** Only render fields in the given step indices (used by the stepper wrapper). */
+    stepFields = input(null, ...(ngDevMode ? [{ debugName: "stepFields" }] : /* istanbul ignore next */ []));
+    formSubmit = output();
+    formChange = output();
+    // ─── Services ────────────────────────────────────────────────────────────
+    formService = inject(FormEngineService);
+    uploadService = inject(ImageUploadService);
+    fieldRegistry = inject(FieldRegistry);
+    // ─── Internal State ──────────────────────────────────────────────────────
+    fields = signal([], ...(ngDevMode ? [{ debugName: "fields" }] : /* istanbul ignore next */ []));
+    formGroup = signal(new FormGroup({}), ...(ngDevMode ? [{ debugName: "formGroup" }] : /* istanbul ignore next */ []));
+    ready = signal(false, ...(ngDevMode ? [{ debugName: "ready" }] : /* istanbul ignore next */ []));
+    /** Async-loaded options keyed by formControlName */
+    asyncOptions = signal({}, ...(ngDevMode ? [{ debugName: "asyncOptions" }] : /* istanbul ignore next */ []));
+    formStatusTick = signal(0, ...(ngDevMode ? [{ debugName: "formStatusTick" }] : /* istanbul ignore next */ []));
+    focusedMap = signal({}, ...(ngDevMode ? [{ debugName: "focusedMap" }] : /* istanbul ignore next */ []));
+    /** Subscriptions for async option re-loads; disposed on every rebuild. */
+    optionLoaderSubs = [];
+    // ─── Derived ─────────────────────────────────────────────────────────────
+    visibleFields = computed(() => {
+        this.formStatusTick();
+        this.formService.patchTick();
+        const values = this.formGroup().getRawValue();
+        const source = this.stepFields() ?? this.fields();
+        return source.filter((f) => {
+            if (f.config.attributes.visible === false)
+                return false;
+            return this.formService.evaluateShowWhen(f, values);
+        });
+    }, ...(ngDevMode ? [{ debugName: "visibleFields" }] : /* istanbul ignore next */ []));
+    /**
+     * Track patchTick so .valid (a plain object property) re-reads after every
+     * form change. Without this, the submit-button disabled binding stays stuck
+     * on the FormGroup's initial (invalid) state.
+     */
+    formValid = computed(() => {
+        this.formService.patchTick();
+        this.formStatusTick();
+        return this.formGroup().valid;
+    }, ...(ngDevMode ? [{ debugName: "formValid" }] : /* istanbul ignore next */ []));
+    placeholderVisibilityMap = {};
+    /**
+     * Resolve the placeholder string to render for a field. Safe for nested
+     * fields (repeater itemFields, group groupFields) whose formControlName
+     * isn't pre-registered in `placeholderVisibilityMap` — those fall back to
+     * the raw `field.placeholder` since they don't participate in floatLabel.
+     */
+    placeholderFor(field) {
+        const name = field.formControlName;
+        if (!name)
+            return field.placeholder ?? null;
+        const sig = this.placeholderVisibilityMap[name];
+        if (!sig)
+            return field.placeholder ?? null;
+        return sig() ? (field.placeholder ?? null) : null;
+    }
+    errorMap = computed(() => {
+        this.formStatusTick();
+        this.formService.patchTick();
+        const errors = {};
+        const group = this.formGroup();
+        if (!group)
+            return errors;
+        for (const field of this.fields()) {
+            if (!field.formControlName)
+                continue;
+            const control = group.get(field.formControlName);
+            errors[field.formControlName] = this.formService.resolveError(field, control);
+        }
+        return errors;
+    }, ...(ngDevMode ? [{ debugName: "errorMap" }] : /* istanbul ignore next */ []));
+    // ─── Lifecycle ───────────────────────────────────────────────────────────
+    constructor() {
+        effect(() => {
+            this.ready.set(false);
+            const schemaIn = this.schema();
+            const incoming = schemaIn?.fields
+                ? schemaIn.fields
+                : schemaIn?.steps
+                    ? schemaIn.steps.flatMap((s) => s.fields)
+                    : this.fieldsInput();
+            if (!incoming.length)
+                return;
+            const sorted = [...incoming].sort((a, b) => {
+                const oa = a.layout?.order ?? Number.MAX_SAFE_INTEGER;
+                const ob = b.layout?.order ?? Number.MAX_SAFE_INTEGER;
+                return oa - ob;
+            });
+            this.fields.set(sorted);
+            this.buildForm(sorted, schemaIn ?? undefined);
+        });
+        effect(() => {
+            this.formService.patchTick();
+            if (!this.ready())
+                return;
+            this.fields.set(this.formService.fields());
+            this.uploadService.syncPreviews(this.fields(), this.formGroup());
+        });
+    }
+    // ─── Form Builder ────────────────────────────────────────────────────────
+    buildForm(fields, schema) {
+        // Tear down anything tied to the previous form group before we rebuild.
+        this.disposeOptionLoaderSubs();
+        this.placeholderVisibilityMap = {};
+        const group = this.formService.buildFormGroup(fields);
+        this.formGroup.set(group);
+        // Register synchronously so prior subs are disposed BEFORE we add new
+        // computed-field listeners below — otherwise register() would wipe them.
+        this.formService.register(group, fields, schema);
+        for (const field of fields) {
+            if (!field.formControlName)
+                continue;
+            this.placeholderVisibilityMap[field.formControlName] = computed(() => {
+                if (!field.floatLabel)
+                    return true;
+                const control = this.formGroup()?.get(field.formControlName);
+                if (!control)
+                    return false;
+                const v = control.value;
+                const hasValue = v !== null && v !== undefined && v !== '' && (!Array.isArray(v) || v.length > 0);
+                return this.focusedMap()[field.formControlName] === true && !hasValue;
+            });
+        }
+        if (schema?.crossFieldValidators?.length) {
+            this.formService.applyCrossFieldValidators(group, schema.crossFieldValidators);
+        }
+        this.formService.setupComputedFields(group, fields);
+        // Bootstrap async options for select-like fields
+        for (const f of fields) {
+            const a = f.config.attributes;
+            if (a.optionsLoader && f.formControlName) {
+                void this.loadAsyncOptions(f);
+                for (const dep of a.optionsDependsOn ?? []) {
+                    const depCtrl = group.get(dep);
+                    if (!depCtrl)
+                        continue;
+                    this.optionLoaderSubs.push(depCtrl.valueChanges.subscribe(() => void this.loadAsyncOptions(f)));
+                }
+            }
+        }
+        queueMicrotask(() => {
+            this.ready.set(true);
+            this.uploadService.syncPreviews(this.fields(), this.formGroup());
+        });
+    }
+    disposeOptionLoaderSubs() {
+        for (const s of this.optionLoaderSubs)
+            s.unsubscribe();
+        this.optionLoaderSubs = [];
+    }
+    async loadAsyncOptions(field) {
+        const a = field.config.attributes;
+        if (!a.optionsLoader || !field.formControlName)
+            return;
+        const formValue = this.formGroup().getRawValue();
+        const context = {};
+        for (const dep of a.optionsDependsOn ?? [])
+            context[dep] = formValue[dep];
+        this.formService.updateFieldAttributes(field.formControlName, { loading: true });
+        const opts = await this.formService.resolveDependentOptions(a.optionsLoader, context, formValue);
+        this.asyncOptions.update((m) => ({ ...m, [field.formControlName]: opts }));
+        this.formService.updateFieldAttributes(field.formControlName, { loading: false, options: opts });
+    }
+    // ─── Field Registry resolver (used by custom inputType) ──────────────────
+    customRenderer(field) {
+        return this.fieldRegistry.getRenderer(field.config.attributes.inputType);
+    }
+    customRendererInputs(field) {
+        return { field, formGroup: this.formGroup() };
+    }
+    // ─── Date helpers ────────────────────────────────────────────────────────
+    minDateFor(field) {
+        const a = field.config.attributes;
+        if (a.minDate)
+            return a.minDate;
+        if (a.minToday) {
+            const d = new Date();
+            d.setDate(d.getDate() + (a.minOffsetDays ?? 0));
+            return d;
+        }
+        return undefined;
+    }
+    maxDateFor(field) {
+        const a = field.config.attributes;
+        if (a.maxDate)
+            return a.maxDate;
+        if (a.maxToday) {
+            const d = new Date();
+            d.setDate(d.getDate() + (a.maxOffsetDays ?? 0));
+            return d;
+        }
+        return undefined;
+    }
+    // ─── Effective options resolver ──────────────────────────────────────────
+    optionsFor(field) {
+        const a = field.config.attributes;
+        if (field.formControlName && this.asyncOptions()[field.formControlName]) {
+            return this.asyncOptions()[field.formControlName];
+        }
+        return a.options ?? [];
+    }
+    // ─── Repeater helpers ────────────────────────────────────────────────────
+    getArray(name) {
+        const c = this.formGroup().get(name);
+        return c instanceof FormArray ? c : null;
+    }
+    addRepeaterRow(field) {
+        if (!field.formControlName)
+            return;
+        const arr = this.getArray(field.formControlName);
+        if (!arr)
+            return;
+        if (field.config.attributes.maxRows && arr.length >= field.config.attributes.maxRows)
+            return;
+        this.formService.addArrayItem(field.formControlName);
+        this.triggerTick();
+    }
+    removeRepeaterRow(field, i) {
+        if (!field.formControlName)
+            return;
+        const arr = this.getArray(field.formControlName);
+        if (!arr)
+            return;
+        if (field.config.attributes.minRows && arr.length <= field.config.attributes.minRows)
+            return;
+        this.formService.removeArrayItem(field.formControlName, i);
+        this.triggerTick();
+    }
+    rowGroup(field, i) {
+        return this.getArray(field.formControlName)?.at(i);
+    }
+    /**
+     * DOM id for a field's input element. Scoped by row index when the field
+     * lives inside a repeater so the same `formControlName` across rows
+     * doesn't produce duplicate ids (HTML spec violation + breaks
+     * <label for>, aria-describedby, and document.querySelector lookups).
+     */
+    inputId(field, suffix) {
+        const base = (field.formControlName ?? '') + 'Id';
+        return suffix !== undefined && suffix !== null ? `${base}_${suffix}` : base;
+    }
+    /**
+     * Resolve the validation message for a single field inside a repeater row.
+     * Mirrors errorMap() but for FormGroup rows that aren't tracked in the
+     * top-level fields signal.
+     */
+    resolveRowError(row, sub) {
+        this.formService.patchTick();
+        if (!sub.formControlName)
+            return null;
+        const ctrl = row.get(sub.formControlName);
+        return this.formService.resolveError(sub, ctrl);
+    }
+    // ─── Events ──────────────────────────────────────────────────────────────
+    /** Central event handler. Accepts `unknown` because PrimeNG emits custom event objects. */
+    async onEvent(field, event, eventType) {
+        this.triggerTick();
+        const rawType = eventType ?? event?.type;
+        let type = rawType;
+        if (type === 'focus')
+            this.focusedMap.update((m) => ({ ...m, [field.formControlName]: true }));
+        if (type === 'blur')
+            this.focusedMap.update((m) => ({ ...m, [field.formControlName]: false }));
+        if (type === 'uploadHandler') {
+            await this.uploadService.handleUpload(field, event, this.formGroup(), this.formService, () => this.emitChange(field, 'uploadHandler', event));
+            return;
+        }
+        if (type === 'inputKeydown' && field.config.attributes.inputType === 'autocomplete') {
+            const ke = event;
+            if (ke.key === 'Enter') {
+                const inputValue = ke.target.value?.trim();
+                if (inputValue) {
+                    const tag = {
+                        [field.config.attributes.optionLabel]: inputValue,
+                        [field.config.attributes.optionValue]: inputValue,
+                    };
+                    const existing = [...(field.config.attributes.suggestions ?? []), tag];
+                    this.formService.updateFieldAttributes(field.formControlName, { suggestions: existing });
+                    this.formGroup().get(field.formControlName)?.setValue(existing);
+                    type = 'add';
+                }
+            }
+        }
+        if (type === 'unselect' && field.config.attributes.inputType === 'autocomplete') {
+            const evtValue = event.value;
+            const remaining = (field.config.attributes.suggestions ?? []).filter((v) => evtValue !== v);
+            this.formService.updateFieldAttributes(field.formControlName, { suggestions: remaining });
+            this.formGroup().get(field.formControlName)?.setValue(remaining);
+        }
+        const allowed = field.config.attributes.acceptedEvents ?? [];
+        if (!allowed.includes(type))
+            return;
+        const payload = this.buildPayload(field, type, event);
+        if (type === 'click') {
+            const role = field.config.attributes.buttonRole;
+            if (role === 'reset') {
+                this.formService.reset();
+                this.formChange.emit(payload);
+                return;
+            }
+            if (role === 'cancel' || role === 'custom') {
+                this.formChange.emit(payload);
+                return;
+            }
+            if (!this.formValid())
+                this.formGroup().markAllAsTouched();
+            this.formSubmit.emit({ ...payload, values: this.formService.buildSubmitPayload() });
+        }
+        else {
+            this.formChange.emit(payload);
+        }
+    }
+    removeImage(field, image) {
+        this.uploadService.removeImage(field, image, this.formGroup(), this.formService, () => this.emitChange(field, 'uploadHandler', new Event('remove')));
+    }
+    // ─── Helpers ─────────────────────────────────────────────────────────────
+    buildPayload(field, type, originalEvent) {
+        return {
+            field,
+            values: this.formGroup().getRawValue(),
+            valid: this.formValid(),
+            type,
+            originalEvent,
+        };
+    }
+    emitChange(field, type, event) {
+        this.formChange.emit(this.buildPayload(field, type, event));
+    }
+    triggerTick() {
+        this.formStatusTick.update((v) => v + 1);
+    }
+    getControl(name) {
+        return this.formGroup().get(name);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: NgxJsonFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", type: NgxJsonFormComponent, isStandalone: true, selector: "ngx-json-form", inputs: { formTitle: { classPropertyName: "formTitle", publicName: "formTitle", isSignal: true, isRequired: false, transformFunction: null }, fieldsInput: { classPropertyName: "fieldsInput", publicName: "fieldsInput", isSignal: true, isRequired: false, transformFunction: null }, schema: { classPropertyName: "schema", publicName: "schema", isSignal: true, isRequired: false, transformFunction: null }, stepFields: { classPropertyName: "stepFields", publicName: "stepFields", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { formSubmit: "formSubmit", formChange: "formChange" }, ngImport: i0, template: "@if (formTitle().length) {\n  <div class=\"ngx-form-title\">{{ formTitle() }}</div>\n}\n\n@if (ready()) {\n  <form [formGroup]=\"formGroup()\" class=\"ngx-form-grid\">\n    @for (field of visibleFields(); track field.formControlName ?? $index) {\n      <div\n        [class]=\"\n          'ngx-col-' +\n          (field.layout?.columnSpan ?? 12) +\n          ' ' +\n          (field.layout?.wrapperClass ?? '')\n        \"\n        [style]=\"field.layout?.wrapperStyle ?? {}\"\n        [style.display]=\"field.config.attributes.isHidden ? 'none' : 'block'\"\n      >\n        <!-- Float Label wrapper -->\n        @if (field.floatLabel) {\n          <p-floatlabel [variant]=\"field.floatVariant ?? 'on'\">\n            <div class=\"ngx-field-inner\">\n              <ng-container\n                [ngTemplateOutlet]=\"fieldTpl\"\n                [ngTemplateOutletContext]=\"{ $implicit: field, formGroup: formGroup() }\"\n              />\n            </div>\n            <label\n              [attr.for]=\"field.formControlName + 'Id'\"\n              [attr.id]=\"field.formControlName + 'Label'\"\n            >\n              @if (field.labelIconPos === 'left') {\n                <i [class]=\"field.labelIcon\"></i>\n              }\n              {{ field.label }}\n              @if (field.labelIconPos === 'right') {\n                <i [class]=\"field.labelIcon\"></i>\n              }\n              @if (field.validations?.rules?.required) {\n                <span class=\"ngx-required\">*</span>\n              }\n            </label>\n          </p-floatlabel>\n        }\n\n        <!-- Toggle card layout -->\n        @else if (\n          field.config.attributes.cardLayout &&\n          field.config.attributes.inputType === 'toggle'\n        ) {\n          <div\n            class=\"ngx-toggle-card\"\n            [style.--toggle-color]=\"field.config.attributes.cardIconColor\"\n          >\n            <div\n              class=\"ngx-toggle-card-icon\"\n              [style.background]=\"\n                field.config.attributes.cardIconBg ??\n                'var(--p-primary-50, #eff6ff)'\n              \"\n              [style.color]=\"\n                field.config.attributes.cardIconColor ??\n                'var(--p-primary-500, #3b82f6)'\n              \"\n            >\n              <i [class]=\"field.config.attributes.cardIcon ?? 'pi pi-bell'\"></i>\n            </div>\n            <div class=\"ngx-toggle-card-body\">\n              <span class=\"ngx-toggle-card-label\">\n                {{ field.label }}\n                @if (field.validations?.rules?.required) {\n                  <span class=\"ngx-required\">*</span>\n                }\n              </span>\n              @if (field.config.attributes.info?.length) {\n                <span\n                  class=\"ngx-toggle-card-desc\"\n                  [innerHTML]=\"field.config.attributes.info\"\n                ></span>\n              }\n            </div>\n            <p-toggleswitch\n              [formControlName]=\"field.formControlName!\"\n              [inputId]=\"field.formControlName + 'Id'\"\n              (onChange)=\"onEvent(field, $event, 'change')\"\n            />\n          </div>\n          <!--\n            Always reserve one line of space for the error so the row height\n            doesn't change when validation fires (otherwise sibling fields\n            jump down when the error appears).\n          -->\n          @if (field.validations?.rules) {\n            <small\n              class=\"ngx-error\"\n              [class.ngx-error--placeholder]=\"!errorMap()[field.formControlName!]\"\n              [attr.id]=\"field.formControlName + 'Err'\"\n            >{{ errorMap()[field.formControlName!] || '\u00A0' }}</small>\n          }\n        }\n\n        <!-- Normal label wrapper -->\n        @else {\n          @if (field.label && field.label.length) {\n            <label\n              class=\"ngx-field-label\"\n              [attr.for]=\"field.formControlName + 'Id'\"\n              [attr.id]=\"field.formControlName + 'Label'\"\n            >\n              @if (field.labelIconPos === 'left') {\n                <i [class]=\"field.labelIcon\"></i>\n              }\n              {{ field.label }}\n              @if (field.labelIconPos === 'right') {\n                <i [class]=\"field.labelIcon\"></i>\n              }\n              @if (field.validations?.rules?.required) {\n                <span class=\"ngx-required\">*</span>\n              }\n            </label>\n          }\n          <div class=\"ngx-field-inner\">\n            <ng-container\n              [ngTemplateOutlet]=\"fieldTpl\"\n              [ngTemplateOutletContext]=\"{ $implicit: field, formGroup: formGroup() }\"\n            />\n          </div>\n\n          <!--\n            Validation error \u2014 always reserve one line of space (placeholder\n            class makes it invisible when there's no error) so triggering a\n            required/pattern message doesn't push the row below it down.\n          -->\n          @if (field.validations?.rules) {\n            <small\n              class=\"ngx-error\"\n              [class.ngx-error--placeholder]=\"!errorMap()[field.formControlName!]\"\n              [attr.id]=\"field.formControlName + 'Err'\"\n            >{{ errorMap()[field.formControlName!] || '\u00A0' }}</small>\n          }\n\n          <!-- Info / hint -->\n          @if (field.config.attributes.info?.length) {\n            <small\n              class=\"ngx-hint\"\n              [attr.id]=\"field.formControlName + 'Hint'\"\n              [innerHTML]=\"field.config.attributes.info\"\n            ></small>\n          }\n        }\n      </div>\n    }\n  </form>\n}\n\n<!-- \u2500\u2500\u2500 Field Renderer Template \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n<!--\n  `formGroup` is passed in via the template context so each rendering site\n  binds the right group: the root FormGroup for top-level fields, the row's\n  FormGroup for repeater rows. Hard-coding `formGroup()` here would override\n  row-level bindings and route nested formControlName lookups to the root,\n  which is the bug we're fixing.\n\n  Known issue: during initial CD passes Angular logs NG01050 spam because\n  the FormGroup directive on this ng-container materialises after children\n  formControlName directives query their parent ControlContainer. Bindings\n  recover and form values flow correctly afterwards. Cleaner fix would be\n  to avoid the ngTemplateOutlet + context + nested formGroup combination\n  altogether (e.g. inline the @switch at each call site).\n-->\n<ng-template #fieldTpl let-field let-fg=\"formGroup\" let-idSuffix=\"idSuffix\">\n  <ng-container [formGroup]=\"fg\">\n    @switch (field.config.attributes.inputType) {\n      <!-- \u2500\u2500 Custom field (registry) \u2500\u2500 -->\n      @case (customRenderer(field) ? field.config.attributes.inputType : '__never__') {\n        <ng-container\n          *ngComponentOutlet=\"customRenderer(field)!; inputs: customRendererInputs(field)\"\n        />\n      }\n\n      <!-- \u2500\u2500 Group (nested FormGroup) \u2500\u2500 -->\n      @case ('group') {\n        <fieldset\n          class=\"ngx-field-group\"\n          [attr.formGroupName]=\"field.formControlName\"\n        >\n          @for (sub of field.config.attributes.groupFields ?? []; track sub.formControlName ?? $index) {\n            <div class=\"ngx-field-group-row\">\n              <ng-container\n                [ngTemplateOutlet]=\"fieldTpl\"\n                [ngTemplateOutletContext]=\"{ $implicit: sub, formGroup: formGroup() }\"\n              />\n            </div>\n          }\n        </fieldset>\n      }\n\n      <!-- \u2500\u2500 Repeater (FormArray) \u2500\u2500 -->\n      @case ('repeater') {\n        <div class=\"ngx-repeater\">\n          @for (row of getArray(field.formControlName!)?.controls ?? []; track $index) {\n            @let rowIndex = $index;\n            <div class=\"ngx-repeater-row\" [formGroup]=\"$any(row)\">\n              <div class=\"ngx-repeater-row-fields\">\n                @for (sub of field.config.attributes.itemFields ?? []; track sub.formControlName ?? $index) {\n                  <div\n                    [class]=\"\n                      'ngx-col-' + (sub.layout?.columnSpan ?? 12)\n                    \"\n                  >\n                    @if (sub.label) {\n                      <label\n                        class=\"ngx-field-label\"\n                        [attr.for]=\"inputId(sub, rowIndex)\"\n                      >\n                        {{ sub.label }}\n                        @if (sub.validations?.rules?.required) {\n                          <span class=\"ngx-required\">*</span>\n                        }\n                      </label>\n                    }\n                    <ng-container\n                      [ngTemplateOutlet]=\"fieldTpl\"\n                      [ngTemplateOutletContext]=\"{ $implicit: sub, formGroup: $any(row), idSuffix: rowIndex }\"\n                    />\n                    @if (sub.validations?.rules && sub.formControlName) {\n                      <small\n                        class=\"ngx-error\"\n                        [class.ngx-error--placeholder]=\"!resolveRowError($any(row), sub)\"\n                      >{{ resolveRowError($any(row), sub) || '\u00A0' }}</small>\n                    }\n                  </div>\n                }\n              </div>\n              <button\n                type=\"button\"\n                class=\"ngx-repeater-remove\"\n                pButton\n                [icon]=\"'pi pi-trash'\"\n                [rounded]=\"true\"\n                [text]=\"true\"\n                (click)=\"removeRepeaterRow(field, $index)\"\n              ></button>\n            </div>\n          }\n          <button\n            pButton\n            type=\"button\"\n            class=\"ngx-repeater-add\"\n            [icon]=\"'pi pi-plus'\"\n            [label]=\"field.config.attributes.addLabel ?? 'Add row'\"\n            [text]=\"true\"\n            (click)=\"addRepeaterRow(field)\"\n          ></button>\n        </div>\n      }\n\n      <!-- \u2500\u2500 Dependent / Cascading Dropdown \u2500\u2500 -->\n      @case ('dependentDropdown') {\n        <p-cascadeselect\n          [id]=\"inputId(field, idSuffix)\"\n          [inputId]=\"inputId(field, idSuffix)\"\n          [formControlName]=\"field.formControlName!\"\n          [options]=\"$any(optionsFor(field))\"\n          [optionLabel]=\"field.config.attributes.optionLabel ?? 'label'\"\n          [optionValue]=\"field.config.attributes.optionValue ?? 'value'\"\n          [optionGroupLabel]=\"field.config.attributes.optionGroupLabel ?? 'label'\"\n          [optionGroupChildren]=\"\n            $any(field.config.attributes.optionGroupChildren ?? ['children'])\n          \"\n          [placeholder]=\"field.placeholder ?? ''\"\n          appendTo=\"body\"\n          (onChange)=\"onEvent(field, $event, 'change')\"\n          (onShow)=\"onEvent(field, $event, 'show')\"\n          (onHide)=\"onEvent(field, $event, 'hide')\"\n        />\n      }\n\n      <!-- \u2500\u2500 Editor (rich text) \u2500\u2500 -->\n      @case ('editor') {\n        <p-editor\n          [formControlName]=\"field.formControlName!\"\n          [style]=\"{ height: (field.config.attributes['height'] ?? '180px') }\"\n          (onTextChange)=\"onEvent(field, $event, 'change')\"\n        ></p-editor>\n      }\n\n      <!-- \u2500\u2500 Confirm password \u2500\u2500 -->\n      @case ('confirmPassword') {\n        <p-password\n          [inputId]=\"inputId(field, idSuffix)\"\n          [formControlName]=\"field.formControlName!\"\n          [feedback]=\"false\"\n          [toggleMask]=\"field.config.attributes.toggleMask ?? true\"\n          [placeholder]=\"field.placeholder ?? ''\"\n          appendTo=\"body\"\n          (onBlur)=\"onEvent(field, $event, 'blur')\"\n        />\n      }\n\n      <!-- \u2500\u2500 File Upload \u2500\u2500 -->\n      @case ('fileUpload') {\n        <div>\n          <div\n            [class]=\"field.config.attributes.isInline ? 'ngx-file-inline' : ''\"\n          >\n            <p-fileUpload\n              mode=\"basic\"\n              customUpload\n              [id]=\"inputId(field, idSuffix)\"\n              [multiple]=\"field.config.attributes.multiple\"\n              [chooseIcon]=\"field.config.attributes.chooseIcon ?? 'pi pi-upload'\"\n              [accept]=\"field.config.attributes.accept ?? 'image/*'\"\n              [maxFileSize]=\"field.config.attributes.maxFileSize ?? 1000000\"\n              [auto]=\"true\"\n              [chooseLabel]=\"field.config.attributes.chooseLabel ?? 'Upload'\"\n              (uploadHandler)=\"onEvent(field, $event, 'uploadHandler')\"\n            />\n\n            @if (uploadService.imagePreviews()[field.formControlName!]?.length) {\n              <div class=\"ngx-image-list\">\n                @for (\n                  image of uploadService.imagePreviews()[field.formControlName!];\n                  let i = $index;\n                  track i\n                ) {\n                  <div class=\"ngx-image-card\">\n                    <i\n                      class=\"pi pi-times ngx-image-remove\"\n                      (click)=\"removeImage(field, image)\"\n                    ></i>\n                    <div class=\"ngx-image-wrapper\">\n                      @if (!uploadService.isBase64(image)) {\n                        <img\n                          fill\n                          sizes=\"100\"\n                          [ngSrc]=\"image\"\n                          (load)=\"uploadService.onLoad(image)\"\n                          (error)=\"uploadService.onLoad(image)\"\n                          [class.loading]=\"uploadService.isLoading(image)\"\n                          [class.loaded]=\"!uploadService.isLoading(image)\"\n                          class=\"ngx-preview-img\"\n                          alt=\"preview\"\n                        />\n                      } @else {\n                        <img\n                          fill\n                          sizes=\"100\"\n                          [src]=\"image\"\n                          (load)=\"uploadService.onLoad(image)\"\n                          (error)=\"uploadService.onLoad(image)\"\n                          [class.loading]=\"uploadService.isLoading(image)\"\n                          [class.loaded]=\"!uploadService.isLoading(image)\"\n                          class=\"ngx-preview-img\"\n                          alt=\"preview\"\n                        />\n                      }\n                      @if (uploadService.isLoading(image)) {\n                        <div class=\"ngx-img-skeleton\"></div>\n                      }\n                    </div>\n                  </div>\n                }\n              </div>\n            }\n          </div>\n        </div>\n      }\n\n      <!-- \u2500\u2500 Static Text \u2500\u2500 -->\n      @case ('staticText') {\n        <span\n          (click)=\"onEvent(field, $event, 'staticTextClick')\"\n          [innerHTML]=\"field.config.attributes.value\"\n        ></span>\n      }\n\n      <!-- \u2500\u2500 Divider \u2500\u2500 -->\n      @case ('divider') {\n        <p-divider\n          [layout]=\"field.config.attributes.dividerLayout\"\n          [type]=\"field.config.attributes.dividerType\"\n          [align]=\"field.config.attributes.dividerAlign\"\n        >\n          @if (field.config.attributes.value) {\n            <span [innerHTML]=\"field.config.attributes.value\"></span>\n          }\n        </p-divider>\n      }\n\n      <!-- \u2500\u2500 Button \u2500\u2500 -->\n      @case ('button') {\n        <div class=\"ngx-btn-wrap\">\n          <button\n            pButton\n            type=\"button\"\n            [id]=\"inputId(field, idSuffix)\"\n            [label]=\"field.btnLabel ?? ''\"\n            [icon]=\"field.config.attributes.icon ?? ''\"\n            [iconPos]=\"field.config.attributes.iconPosition ?? 'left'\"\n            [tabindex]=\"field.tabIndex ?? 0\"\n            [disabled]=\"\n              field.config.attributes.buttonRole === 'submit' ||\n              field.config.attributes.type === 'submit'\n                ? !formValid()\n                : !!field.config.attributes.disabled\n            \"\n            [class.p-button-outlined]=\"\n              field.config.attributes.variant === 'secondary'\n            \"\n            [class.p-button-text]=\"field.config.attributes.text === true\"\n            [class.p-button-rounded]=\"field.config.attributes.rounded === true\"\n            [class.p-button-sm]=\"field.config.attributes.size === 'sm'\"\n            [class.p-button-lg]=\"field.config.attributes.size === 'lg'\"\n            (click)=\"onEvent(field, $event)\"\n          ></button>\n        </div>\n      }\n\n      <!-- \u2500\u2500 Everything else inside p-inputgroup \u2500\u2500 -->\n      @default {\n        <p-inputgroup>\n          @if (\n            field.config.attributes.fieldPos === 'left' &&\n            field.config.attributes.fieldIcon\n          ) {\n            <p-inputgroup-addon>\n              <i [class]=\"field.config.attributes.fieldIcon\">\n                {{ field.config.attributes.fieldIconText ?? '' }}\n              </i>\n            </p-inputgroup-addon>\n          }\n\n          @switch (field.config.attributes.inputType) {\n            <!-- text / email / number / url -->\n            @case ('text') {\n              <input\n                pInputText\n                [id]=\"inputId(field, idSuffix)\"\n                [formControlName]=\"field.formControlName!\"\n                [type]=\"field.config.attributes.type ?? 'text'\"\n                [tabindex]=\"field.tabIndex ?? 0\"\n                [attr.placeholder]=\"placeholderFor(field)\"\n                [attr.aria-describedby]=\"\n                  (errorMap()[field.formControlName!] ? field.formControlName + 'Err ' : '') +\n                  (field.config.attributes.info ? field.formControlName + 'Hint' : '')\n                \"\n                [pKeyFilter]=\"field.config.attributes.keyfilter\"\n                (change)=\"onEvent(field, $event)\"\n                (input)=\"onEvent(field, $event)\"\n                (focus)=\"onEvent(field, $event)\"\n                (blur)=\"onEvent(field, $event)\"\n                (keyup)=\"onEvent(field, $event)\"\n                (keydown)=\"onEvent(field, $event)\"\n                (keypress)=\"onEvent(field, $event)\"\n              />\n            }\n\n            <!-- password -->\n            @case ('password') {\n              <p-password\n                [inputId]=\"inputId(field, idSuffix)\"\n                [formControlName]=\"field.formControlName!\"\n                [feedback]=\"field.config.attributes.feedback\"\n                [toggleMask]=\"field.config.attributes.toggleMask\"\n                [placeholder]=\"field.config.attributes.placeholder ?? ''\"\n                appendTo=\"body\"\n                (onBlur)=\"onEvent(field, $event, 'blur')\"\n                (onFocus)=\"onEvent(field, $event, 'focus')\"\n              >\n                @if (field.config.attributes.templateHeader) {\n                  <ng-container\n                    [ngTemplateOutlet]=\"field.config.attributes.templateHeader\"\n                  />\n                }\n                @if (field.config.attributes.templateFooter) {\n                  <ng-container\n                    [ngTemplateOutlet]=\"field.config.attributes.templateFooter\"\n                  />\n                }\n              </p-password>\n            }\n\n            <!-- textarea -->\n            @case ('textarea') {\n              <textarea\n                pTextarea\n                [id]=\"inputId(field, idSuffix)\"\n                [formControlName]=\"field.formControlName!\"\n                [rows]=\"field.config.attributes.rows ?? 3\"\n                [cols]=\"field.config.attributes.cols ?? 30\"\n                [autoResize]=\"field.config.attributes.autoResize\"\n                [placeholder]=\"field.config.attributes.placeholder ?? ''\"\n                (change)=\"onEvent(field, $event)\"\n                (input)=\"onEvent(field, $event)\"\n                (focus)=\"onEvent(field, $event)\"\n                (blur)=\"onEvent(field, $event)\"\n              >\n              </textarea>\n            }\n\n            <!-- select -->\n            @case ('select') {\n              <p-select\n                [id]=\"inputId(field, idSuffix)\"\n                [inputId]=\"inputId(field, idSuffix)\"\n                [attr.aria-labelledby]=\"field.formControlName + 'Label'\"\n                [formControlName]=\"field.formControlName!\"\n                [options]=\"$any(optionsFor(field))\"\n                [optionLabel]=\"field.config.attributes.optionLabel\"\n                [optionValue]=\"field.config.attributes.optionValue\"\n                [placeholder]=\"placeholderFor(field) ?? ''\"\n                [showClear]=\"field.config.attributes.showClear\"\n                [filter]=\"field.config.attributes.filter\"\n                [filterBy]=\"field.config.attributes.filterBy\"\n                [filterPlaceholder]=\"field.config.attributes.filterPlaceholder\"\n                [loading]=\"field.config.attributes.loading\"\n                [virtualScroll]=\"field.config.attributes.virtualScroll\"\n                [virtualScrollItemSize]=\"\n                  field.config.attributes.virtualScrollItemSize\n                \"\n                [lazy]=\"field.config.attributes.lazy\"\n                [emptyMessage]=\"field.config.attributes.emptyMessage\"\n                appendTo=\"body\"\n                (onChange)=\"onEvent(field, $event, 'change')\"\n                (onFocus)=\"onEvent(field, $event, 'focus')\"\n                (onBlur)=\"onEvent(field, $event, 'blur')\"\n                (onShow)=\"onEvent(field, $event, 'show')\"\n                (onHide)=\"onEvent(field, $event, 'hide')\"\n                (onClear)=\"onEvent(field, $event, 'clear')\"\n                (onLazyLoad)=\"onEvent(field, $event, 'lazyLoad')\"\n              >\n                @if (\n                  field.config.attributes.isTemplate &&\n                  field.config.attributes.template\n                ) {\n                  <ng-container\n                    [ngTemplateOutlet]=\"field.config.attributes.template\"\n                  />\n                }\n              </p-select>\n            }\n\n            <!-- multiSelect -->\n            @case ('multiSelect') {\n              <p-multiselect\n                [id]=\"inputId(field, idSuffix)\"\n                [inputId]=\"inputId(field, idSuffix)\"\n                [formControlName]=\"field.formControlName!\"\n                [options]=\"$any(optionsFor(field))\"\n                [optionLabel]=\"field.config.attributes.optionLabel\"\n                [optionValue]=\"field.config.attributes.optionValue\"\n                [placeholder]=\"field.config.attributes.placeholder ?? ''\"\n                [filter]=\"field.config.attributes.filter\"\n                [showClear]=\"field.config.attributes.showClear\"\n                [selectionLimit]=\"field.config.attributes.selectionLimit\"\n                [display]=\"field.config.attributes.display\"\n                [loading]=\"field.config.attributes.loading\"\n                [virtualScroll]=\"field.config.attributes.virtualScroll\"\n                [virtualScrollItemSize]=\"\n                  field.config.attributes.virtualScrollItemSize\n                \"\n                [scrollHeight]=\"field.config.attributes.scrollHeight\"\n                appendTo=\"body\"\n                (onChange)=\"onEvent(field, $event, 'change')\"\n                (onFocus)=\"onEvent(field, $event, 'focus')\"\n                (onBlur)=\"onEvent(field, $event, 'blur')\"\n                (onClear)=\"onEvent(field, $event, 'clear')\"\n                (onHide)=\"onEvent(field, $event, 'hide')\"\n                (onRemove)=\"onEvent(field, $event, 'remove')\"\n                (onSelectAll)=\"onEvent(field, $event, 'select')\"\n              >\n              </p-multiselect>\n            }\n\n            <!-- autocomplete -->\n            @case ('autocomplete') {\n              <p-autocomplete\n                [id]=\"inputId(field, idSuffix)\"\n                [inputId]=\"inputId(field, idSuffix)\"\n                [formControlName]=\"field.formControlName!\"\n                [placeholder]=\"field.config.attributes.placeholder ?? ''\"\n                [suggestions]=\"field.config.attributes.suggestions\"\n                [optionLabel]=\"field.config.attributes.optionLabel\"\n                [multiple]=\"field.config.attributes.multiple\"\n                [forceSelection]=\"field.config.attributes.forceSelection\"\n                [dropdown]=\"field.config.attributes.dropdown\"\n                [showClear]=\"field.config.attributes.showClear\"\n                [completeOnFocus]=\"field.config.attributes.completeOnFocus\"\n                [minLength]=\"field.config.attributes.minLength ?? 1\"\n                [delay]=\"field.config.attributes.delay ?? 300\"\n                [virtualScroll]=\"field.config.attributes.virtualScroll\"\n                [virtualScrollItemSize]=\"\n                  field.config.attributes.virtualScrollItemSize\n                \"\n                [scrollHeight]=\"field.config.attributes.scrollHeight\"\n                appendTo=\"body\"\n                (completeMethod)=\"onEvent(field, $event, 'complete')\"\n                (onSelect)=\"onEvent(field, $event, 'select')\"\n                (onUnselect)=\"onEvent(field, $event, 'unselect')\"\n                (onAdd)=\"onEvent(field, $event, 'add')\"\n                (onFocus)=\"onEvent(field, $event, 'focus')\"\n                (onBlur)=\"onEvent(field, $event, 'blur')\"\n                (onClear)=\"onEvent(field, $event, 'clear')\"\n                (onInputKeydown)=\"onEvent(field, $event, 'inputKeydown')\"\n              >\n              </p-autocomplete>\n            }\n\n            <!-- toggle -->\n            @case ('toggle') {\n              <p-toggleswitch\n                [formControlName]=\"field.formControlName!\"\n                [inputId]=\"inputId(field, idSuffix)\"\n                [attr.aria-labelledby]=\"field.formControlName + 'Label'\"\n                (onChange)=\"onEvent(field, $event, 'change')\"\n              />\n            }\n\n            <!-- checkbox -->\n            @case ('checkbox') {\n              <p-checkbox\n                [inputId]=\"inputId(field, idSuffix)\"\n                [formControlName]=\"field.formControlName!\"\n                [name]=\"field.config.attributes.name ?? field.formControlName!\"\n                [value]=\"field.config.attributes.value\"\n                (onChange)=\"onEvent(field, $event, 'change')\"\n              />\n            }\n\n            <!-- radio -->\n            @case ('radio') {\n              @for (opt of $any(optionsFor(field)); track $index) {\n                <div class=\"ngx-radio-item\">\n                  <p-radiobutton\n                    [inputId]=\"field.formControlName + '_' + $index\"\n                    [formControlName]=\"field.formControlName!\"\n                    [name]=\"field.formControlName!\"\n                    [value]=\"\n                      opt[field.config.attributes.optionValue ?? 'value']\n                    \"\n                    (onClick)=\"onEvent(field, $event, 'change')\"\n                  />\n                  <label [for]=\"field.formControlName + '_' + $index\">\n                    {{ opt[field.config.attributes.optionLabel ?? 'label'] }}\n                  </label>\n                </div>\n              }\n            }\n\n            <!-- datePicker / time / month / year -->\n            @case ('datePicker') {\n              <p-datepicker\n                [inputId]=\"inputId(field, idSuffix)\"\n                [formControlName]=\"field.formControlName!\"\n                [placeholder]=\"field.config.attributes.placeholder ?? ''\"\n                [showIcon]=\"field.config.attributes.showIcon\"\n                [minDate]=\"minDateFor(field)!\"\n                [maxDate]=\"maxDateFor(field)!\"\n                [selectionMode]=\"$any(field.config.attributes.selectionMode)\"\n                [readonlyInput]=\"field.config.attributes.readonlyInput\"\n                [showButtonBar]=\"field.config.attributes.showButtonBar\"\n                [showTime]=\"field.config.attributes.showTime\"\n                [hourFormat]=\"field.config.attributes.hourFormat\"\n                [timeOnly]=\"field.config.attributes.timeOnly\"\n                [view]=\"$any(field.config.attributes.view)\"\n                [dateFormat]=\"field.config.attributes.dateFormat\"\n                [numberOfMonths]=\"field.config.attributes.numberOfMonths ?? 1\"\n                [showClear]=\"field.config.attributes.showClear\"\n                appendTo=\"body\"\n                (onSelect)=\"onEvent(field, $event, 'select')\"\n                (onBlur)=\"onEvent(field, $event, 'blur')\"\n                (onFocus)=\"onEvent(field, $event, 'focus')\"\n                (onClear)=\"onEvent(field, $event, 'clear')\"\n              >\n              </p-datepicker>\n            }\n\n            @case ('time') {\n              <p-datepicker\n                [inputId]=\"inputId(field, idSuffix)\"\n                [formControlName]=\"field.formControlName!\"\n                [placeholder]=\"field.config.attributes.placeholder ?? ''\"\n                [showIcon]=\"true\"\n                [iconDisplay]=\"'input'\"\n                [timeOnly]=\"true\"\n                [showTime]=\"true\"\n                [hourFormat]=\"field.config.attributes.hourFormat ?? '24'\"\n                appendTo=\"body\"\n                (onSelect)=\"onEvent(field, $event, 'select')\"\n              />\n            }\n\n            @case ('month') {\n              <p-datepicker\n                [inputId]=\"inputId(field, idSuffix)\"\n                [formControlName]=\"field.formControlName!\"\n                [placeholder]=\"field.config.attributes.placeholder ?? ''\"\n                [showIcon]=\"true\"\n                [view]=\"'month'\"\n                [dateFormat]=\"field.config.attributes.dateFormat ?? 'mm/yy'\"\n                [readonlyInput]=\"true\"\n                appendTo=\"body\"\n                (onSelect)=\"onEvent(field, $event, 'select')\"\n              />\n            }\n\n            @case ('year') {\n              <p-datepicker\n                [inputId]=\"inputId(field, idSuffix)\"\n                [formControlName]=\"field.formControlName!\"\n                [placeholder]=\"field.config.attributes.placeholder ?? ''\"\n                [showIcon]=\"true\"\n                [view]=\"'year'\"\n                [dateFormat]=\"field.config.attributes.dateFormat ?? 'yy'\"\n                [readonlyInput]=\"true\"\n                appendTo=\"body\"\n                (onSelect)=\"onEvent(field, $event, 'select')\"\n              />\n            }\n\n            <!-- slider -->\n            @case ('slider') {\n              <p-slider\n                [formControlName]=\"field.formControlName!\"\n                [min]=\"field.config.attributes.min ?? 0\"\n                [max]=\"field.config.attributes.max ?? 100\"\n                [step]=\"field.config.attributes.step ?? 1\"\n                [range]=\"field.config.attributes.range\"\n                [orientation]=\"\n                  field.config.attributes.orientation ?? 'horizontal'\n                \"\n                (onChange)=\"onEvent(field, $event, 'change')\"\n              />\n            }\n\n            <!-- rating -->\n            @case ('rating') {\n              <p-rating\n                [formControlName]=\"field.formControlName!\"\n                [stars]=\"field.config.attributes.stars ?? 5\"\n                (onRate)=\"onEvent(field, $event, 'change')\"\n              />\n            }\n\n            <!-- colorPicker -->\n            @case ('colorPicker') {\n              <p-colorpicker\n                [formControlName]=\"field.formControlName!\"\n                [inline]=\"field.config.attributes.inline\"\n                (onChange)=\"onEvent(field, $event, 'change')\"\n              />\n            }\n          }\n\n          @if (\n            field.config.attributes.fieldPos === 'right' &&\n            field.config.attributes.fieldIcon\n          ) {\n            <p-inputgroup-addon>\n              <i [class]=\"field.config.attributes.fieldIcon\">\n                {{ field.config.attributes.fieldIconText ?? '' }}\n              </i>\n            </p-inputgroup-addon>\n          }\n        </p-inputgroup>\n      }\n    }\n  </ng-container>\n</ng-template>\n", styles: [".ngx-form-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:1.25rem}.ngx-col-1{grid-column:span 1;min-width:0}.ngx-col-2{grid-column:span 2;min-width:0}.ngx-col-3{grid-column:span 3;min-width:0}.ngx-col-4{grid-column:span 4;min-width:0}.ngx-col-5{grid-column:span 5;min-width:0}.ngx-col-6{grid-column:span 6;min-width:0}.ngx-col-7{grid-column:span 7;min-width:0}.ngx-col-8{grid-column:span 8;min-width:0}.ngx-col-9{grid-column:span 9;min-width:0}.ngx-col-10{grid-column:span 10;min-width:0}.ngx-col-11{grid-column:span 11;min-width:0}.ngx-col-12{grid-column:span 12;min-width:0}@media(max-width:640px){.ngx-col-1,.ngx-col-2,.ngx-col-3,.ngx-col-4,.ngx-col-5,.ngx-col-6,.ngx-col-7,.ngx-col-8,.ngx-col-9,.ngx-col-10,.ngx-col-11{grid-column:span 12}}.ngx-form-title{font-size:1.25rem;font-weight:700;margin-bottom:1.25rem;color:var(--p-text-color, #111827)}.ngx-field-label{display:block;font-size:.775rem;font-weight:600;color:var(--p-text-muted-color, #4b5563);margin-bottom:.3rem;letter-spacing:.01em}.ngx-required{color:var(--p-red-500, #ef4444);margin-left:.15rem}.ngx-field-inner{margin-top:.2rem;width:100%}.ngx-field-inner .p-inputgroup,.ngx-field-inner .p-select,.ngx-field-inner .p-multiselect,.ngx-field-inner .p-autocomplete,.ngx-field-inner .p-datepicker,.ngx-field-inner .p-inputtext,.ngx-field-inner .p-textarea,.ngx-field-inner .p-password{width:100%}:host ::ng-deep .p-inputgroup{border:1px solid var(--p-surface-border, #d1d5db);border-radius:8px;background:#fff;transition:all .2s;display:flex;align-items:stretch}:host ::ng-deep .p-inputgroup p-inputgroup-addon,:host ::ng-deep .p-inputgroup .p-inputgroup-addon{background:transparent!important;border:none!important;color:#9ca3af;padding:.75rem .5rem .75rem 1rem;display:flex;align-items:center}:host ::ng-deep .p-inputgroup p-inputgroup-addon i,:host ::ng-deep .p-inputgroup .p-inputgroup-addon i{font-size:1.15rem}:host ::ng-deep .p-inputgroup:has(textarea) p-inputgroup-addon,:host ::ng-deep .p-inputgroup:has(textarea) .p-inputgroup-addon{align-items:flex-start;padding-top:1rem}:host ::ng-deep .p-inputgroup:has(input:focus),:host ::ng-deep .p-inputgroup:has(textarea:focus),:host ::ng-deep .p-inputgroup:has(.p-focus){border-color:#3b82f6;box-shadow:0 0 0 2px #3b82f633}:host ::ng-deep .p-inputgroup>.p-inputtext,:host ::ng-deep .p-inputgroup>.p-textarea,:host ::ng-deep .p-inputgroup p-select>.p-select,:host ::ng-deep .p-inputgroup p-multiselect>.p-multiselect,:host ::ng-deep .p-inputgroup p-autocomplete>.p-autocomplete,:host ::ng-deep .p-inputgroup p-datepicker>.p-datepicker{border:none!important;background:transparent!important;box-shadow:none!important;flex:1 1 auto;min-width:0}:host ::ng-deep .p-inputgroup:has(p-select),:host ::ng-deep .p-inputgroup:has(p-multiselect){position:relative}:host ::ng-deep .p-inputgroup:has(p-select) p-inputgroup-addon,:host ::ng-deep .p-inputgroup:has(p-multiselect) p-inputgroup-addon{position:absolute;z-index:2;border:none!important;background:transparent!important;height:100%;width:2.5rem;display:flex;align-items:center;justify-content:center}:host ::ng-deep .p-inputgroup:has(p-select) p-inputgroup-addon:first-child,:host ::ng-deep .p-inputgroup:has(p-multiselect) p-inputgroup-addon:first-child{left:0}:host ::ng-deep .p-inputgroup:has(p-select) p-select,:host ::ng-deep .p-inputgroup:has(p-select) p-multiselect,:host ::ng-deep .p-inputgroup:has(p-multiselect) p-select,:host ::ng-deep .p-inputgroup:has(p-multiselect) p-multiselect{width:100%;flex:1 1 100%}:host ::ng-deep .p-inputgroup:has(p-inputgroup-addon:first-child):has(p-select) .p-select-label,:host ::ng-deep .p-inputgroup:has(p-inputgroup-addon:first-child):has(p-select) .p-multiselect-label,:host ::ng-deep .p-inputgroup:has(p-inputgroup-addon:first-child):has(p-multiselect) .p-select-label,:host ::ng-deep .p-inputgroup:has(p-inputgroup-addon:first-child):has(p-multiselect) .p-multiselect-label{padding-left:2.75rem!important}:host ::ng-deep .ngx-toggle-card{display:flex;align-items:center;justify-content:space-between;padding:.9rem 1rem;border:1px solid var(--p-surface-border, #e5e7eb);border-radius:8px;background:#fff;margin-bottom:.75rem}:host ::ng-deep .ngx-toggle-card .ngx-toggle-card-icon{width:36px;height:36px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:1.1rem;margin-right:1rem}:host ::ng-deep .ngx-toggle-card .ngx-toggle-card-body{flex:1;min-width:0;padding-right:1.5rem}:host ::ng-deep .ngx-toggle-card .ngx-toggle-card-body .ngx-toggle-label{font-weight:600;color:var(--gray-900);margin-bottom:.2rem;font-size:.95rem}:host ::ng-deep .ngx-toggle-card .ngx-toggle-card-body .ngx-toggle-desc{color:var(--gray-500);font-size:.8rem;line-height:1.4}:host ::ng-deep .ngx-toggle-card p-toggleswitch,:host ::ng-deep .ngx-toggle-card .p-toggleswitch{flex:0 0 auto!important;width:44px!important;height:24px!important;display:block!important;position:relative!important;box-sizing:border-box!important}:host ::ng-deep .ngx-toggle-card .p-toggleswitch-slider{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;border-radius:24px!important;transition:background-color .2s,box-shadow .2s!important;background:var(--p-surface-300, #cbd5e1)!important}:host ::ng-deep .ngx-toggle-card .p-toggleswitch-handle{position:absolute!important;top:50%!important;left:3px!important;margin-top:-9px!important;width:18px!important;height:18px!important;border-radius:50%!important;background:#fff!important;transition:transform .2s!important;box-shadow:0 1px 3px #0003!important}:host ::ng-deep .ngx-toggle-card .p-toggleswitch.p-toggleswitch-checked .p-toggleswitch-handle{transform:translate(20px)!important}:host ::ng-deep .ngx-toggle-card .p-toggleswitch.p-toggleswitch-checked .p-toggleswitch-slider{background:var(--toggle-color, var(--p-primary-500))!important}::ng-deep .p-select-overlay,::ng-deep .p-multiselect-overlay,::ng-deep .p-autocomplete-overlay{background:#fff!important;box-shadow:0 4px 15px #00000014,0 1px 3px #0000000d!important;border:1px solid var(--p-surface-border, #e5e7eb)!important;border-radius:8px!important;margin-top:6px!important;padding:.25rem!important}::ng-deep .p-select-overlay .p-select-header,::ng-deep .p-select-overlay .p-multiselect-header,::ng-deep .p-multiselect-overlay .p-select-header,::ng-deep .p-multiselect-overlay .p-multiselect-header,::ng-deep .p-autocomplete-overlay .p-select-header,::ng-deep .p-autocomplete-overlay .p-multiselect-header{padding:.5rem!important;margin-bottom:.25rem}::ng-deep .p-select-overlay .p-select-filter-container .p-inputtext,::ng-deep .p-select-overlay .p-select-filter,::ng-deep .p-select-overlay .p-multiselect-filter-container .p-inputtext,::ng-deep .p-select-overlay .p-multiselect-filter,::ng-deep .p-multiselect-overlay .p-select-filter-container .p-inputtext,::ng-deep .p-multiselect-overlay .p-select-filter,::ng-deep .p-multiselect-overlay .p-multiselect-filter-container .p-inputtext,::ng-deep .p-multiselect-overlay .p-multiselect-filter,::ng-deep .p-autocomplete-overlay .p-select-filter-container .p-inputtext,::ng-deep .p-autocomplete-overlay .p-select-filter,::ng-deep .p-autocomplete-overlay .p-multiselect-filter-container .p-inputtext,::ng-deep .p-autocomplete-overlay .p-multiselect-filter{padding:.5rem .75rem!important}::ng-deep .p-select-overlay .p-select-list,::ng-deep .p-select-overlay .p-multiselect-list,::ng-deep .p-multiselect-overlay .p-select-list,::ng-deep .p-multiselect-overlay .p-multiselect-list,::ng-deep .p-autocomplete-overlay .p-select-list,::ng-deep .p-autocomplete-overlay .p-multiselect-list{padding:0!important;display:flex;flex-direction:column;gap:2px}::ng-deep .p-select-overlay .p-select-option,::ng-deep .p-select-overlay .p-multiselect-option,::ng-deep .p-multiselect-overlay .p-select-option,::ng-deep .p-multiselect-overlay .p-multiselect-option,::ng-deep .p-autocomplete-overlay .p-select-option,::ng-deep .p-autocomplete-overlay .p-multiselect-option{border-radius:6px!important;margin:0!important;padding:.5rem .75rem!important;display:flex;align-items:center}::ng-deep .p-select-overlay .p-select-option:hover,::ng-deep .p-select-overlay .p-multiselect-option:hover,::ng-deep .p-multiselect-overlay .p-select-option:hover,::ng-deep .p-multiselect-overlay .p-multiselect-option:hover,::ng-deep .p-autocomplete-overlay .p-select-option:hover,::ng-deep .p-autocomplete-overlay .p-multiselect-option:hover{background:var(--p-surface-hover, #f3f4f6)!important}::ng-deep .p-select-overlay .p-select-option[data-p-highlight=true],::ng-deep .p-select-overlay .p-select-option.p-select-option-selected,::ng-deep .p-select-overlay .p-multiselect-option[data-p-highlight=true],::ng-deep .p-select-overlay .p-multiselect-option.p-select-option-selected,::ng-deep .p-multiselect-overlay .p-select-option[data-p-highlight=true],::ng-deep .p-multiselect-overlay .p-select-option.p-select-option-selected,::ng-deep .p-multiselect-overlay .p-multiselect-option[data-p-highlight=true],::ng-deep .p-multiselect-overlay .p-multiselect-option.p-select-option-selected,::ng-deep .p-autocomplete-overlay .p-select-option[data-p-highlight=true],::ng-deep .p-autocomplete-overlay .p-select-option.p-select-option-selected,::ng-deep .p-autocomplete-overlay .p-multiselect-option[data-p-highlight=true],::ng-deep .p-autocomplete-overlay .p-multiselect-option.p-select-option-selected{background:#f1f5f9!important;color:var(--p-primary-700, #334155)!important;font-weight:500}.ngx-error{display:block;color:var(--p-red-500, #ef4444);font-size:.72rem;line-height:1.4;min-height:1.008rem;margin-top:.25rem;font-weight:500}.ngx-error--placeholder{visibility:hidden}.ngx-hint{display:block;font-size:.72rem;margin-top:.25rem;color:var(--p-text-muted-color, #9ca3af);line-height:1.4}.ngx-btn-wrap{display:flex;align-items:flex-end;justify-content:stretch;width:100%;height:100%;padding-top:1.5rem}.ngx-btn-wrap button{width:100%;justify-content:center;font-weight:600}.ngx-file-inline{display:flex;flex-wrap:wrap;gap:.5rem}.ngx-image-list{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.75rem}.ngx-image-card{position:relative}.ngx-image-remove{position:absolute;top:0;right:0;z-index:2;width:22px;height:22px;display:flex;align-items:center;justify-content:center;border-radius:50%;cursor:pointer;background:#fff;color:#111;box-shadow:0 2px 6px #0003;transform:translate(40%,-40%);font-size:.65rem;transition:background .15s,color .15s}.ngx-image-remove:hover{background:#fee2e2;color:#dc2626}.ngx-image-wrapper{position:relative;width:80px;height:80px;border-radius:8px;overflow:hidden;border:1px solid var(--p-surface-border, #e5e7eb)}.ngx-preview-img{object-fit:cover;transition:opacity .25s ease}.ngx-preview-img.loading{opacity:0}.ngx-preview-img.loaded{opacity:1}.ngx-img-skeleton{position:absolute;inset:0;background:linear-gradient(90deg,#f0f0f0 25%,#e0e0e0,#f0f0f0 75%);background-size:200% 100%;animation:shimmer 1.4s infinite;border-radius:8px}@keyframes shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}.ngx-toggle-card{display:flex;align-items:center;gap:.85rem;padding:.9rem 1rem;border:1px solid var(--p-surface-border, #e5e7eb);border-radius:10px;background:#fff;width:100%;transition:border-color .2s,box-shadow .2s,background .2s}.ngx-toggle-card:has(.p-toggleswitch.p-toggleswitch-checked){border-color:var(--toggle-color, var(--p-primary-500, #3b82f6));box-shadow:0 0 0 3px color-mix(in srgb,var(--toggle-color, #3b82f6) 12%,transparent)}.ngx-toggle-card-icon{width:42px;height:42px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:1rem;flex-shrink:0}.ngx-toggle-card-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:.15rem}.ngx-toggle-card-label{font-size:.84rem;font-weight:600;color:var(--p-text-color, #111827);line-height:1.3}.ngx-toggle-card-desc{font-size:.72rem;color:var(--p-text-muted-color, #6b7280);line-height:1.4}.ngx-radio-item{display:flex;align-items:center;gap:.5rem;margin-bottom:.35rem;font-size:.875rem;color:var(--p-text-color, #374151)}.ngx-field-group{border:1px solid var(--p-surface-border, #e5e7eb);border-radius:10px;padding:1rem 1rem .5rem;display:flex;flex-direction:column;gap:.75rem}.ngx-field-group-row{display:block}.ngx-repeater{display:flex;flex-direction:column;gap:.75rem}.ngx-repeater-row{display:grid;grid-template-columns:1fr auto;gap:.5rem;align-items:start;padding:.75rem;border:1px solid var(--p-surface-border, #e5e7eb);border-radius:10px;background:var(--p-surface-50, #f9fafb)}.ngx-repeater-row-fields{display:grid;grid-template-columns:repeat(12,1fr);gap:.75rem;min-width:0}.ngx-repeater-remove{margin-top:.2rem}.ngx-repeater-add{align-self:flex-start}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }, { kind: "directive", type: NgOptimizedImage, selector: "img[ngSrc]", inputs: ["ngSrc", "ngSrcset", "sizes", "width", "height", "decoding", "loading", "priority", "loaderParams", "disableOptimizedSrcset", "fill", "placeholder", "placeholderConfig", "src", "srcset"] }, { kind: "ngmodule", type: 
+                // PrimeNG
+                InputTextModule }, { kind: "directive", type: i2.InputText, selector: "[pInputText]", inputs: ["hostName", "ptInputText", "pInputTextPT", "pInputTextUnstyled", "pSize", "variant", "fluid", "invalid"] }, { kind: "ngmodule", type: InputGroupModule }, { kind: "component", type: i3.InputGroup, selector: "p-inputgroup, p-inputGroup, p-input-group", inputs: ["styleClass"] }, { kind: "ngmodule", type: InputGroupAddonModule }, { kind: "component", type: i4.InputGroupAddon, selector: "p-inputgroup-addon, p-inputGroupAddon", inputs: ["style", "styleClass"] }, { kind: "ngmodule", type: FloatLabelModule }, { kind: "component", type: i5.FloatLabel, selector: "p-floatlabel, p-floatLabel, p-float-label", inputs: ["variant"] }, { kind: "ngmodule", type: SelectModule }, { kind: "component", type: i6.Select, selector: "p-select", inputs: ["id", "scrollHeight", "filter", "panelStyle", "styleClass", "panelStyleClass", "readonly", "editable", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "filterValue", "options", "appendTo", "motionOptions"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "ngmodule", type: MultiSelectModule }, { kind: "component", type: i7.MultiSelect, selector: "p-multiSelect, p-multiselect, p-multi-select", inputs: ["id", "ariaLabel", "styleClass", "panelStyle", "panelStyleClass", "inputId", "readonly", "group", "filter", "filterPlaceHolder", "filterLocale", "overlayVisible", "tabindex", "dataKey", "ariaLabelledBy", "displaySelectedLabel", "maxSelectedLabels", "selectionLimit", "selectedItemsLabel", "showToggleAll", "emptyFilterMessage", "emptyMessage", "resetFilterOnHide", "dropdownIcon", "chipIcon", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "showHeader", "filterBy", "scrollHeight", "lazy", "virtualScroll", "loading", "virtualScrollItemSize", "loadingIcon", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "autofocusFilter", "display", "autocomplete", "showClear", "autofocus", "placeholder", "options", "filterValue", "selectAll", "focusOnHover", "filterFields", "selectOnFocus", "autoOptionFocus", "highlightOnSelect", "size", "variant", "fluid", "appendTo", "motionOptions"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onClear", "onPanelShow", "onPanelHide", "onLazyLoad", "onRemove", "onSelectAllChange"] }, { kind: "ngmodule", type: CascadeSelectModule }, { kind: "component", type: i8.CascadeSelect, selector: "p-cascadeSelect, p-cascadeselect, p-cascade-select", inputs: ["id", "searchMessage", "emptyMessage", "selectionMessage", "emptySearchMessage", "emptySelectionMessage", "searchLocale", "optionDisabled", "focusOnHover", "selectOnFocus", "autoOptionFocus", "styleClass", "options", "optionLabel", "optionValue", "optionGroupLabel", "optionGroupChildren", "placeholder", "value", "dataKey", "inputId", "tabindex", "ariaLabelledBy", "inputLabel", "ariaLabel", "showClear", "panelStyleClass", "panelStyle", "overlayOptions", "autofocus", "loading", "loadingIcon", "breakpoint", "size", "variant", "fluid", "appendTo", "motionOptions"], outputs: ["onChange", "onGroupChange", "onShow", "onHide", "onClear", "onBeforeShow", "onBeforeHide", "onFocus", "onBlur"] }, { kind: "ngmodule", type: AutoCompleteModule }, { kind: "component", type: i9.AutoComplete, selector: "p-autoComplete, p-autocomplete, p-auto-complete", inputs: ["minLength", "minQueryLength", "delay", "panelStyle", "styleClass", "panelStyleClass", "inputStyle", "inputId", "inputStyleClass", "placeholder", "readonly", "scrollHeight", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "autoHighlight", "forceSelection", "type", "autoZIndex", "baseZIndex", "ariaLabel", "dropdownAriaLabel", "ariaLabelledBy", "dropdownIcon", "unique", "group", "completeOnFocus", "showClear", "dropdown", "showEmptyMessage", "dropdownMode", "multiple", "addOnTab", "tabindex", "dataKey", "emptyMessage", "showTransitionOptions", "hideTransitionOptions", "autofocus", "autocomplete", "optionGroupChildren", "optionGroupLabel", "overlayOptions", "suggestions", "optionLabel", "optionValue", "id", "searchMessage", "emptySelectionMessage", "selectionMessage", "autoOptionFocus", "selectOnFocus", "searchLocale", "optionDisabled", "focusOnHover", "typeahead", "addOnBlur", "separator", "appendTo", "motionOptions"], outputs: ["completeMethod", "onSelect", "onUnselect", "onAdd", "onFocus", "onBlur", "onDropdownClick", "onClear", "onInputKeydown", "onKeyUp", "onShow", "onHide", "onLazyLoad"] }, { kind: "ngmodule", type: FileUploadModule }, { kind: "component", type: i10.FileUpload, selector: "p-fileupload, p-fileUpload", inputs: ["name", "url", "method", "multiple", "accept", "disabled", "auto", "withCredentials", "maxFileSize", "invalidFileSizeMessageSummary", "invalidFileSizeMessageDetail", "invalidFileTypeMessageSummary", "invalidFileTypeMessageDetail", "invalidFileLimitMessageDetail", "invalidFileLimitMessageSummary", "style", "styleClass", "previewWidth", "chooseLabel", "uploadLabel", "cancelLabel", "chooseIcon", "uploadIcon", "cancelIcon", "showUploadButton", "showCancelButton", "mode", "headers", "customUpload", "fileLimit", "uploadStyleClass", "cancelStyleClass", "removeStyleClass", "chooseStyleClass", "chooseButtonProps", "uploadButtonProps", "cancelButtonProps", "files"], outputs: ["onBeforeUpload", "onSend", "onUpload", "onError", "onClear", "onRemove", "onSelect", "onProgress", "uploadHandler", "onImageError", "onRemoveUploadedFile"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i11.ButtonDirective, selector: "[pButton]", inputs: ["ptButtonDirective", "pButtonPT", "pButtonUnstyled", "hostName", "text", "plain", "raised", "size", "outlined", "rounded", "iconPos", "loadingIcon", "fluid", "label", "icon", "loading", "buttonProps", "severity"] }, { kind: "ngmodule", type: DialogModule }, { kind: "ngmodule", type: DividerModule }, { kind: "component", type: i12.Divider, selector: "p-divider", inputs: ["styleClass", "layout", "type", "align"] }, { kind: "ngmodule", type: PasswordModule }, { kind: "component", type: i13.Password, selector: "p-password", inputs: ["ariaLabel", "ariaLabelledBy", "label", "promptLabel", "mediumRegex", "strongRegex", "weakLabel", "mediumLabel", "maxLength", "strongLabel", "inputId", "feedback", "toggleMask", "inputStyleClass", "styleClass", "inputStyle", "showTransitionOptions", "hideTransitionOptions", "autocomplete", "placeholder", "showClear", "autofocus", "tabindex", "appendTo", "motionOptions", "overlayOptions"], outputs: ["onFocus", "onBlur", "onClear"] }, { kind: "ngmodule", type: DatePickerModule }, { kind: "component", type: i14.DatePicker, selector: "p-datePicker, p-datepicker, p-date-picker", inputs: ["iconDisplay", "styleClass", "inputStyle", "inputId", "inputStyleClass", "placeholder", "ariaLabelledBy", "ariaLabel", "iconAriaLabel", "dateFormat", "multipleSeparator", "rangeSeparator", "inline", "showOtherMonths", "selectOtherMonths", "showIcon", "icon", "readonlyInput", "shortYearCutoff", "hourFormat", "timeOnly", "stepHour", "stepMinute", "stepSecond", "showSeconds", "showOnFocus", "showWeek", "startWeekFromFirstDayOfYear", "showClear", "dataType", "selectionMode", "maxDateCount", "showButtonBar", "todayButtonStyleClass", "clearButtonStyleClass", "autofocus", "autoZIndex", "baseZIndex", "panelStyleClass", "panelStyle", "keepInvalid", "hideOnDateTimeSelect", "touchUI", "timeSeparator", "focusTrap", "showTransitionOptions", "hideTransitionOptions", "tabindex", "minDate", "maxDate", "disabledDates", "disabledDays", "showTime", "responsiveOptions", "numberOfMonths", "firstDayOfWeek", "view", "defaultDate", "appendTo", "motionOptions"], outputs: ["onFocus", "onBlur", "onClose", "onSelect", "onClear", "onInput", "onTodayClick", "onClearClick", "onMonthChange", "onYearChange", "onClickOutside", "onShow"] }, { kind: "ngmodule", type: CheckboxModule }, { kind: "component", type: i15.Checkbox, selector: "p-checkbox, p-checkBox, p-check-box", inputs: ["hostName", "value", "binary", "ariaLabelledBy", "ariaLabel", "tabindex", "inputId", "inputStyle", "styleClass", "inputClass", "indeterminate", "formControl", "checkboxIcon", "readonly", "autofocus", "trueValue", "falseValue", "variant", "size"], outputs: ["onChange", "onFocus", "onBlur"] }, { kind: "ngmodule", type: ToggleSwitchModule }, { kind: "component", type: i16.ToggleSwitch, selector: "p-toggleswitch, p-toggleSwitch, p-toggle-switch", inputs: ["styleClass", "tabindex", "inputId", "readonly", "trueValue", "falseValue", "ariaLabel", "size", "ariaLabelledBy", "autofocus"], outputs: ["onChange"] }, { kind: "ngmodule", type: TextareaModule }, { kind: "directive", type: i17.Textarea, selector: "[pTextarea], [pInputTextarea]", inputs: ["pTextareaPT", "pTextareaUnstyled", "autoResize", "pSize", "variant", "fluid", "invalid"], outputs: ["onResize"] }, { kind: "ngmodule", type: SliderModule }, { kind: "component", type: i18.Slider, selector: "p-slider", inputs: ["animate", "min", "max", "orientation", "step", "range", "styleClass", "ariaLabel", "ariaLabelledBy", "tabindex", "autofocus"], outputs: ["onChange", "onSlideEnd"] }, { kind: "ngmodule", type: RatingModule }, { kind: "component", type: i19.Rating, selector: "p-rating", inputs: ["readonly", "stars", "iconOnClass", "iconOnStyle", "iconOffClass", "iconOffStyle", "autofocus"], outputs: ["onRate", "onFocus", "onBlur"] }, { kind: "ngmodule", type: ColorPickerModule }, { kind: "component", type: i20.ColorPicker, selector: "p-colorPicker, p-colorpicker, p-color-picker", inputs: ["styleClass", "showTransitionOptions", "hideTransitionOptions", "inline", "format", "tabindex", "inputId", "autoZIndex", "autofocus", "defaultColor", "appendTo", "overlayOptions", "motionOptions"], outputs: ["onChange", "onShow", "onHide"] }, { kind: "ngmodule", type: RadioButtonModule }, { kind: "component", type: i21.RadioButton, selector: "p-radioButton, p-radiobutton, p-radio-button", inputs: ["value", "tabindex", "inputId", "ariaLabelledBy", "ariaLabel", "styleClass", "autofocus", "binary", "variant", "size"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: KeyFilterModule }, { kind: "directive", type: i22.KeyFilter, selector: "[pKeyFilter]", inputs: ["pValidateOnly", "pKeyFilter"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: EditorModule }, { kind: "component", type: i23.Editor, selector: "p-editor", inputs: ["style", "styleClass", "placeholder", "formats", "modules", "bounds", "scrollingContainer", "debug", "readonly"], outputs: ["onInit", "onTextChange", "onSelectionChange", "onEditorChange", "onFocus", "onBlur"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: NgxJsonFormComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ngx-json-form', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
+                        ReactiveFormsModule,
+                        NgTemplateOutlet,
+                        NgComponentOutlet,
+                        NgOptimizedImage,
+                        // PrimeNG
+                        InputTextModule,
+                        InputGroupModule,
+                        InputGroupAddonModule,
+                        FloatLabelModule,
+                        SelectModule,
+                        MultiSelectModule,
+                        CascadeSelectModule,
+                        AutoCompleteModule,
+                        FileUploadModule,
+                        ButtonModule,
+                        DialogModule,
+                        DividerModule,
+                        PasswordModule,
+                        DatePickerModule,
+                        CheckboxModule,
+                        ToggleSwitchModule,
+                        TextareaModule,
+                        SliderModule,
+                        RatingModule,
+                        ColorPickerModule,
+                        RadioButtonModule,
+                        KeyFilterModule,
+                        EditorModule,
+                    ], template: "@if (formTitle().length) {\n  <div class=\"ngx-form-title\">{{ formTitle() }}</div>\n}\n\n@if (ready()) {\n  <form [formGroup]=\"formGroup()\" class=\"ngx-form-grid\">\n    @for (field of visibleFields(); track field.formControlName ?? $index) {\n      <div\n        [class]=\"\n          'ngx-col-' +\n          (field.layout?.columnSpan ?? 12) +\n          ' ' +\n          (field.layout?.wrapperClass ?? '')\n        \"\n        [style]=\"field.layout?.wrapperStyle ?? {}\"\n        [style.display]=\"field.config.attributes.isHidden ? 'none' : 'block'\"\n      >\n        <!-- Float Label wrapper -->\n        @if (field.floatLabel) {\n          <p-floatlabel [variant]=\"field.floatVariant ?? 'on'\">\n            <div class=\"ngx-field-inner\">\n              <ng-container\n                [ngTemplateOutlet]=\"fieldTpl\"\n                [ngTemplateOutletContext]=\"{ $implicit: field, formGroup: formGroup() }\"\n              />\n            </div>\n            <label\n              [attr.for]=\"field.formControlName + 'Id'\"\n              [attr.id]=\"field.formControlName + 'Label'\"\n            >\n              @if (field.labelIconPos === 'left') {\n                <i [class]=\"field.labelIcon\"></i>\n              }\n              {{ field.label }}\n              @if (field.labelIconPos === 'right') {\n                <i [class]=\"field.labelIcon\"></i>\n              }\n              @if (field.validations?.rules?.required) {\n                <span class=\"ngx-required\">*</span>\n              }\n            </label>\n          </p-floatlabel>\n        }\n\n        <!-- Toggle card layout -->\n        @else if (\n          field.config.attributes.cardLayout &&\n          field.config.attributes.inputType === 'toggle'\n        ) {\n          <div\n            class=\"ngx-toggle-card\"\n            [style.--toggle-color]=\"field.config.attributes.cardIconColor\"\n          >\n            <div\n              class=\"ngx-toggle-card-icon\"\n              [style.background]=\"\n                field.config.attributes.cardIconBg ??\n                'var(--p-primary-50, #eff6ff)'\n              \"\n              [style.color]=\"\n                field.config.attributes.cardIconColor ??\n                'var(--p-primary-500, #3b82f6)'\n              \"\n            >\n              <i [class]=\"field.config.attributes.cardIcon ?? 'pi pi-bell'\"></i>\n            </div>\n            <div class=\"ngx-toggle-card-body\">\n              <span class=\"ngx-toggle-card-label\">\n                {{ field.label }}\n                @if (field.validations?.rules?.required) {\n                  <span class=\"ngx-required\">*</span>\n                }\n              </span>\n              @if (field.config.attributes.info?.length) {\n                <span\n                  class=\"ngx-toggle-card-desc\"\n                  [innerHTML]=\"field.config.attributes.info\"\n                ></span>\n              }\n            </div>\n            <p-toggleswitch\n              [formControlName]=\"field.formControlName!\"\n              [inputId]=\"field.formControlName + 'Id'\"\n              (onChange)=\"onEvent(field, $event, 'change')\"\n            />\n          </div>\n          <!--\n            Always reserve one line of space for the error so the row height\n            doesn't change when validation fires (otherwise sibling fields\n            jump down when the error appears).\n          -->\n          @if (field.validations?.rules) {\n            <small\n              class=\"ngx-error\"\n              [class.ngx-error--placeholder]=\"!errorMap()[field.formControlName!]\"\n              [attr.id]=\"field.formControlName + 'Err'\"\n            >{{ errorMap()[field.formControlName!] || '\u00A0' }}</small>\n          }\n        }\n\n        <!-- Normal label wrapper -->\n        @else {\n          @if (field.label && field.label.length) {\n            <label\n              class=\"ngx-field-label\"\n              [attr.for]=\"field.formControlName + 'Id'\"\n              [attr.id]=\"field.formControlName + 'Label'\"\n            >\n              @if (field.labelIconPos === 'left') {\n                <i [class]=\"field.labelIcon\"></i>\n              }\n              {{ field.label }}\n              @if (field.labelIconPos === 'right') {\n                <i [class]=\"field.labelIcon\"></i>\n              }\n              @if (field.validations?.rules?.required) {\n                <span class=\"ngx-required\">*</span>\n              }\n            </label>\n          }\n          <div class=\"ngx-field-inner\">\n            <ng-container\n              [ngTemplateOutlet]=\"fieldTpl\"\n              [ngTemplateOutletContext]=\"{ $implicit: field, formGroup: formGroup() }\"\n            />\n          </div>\n\n          <!--\n            Validation error \u2014 always reserve one line of space (placeholder\n            class makes it invisible when there's no error) so triggering a\n            required/pattern message doesn't push the row below it down.\n          -->\n          @if (field.validations?.rules) {\n            <small\n              class=\"ngx-error\"\n              [class.ngx-error--placeholder]=\"!errorMap()[field.formControlName!]\"\n              [attr.id]=\"field.formControlName + 'Err'\"\n            >{{ errorMap()[field.formControlName!] || '\u00A0' }}</small>\n          }\n\n          <!-- Info / hint -->\n          @if (field.config.attributes.info?.length) {\n            <small\n              class=\"ngx-hint\"\n              [attr.id]=\"field.formControlName + 'Hint'\"\n              [innerHTML]=\"field.config.attributes.info\"\n            ></small>\n          }\n        }\n      </div>\n    }\n  </form>\n}\n\n<!-- \u2500\u2500\u2500 Field Renderer Template \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n<!--\n  `formGroup` is passed in via the template context so each rendering site\n  binds the right group: the root FormGroup for top-level fields, the row's\n  FormGroup for repeater rows. Hard-coding `formGroup()` here would override\n  row-level bindings and route nested formControlName lookups to the root,\n  which is the bug we're fixing.\n\n  Known issue: during initial CD passes Angular logs NG01050 spam because\n  the FormGroup directive on this ng-container materialises after children\n  formControlName directives query their parent ControlContainer. Bindings\n  recover and form values flow correctly afterwards. Cleaner fix would be\n  to avoid the ngTemplateOutlet + context + nested formGroup combination\n  altogether (e.g. inline the @switch at each call site).\n-->\n<ng-template #fieldTpl let-field let-fg=\"formGroup\" let-idSuffix=\"idSuffix\">\n  <ng-container [formGroup]=\"fg\">\n    @switch (field.config.attributes.inputType) {\n      <!-- \u2500\u2500 Custom field (registry) \u2500\u2500 -->\n      @case (customRenderer(field) ? field.config.attributes.inputType : '__never__') {\n        <ng-container\n          *ngComponentOutlet=\"customRenderer(field)!; inputs: customRendererInputs(field)\"\n        />\n      }\n\n      <!-- \u2500\u2500 Group (nested FormGroup) \u2500\u2500 -->\n      @case ('group') {\n        <fieldset\n          class=\"ngx-field-group\"\n          [attr.formGroupName]=\"field.formControlName\"\n        >\n          @for (sub of field.config.attributes.groupFields ?? []; track sub.formControlName ?? $index) {\n            <div class=\"ngx-field-group-row\">\n              <ng-container\n                [ngTemplateOutlet]=\"fieldTpl\"\n                [ngTemplateOutletContext]=\"{ $implicit: sub, formGroup: formGroup() }\"\n              />\n            </div>\n          }\n        </fieldset>\n      }\n\n      <!-- \u2500\u2500 Repeater (FormArray) \u2500\u2500 -->\n      @case ('repeater') {\n        <div class=\"ngx-repeater\">\n          @for (row of getArray(field.formControlName!)?.controls ?? []; track $index) {\n            @let rowIndex = $index;\n            <div class=\"ngx-repeater-row\" [formGroup]=\"$any(row)\">\n              <div class=\"ngx-repeater-row-fields\">\n                @for (sub of field.config.attributes.itemFields ?? []; track sub.formControlName ?? $index) {\n                  <div\n                    [class]=\"\n                      'ngx-col-' + (sub.layout?.columnSpan ?? 12)\n                    \"\n                  >\n                    @if (sub.label) {\n                      <label\n                        class=\"ngx-field-label\"\n                        [attr.for]=\"inputId(sub, rowIndex)\"\n                      >\n                        {{ sub.label }}\n                        @if (sub.validations?.rules?.required) {\n                          <span class=\"ngx-required\">*</span>\n                        }\n                      </label>\n                    }\n                    <ng-container\n                      [ngTemplateOutlet]=\"fieldTpl\"\n                      [ngTemplateOutletContext]=\"{ $implicit: sub, formGroup: $any(row), idSuffix: rowIndex }\"\n                    />\n                    @if (sub.validations?.rules && sub.formControlName) {\n                      <small\n                        class=\"ngx-error\"\n                        [class.ngx-error--placeholder]=\"!resolveRowError($any(row), sub)\"\n                      >{{ resolveRowError($any(row), sub) || '\u00A0' }}</small>\n                    }\n                  </div>\n                }\n              </div>\n              <button\n                type=\"button\"\n                class=\"ngx-repeater-remove\"\n                pButton\n                [icon]=\"'pi pi-trash'\"\n                [rounded]=\"true\"\n                [text]=\"true\"\n                (click)=\"removeRepeaterRow(field, $index)\"\n              ></button>\n            </div>\n          }\n          <button\n            pButton\n            type=\"button\"\n            class=\"ngx-repeater-add\"\n            [icon]=\"'pi pi-plus'\"\n            [label]=\"field.config.attributes.addLabel ?? 'Add row'\"\n            [text]=\"true\"\n            (click)=\"addRepeaterRow(field)\"\n          ></button>\n        </div>\n      }\n\n      <!-- \u2500\u2500 Dependent / Cascading Dropdown \u2500\u2500 -->\n      @case ('dependentDropdown') {\n        <p-cascadeselect\n          [id]=\"inputId(field, idSuffix)\"\n          [inputId]=\"inputId(field, idSuffix)\"\n          [formControlName]=\"field.formControlName!\"\n          [options]=\"$any(optionsFor(field))\"\n          [optionLabel]=\"field.config.attributes.optionLabel ?? 'label'\"\n          [optionValue]=\"field.config.attributes.optionValue ?? 'value'\"\n          [optionGroupLabel]=\"field.config.attributes.optionGroupLabel ?? 'label'\"\n          [optionGroupChildren]=\"\n            $any(field.config.attributes.optionGroupChildren ?? ['children'])\n          \"\n          [placeholder]=\"field.placeholder ?? ''\"\n          appendTo=\"body\"\n          (onChange)=\"onEvent(field, $event, 'change')\"\n          (onShow)=\"onEvent(field, $event, 'show')\"\n          (onHide)=\"onEvent(field, $event, 'hide')\"\n        />\n      }\n\n      <!-- \u2500\u2500 Editor (rich text) \u2500\u2500 -->\n      @case ('editor') {\n        <p-editor\n          [formControlName]=\"field.formControlName!\"\n          [style]=\"{ height: (field.config.attributes['height'] ?? '180px') }\"\n          (onTextChange)=\"onEvent(field, $event, 'change')\"\n        ></p-editor>\n      }\n\n      <!-- \u2500\u2500 Confirm password \u2500\u2500 -->\n      @case ('confirmPassword') {\n        <p-password\n          [inputId]=\"inputId(field, idSuffix)\"\n          [formControlName]=\"field.formControlName!\"\n          [feedback]=\"false\"\n          [toggleMask]=\"field.config.attributes.toggleMask ?? true\"\n          [placeholder]=\"field.placeholder ?? ''\"\n          appendTo=\"body\"\n          (onBlur)=\"onEvent(field, $event, 'blur')\"\n        />\n      }\n\n      <!-- \u2500\u2500 File Upload \u2500\u2500 -->\n      @case ('fileUpload') {\n        <div>\n          <div\n            [class]=\"field.config.attributes.isInline ? 'ngx-file-inline' : ''\"\n          >\n            <p-fileUpload\n              mode=\"basic\"\n              customUpload\n              [id]=\"inputId(field, idSuffix)\"\n              [multiple]=\"field.config.attributes.multiple\"\n              [chooseIcon]=\"field.config.attributes.chooseIcon ?? 'pi pi-upload'\"\n              [accept]=\"field.config.attributes.accept ?? 'image/*'\"\n              [maxFileSize]=\"field.config.attributes.maxFileSize ?? 1000000\"\n              [auto]=\"true\"\n              [chooseLabel]=\"field.config.attributes.chooseLabel ?? 'Upload'\"\n              (uploadHandler)=\"onEvent(field, $event, 'uploadHandler')\"\n            />\n\n            @if (uploadService.imagePreviews()[field.formControlName!]?.length) {\n              <div class=\"ngx-image-list\">\n                @for (\n                  image of uploadService.imagePreviews()[field.formControlName!];\n                  let i = $index;\n                  track i\n                ) {\n                  <div class=\"ngx-image-card\">\n                    <i\n                      class=\"pi pi-times ngx-image-remove\"\n                      (click)=\"removeImage(field, image)\"\n                    ></i>\n                    <div class=\"ngx-image-wrapper\">\n                      @if (!uploadService.isBase64(image)) {\n                        <img\n                          fill\n                          sizes=\"100\"\n                          [ngSrc]=\"image\"\n                          (load)=\"uploadService.onLoad(image)\"\n                          (error)=\"uploadService.onLoad(image)\"\n                          [class.loading]=\"uploadService.isLoading(image)\"\n                          [class.loaded]=\"!uploadService.isLoading(image)\"\n                          class=\"ngx-preview-img\"\n                          alt=\"preview\"\n                        />\n                      } @else {\n                        <img\n                          fill\n                          sizes=\"100\"\n                          [src]=\"image\"\n                          (load)=\"uploadService.onLoad(image)\"\n                          (error)=\"uploadService.onLoad(image)\"\n                          [class.loading]=\"uploadService.isLoading(image)\"\n                          [class.loaded]=\"!uploadService.isLoading(image)\"\n                          class=\"ngx-preview-img\"\n                          alt=\"preview\"\n                        />\n                      }\n                      @if (uploadService.isLoading(image)) {\n                        <div class=\"ngx-img-skeleton\"></div>\n                      }\n                    </div>\n                  </div>\n                }\n              </div>\n            }\n          </div>\n        </div>\n      }\n\n      <!-- \u2500\u2500 Static Text \u2500\u2500 -->\n      @case ('staticText') {\n        <span\n          (click)=\"onEvent(field, $event, 'staticTextClick')\"\n          [innerHTML]=\"field.config.attributes.value\"\n        ></span>\n      }\n\n      <!-- \u2500\u2500 Divider \u2500\u2500 -->\n      @case ('divider') {\n        <p-divider\n          [layout]=\"field.config.attributes.dividerLayout\"\n          [type]=\"field.config.attributes.dividerType\"\n          [align]=\"field.config.attributes.dividerAlign\"\n        >\n          @if (field.config.attributes.value) {\n            <span [innerHTML]=\"field.config.attributes.value\"></span>\n          }\n        </p-divider>\n      }\n\n      <!-- \u2500\u2500 Button \u2500\u2500 -->\n      @case ('button') {\n        <div class=\"ngx-btn-wrap\">\n          <button\n            pButton\n            type=\"button\"\n            [id]=\"inputId(field, idSuffix)\"\n            [label]=\"field.btnLabel ?? ''\"\n            [icon]=\"field.config.attributes.icon ?? ''\"\n            [iconPos]=\"field.config.attributes.iconPosition ?? 'left'\"\n            [tabindex]=\"field.tabIndex ?? 0\"\n            [disabled]=\"\n              field.config.attributes.buttonRole === 'submit' ||\n              field.config.attributes.type === 'submit'\n                ? !formValid()\n                : !!field.config.attributes.disabled\n            \"\n            [class.p-button-outlined]=\"\n              field.config.attributes.variant === 'secondary'\n            \"\n            [class.p-button-text]=\"field.config.attributes.text === true\"\n            [class.p-button-rounded]=\"field.config.attributes.rounded === true\"\n            [class.p-button-sm]=\"field.config.attributes.size === 'sm'\"\n            [class.p-button-lg]=\"field.config.attributes.size === 'lg'\"\n            (click)=\"onEvent(field, $event)\"\n          ></button>\n        </div>\n      }\n\n      <!-- \u2500\u2500 Everything else inside p-inputgroup \u2500\u2500 -->\n      @default {\n        <p-inputgroup>\n          @if (\n            field.config.attributes.fieldPos === 'left' &&\n            field.config.attributes.fieldIcon\n          ) {\n            <p-inputgroup-addon>\n              <i [class]=\"field.config.attributes.fieldIcon\">\n                {{ field.config.attributes.fieldIconText ?? '' }}\n              </i>\n            </p-inputgroup-addon>\n          }\n\n          @switch (field.config.attributes.inputType) {\n            <!-- text / email / number / url -->\n            @case ('text') {\n              <input\n                pInputText\n                [id]=\"inputId(field, idSuffix)\"\n                [formControlName]=\"field.formControlName!\"\n                [type]=\"field.config.attributes.type ?? 'text'\"\n                [tabindex]=\"field.tabIndex ?? 0\"\n                [attr.placeholder]=\"placeholderFor(field)\"\n                [attr.aria-describedby]=\"\n                  (errorMap()[field.formControlName!] ? field.formControlName + 'Err ' : '') +\n                  (field.config.attributes.info ? field.formControlName + 'Hint' : '')\n                \"\n                [pKeyFilter]=\"field.config.attributes.keyfilter\"\n                (change)=\"onEvent(field, $event)\"\n                (input)=\"onEvent(field, $event)\"\n                (focus)=\"onEvent(field, $event)\"\n                (blur)=\"onEvent(field, $event)\"\n                (keyup)=\"onEvent(field, $event)\"\n                (keydown)=\"onEvent(field, $event)\"\n                (keypress)=\"onEvent(field, $event)\"\n              />\n            }\n\n            <!-- password -->\n            @case ('password') {\n              <p-password\n                [inputId]=\"inputId(field, idSuffix)\"\n                [formControlName]=\"field.formControlName!\"\n                [feedback]=\"field.config.attributes.feedback\"\n                [toggleMask]=\"field.config.attributes.toggleMask\"\n                [placeholder]=\"field.config.attributes.placeholder ?? ''\"\n                appendTo=\"body\"\n                (onBlur)=\"onEvent(field, $event, 'blur')\"\n                (onFocus)=\"onEvent(field, $event, 'focus')\"\n              >\n                @if (field.config.attributes.templateHeader) {\n                  <ng-container\n                    [ngTemplateOutlet]=\"field.config.attributes.templateHeader\"\n                  />\n                }\n                @if (field.config.attributes.templateFooter) {\n                  <ng-container\n                    [ngTemplateOutlet]=\"field.config.attributes.templateFooter\"\n                  />\n                }\n              </p-password>\n            }\n\n            <!-- textarea -->\n            @case ('textarea') {\n              <textarea\n                pTextarea\n                [id]=\"inputId(field, idSuffix)\"\n                [formControlName]=\"field.formControlName!\"\n                [rows]=\"field.config.attributes.rows ?? 3\"\n                [cols]=\"field.config.attributes.cols ?? 30\"\n                [autoResize]=\"field.config.attributes.autoResize\"\n                [placeholder]=\"field.config.attributes.placeholder ?? ''\"\n                (change)=\"onEvent(field, $event)\"\n                (input)=\"onEvent(field, $event)\"\n                (focus)=\"onEvent(field, $event)\"\n                (blur)=\"onEvent(field, $event)\"\n              >\n              </textarea>\n            }\n\n            <!-- select -->\n            @case ('select') {\n              <p-select\n                [id]=\"inputId(field, idSuffix)\"\n                [inputId]=\"inputId(field, idSuffix)\"\n                [attr.aria-labelledby]=\"field.formControlName + 'Label'\"\n                [formControlName]=\"field.formControlName!\"\n                [options]=\"$any(optionsFor(field))\"\n                [optionLabel]=\"field.config.attributes.optionLabel\"\n                [optionValue]=\"field.config.attributes.optionValue\"\n                [placeholder]=\"placeholderFor(field) ?? ''\"\n                [showClear]=\"field.config.attributes.showClear\"\n                [filter]=\"field.config.attributes.filter\"\n                [filterBy]=\"field.config.attributes.filterBy\"\n                [filterPlaceholder]=\"field.config.attributes.filterPlaceholder\"\n                [loading]=\"field.config.attributes.loading\"\n                [virtualScroll]=\"field.config.attributes.virtualScroll\"\n                [virtualScrollItemSize]=\"\n                  field.config.attributes.virtualScrollItemSize\n                \"\n                [lazy]=\"field.config.attributes.lazy\"\n                [emptyMessage]=\"field.config.attributes.emptyMessage\"\n                appendTo=\"body\"\n                (onChange)=\"onEvent(field, $event, 'change')\"\n                (onFocus)=\"onEvent(field, $event, 'focus')\"\n                (onBlur)=\"onEvent(field, $event, 'blur')\"\n                (onShow)=\"onEvent(field, $event, 'show')\"\n                (onHide)=\"onEvent(field, $event, 'hide')\"\n                (onClear)=\"onEvent(field, $event, 'clear')\"\n                (onLazyLoad)=\"onEvent(field, $event, 'lazyLoad')\"\n              >\n                @if (\n                  field.config.attributes.isTemplate &&\n                  field.config.attributes.template\n                ) {\n                  <ng-container\n                    [ngTemplateOutlet]=\"field.config.attributes.template\"\n                  />\n                }\n              </p-select>\n            }\n\n            <!-- multiSelect -->\n            @case ('multiSelect') {\n              <p-multiselect\n                [id]=\"inputId(field, idSuffix)\"\n                [inputId]=\"inputId(field, idSuffix)\"\n                [formControlName]=\"field.formControlName!\"\n                [options]=\"$any(optionsFor(field))\"\n                [optionLabel]=\"field.config.attributes.optionLabel\"\n                [optionValue]=\"field.config.attributes.optionValue\"\n                [placeholder]=\"field.config.attributes.placeholder ?? ''\"\n                [filter]=\"field.config.attributes.filter\"\n                [showClear]=\"field.config.attributes.showClear\"\n                [selectionLimit]=\"field.config.attributes.selectionLimit\"\n                [display]=\"field.config.attributes.display\"\n                [loading]=\"field.config.attributes.loading\"\n                [virtualScroll]=\"field.config.attributes.virtualScroll\"\n                [virtualScrollItemSize]=\"\n                  field.config.attributes.virtualScrollItemSize\n                \"\n                [scrollHeight]=\"field.config.attributes.scrollHeight\"\n                appendTo=\"body\"\n                (onChange)=\"onEvent(field, $event, 'change')\"\n                (onFocus)=\"onEvent(field, $event, 'focus')\"\n                (onBlur)=\"onEvent(field, $event, 'blur')\"\n                (onClear)=\"onEvent(field, $event, 'clear')\"\n                (onHide)=\"onEvent(field, $event, 'hide')\"\n                (onRemove)=\"onEvent(field, $event, 'remove')\"\n                (onSelectAll)=\"onEvent(field, $event, 'select')\"\n              >\n              </p-multiselect>\n            }\n\n            <!-- autocomplete -->\n            @case ('autocomplete') {\n              <p-autocomplete\n                [id]=\"inputId(field, idSuffix)\"\n                [inputId]=\"inputId(field, idSuffix)\"\n                [formControlName]=\"field.formControlName!\"\n                [placeholder]=\"field.config.attributes.placeholder ?? ''\"\n                [suggestions]=\"field.config.attributes.suggestions\"\n                [optionLabel]=\"field.config.attributes.optionLabel\"\n                [multiple]=\"field.config.attributes.multiple\"\n                [forceSelection]=\"field.config.attributes.forceSelection\"\n                [dropdown]=\"field.config.attributes.dropdown\"\n                [showClear]=\"field.config.attributes.showClear\"\n                [completeOnFocus]=\"field.config.attributes.completeOnFocus\"\n                [minLength]=\"field.config.attributes.minLength ?? 1\"\n                [delay]=\"field.config.attributes.delay ?? 300\"\n                [virtualScroll]=\"field.config.attributes.virtualScroll\"\n                [virtualScrollItemSize]=\"\n                  field.config.attributes.virtualScrollItemSize\n                \"\n                [scrollHeight]=\"field.config.attributes.scrollHeight\"\n                appendTo=\"body\"\n                (completeMethod)=\"onEvent(field, $event, 'complete')\"\n                (onSelect)=\"onEvent(field, $event, 'select')\"\n                (onUnselect)=\"onEvent(field, $event, 'unselect')\"\n                (onAdd)=\"onEvent(field, $event, 'add')\"\n                (onFocus)=\"onEvent(field, $event, 'focus')\"\n                (onBlur)=\"onEvent(field, $event, 'blur')\"\n                (onClear)=\"onEvent(field, $event, 'clear')\"\n                (onInputKeydown)=\"onEvent(field, $event, 'inputKeydown')\"\n              >\n              </p-autocomplete>\n            }\n\n            <!-- toggle -->\n            @case ('toggle') {\n              <p-toggleswitch\n                [formControlName]=\"field.formControlName!\"\n                [inputId]=\"inputId(field, idSuffix)\"\n                [attr.aria-labelledby]=\"field.formControlName + 'Label'\"\n                (onChange)=\"onEvent(field, $event, 'change')\"\n              />\n            }\n\n            <!-- checkbox -->\n            @case ('checkbox') {\n              <p-checkbox\n                [inputId]=\"inputId(field, idSuffix)\"\n                [formControlName]=\"field.formControlName!\"\n                [name]=\"field.config.attributes.name ?? field.formControlName!\"\n                [value]=\"field.config.attributes.value\"\n                (onChange)=\"onEvent(field, $event, 'change')\"\n              />\n            }\n\n            <!-- radio -->\n            @case ('radio') {\n              @for (opt of $any(optionsFor(field)); track $index) {\n                <div class=\"ngx-radio-item\">\n                  <p-radiobutton\n                    [inputId]=\"field.formControlName + '_' + $index\"\n                    [formControlName]=\"field.formControlName!\"\n                    [name]=\"field.formControlName!\"\n                    [value]=\"\n                      opt[field.config.attributes.optionValue ?? 'value']\n                    \"\n                    (onClick)=\"onEvent(field, $event, 'change')\"\n                  />\n                  <label [for]=\"field.formControlName + '_' + $index\">\n                    {{ opt[field.config.attributes.optionLabel ?? 'label'] }}\n                  </label>\n                </div>\n              }\n            }\n\n            <!-- datePicker / time / month / year -->\n            @case ('datePicker') {\n              <p-datepicker\n                [inputId]=\"inputId(field, idSuffix)\"\n                [formControlName]=\"field.formControlName!\"\n                [placeholder]=\"field.config.attributes.placeholder ?? ''\"\n                [showIcon]=\"field.config.attributes.showIcon\"\n                [minDate]=\"minDateFor(field)!\"\n                [maxDate]=\"maxDateFor(field)!\"\n                [selectionMode]=\"$any(field.config.attributes.selectionMode)\"\n                [readonlyInput]=\"field.config.attributes.readonlyInput\"\n                [showButtonBar]=\"field.config.attributes.showButtonBar\"\n                [showTime]=\"field.config.attributes.showTime\"\n                [hourFormat]=\"field.config.attributes.hourFormat\"\n                [timeOnly]=\"field.config.attributes.timeOnly\"\n                [view]=\"$any(field.config.attributes.view)\"\n                [dateFormat]=\"field.config.attributes.dateFormat\"\n                [numberOfMonths]=\"field.config.attributes.numberOfMonths ?? 1\"\n                [showClear]=\"field.config.attributes.showClear\"\n                appendTo=\"body\"\n                (onSelect)=\"onEvent(field, $event, 'select')\"\n                (onBlur)=\"onEvent(field, $event, 'blur')\"\n                (onFocus)=\"onEvent(field, $event, 'focus')\"\n                (onClear)=\"onEvent(field, $event, 'clear')\"\n              >\n              </p-datepicker>\n            }\n\n            @case ('time') {\n              <p-datepicker\n                [inputId]=\"inputId(field, idSuffix)\"\n                [formControlName]=\"field.formControlName!\"\n                [placeholder]=\"field.config.attributes.placeholder ?? ''\"\n                [showIcon]=\"true\"\n                [iconDisplay]=\"'input'\"\n                [timeOnly]=\"true\"\n                [showTime]=\"true\"\n                [hourFormat]=\"field.config.attributes.hourFormat ?? '24'\"\n                appendTo=\"body\"\n                (onSelect)=\"onEvent(field, $event, 'select')\"\n              />\n            }\n\n            @case ('month') {\n              <p-datepicker\n                [inputId]=\"inputId(field, idSuffix)\"\n                [formControlName]=\"field.formControlName!\"\n                [placeholder]=\"field.config.attributes.placeholder ?? ''\"\n                [showIcon]=\"true\"\n                [view]=\"'month'\"\n                [dateFormat]=\"field.config.attributes.dateFormat ?? 'mm/yy'\"\n                [readonlyInput]=\"true\"\n                appendTo=\"body\"\n                (onSelect)=\"onEvent(field, $event, 'select')\"\n              />\n            }\n\n            @case ('year') {\n              <p-datepicker\n                [inputId]=\"inputId(field, idSuffix)\"\n                [formControlName]=\"field.formControlName!\"\n                [placeholder]=\"field.config.attributes.placeholder ?? ''\"\n                [showIcon]=\"true\"\n                [view]=\"'year'\"\n                [dateFormat]=\"field.config.attributes.dateFormat ?? 'yy'\"\n                [readonlyInput]=\"true\"\n                appendTo=\"body\"\n                (onSelect)=\"onEvent(field, $event, 'select')\"\n              />\n            }\n\n            <!-- slider -->\n            @case ('slider') {\n              <p-slider\n                [formControlName]=\"field.formControlName!\"\n                [min]=\"field.config.attributes.min ?? 0\"\n                [max]=\"field.config.attributes.max ?? 100\"\n                [step]=\"field.config.attributes.step ?? 1\"\n                [range]=\"field.config.attributes.range\"\n                [orientation]=\"\n                  field.config.attributes.orientation ?? 'horizontal'\n                \"\n                (onChange)=\"onEvent(field, $event, 'change')\"\n              />\n            }\n\n            <!-- rating -->\n            @case ('rating') {\n              <p-rating\n                [formControlName]=\"field.formControlName!\"\n                [stars]=\"field.config.attributes.stars ?? 5\"\n                (onRate)=\"onEvent(field, $event, 'change')\"\n              />\n            }\n\n            <!-- colorPicker -->\n            @case ('colorPicker') {\n              <p-colorpicker\n                [formControlName]=\"field.formControlName!\"\n                [inline]=\"field.config.attributes.inline\"\n                (onChange)=\"onEvent(field, $event, 'change')\"\n              />\n            }\n          }\n\n          @if (\n            field.config.attributes.fieldPos === 'right' &&\n            field.config.attributes.fieldIcon\n          ) {\n            <p-inputgroup-addon>\n              <i [class]=\"field.config.attributes.fieldIcon\">\n                {{ field.config.attributes.fieldIconText ?? '' }}\n              </i>\n            </p-inputgroup-addon>\n          }\n        </p-inputgroup>\n      }\n    }\n  </ng-container>\n</ng-template>\n", styles: [".ngx-form-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:1.25rem}.ngx-col-1{grid-column:span 1;min-width:0}.ngx-col-2{grid-column:span 2;min-width:0}.ngx-col-3{grid-column:span 3;min-width:0}.ngx-col-4{grid-column:span 4;min-width:0}.ngx-col-5{grid-column:span 5;min-width:0}.ngx-col-6{grid-column:span 6;min-width:0}.ngx-col-7{grid-column:span 7;min-width:0}.ngx-col-8{grid-column:span 8;min-width:0}.ngx-col-9{grid-column:span 9;min-width:0}.ngx-col-10{grid-column:span 10;min-width:0}.ngx-col-11{grid-column:span 11;min-width:0}.ngx-col-12{grid-column:span 12;min-width:0}@media(max-width:640px){.ngx-col-1,.ngx-col-2,.ngx-col-3,.ngx-col-4,.ngx-col-5,.ngx-col-6,.ngx-col-7,.ngx-col-8,.ngx-col-9,.ngx-col-10,.ngx-col-11{grid-column:span 12}}.ngx-form-title{font-size:1.25rem;font-weight:700;margin-bottom:1.25rem;color:var(--p-text-color, #111827)}.ngx-field-label{display:block;font-size:.775rem;font-weight:600;color:var(--p-text-muted-color, #4b5563);margin-bottom:.3rem;letter-spacing:.01em}.ngx-required{color:var(--p-red-500, #ef4444);margin-left:.15rem}.ngx-field-inner{margin-top:.2rem;width:100%}.ngx-field-inner .p-inputgroup,.ngx-field-inner .p-select,.ngx-field-inner .p-multiselect,.ngx-field-inner .p-autocomplete,.ngx-field-inner .p-datepicker,.ngx-field-inner .p-inputtext,.ngx-field-inner .p-textarea,.ngx-field-inner .p-password{width:100%}:host ::ng-deep .p-inputgroup{border:1px solid var(--p-surface-border, #d1d5db);border-radius:8px;background:#fff;transition:all .2s;display:flex;align-items:stretch}:host ::ng-deep .p-inputgroup p-inputgroup-addon,:host ::ng-deep .p-inputgroup .p-inputgroup-addon{background:transparent!important;border:none!important;color:#9ca3af;padding:.75rem .5rem .75rem 1rem;display:flex;align-items:center}:host ::ng-deep .p-inputgroup p-inputgroup-addon i,:host ::ng-deep .p-inputgroup .p-inputgroup-addon i{font-size:1.15rem}:host ::ng-deep .p-inputgroup:has(textarea) p-inputgroup-addon,:host ::ng-deep .p-inputgroup:has(textarea) .p-inputgroup-addon{align-items:flex-start;padding-top:1rem}:host ::ng-deep .p-inputgroup:has(input:focus),:host ::ng-deep .p-inputgroup:has(textarea:focus),:host ::ng-deep .p-inputgroup:has(.p-focus){border-color:#3b82f6;box-shadow:0 0 0 2px #3b82f633}:host ::ng-deep .p-inputgroup>.p-inputtext,:host ::ng-deep .p-inputgroup>.p-textarea,:host ::ng-deep .p-inputgroup p-select>.p-select,:host ::ng-deep .p-inputgroup p-multiselect>.p-multiselect,:host ::ng-deep .p-inputgroup p-autocomplete>.p-autocomplete,:host ::ng-deep .p-inputgroup p-datepicker>.p-datepicker{border:none!important;background:transparent!important;box-shadow:none!important;flex:1 1 auto;min-width:0}:host ::ng-deep .p-inputgroup:has(p-select),:host ::ng-deep .p-inputgroup:has(p-multiselect){position:relative}:host ::ng-deep .p-inputgroup:has(p-select) p-inputgroup-addon,:host ::ng-deep .p-inputgroup:has(p-multiselect) p-inputgroup-addon{position:absolute;z-index:2;border:none!important;background:transparent!important;height:100%;width:2.5rem;display:flex;align-items:center;justify-content:center}:host ::ng-deep .p-inputgroup:has(p-select) p-inputgroup-addon:first-child,:host ::ng-deep .p-inputgroup:has(p-multiselect) p-inputgroup-addon:first-child{left:0}:host ::ng-deep .p-inputgroup:has(p-select) p-select,:host ::ng-deep .p-inputgroup:has(p-select) p-multiselect,:host ::ng-deep .p-inputgroup:has(p-multiselect) p-select,:host ::ng-deep .p-inputgroup:has(p-multiselect) p-multiselect{width:100%;flex:1 1 100%}:host ::ng-deep .p-inputgroup:has(p-inputgroup-addon:first-child):has(p-select) .p-select-label,:host ::ng-deep .p-inputgroup:has(p-inputgroup-addon:first-child):has(p-select) .p-multiselect-label,:host ::ng-deep .p-inputgroup:has(p-inputgroup-addon:first-child):has(p-multiselect) .p-select-label,:host ::ng-deep .p-inputgroup:has(p-inputgroup-addon:first-child):has(p-multiselect) .p-multiselect-label{padding-left:2.75rem!important}:host ::ng-deep .ngx-toggle-card{display:flex;align-items:center;justify-content:space-between;padding:.9rem 1rem;border:1px solid var(--p-surface-border, #e5e7eb);border-radius:8px;background:#fff;margin-bottom:.75rem}:host ::ng-deep .ngx-toggle-card .ngx-toggle-card-icon{width:36px;height:36px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:1.1rem;margin-right:1rem}:host ::ng-deep .ngx-toggle-card .ngx-toggle-card-body{flex:1;min-width:0;padding-right:1.5rem}:host ::ng-deep .ngx-toggle-card .ngx-toggle-card-body .ngx-toggle-label{font-weight:600;color:var(--gray-900);margin-bottom:.2rem;font-size:.95rem}:host ::ng-deep .ngx-toggle-card .ngx-toggle-card-body .ngx-toggle-desc{color:var(--gray-500);font-size:.8rem;line-height:1.4}:host ::ng-deep .ngx-toggle-card p-toggleswitch,:host ::ng-deep .ngx-toggle-card .p-toggleswitch{flex:0 0 auto!important;width:44px!important;height:24px!important;display:block!important;position:relative!important;box-sizing:border-box!important}:host ::ng-deep .ngx-toggle-card .p-toggleswitch-slider{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;border-radius:24px!important;transition:background-color .2s,box-shadow .2s!important;background:var(--p-surface-300, #cbd5e1)!important}:host ::ng-deep .ngx-toggle-card .p-toggleswitch-handle{position:absolute!important;top:50%!important;left:3px!important;margin-top:-9px!important;width:18px!important;height:18px!important;border-radius:50%!important;background:#fff!important;transition:transform .2s!important;box-shadow:0 1px 3px #0003!important}:host ::ng-deep .ngx-toggle-card .p-toggleswitch.p-toggleswitch-checked .p-toggleswitch-handle{transform:translate(20px)!important}:host ::ng-deep .ngx-toggle-card .p-toggleswitch.p-toggleswitch-checked .p-toggleswitch-slider{background:var(--toggle-color, var(--p-primary-500))!important}::ng-deep .p-select-overlay,::ng-deep .p-multiselect-overlay,::ng-deep .p-autocomplete-overlay{background:#fff!important;box-shadow:0 4px 15px #00000014,0 1px 3px #0000000d!important;border:1px solid var(--p-surface-border, #e5e7eb)!important;border-radius:8px!important;margin-top:6px!important;padding:.25rem!important}::ng-deep .p-select-overlay .p-select-header,::ng-deep .p-select-overlay .p-multiselect-header,::ng-deep .p-multiselect-overlay .p-select-header,::ng-deep .p-multiselect-overlay .p-multiselect-header,::ng-deep .p-autocomplete-overlay .p-select-header,::ng-deep .p-autocomplete-overlay .p-multiselect-header{padding:.5rem!important;margin-bottom:.25rem}::ng-deep .p-select-overlay .p-select-filter-container .p-inputtext,::ng-deep .p-select-overlay .p-select-filter,::ng-deep .p-select-overlay .p-multiselect-filter-container .p-inputtext,::ng-deep .p-select-overlay .p-multiselect-filter,::ng-deep .p-multiselect-overlay .p-select-filter-container .p-inputtext,::ng-deep .p-multiselect-overlay .p-select-filter,::ng-deep .p-multiselect-overlay .p-multiselect-filter-container .p-inputtext,::ng-deep .p-multiselect-overlay .p-multiselect-filter,::ng-deep .p-autocomplete-overlay .p-select-filter-container .p-inputtext,::ng-deep .p-autocomplete-overlay .p-select-filter,::ng-deep .p-autocomplete-overlay .p-multiselect-filter-container .p-inputtext,::ng-deep .p-autocomplete-overlay .p-multiselect-filter{padding:.5rem .75rem!important}::ng-deep .p-select-overlay .p-select-list,::ng-deep .p-select-overlay .p-multiselect-list,::ng-deep .p-multiselect-overlay .p-select-list,::ng-deep .p-multiselect-overlay .p-multiselect-list,::ng-deep .p-autocomplete-overlay .p-select-list,::ng-deep .p-autocomplete-overlay .p-multiselect-list{padding:0!important;display:flex;flex-direction:column;gap:2px}::ng-deep .p-select-overlay .p-select-option,::ng-deep .p-select-overlay .p-multiselect-option,::ng-deep .p-multiselect-overlay .p-select-option,::ng-deep .p-multiselect-overlay .p-multiselect-option,::ng-deep .p-autocomplete-overlay .p-select-option,::ng-deep .p-autocomplete-overlay .p-multiselect-option{border-radius:6px!important;margin:0!important;padding:.5rem .75rem!important;display:flex;align-items:center}::ng-deep .p-select-overlay .p-select-option:hover,::ng-deep .p-select-overlay .p-multiselect-option:hover,::ng-deep .p-multiselect-overlay .p-select-option:hover,::ng-deep .p-multiselect-overlay .p-multiselect-option:hover,::ng-deep .p-autocomplete-overlay .p-select-option:hover,::ng-deep .p-autocomplete-overlay .p-multiselect-option:hover{background:var(--p-surface-hover, #f3f4f6)!important}::ng-deep .p-select-overlay .p-select-option[data-p-highlight=true],::ng-deep .p-select-overlay .p-select-option.p-select-option-selected,::ng-deep .p-select-overlay .p-multiselect-option[data-p-highlight=true],::ng-deep .p-select-overlay .p-multiselect-option.p-select-option-selected,::ng-deep .p-multiselect-overlay .p-select-option[data-p-highlight=true],::ng-deep .p-multiselect-overlay .p-select-option.p-select-option-selected,::ng-deep .p-multiselect-overlay .p-multiselect-option[data-p-highlight=true],::ng-deep .p-multiselect-overlay .p-multiselect-option.p-select-option-selected,::ng-deep .p-autocomplete-overlay .p-select-option[data-p-highlight=true],::ng-deep .p-autocomplete-overlay .p-select-option.p-select-option-selected,::ng-deep .p-autocomplete-overlay .p-multiselect-option[data-p-highlight=true],::ng-deep .p-autocomplete-overlay .p-multiselect-option.p-select-option-selected{background:#f1f5f9!important;color:var(--p-primary-700, #334155)!important;font-weight:500}.ngx-error{display:block;color:var(--p-red-500, #ef4444);font-size:.72rem;line-height:1.4;min-height:1.008rem;margin-top:.25rem;font-weight:500}.ngx-error--placeholder{visibility:hidden}.ngx-hint{display:block;font-size:.72rem;margin-top:.25rem;color:var(--p-text-muted-color, #9ca3af);line-height:1.4}.ngx-btn-wrap{display:flex;align-items:flex-end;justify-content:stretch;width:100%;height:100%;padding-top:1.5rem}.ngx-btn-wrap button{width:100%;justify-content:center;font-weight:600}.ngx-file-inline{display:flex;flex-wrap:wrap;gap:.5rem}.ngx-image-list{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.75rem}.ngx-image-card{position:relative}.ngx-image-remove{position:absolute;top:0;right:0;z-index:2;width:22px;height:22px;display:flex;align-items:center;justify-content:center;border-radius:50%;cursor:pointer;background:#fff;color:#111;box-shadow:0 2px 6px #0003;transform:translate(40%,-40%);font-size:.65rem;transition:background .15s,color .15s}.ngx-image-remove:hover{background:#fee2e2;color:#dc2626}.ngx-image-wrapper{position:relative;width:80px;height:80px;border-radius:8px;overflow:hidden;border:1px solid var(--p-surface-border, #e5e7eb)}.ngx-preview-img{object-fit:cover;transition:opacity .25s ease}.ngx-preview-img.loading{opacity:0}.ngx-preview-img.loaded{opacity:1}.ngx-img-skeleton{position:absolute;inset:0;background:linear-gradient(90deg,#f0f0f0 25%,#e0e0e0,#f0f0f0 75%);background-size:200% 100%;animation:shimmer 1.4s infinite;border-radius:8px}@keyframes shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}.ngx-toggle-card{display:flex;align-items:center;gap:.85rem;padding:.9rem 1rem;border:1px solid var(--p-surface-border, #e5e7eb);border-radius:10px;background:#fff;width:100%;transition:border-color .2s,box-shadow .2s,background .2s}.ngx-toggle-card:has(.p-toggleswitch.p-toggleswitch-checked){border-color:var(--toggle-color, var(--p-primary-500, #3b82f6));box-shadow:0 0 0 3px color-mix(in srgb,var(--toggle-color, #3b82f6) 12%,transparent)}.ngx-toggle-card-icon{width:42px;height:42px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:1rem;flex-shrink:0}.ngx-toggle-card-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:.15rem}.ngx-toggle-card-label{font-size:.84rem;font-weight:600;color:var(--p-text-color, #111827);line-height:1.3}.ngx-toggle-card-desc{font-size:.72rem;color:var(--p-text-muted-color, #6b7280);line-height:1.4}.ngx-radio-item{display:flex;align-items:center;gap:.5rem;margin-bottom:.35rem;font-size:.875rem;color:var(--p-text-color, #374151)}.ngx-field-group{border:1px solid var(--p-surface-border, #e5e7eb);border-radius:10px;padding:1rem 1rem .5rem;display:flex;flex-direction:column;gap:.75rem}.ngx-field-group-row{display:block}.ngx-repeater{display:flex;flex-direction:column;gap:.75rem}.ngx-repeater-row{display:grid;grid-template-columns:1fr auto;gap:.5rem;align-items:start;padding:.75rem;border:1px solid var(--p-surface-border, #e5e7eb);border-radius:10px;background:var(--p-surface-50, #f9fafb)}.ngx-repeater-row-fields{display:grid;grid-template-columns:repeat(12,1fr);gap:.75rem;min-width:0}.ngx-repeater-remove{margin-top:.2rem}.ngx-repeater-add{align-self:flex-start}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { formTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "formTitle", required: false }] }], fieldsInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "fieldsInput", required: false }] }], schema: [{ type: i0.Input, args: [{ isSignal: true, alias: "schema", required: false }] }], stepFields: [{ type: i0.Input, args: [{ isSignal: true, alias: "stepFields", required: false }] }], formSubmit: [{ type: i0.Output, args: ["formSubmit"] }], formChange: [{ type: i0.Output, args: ["formChange"] }] } });
+
+/**
+ * Wizard-style wrapper that drives `<ngx-json-form>` step-by-step using the
+ * `FormSchema.steps` definition. Renders a header strip with step indicators,
+ * the current step's fields, and Back / Next / Submit controls.
+ */
+class NgxJsonFormStepperComponent {
+    schema = input.required(...(ngDevMode ? [{ debugName: "schema" }] : /* istanbul ignore next */ []));
+    submitLabel = input('Submit', ...(ngDevMode ? [{ debugName: "submitLabel" }] : /* istanbul ignore next */ []));
+    formSubmit = output();
+    formChange = output();
+    formService = inject(FormEngineService);
+    activeIndex = computed(() => this.formService.activeStepIndex(), ...(ngDevMode ? [{ debugName: "activeIndex" }] : /* istanbul ignore next */ []));
+    activeStep = computed(() => this.formService.activeStep(), ...(ngDevMode ? [{ debugName: "activeStep" }] : /* istanbul ignore next */ []));
+    isLast = computed(() => {
+        const steps = this.schema().steps ?? [];
+        return this.activeIndex() === steps.length - 1;
+    }, ...(ngDevMode ? [{ debugName: "isLast" }] : /* istanbul ignore next */ []));
+    constructor() {
+        // Reset the wizard whenever the schema input changes
+        effect(() => {
+            this.schema();
+            this.formService.goToStep(0);
+        });
+    }
+    back() {
+        this.formService.prevStep();
+    }
+    next() {
+        this.formService.nextStep();
+    }
+    jumpTo(i) {
+        if (i <= this.activeIndex())
+            this.formService.goToStep(i);
+    }
+    submit() {
+        if (!this.formService.markAllAsTouchedAndValidate())
+            return;
+        const values = this.formService.buildSubmitPayload();
+        this.formSubmit.emit({
+            field: { config: { attributes: { inputType: 'button', buttonRole: 'submit' } } },
+            values,
+            valid: true,
+            type: 'submit',
+        });
+    }
+    /** Pass-through when the inner form emits formSubmit (e.g. via an inline button) */
+    onSubmit(e) {
+        this.formSubmit.emit(e);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: NgxJsonFormStepperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", type: NgxJsonFormStepperComponent, isStandalone: true, selector: "ngx-json-form-stepper", inputs: { schema: { classPropertyName: "schema", publicName: "schema", isSignal: true, isRequired: true, transformFunction: null }, submitLabel: { classPropertyName: "submitLabel", publicName: "submitLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { formSubmit: "formSubmit", formChange: "formChange" }, ngImport: i0, template: `
+    @if (schema().steps?.length) {
+      <div class="ngx-stepper">
+        <!-- Step indicators -->
+        <ol class="ngx-stepper-bar">
+          @for (step of schema().steps; track step.id) {
+            <li
+              class="ngx-stepper-item"
+              [ngClass]="{
+                active: $index === activeIndex(),
+                done: $index < activeIndex()
+              }"
+              (click)="jumpTo($index)"
+            >
+              <span class="ngx-stepper-num">
+                @if ($index < activeIndex()) {
+                  <i class="pi pi-check"></i>
+                } @else {
+                  {{ $index + 1 }}
+                }
+              </span>
+              <span class="ngx-stepper-label">
+                @if (step.icon) {
+                  <i [class]="step.icon"></i>
+                }
+                {{ step.title }}
+              </span>
+            </li>
+          }
+        </ol>
+
+        <!-- Step body -->
+        @if (activeStep(); as step) {
+          @if (step.description) {
+            <p class="ngx-stepper-desc">{{ step.description }}</p>
+          }
+          <ngx-json-form
+            [schema]="schema()"
+            [stepFields]="step.fields"
+            (formChange)="formChange.emit($event)"
+            (formSubmit)="onSubmit($event)"
+          />
+        }
+
+        <!-- Controls -->
+        <div class="ngx-stepper-actions">
+          <button
+            pButton
+            type="button"
+            class="p-button-text"
+            label="Back"
+            icon="pi pi-arrow-left"
+            [disabled]="activeIndex() === 0"
+            (click)="back()"
+          ></button>
+          @if (!isLast()) {
+            <button
+              pButton
+              type="button"
+              label="Next"
+              icon="pi pi-arrow-right"
+              iconPos="right"
+              (click)="next()"
+            ></button>
+          } @else {
+            <button
+              pButton
+              type="button"
+              [label]="submitLabel()"
+              icon="pi pi-check"
+              iconPos="right"
+              [disabled]="!formService.formValid()"
+              (click)="submit()"
+            ></button>
+          }
+        </div>
+      </div>
+    }
+  `, isInline: true, styles: [".ngx-stepper{display:flex;flex-direction:column;gap:1.25rem}.ngx-stepper-bar{list-style:none;margin:0;padding:0;display:flex;gap:.5rem;align-items:stretch;border-bottom:1px solid var(--p-surface-border, #e5e7eb);padding-bottom:1rem;overflow-x:auto}.ngx-stepper-item{flex:1 1 0;min-width:0;display:flex;align-items:center;gap:.5rem;padding:.5rem .75rem;border-radius:8px;cursor:pointer;color:var(--p-text-muted-color, #6b7280);font-size:.85rem;transition:background .15s,color .15s;-webkit-user-select:none;user-select:none}.ngx-stepper-item:hover{background:var(--p-surface-hover, #f3f4f6)}.ngx-stepper-item.active{color:var(--p-primary-700, #1d4ed8);background:var(--p-primary-50, #eff6ff)}.ngx-stepper-item.active .ngx-stepper-num{background:var(--p-primary-500, #3b82f6);color:#fff}.ngx-stepper-item.done{color:var(--p-primary-600, #2563eb)}.ngx-stepper-item.done .ngx-stepper-num{background:var(--p-primary-100, #dbeafe);color:var(--p-primary-700, #1d4ed8)}.ngx-stepper-num{flex:0 0 auto;width:26px;height:26px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:var(--p-surface-200, #e5e7eb);color:var(--p-text-muted-color, #6b7280);font-size:.78rem;font-weight:600}.ngx-stepper-label{display:inline-flex;align-items:center;gap:.4rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ngx-stepper-desc{margin:0;font-size:.85rem;color:var(--p-text-muted-color, #6b7280)}.ngx-stepper-actions{display:flex;justify-content:space-between;border-top:1px solid var(--p-surface-border, #e5e7eb);padding-top:1rem}\n"], dependencies: [{ kind: "component", type: NgxJsonFormComponent, selector: "ngx-json-form", inputs: ["formTitle", "fieldsInput", "schema", "stepFields"], outputs: ["formSubmit", "formChange"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i11.ButtonDirective, selector: "[pButton]", inputs: ["ptButtonDirective", "pButtonPT", "pButtonUnstyled", "hostName", "text", "plain", "raised", "size", "outlined", "rounded", "iconPos", "loadingIcon", "fluid", "label", "icon", "loading", "buttonProps", "severity"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: NgxJsonFormStepperComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ngx-json-form-stepper', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgxJsonFormComponent, ButtonModule, NgClass], template: `
+    @if (schema().steps?.length) {
+      <div class="ngx-stepper">
+        <!-- Step indicators -->
+        <ol class="ngx-stepper-bar">
+          @for (step of schema().steps; track step.id) {
+            <li
+              class="ngx-stepper-item"
+              [ngClass]="{
+                active: $index === activeIndex(),
+                done: $index < activeIndex()
+              }"
+              (click)="jumpTo($index)"
+            >
+              <span class="ngx-stepper-num">
+                @if ($index < activeIndex()) {
+                  <i class="pi pi-check"></i>
+                } @else {
+                  {{ $index + 1 }}
+                }
+              </span>
+              <span class="ngx-stepper-label">
+                @if (step.icon) {
+                  <i [class]="step.icon"></i>
+                }
+                {{ step.title }}
+              </span>
+            </li>
+          }
+        </ol>
+
+        <!-- Step body -->
+        @if (activeStep(); as step) {
+          @if (step.description) {
+            <p class="ngx-stepper-desc">{{ step.description }}</p>
+          }
+          <ngx-json-form
+            [schema]="schema()"
+            [stepFields]="step.fields"
+            (formChange)="formChange.emit($event)"
+            (formSubmit)="onSubmit($event)"
+          />
+        }
+
+        <!-- Controls -->
+        <div class="ngx-stepper-actions">
+          <button
+            pButton
+            type="button"
+            class="p-button-text"
+            label="Back"
+            icon="pi pi-arrow-left"
+            [disabled]="activeIndex() === 0"
+            (click)="back()"
+          ></button>
+          @if (!isLast()) {
+            <button
+              pButton
+              type="button"
+              label="Next"
+              icon="pi pi-arrow-right"
+              iconPos="right"
+              (click)="next()"
+            ></button>
+          } @else {
+            <button
+              pButton
+              type="button"
+              [label]="submitLabel()"
+              icon="pi pi-check"
+              iconPos="right"
+              [disabled]="!formService.formValid()"
+              (click)="submit()"
+            ></button>
+          }
+        </div>
+      </div>
+    }
+  `, styles: [".ngx-stepper{display:flex;flex-direction:column;gap:1.25rem}.ngx-stepper-bar{list-style:none;margin:0;padding:0;display:flex;gap:.5rem;align-items:stretch;border-bottom:1px solid var(--p-surface-border, #e5e7eb);padding-bottom:1rem;overflow-x:auto}.ngx-stepper-item{flex:1 1 0;min-width:0;display:flex;align-items:center;gap:.5rem;padding:.5rem .75rem;border-radius:8px;cursor:pointer;color:var(--p-text-muted-color, #6b7280);font-size:.85rem;transition:background .15s,color .15s;-webkit-user-select:none;user-select:none}.ngx-stepper-item:hover{background:var(--p-surface-hover, #f3f4f6)}.ngx-stepper-item.active{color:var(--p-primary-700, #1d4ed8);background:var(--p-primary-50, #eff6ff)}.ngx-stepper-item.active .ngx-stepper-num{background:var(--p-primary-500, #3b82f6);color:#fff}.ngx-stepper-item.done{color:var(--p-primary-600, #2563eb)}.ngx-stepper-item.done .ngx-stepper-num{background:var(--p-primary-100, #dbeafe);color:var(--p-primary-700, #1d4ed8)}.ngx-stepper-num{flex:0 0 auto;width:26px;height:26px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:var(--p-surface-200, #e5e7eb);color:var(--p-text-muted-color, #6b7280);font-size:.78rem;font-weight:600}.ngx-stepper-label{display:inline-flex;align-items:center;gap:.4rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ngx-stepper-desc{margin:0;font-size:.85rem;color:var(--p-text-muted-color, #6b7280)}.ngx-stepper-actions{display:flex;justify-content:space-between;border-top:1px solid var(--p-surface-border, #e5e7eb);padding-top:1rem}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { schema: [{ type: i0.Input, args: [{ isSignal: true, alias: "schema", required: true }] }], submitLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "submitLabel", required: false }] }], formSubmit: [{ type: i0.Output, args: ["formSubmit"] }], formChange: [{ type: i0.Output, args: ["formChange"] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { NgxJsonFormComponent, NgxJsonFormStepperComponent };
+//# sourceMappingURL=ngx-json-forms-primeng.mjs.map