ngx-dynamic-entity-builder 1.4.0 → 1.5.0

package/fesm2022/ngx-dynamic-entity-builder.mjs

@@ -24,7 +24,7 @@ import * as i10 from '@angular/material/toolbar';
 import { MatToolbarModule } from '@angular/material/toolbar';
 import * as i4$2 from '@angular/material/tooltip';
 import { MatTooltipModule } from '@angular/material/tooltip';
-import { collectFieldScopes, assignFieldRefs, normalizeConfigOptions, getFieldTypeMeta, createFieldConfig, labelToId, createFieldSnapshot, computeFieldDrift, toRefToken, humanizeId, findTab, fieldRefFor, parseFieldRef, resolveLabel, refOf, resolveOptionLabel, FIELD_TYPE_CATALOG, COMMON_MODULES } from '@dynamic-entity/core';
+import { collectFieldScopes, assignFieldRefs, normalizeConfigOptions, getFieldTypeMeta, createFieldConfig, labelToId, createFieldSnapshot, computeFieldDrift, toRefToken, humanizeId, findTab, fieldRefFor, parseFieldRef, refOf, resolveLabel, resolveOptionLabel, FIELD_TYPE_CATALOG, COMMON_MODULES } from '@dynamic-entity/core';
 export { FIELD_TYPE_CATALOG, createFieldConfig, getFieldTypeMeta, humanizeId } from '@dynamic-entity/core';
 import { ConfigSourceService, SYSTEM_DEFAULT_CAN_EDIT } from 'ngx-dynamic-entity';
 export { SYSTEM_DEFAULT_CAN_EDIT } from 'ngx-dynamic-entity';
@@ -1264,6 +1264,44 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
             type: Injectable
         }] });
 
+/**
+ * Every field in the config, offered by path.
+ *
+ * Four places in the builder name a field — `showWhen` keys, `patchOnTrue` mappings,
+ * `autoPatch` targets and rule triggers/targets — and each was a free-text box. Typing an id
+ * is the one way left to author an ambiguous reference: ids are unique per scope, so
+ * `address` names nothing in particular once two tabs have one. Choosing from this list
+ * always yields a path.
+ *
+ * `collectFieldScopes` rather than the tab-level view, so a field nested inside a `group` is
+ * offered too, and every entry carries the scope `refOf` needs.
+ */
+function fieldPathOptions(config, language) {
+    return collectFieldScopes(config).map(entry => {
+        const path = refOf(entry.field, entry.scope);
+        return {
+            value: toRefToken(path),
+            label: resolveLabel(entry.field.label, language) || entry.field.id,
+            path,
+        };
+    });
+}
+/**
+ * The options plus whatever is already selected.
+ *
+ * A reference written before paths existed is a bare id, and one written against a field
+ * since deleted is a path nothing answers to. Neither appears in the list, and a `mat-select`
+ * silently drops a value it has no option for — so opening such a config and saving it would
+ * quietly erase the reference. They are kept, and shown as they are.
+ */
+function withExistingOptions(options, current) {
+    const known = new Set(options.map(o => o.value));
+    const extra = current
+        .filter((value) => !!value && !known.has(value))
+        .map(value => ({ value, label: value, path: 'not in this config' }));
+    return [...options, ...extra];
+}
+
 /**
  * EntityReferenceConfigComponent — authors the `entityReference` block of an entity-ref field:
  * registry key, display fields, static filters, and the parent→child cascade.
@@ -1279,6 +1317,24 @@ class EntityReferenceConfigComponent {
         const current = this.field();
         return this.store.fields().filter(f => f.id !== current?.id);
     }, ...(ngDevMode ? [{ debugName: "parentCandidates" }] : /* istanbul ignore next */ []));
