@simplysm/angular 14.2.14 → 14.2.18

package/dist/layout/sidebar/sd-sidebar-menu.d.ts

@@ -4,20 +4,40 @@ export declare class SdSidebarMenu {
     menus: import("@angular/core").InputSignal<SdMenu[]>;
     layout: import("@angular/core").InputSignal<"flat" | "accordion" | "accordion-expanded" | undefined>;
     getMenuIsSelectedFn: import("@angular/core").InputSignal<((menu: SdMenu) => boolean) | undefined>;
+    /**
+     * 펼쳐진 메뉴 코드(`codeChain.join(".")`) 목록.
+     *
+     * 미지정(`undefined`)이면 `layout` 이 정하는 기본 펼침 상태를 따름.
+     * 사용자가 토글하거나 호스트가 값을 세팅하면 그 값이 단일 진리원이 되며,
+     * 이후 `menus` 가 다시 계산돼도 상태가 유지됨.
+     */
+    expandedMenuCodes: import("@angular/core").ModelSignal<string[] | undefined>;
     fullPageCode: import("@angular/core").Signal<string>;
     rootLayout: import("@angular/core").Signal<"flat" | "accordion" | "accordion-expanded">;
-    expandInitially: import("@angular/core").Signal<boolean>;
+    private readonly _expandableCodes;
+    private readonly _expandedCodeSet;
+    hasExpandable: import("@angular/core").Signal<boolean>;
+    isAllExpanded: import("@angular/core").Signal<boolean>;
+    isAllCollapsed: import("@angular/core").Signal<boolean>;
+    expandAll(): void;
+    collapseAll(): void;
+    getIsMenuExpanded(menu: SdMenu): boolean;
+    onMenuOpenChange(menu: SdMenu, open: boolean): void;
     getMenuRouterLinkOption(menu: SdMenu): {
         link: string;
         queryParams: Record<string, string> | undefined;
     } | undefined;
     getIsMenuSelected(menu: SdMenu): boolean;
     onMenuClick(menu: SdMenu): void;
+    protected readonly icons: {
+        tablerFoldDown: string;
+        tablerFoldUp: string;
+    };
     protected readonly itemTemplateType: {
         menus: SdMenu[];
         depth: number;
     };
     static ɵfac: i0.ɵɵFactoryDeclaration<SdSidebarMenu, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<SdSidebarMenu, "sd-sidebar-menu", never, { "menus": { "alias": "menus"; "required": false; "isSignal": true; }; "layout": { "alias": "layout"; "required": false; "isSignal": true; }; "getMenuIsSelectedFn": { "alias": "getMenuIsSelectedFn"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SdSidebarMenu, "sd-sidebar-menu", never, { "menus": { "alias": "menus"; "required": false; "isSignal": true; }; "layout": { "alias": "layout"; "required": false; "isSignal": true; }; "getMenuIsSelectedFn": { "alias": "getMenuIsSelectedFn"; "required": false; "isSignal": true; }; "expandedMenuCodes": { "alias": "expandedMenuCodes"; "required": false; "isSignal": true; }; }, { "expandedMenuCodes": "expandedMenuCodesChange"; }, never, never, true, never>;
 }
 //# sourceMappingURL=sd-sidebar-menu.d.ts.map

package/dist/layout/sidebar/sd-sidebar-menu.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"sd-sidebar-menu.d.ts","sourceRoot":"","sources":["../../../src/layout/sidebar/sd-sidebar-menu.ts"],"names":[],"mappings":"AAQA,OAAO,EACL,KAAK,MAAM,EAGZ,MAAM,+BAA+B,CAAC;;AAQvC,qBAkEa,aAAa;IACxB,KAAK,gDAAuB;IAC5B,MAAM,+FAAwD;IAC9D,mBAAmB,8CAAgB,MAAM,KAAK,OAAO,eAAI;IAEzD,YAAY,yCAA8B;IAE1C,UAAU,8EAAsF;IAGhG,eAAe,0CAA8D;IAE7E,uBAAuB,CACrB,IAAI,EAAE,MAAM,GACX;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,WAAW,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,GAAG,SAAS,CAAA;KAAE,GAAG,SAAS;IAIhF,iBAAiB,CAAC,IAAI,EAAE,MAAM,GAAG,OAAO;IAIxC,WAAW,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI;IAM/B,SAAS,CAAC,QAAQ,CAAC,gBAAgB,EAAG;QACpC,KAAK,EAAE,MAAM,EAAE,CAAC;QAChB,KAAK,EAAE,MAAM,CAAC;KACf,CAAC;yCA/BS,aAAa;2CAAb,aAAa;CAgCzB"}
+{"version":3,"file":"sd-sidebar-menu.d.ts","sourceRoot":"","sources":["../../../src/layout/sidebar/sd-sidebar-menu.ts"],"names":[],"mappings":"AASA,OAAO,EACL,KAAK,MAAM,EAGZ,MAAM,+BAA+B,CAAC;;AAUvC,qBAoGa,aAAa;IACxB,KAAK,gDAAuB;IAC5B,MAAM,+FAAwD;IAC9D,mBAAmB,8CAAgB,MAAM,KAAK,OAAO,eAAI;IAEzD;;;;;;OAMG;IACH,iBAAiB,4DAA0C;IAE3D,YAAY,yCAA8B;IAE1C,UAAU,8EAAsF;IAIhG,OAAO,CAAC,QAAQ,CAAC,gBAAgB,CAgB9B;IAGH,OAAO,CAAC,QAAQ,CAAC,gBAAgB,CAK9B;IAEH,aAAa,0CAAsD;IAEnE,aAAa,0CAKV;IAEH,cAAc,0CAKX;IAEH,SAAS,IAAI,IAAI;IAIjB,WAAW,IAAI,IAAI;IAInB,iBAAiB,CAAC,IAAI,EAAE,MAAM,GAAG,OAAO;IAIxC,gBAAgB,CAAC,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,OAAO,GAAG,IAAI;IAWnD,uBAAuB,CACrB,IAAI,EAAE,MAAM,GACX;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,WAAW,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,GAAG,SAAS,CAAA;KAAE,GAAG,SAAS;IAIhF,iBAAiB,CAAC,IAAI,EAAE,MAAM,GAAG,OAAO;IAIxC,WAAW,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI;IAM/B,SAAS,CAAC,QAAQ,CAAC,KAAK;;;MAGtB;IAEF,SAAS,CAAC,QAAQ,CAAC,gBAAgB,EAAG;QACpC,KAAK,EAAE,MAAM,EAAE,CAAC;QAChB,KAAK,EAAE,MAAM,CAAC;KACf,CAAC;yCA7GS,aAAa;2CAAb,aAAa;CA8GzB"}

package/dist/layout/sidebar/sd-sidebar-menu.js

@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, Component, computed, input, ViewEncapsulation, } from "@angular/core";
+import { ChangeDetectionStrategy, Component, computed, input, model, ViewEncapsulation, } from "@angular/core";
 import { injectFullPageCodeSignal } from "../../core/routing/injectFullPageCodeSignal";
 import { getMenuRouterLinkOption as menuRouterLinkOption, getIsMenuSelected as menuIsSelected, } from "../../core/routing/menu-utils";
 import { NgTemplateOutlet } from "@angular/common";
