@simplysm/angular 14.0.41 → 14.0.43

package/dist/data/sheet/sd-sheet-config.modal.js

@@ -1,255 +1,395 @@
-import { ChangeDetectionStrategy, Component, computed, input, linkedSignal, output, signal, ViewEncapsulation, } from "@angular/core";
+import { ChangeDetectionStrategy, Component, effect, forwardRef, input, output, signal, ViewEncapsulation, } from "@angular/core";
+import { SdSheet } from "./sd-sheet";
+import { SdSheetColumn as SdSheetColumnDir } from "./sd-sheet-column";
+import { SdSheetColumnCellTemplate } from "./sd-sheet-column-cell-template";
 import { SdButton } from "../../controls/button/sd-button";
 import { SdCheckbox } from "../../controls/checkbox/sd-checkbox";
+import { SdTextfield } from "../../controls/input/sd-textfield";
+import { SdAnchor } from "../../controls/button/sd-anchor";
+import { SdBusyContainer } from "../../core/busy/sd-busy-container";
 import { NgIcon } from "@ng-icons/core";
-import { tablerArrowUp, tablerArrowDown } from "@ng-icons/tabler-icons";
+import { tablerChevronUp, tablerChevronDown, tablerX } from "@ng-icons/tabler-icons";
+import { mark } from "../../core/mark";
 import * as i0 from "@angular/core";
