npm - @memberjunction/ng-dashboards - Versions diffs - 5.30.1 → 5.32.0 - Mend

@memberjunction/ng-dashboards 5.30.1 → 5.32.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (424) hide show

package/dist/DatabaseDesigner/components/shared/entity-fields-grid.component.js ADDED Viewed

@@ -0,0 +1,429 @@
+/**
+ * @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

package/dist/DatabaseDesigner/components/shared/entity-fields-grid.component.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"entity-fields-grid.component.js","sourceRoot":"","sources":["../../../../src/DatabaseDesigner/components/shared/entity-fields-grid.component.ts","../../../../src/DatabaseDesigner/components/shared/entity-fields-grid.component.html"],"names":[],"mappings":"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","sourcesContent":["/**\n * @module entity-fields-grid.component\n * @description Inline field editor for the Database Designer wizard (Step 2) and\n * the Modify view (Fields tab).\n *\n * Each row represents one column definition. Cells are directly editable —\n * click any cell to edit it in-place. No separate dialog needed.\n *\n * ### Modes\n * - `create`: all rows are new columns being defined. Any row can be deleted.\n * - `modify`: rows loaded from an existing entity. Existing rows can be hidden\n * from new records (soft-removal preserving data) but not deleted. New rows\n * added by the user can be deleted outright.\n *\n * ### Validation\n * Reserved column names (`ID`, `__mj_CreatedAt`, `__mj_UpdatedAt`) are detected\n * and shown with an inline error badge. The parent step component reads\n * `HasErrors` to gate the \"Next\" button.\n */\n\nimport {\n Component, Input, Output, EventEmitter,\n ChangeDetectionStrategy, ChangeDetectorRef, inject,\n} from '@angular/core';\nimport type { ColumnSpec, FieldTypeOption } from '../../database-designer.types.js';\nimport { FIELD_TYPE_OPTIONS } from '../../database-designer.types.js';\n\n/** Auto-managed columns that users must never add manually. */\nconst RESERVED_NAMES = new Set(['id', '__mj_createdat', '__mj_updatedat']);\n\n/** Extends ColumnSpec with grid-specific display state. */\ninterface FieldRow extends ColumnSpec {\n /** True when the column already exists in the DB (modify mode). */\n isExisting: boolean;\n /** True when the user has soft-toggled this existing column to hidden. */\n isHidden: boolean;\n /** 0-based index for stable tracking. */\n rowIndex: number;\n}\n\n@Component({\n standalone: false,\n selector: 'mj-database-fields-grid',\n templateUrl: './entity-fields-grid.component.html',\n styleUrls: ['./entity-fields-grid.component.css'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class EntityFieldsGridComponent {\n\n // ─── Injected ──────────────────────────────────────────────────────────\n\n private readonly cdr = inject(ChangeDetectorRef);\n\n // ─── Inputs ────────────────────────────────────────────────────────────\n\n @Input() public set Columns(v: ColumnSpec[]) {\n this.rows = v.map((c, i) => ({\n ...c,\n isExisting: false,\n isHidden: false,\n rowIndex: i,\n }));\n this.cdr.markForCheck();\n }\n\n @Input() public Mode: 'create' | 'modify' = 'create';\n\n // ─── Outputs ───────────────────────────────────────────────────────────\n\n /** Emitted on every change so the parent/state service can stay in sync. */\n @Output() public readonly ColumnsChanged = new EventEmitter<ColumnSpec[]>();\n\n // ─── View state ────────────────────────────────────────────────────────\n\n public rows: FieldRow[] = [];\n\n /** Index of the row currently being actively edited (-1 = none). */\n public ActiveRowIndex = -1;\n\n /** Available type options — drives the dropdown. */\n public readonly FieldTypeOptions: readonly FieldTypeOption[] = FIELD_TYPE_OPTIONS;\n\n // ─── Computed ──────────────────────────────────────────────────────────\n\n /** True when any row has a reserved-name validation error. */\n public get HasErrors(): boolean {\n return this.rows.some(r => this.isReservedName(r.Name));\n }\n\n /** True when any row has an error (exposed for parent template). */\n public get HasReservedNameError(): boolean {\n return this.HasErrors;\n }\n\n public TrackByIndex(_: number, row: FieldRow): number {\n return row.rowIndex;\n }\n\n // ─── Template helpers ──────────────────────────────────────────────────\n\n public IsReservedName(name: string): boolean {\n return this.isReservedName(name);\n }\n\n public TypeLabel(type: ColumnSpec['Type']): string {\n return FIELD_TYPE_OPTIONS.find(o => o.value === type)?.label ?? (type ?? 'String (NVARCHAR)');\n }\n\n /** True when the selected type supports a Max Length field. */\n public ShowMaxLength(type: ColumnSpec['Type']): boolean {\n return type === 'string';\n }\n\n /** True when the selected type supports precision/scale fields. */\n public ShowPrecisionScale(type: ColumnSpec['Type']): boolean {\n return type === 'decimal';\n }\n\n // ─── Row operations ────────────────────────────────────────────────────\n\n /** Append an empty row and make it active for editing. */\n public AddField(): void {\n const newRow: FieldRow = {\n Name: '',\n Type: 'string',\n IsNullable: true,\n isExisting: false,\n isHidden: false,\n rowIndex: this.rows.length,\n };\n this.rows = [...this.rows, newRow];\n this.ActiveRowIndex = newRow.rowIndex;\n this.emit();\n }\n\n /** Remove a new (non-existing) row outright. */\n public DeleteRow(index: number): void {\n this.rows = this.rows\n .filter(r => r.rowIndex !== index)\n .map((r, i) => ({ ...r, rowIndex: i }));\n this.ActiveRowIndex = -1;\n this.emit();\n }\n\n /**\n * Toggle the \"hidden\" state of an existing row in modify mode.\n * Hidden = soft-remove: `IncludeInAPI` will be set to false server-side;\n * data in the column is preserved.\n */\n public ToggleHide(index: number): void {\n this.rows = this.rows.map(r =>\n r.rowIndex === index ? { ...r, isHidden: !r.isHidden } : r\n );\n this.emit();\n }\n\n /** Update a field's Name. */\n public OnNameChange(index: number, value: string): void {\n this.updateRow(index, { Name: value });\n }\n\n /** Update a field's Type. */\n public OnTypeChange(index: number, value: ColumnSpec['Type']): void {\n // Clear max-length / precision when switching away from types that use them\n const extra: Partial<FieldRow> = {};\n if (value !== 'string') extra.MaxLength = undefined;\n if (value !== 'decimal') { extra.Precision = undefined; extra.Scale = undefined; }\n this.updateRow(index, { Type: value, ...extra });\n }\n\n /** Toggle the \"Required\" (not-nullable) flag. */\n public OnRequiredToggle(index: number): void {\n const row = this.rows.find(r => r.rowIndex === index);\n if (row) this.updateRow(index, { IsNullable: !row.IsNullable });\n }\n\n /** Update MaxLength for string columns. */\n public OnMaxLengthChange(index: number, value: string): void {\n const n = parseInt(value, 10);\n this.updateRow(index, { MaxLength: isNaN(n) ? undefined : n });\n }\n\n /** Update the Default Value string. */\n public OnDefaultValueChange(index: number, value: string): void {\n this.updateRow(index, { DefaultValue: value || undefined });\n }\n\n /** Update the Description string. */\n public OnDescriptionChange(index: number, value: string): void {\n this.updateRow(index, { Description: value || undefined });\n }\n\n // ─── Public & private helpers ──────────────────────────────────────────\n\n private isReservedName(name: string): boolean {\n return RESERVED_NAMES.has(name.toLowerCase());\n }\n\n /** Called directly from the template for precision/scale inline updates. */\n public updateRow(index: number, patch: Partial<FieldRow>): void {\n this.rows = this.rows.map(r =>\n r.rowIndex === index ? { ...r, ...patch } : r\n );\n this.emit();\n }\n\n /** Emit the current non-hidden rows as `ColumnSpec[]` to the parent. */\n private emit(): void {\n const cols: ColumnSpec[] = this.rows\n .filter(r => !r.isHidden)\n .map(({ isExisting: _e, isHidden: _h, rowIndex: _i, ...col }) => col);\n this.ColumnsChanged.emit(cols);\n this.cdr.markForCheck();\n }\n}\n","<div class=\"fields-grid-root\">\n\n \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 \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 \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\">—</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 — 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\">—</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\">—</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 \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 \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 \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 \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\">—</span>\n }\n </td>\n\n \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 \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 \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 \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"]}

package/dist/DatabaseDesigner/components/shared/entity-pipeline-panel.component.d.ts ADDED Viewed

@@ -0,0 +1,58 @@
+/**
+ * @module entity-pipeline-panel.component
+ * @description Displays pipeline execution progress and results for entity
+ * creation/modification. Used in wizard Step 5 and the Modify "Apply" tab.
+ *
+ * ### Lifecycle
+ * The component does NOT start the pipeline automatically on mount — the parent
+ * must call `StartExecution()` explicitly.  This keeps "panel visible" and
+ * "pipeline running" as separate events, which simplifies the host wizard logic.
+ *
+ * ### States
+ *  - `idle`      → waiting for StartExecution() call
+ *  - `running`   → action in flight, spinner shown
+ *  - `success`   → pipeline returned Success=true, success card shown
+ *  - `failed`    → pipeline returned Success=false, error card shown
+ */
+import { EventEmitter, AfterViewInit } from '@angular/core';
+import type { EntityTableSpec, EntityPipelineResult, PipelineStepSummary } from '../../database-designer.types.js';
+import * as i0 from "@angular/core";
+type PanelState = 'idle' | 'running' | 'success' | 'failed';
+export declare class EntityPipelinePanelComponent implements AfterViewInit {
+    private readonly service;
+    private readonly cdr;
+    /** Table spec to create or modify. */
+    TableDefinition: EntityTableSpec | null;
+    /** Whether this panel is creating a new entity or altering an existing one. */
+    ModificationType: 'create' | 'alter';
+    /** Required only in 'alter' mode — ID of the entity being modified. */
+    ExistingEntityId: string | null;
+    /** When true, `StartExecution()` is called automatically on mount. */
+    AutoStart: boolean;
+    /** Emitted when the pipeline completes successfully. */
+    readonly Completed: EventEmitter<EntityPipelineResult>;
+    /** Emitted when the pipeline fails or throws. */
+    readonly Errored: EventEmitter<string>;
+    State: PanelState;
+    PipelineResult: EntityPipelineResult | null;
+    ErrorMessage: string;
+    Steps: PipelineStepSummary[];
+    /**
+     * Kick off the pipeline.  Idempotent — calling while already running is a no-op.
+     * Called by the parent (wizard step 5 or modify "Apply" tab).
+     */
+    ngAfterViewInit(): void;
+    StartExecution(): Promise<void>;
+    /** Reset to idle so the panel can be reused (e.g., "Try Again"). */
+    Reset(): void;
+    TrackByStep(_: number, step: PipelineStepSummary): string;
+    StepIcon(step: PipelineStepSummary): string;
+    FormatDuration(ms: number): string;
+    /** Summary line for the success card: "4 custom columns + 3 auto-managed". */
+    get SuccessColumnSummary(): string;
+    get FullTablePath(): string;
+    static ɵfac: i0.ɵɵFactoryDeclaration<EntityPipelinePanelComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<EntityPipelinePanelComponent, "mj-database-pipeline-panel", never, { "TableDefinition": { "alias": "TableDefinition"; "required": false; }; "ModificationType": { "alias": "ModificationType"; "required": false; }; "ExistingEntityId": { "alias": "ExistingEntityId"; "required": false; }; "AutoStart": { "alias": "AutoStart"; "required": false; }; }, { "Completed": "Completed"; "Errored": "Errored"; }, never, never, false, never>;
+}
+export {};
+//# sourceMappingURL=entity-pipeline-panel.component.d.ts.map