@simplysm/angular 14.0.42 → 14.0.43

package/dist/layout/dock/sd-dock.d.ts

@@ -1,5 +1,6 @@
-import type { SdResizeEvent } from "../../core/events/sd-resize-event.plugin";
+import { type SdResizeEvent } from "../../core/events/sd-resize";
 import * as i0 from "@angular/core";
+import * as i1 from "../../core/events/sd-resize";
 export declare class SdDock {
     private readonly _elRef;
     private readonly _destroyRef;
@@ -14,6 +15,6 @@ export declare class SdDock {
     onHostResize(event: SdResizeEvent): void;
     onResizeBarMousedown(event: MouseEvent): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<SdDock, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<SdDock, "sd-dock", never, { "key": { "alias": "key"; "required": false; "isSignal": true; }; "position": { "alias": "position"; "required": false; "isSignal": true; }; "resizable": { "alias": "resizable"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SdDock, "sd-dock", never, { "key": { "alias": "key"; "required": false; "isSignal": true; }; "position": { "alias": "position"; "required": false; "isSignal": true; }; "resizable": { "alias": "resizable"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, [{ directive: typeof i1.SdResizeDirective; inputs: {}; outputs: { "sdResize": "sdResize"; }; }]>;
 }
 //# sourceMappingURL=sd-dock.d.ts.map

package/dist/layout/dock/sd-dock.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"sd-dock.d.ts","sourceRoot":"","sources":["../../../src/layout/dock/sd-dock.ts"],"names":[],"mappings":"AAaA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,0CAA0C,CAAC;;AAE9E,qBAyEa,MAAM;IACjB,OAAO,CAAC,QAAQ,CAAC,MAAM,CAAmC;IAC1D,OAAO,CAAC,QAAQ,CAAC,WAAW,CAAsB;IAElD,OAAO,CAAC,YAAY,CAA2B;IAE/C,GAAG,0DAAmB;IACtB,QAAQ,2EAAqD;IAC7D,SAAS,qEAAiD;IAE1D,IAAI,iDAAa;IAEjB,OAAO,CAAC,QAAQ,CAAC,OAAO,CAAsE;;IAoB9F,WAAW,CAAC,KAAK,EAAE,OAAO,CAAC,mBAAmB,CAAC;IAI/C,YAAY,CAAC,KAAK,EAAE,aAAa;IASjC,oBAAoB,CAAC,KAAK,EAAE,UAAU;yCA7C3B,MAAM;2CAAN,MAAM;CAiGlB"}
+{"version":3,"file":"sd-dock.d.ts","sourceRoot":"","sources":["../../../src/layout/dock/sd-dock.ts"],"names":[],"mappings":"AAaA,OAAO,EAAqB,KAAK,aAAa,EAAE,MAAM,6BAA6B,CAAC;;;AAEpF,qBA0Ea,MAAM;IACjB,OAAO,CAAC,QAAQ,CAAC,MAAM,CAAmC;IAC1D,OAAO,CAAC,QAAQ,CAAC,WAAW,CAAsB;IAElD,OAAO,CAAC,YAAY,CAA2B;IAE/C,GAAG,0DAAmB;IACtB,QAAQ,2EAAqD;IAC7D,SAAS,qEAAiD;IAE1D,IAAI,iDAAa;IAEjB,OAAO,CAAC,QAAQ,CAAC,OAAO,CAAsE;;IAoB9F,WAAW,CAAC,KAAK,EAAE,OAAO,CAAC,mBAAmB,CAAC;IAI/C,YAAY,CAAC,KAAK,EAAE,aAAa;IASjC,oBAAoB,CAAC,KAAK,EAAE,UAAU;yCA7C3B,MAAM;2CAAN,MAAM;CAiGlB"}

package/dist/layout/dock/sd-dock.js

@@ -1,6 +1,8 @@
 import { booleanAttribute, ChangeDetectionStrategy, Component, DestroyRef, effect, ElementRef, inject, input, signal, ViewEncapsulation, } from "@angular/core";
 import { injectSdSystemConfigResource } from "../../core/config/injectSdSystemConfigResource";
+import { SdResizeDirective } from "../../core/events/sd-resize";
 import * as i0 from "@angular/core";
+import * as i1 from "../../core/events/sd-resize";
 const _c0 = ["*"];
 function SdDock_Conditional_1_Template(rf, ctx) { if (rf & 1) {
     const _r1 = i0.ɵɵgetCurrentView();
@@ -96,7 +98,7 @@ export class SdDock {
             i0.ɵɵlistener("sdResize", function SdDock_sdResize_HostBindingHandler($event) { return ctx.onHostResize($event); });
         } if (rf & 2) {
             i0.ɵɵattribute("data-sd-position", ctx.position())("data-sd-resizable", ctx.resizable());
-        } }, inputs: { key: [1, "key"], position: [1, "position"], resizable: [1, "resizable"] }, ngContentSelectors: _c0, decls: 2, vars: 1, consts: [[1, "_resize-bar"], [1, "_resize-bar", 3, "mousedown"]], template: function SdDock_Template(rf, ctx) { if (rf & 1) {
+        } }, inputs: { key: [1, "key"], position: [1, "position"], resizable: [1, "resizable"] }, features: [i0.ɵɵHostDirectivesFeature([{ directive: i1.SdResizeDirective, outputs: ["sdResize", "sdResize"] }])], ngContentSelectors: _c0, decls: 2, vars: 1, consts: [[1, "_resize-bar"], [1, "_resize-bar", 3, "mousedown"]], template: function SdDock_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵprojectionDef();
             i0.ɵɵprojection(0);
             i0.ɵɵconditionalCreate(1, SdDock_Conditional_1_Template, 1, 0, "div", 0);
@@ -107,10 +109,10 @@ export class SdDock {
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SdDock, [{
         type: Component,
-        args: [{ selector: "sd-dock", changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, standalone: true, imports: [], host: {
+        args: [{ selector: "sd-dock", changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, standalone: true, imports: [], hostDirectives: [{ directive: SdResizeDirective, outputs: ["sdResize"] }], host: {
                     "[attr.data-sd-position]": "position()",
                     "[attr.data-sd-resizable]": "resizable()",
-                    "(sdResize)": "onHostResize($any($event))",
+                    "(sdResize)": "onHostResize($event)",
                 }, template: `
     <ng-content></ng-content>
     @if (resizable()) {
@@ -118,4 +120,4 @@ export class SdDock {
     }
   `, styles: ["sd-dock {\n  display: block;\n  position: absolute;\n  overflow: auto;\n}\nsd-dock[data-sd-resizable=true] > ._resize-bar {\n  position: absolute;\n}\nsd-dock[data-sd-resizable=true][data-sd-position=top] > ._resize-bar {\n  bottom: 0;\n  left: 0;\n  width: 100%;\n  height: 2px;\n  cursor: ns-resize;\n}\nsd-dock[data-sd-resizable=true][data-sd-position=bottom] > ._resize-bar {\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 2px;\n  cursor: ns-resize;\n}\nsd-dock[data-sd-resizable=true][data-sd-position=left] > ._resize-bar {\n  top: 0;\n  right: 0;\n  height: 100%;\n  width: 2px;\n  cursor: ew-resize;\n}\nsd-dock[data-sd-resizable=true][data-sd-position=right] > ._resize-bar {\n  top: 0;\n  left: 0;\n  height: 100%;\n  width: 2px;\n  cursor: ew-resize;\n}"] }]
     }], () => [], { key: [{ type: i0.Input, args: [{ isSignal: true, alias: "key", required: false }] }], position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }], resizable: [{ type: i0.Input, args: [{ isSignal: true, alias: "resizable", required: false }] }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SdDock, { className: "SdDock", filePath: "packages/angular/src/layout/dock/sd-dock.ts", lineNumber: 89, forbidOrphanRendering: true }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SdDock, { className: "SdDock", filePath: "packages/angular/src/layout/dock/sd-dock.ts", lineNumber: 90 }); })();

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

@@ -21,16 +21,16 @@ export class SdSidebarContainer {
         }
     }
     onBackdropClick() {
-        this.toggle.set(false);
+        this.toggle.update((v) => !v);
     }
     static ɵfac = function SdSidebarContainer_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || SdSidebarContainer)(); };
     static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: SdSidebarContainer, selectors: [["sd-sidebar-container"]], hostVars: 1, hostBindings: function SdSidebarContainer_HostBindings(rf, ctx) { if (rf & 2) {
             i0.ɵɵattribute("data-sd-toggle", ctx.toggle());
-        } }, ngContentSelectors: _c0, decls: 2, vars: 0, consts: [[1, "_backdrop", 3, "mousedown"]], template: function SdSidebarContainer_Template(rf, ctx) { if (rf & 1) {
+        } }, ngContentSelectors: _c0, decls: 2, vars: 0, consts: [["tabindex", "0", "role", "button", 1, "_backdrop", 3, "click", "keydown.enter"]], template: function SdSidebarContainer_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵprojectionDef();
             i0.ɵɵprojection(0);
             i0.ɵɵdomElementStart(1, "div", 0);
-            i0.ɵɵdomListener("mousedown", function SdSidebarContainer_Template_div_mousedown_1_listener() { return ctx.onBackdropClick(); });
+            i0.ɵɵdomListener("click", function SdSidebarContainer_Template_div_click_1_listener() { return ctx.onBackdropClick(); })("keydown.enter", function SdSidebarContainer_Template_div_keydown_enter_1_listener() { return ctx.onBackdropClick(); });
             i0.ɵɵdomElementEnd();
         } }, styles: ["sd-sidebar-container {\n  display: block;\n  position: relative;\n  height: 100%;\n  padding-left: var(--sidebar-width);\n  transition: padding-left 0.1s ease-out;\n}\nsd-sidebar-container[data-sd-toggle=true] {\n  padding-left: 0;\n  transition: padding-left 0.1s ease-in;\n}\nsd-sidebar-container > ._backdrop {\n  display: none;\n}\n\n@media all and (max-width: 520px) {\n  sd-sidebar-container {\n    padding-left: 0;\n  }\n  sd-sidebar-container > ._backdrop {\n    position: absolute;\n    display: block;\n    z-index: calc(var(--z-index-sidebar) - 1);\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    background: var(--background-rev-color);\n    opacity: 0;\n    pointer-events: none;\n    transition: opacity 0.3s ease-in-out;\n  }\n  sd-sidebar-container[data-sd-toggle=true] > ._backdrop {\n    opacity: 0.6;\n    pointer-events: auto;\n  }\n}"], encapsulation: 2, changeDetection: 0 });
 }