-const _forTrack0 = ($index, $item) => $item.key;
-function SdSheetConfigModal_For_16_Template(rf, ctx) { if (rf & 1) {
-    const _r1 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "tr")(1, "td")(2, "sd-checkbox", 5);
-    i0.ɵɵlistener("click", function SdSheetConfigModal_For_16_Template_sd_checkbox_click_2_listener() { const ɵ$index_26_r2 = i0.ɵɵrestoreView(_r1).$index; const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onFixedToggle(ɵ$index_26_r2)); });
+function SdSheetConfigModal_Conditional_1_ng_template_3_Template(rf, ctx) { if (rf & 1) {
+    const _r2 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 12)(1, "sd-checkbox", 13);
+    i0.ɵɵtwoWayListener("valueChange", function SdSheetConfigModal_Conditional_1_ng_template_3_Template_sd_checkbox_valueChange_1_listener($event) { const item_r3 = i0.ɵɵrestoreView(_r2).item; i0.ɵɵtwoWayBindingSet(item_r3.fixed, $event) || (item_r3.fixed = $event); return i0.ɵɵresetView($event); });
+    i0.ɵɵlistener("valueChange", function SdSheetConfigModal_Conditional_1_ng_template_3_Template_sd_checkbox_valueChange_1_listener() { i0.ɵɵrestoreView(_r2); const ctx_r3 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r3.mark(ctx_r3.items)); });
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(3, "td", 6)(4, "sd-button", 7);
-    i0.ɵɵlistener("click", function SdSheetConfigModal_For_16_Template_sd_button_click_4_listener() { const ɵ$index_26_r2 = i0.ɵɵrestoreView(_r1).$index; const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onMoveUp(ɵ$index_26_r2)); });
-    i0.ɵɵelement(5, "ng-icon", 8);
+} if (rf & 2) {
+    const item_r3 = ctx.item;
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("size", "sm")("inset", true);
+    i0.ɵɵtwoWayProperty("value", item_r3.fixed);
+} }
+function SdSheetConfigModal_Conditional_1_ng_template_5_Template(rf, ctx) { if (rf & 1) {
+    const _r5 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 14)(1, "sd-anchor", 15);
+    i0.ɵɵlistener("click", function SdSheetConfigModal_Conditional_1_ng_template_5_Template_sd_anchor_click_1_listener() { const item_r6 = i0.ɵɵrestoreView(_r5).item; const ctx_r3 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r3.onMoveUp(item_r6)); });
+    i0.ɵɵelement(2, "ng-icon", 16);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(6, "sd-button", 7);
-    i0.ɵɵlistener("click", function SdSheetConfigModal_For_16_Template_sd_button_click_6_listener() { const ɵ$index_26_r2 = i0.ɵɵrestoreView(_r1).$index; const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onMoveDown(ɵ$index_26_r2)); });
-    i0.ɵɵelement(7, "ng-icon", 8);
+    i0.ɵɵelementStart(3, "sd-anchor", 15);
+    i0.ɵɵlistener("click", function SdSheetConfigModal_Conditional_1_ng_template_5_Template_sd_anchor_click_3_listener() { const item_r6 = i0.ɵɵrestoreView(_r5).item; const ctx_r3 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r3.onMoveDown(item_r6)); });
+    i0.ɵɵelement(4, "ng-icon", 16);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(8, "td");
-    i0.ɵɵtext(9);
+} if (rf & 2) {
+    const item_r6 = ctx.item;
+    const index_r7 = ctx.index;
+    const ctx_r3 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("disabled", index_r7 === 0 || !item_r6.fixed && ctx_r3.items()[index_r7 - 1].fixed);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("svg", ctx_r3.tablerChevronUp);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("disabled", index_r7 === ctx_r3.items().length - 1 || item_r6.fixed && !ctx_r3.items()[index_r7 + 1].fixed);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("svg", ctx_r3.tablerChevronDown);
+} }
+function SdSheetConfigModal_Conditional_1_ng_template_7_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 17);
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const item_r8 = ctx.item;
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1(" ", item_r8.header, " ");
+} }
+function SdSheetConfigModal_Conditional_1_ng_template_9_Conditional_0_Template(rf, ctx) { if (rf & 1) {
+    const _r9 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "sd-textfield", 19);
+    i0.ɵɵtwoWayListener("valueChange", function SdSheetConfigModal_Conditional_1_ng_template_9_Conditional_0_Template_sd_textfield_valueChange_0_listener($event) { i0.ɵɵrestoreView(_r9); const item_r10 = i0.ɵɵnextContext().item; i0.ɵɵtwoWayBindingSet(item_r10.width, $event) || (item_r10.width = $event); return i0.ɵɵresetView($event); });
+    i0.ɵɵlistener("valueChange", function SdSheetConfigModal_Conditional_1_ng_template_9_Conditional_0_Template_sd_textfield_valueChange_0_listener() { i0.ɵɵrestoreView(_r9); const ctx_r3 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r3.mark(ctx_r3.items)); });
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(10, "td")(11, "input", 9);
-    i0.ɵɵlistener("input", function SdSheetConfigModal_For_16_Template_input_input_11_listener($event) { const ɵ$index_26_r2 = i0.ɵɵrestoreView(_r1).$index; const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onWidthChange(ɵ$index_26_r2, $event)); });
+} if (rf & 2) {
+    const item_r10 = i0.ɵɵnextContext().item;
+    i0.ɵɵproperty("type", "text")("size", "sm")("inset", true);
+    i0.ɵɵtwoWayProperty("value", item_r10.width);
+} }
+function SdSheetConfigModal_Conditional_1_ng_template_9_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵconditionalCreate(0, SdSheetConfigModal_Conditional_1_ng_template_9_Conditional_0_Template, 1, 4, "sd-textfield", 18);
+} if (rf & 2) {
+    const item_r10 = ctx.item;
+    i0.ɵɵconditional(!item_r10.disableResizing ? 0 : -1);
+} }
+function SdSheetConfigModal_Conditional_1_ng_template_11_Template(rf, ctx) { if (rf & 1) {
+    const _r11 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 12)(1, "sd-checkbox", 20);
+    i0.ɵɵtwoWayListener("valueChange", function SdSheetConfigModal_Conditional_1_ng_template_11_Template_sd_checkbox_valueChange_1_listener($event) { const item_r12 = i0.ɵɵrestoreView(_r11).item; i0.ɵɵtwoWayBindingSet(item_r12.hidden, $event) || (item_r12.hidden = $event); return i0.ɵɵresetView($event); });
+    i0.ɵɵlistener("valueChange", function SdSheetConfigModal_Conditional_1_ng_template_11_Template_sd_checkbox_valueChange_1_listener() { i0.ɵɵrestoreView(_r11); const ctx_r3 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r3.mark(ctx_r3.items)); });
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(12, "td")(13, "sd-checkbox", 5);
-    i0.ɵɵlistener("click", function SdSheetConfigModal_For_16_Template_sd_checkbox_click_13_listener() { const ɵ$index_26_r2 = i0.ɵɵrestoreView(_r1).$index; const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onHiddenToggle(ɵ$index_26_r2)); });
+} if (rf & 2) {
+    const item_r12 = ctx.item;
+    const ctx_r3 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("size", "sm")("inset", true);
+    i0.ɵɵtwoWayProperty("value", item_r12.hidden);
+    i0.ɵɵproperty("icon", ctx_r3.tablerX)("theme", "danger");
+} }
+function SdSheetConfigModal_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    const _r1 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 1)(1, "sd-sheet", 2)(2, "sd-sheet-column", 3);
+    i0.ɵɵtemplate(3, SdSheetConfigModal_Conditional_1_ng_template_3_Template, 2, 3, "ng-template", 4);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(4, "sd-sheet-column", 3);
+    i0.ɵɵtemplate(5, SdSheetConfigModal_Conditional_1_ng_template_5_Template, 5, 4, "ng-template", 4);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(6, "sd-sheet-column", 5);
+    i0.ɵɵtemplate(7, SdSheetConfigModal_Conditional_1_ng_template_7_Template, 2, 1, "ng-template", 4);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(8, "sd-sheet-column", 6);
+    i0.ɵɵtemplate(9, SdSheetConfigModal_Conditional_1_ng_template_9_Template, 1, 1, "ng-template", 4);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(10, "sd-sheet-column", 3);
+    i0.ɵɵtemplate(11, SdSheetConfigModal_Conditional_1_ng_template_11_Template, 2, 5, "ng-template", 4);
     i0.ɵɵelementEnd()()();
