@simplysm/angular 14.0.94 → 14.0.96

package/dist/controls/list/sd-list-item.d.ts

@@ -10,10 +10,6 @@ export declare class SdListItem {
     contentClass: import("@angular/core").InputSignal<string | undefined>;
     toolTpl: import("@angular/core").Signal<TemplateRef<void> | undefined>;
     private readonly _childLists;
-    private readonly _parentItem;
-    level: import("@angular/core").Signal<number>;
-    indentPadding: import("@angular/core").Signal<string | undefined>;
-    guideLeft: import("@angular/core").Signal<string>;
     hasChildren: import("@angular/core").Signal<boolean>;
     childrenOpen: import("@angular/core").Signal<boolean>;
     onContentClick(): void;

package/dist/controls/list/sd-list-item.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"sd-list-item.d.ts","sourceRoot":"","sources":["../../../src/controls/list/sd-list-item.ts"],"names":[],"mappings":"AAAA,OAAO,EAWL,WAAW,EAEZ,MAAM,eAAe,CAAC;;AAQvB,qBAkJa,UAAU;IACrB,MAAM,4DAA4C;IAClD,IAAI,+CAAgB;IACpB,QAAQ,qEAAiD;IACzD,YAAY,0DAAmB;IAC/B,QAAQ,qEAAiD;IACzD,YAAY,0DAAmB;IAC/B,YAAY,0DAAmB;IAE/B,OAAO,gEAA8C;IAErD,OAAO,CAAC,QAAQ,CAAC,WAAW,CAA2B;IAGvD,OAAO,CAAC,QAAQ,CAAC,WAAW,CAM1B;IAIF,KAAK,yCAGF;IAGH,aAAa,qDAGV;IAGH,SAAS,yCAAuF;IAEhG,WAAW,0CAAiD;IAE5D,YAAY,0CAET;IAEH,cAAc,IAAI,IAAI;yCA5CX,UAAU;2CAAV,UAAU;CAkDtB"}
+{"version":3,"file":"sd-list-item.d.ts","sourceRoot":"","sources":["../../../src/controls/list/sd-list-item.ts"],"names":[],"mappings":"AAAA,OAAO,EASL,WAAW,EAEZ,MAAM,eAAe,CAAC;;AAQvB,qBAsJa,UAAU;IACrB,MAAM,4DAA4C;IAClD,IAAI,+CAAgB;IACpB,QAAQ,qEAAiD;IACzD,YAAY,0DAAmB;IAC/B,QAAQ,qEAAiD;IACzD,YAAY,0DAAmB;IAC/B,YAAY,0DAAmB;IAE/B,OAAO,gEAA8C;IAErD,OAAO,CAAC,QAAQ,CAAC,WAAW,CAA2B;IAEvD,WAAW,0CAAiD;IAE5D,YAAY,0CAET;IAEH,cAAc,IAAI,IAAI;yCAnBX,UAAU;2CAAV,UAAU;CAyBtB"}

package/dist/controls/list/sd-list-item.js

@@ -1,4 +1,4 @@
-import { booleanAttribute, ChangeDetectionStrategy, Component, computed, contentChild, contentChildren, forwardRef, inject, input, model, TemplateRef, ViewEncapsulation, } from "@angular/core";
+import { booleanAttribute, ChangeDetectionStrategy, Component, computed, contentChild, contentChildren, input, model, TemplateRef, ViewEncapsulation, } from "@angular/core";
 import { NgTemplateOutlet } from "@angular/common";
 import { NgIcon } from "@ng-icons/core";
 import { SdCollapse } from "../collapse/sd-collapse";
@@ -33,14 +33,11 @@ function SdListItem_Conditional_5_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵproperty("open", ctx_r0.open());
 } }
 function SdListItem_Conditional_6_Conditional_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "div", 9);
-} if (rf & 2) {
-    const ctx_r0 = i0.ɵɵnextContext(2);
-    i0.ɵɵstyleProp("left", ctx_r0.guideLeft());
+    i0.ɵɵelement(0, "div", 8);
 } }
 function SdListItem_Conditional_6_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "sd-collapse", 4)(1, "div", 7);
-    i0.ɵɵconditionalCreate(2, SdListItem_Conditional_6_Conditional_2_Template, 1, 2, "div", 8);
+    i0.ɵɵconditionalCreate(2, SdListItem_Conditional_6_Conditional_2_Template, 1, 0, "div", 8);
     i0.ɵɵprojection(3, 1);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
