ngx-dynamic-entity-builder 2.1.1 → 2.2.0

package/README.md

@@ -36,7 +36,7 @@ export const appConfig: ApplicationConfig = {
 - **Tab & tree manager** — organize primary tabs, sub-tabs, nested groups, and array field lists. Nesting is recursive; no depth limit is enforced.
 - **Live preview slot** — a projected content slot, so the builder renders a preview without depending on the renderer package.
 - **Undo & redo** — `Ctrl`/`Cmd`+`Z` and `Ctrl`/`Cmd`+`Shift`+`Z`, plus toolbar buttons that disable at the ends of the history. Consecutive edits inside 400ms merge when the structure is unchanged, so typing a label is one step while adding two fields is two.
-- **All 21 field types** from the `@dynamic-entity/core` catalog.
+- **All 27 field types** from the `@dynamic-entity/core` catalog.
 - **Translatable interface** — every word the builder itself renders resolves through `BUILDER_TEXT`; `uiLanguage` picks the locale. Date punctuation in a live preview follows `setDateFormatters` from `@dynamic-entity/core`; the masked placeholder is a renderer token (`MASKED_PLACEHOLDER`), not a builder one.
 
 ---

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

@@ -837,6 +837,12 @@ class BuilderStore {
                 if (field.validators.pattern === LEGACY_EMAIL_PATTERN)
                     delete field.validators.pattern;
             }
+            else if (validator === 'url' || validator === 'phone') {
+                if (on)
+                    field.validators[validator] = true;
+                else
+                    delete field.validators[validator];
+            }
         });
     }
     setParamValidator(id, validator, value) {
@@ -880,6 +886,8 @@ class BuilderStore {
             // the box. Recognising it keeps older configs showing Email as ticked.
             return !!field.validators?.email || field.validators?.pattern === LEGACY_EMAIL_PATTERN;
         }
+        if (validator === 'url' || validator === 'phone')
+            return !!field.validators?.[validator];
         return false;
     }
     // ─── Options (dropdown / multiSelect / radio) ────────────────────────────────
@@ -1981,6 +1989,8 @@ const DEFAULT_BUILDER_TEXT = {
     hintInLanguage: 'Help text ({language})',
     hintHint: 'An info icon beside the label, shown on hover and while the field has focus. Read out with the field.',
     defaultValue: 'Default value',
+    sliderStep: 'Step',
+    sliderStepHint: 'How far one notch moves the slider. Leave empty for 1.',
     // Field inspector — section headings and the layout control.
     sectionBasics: 'Basics',
     sectionLayout: 'Layout',
@@ -3379,6 +3389,11 @@ class FieldInspectorComponent {
         ];
         return flags.filter(Boolean).length;
     }