+    i0.ɵɵelementStart(12, "div", 7)(13, "div", 8)(14, "sd-button", 9);
+    i0.ɵɵlistener("click", function SdSheetConfigModal_Conditional_1_Template_sd_button_click_14_listener() { i0.ɵɵrestoreView(_r1); const ctx_r3 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r3.onResetClick()); });
+    i0.ɵɵtext(15, " Reset ");
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(16, "sd-button", 10);
+    i0.ɵɵlistener("click", function SdSheetConfigModal_Conditional_1_Template_sd_button_click_16_listener() { i0.ɵɵrestoreView(_r1); const ctx_r3 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r3.onOkClick()); });
+    i0.ɵɵtext(17, " OK ");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(18, "sd-button", 11);
+    i0.ɵɵlistener("click", function SdSheetConfigModal_Conditional_1_Template_sd_button_click_18_listener() { i0.ɵɵrestoreView(_r1); const ctx_r3 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r3.onCancelClick()); });
+    i0.ɵɵtext(19, " Cancel ");
+    i0.ɵɵelementEnd()();
 } if (rf & 2) {
-    const item_r4 = ctx.$implicit;
-    const ɵ$index_26_r2 = ctx.$index;
-    const ctx_r2 = i0.ɵɵnextContext();
-    i0.ɵɵadvance(2);
-    i0.ɵɵproperty("value", item_r4.fixed)("inline", true)("inset", true);
-    i0.ɵɵadvance(2);
-    i0.ɵɵproperty("disabled", !ctx_r2.canMoveUp(ɵ$index_26_r2));
+    const ctx_r3 = i0.ɵɵnextContext();
     i0.ɵɵadvance();
-    i0.ɵɵproperty("svg", ctx_r2._icons.tablerArrowUp);
+    i0.ɵɵproperty("key", ctx_r3.sheetKey() + "-config")("items", ctx_r3.items())("trackByFn", ctx_r3.trackByFn)("hideConfigBar", true);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("disabled", !ctx_r2.canMoveDown(ɵ$index_26_r2));
+    i0.ɵɵproperty("key", "fixed")("header", "Fix")("disableSorting", true)("disableResizing", true);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("svg", ctx_r2._icons.tablerArrowDown);
-    i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate(item_r4.header);
+    i0.ɵɵproperty("cell", ctx_r3.items());
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("key", "ordering")("header", "Order")("disableSorting", true)("disableResizing", true);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("cell", ctx_r3.items());
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("key", "header")("header", "Header")("disableSorting", true);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("cell", ctx_r3.items());
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("key", "width")("header", "Width")("disableSorting", true)("width", "60px");
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("cell", ctx_r3.items());
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("key", "hidden")("header", "Hidden")("disableSorting", true)("disableResizing", true);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("cell", ctx_r3.items());
+    i0.ɵɵadvance(3);
+    i0.ɵɵproperty("size", "sm")("inline", true)("theme", "warning")("buttonStyle", "min-width: 60px;");
     i0.ɵɵadvance(2);
-    i0.ɵɵproperty("value", item_r4.width);
+    i0.ɵɵproperty("size", "sm")("theme", "success")("buttonStyle", "min-width: 60px;");
     i0.ɵɵadvance(2);
-    i0.ɵɵproperty("value", item_r4.hidden)("inline", true)("inset", true);
+    i0.ɵɵproperty("size", "sm")("buttonStyle", "min-width: 60px;");
 } }
 export class SdSheetConfigModal {
-    initialized = signal(true, ...(ngDevMode ? [{ debugName: "initialized" }] : /* istanbul ignore next */ []));
+    initialized = signal(false, ...(ngDevMode ? [{ debugName: "initialized" }] : /* istanbul ignore next */ []));
     close = output();
+    sheetKey = input.required(...(ngDevMode ? [{ debugName: "sheetKey" }] : /* istanbul ignore next */ []));
     controls = input.required(...(ngDevMode ? [{ debugName: "controls" }] : /* istanbul ignore next */ []));
     config = input.required(...(ngDevMode ? [{ debugName: "config" }] : /* istanbul ignore next */ []));
-    _icons = { tablerArrowUp, tablerArrowDown };
-    _initialItems = computed(() => {
-        const cfg = this.config();
-        const controls = this.controls();
-        return controls
-            .map((ctrl) => {
-            const key = ctrl.key();
-            const cfgCol = cfg?.columnRecord[key];
-            return {
-                key,
-                header: Array.isArray(ctrl.header()) ? ctrl.header().join(" > ") : ctrl.header(),
-                fixed: cfgCol?.fixed ?? ctrl.fixed(),
-                hidden: cfgCol?.hidden ?? ctrl.hidden(),
-                width: cfgCol?.width ?? ctrl.width() ?? "",
-                ordering: cfgCol?.ordering ?? ctrl.ordering(),
-            };
-        })
-            .sort((a, b) => a.ordering - b.ordering);
-    }, ...(ngDevMode ? [{ debugName: "_initialItems" }] : /* istanbul ignore next */ []));
-    _items = linkedSignal(() => this._initialItems(), ...(ngDevMode ? [{ debugName: "_items" }] : /* istanbul ignore next */ []));
-    onFixedToggle(idx) {
-        const items = [...this._items()];
-        items[idx] = { ...items[idx], fixed: !items[idx].fixed };
-        this._items.set(items);
-    }
-    onHiddenToggle(idx) {
-        const items = [...this._items()];
-        items[idx] = { ...items[idx], hidden: !items[idx].hidden };
-        this._items.set(items);
-    }
-    onWidthChange(idx, event) {
-        const inputEl = event.target;
-        const items = [...this._items()];
-        items[idx] = { ...items[idx], width: inputEl.value };
-        this._items.set(items);
-    }
-    canMoveUp(idx) {
-        if (idx <= 0)
-            return false;
-        const items = this._items();
-        const current = items[idx];
-        const above = items[idx - 1];
-        // Cannot move non-fixed above fixed
-        if (!current.fixed && above.fixed)
-            return false;
-        return true;
-    }
-    canMoveDown(idx) {
-        const items = this._items();
-        if (idx >= items.length - 1)
-            return false;
-        const current = items[idx];
-        const below = items[idx + 1];
-        // Cannot move fixed below non-fixed
-        if (current.fixed && !below.fixed)
-            return false;
-        return true;
+    items = signal([], ...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
+    trackByFn = (item) => item.key;
+    tablerChevronUp = tablerChevronUp;
+    tablerChevronDown = tablerChevronDown;
+    tablerX = tablerX;
+    mark = mark;
+    constructor() {
+        effect(() => {
+            const cfg = this.config();
+            const items = this.controls()
+                .map((ctrl) => {
+                const key = ctrl.key();
+                const cfgCol = cfg?.columnRecord[key];
+                return {
+                    key,
+                    header: Array.isArray(ctrl.header())
+                        ? ctrl.header().join(" > ")
+                        : ctrl.header(),
+                    disableResizing: ctrl.disableResizing(),
+                    fixed: cfgCol?.fixed ?? ctrl.fixed(),
+                    hidden: cfgCol?.hidden ?? ctrl.hidden(),
+                    width: cfgCol?.width ?? ctrl.width(),
+                    ordering: cfgCol?.ordering ?? ctrl.ordering(),
+                };
+            })
+                .orderBy((i) => i.ordering ?? 0)
+                .orderBy((i) => (i.fixed ? 0 : 1));
+            this.items.set(items);
+            this.initialized.set(true);
+        });
     }
-    onMoveUp(idx) {
-        if (!this.canMoveUp(idx))
-            return;
-        const items = [...this._items()];
-        [items[idx - 1], items[idx]] = [items[idx], items[idx - 1]];
-        this._items.set(items);
+    onMoveUp(item) {
+        this.items.update((v) => {
+            const r = [...v];
+            const index = r.indexOf(item);
+            r.splice(index, 1);
+            r.splice(index - 1, 0, item);
+            for (let i = 0; i < r.length; i++) {
+                r[i].ordering = i;
+            }
+            return r;
+        });
     }
-    onMoveDown(idx) {
-        if (!this.canMoveDown(idx))
-            return;
-        const items = [...this._items()];
-        [items[idx], items[idx + 1]] = [items[idx + 1], items[idx]];
-        this._items.set(items);
+    onMoveDown(item) {
+        this.items.update((v) => {
+            const r = [...v];
+            const index = r.indexOf(item);
+            r.splice(index, 1);
+            r.splice(index + 1, 0, item);
+            for (let i = 0; i < r.length; i++) {
+                r[i].ordering = i;
+            }
+            return r;
+        });
     }
-    onOk() {
-        const items = this._items();
-        const columnRecord = {};
-        for (let i = 0; i < items.length; i++) {
-            const item = items[i];
-            columnRecord[item.key] = {
+    onOkClick() {
+        const result = { columnRecord: {} };
+        for (const item of this.items()) {
+            result.columnRecord[item.key] = {
                 fixed: item.fixed,
+                width: item.width,
+                ordering: item.ordering,
                 hidden: item.hidden,
-                width: item.width !== "" ? item.width : undefined,
-                ordering: i,
             };
         }
-        this.close.emit({ columnRecord });
+        this.close.emit(result);
     }
-    onCancel() {
+    onCancelClick() {
         this.close.emit(undefined);
     }
-    onReset() {
-        this.close.emit({ columnRecord: {} });
+    onResetClick() {
+        if (confirm("설정값이 모두 초기화 됩니다.")) {
+            this.close.emit({ columnRecord: {} });
+        }
     }
     static ɵfac = function SdSheetConfigModal_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || SdSheetConfigModal)(); };
-    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: SdSheetConfigModal, selectors: [["sd-sheet-config-modal"]], inputs: { controls: [1, "controls"], config: [1, "config"] }, outputs: { close: "close" }, decls: 24, vars: 1, consts: [[1, "_sd-sheet-config-modal"], [1, "_config-table"], [1, "_actions"], [3, "click", "theme"], [3, "click"], [3, "click", "value", "inline", "inset"], [1, "_order-col"], [3, "click", "disabled"], [3, "svg"], ["type", "text", 1, "_width-input", 3, "input", "value"]], template: function SdSheetConfigModal_Template(rf, ctx) { if (rf & 1) {
-            i0.ɵɵelementStart(0, "div", 0)(1, "table", 1)(2, "thead")(3, "tr")(4, "th");
-            i0.ɵɵtext(5, "Fix");
-            i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(6, "th");
-            i0.ɵɵtext(7, "Order");
-            i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(8, "th");
-            i0.ɵɵtext(9, "Header");
-            i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(10, "th");
-            i0.ɵɵtext(11, "Width");
-            i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(12, "th");
-            i0.ɵɵtext(13, "Hidden");
-            i0.ɵɵelementEnd()()();
-            i0.ɵɵelementStart(14, "tbody");
-            i0.ɵɵrepeaterCreate(15, SdSheetConfigModal_For_16_Template, 14, 12, "tr", null, _forTrack0);
-            i0.ɵɵelementEnd()();
-            i0.ɵɵelementStart(17, "div", 2)(18, "sd-button", 3);
-            i0.ɵɵlistener("click", function SdSheetConfigModal_Template_sd_button_click_18_listener() { return ctx.onOk(); });
-            i0.ɵɵtext(19, "OK");
-            i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(20, "sd-button", 4);
-            i0.ɵɵlistener("click", function SdSheetConfigModal_Template_sd_button_click_20_listener() { return ctx.onCancel(); });
-            i0.ɵɵtext(21, "Cancel");
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: SdSheetConfigModal, selectors: [["sd-sheet-config-modal"]], inputs: { sheetKey: [1, "sheetKey"], controls: [1, "controls"], config: [1, "config"] }, outputs: { close: "close" }, decls: 2, vars: 2, consts: [[3, "busy"], [1, "flex-fill", "p-default"], [3, "key", "items", "trackByFn", "hideConfigBar"], [3, "key", "header", "disableSorting", "disableResizing"], [3, "cell"], [3, "key", "header", "disableSorting"], [3, "key", "header", "disableSorting", "width"], [1, "p-sm-default", "flex-row", "gap-sm", "bdt", "bdt-theme-gray-lightest"], [1, "flex-fill", "align-start"], [3, "click", "size", "inline", "theme", "buttonStyle"], [3, "click", "size", "theme", "buttonStyle"], [3, "click", "size", "buttonStyle"], [2, "text-align", "center"], [3, "valueChange", "size", "inset", "value"], [1, "p-xs-sm", 2, "text-align", "center"], [3, "click", "disabled"], [3, "svg"], [1, "p-xs-sm"], [3, "type", "size", "inset", "value"], [3, "valueChange", "type", "size", "inset", "value"], [3, "valueChange", "size", "inset", "value", "icon", "theme"]], template: function SdSheetConfigModal_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵelementStart(0, "sd-busy-container", 0);
+            i0.ɵɵconditionalCreate(1, SdSheetConfigModal_Conditional_1_Template, 20, 37);
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(22, "sd-button", 4);
-            i0.ɵɵlistener("click", function SdSheetConfigModal_Template_sd_button_click_22_listener() { return ctx.onReset(); });
-            i0.ɵɵtext(23, "Reset");
-            i0.ɵɵelementEnd()()();
         } if (rf & 2) {
-            i0.ɵɵadvance(15);
-            i0.ɵɵrepeater(ctx._items());
-            i0.ɵɵadvance(3);
-            i0.ɵɵproperty("theme", "primary");
-        } }, dependencies: [SdButton, SdCheckbox, NgIcon], styles: ["sd-sheet-config-modal {\n  display: block;\n  padding: var(--gap-default);\n}\nsd-sheet-config-modal > ._sd-sheet-config-modal > ._config-table {\n  width: 100%;\n  border-collapse: collapse;\n  margin-bottom: var(--gap-default);\n}\nsd-sheet-config-modal > ._sd-sheet-config-modal > ._config-table th,\nsd-sheet-config-modal > ._sd-sheet-config-modal > ._config-table td {\n  border: 1px solid var(--trans-lighter);\n  padding: var(--gap-sm) var(--gap-default);\n  text-align: left;\n}\nsd-sheet-config-modal > ._sd-sheet-config-modal > ._config-table th {\n  background: var(--theme-secondary-lightest);\n  font-weight: bold;\n}\nsd-sheet-config-modal > ._sd-sheet-config-modal > ._config-table ._order-col {\n  white-space: nowrap;\n}\nsd-sheet-config-modal > ._sd-sheet-config-modal > ._config-table ._width-input {\n  width: 80px;\n  padding: 2px 4px;\n  border: 1px solid var(--trans-lighter);\n}\nsd-sheet-config-modal > ._sd-sheet-config-modal > ._actions {\n  display: flex;\n  justify-content: flex-end;\n  gap: var(--gap-sm);\n}"], encapsulation: 2, changeDetection: 0 });
+            i0.ɵɵproperty("busy", !ctx.initialized());
+            i0.ɵɵadvance();
+            i0.ɵɵconditional(ctx.initialized() ? 1 : -1);
+        } }, dependencies: () => [SdSheet, SdSheetColumnDir,
+            SdSheetColumnCellTemplate,
+            SdButton,
+            SdCheckbox,
+            SdTextfield,
+            SdAnchor,
+            SdBusyContainer,
+            NgIcon], encapsulation: 2, changeDetection: 0 });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SdSheetConfigModal, [{
         type: Component,
-        args: [{ selector: "sd-sheet-config-modal", changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [SdButton, SdCheckbox, NgIcon], template: `
-    <div class="_sd-sheet-config-modal">
-      <table class="_config-table">
-        <thead>
-          <tr>
-            <th>Fix</th>
-            <th>Order</th>
-            <th>Header</th>
-            <th>Width</th>
-            <th>Hidden</th>
-          </tr>
-        </thead>
-        <tbody>
-          @for (item of _items(); track item.key; let idx = $index) {
-            <tr>
-              <td>
-                <sd-checkbox
-                  [value]="item.fixed"
-                  (click)="onFixedToggle(idx)"
-                  [inline]="true"
-                  [inset]="true"
-                />
-              </td>
-              <td class="_order-col">
-                <sd-button
-                  [disabled]="!canMoveUp(idx)"
-                  (click)="onMoveUp(idx)"
-                >
-                  <ng-icon [svg]="_icons.tablerArrowUp" />
-                </sd-button>
-                <sd-button
-                  [disabled]="!canMoveDown(idx)"
-                  (click)="onMoveDown(idx)"
-                >
-                  <ng-icon [svg]="_icons.tablerArrowDown" />
-                </sd-button>
-              </td>
-              <td>{{ item.header }}</td>
-              <td>
-                <input
-                  type="text"
-                  class="_width-input"
-                  [value]="item.width"
-                  (input)="onWidthChange(idx, $event)"
-                />
-              </td>
-              <td>
-                <sd-checkbox
-                  [value]="item.hidden"
-                  (click)="onHiddenToggle(idx)"
-                  [inline]="true"
-                  [inset]="true"
-                />
-              </td>
-            </tr>
-          }
-        </tbody>
-      </table>
-      <div class="_actions">
-        <sd-button [theme]="'primary'" (click)="onOk()">OK</sd-button>
-        <sd-button (click)="onCancel()">Cancel</sd-button>
-        <sd-button (click)="onReset()">Reset</sd-button>
-      </div>
-    </div>
-  `, styles: ["sd-sheet-config-modal {\n  display: block;\n  padding: var(--gap-default);\n}\nsd-sheet-config-modal > ._sd-sheet-config-modal > ._config-table {\n  width: 100%;\n  border-collapse: collapse;\n  margin-bottom: var(--gap-default);\n}\nsd-sheet-config-modal > ._sd-sheet-config-modal > ._config-table th,\nsd-sheet-config-modal > ._sd-sheet-config-modal > ._config-table td {\n  border: 1px solid var(--trans-lighter);\n  padding: var(--gap-sm) var(--gap-default);\n  text-align: left;\n}\nsd-sheet-config-modal > ._sd-sheet-config-modal > ._config-table th {\n  background: var(--theme-secondary-lightest);\n  font-weight: bold;\n}\nsd-sheet-config-modal > ._sd-sheet-config-modal > ._config-table ._order-col {\n  white-space: nowrap;\n}\nsd-sheet-config-modal > ._sd-sheet-config-modal > ._config-table ._width-input {\n  width: 80px;\n  padding: 2px 4px;\n  border: 1px solid var(--trans-lighter);\n}\nsd-sheet-config-modal > ._sd-sheet-config-modal > ._actions {\n  display: flex;\n  justify-content: flex-end;\n  gap: var(--gap-sm);\n}"] }]
-    }], null, { close: [{ type: i0.Output, args: ["close"] }], controls: [{ type: i0.Input, args: [{ isSignal: true, alias: "controls", required: true }] }], config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: true }] }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SdSheetConfigModal, { className: "SdSheetConfigModal", filePath: "packages/angular/src/data/sheet/sd-sheet-config.modal.ts", lineNumber: 143, forbidOrphanRendering: true }); })();
+        args: [{
+                selector: "sd-sheet-config-modal",
+                changeDetection: ChangeDetectionStrategy.OnPush,
+                encapsulation: ViewEncapsulation.None,
+                imports: [
+                    forwardRef(() => SdSheet),
+                    SdSheetColumnDir,
+                    SdSheetColumnCellTemplate,
+                    SdButton,
+                    SdCheckbox,
+                    SdTextfield,
+                    SdAnchor,
+                    SdBusyContainer,
+                    NgIcon,
+                ],
+                template: `
+    <sd-busy-container [busy]="!initialized()">
+      @if (initialized()) {
+        <div class="flex-fill p-default">
+          <sd-sheet
+            [key]="sheetKey() + '-config'"
+            [items]="items()"
+            [trackByFn]="trackByFn"
+            [hideConfigBar]="true"
+          >
+            <sd-sheet-column
+              [key]="'fixed'"
+              [header]="'Fix'"
+              [disableSorting]="true"
+              [disableResizing]="true"
+            >
+              <ng-template [cell]="items()" let-item="item">
+                <div style="text-align: center">
+                  <sd-checkbox
+                    [size]="'sm'"
+                    [inset]="true"
+                    [(value)]="item.fixed"
+                    (valueChange)="mark(items)"
+                  />
+                </div>
+              </ng-template>
+            </sd-sheet-column>
+            <sd-sheet-column
+              [key]="'ordering'"
+              [header]="'Order'"
+              [disableSorting]="true"
+              [disableResizing]="true"
+            >
+              <ng-template [cell]="items()" let-item="item" let-index="index">
+                <div class="p-xs-sm" style="text-align: center">
+                  <sd-anchor
+                    [disabled]="index === 0 || (!item.fixed && items()[index - 1].fixed)"
+                    (click)="onMoveUp(item)"
+                  >
+                    <ng-icon [svg]="tablerChevronUp" />
+                  </sd-anchor>
+                  <sd-anchor
+                    [disabled]="index === items().length - 1 || (item.fixed && !items()[index + 1].fixed)"
+                    (click)="onMoveDown(item)"
+                  >
+                    <ng-icon [svg]="tablerChevronDown" />
+                  </sd-anchor>
+                </div>
+              </ng-template>
+            </sd-sheet-column>
+            <sd-sheet-column [key]="'header'" [header]="'Header'" [disableSorting]="true">
+              <ng-template [cell]="items()" let-item="item">
+                <div class="p-xs-sm">
+                  {{ item.header }}
+                </div>
+              </ng-template>
+            </sd-sheet-column>
+            <sd-sheet-column
+              [key]="'width'"
+              [header]="'Width'"
+              [disableSorting]="true"
+              [width]="'60px'"
+            >
+              <ng-template [cell]="items()" let-item="item">
+                @if (!item.disableResizing) {
+                  <sd-textfield
+                    [type]="'text'"
+                    [size]="'sm'"
+                    [inset]="true"
+                    [(value)]="item.width"
+                    (valueChange)="mark(items)"
+                  />
+                }
+              </ng-template>
+            </sd-sheet-column>
+            <sd-sheet-column
+              [key]="'hidden'"
+              [header]="'Hidden'"
+              [disableSorting]="true"
+              [disableResizing]="true"
+            >
+              <ng-template [cell]="items()" let-item="item">
+                <div style="text-align: center">
+                  <sd-checkbox
+                    [size]="'sm'"
+                    [inset]="true"
+                    [(value)]="item.hidden"
+                    (valueChange)="mark(items)"
+                    [icon]="tablerX"
+                    [theme]="'danger'"
+                  />
+                </div>
+              </ng-template>
+            </sd-sheet-column>
+          </sd-sheet>
+        </div>
+
+        <div class="p-sm-default flex-row gap-sm bdt bdt-theme-gray-lightest">
+          <div class="flex-fill align-start">
+            <sd-button
+              [size]="'sm'"
+              [inline]="true"
+              [theme]="'warning'"
+              [buttonStyle]="'min-width: 60px;'"
+              (click)="onResetClick()"
+            >
+              Reset
+            </sd-button>
+          </div>
+          <sd-button
+            [size]="'sm'"
+            [theme]="'success'"
+            [buttonStyle]="'min-width: 60px;'"
+            (click)="onOkClick()"
+          >
+            OK
+          </sd-button>
+          <sd-button
+            [size]="'sm'"
+            [buttonStyle]="'min-width: 60px;'"
+            (click)="onCancelClick()"
+          >
+            Cancel
+          </sd-button>
+        </div>
+      }
+    </sd-busy-container>
+  `,
+            }]
+    }], () => [], { close: [{ type: i0.Output, args: ["close"] }], sheetKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "sheetKey", required: true }] }], controls: [{ type: i0.Input, args: [{ isSignal: true, alias: "controls", required: true }] }], config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: true }] }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SdSheetConfigModal, { className: "SdSheetConfigModal", filePath: "packages/angular/src/data/sheet/sd-sheet-config.modal.ts", lineNumber: 180 }); })();