@@ -59,26 +56,6 @@ export class SdListItem {
     contentClass = input(...(ngDevMode ? [undefined, { debugName: "contentClass" }] : /* istanbul ignore next */ []));
     toolTpl = contentChild("toolTpl", ...(ngDevMode ? [{ debugName: "toolTpl" }] : /* istanbul ignore next */ []));
     _childLists = contentChildren(SdList, ...(ngDevMode ? [{ debugName: "_childLists" }] : /* istanbul ignore next */ []));
-    // 상위 아이템을 주입해 중첩 깊이(레벨)를 추적
-    _parentItem = inject(forwardRef(() => SdListItem), {
-        optional: true,
-        skipSelf: true,
-    });
-    // accordion(트리) 깊이만 셈. flat(섹션 그룹)은 들여쓰기 대상이 아니므로 0,
-    // flat 하위의 accordion 트리는 자체 루트(1)부터 새로 깊이를 셈.
-    level = computed(() => {
-        if (this.layout() !== "accordion")
-            return 0;
-        return (this._parentItem?.level() ?? 0) + 1;
-    }, ...(ngDevMode ? [{ debugName: "level" }] : /* istanbul ignore next */ []));
-    // accordion 트리 깊이별 좌측 들여쓰기 (트리 루트·flat은 기본 패딩 유지)
-    indentPadding = computed(() => {
-        if (this.level() <= 1)
-            return undefined;
-        return `calc(var(--gap-default) + ${(this.level() - 1) * 1.5}em)`;
-    }, ...(ngDevMode ? [{ debugName: "indentPadding" }] : /* istanbul ignore next */ []));
-    // 자식 영역에 그릴 세로 가이드선의 좌측 위치 (현재 레벨 기준 + 반 칸)
-    guideLeft = computed(() => `calc(var(--gap-default) + ${(this.level() - 1) * 1.5}em + 0.75em)`, ...(ngDevMode ? [{ debugName: "guideLeft" }] : /* istanbul ignore next */ []));
     hasChildren = computed(() => this._childLists().length > 0, ...(ngDevMode ? [{ debugName: "hasChildren" }] : /* istanbul ignore next */ []));
     childrenOpen = computed(() => {
         return this.layout() === "flat" ? true : this.open();
@@ -97,7 +74,7 @@ export class SdListItem {
             i0.ɵɵqueryAdvance(2);
         } }, hostVars: 6, hostBindings: function SdListItem_HostBindings(rf, ctx) { if (rf & 2) {
             i0.ɵɵattribute("data-sd-layout", ctx.layout())("data-sd-open", ctx.open())("data-sd-selected", ctx.selected())("data-sd-readonly", ctx.readonly())("data-sd-has-children", ctx.hasChildren())("data-sd-has-selected-icon", ctx.selectedIcon() != null);
-        } }, inputs: { layout: [1, "layout"], open: [1, "open"], selected: [1, "selected"], selectedIcon: [1, "selectedIcon"], readonly: [1, "readonly"], contentStyle: [1, "contentStyle"], contentClass: [1, "contentClass"] }, outputs: { open: "openChange" }, ngContentSelectors: _c2, decls: 7, vars: 11, consts: [["tabindex", "0", 1, "_content", 3, "click", "keydown.enter", "sdRipple"], [3, "tx-theme-primary-default", "tx-trans-lightest", "svg"], [1, "_label"], [1, "_tool"], [3, "open"], [3, "svg"], [3, "ngTemplateOutlet"], [1, "_children"], [1, "_indent-guide", 3, "left"], [1, "_indent-guide"]], template: function SdListItem_Template(rf, ctx) { if (rf & 1) {
+        } }, inputs: { layout: [1, "layout"], open: [1, "open"], selected: [1, "selected"], selectedIcon: [1, "selectedIcon"], readonly: [1, "readonly"], contentStyle: [1, "contentStyle"], contentClass: [1, "contentClass"] }, outputs: { open: "openChange" }, ngContentSelectors: _c2, decls: 7, vars: 9, consts: [["tabindex", "0", 1, "_content", 3, "click", "keydown.enter", "sdRipple"], [3, "tx-theme-primary-default", "tx-trans-lightest", "svg"], [1, "_label"], [1, "_tool"], [3, "open"], [3, "svg"], [3, "ngTemplateOutlet"], [1, "_children"], [1, "_indent-guide"]], template: function SdListItem_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵprojectionDef(_c1);
             i0.ɵɵelementStart(0, "div", 0);
             i0.ɵɵlistener("click", function SdListItem_Template_div_click_0_listener() { return ctx.onContentClick(); })("keydown.enter", function SdListItem_Template_div_keydown_enter_0_listener() { return ctx.onContentClick(); });
@@ -112,7 +89,6 @@ export class SdListItem {
         } if (rf & 2) {
             i0.ɵɵstyleMap(ctx.contentStyle());
             i0.ɵɵclassMap(ctx.contentClass());
-            i0.ɵɵstyleProp("padding-left", ctx.indentPadding());
             i0.ɵɵproperty("sdRipple", !ctx.readonly() && !(ctx.layout() === "flat" && ctx.hasChildren()));
             i0.ɵɵadvance();
             i0.ɵɵconditional(ctx.selectedIcon() != null && !ctx.hasChildren() ? 1 : -1);
@@ -122,7 +98,7 @@ export class SdListItem {
             i0.ɵɵconditional(ctx.layout() === "accordion" && ctx.hasChildren() ? 5 : -1);
             i0.ɵɵadvance();
             i0.ɵɵconditional(ctx.hasChildren() ? 6 : -1);
-        } }, dependencies: [SdCollapse, SdCollapseIcon, NgTemplateOutlet, NgIcon, SdRipple], styles: ["sd-list-item {\n  display: block;\n}\nsd-list-item > ._content {\n  display: flex;\n  padding: var(--gap-sm) var(--gap-default);\n  cursor: pointer;\n  gap: var(--gap-xs);\n  border-radius: var(--border-radius-default);\n  transition: background var(--animation-duration) ease-in;\n}\nsd-list-item > ._content > ._label {\n  flex: 1 1 auto;\n  overflow: auto;\n}\nsd-list-item > ._content:focus-visible {\n  outline: none;\n  transition: background var(--animation-duration) ease-out;\n  background: var(--trans-lighter);\n}\nsd-list-item[data-sd-selected=true] > ._content {\n  background: var(--trans-lighter);\n  font-weight: bold;\n}\nsd-list-item[data-sd-has-selected-icon=true][data-sd-selected=true] > ._content {\n  color: var(--text-trans-default);\n}\nsd-list-item[data-sd-has-selected-icon=true][data-sd-selected=true] > ._content:hover {\n  background: var(--trans-lighter);\n}\nsd-list-item[data-sd-readonly=true] > ._content {\n  cursor: default;\n}\nsd-list-item > sd-collapse > ._content > ._children {\n  position: relative;\n}\nsd-list-item > sd-collapse > ._content > ._children > ._indent-guide {\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  width: 0;\n  border-left: 1px solid var(--border-color-default);\n  pointer-events: none;\n}\nsd-list-item[data-sd-layout=accordion]:not([data-sd-readonly=true]) > ._content:hover {\n  transition: background var(--animation-duration) ease-out;\n  background: var(--trans-lighter);\n}\nsd-list-item[data-sd-layout=flat][data-sd-has-children=true] > ._content {\n  display: block;\n  background: transparent;\n  cursor: default;\n  font-size: var(--font-size-sm);\n  opacity: 0.7;\n  margin: 0;\n}\n\n.sd-theme-mobile > sd-list-item > ._content:hover {\n  background: transparent;\n}"], encapsulation: 2, changeDetection: 0 });
+        } }, dependencies: [SdCollapse, SdCollapseIcon, NgTemplateOutlet, NgIcon, SdRipple], styles: ["sd-list-item {\n  display: block;\n}\nsd-list-item > ._content {\n  display: flex;\n  padding: var(--gap-sm) var(--gap-default);\n  cursor: pointer;\n  gap: var(--gap-xs);\n  border-radius: var(--border-radius-default);\n  transition: background var(--animation-duration) ease-in;\n}\nsd-list-item > ._content > ._label {\n  flex: 1 1 auto;\n  overflow: auto;\n}\nsd-list-item > ._content:focus-visible {\n  outline: none;\n  transition: background var(--animation-duration) ease-out;\n  background: var(--trans-lighter);\n}\nsd-list-item[data-sd-selected=true] > ._content {\n  background: var(--trans-lighter);\n  font-weight: bold;\n}\nsd-list-item[data-sd-has-selected-icon=true][data-sd-selected=true] > ._content {\n  color: var(--text-trans-default);\n}\nsd-list-item[data-sd-has-selected-icon=true][data-sd-selected=true] > ._content:hover {\n  background: var(--trans-lighter);\n}\nsd-list-item[data-sd-readonly=true] > ._content {\n  cursor: default;\n}\nsd-list-item > sd-collapse > ._content > ._children {\n  position: relative;\n}\nsd-list-item > sd-collapse > ._content > ._children > ._indent-guide {\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  left: 1em;\n  width: 0;\n  border-left: 1px solid var(--trans-light);\n  pointer-events: none;\n}\nsd-list-item[data-sd-layout=accordion]:not([data-sd-readonly=true]) > ._content:hover {\n  transition: background var(--animation-duration) ease-out;\n  background: var(--trans-lighter);\n}\nsd-list-item[data-sd-layout=accordion] > sd-collapse > ._content > ._children > sd-list {\n  padding-left: 1.5em;\n}\nsd-list-item[data-sd-layout=flat][data-sd-has-children=true] > ._content {\n  display: block;\n  background: transparent;\n  cursor: default;\n  font-size: var(--font-size-sm);\n  opacity: 0.7;\n  margin: 0;\n}\n\n.sd-theme-mobile > sd-list-item > ._content:hover {\n  background: transparent;\n}"], encapsulation: 2, changeDetection: 0 });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SdListItem, [{
         type: Component,
@@ -130,7 +106,6 @@ export class SdListItem {
     <div
       class="_content"
       [style]="contentStyle()"
-      [style.padding-left]="indentPadding()"
       [class]="contentClass()"
       tabindex="0"
       (click)="onContentClick()"
@@ -160,7 +135,7 @@ export class SdListItem {
       <sd-collapse [open]="childrenOpen()">
         <div class="_children">
           @if (layout() === "accordion") {
-            <div class="_indent-guide" [style.left]="guideLeft()"></div>
+            <div class="_indent-guide"></div>
           }
           <ng-content select="sd-list" />
         </div>
@@ -173,6 +148,6 @@ export class SdListItem {
                     "[attr.data-sd-readonly]": "readonly()",
                     "[attr.data-sd-has-children]": "hasChildren()",
                     "[attr.data-sd-has-selected-icon]": "selectedIcon() != null",
-                }, styles: ["sd-list-item {\n  display: block;\n}\nsd-list-item > ._content {\n  display: flex;\n  padding: var(--gap-sm) var(--gap-default);\n  cursor: pointer;\n  gap: var(--gap-xs);\n  border-radius: var(--border-radius-default);\n  transition: background var(--animation-duration) ease-in;\n}\nsd-list-item > ._content > ._label {\n  flex: 1 1 auto;\n  overflow: auto;\n}\nsd-list-item > ._content:focus-visible {\n  outline: none;\n  transition: background var(--animation-duration) ease-out;\n  background: var(--trans-lighter);\n}\nsd-list-item[data-sd-selected=true] > ._content {\n  background: var(--trans-lighter);\n  font-weight: bold;\n}\nsd-list-item[data-sd-has-selected-icon=true][data-sd-selected=true] > ._content {\n  color: var(--text-trans-default);\n}\nsd-list-item[data-sd-has-selected-icon=true][data-sd-selected=true] > ._content:hover {\n  background: var(--trans-lighter);\n}\nsd-list-item[data-sd-readonly=true] > ._content {\n  cursor: default;\n}\nsd-list-item > sd-collapse > ._content > ._children {\n  position: relative;\n}\nsd-list-item > sd-collapse > ._content > ._children > ._indent-guide {\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  width: 0;\n  border-left: 1px solid var(--border-color-default);\n  pointer-events: none;\n}\nsd-list-item[data-sd-layout=accordion]:not([data-sd-readonly=true]) > ._content:hover {\n  transition: background var(--animation-duration) ease-out;\n  background: var(--trans-lighter);\n}\nsd-list-item[data-sd-layout=flat][data-sd-has-children=true] > ._content {\n  display: block;\n  background: transparent;\n  cursor: default;\n  font-size: var(--font-size-sm);\n  opacity: 0.7;\n  margin: 0;\n}\n\n.sd-theme-mobile > sd-list-item > ._content:hover {\n  background: transparent;\n}"] }]
+                }, styles: ["sd-list-item {\n  display: block;\n}\nsd-list-item > ._content {\n  display: flex;\n  padding: var(--gap-sm) var(--gap-default);\n  cursor: pointer;\n  gap: var(--gap-xs);\n  border-radius: var(--border-radius-default);\n  transition: background var(--animation-duration) ease-in;\n}\nsd-list-item > ._content > ._label {\n  flex: 1 1 auto;\n  overflow: auto;\n}\nsd-list-item > ._content:focus-visible {\n  outline: none;\n  transition: background var(--animation-duration) ease-out;\n  background: var(--trans-lighter);\n}\nsd-list-item[data-sd-selected=true] > ._content {\n  background: var(--trans-lighter);\n  font-weight: bold;\n}\nsd-list-item[data-sd-has-selected-icon=true][data-sd-selected=true] > ._content {\n  color: var(--text-trans-default);\n}\nsd-list-item[data-sd-has-selected-icon=true][data-sd-selected=true] > ._content:hover {\n  background: var(--trans-lighter);\n}\nsd-list-item[data-sd-readonly=true] > ._content {\n  cursor: default;\n}\nsd-list-item > sd-collapse > ._content > ._children {\n  position: relative;\n}\nsd-list-item > sd-collapse > ._content > ._children > ._indent-guide {\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  left: 1em;\n  width: 0;\n  border-left: 1px solid var(--trans-light);\n  pointer-events: none;\n}\nsd-list-item[data-sd-layout=accordion]:not([data-sd-readonly=true]) > ._content:hover {\n  transition: background var(--animation-duration) ease-out;\n  background: var(--trans-lighter);\n}\nsd-list-item[data-sd-layout=accordion] > sd-collapse > ._content > ._children > sd-list {\n  padding-left: 1.5em;\n}\nsd-list-item[data-sd-layout=flat][data-sd-has-children=true] > ._content {\n  display: block;\n  background: transparent;\n  cursor: default;\n  font-size: var(--font-size-sm);\n  opacity: 0.7;\n  margin: 0;\n}\n\n.sd-theme-mobile > sd-list-item > ._content:hover {\n  background: transparent;\n}"] }]
     }], null, { layout: [{ type: i0.Input, args: [{ isSignal: true, alias: "layout", required: false }] }], open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }], selected: [{ type: i0.Input, args: [{ isSignal: true, alias: "selected", required: false }] }], selectedIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedIcon", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], contentStyle: [{ type: i0.Input, args: [{ isSignal: true, alias: "contentStyle", required: false }] }], contentClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "contentClass", required: false }] }], toolTpl: [{ type: i0.ContentChild, args: ["toolTpl", { isSignal: true }] }], _childLists: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => SdList), { isSignal: true }] }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SdListItem, { className: "SdListItem", filePath: "packages/angular/src/controls/list/sd-list-item.ts", lineNumber: 168 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SdListItem, { className: "SdListItem", filePath: "packages/angular/src/controls/list/sd-list-item.ts", lineNumber: 170 }); })();

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