@@ -40,7 +40,7 @@ export class SdSidebarContainer {
                     "[attr.data-sd-toggle]": "toggle()",
                 }, template: `
     <ng-content />
-    <div class="_backdrop" (mousedown)="onBackdropClick()"></div>
+    <div class="_backdrop" tabindex="0" role="button" (click)="onBackdropClick()" (keydown.enter)="onBackdropClick()"></div>
   `, styles: ["sd-sidebar-container {\n  display: block;\n  position: relative;\n  height: 100%;\n  padding-left: var(--sidebar-width);\n  transition: padding-left 0.1s ease-out;\n}\nsd-sidebar-container[data-sd-toggle=true] {\n  padding-left: 0;\n  transition: padding-left 0.1s ease-in;\n}\nsd-sidebar-container > ._backdrop {\n  display: none;\n}\n\n@media all and (max-width: 520px) {\n  sd-sidebar-container {\n    padding-left: 0;\n  }\n  sd-sidebar-container > ._backdrop {\n    position: absolute;\n    display: block;\n    z-index: calc(var(--z-index-sidebar) - 1);\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    background: var(--background-rev-color);\n    opacity: 0;\n    pointer-events: none;\n    transition: opacity 0.3s ease-in-out;\n  }\n  sd-sidebar-container[data-sd-toggle=true] > ._backdrop {\n    opacity: 0.6;\n    pointer-events: auto;\n  }\n}"] }]
     }], () => [], null); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SdSidebarContainer, { className: "SdSidebarContainer", filePath: "packages/angular/src/layout/sidebar/sd-sidebar-container.ts", lineNumber: 69, forbidOrphanRendering: true }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SdSidebarContainer, { className: "SdSidebarContainer", filePath: "packages/angular/src/layout/sidebar/sd-sidebar-container.ts", lineNumber: 69 }); })();

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,qBA8Ea,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,qBA4Ea,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"}

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