+    fieldOptions = computed(() => fieldPathOptions(this.store.config(), this.store.activeLanguage()), ...(ngDevMode ? [{ debugName: "fieldOptions" }] : /* istanbul ignore next */ []));
+    /**
+     * Cascade parents, offered by path.
+     *
+     * The picker existed but its values were bare ids, which name a field only while no second
+     * scope reuses the id — so the one control that was already a list could still produce an
+     * ambiguous reference.
+     */
+    parentOptions() {
+        const self = this.field();
+        const selfValue = self ? toRefToken(self.refererField ?? self.id) : null;
+        const options = this.fieldOptions().filter(o => o.value !== selfValue);
+        return withExistingOptions(options, [this.field() ? this.ref(this.field()).parentField : undefined]);
+    }
+    /** Options plus whatever is already selected, so an unknown reference is never dropped. */
+    optionsWith(...current) {
+        return withExistingOptions(this.fieldOptions(), current);
+    }
     filtersParseError = signal(null, ...(ngDevMode ? [{ debugName: "filtersParseError" }] : /* istanbul ignore next */ []));
     filtersError = this.filtersParseError.asReadonly();
     ref(field) {
@@ -1384,8 +1440,10 @@ class EntityReferenceConfigComponent {
             (ngModelChange)="patchRef(f, { parentField: $event || undefined })"
           >
             <mat-option value="">None — load all options</mat-option>
-            @for (candidate of parentCandidates(); track candidate.id) {
-              <mat-option [value]="candidate.id">{{ fieldLabel(candidate) }} ({{ candidate.id }})</mat-option>
+            @for (option of parentOptions(); track option.value) {
+              <mat-option [value]="option.value">
+                {{ option.label }} <span class="deb-path-hint">{{ option.path }}</span>
+              </mat-option>
             }
           </mat-select>
           <mat-hint>This field's options reload whenever the parent changes.</mat-hint>
@@ -1456,11 +1514,17 @@ class EntityReferenceConfigComponent {
               </mat-form-field>
               <mat-form-field appearance="outline" subscriptSizing="dynamic">
                 <mat-label>Target field</mat-label>
-                <input
-                  matInput
+                <mat-select
+                  data-testid="auto-patch-target"
                   [ngModel]="mapping.target"
                   (ngModelChange)="store.updateAutoPatchMapping(f.id, $index, { target: $event })"
-                />
+                >
+                  @for (option of optionsWith(mapping.target); track option.value) {
+                    <mat-option [value]="option.value">
+                      {{ option.label }} <span class="deb-path-hint">{{ option.path }}</span>
+                    </mat-option>
+                  }
+                </mat-select>
               </mat-form-field>
               <button
                 mat-icon-button
@@ -1548,8 +1612,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
             (ngModelChange)="patchRef(f, { parentField: $event || undefined })"
           >
             <mat-option value="">None — load all options</mat-option>
-            @for (candidate of parentCandidates(); track candidate.id) {
-              <mat-option [value]="candidate.id">{{ fieldLabel(candidate) }} ({{ candidate.id }})</mat-option>
+            @for (option of parentOptions(); track option.value) {
+              <mat-option [value]="option.value">
+                {{ option.label }} <span class="deb-path-hint">{{ option.path }}</span>
+              </mat-option>
             }
           </mat-select>
           <mat-hint>This field's options reload whenever the parent changes.</mat-hint>
@@ -1620,11 +1686,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
               </mat-form-field>
               <mat-form-field appearance="outline" subscriptSizing="dynamic">
                 <mat-label>Target field</mat-label>
-                <input
-                  matInput
+                <mat-select
+                  data-testid="auto-patch-target"
                   [ngModel]="mapping.target"
                   (ngModelChange)="store.updateAutoPatchMapping(f.id, $index, { target: $event })"
-                />
+                >
+                  @for (option of optionsWith(mapping.target); track option.value) {
+                    <mat-option [value]="option.value">
+                      {{ option.label }} <span class="deb-path-hint">{{ option.path }}</span>
+                    </mat-option>
+                  }
+                </mat-select>
               </mat-form-field>
               <button
                 mat-icon-button
@@ -1683,58 +1755,34 @@ class RuleFormComponent {
         'HAS_ITEMS',
         'VALUE_CHANGED',
     ];
-    /**
-     * Every field in the config, offered by path.
-     *
-     * Both pickers used to be free text — the trigger was typed by hand and the targets could
-     * not be edited at all, so a rule only ever acted on the field it triggered from. Typing an
-     * id is also the one way left to write an ambiguous reference: ids are unique per scope, so
-     * `address` names nothing in particular once two tabs have one. Choosing from this list
-     * always yields a path.
-     */
-    fieldOptions = computed(() => {
-        const language = this.store.activeLanguage();
-        // `collectFieldScopes` rather than `fieldGroups`: it reaches fields nested inside a
-        // `group` too, and it carries each field's scope, so `refOf` always has a path to fall
-        // back to and this component needs no fallback of its own.
-        return collectFieldScopes(this.store.config()).map(entry => {
-            const path = refOf(entry.field, entry.scope);
-            return {
-                value: toRefToken(path),
-                label: resolveLabel(entry.field.label, language) || entry.field.id,
-                path,
-            };
-        });
-    }, ...(ngDevMode ? [{ debugName: "fieldOptions" }] : /* istanbul ignore next */ []));
-    /**
-     * The options plus whatever the rule already names.
-     *
-     * A rule written before paths existed holds a bare id, and one written against a field that
-     * has since been deleted holds a path nothing answers to. Neither appears in the list, and a
-     * `mat-select` silently drops a value it has no option for — so opening such a rule and
-     * saving it would quietly erase the reference. They are kept, and shown as they are.
-     */
-    withExisting(options, current) {
-        const known = new Set(options.map(o => o.value));
-        const extra = current
-            .filter(value => value && !known.has(value))
-            .map(value => ({ value, label: value, path: 'not in this config' }));
-        return [...options, ...extra];
-    }
+    fieldOptions = computed(() => fieldPathOptions(this.store.config(), this.store.activeLanguage()), ...(ngDevMode ? [{ debugName: "fieldOptions" }] : /* istanbul ignore next */ []));
     /**
      * Methods, not `computed`. Both read `rule`, which is a plain `@Input` object mutated in
      * place rather than a signal — a computed would cache the first evaluation and never see a
      * different rule being edited.
      */
     triggerOptions() {
-        return this.withExisting(this.fieldOptions(), [this.rule.fieldId]);
+        return withExistingOptions(this.fieldOptions(), [this.rule.fieldId]);
     }
     targetOptions() {
-        return this.withExisting(this.fieldOptions(), this.targetValues());
+        return withExistingOptions(this.fieldOptions(), this.targetValues());
     }
-    /** Field targets only — a rule may also target a tab, which this picker does not manage. */
+    cachedTargets = [];
+    /**
+     * Field targets only — a rule may also target a tab, which this picker does not manage.
+     *
+     * The array identity is held stable while the contents are unchanged. This is bound through
+     * `[ngModel]` on a multi-select, and a fresh array on each call made `ngModel` see a new
+     * value on every change-detection pass: it wrote, which scheduled another pass, which built
+     * another array. Opening the rule editor locked the browser outright.
+     */
     targetValues() {
-        return this.rule.targets.filter(t => t.type === 'field').map(t => t.id);
+        const ids = this.rule.targets.filter(t => t.type === 'field').map(t => t.id);
+        const unchanged = ids.length === this.cachedTargets.length &&
+            ids.every((id, i) => id === this.cachedTargets[i]);
+        if (!unchanged)
+            this.cachedTargets = ids;
+        return this.cachedTargets;
     }
     /**
      * Replaces the field targets, leaving any tab target untouched.
@@ -2403,6 +2451,46 @@ class FieldInspectorComponent {
     optionLabel(option) {
         return resolveOptionLabel(option, this.lang());
     }
+    /**
+     * Every tab a field can live on, sub-tabs included.
+     *
+     * `moveFieldToTab` existed on the store with nothing calling it, so a field authored on the
+     * wrong tab had to be deleted and rebuilt — losing its validators, options and every rule
+     * aimed at it.
+     */
+    tabOptions = computed(() => this.store
+        .fieldGroups()
+        .map(group => ({ id: group.tabId, label: resolveLabel(group.label, this.lang()) || group.tabId }))
+        .concat(this.store
+        .tabs()
+        .flatMap(tab => [tab, ...(tab.children ?? [])])
+        .map(tab => ({ id: tab.id, label: resolveLabel(tab.label, this.lang()) || tab.id })))
+        .filter((tab, i, all) => all.findIndex(t => t.id === tab.id) === i), ...(ngDevMode ? [{ debugName: "tabOptions" }] : /* istanbul ignore next */ []));
+    /**
+     * The tab the selected field currently sits on.
+     *
+     * Looked up by identity rather than parsed out of the path: the scope of
+     * `incident.incidentDetails.incidentTime` is two segments and the field belongs to the
+     * *last* of them, while a field inside a group has the group id in that position and
+     * belongs to no tab of that name at all.
+     */
+    currentTabId(field) {
+        return this.store.fieldGroups().find(group => group.fields.includes(field))?.tabId ?? '';
+    }
+    moveToTab(field, tabId) {
+        if (tabId && tabId !== this.currentTabId(field))
+            this.store.moveFieldToTab(field.id, tabId);
+    }
+    /**
+     * Fields offered wherever this inspector names one — the `showWhen` key and both ends of a
+     * `patchOnTrue` mapping. All three were free text, which is the one way left to write a
+     * reference that names two fields at once.
+     */
+    fieldOptions = computed(() => fieldPathOptions(this.store.config(), this.store.activeLanguage()), ...(ngDevMode ? [{ debugName: "fieldOptions" }] : /* istanbul ignore next */ []));
+    /** Options plus whatever is already selected, so an unknown reference is never dropped. */
+    optionsWith(...current) {
+        return withExistingOptions(this.fieldOptions(), current);
+    }
     // ─── showWhen editing ───────────────────────────────────────────────────────
     showWhenEntries(field) {
         return Object.entries(field.showWhen ?? {}).map(([key, value]) => ({
@@ -2410,9 +2498,20 @@ class FieldInspectorComponent {
             display: this.stringifyShowWhen(value),
         }));
     }
+    /**
+     * Seeds a new condition with the first field not already watched.
+     *
+     * It used to seed the literal string `field`, which is not a field id at all — so a new
+     * condition started out referencing nothing and silently hid the field until it was edited.
+     */
     addShowWhen(field) {
         const next = { ...(field.showWhen ?? {}) };
-        let key = 'field';
+        const self = toRefToken(field.refererField ?? field.id);
+        const candidate = this.fieldOptions().find(o => o.value !== self && !(o.value in next));
+        // Falls back to the old placeholder only when there is genuinely nothing else to watch —
+        // a config with one field. Otherwise a new condition starts on a real field instead of
+        // the literal string `field`, which is not an id at all and hid the field until edited.
+        let key = candidate?.value ?? 'field';
         let n = 1;
         while (key in next)
             key = `field_${++n}`;
@@ -2464,7 +2563,7 @@ class FieldInspectorComponent {
         return String(value);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: FieldInspectorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: FieldInspectorComponent, isStandalone: true, selector: "ngx-field-inspector", ngImport: i0, template: "@if (field(); as f) {\n  <div class=\"deb-inspector\">\n    <!-- Identity -->\n    <div class=\"deb-row\">\n      <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\">\n        <mat-label>Field id</mat-label>\n        <input matInput data-testid=\"field-id\" [value]=\"f.id\" disabled />\n        @if (store.hasManualId(f.id)) {\n          <mat-hint>The stored data key for this saved field \u2014 fixed.</mat-hint>\n        } @else {\n          <mat-hint>Derived from the label. Used as the data key.</mat-hint>\n        }\n      </mat-form-field>\n      <span class=\"deb-chip\">{{ meta()?.label || f.type }}</span>\n    </div>\n\n    <!-- Localised text (active language) -->\n    <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"deb-full\">\n      <mat-label>Label ({{ lang() }})</mat-label>\n      <input\n        matInput\n        [ngModel]=\"labelValue(f)\"\n        (ngModelChange)=\"store.setFieldLabel(f.id, lang(), $event)\"\n      />\n    </mat-form-field>\n\n    @if (meta()?.supportsPlaceholder) {\n      <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"deb-full\">\n        <mat-label>Placeholder ({{ lang() }})</mat-label>\n        <input\n          matInput\n          [ngModel]=\"placeholderValue(f)\"\n          (ngModelChange)=\"store.setFieldPlaceholder(f.id, lang(), $event)\"\n        />\n      </mat-form-field>\n    }\n\n    @if (meta()?.supportsDefaultValue) {\n      <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"deb-full\">\n        <mat-label>Default value</mat-label>\n        <input\n          matInput\n          [ngModel]=\"f.defaultValue ?? ''\"\n          (ngModelChange)=\"store.updateField(f.id, { defaultValue: $event })\"\n        />\n      </mat-form-field>\n    }\n\n    <!-- Entity reference, cascade, and autoPatch -->\n    @if (meta()?.isEntityRef) {\n      <mat-divider></mat-divider>\n      <ngx-entity-reference-config />\n    }\n\n    <mat-divider></mat-divider>\n\n    <!-- Validators -->\n    @if (meta(); as m) {\n      @if (m.flagValidators.length || m.paramValidators.length) {\n        <span class=\"deb-section-title\">Validation</span>\n        <div class=\"deb-toggles\">\n          @for (v of m.flagValidators; track v) {\n            <mat-checkbox\n              [ngModel]=\"store.hasFlagValidator(f, v)\"\n              (ngModelChange)=\"store.toggleFlagValidator(f.id, v, $event)\"\n            >{{ v }}</mat-checkbox>\n          }\n        </div>\n        @for (v of m.paramValidators; track v) {\n          <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"deb-full\">\n            <mat-label>{{ v }}</mat-label>\n            <input\n              matInput\n              type=\"number\"\n              [ngModel]=\"store.getParamValidator(f, v)\"\n              (ngModelChange)=\"store.setParamValidator(f.id, v, toNum($event))\"\n            />\n          </mat-form-field>\n        }\n      }\n    }\n\n    <!-- Options (dropdown / radio / multiSelect) -->\n    @if (meta()?.hasOptions) {\n      <mat-divider></mat-divider>\n      <span class=\"deb-section-title\">Data source</span>\n      <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"deb-full\">\n        <mat-label>Options come from</mat-label>\n        <mat-select\n          data-testid=\"data-source\"\n          [ngModel]=\"store.fieldDataSource(f)\"\n          (ngModelChange)=\"store.setFieldDataSource(f.id, $event)\"\n        >\n          <mat-option value=\"none\">Nothing yet</mat-option>\n          <mat-option value=\"manual\">Options authored here</mat-option>\n          <mat-option value=\"lookup\">A named list</mat-option>\n        </mat-select>\n      </mat-form-field>\n    }\n\n    <!-- Named lookup list -->\n    @if (meta()?.hasOptions && store.fieldDataSource(f) === 'lookup') {\n      <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"deb-full\">\n        <mat-label>List name</mat-label>\n        <input\n          matInput\n          data-testid=\"list-name\"\n          [ngModel]=\"f.listName ?? ''\"\n          (ngModelChange)=\"store.setListName(f.id, $event)\"\n        />\n      </mat-form-field>\n      <p class=\"deb-hint\">\n        The consuming app resolves this name through its lookup registry. Options are not\n        authored here.\n      </p>\n    }\n\n    <!-- Inline options -->\n    @if (meta()?.hasOptions && store.fieldDataSource(f) !== 'lookup') {\n      <div class=\"deb-row\" style=\"justify-content: space-between;\">\n        <span class=\"deb-section-title\">Options</span>\n        <button mat-stroked-button type=\"button\" (click)=\"store.addOption(f.id)\">\n          <mat-icon>add</mat-icon> Option\n        </button>\n      </div>\n      @for (opt of f.options ?? []; track $index) {\n        <div class=\"deb-option-row\" data-testid=\"option-row\">\n          <!-- One input: the displayed text is the stored value. -->\n          <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"deb-full\">\n            <mat-label>Option ({{ lang() }})</mat-label>\n            <input\n              matInput\n              [attr.data-testid]=\"'option-' + $index\"\n              [ngModel]=\"optionLabel(opt)\"\n              (ngModelChange)=\"store.setOptionLabel(f.id, $index, lang(), $event)\"\n            />\n          </mat-form-field>\n          <button mat-icon-button type=\"button\" color=\"warn\"\n            (click)=\"store.removeOption(f.id, $index)\" matTooltip=\"Remove option\">\n            <mat-icon>delete</mat-icon>\n          </button>\n        </div>\n      }\n      @if (!(f.options ?? []).length) {\n        <p class=\"deb-hint\">No options yet \u2014 add at least one.</p>\n      }\n    }\n\n    <mat-divider></mat-divider>\n\n    <!-- Flags -->\n    <span class=\"deb-section-title\">Display</span>\n    <div class=\"deb-toggles\">\n      <mat-slide-toggle\n        [ngModel]=\"f.visibility ?? true\"\n        (ngModelChange)=\"store.updateField(f.id, { visibility: $event })\"\n      >Visible</mat-slide-toggle>\n      <mat-slide-toggle\n        [ngModel]=\"f.table?.visible ?? false\"\n        (ngModelChange)=\"store.updateField(f.id, { table: { visible: $event } })\"\n      >Table column</mat-slide-toggle>\n      <mat-slide-toggle\n        [ngModel]=\"f.readonly ?? false\"\n        (ngModelChange)=\"store.updateField(f.id, { readonly: $event })\"\n      >Read-only</mat-slide-toggle>\n      <mat-slide-toggle\n        [ngModel]=\"f.disabled ?? false\"\n        (ngModelChange)=\"store.updateField(f.id, { disabled: $event })\"\n      >Disabled</mat-slide-toggle>\n      <mat-slide-toggle\n        [ngModel]=\"f.maskData ?? false\"\n        (ngModelChange)=\"store.updateField(f.id, { maskData: $event })\"\n      >Mask data (RBAC)</mat-slide-toggle>\n      <mat-slide-toggle\n        data-testid=\"toggle-critical\"\n        [ngModel]=\"f.criticalField ?? false\"\n        (ngModelChange)=\"store.updateField(f.id, { criticalField: $event })\"\n        matTooltip=\"Renders locked; editing it announces a change against the session baseline.\"\n      >Critical field</mat-slide-toggle>\n      <mat-slide-toggle\n        [ngModel]=\"f.showOnMinimize ?? false\"\n        (ngModelChange)=\"store.updateField(f.id, { showOnMinimize: $event })\"\n        matTooltip=\"Shown in the record editor's summary panel.\"\n      >Show in summary</mat-slide-toggle>\n    </div>\n\n    <mat-divider></mat-divider>\n\n    <!-- Conditional visibility (static showWhen) -->\n    <div class=\"deb-row deb-row--split\">\n      <span class=\"deb-section-title\">Show when</span>\n      <button mat-stroked-button type=\"button\" data-testid=\"add-show-when\" (click)=\"addShowWhen(f)\">\n        <mat-icon>add</mat-icon> Condition\n      </button>\n    </div>\n    @for (entry of showWhenEntries(f); track entry.key) {\n      <div class=\"deb-option-row\" data-testid=\"option-row\">\n        <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\">\n          <mat-label>Field id</mat-label>\n          <input matInput [ngModel]=\"entry.key\" (ngModelChange)=\"renameShowWhen(f, entry.key, $event)\" />\n        </mat-form-field>\n        <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\">\n          <mat-label>Equals</mat-label>\n          <input matInput [ngModel]=\"entry.display\" (ngModelChange)=\"setShowWhenValue(f, entry.key, $event)\" />\n        </mat-form-field>\n        <button mat-icon-button type=\"button\" color=\"warn\" matTooltip=\"Remove condition\"\n          (click)=\"removeShowWhen(f, entry.key)\">\n          <mat-icon>delete</mat-icon>\n        </button>\n      </div>\n    }\n    @if (!showWhenEntries(f).length) {\n      <p class=\"deb-hint\">Always visible. Add a condition to show this field only for certain values.</p>\n    }\n\n    <!-- patchOnTrue (boolean/checkbox only) -->\n    @if (f.type === 'boolean' || f.type === 'checkbox') {\n      <mat-divider></mat-divider>\n      <div class=\"deb-row deb-row--split\">\n        <span class=\"deb-section-title\">Copy on true</span>\n        <button mat-stroked-button type=\"button\" data-testid=\"add-patch-on-true\"\n          (click)=\"store.addPatchOnTrueMapping(f.id)\">\n          <mat-icon>add</mat-icon> Mapping\n        </button>\n      </div>\n      @for (mapping of f.patchOnTrue ?? []; track $index) {\n        <div class=\"deb-option-row\" data-testid=\"option-row\">\n          <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\">\n            <mat-label>From field</mat-label>\n            <input matInput [ngModel]=\"mapping.from\"\n              (ngModelChange)=\"store.updatePatchOnTrueMapping(f.id, $index, { from: $event })\" />\n          </mat-form-field>\n          <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\">\n            <mat-label>To field</mat-label>\n            <input matInput [ngModel]=\"mapping.to\"\n              (ngModelChange)=\"store.updatePatchOnTrueMapping(f.id, $index, { to: $event })\" />\n          </mat-form-field>\n          <button mat-icon-button type=\"button\" color=\"warn\" matTooltip=\"Remove mapping\"\n            (click)=\"store.removePatchOnTrueMapping(f.id, $index)\">\n            <mat-icon>delete</mat-icon>\n          </button>\n        </div>\n      }\n      @if (!(f.patchOnTrue ?? []).length) {\n        <p class=\"deb-hint\">When this flips to true, copy one field's value into another.</p>\n      }\n    }\n\n    <mat-divider></mat-divider>\n\n    <!-- Rules attached to this field -->\n    <ngx-field-rules-list />\n\n    <mat-divider></mat-divider>\n\n    <!-- Cross-entity field reference & drift management (Phase 8) -->\n    <ngx-referenced-field-config />\n  </div>\n} @else {\n  <div class=\"deb-inspector__empty\">\n    <mat-icon>touch_app</mat-icon>\n    <p>Select a field to edit its properties.</p>\n  </div>\n}\n", styles: [".deb-inspector{display:flex;flex-direction:column;gap:12px}.deb-inspector__empty{color:var(--deb-muted, #6b7280);text-align:center;padding:24px 8px}.deb-full{width:100%}.deb-row{display:flex;gap:8px;align-items:center}.deb-row>*{flex:1}.deb-row--split{justify-content:space-between}.deb-row--split>*{flex:0 0 auto}.deb-toggles{display:grid;grid-template-columns:1fr 1fr;gap:8px 12px}.deb-option-row{display:flex;gap:6px;align-items:center}.deb-chip{display:inline-block;padding:2px 8px;border-radius:12px;background:var(--deb-accent-soft, #eef2ff);color:var(--deb-accent, #6366f1);font-size:12px;font-weight:600}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { 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.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i3$1.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "ngmodule", type: MatDividerModule }, { kind: "component", type: i3.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i5.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i8.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i8.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatSlideToggleModule }, { kind: "component", type: i9.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon", "disabledInteractive"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4$2.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: EntityReferenceConfigComponent, selector: "ngx-entity-reference-config" }, { kind: "component", type: FieldRulesListComponent, selector: "ngx-field-rules-list" }, { kind: "component", type: ReferencedFieldConfigComponent, selector: "ngx-referenced-field-config" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: FieldInspectorComponent, isStandalone: true, selector: "ngx-field-inspector", ngImport: i0, template: "@if (field(); as f) {\n  <div class=\"deb-inspector\">\n    <!-- Identity -->\n    <div class=\"deb-row\">\n      <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\">\n        <mat-label>Field id</mat-label>\n        <input matInput data-testid=\"field-id\" [value]=\"f.id\" disabled />\n        @if (store.hasManualId(f.id)) {\n          <mat-hint>The stored data key for this saved field \u2014 fixed.</mat-hint>\n        } @else {\n          <mat-hint>Derived from the label. Used as the data key.</mat-hint>\n        }\n      </mat-form-field>\n      <span class=\"deb-chip\">{{ meta()?.label || f.type }}</span>\n    </div>\n\n    @if (tabOptions().length > 1) {\n      <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"deb-full\">\n        <mat-label>Tab</mat-label>\n        <mat-select data-testid=\"field-tab\"\n          [ngModel]=\"currentTabId(f)\" (ngModelChange)=\"moveToTab(f, $event)\">\n          @for (tab of tabOptions(); track tab.id) {\n            <mat-option [value]=\"tab.id\">{{ tab.label }}</mat-option>\n          }\n        </mat-select>\n        <mat-hint>Moving the field rewrites its path and repoints the rules that named it.</mat-hint>\n      </mat-form-field>\n    }\n\n\n    <!-- Localised text (active language) -->\n    <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"deb-full\">\n      <mat-label>Label ({{ lang() }})</mat-label>\n      <input\n        matInput\n        [ngModel]=\"labelValue(f)\"\n        (ngModelChange)=\"store.setFieldLabel(f.id, lang(), $event)\"\n      />\n    </mat-form-field>\n\n    @if (meta()?.supportsPlaceholder) {\n      <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"deb-full\">\n        <mat-label>Placeholder ({{ lang() }})</mat-label>\n        <input\n          matInput\n          [ngModel]=\"placeholderValue(f)\"\n          (ngModelChange)=\"store.setFieldPlaceholder(f.id, lang(), $event)\"\n        />\n      </mat-form-field>\n    }\n\n    @if (meta()?.supportsDefaultValue) {\n      <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"deb-full\">\n        <mat-label>Default value</mat-label>\n        <input\n          matInput\n          [ngModel]=\"f.defaultValue ?? ''\"\n          (ngModelChange)=\"store.updateField(f.id, { defaultValue: $event })\"\n        />\n      </mat-form-field>\n    }\n\n    <!-- Entity reference, cascade, and autoPatch -->\n    @if (meta()?.isEntityRef) {\n      <mat-divider></mat-divider>\n      <ngx-entity-reference-config />\n    }\n\n    <mat-divider></mat-divider>\n\n    <!-- Validators -->\n    @if (meta(); as m) {\n      @if (m.flagValidators.length || m.paramValidators.length) {\n        <span class=\"deb-section-title\">Validation</span>\n        <div class=\"deb-toggles\">\n          @for (v of m.flagValidators; track v) {\n            <mat-checkbox\n              [ngModel]=\"store.hasFlagValidator(f, v)\"\n              (ngModelChange)=\"store.toggleFlagValidator(f.id, v, $event)\"\n            >{{ v }}</mat-checkbox>\n          }\n        </div>\n        @for (v of m.paramValidators; track v) {\n          <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"deb-full\">\n            <mat-label>{{ v }}</mat-label>\n            <input\n              matInput\n              type=\"number\"\n              [ngModel]=\"store.getParamValidator(f, v)\"\n              (ngModelChange)=\"store.setParamValidator(f.id, v, toNum($event))\"\n            />\n          </mat-form-field>\n        }\n      }\n    }\n\n    <!-- Options (dropdown / radio / multiSelect) -->\n    @if (meta()?.hasOptions) {\n      <mat-divider></mat-divider>\n      <span class=\"deb-section-title\">Data source</span>\n      <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"deb-full\">\n        <mat-label>Options come from</mat-label>\n        <mat-select\n          data-testid=\"data-source\"\n          [ngModel]=\"store.fieldDataSource(f)\"\n          (ngModelChange)=\"store.setFieldDataSource(f.id, $event)\"\n        >\n          <mat-option value=\"none\">Nothing yet</mat-option>\n          <mat-option value=\"manual\">Options authored here</mat-option>\n          <mat-option value=\"lookup\">A named list</mat-option>\n        </mat-select>\n      </mat-form-field>\n    }\n\n    <!-- Named lookup list -->\n    @if (meta()?.hasOptions && store.fieldDataSource(f) === 'lookup') {\n      <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"deb-full\">\n        <mat-label>List name</mat-label>\n        <input\n          matInput\n          data-testid=\"list-name\"\n          [ngModel]=\"f.listName ?? ''\"\n          (ngModelChange)=\"store.setListName(f.id, $event)\"\n        />\n      </mat-form-field>\n      <p class=\"deb-hint\">\n        The consuming app resolves this name through its lookup registry. Options are not\n        authored here.\n      </p>\n    }\n\n    <!-- Inline options -->\n    @if (meta()?.hasOptions && store.fieldDataSource(f) !== 'lookup') {\n      <div class=\"deb-row\" style=\"justify-content: space-between;\">\n        <span class=\"deb-section-title\">Options</span>\n        <button mat-stroked-button type=\"button\" (click)=\"store.addOption(f.id)\">\n          <mat-icon>add</mat-icon> Option\n        </button>\n      </div>\n      @for (opt of f.options ?? []; track $index) {\n        <div class=\"deb-option-row\" data-testid=\"option-row\">\n          <!-- One input: the displayed text is the stored value. -->\n          <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"deb-full\">\n            <mat-label>Option ({{ lang() }})</mat-label>\n            <input\n              matInput\n              [attr.data-testid]=\"'option-' + $index\"\n              [ngModel]=\"optionLabel(opt)\"\n              (ngModelChange)=\"store.setOptionLabel(f.id, $index, lang(), $event)\"\n            />\n          </mat-form-field>\n          <button mat-icon-button type=\"button\" color=\"warn\"\n            (click)=\"store.removeOption(f.id, $index)\" matTooltip=\"Remove option\">\n            <mat-icon>delete</mat-icon>\n          </button>\n        </div>\n      }\n      @if (!(f.options ?? []).length) {\n        <p class=\"deb-hint\">No options yet \u2014 add at least one.</p>\n      }\n    }\n\n    <mat-divider></mat-divider>\n\n    <!-- Flags -->\n    <span class=\"deb-section-title\">Display</span>\n    <div class=\"deb-toggles\">\n      <mat-slide-toggle\n        [ngModel]=\"f.visibility ?? true\"\n        (ngModelChange)=\"store.updateField(f.id, { visibility: $event })\"\n      >Visible</mat-slide-toggle>\n      <mat-slide-toggle\n        [ngModel]=\"f.table?.visible ?? false\"\n        (ngModelChange)=\"store.updateField(f.id, { table: { visible: $event } })\"\n      >Table column</mat-slide-toggle>\n      <mat-slide-toggle\n        [ngModel]=\"f.readonly ?? false\"\n        (ngModelChange)=\"store.updateField(f.id, { readonly: $event })\"\n      >Read-only</mat-slide-toggle>\n      <mat-slide-toggle\n        [ngModel]=\"f.disabled ?? false\"\n        (ngModelChange)=\"store.updateField(f.id, { disabled: $event })\"\n      >Disabled</mat-slide-toggle>\n      <mat-slide-toggle\n        [ngModel]=\"f.maskData ?? false\"\n        (ngModelChange)=\"store.updateField(f.id, { maskData: $event })\"\n      >Mask data (RBAC)</mat-slide-toggle>\n      <mat-slide-toggle\n        data-testid=\"toggle-critical\"\n        [ngModel]=\"f.criticalField ?? false\"\n        (ngModelChange)=\"store.updateField(f.id, { criticalField: $event })\"\n        matTooltip=\"Renders locked; editing it announces a change against the session baseline.\"\n      >Critical field</mat-slide-toggle>\n      <mat-slide-toggle\n        [ngModel]=\"f.showOnMinimize ?? false\"\n        (ngModelChange)=\"store.updateField(f.id, { showOnMinimize: $event })\"\n        matTooltip=\"Shown in the record editor's summary panel.\"\n      >Show in summary</mat-slide-toggle>\n    </div>\n\n    <mat-divider></mat-divider>\n\n    <!-- Conditional visibility (static showWhen) -->\n    <div class=\"deb-row deb-row--split\">\n      <span class=\"deb-section-title\">Show when</span>\n      <button mat-stroked-button type=\"button\" data-testid=\"add-show-when\" (click)=\"addShowWhen(f)\">\n        <mat-icon>add</mat-icon> Condition\n      </button>\n    </div>\n    @for (entry of showWhenEntries(f); track entry.key) {\n      <div class=\"deb-option-row\" data-testid=\"option-row\">\n        <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\">\n          <mat-label>Watched field</mat-label>\n          <mat-select data-testid=\"show-when-field\"\n            [ngModel]=\"entry.key\" (ngModelChange)=\"renameShowWhen(f, entry.key, $event)\">\n            @for (option of optionsWith(entry.key); track option.value) {\n              <mat-option [value]=\"option.value\">\n                {{ option.label }} <span class=\"deb-path-hint\">{{ option.path }}</span>\n              </mat-option>\n            }\n          </mat-select>\n        </mat-form-field>\n        <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\">\n          <mat-label>Equals</mat-label>\n          <input matInput [ngModel]=\"entry.display\" (ngModelChange)=\"setShowWhenValue(f, entry.key, $event)\" />\n        </mat-form-field>\n        <button mat-icon-button type=\"button\" color=\"warn\" matTooltip=\"Remove condition\"\n          (click)=\"removeShowWhen(f, entry.key)\">\n          <mat-icon>delete</mat-icon>\n        </button>\n      </div>\n    }\n    @if (!showWhenEntries(f).length) {\n      <p class=\"deb-hint\">Always visible. Add a condition to show this field only for certain values.</p>\n    }\n\n    <!-- patchOnTrue (boolean/checkbox only) -->\n    @if (f.type === 'boolean' || f.type === 'checkbox') {\n      <mat-divider></mat-divider>\n      <div class=\"deb-row deb-row--split\">\n        <span class=\"deb-section-title\">Copy on true</span>\n        <button mat-stroked-button type=\"button\" data-testid=\"add-patch-on-true\"\n          (click)=\"store.addPatchOnTrueMapping(f.id)\">\n          <mat-icon>add</mat-icon> Mapping\n        </button>\n      </div>\n      @for (mapping of f.patchOnTrue ?? []; track $index) {\n        <div class=\"deb-option-row\" data-testid=\"option-row\">\n          <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\">\n            <mat-label>From field</mat-label>\n            <mat-select data-testid=\"patch-on-true-from\"\n              [ngModel]=\"mapping.from\"\n              (ngModelChange)=\"store.updatePatchOnTrueMapping(f.id, $index, { from: $event })\">\n              @for (option of optionsWith(mapping.from); track option.value) {\n                <mat-option [value]=\"option.value\">\n                  {{ option.label }} <span class=\"deb-path-hint\">{{ option.path }}</span>\n                </mat-option>\n              }\n            </mat-select>\n          </mat-form-field>\n          <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\">\n            <mat-label>To field</mat-label>\n            <mat-select data-testid=\"patch-on-true-to\"\n              [ngModel]=\"mapping.to\"\n              (ngModelChange)=\"store.updatePatchOnTrueMapping(f.id, $index, { to: $event })\">\n              @for (option of optionsWith(mapping.to); track option.value) {\n                <mat-option [value]=\"option.value\">\n                  {{ option.label }} <span class=\"deb-path-hint\">{{ option.path }}</span>\n                </mat-option>\n              }\n            </mat-select>\n          </mat-form-field>\n          <button mat-icon-button type=\"button\" color=\"warn\" matTooltip=\"Remove mapping\"\n            (click)=\"store.removePatchOnTrueMapping(f.id, $index)\">\n            <mat-icon>delete</mat-icon>\n          </button>\n        </div>\n      }\n      @if (!(f.patchOnTrue ?? []).length) {\n        <p class=\"deb-hint\">When this flips to true, copy one field's value into another.</p>\n      }\n    }\n\n    <mat-divider></mat-divider>\n\n    <!-- Rules attached to this field -->\n    <ngx-field-rules-list />\n\n    <mat-divider></mat-divider>\n\n    <!-- Cross-entity field reference & drift management (Phase 8) -->\n    <ngx-referenced-field-config />\n  </div>\n} @else {\n  <div class=\"deb-inspector__empty\">\n    <mat-icon>touch_app</mat-icon>\n    <p>Select a field to edit its properties.</p>\n  </div>\n}\n", styles: [".deb-inspector{display:flex;flex-direction:column;gap:12px}.deb-inspector__empty{color:var(--deb-muted, #6b7280);text-align:center;padding:24px 8px}.deb-full{width:100%}.deb-row{display:flex;gap:8px;align-items:center}.deb-row>*{flex:1}.deb-row--split{justify-content:space-between}.deb-row--split>*{flex:0 0 auto}.deb-toggles{display:grid;grid-template-columns:1fr 1fr;gap:8px 12px}.deb-option-row{display:flex;gap:6px;align-items:center}.deb-chip{display:inline-block;padding:2px 8px;border-radius:12px;background:var(--deb-accent-soft, #eef2ff);color:var(--deb-accent, #6366f1);font-size:12px;font-weight:600}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { 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.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i3$1.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "ngmodule", type: MatDividerModule }, { kind: "component", type: i3.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i5.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i8.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i8.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatSlideToggleModule }, { kind: "component", type: i9.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon", "disabledInteractive"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4$2.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: EntityReferenceConfigComponent, selector: "ngx-entity-reference-config" }, { kind: "component", type: FieldRulesListComponent, selector: "ngx-field-rules-list" }, { kind: "component", type: ReferencedFieldConfigComponent, selector: "ngx-referenced-field-config" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: FieldInspectorComponent, decorators: [{
             type: Component,
@@ -2482,7 +2581,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
                         EntityReferenceConfigComponent,
                         FieldRulesListComponent,
                         ReferencedFieldConfigComponent,
-                    ], template: "@if (field(); as f) {\n  <div class=\"deb-inspector\">\n    <!-- Identity -->\n    <div class=\"deb-row\">\n      <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\">\n        <mat-label>Field id</mat-label>\n        <input matInput data-testid=\"field-id\" [value]=\"f.id\" disabled />\n        @if (store.hasManualId(f.id)) {\n          <mat-hint>The stored data key for this saved field \u2014 fixed.</mat-hint>\n        } @else {\n          <mat-hint>Derived from the label. Used as the data key.</mat-hint>\n        }\n      </mat-form-field>\n      <span class=\"deb-chip\">{{ meta()?.label || f.type }}</span>\n    </div>\n\n    <!-- Localised text (active language) -->\n    <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"deb-full\">\n      <mat-label>Label ({{ lang() }})</mat-label>\n      <input\n        matInput\n        [ngModel]=\"labelValue(f)\"\n        (ngModelChange)=\"store.setFieldLabel(f.id, lang(), $event)\"\n      />\n    </mat-form-field>\n\n    @if (meta()?.supportsPlaceholder) {\n      <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"deb-full\">\n        <mat-label>Placeholder ({{ lang() }})</mat-label>\n        <input\n          matInput\n          [ngModel]=\"placeholderValue(f)\"\n          (ngModelChange)=\"store.setFieldPlaceholder(f.id, lang(), $event)\"\n        />\n      </mat-form-field>\n    }\n\n    @if (meta()?.supportsDefaultValue) {\n      <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"deb-full\">\n        <mat-label>Default value</mat-label>\n        <input\n          matInput\n          [ngModel]=\"f.defaultValue ?? ''\"\n          (ngModelChange)=\"store.updateField(f.id, { defaultValue: $event })\"\n        />\n      </mat-form-field>\n    }\n\n    <!-- Entity reference, cascade, and autoPatch -->\n    @if (meta()?.isEntityRef) {\n      <mat-divider></mat-divider>\n      <ngx-entity-reference-config />\n    }\n\n    <mat-divider></mat-divider>\n\n    <!-- Validators -->\n    @if (meta(); as m) {\n      @if (m.flagValidators.length || m.paramValidators.length) {\n        <span class=\"deb-section-title\">Validation</span>\n        <div class=\"deb-toggles\">\n          @for (v of m.flagValidators; track v) {\n            <mat-checkbox\n              [ngModel]=\"store.hasFlagValidator(f, v)\"\n              (ngModelChange)=\"store.toggleFlagValidator(f.id, v, $event)\"\n            >{{ v }}</mat-checkbox>\n          }\n        </div>\n        @for (v of m.paramValidators; track v) {\n          <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"deb-full\">\n            <mat-label>{{ v }}</mat-label>\n            <input\n              matInput\n              type=\"number\"\n              [ngModel]=\"store.getParamValidator(f, v)\"\n              (ngModelChange)=\"store.setParamValidator(f.id, v, toNum($event))\"\n            />\n          </mat-form-field>\n        }\n      }\n    }\n\n    <!-- Options (dropdown / radio / multiSelect) -->\n    @if (meta()?.hasOptions) {\n      <mat-divider></mat-divider>\n      <span class=\"deb-section-title\">Data source</span>\n      <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"deb-full\">\n        <mat-label>Options come from</mat-label>\n        <mat-select\n          data-testid=\"data-source\"\n          [ngModel]=\"store.fieldDataSource(f)\"\n          (ngModelChange)=\"store.setFieldDataSource(f.id, $event)\"\n        >\n          <mat-option value=\"none\">Nothing yet</mat-option>\n          <mat-option value=\"manual\">Options authored here</mat-option>\n          <mat-option value=\"lookup\">A named list</mat-option>\n        </mat-select>\n      </mat-form-field>\n    }\n\n    <!-- Named lookup list -->\n    @if (meta()?.hasOptions && store.fieldDataSource(f) === 'lookup') {\n      <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"deb-full\">\n        <mat-label>List name</mat-label>\n        <input\n          matInput\n          data-testid=\"list-name\"\n          [ngModel]=\"f.listName ?? ''\"\n          (ngModelChange)=\"store.setListName(f.id, $event)\"\n        />\n      </mat-form-field>\n      <p class=\"deb-hint\">\n        The consuming app resolves this name through its lookup registry. Options are not\n        authored here.\n      </p>\n    }\n\n    <!-- Inline options -->\n    @if (meta()?.hasOptions && store.fieldDataSource(f) !== 'lookup') {\n      <div class=\"deb-row\" style=\"justify-content: space-between;\">\n        <span class=\"deb-section-title\">Options</span>\n        <button mat-stroked-button type=\"button\" (click)=\"store.addOption(f.id)\">\n          <mat-icon>add</mat-icon> Option\n        </button>\n      </div>\n      @for (opt of f.options ?? []; track $index) {\n        <div class=\"deb-option-row\" data-testid=\"option-row\">\n          <!-- One input: the displayed text is the stored value. -->\n          <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"deb-full\">\n            <mat-label>Option ({{ lang() }})</mat-label>\n            <input\n              matInput\n              [attr.data-testid]=\"'option-' + $index\"\n              [ngModel]=\"optionLabel(opt)\"\n              (ngModelChange)=\"store.setOptionLabel(f.id, $index, lang(), $event)\"\n            />\n          </mat-form-field>\n          <button mat-icon-button type=\"button\" color=\"warn\"\n            (click)=\"store.removeOption(f.id, $index)\" matTooltip=\"Remove option\">\n            <mat-icon>delete</mat-icon>\n          </button>\n        </div>\n      }\n      @if (!(f.options ?? []).length) {\n        <p class=\"deb-hint\">No options yet \u2014 add at least one.</p>\n      }\n    }\n\n    <mat-divider></mat-divider>\n\n    <!-- Flags -->\n    <span class=\"deb-section-title\">Display</span>\n    <div class=\"deb-toggles\">\n      <mat-slide-toggle\n        [ngModel]=\"f.visibility ?? true\"\n        (ngModelChange)=\"store.updateField(f.id, { visibility: $event })\"\n      >Visible</mat-slide-toggle>\n      <mat-slide-toggle\n        [ngModel]=\"f.table?.visible ?? false\"\n        (ngModelChange)=\"store.updateField(f.id, { table: { visible: $event } })\"\n      >Table column</mat-slide-toggle>\n      <mat-slide-toggle\n        [ngModel]=\"f.readonly ?? false\"\n        (ngModelChange)=\"store.updateField(f.id, { readonly: $event })\"\n      >Read-only</mat-slide-toggle>\n      <mat-slide-toggle\n        [ngModel]=\"f.disabled ?? false\"\n        (ngModelChange)=\"store.updateField(f.id, { disabled: $event })\"\n      >Disabled</mat-slide-toggle>\n      <mat-slide-toggle\n        [ngModel]=\"f.maskData ?? false\"\n        (ngModelChange)=\"store.updateField(f.id, { maskData: $event })\"\n      >Mask data (RBAC)</mat-slide-toggle>\n      <mat-slide-toggle\n        data-testid=\"toggle-critical\"\n        [ngModel]=\"f.criticalField ?? false\"\n        (ngModelChange)=\"store.updateField(f.id, { criticalField: $event })\"\n        matTooltip=\"Renders locked; editing it announces a change against the session baseline.\"\n      >Critical field</mat-slide-toggle>\n      <mat-slide-toggle\n        [ngModel]=\"f.showOnMinimize ?? false\"\n        (ngModelChange)=\"store.updateField(f.id, { showOnMinimize: $event })\"\n        matTooltip=\"Shown in the record editor's summary panel.\"\n      >Show in summary</mat-slide-toggle>\n    </div>\n\n    <mat-divider></mat-divider>\n\n    <!-- Conditional visibility (static showWhen) -->\n    <div class=\"deb-row deb-row--split\">\n      <span class=\"deb-section-title\">Show when</span>\n      <button mat-stroked-button type=\"button\" data-testid=\"add-show-when\" (click)=\"addShowWhen(f)\">\n        <mat-icon>add</mat-icon> Condition\n      </button>\n    </div>\n    @for (entry of showWhenEntries(f); track entry.key) {\n      <div class=\"deb-option-row\" data-testid=\"option-row\">\n        <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\">\n          <mat-label>Field id</mat-label>\n          <input matInput [ngModel]=\"entry.key\" (ngModelChange)=\"renameShowWhen(f, entry.key, $event)\" />\n        </mat-form-field>\n        <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\">\n          <mat-label>Equals</mat-label>\n          <input matInput [ngModel]=\"entry.display\" (ngModelChange)=\"setShowWhenValue(f, entry.key, $event)\" />\n        </mat-form-field>\n        <button mat-icon-button type=\"button\" color=\"warn\" matTooltip=\"Remove condition\"\n          (click)=\"removeShowWhen(f, entry.key)\">\n          <mat-icon>delete</mat-icon>\n        </button>\n      </div>\n    }\n    @if (!showWhenEntries(f).length) {\n      <p class=\"deb-hint\">Always visible. Add a condition to show this field only for certain values.</p>\n    }\n\n    <!-- patchOnTrue (boolean/checkbox only) -->\n    @if (f.type === 'boolean' || f.type === 'checkbox') {\n      <mat-divider></mat-divider>\n      <div class=\"deb-row deb-row--split\">\n        <span class=\"deb-section-title\">Copy on true</span>\n        <button mat-stroked-button type=\"button\" data-testid=\"add-patch-on-true\"\n          (click)=\"store.addPatchOnTrueMapping(f.id)\">\n          <mat-icon>add</mat-icon> Mapping\n        </button>\n      </div>\n      @for (mapping of f.patchOnTrue ?? []; track $index) {\n        <div class=\"deb-option-row\" data-testid=\"option-row\">\n          <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\">\n            <mat-label>From field</mat-label>\n            <input matInput [ngModel]=\"mapping.from\"\n              (ngModelChange)=\"store.updatePatchOnTrueMapping(f.id, $index, { from: $event })\" />\n          </mat-form-field>\n          <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\">\n            <mat-label>To field</mat-label>\n            <input matInput [ngModel]=\"mapping.to\"\n              (ngModelChange)=\"store.updatePatchOnTrueMapping(f.id, $index, { to: $event })\" />\n          </mat-form-field>\n          <button mat-icon-button type=\"button\" color=\"warn\" matTooltip=\"Remove mapping\"\n            (click)=\"store.removePatchOnTrueMapping(f.id, $index)\">\n            <mat-icon>delete</mat-icon>\n          </button>\n        </div>\n      }\n      @if (!(f.patchOnTrue ?? []).length) {\n        <p class=\"deb-hint\">When this flips to true, copy one field's value into another.</p>\n      }\n    }\n\n    <mat-divider></mat-divider>\n\n    <!-- Rules attached to this field -->\n    <ngx-field-rules-list />\n\n    <mat-divider></mat-divider>\n\n    <!-- Cross-entity field reference & drift management (Phase 8) -->\n    <ngx-referenced-field-config />\n  </div>\n} @else {\n  <div class=\"deb-inspector__empty\">\n    <mat-icon>touch_app</mat-icon>\n    <p>Select a field to edit its properties.</p>\n  </div>\n}\n", styles: [".deb-inspector{display:flex;flex-direction:column;gap:12px}.deb-inspector__empty{color:var(--deb-muted, #6b7280);text-align:center;padding:24px 8px}.deb-full{width:100%}.deb-row{display:flex;gap:8px;align-items:center}.deb-row>*{flex:1}.deb-row--split{justify-content:space-between}.deb-row--split>*{flex:0 0 auto}.deb-toggles{display:grid;grid-template-columns:1fr 1fr;gap:8px 12px}.deb-option-row{display:flex;gap:6px;align-items:center}.deb-chip{display:inline-block;padding:2px 8px;border-radius:12px;background:var(--deb-accent-soft, #eef2ff);color:var(--deb-accent, #6366f1);font-size:12px;font-weight:600}\n"] }]
+                    ], template: "@if (field(); as f) {\n  <div class=\"deb-inspector\">\n    <!-- Identity -->\n    <div class=\"deb-row\">\n      <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\">\n        <mat-label>Field id</mat-label>\n        <input matInput data-testid=\"field-id\" [value]=\"f.id\" disabled />\n        @if (store.hasManualId(f.id)) {\n          <mat-hint>The stored data key for this saved field \u2014 fixed.</mat-hint>\n        } @else {\n          <mat-hint>Derived from the label. Used as the data key.</mat-hint>\n        }\n      </mat-form-field>\n      <span class=\"deb-chip\">{{ meta()?.label || f.type }}</span>\n    </div>\n\n    @if (tabOptions().length > 1) {\n      <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"deb-full\">\n        <mat-label>Tab</mat-label>\n        <mat-select data-testid=\"field-tab\"\n          [ngModel]=\"currentTabId(f)\" (ngModelChange)=\"moveToTab(f, $event)\">\n          @for (tab of tabOptions(); track tab.id) {\n            <mat-option [value]=\"tab.id\">{{ tab.label }}</mat-option>\n          }\n        </mat-select>\n        <mat-hint>Moving the field rewrites its path and repoints the rules that named it.</mat-hint>\n      </mat-form-field>\n    }\n\n\n    <!-- Localised text (active language) -->\n    <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"deb-full\">\n      <mat-label>Label ({{ lang() }})</mat-label>\n      <input\n        matInput\n        [ngModel]=\"labelValue(f)\"\n        (ngModelChange)=\"store.setFieldLabel(f.id, lang(), $event)\"\n      />\n    </mat-form-field>\n\n    @if (meta()?.supportsPlaceholder) {\n      <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"deb-full\">\n        <mat-label>Placeholder ({{ lang() }})</mat-label>\n        <input\n          matInput\n          [ngModel]=\"placeholderValue(f)\"\n          (ngModelChange)=\"store.setFieldPlaceholder(f.id, lang(), $event)\"\n        />\n      </mat-form-field>\n    }\n\n    @if (meta()?.supportsDefaultValue) {\n      <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"deb-full\">\n        <mat-label>Default value</mat-label>\n        <input\n          matInput\n          [ngModel]=\"f.defaultValue ?? ''\"\n          (ngModelChange)=\"store.updateField(f.id, { defaultValue: $event })\"\n        />\n      </mat-form-field>\n    }\n\n    <!-- Entity reference, cascade, and autoPatch -->\n    @if (meta()?.isEntityRef) {\n      <mat-divider></mat-divider>\n      <ngx-entity-reference-config />\n    }\n\n    <mat-divider></mat-divider>\n\n    <!-- Validators -->\n    @if (meta(); as m) {\n      @if (m.flagValidators.length || m.paramValidators.length) {\n        <span class=\"deb-section-title\">Validation</span>\n        <div class=\"deb-toggles\">\n          @for (v of m.flagValidators; track v) {\n            <mat-checkbox\n              [ngModel]=\"store.hasFlagValidator(f, v)\"\n              (ngModelChange)=\"store.toggleFlagValidator(f.id, v, $event)\"\n            >{{ v }}</mat-checkbox>\n          }\n        </div>\n        @for (v of m.paramValidators; track v) {\n          <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"deb-full\">\n            <mat-label>{{ v }}</mat-label>\n            <input\n              matInput\n              type=\"number\"\n              [ngModel]=\"store.getParamValidator(f, v)\"\n              (ngModelChange)=\"store.setParamValidator(f.id, v, toNum($event))\"\n            />\n          </mat-form-field>\n        }\n      }\n    }\n\n    <!-- Options (dropdown / radio / multiSelect) -->\n    @if (meta()?.hasOptions) {\n      <mat-divider></mat-divider>\n      <span class=\"deb-section-title\">Data source</span>\n      <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"deb-full\">\n        <mat-label>Options come from</mat-label>\n        <mat-select\n          data-testid=\"data-source\"\n          [ngModel]=\"store.fieldDataSource(f)\"\n          (ngModelChange)=\"store.setFieldDataSource(f.id, $event)\"\n        >\n          <mat-option value=\"none\">Nothing yet</mat-option>\n          <mat-option value=\"manual\">Options authored here</mat-option>\n          <mat-option value=\"lookup\">A named list</mat-option>\n        </mat-select>\n      </mat-form-field>\n    }\n\n    <!-- Named lookup list -->\n    @if (meta()?.hasOptions && store.fieldDataSource(f) === 'lookup') {\n      <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"deb-full\">\n        <mat-label>List name</mat-label>\n        <input\n          matInput\n          data-testid=\"list-name\"\n          [ngModel]=\"f.listName ?? ''\"\n          (ngModelChange)=\"store.setListName(f.id, $event)\"\n        />\n      </mat-form-field>\n      <p class=\"deb-hint\">\n        The consuming app resolves this name through its lookup registry. Options are not\n        authored here.\n      </p>\n    }\n\n    <!-- Inline options -->\n    @if (meta()?.hasOptions && store.fieldDataSource(f) !== 'lookup') {\n      <div class=\"deb-row\" style=\"justify-content: space-between;\">\n        <span class=\"deb-section-title\">Options</span>\n        <button mat-stroked-button type=\"button\" (click)=\"store.addOption(f.id)\">\n          <mat-icon>add</mat-icon> Option\n        </button>\n      </div>\n      @for (opt of f.options ?? []; track $index) {\n        <div class=\"deb-option-row\" data-testid=\"option-row\">\n          <!-- One input: the displayed text is the stored value. -->\n          <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"deb-full\">\n            <mat-label>Option ({{ lang() }})</mat-label>\n            <input\n              matInput\n              [attr.data-testid]=\"'option-' + $index\"\n              [ngModel]=\"optionLabel(opt)\"\n              (ngModelChange)=\"store.setOptionLabel(f.id, $index, lang(), $event)\"\n            />\n          </mat-form-field>\n          <button mat-icon-button type=\"button\" color=\"warn\"\n            (click)=\"store.removeOption(f.id, $index)\" matTooltip=\"Remove option\">\n            <mat-icon>delete</mat-icon>\n          </button>\n        </div>\n      }\n      @if (!(f.options ?? []).length) {\n        <p class=\"deb-hint\">No options yet \u2014 add at least one.</p>\n      }\n    }\n\n    <mat-divider></mat-divider>\n\n    <!-- Flags -->\n    <span class=\"deb-section-title\">Display</span>\n    <div class=\"deb-toggles\">\n      <mat-slide-toggle\n        [ngModel]=\"f.visibility ?? true\"\n        (ngModelChange)=\"store.updateField(f.id, { visibility: $event })\"\n      >Visible</mat-slide-toggle>\n      <mat-slide-toggle\n        [ngModel]=\"f.table?.visible ?? false\"\n        (ngModelChange)=\"store.updateField(f.id, { table: { visible: $event } })\"\n      >Table column</mat-slide-toggle>\n      <mat-slide-toggle\n        [ngModel]=\"f.readonly ?? false\"\n        (ngModelChange)=\"store.updateField(f.id, { readonly: $event })\"\n      >Read-only</mat-slide-toggle>\n      <mat-slide-toggle\n        [ngModel]=\"f.disabled ?? false\"\n        (ngModelChange)=\"store.updateField(f.id, { disabled: $event })\"\n      >Disabled</mat-slide-toggle>\n      <mat-slide-toggle\n        [ngModel]=\"f.maskData ?? false\"\n        (ngModelChange)=\"store.updateField(f.id, { maskData: $event })\"\n      >Mask data (RBAC)</mat-slide-toggle>\n      <mat-slide-toggle\n        data-testid=\"toggle-critical\"\n        [ngModel]=\"f.criticalField ?? false\"\n        (ngModelChange)=\"store.updateField(f.id, { criticalField: $event })\"\n        matTooltip=\"Renders locked; editing it announces a change against the session baseline.\"\n      >Critical field</mat-slide-toggle>\n      <mat-slide-toggle\n        [ngModel]=\"f.showOnMinimize ?? false\"\n        (ngModelChange)=\"store.updateField(f.id, { showOnMinimize: $event })\"\n        matTooltip=\"Shown in the record editor's summary panel.\"\n      >Show in summary</mat-slide-toggle>\n    </div>\n\n    <mat-divider></mat-divider>\n\n    <!-- Conditional visibility (static showWhen) -->\n    <div class=\"deb-row deb-row--split\">\n      <span class=\"deb-section-title\">Show when</span>\n      <button mat-stroked-button type=\"button\" data-testid=\"add-show-when\" (click)=\"addShowWhen(f)\">\n        <mat-icon>add</mat-icon> Condition\n      </button>\n    </div>\n    @for (entry of showWhenEntries(f); track entry.key) {\n      <div class=\"deb-option-row\" data-testid=\"option-row\">\n        <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\">\n          <mat-label>Watched field</mat-label>\n          <mat-select data-testid=\"show-when-field\"\n            [ngModel]=\"entry.key\" (ngModelChange)=\"renameShowWhen(f, entry.key, $event)\">\n            @for (option of optionsWith(entry.key); track option.value) {\n              <mat-option [value]=\"option.value\">\n                {{ option.label }} <span class=\"deb-path-hint\">{{ option.path }}</span>\n              </mat-option>\n            }\n          </mat-select>\n        </mat-form-field>\n        <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\">\n          <mat-label>Equals</mat-label>\n          <input matInput [ngModel]=\"entry.display\" (ngModelChange)=\"setShowWhenValue(f, entry.key, $event)\" />\n        </mat-form-field>\n        <button mat-icon-button type=\"button\" color=\"warn\" matTooltip=\"Remove condition\"\n          (click)=\"removeShowWhen(f, entry.key)\">\n          <mat-icon>delete</mat-icon>\n        </button>\n      </div>\n    }\n    @if (!showWhenEntries(f).length) {\n      <p class=\"deb-hint\">Always visible. Add a condition to show this field only for certain values.</p>\n    }\n\n    <!-- patchOnTrue (boolean/checkbox only) -->\n    @if (f.type === 'boolean' || f.type === 'checkbox') {\n      <mat-divider></mat-divider>\n      <div class=\"deb-row deb-row--split\">\n        <span class=\"deb-section-title\">Copy on true</span>\n        <button mat-stroked-button type=\"button\" data-testid=\"add-patch-on-true\"\n          (click)=\"store.addPatchOnTrueMapping(f.id)\">\n          <mat-icon>add</mat-icon> Mapping\n        </button>\n      </div>\n      @for (mapping of f.patchOnTrue ?? []; track $index) {\n        <div class=\"deb-option-row\" data-testid=\"option-row\">\n          <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\">\n            <mat-label>From field</mat-label>\n            <mat-select data-testid=\"patch-on-true-from\"\n              [ngModel]=\"mapping.from\"\n              (ngModelChange)=\"store.updatePatchOnTrueMapping(f.id, $index, { from: $event })\">\n              @for (option of optionsWith(mapping.from); track option.value) {\n                <mat-option [value]=\"option.value\">\n                  {{ option.label }} <span class=\"deb-path-hint\">{{ option.path }}</span>\n                </mat-option>\n              }\n            </mat-select>\n          </mat-form-field>\n          <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\">\n            <mat-label>To field</mat-label>\n            <mat-select data-testid=\"patch-on-true-to\"\n              [ngModel]=\"mapping.to\"\n              (ngModelChange)=\"store.updatePatchOnTrueMapping(f.id, $index, { to: $event })\">\n              @for (option of optionsWith(mapping.to); track option.value) {\n                <mat-option [value]=\"option.value\">\n                  {{ option.label }} <span class=\"deb-path-hint\">{{ option.path }}</span>\n                </mat-option>\n              }\n            </mat-select>\n          </mat-form-field>\n          <button mat-icon-button type=\"button\" color=\"warn\" matTooltip=\"Remove mapping\"\n            (click)=\"store.removePatchOnTrueMapping(f.id, $index)\">\n            <mat-icon>delete</mat-icon>\n          </button>\n        </div>\n      }\n      @if (!(f.patchOnTrue ?? []).length) {\n        <p class=\"deb-hint\">When this flips to true, copy one field's value into another.</p>\n      }\n    }\n\n    <mat-divider></mat-divider>\n\n    <!-- Rules attached to this field -->\n    <ngx-field-rules-list />\n\n    <mat-divider></mat-divider>\n\n    <!-- Cross-entity field reference & drift management (Phase 8) -->\n    <ngx-referenced-field-config />\n  </div>\n} @else {\n  <div class=\"deb-inspector__empty\">\n    <mat-icon>touch_app</mat-icon>\n    <p>Select a field to edit its properties.</p>\n  </div>\n}\n", styles: [".deb-inspector{display:flex;flex-direction:column;gap:12px}.deb-inspector__empty{color:var(--deb-muted, #6b7280);text-align:center;padding:24px 8px}.deb-full{width:100%}.deb-row{display:flex;gap:8px;align-items:center}.deb-row>*{flex:1}.deb-row--split{justify-content:space-between}.deb-row--split>*{flex:0 0 auto}.deb-toggles{display:grid;grid-template-columns:1fr 1fr;gap:8px 12px}.deb-option-row{display:flex;gap:6px;align-items:center}.deb-chip{display:inline-block;padding:2px 8px;border-radius:12px;background:var(--deb-accent-soft, #eef2ff);color:var(--deb-accent, #6366f1);font-size:12px;font-weight:600}\n"] }]
         }] });
 
 /**
@@ -3240,7 +3339,7 @@ class EntityBuilderComponent {
         this.store.setPermission(action, roles);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: EntityBuilderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: EntityBuilderComponent, isStandalone: true, selector: "ngx-entity-builder", inputs: { config: "config", languages: "languages", availableRoles: "availableRoles", userRoles: "userRoles", commonModules: "commonModules" }, outputs: { configChange: "configChange", save: "save" }, providers: [BuilderStore], usesOnChanges: true, ngImport: i0, template: "<mat-toolbar class=\"deb-toolbar\" color=\"primary\">\n  <mat-icon>dashboard_customize</mat-icon>\n  <span class=\"deb-toolbar__title\">Entity Builder</span>\n  <span class=\"deb-spacer\"></span>\n\n  @if (store.problems().length) {\n    <button\n      mat-button\n      type=\"button\"\n      class=\"deb-problems\"\n      [class.deb-problems--error]=\"!store.isValid()\"\n      [matTooltip]=\"store.problems().length + ' issue(s) \u2014 hover items in the list'\"\n    >\n      <mat-icon>{{ store.isValid() ? 'warning' : 'error' }}</mat-icon>\n      {{ store.errors().length }} / {{ store.problems().length }}\n    </button>\n  }\n\n  <button mat-button type=\"button\" (click)=\"copyJson()\">\n    <mat-icon>content_copy</mat-icon> Copy JSON\n  </button>\n  <!-- primary, not accent: white on Material's default pink accent is 3.33:1, below AA. -->\n  <button mat-flat-button color=\"primary\" type=\"button\" [disabled]=\"!store.isValid()\" (click)=\"doSave()\">\n    <mat-icon>save</mat-icon> Save\n  </button>\n</mat-toolbar>\n\n<div class=\"deb-body\">\n  <!-- \u2500\u2500\u2500 Left: settings, palette, tabs \u2500\u2500\u2500 -->\n  <div class=\"deb-col deb-col--left\">\n    <mat-card>\n      <mat-card-content>\n        <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"deb-full\">\n          <mat-label>Entity name</mat-label>\n          <input\n            matInput\n            [ngModel]=\"store.config().entity\"\n            (ngModelChange)=\"store.setEntityName($event)\"\n            placeholder=\"e.g. clients\"\n          />\n        </mat-form-field>\n\n        <div class=\"deb-row\">\n          <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"deb-grow\">\n            <mat-label>Editing language</mat-label>\n            <mat-select\n              [ngModel]=\"store.activeLanguage()\"\n              (ngModelChange)=\"store.setActiveLanguage($event)\"\n            >\n              @for (l of languages; track l) {\n                <mat-option [value]=\"l\">{{ l }}</mat-option>\n              }\n            </mat-select>\n          </mat-form-field>\n        </div>\n\n        <mat-slide-toggle\n          [ngModel]=\"store.config().maskData ?? false\"\n          (ngModelChange)=\"store.setMaskData($event)\"\n        >Mask this entity (RBAC)</mat-slide-toggle>\n\n        <mat-expansion-panel class=\"deb-rbac\">\n          <mat-expansion-panel-header>\n            <mat-panel-title>Permissions</mat-panel-title>\n          </mat-expansion-panel-header>\n          @for (action of rbacActions; track action) {\n            @if (availableRoles.length) {\n              <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"deb-full\">\n                <mat-label>{{ action }} roles</mat-label>\n                <mat-select multiple [ngModel]=\"rolesFor(action)\" (ngModelChange)=\"setRoles(action, $event)\">\n                  @for (role of availableRoles; track role) {\n                    <mat-option [value]=\"role\">{{ role }}</mat-option>\n                  }\n                </mat-select>\n              </mat-form-field>\n            } @else {\n              <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"deb-full\">\n                <mat-label>{{ action }} roles (comma-separated)</mat-label>\n                <input\n                  matInput\n                  [ngModel]=\"rolesFor(action).join(', ')\"\n                  (ngModelChange)=\"setRolesFromText(action, $event)\"\n                />\n              </mat-form-field>\n            }\n          }\n          <p class=\"deb-hint\">Empty = no restriction for that action.</p>\n        </mat-expansion-panel>\n      </mat-card-content>\n    </mat-card>\n\n    <mat-card>\n      <mat-card-header><mat-card-title>Add field</mat-card-title></mat-card-header>\n      <mat-card-content>\n        <ngx-field-palette (pick)=\"store.addField($event)\"></ngx-field-palette>\n      </mat-card-content>\n    </mat-card>\n\n    <mat-card>\n      <mat-card-content>\n        <ngx-tab-manager></ngx-tab-manager>\n      </mat-card-content>\n    </mat-card>\n  </div>\n\n  <!-- \u2500\u2500\u2500 Center: field canvas \u2500\u2500\u2500 -->\n  <div class=\"deb-col deb-col--center\">\n    <ngx-entity-builder-canvas />\n  </div>\n\n  <!-- \u2500\u2500\u2500 Right: inspector \u2500\u2500\u2500 -->\n  <div class=\"deb-col deb-col--right\">\n    <mat-card>\n      <mat-card-header><mat-card-title>Field properties</mat-card-title></mat-card-header>\n      <mat-card-content>\n        <ngx-field-inspector></ngx-field-inspector>\n      </mat-card-content>\n    </mat-card>\n  </div>\n</div>\n\n<!-- \u2500\u2500\u2500 Footer: JSON + optional live preview \u2500\u2500\u2500 -->\n<div class=\"deb-footer\">\n  <mat-expansion-panel>\n    <mat-expansion-panel-header>\n      <mat-panel-title><mat-icon>data_object</mat-icon>&nbsp;Config JSON</mat-panel-title>\n    </mat-expansion-panel-header>\n    <pre class=\"deb-json\">{{ json }}</pre>\n  </mat-expansion-panel>\n\n  <div class=\"deb-preview-slot\">\n    <ng-content select=\"[ngxBuilderPreview]\"></ng-content>\n  </div>\n</div>\n", styles: [":host{--deb-accent: #6366f1;--deb-accent-hover: #4f46e5;--deb-accent-soft: #eeef2;--deb-border: #e2e8f0;--deb-muted: #64748b;--deb-surface: #ffffff;display:block}.deb-toolbar__title{margin-left:8px;font-family:var(--font-heading, sans-serif);font-size:16px;font-weight:700;color:#fff}.deb-spacer{flex:1 1 auto}.deb-problems--error{color:#ef4444;font-weight:600}.deb-full{width:100%}.deb-grow{flex:1}.deb-row{display:flex;gap:8px;align-items:center}.deb-section-title{font-family:var(--font-heading, sans-serif);font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--deb-muted)}.deb-hint{margin:4px 0 0;font-size:12px;color:var(--deb-muted)}.deb-chip{display:inline-block;padding:3px 10px;border-radius:9999px;background:var(--deb-accent-soft);color:var(--deb-accent-hover);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.03em}.deb-chip--muted{background:#f1f5f9;color:var(--deb-muted)}.deb-body{display:grid;grid-template-columns:320px minmax(0,1fr) 380px;gap:20px;padding:20px;align-items:start}.deb-col{display:flex;flex-direction:column;gap:16px;min-width:0}.deb-col--right{position:sticky;top:20px}@media(max-width:1100px){.deb-body{grid-template-columns:1fr}.deb-col--right{position:static}}.deb-field-list{display:flex;flex-direction:column;gap:10px}.deb-field-row{display:flex;align-items:center;gap:10px;padding:10px 14px;border:1px solid var(--deb-border);border-radius:10px;background:var(--deb-surface);cursor:pointer;box-shadow:0 1px 3px #00000008;transition:all .18s cubic-bezier(.16,1,.3,1)}.deb-field-row:hover{border-color:#a5b4fc;background:#fcfaff;transform:translateY(-1px);box-shadow:0 4px 12px #6366f114}.deb-field-row--active{border-color:var(--deb-accent);border-left:4px solid var(--deb-accent);background:#f5f3ff;box-shadow:0 4px 16px #6366f12e}.deb-type-badge{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;padding:2px 7px;border-radius:6px;background:#e0e7ff;color:#4338ca}.deb-drag-handle{cursor:grab;color:#94a3b8;transition:color .15s}.deb-drag-handle:hover,.deb-field-type{color:var(--deb-accent)}.deb-field-meta{display:flex;flex-direction:column;min-width:0;flex:1}.deb-field-label{font-family:var(--font-heading, sans-serif);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#0f172a;font-size:14px}.deb-field-id{font-size:11px;color:var(--deb-muted);font-family:ui-monospace,SFMono-Regular,monospace}.deb-req{color:#ef4444;font-weight:700}.deb-empty,.deb-inspector__empty{text-align:center;color:var(--deb-muted);padding:40px 16px}.deb-empty mat-icon{transform:scale(1.8);margin-bottom:16px;color:#cbd5e1}.cdk-drag-preview{box-shadow:0 12px 28px #4f46e538;border-radius:10px;border:1px solid var(--deb-accent);background:#fff}.cdk-drag-placeholder{opacity:.35}.cdk-drag-animating{transition:transform .2s cubic-bezier(0,0,.2,1)}.deb-field-list.cdk-drop-list-dragging .deb-field-row:not(.cdk-drag-placeholder){transition:transform .2s cubic-bezier(0,0,.2,1)}.deb-footer{padding:0 20px 20px;display:flex;flex-direction:column;gap:16px}.deb-json{margin:0;max-height:320px;overflow:auto;font-family:ui-monospace,SFMono-Regular,monospace;font-size:12px;line-height:1.5;padding:14px;background:#0f172a;color:#e2e8f0;border-radius:10px}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { 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.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatCardModule }, { kind: "component", type: i2$1.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i2$1.MatCardContent, selector: "mat-card-content" }, { kind: "component", type: i2$1.MatCardHeader, selector: "mat-card-header" }, { kind: "directive", type: i2$1.MatCardTitle, selector: "mat-card-title, [mat-card-title], [matCardTitle]" }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "ngmodule", type: MatExpansionModule }, { kind: "component", type: i4$3.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i4$3.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["expandedHeight", "collapsedHeight", "tabIndex"] }, { kind: "directive", type: i4$3.MatExpansionPanelTitle, selector: "mat-panel-title" }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i5.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i8.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i8.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatSlideToggleModule }, { kind: "component", type: i9.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon", "disabledInteractive"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { kind: "ngmodule", type: MatToolbarModule }, { kind: "component", type: i10.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4$2.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: FieldPaletteComponent, selector: "ngx-field-palette", outputs: ["pick"] }, { kind: "component", type: TabManagerComponent, selector: "ngx-tab-manager" }, { kind: "component", type: FieldInspectorComponent, selector: "ngx-field-inspector" }, { kind: "component", type: EntityBuilderCanvasComponent, selector: "ngx-entity-builder-canvas" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: EntityBuilderComponent, isStandalone: true, selector: "ngx-entity-builder", inputs: { config: "config", languages: "languages", availableRoles: "availableRoles", userRoles: "userRoles", commonModules: "commonModules" }, outputs: { configChange: "configChange", save: "save" }, providers: [BuilderStore], usesOnChanges: true, ngImport: i0, template: "<mat-toolbar class=\"deb-toolbar\" color=\"primary\">\n  <mat-icon>dashboard_customize</mat-icon>\n  <span class=\"deb-toolbar__title\">Entity Builder</span>\n  <span class=\"deb-spacer\"></span>\n\n  @if (store.problems().length) {\n    <button\n      mat-button\n      type=\"button\"\n      class=\"deb-problems\"\n      [class.deb-problems--error]=\"!store.isValid()\"\n      [matTooltip]=\"store.problems().length + ' issue(s) \u2014 hover items in the list'\"\n    >\n      <mat-icon>{{ store.isValid() ? 'warning' : 'error' }}</mat-icon>\n      {{ store.errors().length }} / {{ store.problems().length }}\n    </button>\n  }\n\n  <button mat-button type=\"button\" (click)=\"copyJson()\">\n    <mat-icon>content_copy</mat-icon> Copy JSON\n  </button>\n  <!-- primary, not accent: white on Material's default pink accent is 3.33:1, below AA. -->\n  <button mat-flat-button color=\"primary\" type=\"button\" [disabled]=\"!store.isValid()\" (click)=\"doSave()\">\n    <mat-icon>save</mat-icon> Save\n  </button>\n</mat-toolbar>\n\n<div class=\"deb-body\">\n  <!-- \u2500\u2500\u2500 Left: settings, palette, tabs \u2500\u2500\u2500 -->\n  <div class=\"deb-col deb-col--left\">\n    <mat-card>\n      <mat-card-content>\n        <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"deb-full\">\n          <mat-label>Entity name</mat-label>\n          <input\n            matInput\n            [ngModel]=\"store.config().entity\"\n            (ngModelChange)=\"store.setEntityName($event)\"\n            placeholder=\"e.g. clients\"\n          />\n        </mat-form-field>\n\n        <div class=\"deb-row\">\n          <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"deb-grow\">\n            <mat-label>Editing language</mat-label>\n            <mat-select\n              [ngModel]=\"store.activeLanguage()\"\n              (ngModelChange)=\"store.setActiveLanguage($event)\"\n            >\n              @for (l of languages; track l) {\n                <mat-option [value]=\"l\">{{ l }}</mat-option>\n              }\n            </mat-select>\n          </mat-form-field>\n        </div>\n\n        <mat-slide-toggle\n          [ngModel]=\"store.config().maskData ?? false\"\n          (ngModelChange)=\"store.setMaskData($event)\"\n        >Mask this entity (RBAC)</mat-slide-toggle>\n\n        <mat-expansion-panel class=\"deb-rbac\">\n          <mat-expansion-panel-header>\n            <mat-panel-title>Permissions</mat-panel-title>\n          </mat-expansion-panel-header>\n          @for (action of rbacActions; track action) {\n            @if (availableRoles.length) {\n              <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"deb-full\">\n                <mat-label>{{ action }} roles</mat-label>\n                <mat-select multiple [ngModel]=\"rolesFor(action)\" (ngModelChange)=\"setRoles(action, $event)\">\n                  @for (role of availableRoles; track role) {\n                    <mat-option [value]=\"role\">{{ role }}</mat-option>\n                  }\n                </mat-select>\n              </mat-form-field>\n            } @else {\n              <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"deb-full\">\n                <mat-label>{{ action }} roles (comma-separated)</mat-label>\n                <input\n                  matInput\n                  [ngModel]=\"rolesFor(action).join(', ')\"\n                  (ngModelChange)=\"setRolesFromText(action, $event)\"\n                />\n              </mat-form-field>\n            }\n          }\n          <p class=\"deb-hint\">Empty = no restriction for that action.</p>\n        </mat-expansion-panel>\n      </mat-card-content>\n    </mat-card>\n\n    <mat-card>\n      <mat-card-header><mat-card-title>Add field</mat-card-title></mat-card-header>\n      <mat-card-content>\n        <ngx-field-palette (pick)=\"store.addField($event)\"></ngx-field-palette>\n      </mat-card-content>\n    </mat-card>\n\n    <mat-card>\n      <mat-card-content>\n        <ngx-tab-manager></ngx-tab-manager>\n      </mat-card-content>\n    </mat-card>\n  </div>\n\n  <!-- \u2500\u2500\u2500 Center: field canvas \u2500\u2500\u2500 -->\n  <div class=\"deb-col deb-col--center\">\n    <ngx-entity-builder-canvas />\n  </div>\n\n  <!-- \u2500\u2500\u2500 Right: inspector \u2500\u2500\u2500 -->\n  <div class=\"deb-col deb-col--right\">\n    <mat-card>\n      <mat-card-header><mat-card-title>Field properties</mat-card-title></mat-card-header>\n      <mat-card-content>\n        <ngx-field-inspector></ngx-field-inspector>\n      </mat-card-content>\n    </mat-card>\n  </div>\n</div>\n\n<!-- \u2500\u2500\u2500 Footer: JSON + optional live preview \u2500\u2500\u2500 -->\n<div class=\"deb-footer\">\n  <mat-expansion-panel>\n    <mat-expansion-panel-header>\n      <mat-panel-title><mat-icon>data_object</mat-icon>&nbsp;Config JSON</mat-panel-title>\n    </mat-expansion-panel-header>\n    <pre class=\"deb-json\">{{ json }}</pre>\n  </mat-expansion-panel>\n\n  <div class=\"deb-preview-slot\">\n    <ng-content select=\"[ngxBuilderPreview]\"></ng-content>\n  </div>\n</div>\n", styles: [":host{--deb-accent: #6366f1;--deb-accent-hover: #4f46e5;--deb-accent-soft: #eeef2;--deb-border: #e2e8f0;--deb-muted: #64748b;--deb-surface: #ffffff;display:block}.deb-toolbar__title{margin-left:8px;font-family:var(--font-heading, sans-serif);font-size:16px;font-weight:700;color:#fff}.deb-spacer{flex:1 1 auto}.deb-problems--error{color:#ef4444;font-weight:600}.deb-full{width:100%}.deb-grow{flex:1}.deb-row{display:flex;gap:8px;align-items:center}.deb-section-title{font-family:var(--font-heading, sans-serif);font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--deb-muted)}.deb-hint{margin:4px 0 0;font-size:12px;color:var(--deb-muted)}.deb-chip{display:inline-block;padding:3px 10px;border-radius:9999px;background:var(--deb-accent-soft);color:var(--deb-accent-hover);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.03em}.deb-chip--muted{background:#f1f5f9;color:var(--deb-muted)}.deb-body{display:grid;grid-template-columns:320px minmax(0,1fr) 380px;gap:20px;padding:20px;align-items:start}.deb-col{display:flex;flex-direction:column;gap:16px;min-width:0}.deb-col--right{position:sticky;top:20px;max-height:calc(100vh - 40px);overflow:auto}@media(max-width:1100px){.deb-body{grid-template-columns:1fr}.deb-col--right{position:static}}.deb-field-list{display:flex;flex-direction:column;gap:10px}.deb-field-row{display:flex;align-items:center;gap:10px;padding:10px 14px;border:1px solid var(--deb-border);border-radius:10px;background:var(--deb-surface);cursor:pointer;box-shadow:0 1px 3px #00000008;transition:all .18s cubic-bezier(.16,1,.3,1)}.deb-field-row:hover{border-color:#a5b4fc;background:#fcfaff;transform:translateY(-1px);box-shadow:0 4px 12px #6366f114}.deb-field-row--active{border-color:var(--deb-accent);border-left:4px solid var(--deb-accent);background:#f5f3ff;box-shadow:0 4px 16px #6366f12e}.deb-type-badge{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;padding:2px 7px;border-radius:6px;background:#e0e7ff;color:#4338ca}.deb-drag-handle{cursor:grab;color:#94a3b8;transition:color .15s}.deb-drag-handle:hover,.deb-field-type{color:var(--deb-accent)}.deb-field-meta{display:flex;flex-direction:column;min-width:0;flex:1}.deb-field-label{font-family:var(--font-heading, sans-serif);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#0f172a;font-size:14px}.deb-field-id{font-size:11px;color:var(--deb-muted);font-family:ui-monospace,SFMono-Regular,monospace}.deb-req{color:#ef4444;font-weight:700}.deb-empty,.deb-inspector__empty{text-align:center;color:var(--deb-muted);padding:40px 16px}.deb-empty mat-icon{transform:scale(1.8);margin-bottom:16px;color:#cbd5e1}.cdk-drag-preview{box-shadow:0 12px 28px #4f46e538;border-radius:10px;border:1px solid var(--deb-accent);background:#fff}.cdk-drag-placeholder{opacity:.35}.cdk-drag-animating{transition:transform .2s cubic-bezier(0,0,.2,1)}.deb-field-list.cdk-drop-list-dragging .deb-field-row:not(.cdk-drag-placeholder){transition:transform .2s cubic-bezier(0,0,.2,1)}.deb-footer{padding:0 20px 20px;display:flex;flex-direction:column;gap:16px}.deb-json{margin:0;max-height:320px;overflow:auto;font-family:ui-monospace,SFMono-Regular,monospace;font-size:12px;line-height:1.5;padding:14px;background:#0f172a;color:#e2e8f0;border-radius:10px}.deb-path-hint{color:#0000008c;font-size:11px;margin-left:6px}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { 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.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatCardModule }, { kind: "component", type: i2$1.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i2$1.MatCardContent, selector: "mat-card-content" }, { kind: "component", type: i2$1.MatCardHeader, selector: "mat-card-header" }, { kind: "directive", type: i2$1.MatCardTitle, selector: "mat-card-title, [mat-card-title], [matCardTitle]" }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "ngmodule", type: MatExpansionModule }, { kind: "component", type: i4$3.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i4$3.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["expandedHeight", "collapsedHeight", "tabIndex"] }, { kind: "directive", type: i4$3.MatExpansionPanelTitle, selector: "mat-panel-title" }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i5.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i8.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i8.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatSlideToggleModule }, { kind: "component", type: i9.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon", "disabledInteractive"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { kind: "ngmodule", type: MatToolbarModule }, { kind: "component", type: i10.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4$2.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: FieldPaletteComponent, selector: "ngx-field-palette", outputs: ["pick"] }, { kind: "component", type: TabManagerComponent, selector: "ngx-tab-manager" }, { kind: "component", type: FieldInspectorComponent, selector: "ngx-field-inspector" }, { kind: "component", type: EntityBuilderCanvasComponent, selector: "ngx-entity-builder-canvas" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: EntityBuilderComponent, decorators: [{
             type: Component,
@@ -3261,7 +3360,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
                         TabManagerComponent,
                         FieldInspectorComponent,
                         EntityBuilderCanvasComponent,
-                    ], template: "<mat-toolbar class=\"deb-toolbar\" color=\"primary\">\n  <mat-icon>dashboard_customize</mat-icon>\n  <span class=\"deb-toolbar__title\">Entity Builder</span>\n  <span class=\"deb-spacer\"></span>\n\n  @if (store.problems().length) {\n    <button\n      mat-button\n      type=\"button\"\n      class=\"deb-problems\"\n      [class.deb-problems--error]=\"!store.isValid()\"\n      [matTooltip]=\"store.problems().length + ' issue(s) \u2014 hover items in the list'\"\n    >\n      <mat-icon>{{ store.isValid() ? 'warning' : 'error' }}</mat-icon>\n      {{ store.errors().length }} / {{ store.problems().length }}\n    </button>\n  }\n\n  <button mat-button type=\"button\" (click)=\"copyJson()\">\n    <mat-icon>content_copy</mat-icon> Copy JSON\n  </button>\n  <!-- primary, not accent: white on Material's default pink accent is 3.33:1, below AA. -->\n  <button mat-flat-button color=\"primary\" type=\"button\" [disabled]=\"!store.isValid()\" (click)=\"doSave()\">\n    <mat-icon>save</mat-icon> Save\n  </button>\n</mat-toolbar>\n\n<div class=\"deb-body\">\n  <!-- \u2500\u2500\u2500 Left: settings, palette, tabs \u2500\u2500\u2500 -->\n  <div class=\"deb-col deb-col--left\">\n    <mat-card>\n      <mat-card-content>\n        <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"deb-full\">\n          <mat-label>Entity name</mat-label>\n          <input\n            matInput\n            [ngModel]=\"store.config().entity\"\n            (ngModelChange)=\"store.setEntityName($event)\"\n            placeholder=\"e.g. clients\"\n          />\n        </mat-form-field>\n\n        <div class=\"deb-row\">\n          <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"deb-grow\">\n            <mat-label>Editing language</mat-label>\n            <mat-select\n              [ngModel]=\"store.activeLanguage()\"\n              (ngModelChange)=\"store.setActiveLanguage($event)\"\n            >\n              @for (l of languages; track l) {\n                <mat-option [value]=\"l\">{{ l }}</mat-option>\n              }\n            </mat-select>\n          </mat-form-field>\n        </div>\n\n        <mat-slide-toggle\n          [ngModel]=\"store.config().maskData ?? false\"\n          (ngModelChange)=\"store.setMaskData($event)\"\n        >Mask this entity (RBAC)</mat-slide-toggle>\n\n        <mat-expansion-panel class=\"deb-rbac\">\n          <mat-expansion-panel-header>\n            <mat-panel-title>Permissions</mat-panel-title>\n          </mat-expansion-panel-header>\n          @for (action of rbacActions; track action) {\n            @if (availableRoles.length) {\n              <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"deb-full\">\n                <mat-label>{{ action }} roles</mat-label>\n                <mat-select multiple [ngModel]=\"rolesFor(action)\" (ngModelChange)=\"setRoles(action, $event)\">\n                  @for (role of availableRoles; track role) {\n                    <mat-option [value]=\"role\">{{ role }}</mat-option>\n                  }\n                </mat-select>\n              </mat-form-field>\n            } @else {\n              <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"deb-full\">\n                <mat-label>{{ action }} roles (comma-separated)</mat-label>\n                <input\n                  matInput\n                  [ngModel]=\"rolesFor(action).join(', ')\"\n                  (ngModelChange)=\"setRolesFromText(action, $event)\"\n                />\n              </mat-form-field>\n            }\n          }\n          <p class=\"deb-hint\">Empty = no restriction for that action.</p>\n        </mat-expansion-panel>\n      </mat-card-content>\n    </mat-card>\n\n    <mat-card>\n      <mat-card-header><mat-card-title>Add field</mat-card-title></mat-card-header>\n      <mat-card-content>\n        <ngx-field-palette (pick)=\"store.addField($event)\"></ngx-field-palette>\n      </mat-card-content>\n    </mat-card>\n\n    <mat-card>\n      <mat-card-content>\n        <ngx-tab-manager></ngx-tab-manager>\n      </mat-card-content>\n    </mat-card>\n  </div>\n\n  <!-- \u2500\u2500\u2500 Center: field canvas \u2500\u2500\u2500 -->\n  <div class=\"deb-col deb-col--center\">\n    <ngx-entity-builder-canvas />\n  </div>\n\n  <!-- \u2500\u2500\u2500 Right: inspector \u2500\u2500\u2500 -->\n  <div class=\"deb-col deb-col--right\">\n    <mat-card>\n      <mat-card-header><mat-card-title>Field properties</mat-card-title></mat-card-header>\n      <mat-card-content>\n        <ngx-field-inspector></ngx-field-inspector>\n      </mat-card-content>\n    </mat-card>\n  </div>\n</div>\n\n<!-- \u2500\u2500\u2500 Footer: JSON + optional live preview \u2500\u2500\u2500 -->\n<div class=\"deb-footer\">\n  <mat-expansion-panel>\n    <mat-expansion-panel-header>\n      <mat-panel-title><mat-icon>data_object</mat-icon>&nbsp;Config JSON</mat-panel-title>\n    </mat-expansion-panel-header>\n    <pre class=\"deb-json\">{{ json }}</pre>\n  </mat-expansion-panel>\n\n  <div class=\"deb-preview-slot\">\n    <ng-content select=\"[ngxBuilderPreview]\"></ng-content>\n  </div>\n</div>\n", styles: [":host{--deb-accent: #6366f1;--deb-accent-hover: #4f46e5;--deb-accent-soft: #eeef2;--deb-border: #e2e8f0;--deb-muted: #64748b;--deb-surface: #ffffff;display:block}.deb-toolbar__title{margin-left:8px;font-family:var(--font-heading, sans-serif);font-size:16px;font-weight:700;color:#fff}.deb-spacer{flex:1 1 auto}.deb-problems--error{color:#ef4444;font-weight:600}.deb-full{width:100%}.deb-grow{flex:1}.deb-row{display:flex;gap:8px;align-items:center}.deb-section-title{font-family:var(--font-heading, sans-serif);font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--deb-muted)}.deb-hint{margin:4px 0 0;font-size:12px;color:var(--deb-muted)}.deb-chip{display:inline-block;padding:3px 10px;border-radius:9999px;background:var(--deb-accent-soft);color:var(--deb-accent-hover);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.03em}.deb-chip--muted{background:#f1f5f9;color:var(--deb-muted)}.deb-body{display:grid;grid-template-columns:320px minmax(0,1fr) 380px;gap:20px;padding:20px;align-items:start}.deb-col{display:flex;flex-direction:column;gap:16px;min-width:0}.deb-col--right{position:sticky;top:20px}@media(max-width:1100px){.deb-body{grid-template-columns:1fr}.deb-col--right{position:static}}.deb-field-list{display:flex;flex-direction:column;gap:10px}.deb-field-row{display:flex;align-items:center;gap:10px;padding:10px 14px;border:1px solid var(--deb-border);border-radius:10px;background:var(--deb-surface);cursor:pointer;box-shadow:0 1px 3px #00000008;transition:all .18s cubic-bezier(.16,1,.3,1)}.deb-field-row:hover{border-color:#a5b4fc;background:#fcfaff;transform:translateY(-1px);box-shadow:0 4px 12px #6366f114}.deb-field-row--active{border-color:var(--deb-accent);border-left:4px solid var(--deb-accent);background:#f5f3ff;box-shadow:0 4px 16px #6366f12e}.deb-type-badge{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;padding:2px 7px;border-radius:6px;background:#e0e7ff;color:#4338ca}.deb-drag-handle{cursor:grab;color:#94a3b8;transition:color .15s}.deb-drag-handle:hover,.deb-field-type{color:var(--deb-accent)}.deb-field-meta{display:flex;flex-direction:column;min-width:0;flex:1}.deb-field-label{font-family:var(--font-heading, sans-serif);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#0f172a;font-size:14px}.deb-field-id{font-size:11px;color:var(--deb-muted);font-family:ui-monospace,SFMono-Regular,monospace}.deb-req{color:#ef4444;font-weight:700}.deb-empty,.deb-inspector__empty{text-align:center;color:var(--deb-muted);padding:40px 16px}.deb-empty mat-icon{transform:scale(1.8);margin-bottom:16px;color:#cbd5e1}.cdk-drag-preview{box-shadow:0 12px 28px #4f46e538;border-radius:10px;border:1px solid var(--deb-accent);background:#fff}.cdk-drag-placeholder{opacity:.35}.cdk-drag-animating{transition:transform .2s cubic-bezier(0,0,.2,1)}.deb-field-list.cdk-drop-list-dragging .deb-field-row:not(.cdk-drag-placeholder){transition:transform .2s cubic-bezier(0,0,.2,1)}.deb-footer{padding:0 20px 20px;display:flex;flex-direction:column;gap:16px}.deb-json{margin:0;max-height:320px;overflow:auto;font-family:ui-monospace,SFMono-Regular,monospace;font-size:12px;line-height:1.5;padding:14px;background:#0f172a;color:#e2e8f0;border-radius:10px}\n"] }]
+                    ], template: "<mat-toolbar class=\"deb-toolbar\" color=\"primary\">\n  <mat-icon>dashboard_customize</mat-icon>\n  <span class=\"deb-toolbar__title\">Entity Builder</span>\n  <span class=\"deb-spacer\"></span>\n\n  @if (store.problems().length) {\n    <button\n      mat-button\n      type=\"button\"\n      class=\"deb-problems\"\n      [class.deb-problems--error]=\"!store.isValid()\"\n      [matTooltip]=\"store.problems().length + ' issue(s) \u2014 hover items in the list'\"\n    >\n      <mat-icon>{{ store.isValid() ? 'warning' : 'error' }}</mat-icon>\n      {{ store.errors().length }} / {{ store.problems().length }}\n    </button>\n  }\n\n  <button mat-button type=\"button\" (click)=\"copyJson()\">\n    <mat-icon>content_copy</mat-icon> Copy JSON\n  </button>\n  <!-- primary, not accent: white on Material's default pink accent is 3.33:1, below AA. -->\n  <button mat-flat-button color=\"primary\" type=\"button\" [disabled]=\"!store.isValid()\" (click)=\"doSave()\">\n    <mat-icon>save</mat-icon> Save\n  </button>\n</mat-toolbar>\n\n<div class=\"deb-body\">\n  <!-- \u2500\u2500\u2500 Left: settings, palette, tabs \u2500\u2500\u2500 -->\n  <div class=\"deb-col deb-col--left\">\n    <mat-card>\n      <mat-card-content>\n        <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"deb-full\">\n          <mat-label>Entity name</mat-label>\n          <input\n            matInput\n            [ngModel]=\"store.config().entity\"\n            (ngModelChange)=\"store.setEntityName($event)\"\n            placeholder=\"e.g. clients\"\n          />\n        </mat-form-field>\n\n        <div class=\"deb-row\">\n          <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"deb-grow\">\n            <mat-label>Editing language</mat-label>\n            <mat-select\n              [ngModel]=\"store.activeLanguage()\"\n              (ngModelChange)=\"store.setActiveLanguage($event)\"\n            >\n              @for (l of languages; track l) {\n                <mat-option [value]=\"l\">{{ l }}</mat-option>\n              }\n            </mat-select>\n          </mat-form-field>\n        </div>\n\n        <mat-slide-toggle\n          [ngModel]=\"store.config().maskData ?? false\"\n          (ngModelChange)=\"store.setMaskData($event)\"\n        >Mask this entity (RBAC)</mat-slide-toggle>\n\n        <mat-expansion-panel class=\"deb-rbac\">\n          <mat-expansion-panel-header>\n            <mat-panel-title>Permissions</mat-panel-title>\n          </mat-expansion-panel-header>\n          @for (action of rbacActions; track action) {\n            @if (availableRoles.length) {\n              <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"deb-full\">\n                <mat-label>{{ action }} roles</mat-label>\n                <mat-select multiple [ngModel]=\"rolesFor(action)\" (ngModelChange)=\"setRoles(action, $event)\">\n                  @for (role of availableRoles; track role) {\n                    <mat-option [value]=\"role\">{{ role }}</mat-option>\n                  }\n                </mat-select>\n              </mat-form-field>\n            } @else {\n              <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"deb-full\">\n                <mat-label>{{ action }} roles (comma-separated)</mat-label>\n                <input\n                  matInput\n                  [ngModel]=\"rolesFor(action).join(', ')\"\n                  (ngModelChange)=\"setRolesFromText(action, $event)\"\n                />\n              </mat-form-field>\n            }\n          }\n          <p class=\"deb-hint\">Empty = no restriction for that action.</p>\n        </mat-expansion-panel>\n      </mat-card-content>\n    </mat-card>\n\n    <mat-card>\n      <mat-card-header><mat-card-title>Add field</mat-card-title></mat-card-header>\n      <mat-card-content>\n        <ngx-field-palette (pick)=\"store.addField($event)\"></ngx-field-palette>\n      </mat-card-content>\n    </mat-card>\n\n    <mat-card>\n      <mat-card-content>\n        <ngx-tab-manager></ngx-tab-manager>\n      </mat-card-content>\n    </mat-card>\n  </div>\n\n  <!-- \u2500\u2500\u2500 Center: field canvas \u2500\u2500\u2500 -->\n  <div class=\"deb-col deb-col--center\">\n    <ngx-entity-builder-canvas />\n  </div>\n\n  <!-- \u2500\u2500\u2500 Right: inspector \u2500\u2500\u2500 -->\n  <div class=\"deb-col deb-col--right\">\n    <mat-card>\n      <mat-card-header><mat-card-title>Field properties</mat-card-title></mat-card-header>\n      <mat-card-content>\n        <ngx-field-inspector></ngx-field-inspector>\n      </mat-card-content>\n    </mat-card>\n  </div>\n</div>\n\n<!-- \u2500\u2500\u2500 Footer: JSON + optional live preview \u2500\u2500\u2500 -->\n<div class=\"deb-footer\">\n  <mat-expansion-panel>\n    <mat-expansion-panel-header>\n      <mat-panel-title><mat-icon>data_object</mat-icon>&nbsp;Config JSON</mat-panel-title>\n    </mat-expansion-panel-header>\n    <pre class=\"deb-json\">{{ json }}</pre>\n  </mat-expansion-panel>\n\n  <div class=\"deb-preview-slot\">\n    <ng-content select=\"[ngxBuilderPreview]\"></ng-content>\n  </div>\n</div>\n", styles: [":host{--deb-accent: #6366f1;--deb-accent-hover: #4f46e5;--deb-accent-soft: #eeef2;--deb-border: #e2e8f0;--deb-muted: #64748b;--deb-surface: #ffffff;display:block}.deb-toolbar__title{margin-left:8px;font-family:var(--font-heading, sans-serif);font-size:16px;font-weight:700;color:#fff}.deb-spacer{flex:1 1 auto}.deb-problems--error{color:#ef4444;font-weight:600}.deb-full{width:100%}.deb-grow{flex:1}.deb-row{display:flex;gap:8px;align-items:center}.deb-section-title{font-family:var(--font-heading, sans-serif);font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--deb-muted)}.deb-hint{margin:4px 0 0;font-size:12px;color:var(--deb-muted)}.deb-chip{display:inline-block;padding:3px 10px;border-radius:9999px;background:var(--deb-accent-soft);color:var(--deb-accent-hover);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.03em}.deb-chip--muted{background:#f1f5f9;color:var(--deb-muted)}.deb-body{display:grid;grid-template-columns:320px minmax(0,1fr) 380px;gap:20px;padding:20px;align-items:start}.deb-col{display:flex;flex-direction:column;gap:16px;min-width:0}.deb-col--right{position:sticky;top:20px;max-height:calc(100vh - 40px);overflow:auto}@media(max-width:1100px){.deb-body{grid-template-columns:1fr}.deb-col--right{position:static}}.deb-field-list{display:flex;flex-direction:column;gap:10px}.deb-field-row{display:flex;align-items:center;gap:10px;padding:10px 14px;border:1px solid var(--deb-border);border-radius:10px;background:var(--deb-surface);cursor:pointer;box-shadow:0 1px 3px #00000008;transition:all .18s cubic-bezier(.16,1,.3,1)}.deb-field-row:hover{border-color:#a5b4fc;background:#fcfaff;transform:translateY(-1px);box-shadow:0 4px 12px #6366f114}.deb-field-row--active{border-color:var(--deb-accent);border-left:4px solid var(--deb-accent);background:#f5f3ff;box-shadow:0 4px 16px #6366f12e}.deb-type-badge{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;padding:2px 7px;border-radius:6px;background:#e0e7ff;color:#4338ca}.deb-drag-handle{cursor:grab;color:#94a3b8;transition:color .15s}.deb-drag-handle:hover,.deb-field-type{color:var(--deb-accent)}.deb-field-meta{display:flex;flex-direction:column;min-width:0;flex:1}.deb-field-label{font-family:var(--font-heading, sans-serif);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#0f172a;font-size:14px}.deb-field-id{font-size:11px;color:var(--deb-muted);font-family:ui-monospace,SFMono-Regular,monospace}.deb-req{color:#ef4444;font-weight:700}.deb-empty,.deb-inspector__empty{text-align:center;color:var(--deb-muted);padding:40px 16px}.deb-empty mat-icon{transform:scale(1.8);margin-bottom:16px;color:#cbd5e1}.cdk-drag-preview{box-shadow:0 12px 28px #4f46e538;border-radius:10px;border:1px solid var(--deb-accent);background:#fff}.cdk-drag-placeholder{opacity:.35}.cdk-drag-animating{transition:transform .2s cubic-bezier(0,0,.2,1)}.deb-field-list.cdk-drop-list-dragging .deb-field-row:not(.cdk-drag-placeholder){transition:transform .2s cubic-bezier(0,0,.2,1)}.deb-footer{padding:0 20px 20px;display:flex;flex-direction:column;gap:16px}.deb-json{margin:0;max-height:320px;overflow:auto;font-family:ui-monospace,SFMono-Regular,monospace;font-size:12px;line-height:1.5;padding:14px;background:#0f172a;color:#e2e8f0;border-radius:10px}.deb-path-hint{color:#0000008c;font-size:11px;margin-left:6px}\n"] }]
         }], ctorParameters: () => [], propDecorators: { config: [{
                 type: Input
             }], languages: [{
@@ -3284,5 +3383,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { BuilderStore, EntityBuilderCanvasComponent, EntityBuilderComponent, EntityBuilderTreeNodeComponent, EntityReferenceConfigComponent, FieldInspectorComponent, FieldPaletteComponent, FieldRulesListComponent, RuleFormComponent, TabManagerComponent };
+export { BuilderStore, EntityBuilderCanvasComponent, EntityBuilderComponent, EntityBuilderTreeNodeComponent, EntityReferenceConfigComponent, FieldInspectorComponent, FieldPaletteComponent, FieldRulesListComponent, RuleFormComponent, TabManagerComponent, fieldPathOptions, withExistingOptions };
 //# sourceMappingURL=ngx-dynamic-entity-builder.mjs.map