/**
 * @module entity-fields-grid.component
 * @description Inline field editor for the Database Designer wizard (Step 2) and
 * the Modify view (Fields tab).
 *
 * Each row represents one column definition.  Cells are directly editable —
 * click any cell to edit it in-place.  No separate dialog needed.
 *
 * ### Modes
 *  - `create`: all rows are new columns being defined. Any row can be deleted.
 *  - `modify`: rows loaded from an existing entity. Existing rows can be hidden
 *    from new records (soft-removal preserving data) but not deleted. New rows
 *    added by the user can be deleted outright.
 *
 * ### Validation
 * Reserved column names (`ID`, `__mj_CreatedAt`, `__mj_UpdatedAt`) are detected
 * and shown with an inline error badge. The parent step component reads
 * `HasErrors` to gate the "Next" button.
 */
import { Component, Input, Output, EventEmitter, ChangeDetectionStrategy, ChangeDetectorRef, inject, } from '@angular/core';
import { FIELD_TYPE_OPTIONS } from '../../database-designer.types.js';
import * as i0 from "@angular/core";
import * as i1 from "@angular/forms";
import * as i2 from "@memberjunction/ng-ui-components";
const _forTrack0 = ($index, $item) => $item.value;
function EntityFieldsGridComponent_Conditional_1_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelementStart(0, "div", 1);
    i0.ɵɵelement(1, "i", 26);
    i0.ɵɵtext(2, " Remove reserved column names before continuing. ");
    i0.ɵɵelementEnd();
} }
function EntityFieldsGridComponent_Conditional_96_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelementStart(0, "tr")(1, "td", 27);
    i0.ɵɵtext(2, " No columns defined yet. Click ");
    i0.ɵɵelementStart(3, "strong");
    i0.ɵɵtext(4, "Add Column");
    i0.ɵɵelementEnd();
    i0.ɵɵtext(5, " below to begin. ");
    i0.ɵɵelementEnd()();
} }
function EntityFieldsGridComponent_For_98_Conditional_4_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelementStart(0, "span", 30);
    i0.ɵɵtext(1, "reserved");
    i0.ɵɵelementEnd();
} }
function EntityFieldsGridComponent_For_98_For_8_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelementStart(0, "option", 32);
    i0.ɵɵtext(1);
    i0.ɵɵelementEnd();
} if (rf & 2) {
    const opt_r4 = ctx.$implicit;
    i0.ɵɵproperty("value", opt_r4.value);
    i0.ɵɵadvance();
    i0.ɵɵtextInterpolate(opt_r4.label);
} }
function EntityFieldsGridComponent_For_98_Conditional_13_Template(rf, ctx) { if (rf & 1) {
    const _r5 = i0.ɵɵgetCurrentView();
    i0.ɵɵelementStart(0, "input", 40);
    i0.ɵɵlistener("input", function EntityFieldsGridComponent_For_98_Conditional_13_Template_input_input_0_listener($event) { i0.ɵɵrestoreView(_r5); const row_r2 = i0.ɵɵnextContext().$implicit; const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.OnMaxLengthChange(row_r2.rowIndex, $event.target.value)); })("focus", function EntityFieldsGridComponent_For_98_Conditional_13_Template_input_focus_0_listener() { i0.ɵɵrestoreView(_r5); const row_r2 = i0.ɵɵnextContext().$implicit; const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.ActiveRowIndex = row_r2.rowIndex); });
    i0.ɵɵelementEnd();
} if (rf & 2) {
    const row_r2 = i0.ɵɵnextContext().$implicit;
    i0.ɵɵproperty("value", row_r2.MaxLength ?? 200);
} }
function EntityFieldsGridComponent_For_98_Conditional_14_Template(rf, ctx) { if (rf & 1) {
    const _r6 = i0.ɵɵgetCurrentView();
    i0.ɵɵelementStart(0, "div", 36)(1, "input", 41);
    i0.ɵɵlistener("input", function EntityFieldsGridComponent_For_98_Conditional_14_Template_input_input_1_listener($event) { i0.ɵɵrestoreView(_r6); const row_r2 = i0.ɵɵnextContext().$implicit; const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.updateRow(row_r2.rowIndex, { Precision: +$event.target.value })); })("focus", function EntityFieldsGridComponent_For_98_Conditional_14_Template_input_focus_1_listener() { i0.ɵɵrestoreView(_r6); const row_r2 = i0.ɵɵnextContext().$implicit; const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.ActiveRowIndex = row_r2.rowIndex); });
    i0.ɵɵelementEnd();
    i0.ɵɵelementStart(2, "span", 42);
    i0.ɵɵtext(3, ",");
    i0.ɵɵelementEnd();
    i0.ɵɵelementStart(4, "input", 43);
    i0.ɵɵlistener("input", function EntityFieldsGridComponent_For_98_Conditional_14_Template_input_input_4_listener($event) { i0.ɵɵrestoreView(_r6); const row_r2 = i0.ɵɵnextContext().$implicit; const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.updateRow(row_r2.rowIndex, { Scale: +$event.target.value })); })("focus", function EntityFieldsGridComponent_For_98_Conditional_14_Template_input_focus_4_listener() { i0.ɵɵrestoreView(_r6); const row_r2 = i0.ɵɵnextContext().$implicit; const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.ActiveRowIndex = row_r2.rowIndex); });
    i0.ɵɵelementEnd()();
} if (rf & 2) {
    const row_r2 = i0.ɵɵnextContext().$implicit;
    i0.ɵɵadvance();
    i0.ɵɵproperty("value", row_r2.Precision ?? 18);
    i0.ɵɵadvance(3);
    i0.ɵɵproperty("value", row_r2.Scale ?? 2);
} }
function EntityFieldsGridComponent_For_98_Conditional_15_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelementStart(0, "span", 17);
    i0.ɵɵtext(1, "\u2014");
    i0.ɵɵelementEnd();
} }
function EntityFieldsGridComponent_For_98_Conditional_21_Template(rf, ctx) { if (rf & 1) {
    const _r7 = i0.ɵɵgetCurrentView();
    i0.ɵɵelementStart(0, "button", 44);
    i0.ɵɵlistener("click", function EntityFieldsGridComponent_For_98_Conditional_21_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r7); const row_r2 = i0.ɵɵnextContext().$implicit; const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.ToggleHide(row_r2.rowIndex)); });
    i0.ɵɵelement(1, "i", 45);
    i0.ɵɵelementEnd();
} if (rf & 2) {
    const row_r2 = i0.ɵɵnextContext().$implicit;
    i0.ɵɵproperty("title", row_r2.isHidden ? "Unhide column" : "Hide column from new records");
    i0.ɵɵadvance();
    i0.ɵɵclassProp("fa-eye-slash", !row_r2.isHidden)("fa-eye", row_r2.isHidden);
} }
function EntityFieldsGridComponent_For_98_Conditional_22_Template(rf, ctx) { if (rf & 1) {
    const _r8 = i0.ɵɵgetCurrentView();
    i0.ɵɵelementStart(0, "button", 46);
    i0.ɵɵlistener("click", function EntityFieldsGridComponent_For_98_Conditional_22_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r8); const row_r2 = i0.ɵɵnextContext().$implicit; const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.DeleteRow(row_r2.rowIndex)); });
    i0.ɵɵelement(1, "i", 47);
    i0.ɵɵelementEnd();
} }
function EntityFieldsGridComponent_For_98_Template(rf, ctx) { if (rf & 1) {
    const _r1 = i0.ɵɵgetCurrentView();
    i0.ɵɵelementStart(0, "tr", 28)(1, "td", 4)(2, "div", 13)(3, "input", 29);
    i0.ɵɵlistener("input", function EntityFieldsGridComponent_For_98_Template_input_input_3_listener($event) { const row_r2 = i0.ɵɵrestoreView(_r1).$implicit; const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.OnNameChange(row_r2.rowIndex, $event.target.value)); })("focus", function EntityFieldsGridComponent_For_98_Template_input_focus_3_listener() { const row_r2 = i0.ɵɵrestoreView(_r1).$implicit; const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.ActiveRowIndex = row_r2.rowIndex); });
    i0.ɵɵelementEnd();
    i0.ɵɵconditionalCreate(4, EntityFieldsGridComponent_For_98_Conditional_4_Template, 2, 0, "span", 30);
    i0.ɵɵelementEnd()();
    i0.ɵɵelementStart(5, "td", 6)(6, "select", 31);
    i0.ɵɵlistener("change", function EntityFieldsGridComponent_For_98_Template_select_change_6_listener($event) { const row_r2 = i0.ɵɵrestoreView(_r1).$implicit; const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.OnTypeChange(row_r2.rowIndex, $event.target.value)); })("focus", function EntityFieldsGridComponent_For_98_Template_select_focus_6_listener() { const row_r2 = i0.ɵɵrestoreView(_r1).$implicit; const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.ActiveRowIndex = row_r2.rowIndex); });
    i0.ɵɵrepeaterCreate(7, EntityFieldsGridComponent_For_98_For_8_Template, 2, 2, "option", 32, _forTrack0);
    i0.ɵɵelementEnd()();
    i0.ɵɵelementStart(9, "td", 7)(10, "label", 33)(11, "input", 34);
    i0.ɵɵlistener("change", function EntityFieldsGridComponent_For_98_Template_input_change_11_listener() { const row_r2 = i0.ɵɵrestoreView(_r1).$implicit; const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.OnRequiredToggle(row_r2.rowIndex)); });
    i0.ɵɵelementEnd()()();
    i0.ɵɵelementStart(12, "td", 8);
    i0.ɵɵconditionalCreate(13, EntityFieldsGridComponent_For_98_Conditional_13_Template, 1, 1, "input", 35)(14, EntityFieldsGridComponent_For_98_Conditional_14_Template, 5, 2, "div", 36)(15, EntityFieldsGridComponent_For_98_Conditional_15_Template, 2, 0, "span", 17);
    i0.ɵɵelementEnd();
    i0.ɵɵelementStart(16, "td", 9)(17, "input", 37);
    i0.ɵɵlistener("input", function EntityFieldsGridComponent_For_98_Template_input_input_17_listener($event) { const row_r2 = i0.ɵɵrestoreView(_r1).$implicit; const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.OnDefaultValueChange(row_r2.rowIndex, $event.target.value)); })("focus", function EntityFieldsGridComponent_For_98_Template_input_focus_17_listener() { const row_r2 = i0.ɵɵrestoreView(_r1).$implicit; const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.ActiveRowIndex = row_r2.rowIndex); });
    i0.ɵɵelementEnd()();
    i0.ɵɵelementStart(18, "td", 10)(19, "input", 37);
    i0.ɵɵlistener("input", function EntityFieldsGridComponent_For_98_Template_input_input_19_listener($event) { const row_r2 = i0.ɵɵrestoreView(_r1).$implicit; const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.OnDescriptionChange(row_r2.rowIndex, $event.target.value)); })("focus", function EntityFieldsGridComponent_For_98_Template_input_focus_19_listener() { const row_r2 = i0.ɵɵrestoreView(_r1).$implicit; const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.ActiveRowIndex = row_r2.rowIndex); });
    i0.ɵɵelementEnd()();
    i0.ɵɵelementStart(20, "td", 11);
    i0.ɵɵconditionalCreate(21, EntityFieldsGridComponent_For_98_Conditional_21_Template, 2, 5, "button", 38)(22, EntityFieldsGridComponent_For_98_Conditional_22_Template, 2, 0, "button", 39);
    i0.ɵɵelementEnd()();
} if (rf & 2) {
    const row_r2 = ctx.$implicit;
    const ctx_r2 = i0.ɵɵnextContext();
    i0.ɵɵclassProp("row-hidden", row_r2.isHidden)("row-error", ctx_r2.IsReservedName(row_r2.Name))("row-active", ctx_r2.ActiveRowIndex === row_r2.rowIndex);
    i0.ɵɵadvance(3);
    i0.ɵɵclassProp("input-error", ctx_r2.IsReservedName(row_r2.Name));
    i0.ɵɵproperty("value", row_r2.Name);
    i0.ɵɵadvance();
    i0.ɵɵconditional(ctx_r2.IsReservedName(row_r2.Name) ? 4 : -1);
    i0.ɵɵadvance(2);
    i0.ɵɵproperty("value", row_r2.Type ?? "string");
    i0.ɵɵadvance();
    i0.ɵɵrepeater(ctx_r2.FieldTypeOptions);
    i0.ɵɵadvance(3);
    i0.ɵɵproperty("title", row_r2.IsNullable ? "Optional" : "Required");
    i0.ɵɵadvance();
    i0.ɵɵproperty("checked", !row_r2.IsNullable);
    i0.ɵɵadvance(2);
    i0.ɵɵconditional(ctx_r2.ShowMaxLength(row_r2.Type) ? 13 : ctx_r2.ShowPrecisionScale(row_r2.Type) ? 14 : 15);
    i0.ɵɵadvance(4);
    i0.ɵɵproperty("value", row_r2.DefaultValue ?? "");
    i0.ɵɵadvance(2);
    i0.ɵɵproperty("value", row_r2.Description ?? "");
    i0.ɵɵadvance(2);
    i0.ɵɵconditional(ctx_r2.Mode === "modify" && row_r2.isExisting ? 21 : 22);
} }
/** Auto-managed columns that users must never add manually. */
const RESERVED_NAMES = new Set(['id', '__mj_createdat', '__mj_updatedat']);
export class EntityFieldsGridComponent {
    // ─── Injected ──────────────────────────────────────────────────────────
    cdr = inject(ChangeDetectorRef);
    // ─── Inputs ────────────────────────────────────────────────────────────
    set Columns(v) {
        this.rows = v.map((c, i) => ({
            ...c,
            isExisting: false,
            isHidden: false,
            rowIndex: i,
        }));
        this.cdr.markForCheck();
    }
    Mode = 'create';
    // ─── Outputs ───────────────────────────────────────────────────────────
    /** Emitted on every change so the parent/state service can stay in sync. */
    ColumnsChanged = new EventEmitter();
    // ─── View state ────────────────────────────────────────────────────────
    rows = [];
    /** Index of the row currently being actively edited (-1 = none). */
    ActiveRowIndex = -1;
    /** Available type options — drives the dropdown. */
    FieldTypeOptions = FIELD_TYPE_OPTIONS;
    // ─── Computed ──────────────────────────────────────────────────────────
    /** True when any row has a reserved-name validation error. */
    get HasErrors() {
        return this.rows.some(r => this.isReservedName(r.Name));
    }
    /** True when any row has an error (exposed for parent template). */
    get HasReservedNameError() {
        return this.HasErrors;
    }
    TrackByIndex(_, row) {
        return row.rowIndex;
    }
    // ─── Template helpers ──────────────────────────────────────────────────
    IsReservedName(name) {
        return this.isReservedName(name);
    }
    TypeLabel(type) {
        return FIELD_TYPE_OPTIONS.find(o => o.value === type)?.label ?? (type ?? 'String (NVARCHAR)');
    }
    /** True when the selected type supports a Max Length field. */
    ShowMaxLength(type) {
        return type === 'string';
    }
    /** True when the selected type supports precision/scale fields. */
    ShowPrecisionScale(type) {
        return type === 'decimal';
    }
    // ─── Row operations ────────────────────────────────────────────────────
    /** Append an empty row and make it active for editing. */
    AddField() {
        const newRow = {
            Name: '',
            Type: 'string',
            IsNullable: true,
            isExisting: false,
            isHidden: false,
            rowIndex: this.rows.length,
        };
        this.rows = [...this.rows, newRow];
        this.ActiveRowIndex = newRow.rowIndex;
        this.emit();
    }
    /** Remove a new (non-existing) row outright. */
    DeleteRow(index) {
        this.rows = this.rows
            .filter(r => r.rowIndex !== index)
            .map((r, i) => ({ ...r, rowIndex: i }));
        this.ActiveRowIndex = -1;
        this.emit();
    }
    /**
     * Toggle the "hidden" state of an existing row in modify mode.
     * Hidden = soft-remove: `IncludeInAPI` will be set to false server-side;
     * data in the column is preserved.
     */
    ToggleHide(index) {
        this.rows = this.rows.map(r => r.rowIndex === index ? { ...r, isHidden: !r.isHidden } : r);
        this.emit();
    }
    /** Update a field's Name. */
    OnNameChange(index, value) {
        this.updateRow(index, { Name: value });
    }
    /** Update a field's Type. */
    OnTypeChange(index, value) {
        // Clear max-length / precision when switching away from types that use them
        const extra = {};
        if (value !== 'string')
            extra.MaxLength = undefined;
        if (value !== 'decimal') {
            extra.Precision = undefined;
            extra.Scale = undefined;
        }
        this.updateRow(index, { Type: value, ...extra });
    }
    /** Toggle the "Required" (not-nullable) flag. */
    OnRequiredToggle(index) {
        const row = this.rows.find(r => r.rowIndex === index);
        if (row)
            this.updateRow(index, { IsNullable: !row.IsNullable });
    }
    /** Update MaxLength for string columns. */
    OnMaxLengthChange(index, value) {
        const n = parseInt(value, 10);
        this.updateRow(index, { MaxLength: isNaN(n) ? undefined : n });
    }
    /** Update the Default Value string. */
    OnDefaultValueChange(index, value) {
        this.updateRow(index, { DefaultValue: value || undefined });
    }
    /** Update the Description string. */
    OnDescriptionChange(index, value) {
        this.updateRow(index, { Description: value || undefined });
    }
    // ─── Public & private helpers ──────────────────────────────────────────
    isReservedName(name) {
        return RESERVED_NAMES.has(name.toLowerCase());
    }
    /** Called directly from the template for precision/scale inline updates. */
    updateRow(index, patch) {
        this.rows = this.rows.map(r => r.rowIndex === index ? { ...r, ...patch } : r);
        this.emit();
    }
    /** Emit the current non-hidden rows as `ColumnSpec[]` to the parent. */
    emit() {
        const cols = this.rows
            .filter(r => !r.isHidden)
            .map(({ isExisting: _e, isHidden: _h, rowIndex: _i, ...col }) => col);
        this.ColumnsChanged.emit(cols);
        this.cdr.markForCheck();
    }
    static ɵfac = function EntityFieldsGridComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || EntityFieldsGridComponent)(); };
    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: EntityFieldsGridComponent, selectors: [["mj-database-fields-grid"]], inputs: { Columns: "Columns", Mode: "Mode" }, outputs: { ColumnsChanged: "ColumnsChanged" }, standalone: false, decls: 103, vars: 2, consts: [[1, "fields-grid-root"], ["role", "alert", 1, "fields-error-banner"], [1, "table-wrap"], [1, "fields-table"], [1, "col-name"], [1, "required-mark"], [1, "col-type"], [1, "col-req"], [1, "col-extra"], [1, "col-default"], [1, "col-desc"], [1, "col-actions"], [1, "auto-col-row"], [1, "name-cell"], [1, "fa-solid", "fa-lock-keyhole", "auto-lock"], [1, "auto-badge"], [1, "fa-solid", "fa-check", "req-yes"], [1, "cell-na"], [1, "auto-default"], [1, "auto-desc"], ["title", "Auto-managed", 1, "fa-solid", "fa-lock", "auto-lock-icon"], [1, "auto-col-row", "auto-col-divider"], [1, "field-row", 3, "row-hidden", "row-error", "row-active"], [1, "add-field-bar"], ["mjButton", "", "buttonStyle", "secondary", "type", "button", 3, "click"], [1, "fa-solid", "fa-plus"], [1, "fa-solid", "fa-triangle-exclamation"], ["colspan", "7", 1, "empty-row"], [1, "field-row"], ["type", "text", "placeholder", "ColumnName", 1, "mj-input", "cell-input", 3, "input", "focus", "value"], ["title", "This column is auto-managed", 1, "reserved-badge"], [1, "mj-input", "cell-input", "cell-select", 3, "change", "focus", "value"], [3, "value"], [1, "checkbox-wrap", 3, "title"], ["type", "checkbox", 3, "change", "checked"], ["type", "number", "min", "1", "max", "4000", "placeholder", "200", 1, "mj-input", "cell-input", "cell-number", 3, "value"], [1, "precision-scale"], ["type", "text", "placeholder", "optional", 1, "mj-input", "cell-input", 3, "input", "focus", "value"], ["type", "button", 1, "action-icon-btn", 3, "title"], ["type", "button", "title", "Remove this column", 1, "action-icon-btn", "delete-btn"], ["type", "number", "min", "1", "max", "4000", "placeholder", "200", 1, "mj-input", "cell-input", "cell-number", 3, "input", "focus", "value"], ["type", "number", "min", "1", "max", "38", "placeholder", "18", 1, "mj-input", "cell-input", "cell-number-sm", 3, "input", "focus", "value"], [1, "sep"], ["type", "number", "min", "0", "max", "38", "placeholder", "2", 1, "mj-input", "cell-input", "cell-number-sm", 3, "input", "focus", "value"], ["type", "button", 1, "action-icon-btn", 3, "click", "title"], [1, "fa-solid"], ["type", "button", "title", "Remove this column", 1, "action-icon-btn", "delete-btn", 3, "click"], [1, "fa-solid", "fa-xmark"]], template: function EntityFieldsGridComponent_Template(rf, ctx) { if (rf & 1) {
            i0.ɵɵelementStart(0, "div", 0);
            i0.ɵɵconditionalCreate(1, EntityFieldsGridComponent_Conditional_1_Template, 3, 0, "div", 1);
            i0.ɵɵelementStart(2, "div", 2)(3, "table", 3)(4, "thead")(5, "tr")(6, "th", 4);
            i0.ɵɵtext(7, "Name ");
            i0.ɵɵelementStart(8, "span", 5);
            i0.ɵɵtext(9, "*");
            i0.ɵɵelementEnd()();
            i0.ɵɵelementStart(10, "th", 6);
            i0.ɵɵtext(11, "Type ");
            i0.ɵɵelementStart(12, "span", 5);
            i0.ɵɵtext(13, "*");
            i0.ɵɵelementEnd()();
            i0.ɵɵelementStart(14, "th", 7);
            i0.ɵɵtext(15, "Req");
            i0.ɵɵelementEnd();
            i0.ɵɵelementStart(16, "th", 8);
            i0.ɵɵtext(17, "Length");
            i0.ɵɵelementEnd();
            i0.ɵɵelementStart(18, "th", 9);
            i0.ɵɵtext(19, "Default");
            i0.ɵɵelementEnd();
            i0.ɵɵelementStart(20, "th", 10);
            i0.ɵɵtext(21, "Description");
            i0.ɵɵelementEnd();
            i0.ɵɵelement(22, "th", 11);
            i0.ɵɵelementEnd()();
            i0.ɵɵelementStart(23, "tbody")(24, "tr", 12)(25, "td", 4)(26, "div", 13);
            i0.ɵɵelement(27, "i", 14);
            i0.ɵɵelementStart(28, "code");
            i0.ɵɵtext(29, "ID");
            i0.ɵɵelementEnd();
            i0.ɵɵelementStart(30, "span", 15);
            i0.ɵɵtext(31, "PK");
            i0.ɵɵelementEnd()()();
            i0.ɵɵelementStart(32, "td", 6)(33, "code");
            i0.ɵɵtext(34, "UNIQUEIDENTIFIER");
            i0.ɵɵelementEnd()();
            i0.ɵɵelementStart(35, "td", 7);
            i0.ɵɵelement(36, "i", 16);
            i0.ɵɵelementEnd();
            i0.ɵɵelementStart(37, "td", 8)(38, "span", 17);
            i0.ɵɵtext(39, "\u2014");
            i0.ɵɵelementEnd()();
            i0.ɵɵelementStart(40, "td", 9)(41, "code", 18);
            i0.ɵɵtext(42, "NEWSEQUENTIALID()");
            i0.ɵɵelementEnd()();
            i0.ɵɵelementStart(43, "td", 10)(44, "span", 19);
            i0.ɵɵtext(45, "Primary key \u2014 always present");
            i0.ɵɵelementEnd()();
            i0.ɵɵelementStart(46, "td", 11);
            i0.ɵɵelement(47, "i", 20);
            i0.ɵɵelementEnd()();
            i0.ɵɵelementStart(48, "tr", 12)(49, "td", 4)(50, "div", 13);
            i0.ɵɵelement(51, "i", 14);
            i0.ɵɵelementStart(52, "code");
            i0.ɵɵtext(53, "__mj_CreatedAt");
            i0.ɵɵelementEnd();
            i0.ɵɵelementStart(54, "span", 15);
            i0.ɵɵtext(55, "AUTO");
            i0.ɵɵelementEnd()()();
            i0.ɵɵelementStart(56, "td", 6)(57, "code");
            i0.ɵɵtext(58, "DATETIMEOFFSET");
            i0.ɵɵelementEnd()();
            i0.ɵɵelementStart(59, "td", 7);
            i0.ɵɵelement(60, "i", 16);
            i0.ɵɵelementEnd();
            i0.ɵɵelementStart(61, "td", 8)(62, "span", 17);
            i0.ɵɵtext(63, "\u2014");
            i0.ɵɵelementEnd()();
            i0.ɵɵelementStart(64, "td", 9)(65, "code", 18);
            i0.ɵɵtext(66, "GETUTCDATE()");
            i0.ɵɵelementEnd()();
            i0.ɵɵelementStart(67, "td", 10)(68, "span", 19);
            i0.ɵɵtext(69, "Record creation timestamp");
            i0.ɵɵelementEnd()();
            i0.ɵɵelementStart(70, "td", 11);
            i0.ɵɵelement(71, "i", 20);
            i0.ɵɵelementEnd()();
            i0.ɵɵelementStart(72, "tr", 21)(73, "td", 4)(74, "div", 13);
            i0.ɵɵelement(75, "i", 14);
            i0.ɵɵelementStart(76, "code");
            i0.ɵɵtext(77, "__mj_UpdatedAt");
            i0.ɵɵelementEnd();
            i0.ɵɵelementStart(78, "span", 15);
            i0.ɵɵtext(79, "AUTO");
            i0.ɵɵelementEnd()()();
            i0.ɵɵelementStart(80, "td", 6)(81, "code");
            i0.ɵɵtext(82, "DATETIMEOFFSET");
            i0.ɵɵelementEnd()();
            i0.ɵɵelementStart(83, "td", 7);
            i0.ɵɵelement(84, "i", 16);
            i0.ɵɵelementEnd();
            i0.ɵɵelementStart(85, "td", 8)(86, "span", 17);
            i0.ɵɵtext(87, "\u2014");
            i0.ɵɵelementEnd()();
            i0.ɵɵelementStart(88, "td", 9)(89, "code", 18);
            i0.ɵɵtext(90, "GETUTCDATE()");
            i0.ɵɵelementEnd()();
            i0.ɵɵelementStart(91, "td", 10)(92, "span", 19);
            i0.ɵɵtext(93, "Last update timestamp");
            i0.ɵɵelementEnd()();
            i0.ɵɵelementStart(94, "td", 11);
            i0.ɵɵelement(95, "i", 20);
            i0.ɵɵelementEnd()();
            i0.ɵɵconditionalCreate(96, EntityFieldsGridComponent_Conditional_96_Template, 6, 0, "tr");
            i0.ɵɵrepeaterCreate(97, EntityFieldsGridComponent_For_98_Template, 23, 17, "tr", 22, ctx.TrackByIndex, true);
            i0.ɵɵelementEnd()()();
            i0.ɵɵelementStart(99, "div", 23)(100, "button", 24);
            i0.ɵɵlistener("click", function EntityFieldsGridComponent_Template_button_click_100_listener() { return ctx.AddField(); });
            i0.ɵɵelement(101, "i", 25);
            i0.ɵɵtext(102, " Add Column ");
            i0.ɵɵelementEnd()()();
        } if (rf & 2) {
            i0.ɵɵadvance();
            i0.ɵɵconditional(ctx.HasErrors ? 1 : -1);
            i0.ɵɵadvance(95);
            i0.ɵɵconditional(ctx.rows.length === 0 ? 96 : -1);
            i0.ɵɵadvance();
            i0.ɵɵrepeater(ctx.rows);
        } }, dependencies: [i1.NgSelectOption, i1.ɵNgSelectMultipleOption, i2.MJButtonDirective], styles: ["\n\n\n.fields-grid-root[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  gap: 0;\n}\n\n\n\n\n.fields-info[_ngcontent-%COMP%] {\n  margin: 0;\n  padding: 10px 16px;\n  font-size: 0.875rem;\n  color: var(--mj-text-secondary);\n  background: var(--mj-bg-surface-card);\n  border-bottom: 1px solid var(--mj-border-subtle);\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.fields-info[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: var(--mj-status-info);\n  flex-shrink: 0;\n}\n\n\n\n\n.fields-error-banner[_ngcontent-%COMP%] {\n  padding: 8px 16px;\n  background: var(--mj-status-error-bg);\n  color: var(--mj-status-error-text);\n  border-bottom: 1px solid var(--mj-status-error-border);\n  font-size: 0.875rem;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n\n\n\n.table-wrap[_ngcontent-%COMP%] {\n  flex: 1;\n  overflow: auto;\n}\n\n\n\n\n.fields-table[_ngcontent-%COMP%] {\n  width: 100%;\n  border-collapse: collapse;\n  font-size: 0.875rem;\n  \n\n\n  table-layout: fixed;\n}\n\n.fields-table[_ngcontent-%COMP%]   thead[_ngcontent-%COMP%]   tr[_ngcontent-%COMP%] {\n  border-bottom: 2px solid var(--mj-border-default);\n  background: var(--mj-bg-surface-card);\n  position: sticky;\n  top: 0;\n  z-index: 1;\n}\n\n.fields-table[_ngcontent-%COMP%]   th[_ngcontent-%COMP%] {\n  padding: 8px 10px;\n  text-align: left;\n  font-weight: 600;\n  color: var(--mj-text-secondary);\n  font-size: 0.8rem;\n  text-transform: uppercase;\n  letter-spacing: 0.03em;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: clip;\n}\n\n.required-mark[_ngcontent-%COMP%] {\n  color: var(--mj-status-error);\n  font-size: 0.8rem;\n}\n\n.field-row[_ngcontent-%COMP%] {\n  border-bottom: 1px solid var(--mj-border-subtle);\n  transition: background 0.1s;\n}\n\n.field-row[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-hover);\n}\n\n.field-row.row-active[_ngcontent-%COMP%] {\n  background: color-mix(in srgb, var(--mj-brand-primary) 5%, var(--mj-bg-surface));\n}\n\n.field-row.row-error[_ngcontent-%COMP%] {\n  background: var(--mj-status-error-bg);\n}\n\n.field-row.row-hidden[_ngcontent-%COMP%] {\n  opacity: 0.45;\n}\n\n.fields-table[_ngcontent-%COMP%]   td[_ngcontent-%COMP%] {\n  padding: 7px 10px;\n  vertical-align: middle;\n  overflow: hidden;\n}\n\n\n\n\n\n\n\n\n\n.col-name[_ngcontent-%COMP%]    { width: 22%; }\n.col-type[_ngcontent-%COMP%]    { width: 20%; }\n.col-req[_ngcontent-%COMP%]     { width: 58px; text-align: center; }\n.col-extra[_ngcontent-%COMP%]   { width: 76px; }\n.col-default[_ngcontent-%COMP%] { width: 11%; }\n.col-desc[_ngcontent-%COMP%]    { overflow: hidden; }\n.col-actions[_ngcontent-%COMP%] { width: 40px; text-align: center; }\n\n\n\n\n.name-cell[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  overflow: hidden;\n}\n\n\n\n\n.name-cell[_ngcontent-%COMP%]   .cell-input[_ngcontent-%COMP%] {\n  flex: 1;\n  min-width: 0;\n  width: 0;\n}\n\n.cell-input[_ngcontent-%COMP%] {\n  width: 100%;\n  min-width: 0;\n  padding: 5px 8px;\n  font-size: 0.875rem;\n  border-radius: 4px;\n}\n\n.cell-select[_ngcontent-%COMP%] {\n  cursor: pointer;\n}\n\n.cell-number[_ngcontent-%COMP%] {\n  width: 80px;\n}\n\n.cell-number-sm[_ngcontent-%COMP%] {\n  width: 58px;\n}\n\n.cell-input.input-error[_ngcontent-%COMP%] {\n  border-color: var(--mj-status-error-border);\n  background: var(--mj-status-error-bg);\n}\n\n.precision-scale[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 4px;\n}\n\n.sep[_ngcontent-%COMP%] {\n  color: var(--mj-text-muted);\n  font-size: 0.875rem;\n}\n\n.cell-na[_ngcontent-%COMP%] {\n  color: var(--mj-text-muted);\n  font-size: 0.875rem;\n}\n\n.checkbox-wrap[_ngcontent-%COMP%] {\n  display: flex;\n  justify-content: center;\n  cursor: pointer;\n}\n\n.checkbox-wrap[_ngcontent-%COMP%]   input[type=\"checkbox\"][_ngcontent-%COMP%] {\n  width: 16px;\n  height: 16px;\n  cursor: pointer;\n  accent-color: var(--mj-brand-primary);\n}\n\n.reserved-badge[_ngcontent-%COMP%] {\n  display: inline-block;\n  font-size: 0.68rem;\n  font-weight: 700;\n  text-transform: uppercase;\n  letter-spacing: 0.04em;\n  padding: 2px 6px;\n  border-radius: 4px;\n  background: var(--mj-status-error-bg);\n  color: var(--mj-status-error-text);\n  border: 1px solid var(--mj-status-error-border);\n  white-space: nowrap;\n  flex-shrink: 0;\n}\n\n\n\n\n.action-icon-btn[_ngcontent-%COMP%] {\n  background: none;\n  border: none;\n  padding: 5px 7px;\n  border-radius: 4px;\n  cursor: pointer;\n  color: var(--mj-text-muted);\n  font-size: 0.875rem;\n  transition: color 0.15s, background 0.15s;\n  line-height: 1;\n}\n\n.action-icon-btn[_ngcontent-%COMP%]:hover {\n  color: var(--mj-text-primary);\n  background: var(--mj-bg-surface-hover);\n}\n\n.action-icon-btn.delete-btn[_ngcontent-%COMP%]:hover {\n  color: var(--mj-status-error-text);\n  background: var(--mj-status-error-bg);\n}\n\n\n\n\n.auto-col-row[_ngcontent-%COMP%]   td[_ngcontent-%COMP%] {\n  background: var(--mj-bg-surface-sunken);\n  opacity: 0.72;\n  pointer-events: none;\n}\n\n.auto-col-divider[_ngcontent-%COMP%]   td[_ngcontent-%COMP%] {\n  border-bottom: 2px solid var(--mj-border-default);\n}\n\n.auto-lock[_ngcontent-%COMP%] {\n  font-size: 0.7rem;\n  color: var(--mj-text-muted);\n  margin-right: 5px;\n}\n\n.auto-lock-icon[_ngcontent-%COMP%] {\n  color: var(--mj-text-muted);\n  font-size: 0.75rem;\n}\n\n.auto-badge[_ngcontent-%COMP%] {\n  display: inline-block;\n  font-size: 0.6rem;\n  font-weight: 700;\n  text-transform: uppercase;\n  letter-spacing: 0.05em;\n  padding: 1px 5px;\n  border-radius: 3px;\n  margin-left: 5px;\n  vertical-align: middle;\n  background: var(--mj-bg-surface-card);\n  color: var(--mj-text-muted);\n  border: 1px solid var(--mj-border-default);\n}\n\n.auto-default[_ngcontent-%COMP%] {\n  font-family: monospace;\n  font-size: 0.8rem;\n  color: var(--mj-text-muted);\n}\n\n.auto-desc[_ngcontent-%COMP%] {\n  font-style: italic;\n  color: var(--mj-text-muted);\n  font-size: 0.8rem;\n}\n\n.req-yes[_ngcontent-%COMP%] {\n  color: var(--mj-status-success);\n}\n\n\n\n\n.empty-row[_ngcontent-%COMP%] {\n  padding: 32px 16px;\n  text-align: center;\n  color: var(--mj-text-muted);\n  font-size: 0.875rem;\n}\n\n\n\n\n.add-field-bar[_ngcontent-%COMP%] {\n  padding: 10px 16px;\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(EntityFieldsGridComponent, [{
        type: Component,
        args: [{ standalone: false, selector: 'mj-database-fields-grid', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"fields-grid-root\">\n\n  <!-- \u2500\u2500 Error banner \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\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 (HasErrors) {\n    <div class=\"fields-error-banner\" role=\"alert\">\n      <i class=\"fa-solid fa-triangle-exclamation\"></i>\n      Remove reserved column names before continuing.\n    </div>\n  }\n\n  <!-- \u2500\u2500 Table \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\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=\"table-wrap\">\n    <table class=\"fields-table\">\n      <thead>\n        <tr>\n          <th class=\"col-name\">Name <span class=\"required-mark\">*</span></th>\n          <th class=\"col-type\">Type <span class=\"required-mark\">*</span></th>\n          <th class=\"col-req\">Req</th>\n          <th class=\"col-extra\">Length</th>\n          <th class=\"col-default\">Default</th>\n          <th class=\"col-desc\">Description</th>\n          <th class=\"col-actions\"></th>\n        </tr>\n      </thead>\n      <tbody>\n        <!-- \u2500\u2500 Auto-managed columns \u2014 always injected, cannot be edited \u2500\u2500 -->\n        <tr class=\"auto-col-row\">\n          <td class=\"col-name\"><div class=\"name-cell\"><i class=\"fa-solid fa-lock-keyhole auto-lock\"></i><code>ID</code><span class=\"auto-badge\">PK</span></div></td>\n          <td class=\"col-type\"><code>UNIQUEIDENTIFIER</code></td>\n          <td class=\"col-req\"><i class=\"fa-solid fa-check req-yes\"></i></td>\n          <td class=\"col-extra\"><span class=\"cell-na\">\u2014</span></td>\n          <td class=\"col-default\"><code class=\"auto-default\">NEWSEQUENTIALID()</code></td>\n          <td class=\"col-desc\"><span class=\"auto-desc\">Primary key \u2014 always present</span></td>\n          <td class=\"col-actions\"><i class=\"fa-solid fa-lock auto-lock-icon\" title=\"Auto-managed\"></i></td>\n        </tr>\n        <tr class=\"auto-col-row\">\n          <td class=\"col-name\"><div class=\"name-cell\"><i class=\"fa-solid fa-lock-keyhole auto-lock\"></i><code>__mj_CreatedAt</code><span class=\"auto-badge\">AUTO</span></div></td>\n          <td class=\"col-type\"><code>DATETIMEOFFSET</code></td>\n          <td class=\"col-req\"><i class=\"fa-solid fa-check req-yes\"></i></td>\n          <td class=\"col-extra\"><span class=\"cell-na\">\u2014</span></td>\n          <td class=\"col-default\"><code class=\"auto-default\">GETUTCDATE()</code></td>\n          <td class=\"col-desc\"><span class=\"auto-desc\">Record creation timestamp</span></td>\n          <td class=\"col-actions\"><i class=\"fa-solid fa-lock auto-lock-icon\" title=\"Auto-managed\"></i></td>\n        </tr>\n        <tr class=\"auto-col-row auto-col-divider\">\n          <td class=\"col-name\"><div class=\"name-cell\"><i class=\"fa-solid fa-lock-keyhole auto-lock\"></i><code>__mj_UpdatedAt</code><span class=\"auto-badge\">AUTO</span></div></td>\n          <td class=\"col-type\"><code>DATETIMEOFFSET</code></td>\n          <td class=\"col-req\"><i class=\"fa-solid fa-check req-yes\"></i></td>\n          <td class=\"col-extra\"><span class=\"cell-na\">\u2014</span></td>\n          <td class=\"col-default\"><code class=\"auto-default\">GETUTCDATE()</code></td>\n          <td class=\"col-desc\"><span class=\"auto-desc\">Last update timestamp</span></td>\n          <td class=\"col-actions\"><i class=\"fa-solid fa-lock auto-lock-icon\" title=\"Auto-managed\"></i></td>\n        </tr>\n\n        @if (rows.length === 0) {\n          <tr>\n            <td colspan=\"7\" class=\"empty-row\">\n              No columns defined yet. Click <strong>Add Column</strong> below to begin.\n            </td>\n          </tr>\n        }\n\n        @for (row of rows; track TrackByIndex($index, row)) {\n          <tr\n            class=\"field-row\"\n            [class.row-hidden]=\"row.isHidden\"\n            [class.row-error]=\"IsReservedName(row.Name)\"\n            [class.row-active]=\"ActiveRowIndex === row.rowIndex\">\n\n            <!-- Name -->\n            <td class=\"col-name\">\n              <div class=\"name-cell\">\n                <input\n                  type=\"text\"\n                  class=\"mj-input cell-input\"\n                  [class.input-error]=\"IsReservedName(row.Name)\"\n                  [value]=\"row.Name\"\n                  placeholder=\"ColumnName\"\n                  (input)=\"OnNameChange(row.rowIndex, $any($event.target).value)\"\n                  (focus)=\"ActiveRowIndex = row.rowIndex\" />\n                @if (IsReservedName(row.Name)) {\n                  <span class=\"reserved-badge\" title=\"This column is auto-managed\">reserved</span>\n                }\n              </div>\n            </td>\n\n            <!-- Type -->\n            <td class=\"col-type\">\n              <select\n                class=\"mj-input cell-input cell-select\"\n                [value]=\"row.Type ?? 'string'\"\n                (change)=\"OnTypeChange(row.rowIndex, $any($event.target).value)\"\n                (focus)=\"ActiveRowIndex = row.rowIndex\">\n                @for (opt of FieldTypeOptions; track opt.value) {\n                  <option [value]=\"opt.value\">{{ opt.label }}</option>\n                }\n              </select>\n            </td>\n\n            <!-- Required -->\n            <td class=\"col-req\">\n              <label class=\"checkbox-wrap\" [title]=\"row.IsNullable ? 'Optional' : 'Required'\">\n                <input\n                  type=\"checkbox\"\n                  [checked]=\"!row.IsNullable\"\n                  (change)=\"OnRequiredToggle(row.rowIndex)\" />\n              </label>\n            </td>\n\n            <!-- Max Len / Precision+Scale -->\n            <td class=\"col-extra\">\n              @if (ShowMaxLength(row.Type)) {\n                <input\n                  type=\"number\"\n                  class=\"mj-input cell-input cell-number\"\n                  [value]=\"row.MaxLength ?? 200\"\n                  min=\"1\"\n                  max=\"4000\"\n                  placeholder=\"200\"\n                  (input)=\"OnMaxLengthChange(row.rowIndex, $any($event.target).value)\"\n                  (focus)=\"ActiveRowIndex = row.rowIndex\" />\n              } @else if (ShowPrecisionScale(row.Type)) {\n                <div class=\"precision-scale\">\n                  <input\n                    type=\"number\"\n                    class=\"mj-input cell-input cell-number-sm\"\n                    [value]=\"row.Precision ?? 18\"\n                    min=\"1\" max=\"38\"\n                    placeholder=\"18\"\n                    (input)=\"updateRow(row.rowIndex, { Precision: +$any($event.target).value })\"\n                    (focus)=\"ActiveRowIndex = row.rowIndex\" />\n                  <span class=\"sep\">,</span>\n                  <input\n                    type=\"number\"\n                    class=\"mj-input cell-input cell-number-sm\"\n                    [value]=\"row.Scale ?? 2\"\n                    min=\"0\" max=\"38\"\n                    placeholder=\"2\"\n                    (input)=\"updateRow(row.rowIndex, { Scale: +$any($event.target).value })\"\n                    (focus)=\"ActiveRowIndex = row.rowIndex\" />\n                </div>\n              } @else {\n                <span class=\"cell-na\">\u2014</span>\n              }\n            </td>\n\n            <!-- Default -->\n            <td class=\"col-default\">\n              <input\n                type=\"text\"\n                class=\"mj-input cell-input\"\n                [value]=\"row.DefaultValue ?? ''\"\n                placeholder=\"optional\"\n                (input)=\"OnDefaultValueChange(row.rowIndex, $any($event.target).value)\"\n                (focus)=\"ActiveRowIndex = row.rowIndex\" />\n            </td>\n\n            <!-- Description -->\n            <td class=\"col-desc\">\n              <input\n                type=\"text\"\n                class=\"mj-input cell-input\"\n                [value]=\"row.Description ?? ''\"\n                placeholder=\"optional\"\n                (input)=\"OnDescriptionChange(row.rowIndex, $any($event.target).value)\"\n                (focus)=\"ActiveRowIndex = row.rowIndex\" />\n            </td>\n\n            <!-- Actions -->\n            <td class=\"col-actions\">\n              @if (Mode === 'modify' && row.isExisting) {\n                <button\n                  type=\"button\"\n                  class=\"action-icon-btn\"\n                  [title]=\"row.isHidden ? 'Unhide column' : 'Hide column from new records'\"\n                  (click)=\"ToggleHide(row.rowIndex)\">\n                  <i class=\"fa-solid\" [class.fa-eye-slash]=\"!row.isHidden\" [class.fa-eye]=\"row.isHidden\"></i>\n                </button>\n              } @else {\n                <button\n                  type=\"button\"\n                  class=\"action-icon-btn delete-btn\"\n                  title=\"Remove this column\"\n                  (click)=\"DeleteRow(row.rowIndex)\">\n                  <i class=\"fa-solid fa-xmark\"></i>\n                </button>\n              }\n            </td>\n\n          </tr>\n        }\n      </tbody>\n    </table>\n  </div>\n\n  <!-- \u2500\u2500 Add field button \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\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=\"add-field-bar\">\n    <button\n      mjButton\n      buttonStyle=\"secondary\"\n      type=\"button\"\n      (click)=\"AddField()\">\n      <i class=\"fa-solid fa-plus\"></i>\n      Add Column\n    </button>\n  </div>\n\n</div>\n", styles: ["/* \u2500\u2500 Root \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\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.fields-grid-root {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  gap: 0;\n}\n\n/* \u2500\u2500 Info banner \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\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.fields-info {\n  margin: 0;\n  padding: 10px 16px;\n  font-size: 0.875rem;\n  color: var(--mj-text-secondary);\n  background: var(--mj-bg-surface-card);\n  border-bottom: 1px solid var(--mj-border-subtle);\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.fields-info i {\n  color: var(--mj-status-info);\n  flex-shrink: 0;\n}\n\n/* \u2500\u2500 Error banner \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\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.fields-error-banner {\n  padding: 8px 16px;\n  background: var(--mj-status-error-bg);\n  color: var(--mj-status-error-text);\n  border-bottom: 1px solid var(--mj-status-error-border);\n  font-size: 0.875rem;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n/* \u2500\u2500 Table wrap \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\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.table-wrap {\n  flex: 1;\n  overflow: auto;\n}\n\n/* \u2500\u2500 Fields table \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\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.fields-table {\n  width: 100%;\n  border-collapse: collapse;\n  font-size: 0.875rem;\n  /* fixed layout enforces column widths regardless of content \u2014 prevents the\n     browser from redistributing space and crushing flexible columns */\n  table-layout: fixed;\n}\n\n.fields-table thead tr {\n  border-bottom: 2px solid var(--mj-border-default);\n  background: var(--mj-bg-surface-card);\n  position: sticky;\n  top: 0;\n  z-index: 1;\n}\n\n.fields-table th {\n  padding: 8px 10px;\n  text-align: left;\n  font-weight: 600;\n  color: var(--mj-text-secondary);\n  font-size: 0.8rem;\n  text-transform: uppercase;\n  letter-spacing: 0.03em;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: clip;\n}\n\n.required-mark {\n  color: var(--mj-status-error);\n  font-size: 0.8rem;\n}\n\n.field-row {\n  border-bottom: 1px solid var(--mj-border-subtle);\n  transition: background 0.1s;\n}\n\n.field-row:hover {\n  background: var(--mj-bg-surface-hover);\n}\n\n.field-row.row-active {\n  background: color-mix(in srgb, var(--mj-brand-primary) 5%, var(--mj-bg-surface));\n}\n\n.field-row.row-error {\n  background: var(--mj-status-error-bg);\n}\n\n.field-row.row-hidden {\n  opacity: 0.45;\n}\n\n.fields-table td {\n  padding: 7px 10px;\n  vertical-align: middle;\n  overflow: hidden;\n}\n\n/* \u2500\u2500 Column widths \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\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/* Flexible columns use percentages so they scale with the panel.\n   Utility columns (checkbox, length, actions) use px since their content\n   is inherently fixed-size.  col-desc gets no explicit width \u2014 it receives\n   all remaining space under table-layout: fixed. */\n\n.col-name    { width: 22%; }\n.col-type    { width: 20%; }\n.col-req     { width: 58px; text-align: center; }\n.col-extra   { width: 76px; }\n.col-default { width: 11%; }\n.col-desc    { overflow: hidden; }\n.col-actions { width: 40px; text-align: center; }\n\n/* \u2500\u2500 Cell 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 */\n\n.name-cell {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  overflow: hidden;\n}\n\n/* Inside the name flex cell, let the input grow and shrink freely so the\n   RESERVED badge can sit beside it without pushing the input off-screen. */\n.name-cell .cell-input {\n  flex: 1;\n  min-width: 0;\n  width: 0;\n}\n\n.cell-input {\n  width: 100%;\n  min-width: 0;\n  padding: 5px 8px;\n  font-size: 0.875rem;\n  border-radius: 4px;\n}\n\n.cell-select {\n  cursor: pointer;\n}\n\n.cell-number {\n  width: 80px;\n}\n\n.cell-number-sm {\n  width: 58px;\n}\n\n.cell-input.input-error {\n  border-color: var(--mj-status-error-border);\n  background: var(--mj-status-error-bg);\n}\n\n.precision-scale {\n  display: flex;\n  align-items: center;\n  gap: 4px;\n}\n\n.sep {\n  color: var(--mj-text-muted);\n  font-size: 0.875rem;\n}\n\n.cell-na {\n  color: var(--mj-text-muted);\n  font-size: 0.875rem;\n}\n\n.checkbox-wrap {\n  display: flex;\n  justify-content: center;\n  cursor: pointer;\n}\n\n.checkbox-wrap input[type=\"checkbox\"] {\n  width: 16px;\n  height: 16px;\n  cursor: pointer;\n  accent-color: var(--mj-brand-primary);\n}\n\n.reserved-badge {\n  display: inline-block;\n  font-size: 0.68rem;\n  font-weight: 700;\n  text-transform: uppercase;\n  letter-spacing: 0.04em;\n  padding: 2px 6px;\n  border-radius: 4px;\n  background: var(--mj-status-error-bg);\n  color: var(--mj-status-error-text);\n  border: 1px solid var(--mj-status-error-border);\n  white-space: nowrap;\n  flex-shrink: 0;\n}\n\n/* \u2500\u2500 Row action buttons \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\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.action-icon-btn {\n  background: none;\n  border: none;\n  padding: 5px 7px;\n  border-radius: 4px;\n  cursor: pointer;\n  color: var(--mj-text-muted);\n  font-size: 0.875rem;\n  transition: color 0.15s, background 0.15s;\n  line-height: 1;\n}\n\n.action-icon-btn:hover {\n  color: var(--mj-text-primary);\n  background: var(--mj-bg-surface-hover);\n}\n\n.action-icon-btn.delete-btn:hover {\n  color: var(--mj-status-error-text);\n  background: var(--mj-status-error-bg);\n}\n\n/* \u2500\u2500 Auto-managed rows \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\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.auto-col-row td {\n  background: var(--mj-bg-surface-sunken);\n  opacity: 0.72;\n  pointer-events: none;\n}\n\n.auto-col-divider td {\n  border-bottom: 2px solid var(--mj-border-default);\n}\n\n.auto-lock {\n  font-size: 0.7rem;\n  color: var(--mj-text-muted);\n  margin-right: 5px;\n}\n\n.auto-lock-icon {\n  color: var(--mj-text-muted);\n  font-size: 0.75rem;\n}\n\n.auto-badge {\n  display: inline-block;\n  font-size: 0.6rem;\n  font-weight: 700;\n  text-transform: uppercase;\n  letter-spacing: 0.05em;\n  padding: 1px 5px;\n  border-radius: 3px;\n  margin-left: 5px;\n  vertical-align: middle;\n  background: var(--mj-bg-surface-card);\n  color: var(--mj-text-muted);\n  border: 1px solid var(--mj-border-default);\n}\n\n.auto-default {\n  font-family: monospace;\n  font-size: 0.8rem;\n  color: var(--mj-text-muted);\n}\n\n.auto-desc {\n  font-style: italic;\n  color: var(--mj-text-muted);\n  font-size: 0.8rem;\n}\n\n.req-yes {\n  color: var(--mj-status-success);\n}\n\n/* \u2500\u2500 Empty row \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\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.empty-row {\n  padding: 32px 16px;\n  text-align: center;\n  color: var(--mj-text-muted);\n  font-size: 0.875rem;\n}\n\n/* \u2500\u2500 Add field 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 */\n\n.add-field-bar {\n  padding: 10px 16px;\n  border-top: 1px solid var(--mj-border-subtle);\n  background: var(--mj-bg-surface-card);\n  flex-shrink: 0;\n}\n"] }]
    }], null, { Columns: [{
            type: Input
        }], Mode: [{
            type: Input
        }], ColumnsChanged: [{
            type: Output
        }] }); })();
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(EntityFieldsGridComponent, { className: "EntityFieldsGridComponent", filePath: "src/DatabaseDesigner/components/shared/entity-fields-grid.component.ts", lineNumber: 48 }); })();
//# sourceMappingURL=entity-fields-grid.component.js.map