@@ -6,57 +6,81 @@ import { SdTypedTemplate } from "../../core/template/sd-typed-template";
 import { SdRouterLink } from "../../core/routing/sd-router-link";
 import { SdList } from "../../controls/list/sd-list";
 import { SdListItem } from "../../controls/list/sd-list-item";
+import { SdAnchor } from "../../controls/button/sd-anchor";
 import { NgIcon } from "@ng-icons/core";
+import { tablerFoldDown, tablerFoldUp } from "@ng-icons/tabler-icons";
 import * as i0 from "@angular/core";
 const _c0 = a0 => ({ menus: a0, depth: 0 });
 const _c1 = (a0, a1) => ({ menus: a0, depth: a1 });
 const _forTrack0 = ($index, $item) => $item.codeChain.join(".");
-function SdSidebarMenu_ng_template_4_Template(rf, ctx) { }
-function SdSidebarMenu_ng_template_5_For_1_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+function SdSidebarMenu_Conditional_4_Template(rf, ctx) { if (rf & 1) {
+    const _r1 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "sd-anchor", 6);
+    i0.ɵɵlistener("click", function SdSidebarMenu_Conditional_4_Template_sd_anchor_click_0_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.expandAll()); });
+    i0.ɵɵelement(1, "ng-icon", 7);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(2, "sd-anchor", 6);
+    i0.ɵɵlistener("click", function SdSidebarMenu_Conditional_4_Template_sd_anchor_click_2_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.collapseAll()); });
+    i0.ɵɵelement(3, "ng-icon", 7);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵproperty("theme", "gray")("disabled", ctx_r1.isAllExpanded());
+    i0.ɵɵattribute("title", "\uC804\uCCB4 \uD3BC\uCE58\uAE30");
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("svg", ctx_r1.icons.tablerFoldDown);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("theme", "gray")("disabled", ctx_r1.isAllCollapsed());
+    i0.ɵɵattribute("title", "\uC804\uCCB4 \uC811\uAE30");
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("svg", ctx_r1.icons.tablerFoldUp);
+} }
+function SdSidebarMenu_ng_template_6_Template(rf, ctx) { }
+function SdSidebarMenu_ng_template_7_For_1_Conditional_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "ng-icon", 7);
 } if (rf & 2) {
-    const menu_r2 = i0.ɵɵnextContext().$implicit;
-    i0.ɵɵproperty("svg", menu_r2.icon);
+    const menu_r4 = i0.ɵɵnextContext().$implicit;
+    i0.ɵɵproperty("svg", menu_r4.icon);
 } }
