/**
 * @module database-preview-pane.component
 * @description Live preview of the current wizard `TableDefinition`.
 *
 * Two tabs:
 *   - **Diagram** — renders an `mj-erd-diagram` with the in-progress entity
 *     as the focus node and any FK-referenced entities as satellite nodes.
 *   - **SQL** — renders the CREATE TABLE / ALTER TABLE DDL in a read-only
 *     `mj-code-editor` with SQL syntax highlighting.
 *
 * The component is a pure function of `TableDefinition`: set the input, the
 * preview re-renders.  No side effects, no service subscriptions — the wizard
 * host owns the subscription to `EntityWizardStateService.tableDefinition$`
 * and pushes values down.
 */
import { Component, Input, ChangeDetectionStrategy, ChangeDetectorRef, inject, } from '@angular/core';
import { Metadata } from '@memberjunction/core';
import * as i0 from "@angular/core";
import * as i1 from "@memberjunction/ng-code-editor";
import * as i2 from "@memberjunction/ng-entity-relationship-diagram";
function DatabasePreviewPaneComponent_Conditional_12_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelement(0, "mj-erd-diagram", 8);
} if (rf & 2) {
    const ctx_r0 = i0.ɵɵnextContext();
    i0.ɵɵproperty("nodes", ctx_r0.ErdNodes)("focusNodeId", ctx_r0.FocusNodeId)("focusDepth", 1)("readOnly", true)("showHeader", false)("config", ctx_r0.ErdConfig);
} }
function DatabasePreviewPaneComponent_Conditional_13_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelement(0, "mj-code-editor", 9);
} if (rf & 2) {
    const ctx_r0 = i0.ɵɵnextContext();
    i0.ɵɵproperty("value", ctx_r0.SqlText)("readonly", true)("lineWrapping", false);
} }
export class DatabasePreviewPaneComponent {
    cdr = inject(ChangeDetectorRef);
    // ─── Inputs ────────────────────────────────────────────────────────────
    /**
     * Current wizard draft.  Accepts a partial spec so the preview can
     * render meaningfully even on Step 1 (name only).
     */
    set TableDefinition(value) {
        this._tableDefinition = value ?? {};
        this.recompute();
    }
    get TableDefinition() { return this._tableDefinition; }
    _tableDefinition = {};
    /**
     * True when this preview is showing an edit of an existing entity
     * (modify flow).  Switches the SQL header to `ALTER` wording and draws
     * a "current vs proposed" indicator in the diagram.
     *
     * Defaults to false (create flow).
     */
    set IsAlter(value) {
        this._isAlter = value;
        this.recompute();
    }
    get IsAlter() { return this._isAlter; }
    _isAlter = false;
    // ─── View state ────────────────────────────────────────────────────────
    ActiveTab = 'diagram';
    ErdNodes = [];
    SqlText = '';
    /** Focus node ID — lets `mj-erd-diagram` highlight the in-progress entity. */
    FocusNodeId = null;
    /**
     * Stable config reference — bound to `mj-erd-diagram` via `[config]`.
     * Must be a class property, not an inline object literal in the template,
     * or every CD cycle produces a new reference and the ERD re-runs its
     * layout / fit-to-view on every tick.
     */
    ErdConfig = { showAllFields: true, maxNodeHeight: 520 };
    // ─── Tab handler ───────────────────────────────────────────────────────
    SelectTab(tab) {
        this.ActiveTab = tab;
        this.cdr.markForCheck();
    }
    // ─── Derivation ────────────────────────────────────────────────────────
    recompute() {
        const enrichments = this.resolveSatelliteFields(this._tableDefinition.ForeignKeys ?? []);
        this.ErdNodes = DatabasePreviewPaneComponent.BuildErdNodes(this._tableDefinition, enrichments);
        this.SqlText = DatabasePreviewPaneComponent.BuildSqlText(this._tableDefinition, this._isAlter);
        this.FocusNodeId = DatabasePreviewPaneComponent.BuildFocusId(this._tableDefinition);
        this.cdr.markForCheck();
    }
    /**
     * Look up each FK target in MJ metadata and return PK + name-field rows per
     * satellite node.  Falls back to a minimal single-column stub when the
     * referenced table isn't a known MJ entity.
     */
    resolveSatelliteFields(foreignKeys) {
        const md = new Metadata(); // global-provider-ok: client-side Angular component, single provider
        const result = new Map();
        const seen = new Set();
        for (const fk of foreignKeys) {
            const satId = DatabasePreviewPaneComponent.MakeSatelliteId(fk);
            if (seen.has(satId))
                continue;
            seen.add(satId);
            const entity = md.Entities.find(e => e.SchemaName === fk.ReferencedSchema && e.BaseTable === fk.ReferencedTable);
            if (!entity)
                continue;
            const fields = [];
            const refField = entity.Fields.find(f => f.Name === fk.ReferencedColumn);
            if (refField) {
                fields.push({
                    id: `${satId}:${refField.Name}`,
                    name: refField.Name,
                    type: refField.SQLFullType,
                    isPrimaryKey: refField.IsPrimaryKey,
                });
            }
            const nameField = entity.Fields.find(f => f.IsNameField && f.Name !== fk.ReferencedColumn);
            if (nameField) {
                fields.push({
                    id: `${satId}:${nameField.Name}`,
                    name: nameField.Name,
                    type: nameField.SQLFullType,
                    isPrimaryKey: false,
                });
            }
            if (fields.length > 0)
                result.set(satId, fields);
        }
        return result;
    }
    // ─── Pure builders (exposed for unit testing) ──────────────────────────
    /** DOM id for the focus node, used by `mj-erd-diagram` to highlight. */
    static BuildFocusId(spec) {
        const name = spec.TableName || spec.EntityName;
        return name ? `focus:${name}` : null;
    }
    /**
     * ERD node list: one focus node + one satellite per distinct FK target.
     * `satelliteEnrichments` — optional PK + name-field rows per satellite,
     * keyed by `MakeSatelliteId(fk)`.  When absent, satellites render a
     * minimal single-column stub.
     */
    static BuildErdNodes(spec, satelliteEnrichments) {
        const tableName = spec.TableName || spec.EntityName || 'NewEntity';
        const schemaName = spec.SchemaName || '__mj_UDT';
        const focusId = `focus:${tableName}`;
        const focusFields = this.BuildFocusFields(focusId, spec);
        this.AnnotateFkLinks(focusFields, spec.ForeignKeys ?? []);
        const focusNode = {
            id: focusId,
            name: spec.EntityName || tableName,
            schemaName,
            baseTable: tableName,
            description: spec.Description,
            fields: focusFields,
        };
        return [focusNode, ...this.BuildSatelliteNodes(spec.ForeignKeys ?? [], satelliteEnrichments)];
    }
    /**
     * Field list for the focus node: PK + user columns + synthetic FK columns + system audit.
     * Pure — no link annotation.  `AnnotateFkLinks` runs after to mark FK sources.
     */
    static BuildFocusFields(focusId, spec) {
        const columns = spec.Columns ?? [];
        const foreignKeys = spec.ForeignKeys ?? [];
        const columnNames = new Set(columns.map(c => c.Name));
        const fields = [];
        fields.push({
            id: `${focusId}:ID`,
            name: 'ID',
            type: 'uniqueidentifier',
            isPrimaryKey: true,
            description: 'Primary key — always present',
        });
        for (const col of columns) {
            fields.push({
                id: `${focusId}:${col.Name}`,
                name: col.Name,
                type: this.FormatFieldType(col),
                isPrimaryKey: false,
                allowsNull: col.IsNullable,
                length: col.MaxLength,
                precision: col.Precision,
                scale: col.Scale,
                defaultValue: col.DefaultValue,
                description: col.Description,
            });
        }
        // Synthetic field for any FK whose source column isn't declared in Columns yet.
        for (const fk of foreignKeys) {
            if (!fk.ColumnName || columnNames.has(fk.ColumnName))
                continue;
            fields.push({
                id: `${focusId}:${fk.ColumnName}`,
                name: fk.ColumnName,
                type: 'uniqueidentifier',
                isPrimaryKey: false,
                allowsNull: true,
                relatedNodeId: this.MakeSatelliteId(fk),
                relatedNodeName: fk.ReferencedTable,
                relatedFieldName: fk.ReferencedColumn,
            });
        }
        fields.push({
            id: `${focusId}:__mj_CreatedAt`,
            name: '__mj_CreatedAt',
            type: 'datetimeoffset',
            isPrimaryKey: false,
            defaultValue: 'GETUTCDATE()',
            description: 'Record creation timestamp',
        }, {
            id: `${focusId}:__mj_UpdatedAt`,
            name: '__mj_UpdatedAt',
            type: 'datetimeoffset',
            isPrimaryKey: false,
            defaultValue: 'GETUTCDATE()',
            description: 'Last update timestamp',
        });
        return fields;
    }
    /** Stamp FK metadata onto any existing fields that match an FK source column. */
    static AnnotateFkLinks(fields, foreignKeys) {
        for (const fk of foreignKeys) {
            if (!fk.ColumnName)
                continue;
            const fld = fields.find(f => f.name === fk.ColumnName);
            if (fld && !fld.relatedNodeId) {
                fld.relatedNodeId = this.MakeSatelliteId(fk);
                fld.relatedNodeName = fk.ReferencedTable;
                fld.relatedFieldName = fk.ReferencedColumn;
            }
        }
    }
    /**
     * One satellite node per distinct FK target (dedupes on schema+table).
     * When `enrichments` provides rows for a satellite id, those rows (PK +
     * name field, resolved from MJ metadata) are used instead of the minimal
     * single-column stub.
     */
    static BuildSatelliteNodes(foreignKeys, enrichments) {
        const seen = new Set();
        const satelliteNodes = [];
        for (const fk of foreignKeys) {
            // Skip in-progress rows where the target hasn't been picked yet.
            if (!fk.ReferencedSchema || !fk.ReferencedTable)
                continue;
            const satId = this.MakeSatelliteId(fk);
            if (seen.has(satId))
                continue;
            seen.add(satId);
            const enriched = enrichments?.get(satId);
            const fields = enriched && enriched.length > 0 ? enriched : [
                {
                    id: `${satId}:${fk.ReferencedColumn}`,
                    name: fk.ReferencedColumn,
                    type: 'uniqueidentifier',
                    isPrimaryKey: true,
                },
            ];
            satelliteNodes.push({
                id: satId,
                name: fk.ReferencedTable,
                schemaName: fk.ReferencedSchema,
                baseTable: fk.ReferencedTable,
                fields,
            });
        }
        return satelliteNodes;
    }
    static MakeSatelliteId(fk) {
        return `ref:${fk.ReferencedSchema}.${fk.ReferencedTable}`;
    }
    /** Preview DDL for the given TableDefinition.  `isAlter` only affects the lead comment. */
    static BuildSqlText(spec, isAlter = false) {
        const table = spec.TableName || spec.EntityName || 'NewEntity';
        const schema = spec.SchemaName || '__mj_UDT';
        const qualified = `[${schema}].[${table}]`;
        const leadComment = isAlter
            ? `-- Generated by Database Designer · preview (ALTER)`
            : `-- Generated by Database Designer · preview`;
        // Column lines, padded for alignment
        const colLines = [];
        colLines.push(`  [ID]              UNIQUEIDENTIFIER  NOT NULL DEFAULT NEWSEQUENTIALID(),`);
        for (const col of spec.Columns ?? []) {
            if (!col.Name)
                continue;
            colLines.push(`  ${this.FormatColumnLine(col)},`);
        }
        // FK columns that aren't already in Columns
        for (const fk of spec.ForeignKeys ?? []) {
            const inColumns = (spec.Columns ?? []).some(c => c.Name === fk.ColumnName);
            if (inColumns)
                continue;
            const name = `[${fk.ColumnName}]`.padEnd(18);
            colLines.push(`  ${name} UNIQUEIDENTIFIER  NULL, -- auto-generated FK`);
        }
        colLines.push(`  [__mj_CreatedAt]  DATETIMEOFFSET    NOT NULL DEFAULT GETUTCDATE(),`);
        colLines.push(`  [__mj_UpdatedAt]  DATETIMEOFFSET    NOT NULL DEFAULT GETUTCDATE(),`);
        colLines.push(`  CONSTRAINT [PK_${table}] PRIMARY KEY ([ID])`);
        const lines = [
            leadComment,
            `CREATE TABLE ${qualified} (`,
            ...colLines,
            `);`,
        ];
        // FK constraints
        for (const fk of spec.ForeignKeys ?? []) {
            lines.push('');
            lines.push(`ALTER TABLE ${qualified}`);
            lines.push(`  ADD CONSTRAINT [FK_${table}_${fk.ColumnName}]`);
            lines.push(`  FOREIGN KEY ([${fk.ColumnName}]) REFERENCES [${fk.ReferencedSchema}].[${fk.ReferencedTable}]([${fk.ReferencedColumn}]);`);
        }
        return lines.join('\n');
    }
    static FormatColumnLine(col) {
        const name = `[${col.Name}]`.padEnd(18);
        const type = col.RawSqlType || this.FormatFieldType(col);
        const nullability = col.IsNullable ? 'NULL' : 'NOT NULL';
        const dflt = col.DefaultValue ? ` DEFAULT ${col.DefaultValue}` : '';
        return `${name} ${type.padEnd(16)} ${nullability}${dflt}`;
    }
    static FormatFieldType(col) {
        if (col.RawSqlType)
            return col.RawSqlType;
        switch (col.Type) {
            case 'string': return `NVARCHAR(${col.MaxLength ?? 200})`;
            case 'text': return 'NVARCHAR(MAX)';
            case 'integer': return 'INT';
            case 'bigint': return 'BIGINT';
            case 'float': return 'FLOAT';
            case 'decimal': return `DECIMAL(${col.Precision ?? 18},${col.Scale ?? 2})`;
            case 'boolean': return 'BIT';
            case 'date': return 'DATE';
            case 'datetime': return 'DATETIMEOFFSET';
            case 'time': return 'TIME';
            case 'uuid': return 'UNIQUEIDENTIFIER';
            case 'json': return 'NVARCHAR(MAX)';
            default: return 'NVARCHAR(200)';
        }
    }
    static ɵfac = function DatabasePreviewPaneComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || DatabasePreviewPaneComponent)(); };
    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: DatabasePreviewPaneComponent, selectors: [["mj-database-preview-pane"]], inputs: { TableDefinition: "TableDefinition", IsAlter: "IsAlter" }, standalone: false, decls: 14, vars: 8, consts: [[1, "preview-pane"], ["role", "tablist", 1, "preview-tabs"], ["type", "button", "role", "tab", 1, "preview-tab", 3, "click"], [1, "fa-solid", "fa-diagram-project"], [1, "fa-solid", "fa-code"], [1, "preview-tabs-spacer"], [1, "preview-tabs-hint"], [1, "preview-body"], [1, "preview-erd", 3, "nodes", "focusNodeId", "focusDepth", "readOnly", "showHeader", "config"], ["language", "sql", "setup", "minimal", 1, "preview-sql", 3, "value", "readonly", "lineWrapping"]], template: function DatabasePreviewPaneComponent_Template(rf, ctx) { if (rf & 1) {
            i0.ɵɵelementStart(0, "div", 0)(1, "div", 1)(2, "button", 2);
            i0.ɵɵlistener("click", function DatabasePreviewPaneComponent_Template_button_click_2_listener() { return ctx.SelectTab("diagram"); });
            i0.ɵɵelement(3, "i", 3);
            i0.ɵɵtext(4, " Diagram ");
            i0.ɵɵelementEnd();
            i0.ɵɵelementStart(5, "button", 2);
            i0.ɵɵlistener("click", function DatabasePreviewPaneComponent_Template_button_click_5_listener() { return ctx.SelectTab("sql"); });
            i0.ɵɵelement(6, "i", 4);
            i0.ɵɵtext(7, " SQL ");
            i0.ɵɵelementEnd();
            i0.ɵɵelement(8, "div", 5);
            i0.ɵɵelementStart(9, "span", 6);
            i0.ɵɵtext(10, "Updates as you edit");
            i0.ɵɵelementEnd()();
            i0.ɵɵelementStart(11, "div", 7);
            i0.ɵɵconditionalCreate(12, DatabasePreviewPaneComponent_Conditional_12_Template, 1, 6, "mj-erd-diagram", 8);
            i0.ɵɵconditionalCreate(13, DatabasePreviewPaneComponent_Conditional_13_Template, 1, 3, "mj-code-editor", 9);
            i0.ɵɵelementEnd()();
        } if (rf & 2) {
            i0.ɵɵadvance(2);
            i0.ɵɵclassProp("active", ctx.ActiveTab === "diagram");
            i0.ɵɵattribute("aria-selected", ctx.ActiveTab === "diagram");
            i0.ɵɵadvance(3);
            i0.ɵɵclassProp("active", ctx.ActiveTab === "sql");
            i0.ɵɵattribute("aria-selected", ctx.ActiveTab === "sql");
            i0.ɵɵadvance(7);
            i0.ɵɵconditional(ctx.ActiveTab === "diagram" ? 12 : -1);
            i0.ɵɵadvance();
            i0.ɵɵconditional(ctx.ActiveTab === "sql" ? 13 : -1);
        } }, dependencies: [i1.CodeEditorComponent, i2.ERDDiagramComponent], styles: [".preview-pane[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    height: 100%;\n    min-height: 0;\n    background: var(--mj-bg-surface-card);\n    border-left: 1px solid var(--mj-border-default);\n}\n\n\n\n\n.preview-tabs[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 4px;\n    padding: 8px 12px;\n    border-bottom: 1px solid var(--mj-border-default);\n    background: var(--mj-bg-surface);\n    flex-shrink: 0;\n}\n\n.preview-tab[_ngcontent-%COMP%] {\n    display: inline-flex;\n    align-items: center;\n    gap: 6px;\n    padding: 6px 12px;\n    border: 1px solid transparent;\n    border-radius: 6px;\n    background: transparent;\n    color: var(--mj-text-secondary);\n    font-size: 13px;\n    font-weight: 500;\n    cursor: pointer;\n    transition: background-color 120ms, color 120ms, border-color 120ms;\n}\n\n.preview-tab[_ngcontent-%COMP%]:hover {\n    background: var(--mj-bg-surface-hover);\n    color: var(--mj-text-primary);\n}\n\n.preview-tab.active[_ngcontent-%COMP%] {\n    background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n    color: var(--mj-brand-primary);\n    border-color: color-mix(in srgb, var(--mj-brand-primary) 20%, transparent);\n}\n\n.preview-tab[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 12px;\n}\n\n.preview-tabs-spacer[_ngcontent-%COMP%] {\n    flex: 1;\n}\n\n.preview-tabs-hint[_ngcontent-%COMP%] {\n    font-size: 11px;\n    color: var(--mj-text-muted);\n    letter-spacing: 0.02em;\n}\n\n\n\n\n.preview-body[_ngcontent-%COMP%] {\n    flex: 1;\n    min-height: 0;\n    display: flex;\n    flex-direction: column;\n    overflow: hidden;\n}\n\n.preview-erd[_ngcontent-%COMP%] {\n    flex: 1;\n    min-height: 0;\n    min-width: 0;\n}\n\n.preview-sql[_ngcontent-%COMP%] {\n    display: block;\n    flex: 1;\n    min-height: 0;\n}"], changeDetection: 0 });
}
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(DatabasePreviewPaneComponent, [{
        type: Component,
        args: [{ standalone: false, selector: 'mj-database-preview-pane', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"preview-pane\">\n\n  <!-- \u2500\u2500 Tab switcher \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\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  <div class=\"preview-tabs\" role=\"tablist\">\n    <button\n      type=\"button\"\n      role=\"tab\"\n      class=\"preview-tab\"\n      [class.active]=\"ActiveTab === 'diagram'\"\n      [attr.aria-selected]=\"ActiveTab === 'diagram'\"\n      (click)=\"SelectTab('diagram')\">\n      <i class=\"fa-solid fa-diagram-project\"></i>\n      Diagram\n    </button>\n    <button\n      type=\"button\"\n      role=\"tab\"\n      class=\"preview-tab\"\n      [class.active]=\"ActiveTab === 'sql'\"\n      [attr.aria-selected]=\"ActiveTab === 'sql'\"\n      (click)=\"SelectTab('sql')\">\n      <i class=\"fa-solid fa-code\"></i>\n      SQL\n    </button>\n    <div class=\"preview-tabs-spacer\"></div>\n    <span class=\"preview-tabs-hint\">Updates as you edit</span>\n  </div>\n\n  <!-- \u2500\u2500 Tab body \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\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  <div class=\"preview-body\">\n\n    @if (ActiveTab === 'diagram') {\n      <mj-erd-diagram\n        class=\"preview-erd\"\n        [nodes]=\"ErdNodes\"\n        [focusNodeId]=\"FocusNodeId\"\n        [focusDepth]=\"1\"\n        [readOnly]=\"true\"\n        [showHeader]=\"false\"\n        [config]=\"ErdConfig\">\n      </mj-erd-diagram>\n    }\n\n    @if (ActiveTab === 'sql') {\n      <mj-code-editor\n        class=\"preview-sql\"\n        [value]=\"SqlText\"\n        language=\"sql\"\n        [readonly]=\"true\"\n        [lineWrapping]=\"false\"\n        setup=\"minimal\">\n      </mj-code-editor>\n    }\n\n  </div>\n\n</div>\n", styles: [".preview-pane {\n    display: flex;\n    flex-direction: column;\n    height: 100%;\n    min-height: 0;\n    background: var(--mj-bg-surface-card);\n    border-left: 1px solid var(--mj-border-default);\n}\n\n/* \u2500\u2500 Tab switcher \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\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.preview-tabs {\n    display: flex;\n    align-items: center;\n    gap: 4px;\n    padding: 8px 12px;\n    border-bottom: 1px solid var(--mj-border-default);\n    background: var(--mj-bg-surface);\n    flex-shrink: 0;\n}\n\n.preview-tab {\n    display: inline-flex;\n    align-items: center;\n    gap: 6px;\n    padding: 6px 12px;\n    border: 1px solid transparent;\n    border-radius: 6px;\n    background: transparent;\n    color: var(--mj-text-secondary);\n    font-size: 13px;\n    font-weight: 500;\n    cursor: pointer;\n    transition: background-color 120ms, color 120ms, border-color 120ms;\n}\n\n.preview-tab:hover {\n    background: var(--mj-bg-surface-hover);\n    color: var(--mj-text-primary);\n}\n\n.preview-tab.active {\n    background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n    color: var(--mj-brand-primary);\n    border-color: color-mix(in srgb, var(--mj-brand-primary) 20%, transparent);\n}\n\n.preview-tab i {\n    font-size: 12px;\n}\n\n.preview-tabs-spacer {\n    flex: 1;\n}\n\n.preview-tabs-hint {\n    font-size: 11px;\n    color: var(--mj-text-muted);\n    letter-spacing: 0.02em;\n}\n\n/* \u2500\u2500 Body (ERD / SQL) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\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.preview-body {\n    flex: 1;\n    min-height: 0;\n    display: flex;\n    flex-direction: column;\n    overflow: hidden;\n}\n\n.preview-erd {\n    flex: 1;\n    min-height: 0;\n    min-width: 0;\n}\n\n.preview-sql {\n    display: block;\n    flex: 1;\n    min-height: 0;\n}\n"] }]
    }], null, { TableDefinition: [{
            type: Input
        }], IsAlter: [{
            type: Input
        }] }); })();
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(DatabasePreviewPaneComponent, { className: "DatabasePreviewPaneComponent", filePath: "src/DatabaseDesigner/components/shared/database-preview-pane.component.ts", lineNumber: 34 }); })();
//# sourceMappingURL=database-preview-pane.component.js.map