import { Component, ChangeDetectionStrategy, ChangeDetectorRef, EventEmitter, Input, Output, inject, } from '@angular/core';
import { moveItemInArray } from '@angular/cdk/drag-drop';
import { buildEmptySection, generateCanvasId } from '../../services/form-canvas-model';
import * as i0 from "@angular/core";
import * as i1 from "@angular/cdk/drag-drop";
const _forTrack0 = ($index, $item) => $item.id;
function FormBuilderCanvasComponent_Conditional_1_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelementStart(0, "div", 1);
    i0.ɵɵelement(1, "i", 2);
    i0.ɵɵelementStart(2, "h3");
    i0.ɵɵtext(3, "No form loaded");
    i0.ɵɵelementEnd();
    i0.ɵɵelementStart(4, "p");
    i0.ɵɵtext(5, "Pick an entity from the toolbar to start a new form, or select one from the left panel.");
    i0.ɵɵelementEnd()();
} }
function FormBuilderCanvasComponent_Conditional_2_For_7_For_15_Conditional_7_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelementStart(0, "span", 31);
    i0.ɵɵtext(1);
    i0.ɵɵelementEnd();
} if (rf & 2) {
    i0.ɵɵadvance();
    i0.ɵɵtextInterpolate(ctx);
} }
function FormBuilderCanvasComponent_Conditional_2_For_7_For_15_Conditional_8_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelementStart(0, "span", 32);
    i0.ɵɵelement(1, "i", 33);
    i0.ɵɵtext(2, " not in schema ");
    i0.ɵɵelementEnd();
} }
function FormBuilderCanvasComponent_Conditional_2_For_7_For_15_Template(rf, ctx) { if (rf & 1) {
    const _r5 = i0.ɵɵgetCurrentView();
    i0.ɵɵelementStart(0, "div", 26);
    i0.ɵɵlistener("click", function FormBuilderCanvasComponent_Conditional_2_For_7_For_15_Template_div_click_0_listener($event) { const element_r6 = i0.ɵɵrestoreView(_r5).$implicit; const section_r4 = i0.ɵɵnextContext().$implicit; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.OnElementClick(section_r4.id, element_r6.id, $event)); });
    i0.ɵɵelementStart(1, "span", 27);
    i0.ɵɵelement(2, "i", 14);
    i0.ɵɵelementEnd();
    i0.ɵɵelementStart(3, "div", 28)(4, "div", 29);
    i0.ɵɵtext(5);
    i0.ɵɵelementEnd();
    i0.ɵɵelementStart(6, "div", 30);
    i0.ɵɵconditionalCreate(7, FormBuilderCanvasComponent_Conditional_2_For_7_For_15_Conditional_7_Template, 2, 1, "span", 31);
    i0.ɵɵconditionalCreate(8, FormBuilderCanvasComponent_Conditional_2_For_7_For_15_Conditional_8_Template, 3, 0, "span", 32);
    i0.ɵɵelementEnd()()();
} if (rf & 2) {
    let tmp_25_0;
    const element_r6 = ctx.$implicit;
    const section_r4 = i0.ɵɵnextContext().$implicit;
    const ctx_r1 = i0.ɵɵnextContext(2);
    i0.ɵɵclassProp("span-2", element_r6.span === 2 && section_r4.columns === 2)("selected", ctx_r1.SelectedElementId === element_r6.id)("unknown-field", ctx_r1.isFieldUnknown(element_r6));
    i0.ɵɵadvance(5);
    i0.ɵɵtextInterpolate(ctx_r1.getLabelForElement(element_r6));
    i0.ɵɵadvance(2);
    i0.ɵɵconditional((tmp_25_0 = ctx_r1.getFieldTypeBadge(element_r6)) ? 7 : -1, tmp_25_0);
    i0.ɵɵadvance();
    i0.ɵɵconditional(ctx_r1.isFieldUnknown(element_r6) ? 8 : -1);
} }
function FormBuilderCanvasComponent_Conditional_2_For_7_ForEmpty_16_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelementStart(0, "div", 25);
    i0.ɵɵtext(1, " Drag a field here, or use the buttons above to add static elements. ");
    i0.ɵɵelementEnd();
} }
function FormBuilderCanvasComponent_Conditional_2_For_7_Template(rf, ctx) { if (rf & 1) {
    const _r3 = i0.ɵɵgetCurrentView();
    i0.ɵɵelementStart(0, "div", 11);
    i0.ɵɵlistener("click", function FormBuilderCanvasComponent_Conditional_2_For_7_Template_div_click_0_listener($event) { i0.ɵɵrestoreView(_r3); return i0.ɵɵresetView($event.stopPropagation()); });
    i0.ɵɵelementStart(1, "header", 12);
    i0.ɵɵlistener("click", function FormBuilderCanvasComponent_Conditional_2_For_7_Template_header_click_1_listener($event) { const section_r4 = i0.ɵɵrestoreView(_r3).$implicit; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.OnSectionHeaderClick(section_r4.id, $event)); });
    i0.ɵɵelementStart(2, "span", 13);
    i0.ɵɵelement(3, "i", 14);
    i0.ɵɵelementEnd();
    i0.ɵɵelementStart(4, "h3", 15);
    i0.ɵɵtext(5);
    i0.ɵɵelementEnd();
    i0.ɵɵelementStart(6, "div", 16)(7, "button", 17);
    i0.ɵɵlistener("click", function FormBuilderCanvasComponent_Conditional_2_For_7_Template_button_click_7_listener($event) { const section_r4 = i0.ɵɵrestoreView(_r3).$implicit; const ctx_r1 = i0.ɵɵnextContext(2); ctx_r1.OnAddStaticElement(section_r4.id, "static-text"); return i0.ɵɵresetView($event.stopPropagation()); });
    i0.ɵɵelement(8, "i", 18);
    i0.ɵɵelementEnd();
    i0.ɵɵelementStart(9, "button", 19);
    i0.ɵɵlistener("click", function FormBuilderCanvasComponent_Conditional_2_For_7_Template_button_click_9_listener($event) { const section_r4 = i0.ɵɵrestoreView(_r3).$implicit; const ctx_r1 = i0.ɵɵnextContext(2); ctx_r1.OnAddStaticElement(section_r4.id, "computed"); return i0.ɵɵresetView($event.stopPropagation()); });
    i0.ɵɵelement(10, "i", 20);
    i0.ɵɵelementEnd();
    i0.ɵɵelementStart(11, "button", 21);
    i0.ɵɵlistener("click", function FormBuilderCanvasComponent_Conditional_2_For_7_Template_button_click_11_listener($event) { const section_r4 = i0.ɵɵrestoreView(_r3).$implicit; const ctx_r1 = i0.ɵɵnextContext(2); ctx_r1.OnAddStaticElement(section_r4.id, "spacer"); return i0.ɵɵresetView($event.stopPropagation()); });
    i0.ɵɵelement(12, "i", 22);
    i0.ɵɵelementEnd()()();
    i0.ɵɵelementStart(13, "div", 23);
    i0.ɵɵlistener("cdkDropListDropped", function FormBuilderCanvasComponent_Conditional_2_For_7_Template_div_cdkDropListDropped_13_listener($event) { const section_r4 = i0.ɵɵrestoreView(_r3).$implicit; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.OnDropElement($event, section_r4.id)); })("dragover", function FormBuilderCanvasComponent_Conditional_2_For_7_Template_div_dragover_13_listener($event) { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.OnNativeDragOver($event)); })("drop", function FormBuilderCanvasComponent_Conditional_2_For_7_Template_div_drop_13_listener($event) { const section_r4 = i0.ɵɵrestoreView(_r3).$implicit; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.OnNativeDrop($event, section_r4.id)); });
    i0.ɵɵrepeaterCreate(14, FormBuilderCanvasComponent_Conditional_2_For_7_For_15_Template, 9, 9, "div", 24, _forTrack0, false, FormBuilderCanvasComponent_Conditional_2_For_7_ForEmpty_16_Template, 2, 0, "div", 25);
    i0.ɵɵelementEnd()();
} if (rf & 2) {
    const section_r4 = ctx.$implicit;
    const ctx_r1 = i0.ɵɵnextContext(2);
    i0.ɵɵclassProp("selected", ctx_r1.SelectedSectionId === section_r4.id);
    i0.ɵɵadvance(5);
    i0.ɵɵtextInterpolate(section_r4.title || "Untitled Section");
    i0.ɵɵadvance(8);
    i0.ɵɵclassProp("cols-2", section_r4.columns === 2);
    i0.ɵɵproperty("id", "section-" + section_r4.id)("cdkDropListConnectedTo", ctx_r1.sectionListIds)("cdkDropListData", section_r4.elements);
    i0.ɵɵadvance();
    i0.ɵɵrepeater(section_r4.elements);
} }
function FormBuilderCanvasComponent_Conditional_2_Template(rf, ctx) { if (rf & 1) {
    const _r1 = i0.ɵɵgetCurrentView();
    i0.ɵɵelementStart(0, "div", 3);
    i0.ɵɵlistener("click", function FormBuilderCanvasComponent_Conditional_2_Template_div_click_0_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView($event.stopPropagation()); });
    i0.ɵɵelementStart(1, "input", 4);
    i0.ɵɵlistener("input", function FormBuilderCanvasComponent_Conditional_2_Template_input_input_1_listener($event) { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.OnTitleInput($event)); });
    i0.ɵɵelementEnd();
    i0.ɵɵelementStart(2, "span", 5);
    i0.ɵɵelement(3, "i", 6);
    i0.ɵɵtext(4);
    i0.ɵɵelementEnd()();
    i0.ɵɵelementStart(5, "div", 7);
    i0.ɵɵlistener("cdkDropListDropped", function FormBuilderCanvasComponent_Conditional_2_Template_div_cdkDropListDropped_5_listener($event) { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.OnDropSection($event)); });
    i0.ɵɵrepeaterCreate(6, FormBuilderCanvasComponent_Conditional_2_For_7_Template, 17, 9, "div", 8, _forTrack0);
    i0.ɵɵelementEnd();
    i0.ɵɵelementStart(8, "button", 9);
    i0.ɵɵlistener("click", function FormBuilderCanvasComponent_Conditional_2_Template_button_click_8_listener($event) { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); ctx_r1.OnAddSection(); return i0.ɵɵresetView($event.stopPropagation()); });
    i0.ɵɵelement(9, "i", 10);
    i0.ɵɵtext(10, " Add Section ");
    i0.ɵɵelementEnd();
} if (rf & 2) {
    const ctx_r1 = i0.ɵɵnextContext();
    i0.ɵɵadvance();
    i0.ɵɵproperty("value", ctx_r1.Canvas.title ?? "");
    i0.ɵɵadvance(3);
    i0.ɵɵtextInterpolate1(" ", ctx_r1.Canvas.entityName, " ");
    i0.ɵɵadvance(2);
    i0.ɵɵrepeater(ctx_r1.Canvas.sections);
} }
/**
 * Visual canvas. Owns the drag-drop UX for sections + elements + palette drops.
 *
 * The canvas itself is presentational — the dashboard owns the model and
 * applies changes here via emitted events. This keeps the canvas focused on
 * UI ergonomics while the dashboard handles dirty tracking, code mirror
 * synchronization, and undo (future).
 */
