@simplysm/angular 14.0.53 → 14.0.54

package/dist/controls/button/sd-modal-select-button.d.ts

@@ -5,21 +5,20 @@ import type { SelectModalOutputResult } from "../../core/select-modal-output-res
 import * as i0 from "@angular/core";
 /**
  * 모달 선택 컴포넌트가 구현해야 하는 인터페이스
- * SdModalContentDef을 확장하여 selectMode와 selectedItemKeys를 추가한다.
+ * SdModalContentDef을 확장하여 selectMode와 selectedKeys를 추가한다.
  */
-export interface SdSelectModal<T> extends SdModalContentDef<SelectModalOutputResult<T>> {
+export interface SdSelectModal<TKey> extends SdModalContentDef<SelectModalOutputResult<TKey>> {
     selectMode: InputSignal<"single" | "multi" | undefined>;
-    selectedItemKeys: InputSignal<any[]>;
+    selectedKeys: InputSignal<TKey[]>;
 }
 /**
- * 모달 선택 정보 (selectMode/selectedItemKeys를 제외한 inputs)
+ * 모달 선택 정보 (selectMode/selectedKeys를 제외한 inputs)
  */
-export type SdSelectModalInfo<T extends SdSelectModal<any>> = SdModalInfo<T, "selectMode" | "selectedItemKeys">;
-export declare class SdModalSelectButton<T extends object, K, M extends keyof SelectModeValue<K> = keyof SelectModeValue<K>> {
+export type SdSelectModalInfo<T extends SdSelectModal<any>> = SdModalInfo<T, "selectMode" | "selectedKeys">;
+export declare class SdModalSelectButton<K, M extends keyof SelectModeValue<K> = keyof SelectModeValue<K>> {
     private readonly _sdModal;
-    modal: InputSignal<SdSelectModalInfo<SdSelectModal<T>>>;
+    modal: InputSignal<SdSelectModalInfo<SdSelectModal<K>>>;
     value: import("@angular/core").ModelSignal<SelectModeValue<K>[M] | undefined>;
-    selectedItems: import("@angular/core").ModelSignal<T[]>;
     disabled: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
     required: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
     inset: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
@@ -32,7 +31,7 @@ export declare class SdModalSelectButton<T extends object, K, M extends keyof Se
     constructor();
     onEraseClick(): void;
     onSearchClick(event: MouseEvent): Promise<void>;
-    static ɵfac: i0.ɵɵFactoryDeclaration<SdModalSelectButton<any, any, any>, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<SdModalSelectButton<any, any, any>, "sd-modal-select-button", never, { "modal": { "alias": "modal"; "required": true; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "selectedItems": { "alias": "selectedItems"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "inset": { "alias": "inset"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "selectMode": { "alias": "selectMode"; "required": false; "isSignal": true; }; "modalOptions": { "alias": "modalOptions"; "required": false; "isSignal": true; }; "searchIcon": { "alias": "searchIcon"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "selectedItems": "selectedItemsChange"; }, never, ["*"], true, never>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<SdModalSelectButton<any, any>, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SdModalSelectButton<any, any>, "sd-modal-select-button", never, { "modal": { "alias": "modal"; "required": true; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "inset": { "alias": "inset"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "selectMode": { "alias": "selectMode"; "required": false; "isSignal": true; }; "modalOptions": { "alias": "modalOptions"; "required": false; "isSignal": true; }; "searchIcon": { "alias": "searchIcon"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; }, never, ["*"], true, never>;
 }
 //# sourceMappingURL=sd-modal-select-button.d.ts.map

package/dist/controls/button/sd-modal-select-button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"sd-modal-select-button.d.ts","sourceRoot":"","sources":["../../../src/controls/button/sd-modal-select-button.ts"],"names":[],"mappings":"AAAA,OAAO,EAQL,KAAK,WAAW,EAEjB,MAAM,eAAe,CAAC;AACvB,OAAO,EAEL,KAAK,iBAAiB,EACtB,KAAK,WAAW,EAChB,KAAK,cAAc,EACpB,MAAM,oCAAoC,CAAC;AAC5C,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AAI3D,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,uCAAuC,CAAC;;AAIrF;;;GAGG;AACH,MAAM,WAAW,aAAa,CAAC,CAAC,CAAE,SAAQ,iBAAiB,CAAC,uBAAuB,CAAC,CAAC,CAAC,CAAC;IACrF,UAAU,EAAE,WAAW,CAAC,QAAQ,GAAG,OAAO,GAAG,SAAS,CAAC,CAAC;IACxD,gBAAgB,EAAE,WAAW,CAAC,GAAG,EAAE,CAAC,CAAC;CACtC;AAED;;GAEG;AACH,MAAM,MAAM,iBAAiB,CAAC,CAAC,SAAS,aAAa,CAAC,GAAG,CAAC,IAAI,WAAW,CACvE,CAAC,EACD,YAAY,GAAG,kBAAkB,CAClC,CAAC;AAEF,qBAyGa,mBAAmB,CAC9B,CAAC,SAAS,MAAM,EAChB,CAAC,EACD,CAAC,SAAS,MAAM,eAAe,CAAC,CAAC,CAAC,GAAG,MAAM,eAAe,CAAC,CAAC,CAAC;IAE7D,OAAO,CAAC,QAAQ,CAAC,QAAQ,CAA2B;IAEpD,KAAK,mDAAyD;IAE9D,KAAK,yEAAkC;IACvC,aAAa,2CAAkB;IAE/B,QAAQ,qEAAiD;IACzD,QAAQ,qEAAiD;IACzD,KAAK,qEAAiD;IACtD,IAAI,uCAAwB;IAC5B,UAAU,iBAA2B;IACrC,YAAY,0CAA2B;IAEvC,UAAU,sBAAuB;IAEjC,SAAS,CAAC,QAAQ,CAAC,YAAY,obAAgB;IAE/C,SAAS,0CAKN;;IAYH,YAAY,IAAI,IAAI;IAKd,aAAa,CAAC,KAAK,EAAE,UAAU,GAAG,OAAO,CAAC,IAAI,CAAC;yCA7C1C,mBAAmB;2CAAnB,mBAAmB;CAqE/B"}
+{"version":3,"file":"sd-modal-select-button.d.ts","sourceRoot":"","sources":["../../../src/controls/button/sd-modal-select-button.ts"],"names":[],"mappings":"AAAA,OAAO,EAQL,KAAK,WAAW,EAEjB,MAAM,eAAe,CAAC;AACvB,OAAO,EAEL,KAAK,iBAAiB,EACtB,KAAK,WAAW,EAChB,KAAK,cAAc,EACpB,MAAM,oCAAoC,CAAC;AAC5C,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AAI3D,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,uCAAuC,CAAC;;AAIrF;;;GAGG;AACH,MAAM,WAAW,aAAa,CAAC,IAAI,CAAE,SAAQ,iBAAiB,CAAC,uBAAuB,CAAC,IAAI,CAAC,CAAC;IAC3F,UAAU,EAAE,WAAW,CAAC,QAAQ,GAAG,OAAO,GAAG,SAAS,CAAC,CAAC;IACxD,YAAY,EAAE,WAAW,CAAC,IAAI,EAAE,CAAC,CAAC;CACnC;AAED;;GAEG;AACH,MAAM,MAAM,iBAAiB,CAAC,CAAC,SAAS,aAAa,CAAC,GAAG,CAAC,IAAI,WAAW,CACvE,CAAC,EACD,YAAY,GAAG,cAAc,CAC9B,CAAC;AAEF,qBAyGa,mBAAmB,CAC9B,CAAC,EACD,CAAC,SAAS,MAAM,eAAe,CAAC,CAAC,CAAC,GAAG,MAAM,eAAe,CAAC,CAAC,CAAC;IAE7D,OAAO,CAAC,QAAQ,CAAC,QAAQ,CAA2B;IAEpD,KAAK,mDAAyD;IAE9D,KAAK,yEAAkC;IAEvC,QAAQ,qEAAiD;IACzD,QAAQ,qEAAiD;IACzD,KAAK,qEAAiD;IACtD,IAAI,uCAAwB;IAC5B,UAAU,iBAA2B;IACrC,YAAY,0CAA2B;IAEvC,UAAU,sBAAuB;IAEjC,SAAS,CAAC,QAAQ,CAAC,YAAY,obAAgB;IAE/C,SAAS,0CAKN;;IAYH,YAAY,IAAI,IAAI;IAId,aAAa,CAAC,KAAK,EAAE,UAAU,GAAG,OAAO,CAAC,IAAI,CAAC;yCA1C1C,mBAAmB;2CAAnB,mBAAmB;CAiE/B"}

package/dist/controls/button/sd-modal-select-button.js

@@ -35,7 +35,6 @@ export class SdModalSelectButton {
     _sdModal = inject(SdModalProvider);
     modal = input.required(...(ngDevMode ? [{ debugName: "modal" }] : /* istanbul ignore next */ []));
     value = model(...(ngDevMode ? [undefined, { debugName: "value" }] : /* istanbul ignore next */ []));
-    selectedItems = model([], ...(ngDevMode ? [{ debugName: "selectedItems" }] : /* istanbul ignore next */ []));
     disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     required = input(false, { ...(ngDevMode ? { debugName: "required" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     inset = input(false, { ...(ngDevMode ? { debugName: "inset" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
@@ -66,7 +65,6 @@ export class SdModalSelectButton {
     }
     onEraseClick() {
         this.value.set((this.selectMode() === "multi" ? [] : undefined));
-        this.selectedItems.set([]);
     }
     async onSearchClick(event) {
         event.preventDefault();
@@ -76,22 +74,21 @@ export class SdModalSelectButton {
             ...modal,
             inputs: {
                 selectMode: this.selectMode(),
-                selectedItemKeys: (this.selectMode() === "multi"
+                selectedKeys: (this.selectMode() === "multi"
                     ? (this.value() ?? [])
                     : [this.value()]).filterExists(),
                 ...modal.inputs,
             },
         });
         if (result) {
-            const newValue = this.selectMode() === "multi" ? result.selectedItemKeys : result.selectedItemKeys[0];
+            const newValue = this.selectMode() === "multi" ? result.selectedKeys : result.selectedKeys[0];
             this.value.set(newValue);
-            this.selectedItems.set(result.selectedItems);
         }
     }
     static ɵfac = function SdModalSelectButton_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || SdModalSelectButton)(); };
     static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: SdModalSelectButton, selectors: [["sd-modal-select-button"]], hostVars: 3, hostBindings: function SdModalSelectButton_HostBindings(rf, ctx) { if (rf & 2) {
             i0.ɵɵattribute("data-sd-size", ctx.size())("data-sd-inset", ctx.inset())("data-sd-disabled", ctx.disabled());
-        } }, inputs: { modal: [1, "modal"], value: [1, "value"], selectedItems: [1, "selectedItems"], disabled: [1, "disabled"], required: [1, "required"], inset: [1, "inset"], size: [1, "size"], selectMode: [1, "selectMode"], modalOptions: [1, "modalOptions"], searchIcon: [1, "searchIcon"] }, outputs: { value: "valueChange", selectedItems: "selectedItemsChange" }, ngContentSelectors: _c0, decls: 5, vars: 2, consts: [[1, "_content"], [1, "_button"], ["data-sd-eraser", "", 3, "theme"], [3, "inset"], ["data-sd-eraser", "", 3, "click", "theme"], [3, "svg"], [3, "click", "inset"]], template: function SdModalSelectButton_Template(rf, ctx) { if (rf & 1) {
+        } }, inputs: { modal: [1, "modal"], value: [1, "value"], disabled: [1, "disabled"], required: [1, "required"], inset: [1, "inset"], size: [1, "size"], selectMode: [1, "selectMode"], modalOptions: [1, "modalOptions"], searchIcon: [1, "searchIcon"] }, outputs: { value: "valueChange" }, ngContentSelectors: _c0, decls: 5, vars: 2, consts: [[1, "_content"], [1, "_button"], ["data-sd-eraser", "", 3, "theme"], [3, "inset"], ["data-sd-eraser", "", 3, "click", "theme"], [3, "svg"], [3, "click", "inset"]], template: function SdModalSelectButton_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵprojectionDef();
             i0.ɵɵelementStart(0, "div", 0);
             i0.ɵɵprojection(1);
@@ -130,5 +127,5 @@ export class SdModalSelectButton {
                     "[attr.data-sd-inset]": "inset()",
                     "[attr.data-sd-disabled]": "disabled()",
                 }, styles: ["sd-modal-select-button {\n  display: flex;\n  flex-direction: row;\n  gap: var(--gap-sm);\n  position: relative;\n  width: 100%;\n  min-width: 3em;\n  border: 1px solid var(--trans-light);\n  border-radius: var(--border-radius-default);\n  overflow: hidden;\n}\nsd-modal-select-button > ._content {\n  flex: 1;\n  padding: var(--gap-sm) var(--gap-default);\n}\nsd-modal-select-button > ._button {\n  display: flex;\n  flex-wrap: nowrap;\n  flex-direction: row;\n}\n@supports not (appearance: auto) {\n  sd-modal-select-button > ._button.gap-xxs {\n    gap: 0;\n  }\n  sd-modal-select-button > ._button.gap-xxs > * + * {\n    margin-left: var(--gap-xxs);\n  }\n  sd-modal-select-button > ._button.gap-xs {\n    gap: 0;\n  }\n  sd-modal-select-button > ._button.gap-xs > * + * {\n    margin-left: var(--gap-xs);\n  }\n  sd-modal-select-button > ._button.gap-sm {\n    gap: 0;\n  }\n  sd-modal-select-button > ._button.gap-sm > * + * {\n    margin-left: var(--gap-sm);\n  }\n  sd-modal-select-button > ._button.gap-default {\n    gap: 0;\n  }\n  sd-modal-select-button > ._button.gap-default > * + * {\n    margin-left: var(--gap-default);\n  }\n  sd-modal-select-button > ._button.gap-lg {\n    gap: 0;\n  }\n  sd-modal-select-button > ._button.gap-lg > * + * {\n    margin-left: var(--gap-lg);\n  }\n  sd-modal-select-button > ._button.gap-xl {\n    gap: 0;\n  }\n  sd-modal-select-button > ._button.gap-xl > * + * {\n    margin-left: var(--gap-xl);\n  }\n  sd-modal-select-button > ._button.gap-xxl {\n    gap: 0;\n  }\n  sd-modal-select-button > ._button.gap-xxl > * + * {\n    margin-left: var(--gap-xxl);\n  }\n  sd-modal-select-button > ._button.gap-0 {\n    gap: 0;\n  }\n  sd-modal-select-button > ._button.gap-0 > * + * {\n    margin-left: var(--gap-0);\n  }\n  sd-modal-select-button > ._button.gap-auto {\n    gap: 0;\n  }\n  sd-modal-select-button > ._button.gap-auto > * + * {\n    margin-left: var(--gap-auto);\n  }\n}\nsd-modal-select-button > ._button > sd-anchor {\n  padding: var(--gap-sm) !important;\n}\nsd-modal-select-button > ._button > sd-button > button {\n  border-left: 1px solid var(--trans-lighter) !important;\n  padding: var(--gap-sm) !important;\n  height: 100%;\n}\nsd-modal-select-button[data-sd-inset=true] {\n  border-radius: 0;\n  border: none;\n}\nsd-modal-select-button[data-sd-size=sm] > ._content {\n  padding: var(--gap-xs) var(--gap-default);\n}\nsd-modal-select-button[data-sd-size=sm] > ._button > sd-anchor {\n  padding: var(--gap-xs) var(--gap-sm) !important;\n}\nsd-modal-select-button[data-sd-size=sm] > ._button > sd-button > button {\n  padding: var(--gap-xs) var(--gap-sm) !important;\n}\nsd-modal-select-button[data-sd-size=lg] > ._content {\n  padding: var(--gap-default) var(--gap-xl);\n}\nsd-modal-select-button[data-sd-size=lg] > ._button > sd-anchor {\n  padding: var(--gap-default) !important;\n}\nsd-modal-select-button[data-sd-size=lg] > ._button > sd-button > button {\n  padding: var(--gap-default) !important;\n}"] }]
-    }], () => [], { modal: [{ type: i0.Input, args: [{ isSignal: true, alias: "modal", required: true }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], selectedItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedItems", required: false }] }, { type: i0.Output, args: ["selectedItemsChange"] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], inset: [{ type: i0.Input, args: [{ isSignal: true, alias: "inset", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], selectMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectMode", required: false }] }], modalOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "modalOptions", required: false }] }], searchIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchIcon", required: false }] }] }); })();
+    }], () => [], { modal: [{ type: i0.Input, args: [{ isSignal: true, alias: "modal", required: true }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], inset: [{ type: i0.Input, args: [{ isSignal: true, alias: "inset", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], selectMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectMode", required: false }] }], modalOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "modalOptions", required: false }] }], searchIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchIcon", required: false }] }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SdModalSelectButton, { className: "SdModalSelectButton", filePath: "packages/angular/src/controls/button/sd-modal-select-button.ts", lineNumber: 148 }); })();

package/dist/core/select-modal-output-result.d.ts

@@ -1,8 +1,7 @@
 /**
  * 모달 선택 결과
  */
-export interface SelectModalOutputResult<T> {
-    selectedItemKeys: any[];
-    selectedItems: T[];
+export interface SelectModalOutputResult<TKey = any> {
+    selectedKeys: TKey[];
 }
 //# sourceMappingURL=select-modal-output-result.d.ts.map

package/dist/core/select-modal-output-result.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"select-modal-output-result.d.ts","sourceRoot":"","sources":["../../src/core/select-modal-output-result.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,MAAM,WAAW,uBAAuB,CAAC,CAAC;IACxC,gBAAgB,EAAE,GAAG,EAAE,CAAC;IACxB,aAAa,EAAE,CAAC,EAAE,CAAC;CACpB"}
+{"version":3,"file":"select-modal-output-result.d.ts","sourceRoot":"","sources":["../../src/core/select-modal-output-result.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,MAAM,WAAW,uBAAuB,CAAC,IAAI,GAAG,GAAG;IACjD,YAAY,EAAE,IAAI,EAAE,CAAC;CACtB"}

package/dist/core/selection/useSelectionManager.d.ts

@@ -1,19 +1,19 @@
 import { type Signal, type WritableSignal } from "@angular/core";
-export declare function useSelectionManager<T>(options: {
-    displayItems: Signal<T[]>;
-    selectedItems: WritableSignal<T[]>;
+export declare function useSelectionManager<TItem, TKey>(options: {
+    displayItems: Signal<TItem[]>;
+    selectedKeys: WritableSignal<NonNullable<TKey>[]>;
     selectMode: Signal<"single" | "multi" | undefined>;
-    getItemSelectableFn: Signal<((item: T) => boolean | string) | undefined>;
-    trackByFn: Signal<(item: T, index: number) => unknown>;
+    getItemSelectableFn: Signal<((item: TItem) => boolean | string) | undefined>;
+    trackByFn: Signal<(item: TItem, index: number) => TKey>;
 }): {
     hasSelectable: Signal<boolean>;
     isAllSelected: Signal<boolean>;
-    getSelectable(item: T): true | string | undefined;
-    getCanChangeFn(item: T): () => boolean;
-    select(item: T): void;
-    deselect(item: T): void;
-    toggle(item: T): void;
+    getSelectable(item: TItem): true | string | undefined;
+    getCanChangeFn(item: TItem): () => boolean;
+    select(item: TItem): void;
+    deselect(item: TItem): void;
+    toggle(item: TItem): void;
     toggleAll(): void;
-    isSelected(item: T): boolean;
+    isSelected(item: TItem): boolean;
 };
 //# sourceMappingURL=useSelectionManager.d.ts.map

package/dist/core/selection/useSelectionManager.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useSelectionManager.d.ts","sourceRoot":"","sources":["../../../src/core/selection/useSelectionManager.ts"],"names":[],"mappings":"AAAA,OAAO,EAAY,KAAK,MAAM,EAAE,KAAK,cAAc,EAAE,MAAM,eAAe,CAAC;AAG3E,wBAAgB,mBAAmB,CAAC,CAAC,EAAE,OAAO,EAAE;IAC9C,YAAY,EAAE,MAAM,CAAC,CAAC,EAAE,CAAC,CAAC;IAC1B,aAAa,EAAE,cAAc,CAAC,CAAC,EAAE,CAAC,CAAC;IACnC,UAAU,EAAE,MAAM,CAAC,QAAQ,GAAG,OAAO,GAAG,SAAS,CAAC,CAAC;IACnD,mBAAmB,EAAE,MAAM,CAAC,CAAC,CAAC,IAAI,EAAE,CAAC,KAAK,OAAO,GAAG,MAAM,CAAC,GAAG,SAAS,CAAC,CAAC;IACzE,SAAS,EAAE,MAAM,CAAC,CAAC,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,OAAO,CAAC,CAAC;CACxD,GAAG;IACF,aAAa,EAAE,MAAM,CAAC,OAAO,CAAC,CAAC;IAC/B,aAAa,EAAE,MAAM,CAAC,OAAO,CAAC,CAAC;IAC/B,aAAa,CAAC,IAAI,EAAE,CAAC,GAAG,IAAI,GAAG,MAAM,GAAG,SAAS,CAAC;IAClD,cAAc,CAAC,IAAI,EAAE,CAAC,GAAG,MAAM,OAAO,CAAC;IACvC,MAAM,CAAC,IAAI,EAAE,CAAC,GAAG,IAAI,CAAC;IACtB,QAAQ,CAAC,IAAI,EAAE,CAAC,GAAG,IAAI,CAAC;IACxB,MAAM,CAAC,IAAI,EAAE,CAAC,GAAG,IAAI,CAAC;IACtB,SAAS,IAAI,IAAI,CAAC;IAClB,UAAU,CAAC,IAAI,EAAE,CAAC,GAAG,OAAO,CAAC;CAC9B,CAwIA"}
+{"version":3,"file":"useSelectionManager.d.ts","sourceRoot":"","sources":["../../../src/core/selection/useSelectionManager.ts"],"names":[],"mappings":"AAAA,OAAO,EAAY,KAAK,MAAM,EAAE,KAAK,cAAc,EAAE,MAAM,eAAe,CAAC;AAG3E,wBAAgB,mBAAmB,CAAC,KAAK,EAAE,IAAI,EAAE,OAAO,EAAE;IACxD,YAAY,EAAE,MAAM,CAAC,KAAK,EAAE,CAAC,CAAC;IAC9B,YAAY,EAAE,cAAc,CAAC,WAAW,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;IAClD,UAAU,EAAE,MAAM,CAAC,QAAQ,GAAG,OAAO,GAAG,SAAS,CAAC,CAAC;IACnD,mBAAmB,EAAE,MAAM,CAAC,CAAC,CAAC,IAAI,EAAE,KAAK,KAAK,OAAO,GAAG,MAAM,CAAC,GAAG,SAAS,CAAC,CAAC;IAC7E,SAAS,EAAE,MAAM,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC,CAAC;CACzD,GAAG;IACF,aAAa,EAAE,MAAM,CAAC,OAAO,CAAC,CAAC;IAC/B,aAAa,EAAE,MAAM,CAAC,OAAO,CAAC,CAAC;IAC/B,aAAa,CAAC,IAAI,EAAE,KAAK,GAAG,IAAI,GAAG,MAAM,GAAG,SAAS,CAAC;IACtD,cAAc,CAAC,IAAI,EAAE,KAAK,GAAG,MAAM,OAAO,CAAC;IAC3C,MAAM,CAAC,IAAI,EAAE,KAAK,GAAG,IAAI,CAAC;IAC1B,QAAQ,CAAC,IAAI,EAAE,KAAK,GAAG,IAAI,CAAC;IAC5B,MAAM,CAAC,IAAI,EAAE,KAAK,GAAG,IAAI,CAAC;IAC1B,SAAS,IAAI,IAAI,CAAC;IAClB,UAAU,CAAC,IAAI,EAAE,KAAK,GAAG,OAAO,CAAC;CAClC,CAsIA"}

package/dist/core/selection/useSelectionManager.js

@@ -2,10 +2,17 @@ import { computed } from "@angular/core";
 import { obj } from "@simplysm/core-common";
 export function useSelectionManager(options) {
     const selectableItems = computed(() => {
+        const trackFn = options.trackByFn();
+        const idxMap = new Map();
+        options.displayItems().forEach((it, i) => idxMap.set(it, i));
         const fn = options.getItemSelectableFn();
-        if (fn == null)
-            return options.displayItems();
-        return options.displayItems().filter((item) => fn(item) === true);
+        return options.displayItems().filter((item) => {
+            if (trackFn(item, idxMap.get(item) ?? 0) == null)
+                return false;
+            if (fn == null)
+                return true;
+            return fn(item) === true;
+        });
     }, ...(ngDevMode ? [{ debugName: "selectableItems" }] : /* istanbul ignore next */ []));
     const hasSelectable = computed(() => {
         return options.selectMode() != null;
@@ -15,10 +22,6 @@ export function useSelectionManager(options) {
         options.displayItems().forEach((it, i) => map.set(it, i));
         return map;
     }, ...(ngDevMode ? [{ debugName: "displayItemIndexMap" }] : /* istanbul ignore next */ []));
-    const selectedKeys = computed(() => {
-        const fn = options.trackByFn();
-        return options.selectedItems().map((it, i) => fn(it, i));
-    }, ...(ngDevMode ? [{ debugName: "selectedKeys" }] : /* istanbul ignore next */ []));
     function isKeyEqual(a, b) {
         if (a === b)
             return true;
@@ -32,7 +35,7 @@ export function useSelectionManager(options) {
         const items = selectableItems();
         if (items.length === 0)
             return false;
-        const keys = selectedKeys();
+        const keys = options.selectedKeys();
         const fn = options.trackByFn();
         return items.every((it, i) => {
             const key = fn(it, i);
@@ -43,6 +46,8 @@ export function useSelectionManager(options) {
         const mode = options.selectMode();
         if (mode == null)
             return undefined;
+        if (keyOf(item) == null)
+            return undefined;
         const fn = options.getItemSelectableFn();
         if (fn == null)
             return true;
@@ -65,22 +70,22 @@ export function useSelectionManager(options) {
             return;
         if (getSelectable(item) !== true)
             return;
+        const key = keyOf(item);
+        if (key == null)
+            return;
         if (mode === "single") {
-            options.selectedItems.set([item]);
+            options.selectedKeys.set([key]);
             return;
         }
-        const key = keyOf(item);
-        const fn = options.trackByFn();
-        options.selectedItems.update((arr) => {
-            if (arr.some((it, i) => isKeyEqual(fn(it, i), key)))
+        options.selectedKeys.update((arr) => {
+            if (arr.some((k) => isKeyEqual(k, key)))
                 return arr;
-            return [...arr, item];
+            return [...arr, key];
         });
     }
     function deselect(item) {
         const key = keyOf(item);
-        const fn = options.trackByFn();
-        options.selectedItems.update((arr) => arr.filter((it, i) => !isKeyEqual(fn(it, i), key)));
+        options.selectedKeys.update((arr) => arr.filter((k) => !isKeyEqual(k, key)));
     }
     function toggle(item) {
         if (isSelected(item)) {
@@ -96,25 +101,21 @@ export function useSelectionManager(options) {
         const idxMap = displayItemIndexMap();
         if (isAllSelected()) {
             const keysToRemove = selectable.map((it) => fn(it, idxMap.get(it) ?? 0));
-            options.selectedItems.update((arr) => arr.filter((it, i) => {
-                const k = fn(it, i);
-                return !keysToRemove.some((rk) => isKeyEqual(rk, k));
-            }));
+            options.selectedKeys.update((arr) => arr.filter((k) => !keysToRemove.some((rk) => isKeyEqual(rk, k))));
         }
         else {
-            options.selectedItems.update((arr) => {
-                const existingKeys = arr.map((it, i) => fn(it, i));
-                const toAdd = selectable.filter((it) => {
-                    const k = fn(it, idxMap.get(it) ?? 0);
-                    return !existingKeys.some((ek) => isKeyEqual(ek, k));
-                });
-                return [...arr, ...toAdd];
+            options.selectedKeys.update((arr) => {
+                const newKeys = selectable
+                    .map((it) => fn(it, idxMap.get(it) ?? 0))
+                    .filter((k) => k != null)
+                    .filter((k) => !arr.some((ek) => isKeyEqual(ek, k)));
+                return [...arr, ...newKeys];
             });
         }
     }
     function isSelected(item) {
         const key = keyOf(item);
-        return selectedKeys().some((k) => isKeyEqual(k, key));
+        return options.selectedKeys().some((k) => isKeyEqual(k, key));
     }
     return {
         hasSelectable,

package/dist/data/crud/sd-base-container.d.ts

@@ -0,0 +1,21 @@
+import { TemplateRef } from "@angular/core";
+import type { SdViewType } from "../../core/routing/injectViewTypeSignal";
+import * as i0 from "@angular/core";
+export declare class SdBaseContainer {
+    private readonly _sdSharedData;
+    private readonly _sdToast;
+    viewTitle: import("@angular/core").Signal<string>;
+    ready: import("@angular/core").ModelSignal<boolean>;
+    initialized: import("@angular/core").InputSignal<boolean>;
+    busyCount: import("@angular/core").ModelSignal<number>;
+    restricted: import("@angular/core").InputSignal<boolean>;
+    viewType: import("@angular/core").InputSignal<SdViewType>;
+    topbarTplRef: import("@angular/core").Signal<TemplateRef<void> | undefined>;
+    commandTplRef: import("@angular/core").Signal<TemplateRef<void> | undefined>;
+    bottomCommandTplRef: import("@angular/core").Signal<TemplateRef<void> | undefined>;
+    constructor();
+    protected readonly tablerAlertTriangle = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"stroke-width:var(--ng-icon__stroke-width, 2)\"><path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\"></path><path d=\"M12 9v4\"></path><path d=\"M10.363 3.591l-8.106 13.534a1.914 1.914 0 0 0 1.636 2.871h16.214a1.914 1.914 0 0 0 1.636 -2.87l-8.106 -13.536a1.914 1.914 0 0 0 -3.274 0z\"></path><path d=\"M12 16h.01\"></path></svg>";
+    static ɵfac: i0.ɵɵFactoryDeclaration<SdBaseContainer, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SdBaseContainer, "sd-base-container", never, { "ready": { "alias": "ready"; "required": false; "isSignal": true; }; "initialized": { "alias": "initialized"; "required": false; "isSignal": true; }; "busyCount": { "alias": "busyCount"; "required": false; "isSignal": true; }; "restricted": { "alias": "restricted"; "required": false; "isSignal": true; }; "viewType": { "alias": "viewType"; "required": true; "isSignal": true; }; }, { "ready": "readyChange"; "busyCount": "busyCountChange"; }, ["topbarTplRef", "commandTplRef", "bottomCommandTplRef"], ["*"], true, never>;
+}
+//# sourceMappingURL=sd-base-container.d.ts.map

package/dist/data/crud/sd-base-container.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"sd-base-container.d.ts","sourceRoot":"","sources":["../../../src/data/crud/sd-base-container.ts"],"names":[],"mappings":"AAAA,OAAO,EAQL,WAAW,EAGZ,MAAM,eAAe,CAAC;AAOvB,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,yCAAyC,CAAC;;AAK1E,qBAsDa,eAAe;IAC1B,OAAO,CAAC,QAAQ,CAAC,aAAa,CAAgC;IAC9D,OAAO,CAAC,QAAQ,CAAC,QAAQ,CAA2B;IAEpD,SAAS,yCAA2B;IAEpC,KAAK,+CAAgB;IACrB,WAAW,+CAAgB;IAC3B,SAAS,8CAAY;IAErB,UAAU,+CAAgB;IAE1B,QAAQ,kDAAgC;IAExC,YAAY,gEAAgD;IAC5D,aAAa,gEAAiD;IAC9D,mBAAmB,gEAAuD;;IAoB1E,SAAS,CAAC,QAAQ,CAAC,mBAAmB,ifAAuB;yCApClD,eAAe;2CAAf,eAAe;CAqC3B"}

package/dist/data/crud/sd-base-container.js

@@ -0,0 +1,200 @@
+import { ChangeDetectionStrategy, Component, contentChild, effect, inject, input, model, TemplateRef, untracked, ViewEncapsulation, } from "@angular/core";
+import { injectViewTitleSignal } from "../../core/routing/injectViewTitleSignal";
+import { SdBusyContainer } from "../../core/busy/sd-busy-container";
+import { SdSharedDataProvider } from "../../core/shared-data/sd-shared-data.provider";
+import { SdToastProvider } from "../../core/toast/sd-toast.provider";
+import { SdTopbar } from "../../layout/topbar/sd-topbar";
+import { SdTopbarContainer } from "../../layout/topbar/sd-topbar-container";
+import { NgIcon } from "@ng-icons/core";
+import { tablerAlertTriangle } from "@ng-icons/tabler-icons";
+import { NgTemplateOutlet } from "@angular/common";
+import * as i0 from "@angular/core";
+const _c0 = ["topbarTpl"];
+const _c1 = ["commandTpl"];
+const _c2 = ["bottomCommandTpl"];
+const _c3 = ["*"];
+function SdBaseContainer_Conditional_1_Conditional_0_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 2);
+    i0.ɵɵelement(1, "br")(2, "ng-icon", 4)(3, "br")(4, "br");
+    i0.ɵɵtext(5);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance(2);
+    i0.ɵɵproperty("svg", ctx_r0.tablerAlertTriangle)("size", "5rem");
+    i0.ɵɵadvance(3);
+    i0.ɵɵtextInterpolate1(" '", ctx_r0.viewTitle(), "'\uC5D0 \uB300\uD55C \uC0AC\uC6A9\uAD8C\uD55C\uC774 \uC5C6\uC2B5\uB2C8\uB2E4. \uC2DC\uC2A4\uD15C \uAD00\uB9AC\uC790\uC5D0\uAC8C \uBB38\uC758\uD558\uC138\uC694. ");
+} }
+function SdBaseContainer_Conditional_1_Conditional_1_ng_template_4_Template(rf, ctx) { }
+function SdBaseContainer_Conditional_1_Conditional_1_ng_template_5_Template(rf, ctx) { }
+function SdBaseContainer_Conditional_1_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "sd-topbar-container")(1, "sd-topbar")(2, "h4");
+    i0.ɵɵtext(3);
+    i0.ɵɵelementEnd();
+    i0.ɵɵtemplate(4, SdBaseContainer_Conditional_1_Conditional_1_ng_template_4_Template, 0, 0, "ng-template", 3);
+    i0.ɵɵelementEnd();
+    i0.ɵɵtemplate(5, SdBaseContainer_Conditional_1_Conditional_1_ng_template_5_Template, 0, 0, "ng-template", 3);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext(2);
+    const content_r2 = i0.ɵɵreference(3);
+    i0.ɵɵadvance(3);
+    i0.ɵɵtextInterpolate(ctx_r0.viewTitle());
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngTemplateOutlet", ctx_r0.topbarTplRef());
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngTemplateOutlet", content_r2);
+} }
+function SdBaseContainer_Conditional_1_Conditional_2_ng_template_0_Template(rf, ctx) { }
+function SdBaseContainer_Conditional_1_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵtemplate(0, SdBaseContainer_Conditional_1_Conditional_2_ng_template_0_Template, 0, 0, "ng-template", 3);
+} if (rf & 2) {
+    i0.ɵɵnextContext(2);
+    const content_r2 = i0.ɵɵreference(3);
+    i0.ɵɵproperty("ngTemplateOutlet", content_r2);
+} }
+function SdBaseContainer_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵconditionalCreate(0, SdBaseContainer_Conditional_1_Conditional_0_Template, 6, 3, "div", 2)(1, SdBaseContainer_Conditional_1_Conditional_1_Template, 6, 3, "sd-topbar-container")(2, SdBaseContainer_Conditional_1_Conditional_2_Template, 1, 1, null, 3);
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext();
+    i0.ɵɵconditional(ctx_r0.restricted() ? 0 : ctx_r0.viewType() === "page" ? 1 : 2);
+} }
+function SdBaseContainer_ng_template_2_Conditional_1_ng_template_1_Template(rf, ctx) { }
+function SdBaseContainer_ng_template_2_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 6);
+    i0.ɵɵtemplate(1, SdBaseContainer_ng_template_2_Conditional_1_ng_template_1_Template, 0, 0, "ng-template", 3);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngTemplateOutlet", ctx_r0.commandTplRef());
+} }
+function SdBaseContainer_ng_template_2_Conditional_4_ng_template_1_Template(rf, ctx) { }
+function SdBaseContainer_ng_template_2_Conditional_4_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 8);
+    i0.ɵɵtemplate(1, SdBaseContainer_ng_template_2_Conditional_4_ng_template_1_Template, 0, 0, "ng-template", 3);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngTemplateOutlet", ctx_r0.bottomCommandTplRef());
+} }
+function SdBaseContainer_ng_template_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 5);
+    i0.ɵɵconditionalCreate(1, SdBaseContainer_ng_template_2_Conditional_1_Template, 2, 1, "div", 6);
+    i0.ɵɵelementStart(2, "div", 7);
+    i0.ɵɵprojection(3);
+    i0.ɵɵelementEnd();
+    i0.ɵɵconditionalCreate(4, SdBaseContainer_ng_template_2_Conditional_4_Template, 2, 1, "div", 8);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext();
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r0.commandTplRef() ? 1 : -1);
+    i0.ɵɵadvance(3);
+    i0.ɵɵconditional(ctx_r0.bottomCommandTplRef() ? 4 : -1);
+} }
+export class SdBaseContainer {
+    _sdSharedData = inject(SdSharedDataProvider);
+    _sdToast = inject(SdToastProvider);
+    viewTitle = injectViewTitleSignal();
+    ready = model(false, ...(ngDevMode ? [{ debugName: "ready" }] : /* istanbul ignore next */ []));
+    initialized = input(false, ...(ngDevMode ? [{ debugName: "initialized" }] : /* istanbul ignore next */ []));
+    busyCount = model(0, ...(ngDevMode ? [{ debugName: "busyCount" }] : /* istanbul ignore next */ []));
+    restricted = input(false, ...(ngDevMode ? [{ debugName: "restricted" }] : /* istanbul ignore next */ []));
+    viewType = input.required(...(ngDevMode ? [{ debugName: "viewType" }] : /* istanbul ignore next */ []));
+    topbarTplRef = contentChild("topbarTpl", ...(ngDevMode ? [{ debugName: "topbarTplRef" }] : /* istanbul ignore next */ []));
+    commandTplRef = contentChild("commandTpl", ...(ngDevMode ? [{ debugName: "commandTplRef" }] : /* istanbul ignore next */ []));
+    bottomCommandTplRef = contentChild("bottomCommandTpl", ...(ngDevMode ? [{ debugName: "bottomCommandTplRef" }] : /* istanbul ignore next */ []));
+    constructor() {
+        effect(() => {
+            if (this.restricted()) {
+                this.ready.set(true);
+                return;
+            }
+            void untracked(async () => {
+                this.busyCount.update((v) => v + 1);
+                await this._sdToast.try(async () => {
+                    await this._sdSharedData.wait();
+                });
+                this.busyCount.update((v) => v - 1);
+                this.ready.set(true);
+            });
+        });
+    }
+    tablerAlertTriangle = tablerAlertTriangle;
+    static ɵfac = function SdBaseContainer_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || SdBaseContainer)(); };
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: SdBaseContainer, selectors: [["sd-base-container"]], contentQueries: function SdBaseContainer_ContentQueries(rf, ctx, dirIndex) { if (rf & 1) {
+            i0.ɵɵcontentQuerySignal(dirIndex, ctx.topbarTplRef, _c0, 5)(dirIndex, ctx.commandTplRef, _c1, 5)(dirIndex, ctx.bottomCommandTplRef, _c2, 5);
+        } if (rf & 2) {
+            i0.ɵɵqueryAdvance(3);
+        } }, inputs: { ready: [1, "ready"], initialized: [1, "initialized"], busyCount: [1, "busyCount"], restricted: [1, "restricted"], viewType: [1, "viewType"] }, outputs: { ready: "readyChange", busyCount: "busyCountChange" }, ngContentSelectors: _c3, decls: 4, vars: 2, consts: [["content", ""], [3, "busy"], [1, "fill", "tx-theme-gray-light", "p-xxl", "tx-center"], [3, "ngTemplateOutlet"], [3, "svg", "size"], [1, "flex-column", "fill"], [1, "p-default", "flex-row", "gap-default", "bdb", "bdb-theme-gray-lightest"], [1, "flex-fill"], [1, "p-sm-default", "flex-row", "main-align-end", "gap-sm", "bdt", "bdt-theme-gray-lightest"]], template: function SdBaseContainer_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵprojectionDef();
+            i0.ɵɵelementStart(0, "sd-busy-container", 1);
+            i0.ɵɵconditionalCreate(1, SdBaseContainer_Conditional_1_Template, 3, 1);
+            i0.ɵɵelementEnd();
+            i0.ɵɵtemplate(2, SdBaseContainer_ng_template_2_Template, 5, 2, "ng-template", null, 0, i0.ɵɵtemplateRefExtractor);
+        } if (rf & 2) {
+            i0.ɵɵproperty("busy", ctx.initialized() && ctx.busyCount() > 0);
+            i0.ɵɵadvance();
+            i0.ɵɵconditional(ctx.initialized() ? 1 : -1);
+        } }, dependencies: [SdBusyContainer, NgIcon, SdTopbarContainer, NgTemplateOutlet, SdTopbar], encapsulation: 2, changeDetection: 0 });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SdBaseContainer, [{
+        type: Component,
+        args: [{
+                selector: "sd-base-container",
+                changeDetection: ChangeDetectionStrategy.OnPush,
+                encapsulation: ViewEncapsulation.None,
+                standalone: true,
+                imports: [SdBusyContainer, NgIcon, SdTopbarContainer, NgTemplateOutlet, SdTopbar],
+                template: `
+    <sd-busy-container [busy]="initialized() && busyCount() > 0">
+      @if (initialized()) {
+        @if (restricted()) {
+          <div class="fill tx-theme-gray-light p-xxl tx-center">
+            <br />
+            <ng-icon [svg]="tablerAlertTriangle" [size]="'5rem'" />
+            <br />
+            <br />
+            '{{ viewTitle() }}'에 대한 사용권한이 없습니다. 시스템 관리자에게 문의하세요.
+          </div>
+        } @else if (viewType() === "page") {
+          <sd-topbar-container>
+            <sd-topbar>
+              <h4>{{ viewTitle() }}</h4>
+
+              <ng-template [ngTemplateOutlet]="topbarTplRef()" />
+            </sd-topbar>
+
+            <ng-template [ngTemplateOutlet]="content" />
+          </sd-topbar-container>
+        } @else {
+          <ng-template [ngTemplateOutlet]="content" />
+        }
+      }
+    </sd-busy-container>
+
+    <ng-template #content>
+      <div class="flex-column fill">
+        @if (commandTplRef()) {
+          <div class="p-default flex-row gap-default bdb bdb-theme-gray-lightest">
+            <ng-template [ngTemplateOutlet]="commandTplRef()" />
+          </div>
+        }
+
+        <div class="flex-fill">
+          <ng-content />
+        </div>
+
+        @if (bottomCommandTplRef()) {
+          <div class="p-sm-default flex-row main-align-end gap-sm bdt bdt-theme-gray-lightest">
+            <ng-template [ngTemplateOutlet]="bottomCommandTplRef()" />
+          </div>
+        }
+      </div>
+    </ng-template>
+  `,
+            }]
+    }], () => [], { ready: [{ type: i0.Input, args: [{ isSignal: true, alias: "ready", required: false }] }, { type: i0.Output, args: ["readyChange"] }], initialized: [{ type: i0.Input, args: [{ isSignal: true, alias: "initialized", required: false }] }], busyCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "busyCount", required: false }] }, { type: i0.Output, args: ["busyCountChange"] }], restricted: [{ type: i0.Input, args: [{ isSignal: true, alias: "restricted", required: false }] }], viewType: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewType", required: true }] }], topbarTplRef: [{ type: i0.ContentChild, args: ["topbarTpl", { isSignal: true }] }], commandTplRef: [{ type: i0.ContentChild, args: ["commandTpl", { isSignal: true }] }], bottomCommandTplRef: [{ type: i0.ContentChild, args: ["bottomCommandTpl", { isSignal: true }] }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SdBaseContainer, { className: "SdBaseContainer", filePath: "packages/angular/src/data/crud/sd-base-container.ts", lineNumber: 78 }); })();