-function SdSidebarMenu_ng_template_5_For_1_Conditional_3_ng_template_1_Template(rf, ctx) { }
-function SdSidebarMenu_ng_template_5_For_1_Conditional_3_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "sd-list", 8);
-    i0.ɵɵtemplate(1, SdSidebarMenu_ng_template_5_For_1_Conditional_3_ng_template_1_Template, 0, 0, "ng-template", 9);
+function SdSidebarMenu_ng_template_7_For_1_Conditional_3_ng_template_1_Template(rf, ctx) { }
+function SdSidebarMenu_ng_template_7_For_1_Conditional_3_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "sd-list", 10);
+    i0.ɵɵtemplate(1, SdSidebarMenu_ng_template_7_For_1_Conditional_3_ng_template_1_Template, 0, 0, "ng-template", 11);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const menu_r2 = i0.ɵɵnextContext().$implicit;
-    const depth_r4 = i0.ɵɵnextContext().depth;
+    const menu_r4 = i0.ɵɵnextContext().$implicit;
+    const depth_r5 = i0.ɵɵnextContext().depth;
     i0.ɵɵnextContext();
-    const itemTpl_r5 = i0.ɵɵreference(6);
+    const itemTpl_r6 = i0.ɵɵreference(8);
     i0.ɵɵproperty("inset", true);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngTemplateOutlet", itemTpl_r5)("ngTemplateOutletInjector", "outlet")("ngTemplateOutletContext", i0.ɵɵpureFunction2(4, _c1, menu_r2.children, depth_r4 + 1));
+    i0.ɵɵproperty("ngTemplateOutlet", itemTpl_r6)("ngTemplateOutletInjector", "outlet")("ngTemplateOutletContext", i0.ɵɵpureFunction2(4, _c1, menu_r4.children, depth_r5 + 1));
 } }
-function SdSidebarMenu_ng_template_5_For_1_Template(rf, ctx) { if (rf & 1) {
-    const _r1 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "sd-list-item", 6);
-    i0.ɵɵlistener("click", function SdSidebarMenu_ng_template_5_For_1_Template_sd_list_item_click_0_listener() { const menu_r2 = i0.ɵɵrestoreView(_r1).$implicit; const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.onMenuClick(menu_r2)); });
-    i0.ɵɵconditionalCreate(1, SdSidebarMenu_ng_template_5_For_1_Conditional_1_Template, 1, 1, "ng-icon", 7);
+function SdSidebarMenu_ng_template_7_For_1_Template(rf, ctx) { if (rf & 1) {
+    const _r3 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "sd-list-item", 9);
+    i0.ɵɵlistener("click", function SdSidebarMenu_ng_template_7_For_1_Template_sd_list_item_click_0_listener() { const menu_r4 = i0.ɵɵrestoreView(_r3).$implicit; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.onMenuClick(menu_r4)); })("openChange", function SdSidebarMenu_ng_template_7_For_1_Template_sd_list_item_openChange_0_listener($event) { const menu_r4 = i0.ɵɵrestoreView(_r3).$implicit; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.onMenuOpenChange(menu_r4, $event)); });
+    i0.ɵɵconditionalCreate(1, SdSidebarMenu_ng_template_7_For_1_Conditional_1_Template, 1, 1, "ng-icon", 7);
     i0.ɵɵtext(2);
-    i0.ɵɵconditionalCreate(3, SdSidebarMenu_ng_template_5_For_1_Conditional_3_Template, 2, 7, "sd-list", 8);
+    i0.ɵɵconditionalCreate(3, SdSidebarMenu_ng_template_7_For_1_Conditional_3_Template, 2, 7, "sd-list", 10);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const menu_r2 = ctx.$implicit;
-    const depth_r4 = i0.ɵɵnextContext().depth;
-    const ctx_r2 = i0.ɵɵnextContext();
-    i0.ɵɵproperty("sdRouterLink", ctx_r2.getMenuRouterLinkOption(menu_r2))("selected", ctx_r2.getIsMenuSelected(menu_r2))("layout", depth_r4 === 0 && ctx_r2.rootLayout() === "flat" ? "flat" : "accordion")("open", ctx_r2.expandInitially() && menu_r2.children != null);
+    const menu_r4 = ctx.$implicit;
+    const depth_r5 = i0.ɵɵnextContext().depth;
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵproperty("sdRouterLink", ctx_r1.getMenuRouterLinkOption(menu_r4))("selected", ctx_r1.getIsMenuSelected(menu_r4))("layout", depth_r5 === 0 && ctx_r1.rootLayout() === "flat" ? "flat" : "accordion")("open", ctx_r1.getIsMenuExpanded(menu_r4));
     i0.ɵɵadvance();