+    /** A step must be above zero; anything else clears it, and the slider uses 1. */
+    positiveOrUnset(value) {
+        const n = this.toNum(value);
+        return n !== null && n > 0 ? n : undefined;
+    }
     toNum(value) {
         if (value === '' || value === null || value === undefined)
             return null;
@@ -3534,7 +3549,7 @@ class FieldInspectorComponent {
         { label: 'Slug', pattern: '^[a-z0-9]+(?:-[a-z0-9]+)*$' },
     ];
     supportsPattern(type) {
-        return ['text', 'textarea', 'markdown', 'email', 'password'].includes(type);
+        return ['text', 'textarea', 'markdown', 'email', 'password', 'url', 'phone'].includes(type);
     }
     applyPreset(field, pattern) {
         this.store.setPatternValidator(this.store.keyOf(field), pattern);
@@ -3562,7 +3577,7 @@ class FieldInspectorComponent {
             this.store.selectField(key);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: FieldInspectorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.24", type: FieldInspectorComponent, isStandalone: true, selector: "ngx-field-inspector", ngImport: i0, template: "@if (field(); as f) {\n  <!--\n    The inspector, in collapsible sections.\n\n    It used to be one flat scroll of fifteen divider-separated blocks, so renaming a field\n    meant scrolling past every advanced setting a field has, and finding the rules list meant\n    scrolling past all of them.\n\n    All inspector sections start expanded by default so authors have immediate access to\n    validation, automation, visibility conditions, rules, dependencies, and reference settings\n    without needing to manually unfold each section. Sections can still be collapsed as desired.\n\n    `<details>` rather than mat-expansion-panel: the inspector already sits inside a card in a\n    scrolling rail, and a third level of Material elevation inside that read as noise.\n  -->\n  <div class=\"deb-inspector\">\n    <details class=\"deb-inspector__section\" open>\n      <summary class=\"deb-inspector__summary\">\n        {{ ui.text('sectionBasics') }}\n        <mat-icon class=\"deb-inspector__chevron\">expand_more</mat-icon>\n      </summary>\n      <div class=\"deb-inspector__body\">\n        <!-- Identity -->\n        <div class=\"deb-row\">\n          <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\">\n            <mat-label>{{ ui.text('fieldId') }}</mat-label>\n            <input matInput data-testid=\"field-id\" [value]=\"f.id\" disabled />\n            @if (store.hasManualId(f.id)) {\n              <mat-hint>{{ ui.text('fieldIdFixedHint') }}</mat-hint>\n            } @else {\n              <mat-hint>{{ ui.text('fieldIdDerivedHint') }}</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>{{ ui.text('tab') }}</mat-label>\n            <mat-select data-testid=\"field-tab\" [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>{{ ui.text('tabMoveHint') }}</mat-hint>\n          </mat-form-field>\n        }\n\n        <!-- Localised text (active language) -->\n        <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"deb-full\">\n          <mat-label>{{ ui.text('labelInLanguage', { language: lang() }) }}</mat-label>\n          <input\n            matInput\n            data-testid=\"field-label\"\n            [ngModel]=\"labelValue(f)\"\n            (ngModelChange)=\"store.setFieldLabel(store.keyOf(f), 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>{{ ui.text('placeholderInLanguage', { language: lang() }) }}</mat-label>\n            <input\n              matInput\n              [ngModel]=\"placeholderValue(f)\"\n              (ngModelChange)=\"store.setFieldPlaceholder(store.keyOf(f), lang(), $event)\"\n            />\n          </mat-form-field>\n        }\n\n        <!--\n          Help text, offered on every field type \u2014 including the ones with no placeholder,\n          which are exactly the ones most likely to need explaining. Its hint says what it is\n          *for*, because the box above it is the one authors reach for by habit and a\n          placeholder is gone the moment somebody types.\n        -->\n        <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"deb-full\">\n          <mat-label>{{ ui.text('hintInLanguage', { language: lang() }) }}</mat-label>\n          <input\n            matInput\n            data-testid=\"field-hint\"\n            [ngModel]=\"hintValue(f)\"\n            (ngModelChange)=\"store.setFieldHint(store.keyOf(f), lang(), $event)\"\n          />\n          <mat-hint>{{ ui.text('hintHint') }}</mat-hint>\n        </mat-form-field>\n\n        @if (meta()?.supportsDefaultValue) {\n          <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"deb-full\">\n            <mat-label>{{ ui.text('defaultValue') }}</mat-label>\n            <input\n              matInput\n              [ngModel]=\"f.defaultValue ?? ''\"\n              (ngModelChange)=\"store.updateField(store.keyOf(f), { defaultValue: $event })\"\n            />\n          </mat-form-field>\n        }\n      </div>\n    </details>\n\n    <!--\n      Width.\n\n      `colSpan` has been in the schema and honoured by the renderer since the 12-column grid\n      existed, and the builder had no control for it \u2014 so every form authored here came out a\n      single-column ladder, and the only way to put two fields on one row was to hand-edit the\n      JSON. This is that control.\n    -->\n    <details class=\"deb-inspector__section\" open>\n      <summary class=\"deb-inspector__summary\">\n        {{ ui.text('sectionLayout') }}\n        <span class=\"deb-inspector__count\" data-testid=\"layout-count\">{{ f.colSpan ?? 12 }}/12</span>\n        <mat-icon class=\"deb-inspector__chevron\">expand_more</mat-icon>\n      </summary>\n      <div class=\"deb-inspector__body\">\n        <div class=\"deb-span-picker\" role=\"group\" [attr.aria-label]=\"ui.text('width')\">\n          @for (choice of spanChoices; track choice.span) {\n            <button\n              type=\"button\"\n              class=\"deb-span-picker__btn\"\n              [class.deb-span-picker__btn--active]=\"(f.colSpan ?? 12) === choice.span\"\n              [attr.data-testid]=\"'field-span-' + choice.span\"\n              [attr.aria-pressed]=\"(f.colSpan ?? 12) === choice.span\"\n              [matTooltip]=\"ui.text('widthOf', { span: choice.span })\"\n              (click)=\"store.updateField(store.keyOf(f), { colSpan: choice.span })\"\n            >\n              {{ ui.text(choice.textKey) }}\n            </button>\n          }\n        </div>\n        <p class=\"deb-hint\">{{ ui.text('widthHint') }}</p>\n      </div>\n    </details>\n\n    <!-- Validators -->\n    <!-- Validators -->\n    @if (meta(); as m) {\n      @if (m.flagValidators.length || m.paramValidators.length || supportsPattern(f.type) || f.validators?.pattern) {\n        <details class=\"deb-inspector__section\" open>\n          <summary class=\"deb-inspector__summary\">\n            {{ ui.text('sectionValidation') }}\n            @if (validatorCount(f); as count) {\n              <span class=\"deb-inspector__count\" data-testid=\"validation-count\">{{ count }}</span>\n            }\n            <mat-icon class=\"deb-inspector__chevron\">expand_more</mat-icon>\n          </summary>\n          <div class=\"deb-inspector__body\">\n            @if (m.flagValidators.length) {\n              <div class=\"deb-flags-row\">\n                @for (v of m.flagValidators; track v) {\n                  <mat-checkbox\n                    color=\"primary\"\n                    [ngModel]=\"store.hasFlagValidator(f, v)\"\n                    (ngModelChange)=\"store.toggleFlagValidator(store.keyOf(f), v, $event)\"\n                    >{{ v }}</mat-checkbox\n                  >\n                }\n              </div>\n            }\n            @if (m.paramValidators.length) {\n              <div class=\"deb-param-validators-grid\">\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(store.keyOf(f), v, toNum($event))\"\n                    />\n                  </mat-form-field>\n                }\n              </div>\n            }\n\n            @if (supportsPattern(f.type) || f.validators?.pattern) {\n              <div class=\"deb-pattern-box\" data-testid=\"pattern-playground\">\n                <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"deb-full\">\n                  <mat-label>{{ ui.text('pattern') }}</mat-label>\n                  <input\n                    matInput\n                    data-testid=\"field-pattern-input\"\n                    [ngModel]=\"f.validators?.pattern ?? ''\"\n                    (ngModelChange)=\"store.setPatternValidator(store.keyOf(f), $event)\"\n                  />\n                  <mat-hint>{{ ui.text('patternHint') }}</mat-hint>\n                </mat-form-field>\n\n                <div class=\"deb-pattern-presets\">\n                  <span class=\"deb-section-title\">{{ ui.text('quickPresets') }}:</span>\n                  @for (preset of patternPresets; track preset.label) {\n                    <button\n                      type=\"button\"\n                      class=\"deb-preset-btn\"\n                      [attr.data-testid]=\"'preset-' + preset.label.toLowerCase()\"\n                      (click)=\"applyPreset(f, preset.pattern)\"\n                    >\n                      {{ preset.label }}\n                    </button>\n                  }\n                </div>\n\n                <div class=\"deb-row deb-row--split\">\n                  <span class=\"deb-section-title\">{{ ui.text('testPattern') }}</span>\n                  <div\n                    class=\"deb-pattern-status\"\n                    [class.deb-pattern-status--match]=\"regexEvaluation().status === 'match'\"\n                    [class.deb-pattern-status--no-match]=\"regexEvaluation().status === 'no-match'\"\n                    [class.deb-pattern-status--invalid]=\"regexEvaluation().status === 'invalid'\"\n                    [class.deb-pattern-status--idle]=\"regexEvaluation().status === 'idle'\"\n                    [class.deb-pattern-status--empty]=\"regexEvaluation().status === 'empty'\"\n                    data-testid=\"regex-test-status\"\n                  >\n                    @switch (regexEvaluation().status) {\n                      @case ('match') {\n                        <mat-icon>check_circle</mat-icon> {{ ui.text('patternMatch') }}\n                      }\n                      @case ('no-match') {\n                        <mat-icon>cancel</mat-icon> {{ ui.text('patternNoMatch') }}\n                      }\n                      @case ('invalid') {\n                        <mat-icon>error</mat-icon> {{ ui.text('patternInvalid') }}\n                      }\n                      @case ('idle') {\n                        <mat-icon>edit_note</mat-icon> {{ ui.text('testPatternPlaceholder') }}\n                      }\n                      @case ('empty') {\n                        <mat-icon>info</mat-icon> {{ ui.text('patternEmptyPrompt') }}\n                      }\n                    }\n                  </div>\n                </div>\n\n                <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"deb-full\">\n                  <input\n                    matInput\n                    data-testid=\"regex-test-input\"\n                    [placeholder]=\"ui.text('testPatternPlaceholder')\"\n                    [ngModel]=\"testSample()\"\n                    (ngModelChange)=\"testSample.set($event)\"\n                  />\n                </mat-form-field>\n              </div>\n            }\n          </div>\n        </details>\n      }\n    }\n\n    <!-- Options (dropdown / radio / multiSelect) -->\n    @if (meta()?.hasOptions) {\n      <details class=\"deb-inspector__section\" open>\n        <summary class=\"deb-inspector__summary\">\n          {{ ui.text('sectionOptions') }}\n          @if ((f.options ?? []).length; as count) {\n            <span class=\"deb-inspector__count\" data-testid=\"options-count\">{{ count }}</span>\n          }\n          <mat-icon class=\"deb-inspector__chevron\">expand_more</mat-icon>\n        </summary>\n        <div class=\"deb-inspector__body\">\n          <span class=\"deb-section-title\">{{ ui.text('dataSource') }}</span>\n          <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"deb-full\">\n            <mat-label>{{ ui.text('optionsComeFrom') }}</mat-label>\n            <mat-select\n              data-testid=\"data-source\"\n              [ngModel]=\"store.fieldDataSource(f)\"\n              (ngModelChange)=\"store.setFieldDataSource(store.keyOf(f), $event)\"\n            >\n              <mat-option value=\"none\">{{ ui.text('optionsSourceNone') }}</mat-option>\n              <mat-option value=\"manual\">{{ ui.text('optionsSourceInline') }}</mat-option>\n              <mat-option value=\"lookup\">{{ ui.text('optionsSourceList') }}</mat-option>\n            </mat-select>\n          </mat-form-field>\n\n          <!-- Named lookup list -->\n          @if (store.fieldDataSource(f) === 'lookup') {\n            <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"deb-full\">\n              <mat-label>{{ ui.text('listName') }}</mat-label>\n              <input\n                matInput\n                data-testid=\"list-name\"\n                [ngModel]=\"f.listName ?? ''\"\n                (ngModelChange)=\"store.setListName(store.keyOf(f), $event)\"\n              />\n            </mat-form-field>\n            <p class=\"deb-hint\">\n              {{ ui.text('listNameHint') }}\n            </p>\n          }\n\n          <!-- Inline options -->\n          @if (store.fieldDataSource(f) !== 'lookup') {\n            <div class=\"deb-row deb-row--split\">\n              <span class=\"deb-section-title\">{{ ui.text('options') }}</span>\n              <span class=\"deb-row__actions\">\n                @if (store.hasUnkeyedOptions()) {\n                  <button\n                    mat-stroked-button\n                    type=\"button\"\n                    data-testid=\"assign-option-keys\"\n                    (click)=\"store.assignOptionKeys()\"\n                    [matTooltip]=\"ui.text('optionKeyHint')\"\n                  >\n                    <mat-icon>key</mat-icon> {{ ui.text('assignOptionKeys') }}\n                  </button>\n                }\n                <button\n                  mat-stroked-button\n                  type=\"button\"\n                  data-testid=\"add-option\"\n                  (click)=\"store.addOption(store.keyOf(f))\"\n                >\n                  <mat-icon>add</mat-icon> {{ ui.text('option') }}\n                </button>\n              </span>\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>{{ ui.text('optionInLanguage', { language: lang() }) }}</mat-label>\n                  <input\n                    matInput\n                    [attr.data-testid]=\"'option-' + $index\"\n                    [ngModel]=\"optionLabel(opt)\"\n                    (ngModelChange)=\"store.setOptionLabel(store.keyOf(f), $index, lang(), $event)\"\n                  />\n                </mat-form-field>\n                <!--\n                  Not a control. A key is the option's identity and every record already\n                  holding it matches on it, so a text box here \u2014 even a read-only one \u2014\n                  would be a data migration disguised as a field. It is shown because an\n                  author needs to be able to read it, and for no other reason.\n                -->\n                @if (store.optionKey(opt); as key) {\n                  <code\n                    class=\"deb-option-key\"\n                    [attr.data-testid]=\"'option-key-' + $index\"\n                    [attr.aria-label]=\"ui.text('optionKey')\"\n                    [matTooltip]=\"ui.text('optionKeyHint')\"\n                    >{{ key }}</code\n                  >\n                }\n                <button\n                  mat-icon-button\n                  type=\"button\"\n                  color=\"warn\"\n                  (click)=\"store.removeOption(store.keyOf(f), $index)\"\n                  [matTooltip]=\"ui.text('removeOption')\"\n                >\n                  <mat-icon>delete</mat-icon>\n                </button>\n              </div>\n            }\n            @if (!(f.options ?? []).length) {\n              <p class=\"deb-hint\">{{ ui.text('noOptionsYet') }}</p>\n            }\n          }\n        </div>\n      </details>\n    }\n\n    <!-- Flags -->\n    <details class=\"deb-inspector__section\" open>\n      <summary class=\"deb-inspector__summary\">\n        {{ ui.text('sectionDisplay') }}\n        @if (displayFlagCount(f); as count) {\n          <span class=\"deb-inspector__count\" data-testid=\"display-count\">{{ count }}</span>\n        }\n        <mat-icon class=\"deb-inspector__chevron\">expand_more</mat-icon>\n      </summary>\n      <div class=\"deb-inspector__body\">\n        <div class=\"deb-toggles\" role=\"group\" [attr.aria-label]=\"ui.text('display')\">\n          <mat-slide-toggle\n            color=\"primary\"\n            [ngModel]=\"f.visibility ?? true\"\n            (ngModelChange)=\"store.updateField(store.keyOf(f), { visibility: $event })\"\n            >{{ ui.text('visible') }}</mat-slide-toggle\n          >\n          <mat-slide-toggle\n            color=\"primary\"\n            [ngModel]=\"f.table?.visible ?? false\"\n            (ngModelChange)=\"store.updateField(store.keyOf(f), { table: { visible: $event } })\"\n            >{{ ui.text('tableColumn') }}</mat-slide-toggle\n          >\n          <mat-slide-toggle\n            color=\"primary\"\n            [ngModel]=\"f.readonly ?? false\"\n            (ngModelChange)=\"store.updateField(store.keyOf(f), { readonly: $event })\"\n            >{{ ui.text('readOnly') }}</mat-slide-toggle\n          >\n          <mat-slide-toggle\n            color=\"primary\"\n            [ngModel]=\"f.disabled ?? false\"\n            (ngModelChange)=\"store.updateField(store.keyOf(f), { disabled: $event })\"\n            >{{ ui.text('disabled') }}</mat-slide-toggle\n          >\n          <mat-slide-toggle\n            color=\"primary\"\n            [ngModel]=\"f.maskData ?? false\"\n            (ngModelChange)=\"store.updateField(store.keyOf(f), { maskData: $event })\"\n            >{{ ui.text('maskData') }}</mat-slide-toggle\n          >\n          <mat-slide-toggle\n            color=\"primary\"\n            data-testid=\"toggle-critical\"\n            [ngModel]=\"f.criticalField ?? false\"\n            (ngModelChange)=\"store.updateField(store.keyOf(f), { criticalField: $event })\"\n            [matTooltip]=\"ui.text('criticalFieldTooltip')\"\n            >{{ ui.text('criticalField') }}</mat-slide-toggle\n          >\n          <mat-slide-toggle\n            color=\"primary\"\n            [ngModel]=\"f.showOnMinimize ?? false\"\n            (ngModelChange)=\"store.updateField(store.keyOf(f), { showOnMinimize: $event })\"\n            [matTooltip]=\"ui.text('showInSummaryTooltip')\"\n            >{{ ui.text('showInSummary') }}</mat-slide-toggle\n          >\n        </div>\n      </div>\n    </details>\n\n    <!-- Conditional visibility (static showWhen) -->\n    <details class=\"deb-inspector__section\" open>\n      <summary class=\"deb-inspector__summary\">\n        {{ ui.text('sectionVisibility') }}\n        @if (showWhenEntries(f).length; as count) {\n          <span class=\"deb-inspector__count\" data-testid=\"visibility-count\">{{ count }}</span>\n        }\n        <mat-icon class=\"deb-inspector__chevron\">expand_more</mat-icon>\n      </summary>\n      <div class=\"deb-inspector__body\">\n        <div class=\"deb-row deb-row--split\">\n          <span class=\"deb-section-title\">{{ ui.text('showWhen') }}</span>\n          <button mat-stroked-button type=\"button\" data-testid=\"add-show-when\" (click)=\"addShowWhen(f)\">\n            <mat-icon>add</mat-icon> {{ ui.text('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>{{ ui.text('watchedField') }}</mat-label>\n              <mat-select\n                data-testid=\"show-when-field\"\n                [ngModel]=\"entry.key\"\n                (ngModelChange)=\"renameShowWhen(f, entry.key, $event)\"\n              >\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>{{ ui.text('equals') }}</mat-label>\n              <input matInput [ngModel]=\"entry.display\" (ngModelChange)=\"setShowWhenValue(f, entry.key, $event)\" />\n            </mat-form-field>\n            <button\n              mat-icon-button\n              type=\"button\"\n              color=\"warn\"\n              [matTooltip]=\"ui.text('removeCondition')\"\n              (click)=\"removeShowWhen(f, entry.key)\"\n            >\n              <mat-icon>delete</mat-icon>\n            </button>\n          </div>\n        }\n        @if (!showWhenEntries(f).length) {\n          <p class=\"deb-hint\">{{ ui.text('alwaysVisibleHint') }}</p>\n        }\n      </div>\n    </details>\n\n    <!-- Entity reference, cascade, autoPatch, and patchOnTrue -->\n    @if (meta()?.isEntityRef || f.type === 'boolean' || f.type === 'checkbox') {\n      <details class=\"deb-inspector__section\" open>\n        <summary class=\"deb-inspector__summary\">\n          {{ ui.text('sectionAutomation') }}\n          @if ((f.patchOnTrue ?? []).length; as count) {\n            <span class=\"deb-inspector__count\" data-testid=\"automation-count\">{{ count }}</span>\n          }\n          <mat-icon class=\"deb-inspector__chevron\">expand_more</mat-icon>\n        </summary>\n        <div class=\"deb-inspector__body\">\n          @if (meta()?.isEntityRef) {\n            <ngx-entity-reference-config />\n          }\n\n          <!-- patchOnTrue (boolean/checkbox only) -->\n          @if (f.type === 'boolean' || f.type === 'checkbox') {\n            <div class=\"deb-row deb-row--split\">\n              <span class=\"deb-section-title\">{{ ui.text('copyOnTrue') }}</span>\n              <button\n                mat-stroked-button\n                type=\"button\"\n                data-testid=\"add-patch-on-true\"\n                (click)=\"store.addPatchOnTrueMapping(store.keyOf(f))\"\n              >\n                <mat-icon>add</mat-icon> {{ ui.text('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>{{ ui.text('fromField') }}</mat-label>\n                  <mat-select\n                    data-testid=\"patch-on-true-from\"\n                    [ngModel]=\"mapping.from\"\n                    (ngModelChange)=\"store.updatePatchOnTrueMapping(store.keyOf(f), $index, { from: $event })\"\n                  >\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>{{ ui.text('toField') }}</mat-label>\n                  <mat-select\n                    data-testid=\"patch-on-true-to\"\n                    [ngModel]=\"mapping.to\"\n                    (ngModelChange)=\"store.updatePatchOnTrueMapping(store.keyOf(f), $index, { to: $event })\"\n                  >\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\n                  mat-icon-button\n                  type=\"button\"\n                  color=\"warn\"\n                  [matTooltip]=\"ui.text('removeMapping')\"\n                  (click)=\"store.removePatchOnTrueMapping(store.keyOf(f), $index)\"\n                >\n                  <mat-icon>delete</mat-icon>\n                </button>\n              </div>\n            }\n            @if (!(f.patchOnTrue ?? []).length) {\n              <p class=\"deb-hint\">{{ ui.text('copyOnTrueHint') }}</p>\n            }\n          }\n        </div>\n      </details>\n    }\n\n    <!-- Rules attached to this field -->\n    <details class=\"deb-inspector__section\" open>\n      <summary class=\"deb-inspector__summary\">\n        {{ ui.text('sectionRules') }}\n        @if (store.rulesForSelectedField().length; as count) {\n          <span class=\"deb-inspector__count\" data-testid=\"rules-count\">{{ count }}</span>\n        }\n        <mat-icon class=\"deb-inspector__chevron\">expand_more</mat-icon>\n      </summary>\n      <div class=\"deb-inspector__body\">\n        <ngx-field-rules-list />\n      </div>\n    </details>\n\n    <!-- Field Dependencies Visualizer -->\n    <details\n      class=\"deb-inspector__section\"\n      open\n      data-testid=\"section-dependencies\"\n    >\n      <summary class=\"deb-inspector__summary\">\n        {{ ui.text('sectionDependencies') }}\n        @if (incomingDependencies().length + outgoingDependencies().length; as count) {\n          <span class=\"deb-inspector__count\" data-testid=\"dependencies-count\">{{ count }}</span>\n        }\n        <mat-icon class=\"deb-inspector__chevron\">expand_more</mat-icon>\n      </summary>\n      <div class=\"deb-inspector__body\">\n        @if (incomingDependencies().length) {\n          <span class=\"deb-section-title\">{{ ui.text('dependsOn') }} ({{ incomingDependencies().length }})</span>\n          <div class=\"deb-dep-list\" data-testid=\"incoming-dependencies\">\n            @for (dep of incomingDependencies(); track dep.id) {\n              <div class=\"deb-dep-row\">\n                <div class=\"deb-dep-info\">\n                  <span class=\"deb-dep-name\">{{ dep.sourceLabel }}</span>\n                  <span class=\"deb-dep-detail\">{{ dep.description }}</span>\n                </div>\n                <button\n                  mat-stroked-button\n                  type=\"button\"\n                  [matTooltip]=\"ui.text('jumpToField', { field: dep.sourceLabel })\"\n                  (click)=\"selectField(dep.sourceKey)\"\n                >\n                  <mat-icon>arrow_back</mat-icon> {{ ui.text('jumpToField', { field: dep.sourceLabel }) }}\n                </button>\n              </div>\n            }\n          </div>\n        }\n\n        @if (outgoingDependencies().length) {\n          <span class=\"deb-section-title\">{{ ui.text('affects') }} ({{ outgoingDependencies().length }})</span>\n          <div class=\"deb-dep-list\" data-testid=\"outgoing-dependencies\">\n            @for (dep of outgoingDependencies(); track dep.id) {\n              <div class=\"deb-dep-row\">\n                <div class=\"deb-dep-info\">\n                  <span class=\"deb-dep-name\">{{ dep.targetLabel }}</span>\n                  <span class=\"deb-dep-detail\">{{ dep.description }}</span>\n                </div>\n                <button\n                  mat-stroked-button\n                  type=\"button\"\n                  [matTooltip]=\"ui.text('jumpToField', { field: dep.targetLabel })\"\n                  (click)=\"selectField(dep.targetKey)\"\n                >\n                  <mat-icon>arrow_forward</mat-icon> {{ ui.text('jumpToField', { field: dep.targetLabel }) }}\n                </button>\n              </div>\n            }\n          </div>\n        }\n\n        @if (!incomingDependencies().length && !outgoingDependencies().length) {\n          <p class=\"deb-hint\" data-testid=\"no-field-dependencies\">{{ ui.text('noDependencies') }}</p>\n        }\n      </div>\n    </details>\n\n    <!-- Cross-entity field reference & drift management -->\n    <details class=\"deb-inspector__section\" open>\n      <summary class=\"deb-inspector__summary\">\n        {{ ui.text('sectionReference') }}\n        @if (f.isReferenced) {\n          <span class=\"deb-inspector__count\" data-testid=\"reference-count\">{{ f.referencedEntityKey }}</span>\n        }\n        <mat-icon class=\"deb-inspector__chevron\">expand_more</mat-icon>\n      </summary>\n      <div class=\"deb-inspector__body\">\n        <ngx-referenced-field-config />\n      </div>\n    </details>\n  </div>\n} @else {\n  <div class=\"deb-inspector__empty\">\n    <mat-icon>touch_app</mat-icon>\n    <p>{{ ui.text('inspectorEmpty') }}</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>*{flex:1}.deb-row>.deb-chip{flex:0 0 auto}.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-pattern-box{display:flex;flex-direction:column;gap:8px;margin-top:8px;padding:12px;background:#f8fafc;border:1px solid #e2e8f0;border-radius:8px}.deb-pattern-status{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:6px;font-size:12px;font-weight:600}.deb-pattern-status--match{background:#dcfce7;color:#166534}.deb-pattern-status--no-match{background:#fee2e2;color:#991b1b}.deb-pattern-status--invalid{background:#fef3c7;color:#92400e}.deb-pattern-status--idle,.deb-pattern-status--empty{background:#f1f5f9;color:#334155}.deb-pattern-presets{display:flex;flex-wrap:wrap;gap:4px;align-items:center}.deb-preset-btn{padding:2px 8px;border-radius:4px;border:1px solid #cbd5e1;background:#fff;font-size:11px;color:#334155;cursor:pointer;transition:background .1s ease}.deb-preset-btn:hover{background:#e2e8f0}.deb-dep-list{display:flex;flex-direction:column;gap:6px;margin-top:4px;margin-bottom:12px}.deb-dep-row{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:6px 10px;background:#f8fafc;border:1px solid #e2e8f0;border-radius:6px}.deb-dep-info{display:flex;flex-direction:column;min-width:0}.deb-dep-name{font-size:12px;font-weight:600;color:#0f172a}.deb-dep-detail{font-size:11px;color:#64748b}\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$2.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: "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: i6.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: i7.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: i7.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatSlideToggleModule }, { kind: "component", type: i3$1.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.24", type: FieldInspectorComponent, isStandalone: true, selector: "ngx-field-inspector", ngImport: i0, template: "@if (field(); as f) {\n  <!--\n    The inspector, in collapsible sections.\n\n    It used to be one flat scroll of fifteen divider-separated blocks, so renaming a field\n    meant scrolling past every advanced setting a field has, and finding the rules list meant\n    scrolling past all of them.\n\n    All inspector sections start expanded by default so authors have immediate access to\n    validation, automation, visibility conditions, rules, dependencies, and reference settings\n    without needing to manually unfold each section. Sections can still be collapsed as desired.\n\n    `<details>` rather than mat-expansion-panel: the inspector already sits inside a card in a\n    scrolling rail, and a third level of Material elevation inside that read as noise.\n  -->\n  <div class=\"deb-inspector\">\n    <details class=\"deb-inspector__section\" open>\n      <summary class=\"deb-inspector__summary\">\n        {{ ui.text('sectionBasics') }}\n        <mat-icon class=\"deb-inspector__chevron\">expand_more</mat-icon>\n      </summary>\n      <div class=\"deb-inspector__body\">\n        <!-- Identity -->\n        <div class=\"deb-row\">\n          <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\">\n            <mat-label>{{ ui.text('fieldId') }}</mat-label>\n            <input matInput data-testid=\"field-id\" [value]=\"f.id\" disabled />\n            @if (store.hasManualId(f.id)) {\n              <mat-hint>{{ ui.text('fieldIdFixedHint') }}</mat-hint>\n            } @else {\n              <mat-hint>{{ ui.text('fieldIdDerivedHint') }}</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>{{ ui.text('tab') }}</mat-label>\n            <mat-select data-testid=\"field-tab\" [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>{{ ui.text('tabMoveHint') }}</mat-hint>\n          </mat-form-field>\n        }\n\n        <!-- Localised text (active language) -->\n        <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"deb-full\">\n          <mat-label>{{ ui.text('labelInLanguage', { language: lang() }) }}</mat-label>\n          <input\n            matInput\n            data-testid=\"field-label\"\n            [ngModel]=\"labelValue(f)\"\n            (ngModelChange)=\"store.setFieldLabel(store.keyOf(f), 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>{{ ui.text('placeholderInLanguage', { language: lang() }) }}</mat-label>\n            <input\n              matInput\n              [ngModel]=\"placeholderValue(f)\"\n              (ngModelChange)=\"store.setFieldPlaceholder(store.keyOf(f), lang(), $event)\"\n            />\n          </mat-form-field>\n        }\n\n        <!--\n          Help text, offered on every field type \u2014 including the ones with no placeholder,\n          which are exactly the ones most likely to need explaining. Its hint says what it is\n          *for*, because the box above it is the one authors reach for by habit and a\n          placeholder is gone the moment somebody types.\n        -->\n        <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"deb-full\">\n          <mat-label>{{ ui.text('hintInLanguage', { language: lang() }) }}</mat-label>\n          <input\n            matInput\n            data-testid=\"field-hint\"\n            [ngModel]=\"hintValue(f)\"\n            (ngModelChange)=\"store.setFieldHint(store.keyOf(f), lang(), $event)\"\n          />\n          <mat-hint>{{ ui.text('hintHint') }}</mat-hint>\n        </mat-form-field>\n\n        @if (meta()?.supportsDefaultValue) {\n          <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"deb-full\">\n            <mat-label>{{ ui.text('defaultValue') }}</mat-label>\n            <input\n              matInput\n              [ngModel]=\"f.defaultValue ?? ''\"\n              (ngModelChange)=\"store.updateField(store.keyOf(f), { defaultValue: $event })\"\n            />\n          </mat-form-field>\n        }\n      </div>\n    </details>\n\n    <!--\n      Width.\n\n      `colSpan` has been in the schema and honoured by the renderer since the 12-column grid\n      existed, and the builder had no control for it \u2014 so every form authored here came out a\n      single-column ladder, and the only way to put two fields on one row was to hand-edit the\n      JSON. This is that control.\n    -->\n    <details class=\"deb-inspector__section\" open>\n      <summary class=\"deb-inspector__summary\">\n        {{ ui.text('sectionLayout') }}\n        <span class=\"deb-inspector__count\" data-testid=\"layout-count\">{{ f.colSpan ?? 12 }}/12</span>\n        <mat-icon class=\"deb-inspector__chevron\">expand_more</mat-icon>\n      </summary>\n      <div class=\"deb-inspector__body\">\n        <div class=\"deb-span-picker\" role=\"group\" [attr.aria-label]=\"ui.text('width')\">\n          @for (choice of spanChoices; track choice.span) {\n            <button\n              type=\"button\"\n              class=\"deb-span-picker__btn\"\n              [class.deb-span-picker__btn--active]=\"(f.colSpan ?? 12) === choice.span\"\n              [attr.data-testid]=\"'field-span-' + choice.span\"\n              [attr.aria-pressed]=\"(f.colSpan ?? 12) === choice.span\"\n              [matTooltip]=\"ui.text('widthOf', { span: choice.span })\"\n              (click)=\"store.updateField(store.keyOf(f), { colSpan: choice.span })\"\n            >\n              {{ ui.text(choice.textKey) }}\n            </button>\n          }\n        </div>\n        <p class=\"deb-hint\">{{ ui.text('widthHint') }}</p>\n      </div>\n    </details>\n\n    <!-- Validators -->\n    <!-- Validators -->\n    @if (meta(); as m) {\n      @if (m.flagValidators.length || m.paramValidators.length || supportsPattern(f.type) || f.validators?.pattern) {\n        <details class=\"deb-inspector__section\" open>\n          <summary class=\"deb-inspector__summary\">\n            {{ ui.text('sectionValidation') }}\n            @if (validatorCount(f); as count) {\n              <span class=\"deb-inspector__count\" data-testid=\"validation-count\">{{ count }}</span>\n            }\n            <mat-icon class=\"deb-inspector__chevron\">expand_more</mat-icon>\n          </summary>\n          <div class=\"deb-inspector__body\">\n            @if (m.flagValidators.length) {\n              <div class=\"deb-flags-row\">\n                @for (v of m.flagValidators; track v) {\n                  <mat-checkbox\n                    color=\"primary\"\n                    [ngModel]=\"store.hasFlagValidator(f, v)\"\n                    (ngModelChange)=\"store.toggleFlagValidator(store.keyOf(f), v, $event)\"\n                    >{{ v }}</mat-checkbox\n                  >\n                }\n              </div>\n            }\n            @if (m.paramValidators.length) {\n              <div class=\"deb-param-validators-grid\">\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(store.keyOf(f), v, toNum($event))\"\n                    />\n                  </mat-form-field>\n                }\n              </div>\n            }\n            @if (f.type === 'slider') {\n              <!-- The slider's range is min and max above; its increment is the one number left. -->\n              <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"deb-full\">\n                <mat-label>{{ ui.text('sliderStep') }}</mat-label>\n                <input\n                  matInput\n                  type=\"number\"\n                  min=\"0\"\n                  data-testid=\"field-step\"\n                  [ngModel]=\"f.step ?? null\"\n                  (ngModelChange)=\"store.updateField(store.keyOf(f), { step: positiveOrUnset($event) })\"\n                />\n                <mat-hint>{{ ui.text('sliderStepHint') }}</mat-hint>\n              </mat-form-field>\n            }\n\n            @if (supportsPattern(f.type) || f.validators?.pattern) {\n              <div class=\"deb-pattern-box\" data-testid=\"pattern-playground\">\n                <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"deb-full\">\n                  <mat-label>{{ ui.text('pattern') }}</mat-label>\n                  <input\n                    matInput\n                    data-testid=\"field-pattern-input\"\n                    [ngModel]=\"f.validators?.pattern ?? ''\"\n                    (ngModelChange)=\"store.setPatternValidator(store.keyOf(f), $event)\"\n                  />\n                  <mat-hint>{{ ui.text('patternHint') }}</mat-hint>\n                </mat-form-field>\n\n                <div class=\"deb-pattern-presets\">\n                  <span class=\"deb-section-title\">{{ ui.text('quickPresets') }}:</span>\n                  @for (preset of patternPresets; track preset.label) {\n                    <button\n                      type=\"button\"\n                      class=\"deb-preset-btn\"\n                      [attr.data-testid]=\"'preset-' + preset.label.toLowerCase()\"\n                      (click)=\"applyPreset(f, preset.pattern)\"\n                    >\n                      {{ preset.label }}\n                    </button>\n                  }\n                </div>\n\n                <div class=\"deb-row deb-row--split\">\n                  <span class=\"deb-section-title\">{{ ui.text('testPattern') }}</span>\n                  <div\n                    class=\"deb-pattern-status\"\n                    [class.deb-pattern-status--match]=\"regexEvaluation().status === 'match'\"\n                    [class.deb-pattern-status--no-match]=\"regexEvaluation().status === 'no-match'\"\n                    [class.deb-pattern-status--invalid]=\"regexEvaluation().status === 'invalid'\"\n                    [class.deb-pattern-status--idle]=\"regexEvaluation().status === 'idle'\"\n                    [class.deb-pattern-status--empty]=\"regexEvaluation().status === 'empty'\"\n                    data-testid=\"regex-test-status\"\n                  >\n                    @switch (regexEvaluation().status) {\n                      @case ('match') {\n                        <mat-icon>check_circle</mat-icon> {{ ui.text('patternMatch') }}\n                      }\n                      @case ('no-match') {\n                        <mat-icon>cancel</mat-icon> {{ ui.text('patternNoMatch') }}\n                      }\n                      @case ('invalid') {\n                        <mat-icon>error</mat-icon> {{ ui.text('patternInvalid') }}\n                      }\n                      @case ('idle') {\n                        <mat-icon>edit_note</mat-icon> {{ ui.text('testPatternPlaceholder') }}\n                      }\n                      @case ('empty') {\n                        <mat-icon>info</mat-icon> {{ ui.text('patternEmptyPrompt') }}\n                      }\n                    }\n                  </div>\n                </div>\n\n                <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"deb-full\">\n                  <input\n                    matInput\n                    data-testid=\"regex-test-input\"\n                    [placeholder]=\"ui.text('testPatternPlaceholder')\"\n                    [ngModel]=\"testSample()\"\n                    (ngModelChange)=\"testSample.set($event)\"\n                  />\n                </mat-form-field>\n              </div>\n            }\n          </div>\n        </details>\n      }\n    }\n\n    <!-- Options (dropdown / radio / multiSelect) -->\n    @if (meta()?.hasOptions) {\n      <details class=\"deb-inspector__section\" open>\n        <summary class=\"deb-inspector__summary\">\n          {{ ui.text('sectionOptions') }}\n          @if ((f.options ?? []).length; as count) {\n            <span class=\"deb-inspector__count\" data-testid=\"options-count\">{{ count }}</span>\n          }\n          <mat-icon class=\"deb-inspector__chevron\">expand_more</mat-icon>\n        </summary>\n        <div class=\"deb-inspector__body\">\n          <span class=\"deb-section-title\">{{ ui.text('dataSource') }}</span>\n          <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"deb-full\">\n            <mat-label>{{ ui.text('optionsComeFrom') }}</mat-label>\n            <mat-select\n              data-testid=\"data-source\"\n              [ngModel]=\"store.fieldDataSource(f)\"\n              (ngModelChange)=\"store.setFieldDataSource(store.keyOf(f), $event)\"\n            >\n              <mat-option value=\"none\">{{ ui.text('optionsSourceNone') }}</mat-option>\n              <mat-option value=\"manual\">{{ ui.text('optionsSourceInline') }}</mat-option>\n              <mat-option value=\"lookup\">{{ ui.text('optionsSourceList') }}</mat-option>\n            </mat-select>\n          </mat-form-field>\n\n          <!-- Named lookup list -->\n          @if (store.fieldDataSource(f) === 'lookup') {\n            <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"deb-full\">\n              <mat-label>{{ ui.text('listName') }}</mat-label>\n              <input\n                matInput\n                data-testid=\"list-name\"\n                [ngModel]=\"f.listName ?? ''\"\n                (ngModelChange)=\"store.setListName(store.keyOf(f), $event)\"\n              />\n            </mat-form-field>\n            <p class=\"deb-hint\">\n              {{ ui.text('listNameHint') }}\n            </p>\n          }\n\n          <!-- Inline options -->\n          @if (store.fieldDataSource(f) !== 'lookup') {\n            <div class=\"deb-row deb-row--split\">\n              <span class=\"deb-section-title\">{{ ui.text('options') }}</span>\n              <span class=\"deb-row__actions\">\n                @if (store.hasUnkeyedOptions()) {\n                  <button\n                    mat-stroked-button\n                    type=\"button\"\n                    data-testid=\"assign-option-keys\"\n                    (click)=\"store.assignOptionKeys()\"\n                    [matTooltip]=\"ui.text('optionKeyHint')\"\n                  >\n                    <mat-icon>key</mat-icon> {{ ui.text('assignOptionKeys') }}\n                  </button>\n                }\n                <button\n                  mat-stroked-button\n                  type=\"button\"\n                  data-testid=\"add-option\"\n                  (click)=\"store.addOption(store.keyOf(f))\"\n                >\n                  <mat-icon>add</mat-icon> {{ ui.text('option') }}\n                </button>\n              </span>\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>{{ ui.text('optionInLanguage', { language: lang() }) }}</mat-label>\n                  <input\n                    matInput\n                    [attr.data-testid]=\"'option-' + $index\"\n                    [ngModel]=\"optionLabel(opt)\"\n                    (ngModelChange)=\"store.setOptionLabel(store.keyOf(f), $index, lang(), $event)\"\n                  />\n                </mat-form-field>\n                <!--\n                  Not a control. A key is the option's identity and every record already\n                  holding it matches on it, so a text box here \u2014 even a read-only one \u2014\n                  would be a data migration disguised as a field. It is shown because an\n                  author needs to be able to read it, and for no other reason.\n                -->\n                @if (store.optionKey(opt); as key) {\n                  <code\n                    class=\"deb-option-key\"\n                    [attr.data-testid]=\"'option-key-' + $index\"\n                    [attr.aria-label]=\"ui.text('optionKey')\"\n                    [matTooltip]=\"ui.text('optionKeyHint')\"\n                    >{{ key }}</code\n                  >\n                }\n                <button\n                  mat-icon-button\n                  type=\"button\"\n                  color=\"warn\"\n                  (click)=\"store.removeOption(store.keyOf(f), $index)\"\n                  [matTooltip]=\"ui.text('removeOption')\"\n                >\n                  <mat-icon>delete</mat-icon>\n                </button>\n              </div>\n            }\n            @if (!(f.options ?? []).length) {\n              <p class=\"deb-hint\">{{ ui.text('noOptionsYet') }}</p>\n            }\n          }\n        </div>\n      </details>\n    }\n\n    <!-- Flags -->\n    <details class=\"deb-inspector__section\" open>\n      <summary class=\"deb-inspector__summary\">\n        {{ ui.text('sectionDisplay') }}\n        @if (displayFlagCount(f); as count) {\n          <span class=\"deb-inspector__count\" data-testid=\"display-count\">{{ count }}</span>\n        }\n        <mat-icon class=\"deb-inspector__chevron\">expand_more</mat-icon>\n      </summary>\n      <div class=\"deb-inspector__body\">\n        <div class=\"deb-toggles\" role=\"group\" [attr.aria-label]=\"ui.text('display')\">\n          <mat-slide-toggle\n            color=\"primary\"\n            [ngModel]=\"f.visibility ?? true\"\n            (ngModelChange)=\"store.updateField(store.keyOf(f), { visibility: $event })\"\n            >{{ ui.text('visible') }}</mat-slide-toggle\n          >\n          <mat-slide-toggle\n            color=\"primary\"\n            [ngModel]=\"f.table?.visible ?? false\"\n            (ngModelChange)=\"store.updateField(store.keyOf(f), { table: { visible: $event } })\"\n            >{{ ui.text('tableColumn') }}</mat-slide-toggle\n          >\n          <mat-slide-toggle\n            color=\"primary\"\n            [ngModel]=\"f.readonly ?? false\"\n            (ngModelChange)=\"store.updateField(store.keyOf(f), { readonly: $event })\"\n            >{{ ui.text('readOnly') }}</mat-slide-toggle\n          >\n          <mat-slide-toggle\n            color=\"primary\"\n            [ngModel]=\"f.disabled ?? false\"\n            (ngModelChange)=\"store.updateField(store.keyOf(f), { disabled: $event })\"\n            >{{ ui.text('disabled') }}</mat-slide-toggle\n          >\n          <mat-slide-toggle\n            color=\"primary\"\n            [ngModel]=\"f.maskData ?? false\"\n            (ngModelChange)=\"store.updateField(store.keyOf(f), { maskData: $event })\"\n            >{{ ui.text('maskData') }}</mat-slide-toggle\n          >\n          <mat-slide-toggle\n            color=\"primary\"\n            data-testid=\"toggle-critical\"\n            [ngModel]=\"f.criticalField ?? false\"\n            (ngModelChange)=\"store.updateField(store.keyOf(f), { criticalField: $event })\"\n            [matTooltip]=\"ui.text('criticalFieldTooltip')\"\n            >{{ ui.text('criticalField') }}</mat-slide-toggle\n          >\n          <mat-slide-toggle\n            color=\"primary\"\n            [ngModel]=\"f.showOnMinimize ?? false\"\n            (ngModelChange)=\"store.updateField(store.keyOf(f), { showOnMinimize: $event })\"\n            [matTooltip]=\"ui.text('showInSummaryTooltip')\"\n            >{{ ui.text('showInSummary') }}</mat-slide-toggle\n          >\n        </div>\n      </div>\n    </details>\n\n    <!-- Conditional visibility (static showWhen) -->\n    <details class=\"deb-inspector__section\" open>\n      <summary class=\"deb-inspector__summary\">\n        {{ ui.text('sectionVisibility') }}\n        @if (showWhenEntries(f).length; as count) {\n          <span class=\"deb-inspector__count\" data-testid=\"visibility-count\">{{ count }}</span>\n        }\n        <mat-icon class=\"deb-inspector__chevron\">expand_more</mat-icon>\n      </summary>\n      <div class=\"deb-inspector__body\">\n        <div class=\"deb-row deb-row--split\">\n          <span class=\"deb-section-title\">{{ ui.text('showWhen') }}</span>\n          <button mat-stroked-button type=\"button\" data-testid=\"add-show-when\" (click)=\"addShowWhen(f)\">\n            <mat-icon>add</mat-icon> {{ ui.text('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>{{ ui.text('watchedField') }}</mat-label>\n              <mat-select\n                data-testid=\"show-when-field\"\n                [ngModel]=\"entry.key\"\n                (ngModelChange)=\"renameShowWhen(f, entry.key, $event)\"\n              >\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>{{ ui.text('equals') }}</mat-label>\n              <input matInput [ngModel]=\"entry.display\" (ngModelChange)=\"setShowWhenValue(f, entry.key, $event)\" />\n            </mat-form-field>\n            <button\n              mat-icon-button\n              type=\"button\"\n              color=\"warn\"\n              [matTooltip]=\"ui.text('removeCondition')\"\n              (click)=\"removeShowWhen(f, entry.key)\"\n            >\n              <mat-icon>delete</mat-icon>\n            </button>\n          </div>\n        }\n        @if (!showWhenEntries(f).length) {\n          <p class=\"deb-hint\">{{ ui.text('alwaysVisibleHint') }}</p>\n        }\n      </div>\n    </details>\n\n    <!-- Entity reference, cascade, autoPatch, and patchOnTrue -->\n    @if (meta()?.isEntityRef || f.type === 'boolean' || f.type === 'checkbox') {\n      <details class=\"deb-inspector__section\" open>\n        <summary class=\"deb-inspector__summary\">\n          {{ ui.text('sectionAutomation') }}\n          @if ((f.patchOnTrue ?? []).length; as count) {\n            <span class=\"deb-inspector__count\" data-testid=\"automation-count\">{{ count }}</span>\n          }\n          <mat-icon class=\"deb-inspector__chevron\">expand_more</mat-icon>\n        </summary>\n        <div class=\"deb-inspector__body\">\n          @if (meta()?.isEntityRef) {\n            <ngx-entity-reference-config />\n          }\n\n          <!-- patchOnTrue (boolean/checkbox only) -->\n          @if (f.type === 'boolean' || f.type === 'checkbox') {\n            <div class=\"deb-row deb-row--split\">\n              <span class=\"deb-section-title\">{{ ui.text('copyOnTrue') }}</span>\n              <button\n                mat-stroked-button\n                type=\"button\"\n                data-testid=\"add-patch-on-true\"\n                (click)=\"store.addPatchOnTrueMapping(store.keyOf(f))\"\n              >\n                <mat-icon>add</mat-icon> {{ ui.text('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>{{ ui.text('fromField') }}</mat-label>\n                  <mat-select\n                    data-testid=\"patch-on-true-from\"\n                    [ngModel]=\"mapping.from\"\n                    (ngModelChange)=\"store.updatePatchOnTrueMapping(store.keyOf(f), $index, { from: $event })\"\n                  >\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>{{ ui.text('toField') }}</mat-label>\n                  <mat-select\n                    data-testid=\"patch-on-true-to\"\n                    [ngModel]=\"mapping.to\"\n                    (ngModelChange)=\"store.updatePatchOnTrueMapping(store.keyOf(f), $index, { to: $event })\"\n                  >\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\n                  mat-icon-button\n                  type=\"button\"\n                  color=\"warn\"\n                  [matTooltip]=\"ui.text('removeMapping')\"\n                  (click)=\"store.removePatchOnTrueMapping(store.keyOf(f), $index)\"\n                >\n                  <mat-icon>delete</mat-icon>\n                </button>\n              </div>\n            }\n            @if (!(f.patchOnTrue ?? []).length) {\n              <p class=\"deb-hint\">{{ ui.text('copyOnTrueHint') }}</p>\n            }\n          }\n        </div>\n      </details>\n    }\n\n    <!-- Rules attached to this field -->\n    <details class=\"deb-inspector__section\" open>\n      <summary class=\"deb-inspector__summary\">\n        {{ ui.text('sectionRules') }}\n        @if (store.rulesForSelectedField().length; as count) {\n          <span class=\"deb-inspector__count\" data-testid=\"rules-count\">{{ count }}</span>\n        }\n        <mat-icon class=\"deb-inspector__chevron\">expand_more</mat-icon>\n      </summary>\n      <div class=\"deb-inspector__body\">\n        <ngx-field-rules-list />\n      </div>\n    </details>\n\n    <!-- Field Dependencies Visualizer -->\n    <details\n      class=\"deb-inspector__section\"\n      open\n      data-testid=\"section-dependencies\"\n    >\n      <summary class=\"deb-inspector__summary\">\n        {{ ui.text('sectionDependencies') }}\n        @if (incomingDependencies().length + outgoingDependencies().length; as count) {\n          <span class=\"deb-inspector__count\" data-testid=\"dependencies-count\">{{ count }}</span>\n        }\n        <mat-icon class=\"deb-inspector__chevron\">expand_more</mat-icon>\n      </summary>\n      <div class=\"deb-inspector__body\">\n        @if (incomingDependencies().length) {\n          <span class=\"deb-section-title\">{{ ui.text('dependsOn') }} ({{ incomingDependencies().length }})</span>\n          <div class=\"deb-dep-list\" data-testid=\"incoming-dependencies\">\n            @for (dep of incomingDependencies(); track dep.id) {\n              <div class=\"deb-dep-row\">\n                <div class=\"deb-dep-info\">\n                  <span class=\"deb-dep-name\">{{ dep.sourceLabel }}</span>\n                  <span class=\"deb-dep-detail\">{{ dep.description }}</span>\n                </div>\n                <button\n                  mat-stroked-button\n                  type=\"button\"\n                  [matTooltip]=\"ui.text('jumpToField', { field: dep.sourceLabel })\"\n                  (click)=\"selectField(dep.sourceKey)\"\n                >\n                  <mat-icon>arrow_back</mat-icon> {{ ui.text('jumpToField', { field: dep.sourceLabel }) }}\n                </button>\n              </div>\n            }\n          </div>\n        }\n\n        @if (outgoingDependencies().length) {\n          <span class=\"deb-section-title\">{{ ui.text('affects') }} ({{ outgoingDependencies().length }})</span>\n          <div class=\"deb-dep-list\" data-testid=\"outgoing-dependencies\">\n            @for (dep of outgoingDependencies(); track dep.id) {\n              <div class=\"deb-dep-row\">\n                <div class=\"deb-dep-info\">\n                  <span class=\"deb-dep-name\">{{ dep.targetLabel }}</span>\n                  <span class=\"deb-dep-detail\">{{ dep.description }}</span>\n                </div>\n                <button\n                  mat-stroked-button\n                  type=\"button\"\n                  [matTooltip]=\"ui.text('jumpToField', { field: dep.targetLabel })\"\n                  (click)=\"selectField(dep.targetKey)\"\n                >\n                  <mat-icon>arrow_forward</mat-icon> {{ ui.text('jumpToField', { field: dep.targetLabel }) }}\n                </button>\n              </div>\n            }\n          </div>\n        }\n\n        @if (!incomingDependencies().length && !outgoingDependencies().length) {\n          <p class=\"deb-hint\" data-testid=\"no-field-dependencies\">{{ ui.text('noDependencies') }}</p>\n        }\n      </div>\n    </details>\n\n    <!-- Cross-entity field reference & drift management -->\n    <details class=\"deb-inspector__section\" open>\n      <summary class=\"deb-inspector__summary\">\n        {{ ui.text('sectionReference') }}\n        @if (f.isReferenced) {\n          <span class=\"deb-inspector__count\" data-testid=\"reference-count\">{{ f.referencedEntityKey }}</span>\n        }\n        <mat-icon class=\"deb-inspector__chevron\">expand_more</mat-icon>\n      </summary>\n      <div class=\"deb-inspector__body\">\n        <ngx-referenced-field-config />\n      </div>\n    </details>\n  </div>\n} @else {\n  <div class=\"deb-inspector__empty\">\n    <mat-icon>touch_app</mat-icon>\n    <p>{{ ui.text('inspectorEmpty') }}</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>*{flex:1}.deb-row>.deb-chip{flex:0 0 auto}.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-pattern-box{display:flex;flex-direction:column;gap:8px;margin-top:8px;padding:12px;background:#f8fafc;border:1px solid #e2e8f0;border-radius:8px}.deb-pattern-status{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:6px;font-size:12px;font-weight:600}.deb-pattern-status--match{background:#dcfce7;color:#166534}.deb-pattern-status--no-match{background:#fee2e2;color:#991b1b}.deb-pattern-status--invalid{background:#fef3c7;color:#92400e}.deb-pattern-status--idle,.deb-pattern-status--empty{background:#f1f5f9;color:#334155}.deb-pattern-presets{display:flex;flex-wrap:wrap;gap:4px;align-items:center}.deb-preset-btn{padding:2px 8px;border-radius:4px;border:1px solid #cbd5e1;background:#fff;font-size:11px;color:#334155;cursor:pointer;transition:background .1s ease}.deb-preset-btn:hover{background:#e2e8f0}.deb-dep-list{display:flex;flex-direction:column;gap:6px;margin-top:4px;margin-bottom:12px}.deb-dep-row{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:6px 10px;background:#f8fafc;border:1px solid #e2e8f0;border-radius:6px}.deb-dep-info{display:flex;flex-direction:column;min-width:0}.deb-dep-name{font-size:12px;font-weight:600;color:#0f172a}.deb-dep-detail{font-size:11px;color:#64748b}\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.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { 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$2.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: "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: i6.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: i7.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: i7.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatSlideToggleModule }, { kind: "component", type: i3$1.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.24", ngImport: i0, type: FieldInspectorComponent, decorators: [{
             type: Component,
@@ -3580,7 +3595,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.24", ngImpo
                         EntityReferenceConfigComponent,
                         FieldRulesListComponent,
                         ReferencedFieldConfigComponent,
-                    ], template: "@if (field(); as f) {\n  <!--\n    The inspector, in collapsible sections.\n\n    It used to be one flat scroll of fifteen divider-separated blocks, so renaming a field\n    meant scrolling past every advanced setting a field has, and finding the rules list meant\n    scrolling past all of them.\n\n    All inspector sections start expanded by default so authors have immediate access to\n    validation, automation, visibility conditions, rules, dependencies, and reference settings\n    without needing to manually unfold each section. Sections can still be collapsed as desired.\n\n    `<details>` rather than mat-expansion-panel: the inspector already sits inside a card in a\n    scrolling rail, and a third level of Material elevation inside that read as noise.\n  -->\n  <div class=\"deb-inspector\">\n    <details class=\"deb-inspector__section\" open>\n      <summary class=\"deb-inspector__summary\">\n        {{ ui.text('sectionBasics') }}\n        <mat-icon class=\"deb-inspector__chevron\">expand_more</mat-icon>\n      </summary>\n      <div class=\"deb-inspector__body\">\n        <!-- Identity -->\n        <div class=\"deb-row\">\n          <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\">\n            <mat-label>{{ ui.text('fieldId') }}</mat-label>\n            <input matInput data-testid=\"field-id\" [value]=\"f.id\" disabled />\n            @if (store.hasManualId(f.id)) {\n              <mat-hint>{{ ui.text('fieldIdFixedHint') }}</mat-hint>\n            } @else {\n              <mat-hint>{{ ui.text('fieldIdDerivedHint') }}</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>{{ ui.text('tab') }}</mat-label>\n            <mat-select data-testid=\"field-tab\" [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>{{ ui.text('tabMoveHint') }}</mat-hint>\n          </mat-form-field>\n        }\n\n        <!-- Localised text (active language) -->\n        <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"deb-full\">\n          <mat-label>{{ ui.text('labelInLanguage', { language: lang() }) }}</mat-label>\n          <input\n            matInput\n            data-testid=\"field-label\"\n            [ngModel]=\"labelValue(f)\"\n            (ngModelChange)=\"store.setFieldLabel(store.keyOf(f), 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>{{ ui.text('placeholderInLanguage', { language: lang() }) }}</mat-label>\n            <input\n              matInput\n              [ngModel]=\"placeholderValue(f)\"\n              (ngModelChange)=\"store.setFieldPlaceholder(store.keyOf(f), lang(), $event)\"\n            />\n          </mat-form-field>\n        }\n\n        <!--\n          Help text, offered on every field type \u2014 including the ones with no placeholder,\n          which are exactly the ones most likely to need explaining. Its hint says what it is\n          *for*, because the box above it is the one authors reach for by habit and a\n          placeholder is gone the moment somebody types.\n        -->\n        <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"deb-full\">\n          <mat-label>{{ ui.text('hintInLanguage', { language: lang() }) }}</mat-label>\n          <input\n            matInput\n            data-testid=\"field-hint\"\n            [ngModel]=\"hintValue(f)\"\n            (ngModelChange)=\"store.setFieldHint(store.keyOf(f), lang(), $event)\"\n          />\n          <mat-hint>{{ ui.text('hintHint') }}</mat-hint>\n        </mat-form-field>\n\n        @if (meta()?.supportsDefaultValue) {\n          <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"deb-full\">\n            <mat-label>{{ ui.text('defaultValue') }}</mat-label>\n            <input\n              matInput\n              [ngModel]=\"f.defaultValue ?? ''\"\n              (ngModelChange)=\"store.updateField(store.keyOf(f), { defaultValue: $event })\"\n            />\n          </mat-form-field>\n        }\n      </div>\n    </details>\n\n    <!--\n      Width.\n\n      `colSpan` has been in the schema and honoured by the renderer since the 12-column grid\n      existed, and the builder had no control for it \u2014 so every form authored here came out a\n      single-column ladder, and the only way to put two fields on one row was to hand-edit the\n      JSON. This is that control.\n    -->\n    <details class=\"deb-inspector__section\" open>\n      <summary class=\"deb-inspector__summary\">\n        {{ ui.text('sectionLayout') }}\n        <span class=\"deb-inspector__count\" data-testid=\"layout-count\">{{ f.colSpan ?? 12 }}/12</span>\n        <mat-icon class=\"deb-inspector__chevron\">expand_more</mat-icon>\n      </summary>\n      <div class=\"deb-inspector__body\">\n        <div class=\"deb-span-picker\" role=\"group\" [attr.aria-label]=\"ui.text('width')\">\n          @for (choice of spanChoices; track choice.span) {\n            <button\n              type=\"button\"\n              class=\"deb-span-picker__btn\"\n              [class.deb-span-picker__btn--active]=\"(f.colSpan ?? 12) === choice.span\"\n              [attr.data-testid]=\"'field-span-' + choice.span\"\n              [attr.aria-pressed]=\"(f.colSpan ?? 12) === choice.span\"\n              [matTooltip]=\"ui.text('widthOf', { span: choice.span })\"\n              (click)=\"store.updateField(store.keyOf(f), { colSpan: choice.span })\"\n            >\n              {{ ui.text(choice.textKey) }}\n            </button>\n          }\n        </div>\n        <p class=\"deb-hint\">{{ ui.text('widthHint') }}</p>\n      </div>\n    </details>\n\n    <!-- Validators -->\n    <!-- Validators -->\n    @if (meta(); as m) {\n      @if (m.flagValidators.length || m.paramValidators.length || supportsPattern(f.type) || f.validators?.pattern) {\n        <details class=\"deb-inspector__section\" open>\n          <summary class=\"deb-inspector__summary\">\n            {{ ui.text('sectionValidation') }}\n            @if (validatorCount(f); as count) {\n              <span class=\"deb-inspector__count\" data-testid=\"validation-count\">{{ count }}</span>\n            }\n            <mat-icon class=\"deb-inspector__chevron\">expand_more</mat-icon>\n          </summary>\n          <div class=\"deb-inspector__body\">\n            @if (m.flagValidators.length) {\n              <div class=\"deb-flags-row\">\n                @for (v of m.flagValidators; track v) {\n                  <mat-checkbox\n                    color=\"primary\"\n                    [ngModel]=\"store.hasFlagValidator(f, v)\"\n                    (ngModelChange)=\"store.toggleFlagValidator(store.keyOf(f), v, $event)\"\n                    >{{ v }}</mat-checkbox\n                  >\n                }\n              </div>\n            }\n            @if (m.paramValidators.length) {\n              <div class=\"deb-param-validators-grid\">\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(store.keyOf(f), v, toNum($event))\"\n                    />\n                  </mat-form-field>\n                }\n              </div>\n            }\n\n            @if (supportsPattern(f.type) || f.validators?.pattern) {\n              <div class=\"deb-pattern-box\" data-testid=\"pattern-playground\">\n                <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"deb-full\">\n                  <mat-label>{{ ui.text('pattern') }}</mat-label>\n                  <input\n                    matInput\n                    data-testid=\"field-pattern-input\"\n                    [ngModel]=\"f.validators?.pattern ?? ''\"\n                    (ngModelChange)=\"store.setPatternValidator(store.keyOf(f), $event)\"\n                  />\n                  <mat-hint>{{ ui.text('patternHint') }}</mat-hint>\n                </mat-form-field>\n\n                <div class=\"deb-pattern-presets\">\n                  <span class=\"deb-section-title\">{{ ui.text('quickPresets') }}:</span>\n                  @for (preset of patternPresets; track preset.label) {\n                    <button\n                      type=\"button\"\n                      class=\"deb-preset-btn\"\n                      [attr.data-testid]=\"'preset-' + preset.label.toLowerCase()\"\n                      (click)=\"applyPreset(f, preset.pattern)\"\n                    >\n                      {{ preset.label }}\n                    </button>\n                  }\n                </div>\n\n                <div class=\"deb-row deb-row--split\">\n                  <span class=\"deb-section-title\">{{ ui.text('testPattern') }}</span>\n                  <div\n                    class=\"deb-pattern-status\"\n                    [class.deb-pattern-status--match]=\"regexEvaluation().status === 'match'\"\n                    [class.deb-pattern-status--no-match]=\"regexEvaluation().status === 'no-match'\"\n                    [class.deb-pattern-status--invalid]=\"regexEvaluation().status === 'invalid'\"\n                    [class.deb-pattern-status--idle]=\"regexEvaluation().status === 'idle'\"\n                    [class.deb-pattern-status--empty]=\"regexEvaluation().status === 'empty'\"\n                    data-testid=\"regex-test-status\"\n                  >\n                    @switch (regexEvaluation().status) {\n                      @case ('match') {\n                        <mat-icon>check_circle</mat-icon> {{ ui.text('patternMatch') }}\n                      }\n                      @case ('no-match') {\n                        <mat-icon>cancel</mat-icon> {{ ui.text('patternNoMatch') }}\n                      }\n                      @case ('invalid') {\n                        <mat-icon>error</mat-icon> {{ ui.text('patternInvalid') }}\n                      }\n                      @case ('idle') {\n                        <mat-icon>edit_note</mat-icon> {{ ui.text('testPatternPlaceholder') }}\n                      }\n                      @case ('empty') {\n                        <mat-icon>info</mat-icon> {{ ui.text('patternEmptyPrompt') }}\n                      }\n                    }\n                  </div>\n                </div>\n\n                <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"deb-full\">\n                  <input\n                    matInput\n                    data-testid=\"regex-test-input\"\n                    [placeholder]=\"ui.text('testPatternPlaceholder')\"\n                    [ngModel]=\"testSample()\"\n                    (ngModelChange)=\"testSample.set($event)\"\n                  />\n                </mat-form-field>\n              </div>\n            }\n          </div>\n        </details>\n      }\n    }\n\n    <!-- Options (dropdown / radio / multiSelect) -->\n    @if (meta()?.hasOptions) {\n      <details class=\"deb-inspector__section\" open>\n        <summary class=\"deb-inspector__summary\">\n          {{ ui.text('sectionOptions') }}\n          @if ((f.options ?? []).length; as count) {\n            <span class=\"deb-inspector__count\" data-testid=\"options-count\">{{ count }}</span>\n          }\n          <mat-icon class=\"deb-inspector__chevron\">expand_more</mat-icon>\n        </summary>\n        <div class=\"deb-inspector__body\">\n          <span class=\"deb-section-title\">{{ ui.text('dataSource') }}</span>\n          <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"deb-full\">\n            <mat-label>{{ ui.text('optionsComeFrom') }}</mat-label>\n            <mat-select\n              data-testid=\"data-source\"\n              [ngModel]=\"store.fieldDataSource(f)\"\n              (ngModelChange)=\"store.setFieldDataSource(store.keyOf(f), $event)\"\n            >\n              <mat-option value=\"none\">{{ ui.text('optionsSourceNone') }}</mat-option>\n              <mat-option value=\"manual\">{{ ui.text('optionsSourceInline') }}</mat-option>\n              <mat-option value=\"lookup\">{{ ui.text('optionsSourceList') }}</mat-option>\n            </mat-select>\n          </mat-form-field>\n\n          <!-- Named lookup list -->\n          @if (store.fieldDataSource(f) === 'lookup') {\n            <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"deb-full\">\n              <mat-label>{{ ui.text('listName') }}</mat-label>\n              <input\n                matInput\n                data-testid=\"list-name\"\n                [ngModel]=\"f.listName ?? ''\"\n                (ngModelChange)=\"store.setListName(store.keyOf(f), $event)\"\n              />\n            </mat-form-field>\n            <p class=\"deb-hint\">\n              {{ ui.text('listNameHint') }}\n            </p>\n          }\n\n          <!-- Inline options -->\n          @if (store.fieldDataSource(f) !== 'lookup') {\n            <div class=\"deb-row deb-row--split\">\n              <span class=\"deb-section-title\">{{ ui.text('options') }}</span>\n              <span class=\"deb-row__actions\">\n                @if (store.hasUnkeyedOptions()) {\n                  <button\n                    mat-stroked-button\n                    type=\"button\"\n                    data-testid=\"assign-option-keys\"\n                    (click)=\"store.assignOptionKeys()\"\n                    [matTooltip]=\"ui.text('optionKeyHint')\"\n                  >\n                    <mat-icon>key</mat-icon> {{ ui.text('assignOptionKeys') }}\n                  </button>\n                }\n                <button\n                  mat-stroked-button\n                  type=\"button\"\n                  data-testid=\"add-option\"\n                  (click)=\"store.addOption(store.keyOf(f))\"\n                >\n                  <mat-icon>add</mat-icon> {{ ui.text('option') }}\n                </button>\n              </span>\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>{{ ui.text('optionInLanguage', { language: lang() }) }}</mat-label>\n                  <input\n                    matInput\n                    [attr.data-testid]=\"'option-' + $index\"\n                    [ngModel]=\"optionLabel(opt)\"\n                    (ngModelChange)=\"store.setOptionLabel(store.keyOf(f), $index, lang(), $event)\"\n                  />\n                </mat-form-field>\n                <!--\n                  Not a control. A key is the option's identity and every record already\n                  holding it matches on it, so a text box here \u2014 even a read-only one \u2014\n                  would be a data migration disguised as a field. It is shown because an\n                  author needs to be able to read it, and for no other reason.\n                -->\n                @if (store.optionKey(opt); as key) {\n                  <code\n                    class=\"deb-option-key\"\n                    [attr.data-testid]=\"'option-key-' + $index\"\n                    [attr.aria-label]=\"ui.text('optionKey')\"\n                    [matTooltip]=\"ui.text('optionKeyHint')\"\n                    >{{ key }}</code\n                  >\n                }\n                <button\n                  mat-icon-button\n                  type=\"button\"\n                  color=\"warn\"\n                  (click)=\"store.removeOption(store.keyOf(f), $index)\"\n                  [matTooltip]=\"ui.text('removeOption')\"\n                >\n                  <mat-icon>delete</mat-icon>\n                </button>\n              </div>\n            }\n            @if (!(f.options ?? []).length) {\n              <p class=\"deb-hint\">{{ ui.text('noOptionsYet') }}</p>\n            }\n          }\n        </div>\n      </details>\n    }\n\n    <!-- Flags -->\n    <details class=\"deb-inspector__section\" open>\n      <summary class=\"deb-inspector__summary\">\n        {{ ui.text('sectionDisplay') }}\n        @if (displayFlagCount(f); as count) {\n          <span class=\"deb-inspector__count\" data-testid=\"display-count\">{{ count }}</span>\n        }\n        <mat-icon class=\"deb-inspector__chevron\">expand_more</mat-icon>\n      </summary>\n      <div class=\"deb-inspector__body\">\n        <div class=\"deb-toggles\" role=\"group\" [attr.aria-label]=\"ui.text('display')\">\n          <mat-slide-toggle\n            color=\"primary\"\n            [ngModel]=\"f.visibility ?? true\"\n            (ngModelChange)=\"store.updateField(store.keyOf(f), { visibility: $event })\"\n            >{{ ui.text('visible') }}</mat-slide-toggle\n          >\n          <mat-slide-toggle\n            color=\"primary\"\n            [ngModel]=\"f.table?.visible ?? false\"\n            (ngModelChange)=\"store.updateField(store.keyOf(f), { table: { visible: $event } })\"\n            >{{ ui.text('tableColumn') }}</mat-slide-toggle\n          >\n          <mat-slide-toggle\n            color=\"primary\"\n            [ngModel]=\"f.readonly ?? false\"\n            (ngModelChange)=\"store.updateField(store.keyOf(f), { readonly: $event })\"\n            >{{ ui.text('readOnly') }}</mat-slide-toggle\n          >\n          <mat-slide-toggle\n            color=\"primary\"\n            [ngModel]=\"f.disabled ?? false\"\n            (ngModelChange)=\"store.updateField(store.keyOf(f), { disabled: $event })\"\n            >{{ ui.text('disabled') }}</mat-slide-toggle\n          >\n          <mat-slide-toggle\n            color=\"primary\"\n            [ngModel]=\"f.maskData ?? false\"\n            (ngModelChange)=\"store.updateField(store.keyOf(f), { maskData: $event })\"\n            >{{ ui.text('maskData') }}</mat-slide-toggle\n          >\n          <mat-slide-toggle\n            color=\"primary\"\n            data-testid=\"toggle-critical\"\n            [ngModel]=\"f.criticalField ?? false\"\n            (ngModelChange)=\"store.updateField(store.keyOf(f), { criticalField: $event })\"\n            [matTooltip]=\"ui.text('criticalFieldTooltip')\"\n            >{{ ui.text('criticalField') }}</mat-slide-toggle\n          >\n          <mat-slide-toggle\n            color=\"primary\"\n            [ngModel]=\"f.showOnMinimize ?? false\"\n            (ngModelChange)=\"store.updateField(store.keyOf(f), { showOnMinimize: $event })\"\n            [matTooltip]=\"ui.text('showInSummaryTooltip')\"\n            >{{ ui.text('showInSummary') }}</mat-slide-toggle\n          >\n        </div>\n      </div>\n    </details>\n\n    <!-- Conditional visibility (static showWhen) -->\n    <details class=\"deb-inspector__section\" open>\n      <summary class=\"deb-inspector__summary\">\n        {{ ui.text('sectionVisibility') }}\n        @if (showWhenEntries(f).length; as count) {\n          <span class=\"deb-inspector__count\" data-testid=\"visibility-count\">{{ count }}</span>\n        }\n        <mat-icon class=\"deb-inspector__chevron\">expand_more</mat-icon>\n      </summary>\n      <div class=\"deb-inspector__body\">\n        <div class=\"deb-row deb-row--split\">\n          <span class=\"deb-section-title\">{{ ui.text('showWhen') }}</span>\n          <button mat-stroked-button type=\"button\" data-testid=\"add-show-when\" (click)=\"addShowWhen(f)\">\n            <mat-icon>add</mat-icon> {{ ui.text('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>{{ ui.text('watchedField') }}</mat-label>\n              <mat-select\n                data-testid=\"show-when-field\"\n                [ngModel]=\"entry.key\"\n                (ngModelChange)=\"renameShowWhen(f, entry.key, $event)\"\n              >\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>{{ ui.text('equals') }}</mat-label>\n              <input matInput [ngModel]=\"entry.display\" (ngModelChange)=\"setShowWhenValue(f, entry.key, $event)\" />\n            </mat-form-field>\n            <button\n              mat-icon-button\n              type=\"button\"\n              color=\"warn\"\n              [matTooltip]=\"ui.text('removeCondition')\"\n              (click)=\"removeShowWhen(f, entry.key)\"\n            >\n              <mat-icon>delete</mat-icon>\n            </button>\n          </div>\n        }\n        @if (!showWhenEntries(f).length) {\n          <p class=\"deb-hint\">{{ ui.text('alwaysVisibleHint') }}</p>\n        }\n      </div>\n    </details>\n\n    <!-- Entity reference, cascade, autoPatch, and patchOnTrue -->\n    @if (meta()?.isEntityRef || f.type === 'boolean' || f.type === 'checkbox') {\n      <details class=\"deb-inspector__section\" open>\n        <summary class=\"deb-inspector__summary\">\n          {{ ui.text('sectionAutomation') }}\n          @if ((f.patchOnTrue ?? []).length; as count) {\n            <span class=\"deb-inspector__count\" data-testid=\"automation-count\">{{ count }}</span>\n          }\n          <mat-icon class=\"deb-inspector__chevron\">expand_more</mat-icon>\n        </summary>\n        <div class=\"deb-inspector__body\">\n          @if (meta()?.isEntityRef) {\n            <ngx-entity-reference-config />\n          }\n\n          <!-- patchOnTrue (boolean/checkbox only) -->\n          @if (f.type === 'boolean' || f.type === 'checkbox') {\n            <div class=\"deb-row deb-row--split\">\n              <span class=\"deb-section-title\">{{ ui.text('copyOnTrue') }}</span>\n              <button\n                mat-stroked-button\n                type=\"button\"\n                data-testid=\"add-patch-on-true\"\n                (click)=\"store.addPatchOnTrueMapping(store.keyOf(f))\"\n              >\n                <mat-icon>add</mat-icon> {{ ui.text('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>{{ ui.text('fromField') }}</mat-label>\n                  <mat-select\n                    data-testid=\"patch-on-true-from\"\n                    [ngModel]=\"mapping.from\"\n                    (ngModelChange)=\"store.updatePatchOnTrueMapping(store.keyOf(f), $index, { from: $event })\"\n                  >\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>{{ ui.text('toField') }}</mat-label>\n                  <mat-select\n                    data-testid=\"patch-on-true-to\"\n                    [ngModel]=\"mapping.to\"\n                    (ngModelChange)=\"store.updatePatchOnTrueMapping(store.keyOf(f), $index, { to: $event })\"\n                  >\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\n                  mat-icon-button\n                  type=\"button\"\n                  color=\"warn\"\n                  [matTooltip]=\"ui.text('removeMapping')\"\n                  (click)=\"store.removePatchOnTrueMapping(store.keyOf(f), $index)\"\n                >\n                  <mat-icon>delete</mat-icon>\n                </button>\n              </div>\n            }\n            @if (!(f.patchOnTrue ?? []).length) {\n              <p class=\"deb-hint\">{{ ui.text('copyOnTrueHint') }}</p>\n            }\n          }\n        </div>\n      </details>\n    }\n\n    <!-- Rules attached to this field -->\n    <details class=\"deb-inspector__section\" open>\n      <summary class=\"deb-inspector__summary\">\n        {{ ui.text('sectionRules') }}\n        @if (store.rulesForSelectedField().length; as count) {\n          <span class=\"deb-inspector__count\" data-testid=\"rules-count\">{{ count }}</span>\n        }\n        <mat-icon class=\"deb-inspector__chevron\">expand_more</mat-icon>\n      </summary>\n      <div class=\"deb-inspector__body\">\n        <ngx-field-rules-list />\n      </div>\n    </details>\n\n    <!-- Field Dependencies Visualizer -->\n    <details\n      class=\"deb-inspector__section\"\n      open\n      data-testid=\"section-dependencies\"\n    >\n      <summary class=\"deb-inspector__summary\">\n        {{ ui.text('sectionDependencies') }}\n        @if (incomingDependencies().length + outgoingDependencies().length; as count) {\n          <span class=\"deb-inspector__count\" data-testid=\"dependencies-count\">{{ count }}</span>\n        }\n        <mat-icon class=\"deb-inspector__chevron\">expand_more</mat-icon>\n      </summary>\n      <div class=\"deb-inspector__body\">\n        @if (incomingDependencies().length) {\n          <span class=\"deb-section-title\">{{ ui.text('dependsOn') }} ({{ incomingDependencies().length }})</span>\n          <div class=\"deb-dep-list\" data-testid=\"incoming-dependencies\">\n            @for (dep of incomingDependencies(); track dep.id) {\n              <div class=\"deb-dep-row\">\n                <div class=\"deb-dep-info\">\n                  <span class=\"deb-dep-name\">{{ dep.sourceLabel }}</span>\n                  <span class=\"deb-dep-detail\">{{ dep.description }}</span>\n                </div>\n                <button\n                  mat-stroked-button\n                  type=\"button\"\n                  [matTooltip]=\"ui.text('jumpToField', { field: dep.sourceLabel })\"\n                  (click)=\"selectField(dep.sourceKey)\"\n                >\n                  <mat-icon>arrow_back</mat-icon> {{ ui.text('jumpToField', { field: dep.sourceLabel }) }}\n                </button>\n              </div>\n            }\n          </div>\n        }\n\n        @if (outgoingDependencies().length) {\n          <span class=\"deb-section-title\">{{ ui.text('affects') }} ({{ outgoingDependencies().length }})</span>\n          <div class=\"deb-dep-list\" data-testid=\"outgoing-dependencies\">\n            @for (dep of outgoingDependencies(); track dep.id) {\n              <div class=\"deb-dep-row\">\n                <div class=\"deb-dep-info\">\n                  <span class=\"deb-dep-name\">{{ dep.targetLabel }}</span>\n                  <span class=\"deb-dep-detail\">{{ dep.description }}</span>\n                </div>\n                <button\n                  mat-stroked-button\n                  type=\"button\"\n                  [matTooltip]=\"ui.text('jumpToField', { field: dep.targetLabel })\"\n                  (click)=\"selectField(dep.targetKey)\"\n                >\n                  <mat-icon>arrow_forward</mat-icon> {{ ui.text('jumpToField', { field: dep.targetLabel }) }}\n                </button>\n              </div>\n            }\n          </div>\n        }\n\n        @if (!incomingDependencies().length && !outgoingDependencies().length) {\n          <p class=\"deb-hint\" data-testid=\"no-field-dependencies\">{{ ui.text('noDependencies') }}</p>\n        }\n      </div>\n    </details>\n\n    <!-- Cross-entity field reference & drift management -->\n    <details class=\"deb-inspector__section\" open>\n      <summary class=\"deb-inspector__summary\">\n        {{ ui.text('sectionReference') }}\n        @if (f.isReferenced) {\n          <span class=\"deb-inspector__count\" data-testid=\"reference-count\">{{ f.referencedEntityKey }}</span>\n        }\n        <mat-icon class=\"deb-inspector__chevron\">expand_more</mat-icon>\n      </summary>\n      <div class=\"deb-inspector__body\">\n        <ngx-referenced-field-config />\n      </div>\n    </details>\n  </div>\n} @else {\n  <div class=\"deb-inspector__empty\">\n    <mat-icon>touch_app</mat-icon>\n    <p>{{ ui.text('inspectorEmpty') }}</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>*{flex:1}.deb-row>.deb-chip{flex:0 0 auto}.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-pattern-box{display:flex;flex-direction:column;gap:8px;margin-top:8px;padding:12px;background:#f8fafc;border:1px solid #e2e8f0;border-radius:8px}.deb-pattern-status{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:6px;font-size:12px;font-weight:600}.deb-pattern-status--match{background:#dcfce7;color:#166534}.deb-pattern-status--no-match{background:#fee2e2;color:#991b1b}.deb-pattern-status--invalid{background:#fef3c7;color:#92400e}.deb-pattern-status--idle,.deb-pattern-status--empty{background:#f1f5f9;color:#334155}.deb-pattern-presets{display:flex;flex-wrap:wrap;gap:4px;align-items:center}.deb-preset-btn{padding:2px 8px;border-radius:4px;border:1px solid #cbd5e1;background:#fff;font-size:11px;color:#334155;cursor:pointer;transition:background .1s ease}.deb-preset-btn:hover{background:#e2e8f0}.deb-dep-list{display:flex;flex-direction:column;gap:6px;margin-top:4px;margin-bottom:12px}.deb-dep-row{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:6px 10px;background:#f8fafc;border:1px solid #e2e8f0;border-radius:6px}.deb-dep-info{display:flex;flex-direction:column;min-width:0}.deb-dep-name{font-size:12px;font-weight:600;color:#0f172a}.deb-dep-detail{font-size:11px;color:#64748b}\n"] }]
+                    ], template: "@if (field(); as f) {\n  <!--\n    The inspector, in collapsible sections.\n\n    It used to be one flat scroll of fifteen divider-separated blocks, so renaming a field\n    meant scrolling past every advanced setting a field has, and finding the rules list meant\n    scrolling past all of them.\n\n    All inspector sections start expanded by default so authors have immediate access to\n    validation, automation, visibility conditions, rules, dependencies, and reference settings\n    without needing to manually unfold each section. Sections can still be collapsed as desired.\n\n    `<details>` rather than mat-expansion-panel: the inspector already sits inside a card in a\n    scrolling rail, and a third level of Material elevation inside that read as noise.\n  -->\n  <div class=\"deb-inspector\">\n    <details class=\"deb-inspector__section\" open>\n      <summary class=\"deb-inspector__summary\">\n        {{ ui.text('sectionBasics') }}\n        <mat-icon class=\"deb-inspector__chevron\">expand_more</mat-icon>\n      </summary>\n      <div class=\"deb-inspector__body\">\n        <!-- Identity -->\n        <div class=\"deb-row\">\n          <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\">\n            <mat-label>{{ ui.text('fieldId') }}</mat-label>\n            <input matInput data-testid=\"field-id\" [value]=\"f.id\" disabled />\n            @if (store.hasManualId(f.id)) {\n              <mat-hint>{{ ui.text('fieldIdFixedHint') }}</mat-hint>\n            } @else {\n              <mat-hint>{{ ui.text('fieldIdDerivedHint') }}</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>{{ ui.text('tab') }}</mat-label>\n            <mat-select data-testid=\"field-tab\" [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>{{ ui.text('tabMoveHint') }}</mat-hint>\n          </mat-form-field>\n        }\n\n        <!-- Localised text (active language) -->\n        <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"deb-full\">\n          <mat-label>{{ ui.text('labelInLanguage', { language: lang() }) }}</mat-label>\n          <input\n            matInput\n            data-testid=\"field-label\"\n            [ngModel]=\"labelValue(f)\"\n            (ngModelChange)=\"store.setFieldLabel(store.keyOf(f), 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>{{ ui.text('placeholderInLanguage', { language: lang() }) }}</mat-label>\n            <input\n              matInput\n              [ngModel]=\"placeholderValue(f)\"\n              (ngModelChange)=\"store.setFieldPlaceholder(store.keyOf(f), lang(), $event)\"\n            />\n          </mat-form-field>\n        }\n\n        <!--\n          Help text, offered on every field type \u2014 including the ones with no placeholder,\n          which are exactly the ones most likely to need explaining. Its hint says what it is\n          *for*, because the box above it is the one authors reach for by habit and a\n          placeholder is gone the moment somebody types.\n        -->\n        <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"deb-full\">\n          <mat-label>{{ ui.text('hintInLanguage', { language: lang() }) }}</mat-label>\n          <input\n            matInput\n            data-testid=\"field-hint\"\n            [ngModel]=\"hintValue(f)\"\n            (ngModelChange)=\"store.setFieldHint(store.keyOf(f), lang(), $event)\"\n          />\n          <mat-hint>{{ ui.text('hintHint') }}</mat-hint>\n        </mat-form-field>\n\n        @if (meta()?.supportsDefaultValue) {\n          <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"deb-full\">\n            <mat-label>{{ ui.text('defaultValue') }}</mat-label>\n            <input\n              matInput\n              [ngModel]=\"f.defaultValue ?? ''\"\n              (ngModelChange)=\"store.updateField(store.keyOf(f), { defaultValue: $event })\"\n            />\n          </mat-form-field>\n        }\n      </div>\n    </details>\n\n    <!--\n      Width.\n\n      `colSpan` has been in the schema and honoured by the renderer since the 12-column grid\n      existed, and the builder had no control for it \u2014 so every form authored here came out a\n      single-column ladder, and the only way to put two fields on one row was to hand-edit the\n      JSON. This is that control.\n    -->\n    <details class=\"deb-inspector__section\" open>\n      <summary class=\"deb-inspector__summary\">\n        {{ ui.text('sectionLayout') }}\n        <span class=\"deb-inspector__count\" data-testid=\"layout-count\">{{ f.colSpan ?? 12 }}/12</span>\n        <mat-icon class=\"deb-inspector__chevron\">expand_more</mat-icon>\n      </summary>\n      <div class=\"deb-inspector__body\">\n        <div class=\"deb-span-picker\" role=\"group\" [attr.aria-label]=\"ui.text('width')\">\n          @for (choice of spanChoices; track choice.span) {\n            <button\n              type=\"button\"\n              class=\"deb-span-picker__btn\"\n              [class.deb-span-picker__btn--active]=\"(f.colSpan ?? 12) === choice.span\"\n              [attr.data-testid]=\"'field-span-' + choice.span\"\n              [attr.aria-pressed]=\"(f.colSpan ?? 12) === choice.span\"\n              [matTooltip]=\"ui.text('widthOf', { span: choice.span })\"\n              (click)=\"store.updateField(store.keyOf(f), { colSpan: choice.span })\"\n            >\n              {{ ui.text(choice.textKey) }}\n            </button>\n          }\n        </div>\n        <p class=\"deb-hint\">{{ ui.text('widthHint') }}</p>\n      </div>\n    </details>\n\n    <!-- Validators -->\n    <!-- Validators -->\n    @if (meta(); as m) {\n      @if (m.flagValidators.length || m.paramValidators.length || supportsPattern(f.type) || f.validators?.pattern) {\n        <details class=\"deb-inspector__section\" open>\n          <summary class=\"deb-inspector__summary\">\n            {{ ui.text('sectionValidation') }}\n            @if (validatorCount(f); as count) {\n              <span class=\"deb-inspector__count\" data-testid=\"validation-count\">{{ count }}</span>\n            }\n            <mat-icon class=\"deb-inspector__chevron\">expand_more</mat-icon>\n          </summary>\n          <div class=\"deb-inspector__body\">\n            @if (m.flagValidators.length) {\n              <div class=\"deb-flags-row\">\n                @for (v of m.flagValidators; track v) {\n                  <mat-checkbox\n                    color=\"primary\"\n                    [ngModel]=\"store.hasFlagValidator(f, v)\"\n                    (ngModelChange)=\"store.toggleFlagValidator(store.keyOf(f), v, $event)\"\n                    >{{ v }}</mat-checkbox\n                  >\n                }\n              </div>\n            }\n            @if (m.paramValidators.length) {\n              <div class=\"deb-param-validators-grid\">\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(store.keyOf(f), v, toNum($event))\"\n                    />\n                  </mat-form-field>\n                }\n              </div>\n            }\n            @if (f.type === 'slider') {\n              <!-- The slider's range is min and max above; its increment is the one number left. -->\n              <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"deb-full\">\n                <mat-label>{{ ui.text('sliderStep') }}</mat-label>\n                <input\n                  matInput\n                  type=\"number\"\n                  min=\"0\"\n                  data-testid=\"field-step\"\n                  [ngModel]=\"f.step ?? null\"\n                  (ngModelChange)=\"store.updateField(store.keyOf(f), { step: positiveOrUnset($event) })\"\n                />\n                <mat-hint>{{ ui.text('sliderStepHint') }}</mat-hint>\n              </mat-form-field>\n            }\n\n            @if (supportsPattern(f.type) || f.validators?.pattern) {\n              <div class=\"deb-pattern-box\" data-testid=\"pattern-playground\">\n                <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"deb-full\">\n                  <mat-label>{{ ui.text('pattern') }}</mat-label>\n                  <input\n                    matInput\n                    data-testid=\"field-pattern-input\"\n                    [ngModel]=\"f.validators?.pattern ?? ''\"\n                    (ngModelChange)=\"store.setPatternValidator(store.keyOf(f), $event)\"\n                  />\n                  <mat-hint>{{ ui.text('patternHint') }}</mat-hint>\n                </mat-form-field>\n\n                <div class=\"deb-pattern-presets\">\n                  <span class=\"deb-section-title\">{{ ui.text('quickPresets') }}:</span>\n                  @for (preset of patternPresets; track preset.label) {\n                    <button\n                      type=\"button\"\n                      class=\"deb-preset-btn\"\n                      [attr.data-testid]=\"'preset-' + preset.label.toLowerCase()\"\n                      (click)=\"applyPreset(f, preset.pattern)\"\n                    >\n                      {{ preset.label }}\n                    </button>\n                  }\n                </div>\n\n                <div class=\"deb-row deb-row--split\">\n                  <span class=\"deb-section-title\">{{ ui.text('testPattern') }}</span>\n                  <div\n                    class=\"deb-pattern-status\"\n                    [class.deb-pattern-status--match]=\"regexEvaluation().status === 'match'\"\n                    [class.deb-pattern-status--no-match]=\"regexEvaluation().status === 'no-match'\"\n                    [class.deb-pattern-status--invalid]=\"regexEvaluation().status === 'invalid'\"\n                    [class.deb-pattern-status--idle]=\"regexEvaluation().status === 'idle'\"\n                    [class.deb-pattern-status--empty]=\"regexEvaluation().status === 'empty'\"\n                    data-testid=\"regex-test-status\"\n                  >\n                    @switch (regexEvaluation().status) {\n                      @case ('match') {\n                        <mat-icon>check_circle</mat-icon> {{ ui.text('patternMatch') }}\n                      }\n                      @case ('no-match') {\n                        <mat-icon>cancel</mat-icon> {{ ui.text('patternNoMatch') }}\n                      }\n                      @case ('invalid') {\n                        <mat-icon>error</mat-icon> {{ ui.text('patternInvalid') }}\n                      }\n                      @case ('idle') {\n                        <mat-icon>edit_note</mat-icon> {{ ui.text('testPatternPlaceholder') }}\n                      }\n                      @case ('empty') {\n                        <mat-icon>info</mat-icon> {{ ui.text('patternEmptyPrompt') }}\n                      }\n                    }\n                  </div>\n                </div>\n\n                <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"deb-full\">\n                  <input\n                    matInput\n                    data-testid=\"regex-test-input\"\n                    [placeholder]=\"ui.text('testPatternPlaceholder')\"\n                    [ngModel]=\"testSample()\"\n                    (ngModelChange)=\"testSample.set($event)\"\n                  />\n                </mat-form-field>\n              </div>\n            }\n          </div>\n        </details>\n      }\n    }\n\n    <!-- Options (dropdown / radio / multiSelect) -->\n    @if (meta()?.hasOptions) {\n      <details class=\"deb-inspector__section\" open>\n        <summary class=\"deb-inspector__summary\">\n          {{ ui.text('sectionOptions') }}\n          @if ((f.options ?? []).length; as count) {\n            <span class=\"deb-inspector__count\" data-testid=\"options-count\">{{ count }}</span>\n          }\n          <mat-icon class=\"deb-inspector__chevron\">expand_more</mat-icon>\n        </summary>\n        <div class=\"deb-inspector__body\">\n          <span class=\"deb-section-title\">{{ ui.text('dataSource') }}</span>\n          <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"deb-full\">\n            <mat-label>{{ ui.text('optionsComeFrom') }}</mat-label>\n            <mat-select\n              data-testid=\"data-source\"\n              [ngModel]=\"store.fieldDataSource(f)\"\n              (ngModelChange)=\"store.setFieldDataSource(store.keyOf(f), $event)\"\n            >\n              <mat-option value=\"none\">{{ ui.text('optionsSourceNone') }}</mat-option>\n              <mat-option value=\"manual\">{{ ui.text('optionsSourceInline') }}</mat-option>\n              <mat-option value=\"lookup\">{{ ui.text('optionsSourceList') }}</mat-option>\n            </mat-select>\n          </mat-form-field>\n\n          <!-- Named lookup list -->\n          @if (store.fieldDataSource(f) === 'lookup') {\n            <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"deb-full\">\n              <mat-label>{{ ui.text('listName') }}</mat-label>\n              <input\n                matInput\n                data-testid=\"list-name\"\n                [ngModel]=\"f.listName ?? ''\"\n                (ngModelChange)=\"store.setListName(store.keyOf(f), $event)\"\n              />\n            </mat-form-field>\n            <p class=\"deb-hint\">\n              {{ ui.text('listNameHint') }}\n            </p>\n          }\n\n          <!-- Inline options -->\n          @if (store.fieldDataSource(f) !== 'lookup') {\n            <div class=\"deb-row deb-row--split\">\n              <span class=\"deb-section-title\">{{ ui.text('options') }}</span>\n              <span class=\"deb-row__actions\">\n                @if (store.hasUnkeyedOptions()) {\n                  <button\n                    mat-stroked-button\n                    type=\"button\"\n                    data-testid=\"assign-option-keys\"\n                    (click)=\"store.assignOptionKeys()\"\n                    [matTooltip]=\"ui.text('optionKeyHint')\"\n                  >\n                    <mat-icon>key</mat-icon> {{ ui.text('assignOptionKeys') }}\n                  </button>\n                }\n                <button\n                  mat-stroked-button\n                  type=\"button\"\n                  data-testid=\"add-option\"\n                  (click)=\"store.addOption(store.keyOf(f))\"\n                >\n                  <mat-icon>add</mat-icon> {{ ui.text('option') }}\n                </button>\n              </span>\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>{{ ui.text('optionInLanguage', { language: lang() }) }}</mat-label>\n                  <input\n                    matInput\n                    [attr.data-testid]=\"'option-' + $index\"\n                    [ngModel]=\"optionLabel(opt)\"\n                    (ngModelChange)=\"store.setOptionLabel(store.keyOf(f), $index, lang(), $event)\"\n                  />\n                </mat-form-field>\n                <!--\n                  Not a control. A key is the option's identity and every record already\n                  holding it matches on it, so a text box here \u2014 even a read-only one \u2014\n                  would be a data migration disguised as a field. It is shown because an\n                  author needs to be able to read it, and for no other reason.\n                -->\n                @if (store.optionKey(opt); as key) {\n                  <code\n                    class=\"deb-option-key\"\n                    [attr.data-testid]=\"'option-key-' + $index\"\n                    [attr.aria-label]=\"ui.text('optionKey')\"\n                    [matTooltip]=\"ui.text('optionKeyHint')\"\n                    >{{ key }}</code\n                  >\n                }\n                <button\n                  mat-icon-button\n                  type=\"button\"\n                  color=\"warn\"\n                  (click)=\"store.removeOption(store.keyOf(f), $index)\"\n                  [matTooltip]=\"ui.text('removeOption')\"\n                >\n                  <mat-icon>delete</mat-icon>\n                </button>\n              </div>\n            }\n            @if (!(f.options ?? []).length) {\n              <p class=\"deb-hint\">{{ ui.text('noOptionsYet') }}</p>\n            }\n          }\n        </div>\n      </details>\n    }\n\n    <!-- Flags -->\n    <details class=\"deb-inspector__section\" open>\n      <summary class=\"deb-inspector__summary\">\n        {{ ui.text('sectionDisplay') }}\n        @if (displayFlagCount(f); as count) {\n          <span class=\"deb-inspector__count\" data-testid=\"display-count\">{{ count }}</span>\n        }\n        <mat-icon class=\"deb-inspector__chevron\">expand_more</mat-icon>\n      </summary>\n      <div class=\"deb-inspector__body\">\n        <div class=\"deb-toggles\" role=\"group\" [attr.aria-label]=\"ui.text('display')\">\n          <mat-slide-toggle\n            color=\"primary\"\n            [ngModel]=\"f.visibility ?? true\"\n            (ngModelChange)=\"store.updateField(store.keyOf(f), { visibility: $event })\"\n            >{{ ui.text('visible') }}</mat-slide-toggle\n          >\n          <mat-slide-toggle\n            color=\"primary\"\n            [ngModel]=\"f.table?.visible ?? false\"\n            (ngModelChange)=\"store.updateField(store.keyOf(f), { table: { visible: $event } })\"\n            >{{ ui.text('tableColumn') }}</mat-slide-toggle\n          >\n          <mat-slide-toggle\n            color=\"primary\"\n            [ngModel]=\"f.readonly ?? false\"\n            (ngModelChange)=\"store.updateField(store.keyOf(f), { readonly: $event })\"\n            >{{ ui.text('readOnly') }}</mat-slide-toggle\n          >\n          <mat-slide-toggle\n            color=\"primary\"\n            [ngModel]=\"f.disabled ?? false\"\n            (ngModelChange)=\"store.updateField(store.keyOf(f), { disabled: $event })\"\n            >{{ ui.text('disabled') }}</mat-slide-toggle\n          >\n          <mat-slide-toggle\n            color=\"primary\"\n            [ngModel]=\"f.maskData ?? false\"\n            (ngModelChange)=\"store.updateField(store.keyOf(f), { maskData: $event })\"\n            >{{ ui.text('maskData') }}</mat-slide-toggle\n          >\n          <mat-slide-toggle\n            color=\"primary\"\n            data-testid=\"toggle-critical\"\n            [ngModel]=\"f.criticalField ?? false\"\n            (ngModelChange)=\"store.updateField(store.keyOf(f), { criticalField: $event })\"\n            [matTooltip]=\"ui.text('criticalFieldTooltip')\"\n            >{{ ui.text('criticalField') }}</mat-slide-toggle\n          >\n          <mat-slide-toggle\n            color=\"primary\"\n            [ngModel]=\"f.showOnMinimize ?? false\"\n            (ngModelChange)=\"store.updateField(store.keyOf(f), { showOnMinimize: $event })\"\n            [matTooltip]=\"ui.text('showInSummaryTooltip')\"\n            >{{ ui.text('showInSummary') }}</mat-slide-toggle\n          >\n        </div>\n      </div>\n    </details>\n\n    <!-- Conditional visibility (static showWhen) -->\n    <details class=\"deb-inspector__section\" open>\n      <summary class=\"deb-inspector__summary\">\n        {{ ui.text('sectionVisibility') }}\n        @if (showWhenEntries(f).length; as count) {\n          <span class=\"deb-inspector__count\" data-testid=\"visibility-count\">{{ count }}</span>\n        }\n        <mat-icon class=\"deb-inspector__chevron\">expand_more</mat-icon>\n      </summary>\n      <div class=\"deb-inspector__body\">\n        <div class=\"deb-row deb-row--split\">\n          <span class=\"deb-section-title\">{{ ui.text('showWhen') }}</span>\n          <button mat-stroked-button type=\"button\" data-testid=\"add-show-when\" (click)=\"addShowWhen(f)\">\n            <mat-icon>add</mat-icon> {{ ui.text('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>{{ ui.text('watchedField') }}</mat-label>\n              <mat-select\n                data-testid=\"show-when-field\"\n                [ngModel]=\"entry.key\"\n                (ngModelChange)=\"renameShowWhen(f, entry.key, $event)\"\n              >\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>{{ ui.text('equals') }}</mat-label>\n              <input matInput [ngModel]=\"entry.display\" (ngModelChange)=\"setShowWhenValue(f, entry.key, $event)\" />\n            </mat-form-field>\n            <button\n              mat-icon-button\n              type=\"button\"\n              color=\"warn\"\n              [matTooltip]=\"ui.text('removeCondition')\"\n              (click)=\"removeShowWhen(f, entry.key)\"\n            >\n              <mat-icon>delete</mat-icon>\n            </button>\n          </div>\n        }\n        @if (!showWhenEntries(f).length) {\n          <p class=\"deb-hint\">{{ ui.text('alwaysVisibleHint') }}</p>\n        }\n      </div>\n    </details>\n\n    <!-- Entity reference, cascade, autoPatch, and patchOnTrue -->\n    @if (meta()?.isEntityRef || f.type === 'boolean' || f.type === 'checkbox') {\n      <details class=\"deb-inspector__section\" open>\n        <summary class=\"deb-inspector__summary\">\n          {{ ui.text('sectionAutomation') }}\n          @if ((f.patchOnTrue ?? []).length; as count) {\n            <span class=\"deb-inspector__count\" data-testid=\"automation-count\">{{ count }}</span>\n          }\n          <mat-icon class=\"deb-inspector__chevron\">expand_more</mat-icon>\n        </summary>\n        <div class=\"deb-inspector__body\">\n          @if (meta()?.isEntityRef) {\n            <ngx-entity-reference-config />\n          }\n\n          <!-- patchOnTrue (boolean/checkbox only) -->\n          @if (f.type === 'boolean' || f.type === 'checkbox') {\n            <div class=\"deb-row deb-row--split\">\n              <span class=\"deb-section-title\">{{ ui.text('copyOnTrue') }}</span>\n              <button\n                mat-stroked-button\n                type=\"button\"\n                data-testid=\"add-patch-on-true\"\n                (click)=\"store.addPatchOnTrueMapping(store.keyOf(f))\"\n              >\n                <mat-icon>add</mat-icon> {{ ui.text('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>{{ ui.text('fromField') }}</mat-label>\n                  <mat-select\n                    data-testid=\"patch-on-true-from\"\n                    [ngModel]=\"mapping.from\"\n                    (ngModelChange)=\"store.updatePatchOnTrueMapping(store.keyOf(f), $index, { from: $event })\"\n                  >\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>{{ ui.text('toField') }}</mat-label>\n                  <mat-select\n                    data-testid=\"patch-on-true-to\"\n                    [ngModel]=\"mapping.to\"\n                    (ngModelChange)=\"store.updatePatchOnTrueMapping(store.keyOf(f), $index, { to: $event })\"\n                  >\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\n                  mat-icon-button\n                  type=\"button\"\n                  color=\"warn\"\n                  [matTooltip]=\"ui.text('removeMapping')\"\n                  (click)=\"store.removePatchOnTrueMapping(store.keyOf(f), $index)\"\n                >\n                  <mat-icon>delete</mat-icon>\n                </button>\n              </div>\n            }\n            @if (!(f.patchOnTrue ?? []).length) {\n              <p class=\"deb-hint\">{{ ui.text('copyOnTrueHint') }}</p>\n            }\n          }\n        </div>\n      </details>\n    }\n\n    <!-- Rules attached to this field -->\n    <details class=\"deb-inspector__section\" open>\n      <summary class=\"deb-inspector__summary\">\n        {{ ui.text('sectionRules') }}\n        @if (store.rulesForSelectedField().length; as count) {\n          <span class=\"deb-inspector__count\" data-testid=\"rules-count\">{{ count }}</span>\n        }\n        <mat-icon class=\"deb-inspector__chevron\">expand_more</mat-icon>\n      </summary>\n      <div class=\"deb-inspector__body\">\n        <ngx-field-rules-list />\n      </div>\n    </details>\n\n    <!-- Field Dependencies Visualizer -->\n    <details\n      class=\"deb-inspector__section\"\n      open\n      data-testid=\"section-dependencies\"\n    >\n      <summary class=\"deb-inspector__summary\">\n        {{ ui.text('sectionDependencies') }}\n        @if (incomingDependencies().length + outgoingDependencies().length; as count) {\n          <span class=\"deb-inspector__count\" data-testid=\"dependencies-count\">{{ count }}</span>\n        }\n        <mat-icon class=\"deb-inspector__chevron\">expand_more</mat-icon>\n      </summary>\n      <div class=\"deb-inspector__body\">\n        @if (incomingDependencies().length) {\n          <span class=\"deb-section-title\">{{ ui.text('dependsOn') }} ({{ incomingDependencies().length }})</span>\n          <div class=\"deb-dep-list\" data-testid=\"incoming-dependencies\">\n            @for (dep of incomingDependencies(); track dep.id) {\n              <div class=\"deb-dep-row\">\n                <div class=\"deb-dep-info\">\n                  <span class=\"deb-dep-name\">{{ dep.sourceLabel }}</span>\n                  <span class=\"deb-dep-detail\">{{ dep.description }}</span>\n                </div>\n                <button\n                  mat-stroked-button\n                  type=\"button\"\n                  [matTooltip]=\"ui.text('jumpToField', { field: dep.sourceLabel })\"\n                  (click)=\"selectField(dep.sourceKey)\"\n                >\n                  <mat-icon>arrow_back</mat-icon> {{ ui.text('jumpToField', { field: dep.sourceLabel }) }}\n                </button>\n              </div>\n            }\n          </div>\n        }\n\n        @if (outgoingDependencies().length) {\n          <span class=\"deb-section-title\">{{ ui.text('affects') }} ({{ outgoingDependencies().length }})</span>\n          <div class=\"deb-dep-list\" data-testid=\"outgoing-dependencies\">\n            @for (dep of outgoingDependencies(); track dep.id) {\n              <div class=\"deb-dep-row\">\n                <div class=\"deb-dep-info\">\n                  <span class=\"deb-dep-name\">{{ dep.targetLabel }}</span>\n                  <span class=\"deb-dep-detail\">{{ dep.description }}</span>\n                </div>\n                <button\n                  mat-stroked-button\n                  type=\"button\"\n                  [matTooltip]=\"ui.text('jumpToField', { field: dep.targetLabel })\"\n                  (click)=\"selectField(dep.targetKey)\"\n                >\n                  <mat-icon>arrow_forward</mat-icon> {{ ui.text('jumpToField', { field: dep.targetLabel }) }}\n                </button>\n              </div>\n            }\n          </div>\n        }\n\n        @if (!incomingDependencies().length && !outgoingDependencies().length) {\n          <p class=\"deb-hint\" data-testid=\"no-field-dependencies\">{{ ui.text('noDependencies') }}</p>\n        }\n      </div>\n    </details>\n\n    <!-- Cross-entity field reference & drift management -->\n    <details class=\"deb-inspector__section\" open>\n      <summary class=\"deb-inspector__summary\">\n        {{ ui.text('sectionReference') }}\n        @if (f.isReferenced) {\n          <span class=\"deb-inspector__count\" data-testid=\"reference-count\">{{ f.referencedEntityKey }}</span>\n        }\n        <mat-icon class=\"deb-inspector__chevron\">expand_more</mat-icon>\n      </summary>\n      <div class=\"deb-inspector__body\">\n        <ngx-referenced-field-config />\n      </div>\n    </details>\n  </div>\n} @else {\n  <div class=\"deb-inspector__empty\">\n    <mat-icon>touch_app</mat-icon>\n    <p>{{ ui.text('inspectorEmpty') }}</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>*{flex:1}.deb-row>.deb-chip{flex:0 0 auto}.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-pattern-box{display:flex;flex-direction:column;gap:8px;margin-top:8px;padding:12px;background:#f8fafc;border:1px solid #e2e8f0;border-radius:8px}.deb-pattern-status{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:6px;font-size:12px;font-weight:600}.deb-pattern-status--match{background:#dcfce7;color:#166534}.deb-pattern-status--no-match{background:#fee2e2;color:#991b1b}.deb-pattern-status--invalid{background:#fef3c7;color:#92400e}.deb-pattern-status--idle,.deb-pattern-status--empty{background:#f1f5f9;color:#334155}.deb-pattern-presets{display:flex;flex-wrap:wrap;gap:4px;align-items:center}.deb-preset-btn{padding:2px 8px;border-radius:4px;border:1px solid #cbd5e1;background:#fff;font-size:11px;color:#334155;cursor:pointer;transition:background .1s ease}.deb-preset-btn:hover{background:#e2e8f0}.deb-dep-list{display:flex;flex-direction:column;gap:6px;margin-top:4px;margin-bottom:12px}.deb-dep-row{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:6px 10px;background:#f8fafc;border:1px solid #e2e8f0;border-radius:6px}.deb-dep-info{display:flex;flex-direction:column;min-width:0}.deb-dep-name{font-size:12px;font-weight:600;color:#0f172a}.deb-dep-detail{font-size:11px;color:#64748b}\n"] }]
         }] });
 
 /**
@@ -3599,12 +3614,18 @@ const GROUP_OF = {
     currency: 'basic',
     email: 'basic',
     password: 'basic',
+    url: 'basic',
+    phone: 'basic',
+    slider: 'basic',
+    color: 'basic',
     dropdown: 'choice',
     radio: 'choice',
     multiSelect: 'choice',
     checkbox: 'choice',
     boolean: 'choice',
     'entity-ref': 'choice',
+    rating: 'choice',
+    tags: 'choice',
     date: 'datetime',
     datetime: 'datetime',
     time: 'datetime',