@@ -46,7 +46,7 @@ function SdSidebarMenu_ng_template_4_For_1_Template(rf, ctx) { if (rf & 1) {
     const depth_r4 = i0.ɵɵnextContext().depth;
     const ctx_r2 = i0.ɵɵnextContext();
     i0.ɵɵstyleProp("text-indent", depth_r4 > 0 ? (depth_r4 + 1) * 0.5 : undefined, "em");
-    i0.ɵɵproperty("sdRouterLink", ctx_r2.getMenuRouterLinkOption(menu_r2))("selected", ctx_r2.getIsMenuSelected(menu_r2))("layout", depth_r4 === 0 ? ctx_r2.rootLayout() : "accordion");
+    i0.ɵɵproperty("contentClass", depth_r4 === 0 ? "pv-default" : "")("sdRouterLink", ctx_r2.getMenuRouterLinkOption(menu_r2))("selected", ctx_r2.getIsMenuSelected(menu_r2))("layout", depth_r4 === 0 ? ctx_r2.rootLayout() : "accordion");
     i0.ɵɵadvance();
     i0.ɵɵconditional(menu_r2.icon ? 1 : -1);
     i0.ɵɵadvance();
@@ -55,7 +55,7 @@ function SdSidebarMenu_ng_template_4_For_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵconditional(menu_r2.children ? 3 : -1);
 } }
 function SdSidebarMenu_ng_template_4_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵrepeaterCreate(0, SdSidebarMenu_ng_template_4_For_1_Template, 4, 8, "sd-list-item", 5, _forTrack0);
+    i0.ɵɵrepeaterCreate(0, SdSidebarMenu_ng_template_4_For_1_Template, 4, 9, "sd-list-item", 5, _forTrack0);
 } if (rf & 2) {
     const currMenus_r6 = ctx.menus;
     i0.ɵɵrepeater(currMenus_r6);
@@ -81,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: 6, vars: 6, consts: [["itemTpl", ""], [1, "control-header", "p-default"], [1, "flex-fill", 3, "inset"], [3, "ngTemplateOutlet", "ngTemplateOutletContext"], [3, "typed"], [3, "text-indent", "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: 6, vars: 6, consts: [["itemTpl", ""], [1, "control-header", "p-default"], [1, "flex-fill", 3, "inset"], [3, "ngTemplateOutlet", "ngTemplateOutletContext"], [3, "typed"], [3, "contentClass", "text-indent", "sdRouterLink", "selected", "layout"], [3, "click", "contentClass", "sdRouterLink", "selected", "layout"], [3, "inset"], [3, "svg"]], template: function SdSidebarMenu_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵelementStart(0, "div", 1);
             i0.ɵɵtext(1, "MENU");
             i0.ɵɵelementEnd();
@@ -102,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 > sd-list[data-sd-inset=true] > sd-list-item > ._content {\n  padding-block: var(--gap-default);\n}\nsd-sidebar-menu:not([data-sd-root-layout=accordion]) > sd-list[data-sd-inset=true] > sd-list-item > sd-collapse > ._content > sd-list {\n  background: transparent;\n}"], encapsulation: 2, changeDetection: 0 });
+            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 > sd-list {\n  background: transparent;\n}"], encapsulation: 2, changeDetection: 0 });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SdSidebarMenu, [{
         type: Component,
@@ -129,6 +129,7 @@ export class SdSidebarMenu {
     <ng-template #itemTpl [typed]="itemTemplateType" let-currMenus="menus" let-depth="depth">
       @for (menu of currMenus; track menu.codeChain.join(".")) {
         <sd-list-item
+          [contentClass]="depth === 0 ? 'pv-default' : ''"
           [style.text-indent.em]="depth > 0 ? (depth + 1) * 0.5 : undefined"
           [sdRouterLink]="getMenuRouterLinkOption(menu)"
           (click)="onMenuClick(menu)"
@@ -154,6 +155,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 > sd-list[data-sd-inset=true] > sd-list-item > ._content {\n  padding-block: var(--gap-default);\n}\nsd-sidebar-menu:not([data-sd-root-layout=accordion]) > sd-list[data-sd-inset=true] > sd-list-item > sd-collapse > ._content > sd-list {\n  background: transparent;\n}"] }]
+  `, 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 > 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: 93, forbidOrphanRendering: true }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SdSidebarMenu, { className: "SdSidebarMenu", filePath: "packages/angular/src/layout/sidebar/sd-sidebar-menu.ts", lineNumber: 91 }); })();

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

@@ -106,4 +106,4 @@ export class SdSidebarUser {
     }
   `, styles: ["sd-sidebar-user {\n  display: block;\n}\nsd-sidebar-user > ._menu-button {\n  display: block;\n  cursor: pointer;\n  user-select: none;\n  padding: var(--gap-default);\n}\nsd-sidebar-user > ._menu-button:hover {\n  background: var(--trans-lighter);\n}\nsd-sidebar-user > sd-collapse > ._content > sd-list {\n  background: var(--trans-lightest);\n  padding: var(--gap-xs) 0;\n}"] }]
     }], null, { userMenu: [{ type: i0.Input, args: [{ isSignal: true, alias: "userMenu", required: false }] }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SdSidebarUser, { className: "SdSidebarUser", filePath: "packages/angular/src/layout/sidebar/sd-sidebar-user.ts", lineNumber: 68, forbidOrphanRendering: true }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SdSidebarUser, { className: "SdSidebarUser", filePath: "packages/angular/src/layout/sidebar/sd-sidebar-user.ts", lineNumber: 68 }); })();

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