package/dist/data/crud/sd-crud-detail.d.ts

@@ -0,0 +1,22 @@
+import { type TemplateRef } from "@angular/core";
+import { SdForm } from "../../controls/form/sd-form";
+import type { SdViewType } from "../../core/routing/injectViewTypeSignal";
+import * as i0 from "@angular/core";
+import * as i1 from "../../core/commands/sd-command";
+export declare class SdCrudDetail {
+    ready: import("@angular/core").ModelSignal<boolean>;
+    initialized: import("@angular/core").InputSignal<boolean>;
+    busyCount: import("@angular/core").ModelSignal<number>;
+    restricted: import("@angular/core").InputSignal<boolean>;
+    readonly: import("@angular/core").InputSignal<boolean>;
+    viewType: import("@angular/core").InputSignal<SdViewType>;
+    formCtrl: import("@angular/core").Signal<SdForm | undefined>;
+    submit: import("@angular/core").OutputEmitterRef<void>;
+    commandTplRef: import("@angular/core").Signal<TemplateRef<void> | undefined>;
+    bottomCommandTplRef: import("@angular/core").Signal<TemplateRef<void> | undefined>;
+    onSaveButtonClick(): void;
+    protected readonly tablerDeviceFloppy = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"stroke-width:var(--ng-icon__stroke-width, 2)\"><path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\"></path><path d=\"M6 4h10l4 4v10a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2v-12a2 2 0 0 1 2 -2\"></path><path d=\"M12 14m-2 0a2 2 0 1 0 4 0a2 2 0 1 0 -4 0\"></path><path d=\"M14 4l0 4l-6 0l0 -4\"></path></svg>";
+    static ɵfac: i0.ɵɵFactoryDeclaration<SdCrudDetail, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SdCrudDetail, "sd-crud-detail", never, { "ready": { "alias": "ready"; "required": false; "isSignal": true; }; "initialized": { "alias": "initialized"; "required": false; "isSignal": true; }; "busyCount": { "alias": "busyCount"; "required": false; "isSignal": true; }; "restricted": { "alias": "restricted"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "viewType": { "alias": "viewType"; "required": true; "isSignal": true; }; }, { "ready": "readyChange"; "busyCount": "busyCountChange"; "submit": "submit"; }, ["commandTplRef", "bottomCommandTplRef"], ["*"], true, [{ directive: typeof i1.SdCommandDirective; inputs: {}; outputs: { "sdSaveCommand": "sdSaveCommand"; }; }]>;
+}
+//# sourceMappingURL=sd-crud-detail.d.ts.map

package/dist/data/crud/sd-crud-detail.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"sd-crud-detail.d.ts","sourceRoot":"","sources":["../../../src/data/crud/sd-crud-detail.ts"],"names":[],"mappings":"AAAA,OAAO,EAOL,KAAK,WAAW,EAGjB,MAAM,eAAe,CAAC;AAGvB,OAAO,EAAE,MAAM,EAAE,MAAM,6BAA6B,CAAC;AACrD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,yCAAyC,CAAC;;;AAM1E,qBAiFa,YAAY;IACvB,KAAK,+CAAgB;IACrB,WAAW,+CAAgB;IAC3B,SAAS,8CAAY;IACrB,UAAU,+CAAgB;IAC1B,QAAQ,+CAAgB;IACxB,QAAQ,kDAAgC;IAExC,QAAQ,qDAAiC;IAEzC,MAAM,iDAAY;IAElB,aAAa,gEAAiD;IAC9D,mBAAmB,gEAAuD;IAE1E,iBAAiB;IAIjB,SAAS,CAAC,QAAQ,CAAC,kBAAkB,sdAAsB;yCAnBhD,YAAY;2CAAZ,YAAY;CAoBxB"}