ngx-dynamic-entity-builder 1.12.0 → 1.13.0

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

@@ -4,7 +4,7 @@ import * as i1 from '@angular/forms';
 import { FormsModule } from '@angular/forms';
 import * as i2 from '@angular/material/button';
 import { MatButtonModule } from '@angular/material/button';
-import * as i2$1 from '@angular/material/card';
+import * as i3$3 from '@angular/material/card';
 import { MatCardModule } from '@angular/material/card';
 import * as i3$2 from '@angular/material/checkbox';
 import { MatCheckboxModule } from '@angular/material/checkbox';
@@ -1586,8 +1586,8 @@ const DEFAULT_BUILDER_TEXT = {
     save: 'Save',
     saveBlockedTooltip: 'Fix the errors in the issue list before saving.',
     /*
-     * The side panels collapse, so each control is named in both directions — and a collapsed
-     * panel leaves a rail whose label is the only word left standing for it.
+     * The panels collapse, so each control is named in both directions — and a collapsed
+     * panel leaves a rail or dock bar whose label is the only word left standing for it.
      */
     collapsePalette: 'Collapse the palette',
     expandPalette: 'Expand the palette',
@@ -1595,6 +1595,13 @@ const DEFAULT_BUILDER_TEXT = {
     expandInspector: 'Expand the inspector',
     paletteRailLabel: 'Add fields',
     inspectorRailLabel: 'Properties',
+    collapseFields: 'Collapse fields',
+    expandFields: 'Expand fields',
+    fieldsRailLabel: 'Fields',
+    collapsePreview: 'Collapse live preview',
+    expandPreview: 'Expand live preview',
+    previewRailLabel: 'Live preview',
+    previewHeading: 'Live preview',
     // Entity settings panel
     entityName: 'Entity name',
     entityNamePlaceholder: 'e.g. clients',
@@ -3934,6 +3941,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
             }] } });
 
 class EntityBuilderCanvasComponent {
+    collapse = new EventEmitter();
     /** Builder chrome, overridable via BUILDER_TEXT. */
     ui = inject(BuilderTextService);
     store = inject(BuilderStore);
@@ -3951,10 +3959,26 @@ class EntityBuilderCanvasComponent {
         this.store.reorderField(event.previousIndex, event.currentIndex, tabId);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: EntityBuilderCanvasComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: EntityBuilderCanvasComponent, isStandalone: true, selector: "ngx-entity-builder-canvas", ngImport: i0, template: `
-    <mat-card class="deb-canvas">
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: EntityBuilderCanvasComponent, isStandalone: true, selector: "ngx-entity-builder-canvas", outputs: { collapse: "collapse" }, ngImport: i0, template: `
+    <mat-card class="deb-card deb-card--canvas">
       <mat-card-header>
-        <mat-card-title>{{ ui.text('fieldsHeading', { count: store.fields().length }) }}</mat-card-title>
+        <mat-card-title class="deb-card__title">
+          <mat-icon class="deb-card__icon">format_list_bulleted</mat-icon>
+          {{ ui.text('fieldsHeading', { count: store.fields().length }) }}
+        </mat-card-title>
+        <button
+          mat-icon-button
+          type="button"
+          class="deb-card__collapse-btn"
+          data-testid="collapse-fields"
+          aria-expanded="true"
+          aria-controls="deb-fields-section"
+          (click)="collapse.emit()"
+          [matTooltip]="ui.text('collapseFields')"
+          [attr.aria-label]="ui.text('collapseFields')"
+        >
+          <mat-icon>keyboard_arrow_up</mat-icon>
+        </button>
       </mat-card-header>
       <mat-card-content>
         @if (store.fields().length === 0) {
@@ -3994,7 +4018,7 @@ class EntityBuilderCanvasComponent {
         }
       </mat-card-content>
     </mat-card>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i1$1.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "ngmodule", type: MatCardModule }, { kind: "component", type: i2$1.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i2$1.MatCardContent, selector: "mat-card-content" }, { kind: "component", type: i2$1.MatCardHeader, selector: "mat-card-header" }, { kind: "directive", type: i2$1.MatCardTitle, selector: "mat-card-title, [mat-card-title], [matCardTitle]" }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: EntityBuilderTreeNodeComponent, selector: "ngx-entity-builder-tree-node", inputs: ["field", "index", "totalCount"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i1$1.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatCardModule }, { kind: "component", type: i3$3.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i3$3.MatCardContent, selector: "mat-card-content" }, { kind: "component", type: i3$3.MatCardHeader, selector: "mat-card-header" }, { kind: "directive", type: i3$3.MatCardTitle, selector: "mat-card-title, [mat-card-title], [matCardTitle]" }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: EntityBuilderTreeNodeComponent, selector: "ngx-entity-builder-tree-node", inputs: ["field", "index", "totalCount"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: EntityBuilderCanvasComponent, decorators: [{
             type: Component,
@@ -4002,11 +4026,35 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     selector: 'ngx-entity-builder-canvas',
                     standalone: true,
-                    imports: [CommonModule, DragDropModule, MatCardModule, MatIconModule, EntityBuilderTreeNodeComponent],
+                    imports: [
+                        CommonModule,
+                        DragDropModule,
+                        MatButtonModule,
+                        MatCardModule,
+                        MatIconModule,
+                        MatTooltipModule,
+                        EntityBuilderTreeNodeComponent,
+                    ],
                     template: `
-    <mat-card class="deb-canvas">
+    <mat-card class="deb-card deb-card--canvas">
       <mat-card-header>
-        <mat-card-title>{{ ui.text('fieldsHeading', { count: store.fields().length }) }}</mat-card-title>
+        <mat-card-title class="deb-card__title">
+          <mat-icon class="deb-card__icon">format_list_bulleted</mat-icon>
+          {{ ui.text('fieldsHeading', { count: store.fields().length }) }}
+        </mat-card-title>
+        <button
+          mat-icon-button
+          type="button"
+          class="deb-card__collapse-btn"
+          data-testid="collapse-fields"
+          aria-expanded="true"
+          aria-controls="deb-fields-section"
+          (click)="collapse.emit()"
+          [matTooltip]="ui.text('collapseFields')"
+          [attr.aria-label]="ui.text('collapseFields')"
+        >
+          <mat-icon>keyboard_arrow_up</mat-icon>
+        </button>
       </mat-card-header>
       <mat-card-content>
         @if (store.fields().length === 0) {
@@ -4048,7 +4096,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
     </mat-card>
   `,
                 }]
-        }] });
+        }], propDecorators: { collapse: [{
+                type: Output
+            }] } });
 
 /** RBAC actions surfaced in the settings panel. */
 const RBAC_ACTIONS = ['view', 'edit', 'delete'];