-    i0.ɵɵconditional(menu_r2.icon ? 1 : -1);
+    i0.ɵɵconditional(menu_r4.icon ? 1 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate1(" ", menu_r2.title, " ");
+    i0.ɵɵtextInterpolate1(" ", menu_r4.title, " ");
     i0.ɵɵadvance();
-    i0.ɵɵconditional(menu_r2.children ? 3 : -1);
+    i0.ɵɵconditional(menu_r4.children ? 3 : -1);
 } }
-function SdSidebarMenu_ng_template_5_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵrepeaterCreate(0, SdSidebarMenu_ng_template_5_For_1_Template, 4, 7, "sd-list-item", 5, _forTrack0);
+function SdSidebarMenu_ng_template_7_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵrepeaterCreate(0, SdSidebarMenu_ng_template_7_For_1_Template, 4, 7, "sd-list-item", 8, _forTrack0);
 } if (rf & 2) {
-    const currMenus_r6 = ctx.menus;
-    i0.ɵɵrepeater(currMenus_r6);
+    const currMenus_r7 = ctx.menus;
+    i0.ɵɵrepeater(currMenus_r7);
 } }
 export class SdSidebarMenu {
     menus = input([], /* @ts-ignore */
@@ -65,12 +89,82 @@ export class SdSidebarMenu {
     ...(ngDevMode ? [undefined, { debugName: "layout" }] : /* istanbul ignore next */ []));
     getMenuIsSelectedFn = input(/* @ts-ignore */
     ...(ngDevMode ? [undefined, { debugName: "getMenuIsSelectedFn" }] : /* istanbul ignore next */ []));
+    /**
+     * 펼쳐진 메뉴 코드(`codeChain.join(".")`) 목록.
+     *
+     * 미지정(`undefined`)이면 `layout` 이 정하는 기본 펼침 상태를 따름.
+     * 사용자가 토글하거나 호스트가 값을 세팅하면 그 값이 단일 진리원이 되며,
+     * 이후 `menus` 가 다시 계산돼도 상태가 유지됨.
+     */
+    expandedMenuCodes = model(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "expandedMenuCodes" }] : /* istanbul ignore next */ []));
     fullPageCode = injectFullPageCodeSignal();
     rootLayout = computed(() => this.layout() ?? (this.menus().length <= 3 ? "flat" : "accordion"), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "rootLayout" }] : /* istanbul ignore next */ []));
