/**
 * @module database-modify.component
 * @description Slide-over view for modifying an existing Database Designer entity.
 *
 * Rendered inside an `mj-slide-panel` by the dashboard when the user clicks Edit.
 * Presents three tabs:
 *   1. Fields  — EntityFieldsGridComponent in modify mode (existing + new columns)
 *   2. Review  — EntityReviewPanelComponent showing diff (new cols highlighted)
 *   3. Apply   — EntityPipelinePanelComponent for running the alter pipeline
 *
 * On tab 3 ("Apply"), clicking "Apply Changes" calls `pipelinePanel.StartExecution()`.
 * The pipeline panel then calls `DatabaseDesignerService.modifyEntity()`.
 */
import { Component, Input, Output, EventEmitter, ChangeDetectionStrategy, ChangeDetectorRef, inject, ViewChild, } from '@angular/core';
import { MJConfirmService } from '@memberjunction/ng-ui-components';
import { DatabaseDesignerEngine } from '../../services/database-designer.engine.js';
import { EntityPipelinePanelComponent } from '../shared/entity-pipeline-panel.component.js';
import * as i0 from "@angular/core";
import * as i1 from "@memberjunction/ng-ui-components";
import * as i2 from "@memberjunction/ng-shared-generic";
import * as i3 from "angular-split";
import * as i4 from "../shared/entity-fields-grid.component";
import * as i5 from "../shared/entity-review-panel.component";
import * as i6 from "../shared/entity-pipeline-panel.component";
import * as i7 from "../shared/database-preview-pane.component";
const _c0 = () => ({});
function DatabaseModifyComponent_Conditional_1_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelementStart(0, "div", 1);
    i0.ɵɵelement(1, "mj-loading", 3);
    i0.ɵɵelementEnd();
} }
function DatabaseModifyComponent_Conditional_2_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelementStart(0, "mj-alert", 2);
    i0.ɵɵtext(1);
    i0.ɵɵelementEnd();
} if (rf & 2) {
    const ctx_r0 = i0.ɵɵnextContext();
    i0.ɵɵadvance();
    i0.ɵɵtextInterpolate(ctx_r0.LoadError);
} }
function DatabaseModifyComponent_Conditional_3_Conditional_17_Template(rf, ctx) { if (rf & 1) {
    const _r3 = i0.ɵɵgetCurrentView();
    i0.ɵɵelementStart(0, "div", 14)(1, "div", 19)(2, "mj-database-pipeline-panel", 20);
    i0.ɵɵlistener("Completed", function DatabaseModifyComponent_Conditional_3_Conditional_17_Template_mj_database_pipeline_panel_Completed_2_listener($event) { i0.ɵɵrestoreView(_r3); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.OnPipelineCompleted($event)); })("Errored", function DatabaseModifyComponent_Conditional_3_Conditional_17_Template_mj_database_pipeline_panel_Errored_2_listener($event) { i0.ɵɵrestoreView(_r3); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.OnPipelineErrored($event)); });
    i0.ɵɵelementEnd()()();
} if (rf & 2) {
    const ctx_r0 = i0.ɵɵnextContext(2);
    i0.ɵɵadvance(2);
    i0.ɵɵproperty("TableDefinition", ctx_r0.CurrentTableSpec)("ExistingEntityId", ctx_r0.EntityId);
} }
function DatabaseModifyComponent_Conditional_3_Conditional_18_Conditional_3_Template(rf, ctx) { if (rf & 1) {
    const _r4 = i0.ɵɵgetCurrentView();
    i0.ɵɵelementStart(0, "mj-database-fields-grid", 26);
    i0.ɵɵlistener("ColumnsChanged", function DatabaseModifyComponent_Conditional_3_Conditional_18_Conditional_3_Template_mj_database_fields_grid_ColumnsChanged_0_listener($event) { i0.ɵɵrestoreView(_r4); const ctx_r0 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r0.OnColumnsChanged($event)); });
    i0.ɵɵelementEnd();
} if (rf & 2) {
    const ctx_r0 = i0.ɵɵnextContext(3);
    i0.ɵɵproperty("Columns", ctx_r0.EditedColumns);
} }
function DatabaseModifyComponent_Conditional_3_Conditional_18_Conditional_4_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelement(0, "mj-database-review-panel", 24);
} if (rf & 2) {
    const ctx_r0 = i0.ɵɵnextContext(3);
    i0.ɵɵproperty("TableDefinition", ctx_r0.CurrentTableSpec)("ExistingColumns", ctx_r0.ExistingColumns);
} }
function DatabaseModifyComponent_Conditional_3_Conditional_18_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelementStart(0, "as-split", 15)(1, "as-split-area", 21)(2, "div", 22);
    i0.ɵɵconditionalCreate(3, DatabaseModifyComponent_Conditional_3_Conditional_18_Conditional_3_Template, 1, 1, "mj-database-fields-grid", 23);
    i0.ɵɵconditionalCreate(4, DatabaseModifyComponent_Conditional_3_Conditional_18_Conditional_4_Template, 1, 2, "mj-database-review-panel", 24);
    i0.ɵɵelementEnd()();
    i0.ɵɵelementStart(5, "as-split-area", 21);
    i0.ɵɵelement(6, "mj-database-preview-pane", 25);
    i0.ɵɵelementEnd()();
} if (rf & 2) {
    const ctx_r0 = i0.ɵɵnextContext(2);
    i0.ɵɵadvance();
    i0.ɵɵproperty("size", 55)("minSize", 40);
    i0.ɵɵadvance(2);
    i0.ɵɵconditional(ctx_r0.ActiveTab === "fields" ? 3 : -1);
    i0.ɵɵadvance();
    i0.ɵɵconditional(ctx_r0.ActiveTab === "review" ? 4 : -1);
    i0.ɵɵadvance();
    i0.ɵɵproperty("size", 45)("minSize", 25);
    i0.ɵɵadvance();
    i0.ɵɵproperty("TableDefinition", ctx_r0.CurrentTableSpec ?? i0.ɵɵpureFunction0(8, _c0))("IsAlter", true);
} }
function DatabaseModifyComponent_Conditional_3_Conditional_21_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵtext(0, " Close ");
} }
function DatabaseModifyComponent_Conditional_3_Conditional_22_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵtext(0, " Cancel ");
} }
function DatabaseModifyComponent_Conditional_3_Conditional_23_Template(rf, ctx) { if (rf & 1) {
    const _r5 = i0.ɵɵgetCurrentView();
    i0.ɵɵelementStart(0, "button", 27);
    i0.ɵɵlistener("click", function DatabaseModifyComponent_Conditional_3_Conditional_23_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r5); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.OnApplyChanges()); });
    i0.ɵɵelement(1, "i", 13);
    i0.ɵɵtext(2, " Apply Changes ");
    i0.ɵɵelementEnd();
} if (rf & 2) {
    const ctx_r0 = i0.ɵɵnextContext(2);
    i0.ɵɵproperty("disabled", !ctx_r0.CanApplyChanges || ctx_r0.IsPipelineRunning);
} }
function DatabaseModifyComponent_Conditional_3_Template(rf, ctx) { if (rf & 1) {
    const _r2 = i0.ɵɵgetCurrentView();
    i0.ɵɵelementStart(0, "div", 4)(1, "div", 5);
    i0.ɵɵelement(2, "i", 6);
    i0.ɵɵelementStart(3, "span", 7);
    i0.ɵɵtext(4);
    i0.ɵɵelementEnd();
    i0.ɵɵelementStart(5, "span", 8);
    i0.ɵɵtext(6);
    i0.ɵɵelementEnd()()();
    i0.ɵɵelementStart(7, "div", 9)(8, "button", 10);
    i0.ɵɵlistener("click", function DatabaseModifyComponent_Conditional_3_Template_button_click_8_listener() { i0.ɵɵrestoreView(_r2); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.SetTab("fields")); });
    i0.ɵɵelement(9, "i", 11);
    i0.ɵɵtext(10, " Fields ");
    i0.ɵɵelementEnd();
    i0.ɵɵelementStart(11, "button", 10);
    i0.ɵɵlistener("click", function DatabaseModifyComponent_Conditional_3_Template_button_click_11_listener() { i0.ɵɵrestoreView(_r2); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.SetTab("review")); });
    i0.ɵɵelement(12, "i", 12);
    i0.ɵɵtext(13, " Review Changes ");
    i0.ɵɵelementEnd();
    i0.ɵɵelementStart(14, "button", 10);
    i0.ɵɵlistener("click", function DatabaseModifyComponent_Conditional_3_Template_button_click_14_listener() { i0.ɵɵrestoreView(_r2); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.SetTab("apply")); });
    i0.ɵɵelement(15, "i", 13);
    i0.ɵɵtext(16, " Apply Changes ");
    i0.ɵɵelementEnd()();
    i0.ɵɵconditionalCreate(17, DatabaseModifyComponent_Conditional_3_Conditional_17_Template, 3, 2, "div", 14)(18, DatabaseModifyComponent_Conditional_3_Conditional_18_Template, 7, 9, "as-split", 15);
    i0.ɵɵelementStart(19, "div", 16)(20, "button", 17);
    i0.ɵɵlistener("click", function DatabaseModifyComponent_Conditional_3_Template_button_click_20_listener() { i0.ɵɵrestoreView(_r2); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.OnCancel()); });
    i0.ɵɵconditionalCreate(21, DatabaseModifyComponent_Conditional_3_Conditional_21_Template, 1, 0)(22, DatabaseModifyComponent_Conditional_3_Conditional_22_Template, 1, 0);
    i0.ɵɵelementEnd();
    i0.ɵɵconditionalCreate(23, DatabaseModifyComponent_Conditional_3_Conditional_23_Template, 3, 1, "button", 18);
    i0.ɵɵelementEnd();
} if (rf & 2) {
    const ctx_r0 = i0.ɵɵnextContext();
    i0.ɵɵadvance(4);
    i0.ɵɵtextInterpolate(ctx_r0.EntityDetail.entityName);
    i0.ɵɵadvance(2);
    i0.ɵɵtextInterpolate2("", ctx_r0.EntityDetail.schemaName, ".", ctx_r0.EntityDetail.tableName);
    i0.ɵɵadvance(2);
    i0.ɵɵclassProp("active", ctx_r0.ActiveTab === "fields");
    i0.ɵɵattribute("aria-selected", ctx_r0.ActiveTab === "fields");
    i0.ɵɵadvance(3);
    i0.ɵɵclassProp("active", ctx_r0.ActiveTab === "review");
    i0.ɵɵattribute("aria-selected", ctx_r0.ActiveTab === "review");
    i0.ɵɵadvance(3);
    i0.ɵɵclassProp("active", ctx_r0.ActiveTab === "apply")("tab-apply", true);
    i0.ɵɵattribute("aria-selected", ctx_r0.ActiveTab === "apply");
    i0.ɵɵadvance(3);
    i0.ɵɵconditional(ctx_r0.ActiveTab === "apply" ? 17 : 18);
    i0.ɵɵadvance(4);
    i0.ɵɵconditional(ctx_r0.IsPipelineRunning ? 21 : 22);
    i0.ɵɵadvance(2);
    i0.ɵɵconditional(ctx_r0.ActiveTab !== "apply" ? 23 : -1);
} }
export class DatabaseModifyComponent {
    // ─── Injected ──────────────────────────────────────────────────────────
    cdr = inject(ChangeDetectorRef);
    confirmService = inject(MJConfirmService);
    // ─── Inputs / Outputs ──────────────────────────────────────────────────
    set EntityId(v) {
        if (v && v !== this._entityId) {
            this._entityId = v;
            if (this._initialized)
                this.loadEntityDetail();
        }
    }
    get EntityId() { return this._entityId; }
    _entityId = '';
    _initialized = false;
    EntityModified = new EventEmitter();
    Cancelled = new EventEmitter();
    // ─── View state ────────────────────────────────────────────────────────
    ActiveTab = 'fields';
    IsLoading = false;
    LoadError = null;
    EntityDetail = null;
    /** Columns being edited — starts from existing entity fields + user additions. */
    EditedColumns = [];
    IsPipelineRunning = false;
    CanApplyChanges = false;
    pipelinePanel;
    // ─── Lifecycle ─────────────────────────────────────────────────────────
    async ngOnInit() {
        this._initialized = true;
        await this.loadEntityDetail();
    }
    ngOnDestroy() {
        // Cleanup not needed — no subscriptions beyond the load promise
    }
    // ─── Tab navigation ────────────────────────────────────────────────────
    SetTab(tab) {
        // Don't allow switching away from 'apply' once pipeline has started
        if (this.IsPipelineRunning && tab !== 'apply')
            return;
        this.ActiveTab = tab;
        this.cdr.markForCheck();
    }
    // ─── Column change handler ─────────────────────────────────────────────
    OnColumnsChanged(columns) {
        this.EditedColumns = columns;
        this.CanApplyChanges = this.hasChanges();
        this.cdr.markForCheck();
    }
    // ─── Apply / Pipeline ──────────────────────────────────────────────────
    OnApplyChanges() {
        if (!this.EntityDetail || !this.CanApplyChanges)
            return;
        this.IsPipelineRunning = true;
        this.SetTab('apply');
        setTimeout(() => this.pipelinePanel?.StartExecution(), 0);
    }
    OnPipelineCompleted(result) {
        this.IsPipelineRunning = false;
        DatabaseDesignerEngine.Instance.invalidateCache();
        this.EntityModified.emit(result);
        this.cdr.markForCheck();
    }
    OnPipelineErrored(_msg) {
        this.IsPipelineRunning = false;
        this.cdr.markForCheck();
    }
    async OnCancel() {
        if (this.IsPipelineRunning) {
            // This is a plain button handler (fire-and-forget click), so it can await the
            // styled confirm. Only the dashboard's [CanClose] guard must stay on the
            // synchronous window.confirm. The pipeline continues on the server regardless;
            // we're only hiding the progress UI.
            const confirmed = await this.confirmService.Confirm({
                title: 'Pipeline in progress',
                message: 'A pipeline operation is in progress. Closing will hide the progress panel.',
                detail: 'The operation will continue running on the server.',
            });
            if (!confirmed)
                return;
        }
        this.Cancelled.emit();
    }
    // ─── Template helpers ──────────────────────────────────────────────────
    get CurrentTableSpec() {
        if (!this.EntityDetail)
            return null;
        return {
            EntityName: this.EntityDetail.entityName,
            TableName: this.EntityDetail.tableName,
            SchemaName: this.EntityDetail.schemaName,
            Description: this.EntityDetail.description,
            Columns: this.EditedColumns,
        };
    }
    get ExistingColumns() {
        return this.EntityDetail?.columns ?? [];
    }
    // ─── Private helpers ───────────────────────────────────────────────────
    async loadEntityDetail() {
        if (!this._entityId)
            return;
        this.IsLoading = true;
        this.LoadError = null;
        this.cdr.markForCheck();
        try {
            this.EntityDetail = await DatabaseDesignerEngine.Instance.loadEntityDetail(this._entityId);
            if (this.EntityDetail) {
                this.EditedColumns = [...this.EntityDetail.columns];
            }
        }
        catch (err) {
            this.LoadError = err instanceof Error ? err.message : String(err);
        }
        finally {
            this.IsLoading = false;
            this.cdr.markForCheck();
        }
    }
    /** True if the user added new columns or changed any existing column. */
    hasChanges() {
        const original = this.EntityDetail?.columns ?? [];
        if (this.EditedColumns.length !== original.length)
            return true;
        return this.EditedColumns.some((col, i) => col.Name !== original[i]?.Name ||
            col.Type !== original[i]?.Type ||
            col.IsNullable !== original[i]?.IsNullable ||
            col.MaxLength !== original[i]?.MaxLength ||
            col.Precision !== original[i]?.Precision ||
            col.Scale !== original[i]?.Scale ||
            col.DefaultValue !== original[i]?.DefaultValue ||
            col.Description !== original[i]?.Description);
    }
    static ɵfac = function DatabaseModifyComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || DatabaseModifyComponent)(); };
    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: DatabaseModifyComponent, selectors: [["mj-database-modify"]], viewQuery: function DatabaseModifyComponent_Query(rf, ctx) { if (rf & 1) {
            i0.ɵɵviewQuery(EntityPipelinePanelComponent, 5);
        } if (rf & 2) {
            let _t;
            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.pipelinePanel = _t.first);
        } }, inputs: { EntityId: "EntityId" }, outputs: { EntityModified: "EntityModified", Cancelled: "Cancelled" }, standalone: false, decls: 4, vars: 3, consts: [[1, "modify-root"], [1, "modify-loading"], ["Variant", "error", 1, "modify-error"], ["text", "Loading entity details\u2026"], [1, "modify-header"], [1, "entity-info"], [1, "fa-solid", "fa-table-cells-large"], [1, "entity-name"], [1, "schema-path"], ["role", "tablist", 1, "tab-bar"], ["role", "tab", 1, "tab-btn", 3, "click"], [1, "fa-solid", "fa-table-list"], [1, "fa-solid", "fa-magnifying-glass"], [1, "fa-solid", "fa-rocket-launch"], [1, "tab-content", "tab-content-full"], ["direction", "horizontal", "gutterSize", "6", 1, "modify-split"], [1, "modify-footer"], ["mjButton", "", "buttonStyle", "secondary", 3, "click"], ["mjButton", "", "buttonStyle", "primary", 3, "disabled"], [1, "apply-tab"], ["ModificationType", "alter", 3, "Completed", "Errored", "TableDefinition", "ExistingEntityId"], [3, "size", "minSize"], [1, "tab-content"], ["Mode", "modify", 3, "Columns"], ["ModificationType", "alter", 3, "TableDefinition", "ExistingColumns"], [1, "modify-preview", 3, "TableDefinition", "IsAlter"], ["Mode", "modify", 3, "ColumnsChanged", "Columns"], ["mjButton", "", "buttonStyle", "primary", 3, "click", "disabled"]], template: function DatabaseModifyComponent_Template(rf, ctx) { if (rf & 1) {
            i0.ɵɵelementStart(0, "div", 0);
            i0.ɵɵconditionalCreate(1, DatabaseModifyComponent_Conditional_1_Template, 2, 0, "div", 1);
            i0.ɵɵconditionalCreate(2, DatabaseModifyComponent_Conditional_2_Template, 2, 1, "mj-alert", 2);
            i0.ɵɵconditionalCreate(3, DatabaseModifyComponent_Conditional_3_Template, 24, 17);
            i0.ɵɵelementEnd();
        } if (rf & 2) {
            i0.ɵɵadvance();
            i0.ɵɵconditional(ctx.IsLoading ? 1 : -1);
            i0.ɵɵadvance();
            i0.ɵɵconditional(ctx.LoadError ? 2 : -1);
            i0.ɵɵadvance();
            i0.ɵɵconditional(!ctx.IsLoading && !ctx.LoadError && ctx.EntityDetail ? 3 : -1);
        } }, dependencies: [i1.MJButtonDirective, i1.MJAlertComponent, i2.LoadingComponent, i3.SplitComponent, i3.SplitAreaComponent, i4.EntityFieldsGridComponent, i5.EntityReviewPanelComponent, i6.EntityPipelinePanelComponent, i7.DatabasePreviewPaneComponent], styles: [".modify-root[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  overflow: hidden;\n}\n\n\n\n\n.modify-loading[_ngcontent-%COMP%] {\n  flex: 1;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n\n\n.modify-error[_ngcontent-%COMP%] { margin: 16px; }\n\n\n\n\n.modify-header[_ngcontent-%COMP%] {\n  padding: 16px 20px 12px;\n  border-bottom: 1px solid var(--mj-border-subtle);\n  flex-shrink: 0;\n}\n\n.entity-info[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  flex-wrap: wrap;\n}\n\n.entity-info[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: var(--mj-brand-primary);\n}\n\n.entity-name[_ngcontent-%COMP%] {\n  font-weight: 700;\n  font-size: 1rem;\n  color: var(--mj-text-primary);\n}\n\n.schema-path[_ngcontent-%COMP%] {\n  font-family: monospace;\n  font-size: 0.85rem;\n  color: var(--mj-text-secondary);\n}\n\n\n\n\n.tab-bar[_ngcontent-%COMP%] {\n  display: flex;\n  border-bottom: 2px solid var(--mj-border-subtle);\n  padding: 0 16px;\n  flex-shrink: 0;\n  gap: 0;\n}\n\n.tab-btn[_ngcontent-%COMP%] {\n  display: inline-flex;\n  align-items: center;\n  gap: 7px;\n  padding: 12px 16px;\n  font-size: 0.875rem;\n  font-weight: 500;\n  color: var(--mj-text-secondary);\n  border: none;\n  background: none;\n  cursor: pointer;\n  border-bottom: 2px solid transparent;\n  margin-bottom: -2px;\n  transition: color 0.15s, border-color 0.15s;\n  white-space: nowrap;\n}\n\n.tab-btn[_ngcontent-%COMP%]:hover {\n  color: var(--mj-text-primary);\n}\n\n.tab-btn.active[_ngcontent-%COMP%] {\n  color: var(--mj-brand-primary);\n  border-bottom-color: var(--mj-brand-primary);\n  font-weight: 600;\n}\n\n.tab-btn.tab-apply.active[_ngcontent-%COMP%] {\n  color: var(--mj-status-success-text);\n  border-bottom-color: var(--mj-status-success);\n}\n\n\n\n\n.modify-split[_ngcontent-%COMP%] {\n  flex: 1;\n  min-height: 0;\n  width: 100%;\n}\n\n.modify-split[_ngcontent-%COMP%]   as-split-area[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  min-width: 0;\n  min-height: 0;\n}\n\n.modify-preview[_ngcontent-%COMP%] {\n  display: block;\n  height: 100%;\n  min-width: 0;\n}\n\n\n\n\n.tab-content[_ngcontent-%COMP%] {\n  flex: 1;\n  overflow: hidden;\n  display: flex;\n  flex-direction: column;\n  min-height: 0;\n}\n\n.tab-content-full[_ngcontent-%COMP%] {\n  width: 100%;\n}\n\n.apply-tab[_ngcontent-%COMP%] {\n  flex: 1;\n  overflow-y: auto;\n}\n\n\n\n\n.modify-footer[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  justify-content: flex-end;\n  gap: 10px;\n  padding: 14px 20px;\n  border-top: 1px solid var(--mj-border-subtle);\n  background: var(--mj-bg-surface-card);\n  flex-shrink: 0;\n}"], changeDetection: 0 });
}
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(DatabaseModifyComponent, [{
        type: Component,
        args: [{ standalone: false, selector: 'mj-database-modify', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"modify-root\">\n\n  <!-- \u2500\u2500 Loading \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n  @if (IsLoading) {\n    <div class=\"modify-loading\">\n      <mj-loading text=\"Loading entity details\u2026\"></mj-loading>\n    </div>\n  }\n\n  <!-- \u2500\u2500 Error \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n  @if (LoadError) {\n    <mj-alert Variant=\"error\" class=\"modify-error\">{{ LoadError }}</mj-alert>\n  }\n\n  <!-- \u2500\u2500 Main view \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n  @if (!IsLoading && !LoadError && EntityDetail) {\n    <!-- Entity header -->\n    <div class=\"modify-header\">\n      <div class=\"entity-info\">\n        <i class=\"fa-solid fa-table-cells-large\"></i>\n        <span class=\"entity-name\">{{ EntityDetail.entityName }}</span>\n        <span class=\"schema-path\">{{ EntityDetail.schemaName }}.{{ EntityDetail.tableName }}</span>\n      </div>\n    </div>\n\n    <!-- Tab bar -->\n    <div class=\"tab-bar\" role=\"tablist\">\n      <button\n        role=\"tab\"\n        class=\"tab-btn\"\n        [class.active]=\"ActiveTab === 'fields'\"\n        [attr.aria-selected]=\"ActiveTab === 'fields'\"\n        (click)=\"SetTab('fields')\">\n        <i class=\"fa-solid fa-table-list\"></i>\n        Fields\n      </button>\n      <button\n        role=\"tab\"\n        class=\"tab-btn\"\n        [class.active]=\"ActiveTab === 'review'\"\n        [attr.aria-selected]=\"ActiveTab === 'review'\"\n        (click)=\"SetTab('review')\">\n        <i class=\"fa-solid fa-magnifying-glass\"></i>\n        Review Changes\n      </button>\n      <button\n        role=\"tab\"\n        class=\"tab-btn\"\n        [class.active]=\"ActiveTab === 'apply'\"\n        [class.tab-apply]=\"true\"\n        [attr.aria-selected]=\"ActiveTab === 'apply'\"\n        (click)=\"SetTab('apply')\">\n        <i class=\"fa-solid fa-rocket-launch\"></i>\n        Apply Changes\n      </button>\n    </div>\n\n    <!-- Tab content: Fields + Review get a live preview pane on the right; Apply takes full width -->\n    @if (ActiveTab === 'apply') {\n\n      <div class=\"tab-content tab-content-full\">\n        <div class=\"apply-tab\">\n          <mj-database-pipeline-panel\n            [TableDefinition]=\"CurrentTableSpec\"\n            ModificationType=\"alter\"\n            [ExistingEntityId]=\"EntityId\"\n            (Completed)=\"OnPipelineCompleted($event)\"\n            (Errored)=\"OnPipelineErrored($event)\">\n          </mj-database-pipeline-panel>\n        </div>\n      </div>\n\n    } @else {\n\n      <as-split direction=\"horizontal\" class=\"modify-split\" gutterSize=\"6\">\n\n        <as-split-area [size]=\"55\" [minSize]=\"40\">\n          <div class=\"tab-content\">\n\n            @if (ActiveTab === 'fields') {\n              <mj-database-fields-grid\n                [Columns]=\"EditedColumns\"\n                Mode=\"modify\"\n                (ColumnsChanged)=\"OnColumnsChanged($event)\">\n              </mj-database-fields-grid>\n            }\n\n            @if (ActiveTab === 'review') {\n              <mj-database-review-panel\n                [TableDefinition]=\"CurrentTableSpec\"\n                ModificationType=\"alter\"\n                [ExistingColumns]=\"ExistingColumns\">\n              </mj-database-review-panel>\n            }\n\n          </div>\n        </as-split-area>\n\n        <as-split-area [size]=\"45\" [minSize]=\"25\">\n          <mj-database-preview-pane\n            class=\"modify-preview\"\n            [TableDefinition]=\"CurrentTableSpec ?? {}\"\n            [IsAlter]=\"true\">\n          </mj-database-preview-pane>\n        </as-split-area>\n\n      </as-split>\n\n    }\n\n    <!-- Footer -->\n    <div class=\"modify-footer\">\n      <button mjButton buttonStyle=\"secondary\" (click)=\"OnCancel()\">\n        @if (IsPipelineRunning) { Close } @else { Cancel }\n      </button>\n      @if (ActiveTab !== 'apply') {\n        <button\n          mjButton\n          buttonStyle=\"primary\"\n          [disabled]=\"!CanApplyChanges || IsPipelineRunning\"\n          (click)=\"OnApplyChanges()\">\n          <i class=\"fa-solid fa-rocket-launch\"></i>\n          Apply Changes\n        </button>\n      }\n    </div>\n  }\n\n</div>\n", styles: [".modify-root {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  overflow: hidden;\n}\n\n/* \u2500\u2500 Loading / Error \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.modify-loading {\n  flex: 1;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n/* positions the load-error mj-alert (margin-less component otherwise) */\n.modify-error { margin: 16px; }\n\n/* \u2500\u2500 Header \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.modify-header {\n  padding: 16px 20px 12px;\n  border-bottom: 1px solid var(--mj-border-subtle);\n  flex-shrink: 0;\n}\n\n.entity-info {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  flex-wrap: wrap;\n}\n\n.entity-info i {\n  color: var(--mj-brand-primary);\n}\n\n.entity-name {\n  font-weight: 700;\n  font-size: 1rem;\n  color: var(--mj-text-primary);\n}\n\n.schema-path {\n  font-family: monospace;\n  font-size: 0.85rem;\n  color: var(--mj-text-secondary);\n}\n\n/* \u2500\u2500 Tab bar \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.tab-bar {\n  display: flex;\n  border-bottom: 2px solid var(--mj-border-subtle);\n  padding: 0 16px;\n  flex-shrink: 0;\n  gap: 0;\n}\n\n.tab-btn {\n  display: inline-flex;\n  align-items: center;\n  gap: 7px;\n  padding: 12px 16px;\n  font-size: 0.875rem;\n  font-weight: 500;\n  color: var(--mj-text-secondary);\n  border: none;\n  background: none;\n  cursor: pointer;\n  border-bottom: 2px solid transparent;\n  margin-bottom: -2px;\n  transition: color 0.15s, border-color 0.15s;\n  white-space: nowrap;\n}\n\n.tab-btn:hover {\n  color: var(--mj-text-primary);\n}\n\n.tab-btn.active {\n  color: var(--mj-brand-primary);\n  border-bottom-color: var(--mj-brand-primary);\n  font-weight: 600;\n}\n\n.tab-btn.tab-apply.active {\n  color: var(--mj-status-success-text);\n  border-bottom-color: var(--mj-status-success);\n}\n\n/* \u2500\u2500 Split body (Fields + Review only) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.modify-split {\n  flex: 1;\n  min-height: 0;\n  width: 100%;\n}\n\n.modify-split as-split-area {\n  display: flex;\n  flex-direction: column;\n  min-width: 0;\n  min-height: 0;\n}\n\n.modify-preview {\n  display: block;\n  height: 100%;\n  min-width: 0;\n}\n\n/* \u2500\u2500 Tab content \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.tab-content {\n  flex: 1;\n  overflow: hidden;\n  display: flex;\n  flex-direction: column;\n  min-height: 0;\n}\n\n.tab-content-full {\n  width: 100%;\n}\n\n.apply-tab {\n  flex: 1;\n  overflow-y: auto;\n}\n\n/* \u2500\u2500 Footer \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.modify-footer {\n  display: flex;\n  align-items: center;\n  justify-content: flex-end;\n  gap: 10px;\n  padding: 14px 20px;\n  border-top: 1px solid var(--mj-border-subtle);\n  background: var(--mj-bg-surface-card);\n  flex-shrink: 0;\n}\n"] }]
    }], null, { EntityId: [{
            type: Input
        }], EntityModified: [{
            type: Output
        }], Cancelled: [{
            type: Output
        }], pipelinePanel: [{
            type: ViewChild,
            args: [EntityPipelinePanelComponent]
        }] }); })();
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(DatabaseModifyComponent, { className: "DatabaseModifyComponent", filePath: "src/DatabaseDesigner/components/modify/database-modify.component.ts", lineNumber: 34 }); })();
//# sourceMappingURL=database-modify.component.js.map