@@ -4098,21 +4148,30 @@ class EntityBuilderComponent {
     save = new EventEmitter();
     rbacActions = RBAC_ACTIONS;
     /*
-     * Two-way bindable, so the host decides whether a collapsed rail survives a reload.
+     * Two-way bindable, so the host decides whether a collapsed rail/bar survives a reload.
      *
      * `model()` rather than a plain signal: these stay ordinary writable signals to everything
-     * inside the component, and gain `[(leftSidebarOpen)]` for anyone outside it. The library
-     * deliberately persists nothing itself — no package here touches `localStorage`, which is
-     * what keeps it safe to render on a server; the demo wires these to storage to show how.
+     * inside the component, and gain `[(leftSidebarOpen)]`, `[(rightSidebarOpen)]`, `[(fieldsOpen)]`,
+     * `[(previewOpen)]` for anyone outside it. The library deliberately persists nothing itself —
+     * no package here touches `localStorage`, which is what keeps it safe to render on a server;
+     * the demo wires these to storage to show how.
      */
     leftSidebarOpen = model(true, ...(ngDevMode ? [{ debugName: "leftSidebarOpen" }] : /* istanbul ignore next */ []));
     rightSidebarOpen = model(true, ...(ngDevMode ? [{ debugName: "rightSidebarOpen" }] : /* istanbul ignore next */ []));
+    fieldsOpen = model(true, ...(ngDevMode ? [{ debugName: "fieldsOpen" }] : /* istanbul ignore next */ []));
+    previewOpen = model(true, ...(ngDevMode ? [{ debugName: "previewOpen" }] : /* istanbul ignore next */ []));
     toggleLeftSidebar() {
         this.leftSidebarOpen.update(open => !open);
     }
     toggleRightSidebar() {
         this.rightSidebarOpen.update(open => !open);
     }
+    toggleFields() {
+        this.fieldsOpen.update(open => !open);
+    }
+    togglePreview() {
+        this.previewOpen.update(open => !open);
+    }
     /*
      * Collapsing from inside a panel destroys the button that was just pressed, and expanding
      * from a rail destroys the rail. Either way the browser drops focus onto `<body>`, which
@@ -4137,6 +4196,22 @@ class EntityBuilderComponent {
         this.rightSidebarOpen.set(true);
         this.focusAfterRender('collapse-right-sidebar');
     }
+    collapseFields() {
+        this.fieldsOpen.set(false);
+        this.focusAfterRender('expand-fields');
+    }
+    expandFields() {
+        this.fieldsOpen.set(true);
+        this.focusAfterRender('collapse-fields');
+    }
+    collapsePreview() {
+        this.previewOpen.set(false);
+        this.focusAfterRender('expand-preview');
+    }
+    expandPreview() {
+        this.previewOpen.set(true);
+        this.focusAfterRender('collapse-preview');
+    }
     /** The replacement control does not exist until the template has caught up with the signal. */
     focusAfterRender(testId) {
         setTimeout(() => {
@@ -4229,7 +4304,7 @@ class EntityBuilderComponent {
         this.store.setPermission(action, roles);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: EntityBuilderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: EntityBuilderComponent, isStandalone: true, selector: "ngx-entity-builder", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: false, isRequired: false, transformFunction: null }, languages: { classPropertyName: "languages", publicName: "languages", isSignal: false, isRequired: false, transformFunction: null }, uiLanguage: { classPropertyName: "uiLanguage", publicName: "uiLanguage", isSignal: false, isRequired: false, transformFunction: null }, availableRoles: { classPropertyName: "availableRoles", publicName: "availableRoles", isSignal: false, isRequired: false, transformFunction: null }, userRoles: { classPropertyName: "userRoles", publicName: "userRoles", isSignal: false, isRequired: false, transformFunction: null }, commonModules: { classPropertyName: "commonModules", publicName: "commonModules", isSignal: false, isRequired: false, transformFunction: null }, leftSidebarOpen: { classPropertyName: "leftSidebarOpen", publicName: "leftSidebarOpen", isSignal: true, isRequired: false, transformFunction: null }, rightSidebarOpen: { classPropertyName: "rightSidebarOpen", publicName: "rightSidebarOpen", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { configChange: "configChange", save: "save", leftSidebarOpen: "leftSidebarOpenChange", rightSidebarOpen: "rightSidebarOpenChange" }, host: { listeners: { "document:keydown": "onKeydown($event)" } }, providers: [BuilderStore], usesOnChanges: true, ngImport: i0, template: "<mat-toolbar class=\"deb-toolbar\">\n  <button\n    mat-icon-button\n    type=\"button\"\n    data-testid=\"toggle-left-sidebar\"\n    class=\"deb-sidebar-toggle-btn\"\n    [class.deb-sidebar-toggle-btn--active]=\"leftSidebarOpen()\"\n    [attr.aria-expanded]=\"leftSidebarOpen()\"\n    aria-controls=\"deb-left-sidebar\"\n    (click)=\"toggleLeftSidebar()\"\n    [matTooltip]=\"leftSidebarOpen() ? ui.text('collapsePalette') : ui.text('expandPalette')\"\n    [attr.aria-label]=\"leftSidebarOpen() ? ui.text('collapsePalette') : ui.text('expandPalette')\"\n  >\n    <mat-icon>{{ leftSidebarOpen() ? 'menu_open' : 'menu' }}</mat-icon>\n  </button>\n\n  <mat-icon class=\"deb-toolbar__mark\">dashboard_customize</mat-icon>\n  <span class=\"deb-toolbar__title\">{{ ui.text('builderTitle') }}</span>\n  <span class=\"deb-toolbar__entity\" data-testid=\"builder-toolbar-entity\">{{ store.config().entity || '\u2014' }}</span>\n  <span class=\"deb-spacer\"></span>\n\n  <!--\n    The issue count, and the issues.\n    It used to be a button labelled \"0 / 1\" whose tooltip said to hover the items in the list\n    \u2014 a list that did not exist anywhere in the builder. The count now opens the problems\n    themselves, and an entry that names a field selects it, which is the action the person\n    reading the message wants to take next.\n  -->\n  @if (store.problems().length) {\n    <button\n      mat-button\n      type=\"button\"\n      class=\"deb-problems\"\n      data-testid=\"builder-problems\"\n      [class.deb-problems--error]=\"!store.isValid()\"\n      [matMenuTriggerFor]=\"problemsMenu\"\n      [matTooltip]=\"ui.text('issuesTooltip', { count: store.problems().length })\"\n    >\n      <mat-icon>{{ store.isValid() ? 'warning' : 'error' }}</mat-icon>\n      {{ ui.text('issuesCount', { errors: store.errors().length, total: store.problems().length }) }}\n    </button>\n    <mat-menu #problemsMenu=\"matMenu\" class=\"deb-problems-menu\">\n      @for (problem of store.problems(); track $index) {\n        <button\n          mat-menu-item\n          type=\"button\"\n          data-testid=\"builder-problem\"\n          [disabled]=\"!problem.fieldId\"\n          (click)=\"selectProblemField(problem)\"\n        >\n          <mat-icon [class.deb-problems--error]=\"problem.level === 'error'\">{{\n            problem.level === 'error' ? 'error' : 'warning'\n          }}</mat-icon>\n          <span class=\"deb-problems-menu__text\">{{ problem.message }}</span>\n        </button>\n      }\n    </mat-menu>\n  }\n\n  <button\n    mat-icon-button\n    type=\"button\"\n    data-testid=\"builder-undo\"\n    [disabled]=\"!store.canUndo()\"\n    (click)=\"store.undo()\"\n    [matTooltip]=\"ui.text('undoTooltip')\"\n    [attr.aria-label]=\"ui.text('undo')\"\n  >\n    <mat-icon>undo</mat-icon>\n  </button>\n  <button\n    mat-icon-button\n    type=\"button\"\n    data-testid=\"builder-redo\"\n    [disabled]=\"!store.canRedo()\"\n    (click)=\"store.redo()\"\n    [matTooltip]=\"ui.text('redoTooltip')\"\n    [attr.aria-label]=\"ui.text('redo')\"\n  >\n    <mat-icon>redo</mat-icon>\n  </button>\n\n  <button\n    mat-button\n    type=\"button\"\n    (click)=\"copyJson()\"\n    [matTooltip]=\"ui.text('copyJson')\"\n    [attr.aria-label]=\"ui.text('copyJson')\"\n  >\n    <mat-icon>content_copy</mat-icon>\n    <!-- The label goes on a narrow screen; the tooltip and aria-label above carry the name. -->\n    <span class=\"deb-toolbar__btn-label\">{{ ui.text('copyJson') }}</span>\n  </button>\n\n  <button\n    mat-icon-button\n    type=\"button\"\n    data-testid=\"toggle-right-sidebar\"\n    class=\"deb-sidebar-toggle-btn\"\n    [class.deb-sidebar-toggle-btn--active]=\"rightSidebarOpen()\"\n    [attr.aria-expanded]=\"rightSidebarOpen()\"\n    aria-controls=\"deb-right-sidebar\"\n    (click)=\"toggleRightSidebar()\"\n    [matTooltip]=\"rightSidebarOpen() ? ui.text('collapseInspector') : ui.text('expandInspector')\"\n    [attr.aria-label]=\"rightSidebarOpen() ? ui.text('collapseInspector') : ui.text('expandInspector')\"\n  >\n    <mat-icon>{{ rightSidebarOpen() ? 'vertical_split' : 'tune' }}</mat-icon>\n  </button>\n\n  <!--\n    The tooltip sits on a wrapper, not on the button.\n\n    A disabled button receives no pointer events, so a tooltip bound to it never fires \u2014 which\n    is the one state where the explanation is worth having. Saving stays disabled here (unlike\n    the renderer's Save, which refuses instead): an invalid *schema* is not something the\n    author can be shown their way out of one field at a time, and the issue list beside this\n    button is where that conversation happens.\n  -->\n  <span [matTooltip]=\"store.isValid() ? '' : ui.text('saveBlockedTooltip')\" [matTooltipDisabled]=\"store.isValid()\">\n    <!-- primary, not accent: white on Material's default pink accent is 3.33:1, below AA. -->\n    <button mat-flat-button color=\"primary\" type=\"button\" [disabled]=\"!store.isValid()\" (click)=\"doSave()\">\n      <mat-icon>save</mat-icon> {{ ui.text('save') }}\n    </button>\n  </span>\n</mat-toolbar>\n\n<div\n  class=\"deb-body\"\n  [class.deb-body--left-collapsed]=\"!leftSidebarOpen()\"\n  [class.deb-body--right-collapsed]=\"!rightSidebarOpen()\"\n>\n  <!-- Collapsed left sidebar: the rail that brings it back. -->\n  @if (!leftSidebarOpen()) {\n    <button\n      type=\"button\"\n      class=\"deb-dock-btn deb-dock-btn--left\"\n      data-testid=\"expand-left-sidebar\"\n      aria-expanded=\"false\"\n      aria-controls=\"deb-left-sidebar\"\n      (click)=\"expandLeft()\"\n      [matTooltip]=\"ui.text('expandPalette')\"\n      [attr.aria-label]=\"ui.text('expandPalette')\"\n    >\n      <!--\n        The card's own icon, not its name turned on its side. A 44px rail can only hold a\n        label by rotating it, and a rotated word is one you have to tilt your head to read \u2014\n        worse in German, where \"Eigenschaften\" is half a screen tall. The tooltip and the\n        accessible name carry the words; the label below returns when the rail lies flat.\n      -->\n      <mat-icon class=\"deb-dock-btn__icon\">add_circle_outline</mat-icon>\n      <span class=\"deb-dock-btn__label\">{{ ui.text('paletteRailLabel') }}</span>\n      <mat-icon class=\"deb-dock-btn__chevron\">chevron_right</mat-icon>\n    </button>\n  }\n\n  <!-- \u2500\u2500\u2500 Left: settings, palette, tabs \u2500\u2500\u2500 -->\n  <div\n    id=\"deb-left-sidebar\"\n    class=\"deb-col deb-col--left\"\n    data-testid=\"builder-left-sidebar\"\n    [hidden]=\"!leftSidebarOpen()\"\n  >\n    <mat-card class=\"deb-card deb-card--palette\">\n      <mat-card-header>\n        <mat-card-title class=\"deb-card__title\">\n          <mat-icon class=\"deb-card__icon\">add_circle_outline</mat-icon>\n          {{ ui.text('addField') }}\n        </mat-card-title>\n        <button\n          mat-icon-button\n          type=\"button\"\n          class=\"deb-card__collapse-btn\"\n          data-testid=\"collapse-left-sidebar\"\n          aria-expanded=\"true\"\n          aria-controls=\"deb-left-sidebar\"\n          (click)=\"collapseLeft()\"\n          [matTooltip]=\"ui.text('collapsePalette')\"\n          [attr.aria-label]=\"ui.text('collapsePalette')\"\n        >\n          <mat-icon>chevron_left</mat-icon>\n        </button>\n      </mat-card-header>\n      <mat-card-content>\n        <ngx-field-palette (pick)=\"store.addField($event)\"></ngx-field-palette>\n      </mat-card-content>\n    </mat-card>\n\n    <mat-card class=\"deb-card deb-card--settings\">\n      <mat-card-header>\n        <mat-card-title class=\"deb-card__title\">\n          <mat-icon class=\"deb-card__icon\">tune</mat-icon>\n          {{ store.config().entity || ui.text('entityName') }}\n        </mat-card-title>\n      </mat-card-header>\n      <mat-card-content>\n        <div class=\"deb-settings-grid\">\n          <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"deb-full\">\n            <mat-label>{{ ui.text('entityName') }}</mat-label>\n            <input\n              matInput\n              [ngModel]=\"store.config().entity\"\n              (ngModelChange)=\"store.setEntityName($event)\"\n              [placeholder]=\"ui.text('entityNamePlaceholder')\"\n            />\n          </mat-form-field>\n\n          <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"deb-full\">\n            <mat-label>{{ ui.text('editingLanguage') }}</mat-label>\n            <mat-select\n              data-testid=\"builder-editing-language\"\n              [ngModel]=\"store.activeLanguage()\"\n              (ngModelChange)=\"store.setActiveLanguage($event)\"\n            >\n              @for (l of languages; track l) {\n                <mat-option [value]=\"l\">{{ l }}</mat-option>\n              }\n            </mat-select>\n          </mat-form-field>\n        </div>\n\n        <div class=\"deb-mask-row\">\n          <mat-slide-toggle\n            color=\"primary\"\n            [ngModel]=\"store.config().maskData ?? false\"\n            (ngModelChange)=\"store.setMaskData($event)\"\n            >{{ ui.text('maskEntity') }}</mat-slide-toggle\n          >\n        </div>\n\n        <mat-expansion-panel class=\"deb-rbac\">\n          <mat-expansion-panel-header>\n            <mat-panel-title>{{ ui.text('permissions') }}</mat-panel-title>\n          </mat-expansion-panel-header>\n          @for (action of rbacActions; track action) {\n            @if (availableRoles.length) {\n              <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"deb-full\">\n                <mat-label>{{ ui.text('actionRoles', { action }) }}</mat-label>\n                <mat-select multiple [ngModel]=\"rolesFor(action)\" (ngModelChange)=\"setRoles(action, $event)\">\n                  @for (role of availableRoles; track role) {\n                    <mat-option [value]=\"role\">{{ role }}</mat-option>\n                  }\n                </mat-select>\n              </mat-form-field>\n            } @else {\n              <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"deb-full\">\n                <mat-label>{{ ui.text('actionRolesPlaceholder', { action }) }}</mat-label>\n                <input matInput [ngModel]=\"rolesFor(action).join(', ')\" (ngModelChange)=\"setRolesFromText(action, $event)\" />\n              </mat-form-field>\n            }\n          }\n          <p class=\"deb-hint\">{{ ui.text('permissionsHint') }}</p>\n        </mat-expansion-panel>\n      </mat-card-content>\n    </mat-card>\n\n    <mat-card class=\"deb-card deb-card--tabs\">\n      <mat-card-content>\n        <ngx-tab-manager></ngx-tab-manager>\n      </mat-card-content>\n    </mat-card>\n  </div>\n\n  <!-- \u2500\u2500\u2500 Center: field canvas, then what it renders as \u2500\u2500\u2500 -->\n  <div class=\"deb-col deb-col--center\" data-testid=\"builder-canvas-column\">\n    <ngx-entity-builder-canvas />\n\n    <!--\n      The live preview, moved up from the footer.\n      It used to sit below a collapsed JSON accordion at the very bottom of the page \u2014 around\n      1500px under the canvas on a fresh builder \u2014 so the one thing that tells an author what\n      they are building was never on screen while they built it. Directly under the field list\n      is where a change and its effect can be seen in the same glance.\n    -->\n    <div class=\"deb-preview-slot\">\n      <ng-content select=\"[ngxBuilderPreview]\"></ng-content>\n    </div>\n  </div>\n\n  <!-- Collapsed right sidebar: the rail that brings it back. -->\n  @if (!rightSidebarOpen()) {\n    <button\n      type=\"button\"\n      class=\"deb-dock-btn deb-dock-btn--right\"\n      data-testid=\"expand-right-sidebar\"\n      aria-expanded=\"false\"\n      aria-controls=\"deb-right-sidebar\"\n      (click)=\"expandRight()\"\n      [matTooltip]=\"ui.text('expandInspector')\"\n      [attr.aria-label]=\"ui.text('expandInspector')\"\n    >\n      <mat-icon class=\"deb-dock-btn__icon\">tune</mat-icon>\n      <span class=\"deb-dock-btn__label\">{{ ui.text('inspectorRailLabel') }}</span>\n      <mat-icon class=\"deb-dock-btn__chevron\">chevron_left</mat-icon>\n    </button>\n  }\n\n  <!-- \u2500\u2500\u2500 Right: inspector \u2500\u2500\u2500 -->\n  <div\n    id=\"deb-right-sidebar\"\n    class=\"deb-col deb-col--right\"\n    data-testid=\"builder-right-sidebar\"\n    [hidden]=\"!rightSidebarOpen()\"\n  >\n    <mat-card class=\"deb-card deb-card--inspector\">\n      <mat-card-header>\n        <mat-card-title class=\"deb-card__title\">\n          <mat-icon class=\"deb-card__icon\">tune</mat-icon>\n          {{ ui.text('fieldProperties') }}\n        </mat-card-title>\n        <button\n          mat-icon-button\n          type=\"button\"\n          class=\"deb-card__collapse-btn\"\n          data-testid=\"collapse-right-sidebar\"\n          aria-expanded=\"true\"\n          aria-controls=\"deb-right-sidebar\"\n          (click)=\"collapseRight()\"\n          [matTooltip]=\"ui.text('collapseInspector')\"\n          [attr.aria-label]=\"ui.text('collapseInspector')\"\n        >\n          <mat-icon>chevron_right</mat-icon>\n        </button>\n      </mat-card-header>\n      <mat-card-content>\n        <ngx-field-inspector></ngx-field-inspector>\n      </mat-card-content>\n    </mat-card>\n  </div>\n</div>\n\n<!-- \u2500\u2500\u2500 Footer: the exported JSON \u2500\u2500\u2500 -->\n<div class=\"deb-footer\">\n  <mat-expansion-panel>\n    <mat-expansion-panel-header>\n      <mat-panel-title><mat-icon>data_object</mat-icon>&nbsp;{{ ui.text('configJson') }}</mat-panel-title>\n    </mat-expansion-panel-header>\n    <pre class=\"deb-json\">{{ json }}</pre>\n  </mat-expansion-panel>\n</div>\n", styles: ["ngx-entity-builder{--deb-accent: #6366f1;--deb-accent-hover: #4f46e5;--deb-accent-ink: #4f46e5;--deb-accent-soft: #eef2ff;--deb-border: #e2e8f0;--deb-muted: #64748b;--deb-surface: #ffffff;--deb-rail: 44px;--deb-left: clamp(320px, 26vw, 460px);--deb-right: 380px;--deb-left-wide: calc(var(--deb-left) + var(--deb-right) - var(--deb-rail));--deb-toolbar-h: 56px;--deb-sticky-top: calc(var(--deb-toolbar-h) + 20px);display:block}.deb-toolbar{background:var(--deb-surface);color:#0f172a;border-bottom:1px solid var(--deb-border);gap:4px;height:var(--deb-toolbar-h);position:sticky;top:0;z-index:20;flex-wrap:wrap;padding-block:4px}mat-toolbar.deb-toolbar{height:auto;min-height:var(--deb-toolbar-h)}.deb-toolbar__mark{color:var(--deb-accent-ink)}.deb-toolbar__title{margin-left:8px;font-family:var(--font-heading, sans-serif);font-size:15px;font-weight:700;color:#0f172a}.deb-toolbar__entity{margin-left:10px;padding:3px 10px;border-radius:9999px;background:var(--deb-accent-soft);color:var(--deb-accent-hover);font-family:ui-monospace,SFMono-Regular,monospace;font-size:12px;font-weight:600;max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.deb-spacer{flex:1 1 auto}.deb-problems{font-weight:600}.deb-problems--error{color:#ef4444;font-weight:600}.deb-problems-menu__text{white-space:normal;line-height:1.35;padding:6px 0}.deb-problems-menu .mat-mdc-menu-item{height:auto;min-height:40px}.deb-problems-menu{max-width:460px}.deb-full{width:100%}.deb-grow{flex:1}.deb-row{display:flex;gap:8px;align-items:center}.deb-row--split{justify-content:space-between}.deb-section-title{font-family:var(--font-heading, sans-serif);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--deb-muted)}.deb-hint{margin:4px 0 0;font-size:12px;color:var(--deb-muted)}.deb-chip{display:inline-block;padding:3px 10px;border-radius:9999px;background:var(--deb-accent-soft);color:var(--deb-accent-hover);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.03em}.deb-chip--muted{background:#f1f5f9;color:var(--deb-muted)}.deb-body{display:grid;grid-template-columns:var(--deb-left) minmax(0,1fr) var(--deb-right);gap:24px;padding:24px;align-items:start;transition:grid-template-columns .25s cubic-bezier(.16,1,.3,1)}.deb-body.deb-body--left-collapsed{grid-template-columns:var(--deb-rail) minmax(0,1fr) var(--deb-right)}.deb-body.deb-body--right-collapsed{grid-template-columns:var(--deb-left-wide) minmax(0,1fr) var(--deb-rail)}.deb-body.deb-body--left-collapsed.deb-body--right-collapsed{grid-template-columns:var(--deb-rail) minmax(0,1fr) var(--deb-rail)}.deb-col{display:flex;flex-direction:column;gap:18px;min-width:0}.deb-col[hidden]{display:none}.deb-col>.deb-card{flex:0 0 auto}@media(prefers-reduced-motion:reduce){.deb-body,.deb-col--left,.deb-col--right,.deb-dock-btn,.deb-card{transition:none!important}}.deb-col--left,.deb-col--right{position:sticky;top:var(--deb-sticky-top);max-height:calc(100vh - var(--deb-sticky-top) - 20px);overflow-y:auto;padding-right:4px;transition:opacity .2s ease}.deb-card{border-radius:12px!important;border:1px solid var(--deb-border, #e2e8f0)!important;background:var(--deb-surface, #ffffff)!important;box-shadow:0 1px 3px #00000008,0 1px 2px #00000005!important;transition:box-shadow .2s ease,border-color .2s ease!important;overflow:hidden}.deb-card:hover{border-color:#cbd5e1!important;box-shadow:0 4px 12px #0f172a0d!important}.deb-card mat-card-header{padding:14px 16px 10px!important;display:flex!important;align-items:center!important}.deb-card mat-card-content{padding:0 16px 16px!important}.deb-card__title{display:flex!important;align-items:center!important;gap:8px!important;font-family:var(--font-heading, sans-serif)!important;font-size:13.5px!important;font-weight:700!important;color:#0f172a!important;margin:0!important}.deb-card__icon{color:var(--deb-accent-ink, #4f46e5)!important;font-size:18px!important;width:18px!important;height:18px!important;flex:none!important}.deb-card__collapse-btn{margin-left:auto!important;width:32px!important;height:32px!important;color:var(--deb-muted, #64748b)!important;display:inline-flex!important;align-items:center!important;justify-content:center!important}.deb-card__collapse-btn:hover{color:#0f172a!important;background:#f1f5f9!important}.deb-sidebar-toggle-btn{color:var(--deb-muted, #64748b);transition:all .15s ease}.deb-sidebar-toggle-btn:hover{color:#0f172a;background:#f1f5f9}.deb-sidebar-toggle-btn--active{color:var(--deb-accent-ink, #4f46e5)!important;background:var(--deb-accent-soft, #eef2ff)!important}.deb-dock-btn{position:sticky;top:var(--deb-sticky-top);align-self:start;justify-self:center;z-index:10;display:inline-flex;flex-direction:column;align-items:center;gap:10px;width:36px;padding:12px 0;border-radius:9999px;border:1px solid #c7d2fe;background:#fff;color:var(--deb-accent-hover, #4f46e5);font-family:var(--font-heading, sans-serif);font-size:12px;font-weight:700;box-shadow:0 4px 14px #6366f126;cursor:pointer;transition:background .2s ease,border-color .2s ease,box-shadow .2s ease}.deb-dock-btn:hover{background:var(--deb-accent-soft, #eef2ff);border-color:var(--deb-accent, #6366f1);box-shadow:0 6px 20px #6366f140}.deb-dock-btn mat-icon{flex:none}.deb-dock-btn__icon{font-size:20px;width:20px;height:20px;color:var(--deb-accent-ink, #4f46e5)}.deb-dock-btn__chevron{font-size:16px;width:16px;height:16px;opacity:.75}.deb-dock-btn__label{display:none;letter-spacing:.04em;white-space:nowrap}.deb-settings-grid{display:grid;grid-template-columns:1.4fr 1fr;gap:8px;margin-bottom:6px}.deb-mask-row{padding:4px 0 8px}.deb-preview-slot:empty{display:none}@media(max-width:1300px){ngx-entity-builder{--deb-left: clamp(280px, 28vw, 340px)}.deb-body{grid-template-columns:var(--deb-left) minmax(0,1fr)}.deb-body.deb-body--right-collapsed{grid-template-columns:var(--deb-left) minmax(0,1fr) var(--deb-rail)}.deb-body.deb-body--left-collapsed{grid-template-columns:var(--deb-rail) minmax(0,1fr)}.deb-body.deb-body--left-collapsed.deb-body--right-collapsed{grid-template-columns:var(--deb-rail) minmax(0,1fr) var(--deb-rail)}.deb-col--right{grid-column:2;position:static;max-height:none;overflow:visible}}@media(max-width:900px){ngx-entity-builder{--deb-rail: 36px}.deb-body{gap:12px;padding:12px;grid-template-columns:minmax(0,1fr)}.deb-body.deb-body--left-collapsed,.deb-body.deb-body--right-collapsed,.deb-body.deb-body--left-collapsed.deb-body--right-collapsed{grid-template-columns:minmax(0,1fr)}.deb-col--left,.deb-col--right,.deb-dock-btn--left,.deb-dock-btn--right{grid-column:1;position:static;max-height:none;overflow:visible}.deb-dock-btn--left,.deb-dock-btn--right{flex-direction:row;justify-content:center;width:auto;justify-self:stretch;padding:10px 16px}.deb-dock-btn__label{display:inline}}@media(max-width:900px){.deb-toolbar__title,.deb-toolbar__mark{display:none}}@media(max-width:560px){.deb-toolbar__btn-label{display:none}}.deb-canvas__group{margin:14px 0 6px;font-family:var(--font-heading, sans-serif);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--deb-muted)}.deb-canvas__group:first-of-type{margin-top:0}.deb-field-list{display:flex;flex-direction:column;gap:8px}.deb-field-list:empty{min-height:44px;border:1px dashed var(--deb-border);border-radius:10px}.deb-field-row{display:flex;align-items:center;gap:10px;padding:9px 12px;border:1px solid var(--deb-border);border-radius:10px;background:var(--deb-surface);cursor:pointer;box-shadow:0 1px 3px #00000008;transition:all .18s cubic-bezier(.16,1,.3,1)}.deb-field-row:hover{border-color:#a5b4fc;background:#fcfaff;transform:translateY(-1px);box-shadow:0 4px 12px #6366f114}.deb-field-row--active{border-color:var(--deb-accent);border-left:4px solid var(--deb-accent);background:#f5f3ff;box-shadow:0 4px 16px #6366f12e}.deb-field-row__actions{display:flex;align-items:center;margin-left:auto;opacity:0;transition:opacity .15s ease}.deb-field-row:hover .deb-field-row__actions,.deb-field-row:focus-within .deb-field-row__actions,.deb-field-row--active .deb-field-row__actions{opacity:1}@media(hover:none){.deb-field-row__actions{opacity:1}}@media(max-width:560px){.deb-field-row{flex-wrap:wrap;row-gap:4px}.deb-field-row__actions{margin-left:auto}}.deb-type-badge{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;padding:2px 7px;border-radius:6px;background:#e0e7ff;color:#4338ca;flex:none}.deb-span-badge{font-size:10px;font-weight:700;padding:2px 7px;border-radius:6px;background:#f1f5f9;color:#475569;font-family:ui-monospace,SFMono-Regular,monospace;flex:none}.deb-drag-handle{cursor:grab;color:#7d8a9c;transition:color .15s;flex:none}.deb-drag-handle:hover{color:var(--deb-accent-ink)}.deb-field-type{color:var(--deb-accent-ink);flex:none}.deb-field-meta{display:flex;flex-direction:column;min-width:0;flex:1}.deb-field-label{font-family:var(--font-heading, sans-serif);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#0f172a;font-size:14px}.deb-field-id{font-size:11px;color:var(--deb-muted);font-family:ui-monospace,SFMono-Regular,monospace}.deb-req{color:#dc2626;font-weight:700;flex:none}.deb-empty,.deb-inspector__empty{text-align:center;color:var(--deb-muted);padding:40px 16px}.deb-empty mat-icon{transform:scale(1.8);margin-bottom:16px;color:#cbd5e1}.cdk-drag-preview.deb-field-row{box-shadow:0 12px 28px #4f46e538;border-radius:10px;border:1px solid var(--deb-accent, #6366f1);background:#fff}.cdk-drag-placeholder.deb-field-row{opacity:.35}.cdk-drag-animating.deb-field-row{transition:transform .2s cubic-bezier(0,0,.2,1)}.deb-field-list.cdk-drop-list-dragging .deb-field-row:not(.cdk-drag-placeholder){transition:transform .2s cubic-bezier(0,0,.2,1)}@media(prefers-reduced-motion:reduce){.deb-field-row,.deb-field-row__actions,.cdk-drag-animating.deb-field-row,.deb-field-list.cdk-drop-list-dragging .deb-field-row:not(.cdk-drag-placeholder){transition:none}.deb-field-row:hover{transform:none}}.deb-inspector{display:flex;flex-direction:column;gap:12px}.deb-inspector__section{border:1px solid var(--deb-border);border-radius:10px;overflow:hidden;background:var(--deb-surface)}.deb-inspector__summary{display:flex;align-items:center;gap:8px;width:100%;padding:10px 12px;cursor:pointer;list-style:none;font-family:var(--font-heading, sans-serif);font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--deb-muted);background:#f8fafc;-webkit-user-select:none;user-select:none}.deb-inspector__summary::-webkit-details-marker{display:none}.deb-inspector__summary:hover{color:#0f172a}.deb-inspector__summary:focus-visible{outline:2px solid var(--deb-accent);outline-offset:-2px}.deb-inspector__chevron{margin-left:auto;transition:transform .18s ease;color:#7d8a9c;font-size:20px;width:20px;height:20px}.deb-inspector__section[open]>.deb-inspector__summary>.deb-inspector__chevron{transform:rotate(180deg)}.deb-inspector__count{padding:1px 7px;border-radius:9999px;background:var(--deb-accent-soft);color:var(--deb-accent-hover);font-size:10px;font-weight:700;letter-spacing:0}.deb-inspector__body{display:flex;flex-direction:column;gap:10px;padding:12px;border-top:1px solid var(--deb-border)}@media(prefers-reduced-motion:reduce){.deb-inspector__chevron{transition:none}}.deb-span-picker{display:flex;gap:4px;flex-wrap:wrap}.deb-span-picker__btn{appearance:none;cursor:pointer;flex:1;min-width:46px;padding:7px 4px;border:1px solid var(--deb-border);border-radius:8px;background:var(--deb-surface);color:var(--deb-muted);font:inherit;font-size:12px;font-weight:700;transition:border-color .15s ease,background .15s ease,color .15s ease}.deb-span-picker__btn:hover{border-color:#a5b4fc;color:#0f172a}.deb-span-picker__btn:focus-visible{outline:2px solid var(--deb-accent);outline-offset:2px}.deb-span-picker__btn--active{border-color:var(--deb-accent);background:var(--deb-accent-soft);color:var(--deb-accent-hover)}.deb-option-row{display:flex;align-items:center;gap:8px}.deb-flags-row{display:flex;gap:16px;flex-wrap:wrap;padding:2px 0 6px}.deb-param-validators-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}.deb-toggles{display:flex;flex-direction:column;gap:6px}.deb-toggles mat-slide-toggle{display:flex;justify-content:space-between;width:100%;padding:5px 8px;border-radius:8px;background:#f8fafc;border:1px solid #f1f5f9;transition:all .15s ease}.deb-toggles mat-slide-toggle:hover{background:#f1f5f9;border-color:#e2e8f0}@media(prefers-reduced-motion:reduce){.deb-span-picker__btn{transition:none}}.deb-footer{padding:0 20px 20px;display:flex;flex-direction:column;gap:16px}.deb-json{margin:0;max-height:320px;overflow:auto;font-family:ui-monospace,SFMono-Regular,monospace;font-size:12px;line-height:1.5;padding:14px;background:#0f172a;color:#e2e8f0;border-radius:10px}.deb-path-hint{color:#0000008c;font-size:11px;margin-left:6px}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatCardModule }, { kind: "component", type: i2$1.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i2$1.MatCardContent, selector: "mat-card-content" }, { kind: "component", type: i2$1.MatCardHeader, selector: "mat-card-header" }, { kind: "directive", type: i2$1.MatCardTitle, selector: "mat-card-title, [mat-card-title], [matCardTitle]" }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "ngmodule", type: MatExpansionModule }, { kind: "component", type: i4$2.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i4$2.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["expandedHeight", "collapsedHeight", "tabIndex"] }, { kind: "directive", type: i4$2.MatExpansionPanelTitle, selector: "mat-panel-title" }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i5.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: MatMenuModule }, { kind: "component", type: i8.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i8.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i8.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { 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: MatToolbarModule }, { kind: "component", type: i11.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: FieldPaletteComponent, selector: "ngx-field-palette", outputs: ["pick"] }, { kind: "component", type: TabManagerComponent, selector: "ngx-tab-manager" }, { kind: "component", type: FieldInspectorComponent, selector: "ngx-field-inspector" }, { kind: "component", type: EntityBuilderCanvasComponent, selector: "ngx-entity-builder-canvas" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: EntityBuilderComponent, isStandalone: true, selector: "ngx-entity-builder", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: false, isRequired: false, transformFunction: null }, languages: { classPropertyName: "languages", publicName: "languages", isSignal: false, isRequired: false, transformFunction: null }, uiLanguage: { classPropertyName: "uiLanguage", publicName: "uiLanguage", isSignal: false, isRequired: false, transformFunction: null }, availableRoles: { classPropertyName: "availableRoles", publicName: "availableRoles", isSignal: false, isRequired: false, transformFunction: null }, userRoles: { classPropertyName: "userRoles", publicName: "userRoles", isSignal: false, isRequired: false, transformFunction: null }, commonModules: { classPropertyName: "commonModules", publicName: "commonModules", isSignal: false, isRequired: false, transformFunction: null }, leftSidebarOpen: { classPropertyName: "leftSidebarOpen", publicName: "leftSidebarOpen", isSignal: true, isRequired: false, transformFunction: null }, rightSidebarOpen: { classPropertyName: "rightSidebarOpen", publicName: "rightSidebarOpen", isSignal: true, isRequired: false, transformFunction: null }, fieldsOpen: { classPropertyName: "fieldsOpen", publicName: "fieldsOpen", isSignal: true, isRequired: false, transformFunction: null }, previewOpen: { classPropertyName: "previewOpen", publicName: "previewOpen", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { configChange: "configChange", save: "save", leftSidebarOpen: "leftSidebarOpenChange", rightSidebarOpen: "rightSidebarOpenChange", fieldsOpen: "fieldsOpenChange", previewOpen: "previewOpenChange" }, host: { listeners: { "document:keydown": "onKeydown($event)" } }, providers: [BuilderStore], usesOnChanges: true, ngImport: i0, template: "<mat-toolbar class=\"deb-toolbar\">\n  <button\n    mat-icon-button\n    type=\"button\"\n    data-testid=\"toggle-left-sidebar\"\n    class=\"deb-sidebar-toggle-btn\"\n    [class.deb-sidebar-toggle-btn--active]=\"leftSidebarOpen()\"\n    [attr.aria-expanded]=\"leftSidebarOpen()\"\n    aria-controls=\"deb-left-sidebar\"\n    (click)=\"toggleLeftSidebar()\"\n    [matTooltip]=\"leftSidebarOpen() ? ui.text('collapsePalette') : ui.text('expandPalette')\"\n    [attr.aria-label]=\"leftSidebarOpen() ? ui.text('collapsePalette') : ui.text('expandPalette')\"\n  >\n    <mat-icon>{{ leftSidebarOpen() ? 'menu_open' : 'menu' }}</mat-icon>\n  </button>\n\n  <mat-icon class=\"deb-toolbar__mark\">dashboard_customize</mat-icon>\n  <span class=\"deb-toolbar__title\">{{ ui.text('builderTitle') }}</span>\n  <span class=\"deb-toolbar__entity\" data-testid=\"builder-toolbar-entity\">{{ store.config().entity || '\u2014' }}</span>\n  <span class=\"deb-spacer\"></span>\n\n  <!--\n    The issue count, and the issues.\n    It used to be a button labelled \"0 / 1\" whose tooltip said to hover the items in the list\n    \u2014 a list that did not exist anywhere in the builder. The count now opens the problems\n    themselves, and an entry that names a field selects it, which is the action the person\n    reading the message wants to take next.\n  -->\n  @if (store.problems().length) {\n    <button\n      mat-button\n      type=\"button\"\n      class=\"deb-problems\"\n      data-testid=\"builder-problems\"\n      [class.deb-problems--error]=\"!store.isValid()\"\n      [matMenuTriggerFor]=\"problemsMenu\"\n      [matTooltip]=\"ui.text('issuesTooltip', { count: store.problems().length })\"\n    >\n      <mat-icon>{{ store.isValid() ? 'warning' : 'error' }}</mat-icon>\n      {{ ui.text('issuesCount', { errors: store.errors().length, total: store.problems().length }) }}\n    </button>\n    <mat-menu #problemsMenu=\"matMenu\" class=\"deb-problems-menu\">\n      @for (problem of store.problems(); track $index) {\n        <button\n          mat-menu-item\n          type=\"button\"\n          data-testid=\"builder-problem\"\n          [disabled]=\"!problem.fieldId\"\n          (click)=\"selectProblemField(problem)\"\n        >\n          <mat-icon [class.deb-problems--error]=\"problem.level === 'error'\">{{\n            problem.level === 'error' ? 'error' : 'warning'\n          }}</mat-icon>\n          <span class=\"deb-problems-menu__text\">{{ problem.message }}</span>\n        </button>\n      }\n    </mat-menu>\n  }\n\n  <button\n    mat-icon-button\n    type=\"button\"\n    data-testid=\"builder-undo\"\n    [disabled]=\"!store.canUndo()\"\n    (click)=\"store.undo()\"\n    [matTooltip]=\"ui.text('undoTooltip')\"\n    [attr.aria-label]=\"ui.text('undo')\"\n  >\n    <mat-icon>undo</mat-icon>\n  </button>\n  <button\n    mat-icon-button\n    type=\"button\"\n    data-testid=\"builder-redo\"\n    [disabled]=\"!store.canRedo()\"\n    (click)=\"store.redo()\"\n    [matTooltip]=\"ui.text('redoTooltip')\"\n    [attr.aria-label]=\"ui.text('redo')\"\n  >\n    <mat-icon>redo</mat-icon>\n  </button>\n\n  <button\n    mat-button\n    type=\"button\"\n    (click)=\"copyJson()\"\n    [matTooltip]=\"ui.text('copyJson')\"\n    [attr.aria-label]=\"ui.text('copyJson')\"\n  >\n    <mat-icon>content_copy</mat-icon>\n    <!-- The label goes on a narrow screen; the tooltip and aria-label above carry the name. -->\n    <span class=\"deb-toolbar__btn-label\">{{ ui.text('copyJson') }}</span>\n  </button>\n\n  <button\n    mat-icon-button\n    type=\"button\"\n    data-testid=\"toggle-fields\"\n    class=\"deb-sidebar-toggle-btn\"\n    [class.deb-sidebar-toggle-btn--active]=\"fieldsOpen()\"\n    [attr.aria-expanded]=\"fieldsOpen()\"\n    aria-controls=\"deb-fields-section\"\n    (click)=\"toggleFields()\"\n    [matTooltip]=\"fieldsOpen() ? ui.text('collapseFields') : ui.text('expandFields')\"\n    [attr.aria-label]=\"fieldsOpen() ? ui.text('collapseFields') : ui.text('expandFields')\"\n  >\n    <mat-icon>{{ fieldsOpen() ? 'view_agenda' : 'table_rows' }}</mat-icon>\n  </button>\n\n  <button\n    mat-icon-button\n    type=\"button\"\n    data-testid=\"toggle-preview\"\n    class=\"deb-sidebar-toggle-btn\"\n    [class.deb-sidebar-toggle-btn--active]=\"previewOpen()\"\n    [attr.aria-expanded]=\"previewOpen()\"\n    aria-controls=\"deb-preview-section\"\n    (click)=\"togglePreview()\"\n    [matTooltip]=\"previewOpen() ? ui.text('collapsePreview') : ui.text('expandPreview')\"\n    [attr.aria-label]=\"previewOpen() ? ui.text('collapsePreview') : ui.text('expandPreview')\"\n  >\n    <mat-icon>{{ previewOpen() ? 'visibility' : 'visibility_off' }}</mat-icon>\n  </button>\n\n  <button\n    mat-icon-button\n    type=\"button\"\n    data-testid=\"toggle-right-sidebar\"\n    class=\"deb-sidebar-toggle-btn\"\n    [class.deb-sidebar-toggle-btn--active]=\"rightSidebarOpen()\"\n    [attr.aria-expanded]=\"rightSidebarOpen()\"\n    aria-controls=\"deb-right-sidebar\"\n    (click)=\"toggleRightSidebar()\"\n    [matTooltip]=\"rightSidebarOpen() ? ui.text('collapseInspector') : ui.text('expandInspector')\"\n    [attr.aria-label]=\"rightSidebarOpen() ? ui.text('collapseInspector') : ui.text('expandInspector')\"\n  >\n    <mat-icon>{{ rightSidebarOpen() ? 'vertical_split' : 'tune' }}</mat-icon>\n  </button>\n\n  <!--\n    The tooltip sits on a wrapper, not on the button.\n\n    A disabled button receives no pointer events, so a tooltip bound to it never fires \u2014 which\n    is the one state where the explanation is worth having. Saving stays disabled here (unlike\n    the renderer's Save, which refuses instead): an invalid *schema* is not something the\n    author can be shown their way out of one field at a time, and the issue list beside this\n    button is where that conversation happens.\n  -->\n  <span [matTooltip]=\"store.isValid() ? '' : ui.text('saveBlockedTooltip')\" [matTooltipDisabled]=\"store.isValid()\">\n    <!-- primary, not accent: white on Material's default pink accent is 3.33:1, below AA. -->\n    <button mat-flat-button color=\"primary\" type=\"button\" [disabled]=\"!store.isValid()\" (click)=\"doSave()\">\n      <mat-icon>save</mat-icon> {{ ui.text('save') }}\n    </button>\n  </span>\n</mat-toolbar>\n\n<div\n  class=\"deb-body\"\n  [class.deb-body--left-collapsed]=\"!leftSidebarOpen()\"\n  [class.deb-body--right-collapsed]=\"!rightSidebarOpen()\"\n>\n  <!-- Collapsed left sidebar: the rail that brings it back. -->\n  @if (!leftSidebarOpen()) {\n    <button\n      type=\"button\"\n      class=\"deb-dock-btn deb-dock-btn--left\"\n      data-testid=\"expand-left-sidebar\"\n      aria-expanded=\"false\"\n      aria-controls=\"deb-left-sidebar\"\n      (click)=\"expandLeft()\"\n      [matTooltip]=\"ui.text('expandPalette')\"\n      [attr.aria-label]=\"ui.text('expandPalette')\"\n    >\n      <!--\n        The card's own icon, not its name turned on its side. A 44px rail can only hold a\n        label by rotating it, and a rotated word is one you have to tilt your head to read \u2014\n        worse in German, where \"Eigenschaften\" is half a screen tall. The tooltip and the\n        accessible name carry the words; the label below returns when the rail lies flat.\n      -->\n      <mat-icon class=\"deb-dock-btn__icon\">add_circle_outline</mat-icon>\n      <span class=\"deb-dock-btn__label\">{{ ui.text('paletteRailLabel') }}</span>\n      <mat-icon class=\"deb-dock-btn__chevron\">chevron_right</mat-icon>\n    </button>\n  }\n\n  <!-- \u2500\u2500\u2500 Left: settings, palette, tabs \u2500\u2500\u2500 -->\n  <div\n    id=\"deb-left-sidebar\"\n    class=\"deb-col deb-col--left\"\n    data-testid=\"builder-left-sidebar\"\n    [hidden]=\"!leftSidebarOpen()\"\n  >\n    <mat-card class=\"deb-card deb-card--palette\">\n      <mat-card-header>\n        <mat-card-title class=\"deb-card__title\">\n          <mat-icon class=\"deb-card__icon\">add_circle_outline</mat-icon>\n          {{ ui.text('addField') }}\n        </mat-card-title>\n        <button\n          mat-icon-button\n          type=\"button\"\n          class=\"deb-card__collapse-btn\"\n          data-testid=\"collapse-left-sidebar\"\n          aria-expanded=\"true\"\n          aria-controls=\"deb-left-sidebar\"\n          (click)=\"collapseLeft()\"\n          [matTooltip]=\"ui.text('collapsePalette')\"\n          [attr.aria-label]=\"ui.text('collapsePalette')\"\n        >\n          <mat-icon>chevron_left</mat-icon>\n        </button>\n      </mat-card-header>\n      <mat-card-content>\n        <ngx-field-palette (pick)=\"store.addField($event)\"></ngx-field-palette>\n      </mat-card-content>\n    </mat-card>\n\n    <mat-card class=\"deb-card deb-card--settings\">\n      <mat-card-header>\n        <mat-card-title class=\"deb-card__title\">\n          <mat-icon class=\"deb-card__icon\">tune</mat-icon>\n          {{ store.config().entity || ui.text('entityName') }}\n        </mat-card-title>\n      </mat-card-header>\n      <mat-card-content>\n        <div class=\"deb-settings-grid\">\n          <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"deb-full\">\n            <mat-label>{{ ui.text('entityName') }}</mat-label>\n            <input\n              matInput\n              [ngModel]=\"store.config().entity\"\n              (ngModelChange)=\"store.setEntityName($event)\"\n              [placeholder]=\"ui.text('entityNamePlaceholder')\"\n            />\n          </mat-form-field>\n\n          <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"deb-full\">\n            <mat-label>{{ ui.text('editingLanguage') }}</mat-label>\n            <mat-select\n              data-testid=\"builder-editing-language\"\n              [ngModel]=\"store.activeLanguage()\"\n              (ngModelChange)=\"store.setActiveLanguage($event)\"\n            >\n              @for (l of languages; track l) {\n                <mat-option [value]=\"l\">{{ l }}</mat-option>\n              }\n            </mat-select>\n          </mat-form-field>\n        </div>\n\n        <div class=\"deb-mask-row\">\n          <mat-slide-toggle\n            color=\"primary\"\n            [ngModel]=\"store.config().maskData ?? false\"\n            (ngModelChange)=\"store.setMaskData($event)\"\n            >{{ ui.text('maskEntity') }}</mat-slide-toggle\n          >\n        </div>\n\n        <mat-expansion-panel class=\"deb-rbac\">\n          <mat-expansion-panel-header>\n            <mat-panel-title>{{ ui.text('permissions') }}</mat-panel-title>\n          </mat-expansion-panel-header>\n          @for (action of rbacActions; track action) {\n            @if (availableRoles.length) {\n              <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"deb-full\">\n                <mat-label>{{ ui.text('actionRoles', { action }) }}</mat-label>\n                <mat-select multiple [ngModel]=\"rolesFor(action)\" (ngModelChange)=\"setRoles(action, $event)\">\n                  @for (role of availableRoles; track role) {\n                    <mat-option [value]=\"role\">{{ role }}</mat-option>\n                  }\n                </mat-select>\n              </mat-form-field>\n            } @else {\n              <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"deb-full\">\n                <mat-label>{{ ui.text('actionRolesPlaceholder', { action }) }}</mat-label>\n                <input matInput [ngModel]=\"rolesFor(action).join(', ')\" (ngModelChange)=\"setRolesFromText(action, $event)\" />\n              </mat-form-field>\n            }\n          }\n          <p class=\"deb-hint\">{{ ui.text('permissionsHint') }}</p>\n        </mat-expansion-panel>\n      </mat-card-content>\n    </mat-card>\n\n    <mat-card class=\"deb-card deb-card--tabs\">\n      <mat-card-content>\n        <ngx-tab-manager></ngx-tab-manager>\n      </mat-card-content>\n    </mat-card>\n  </div>\n\n  <!-- \u2500\u2500\u2500 Center: field canvas, then what it renders as \u2500\u2500\u2500 -->\n  <div class=\"deb-col deb-col--center\" data-testid=\"builder-canvas-column\">\n    <!-- Collapsed fields canvas dock bar -->\n    <div\n      class=\"deb-dock-pane deb-dock-pane--fields\"\n      [class.deb-dock-pane--open]=\"!fieldsOpen()\"\n      [attr.aria-hidden]=\"fieldsOpen()\"\n    >\n      <div class=\"deb-dock-pane__inner\">\n        <button\n          type=\"button\"\n          class=\"deb-dock-btn deb-dock-btn--horizontal deb-dock-btn--fields\"\n          data-testid=\"expand-fields\"\n          aria-expanded=\"false\"\n          aria-controls=\"deb-fields-section\"\n          (click)=\"expandFields()\"\n          [matTooltip]=\"ui.text('expandFields')\"\n          [attr.aria-label]=\"ui.text('expandFields')\"\n        >\n          <mat-icon class=\"deb-dock-btn__icon\">format_list_bulleted</mat-icon>\n          <span class=\"deb-dock-btn__label\">{{ ui.text('fieldsRailLabel') }} ({{ store.fields().length }})</span>\n          <mat-icon class=\"deb-dock-btn__chevron\">keyboard_arrow_down</mat-icon>\n        </button>\n      </div>\n    </div>\n\n    <!-- Fields canvas section -->\n    <div\n      id=\"deb-fields-section\"\n      class=\"deb-toggle-pane deb-section--fields\"\n      [class.deb-toggle-pane--collapsed]=\"!fieldsOpen()\"\n      data-testid=\"builder-fields-section\"\n      [attr.aria-hidden]=\"!fieldsOpen()\"\n    >\n      <div class=\"deb-toggle-pane__inner\">\n        <ngx-entity-builder-canvas (collapse)=\"collapseFields()\" />\n      </div>\n    </div>\n\n    <!-- Collapsed preview dock bar -->\n    <div\n      class=\"deb-dock-pane deb-dock-pane--preview\"\n      [class.deb-dock-pane--open]=\"!previewOpen()\"\n      [attr.aria-hidden]=\"previewOpen()\"\n    >\n      <div class=\"deb-dock-pane__inner\">\n        <button\n          type=\"button\"\n          class=\"deb-dock-btn deb-dock-btn--horizontal deb-dock-btn--preview\"\n          data-testid=\"expand-preview\"\n          aria-expanded=\"false\"\n          aria-controls=\"deb-preview-section\"\n          (click)=\"expandPreview()\"\n          [matTooltip]=\"ui.text('expandPreview')\"\n          [attr.aria-label]=\"ui.text('expandPreview')\"\n        >\n          <mat-icon class=\"deb-dock-btn__icon\">visibility</mat-icon>\n          <span class=\"deb-dock-btn__label\">{{ ui.text('previewRailLabel') }}</span>\n          <mat-icon class=\"deb-dock-btn__chevron\">keyboard_arrow_up</mat-icon>\n        </button>\n      </div>\n    </div>\n\n    <!--\n      The live preview, moved up from the footer.\n      Directly under the field list is where a change and its effect can be seen in the same glance.\n    -->\n    <div\n      id=\"deb-preview-section\"\n      class=\"deb-toggle-pane deb-preview-slot\"\n      [class.deb-toggle-pane--collapsed]=\"!previewOpen()\"\n      data-testid=\"builder-preview-section\"\n      [attr.aria-hidden]=\"!previewOpen()\"\n    >\n      <div class=\"deb-toggle-pane__inner\">\n        <mat-card class=\"deb-card deb-card--preview\">\n          <mat-card-header>\n            <mat-card-title class=\"deb-card__title\">\n              <mat-icon class=\"deb-card__icon\">visibility</mat-icon>\n              {{ ui.text('previewHeading') }}\n            </mat-card-title>\n            <button\n              mat-icon-button\n              type=\"button\"\n              class=\"deb-card__collapse-btn\"\n              data-testid=\"collapse-preview\"\n              aria-expanded=\"true\"\n              aria-controls=\"deb-preview-section\"\n              (click)=\"collapsePreview()\"\n              [matTooltip]=\"ui.text('collapsePreview')\"\n              [attr.aria-label]=\"ui.text('collapsePreview')\"\n            >\n              <mat-icon>keyboard_arrow_down</mat-icon>\n            </button>\n          </mat-card-header>\n          <mat-card-content>\n            <ng-content select=\"[ngxBuilderPreview]\"></ng-content>\n          </mat-card-content>\n        </mat-card>\n      </div>\n    </div>\n  </div>\n\n  <!-- Collapsed right sidebar: the rail that brings it back. -->\n  @if (!rightSidebarOpen()) {\n    <button\n      type=\"button\"\n      class=\"deb-dock-btn deb-dock-btn--right\"\n      data-testid=\"expand-right-sidebar\"\n      aria-expanded=\"false\"\n      aria-controls=\"deb-right-sidebar\"\n      (click)=\"expandRight()\"\n      [matTooltip]=\"ui.text('expandInspector')\"\n      [attr.aria-label]=\"ui.text('expandInspector')\"\n    >\n      <mat-icon class=\"deb-dock-btn__icon\">tune</mat-icon>\n      <span class=\"deb-dock-btn__label\">{{ ui.text('inspectorRailLabel') }}</span>\n      <mat-icon class=\"deb-dock-btn__chevron\">chevron_left</mat-icon>\n    </button>\n  }\n\n  <!-- \u2500\u2500\u2500 Right: inspector \u2500\u2500\u2500 -->\n  <div\n    id=\"deb-right-sidebar\"\n    class=\"deb-col deb-col--right\"\n    data-testid=\"builder-right-sidebar\"\n    [hidden]=\"!rightSidebarOpen()\"\n  >\n    <mat-card class=\"deb-card deb-card--inspector\">\n      <mat-card-header>\n        <mat-card-title class=\"deb-card__title\">\n          <mat-icon class=\"deb-card__icon\">tune</mat-icon>\n          {{ ui.text('fieldProperties') }}\n        </mat-card-title>\n        <button\n          mat-icon-button\n          type=\"button\"\n          class=\"deb-card__collapse-btn\"\n          data-testid=\"collapse-right-sidebar\"\n          aria-expanded=\"true\"\n          aria-controls=\"deb-right-sidebar\"\n          (click)=\"collapseRight()\"\n          [matTooltip]=\"ui.text('collapseInspector')\"\n          [attr.aria-label]=\"ui.text('collapseInspector')\"\n        >\n          <mat-icon>chevron_right</mat-icon>\n        </button>\n      </mat-card-header>\n      <mat-card-content>\n        <ngx-field-inspector></ngx-field-inspector>\n      </mat-card-content>\n    </mat-card>\n  </div>\n</div>\n\n<!-- \u2500\u2500\u2500 Footer: the exported JSON \u2500\u2500\u2500 -->\n<div class=\"deb-footer\">\n  <mat-expansion-panel>\n    <mat-expansion-panel-header>\n      <mat-panel-title><mat-icon>data_object</mat-icon>&nbsp;{{ ui.text('configJson') }}</mat-panel-title>\n    </mat-expansion-panel-header>\n    <pre class=\"deb-json\">{{ json }}</pre>\n  </mat-expansion-panel>\n</div>\n", styles: ["ngx-entity-builder{--deb-accent: #6366f1;--deb-accent-hover: #4f46e5;--deb-accent-ink: #4f46e5;--deb-accent-soft: #eef2ff;--deb-border: #e2e8f0;--deb-muted: #64748b;--deb-surface: #ffffff;--deb-rail: 44px;--deb-left: clamp(320px, 26vw, 460px);--deb-right: 380px;--deb-left-wide: calc(var(--deb-left) + var(--deb-right) - var(--deb-rail));--deb-toolbar-h: 56px;--deb-sticky-top: calc(var(--deb-toolbar-h) + 20px);display:block}.deb-toolbar{background:var(--deb-surface);color:#0f172a;border-bottom:1px solid var(--deb-border);gap:4px;height:var(--deb-toolbar-h);position:sticky;top:0;z-index:20;flex-wrap:wrap;padding-block:4px}mat-toolbar.deb-toolbar{height:auto;min-height:var(--deb-toolbar-h)}.deb-toolbar__mark{color:var(--deb-accent-ink)}.deb-toolbar__title{margin-left:8px;font-family:var(--font-heading, sans-serif);font-size:15px;font-weight:700;color:#0f172a}.deb-toolbar__entity{margin-left:10px;padding:3px 10px;border-radius:9999px;background:var(--deb-accent-soft);color:var(--deb-accent-hover);font-family:ui-monospace,SFMono-Regular,monospace;font-size:12px;font-weight:600;max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.deb-spacer{flex:1 1 auto}.deb-problems{font-weight:600}.deb-problems--error{color:#ef4444;font-weight:600}.deb-problems-menu__text{white-space:normal;line-height:1.35;padding:6px 0}.deb-problems-menu .mat-mdc-menu-item{height:auto;min-height:40px}.deb-problems-menu{max-width:460px}.deb-full{width:100%}.deb-grow{flex:1}.deb-row{display:flex;gap:8px;align-items:center}.deb-row--split{justify-content:space-between}.deb-section-title{font-family:var(--font-heading, sans-serif);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--deb-muted)}.deb-hint{margin:4px 0 0;font-size:12px;color:var(--deb-muted)}.deb-chip{display:inline-block;padding:3px 10px;border-radius:9999px;background:var(--deb-accent-soft);color:var(--deb-accent-hover);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.03em}.deb-chip--muted{background:#f1f5f9;color:var(--deb-muted)}.deb-body{display:grid;grid-template-columns:var(--deb-left) minmax(0,1fr) var(--deb-right);gap:24px;padding:24px;align-items:start;transition:grid-template-columns .25s cubic-bezier(.16,1,.3,1)}.deb-body.deb-body--left-collapsed{grid-template-columns:var(--deb-rail) minmax(0,1fr) var(--deb-right)}.deb-body.deb-body--right-collapsed{grid-template-columns:var(--deb-left-wide) minmax(0,1fr) var(--deb-rail)}.deb-body.deb-body--left-collapsed.deb-body--right-collapsed{grid-template-columns:var(--deb-rail) minmax(0,1fr) var(--deb-rail)}.deb-col{display:flex;flex-direction:column;gap:18px;min-width:0}.deb-col[hidden],.deb-section--fields[hidden],.deb-preview-slot[hidden]{display:none!important}.deb-col>.deb-card{flex:0 0 auto}@keyframes debDockFadeIn{0%{opacity:0;transform:scale(.92)}to{opacity:1;transform:scale(1)}}@keyframes debDockSlideInY{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}@keyframes debSectionExpand{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}@keyframes debColLeftExpand{0%{opacity:0;transform:translate(-12px)}to{opacity:1;transform:translate(0)}}@keyframes debColRightExpand{0%{opacity:0;transform:translate(12px)}to{opacity:1;transform:translate(0)}}.deb-toggle-pane{display:grid;grid-template-rows:1fr;opacity:1;transform:translateY(0);transition:grid-template-rows .32s cubic-bezier(.16,1,.3,1),opacity .22s ease,transform .28s cubic-bezier(.16,1,.3,1)}.deb-toggle-pane--collapsed{grid-template-rows:0fr;opacity:0;transform:translateY(-8px);pointer-events:none;visibility:hidden}.deb-toggle-pane__inner,.deb-dock-pane__inner{overflow:hidden;min-height:0;padding:4px 2px;margin:-4px -2px}.deb-dock-pane{display:grid;grid-template-rows:0fr;opacity:0;transform:translateY(-8px);pointer-events:none;visibility:hidden;transition:grid-template-rows .32s cubic-bezier(.16,1,.3,1),opacity .22s ease,transform .28s cubic-bezier(.16,1,.3,1)}.deb-dock-pane--open{grid-template-rows:1fr;opacity:1;transform:translateY(0);pointer-events:auto;visibility:visible}.deb-col--left:not([hidden]){animation:debColLeftExpand .24s cubic-bezier(.16,1,.3,1) forwards}.deb-col--right:not([hidden]){animation:debColRightExpand .24s cubic-bezier(.16,1,.3,1) forwards}@media(prefers-reduced-motion:reduce){.deb-body,.deb-col--left,.deb-col--right,.deb-col--center,.deb-section--fields,.deb-preview-slot,.deb-dock-btn,.deb-card,.deb-sidebar-toggle-btn{transition:none!important;animation:none!important}}.deb-col--left,.deb-col--right{position:sticky;top:var(--deb-sticky-top);max-height:calc(100vh - var(--deb-sticky-top) - 20px);overflow-y:auto;padding-right:4px;transition:opacity .2s ease}.deb-card{border-radius:12px!important;border:1px solid var(--deb-border, #e2e8f0)!important;background:var(--deb-surface, #ffffff)!important;box-shadow:0 1px 3px #00000008,0 1px 2px #00000005!important;transition:box-shadow .2s ease,border-color .2s ease!important;overflow:hidden}.deb-card:hover{border-color:#cbd5e1!important;box-shadow:0 4px 12px #0f172a0d!important}.deb-card mat-card-header{padding:14px 16px 10px!important;display:flex!important;align-items:center!important}.deb-card mat-card-content{padding:0 16px 16px!important}.deb-card__title{display:flex!important;align-items:center!important;gap:8px!important;font-family:var(--font-heading, sans-serif)!important;font-size:13.5px!important;font-weight:700!important;color:#0f172a!important;margin:0!important}.deb-card__icon{color:var(--deb-accent-ink, #4f46e5)!important;font-size:18px!important;width:18px!important;height:18px!important;flex:none!important}.deb-card__collapse-btn{margin-left:auto!important;width:32px!important;height:32px!important;color:var(--deb-muted, #64748b)!important;display:inline-flex!important;align-items:center!important;justify-content:center!important}.deb-card__collapse-btn:hover{color:#0f172a!important;background:#f1f5f9!important}.deb-sidebar-toggle-btn{color:var(--deb-muted, #64748b);transition:all .15s ease}.deb-sidebar-toggle-btn:hover{color:#0f172a;background:#f1f5f9}.deb-sidebar-toggle-btn--active{color:var(--deb-accent-ink, #4f46e5)!important;background:var(--deb-accent-soft, #eef2ff)!important}.deb-dock-btn{position:sticky;top:var(--deb-sticky-top);align-self:start;justify-self:center;z-index:10;display:inline-flex;flex-direction:column;align-items:center;gap:10px;width:36px;padding:12px 0;border-radius:9999px;border:1px solid #c7d2fe;background:#fff;color:var(--deb-accent-hover, #4f46e5);font-family:var(--font-heading, sans-serif);font-size:12px;font-weight:700;box-shadow:0 4px 14px #6366f126;cursor:pointer;animation:debDockFadeIn .22s cubic-bezier(.16,1,.3,1) forwards;transition:background .2s ease,border-color .2s ease,box-shadow .2s ease}.deb-dock-btn:hover{background:var(--deb-accent-soft, #eef2ff);border-color:var(--deb-accent, #6366f1);box-shadow:0 6px 20px #6366f140}.deb-dock-btn mat-icon{flex:none}.deb-dock-btn__icon{font-size:20px;width:20px;height:20px;color:var(--deb-accent-ink, #4f46e5)}.deb-dock-btn__chevron{font-size:16px;width:16px;height:16px;opacity:.75}.deb-dock-btn__label{display:none;letter-spacing:.04em;white-space:nowrap}.deb-dock-btn--horizontal{flex-direction:row;justify-content:center;width:100%;padding:10px 18px;border-radius:12px;gap:12px;position:static;animation:debDockSlideInY .22s cubic-bezier(.16,1,.3,1) forwards}.deb-dock-btn--horizontal .deb-dock-btn__label{display:inline}.deb-card--preview mat-card-content{padding:0 16px 16px!important}.deb-settings-grid{display:grid;grid-template-columns:1.4fr 1fr;gap:8px;margin-bottom:6px}.deb-mask-row{padding:4px 0 8px}.deb-preview-slot:empty{display:none}@media(max-width:1300px){ngx-entity-builder{--deb-left: clamp(280px, 28vw, 340px)}.deb-body{grid-template-columns:var(--deb-left) minmax(0,1fr)}.deb-body.deb-body--right-collapsed{grid-template-columns:var(--deb-left) minmax(0,1fr) var(--deb-rail)}.deb-body.deb-body--left-collapsed{grid-template-columns:var(--deb-rail) minmax(0,1fr)}.deb-body.deb-body--left-collapsed.deb-body--right-collapsed{grid-template-columns:var(--deb-rail) minmax(0,1fr) var(--deb-rail)}.deb-col--right{grid-column:2;position:static;max-height:none;overflow:visible}}@media(max-width:900px){ngx-entity-builder{--deb-rail: 36px}.deb-body{gap:12px;padding:12px;grid-template-columns:minmax(0,1fr)}.deb-body.deb-body--left-collapsed,.deb-body.deb-body--right-collapsed,.deb-body.deb-body--left-collapsed.deb-body--right-collapsed{grid-template-columns:minmax(0,1fr)}.deb-col--left,.deb-col--right,.deb-dock-btn--left,.deb-dock-btn--right{grid-column:1;position:static;max-height:none;overflow:visible}.deb-dock-btn--left,.deb-dock-btn--right{flex-direction:row;justify-content:center;width:auto;justify-self:stretch;padding:10px 16px}.deb-dock-btn__label{display:inline}}@media(max-width:900px){.deb-toolbar__title,.deb-toolbar__mark{display:none}}@media(max-width:560px){.deb-toolbar__btn-label{display:none}}.deb-canvas__group{margin:14px 0 6px;font-family:var(--font-heading, sans-serif);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--deb-muted)}.deb-canvas__group:first-of-type{margin-top:0}.deb-field-list{display:flex;flex-direction:column;gap:8px}.deb-field-list:empty{min-height:44px;border:1px dashed var(--deb-border);border-radius:10px}.deb-field-row{display:flex;align-items:center;gap:10px;padding:9px 12px;border:1px solid var(--deb-border);border-radius:10px;background:var(--deb-surface);cursor:pointer;box-shadow:0 1px 3px #00000008;transition:all .18s cubic-bezier(.16,1,.3,1)}.deb-field-row:hover{border-color:#a5b4fc;background:#fcfaff;transform:translateY(-1px);box-shadow:0 4px 12px #6366f114}.deb-field-row--active{border-color:var(--deb-accent);border-left:4px solid var(--deb-accent);background:#f5f3ff;box-shadow:0 4px 16px #6366f12e}.deb-field-row__actions{display:flex;align-items:center;margin-left:auto;opacity:0;transition:opacity .15s ease}.deb-field-row:hover .deb-field-row__actions,.deb-field-row:focus-within .deb-field-row__actions,.deb-field-row--active .deb-field-row__actions{opacity:1}@media(hover:none){.deb-field-row__actions{opacity:1}}@media(max-width:560px){.deb-field-row{flex-wrap:wrap;row-gap:4px}.deb-field-row__actions{margin-left:auto}}.deb-type-badge{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;padding:2px 7px;border-radius:6px;background:#e0e7ff;color:#4338ca;flex:none}.deb-span-badge{font-size:10px;font-weight:700;padding:2px 7px;border-radius:6px;background:#f1f5f9;color:#475569;font-family:ui-monospace,SFMono-Regular,monospace;flex:none}.deb-drag-handle{cursor:grab;color:#7d8a9c;transition:color .15s;flex:none}.deb-drag-handle:hover{color:var(--deb-accent-ink)}.deb-field-type{color:var(--deb-accent-ink);flex:none}.deb-field-meta{display:flex;flex-direction:column;min-width:0;flex:1}.deb-field-label{font-family:var(--font-heading, sans-serif);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#0f172a;font-size:14px}.deb-field-id{font-size:11px;color:var(--deb-muted);font-family:ui-monospace,SFMono-Regular,monospace}.deb-req{color:#dc2626;font-weight:700;flex:none}.deb-empty,.deb-inspector__empty{text-align:center;color:var(--deb-muted);padding:40px 16px}.deb-empty mat-icon{transform:scale(1.8);margin-bottom:16px;color:#cbd5e1}.cdk-drag-preview.deb-field-row{box-shadow:0 12px 28px #4f46e538;border-radius:10px;border:1px solid var(--deb-accent, #6366f1);background:#fff}.cdk-drag-placeholder.deb-field-row{opacity:.35}.cdk-drag-animating.deb-field-row{transition:transform .2s cubic-bezier(0,0,.2,1)}.deb-field-list.cdk-drop-list-dragging .deb-field-row:not(.cdk-drag-placeholder){transition:transform .2s cubic-bezier(0,0,.2,1)}@media(prefers-reduced-motion:reduce){.deb-field-row,.deb-field-row__actions,.cdk-drag-animating.deb-field-row,.deb-field-list.cdk-drop-list-dragging .deb-field-row:not(.cdk-drag-placeholder){transition:none}.deb-field-row:hover{transform:none}}.deb-inspector{display:flex;flex-direction:column;gap:12px}.deb-inspector__section{border:1px solid var(--deb-border);border-radius:10px;overflow:hidden;background:var(--deb-surface)}.deb-inspector__summary{display:flex;align-items:center;gap:8px;width:100%;padding:10px 12px;cursor:pointer;list-style:none;font-family:var(--font-heading, sans-serif);font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--deb-muted);background:#f8fafc;-webkit-user-select:none;user-select:none}.deb-inspector__summary::-webkit-details-marker{display:none}.deb-inspector__summary:hover{color:#0f172a}.deb-inspector__summary:focus-visible{outline:2px solid var(--deb-accent);outline-offset:-2px}.deb-inspector__chevron{margin-left:auto;transition:transform .18s ease;color:#7d8a9c;font-size:20px;width:20px;height:20px}.deb-inspector__section[open]>.deb-inspector__summary>.deb-inspector__chevron{transform:rotate(180deg)}.deb-inspector__count{padding:1px 7px;border-radius:9999px;background:var(--deb-accent-soft);color:var(--deb-accent-hover);font-size:10px;font-weight:700;letter-spacing:0}.deb-inspector__body{display:flex;flex-direction:column;gap:10px;padding:12px;border-top:1px solid var(--deb-border)}@media(prefers-reduced-motion:reduce){.deb-inspector__chevron{transition:none}}.deb-span-picker{display:flex;gap:4px;flex-wrap:wrap}.deb-span-picker__btn{appearance:none;cursor:pointer;flex:1;min-width:46px;padding:7px 4px;border:1px solid var(--deb-border);border-radius:8px;background:var(--deb-surface);color:var(--deb-muted);font:inherit;font-size:12px;font-weight:700;transition:border-color .15s ease,background .15s ease,color .15s ease}.deb-span-picker__btn:hover{border-color:#a5b4fc;color:#0f172a}.deb-span-picker__btn:focus-visible{outline:2px solid var(--deb-accent);outline-offset:2px}.deb-span-picker__btn--active{border-color:var(--deb-accent);background:var(--deb-accent-soft);color:var(--deb-accent-hover)}.deb-option-row{display:flex;align-items:center;gap:8px}.deb-flags-row{display:flex;gap:16px;flex-wrap:wrap;padding:2px 0 6px}.deb-param-validators-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}.deb-toggles{display:flex;flex-direction:column;gap:6px}.deb-toggles mat-slide-toggle{display:flex;justify-content:space-between;width:100%;padding:5px 8px;border-radius:8px;background:#f8fafc;border:1px solid #f1f5f9;transition:all .15s ease}.deb-toggles mat-slide-toggle:hover{background:#f1f5f9;border-color:#e2e8f0}@media(prefers-reduced-motion:reduce){.deb-span-picker__btn{transition:none}}.deb-footer{padding:0 20px 20px;display:flex;flex-direction:column;gap:16px}.deb-json{margin:0;max-height:320px;overflow:auto;font-family:ui-monospace,SFMono-Regular,monospace;font-size:12px;line-height:1.5;padding:14px;background:#0f172a;color:#e2e8f0;border-radius:10px}.deb-path-hint{color:#0000008c;font-size:11px;margin-left:6px}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatCardModule }, { kind: "component", type: i3$3.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i3$3.MatCardContent, selector: "mat-card-content" }, { kind: "component", type: i3$3.MatCardHeader, selector: "mat-card-header" }, { kind: "directive", type: i3$3.MatCardTitle, selector: "mat-card-title, [mat-card-title], [matCardTitle]" }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "ngmodule", type: MatExpansionModule }, { kind: "component", type: i4$2.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i4$2.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["expandedHeight", "collapsedHeight", "tabIndex"] }, { kind: "directive", type: i4$2.MatExpansionPanelTitle, selector: "mat-panel-title" }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i5.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: MatMenuModule }, { kind: "component", type: i8.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i8.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i8.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { 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: MatToolbarModule }, { kind: "component", type: i11.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: FieldPaletteComponent, selector: "ngx-field-palette", outputs: ["pick"] }, { kind: "component", type: TabManagerComponent, selector: "ngx-tab-manager" }, { kind: "component", type: FieldInspectorComponent, selector: "ngx-field-inspector" }, { kind: "component", type: EntityBuilderCanvasComponent, selector: "ngx-entity-builder-canvas", outputs: ["collapse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: EntityBuilderComponent, decorators: [{
             type: Component,
@@ -4251,7 +4326,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
                         TabManagerComponent,
                         FieldInspectorComponent,
                         EntityBuilderCanvasComponent,
-                    ], encapsulation: ViewEncapsulation.None, template: "<mat-toolbar class=\"deb-toolbar\">\n  <button\n    mat-icon-button\n    type=\"button\"\n    data-testid=\"toggle-left-sidebar\"\n    class=\"deb-sidebar-toggle-btn\"\n    [class.deb-sidebar-toggle-btn--active]=\"leftSidebarOpen()\"\n    [attr.aria-expanded]=\"leftSidebarOpen()\"\n    aria-controls=\"deb-left-sidebar\"\n    (click)=\"toggleLeftSidebar()\"\n    [matTooltip]=\"leftSidebarOpen() ? ui.text('collapsePalette') : ui.text('expandPalette')\"\n    [attr.aria-label]=\"leftSidebarOpen() ? ui.text('collapsePalette') : ui.text('expandPalette')\"\n  >\n    <mat-icon>{{ leftSidebarOpen() ? 'menu_open' : 'menu' }}</mat-icon>\n  </button>\n\n  <mat-icon class=\"deb-toolbar__mark\">dashboard_customize</mat-icon>\n  <span class=\"deb-toolbar__title\">{{ ui.text('builderTitle') }}</span>\n  <span class=\"deb-toolbar__entity\" data-testid=\"builder-toolbar-entity\">{{ store.config().entity || '\u2014' }}</span>\n  <span class=\"deb-spacer\"></span>\n\n  <!--\n    The issue count, and the issues.\n    It used to be a button labelled \"0 / 1\" whose tooltip said to hover the items in the list\n    \u2014 a list that did not exist anywhere in the builder. The count now opens the problems\n    themselves, and an entry that names a field selects it, which is the action the person\n    reading the message wants to take next.\n  -->\n  @if (store.problems().length) {\n    <button\n      mat-button\n      type=\"button\"\n      class=\"deb-problems\"\n      data-testid=\"builder-problems\"\n      [class.deb-problems--error]=\"!store.isValid()\"\n      [matMenuTriggerFor]=\"problemsMenu\"\n      [matTooltip]=\"ui.text('issuesTooltip', { count: store.problems().length })\"\n    >\n      <mat-icon>{{ store.isValid() ? 'warning' : 'error' }}</mat-icon>\n      {{ ui.text('issuesCount', { errors: store.errors().length, total: store.problems().length }) }}\n    </button>\n    <mat-menu #problemsMenu=\"matMenu\" class=\"deb-problems-menu\">\n      @for (problem of store.problems(); track $index) {\n        <button\n          mat-menu-item\n          type=\"button\"\n          data-testid=\"builder-problem\"\n          [disabled]=\"!problem.fieldId\"\n          (click)=\"selectProblemField(problem)\"\n        >\n          <mat-icon [class.deb-problems--error]=\"problem.level === 'error'\">{{\n            problem.level === 'error' ? 'error' : 'warning'\n          }}</mat-icon>\n          <span class=\"deb-problems-menu__text\">{{ problem.message }}</span>\n        </button>\n      }\n    </mat-menu>\n  }\n\n  <button\n    mat-icon-button\n    type=\"button\"\n    data-testid=\"builder-undo\"\n    [disabled]=\"!store.canUndo()\"\n    (click)=\"store.undo()\"\n    [matTooltip]=\"ui.text('undoTooltip')\"\n    [attr.aria-label]=\"ui.text('undo')\"\n  >\n    <mat-icon>undo</mat-icon>\n  </button>\n  <button\n    mat-icon-button\n    type=\"button\"\n    data-testid=\"builder-redo\"\n    [disabled]=\"!store.canRedo()\"\n    (click)=\"store.redo()\"\n    [matTooltip]=\"ui.text('redoTooltip')\"\n    [attr.aria-label]=\"ui.text('redo')\"\n  >\n    <mat-icon>redo</mat-icon>\n  </button>\n\n  <button\n    mat-button\n    type=\"button\"\n    (click)=\"copyJson()\"\n    [matTooltip]=\"ui.text('copyJson')\"\n    [attr.aria-label]=\"ui.text('copyJson')\"\n  >\n    <mat-icon>content_copy</mat-icon>\n    <!-- The label goes on a narrow screen; the tooltip and aria-label above carry the name. -->\n    <span class=\"deb-toolbar__btn-label\">{{ ui.text('copyJson') }}</span>\n  </button>\n\n  <button\n    mat-icon-button\n    type=\"button\"\n    data-testid=\"toggle-right-sidebar\"\n    class=\"deb-sidebar-toggle-btn\"\n    [class.deb-sidebar-toggle-btn--active]=\"rightSidebarOpen()\"\n    [attr.aria-expanded]=\"rightSidebarOpen()\"\n    aria-controls=\"deb-right-sidebar\"\n    (click)=\"toggleRightSidebar()\"\n    [matTooltip]=\"rightSidebarOpen() ? ui.text('collapseInspector') : ui.text('expandInspector')\"\n    [attr.aria-label]=\"rightSidebarOpen() ? ui.text('collapseInspector') : ui.text('expandInspector')\"\n  >\n    <mat-icon>{{ rightSidebarOpen() ? 'vertical_split' : 'tune' }}</mat-icon>\n  </button>\n\n  <!--\n    The tooltip sits on a wrapper, not on the button.\n\n    A disabled button receives no pointer events, so a tooltip bound to it never fires \u2014 which\n    is the one state where the explanation is worth having. Saving stays disabled here (unlike\n    the renderer's Save, which refuses instead): an invalid *schema* is not something the\n    author can be shown their way out of one field at a time, and the issue list beside this\n    button is where that conversation happens.\n  -->\n  <span [matTooltip]=\"store.isValid() ? '' : ui.text('saveBlockedTooltip')\" [matTooltipDisabled]=\"store.isValid()\">\n    <!-- primary, not accent: white on Material's default pink accent is 3.33:1, below AA. -->\n    <button mat-flat-button color=\"primary\" type=\"button\" [disabled]=\"!store.isValid()\" (click)=\"doSave()\">\n      <mat-icon>save</mat-icon> {{ ui.text('save') }}\n    </button>\n  </span>\n</mat-toolbar>\n\n<div\n  class=\"deb-body\"\n  [class.deb-body--left-collapsed]=\"!leftSidebarOpen()\"\n  [class.deb-body--right-collapsed]=\"!rightSidebarOpen()\"\n>\n  <!-- Collapsed left sidebar: the rail that brings it back. -->\n  @if (!leftSidebarOpen()) {\n    <button\n      type=\"button\"\n      class=\"deb-dock-btn deb-dock-btn--left\"\n      data-testid=\"expand-left-sidebar\"\n      aria-expanded=\"false\"\n      aria-controls=\"deb-left-sidebar\"\n      (click)=\"expandLeft()\"\n      [matTooltip]=\"ui.text('expandPalette')\"\n      [attr.aria-label]=\"ui.text('expandPalette')\"\n    >\n      <!--\n        The card's own icon, not its name turned on its side. A 44px rail can only hold a\n        label by rotating it, and a rotated word is one you have to tilt your head to read \u2014\n        worse in German, where \"Eigenschaften\" is half a screen tall. The tooltip and the\n        accessible name carry the words; the label below returns when the rail lies flat.\n      -->\n      <mat-icon class=\"deb-dock-btn__icon\">add_circle_outline</mat-icon>\n      <span class=\"deb-dock-btn__label\">{{ ui.text('paletteRailLabel') }}</span>\n      <mat-icon class=\"deb-dock-btn__chevron\">chevron_right</mat-icon>\n    </button>\n  }\n\n  <!-- \u2500\u2500\u2500 Left: settings, palette, tabs \u2500\u2500\u2500 -->\n  <div\n    id=\"deb-left-sidebar\"\n    class=\"deb-col deb-col--left\"\n    data-testid=\"builder-left-sidebar\"\n    [hidden]=\"!leftSidebarOpen()\"\n  >\n    <mat-card class=\"deb-card deb-card--palette\">\n      <mat-card-header>\n        <mat-card-title class=\"deb-card__title\">\n          <mat-icon class=\"deb-card__icon\">add_circle_outline</mat-icon>\n          {{ ui.text('addField') }}\n        </mat-card-title>\n        <button\n          mat-icon-button\n          type=\"button\"\n          class=\"deb-card__collapse-btn\"\n          data-testid=\"collapse-left-sidebar\"\n          aria-expanded=\"true\"\n          aria-controls=\"deb-left-sidebar\"\n          (click)=\"collapseLeft()\"\n          [matTooltip]=\"ui.text('collapsePalette')\"\n          [attr.aria-label]=\"ui.text('collapsePalette')\"\n        >\n          <mat-icon>chevron_left</mat-icon>\n        </button>\n      </mat-card-header>\n      <mat-card-content>\n        <ngx-field-palette (pick)=\"store.addField($event)\"></ngx-field-palette>\n      </mat-card-content>\n    </mat-card>\n\n    <mat-card class=\"deb-card deb-card--settings\">\n      <mat-card-header>\n        <mat-card-title class=\"deb-card__title\">\n          <mat-icon class=\"deb-card__icon\">tune</mat-icon>\n          {{ store.config().entity || ui.text('entityName') }}\n        </mat-card-title>\n      </mat-card-header>\n      <mat-card-content>\n        <div class=\"deb-settings-grid\">\n          <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"deb-full\">\n            <mat-label>{{ ui.text('entityName') }}</mat-label>\n            <input\n              matInput\n              [ngModel]=\"store.config().entity\"\n              (ngModelChange)=\"store.setEntityName($event)\"\n              [placeholder]=\"ui.text('entityNamePlaceholder')\"\n            />\n          </mat-form-field>\n\n          <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"deb-full\">\n            <mat-label>{{ ui.text('editingLanguage') }}</mat-label>\n            <mat-select\n              data-testid=\"builder-editing-language\"\n              [ngModel]=\"store.activeLanguage()\"\n              (ngModelChange)=\"store.setActiveLanguage($event)\"\n            >\n              @for (l of languages; track l) {\n                <mat-option [value]=\"l\">{{ l }}</mat-option>\n              }\n            </mat-select>\n          </mat-form-field>\n        </div>\n\n        <div class=\"deb-mask-row\">\n          <mat-slide-toggle\n            color=\"primary\"\n            [ngModel]=\"store.config().maskData ?? false\"\n            (ngModelChange)=\"store.setMaskData($event)\"\n            >{{ ui.text('maskEntity') }}</mat-slide-toggle\n          >\n        </div>\n\n        <mat-expansion-panel class=\"deb-rbac\">\n          <mat-expansion-panel-header>\n            <mat-panel-title>{{ ui.text('permissions') }}</mat-panel-title>\n          </mat-expansion-panel-header>\n          @for (action of rbacActions; track action) {\n            @if (availableRoles.length) {\n              <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"deb-full\">\n                <mat-label>{{ ui.text('actionRoles', { action }) }}</mat-label>\n                <mat-select multiple [ngModel]=\"rolesFor(action)\" (ngModelChange)=\"setRoles(action, $event)\">\n                  @for (role of availableRoles; track role) {\n                    <mat-option [value]=\"role\">{{ role }}</mat-option>\n                  }\n                </mat-select>\n              </mat-form-field>\n            } @else {\n              <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"deb-full\">\n                <mat-label>{{ ui.text('actionRolesPlaceholder', { action }) }}</mat-label>\n                <input matInput [ngModel]=\"rolesFor(action).join(', ')\" (ngModelChange)=\"setRolesFromText(action, $event)\" />\n              </mat-form-field>\n            }\n          }\n          <p class=\"deb-hint\">{{ ui.text('permissionsHint') }}</p>\n        </mat-expansion-panel>\n      </mat-card-content>\n    </mat-card>\n\n    <mat-card class=\"deb-card deb-card--tabs\">\n      <mat-card-content>\n        <ngx-tab-manager></ngx-tab-manager>\n      </mat-card-content>\n    </mat-card>\n  </div>\n\n  <!-- \u2500\u2500\u2500 Center: field canvas, then what it renders as \u2500\u2500\u2500 -->\n  <div class=\"deb-col deb-col--center\" data-testid=\"builder-canvas-column\">\n    <ngx-entity-builder-canvas />\n\n    <!--\n      The live preview, moved up from the footer.\n      It used to sit below a collapsed JSON accordion at the very bottom of the page \u2014 around\n      1500px under the canvas on a fresh builder \u2014 so the one thing that tells an author what\n      they are building was never on screen while they built it. Directly under the field list\n      is where a change and its effect can be seen in the same glance.\n    -->\n    <div class=\"deb-preview-slot\">\n      <ng-content select=\"[ngxBuilderPreview]\"></ng-content>\n    </div>\n  </div>\n\n  <!-- Collapsed right sidebar: the rail that brings it back. -->\n  @if (!rightSidebarOpen()) {\n    <button\n      type=\"button\"\n      class=\"deb-dock-btn deb-dock-btn--right\"\n      data-testid=\"expand-right-sidebar\"\n      aria-expanded=\"false\"\n      aria-controls=\"deb-right-sidebar\"\n      (click)=\"expandRight()\"\n      [matTooltip]=\"ui.text('expandInspector')\"\n      [attr.aria-label]=\"ui.text('expandInspector')\"\n    >\n      <mat-icon class=\"deb-dock-btn__icon\">tune</mat-icon>\n      <span class=\"deb-dock-btn__label\">{{ ui.text('inspectorRailLabel') }}</span>\n      <mat-icon class=\"deb-dock-btn__chevron\">chevron_left</mat-icon>\n    </button>\n  }\n\n  <!-- \u2500\u2500\u2500 Right: inspector \u2500\u2500\u2500 -->\n  <div\n    id=\"deb-right-sidebar\"\n    class=\"deb-col deb-col--right\"\n    data-testid=\"builder-right-sidebar\"\n    [hidden]=\"!rightSidebarOpen()\"\n  >\n    <mat-card class=\"deb-card deb-card--inspector\">\n      <mat-card-header>\n        <mat-card-title class=\"deb-card__title\">\n          <mat-icon class=\"deb-card__icon\">tune</mat-icon>\n          {{ ui.text('fieldProperties') }}\n        </mat-card-title>\n        <button\n          mat-icon-button\n          type=\"button\"\n          class=\"deb-card__collapse-btn\"\n          data-testid=\"collapse-right-sidebar\"\n          aria-expanded=\"true\"\n          aria-controls=\"deb-right-sidebar\"\n          (click)=\"collapseRight()\"\n          [matTooltip]=\"ui.text('collapseInspector')\"\n          [attr.aria-label]=\"ui.text('collapseInspector')\"\n        >\n          <mat-icon>chevron_right</mat-icon>\n        </button>\n      </mat-card-header>\n      <mat-card-content>\n        <ngx-field-inspector></ngx-field-inspector>\n      </mat-card-content>\n    </mat-card>\n  </div>\n</div>\n\n<!-- \u2500\u2500\u2500 Footer: the exported JSON \u2500\u2500\u2500 -->\n<div class=\"deb-footer\">\n  <mat-expansion-panel>\n    <mat-expansion-panel-header>\n      <mat-panel-title><mat-icon>data_object</mat-icon>&nbsp;{{ ui.text('configJson') }}</mat-panel-title>\n    </mat-expansion-panel-header>\n    <pre class=\"deb-json\">{{ json }}</pre>\n  </mat-expansion-panel>\n</div>\n", styles: ["ngx-entity-builder{--deb-accent: #6366f1;--deb-accent-hover: #4f46e5;--deb-accent-ink: #4f46e5;--deb-accent-soft: #eef2ff;--deb-border: #e2e8f0;--deb-muted: #64748b;--deb-surface: #ffffff;--deb-rail: 44px;--deb-left: clamp(320px, 26vw, 460px);--deb-right: 380px;--deb-left-wide: calc(var(--deb-left) + var(--deb-right) - var(--deb-rail));--deb-toolbar-h: 56px;--deb-sticky-top: calc(var(--deb-toolbar-h) + 20px);display:block}.deb-toolbar{background:var(--deb-surface);color:#0f172a;border-bottom:1px solid var(--deb-border);gap:4px;height:var(--deb-toolbar-h);position:sticky;top:0;z-index:20;flex-wrap:wrap;padding-block:4px}mat-toolbar.deb-toolbar{height:auto;min-height:var(--deb-toolbar-h)}.deb-toolbar__mark{color:var(--deb-accent-ink)}.deb-toolbar__title{margin-left:8px;font-family:var(--font-heading, sans-serif);font-size:15px;font-weight:700;color:#0f172a}.deb-toolbar__entity{margin-left:10px;padding:3px 10px;border-radius:9999px;background:var(--deb-accent-soft);color:var(--deb-accent-hover);font-family:ui-monospace,SFMono-Regular,monospace;font-size:12px;font-weight:600;max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.deb-spacer{flex:1 1 auto}.deb-problems{font-weight:600}.deb-problems--error{color:#ef4444;font-weight:600}.deb-problems-menu__text{white-space:normal;line-height:1.35;padding:6px 0}.deb-problems-menu .mat-mdc-menu-item{height:auto;min-height:40px}.deb-problems-menu{max-width:460px}.deb-full{width:100%}.deb-grow{flex:1}.deb-row{display:flex;gap:8px;align-items:center}.deb-row--split{justify-content:space-between}.deb-section-title{font-family:var(--font-heading, sans-serif);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--deb-muted)}.deb-hint{margin:4px 0 0;font-size:12px;color:var(--deb-muted)}.deb-chip{display:inline-block;padding:3px 10px;border-radius:9999px;background:var(--deb-accent-soft);color:var(--deb-accent-hover);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.03em}.deb-chip--muted{background:#f1f5f9;color:var(--deb-muted)}.deb-body{display:grid;grid-template-columns:var(--deb-left) minmax(0,1fr) var(--deb-right);gap:24px;padding:24px;align-items:start;transition:grid-template-columns .25s cubic-bezier(.16,1,.3,1)}.deb-body.deb-body--left-collapsed{grid-template-columns:var(--deb-rail) minmax(0,1fr) var(--deb-right)}.deb-body.deb-body--right-collapsed{grid-template-columns:var(--deb-left-wide) minmax(0,1fr) var(--deb-rail)}.deb-body.deb-body--left-collapsed.deb-body--right-collapsed{grid-template-columns:var(--deb-rail) minmax(0,1fr) var(--deb-rail)}.deb-col{display:flex;flex-direction:column;gap:18px;min-width:0}.deb-col[hidden]{display:none}.deb-col>.deb-card{flex:0 0 auto}@media(prefers-reduced-motion:reduce){.deb-body,.deb-col--left,.deb-col--right,.deb-dock-btn,.deb-card{transition:none!important}}.deb-col--left,.deb-col--right{position:sticky;top:var(--deb-sticky-top);max-height:calc(100vh - var(--deb-sticky-top) - 20px);overflow-y:auto;padding-right:4px;transition:opacity .2s ease}.deb-card{border-radius:12px!important;border:1px solid var(--deb-border, #e2e8f0)!important;background:var(--deb-surface, #ffffff)!important;box-shadow:0 1px 3px #00000008,0 1px 2px #00000005!important;transition:box-shadow .2s ease,border-color .2s ease!important;overflow:hidden}.deb-card:hover{border-color:#cbd5e1!important;box-shadow:0 4px 12px #0f172a0d!important}.deb-card mat-card-header{padding:14px 16px 10px!important;display:flex!important;align-items:center!important}.deb-card mat-card-content{padding:0 16px 16px!important}.deb-card__title{display:flex!important;align-items:center!important;gap:8px!important;font-family:var(--font-heading, sans-serif)!important;font-size:13.5px!important;font-weight:700!important;color:#0f172a!important;margin:0!important}.deb-card__icon{color:var(--deb-accent-ink, #4f46e5)!important;font-size:18px!important;width:18px!important;height:18px!important;flex:none!important}.deb-card__collapse-btn{margin-left:auto!important;width:32px!important;height:32px!important;color:var(--deb-muted, #64748b)!important;display:inline-flex!important;align-items:center!important;justify-content:center!important}.deb-card__collapse-btn:hover{color:#0f172a!important;background:#f1f5f9!important}.deb-sidebar-toggle-btn{color:var(--deb-muted, #64748b);transition:all .15s ease}.deb-sidebar-toggle-btn:hover{color:#0f172a;background:#f1f5f9}.deb-sidebar-toggle-btn--active{color:var(--deb-accent-ink, #4f46e5)!important;background:var(--deb-accent-soft, #eef2ff)!important}.deb-dock-btn{position:sticky;top:var(--deb-sticky-top);align-self:start;justify-self:center;z-index:10;display:inline-flex;flex-direction:column;align-items:center;gap:10px;width:36px;padding:12px 0;border-radius:9999px;border:1px solid #c7d2fe;background:#fff;color:var(--deb-accent-hover, #4f46e5);font-family:var(--font-heading, sans-serif);font-size:12px;font-weight:700;box-shadow:0 4px 14px #6366f126;cursor:pointer;transition:background .2s ease,border-color .2s ease,box-shadow .2s ease}.deb-dock-btn:hover{background:var(--deb-accent-soft, #eef2ff);border-color:var(--deb-accent, #6366f1);box-shadow:0 6px 20px #6366f140}.deb-dock-btn mat-icon{flex:none}.deb-dock-btn__icon{font-size:20px;width:20px;height:20px;color:var(--deb-accent-ink, #4f46e5)}.deb-dock-btn__chevron{font-size:16px;width:16px;height:16px;opacity:.75}.deb-dock-btn__label{display:none;letter-spacing:.04em;white-space:nowrap}.deb-settings-grid{display:grid;grid-template-columns:1.4fr 1fr;gap:8px;margin-bottom:6px}.deb-mask-row{padding:4px 0 8px}.deb-preview-slot:empty{display:none}@media(max-width:1300px){ngx-entity-builder{--deb-left: clamp(280px, 28vw, 340px)}.deb-body{grid-template-columns:var(--deb-left) minmax(0,1fr)}.deb-body.deb-body--right-collapsed{grid-template-columns:var(--deb-left) minmax(0,1fr) var(--deb-rail)}.deb-body.deb-body--left-collapsed{grid-template-columns:var(--deb-rail) minmax(0,1fr)}.deb-body.deb-body--left-collapsed.deb-body--right-collapsed{grid-template-columns:var(--deb-rail) minmax(0,1fr) var(--deb-rail)}.deb-col--right{grid-column:2;position:static;max-height:none;overflow:visible}}@media(max-width:900px){ngx-entity-builder{--deb-rail: 36px}.deb-body{gap:12px;padding:12px;grid-template-columns:minmax(0,1fr)}.deb-body.deb-body--left-collapsed,.deb-body.deb-body--right-collapsed,.deb-body.deb-body--left-collapsed.deb-body--right-collapsed{grid-template-columns:minmax(0,1fr)}.deb-col--left,.deb-col--right,.deb-dock-btn--left,.deb-dock-btn--right{grid-column:1;position:static;max-height:none;overflow:visible}.deb-dock-btn--left,.deb-dock-btn--right{flex-direction:row;justify-content:center;width:auto;justify-self:stretch;padding:10px 16px}.deb-dock-btn__label{display:inline}}@media(max-width:900px){.deb-toolbar__title,.deb-toolbar__mark{display:none}}@media(max-width:560px){.deb-toolbar__btn-label{display:none}}.deb-canvas__group{margin:14px 0 6px;font-family:var(--font-heading, sans-serif);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--deb-muted)}.deb-canvas__group:first-of-type{margin-top:0}.deb-field-list{display:flex;flex-direction:column;gap:8px}.deb-field-list:empty{min-height:44px;border:1px dashed var(--deb-border);border-radius:10px}.deb-field-row{display:flex;align-items:center;gap:10px;padding:9px 12px;border:1px solid var(--deb-border);border-radius:10px;background:var(--deb-surface);cursor:pointer;box-shadow:0 1px 3px #00000008;transition:all .18s cubic-bezier(.16,1,.3,1)}.deb-field-row:hover{border-color:#a5b4fc;background:#fcfaff;transform:translateY(-1px);box-shadow:0 4px 12px #6366f114}.deb-field-row--active{border-color:var(--deb-accent);border-left:4px solid var(--deb-accent);background:#f5f3ff;box-shadow:0 4px 16px #6366f12e}.deb-field-row__actions{display:flex;align-items:center;margin-left:auto;opacity:0;transition:opacity .15s ease}.deb-field-row:hover .deb-field-row__actions,.deb-field-row:focus-within .deb-field-row__actions,.deb-field-row--active .deb-field-row__actions{opacity:1}@media(hover:none){.deb-field-row__actions{opacity:1}}@media(max-width:560px){.deb-field-row{flex-wrap:wrap;row-gap:4px}.deb-field-row__actions{margin-left:auto}}.deb-type-badge{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;padding:2px 7px;border-radius:6px;background:#e0e7ff;color:#4338ca;flex:none}.deb-span-badge{font-size:10px;font-weight:700;padding:2px 7px;border-radius:6px;background:#f1f5f9;color:#475569;font-family:ui-monospace,SFMono-Regular,monospace;flex:none}.deb-drag-handle{cursor:grab;color:#7d8a9c;transition:color .15s;flex:none}.deb-drag-handle:hover{color:var(--deb-accent-ink)}.deb-field-type{color:var(--deb-accent-ink);flex:none}.deb-field-meta{display:flex;flex-direction:column;min-width:0;flex:1}.deb-field-label{font-family:var(--font-heading, sans-serif);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#0f172a;font-size:14px}.deb-field-id{font-size:11px;color:var(--deb-muted);font-family:ui-monospace,SFMono-Regular,monospace}.deb-req{color:#dc2626;font-weight:700;flex:none}.deb-empty,.deb-inspector__empty{text-align:center;color:var(--deb-muted);padding:40px 16px}.deb-empty mat-icon{transform:scale(1.8);margin-bottom:16px;color:#cbd5e1}.cdk-drag-preview.deb-field-row{box-shadow:0 12px 28px #4f46e538;border-radius:10px;border:1px solid var(--deb-accent, #6366f1);background:#fff}.cdk-drag-placeholder.deb-field-row{opacity:.35}.cdk-drag-animating.deb-field-row{transition:transform .2s cubic-bezier(0,0,.2,1)}.deb-field-list.cdk-drop-list-dragging .deb-field-row:not(.cdk-drag-placeholder){transition:transform .2s cubic-bezier(0,0,.2,1)}@media(prefers-reduced-motion:reduce){.deb-field-row,.deb-field-row__actions,.cdk-drag-animating.deb-field-row,.deb-field-list.cdk-drop-list-dragging .deb-field-row:not(.cdk-drag-placeholder){transition:none}.deb-field-row:hover{transform:none}}.deb-inspector{display:flex;flex-direction:column;gap:12px}.deb-inspector__section{border:1px solid var(--deb-border);border-radius:10px;overflow:hidden;background:var(--deb-surface)}.deb-inspector__summary{display:flex;align-items:center;gap:8px;width:100%;padding:10px 12px;cursor:pointer;list-style:none;font-family:var(--font-heading, sans-serif);font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--deb-muted);background:#f8fafc;-webkit-user-select:none;user-select:none}.deb-inspector__summary::-webkit-details-marker{display:none}.deb-inspector__summary:hover{color:#0f172a}.deb-inspector__summary:focus-visible{outline:2px solid var(--deb-accent);outline-offset:-2px}.deb-inspector__chevron{margin-left:auto;transition:transform .18s ease;color:#7d8a9c;font-size:20px;width:20px;height:20px}.deb-inspector__section[open]>.deb-inspector__summary>.deb-inspector__chevron{transform:rotate(180deg)}.deb-inspector__count{padding:1px 7px;border-radius:9999px;background:var(--deb-accent-soft);color:var(--deb-accent-hover);font-size:10px;font-weight:700;letter-spacing:0}.deb-inspector__body{display:flex;flex-direction:column;gap:10px;padding:12px;border-top:1px solid var(--deb-border)}@media(prefers-reduced-motion:reduce){.deb-inspector__chevron{transition:none}}.deb-span-picker{display:flex;gap:4px;flex-wrap:wrap}.deb-span-picker__btn{appearance:none;cursor:pointer;flex:1;min-width:46px;padding:7px 4px;border:1px solid var(--deb-border);border-radius:8px;background:var(--deb-surface);color:var(--deb-muted);font:inherit;font-size:12px;font-weight:700;transition:border-color .15s ease,background .15s ease,color .15s ease}.deb-span-picker__btn:hover{border-color:#a5b4fc;color:#0f172a}.deb-span-picker__btn:focus-visible{outline:2px solid var(--deb-accent);outline-offset:2px}.deb-span-picker__btn--active{border-color:var(--deb-accent);background:var(--deb-accent-soft);color:var(--deb-accent-hover)}.deb-option-row{display:flex;align-items:center;gap:8px}.deb-flags-row{display:flex;gap:16px;flex-wrap:wrap;padding:2px 0 6px}.deb-param-validators-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}.deb-toggles{display:flex;flex-direction:column;gap:6px}.deb-toggles mat-slide-toggle{display:flex;justify-content:space-between;width:100%;padding:5px 8px;border-radius:8px;background:#f8fafc;border:1px solid #f1f5f9;transition:all .15s ease}.deb-toggles mat-slide-toggle:hover{background:#f1f5f9;border-color:#e2e8f0}@media(prefers-reduced-motion:reduce){.deb-span-picker__btn{transition:none}}.deb-footer{padding:0 20px 20px;display:flex;flex-direction:column;gap:16px}.deb-json{margin:0;max-height:320px;overflow:auto;font-family:ui-monospace,SFMono-Regular,monospace;font-size:12px;line-height:1.5;padding:14px;background:#0f172a;color:#e2e8f0;border-radius:10px}.deb-path-hint{color:#0000008c;font-size:11px;margin-left:6px}\n"] }]
+                    ], encapsulation: ViewEncapsulation.None, template: "<mat-toolbar class=\"deb-toolbar\">\n  <button\n    mat-icon-button\n    type=\"button\"\n    data-testid=\"toggle-left-sidebar\"\n    class=\"deb-sidebar-toggle-btn\"\n    [class.deb-sidebar-toggle-btn--active]=\"leftSidebarOpen()\"\n    [attr.aria-expanded]=\"leftSidebarOpen()\"\n    aria-controls=\"deb-left-sidebar\"\n    (click)=\"toggleLeftSidebar()\"\n    [matTooltip]=\"leftSidebarOpen() ? ui.text('collapsePalette') : ui.text('expandPalette')\"\n    [attr.aria-label]=\"leftSidebarOpen() ? ui.text('collapsePalette') : ui.text('expandPalette')\"\n  >\n    <mat-icon>{{ leftSidebarOpen() ? 'menu_open' : 'menu' }}</mat-icon>\n  </button>\n\n  <mat-icon class=\"deb-toolbar__mark\">dashboard_customize</mat-icon>\n  <span class=\"deb-toolbar__title\">{{ ui.text('builderTitle') }}</span>\n  <span class=\"deb-toolbar__entity\" data-testid=\"builder-toolbar-entity\">{{ store.config().entity || '\u2014' }}</span>\n  <span class=\"deb-spacer\"></span>\n\n  <!--\n    The issue count, and the issues.\n    It used to be a button labelled \"0 / 1\" whose tooltip said to hover the items in the list\n    \u2014 a list that did not exist anywhere in the builder. The count now opens the problems\n    themselves, and an entry that names a field selects it, which is the action the person\n    reading the message wants to take next.\n  -->\n  @if (store.problems().length) {\n    <button\n      mat-button\n      type=\"button\"\n      class=\"deb-problems\"\n      data-testid=\"builder-problems\"\n      [class.deb-problems--error]=\"!store.isValid()\"\n      [matMenuTriggerFor]=\"problemsMenu\"\n      [matTooltip]=\"ui.text('issuesTooltip', { count: store.problems().length })\"\n    >\n      <mat-icon>{{ store.isValid() ? 'warning' : 'error' }}</mat-icon>\n      {{ ui.text('issuesCount', { errors: store.errors().length, total: store.problems().length }) }}\n    </button>\n    <mat-menu #problemsMenu=\"matMenu\" class=\"deb-problems-menu\">\n      @for (problem of store.problems(); track $index) {\n        <button\n          mat-menu-item\n          type=\"button\"\n          data-testid=\"builder-problem\"\n          [disabled]=\"!problem.fieldId\"\n          (click)=\"selectProblemField(problem)\"\n        >\n          <mat-icon [class.deb-problems--error]=\"problem.level === 'error'\">{{\n            problem.level === 'error' ? 'error' : 'warning'\n          }}</mat-icon>\n          <span class=\"deb-problems-menu__text\">{{ problem.message }}</span>\n        </button>\n      }\n    </mat-menu>\n  }\n\n  <button\n    mat-icon-button\n    type=\"button\"\n    data-testid=\"builder-undo\"\n    [disabled]=\"!store.canUndo()\"\n    (click)=\"store.undo()\"\n    [matTooltip]=\"ui.text('undoTooltip')\"\n    [attr.aria-label]=\"ui.text('undo')\"\n  >\n    <mat-icon>undo</mat-icon>\n  </button>\n  <button\n    mat-icon-button\n    type=\"button\"\n    data-testid=\"builder-redo\"\n    [disabled]=\"!store.canRedo()\"\n    (click)=\"store.redo()\"\n    [matTooltip]=\"ui.text('redoTooltip')\"\n    [attr.aria-label]=\"ui.text('redo')\"\n  >\n    <mat-icon>redo</mat-icon>\n  </button>\n\n  <button\n    mat-button\n    type=\"button\"\n    (click)=\"copyJson()\"\n    [matTooltip]=\"ui.text('copyJson')\"\n    [attr.aria-label]=\"ui.text('copyJson')\"\n  >\n    <mat-icon>content_copy</mat-icon>\n    <!-- The label goes on a narrow screen; the tooltip and aria-label above carry the name. -->\n    <span class=\"deb-toolbar__btn-label\">{{ ui.text('copyJson') }}</span>\n  </button>\n\n  <button\n    mat-icon-button\n    type=\"button\"\n    data-testid=\"toggle-fields\"\n    class=\"deb-sidebar-toggle-btn\"\n    [class.deb-sidebar-toggle-btn--active]=\"fieldsOpen()\"\n    [attr.aria-expanded]=\"fieldsOpen()\"\n    aria-controls=\"deb-fields-section\"\n    (click)=\"toggleFields()\"\n    [matTooltip]=\"fieldsOpen() ? ui.text('collapseFields') : ui.text('expandFields')\"\n    [attr.aria-label]=\"fieldsOpen() ? ui.text('collapseFields') : ui.text('expandFields')\"\n  >\n    <mat-icon>{{ fieldsOpen() ? 'view_agenda' : 'table_rows' }}</mat-icon>\n  </button>\n\n  <button\n    mat-icon-button\n    type=\"button\"\n    data-testid=\"toggle-preview\"\n    class=\"deb-sidebar-toggle-btn\"\n    [class.deb-sidebar-toggle-btn--active]=\"previewOpen()\"\n    [attr.aria-expanded]=\"previewOpen()\"\n    aria-controls=\"deb-preview-section\"\n    (click)=\"togglePreview()\"\n    [matTooltip]=\"previewOpen() ? ui.text('collapsePreview') : ui.text('expandPreview')\"\n    [attr.aria-label]=\"previewOpen() ? ui.text('collapsePreview') : ui.text('expandPreview')\"\n  >\n    <mat-icon>{{ previewOpen() ? 'visibility' : 'visibility_off' }}</mat-icon>\n  </button>\n\n  <button\n    mat-icon-button\n    type=\"button\"\n    data-testid=\"toggle-right-sidebar\"\n    class=\"deb-sidebar-toggle-btn\"\n    [class.deb-sidebar-toggle-btn--active]=\"rightSidebarOpen()\"\n    [attr.aria-expanded]=\"rightSidebarOpen()\"\n    aria-controls=\"deb-right-sidebar\"\n    (click)=\"toggleRightSidebar()\"\n    [matTooltip]=\"rightSidebarOpen() ? ui.text('collapseInspector') : ui.text('expandInspector')\"\n    [attr.aria-label]=\"rightSidebarOpen() ? ui.text('collapseInspector') : ui.text('expandInspector')\"\n  >\n    <mat-icon>{{ rightSidebarOpen() ? 'vertical_split' : 'tune' }}</mat-icon>\n  </button>\n\n  <!--\n    The tooltip sits on a wrapper, not on the button.\n\n    A disabled button receives no pointer events, so a tooltip bound to it never fires \u2014 which\n    is the one state where the explanation is worth having. Saving stays disabled here (unlike\n    the renderer's Save, which refuses instead): an invalid *schema* is not something the\n    author can be shown their way out of one field at a time, and the issue list beside this\n    button is where that conversation happens.\n  -->\n  <span [matTooltip]=\"store.isValid() ? '' : ui.text('saveBlockedTooltip')\" [matTooltipDisabled]=\"store.isValid()\">\n    <!-- primary, not accent: white on Material's default pink accent is 3.33:1, below AA. -->\n    <button mat-flat-button color=\"primary\" type=\"button\" [disabled]=\"!store.isValid()\" (click)=\"doSave()\">\n      <mat-icon>save</mat-icon> {{ ui.text('save') }}\n    </button>\n  </span>\n</mat-toolbar>\n\n<div\n  class=\"deb-body\"\n  [class.deb-body--left-collapsed]=\"!leftSidebarOpen()\"\n  [class.deb-body--right-collapsed]=\"!rightSidebarOpen()\"\n>\n  <!-- Collapsed left sidebar: the rail that brings it back. -->\n  @if (!leftSidebarOpen()) {\n    <button\n      type=\"button\"\n      class=\"deb-dock-btn deb-dock-btn--left\"\n      data-testid=\"expand-left-sidebar\"\n      aria-expanded=\"false\"\n      aria-controls=\"deb-left-sidebar\"\n      (click)=\"expandLeft()\"\n      [matTooltip]=\"ui.text('expandPalette')\"\n      [attr.aria-label]=\"ui.text('expandPalette')\"\n    >\n      <!--\n        The card's own icon, not its name turned on its side. A 44px rail can only hold a\n        label by rotating it, and a rotated word is one you have to tilt your head to read \u2014\n        worse in German, where \"Eigenschaften\" is half a screen tall. The tooltip and the\n        accessible name carry the words; the label below returns when the rail lies flat.\n      -->\n      <mat-icon class=\"deb-dock-btn__icon\">add_circle_outline</mat-icon>\n      <span class=\"deb-dock-btn__label\">{{ ui.text('paletteRailLabel') }}</span>\n      <mat-icon class=\"deb-dock-btn__chevron\">chevron_right</mat-icon>\n    </button>\n  }\n\n  <!-- \u2500\u2500\u2500 Left: settings, palette, tabs \u2500\u2500\u2500 -->\n  <div\n    id=\"deb-left-sidebar\"\n    class=\"deb-col deb-col--left\"\n    data-testid=\"builder-left-sidebar\"\n    [hidden]=\"!leftSidebarOpen()\"\n  >\n    <mat-card class=\"deb-card deb-card--palette\">\n      <mat-card-header>\n        <mat-card-title class=\"deb-card__title\">\n          <mat-icon class=\"deb-card__icon\">add_circle_outline</mat-icon>\n          {{ ui.text('addField') }}\n        </mat-card-title>\n        <button\n          mat-icon-button\n          type=\"button\"\n          class=\"deb-card__collapse-btn\"\n          data-testid=\"collapse-left-sidebar\"\n          aria-expanded=\"true\"\n          aria-controls=\"deb-left-sidebar\"\n          (click)=\"collapseLeft()\"\n          [matTooltip]=\"ui.text('collapsePalette')\"\n          [attr.aria-label]=\"ui.text('collapsePalette')\"\n        >\n          <mat-icon>chevron_left</mat-icon>\n        </button>\n      </mat-card-header>\n      <mat-card-content>\n        <ngx-field-palette (pick)=\"store.addField($event)\"></ngx-field-palette>\n      </mat-card-content>\n    </mat-card>\n\n    <mat-card class=\"deb-card deb-card--settings\">\n      <mat-card-header>\n        <mat-card-title class=\"deb-card__title\">\n          <mat-icon class=\"deb-card__icon\">tune</mat-icon>\n          {{ store.config().entity || ui.text('entityName') }}\n        </mat-card-title>\n      </mat-card-header>\n      <mat-card-content>\n        <div class=\"deb-settings-grid\">\n          <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"deb-full\">\n            <mat-label>{{ ui.text('entityName') }}</mat-label>\n            <input\n              matInput\n              [ngModel]=\"store.config().entity\"\n              (ngModelChange)=\"store.setEntityName($event)\"\n              [placeholder]=\"ui.text('entityNamePlaceholder')\"\n            />\n          </mat-form-field>\n\n          <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"deb-full\">\n            <mat-label>{{ ui.text('editingLanguage') }}</mat-label>\n            <mat-select\n              data-testid=\"builder-editing-language\"\n              [ngModel]=\"store.activeLanguage()\"\n              (ngModelChange)=\"store.setActiveLanguage($event)\"\n            >\n              @for (l of languages; track l) {\n                <mat-option [value]=\"l\">{{ l }}</mat-option>\n              }\n            </mat-select>\n          </mat-form-field>\n        </div>\n\n        <div class=\"deb-mask-row\">\n          <mat-slide-toggle\n            color=\"primary\"\n            [ngModel]=\"store.config().maskData ?? false\"\n            (ngModelChange)=\"store.setMaskData($event)\"\n            >{{ ui.text('maskEntity') }}</mat-slide-toggle\n          >\n        </div>\n\n        <mat-expansion-panel class=\"deb-rbac\">\n          <mat-expansion-panel-header>\n            <mat-panel-title>{{ ui.text('permissions') }}</mat-panel-title>\n          </mat-expansion-panel-header>\n          @for (action of rbacActions; track action) {\n            @if (availableRoles.length) {\n              <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"deb-full\">\n                <mat-label>{{ ui.text('actionRoles', { action }) }}</mat-label>\n                <mat-select multiple [ngModel]=\"rolesFor(action)\" (ngModelChange)=\"setRoles(action, $event)\">\n                  @for (role of availableRoles; track role) {\n                    <mat-option [value]=\"role\">{{ role }}</mat-option>\n                  }\n                </mat-select>\n              </mat-form-field>\n            } @else {\n              <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"deb-full\">\n                <mat-label>{{ ui.text('actionRolesPlaceholder', { action }) }}</mat-label>\n                <input matInput [ngModel]=\"rolesFor(action).join(', ')\" (ngModelChange)=\"setRolesFromText(action, $event)\" />\n              </mat-form-field>\n            }\n          }\n          <p class=\"deb-hint\">{{ ui.text('permissionsHint') }}</p>\n        </mat-expansion-panel>\n      </mat-card-content>\n    </mat-card>\n\n    <mat-card class=\"deb-card deb-card--tabs\">\n      <mat-card-content>\n        <ngx-tab-manager></ngx-tab-manager>\n      </mat-card-content>\n    </mat-card>\n  </div>\n\n  <!-- \u2500\u2500\u2500 Center: field canvas, then what it renders as \u2500\u2500\u2500 -->\n  <div class=\"deb-col deb-col--center\" data-testid=\"builder-canvas-column\">\n    <!-- Collapsed fields canvas dock bar -->\n    <div\n      class=\"deb-dock-pane deb-dock-pane--fields\"\n      [class.deb-dock-pane--open]=\"!fieldsOpen()\"\n      [attr.aria-hidden]=\"fieldsOpen()\"\n    >\n      <div class=\"deb-dock-pane__inner\">\n        <button\n          type=\"button\"\n          class=\"deb-dock-btn deb-dock-btn--horizontal deb-dock-btn--fields\"\n          data-testid=\"expand-fields\"\n          aria-expanded=\"false\"\n          aria-controls=\"deb-fields-section\"\n          (click)=\"expandFields()\"\n          [matTooltip]=\"ui.text('expandFields')\"\n          [attr.aria-label]=\"ui.text('expandFields')\"\n        >\n          <mat-icon class=\"deb-dock-btn__icon\">format_list_bulleted</mat-icon>\n          <span class=\"deb-dock-btn__label\">{{ ui.text('fieldsRailLabel') }} ({{ store.fields().length }})</span>\n          <mat-icon class=\"deb-dock-btn__chevron\">keyboard_arrow_down</mat-icon>\n        </button>\n      </div>\n    </div>\n\n    <!-- Fields canvas section -->\n    <div\n      id=\"deb-fields-section\"\n      class=\"deb-toggle-pane deb-section--fields\"\n      [class.deb-toggle-pane--collapsed]=\"!fieldsOpen()\"\n      data-testid=\"builder-fields-section\"\n      [attr.aria-hidden]=\"!fieldsOpen()\"\n    >\n      <div class=\"deb-toggle-pane__inner\">\n        <ngx-entity-builder-canvas (collapse)=\"collapseFields()\" />\n      </div>\n    </div>\n\n    <!-- Collapsed preview dock bar -->\n    <div\n      class=\"deb-dock-pane deb-dock-pane--preview\"\n      [class.deb-dock-pane--open]=\"!previewOpen()\"\n      [attr.aria-hidden]=\"previewOpen()\"\n    >\n      <div class=\"deb-dock-pane__inner\">\n        <button\n          type=\"button\"\n          class=\"deb-dock-btn deb-dock-btn--horizontal deb-dock-btn--preview\"\n          data-testid=\"expand-preview\"\n          aria-expanded=\"false\"\n          aria-controls=\"deb-preview-section\"\n          (click)=\"expandPreview()\"\n          [matTooltip]=\"ui.text('expandPreview')\"\n          [attr.aria-label]=\"ui.text('expandPreview')\"\n        >\n          <mat-icon class=\"deb-dock-btn__icon\">visibility</mat-icon>\n          <span class=\"deb-dock-btn__label\">{{ ui.text('previewRailLabel') }}</span>\n          <mat-icon class=\"deb-dock-btn__chevron\">keyboard_arrow_up</mat-icon>\n        </button>\n      </div>\n    </div>\n\n    <!--\n      The live preview, moved up from the footer.\n      Directly under the field list is where a change and its effect can be seen in the same glance.\n    -->\n    <div\n      id=\"deb-preview-section\"\n      class=\"deb-toggle-pane deb-preview-slot\"\n      [class.deb-toggle-pane--collapsed]=\"!previewOpen()\"\n      data-testid=\"builder-preview-section\"\n      [attr.aria-hidden]=\"!previewOpen()\"\n    >\n      <div class=\"deb-toggle-pane__inner\">\n        <mat-card class=\"deb-card deb-card--preview\">\n          <mat-card-header>\n            <mat-card-title class=\"deb-card__title\">\n              <mat-icon class=\"deb-card__icon\">visibility</mat-icon>\n              {{ ui.text('previewHeading') }}\n            </mat-card-title>\n            <button\n              mat-icon-button\n              type=\"button\"\n              class=\"deb-card__collapse-btn\"\n              data-testid=\"collapse-preview\"\n              aria-expanded=\"true\"\n              aria-controls=\"deb-preview-section\"\n              (click)=\"collapsePreview()\"\n              [matTooltip]=\"ui.text('collapsePreview')\"\n              [attr.aria-label]=\"ui.text('collapsePreview')\"\n            >\n              <mat-icon>keyboard_arrow_down</mat-icon>\n            </button>\n          </mat-card-header>\n          <mat-card-content>\n            <ng-content select=\"[ngxBuilderPreview]\"></ng-content>\n          </mat-card-content>\n        </mat-card>\n      </div>\n    </div>\n  </div>\n\n  <!-- Collapsed right sidebar: the rail that brings it back. -->\n  @if (!rightSidebarOpen()) {\n    <button\n      type=\"button\"\n      class=\"deb-dock-btn deb-dock-btn--right\"\n      data-testid=\"expand-right-sidebar\"\n      aria-expanded=\"false\"\n      aria-controls=\"deb-right-sidebar\"\n      (click)=\"expandRight()\"\n      [matTooltip]=\"ui.text('expandInspector')\"\n      [attr.aria-label]=\"ui.text('expandInspector')\"\n    >\n      <mat-icon class=\"deb-dock-btn__icon\">tune</mat-icon>\n      <span class=\"deb-dock-btn__label\">{{ ui.text('inspectorRailLabel') }}</span>\n      <mat-icon class=\"deb-dock-btn__chevron\">chevron_left</mat-icon>\n    </button>\n  }\n\n  <!-- \u2500\u2500\u2500 Right: inspector \u2500\u2500\u2500 -->\n  <div\n    id=\"deb-right-sidebar\"\n    class=\"deb-col deb-col--right\"\n    data-testid=\"builder-right-sidebar\"\n    [hidden]=\"!rightSidebarOpen()\"\n  >\n    <mat-card class=\"deb-card deb-card--inspector\">\n      <mat-card-header>\n        <mat-card-title class=\"deb-card__title\">\n          <mat-icon class=\"deb-card__icon\">tune</mat-icon>\n          {{ ui.text('fieldProperties') }}\n        </mat-card-title>\n        <button\n          mat-icon-button\n          type=\"button\"\n          class=\"deb-card__collapse-btn\"\n          data-testid=\"collapse-right-sidebar\"\n          aria-expanded=\"true\"\n          aria-controls=\"deb-right-sidebar\"\n          (click)=\"collapseRight()\"\n          [matTooltip]=\"ui.text('collapseInspector')\"\n          [attr.aria-label]=\"ui.text('collapseInspector')\"\n        >\n          <mat-icon>chevron_right</mat-icon>\n        </button>\n      </mat-card-header>\n      <mat-card-content>\n        <ngx-field-inspector></ngx-field-inspector>\n      </mat-card-content>\n    </mat-card>\n  </div>\n</div>\n\n<!-- \u2500\u2500\u2500 Footer: the exported JSON \u2500\u2500\u2500 -->\n<div class=\"deb-footer\">\n  <mat-expansion-panel>\n    <mat-expansion-panel-header>\n      <mat-panel-title><mat-icon>data_object</mat-icon>&nbsp;{{ ui.text('configJson') }}</mat-panel-title>\n    </mat-expansion-panel-header>\n    <pre class=\"deb-json\">{{ json }}</pre>\n  </mat-expansion-panel>\n</div>\n", styles: ["ngx-entity-builder{--deb-accent: #6366f1;--deb-accent-hover: #4f46e5;--deb-accent-ink: #4f46e5;--deb-accent-soft: #eef2ff;--deb-border: #e2e8f0;--deb-muted: #64748b;--deb-surface: #ffffff;--deb-rail: 44px;--deb-left: clamp(320px, 26vw, 460px);--deb-right: 380px;--deb-left-wide: calc(var(--deb-left) + var(--deb-right) - var(--deb-rail));--deb-toolbar-h: 56px;--deb-sticky-top: calc(var(--deb-toolbar-h) + 20px);display:block}.deb-toolbar{background:var(--deb-surface);color:#0f172a;border-bottom:1px solid var(--deb-border);gap:4px;height:var(--deb-toolbar-h);position:sticky;top:0;z-index:20;flex-wrap:wrap;padding-block:4px}mat-toolbar.deb-toolbar{height:auto;min-height:var(--deb-toolbar-h)}.deb-toolbar__mark{color:var(--deb-accent-ink)}.deb-toolbar__title{margin-left:8px;font-family:var(--font-heading, sans-serif);font-size:15px;font-weight:700;color:#0f172a}.deb-toolbar__entity{margin-left:10px;padding:3px 10px;border-radius:9999px;background:var(--deb-accent-soft);color:var(--deb-accent-hover);font-family:ui-monospace,SFMono-Regular,monospace;font-size:12px;font-weight:600;max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.deb-spacer{flex:1 1 auto}.deb-problems{font-weight:600}.deb-problems--error{color:#ef4444;font-weight:600}.deb-problems-menu__text{white-space:normal;line-height:1.35;padding:6px 0}.deb-problems-menu .mat-mdc-menu-item{height:auto;min-height:40px}.deb-problems-menu{max-width:460px}.deb-full{width:100%}.deb-grow{flex:1}.deb-row{display:flex;gap:8px;align-items:center}.deb-row--split{justify-content:space-between}.deb-section-title{font-family:var(--font-heading, sans-serif);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--deb-muted)}.deb-hint{margin:4px 0 0;font-size:12px;color:var(--deb-muted)}.deb-chip{display:inline-block;padding:3px 10px;border-radius:9999px;background:var(--deb-accent-soft);color:var(--deb-accent-hover);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.03em}.deb-chip--muted{background:#f1f5f9;color:var(--deb-muted)}.deb-body{display:grid;grid-template-columns:var(--deb-left) minmax(0,1fr) var(--deb-right);gap:24px;padding:24px;align-items:start;transition:grid-template-columns .25s cubic-bezier(.16,1,.3,1)}.deb-body.deb-body--left-collapsed{grid-template-columns:var(--deb-rail) minmax(0,1fr) var(--deb-right)}.deb-body.deb-body--right-collapsed{grid-template-columns:var(--deb-left-wide) minmax(0,1fr) var(--deb-rail)}.deb-body.deb-body--left-collapsed.deb-body--right-collapsed{grid-template-columns:var(--deb-rail) minmax(0,1fr) var(--deb-rail)}.deb-col{display:flex;flex-direction:column;gap:18px;min-width:0}.deb-col[hidden],.deb-section--fields[hidden],.deb-preview-slot[hidden]{display:none!important}.deb-col>.deb-card{flex:0 0 auto}@keyframes debDockFadeIn{0%{opacity:0;transform:scale(.92)}to{opacity:1;transform:scale(1)}}@keyframes debDockSlideInY{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}@keyframes debSectionExpand{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}@keyframes debColLeftExpand{0%{opacity:0;transform:translate(-12px)}to{opacity:1;transform:translate(0)}}@keyframes debColRightExpand{0%{opacity:0;transform:translate(12px)}to{opacity:1;transform:translate(0)}}.deb-toggle-pane{display:grid;grid-template-rows:1fr;opacity:1;transform:translateY(0);transition:grid-template-rows .32s cubic-bezier(.16,1,.3,1),opacity .22s ease,transform .28s cubic-bezier(.16,1,.3,1)}.deb-toggle-pane--collapsed{grid-template-rows:0fr;opacity:0;transform:translateY(-8px);pointer-events:none;visibility:hidden}.deb-toggle-pane__inner,.deb-dock-pane__inner{overflow:hidden;min-height:0;padding:4px 2px;margin:-4px -2px}.deb-dock-pane{display:grid;grid-template-rows:0fr;opacity:0;transform:translateY(-8px);pointer-events:none;visibility:hidden;transition:grid-template-rows .32s cubic-bezier(.16,1,.3,1),opacity .22s ease,transform .28s cubic-bezier(.16,1,.3,1)}.deb-dock-pane--open{grid-template-rows:1fr;opacity:1;transform:translateY(0);pointer-events:auto;visibility:visible}.deb-col--left:not([hidden]){animation:debColLeftExpand .24s cubic-bezier(.16,1,.3,1) forwards}.deb-col--right:not([hidden]){animation:debColRightExpand .24s cubic-bezier(.16,1,.3,1) forwards}@media(prefers-reduced-motion:reduce){.deb-body,.deb-col--left,.deb-col--right,.deb-col--center,.deb-section--fields,.deb-preview-slot,.deb-dock-btn,.deb-card,.deb-sidebar-toggle-btn{transition:none!important;animation:none!important}}.deb-col--left,.deb-col--right{position:sticky;top:var(--deb-sticky-top);max-height:calc(100vh - var(--deb-sticky-top) - 20px);overflow-y:auto;padding-right:4px;transition:opacity .2s ease}.deb-card{border-radius:12px!important;border:1px solid var(--deb-border, #e2e8f0)!important;background:var(--deb-surface, #ffffff)!important;box-shadow:0 1px 3px #00000008,0 1px 2px #00000005!important;transition:box-shadow .2s ease,border-color .2s ease!important;overflow:hidden}.deb-card:hover{border-color:#cbd5e1!important;box-shadow:0 4px 12px #0f172a0d!important}.deb-card mat-card-header{padding:14px 16px 10px!important;display:flex!important;align-items:center!important}.deb-card mat-card-content{padding:0 16px 16px!important}.deb-card__title{display:flex!important;align-items:center!important;gap:8px!important;font-family:var(--font-heading, sans-serif)!important;font-size:13.5px!important;font-weight:700!important;color:#0f172a!important;margin:0!important}.deb-card__icon{color:var(--deb-accent-ink, #4f46e5)!important;font-size:18px!important;width:18px!important;height:18px!important;flex:none!important}.deb-card__collapse-btn{margin-left:auto!important;width:32px!important;height:32px!important;color:var(--deb-muted, #64748b)!important;display:inline-flex!important;align-items:center!important;justify-content:center!important}.deb-card__collapse-btn:hover{color:#0f172a!important;background:#f1f5f9!important}.deb-sidebar-toggle-btn{color:var(--deb-muted, #64748b);transition:all .15s ease}.deb-sidebar-toggle-btn:hover{color:#0f172a;background:#f1f5f9}.deb-sidebar-toggle-btn--active{color:var(--deb-accent-ink, #4f46e5)!important;background:var(--deb-accent-soft, #eef2ff)!important}.deb-dock-btn{position:sticky;top:var(--deb-sticky-top);align-self:start;justify-self:center;z-index:10;display:inline-flex;flex-direction:column;align-items:center;gap:10px;width:36px;padding:12px 0;border-radius:9999px;border:1px solid #c7d2fe;background:#fff;color:var(--deb-accent-hover, #4f46e5);font-family:var(--font-heading, sans-serif);font-size:12px;font-weight:700;box-shadow:0 4px 14px #6366f126;cursor:pointer;animation:debDockFadeIn .22s cubic-bezier(.16,1,.3,1) forwards;transition:background .2s ease,border-color .2s ease,box-shadow .2s ease}.deb-dock-btn:hover{background:var(--deb-accent-soft, #eef2ff);border-color:var(--deb-accent, #6366f1);box-shadow:0 6px 20px #6366f140}.deb-dock-btn mat-icon{flex:none}.deb-dock-btn__icon{font-size:20px;width:20px;height:20px;color:var(--deb-accent-ink, #4f46e5)}.deb-dock-btn__chevron{font-size:16px;width:16px;height:16px;opacity:.75}.deb-dock-btn__label{display:none;letter-spacing:.04em;white-space:nowrap}.deb-dock-btn--horizontal{flex-direction:row;justify-content:center;width:100%;padding:10px 18px;border-radius:12px;gap:12px;position:static;animation:debDockSlideInY .22s cubic-bezier(.16,1,.3,1) forwards}.deb-dock-btn--horizontal .deb-dock-btn__label{display:inline}.deb-card--preview mat-card-content{padding:0 16px 16px!important}.deb-settings-grid{display:grid;grid-template-columns:1.4fr 1fr;gap:8px;margin-bottom:6px}.deb-mask-row{padding:4px 0 8px}.deb-preview-slot:empty{display:none}@media(max-width:1300px){ngx-entity-builder{--deb-left: clamp(280px, 28vw, 340px)}.deb-body{grid-template-columns:var(--deb-left) minmax(0,1fr)}.deb-body.deb-body--right-collapsed{grid-template-columns:var(--deb-left) minmax(0,1fr) var(--deb-rail)}.deb-body.deb-body--left-collapsed{grid-template-columns:var(--deb-rail) minmax(0,1fr)}.deb-body.deb-body--left-collapsed.deb-body--right-collapsed{grid-template-columns:var(--deb-rail) minmax(0,1fr) var(--deb-rail)}.deb-col--right{grid-column:2;position:static;max-height:none;overflow:visible}}@media(max-width:900px){ngx-entity-builder{--deb-rail: 36px}.deb-body{gap:12px;padding:12px;grid-template-columns:minmax(0,1fr)}.deb-body.deb-body--left-collapsed,.deb-body.deb-body--right-collapsed,.deb-body.deb-body--left-collapsed.deb-body--right-collapsed{grid-template-columns:minmax(0,1fr)}.deb-col--left,.deb-col--right,.deb-dock-btn--left,.deb-dock-btn--right{grid-column:1;position:static;max-height:none;overflow:visible}.deb-dock-btn--left,.deb-dock-btn--right{flex-direction:row;justify-content:center;width:auto;justify-self:stretch;padding:10px 16px}.deb-dock-btn__label{display:inline}}@media(max-width:900px){.deb-toolbar__title,.deb-toolbar__mark{display:none}}@media(max-width:560px){.deb-toolbar__btn-label{display:none}}.deb-canvas__group{margin:14px 0 6px;font-family:var(--font-heading, sans-serif);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--deb-muted)}.deb-canvas__group:first-of-type{margin-top:0}.deb-field-list{display:flex;flex-direction:column;gap:8px}.deb-field-list:empty{min-height:44px;border:1px dashed var(--deb-border);border-radius:10px}.deb-field-row{display:flex;align-items:center;gap:10px;padding:9px 12px;border:1px solid var(--deb-border);border-radius:10px;background:var(--deb-surface);cursor:pointer;box-shadow:0 1px 3px #00000008;transition:all .18s cubic-bezier(.16,1,.3,1)}.deb-field-row:hover{border-color:#a5b4fc;background:#fcfaff;transform:translateY(-1px);box-shadow:0 4px 12px #6366f114}.deb-field-row--active{border-color:var(--deb-accent);border-left:4px solid var(--deb-accent);background:#f5f3ff;box-shadow:0 4px 16px #6366f12e}.deb-field-row__actions{display:flex;align-items:center;margin-left:auto;opacity:0;transition:opacity .15s ease}.deb-field-row:hover .deb-field-row__actions,.deb-field-row:focus-within .deb-field-row__actions,.deb-field-row--active .deb-field-row__actions{opacity:1}@media(hover:none){.deb-field-row__actions{opacity:1}}@media(max-width:560px){.deb-field-row{flex-wrap:wrap;row-gap:4px}.deb-field-row__actions{margin-left:auto}}.deb-type-badge{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;padding:2px 7px;border-radius:6px;background:#e0e7ff;color:#4338ca;flex:none}.deb-span-badge{font-size:10px;font-weight:700;padding:2px 7px;border-radius:6px;background:#f1f5f9;color:#475569;font-family:ui-monospace,SFMono-Regular,monospace;flex:none}.deb-drag-handle{cursor:grab;color:#7d8a9c;transition:color .15s;flex:none}.deb-drag-handle:hover{color:var(--deb-accent-ink)}.deb-field-type{color:var(--deb-accent-ink);flex:none}.deb-field-meta{display:flex;flex-direction:column;min-width:0;flex:1}.deb-field-label{font-family:var(--font-heading, sans-serif);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#0f172a;font-size:14px}.deb-field-id{font-size:11px;color:var(--deb-muted);font-family:ui-monospace,SFMono-Regular,monospace}.deb-req{color:#dc2626;font-weight:700;flex:none}.deb-empty,.deb-inspector__empty{text-align:center;color:var(--deb-muted);padding:40px 16px}.deb-empty mat-icon{transform:scale(1.8);margin-bottom:16px;color:#cbd5e1}.cdk-drag-preview.deb-field-row{box-shadow:0 12px 28px #4f46e538;border-radius:10px;border:1px solid var(--deb-accent, #6366f1);background:#fff}.cdk-drag-placeholder.deb-field-row{opacity:.35}.cdk-drag-animating.deb-field-row{transition:transform .2s cubic-bezier(0,0,.2,1)}.deb-field-list.cdk-drop-list-dragging .deb-field-row:not(.cdk-drag-placeholder){transition:transform .2s cubic-bezier(0,0,.2,1)}@media(prefers-reduced-motion:reduce){.deb-field-row,.deb-field-row__actions,.cdk-drag-animating.deb-field-row,.deb-field-list.cdk-drop-list-dragging .deb-field-row:not(.cdk-drag-placeholder){transition:none}.deb-field-row:hover{transform:none}}.deb-inspector{display:flex;flex-direction:column;gap:12px}.deb-inspector__section{border:1px solid var(--deb-border);border-radius:10px;overflow:hidden;background:var(--deb-surface)}.deb-inspector__summary{display:flex;align-items:center;gap:8px;width:100%;padding:10px 12px;cursor:pointer;list-style:none;font-family:var(--font-heading, sans-serif);font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--deb-muted);background:#f8fafc;-webkit-user-select:none;user-select:none}.deb-inspector__summary::-webkit-details-marker{display:none}.deb-inspector__summary:hover{color:#0f172a}.deb-inspector__summary:focus-visible{outline:2px solid var(--deb-accent);outline-offset:-2px}.deb-inspector__chevron{margin-left:auto;transition:transform .18s ease;color:#7d8a9c;font-size:20px;width:20px;height:20px}.deb-inspector__section[open]>.deb-inspector__summary>.deb-inspector__chevron{transform:rotate(180deg)}.deb-inspector__count{padding:1px 7px;border-radius:9999px;background:var(--deb-accent-soft);color:var(--deb-accent-hover);font-size:10px;font-weight:700;letter-spacing:0}.deb-inspector__body{display:flex;flex-direction:column;gap:10px;padding:12px;border-top:1px solid var(--deb-border)}@media(prefers-reduced-motion:reduce){.deb-inspector__chevron{transition:none}}.deb-span-picker{display:flex;gap:4px;flex-wrap:wrap}.deb-span-picker__btn{appearance:none;cursor:pointer;flex:1;min-width:46px;padding:7px 4px;border:1px solid var(--deb-border);border-radius:8px;background:var(--deb-surface);color:var(--deb-muted);font:inherit;font-size:12px;font-weight:700;transition:border-color .15s ease,background .15s ease,color .15s ease}.deb-span-picker__btn:hover{border-color:#a5b4fc;color:#0f172a}.deb-span-picker__btn:focus-visible{outline:2px solid var(--deb-accent);outline-offset:2px}.deb-span-picker__btn--active{border-color:var(--deb-accent);background:var(--deb-accent-soft);color:var(--deb-accent-hover)}.deb-option-row{display:flex;align-items:center;gap:8px}.deb-flags-row{display:flex;gap:16px;flex-wrap:wrap;padding:2px 0 6px}.deb-param-validators-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}.deb-toggles{display:flex;flex-direction:column;gap:6px}.deb-toggles mat-slide-toggle{display:flex;justify-content:space-between;width:100%;padding:5px 8px;border-radius:8px;background:#f8fafc;border:1px solid #f1f5f9;transition:all .15s ease}.deb-toggles mat-slide-toggle:hover{background:#f1f5f9;border-color:#e2e8f0}@media(prefers-reduced-motion:reduce){.deb-span-picker__btn{transition:none}}.deb-footer{padding:0 20px 20px;display:flex;flex-direction:column;gap:16px}.deb-json{margin:0;max-height:320px;overflow:auto;font-family:ui-monospace,SFMono-Regular,monospace;font-size:12px;line-height:1.5;padding:14px;background:#0f172a;color:#e2e8f0;border-radius:10px}.deb-path-hint{color:#0000008c;font-size:11px;margin-left:6px}\n"] }]
         }], ctorParameters: () => [], propDecorators: { config: [{
                 type: Input
             }], languages: [{
@@ -4268,7 +4343,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
                 type: Output
             }], save: [{
                 type: Output
-            }], leftSidebarOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "leftSidebarOpen", required: false }] }, { type: i0.Output, args: ["leftSidebarOpenChange"] }], rightSidebarOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "rightSidebarOpen", required: false }] }, { type: i0.Output, args: ["rightSidebarOpenChange"] }], onKeydown: [{
+            }], leftSidebarOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "leftSidebarOpen", required: false }] }, { type: i0.Output, args: ["leftSidebarOpenChange"] }], rightSidebarOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "rightSidebarOpen", required: false }] }, { type: i0.Output, args: ["rightSidebarOpenChange"] }], fieldsOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "fieldsOpen", required: false }] }, { type: i0.Output, args: ["fieldsOpenChange"] }], previewOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "previewOpen", required: false }] }, { type: i0.Output, args: ["previewOpenChange"] }], onKeydown: [{
                 type: HostListener,
                 args: ['document:keydown', ['$event']]
             }] } });