@memberjunction/ng-dashboards 5.37.0 → 5.39.0

package/dist/ComponentStudio/components/form-builder/form-builder-right-panel.component.d.ts

@@ -0,0 +1,65 @@
+import { EventEmitter } from '@angular/core';
+import type { CuratedFormField, CuratedFormSchema } from '@memberjunction/interactive-component-types/forms';
+import type { FormCanvasElement, FormCanvasModel, FormCanvasSection } from '../../services/form-canvas-model';
+import * as i0 from "@angular/core";
+/**
+ * Right-panel inspector. Two modes:
+ *
+ * 1. **Palette mode** (default — no element selected): shows the curated
+ *    fields for the active entity. Each row is a CDK drag source — drop
+ *    onto a section to add a field element. Includes a search filter and a
+ *    "bound" badge that mirrors which fields are already on the canvas.
+ *
+ * 2. **Inspector mode** (element selected): shows the selected element's
+ *    properties (label override, helper text, required flag, span).
+ *
+ * The component is presentational — it emits events but doesn't mutate
+ * canvas state. The dashboard owns the canvas and applies the updates.
+ */
+export declare class FormBuilderRightPanelComponent {
+    private _schema;
+    set Schema(value: CuratedFormSchema | null);
+    get Schema(): CuratedFormSchema | null;
+    private _canvas;
+    set Canvas(value: FormCanvasModel | null);
+    get Canvas(): FormCanvasModel | null;
+    SelectedElementId: string | null;
+    SelectedSectionId: string | null;
+    /** Emitted when the user updates a property on the selected element. */
+    ElementChanged: EventEmitter<FormCanvasElement>;
+    /** Emitted when the user updates a property on the selected section. */
+    SectionChanged: EventEmitter<FormCanvasSection>;
+    /** Delete the currently-selected element. */
+    ElementDeleted: EventEmitter<string>;
+    /** Delete the currently-selected section. */
+    SectionDeleted: EventEmitter<string>;
+    /** Add a new element from the palette (drag fallback for non-DnD inputs). */
+    FieldAdded: EventEmitter<{
+        fieldName: string;
+    }>;
+    Search: string;
+    private boundFieldNames;
+    private readonly cdr;
+    get filteredFields(): CuratedFormField[];
+    get SelectedElement(): FormCanvasElement | null;
+    get SelectedSection(): FormCanvasSection | null;
+    get SelectedField(): CuratedFormField | null;
+    isBound(fieldName: string): boolean;
+    OnSearchInput(event: Event): void;
+    OnElementLabelInput(event: Event): void;
+    OnElementHelperInput(event: Event): void;
+    OnElementRequiredChange(event: Event): void;
+    OnElementSpanChange(event: Event): void;
+    OnElementTextInput(event: Event): void;
+    OnElementExpressionInput(event: Event): void;
+    OnDeleteElement(): void;
+    OnSectionTitleInput(event: Event): void;
+    OnSectionColumnsChange(event: Event): void;
+    OnSectionCollapsibleChange(event: Event): void;
+    OnDeleteSection(): void;
+    OnPaletteClick(field: CuratedFormField): void;
+    private recomputeBoundFields;
+    static ɵfac: i0.ɵɵFactoryDeclaration<FormBuilderRightPanelComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<FormBuilderRightPanelComponent, "mj-form-builder-right-panel", never, { "Schema": { "alias": "Schema"; "required": false; }; "Canvas": { "alias": "Canvas"; "required": false; }; "SelectedElementId": { "alias": "SelectedElementId"; "required": false; }; "SelectedSectionId": { "alias": "SelectedSectionId"; "required": false; }; }, { "ElementChanged": "ElementChanged"; "SectionChanged": "SectionChanged"; "ElementDeleted": "ElementDeleted"; "SectionDeleted": "SectionDeleted"; "FieldAdded": "FieldAdded"; }, never, never, false, never>;
+}
+//# sourceMappingURL=form-builder-right-panel.component.d.ts.map

package/dist/ComponentStudio/components/form-builder/form-builder-right-panel.component.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"form-builder-right-panel.component.d.ts","sourceRoot":"","sources":["../../../../src/ComponentStudio/components/form-builder/form-builder-right-panel.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAIH,YAAY,EAIf,MAAM,eAAe,CAAC;AACvB,OAAO,KAAK,EAAE,gBAAgB,EAAE,iBAAiB,EAAE,MAAM,mDAAmD,CAAC;AAC7G,OAAO,KAAK,EAAE,iBAAiB,EAAE,eAAe,EAAE,iBAAiB,EAAE,MAAM,kCAAkC,CAAC;;AAE9G;;;;;;;;;;;;;GAaG;AACH,qBAOa,8BAA8B;IACvC,OAAO,CAAC,OAAO,CAAkC;IACjD,IACI,MAAM,CAAC,KAAK,EAAE,iBAAiB,GAAG,IAAI,EAGzC;IACD,IAAI,MAAM,IAAI,iBAAiB,GAAG,IAAI,CAErC;IAED,OAAO,CAAC,OAAO,CAAgC;IAC/C,IACI,MAAM,CAAC,KAAK,EAAE,eAAe,GAAG,IAAI,EAIvC;IACD,IAAI,MAAM,IAAI,eAAe,GAAG,IAAI,CAEnC;IAEQ,iBAAiB,EAAE,MAAM,GAAG,IAAI,CAAQ;IACxC,iBAAiB,EAAE,MAAM,GAAG,IAAI,CAAQ;IAEjD,wEAAwE;IAC9D,cAAc,kCAAyC;IACjE,wEAAwE;IAC9D,cAAc,kCAAyC;IACjE,6CAA6C;IACnC,cAAc,uBAA8B;IACtD,6CAA6C;IACnC,cAAc,uBAA8B;IACtD,6EAA6E;IACnE,UAAU;mBAAiC,MAAM;OAAM;IAE1D,MAAM,SAAM;IACnB,OAAO,CAAC,eAAe,CAAqB;IAE5C,OAAO,CAAC,QAAQ,CAAC,GAAG,CAA6B;IAEjD,IAAW,cAAc,IAAI,gBAAgB,EAAE,CAQ9C;IAED,IAAW,eAAe,IAAI,iBAAiB,GAAG,IAAI,CAOrD;IAED,IAAW,eAAe,IAAI,iBAAiB,GAAG,IAAI,CAGrD;IAED,IAAW,aAAa,IAAI,gBAAgB,GAAG,IAAI,CAIlD;IAEM,OAAO,CAAC,SAAS,EAAE,MAAM,GAAG,OAAO;IAInC,aAAa,CAAC,KAAK,EAAE,KAAK,GAAG,IAAI;IAIjC,mBAAmB,CAAC,KAAK,EAAE,KAAK,GAAG,IAAI;IAOvC,oBAAoB,CAAC,KAAK,EAAE,KAAK,GAAG,IAAI;IAQxC,uBAAuB,CAAC,KAAK,EAAE,KAAK,GAAG,IAAI;IAO3C,mBAAmB,CAAC,KAAK,EAAE,KAAK,GAAG,IAAI;IAQvC,kBAAkB,CAAC,KAAK,EAAE,KAAK,GAAG,IAAI;IAOtC,wBAAwB,CAAC,KAAK,EAAE,KAAK,GAAG,IAAI;IAO5C,eAAe,IAAI,IAAI;IAMvB,mBAAmB,CAAC,KAAK,EAAE,KAAK,GAAG,IAAI;IAOvC,sBAAsB,CAAC,KAAK,EAAE,KAAK,GAAG,IAAI;IAQ1C,0BAA0B,CAAC,KAAK,EAAE,KAAK,GAAG,IAAI;IAO9C,eAAe,IAAI,IAAI;IAMvB,cAAc,CAAC,KAAK,EAAE,gBAAgB,GAAG,IAAI;IAIpD,OAAO,CAAC,oBAAoB;yCAjKnB,8BAA8B;2CAA9B,8BAA8B;CA4K1C"}