-    // accordion-expanded: 모든 깊이 항목을 펼친 채로 시작(이후 클릭 토글). 그 외는 접힘 시작.
-    expandInitially = computed(() => this.rootLayout() === "accordion-expanded", /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "expandInitially" }] : /* istanbul ignore next */ []));
+    // 접기/펼치기가 가능한 메뉴 코드.
+    // flat 로 렌더되는 depth-0 그룹은 항상 펼쳐진 구조라 대상에서 제외(SdListItem.childrenOpen).
+    _expandableCodes = computed(() => {
+        const rootIsFlat = this.rootLayout() === "flat";
+        const result = [];
+        function walk(menus, depth) {
+            for (const menu of menus) {
+                if (menu.children == null)
+                    continue;
+                if (!(rootIsFlat && depth === 0)) {
+                    result.push(menu.codeChain.join("."));
+                }
+                walk(menu.children, depth + 1);
+            }
+        }
+        walk(this.menus(), 0);
+        return result;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_expandableCodes" }] : /* istanbul ignore next */ []));
+    // accordion-expanded: 하위 보유 메뉴 전체를 펼친 채로 시작. 그 외는 접힘 시작.
+    _expandedCodeSet = computed(() => {
+        const codes = this.expandedMenuCodes() ??
+            (this.rootLayout() === "accordion-expanded" ? this._expandableCodes() : []);
+        return new Set(codes);
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_expandedCodeSet" }] : /* istanbul ignore next */ []));
+    hasExpandable = computed(() => this._expandableCodes().length > 0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hasExpandable" }] : /* istanbul ignore next */ []));
+    isAllExpanded = computed(() => {
+        const codes = this._expandableCodes();
+        if (codes.length === 0)
+            return false;
+        const expandedSet = this._expandedCodeSet();
+        return codes.every((code) => expandedSet.has(code));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isAllExpanded" }] : /* istanbul ignore next */ []));
+    isAllCollapsed = computed(() => {
+        const codes = this._expandableCodes();
+        if (codes.length === 0)
+            return true;
+        const expandedSet = this._expandedCodeSet();
+        return codes.every((code) => !expandedSet.has(code));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isAllCollapsed" }] : /* istanbul ignore next */ []));
+    expandAll() {
+        this.expandedMenuCodes.set([...this._expandableCodes()]);
+    }
+    collapseAll() {
+        this.expandedMenuCodes.set([]);
+    }
+    getIsMenuExpanded(menu) {
+        return this._expandedCodeSet().has(menu.codeChain.join("."));
+    }
+    onMenuOpenChange(menu, open) {
+        const code = menu.codeChain.join(".");
+        const nextSet = new Set(this._expandedCodeSet());
+        if (open) {
+            nextSet.add(code);
+        }
+        else {
+            nextSet.delete(code);
+        }
+        this.expandedMenuCodes.set([...nextSet]);
+    }
     getMenuRouterLinkOption(menu) {
         return menuRouterLinkOption(menu);
     }
@@ -82,35 +176,77 @@ export class SdSidebarMenu {
             window.open(menu.url, "_blank");
         }
     }
+    icons = {
+        tablerFoldDown,
+        tablerFoldUp,
+    };
     itemTemplateType;
     static ɵfac = function SdSidebarMenu_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || SdSidebarMenu)(); };
     static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: SdSidebarMenu, selectors: [["sd-sidebar-menu"]], hostAttrs: [1, "flex-column", "fill"], hostVars: 1, hostBindings: function SdSidebarMenu_HostBindings(rf, ctx) { if (rf & 2) {
             i0.ɵɵattribute("data-sd-root-layout", ctx.rootLayout());
-        } }, inputs: { menus: [1, "menus"], layout: [1, "layout"], getMenuIsSelectedFn: [1, "getMenuIsSelectedFn"] }, decls: 7, vars: 6, consts: [["itemTpl", ""], [1, "control-header", "p-default"], [1, "flex-fill", 3, "inset"], [3, "ngTemplateOutlet", "ngTemplateOutletContext"], [3, "typed"], [3, "sdRouterLink", "selected", "layout", "open"], [3, "click", "sdRouterLink", "selected", "layout", "open"], [3, "svg"], [3, "inset"], [3, "ngTemplateOutlet", "ngTemplateOutletInjector", "ngTemplateOutletContext"]], template: function SdSidebarMenu_Template(rf, ctx) { if (rf & 1) {
-            i0.ɵɵelementStart(0, "div", 1)(1, "b");
-            i0.ɵɵtext(2, "MENU");
+        } }, inputs: { menus: [1, "menus"], layout: [1, "layout"], getMenuIsSelectedFn: [1, "getMenuIsSelectedFn"], expandedMenuCodes: [1, "expandedMenuCodes"] }, outputs: { expandedMenuCodes: "expandedMenuCodesChange" }, decls: 9, vars: 7, consts: [["itemTpl", ""], [1, "control-header", "p-default", "flex-row"], [1, "flex-fill"], [1, "flex-fill", 3, "inset"], [3, "ngTemplateOutlet", "ngTemplateOutletContext"], [3, "typed"], [3, "click", "theme", "disabled"], [3, "svg"], [3, "sdRouterLink", "selected", "layout", "open"], [3, "click", "openChange", "sdRouterLink", "selected", "layout", "open"], [3, "inset"], [3, "ngTemplateOutlet", "ngTemplateOutletInjector", "ngTemplateOutletContext"]], template: function SdSidebarMenu_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵelementStart(0, "div", 1)(1, "div", 2)(2, "b");
+            i0.ɵɵtext(3, "MENU");
             i0.ɵɵelementEnd()();
-            i0.ɵɵelementStart(3, "sd-list", 2);
-            i0.ɵɵtemplate(4, SdSidebarMenu_ng_template_4_Template, 0, 0, "ng-template", 3);
+            i0.ɵɵconditionalCreate(4, SdSidebarMenu_Conditional_4_Template, 4, 8);
             i0.ɵɵelementEnd();
-            i0.ɵɵtemplate(5, SdSidebarMenu_ng_template_5_Template, 2, 0, "ng-template", 4, 0, i0.ɵɵtemplateRefExtractor);
+            i0.ɵɵelementStart(5, "sd-list", 3);
+            i0.ɵɵtemplate(6, SdSidebarMenu_ng_template_6_Template, 0, 0, "ng-template", 4);
+            i0.ɵɵelementEnd();
+            i0.ɵɵtemplate(7, SdSidebarMenu_ng_template_7_Template, 2, 0, "ng-template", 5, 0, i0.ɵɵtemplateRefExtractor);
         } if (rf & 2) {
-            const itemTpl_r5 = i0.ɵɵreference(6);
-            i0.ɵɵadvance(3);
+            const itemTpl_r6 = i0.ɵɵreference(8);
+            i0.ɵɵadvance(4);
+            i0.ɵɵconditional(ctx.hasExpandable() ? 4 : -1);
+            i0.ɵɵadvance();
             i0.ɵɵproperty("inset", true);
             i0.ɵɵadvance();
-            i0.ɵɵproperty("ngTemplateOutlet", itemTpl_r5)("ngTemplateOutletContext", i0.ɵɵpureFunction1(4, _c0, ctx.menus()));
+            i0.ɵɵproperty("ngTemplateOutlet", itemTpl_r6)("ngTemplateOutletContext", i0.ɵɵpureFunction1(5, _c0, ctx.menus()));
             i0.ɵɵadvance();
             i0.ɵɵproperty("typed", ctx.itemTemplateType);
-        } }, dependencies: [NgTemplateOutlet, SdTypedTemplate, SdRouterLink, SdList, SdListItem, NgIcon], styles: ["sd-sidebar-menu[data-sd-root-layout=flat] > sd-list[data-sd-inset=true] > sd-list-item > sd-collapse > ._content > ._children > sd-list {\n  background-color: transparent;\n}"], encapsulation: 2 });
+        } }, dependencies: [NgTemplateOutlet,
+            SdTypedTemplate,
+            SdRouterLink,
+            SdList,
+            SdListItem,
+            SdAnchor,
+            NgIcon], styles: ["sd-sidebar-menu > .control-header {\n  align-items: center;\n  gap: var(--%NS%sd-gap-xs);\n}\nsd-sidebar-menu[data-sd-root-layout=flat] > sd-list[data-sd-inset=true] > sd-list-item > sd-collapse > ._content > ._children > sd-list {\n  background-color: transparent;\n}"], encapsulation: 2 });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SdSidebarMenu, [{
         type: Component,
-        args: [{ selector: "sd-sidebar-menu", changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, standalone: true, imports: [NgTemplateOutlet, SdTypedTemplate, SdRouterLink, SdList, SdListItem, NgIcon], host: {
+        args: [{ selector: "sd-sidebar-menu", changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, standalone: true, imports: [
+                    NgTemplateOutlet,
+                    SdTypedTemplate,
+                    SdRouterLink,
+                    SdList,
+                    SdListItem,
+                    SdAnchor,
+                    NgIcon,
+                ], host: {
                     "class": "flex-column fill",
                     "[attr.data-sd-root-layout]": "rootLayout()",
                 }, template: `
-    <div class="control-header p-default"><b>MENU</b></div>
+    <div class="control-header p-default flex-row">
+      <div class="flex-fill"><b>MENU</b></div>
+      @if (hasExpandable()) {
+        <sd-anchor
+          [theme]="'gray'"
+          [disabled]="isAllExpanded()"
+          [attr.title]="'전체 펼치기'"
+          (click)="expandAll()"
+        >
+          <ng-icon [svg]="icons.tablerFoldDown" />
+        </sd-anchor>
+        <sd-anchor
+          [theme]="'gray'"
+          [disabled]="isAllCollapsed()"
+          [attr.title]="'전체 접기'"
+          (click)="collapseAll()"
+        >
+          <ng-icon [svg]="icons.tablerFoldUp" />
+        </sd-anchor>
+      }
+    </div>
 
     <sd-list class="flex-fill" [inset]="true">
       <ng-template
@@ -126,7 +262,8 @@ export class SdSidebarMenu {
           (click)="onMenuClick(menu)"
           [selected]="getIsMenuSelected(menu)"
           [layout]="depth === 0 && rootLayout() === 'flat' ? 'flat' : 'accordion'"
-          [open]="expandInitially() && menu.children != null"
+          [open]="getIsMenuExpanded(menu)"
+          (openChange)="onMenuOpenChange(menu, $event)"
         >
           @if (menu.icon) {
             <ng-icon [svg]="menu.icon" />
@@ -147,6 +284,6 @@ export class SdSidebarMenu {
         </sd-list-item>
       }
     </ng-template>
-  `, styles: ["sd-sidebar-menu[data-sd-root-layout=flat] > sd-list[data-sd-inset=true] > sd-list-item > sd-collapse > ._content > ._children > sd-list {\n  background-color: transparent;\n}"] }]
-    }], null, { menus: [{ type: i0.Input, args: [{ isSignal: true, alias: "menus", required: false }] }], layout: [{ type: i0.Input, args: [{ isSignal: true, alias: "layout", required: false }] }], getMenuIsSelectedFn: [{ type: i0.Input, args: [{ isSignal: true, alias: "getMenuIsSelectedFn", required: false }] }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SdSidebarMenu, { className: "SdSidebarMenu", filePath: "packages/angular/src/layout/sidebar/sd-sidebar-menu.ts", lineNumber: 87 }); })();
+  `, styles: ["sd-sidebar-menu > .control-header {\n  align-items: center;\n  gap: var(--sd-gap-xs);\n}\nsd-sidebar-menu[data-sd-root-layout=flat] > sd-list[data-sd-inset=true] > sd-list-item > sd-collapse > ._content > ._children > sd-list {\n  background-color: transparent;\n}"] }]
+    }], null, { menus: [{ type: i0.Input, args: [{ isSignal: true, alias: "menus", required: false }] }], layout: [{ type: i0.Input, args: [{ isSignal: true, alias: "layout", required: false }] }], getMenuIsSelectedFn: [{ type: i0.Input, args: [{ isSignal: true, alias: "getMenuIsSelectedFn", required: false }] }], expandedMenuCodes: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandedMenuCodes", required: false }] }, { type: i0.Output, args: ["expandedMenuCodesChange"] }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SdSidebarMenu, { className: "SdSidebarMenu", filePath: "packages/angular/src/layout/sidebar/sd-sidebar-menu.ts", lineNumber: 124 }); })();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@simplysm/angular",
-  "version": "14.2.14",
+  "version": "14.2.18",
   "description": "심플리즘 패키지 - Angular",
   "license": "Apache-2.0",
   "author": "심플리즘",
@@ -39,6 +39,10 @@
     "@angular/service-worker": "^22.1.0",
     "@ng-icons/core": "^34.0.0",
     "@ng-icons/tabler-icons": "^34.0.0",
+    "@simplysm/core-browser": "14.2.18",
+    "@simplysm/core-common": "14.2.18",
+    "@simplysm/service-client": "14.2.18",
+    "@simplysm/service-common": "14.2.18",
     "@tiptap/core": "^3.29.2",
     "@tiptap/extension-color": "^3.29.2",
     "@tiptap/extension-document": "^3.29.2",
@@ -57,11 +61,7 @@
     "html-to-image": "^1.11.13",
     "jspdf": "^4.2.1",
     "rxjs": "^7.8.2",
-    "tabbable": "^6.5.0",
-    "@simplysm/service-client": "14.2.14",
-    "@simplysm/core-browser": "14.2.14",
-    "@simplysm/core-common": "14.2.14",
-    "@simplysm/service-common": "14.2.14"
+    "tabbable": "^6.5.0"
   },
   "devDependencies": {
     "@angular/compiler": "^22.1.0"

package/src/layout/sidebar/sd-sidebar-menu.ts

@@ -3,6 +3,7 @@ import {
   Component,
   computed,
   input,
+  model,
   ViewEncapsulation,
 } from "@angular/core";
 import { injectFullPageCodeSignal } from "../../core/routing/injectFullPageCodeSignal";
@@ -16,20 +17,50 @@ import { SdTypedTemplate } from "../../core/template/sd-typed-template";
 import { SdRouterLink } from "../../core/routing/sd-router-link";
 import { SdList } from "../../controls/list/sd-list";
 import { SdListItem } from "../../controls/list/sd-list-item";
+import { SdAnchor } from "../../controls/button/sd-anchor";
 import { NgIcon } from "@ng-icons/core";
+import { tablerFoldDown, tablerFoldUp } from "@ng-icons/tabler-icons";
 
 @Component({
   selector: "sd-sidebar-menu",
   changeDetection: ChangeDetectionStrategy.OnPush,
   encapsulation: ViewEncapsulation.None,
   standalone: true,
-  imports: [NgTemplateOutlet, SdTypedTemplate, SdRouterLink, SdList, SdListItem, NgIcon],
+  imports: [
+    NgTemplateOutlet,
+    SdTypedTemplate,
+    SdRouterLink,
+    SdList,
+    SdListItem,
+    SdAnchor,
+    NgIcon,
+  ],
   host: {
     "class": "flex-column fill",
     "[attr.data-sd-root-layout]": "rootLayout()",
   },
   template: `
-    <div class="control-header p-default"><b>MENU</b></div>
+    <div class="control-header p-default flex-row">
+      <div class="flex-fill"><b>MENU</b></div>
+      @if (hasExpandable()) {
+        <sd-anchor
+          [theme]="'gray'"
+          [disabled]="isAllExpanded()"
+          [attr.title]="'전체 펼치기'"
+          (click)="expandAll()"
+        >
+          <ng-icon [svg]="icons.tablerFoldDown" />
+        </sd-anchor>
+        <sd-anchor
+          [theme]="'gray'"
+          [disabled]="isAllCollapsed()"
+          [attr.title]="'전체 접기'"
+          (click)="collapseAll()"
+        >
+          <ng-icon [svg]="icons.tablerFoldUp" />
+        </sd-anchor>
+      }
+    </div>
 
     <sd-list class="flex-fill" [inset]="true">
       <ng-template
@@ -45,7 +76,8 @@ import { NgIcon } from "@ng-icons/core";
           (click)="onMenuClick(menu)"
           [selected]="getIsMenuSelected(menu)"
           [layout]="depth === 0 && rootLayout() === 'flat' ? 'flat' : 'accordion'"
-          [open]="expandInitially() && menu.children != null"
+          [open]="getIsMenuExpanded(menu)"
+          (openChange)="onMenuOpenChange(menu, $event)"
         >
           @if (menu.icon) {
             <ng-icon [svg]="menu.icon" />
@@ -70,6 +102,11 @@ import { NgIcon } from "@ng-icons/core";
   styles: [
     /* language=SCSS */ `
       sd-sidebar-menu {
+        > .control-header {
+          align-items: center;
+          gap: var(--sd-gap-xs);
+        }
+
         &[data-sd-root-layout="flat"] {
           > sd-list[data-sd-inset="true"]
             > sd-list-item
@@ -89,12 +126,85 @@ export class SdSidebarMenu {
   layout = input<"accordion" | "accordion-expanded" | "flat">();
   getMenuIsSelectedFn = input<(menu: SdMenu) => boolean>();
 
+  /**
+   * 펼쳐진 메뉴 코드(`codeChain.join(".")`) 목록.
+   *
+   * 미지정(`undefined`)이면 `layout` 이 정하는 기본 펼침 상태를 따름.
+   * 사용자가 토글하거나 호스트가 값을 세팅하면 그 값이 단일 진리원이 되며,
+   * 이후 `menus` 가 다시 계산돼도 상태가 유지됨.
+   */
+  expandedMenuCodes = model<string[] | undefined>(undefined);
+
   fullPageCode = injectFullPageCodeSignal();
 
   rootLayout = computed(() => this.layout() ?? (this.menus().length <= 3 ? "flat" : "accordion"));
 
-  // accordion-expanded: 모든 깊이 항목을 펼친 채로 시작(이후 클릭 토글). 그 외는 접힘 시작.
-  expandInitially = computed(() => this.rootLayout() === "accordion-expanded");
+  // 접기/펼치기가 가능한 메뉴 코드.
+  // flat 로 렌더되는 depth-0 그룹은 항상 펼쳐진 구조라 대상에서 제외(SdListItem.childrenOpen).
+  private readonly _expandableCodes = computed(() => {
+    const rootIsFlat = this.rootLayout() === "flat";
+    const result: string[] = [];
+
+    function walk(menus: SdMenu[], depth: number): void {
+      for (const menu of menus) {
+        if (menu.children == null) continue;
+        if (!(rootIsFlat && depth === 0)) {
+          result.push(menu.codeChain.join("."));
+        }
+        walk(menu.children, depth + 1);
+      }
+    }
+
+    walk(this.menus(), 0);
+    return result;
+  });
+
+  // accordion-expanded: 하위 보유 메뉴 전체를 펼친 채로 시작. 그 외는 접힘 시작.
+  private readonly _expandedCodeSet = computed(() => {
+    const codes =
+      this.expandedMenuCodes() ??
+      (this.rootLayout() === "accordion-expanded" ? this._expandableCodes() : []);
+    return new Set(codes);
+  });
+
+  hasExpandable = computed(() => this._expandableCodes().length > 0);
+
+  isAllExpanded = computed(() => {
+    const codes = this._expandableCodes();
+    if (codes.length === 0) return false;
+    const expandedSet = this._expandedCodeSet();
+    return codes.every((code) => expandedSet.has(code));
+  });
+
+  isAllCollapsed = computed(() => {
+    const codes = this._expandableCodes();
+    if (codes.length === 0) return true;
+    const expandedSet = this._expandedCodeSet();
+    return codes.every((code) => !expandedSet.has(code));
+  });
+
+  expandAll(): void {
+    this.expandedMenuCodes.set([...this._expandableCodes()]);
+  }
+
+  collapseAll(): void {
+    this.expandedMenuCodes.set([]);
+  }
+
+  getIsMenuExpanded(menu: SdMenu): boolean {
+    return this._expandedCodeSet().has(menu.codeChain.join("."));
+  }
+
+  onMenuOpenChange(menu: SdMenu, open: boolean): void {
+    const code = menu.codeChain.join(".");
+    const nextSet = new Set(this._expandedCodeSet());
+    if (open) {
+      nextSet.add(code);
+    } else {
+      nextSet.delete(code);
+    }
+    this.expandedMenuCodes.set([...nextSet]);
+  }
 
   getMenuRouterLinkOption(
     menu: SdMenu,
@@ -112,6 +222,11 @@ export class SdSidebarMenu {
     }
   }
 
+  protected readonly icons = {
+    tablerFoldDown,
+    tablerFoldUp,
+  };
+
   protected readonly itemTemplateType!: {
     menus: SdMenu[];
     depth: number;