@@ -21,4 +21,4 @@ export class SdSidebar {
     <ng-content />
   `, styles: ["sd-sidebar {\n  position: absolute;\n  z-index: var(--z-index-sidebar);\n  top: 0;\n  left: 0;\n  width: var(--sidebar-width);\n  height: 100%;\n  background: var(--control-color);\n  border-right: 1px solid var(--border-color-lighter);\n}\n@media not all and (max-width: 520px) {\n  sd-sidebar {\n    transition: transform 0.1s ease-out;\n  }\n  sd-sidebar[data-sd-toggle=true] {\n    transform: translateX(-100%);\n    transition: transform 0.1s ease-in;\n  }\n}\n@media all and (max-width: 520px) {\n  sd-sidebar {\n    transition: transform 0.3s ease-in;\n    transform: translateX(-100%);\n  }\n  sd-sidebar[data-sd-toggle=true] {\n    transform: none;\n    transition: transform 0.3s ease-out;\n    box-shadow: 0 calc(16 * var(--elevation-size)) calc(16 * 4 * var(--elevation-size)) var(--trans-lighter), 0 var(--elevation-size) var(--elevation-size) var(--trans-lighter);\n  }\n}"] }]
     }], null, null); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SdSidebar, { className: "SdSidebar", filePath: "packages/angular/src/layout/sidebar/sd-sidebar.ts", lineNumber: 61, forbidOrphanRendering: true }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SdSidebar, { className: "SdSidebar", filePath: "packages/angular/src/layout/sidebar/sd-sidebar.ts", lineNumber: 61 }); })();

package/dist/layout/topbar/sd-topbar-container.js

@@ -14,4 +14,4 @@ export class SdTopbarContainer {
     <ng-content />
   `, styles: ["sd-topbar-container {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n}"] }]
     }], null, null); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SdTopbarContainer, { className: "SdTopbarContainer", filePath: "packages/angular/src/layout/topbar/sd-topbar-container.ts", lineNumber: 22, forbidOrphanRendering: true }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SdTopbarContainer, { className: "SdTopbarContainer", filePath: "packages/angular/src/layout/topbar/sd-topbar-container.ts", lineNumber: 22 }); })();

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

@@ -1 +1 @@
-{"version":3,"file":"sd-topbar-menu.d.ts","sourceRoot":"","sources":["../../../src/layout/topbar/sd-topbar-menu.ts"],"names":[],"mappings":"AAQA,OAAO,EACL,KAAK,MAAM,EAGZ,MAAM,+BAA+B,CAAC;;AAYvC,qBAkGa,YAAY;IACvB,KAAK,gDAAuB;IAC5B,mBAAmB,8CAAgB,MAAM,KAAK,OAAO,eAAI;IAEzD,YAAY,yCAA8B;IAE1C,OAAO,CAAC,QAAQ,CAAC,UAAU,CAA4B;IAEvD,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,EAAE,aAAa,EAAE,MAAM,GAAG,IAAI;IAUtD,SAAS,CAAC,QAAQ,CAAC,gBAAgB,EAAG;QACpC,KAAK,EAAE,MAAM,EAAE,CAAC;QAChB,KAAK,EAAE,MAAM,CAAC;QACd,aAAa,EAAE,MAAM,CAAC;KACvB,CAAC;IAEF,SAAS,CAAC,QAAQ,CAAC,eAAe,iUAAmB;yCAlC1C,YAAY;2CAAZ,YAAY;CAmCxB"}
+{"version":3,"file":"sd-topbar-menu.d.ts","sourceRoot":"","sources":["../../../src/layout/topbar/sd-topbar-menu.ts"],"names":[],"mappings":"AAQA,OAAO,EACL,KAAK,MAAM,EAGZ,MAAM,+BAA+B,CAAC;;AAYvC,qBA8Fa,YAAY;IACvB,KAAK,gDAAuB;IAC5B,mBAAmB,8CAAgB,MAAM,KAAK,OAAO,eAAI;IAEzD,YAAY,yCAA8B;IAE1C,OAAO,CAAC,QAAQ,CAAC,UAAU,CAA4B;IAEvD,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,EAAE,aAAa,EAAE,MAAM,GAAG,IAAI;IAUtD,SAAS,CAAC,QAAQ,CAAC,gBAAgB,EAAG;QACpC,KAAK,EAAE,MAAM,EAAE,CAAC;QAChB,KAAK,EAAE,MAAM,CAAC;QACd,aAAa,EAAE,MAAM,CAAC;KACvB,CAAC;IAEF,SAAS,CAAC,QAAQ,CAAC,eAAe,iUAAmB;yCAlC1C,YAAY;2CAAZ,YAAY;CAmCxB"}

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