@@ -2,10 +2,11 @@ import { type SdMenu } from "../../core/routing/menu-utils";
 import * as i0 from "@angular/core";
 export declare class SdSidebarMenu {
     menus: import("@angular/core").InputSignal<SdMenu[]>;
-    layout: import("@angular/core").InputSignal<"flat" | "accordion" | undefined>;
+    layout: import("@angular/core").InputSignal<"flat" | "accordion" | "accordion-expanded" | undefined>;
     getMenuIsSelectedFn: import("@angular/core").InputSignal<((menu: SdMenu) => boolean) | undefined>;
     fullPageCode: import("@angular/core").Signal<string>;
-    rootLayout: import("@angular/core").Signal<"flat" | "accordion">;
+    rootLayout: import("@angular/core").Signal<"flat" | "accordion" | "accordion-expanded">;
+    expandInitially: import("@angular/core").Signal<boolean>;
     getMenuRouterLinkOption(menu: SdMenu): {
         link: string;
         queryParams: Record<string, string> | undefined;

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":"AAEA,OAAO,EACL,KAAK,MAAM,EAGZ,MAAM,+BAA+B,CAAC;;AAQvC,qBAyEa,aAAa;IACxB,KAAK,gDAAuB;IAC5B,MAAM,wEAAiC;IACvC,mBAAmB,8CAAgB,MAAM,KAAK,OAAO,eAAI;IAEzD,YAAY,yCAA8B;IAE1C,UAAU,uDAAsF;IAEhG,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;yCA5BS,aAAa;2CAAb,aAAa;CA6BzB"}
+{"version":3,"file":"sd-sidebar-menu.d.ts","sourceRoot":"","sources":["../../../src/layout/sidebar/sd-sidebar-menu.ts"],"names":[],"mappings":"AAEA,OAAO,EACL,KAAK,MAAM,EAGZ,MAAM,+BAA+B,CAAC;;AAQvC,qBAyEa,aAAa;IACxB,KAAK,gDAAuB;IAC5B,MAAM,+FAAwD;IAC9D,mBAAmB,8CAAgB,MAAM,KAAK,OAAO,eAAI;IAEzD,YAAY,yCAA8B;IAE1C,UAAU,8EAAoG;IAG9G,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"}

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

@@ -13,15 +13,14 @@ 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) {
-    i0.ɵɵelement(0, "ng-icon", 8);
-    i0.ɵɵtext(1, " \u00A0 ");
+    i0.ɵɵelement(0, "ng-icon", 7);
 } if (rf & 2) {
     const menu_r2 = i0.ɵɵnextContext().$implicit;
     i0.ɵɵproperty("svg", menu_r2.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", 7);
+    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", 3);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -37,15 +36,15 @@ 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, 2, 1);
+    i0.ɵɵconditionalCreate(1, SdSidebarMenu_ng_template_5_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, 6, "sd-list", 7);
+    i0.ɵɵconditionalCreate(3, SdSidebarMenu_ng_template_5_For_1_Conditional_3_Template, 2, 6, "sd-list", 8);
     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() : "accordion");
+    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);
     i0.ɵɵadvance();
     i0.ɵɵconditional(menu_r2.icon ? 1 : -1);
     i0.ɵɵadvance();
@@ -54,7 +53,7 @@ function SdSidebarMenu_ng_template_5_For_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵconditional(menu_r2.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, 6, "sd-list-item", 5, _forTrack0);
+    i0.ɵɵrepeaterCreate(0, SdSidebarMenu_ng_template_5_For_1_Template, 4, 7, "sd-list-item", 5, _forTrack0);
 } if (rf & 2) {
     const currMenus_r6 = ctx.menus;
     i0.ɵɵrepeater(currMenus_r6);
@@ -64,7 +63,9 @@ export class SdSidebarMenu {
     layout = input(...(ngDevMode ? [undefined, { debugName: "layout" }] : /* istanbul ignore next */ []));
     getMenuIsSelectedFn = input(...(ngDevMode ? [undefined, { debugName: "getMenuIsSelectedFn" }] : /* istanbul ignore next */ []));
     fullPageCode = injectFullPageCodeSignal();
-    rootLayout = computed(() => this.layout() ?? (this.menus().length <= 3 ? "flat" : "accordion"), ...(ngDevMode ? [{ debugName: "rootLayout" }] : /* istanbul ignore next */ []));
+    rootLayout = computed(() => this.layout() ?? (this.menus().length <= 3 ? "accordion-expanded" : "accordion"), ...(ngDevMode ? [{ debugName: "rootLayout" }] : /* istanbul ignore next */ []));
+    // accordion-expanded: 모든 깊이 항목을 펼친 채로 시작(이후 클릭 토글). 그 외는 접힘 시작.
+    expandInitially = computed(() => this.rootLayout() === "accordion-expanded", ...(ngDevMode ? [{ debugName: "expandInitially" }] : /* istanbul ignore next */ []));
     getMenuRouterLinkOption(menu) {
         return menuRouterLinkOption(menu);
     }
@@ -80,7 +81,7 @@ export class SdSidebarMenu {
     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"], [3, "click", "sdRouterLink", "selected", "layout"], [3, "inset"], [3, "svg"]], template: function SdSidebarMenu_Template(rf, ctx) { if (rf & 1) {
+        } }, 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"]], template: function SdSidebarMenu_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵelementStart(0, "div", 1)(1, "b");
             i0.ɵɵtext(2, "MENU");
             i0.ɵɵelementEnd()();
@@ -101,7 +102,7 @@ export class SdSidebarMenu {
             SdRouterLink,
             SdList,
             SdListItem,
-            NgIcon], styles: ["sd-sidebar-menu > sd-list[data-sd-inset=true] sd-list {\n  background: var(--trans-lightest);\n}\nsd-sidebar-menu:not([data-sd-root-layout=accordion]) > sd-list[data-sd-inset=true] > sd-list-item > sd-collapse > ._content > ._children > sd-list {\n  background: transparent;\n}"], encapsulation: 2, changeDetection: 0 });
+            NgIcon], styles: ["sd-sidebar-menu {\n  /*> sd-list[data-sd-inset=\"true\"] {\n    sd-list {\n      background: var(--trans-lightest);\n    }\n  }*/\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: transparent;\n}"], encapsulation: 2, changeDetection: 0 });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SdSidebarMenu, [{
         type: Component,
@@ -131,11 +132,11 @@ export class SdSidebarMenu {
           [sdRouterLink]="getMenuRouterLinkOption(menu)"
           (click)="onMenuClick(menu)"
           [selected]="getIsMenuSelected(menu)"
-          [layout]="depth === 0 ? rootLayout() : 'accordion'"
+          [layout]="depth === 0 && rootLayout() === 'flat' ? 'flat' : 'accordion'"
+          [open]="expandInitially() && menu.children != null"
         >
           @if (menu.icon) {
             <ng-icon [svg]="menu.icon" />
-            &nbsp;
           }
           {{ menu.title }}
           @if (menu.children) {
@@ -152,6 +153,6 @@ export class SdSidebarMenu {
         </sd-list-item>
       }
     </ng-template>
-  `, styles: ["sd-sidebar-menu > sd-list[data-sd-inset=true] sd-list {\n  background: var(--trans-lightest);\n}\nsd-sidebar-menu:not([data-sd-root-layout=accordion]) > sd-list[data-sd-inset=true] > sd-list-item > sd-collapse > ._content > ._children > sd-list {\n  background: transparent;\n}"] }]
+  `, styles: ["sd-sidebar-menu {\n  /*> sd-list[data-sd-inset=\"true\"] {\n    sd-list {\n      background: var(--trans-lightest);\n    }\n  }*/\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: 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: 88 }); })();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@simplysm/angular",
-  "version": "14.0.94",
+  "version": "14.0.96",
   "description": "심플리즘 패키지 - Angular",
   "author": "심플리즘",
   "license": "Apache-2.0",
@@ -51,10 +51,10 @@
     "jspdf": "^4.2.1",
     "rxjs": "^7.8.2",
     "tabbable": "^6.4.0",
-    "@simplysm/core-browser": "14.0.94",
-    "@simplysm/core-common": "14.0.94",
-    "@simplysm/service-common": "14.0.94",
-    "@simplysm/service-client": "14.0.94"
+    "@simplysm/core-browser": "14.0.96",
+    "@simplysm/core-common": "14.0.96",
+    "@simplysm/service-client": "14.0.96",
+    "@simplysm/service-common": "14.0.96"
   },
   "devDependencies": {
     "@angular/compiler": "^21.2.16",

package/scss/commons/_variables.scss

@@ -108,12 +108,12 @@ $vars: (
   ),
   border-color: color-map(map.get($colors, gray), 5%),
   border-radius: (
-    xs: var(--gap-xxs),
-    sm: var(--gap-xs),
-    default: var(--gap-sm),
-    lg: var(--gap-default),
-    xl: var(--gap-lg),
-    xxl: var(--gap-xl),
+    xs: var(--gap-xs),
+    sm: var(--gap-sm),
+    default: var(--gap-default),
+    lg: var(--gap-lg),
+    xl: var(--gap-xl),
+    xxl: var(--gap-xxl),
   ),
   z-index: (
     toast: 9999,

package/src/controls/list/sd-list-item.ts

@@ -5,8 +5,6 @@ import {
   computed,
   contentChild,
   contentChildren,
-  forwardRef,
-  inject,
   input,
   model,
   TemplateRef,
@@ -29,7 +27,6 @@ import { SdRipple } from "../../core/ripple/sd-ripple";
     <div
       class="_content"
       [style]="contentStyle()"
-      [style.padding-left]="indentPadding()"
       [class]="contentClass()"
       tabindex="0"
       (click)="onContentClick()"
@@ -59,7 +56,7 @@ import { SdRipple } from "../../core/ripple/sd-ripple";
       <sd-collapse [open]="childrenOpen()">
         <div class="_children">
           @if (layout() === "accordion") {
-            <div class="_indent-guide" [style.left]="guideLeft()"></div>
+            <div class="_indent-guide"></div>
           }
           <ng-content select="sd-list" />
         </div>
@@ -110,7 +107,9 @@ import { SdRipple } from "../../core/ripple/sd-ripple";
           }
         }
 
-        // 중첩 자식 영역: 세로 가이드선을 그리기 위한 기준 컨테이너
+        // 중첩 자식 영역: 세로 가이드선을 그리기 위한 기준 컨테이너.
+        // 깊이별 들여쓰기는 중첩 sd-list 의 padding 으로 누적되므로, 이 컨테이너
+        // 좌측은 항상 현재 항목 기준이라 가이드선 위치는 고정값이면 충분함.
         > sd-collapse > ._content > ._children {
           position: relative;
 
@@ -118,8 +117,9 @@ import { SdRipple } from "../../core/ripple/sd-ripple";
             position: absolute;
             top: 0;
             bottom: 0;
+            left: 1em;
             width: 0;
-            border-left: 1px solid var(--border-color-default);
+            border-left: 1px solid var(--trans-light);
             pointer-events: none;
           }
         }
@@ -132,9 +132,11 @@ import { SdRipple } from "../../core/ripple/sd-ripple";
             }
           }
 
-          //> sd-collapse > ._content > ._children > sd-list {
-          //  padding: var(--gap-xs) 0;
-          //}
+          // 깊이별 들여쓰기: accordion 항목의 자식 리스트를 한 칸씩 누적 들여씀.
+          // (flat 항목의 자식 리스트는 들여쓰지 않음)
+          > sd-collapse > ._content > ._children > sd-list {
+            padding-left: 1.5em;
+          }
         }
 
         &[data-sd-layout="flat"][data-sd-has-children="true"] {
@@ -178,31 +180,6 @@ export class SdListItem {
 
   private readonly _childLists = contentChildren(SdList);
 
-  // 상위 아이템을 주입해 중첩 깊이(레벨)를 추적
-  private readonly _parentItem = inject<SdListItem>(
-    forwardRef(() => SdListItem),
-    {
-      optional: true,
-      skipSelf: true,
-    },
-  );
-
-  // accordion(트리) 깊이만 셈. flat(섹션 그룹)은 들여쓰기 대상이 아니므로 0,
-  // flat 하위의 accordion 트리는 자체 루트(1)부터 새로 깊이를 셈.
-  level = computed((): number => {
-    if (this.layout() !== "accordion") return 0;
-    return (this._parentItem?.level() ?? 0) + 1;
-  });
-
-  // accordion 트리 깊이별 좌측 들여쓰기 (트리 루트·flat은 기본 패딩 유지)
-  indentPadding = computed(() => {
-    if (this.level() <= 1) return undefined;
-    return `calc(var(--gap-default) + ${(this.level() - 1) * 1.5}em)`;
-  });
-
-  // 자식 영역에 그릴 세로 가이드선의 좌측 위치 (현재 레벨 기준 + 반 칸)
-  guideLeft = computed(() => `calc(var(--gap-default) + ${(this.level() - 1) * 1.5}em + 0.75em)`);
-
   hasChildren = computed(() => this._childLists().length > 0);
 
   childrenOpen = computed(() => {

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

@@ -45,11 +45,11 @@ import { NgIcon } from "@ng-icons/core";
           [sdRouterLink]="getMenuRouterLinkOption(menu)"
           (click)="onMenuClick(menu)"
           [selected]="getIsMenuSelected(menu)"
-          [layout]="depth === 0 ? rootLayout() : 'accordion'"
+          [layout]="depth === 0 && rootLayout() === 'flat' ? 'flat' : 'accordion'"
+          [open]="expandInitially() && menu.children != null"
         >
           @if (menu.icon) {
             <ng-icon [svg]="menu.icon" />
-            &nbsp;
           }
           {{ menu.title }}
           @if (menu.children) {
@@ -70,13 +70,13 @@ import { NgIcon } from "@ng-icons/core";
   styles: [
     /* language=SCSS */ `
       sd-sidebar-menu {
-        > sd-list[data-sd-inset="true"] {
+        /*> sd-list[data-sd-inset="true"] {
           sd-list {
             background: var(--trans-lightest);
           }
-        }
+        }*/
 
-        &:not([data-sd-root-layout="accordion"]) {
+        &[data-sd-root-layout="flat"] {
           > sd-list[data-sd-inset="true"] > sd-list-item > sd-collapse > ._content > ._children > sd-list {
             background: transparent;
           }
@@ -87,12 +87,15 @@ import { NgIcon } from "@ng-icons/core";
 })
 export class SdSidebarMenu {
   menus = input<SdMenu[]>([]);
-  layout = input<"accordion" | "flat">();
+  layout = input<"accordion" | "accordion-expanded" | "flat">();
   getMenuIsSelectedFn = input<(menu: SdMenu) => boolean>();
 
   fullPageCode = injectFullPageCodeSignal();
 
-  rootLayout = computed(() => this.layout() ?? (this.menus().length <= 3 ? "flat" : "accordion"));
+  rootLayout = computed(() => this.layout() ?? (this.menus().length <= 3 ? "accordion-expanded" : "accordion"));
+
+  // accordion-expanded: 모든 깊이 항목을 펼친 채로 시작(이후 클릭 토글). 그 외는 접힘 시작.
+  expandInitially = computed(() => this.rootLayout() === "accordion-expanded");
 
   getMenuRouterLinkOption(
     menu: SdMenu,

package/styles.css

@@ -123,12 +123,12 @@
     --border-color-dark: rgb(143.832095864, 152.5551796582, 167.5152083098);
     --border-color-darker: rgb(116.3216443464, 127.2034085228, 145.8655591685);
     --border-color-darkest: rgb(93.8151462793, 103.169427936, 119.2119565765);
-    --border-radius-xs: var(--gap-xxs);
-    --border-radius-sm: var(--gap-xs);
-    --border-radius-default: var(--gap-sm);
-    --border-radius-lg: var(--gap-default);
-    --border-radius-xl: var(--gap-lg);
-    --border-radius-xxl: var(--gap-xl);
+    --border-radius-xs: var(--gap-xs);
+    --border-radius-sm: var(--gap-sm);
+    --border-radius-default: var(--gap-default);
+    --border-radius-lg: var(--gap-lg);
+    --border-radius-xl: var(--gap-xl);
+    --border-radius-xxl: var(--gap-xxl);
     --z-index-toast: 9999;
     --z-index-busy: 9998;
     --z-index-dropdown: 5000;