package/dist/ComponentStudio/components/form-builder/form-builder-right-panel.component.js

@@ -0,0 +1,492 @@
+import { Component, ChangeDetectionStrategy, ChangeDetectorRef, EventEmitter, Input, Output, inject, } from '@angular/core';
+import * as i0 from "@angular/core";
+import * as i1 from "@angular/forms";
+const _forTrack0 = ($index, $item) => $item.name;
+function FormBuilderRightPanelComponent_Conditional_1_Conditional_7_Conditional_7_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 12);
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(3);
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1("\u2192 ", ctx_r1.SelectedField.references.entity);
+} }
+function FormBuilderRightPanelComponent_Conditional_1_Conditional_7_Template(rf, ctx) { if (rf & 1) {
+    const _r3 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "section", 7)(1, "div", 8)(2, "div", 9);
+    i0.ɵɵtext(3);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(4, "div", 10)(5, "span", 11);
+    i0.ɵɵtext(6);
+    i0.ɵɵelementEnd();
+    i0.ɵɵconditionalCreate(7, FormBuilderRightPanelComponent_Conditional_1_Conditional_7_Conditional_7_Template, 2, 1, "span", 12);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(8, "div", 13)(9, "label");
+    i0.ɵɵtext(10, "Label override");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(11, "input", 14);
+    i0.ɵɵlistener("input", function FormBuilderRightPanelComponent_Conditional_1_Conditional_7_Template_input_input_11_listener($event) { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.OnElementLabelInput($event)); });
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(12, "div", 13)(13, "label");
+    i0.ɵɵtext(14, "Helper text");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(15, "input", 15);
+    i0.ɵɵlistener("input", function FormBuilderRightPanelComponent_Conditional_1_Conditional_7_Template_input_input_15_listener($event) { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.OnElementHelperInput($event)); });
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(16, "div", 16)(17, "label", 17)(18, "input", 18);
+    i0.ɵɵlistener("change", function FormBuilderRightPanelComponent_Conditional_1_Conditional_7_Template_input_change_18_listener($event) { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.OnElementRequiredChange($event)); });
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(19, "span");
+    i0.ɵɵtext(20, "Required");
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(21, "div", 19)(22, "label");
+    i0.ɵɵtext(23, "Span");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(24, "select", 20);
+    i0.ɵɵlistener("change", function FormBuilderRightPanelComponent_Conditional_1_Conditional_7_Template_select_change_24_listener($event) { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.OnElementSpanChange($event)); });
+    i0.ɵɵelementStart(25, "option", 21);
+    i0.ɵɵtext(26, "Half");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(27, "option", 22);
+    i0.ɵɵtext(28, "Full width");
+    i0.ɵɵelementEnd()()()()();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance(3);
+    i0.ɵɵtextInterpolate(ctx_r1.SelectedField.displayName || ctx_r1.SelectedField.name);
+    i0.ɵɵadvance(3);
+    i0.ɵɵtextInterpolate(ctx_r1.SelectedField.type);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional((ctx_r1.SelectedField.references == null ? null : ctx_r1.SelectedField.references.entity) ? 7 : -1);
+    i0.ɵɵadvance(4);
+    i0.ɵɵproperty("value", ctx_r1.SelectedElement.label ?? "")("placeholder", ctx_r1.SelectedField.displayName ?? ctx_r1.SelectedField.name);
+    i0.ɵɵadvance(4);
+    i0.ɵɵproperty("value", ctx_r1.SelectedElement.helper ?? "");
+    i0.ɵɵadvance(3);
+    i0.ɵɵproperty("checked", ctx_r1.SelectedElement.required ?? ctx_r1.SelectedField.required);
+    i0.ɵɵadvance(6);
+    i0.ɵɵproperty("value", (ctx_r1.SelectedElement.span ?? 1).toString());
+} }
+function FormBuilderRightPanelComponent_Conditional_1_Conditional_8_Template(rf, ctx) { if (rf & 1) {
+    const _r4 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "section", 7)(1, "div", 13)(2, "label");
+    i0.ɵɵtext(3, "Static text");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(4, "input", 23);
+    i0.ɵɵlistener("input", function FormBuilderRightPanelComponent_Conditional_1_Conditional_8_Template_input_input_4_listener($event) { i0.ɵɵrestoreView(_r4); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.OnElementTextInput($event)); });
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(5, "div", 19)(6, "label");
+    i0.ɵɵtext(7, "Span");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(8, "select", 20);
+    i0.ɵɵlistener("change", function FormBuilderRightPanelComponent_Conditional_1_Conditional_8_Template_select_change_8_listener($event) { i0.ɵɵrestoreView(_r4); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.OnElementSpanChange($event)); });
+    i0.ɵɵelementStart(9, "option", 21);
+    i0.ɵɵtext(10, "Half");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(11, "option", 22);
+    i0.ɵɵtext(12, "Full width");
+    i0.ɵɵelementEnd()()()();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance(4);
+    i0.ɵɵproperty("value", ctx_r1.SelectedElement.text ?? "");
+    i0.ɵɵadvance(4);
+    i0.ɵɵproperty("value", (ctx_r1.SelectedElement.span ?? 1).toString());
+} }
+function FormBuilderRightPanelComponent_Conditional_1_Conditional_9_Template(rf, ctx) { if (rf & 1) {
+    const _r5 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "section", 7)(1, "div", 13)(2, "label");
+    i0.ɵɵtext(3, "Label");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(4, "input", 24);
+    i0.ɵɵlistener("input", function FormBuilderRightPanelComponent_Conditional_1_Conditional_9_Template_input_input_4_listener($event) { i0.ɵɵrestoreView(_r5); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.OnElementLabelInput($event)); });
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(5, "div", 13)(6, "label");
+    i0.ɵɵtext(7, "Expression");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(8, "input", 25);
+    i0.ɵɵlistener("input", function FormBuilderRightPanelComponent_Conditional_1_Conditional_9_Template_input_input_8_listener($event) { i0.ɵɵrestoreView(_r5); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.OnElementExpressionInput($event)); });
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(9, "small");
+    i0.ɵɵtext(10, "Evaluated at runtime against ");
+    i0.ɵɵelementStart(11, "code");
+    i0.ɵɵtext(12, "record");
+    i0.ɵɵelementEnd();
+    i0.ɵɵtext(13, ".");
+    i0.ɵɵelementEnd()()();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance(4);
+    i0.ɵɵproperty("value", ctx_r1.SelectedElement.label ?? "");
+    i0.ɵɵadvance(4);
+    i0.ɵɵproperty("value", ctx_r1.SelectedElement.expression ?? "");
+} }
+function FormBuilderRightPanelComponent_Conditional_1_Conditional_10_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "section", 7)(1, "p", 26);
+    i0.ɵɵtext(2, "Spacer element. No properties.");
+    i0.ɵɵelementEnd()();
+} }
+function FormBuilderRightPanelComponent_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    const _r1 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "header", 2)(1, "div", 3);
+    i0.ɵɵelement(2, "i", 4);
+    i0.ɵɵelementStart(3, "span");
+    i0.ɵɵtext(4, "Element Properties");
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(5, "button", 5);
+    i0.ɵɵlistener("click", function FormBuilderRightPanelComponent_Conditional_1_Template_button_click_5_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.OnDeleteElement()); });
+    i0.ɵɵelement(6, "i", 6);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵconditionalCreate(7, FormBuilderRightPanelComponent_Conditional_1_Conditional_7_Template, 29, 8, "section", 7)(8, FormBuilderRightPanelComponent_Conditional_1_Conditional_8_Template, 13, 2, "section", 7)(9, FormBuilderRightPanelComponent_Conditional_1_Conditional_9_Template, 14, 2, "section", 7)(10, FormBuilderRightPanelComponent_Conditional_1_Conditional_10_Template, 3, 0, "section", 7);
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵadvance(7);
+    i0.ɵɵconditional(ctx_r1.SelectedElement.type === "field" && ctx_r1.SelectedField ? 7 : ctx_r1.SelectedElement.type === "static-text" ? 8 : ctx_r1.SelectedElement.type === "computed" ? 9 : ctx_r1.SelectedElement.type === "spacer" ? 10 : -1);
+} }
+function FormBuilderRightPanelComponent_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    const _r6 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "header", 2)(1, "div", 3);
+    i0.ɵɵelement(2, "i", 27);
+    i0.ɵɵelementStart(3, "span");
+    i0.ɵɵtext(4, "Section Properties");
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(5, "button", 28);
+    i0.ɵɵlistener("click", function FormBuilderRightPanelComponent_Conditional_2_Template_button_click_5_listener() { i0.ɵɵrestoreView(_r6); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.OnDeleteSection()); });
+    i0.ɵɵelement(6, "i", 6);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(7, "section", 7)(8, "div", 13)(9, "label");
+    i0.ɵɵtext(10, "Title");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(11, "input", 24);
+    i0.ɵɵlistener("input", function FormBuilderRightPanelComponent_Conditional_2_Template_input_input_11_listener($event) { i0.ɵɵrestoreView(_r6); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.OnSectionTitleInput($event)); });
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(12, "div", 19)(13, "label");
+    i0.ɵɵtext(14, "Columns");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(15, "select", 20);
+    i0.ɵɵlistener("change", function FormBuilderRightPanelComponent_Conditional_2_Template_select_change_15_listener($event) { i0.ɵɵrestoreView(_r6); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.OnSectionColumnsChange($event)); });
+    i0.ɵɵelementStart(16, "option", 21);
+    i0.ɵɵtext(17, "1 column");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(18, "option", 22);
+    i0.ɵɵtext(19, "2 columns");
+    i0.ɵɵelementEnd()()();
+    i0.ɵɵelementStart(20, "label", 17)(21, "input", 18);
+    i0.ɵɵlistener("change", function FormBuilderRightPanelComponent_Conditional_2_Template_input_change_21_listener($event) { i0.ɵɵrestoreView(_r6); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.OnSectionCollapsibleChange($event)); });
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(22, "span");
+    i0.ɵɵtext(23, "Collapsible");
+    i0.ɵɵelementEnd()()();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵadvance(11);
+    i0.ɵɵproperty("value", ctx_r1.SelectedSection.title);
+    i0.ɵɵadvance(4);
+    i0.ɵɵproperty("value", ctx_r1.SelectedSection.columns.toString());
+    i0.ɵɵadvance(6);
+    i0.ɵɵproperty("checked", ctx_r1.SelectedSection.collapsible);
+} }
+function FormBuilderRightPanelComponent_Conditional_3_For_9_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 37);
+} }
+function FormBuilderRightPanelComponent_Conditional_3_For_9_Conditional_3_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 38);
+} }
+function FormBuilderRightPanelComponent_Conditional_3_For_9_Conditional_7_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 41);
+    i0.ɵɵtext(1, "*");
+    i0.ɵɵelementEnd();
+} }
+function FormBuilderRightPanelComponent_Conditional_3_For_9_Conditional_11_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 12);
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const f_r9 = i0.ɵɵnextContext().$implicit;
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1("\u2192 ", f_r9.references.entity);
+} }
+function FormBuilderRightPanelComponent_Conditional_3_For_9_Conditional_12_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 43);
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const f_r9 = i0.ɵɵnextContext().$implicit;
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1("", f_r9.allowedValues.length, " values");
+} }
+function FormBuilderRightPanelComponent_Conditional_3_For_9_Template(rf, ctx) { if (rf & 1) {
+    const _r8 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "li", 35);
+    i0.ɵɵlistener("click", function FormBuilderRightPanelComponent_Conditional_3_For_9_Template_li_click_0_listener() { const f_r9 = i0.ɵɵrestoreView(_r8).$implicit; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.OnPaletteClick(f_r9)); })("dragstart", function FormBuilderRightPanelComponent_Conditional_3_For_9_Template_li_dragstart_0_listener($event) { const f_r9 = i0.ɵɵrestoreView(_r8).$implicit; return i0.ɵɵresetView($event.dataTransfer == null ? null : $event.dataTransfer.setData("text/x-mj-form-field", f_r9.name)); });
+    i0.ɵɵelementStart(1, "span", 36);
+    i0.ɵɵconditionalCreate(2, FormBuilderRightPanelComponent_Conditional_3_For_9_Conditional_2_Template, 1, 0, "i", 37)(3, FormBuilderRightPanelComponent_Conditional_3_For_9_Conditional_3_Template, 1, 0, "i", 38);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(4, "div", 39)(5, "div", 40);
+    i0.ɵɵtext(6);
+    i0.ɵɵconditionalCreate(7, FormBuilderRightPanelComponent_Conditional_3_For_9_Conditional_7_Template, 2, 0, "span", 41);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(8, "div", 42)(9, "span", 11);
+    i0.ɵɵtext(10);
+    i0.ɵɵelementEnd();
+    i0.ɵɵconditionalCreate(11, FormBuilderRightPanelComponent_Conditional_3_For_9_Conditional_11_Template, 2, 1, "span", 12);
+    i0.ɵɵconditionalCreate(12, FormBuilderRightPanelComponent_Conditional_3_For_9_Conditional_12_Template, 2, 1, "span", 43);
+    i0.ɵɵelementEnd()()();
+} if (rf & 2) {
+    const f_r9 = ctx.$implicit;
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵclassProp("bound", ctx_r1.isBound(f_r9.name));
+    i0.ɵɵattribute("data-field-name", f_r9.name);
+    i0.ɵɵadvance(2);
+    i0.ɵɵconditional(ctx_r1.isBound(f_r9.name) ? 2 : 3);
+    i0.ɵɵadvance(4);
+    i0.ɵɵtextInterpolate1(" ", f_r9.displayName || f_r9.name, " ");
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(f_r9.required ? 7 : -1);
+    i0.ɵɵadvance(3);
+    i0.ɵɵtextInterpolate(f_r9.type);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional((f_r9.references == null ? null : f_r9.references.entity) ? 11 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(f_r9.allowedValues && f_r9.allowedValues.length > 0 ? 12 : -1);
+} }
+function FormBuilderRightPanelComponent_Conditional_3_Template(rf, ctx) { if (rf & 1) {
+    const _r7 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "header", 2)(1, "div", 3);
+    i0.ɵɵelement(2, "i", 29);
+    i0.ɵɵelementStart(3, "span");
+    i0.ɵɵtext(4, "Field Palette");
+    i0.ɵɵelementEnd()()();
+    i0.ɵɵelementStart(5, "section", 30)(6, "input", 31);
+    i0.ɵɵlistener("input", function FormBuilderRightPanelComponent_Conditional_3_Template_input_input_6_listener($event) { i0.ɵɵrestoreView(_r7); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.OnSearchInput($event)); });
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(7, "ul", 32);
+    i0.ɵɵrepeaterCreate(8, FormBuilderRightPanelComponent_Conditional_3_For_9_Template, 13, 9, "li", 33, _forTrack0);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(10, "footer", 34)(11, "small");
+    i0.ɵɵtext(12, "Drag a field onto a section, or click to add to the focused section.");
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵadvance(6);
+    i0.ɵɵproperty("value", ctx_r1.Search);
+    i0.ɵɵadvance(2);
+    i0.ɵɵrepeater(ctx_r1.filteredFields);
+} }
+function FormBuilderRightPanelComponent_Conditional_4_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 1);
+    i0.ɵɵelement(1, "i", 44);
+    i0.ɵɵelementStart(2, "p");
+    i0.ɵɵtext(3, "Pick an entity from the canvas toolbar to load its field palette.");
+    i0.ɵɵelementEnd()();
+} }
+/**
+ * Right-panel inspector. Two modes:
+ *
+ * 1. **Palette mode** (default — no element selected): shows the curated
+ *    fields for the active entity. Each row is a CDK drag source — drop
+ *    onto a section to add a field element. Includes a search filter and a
+ *    "bound" badge that mirrors which fields are already on the canvas.
+ *
+ * 2. **Inspector mode** (element selected): shows the selected element's
+ *    properties (label override, helper text, required flag, span).
+ *
+ * The component is presentational — it emits events but doesn't mutate
+ * canvas state. The dashboard owns the canvas and applies the updates.
+ */
+export class FormBuilderRightPanelComponent {
+    _schema = null;
+    set Schema(value) {
+        this._schema = value;
+        this.cdr.markForCheck();
+    }
+    get Schema() {
+        return this._schema;
+    }
+    _canvas = null;
+    set Canvas(value) {
+        this._canvas = value;
+        this.recomputeBoundFields();
+        this.cdr.markForCheck();
+    }
+    get Canvas() {
+        return this._canvas;
+    }
+    SelectedElementId = null;
+    SelectedSectionId = null;
+    /** Emitted when the user updates a property on the selected element. */
+    ElementChanged = new EventEmitter();
+    /** Emitted when the user updates a property on the selected section. */
+    SectionChanged = new EventEmitter();
+    /** Delete the currently-selected element. */
+    ElementDeleted = new EventEmitter();
+    /** Delete the currently-selected section. */
+    SectionDeleted = new EventEmitter();
+    /** Add a new element from the palette (drag fallback for non-DnD inputs). */
+    FieldAdded = new EventEmitter();
+    Search = '';
+    boundFieldNames = new Set();
+    cdr = inject(ChangeDetectorRef);
+    get filteredFields() {
+        if (!this._schema)
+            return [];
+        const q = this.Search.trim().toLowerCase();
+        if (!q)
+            return this._schema.fields;
+        return this._schema.fields.filter(f => f.name.toLowerCase().includes(q) ||
+            (f.displayName?.toLowerCase().includes(q) ?? false));
+    }
+    get SelectedElement() {
+        if (!this._canvas || !this.SelectedElementId)
+            return null;
+        for (const section of this._canvas.sections) {
+            const found = section.elements.find(e => e.id === this.SelectedElementId);
+            if (found)
+                return found;
+        }
+        return null;
+    }
+    get SelectedSection() {
+        if (!this._canvas || !this.SelectedSectionId)
+            return null;
+        return this._canvas.sections.find(s => s.id === this.SelectedSectionId) ?? null;
+    }
+    get SelectedField() {
+        const el = this.SelectedElement;
+        if (!el || el.type !== 'field' || !el.fieldName)
+            return null;
+        return this._schema?.fields.find(f => f.name === el.fieldName) ?? null;
+    }
+    isBound(fieldName) {
+        return this.boundFieldNames.has(fieldName);
+    }
+    OnSearchInput(event) {
+        this.Search = event.target.value;
+    }
+    OnElementLabelInput(event) {
+        const el = this.SelectedElement;
+        if (!el)
+            return;
+        const next = { ...el, label: event.target.value };
+        this.ElementChanged.emit(next);
+    }
+    OnElementHelperInput(event) {
+        const el = this.SelectedElement;
+        if (!el)
+            return;
+        const v = event.target.value;
+        const next = { ...el, helper: v.length > 0 ? v : undefined };
+        this.ElementChanged.emit(next);
+    }
+    OnElementRequiredChange(event) {
+        const el = this.SelectedElement;
+        if (!el)
+            return;
+        const next = { ...el, required: event.target.checked };
+        this.ElementChanged.emit(next);
+    }
+    OnElementSpanChange(event) {
+        const el = this.SelectedElement;
+        if (!el)
+            return;
+        const v = Number(event.target.value);
+        const next = { ...el, span: (v === 2 ? 2 : 1) };
+        this.ElementChanged.emit(next);
+    }
+    OnElementTextInput(event) {
+        const el = this.SelectedElement;
+        if (!el)
+            return;
+        const next = { ...el, text: event.target.value };
+        this.ElementChanged.emit(next);
+    }
+    OnElementExpressionInput(event) {
+        const el = this.SelectedElement;
+        if (!el)
+            return;
+        const next = { ...el, expression: event.target.value };
+        this.ElementChanged.emit(next);
+    }
+    OnDeleteElement() {
+        const el = this.SelectedElement;
+        if (!el)
+            return;
+        this.ElementDeleted.emit(el.id);
+    }
+    OnSectionTitleInput(event) {
+        const s = this.SelectedSection;
+        if (!s)
+            return;
+        const next = { ...s, title: event.target.value };
+        this.SectionChanged.emit(next);
+    }
+    OnSectionColumnsChange(event) {
+        const s = this.SelectedSection;
+        if (!s)
+            return;
+        const v = Number(event.target.value);
+        const next = { ...s, columns: (v === 2 ? 2 : 1) };
+        this.SectionChanged.emit(next);
+    }
+    OnSectionCollapsibleChange(event) {
+        const s = this.SelectedSection;
+        if (!s)
+            return;
+        const next = { ...s, collapsible: event.target.checked };
+        this.SectionChanged.emit(next);
+    }
+    OnDeleteSection() {
+        const s = this.SelectedSection;
+        if (!s)
+            return;
+        this.SectionDeleted.emit(s.id);
+    }
+    OnPaletteClick(field) {
+        this.FieldAdded.emit({ fieldName: field.name });
+    }
+    recomputeBoundFields() {
+        this.boundFieldNames = new Set();
+        if (!this._canvas)
+            return;
+        for (const section of this._canvas.sections) {
+            for (const element of section.elements) {
+                if (element.type === 'field' && element.fieldName) {
+                    this.boundFieldNames.add(element.fieldName);
+                }
+            }
+        }
+    }
+    static ɵfac = function FormBuilderRightPanelComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || FormBuilderRightPanelComponent)(); };
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: FormBuilderRightPanelComponent, selectors: [["mj-form-builder-right-panel"]], inputs: { Schema: "Schema", Canvas: "Canvas", SelectedElementId: "SelectedElementId", SelectedSectionId: "SelectedSectionId" }, outputs: { ElementChanged: "ElementChanged", SectionChanged: "SectionChanged", ElementDeleted: "ElementDeleted", SectionDeleted: "SectionDeleted", FieldAdded: "FieldAdded" }, standalone: false, decls: 5, vars: 1, consts: [[1, "right-panel"], [1, "empty-state"], [1, "panel-header"], [1, "header-title"], [1, "fa-solid", "fa-sliders"], ["title", "Delete element", 1, "icon-btn", 3, "click"], [1, "fa-solid", "fa-trash"], [1, "inspector-body"], [1, "field-summary"], [1, "field-summary-name"], [1, "field-summary-meta"], [1, "badge", "badge-type"], [1, "badge", "badge-fk"], [1, "form-field"], ["type", "text", 3, "input", "value", "placeholder"], ["type", "text", "placeholder", "Optional \u2014 shown beneath the input", 3, "input", "value"], [1, "form-row"], [1, "checkbox"], ["type", "checkbox", 3, "change", "checked"], [1, "form-field", "form-field-inline"], [3, "change", "value"], ["value", "1"], ["value", "2"], ["type", "text", "placeholder", "Section description, instructions...", 3, "input", "value"], ["type", "text", 3, "input", "value"], ["type", "text", "placeholder", "record.Quantity * record.UnitPrice", 3, "input", "value"], [1, "muted"], [1, "fa-solid", "fa-layer-group"], ["title", "Delete section", 1, "icon-btn", 3, "click"], [1, "fa-solid", "fa-list-check"], [1, "palette-search"], ["type", "text", "placeholder", "Filter fields\u2026", 3, "input", "value"], [1, "palette-list"], ["draggable", "true", 1, "palette-row", 3, "bound"], [1, "palette-footer"], ["draggable", "true", 1, "palette-row", 3, "click", "dragstart"], [1, "palette-glyph"], [1, "fa-solid", "fa-circle-check"], [1, "fa-regular", "fa-circle"], [1, "palette-body"], [1, "palette-name"], ["title", "Required", 1, "palette-required"], [1, "palette-meta"], [1, "badge", "badge-enum"], [1, "fa-solid", "fa-circle-info"]], template: function FormBuilderRightPanelComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵelementStart(0, "div", 0);
+            i0.ɵɵconditionalCreate(1, FormBuilderRightPanelComponent_Conditional_1_Template, 11, 1)(2, FormBuilderRightPanelComponent_Conditional_2_Template, 24, 3)(3, FormBuilderRightPanelComponent_Conditional_3_Template, 13, 1)(4, FormBuilderRightPanelComponent_Conditional_4_Template, 4, 0, "div", 1);
+            i0.ɵɵelementEnd();
+        } if (rf & 2) {
+            i0.ɵɵadvance();
+            i0.ɵɵconditional(ctx.SelectedElement ? 1 : ctx.SelectedSection ? 2 : ctx.Schema ? 3 : 4);
+        } }, dependencies: [i1.NgSelectOption, i1.ɵNgSelectMultipleOption], styles: ["[_nghost-%COMP%] { display: block; height: 100%; overflow: hidden; }\n.right-panel[_ngcontent-%COMP%] { display: flex; flex-direction: column; height: 100%; background: var(--mj-bg-surface); }\n\n.panel-header[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    padding: 12px 14px;\n    border-bottom: 1px solid var(--mj-border-default);\n    flex-shrink: 0;\n}\n.header-title[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    font-weight: 600;\n    font-size: 13px;\n    color: var(--mj-text-primary);\n}\n.header-title[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] { color: var(--mj-brand-primary); }\n.icon-btn[_ngcontent-%COMP%] {\n    background: transparent;\n    border: 1px solid var(--mj-border-default);\n    border-radius: 4px;\n    padding: 4px 8px;\n    cursor: pointer;\n    color: var(--mj-text-muted);\n}\n.icon-btn[_ngcontent-%COMP%]:hover {\n    background: var(--mj-bg-surface-hover);\n    color: var(--mj-status-error);\n}\n\n.inspector-body[_ngcontent-%COMP%] { padding: 12px 14px; display: flex; flex-direction: column; gap: 12px; overflow-y: auto; flex: 1; }\n\n.field-summary[_ngcontent-%COMP%] {\n    padding: 10px 12px;\n    border-radius: 4px;\n    background: var(--mj-bg-surface-card);\n    border: 1px solid var(--mj-border-default);\n}\n.field-summary-name[_ngcontent-%COMP%] { font-size: 13px; font-weight: 600; color: var(--mj-text-primary); }\n.field-summary-meta[_ngcontent-%COMP%] { display: flex; gap: 6px; margin-top: 4px; }\n\n.form-field[_ngcontent-%COMP%] { display: flex; flex-direction: column; gap: 4px; }\n.form-field[_ngcontent-%COMP%]   label[_ngcontent-%COMP%] {\n    font-size: 11px;\n    color: var(--mj-text-muted);\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n}\n.form-field[_ngcontent-%COMP%]   input[_ngcontent-%COMP%], .form-field[_ngcontent-%COMP%]   select[_ngcontent-%COMP%] {\n    padding: 6px 8px;\n    border: 1px solid var(--mj-border-default);\n    border-radius: 4px;\n    font-size: 13px;\n    background: var(--mj-bg-surface);\n    color: var(--mj-text-primary);\n}\n.form-field[_ngcontent-%COMP%]   small[_ngcontent-%COMP%] { font-size: 11px; color: var(--mj-text-muted); margin-top: 2px; }\n.form-field[_ngcontent-%COMP%]   small[_ngcontent-%COMP%]   code[_ngcontent-%COMP%] {\n    background: var(--mj-bg-surface-sunken);\n    padding: 1px 4px;\n    border-radius: 3px;\n    font-size: 10px;\n}\n.form-field-inline[_ngcontent-%COMP%] { flex: 1; }\n\n.form-row[_ngcontent-%COMP%] { display: flex; align-items: flex-end; gap: 14px; }\n\n.checkbox[_ngcontent-%COMP%] { display: inline-flex; gap: 8px; align-items: center; font-size: 13px; color: var(--mj-text-primary); cursor: pointer; }\n.checkbox[_ngcontent-%COMP%]   input[_ngcontent-%COMP%] { margin: 0; }\n\n.palette-search[_ngcontent-%COMP%] { padding: 10px 14px 6px 14px; flex-shrink: 0; }\n.palette-search[_ngcontent-%COMP%]   input[_ngcontent-%COMP%] {\n    width: 100%;\n    padding: 6px 8px;\n    border: 1px solid var(--mj-border-default);\n    border-radius: 4px;\n    font-size: 13px;\n    background: var(--mj-bg-surface);\n    color: var(--mj-text-primary);\n}\n\n.palette-list[_ngcontent-%COMP%] {\n    list-style: none;\n    padding: 0 8px 8px;\n    margin: 0;\n    flex: 1;\n    overflow-y: auto;\n    display: flex;\n    flex-direction: column;\n    gap: 2px;\n}\n.palette-row[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: flex-start;\n    gap: 10px;\n    padding: 8px;\n    border: 1px solid transparent;\n    border-radius: 4px;\n    cursor: grab;\n    transition: background 0.1s, border-color 0.1s;\n}\n.palette-row[_ngcontent-%COMP%]:hover {\n    background: var(--mj-bg-surface-hover);\n    border-color: var(--mj-border-default);\n}\n.palette-row.bound[_ngcontent-%COMP%] {\n    background: color-mix(in srgb, var(--mj-status-success) 8%, transparent);\n}\n.palette-row[_ngcontent-%COMP%]:active { cursor: grabbing; }\n\n.palette-glyph[_ngcontent-%COMP%] { width: 16px; padding-top: 2px; }\n.palette-glyph[_ngcontent-%COMP%]   .fa-circle-check[_ngcontent-%COMP%] { color: var(--mj-status-success); }\n.palette-glyph[_ngcontent-%COMP%]   .fa-circle[_ngcontent-%COMP%] { color: var(--mj-text-disabled); }\n\n.palette-body[_ngcontent-%COMP%] { flex: 1; min-width: 0; }\n.palette-name[_ngcontent-%COMP%] {\n    font-size: 13px;\n    font-weight: 500;\n    color: var(--mj-text-primary);\n}\n.palette-required[_ngcontent-%COMP%] { color: var(--mj-status-error); margin-left: 4px; }\n.palette-meta[_ngcontent-%COMP%] { display: flex; gap: 6px; margin-top: 4px; flex-wrap: wrap; }\n\n.badge[_ngcontent-%COMP%] {\n    padding: 1px 6px;\n    border-radius: 999px;\n    font-size: 10px;\n    background: var(--mj-bg-surface-sunken);\n    color: var(--mj-text-muted);\n}\n.badge-type[_ngcontent-%COMP%] { background: var(--mj-bg-surface-sunken); }\n.badge-fk[_ngcontent-%COMP%] { color: var(--mj-brand-primary); background: color-mix(in srgb, var(--mj-brand-primary) 10%, transparent); }\n.badge-enum[_ngcontent-%COMP%] { color: var(--mj-status-info); background: color-mix(in srgb, var(--mj-status-info) 10%, transparent); }\n\n.palette-footer[_ngcontent-%COMP%] {\n    padding: 8px 14px;\n    border-top: 1px solid var(--mj-border-default);\n    color: var(--mj-text-muted);\n    font-size: 11px;\n    flex-shrink: 0;\n}\n\n.empty-state[_ngcontent-%COMP%] {\n    padding: 36px 16px;\n    text-align: center;\n    color: var(--mj-text-muted);\n    font-size: 13px;\n}\n.empty-state[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] { font-size: 18px; margin-bottom: 8px; color: var(--mj-text-disabled); }\n.muted[_ngcontent-%COMP%] { color: var(--mj-text-muted); font-size: 12px; }"], changeDetection: 0 });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(FormBuilderRightPanelComponent, [{
+        type: Component,
+        args: [{ standalone: false, selector: 'mj-form-builder-right-panel', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"right-panel\">\n  @if (SelectedElement) {\n    <!-- ============== INSPECTOR MODE ============== -->\n    <header class=\"panel-header\">\n      <div class=\"header-title\">\n        <i class=\"fa-solid fa-sliders\"></i>\n        <span>Element Properties</span>\n      </div>\n      <button class=\"icon-btn\" title=\"Delete element\" (click)=\"OnDeleteElement()\">\n        <i class=\"fa-solid fa-trash\"></i>\n      </button>\n    </header>\n\n    @if (SelectedElement.type === 'field' && SelectedField) {\n      <section class=\"inspector-body\">\n        <div class=\"field-summary\">\n          <div class=\"field-summary-name\">{{ SelectedField.displayName || SelectedField.name }}</div>\n          <div class=\"field-summary-meta\">\n            <span class=\"badge badge-type\">{{ SelectedField.type }}</span>\n            @if (SelectedField.references?.entity) {\n              <span class=\"badge badge-fk\">\u2192 {{ SelectedField.references!.entity }}</span>\n            }\n          </div>\n        </div>\n\n        <div class=\"form-field\">\n          <label>Label override</label>\n          <input type=\"text\" [value]=\"SelectedElement.label ?? ''\"\n                 (input)=\"OnElementLabelInput($event)\"\n                 [placeholder]=\"SelectedField.displayName ?? SelectedField.name\" />\n        </div>\n\n        <div class=\"form-field\">\n          <label>Helper text</label>\n          <input type=\"text\" [value]=\"SelectedElement.helper ?? ''\"\n                 (input)=\"OnElementHelperInput($event)\"\n                 placeholder=\"Optional \u2014 shown beneath the input\" />\n        </div>\n\n        <div class=\"form-row\">\n          <label class=\"checkbox\">\n            <input type=\"checkbox\" [checked]=\"SelectedElement.required ?? SelectedField.required\"\n                   (change)=\"OnElementRequiredChange($event)\" />\n            <span>Required</span>\n          </label>\n\n          <div class=\"form-field form-field-inline\">\n            <label>Span</label>\n            <select [value]=\"(SelectedElement.span ?? 1).toString()\" (change)=\"OnElementSpanChange($event)\">\n              <option value=\"1\">Half</option>\n              <option value=\"2\">Full width</option>\n            </select>\n          </div>\n        </div>\n      </section>\n    } @else if (SelectedElement.type === 'static-text') {\n      <section class=\"inspector-body\">\n        <div class=\"form-field\">\n          <label>Static text</label>\n          <input type=\"text\" [value]=\"SelectedElement.text ?? ''\"\n                 (input)=\"OnElementTextInput($event)\" placeholder=\"Section description, instructions...\" />\n        </div>\n        <div class=\"form-field form-field-inline\">\n          <label>Span</label>\n          <select [value]=\"(SelectedElement.span ?? 1).toString()\" (change)=\"OnElementSpanChange($event)\">\n            <option value=\"1\">Half</option>\n            <option value=\"2\">Full width</option>\n          </select>\n        </div>\n      </section>\n    } @else if (SelectedElement.type === 'computed') {\n      <section class=\"inspector-body\">\n        <div class=\"form-field\">\n          <label>Label</label>\n          <input type=\"text\" [value]=\"SelectedElement.label ?? ''\" (input)=\"OnElementLabelInput($event)\" />\n        </div>\n        <div class=\"form-field\">\n          <label>Expression</label>\n          <input type=\"text\" [value]=\"SelectedElement.expression ?? ''\"\n                 (input)=\"OnElementExpressionInput($event)\"\n                 placeholder='record.Quantity * record.UnitPrice' />\n          <small>Evaluated at runtime against <code>record</code>.</small>\n        </div>\n      </section>\n    } @else if (SelectedElement.type === 'spacer') {\n      <section class=\"inspector-body\">\n        <p class=\"muted\">Spacer element. No properties.</p>\n      </section>\n    }\n\n  } @else if (SelectedSection) {\n    <!-- ============== SECTION INSPECTOR ============== -->\n    <header class=\"panel-header\">\n      <div class=\"header-title\">\n        <i class=\"fa-solid fa-layer-group\"></i>\n        <span>Section Properties</span>\n      </div>\n      <button class=\"icon-btn\" title=\"Delete section\" (click)=\"OnDeleteSection()\">\n        <i class=\"fa-solid fa-trash\"></i>\n      </button>\n    </header>\n\n    <section class=\"inspector-body\">\n      <div class=\"form-field\">\n        <label>Title</label>\n        <input type=\"text\" [value]=\"SelectedSection.title\" (input)=\"OnSectionTitleInput($event)\" />\n      </div>\n      <div class=\"form-field form-field-inline\">\n        <label>Columns</label>\n        <select [value]=\"SelectedSection.columns.toString()\" (change)=\"OnSectionColumnsChange($event)\">\n          <option value=\"1\">1 column</option>\n          <option value=\"2\">2 columns</option>\n        </select>\n      </div>\n      <label class=\"checkbox\">\n        <input type=\"checkbox\" [checked]=\"SelectedSection.collapsible\" (change)=\"OnSectionCollapsibleChange($event)\" />\n        <span>Collapsible</span>\n      </label>\n    </section>\n\n  } @else if (Schema) {\n    <!-- ============== PALETTE MODE ============== -->\n    <header class=\"panel-header\">\n      <div class=\"header-title\">\n        <i class=\"fa-solid fa-list-check\"></i>\n        <span>Field Palette</span>\n      </div>\n    </header>\n\n    <section class=\"palette-search\">\n      <input type=\"text\" placeholder=\"Filter fields\u2026\" [value]=\"Search\" (input)=\"OnSearchInput($event)\" />\n    </section>\n\n    <ul class=\"palette-list\">\n      @for (f of filteredFields; track f.name) {\n        <li class=\"palette-row\"\n            [class.bound]=\"isBound(f.name)\"\n            (click)=\"OnPaletteClick(f)\"\n            [attr.data-field-name]=\"f.name\"\n            draggable=\"true\"\n            (dragstart)=\"$any($event).dataTransfer?.setData('text/x-mj-form-field', f.name)\">\n          <span class=\"palette-glyph\">\n            @if (isBound(f.name)) {\n              <i class=\"fa-solid fa-circle-check\"></i>\n            } @else {\n              <i class=\"fa-regular fa-circle\"></i>\n            }\n          </span>\n          <div class=\"palette-body\">\n            <div class=\"palette-name\">\n              {{ f.displayName || f.name }}\n              @if (f.required) {\n                <span class=\"palette-required\" title=\"Required\">*</span>\n              }\n            </div>\n            <div class=\"palette-meta\">\n              <span class=\"badge badge-type\">{{ f.type }}</span>\n              @if (f.references?.entity) {\n                <span class=\"badge badge-fk\">\u2192 {{ f.references!.entity }}</span>\n              }\n              @if (f.allowedValues && f.allowedValues.length > 0) {\n                <span class=\"badge badge-enum\">{{ f.allowedValues!.length }} values</span>\n              }\n            </div>\n          </div>\n        </li>\n      }\n    </ul>\n\n    <footer class=\"palette-footer\">\n      <small>Drag a field onto a section, or click to add to the focused section.</small>\n    </footer>\n\n  } @else {\n    <!-- ============== EMPTY ============== -->\n    <div class=\"empty-state\">\n      <i class=\"fa-solid fa-circle-info\"></i>\n      <p>Pick an entity from the canvas toolbar to load its field palette.</p>\n    </div>\n  }\n</div>\n", styles: [":host { display: block; height: 100%; overflow: hidden; }\n.right-panel { display: flex; flex-direction: column; height: 100%; background: var(--mj-bg-surface); }\n\n.panel-header {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    padding: 12px 14px;\n    border-bottom: 1px solid var(--mj-border-default);\n    flex-shrink: 0;\n}\n.header-title {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    font-weight: 600;\n    font-size: 13px;\n    color: var(--mj-text-primary);\n}\n.header-title i { color: var(--mj-brand-primary); }\n.icon-btn {\n    background: transparent;\n    border: 1px solid var(--mj-border-default);\n    border-radius: 4px;\n    padding: 4px 8px;\n    cursor: pointer;\n    color: var(--mj-text-muted);\n}\n.icon-btn:hover {\n    background: var(--mj-bg-surface-hover);\n    color: var(--mj-status-error);\n}\n\n.inspector-body { padding: 12px 14px; display: flex; flex-direction: column; gap: 12px; overflow-y: auto; flex: 1; }\n\n.field-summary {\n    padding: 10px 12px;\n    border-radius: 4px;\n    background: var(--mj-bg-surface-card);\n    border: 1px solid var(--mj-border-default);\n}\n.field-summary-name { font-size: 13px; font-weight: 600; color: var(--mj-text-primary); }\n.field-summary-meta { display: flex; gap: 6px; margin-top: 4px; }\n\n.form-field { display: flex; flex-direction: column; gap: 4px; }\n.form-field label {\n    font-size: 11px;\n    color: var(--mj-text-muted);\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n}\n.form-field input, .form-field select {\n    padding: 6px 8px;\n    border: 1px solid var(--mj-border-default);\n    border-radius: 4px;\n    font-size: 13px;\n    background: var(--mj-bg-surface);\n    color: var(--mj-text-primary);\n}\n.form-field small { font-size: 11px; color: var(--mj-text-muted); margin-top: 2px; }\n.form-field small code {\n    background: var(--mj-bg-surface-sunken);\n    padding: 1px 4px;\n    border-radius: 3px;\n    font-size: 10px;\n}\n.form-field-inline { flex: 1; }\n\n.form-row { display: flex; align-items: flex-end; gap: 14px; }\n\n.checkbox { display: inline-flex; gap: 8px; align-items: center; font-size: 13px; color: var(--mj-text-primary); cursor: pointer; }\n.checkbox input { margin: 0; }\n\n.palette-search { padding: 10px 14px 6px 14px; flex-shrink: 0; }\n.palette-search input {\n    width: 100%;\n    padding: 6px 8px;\n    border: 1px solid var(--mj-border-default);\n    border-radius: 4px;\n    font-size: 13px;\n    background: var(--mj-bg-surface);\n    color: var(--mj-text-primary);\n}\n\n.palette-list {\n    list-style: none;\n    padding: 0 8px 8px;\n    margin: 0;\n    flex: 1;\n    overflow-y: auto;\n    display: flex;\n    flex-direction: column;\n    gap: 2px;\n}\n.palette-row {\n    display: flex;\n    align-items: flex-start;\n    gap: 10px;\n    padding: 8px;\n    border: 1px solid transparent;\n    border-radius: 4px;\n    cursor: grab;\n    transition: background 0.1s, border-color 0.1s;\n}\n.palette-row:hover {\n    background: var(--mj-bg-surface-hover);\n    border-color: var(--mj-border-default);\n}\n.palette-row.bound {\n    background: color-mix(in srgb, var(--mj-status-success) 8%, transparent);\n}\n.palette-row:active { cursor: grabbing; }\n\n.palette-glyph { width: 16px; padding-top: 2px; }\n.palette-glyph .fa-circle-check { color: var(--mj-status-success); }\n.palette-glyph .fa-circle { color: var(--mj-text-disabled); }\n\n.palette-body { flex: 1; min-width: 0; }\n.palette-name {\n    font-size: 13px;\n    font-weight: 500;\n    color: var(--mj-text-primary);\n}\n.palette-required { color: var(--mj-status-error); margin-left: 4px; }\n.palette-meta { display: flex; gap: 6px; margin-top: 4px; flex-wrap: wrap; }\n\n.badge {\n    padding: 1px 6px;\n    border-radius: 999px;\n    font-size: 10px;\n    background: var(--mj-bg-surface-sunken);\n    color: var(--mj-text-muted);\n}\n.badge-type { background: var(--mj-bg-surface-sunken); }\n.badge-fk { color: var(--mj-brand-primary); background: color-mix(in srgb, var(--mj-brand-primary) 10%, transparent); }\n.badge-enum { color: var(--mj-status-info); background: color-mix(in srgb, var(--mj-status-info) 10%, transparent); }\n\n.palette-footer {\n    padding: 8px 14px;\n    border-top: 1px solid var(--mj-border-default);\n    color: var(--mj-text-muted);\n    font-size: 11px;\n    flex-shrink: 0;\n}\n\n.empty-state {\n    padding: 36px 16px;\n    text-align: center;\n    color: var(--mj-text-muted);\n    font-size: 13px;\n}\n.empty-state i { font-size: 18px; margin-bottom: 8px; color: var(--mj-text-disabled); }\n.muted { color: var(--mj-text-muted); font-size: 12px; }\n"] }]
+    }], null, { Schema: [{
+            type: Input
+        }], Canvas: [{
+            type: Input
+        }], SelectedElementId: [{
+            type: Input
+        }], SelectedSectionId: [{
+            type: Input
+        }], ElementChanged: [{
+            type: Output
+        }], SectionChanged: [{
+            type: Output
+        }], ElementDeleted: [{
+            type: Output
+        }], SectionDeleted: [{
+            type: Output
+        }], FieldAdded: [{
+            type: Output
+        }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(FormBuilderRightPanelComponent, { className: "FormBuilderRightPanelComponent", filePath: "src/ComponentStudio/components/form-builder/form-builder-right-panel.component.ts", lineNumber: 34 }); })();
+//# sourceMappingURL=form-builder-right-panel.component.js.map