@@ -105,7 +105,7 @@ function SdTopbarMenu_ng_template_2_For_1_Template(rf, ctx) { if (rf & 1) {
     const depth_r10 = i0.ɵɵnextContext().depth;
     const ctx_r4 = i0.ɵɵnextContext();
     i0.ɵɵstyleProp("padding-left", depth_r10 > 0 ? (depth_r10 + 1) * 0.5 : undefined, "em")("padding-block", depth_r10 === 0 ? "var(--gap-default)" : undefined);
-    i0.ɵɵproperty("sdRouterLink", ctx_r4.getMenuRouterLinkOption(menu_r7))("selected", ctx_r4.getIsMenuSelected(menu_r7))("open", true);
+    i0.ɵɵproperty("sdRouterLink", ctx_r4.getMenuRouterLinkOption(menu_r7))("selected", ctx_r4.getIsMenuSelected(menu_r7))("layout", "flat");
     i0.ɵɵadvance();
     i0.ɵɵconditional(menu_r7.icon ? 1 : -1);
     i0.ɵɵadvance();
@@ -134,7 +134,7 @@ export class SdTopbarMenu {
         if (menu.url != null) {
             window.open(menu.url, "_blank");
         }
-        if (menu.children === undefined) {
+        if (menu.children == null) {
             this._dropdowns()[dropdownIndex].open.set(false);
         }
     }
@@ -145,7 +145,7 @@ export class SdTopbarMenu {
             i0.ɵɵviewQuerySignal(ctx._dropdowns, SdDropdown, 5);
         } if (rf & 2) {
             i0.ɵɵqueryAdvance();
-        } }, hostAttrs: [1, "flex-row", "gap-sm"], inputs: { menus: [1, "menus"], getMenuIsSelectedFn: [1, "getMenuIsSelectedFn"] }, decls: 4, vars: 1, consts: [["itemTpl", ""], [3, "typed"], [3, "theme"], [3, "svg"], [3, "inset"], [3, "ngTemplateOutlet", "ngTemplateOutletContext"], [3, "padding-left", "padding-block", "sdRouterLink", "selected", "open"], [3, "click", "sdRouterLink", "selected", "open"]], template: function SdTopbarMenu_Template(rf, ctx) { if (rf & 1) {
+        } }, hostAttrs: [1, "flex-row", "gap-sm"], inputs: { menus: [1, "menus"], getMenuIsSelectedFn: [1, "getMenuIsSelectedFn"] }, decls: 4, vars: 1, consts: [["itemTpl", ""], [3, "typed"], [3, "theme"], [3, "svg"], [3, "inset"], [3, "ngTemplateOutlet", "ngTemplateOutletContext"], [3, "padding-left", "padding-block", "sdRouterLink", "selected", "layout"], [3, "click", "sdRouterLink", "selected", "layout"]], template: function SdTopbarMenu_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵrepeaterCreate(0, SdTopbarMenu_For_1_Template, 9, 6, "sd-dropdown", null, _forTrack0);
             i0.ɵɵtemplate(2, SdTopbarMenu_ng_template_2_Template, 2, 0, "ng-template", 1, 0, i0.ɵɵtemplateRefExtractor);
         } if (rf & 2) {
@@ -160,7 +160,7 @@ export class SdTopbarMenu {
             SdList,
             SdListItem,
             SdButton,
-            NgIcon], styles: ["sd-topbar-menu sd-dropdown-popup sd-list[data-sd-inset=true] sd-list {\n  background: var(--trans-lightest);\n}"], encapsulation: 2, changeDetection: 0 });
+            NgIcon], styles: ["sd-topbar-menu sd-list sd-list {\n  background: var(--trans-lightest);\n}"], encapsulation: 2, changeDetection: 0 });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SdTopbarMenu, [{
         type: Component,
@@ -218,7 +218,7 @@ export class SdTopbarMenu {
           [sdRouterLink]="getMenuRouterLinkOption(menu)"
           (click)="onMenuClick(menu, dropdownIndex)"
           [selected]="getIsMenuSelected(menu)"
-          [open]="true"
+          [layout]="'flat'"
         >
           @if (menu.icon) {
             <ng-icon [svg]="menu.icon" />
@@ -240,6 +240,6 @@ export class SdTopbarMenu {
         </sd-list-item>
       }
     </ng-template>
-  `, styles: ["sd-topbar-menu sd-dropdown-popup sd-list[data-sd-inset=true] sd-list {\n  background: var(--trans-lightest);\n}"] }]
+  `, styles: ["sd-topbar-menu sd-list sd-list {\n  background: var(--trans-lightest);\n}"] }]
     }], null, { menus: [{ type: i0.Input, args: [{ isSignal: true, alias: "menus", required: false }] }], getMenuIsSelectedFn: [{ type: i0.Input, args: [{ isSignal: true, alias: "getMenuIsSelectedFn", required: false }] }], _dropdowns: [{ type: i0.ViewChildren, args: [i0.forwardRef(() => SdDropdown), { isSignal: true }] }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SdTopbarMenu, { className: "SdTopbarMenu", filePath: "packages/angular/src/layout/topbar/sd-topbar-menu.ts", lineNumber: 123, forbidOrphanRendering: true }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SdTopbarMenu, { className: "SdTopbarMenu", filePath: "packages/angular/src/layout/topbar/sd-topbar-menu.ts", lineNumber: 119 }); })();

package/dist/layout/topbar/sd-topbar-user.js