export class FormBuilderCanvasComponent {
    _canvas = null;
    set Canvas(value) {
        this._canvas = value;
        this.cdr.markForCheck();
    }
    get Canvas() {
        return this._canvas;
    }
    Schema = null;
    SelectedElementId = null;
    SelectedSectionId = null;
    /** Emitted when the model changes structurally (drop, delete, reorder, etc.). */
    CanvasChanged = new EventEmitter();
    ElementSelected = new EventEmitter();
    SectionSelected = new EventEmitter();
    Deselected = new EventEmitter();
    /**
     * IDs of the section drop lists. Computed once per render so `cdkDropList`
     * `connectedTo` can wire every section to every other section, enabling
     * cross-section drag.
     */
    get sectionListIds() {
        return (this._canvas?.sections ?? []).map(s => `section-${s.id}`);
    }
    cdr = inject(ChangeDetectorRef);
    OnAddSection() {
        if (!this._canvas)
            return;
        const next = {
            ...this._canvas,
            sections: [...this._canvas.sections, buildEmptySection()],
        };
        this.CanvasChanged.emit(next);
    }
    OnAddStaticElement(sectionId, kind) {
        if (!this._canvas)
            return;
        const next = mutateSection(this._canvas, sectionId, s => ({
            ...s,
            elements: [...s.elements, {
                    id: generateCanvasId(kind),
                    type: kind,
                    text: kind === 'static-text' ? 'Static text' : undefined,
                    expression: kind === 'computed' ? 'record?.ID' : undefined,
                    label: kind === 'computed' ? 'Computed' : undefined,
                }],
        }));
        this.CanvasChanged.emit(next);
    }
    OnDropElement(event, sectionId) {
        if (!this._canvas)
            return;
        // Internal reorder within the same section.
        if (event.previousContainer === event.container) {
            const next = mutateSection(this._canvas, sectionId, s => {
                const elements = [...s.elements];
                moveItemInArray(elements, event.previousIndex, event.currentIndex);
                return { ...s, elements };
            });
            this.CanvasChanged.emit(next);
            return;
        }
        // Cross-section move: extract from source, insert into target.
        const sourceId = event.previousContainer.id.replace('section-', '');
        const sourceSection = this._canvas.sections.find(s => s.id === sourceId);
        if (!sourceSection)
            return;
        const moved = sourceSection.elements[event.previousIndex];
        if (!moved)
            return;
        const next = {
            ...this._canvas,
            sections: this._canvas.sections.map(s => {
                if (s.id === sourceId) {
                    return { ...s, elements: s.elements.filter((_, i) => i !== event.previousIndex) };
                }
                if (s.id === sectionId) {
                    const elements = [...s.elements];
                    elements.splice(event.currentIndex, 0, moved);
                    return { ...s, elements };
                }
                return s;
            }),
        };
        this.CanvasChanged.emit(next);
    }
    OnDropSection(event) {
        if (!this._canvas)
            return;
        const sections = [...this._canvas.sections];
        moveItemInArray(sections, event.previousIndex, event.currentIndex);
        this.CanvasChanged.emit({ ...this._canvas, sections });
    }
    /** Native-DnD fallback for palette → section drop (palette uses HTML5 DnD). */
    OnNativeDragOver(event) {
        if (event.dataTransfer?.types.includes('text/x-mj-form-field')) {
            event.preventDefault();
        }
    }
    OnNativeDrop(event, sectionId) {
        const fieldName = event.dataTransfer?.getData('text/x-mj-form-field');
        if (!fieldName || !this._canvas)
            return;
        event.preventDefault();
        const next = mutateSection(this._canvas, sectionId, s => ({
            ...s,
            elements: [...s.elements, {
                    id: generateCanvasId('field'),
                    type: 'field',
                    fieldName,
                    span: 1,
                }],
        }));
        this.CanvasChanged.emit(next);
    }
    OnElementClick(sectionId, elementId, event) {
        event.stopPropagation();
        this.ElementSelected.emit({ sectionId, elementId });
    }
    OnSectionHeaderClick(sectionId, event) {
        event.stopPropagation();
        this.SectionSelected.emit(sectionId);
    }
    OnCanvasBackgroundClick() {
        this.Deselected.emit();
    }
    OnTitleInput(event) {
        if (!this._canvas)
            return;
        const v = event.target.value;
        this.CanvasChanged.emit({ ...this._canvas, title: v });
    }
    getLabelForElement(element) {
        if (element.type === 'static-text')
            return element.text ?? 'Static text';
        if (element.type === 'spacer')
            return 'Spacer';
        if (element.type === 'computed')
            return element.label ?? 'Computed';
        if (element.type === 'field' && element.fieldName) {
            return element.label ?? this.fieldDisplayName(element.fieldName);
        }
        return element.fieldName ?? '(unknown)';
    }
    getFieldTypeBadge(element) {
        if (element.type === 'field' && element.fieldName) {
            const f = this.Schema?.fields.find(fld => fld.name === element.fieldName);
            return f?.type ?? null;
        }
        return element.type;
    }
    isFieldUnknown(element) {
        if (element.type !== 'field' || !element.fieldName)
            return false;
        return !this.Schema?.fields.some(f => f.name === element.fieldName);
    }
    fieldDisplayName(name) {
        return this.Schema?.fields.find(f => f.name === name)?.displayName ?? name;
    }
    static ɵfac = function FormBuilderCanvasComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || FormBuilderCanvasComponent)(); };
    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: FormBuilderCanvasComponent, selectors: [["mj-form-builder-canvas"]], inputs: { Canvas: "Canvas", Schema: "Schema", SelectedElementId: "SelectedElementId", SelectedSectionId: "SelectedSectionId" }, outputs: { CanvasChanged: "CanvasChanged", ElementSelected: "ElementSelected", SectionSelected: "SectionSelected", Deselected: "Deselected" }, standalone: false, decls: 3, vars: 1, consts: [[1, "canvas-root", 3, "click"], [1, "canvas-empty"], [1, "fa-solid", "fa-table-list"], [1, "canvas-title-row", 3, "click"], ["type", "text", "placeholder", "Untitled form", 1, "canvas-title", 3, "input", "value"], [1, "canvas-entity-badge"], [1, "fa-solid", "fa-table"], ["cdkDropList", "", "cdkDropListOrientation", "vertical", 1, "canvas-sections-host", 3, "cdkDropListDropped"], ["cdkDrag", "", 1, "canvas-section", 3, "selected"], [1, "add-section-btn", 3, "click"], [1, "fa-solid", "fa-plus"], ["cdkDrag", "", 1, "canvas-section", 3, "click"], [1, "section-header", 3, "click"], ["cdkDragHandle", "", "title", "Drag to reorder", 1, "section-drag-handle"], [1, "fa-solid", "fa-grip-vertical"], [1, "section-title"], [1, "section-actions"], ["title", "Add static text", 1, "mini-btn", 3, "click"], [1, "fa-solid", "fa-font"], ["title", "Add computed field", 1, "mini-btn", 3, "click"], [1, "fa-solid", "fa-calculator"], ["title", "Add spacer", 1, "mini-btn", 3, "click"], [1, "fa-solid", "fa-arrows-up-down"], ["cdkDropList", "", 1, "section-grid", 3, "cdkDropListDropped", "dragover", "drop", "id", "cdkDropListConnectedTo", "cdkDropListData"], ["cdkDrag", "", 1, "canvas-element", 3, "span-2", "selected", "unknown-field"], [1, "section-drop-empty"], ["cdkDrag", "", 1, "canvas-element", 3, "click"], ["cdkDragHandle", "", "title", "Drag to move", 1, "element-drag-handle"], [1, "element-body"], [1, "element-label"], [1, "element-meta"], [1, "element-type-badge"], ["title", "Field not in current schema \u2014 will be skipped at code generation", 1, "element-warn"], [1, "fa-solid", "fa-triangle-exclamation"]], template: function FormBuilderCanvasComponent_Template(rf, ctx) { if (rf & 1) {
            i0.ɵɵelementStart(0, "div", 0);
            i0.ɵɵlistener("click", function FormBuilderCanvasComponent_Template_div_click_0_listener() { return ctx.OnCanvasBackgroundClick(); });
            i0.ɵɵconditionalCreate(1, FormBuilderCanvasComponent_Conditional_1_Template, 6, 0, "div", 1)(2, FormBuilderCanvasComponent_Conditional_2_Template, 11, 2);
            i0.ɵɵelementEnd();
        } if (rf & 2) {
            i0.ɵɵadvance();
            i0.ɵɵconditional(!ctx.Canvas ? 1 : 2);
        } }, dependencies: [i1.CdkDropList, i1.CdkDrag, i1.CdkDragHandle], styles: ["[_nghost-%COMP%] { display: block; height: 100%; overflow: hidden; }\n\n.canvas-root[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    height: 100%;\n    padding: 20px 28px;\n    overflow-y: auto;\n    background: var(--mj-bg-page);\n    gap: 16px;\n}\n\n.canvas-empty[_ngcontent-%COMP%] {\n    margin: auto;\n    text-align: center;\n    max-width: 380px;\n    color: var(--mj-text-muted);\n}\n.canvas-empty[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] { font-size: 36px; margin-bottom: 12px; color: var(--mj-text-disabled); }\n.canvas-empty[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%] { margin: 0 0 6px; font-size: 16px; color: var(--mj-text-primary); }\n.canvas-empty[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] { margin: 0; font-size: 13px; line-height: 1.5; }\n\n.canvas-title-row[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n    padding-bottom: 4px;\n    flex-shrink: 0;\n}\n.canvas-title[_ngcontent-%COMP%] {\n    flex: 1;\n    border: 1px solid transparent;\n    background: transparent;\n    color: var(--mj-text-primary);\n    font-size: 22px;\n    font-weight: 600;\n    padding: 6px 8px;\n    border-radius: 4px;\n}\n.canvas-title[_ngcontent-%COMP%]:hover, .canvas-title[_ngcontent-%COMP%]:focus {\n    border-color: var(--mj-border-default);\n    background: var(--mj-bg-surface);\n    outline: none;\n}\n.canvas-entity-badge[_ngcontent-%COMP%] {\n    display: inline-flex;\n    align-items: center;\n    gap: 6px;\n    padding: 4px 10px;\n    background: color-mix(in srgb, var(--mj-brand-primary) 10%, transparent);\n    color: var(--mj-brand-primary);\n    border-radius: 999px;\n    font-size: 12px;\n}\n\n.canvas-sections-host[_ngcontent-%COMP%] { display: flex; flex-direction: column; gap: 14px; }\n\n.canvas-section[_ngcontent-%COMP%] {\n    background: var(--mj-bg-surface);\n    border: 1px solid var(--mj-border-default);\n    border-radius: 6px;\n    overflow: hidden;\n    transition: border-color 0.1s;\n}\n.canvas-section.selected[_ngcontent-%COMP%] { border-color: var(--mj-brand-primary); }\n\n.section-header[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 10px;\n    padding: 10px 12px;\n    background: var(--mj-bg-surface-card);\n    border-bottom: 1px solid var(--mj-border-default);\n    cursor: pointer;\n}\n.section-header[_ngcontent-%COMP%]:hover { background: var(--mj-bg-surface-hover); }\n.section-drag-handle[_ngcontent-%COMP%], .element-drag-handle[_ngcontent-%COMP%] {\n    color: var(--mj-text-disabled);\n    cursor: grab;\n    padding: 2px 4px;\n}\n.section-drag-handle[_ngcontent-%COMP%]:hover, .element-drag-handle[_ngcontent-%COMP%]:hover { color: var(--mj-text-secondary); }\n.section-title[_ngcontent-%COMP%] {\n    flex: 1;\n    margin: 0;\n    font-size: 13px;\n    font-weight: 600;\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n    color: var(--mj-text-secondary);\n}\n.section-actions[_ngcontent-%COMP%] { display: flex; gap: 4px; }\n.mini-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    font-size: 11px;\n}\n.mini-btn[_ngcontent-%COMP%]:hover {\n    background: var(--mj-bg-surface);\n    color: var(--mj-text-primary);\n    border-color: var(--mj-border-strong);\n}\n\n.section-grid[_ngcontent-%COMP%] {\n    display: grid;\n    grid-template-columns: 1fr;\n    gap: 10px;\n    padding: 12px;\n    min-height: 60px;\n}\n.section-grid.cols-2[_ngcontent-%COMP%] { grid-template-columns: 1fr 1fr; }\n\n.section-drop-empty[_ngcontent-%COMP%] {\n    grid-column: 1 / -1;\n    padding: 18px;\n    text-align: center;\n    color: var(--mj-text-muted);\n    font-size: 12px;\n    border: 1px dashed var(--mj-border-default);\n    border-radius: 4px;\n    background: var(--mj-bg-surface-card);\n}\n\n.canvas-element[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    padding: 10px 12px;\n    background: var(--mj-bg-surface);\n    border: 1px solid var(--mj-border-default);\n    border-radius: 4px;\n    cursor: pointer;\n    transition: border-color 0.1s, background 0.1s;\n}\n.canvas-element[_ngcontent-%COMP%]:hover { border-color: var(--mj-border-strong); background: var(--mj-bg-surface-hover); }\n.canvas-element.selected[_ngcontent-%COMP%] {\n    border-color: var(--mj-brand-primary);\n    background: color-mix(in srgb, var(--mj-brand-primary) 6%, var(--mj-bg-surface));\n}\n.canvas-element.unknown-field[_ngcontent-%COMP%] { border-color: var(--mj-status-warning); }\n.canvas-element.span-2[_ngcontent-%COMP%] { grid-column: span 2; }\n\n.element-body[_ngcontent-%COMP%] { flex: 1; min-width: 0; }\n.element-label[_ngcontent-%COMP%] {\n    font-size: 13px;\n    color: var(--mj-text-primary);\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n}\n.element-meta[_ngcontent-%COMP%] { display: flex; gap: 6px; margin-top: 3px; flex-wrap: wrap; }\n.element-type-badge[_ngcontent-%COMP%] {\n    padding: 1px 6px;\n    font-size: 10px;\n    border-radius: 999px;\n    background: var(--mj-bg-surface-sunken);\n    color: var(--mj-text-muted);\n}\n.element-warn[_ngcontent-%COMP%] {\n    font-size: 11px;\n    color: var(--mj-status-warning-text);\n    display: inline-flex;\n    align-items: center;\n    gap: 4px;\n}\n\n.add-section-btn[_ngcontent-%COMP%] {\n    align-self: flex-start;\n    display: inline-flex;\n    align-items: center;\n    gap: 8px;\n    padding: 8px 14px;\n    border: 1px dashed var(--mj-border-strong);\n    border-radius: 6px;\n    background: transparent;\n    color: var(--mj-text-secondary);\n    font-size: 13px;\n    cursor: pointer;\n    transition: border-color 0.1s, background 0.1s;\n}\n.add-section-btn[_ngcontent-%COMP%]:hover {\n    border-color: var(--mj-brand-primary);\n    color: var(--mj-brand-primary);\n    background: color-mix(in srgb, var(--mj-brand-primary) 4%, transparent);\n}\n\n\n\n.cdk-drag-preview[_ngcontent-%COMP%] {\n    box-shadow: 0 5px 16px rgba(0,0,0,0.2);\n    border-radius: 4px;\n}\n.cdk-drag-placeholder[_ngcontent-%COMP%] {\n    opacity: 0.4;\n    background: var(--mj-bg-surface-sunken);\n    border: 1px dashed var(--mj-brand-primary);\n    min-height: 36px;\n    border-radius: 4px;\n}\n.cdk-drag-animating[_ngcontent-%COMP%] { transition: transform 200ms cubic-bezier(0, 0, 0.2, 1); }\n.section-grid.cdk-drop-list-dragging[_ngcontent-%COMP%]   .canvas-element[_ngcontent-%COMP%]:not(.cdk-drag-placeholder) {\n    transition: transform 200ms cubic-bezier(0, 0, 0.2, 1);\n}"], changeDetection: 0 });
}
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(FormBuilderCanvasComponent, [{
        type: Component,
        args: [{ standalone: false, selector: 'mj-form-builder-canvas', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"canvas-root\" (click)=\"OnCanvasBackgroundClick()\">\n\n  @if (!Canvas) {\n    <div class=\"canvas-empty\">\n      <i class=\"fa-solid fa-table-list\"></i>\n      <h3>No form loaded</h3>\n      <p>Pick an entity from the toolbar to start a new form, or select one from the left panel.</p>\n    </div>\n  } @else {\n    <div class=\"canvas-title-row\" (click)=\"$event.stopPropagation()\">\n      <input class=\"canvas-title\" type=\"text\"\n             placeholder=\"Untitled form\"\n             [value]=\"Canvas.title ?? ''\" (input)=\"OnTitleInput($event)\" />\n      <span class=\"canvas-entity-badge\">\n        <i class=\"fa-solid fa-table\"></i> {{ Canvas.entityName }}\n      </span>\n    </div>\n\n    <div cdkDropList\n         cdkDropListOrientation=\"vertical\"\n         (cdkDropListDropped)=\"OnDropSection($event)\"\n         class=\"canvas-sections-host\">\n\n      @for (section of Canvas.sections; track section.id) {\n        <div class=\"canvas-section\"\n             cdkDrag\n             [class.selected]=\"SelectedSectionId === section.id\"\n             (click)=\"$event.stopPropagation()\">\n\n          <header class=\"section-header\" (click)=\"OnSectionHeaderClick(section.id, $event)\">\n            <span class=\"section-drag-handle\" cdkDragHandle title=\"Drag to reorder\">\n              <i class=\"fa-solid fa-grip-vertical\"></i>\n            </span>\n            <h3 class=\"section-title\">{{ section.title || 'Untitled Section' }}</h3>\n            <div class=\"section-actions\">\n              <button class=\"mini-btn\" title=\"Add static text\"\n                      (click)=\"OnAddStaticElement(section.id, 'static-text'); $event.stopPropagation()\">\n                <i class=\"fa-solid fa-font\"></i>\n              </button>\n              <button class=\"mini-btn\" title=\"Add computed field\"\n                      (click)=\"OnAddStaticElement(section.id, 'computed'); $event.stopPropagation()\">\n                <i class=\"fa-solid fa-calculator\"></i>\n              </button>\n              <button class=\"mini-btn\" title=\"Add spacer\"\n                      (click)=\"OnAddStaticElement(section.id, 'spacer'); $event.stopPropagation()\">\n                <i class=\"fa-solid fa-arrows-up-down\"></i>\n              </button>\n            </div>\n          </header>\n\n          <div class=\"section-grid\"\n               [class.cols-2]=\"section.columns === 2\"\n               cdkDropList\n               [id]=\"'section-' + section.id\"\n               [cdkDropListConnectedTo]=\"sectionListIds\"\n               [cdkDropListData]=\"section.elements\"\n               (cdkDropListDropped)=\"OnDropElement($event, section.id)\"\n               (dragover)=\"OnNativeDragOver($event)\"\n               (drop)=\"OnNativeDrop($event, section.id)\">\n\n            @for (element of section.elements; track element.id) {\n              <div class=\"canvas-element\"\n                   cdkDrag\n                   [class.span-2]=\"element.span === 2 && section.columns === 2\"\n                   [class.selected]=\"SelectedElementId === element.id\"\n                   [class.unknown-field]=\"isFieldUnknown(element)\"\n                   (click)=\"OnElementClick(section.id, element.id, $event)\">\n                <span class=\"element-drag-handle\" cdkDragHandle title=\"Drag to move\">\n                  <i class=\"fa-solid fa-grip-vertical\"></i>\n                </span>\n                <div class=\"element-body\">\n                  <div class=\"element-label\">{{ getLabelForElement(element) }}</div>\n                  <div class=\"element-meta\">\n                    @if (getFieldTypeBadge(element); as badge) {\n                      <span class=\"element-type-badge\">{{ badge }}</span>\n                    }\n                    @if (isFieldUnknown(element)) {\n                      <span class=\"element-warn\"\n                            title=\"Field not in current schema \u2014 will be skipped at code generation\">\n                        <i class=\"fa-solid fa-triangle-exclamation\"></i> not in schema\n                      </span>\n                    }\n                  </div>\n                </div>\n              </div>\n            } @empty {\n              <div class=\"section-drop-empty\">\n                Drag a field here, or use the buttons above to add static elements.\n              </div>\n            }\n          </div>\n        </div>\n      }\n    </div>\n\n    <button class=\"add-section-btn\" (click)=\"OnAddSection(); $event.stopPropagation()\">\n      <i class=\"fa-solid fa-plus\"></i> Add Section\n    </button>\n  }\n</div>\n", styles: [":host { display: block; height: 100%; overflow: hidden; }\n\n.canvas-root {\n    display: flex;\n    flex-direction: column;\n    height: 100%;\n    padding: 20px 28px;\n    overflow-y: auto;\n    background: var(--mj-bg-page);\n    gap: 16px;\n}\n\n.canvas-empty {\n    margin: auto;\n    text-align: center;\n    max-width: 380px;\n    color: var(--mj-text-muted);\n}\n.canvas-empty i { font-size: 36px; margin-bottom: 12px; color: var(--mj-text-disabled); }\n.canvas-empty h3 { margin: 0 0 6px; font-size: 16px; color: var(--mj-text-primary); }\n.canvas-empty p { margin: 0; font-size: 13px; line-height: 1.5; }\n\n.canvas-title-row {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n    padding-bottom: 4px;\n    flex-shrink: 0;\n}\n.canvas-title {\n    flex: 1;\n    border: 1px solid transparent;\n    background: transparent;\n    color: var(--mj-text-primary);\n    font-size: 22px;\n    font-weight: 600;\n    padding: 6px 8px;\n    border-radius: 4px;\n}\n.canvas-title:hover, .canvas-title:focus {\n    border-color: var(--mj-border-default);\n    background: var(--mj-bg-surface);\n    outline: none;\n}\n.canvas-entity-badge {\n    display: inline-flex;\n    align-items: center;\n    gap: 6px;\n    padding: 4px 10px;\n    background: color-mix(in srgb, var(--mj-brand-primary) 10%, transparent);\n    color: var(--mj-brand-primary);\n    border-radius: 999px;\n    font-size: 12px;\n}\n\n.canvas-sections-host { display: flex; flex-direction: column; gap: 14px; }\n\n.canvas-section {\n    background: var(--mj-bg-surface);\n    border: 1px solid var(--mj-border-default);\n    border-radius: 6px;\n    overflow: hidden;\n    transition: border-color 0.1s;\n}\n.canvas-section.selected { border-color: var(--mj-brand-primary); }\n\n.section-header {\n    display: flex;\n    align-items: center;\n    gap: 10px;\n    padding: 10px 12px;\n    background: var(--mj-bg-surface-card);\n    border-bottom: 1px solid var(--mj-border-default);\n    cursor: pointer;\n}\n.section-header:hover { background: var(--mj-bg-surface-hover); }\n.section-drag-handle, .element-drag-handle {\n    color: var(--mj-text-disabled);\n    cursor: grab;\n    padding: 2px 4px;\n}\n.section-drag-handle:hover, .element-drag-handle:hover { color: var(--mj-text-secondary); }\n.section-title {\n    flex: 1;\n    margin: 0;\n    font-size: 13px;\n    font-weight: 600;\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n    color: var(--mj-text-secondary);\n}\n.section-actions { display: flex; gap: 4px; }\n.mini-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    font-size: 11px;\n}\n.mini-btn:hover {\n    background: var(--mj-bg-surface);\n    color: var(--mj-text-primary);\n    border-color: var(--mj-border-strong);\n}\n\n.section-grid {\n    display: grid;\n    grid-template-columns: 1fr;\n    gap: 10px;\n    padding: 12px;\n    min-height: 60px;\n}\n.section-grid.cols-2 { grid-template-columns: 1fr 1fr; }\n\n.section-drop-empty {\n    grid-column: 1 / -1;\n    padding: 18px;\n    text-align: center;\n    color: var(--mj-text-muted);\n    font-size: 12px;\n    border: 1px dashed var(--mj-border-default);\n    border-radius: 4px;\n    background: var(--mj-bg-surface-card);\n}\n\n.canvas-element {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    padding: 10px 12px;\n    background: var(--mj-bg-surface);\n    border: 1px solid var(--mj-border-default);\n    border-radius: 4px;\n    cursor: pointer;\n    transition: border-color 0.1s, background 0.1s;\n}\n.canvas-element:hover { border-color: var(--mj-border-strong); background: var(--mj-bg-surface-hover); }\n.canvas-element.selected {\n    border-color: var(--mj-brand-primary);\n    background: color-mix(in srgb, var(--mj-brand-primary) 6%, var(--mj-bg-surface));\n}\n.canvas-element.unknown-field { border-color: var(--mj-status-warning); }\n.canvas-element.span-2 { grid-column: span 2; }\n\n.element-body { flex: 1; min-width: 0; }\n.element-label {\n    font-size: 13px;\n    color: var(--mj-text-primary);\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n}\n.element-meta { display: flex; gap: 6px; margin-top: 3px; flex-wrap: wrap; }\n.element-type-badge {\n    padding: 1px 6px;\n    font-size: 10px;\n    border-radius: 999px;\n    background: var(--mj-bg-surface-sunken);\n    color: var(--mj-text-muted);\n}\n.element-warn {\n    font-size: 11px;\n    color: var(--mj-status-warning-text);\n    display: inline-flex;\n    align-items: center;\n    gap: 4px;\n}\n\n.add-section-btn {\n    align-self: flex-start;\n    display: inline-flex;\n    align-items: center;\n    gap: 8px;\n    padding: 8px 14px;\n    border: 1px dashed var(--mj-border-strong);\n    border-radius: 6px;\n    background: transparent;\n    color: var(--mj-text-secondary);\n    font-size: 13px;\n    cursor: pointer;\n    transition: border-color 0.1s, background 0.1s;\n}\n.add-section-btn:hover {\n    border-color: var(--mj-brand-primary);\n    color: var(--mj-brand-primary);\n    background: color-mix(in srgb, var(--mj-brand-primary) 4%, transparent);\n}\n\n/* CDK drag-drop styling */\n.cdk-drag-preview {\n    box-shadow: 0 5px 16px rgba(0,0,0,0.2);\n    border-radius: 4px;\n}\n.cdk-drag-placeholder {\n    opacity: 0.4;\n    background: var(--mj-bg-surface-sunken);\n    border: 1px dashed var(--mj-brand-primary);\n    min-height: 36px;\n    border-radius: 4px;\n}\n.cdk-drag-animating { transition: transform 200ms cubic-bezier(0, 0, 0.2, 1); }\n.section-grid.cdk-drop-list-dragging .canvas-element:not(.cdk-drag-placeholder) {\n    transition: transform 200ms cubic-bezier(0, 0, 0.2, 1);\n}\n"] }]
    }], null, { Canvas: [{
            type: Input
        }], Schema: [{
            type: Input
        }], SelectedElementId: [{
            type: Input
        }], SelectedSectionId: [{
            type: Input
        }], CanvasChanged: [{
            type: Output
        }], ElementSelected: [{
            type: Output
        }], SectionSelected: [{
            type: Output
        }], Deselected: [{
            type: Output
        }] }); })();
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(FormBuilderCanvasComponent, { className: "FormBuilderCanvasComponent", filePath: "src/ComponentStudio/components/form-builder/form-builder-canvas.component.ts", lineNumber: 30 }); })();
/** Helper: replace one section in the model, leaving others untouched. */
function mutateSection(canvas, sectionId, fn) {
    return {
        ...canvas,
        sections: canvas.sections.map(s => s.id === sectionId ? fn(s) : s),
    };
}
//# sourceMappingURL=form-builder-canvas.component.js.map