ngx-dynamic-entity 0.0.1

package/fesm2022/ngx-dynamic-entity.mjs

@@ -0,0 +1,1352 @@
+import * as i0 from '@angular/core';
+import { InjectionToken, makeEnvironmentProviders, inject, Injectable, Input, Component, signal, ViewContainerRef, ViewChild, EventEmitter, Output, computed } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+import { map, shareReplay } from 'rxjs/operators';
+import * as i1 from '@angular/forms';
+import { ReactiveFormsModule, Validators, FormBuilder } from '@angular/forms';
+
+/** Base URL for the dynamic-entity-server API */
+const DYNAMIC_ENTITY_API_URL = new InjectionToken('DYNAMIC_ENTITY_API_URL');
+/** Roles that see XXXXXXXXX for masked fields (ADR-003) */
+const MASKED_ROLES = new InjectionToken('MASKED_ROLES');
+/** Migration strategy for the frontend — 'strict' | 'graceful' only (ADR-005, never 'auto') */
+const MIGRATION_STRATEGY = new InjectionToken('MIGRATION_STRATEGY');
+/** Registry: fieldType string → Angular component class */
+const FIELD_TYPE_REGISTRY = new InjectionToken('FIELD_TYPE_REGISTRY');
+/** Registry: entity key → async () => options[] loader function */
+const ENTITY_REF_REGISTRY = new InjectionToken('ENTITY_REF_REGISTRY');
+/** Registry: validator key → ValidatorFn */
+const VALIDATOR_REGISTRY = new InjectionToken('VALIDATOR_REGISTRY');
+/** Registry: hook key → async (data, context) => data */
+const HOOK_REGISTRY = new InjectionToken('HOOK_REGISTRY');
+
+/**
+ * Provider function for ngx-dynamic-entity.
+ * All options are optional — consumers provide only what they use (ISP).
+ *
+ * Usage in app.config.ts:
+ *   provideNgxDynamicEntity({
+ *     apiUrl: 'http://localhost:3000/api/entities',
+ *     maskedRoles: ['IT_SUPPORT'],
+ *     entityRefs: { clients: () => clientService.getOptions() },
+ *   })
+ */
+const provideNgxDynamicEntity = (config = {}) => makeEnvironmentProviders([
+    { provide: DYNAMIC_ENTITY_API_URL, useValue: config.apiUrl ?? '' },
+    { provide: MASKED_ROLES, useValue: config.maskedRoles ?? [] },
+    { provide: MIGRATION_STRATEGY, useValue: config.migrationStrategy ?? 'graceful' },
+    { provide: FIELD_TYPE_REGISTRY, useValue: new Map(Object.entries(config.fieldTypes ?? {})) },
+    { provide: ENTITY_REF_REGISTRY, useValue: new Map(Object.entries(config.entityRefs ?? {})) },
+    { provide: VALIDATOR_REGISTRY, useValue: new Map(Object.entries(config.validators ?? {})) },
+    { provide: HOOK_REGISTRY, useValue: new Map(Object.entries(config.hooks ?? {})) },
+]);
+
+/**
+ * ConfigService — fetches entity configs from the dynamic-entity-server API.
+ * Uses shareReplay(1) to cache per config key — avoids duplicate HTTP requests.
+ * Following ONEHERMES smart service pattern: Observable$ + shareReplay.
+ */
+class ConfigService {
+    http = inject(HttpClient);
+    apiUrl = inject(DYNAMIC_ENTITY_API_URL, { optional: true }) ?? '';
+    cache = new Map();
+    /** Get a config by entity key. Cached via shareReplay(1). */
+    getConfig(entity) {
+        if (!this.cache.has(entity)) {
+            const config$ = this.http
+                .get(`${this.apiUrl}/config/${entity}`)
+                .pipe(map(res => res.data), // ADR-004: Success guarantees data
+            shareReplay(1));
+            this.cache.set(entity, config$);
+        }
+        return this.cache.get(entity);
+    }
+    /** List all configs */
+    listConfigs() {
+        return this.http
+            .get(`${this.apiUrl}/config`)
+            .pipe(map(res => res.data)); // ADR-004: Success guarantees data
+    }
+    /** Create a new config */
+    saveConfig(config) {
+        return this.http
+            .post(`${this.apiUrl}/config`, config)
+            .pipe(map(res => res.data));
+    }
+    /** Update an existing config */
+    updateConfig(entity, updates) {
+        return this.http
+            .put(`${this.apiUrl}/config/${entity}`, updates)
+            .pipe(map(res => {
+            this.invalidate(entity);
+            return res.data;
+        }));
+    }
+    /** Invalidate cache for an entity (call after config update) */
+    invalidate(entity) {
+        this.cache.delete(entity);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ConfigService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ConfigService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ConfigService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+/** ADR-008: Shared field component contract — all 8 built-in types implement this. */
+class TextFieldComponent {
+    field;
+    control;
+    language = 'en';
+    readonly = false;
+    masked = false;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TextFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: TextFieldComponent, isStandalone: true, selector: "ngx-text-field", inputs: { field: "field", control: "control", language: "language", readonly: "readonly", masked: "masked" }, ngImport: i0, template: `
+    <div class="ngx-field ngx-field--text" [class.ngx-field--readonly]="readonly" [class.ngx-field--masked]="masked">
+      <label class="ngx-field__label">{{ field.label[language] || field.label['en'] }}</label>
+      @if (masked) {
+        <span class="ngx-field__value ngx-field__value--masked">XXXXXXXXX</span>
+      } @else if (readonly) {
+        <span class="ngx-field__value">{{ control.value }}</span>
+      } @else {
+        <input
+          class="ngx-field__input"
+          type="text"
+          [formControl]="$any(control)"
+          [placeholder]="field.placeholder?.[language] || field.placeholder?.['en'] || ''"
+          [attr.disabled]="field.disabled ? true : null"
+        />
+        @if (control.invalid && control.touched) {
+          <span class="ngx-field__error">This field has an error</span>
+        }
+      }
+    </div>
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { 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.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TextFieldComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ngx-text-field',
+                    standalone: true,
+                    imports: [ReactiveFormsModule],
+                    template: `
+    <div class="ngx-field ngx-field--text" [class.ngx-field--readonly]="readonly" [class.ngx-field--masked]="masked">
+      <label class="ngx-field__label">{{ field.label[language] || field.label['en'] }}</label>
+      @if (masked) {
+        <span class="ngx-field__value ngx-field__value--masked">XXXXXXXXX</span>
+      } @else if (readonly) {
+        <span class="ngx-field__value">{{ control.value }}</span>
+      } @else {
+        <input
+          class="ngx-field__input"
+          type="text"
+          [formControl]="$any(control)"
+          [placeholder]="field.placeholder?.[language] || field.placeholder?.['en'] || ''"
+          [attr.disabled]="field.disabled ? true : null"
+        />
+        @if (control.invalid && control.touched) {
+          <span class="ngx-field__error">This field has an error</span>
+        }
+      }
+    </div>
+  `,
+                }]
+        }], propDecorators: { field: [{
+                type: Input
+            }], control: [{
+                type: Input
+            }], language: [{
+                type: Input
+            }], readonly: [{
+                type: Input
+            }], masked: [{
+                type: Input
+            }] } });
+
+class TextareaFieldComponent {
+    field;
+    control;
+    language = 'en';
+    readonly = false;
+    masked = false;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TextareaFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: TextareaFieldComponent, isStandalone: true, selector: "ngx-textarea-field", inputs: { field: "field", control: "control", language: "language", readonly: "readonly", masked: "masked" }, ngImport: i0, template: `
+    <div class="ngx-field ngx-field--textarea" [class.ngx-field--readonly]="readonly" [class.ngx-field--masked]="masked">
+      <label class="ngx-field__label">{{ field.label[language] || field.label['en'] }}</label>
+      @if (masked) {
+        <span class="ngx-field__value ngx-field__value--masked">XXXXXXXXX</span>
+      } @else if (readonly) {
+        <span class="ngx-field__value">{{ control.value }}</span>
+      } @else {
+        <textarea
+          class="ngx-field__input"
+          [formControl]="$any(control)"
+          [placeholder]="field.placeholder?.[language] || field.placeholder?.['en'] || ''"
+          [attr.disabled]="field.disabled ? true : null"
+          rows="3"
+        ></textarea>
+        @if (control.invalid && control.touched) {
+          <span class="ngx-field__error">This field has an error</span>
+        }
+      }
+    </div>
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { 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.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TextareaFieldComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ngx-textarea-field',
+                    standalone: true,
+                    imports: [ReactiveFormsModule],
+                    template: `
+    <div class="ngx-field ngx-field--textarea" [class.ngx-field--readonly]="readonly" [class.ngx-field--masked]="masked">
+      <label class="ngx-field__label">{{ field.label[language] || field.label['en'] }}</label>
+      @if (masked) {
+        <span class="ngx-field__value ngx-field__value--masked">XXXXXXXXX</span>
+      } @else if (readonly) {
+        <span class="ngx-field__value">{{ control.value }}</span>
+      } @else {
+        <textarea
+          class="ngx-field__input"
+          [formControl]="$any(control)"
+          [placeholder]="field.placeholder?.[language] || field.placeholder?.['en'] || ''"
+          [attr.disabled]="field.disabled ? true : null"
+          rows="3"
+        ></textarea>
+        @if (control.invalid && control.touched) {
+          <span class="ngx-field__error">This field has an error</span>
+        }
+      }
+    </div>
+  `,
+                }]
+        }], propDecorators: { field: [{
+                type: Input
+            }], control: [{
+                type: Input
+            }], language: [{
+                type: Input
+            }], readonly: [{
+                type: Input
+            }], masked: [{
+                type: Input
+            }] } });
+
+class NumberFieldComponent {
+    field;
+    control;
+    language = 'en';
+    readonly = false;
+    masked = false;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NumberFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: NumberFieldComponent, isStandalone: true, selector: "ngx-number-field", inputs: { field: "field", control: "control", language: "language", readonly: "readonly", masked: "masked" }, ngImport: i0, template: `
+    <div class="ngx-field ngx-field--number" [class.ngx-field--readonly]="readonly" [class.ngx-field--masked]="masked">
+      <label class="ngx-field__label">{{ field.label[language] || field.label['en'] }}</label>
+      @if (masked) {
+        <span class="ngx-field__value ngx-field__value--masked">XXXXXXXXX</span>
+      } @else if (readonly) {
+        <span class="ngx-field__value">{{ control.value }}</span>
+      } @else {
+        <input
+          class="ngx-field__input"
+          type="number"
+          [formControl]="$any(control)"
+          [placeholder]="field.placeholder?.[language] || field.placeholder?.['en'] || ''"
+          [attr.disabled]="field.disabled ? true : null"
+        />
+        @if (control.invalid && control.touched) {
+          <span class="ngx-field__error">This field has an error</span>
+        }
+      }
+    </div>
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { 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.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NumberFieldComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ngx-number-field',
+                    standalone: true,
+                    imports: [ReactiveFormsModule],
+                    template: `
+    <div class="ngx-field ngx-field--number" [class.ngx-field--readonly]="readonly" [class.ngx-field--masked]="masked">
+      <label class="ngx-field__label">{{ field.label[language] || field.label['en'] }}</label>
+      @if (masked) {
+        <span class="ngx-field__value ngx-field__value--masked">XXXXXXXXX</span>
+      } @else if (readonly) {
+        <span class="ngx-field__value">{{ control.value }}</span>
+      } @else {
+        <input
+          class="ngx-field__input"
+          type="number"
+          [formControl]="$any(control)"
+          [placeholder]="field.placeholder?.[language] || field.placeholder?.['en'] || ''"
+          [attr.disabled]="field.disabled ? true : null"
+        />
+        @if (control.invalid && control.touched) {
+          <span class="ngx-field__error">This field has an error</span>
+        }
+      }
+    </div>
+  `,
+                }]
+        }], propDecorators: { field: [{
+                type: Input
+            }], control: [{
+                type: Input
+            }], language: [{
+                type: Input
+            }], readonly: [{
+                type: Input
+            }], masked: [{
+                type: Input
+            }] } });
+
+class CheckboxFieldComponent {
+    field;
+    control;
+    language = 'en';
+    readonly = false;
+    masked = false;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CheckboxFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: CheckboxFieldComponent, isStandalone: true, selector: "ngx-checkbox-field", inputs: { field: "field", control: "control", language: "language", readonly: "readonly", masked: "masked" }, ngImport: i0, template: `
+    <div class="ngx-field ngx-field--checkbox" [class.ngx-field--readonly]="readonly" [class.ngx-field--masked]="masked">
+      @if (masked) {
+        <label class="ngx-field__label">{{ field.label[language] || field.label['en'] }}</label>
+        <span class="ngx-field__value ngx-field__value--masked">XXXXXXXXX</span>
+      } @else if (readonly) {
+        <label class="ngx-field__label">{{ field.label[language] || field.label['en'] }}</label>
+        <span class="ngx-field__value">{{ control.value ? 'Yes' : 'No' }}</span>
+      } @else {
+        <label class="ngx-field__label">
+          <input
+            class="ngx-field__input"
+            type="checkbox"
+            [formControl]="$any(control)"
+            [attr.disabled]="field.disabled ? true : null"
+          />
+          {{ field.label[language] || field.label['en'] }}
+        </label>
+      }
+    </div>
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CheckboxFieldComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ngx-checkbox-field',
+                    standalone: true,
+                    imports: [ReactiveFormsModule],
+                    template: `
+    <div class="ngx-field ngx-field--checkbox" [class.ngx-field--readonly]="readonly" [class.ngx-field--masked]="masked">
+      @if (masked) {
+        <label class="ngx-field__label">{{ field.label[language] || field.label['en'] }}</label>
+        <span class="ngx-field__value ngx-field__value--masked">XXXXXXXXX</span>
+      } @else if (readonly) {
+        <label class="ngx-field__label">{{ field.label[language] || field.label['en'] }}</label>
+        <span class="ngx-field__value">{{ control.value ? 'Yes' : 'No' }}</span>
+      } @else {
+        <label class="ngx-field__label">
+          <input
+            class="ngx-field__input"
+            type="checkbox"
+            [formControl]="$any(control)"
+            [attr.disabled]="field.disabled ? true : null"
+          />
+          {{ field.label[language] || field.label['en'] }}
+        </label>
+      }
+    </div>
+  `,
+                }]
+        }], propDecorators: { field: [{
+                type: Input
+            }], control: [{
+                type: Input
+            }], language: [{
+                type: Input
+            }], readonly: [{
+                type: Input
+            }], masked: [{
+                type: Input
+            }] } });
+
+class DateFieldComponent {
+    field;
+    control;
+    language = 'en';
+    readonly = false;
+    masked = false;
+    /** ISO 8601 date → locale display string (ONEHERMES convention: always UTC, display in user locale) */
+    formatDate(value) {
+        if (!value)
+            return '—';
+        try {
+            return new Date(value).toLocaleDateString();
+        }
+        catch {
+            return value;
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DateFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: DateFieldComponent, isStandalone: true, selector: "ngx-date-field", inputs: { field: "field", control: "control", language: "language", readonly: "readonly", masked: "masked" }, ngImport: i0, template: `
+    <div class="ngx-field ngx-field--date" [class.ngx-field--readonly]="readonly" [class.ngx-field--masked]="masked">
+      <label class="ngx-field__label">{{ field.label[language] || field.label['en'] }}</label>
+      @if (masked) {
+        <span class="ngx-field__value ngx-field__value--masked">XXXXXXXXX</span>
+      } @else if (readonly) {
+        <span class="ngx-field__value">{{ formatDate(control.value) }}</span>
+      } @else {
+        <input
+          class="ngx-field__input"
+          type="date"
+          [formControl]="$any(control)"
+          [attr.disabled]="field.disabled ? true : null"
+        />
+        @if (control.invalid && control.touched) {
+          <span class="ngx-field__error">This field has an error</span>
+        }
+      }
+    </div>
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { 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.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DateFieldComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ngx-date-field',
+                    standalone: true,
+                    imports: [ReactiveFormsModule],
+                    template: `
+    <div class="ngx-field ngx-field--date" [class.ngx-field--readonly]="readonly" [class.ngx-field--masked]="masked">
+      <label class="ngx-field__label">{{ field.label[language] || field.label['en'] }}</label>
+      @if (masked) {
+        <span class="ngx-field__value ngx-field__value--masked">XXXXXXXXX</span>
+      } @else if (readonly) {
+        <span class="ngx-field__value">{{ formatDate(control.value) }}</span>
+      } @else {
+        <input
+          class="ngx-field__input"
+          type="date"
+          [formControl]="$any(control)"
+          [attr.disabled]="field.disabled ? true : null"
+        />
+        @if (control.invalid && control.touched) {
+          <span class="ngx-field__error">This field has an error</span>
+        }
+      }
+    </div>
+  `,
+                }]
+        }], propDecorators: { field: [{
+                type: Input
+            }], control: [{
+                type: Input
+            }], language: [{
+                type: Input
+            }], readonly: [{
+                type: Input
+            }], masked: [{
+                type: Input
+            }] } });
+
+class DropdownFieldComponent {
+    field;
+    control;
+    language = 'en';
+    readonly = false;
+    masked = false;
+    getLabel(value) {
+        const option = (this.field.options || []).find(o => o.value === value);
+        return option ? (option.label[this.language] || option.label['en'] || String(value)) : (value ?? '—');
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DropdownFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: DropdownFieldComponent, isStandalone: true, selector: "ngx-dropdown-field", inputs: { field: "field", control: "control", language: "language", readonly: "readonly", masked: "masked" }, ngImport: i0, template: `
+    <div class="ngx-field ngx-field--dropdown" [class.ngx-field--readonly]="readonly" [class.ngx-field--masked]="masked">
+      <label class="ngx-field__label">{{ field.label[language] || field.label['en'] }}</label>
+      @if (masked) {
+        <span class="ngx-field__value ngx-field__value--masked">XXXXXXXXX</span>
+      } @else if (readonly) {
+        <span class="ngx-field__value">{{ getLabel(control.value) }}</span>
+      } @else {
+        <select
+          class="ngx-field__input"
+          [formControl]="$any(control)"
+          [attr.disabled]="field.disabled ? true : null"
+        >
+          <option value="">{{ field.placeholder?.[language] || field.placeholder?.['en'] || 'Select...' }}</option>
+          @for (option of field.options || []; track option.value) {
+            <option [value]="option.value">{{ option.label[language] || option.label['en'] }}</option>
+          }
+        </select>
+        @if (control.invalid && control.touched) {
+          <span class="ngx-field__error">This field has an error</span>
+        }
+      }
+    </div>
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DropdownFieldComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ngx-dropdown-field',
+                    standalone: true,
+                    imports: [ReactiveFormsModule],
+                    template: `
+    <div class="ngx-field ngx-field--dropdown" [class.ngx-field--readonly]="readonly" [class.ngx-field--masked]="masked">
+      <label class="ngx-field__label">{{ field.label[language] || field.label['en'] }}</label>
+      @if (masked) {
+        <span class="ngx-field__value ngx-field__value--masked">XXXXXXXXX</span>
+      } @else if (readonly) {
+        <span class="ngx-field__value">{{ getLabel(control.value) }}</span>
+      } @else {
+        <select
+          class="ngx-field__input"
+          [formControl]="$any(control)"
+          [attr.disabled]="field.disabled ? true : null"
+        >
+          <option value="">{{ field.placeholder?.[language] || field.placeholder?.['en'] || 'Select...' }}</option>
+          @for (option of field.options || []; track option.value) {
+            <option [value]="option.value">{{ option.label[language] || option.label['en'] }}</option>
+          }
+        </select>
+        @if (control.invalid && control.touched) {
+          <span class="ngx-field__error">This field has an error</span>
+        }
+      }
+    </div>
+  `,
+                }]
+        }], propDecorators: { field: [{
+                type: Input
+            }], control: [{
+                type: Input
+            }], language: [{
+                type: Input
+            }], readonly: [{
+                type: Input
+            }], masked: [{
+                type: Input
+            }] } });
+
+class MultiSelectFieldComponent {
+    field;
+    control;
+    language = 'en';
+    readonly = false;
+    masked = false;
+    getLabels(values) {
+        if (!Array.isArray(values) || !values.length)
+            return '—';
+        return values
+            .map(v => {
+            const opt = (this.field.options || []).find(o => o.value === v);
+            return opt ? (opt.label[this.language] || opt.label['en']) : String(v);
+        })
+            .join(', ');
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: MultiSelectFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: MultiSelectFieldComponent, isStandalone: true, selector: "ngx-multi-select-field", inputs: { field: "field", control: "control", language: "language", readonly: "readonly", masked: "masked" }, ngImport: i0, template: `
+    <div class="ngx-field ngx-field--multiSelect" [class.ngx-field--readonly]="readonly" [class.ngx-field--masked]="masked">
+      <label class="ngx-field__label">{{ field.label[language] || field.label['en'] }}</label>
+      @if (masked) {
+        <span class="ngx-field__value ngx-field__value--masked">XXXXXXXXX</span>
+      } @else if (readonly) {
+        <span class="ngx-field__value">{{ getLabels(control.value) }}</span>
+      } @else {
+        <select
+          class="ngx-field__input"
+          [formControl]="$any(control)"
+          [attr.disabled]="field.disabled ? true : null"
+          multiple
+          size="4"
+        >
+          @for (option of field.options || []; track option.value) {
+            <option [value]="option.value">{{ option.label[language] || option.label['en'] }}</option>
+          }
+        </select>
+        @if (control.invalid && control.touched) {
+          <span class="ngx-field__error">This field has an error</span>
+        }
+      }
+    </div>
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.SelectMultipleControlValueAccessor, selector: "select[multiple][formControlName],select[multiple][formControl],select[multiple][ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: MultiSelectFieldComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ngx-multi-select-field',
+                    standalone: true,
+                    imports: [ReactiveFormsModule],
+                    template: `
+    <div class="ngx-field ngx-field--multiSelect" [class.ngx-field--readonly]="readonly" [class.ngx-field--masked]="masked">
+      <label class="ngx-field__label">{{ field.label[language] || field.label['en'] }}</label>
+      @if (masked) {
+        <span class="ngx-field__value ngx-field__value--masked">XXXXXXXXX</span>
+      } @else if (readonly) {
+        <span class="ngx-field__value">{{ getLabels(control.value) }}</span>
+      } @else {
+        <select
+          class="ngx-field__input"
+          [formControl]="$any(control)"
+          [attr.disabled]="field.disabled ? true : null"
+          multiple
+          size="4"
+        >
+          @for (option of field.options || []; track option.value) {
+            <option [value]="option.value">{{ option.label[language] || option.label['en'] }}</option>
+          }
+        </select>
+        @if (control.invalid && control.touched) {
+          <span class="ngx-field__error">This field has an error</span>
+        }
+      }
+    </div>
+  `,
+                }]
+        }], propDecorators: { field: [{
+                type: Input
+            }], control: [{
+                type: Input
+            }], language: [{
+                type: Input
+            }], readonly: [{
+                type: Input
+            }], masked: [{
+                type: Input
+            }] } });
+
+/**
+ * EntityRefRegistryService — resolves entity-ref option loader functions.
+ * ADR-006: Entity-ref options come ONLY from this registry.
+ * Never pass loaders via @Input() on field components.
+ *
+ * Consumers register loaders via provideNgxDynamicEntity({ entityRefs: { clients: () => [...] } }).
+ * EntityRefFieldComponent injects this service and calls resolve(field.component ?? field.id).
+ */
+class EntityRefRegistryService {
+    registry = inject(ENTITY_REF_REGISTRY, { optional: true }) ?? new Map();
+    /**
+     * Get the option loader function for an entity key.
+     * @returns Async function that returns options array, or null if not registered.
+     */
+    resolve(entityKey) {
+        return this.registry.get(entityKey) ?? null;
+    }
+    has(entityKey) {
+        return this.registry.has(entityKey);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: EntityRefRegistryService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: EntityRefRegistryService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: EntityRefRegistryService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+/**
+ * EntityRefFieldComponent — renders a dropdown populated by a loader from EntityRefRegistryService.
+ * ADR-006: Options come ONLY from the registry. Never via @Input() loader.
+ * Uses field.component (if set) or field.id as the registry lookup key.
+ */
+class EntityRefFieldComponent {
+    field;
+    control;
+    language = 'en';
+    readonly = false;
+    masked = false;
+    entityRefRegistry = inject(EntityRefRegistryService);
+    options = signal([]);
+    loading = signal(false);
+    async ngOnInit() {
+        if (this.masked)
+            return; // No need to load options if masked
+        const entityKey = this.field.component ?? this.field.id;
+        const loader = this.entityRefRegistry.resolve(entityKey);
+        if (!loader)
+            return;
+        this.loading.set(true);
+        try {
+            const raw = await loader();
+            this.options.set(raw);
+        }
+        finally {
+            this.loading.set(false);
+        }
+    }
+    getLabel(value) {
+        const option = this.options().find(o => o.value === value);
+        return option?.label ?? (value ?? '—');
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: EntityRefFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: EntityRefFieldComponent, isStandalone: true, selector: "ngx-entity-ref-field", inputs: { field: "field", control: "control", language: "language", readonly: "readonly", masked: "masked" }, ngImport: i0, template: `
+    <div class="ngx-field ngx-field--entity-ref" [class.ngx-field--readonly]="readonly" [class.ngx-field--masked]="masked">
+      <label class="ngx-field__label">{{ field.label[language] || field.label['en'] }}</label>
+      @if (masked) {
+        <span class="ngx-field__value ngx-field__value--masked">XXXXXXXXX</span>
+      } @else if (readonly) {
+        <span class="ngx-field__value">{{ getLabel(control.value) }}</span>
+      } @else {
+        @if (loading()) {
+          <span class="ngx-field__value">Loading...</span>
+        } @else {
+          <select
+            class="ngx-field__input"
+            [formControl]="$any(control)"
+            [attr.disabled]="field.disabled ? true : null"
+          >
+            <option value="">{{ field.placeholder?.[language] || 'Select...' }}</option>
+            @for (option of options(); track option.value) {
+              <option [value]="option.value">{{ option.label }}</option>
+            }
+          </select>
+        }
+        @if (control.invalid && control.touched) {
+          <span class="ngx-field__error">This field has an error</span>
+        }
+      }
+    </div>
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: EntityRefFieldComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ngx-entity-ref-field',
+                    standalone: true,
+                    imports: [ReactiveFormsModule],
+                    template: `
+    <div class="ngx-field ngx-field--entity-ref" [class.ngx-field--readonly]="readonly" [class.ngx-field--masked]="masked">
+      <label class="ngx-field__label">{{ field.label[language] || field.label['en'] }}</label>
+      @if (masked) {
+        <span class="ngx-field__value ngx-field__value--masked">XXXXXXXXX</span>
+      } @else if (readonly) {
+        <span class="ngx-field__value">{{ getLabel(control.value) }}</span>
+      } @else {
+        @if (loading()) {
+          <span class="ngx-field__value">Loading...</span>
+        } @else {
+          <select
+            class="ngx-field__input"
+            [formControl]="$any(control)"
+            [attr.disabled]="field.disabled ? true : null"
+          >
+            <option value="">{{ field.placeholder?.[language] || 'Select...' }}</option>
+            @for (option of options(); track option.value) {
+              <option [value]="option.value">{{ option.label }}</option>
+            }
+          </select>
+        }
+        @if (control.invalid && control.touched) {
+          <span class="ngx-field__error">This field has an error</span>
+        }
+      }
+    </div>
+  `,
+                }]
+        }], propDecorators: { field: [{
+                type: Input
+            }], control: [{
+                type: Input
+            }], language: [{
+                type: Input
+            }], readonly: [{
+                type: Input
+            }], masked: [{
+                type: Input
+            }] } });
+
+/**
+ * FieldRegistryService — resolves field type strings to Angular component classes.
+ * Open/Closed: open for extension via consumer fieldTypes config, closed for modification.
+ * DynamicFieldComponent uses this to mount the right component via createComponent().
+ */
+class FieldRegistryService {
+    consumerRegistry = inject(FIELD_TYPE_REGISTRY, { optional: true }) ?? new Map();
+    /** Built-in field type → component map. Never remove an entry. */
+    builtInRegistry = new Map([
+        ['text', TextFieldComponent],
+        ['textarea', TextareaFieldComponent],
+        ['number', NumberFieldComponent],
+        ['checkbox', CheckboxFieldComponent],
+        ['date', DateFieldComponent],
+        ['dropdown', DropdownFieldComponent],
+        ['multiSelect', MultiSelectFieldComponent],
+        ['entity-ref', EntityRefFieldComponent],
+    ]);
+    /**
+     * Resolve a field type string to a component class.
+     * Consumer registry takes precedence over built-ins (open for extension).
+     * Returns null if type is unknown — caller must handle gracefully.
+     */
+    resolve(fieldType) {
+        return this.consumerRegistry.get(fieldType) ?? this.builtInRegistry.get(fieldType) ?? null;
+    }
+    /** Check if a field type has a registered component */
+    has(fieldType) {
+        return this.consumerRegistry.has(fieldType) || this.builtInRegistry.has(fieldType);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FieldRegistryService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FieldRegistryService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FieldRegistryService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+/**
+ * HookRegistryService — stores and runs Angular-side pre/post hooks.
+ * Consumers register hooks via provideNgxDynamicEntity({ hooks: { 'clients:beforeSave': fn } }).
+ */
+class HookRegistryService {
+    registry = inject(HOOK_REGISTRY, { optional: true }) ?? new Map();
+    has(key) {
+        return this.registry.has(key);
+    }
+    async run(key, data, context = {}) {
+        const hook = this.registry.get(key);
+        if (!hook)
+            return data;
+        return hook(data, context);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: HookRegistryService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: HookRegistryService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: HookRegistryService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+/**
+ * ValidatorRegistryService — resolves validator key strings to Angular ValidatorFns.
+ * Built-in validators: 'required', 'email', 'min:N', 'max:N', 'minLength:N', 'maxLength:N'.
+ * Consumers can register custom validators via provideNgxDynamicEntity({ validators: {...} }).
+ */
+class ValidatorRegistryService {
+    consumerRegistry = inject(VALIDATOR_REGISTRY, { optional: true }) ?? new Map();
+    /**
+     * Resolve a validator key to a ValidatorFn.
+     * Supports parameterized built-ins like 'min:0', 'maxLength:255'.
+     */
+    resolve(validatorKey) {
+        // Consumer validators take precedence
+        if (this.consumerRegistry.has(validatorKey)) {
+            return this.consumerRegistry.get(validatorKey);
+        }
+        // Built-in validators
+        if (validatorKey === 'required')
+            return Validators.required;
+        if (validatorKey === 'email')
+            return Validators.email;
+        const [name, param] = validatorKey.split(':');
+        const value = parseFloat(param);
+        if (name === 'min' && !isNaN(value))
+            return Validators.min(value);
+        if (name === 'max' && !isNaN(value))
+            return Validators.max(value);
+        if (name === 'minLength' && !isNaN(value))
+            return Validators.minLength(value);
+        if (name === 'maxLength' && !isNaN(value))
+            return Validators.maxLength(value);
+        return null;
+    }
+    /** Resolve multiple validator keys into a ValidatorFn[] */
+    resolveAll(validatorKeys = []) {
+        return validatorKeys.map(k => this.resolve(k)).filter((v) => v !== null);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ValidatorRegistryService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ValidatorRegistryService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ValidatorRegistryService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+/**
+ * VersionService — checks config version staleness and migration strategy.
+ * ADR-005: Frontend strategy is 'strict' | 'graceful' only. Never 'auto'.
+ */
+class VersionService {
+    strategy = inject(MIGRATION_STRATEGY, { optional: true }) ?? 'graceful';
+    /**
+     * Check if a record is stale compared to the current config version.
+     * Returns true if the record needs migration.
+     */
+    needsMigration(record, config) {
+        if (!record._configVersion)
+            return false;
+        return record._configVersion < config.version || !!record._needsMigration;
+    }
+    /**
+     * Get the effective migration strategy for frontend use.
+     * Only 'strict' or 'graceful' — never 'auto' (ADR-005).
+     */
+    getStrategy() {
+        return this.strategy === 'strict' ? 'strict' : 'graceful';
+    }
+    /**
+     * Determine if form submission should be blocked for a stale record.
+     * 'strict' → block; 'graceful' → allow with warning.
+     */
+    shouldBlockSubmit(record, config) {
+        return this.getStrategy() === 'strict' && this.needsMigration(record, config);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: VersionService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: VersionService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: VersionService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+/**
+ * RbacService — ALL permission checks and masking logic live here.
+ * CRITICAL SYNC: resolveEffectiveMask() must be identical to rbac.utils.js in dynamic-entity-server.
+ * Changing one without the other is a critical production bug (ADR-003).
+ */
+class RbacService {
+    maskedRoles = inject(MASKED_ROLES, { optional: true }) ?? [];
+    /**
+     * Check if any of the user's roles satisfy the required roles.
+     * hasPermission(roles, undefined) → true (no restriction).
+     */
+    hasPermission(userRoles, requiredRoles) {
+        if (!requiredRoles?.length)
+            return true;
+        return userRoles.some(r => requiredRoles.includes(r));
+    }
+    /**
+     * ADR-003: 3-level OR resolution.
+     * MUST match rbac.utils.js resolveEffectiveMask() exactly.
+     */
+    resolveEffectiveMask(formMask, tabMask, fieldMask) {
+        return !!(formMask || tabMask || fieldMask);
+    }
+    /** Check if the user's roles include any masked role */
+    isUserMaskedRole(userRoles) {
+        return this.maskedRoles.some(r => userRoles.includes(r));
+    }
+    /** Determine if a specific field should be masked for this user */
+    shouldMaskField(field, tab, config, userRoles) {
+        if (!this.isUserMaskedRole(userRoles))
+            return false;
+        return this.resolveEffectiveMask(config.maskData, tab?.maskData, field.maskData);
+    }
+    /** Get view/edit/delete permissions for a config */
+    getPermissions(config, userRoles) {
+        return {
+            canView: this.hasPermission(userRoles, config.permissions?.view),
+            canEdit: this.hasPermission(userRoles, config.permissions?.edit),
+            canDelete: this.hasPermission(userRoles, config.permissions?.delete),
+        };
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: RbacService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: RbacService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: RbacService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+/**
+ * DynamicFieldComponent — mounts the correct field component for a given FieldConfig.
+ * Uses ViewContainerRef.createComponent() and passes inputs via setInput() (ADR-008).
+ * Never add field-type-specific logic here — this component must remain generic.
+ *
+ * The 5 inputs (field, control, language, readonly, masked) are passed to every mounted
+ * component uniformly — no special-casing per type.
+ */
+class DynamicFieldComponent {
+    field;
+    control;
+    config;
+    language = 'en';
+    readonly = false;
+    userRoles = [];
+    fieldHost;
+    fieldRegistry = inject(FieldRegistryService);
+    rbacService = inject(RbacService);
+    mountedComponent = null;
+    ngOnChanges(_changes) {
+        this.mountField();
+    }
+    mountField() {
+        if (!this.field || !this.control)
+            return;
+        const ComponentClass = this.fieldRegistry.resolve(this.field.type);
+        if (!ComponentClass)
+            return; // Unknown field type — render nothing
+        // Determine masking for this specific field
+        const tab = (this.config?.tabs || []).find(t => t.id === this.field.tab);
+        const masked = this.rbacService.shouldMaskField(this.field, tab, this.config, this.userRoles);
+        // Re-use existing component if same type, otherwise recreate
+        if (this.mountedComponent && this.mountedComponent instanceof ComponentClass) {
+            this.setInputs(this.mountedComponent, masked);
+            return;
+        }
+        this.fieldHost.clear();
+        const ref = this.fieldHost.createComponent(ComponentClass);
+        this.mountedComponent = ref.instance;
+        this.setInputs(ref.instance, masked);
+        ref.changeDetectorRef.markForCheck();
+    }
+    /** Pass all 5 contract inputs via setInput() — uniform for all types (ADR-008) */
+    setInputs(instance, masked) {
+        if ('field' in instance)
+            instance.field = this.field;
+        if ('control' in instance)
+            instance.control = this.control;
+        if ('language' in instance)
+            instance.language = this.language;
+        if ('readonly' in instance)
+            instance.readonly = this.readonly || !!this.field.readonly;
+        if ('masked' in instance)
+            instance.masked = masked;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DynamicFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: DynamicFieldComponent, isStandalone: true, selector: "ngx-dynamic-field", inputs: { field: "field", control: "control", config: "config", language: "language", readonly: "readonly", userRoles: "userRoles" }, viewQueries: [{ propertyName: "fieldHost", first: true, predicate: ["fieldHost"], descendants: true, read: ViewContainerRef, static: true }], usesOnChanges: true, ngImport: i0, template: `<ng-container #fieldHost></ng-container>`, isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DynamicFieldComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ngx-dynamic-field',
+                    standalone: true,
+                    template: `<ng-container #fieldHost></ng-container>`,
+                }]
+        }], propDecorators: { field: [{
+                type: Input
+            }], control: [{
+                type: Input
+            }], config: [{
+                type: Input
+            }], language: [{
+                type: Input
+            }], readonly: [{
+                type: Input
+            }], userRoles: [{
+                type: Input
+            }], fieldHost: [{
+                type: ViewChild,
+                args: ['fieldHost', { read: ViewContainerRef, static: true }]
+            }] } });
+
+/**
+ * DynamicFormComponent — the main form component.
+ * Renders a reactive form from EntityConfig with tab support, dependencies,
+ * migration banner, and RBAC-gated submission.
+ *
+ * ONEHERMES pattern: isSaving state lock prevents subscription cyclones (ADR-002).
+ * ONEHERMES bug fix: visibility rules re-evaluated after initialData loads (form-fixes doc).
+ * ONEHERMES bug fix: use @for + @if separately, not both on same element (form-fixes doc).
+ */
+class DynamicFormComponent {
+    // ─── Inputs ───────────────────────────────────────────────────────────────
+    config;
+    initialData;
+    userRoles = [];
+    language = 'en';
+    readonly = false;
+    loading = false;
+    error = null;
+    // ─── Outputs ──────────────────────────────────────────────────────────────
+    formSubmit = new EventEmitter();
+    formChange = new EventEmitter();
+    formReset = new EventEmitter();
+    // ─── Services ─────────────────────────────────────────────────────────────
+    fb = inject(FormBuilder);
+    validatorRegistry = inject(ValidatorRegistryService);
+    hookRegistry = inject(HookRegistryService);
+    versionService = inject(VersionService);
+    rbacService = inject(RbacService);
+    // ─── Signals (local reactive state) ───────────────────────────────────────
+    activeTab = signal('');
+    isSaving = signal(false); // ADR-002: isSaving lock prevents API spam
+    // ─── Form ─────────────────────────────────────────────────────────────────
+    form;
+    // ─── Computed ─────────────────────────────────────────────────────────────
+    get tabs() {
+        return (this.config?.tabs || []).sort((a, b) => a.order - b.order);
+    }
+    get fieldsForActiveTab() {
+        const tabId = this.activeTab();
+        return (this.config?.fields || []).filter(f => {
+            if (!this.tabs.length)
+                return true; // No tabs — show all
+            return f.tab === tabId || (!f.tab && tabId === this.tabs[0]?.id);
+        });
+    }
+    get permissions() {
+        return this.rbacService.getPermissions(this.config, this.userRoles);
+    }
+    get needsMigration() {
+        return this.versionService.needsMigration(this.initialData || {}, this.config);
+    }
+    get canSubmit() {
+        return (this.permissions.canEdit &&
+            !this.readonly &&
+            !this.isSaving() &&
+            !this.versionService.shouldBlockSubmit(this.initialData || {}, this.config));
+    }
+    // ─── Lifecycle ────────────────────────────────────────────────────────────
+    ngOnChanges(changes) {
+        if (changes['config'] && this.config) {
+            this.buildForm();
+        }
+        // ONEHERMES fix: re-apply data after initialData loads (form-fixes doc)
+        if (changes['initialData'] && this.form && this.initialData) {
+            this.patchForm(this.initialData);
+        }
+        if (changes['config'] && this.tabs.length) {
+            this.activeTab.set(this.tabs[0]?.id || '');
+        }
+    }
+    buildForm() {
+        const controls = {};
+        for (const field of this.config.fields || []) {
+            if (field.isSystem)
+                continue; // System fields not in form controls
+            const validators = this.validatorRegistry.resolveAll(field.validators);
+            controls[field.id] = [field.defaultValue ?? null, validators];
+        }
+        this.form = this.fb.group(controls);
+        // Emit changes via formChange output
+        this.form.valueChanges.subscribe(value => this.formChange.emit(value));
+        // Apply initial data after form builds
+        if (this.initialData) {
+            this.patchForm(this.initialData);
+        }
+        if (this.tabs.length && !this.activeTab()) {
+            this.activeTab.set(this.tabs[0].id);
+        }
+    }
+    patchForm(data) {
+        // Filter empty objects (ONEHERMES array field empty row bug fix)
+        const cleanData = Object.fromEntries(Object.entries(data).filter(([, v]) => v !== undefined));
+        this.form.patchValue(cleanData, { emitEvent: false });
+    }
+    // ─── Actions ──────────────────────────────────────────────────────────────
+    setActiveTab(tabId) {
+        this.activeTab.set(tabId);
+    }
+    async submit() {
+        if (!this.canSubmit || this.form.invalid) {
+            this.form.markAllAsTouched();
+            return;
+        }
+        // ADR-002: isSaving lock — prevents subscription cyclones / duplicate API calls
+        if (this.isSaving())
+            return;
+        this.isSaving.set(true);
+        try {
+            let data = { ...this.form.value };
+            // Run pre-submit hook (Angular-side)
+            data = await this.hookRegistry.run(`${this.config.entity}:beforeSave`, data, {
+                config: this.config,
+                userRoles: this.userRoles,
+            });
+            this.formSubmit.emit(data);
+        }
+        finally {
+            // Reset saving lock in the consumer's success/error handler — here we just unblock
+            this.isSaving.set(false);
+        }
+    }
+    reset() {
+        this.form.reset();
+        if (this.initialData)
+            this.patchForm(this.initialData);
+        this.formReset.emit();
+    }
+    getControl(fieldId) {
+        return this.form?.get(fieldId);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DynamicFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: DynamicFormComponent, isStandalone: true, selector: "ngx-dynamic-form", inputs: { config: "config", initialData: "initialData", userRoles: "userRoles", language: "language", readonly: "readonly", loading: "loading", error: "error" }, outputs: { formSubmit: "formSubmit", formChange: "formChange", formReset: "formReset" }, usesOnChanges: true, ngImport: i0, template: "<form [formGroup]=\"form\" (ngSubmit)=\"submit()\" class=\"ngx-form\" novalidate>\n\n  <!-- Migration banner \u2014 visible in graceful mode when record is stale -->\n  @if (needsMigration) {\n    <div class=\"ngx-form__migration-banner\" role=\"alert\">\n      \u26A0\uFE0F This record was created with an older configuration version.\n      @if (versionService.shouldBlockSubmit(initialData || {}, config)) {\n        Please run migration before editing.\n      } @else {\n        It will be updated to the latest version on save.\n      }\n    </div>\n  }\n\n  <!-- Error message -->\n  @if (error) {\n    <div class=\"ngx-form__error-banner\" role=\"alert\">{{ error }}</div>\n  }\n\n  <!-- Tab bar \u2014 only if tabs defined -->\n  @if (tabs.length > 0) {\n    <div class=\"ngx-form__tabs\" role=\"tablist\">\n      <!-- ONEHERMES fix: @for and @if on separate elements, not same (form-fixes doc) -->\n      @for (tab of tabs; track tab.id) {\n        <button\n          type=\"button\"\n          class=\"ngx-form__tab\"\n          [class.ngx-form__tab--active]=\"activeTab() === tab.id\"\n          (click)=\"setActiveTab(tab.id)\"\n          role=\"tab\"\n          [attr.aria-selected]=\"activeTab() === tab.id\"\n        >\n          {{ tab.label[language] || tab.label['en'] }}\n        </button>\n      }\n    </div>\n  }\n\n  <!-- Fields for active tab -->\n  <div class=\"ngx-form__panel\">\n    @for (field of fieldsForActiveTab; track field.id) {\n      @if (field.visible !== false) {\n        <ngx-dynamic-field\n          [field]=\"field\"\n          [control]=\"getControl(field.id)!\"\n          [config]=\"config\"\n          [language]=\"language\"\n          [readonly]=\"readonly || !!field.readonly\"\n          [userRoles]=\"userRoles\"\n        />\n      }\n    }\n  </div>\n\n  <!-- Submit button \u2014 gated by RBAC and isSaving lock -->\n  @if (!readonly && permissions.canEdit) {\n    <div class=\"ngx-form__actions\">\n      <button\n        type=\"button\"\n        class=\"ngx-form__reset\"\n        (click)=\"reset()\"\n        [disabled]=\"isSaving()\"\n      >\n        Reset\n      </button>\n      <button\n        type=\"submit\"\n        class=\"ngx-form__submit\"\n        [disabled]=\"!canSubmit || form.invalid\"\n      >\n        @if (isSaving() || loading) {\n          Saving\u2026\n        } @else {\n          Save\n        }\n      </button>\n    </div>\n  }\n\n</form>\n", dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: DynamicFieldComponent, selector: "ngx-dynamic-field", inputs: ["field", "control", "config", "language", "readonly", "userRoles"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DynamicFormComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ngx-dynamic-form', standalone: true, imports: [ReactiveFormsModule, DynamicFieldComponent], template: "<form [formGroup]=\"form\" (ngSubmit)=\"submit()\" class=\"ngx-form\" novalidate>\n\n  <!-- Migration banner \u2014 visible in graceful mode when record is stale -->\n  @if (needsMigration) {\n    <div class=\"ngx-form__migration-banner\" role=\"alert\">\n      \u26A0\uFE0F This record was created with an older configuration version.\n      @if (versionService.shouldBlockSubmit(initialData || {}, config)) {\n        Please run migration before editing.\n      } @else {\n        It will be updated to the latest version on save.\n      }\n    </div>\n  }\n\n  <!-- Error message -->\n  @if (error) {\n    <div class=\"ngx-form__error-banner\" role=\"alert\">{{ error }}</div>\n  }\n\n  <!-- Tab bar \u2014 only if tabs defined -->\n  @if (tabs.length > 0) {\n    <div class=\"ngx-form__tabs\" role=\"tablist\">\n      <!-- ONEHERMES fix: @for and @if on separate elements, not same (form-fixes doc) -->\n      @for (tab of tabs; track tab.id) {\n        <button\n          type=\"button\"\n          class=\"ngx-form__tab\"\n          [class.ngx-form__tab--active]=\"activeTab() === tab.id\"\n          (click)=\"setActiveTab(tab.id)\"\n          role=\"tab\"\n          [attr.aria-selected]=\"activeTab() === tab.id\"\n        >\n          {{ tab.label[language] || tab.label['en'] }}\n        </button>\n      }\n    </div>\n  }\n\n  <!-- Fields for active tab -->\n  <div class=\"ngx-form__panel\">\n    @for (field of fieldsForActiveTab; track field.id) {\n      @if (field.visible !== false) {\n        <ngx-dynamic-field\n          [field]=\"field\"\n          [control]=\"getControl(field.id)!\"\n          [config]=\"config\"\n          [language]=\"language\"\n          [readonly]=\"readonly || !!field.readonly\"\n          [userRoles]=\"userRoles\"\n        />\n      }\n    }\n  </div>\n\n  <!-- Submit button \u2014 gated by RBAC and isSaving lock -->\n  @if (!readonly && permissions.canEdit) {\n    <div class=\"ngx-form__actions\">\n      <button\n        type=\"button\"\n        class=\"ngx-form__reset\"\n        (click)=\"reset()\"\n        [disabled]=\"isSaving()\"\n      >\n        Reset\n      </button>\n      <button\n        type=\"submit\"\n        class=\"ngx-form__submit\"\n        [disabled]=\"!canSubmit || form.invalid\"\n      >\n        @if (isSaving() || loading) {\n          Saving\u2026\n        } @else {\n          Save\n        }\n      </button>\n    </div>\n  }\n\n</form>\n" }]
+        }], propDecorators: { config: [{
+                type: Input
+            }], initialData: [{
+                type: Input
+            }], userRoles: [{
+                type: Input
+            }], language: [{
+                type: Input
+            }], readonly: [{
+                type: Input
+            }], loading: [{
+                type: Input
+            }], error: [{
+                type: Input
+            }], formSubmit: [{
+                type: Output
+            }], formChange: [{
+                type: Output
+            }], formReset: [{
+                type: Output
+            }] } });
+
+/**
+ * DynamicTableComponent — renders entity records as a searchable, sortable, paginated table.
+ * Columns determined by FieldConfig.tableColumn === true.
+ * Cell masking applied via RbacService (defense-in-depth).
+ * Pagination, sort, and search emit events — parent controls data fetching (smart/dumb pattern).
+ */
+class DynamicTableComponent {
+    // ─── Inputs ───────────────────────────────────────────────────────────────
+    config;
+    data = [];
+    userRoles = [];
+    language = 'en';
+    loading = false;
+    error = null;
+    totalRecords = 0;
+    pageSize = 20;
+    currentPage = 1;
+    // ─── Outputs ──────────────────────────────────────────────────────────────
+    rowClick = new EventEmitter();
+    rowEdit = new EventEmitter();
+    rowDelete = new EventEmitter();
+    pageChange = new EventEmitter();
+    pageSizeChange = new EventEmitter();
+    sortChange = new EventEmitter();
+    searchChange = new EventEmitter();
+    // ─── Services ─────────────────────────────────────────────────────────────
+    rbacService = inject(RbacService);
+    versionService = inject(VersionService);
+    // ─── Signals ──────────────────────────────────────────────────────────────
+    sortField = signal('');
+    sortDir = signal('desc');
+    searchTerm = signal('');
+    // ─── Computed ─────────────────────────────────────────────────────────────
+    tableColumns = computed(() => (this.config?.fields || []).filter(f => f.tableColumn === true));
+    get permissions() {
+        return this.rbacService.getPermissions(this.config, this.userRoles);
+    }
+    get totalPages() {
+        return Math.ceil(this.totalRecords / this.pageSize) || 0;
+    }
+    ngOnChanges(_changes) {
+        // Pre-resolve masking per column once (ONEHERMES hardening: pre-resolved at extract time)
+        this._resolveColumnMasks();
+    }
+    columnMaskCache = new Map();
+    _resolveColumnMasks() {
+        if (!this.config)
+            return;
+        this.columnMaskCache.clear();
+        for (const field of this.tableColumns()) {
+            const tab = (this.config.tabs || []).find(t => t.id === field.tab);
+            const masked = this.rbacService.shouldMaskField(field, tab, this.config, this.userRoles);
+            this.columnMaskCache.set(field.id, masked);
+        }
+    }
+    // ─── Helpers ──────────────────────────────────────────────────────────────
+    isCellMasked(fieldId) {
+        return this.columnMaskCache.get(fieldId) ?? false;
+    }
+    getCellValue(record, fieldId) {
+        if (this.isCellMasked(fieldId))
+            return 'XXXXXXXXX';
+        const value = record[fieldId];
+        if (value === null || value === undefined)
+            return '—';
+        if (typeof value === 'boolean')
+            return value ? 'Yes' : 'No';
+        if (value instanceof Date || (typeof value === 'string' && value.match(/^\d{4}-\d{2}-\d{2}/))) {
+            try {
+                return new Date(value).toLocaleDateString();
+            }
+            catch {
+                return String(value);
+            }
+        }
+        if (Array.isArray(value))
+            return value.join(', ');
+        return String(value);
+    }
+    needsMigration(record) {
+        return this.versionService.needsMigration(record, this.config);
+    }
+    getColumnLabel(fieldId) {
+        const field = (this.config?.fields || []).find(f => f.id === fieldId);
+        return field?.label?.[this.language] || field?.label?.['en'] || fieldId;
+    }
+    // ─── Sort / Search / Pagination ───────────────────────────────────────────
+    onSort(fieldId) {
+        if (this.sortField() === fieldId) {
+            const next = this.sortDir() === 'asc' ? 'desc' : 'asc';
+            this.sortDir.set(next);
+        }
+        else {
+            this.sortField.set(fieldId);
+            this.sortDir.set('asc');
+        }
+        this.sortChange.emit({ field: this.sortField(), dir: this.sortDir() });
+    }
+    onSearch(event) {
+        const value = event.target.value;
+        this.searchTerm.set(value);
+        this.searchChange.emit(value);
+    }
+    onPageChange(page) {
+        if (page < 1 || page > this.totalPages)
+            return;
+        this.pageChange.emit(page);
+    }
+    onEdit(event, record) {
+        event.stopPropagation();
+        this.rowEdit.emit(record);
+    }
+    onDelete(event, record) {
+        event.stopPropagation();
+        this.rowDelete.emit(record);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DynamicTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: DynamicTableComponent, isStandalone: true, selector: "ngx-dynamic-table", inputs: { config: "config", data: "data", userRoles: "userRoles", language: "language", loading: "loading", error: "error", totalRecords: "totalRecords", pageSize: "pageSize", currentPage: "currentPage" }, outputs: { rowClick: "rowClick", rowEdit: "rowEdit", rowDelete: "rowDelete", pageChange: "pageChange", pageSizeChange: "pageSizeChange", sortChange: "sortChange", searchChange: "searchChange" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"ngx-table\">\n\n  <!-- Search bar -->\n  <div class=\"ngx-table__toolbar\">\n    <input\n      class=\"ngx-table__search\"\n      type=\"search\"\n      placeholder=\"Search...\"\n      [value]=\"searchTerm()\"\n      (input)=\"onSearch($event)\"\n      aria-label=\"Search records\"\n    />\n  </div>\n\n  <!-- Error -->\n  @if (error) {\n    <div class=\"ngx-table__error\" role=\"alert\">{{ error }}</div>\n  }\n\n  <!-- Table -->\n  <table class=\"ngx-table__table\">\n    <thead>\n      <tr>\n        @for (col of tableColumns(); track col.id) {\n          <th\n            class=\"ngx-table__th\"\n            [style.width]=\"col.columnWidth || 'auto'\"\n            (click)=\"onSort(col.id)\"\n            [attr.aria-sort]=\"sortField() === col.id ? sortDir() : 'none'\"\n            role=\"columnheader\"\n          >\n            {{ getColumnLabel(col.id) }}\n            @if (sortField() === col.id) {\n              <span class=\"ngx-table__sort-icon\">{{ sortDir() === 'asc' ? '\u2191' : '\u2193' }}</span>\n            }\n          </th>\n        }\n        <!-- Actions column -->\n        @if (permissions.canEdit || permissions.canDelete) {\n          <th class=\"ngx-table__th ngx-table__th--actions\">Actions</th>\n        }\n      </tr>\n    </thead>\n    <tbody>\n      @if (loading) {\n        <tr>\n          <td [attr.colspan]=\"tableColumns().length + 1\" class=\"ngx-table__loading\">Loading\u2026</td>\n        </tr>\n      } @else if (!data || !data.length) {\n        <tr>\n          <td [attr.colspan]=\"tableColumns().length + 1\" class=\"ngx-table__empty\">No records found</td>\n        </tr>\n      } @else {\n        @for (record of data; track record['_id']) {\n          <tr class=\"ngx-table__row\" (click)=\"rowClick.emit(record)\">\n            @for (col of tableColumns(); track col.id) {\n              <td\n                class=\"ngx-table__td\"\n                [class.ngx-table__td--masked]=\"isCellMasked(col.id)\"\n              >\n                {{ getCellValue(record, col.id) }}\n                <!-- Migration badge \u2014 shows when record is stale -->\n                @if (tableColumns().length > 0 && col.id === tableColumns()[0].id && needsMigration(record)) {\n                  <span class=\"ngx-table__migration-badge\" title=\"Needs migration\">\u26A0</span>\n                }\n              </td>\n            }\n            <!-- Action buttons \u2014 gated by RBAC permissions -->\n            @if (permissions.canEdit || permissions.canDelete) {\n              <td class=\"ngx-table__td ngx-table__actions\">\n                @if (permissions.canEdit) {\n                  <button\n                    type=\"button\"\n                    class=\"ngx-table__action ngx-table__action--edit\"\n                    (click)=\"onEdit($event, record)\"\n                    title=\"Edit\"\n                  >\u270F</button>\n                }\n                @if (permissions.canDelete) {\n                  <button\n                    type=\"button\"\n                    class=\"ngx-table__action ngx-table__action--delete\"\n                    (click)=\"onDelete($event, record)\"\n                    title=\"Delete\"\n                  >\uD83D\uDDD1</button>\n                }\n              </td>\n            }\n          </tr>\n        }\n      }\n    </tbody>\n  </table>\n\n  <!-- Pagination -->\n  @if (totalPages > 1) {\n    <div class=\"ngx-table__pagination\">\n      <button\n        type=\"button\"\n        class=\"ngx-table__page-btn\"\n        [disabled]=\"currentPage <= 1\"\n        (click)=\"onPageChange(currentPage - 1)\"\n        aria-label=\"Previous page\"\n      >\u2190</button>\n\n      <span class=\"ngx-table__page-info\">\n        Page {{ currentPage }} of {{ totalPages }} ({{ totalRecords }} records)\n      </span>\n\n      <button\n        type=\"button\"\n        class=\"ngx-table__page-btn\"\n        [disabled]=\"currentPage >= totalPages\"\n        (click)=\"onPageChange(currentPage + 1)\"\n        aria-label=\"Next page\"\n      >\u2192</button>\n    </div>\n  }\n\n</div>\n" });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DynamicTableComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ngx-dynamic-table', standalone: true, imports: [], template: "<div class=\"ngx-table\">\n\n  <!-- Search bar -->\n  <div class=\"ngx-table__toolbar\">\n    <input\n      class=\"ngx-table__search\"\n      type=\"search\"\n      placeholder=\"Search...\"\n      [value]=\"searchTerm()\"\n      (input)=\"onSearch($event)\"\n      aria-label=\"Search records\"\n    />\n  </div>\n\n  <!-- Error -->\n  @if (error) {\n    <div class=\"ngx-table__error\" role=\"alert\">{{ error }}</div>\n  }\n\n  <!-- Table -->\n  <table class=\"ngx-table__table\">\n    <thead>\n      <tr>\n        @for (col of tableColumns(); track col.id) {\n          <th\n            class=\"ngx-table__th\"\n            [style.width]=\"col.columnWidth || 'auto'\"\n            (click)=\"onSort(col.id)\"\n            [attr.aria-sort]=\"sortField() === col.id ? sortDir() : 'none'\"\n            role=\"columnheader\"\n          >\n            {{ getColumnLabel(col.id) }}\n            @if (sortField() === col.id) {\n              <span class=\"ngx-table__sort-icon\">{{ sortDir() === 'asc' ? '\u2191' : '\u2193' }}</span>\n            }\n          </th>\n        }\n        <!-- Actions column -->\n        @if (permissions.canEdit || permissions.canDelete) {\n          <th class=\"ngx-table__th ngx-table__th--actions\">Actions</th>\n        }\n      </tr>\n    </thead>\n    <tbody>\n      @if (loading) {\n        <tr>\n          <td [attr.colspan]=\"tableColumns().length + 1\" class=\"ngx-table__loading\">Loading\u2026</td>\n        </tr>\n      } @else if (!data || !data.length) {\n        <tr>\n          <td [attr.colspan]=\"tableColumns().length + 1\" class=\"ngx-table__empty\">No records found</td>\n        </tr>\n      } @else {\n        @for (record of data; track record['_id']) {\n          <tr class=\"ngx-table__row\" (click)=\"rowClick.emit(record)\">\n            @for (col of tableColumns(); track col.id) {\n              <td\n                class=\"ngx-table__td\"\n                [class.ngx-table__td--masked]=\"isCellMasked(col.id)\"\n              >\n                {{ getCellValue(record, col.id) }}\n                <!-- Migration badge \u2014 shows when record is stale -->\n                @if (tableColumns().length > 0 && col.id === tableColumns()[0].id && needsMigration(record)) {\n                  <span class=\"ngx-table__migration-badge\" title=\"Needs migration\">\u26A0</span>\n                }\n              </td>\n            }\n            <!-- Action buttons \u2014 gated by RBAC permissions -->\n            @if (permissions.canEdit || permissions.canDelete) {\n              <td class=\"ngx-table__td ngx-table__actions\">\n                @if (permissions.canEdit) {\n                  <button\n                    type=\"button\"\n                    class=\"ngx-table__action ngx-table__action--edit\"\n                    (click)=\"onEdit($event, record)\"\n                    title=\"Edit\"\n                  >\u270F</button>\n                }\n                @if (permissions.canDelete) {\n                  <button\n                    type=\"button\"\n                    class=\"ngx-table__action ngx-table__action--delete\"\n                    (click)=\"onDelete($event, record)\"\n                    title=\"Delete\"\n                  >\uD83D\uDDD1</button>\n                }\n              </td>\n            }\n          </tr>\n        }\n      }\n    </tbody>\n  </table>\n\n  <!-- Pagination -->\n  @if (totalPages > 1) {\n    <div class=\"ngx-table__pagination\">\n      <button\n        type=\"button\"\n        class=\"ngx-table__page-btn\"\n        [disabled]=\"currentPage <= 1\"\n        (click)=\"onPageChange(currentPage - 1)\"\n        aria-label=\"Previous page\"\n      >\u2190</button>\n\n      <span class=\"ngx-table__page-info\">\n        Page {{ currentPage }} of {{ totalPages }} ({{ totalRecords }} records)\n      </span>\n\n      <button\n        type=\"button\"\n        class=\"ngx-table__page-btn\"\n        [disabled]=\"currentPage >= totalPages\"\n        (click)=\"onPageChange(currentPage + 1)\"\n        aria-label=\"Next page\"\n      >\u2192</button>\n    </div>\n  }\n\n</div>\n" }]
+        }], propDecorators: { config: [{
+                type: Input
+            }], data: [{
+                type: Input
+            }], userRoles: [{
+                type: Input
+            }], language: [{
+                type: Input
+            }], loading: [{
+                type: Input
+            }], error: [{
+                type: Input
+            }], totalRecords: [{
+                type: Input
+            }], pageSize: [{
+                type: Input
+            }], currentPage: [{
+                type: Input
+            }], rowClick: [{
+                type: Output
+            }], rowEdit: [{
+                type: Output
+            }], rowDelete: [{
+                type: Output
+            }], pageChange: [{
+                type: Output
+            }], pageSizeChange: [{
+                type: Output
+            }], sortChange: [{
+                type: Output
+            }], searchChange: [{
+                type: Output
+            }] } });
+
+// Tokens
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { CheckboxFieldComponent, ConfigService, DYNAMIC_ENTITY_API_URL, DateFieldComponent, DropdownFieldComponent, DynamicFieldComponent, DynamicFormComponent, DynamicTableComponent, ENTITY_REF_REGISTRY, EntityRefFieldComponent, EntityRefRegistryService, FIELD_TYPE_REGISTRY, FieldRegistryService, HOOK_REGISTRY, HookRegistryService, MASKED_ROLES, MIGRATION_STRATEGY, MultiSelectFieldComponent, NumberFieldComponent, RbacService, TextFieldComponent, TextareaFieldComponent, VALIDATOR_REGISTRY, ValidatorRegistryService, VersionService, provideNgxDynamicEntity };
+//# sourceMappingURL=ngx-dynamic-entity.mjs.map