@@ -74,4 +74,4 @@ export class SdTopbarUser {
     </sd-dropdown>
   ` }]
     }], null, { menus: [{ type: i0.Input, args: [{ isSignal: true, alias: "menus", required: true }] }], _dropdown: [{ type: i0.ViewChild, args: [i0.forwardRef(() => SdDropdown), { isSignal: true }] }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SdTopbarUser, { className: "SdTopbarUser", filePath: "packages/angular/src/layout/topbar/sd-topbar-user.ts", lineNumber: 44, forbidOrphanRendering: true }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SdTopbarUser, { className: "SdTopbarUser", filePath: "packages/angular/src/layout/topbar/sd-topbar-user.ts", lineNumber: 44 }); })();

package/dist/layout/topbar/sd-topbar.js

@@ -37,7 +37,7 @@ export class SdTopbar {
             i0.ɵɵprojection(1);
         } if (rf & 2) {
             i0.ɵɵconditional(ctx.hasSidebar() ? 0 : -1);
-        } }, dependencies: [SdButton, NgIcon], styles: ["sd-topbar {\n  height: var(--topbar-height);\n  overflow-x: auto;\n  overflow-y: hidden;\n  user-select: none;\n  background: var(--control-color);\n  color: var(--text-trans-default);\n  border-bottom: 1px solid var(--border-color-lighter);\n  padding-left: var(--gap-sm);\n}\nsd-topbar > h1 {\n  padding-right: var(--gap-xl);\n}\nsd-topbar > h2 {\n  padding-right: var(--gap-xl);\n}\nsd-topbar > h3 {\n  padding-right: var(--gap-xl);\n}\nsd-topbar > h4 {\n  padding-right: var(--gap-xl);\n}\nsd-topbar > h5 {\n  padding-right: var(--gap-xl);\n}\nsd-topbar > h6 {\n  padding-right: var(--gap-xl);\n}\nsd-topbar::-webkit-scrollbar-track {\n  background-color: var(--trans-light);\n}\nsd-topbar::-webkit-scrollbar-corner {\n  background-color: var(--trans-light);\n}\nsd-topbar::-webkit-scrollbar {\n  width: var(--gap-sm);\n  height: var(--gap-sm);\n  background-color: transparent;\n}\nsd-topbar::-webkit-scrollbar-thumb {\n  background-color: var(--trans-default);\n}"], encapsulation: 2, changeDetection: 0 });
+        } }, dependencies: [SdButton, NgIcon], styles: ["sd-topbar {\n  min-height: var(--topbar-height);\n  overflow-x: auto;\n  overflow-y: hidden;\n  user-select: none;\n  background: var(--control-color);\n  color: var(--text-trans-default);\n  border-bottom: 1px solid var(--border-color-lighter);\n  padding-left: var(--gap-sm);\n}\nsd-topbar > h1 {\n  padding-right: var(--gap-xl);\n}\nsd-topbar > h2 {\n  padding-right: var(--gap-xl);\n}\nsd-topbar > h3 {\n  padding-right: var(--gap-xl);\n}\nsd-topbar > h4 {\n  padding-right: var(--gap-xl);\n}\nsd-topbar > h5 {\n  padding-right: var(--gap-xl);\n}\nsd-topbar > h6 {\n  padding-right: var(--gap-xl);\n}\nsd-topbar::-webkit-scrollbar-track {\n  background-color: var(--trans-light);\n}\nsd-topbar::-webkit-scrollbar-corner {\n  background-color: var(--trans-light);\n}\nsd-topbar::-webkit-scrollbar {\n  width: var(--gap-sm);\n  height: var(--gap-sm);\n  background-color: transparent;\n}\nsd-topbar::-webkit-scrollbar-thumb {\n  background-color: var(--trans-default);\n}"], encapsulation: 2, changeDetection: 0 });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SdTopbar, [{
         type: Component,
@@ -55,6 +55,6 @@ export class SdTopbar {
     }
     
     <ng-content />
-  `, styles: ["sd-topbar {\n  height: var(--topbar-height);\n  overflow-x: auto;\n  overflow-y: hidden;\n  user-select: none;\n  background: var(--control-color);\n  color: var(--text-trans-default);\n  border-bottom: 1px solid var(--border-color-lighter);\n  padding-left: var(--gap-sm);\n}\nsd-topbar > h1 {\n  padding-right: var(--gap-xl);\n}\nsd-topbar > h2 {\n  padding-right: var(--gap-xl);\n}\nsd-topbar > h3 {\n  padding-right: var(--gap-xl);\n}\nsd-topbar > h4 {\n  padding-right: var(--gap-xl);\n}\nsd-topbar > h5 {\n  padding-right: var(--gap-xl);\n}\nsd-topbar > h6 {\n  padding-right: var(--gap-xl);\n}\nsd-topbar::-webkit-scrollbar-track {\n  background-color: var(--trans-light);\n}\nsd-topbar::-webkit-scrollbar-corner {\n  background-color: var(--trans-light);\n}\nsd-topbar::-webkit-scrollbar {\n  width: var(--gap-sm);\n  height: var(--gap-sm);\n  background-color: transparent;\n}\nsd-topbar::-webkit-scrollbar-thumb {\n  background-color: var(--trans-default);\n}"] }]
+  `, styles: ["sd-topbar {\n  min-height: var(--topbar-height);\n  overflow-x: auto;\n  overflow-y: hidden;\n  user-select: none;\n  background: var(--control-color);\n  color: var(--text-trans-default);\n  border-bottom: 1px solid var(--border-color-lighter);\n  padding-left: var(--gap-sm);\n}\nsd-topbar > h1 {\n  padding-right: var(--gap-xl);\n}\nsd-topbar > h2 {\n  padding-right: var(--gap-xl);\n}\nsd-topbar > h3 {\n  padding-right: var(--gap-xl);\n}\nsd-topbar > h4 {\n  padding-right: var(--gap-xl);\n}\nsd-topbar > h5 {\n  padding-right: var(--gap-xl);\n}\nsd-topbar > h6 {\n  padding-right: var(--gap-xl);\n}\nsd-topbar::-webkit-scrollbar-track {\n  background-color: var(--trans-light);\n}\nsd-topbar::-webkit-scrollbar-corner {\n  background-color: var(--trans-light);\n}\nsd-topbar::-webkit-scrollbar {\n  width: var(--gap-sm);\n  height: var(--gap-sm);\n  background-color: transparent;\n}\nsd-topbar::-webkit-scrollbar-thumb {\n  background-color: var(--trans-default);\n}"] }]
     }], null, { sidebarContainer: [{ type: i0.Input, args: [{ isSignal: true, alias: "sidebarContainer", required: false }] }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SdTopbar, { className: "SdTopbar", filePath: "packages/angular/src/layout/topbar/sd-topbar.ts", lineNumber: 76, forbidOrphanRendering: true }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SdTopbar, { className: "SdTopbar", filePath: "packages/angular/src/layout/topbar/sd-topbar.ts", lineNumber: 76 }); })();

package/package.json

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

package/src/controls/button/sd-modal-select-button.ts

@@ -57,7 +57,7 @@ export type SdSelectModalInfo<T extends SdSelectModal<any>> = SdModalInfo<
         </sd-anchor>
       }
       @if (!disabled()) {
-        <sd-button [inset]="true" (click)="onSearchClick()">
+        <sd-button [inset]="true" (click)="onSearchClick($event)">
           <ng-icon [svg]="searchIcon()" />
         </sd-button>
       }
@@ -72,6 +72,8 @@ export type SdSelectModalInfo<T extends SdSelectModal<any>> = SdModalInfo<
         flex-direction: row;
         gap: var(--gap-sm);
         position: relative;
+        width: 100%;
+        min-width: 3em;
 
         border: 1px solid var(--trans-light);
         border-radius: var(--border-radius-default);
@@ -188,7 +190,10 @@ export class SdModalSelectButton<
     this.selectedItems.set([]);
   }
 
-  async onSearchClick(): Promise<void> {
+  async onSearchClick(event: MouseEvent): Promise<void> {
+    event.preventDefault();
+    event.stopPropagation();
+
     const modal = this.modal();
     const result = await this._sdModal.showAsync({
       ...modal,

package/src/controls/collapse/sd-collapse-icon.ts

@@ -8,7 +8,7 @@ import {
   ViewEncapsulation,
 } from "@angular/core";
 import { NgIcon } from "@ng-icons/core";
-import { tablerChevronRight } from "@ng-icons/tabler-icons";
+import { tablerChevronDown } from "@ng-icons/tabler-icons";
 
 @Component({
   selector: "sd-collapse-icon",
@@ -36,7 +36,7 @@ import { tablerChevronRight } from "@ng-icons/tabler-icons";
   },
 })
 export class SdCollapseIcon {
-  icon = input(tablerChevronRight);
+  icon = input(tablerChevronDown);
   open = input(false, { transform: booleanAttribute });
   openRotate = input(90, { transform: numberAttribute });
 

package/src/controls/collapse/sd-collapse.ts

@@ -11,21 +11,21 @@ import {
   viewChild,
   ViewEncapsulation,
 } from "@angular/core";
-import type { SdResizeEvent } from "../../core/events/sd-resize-event.plugin";
+import { SdResizeDirective, type SdResizeEvent } from "../../core/events/sd-resize";
 
 @Component({
   selector: "sd-collapse",
   changeDetection: ChangeDetectionStrategy.OnPush,
   encapsulation: ViewEncapsulation.None,
   standalone: true,
-  imports: [],
+  imports: [SdResizeDirective],
   template: `
     <div
       #contentEl
       class="_content"
       [style.margin-top]="contentMarginTop()"
       [style.transition]="contentTransition()"
-      (sdResize)="onContentResize($any($event))"
+      (sdResize)="onContentResize($event)"
     >
       <ng-content />
     </div>
@@ -42,8 +42,7 @@ import type { SdResizeEvent } from "../../core/events/sd-resize-event.plugin";
 export class SdCollapse {
   open = input(false, { transform: booleanAttribute });
 
-  private readonly _contentElRef =
-    viewChild.required<ElementRef<HTMLElement>>("contentEl");
+  private readonly _contentElRef = viewChild.required<ElementRef<HTMLElement>>("contentEl");
 
   contentHeight = signal(0);
 

package/src/controls/dropdown/sd-dropdown-popup.ts

@@ -1,23 +1,25 @@
 import {
   ChangeDetectionStrategy,
   Component,
+  ElementRef,
   forwardRef,
   inject,
   ViewEncapsulation,
 } from "@angular/core";
 import { SdDropdown } from "./sd-dropdown";
+import { SdResizeDirective } from "../../core/events/sd-resize";
 
 @Component({
   selector: "sd-dropdown-popup",
   changeDetection: ChangeDetectionStrategy.OnPush,
   encapsulation: ViewEncapsulation.None,
   standalone: true,
-  imports: [],
+  imports: [SdResizeDirective],
   host: {
     "(keydown)": "onKeydown($event)",
   },
   template: `
-    <div>
+    <div (sdResize)="onResize()">
       <ng-content></ng-content>
     </div>
   `,
@@ -88,8 +90,19 @@ export class SdDropdownPopup {
   private readonly _parentControl = inject<SdDropdown>(
     forwardRef(() => SdDropdown),
   );
+  private readonly _elRef = inject(ElementRef<HTMLElement>);
 
   onKeydown(event: KeyboardEvent): void {
     this._parentControl.onPopupKeydown(event);
   }
+
+  onResize(): void {
+    const el = this._elRef.nativeElement;
+    const divEl = el.firstElementChild!;
+    if (divEl.clientHeight > 300) {
+      el.style.height = "300px";
+    } else {
+      el.style.removeProperty("height");
+    }
+  }
 }

package/src/controls/dropdown/sd-dropdown.ts

@@ -208,21 +208,12 @@ export class SdDropdown {
     const leftPos = shouldPlaceLeft ? undefined : rect.left;
     const rightPos = shouldPlaceLeft ? window.innerWidth - rect.right : undefined;
 
-    // Calculate available space for popup
-    const availableHeight = shouldPlaceAbove
-      ? rect.top - gap
-      : window.innerHeight - rect.bottom - gap;
-    const availableWidth = shouldPlaceLeft ? rect.right : window.innerWidth - rect.left;
-
     Object.assign(popupEl.style, {
-      top: topPos !== undefined ? topPos + "px" : "",
-      bottom: bottomPos !== undefined ? bottomPos + "px" : "",
-      left: leftPos !== undefined ? leftPos + "px" : "",
-      right: rightPos !== undefined ? rightPos + "px" : "",
+      top: topPos != null ? topPos + "px" : "",
+      bottom: bottomPos != null ? bottomPos + "px" : "",
+      left: leftPos != null ? leftPos + "px" : "",
+      right: rightPos != null ? rightPos + "px" : "",
       minWidth: contentEl.offsetWidth + "px",
-      maxHeight: availableHeight > 0 ? availableHeight + "px" : "",
-      maxWidth: availableWidth > 0 ? availableWidth + "px" : "",
-      overflow: "auto",
       opacity: "1",
       pointerEvents: "auto",
       transform: "none",
@@ -296,9 +287,6 @@ export class SdDropdown {
         left: "",
         right: "",
         minWidth: "",
-        maxHeight: "",
-        maxWidth: "",
-        overflow: "",
         opacity: "",
         pointerEvents: "",
         transform: "",

package/src/controls/gap/sd-gap.ts

@@ -45,12 +45,12 @@ export class SdGap {
     if (this.widthPx() === 0 || this.heightPx() === 0 || this.widthEm() === 0) {
       return "none";
     } else if (
-      this.width() !== undefined ||
-      this.widthPx() !== undefined ||
-      this.widthEm() !== undefined
+      this.width() != null ||
+      this.widthPx() != null ||
+      this.widthEm() != null
     ) {
       return "inline-block";
-    } else if (this.height() !== undefined || this.heightPx() !== undefined) {
+    } else if (this.height() != null || this.heightPx() != null) {
       return "block";
     } else {
       return undefined;

package/src/controls/input/sd-date-range-picker.ts

@@ -68,14 +68,7 @@ export class SdDateRangePicker {
 
   handleDatePeriodTypeChanged(): void {
     if (this.periodType() === "월") {
-      const fromDate = this.from();
-      if (fromDate) {
-        const firstOfMonth = fromDate.setDay(1);
-        this.from.set(firstOfMonth);
-        this.to.set(firstOfMonth.addMonths(1).addDays(-1));
-      } else {
-        this.to.set(undefined);
-      }
+      this._syncMonthRange();
     } else if (this.periodType() === "일") {
       this.to.set(this.from());
     }
@@ -83,14 +76,7 @@ export class SdDateRangePicker {
 
   handleFromDateChanged(): void {
     if (this.periodType() === "월") {
-      const fromDate = this.from();
-      if (fromDate) {
-        const firstOfMonth = fromDate.setDay(1);
-        this.from.set(firstOfMonth);
-        this.to.set(firstOfMonth.addMonths(1).addDays(-1));
-      } else {
-        this.to.set(undefined);
-      }
+      this._syncMonthRange();
     } else if (this.periodType() === "일") {
       this.to.set(this.from());
     } else if (
@@ -102,4 +88,15 @@ export class SdDateRangePicker {
       this.to.set(this.from());
     }
   }
+
+  private _syncMonthRange(): void {
+    const fromDate = this.from();
+    if (fromDate) {
+      const firstOfMonth = fromDate.setDay(1);
+      this.from.set(firstOfMonth);
+      this.to.set(firstOfMonth.addMonths(1).addDays(-1));
+    } else {
+      this.to.set(undefined);
+    }
+  }
 }

package/src/controls/input/sd-numpad.ts

@@ -42,7 +42,7 @@ import { tablerArrowLeft, tablerEraser } from "@ng-icons/tabler-icons";
               <sd-button
                 [size]="'lg'"
                 [theme]="'primary'"
-                [disabled]="required() && value() === undefined"
+                [disabled]="required() && value() == undefined"
                 (click)="onButtonClick('ENT')"
               >
                 ENT

package/src/controls/input/sd-textarea.ts

@@ -204,7 +204,7 @@ export class SdTextarea {
 
       if (this.validatorFn()) {
         const message = this.validatorFn()!(this.value());
-        if (message !== undefined) {
+        if (message != null) {
           errorMessages.push(message);
         }
       }

package/src/controls/input/sd-textfield-type-handlers.ts

@@ -105,10 +105,10 @@ function createStringHandler(type: "text" | "password" | "email" | "color"): Tex
 
       if (type !== "color") {
         const str = value as string;
-        if (opts.minlength !== undefined && opts.minlength > str.length) {
+        if (opts.minlength != null && opts.minlength > str.length) {
           errors.push(`문자의 길이가 ${opts.minlength}보다 길거나 같아야 합니다.`);
         }
-        if (opts.maxlength !== undefined && opts.maxlength < str.length) {
+        if (opts.maxlength != null && opts.maxlength < str.length) {
           errors.push(`문자의 길이가 ${opts.maxlength}보다 짧거나 같아야 합니다.`);
         }