@simplysm/angular 14.0.18 → 14.0.19

package/dist/ui/navigation/topbar/sd-topbar.control.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"sd-topbar.control.d.ts","sourceRoot":"","sources":["../../../../src/ui/navigation/topbar/sd-topbar.control.ts"],"names":[],"mappings":"AAQA,OAAO,EAAE,yBAAyB,EAAE,MAAM,yCAAyC,CAAC;;AAKpF,qBA6Da,eAAe;IAC1B,OAAO,CAAC,QAAQ,CAAC,yBAAyB,CAEvC;IAEH,gBAAgB,6EAAsC;IAEtD,UAAU,0CAER;IAEF,mBAAmB,IAAI,IAAI;IAO3B,SAAS,CAAC,QAAQ,CAAC,WAAW,oXAAe;yCAlBlC,eAAe;2CAAf,eAAe;CAmB3B"}
+{"version":3,"file":"sd-topbar.control.d.ts","sourceRoot":"","sources":["../../../../src/ui/navigation/topbar/sd-topbar.control.ts"],"names":[],"mappings":"AAQA,OAAO,EAAE,yBAAyB,EAAE,MAAM,yCAAyC,CAAC;;AAKpF,qBA8Da,eAAe;IAC1B,OAAO,CAAC,QAAQ,CAAC,yBAAyB,CAEvC;IAEH,gBAAgB,6EAAsC;IAEtD,UAAU,0CAER;IAEF,mBAAmB,IAAI,IAAI;IAO3B,SAAS,CAAC,QAAQ,CAAC,WAAW,oXAAe;yCAlBlC,eAAe;2CAAf,eAAe;CAmB3B"}

package/dist/ui/navigation/topbar/sd-topbar.control.js

@@ -37,7 +37,7 @@ export class SdTopbarControl {
             i0.ɵɵprojection(1);
         } if (rf & 2) {
             i0.ɵɵconditional(ctx.hasSidebar() ? 0 : -1);
-        } }, dependencies: [SdButtonControl, 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 });
+        } }, dependencies: [SdButtonControl, 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 });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SdTopbarControl, [{
         type: Component,
@@ -53,7 +53,8 @@ export class SdTopbarControl {
         <ng-icon [svg]="tablerMenu2" />
       </sd-button>
     }
+    
     <ng-content />
-  `, 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}"] }]
+  `, 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}"] }]
     }], null, { sidebarContainer: [{ type: i0.Input, args: [{ isSignal: true, alias: "sidebarContainer", required: false }] }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SdTopbarControl, { className: "SdTopbarControl", filePath: "packages/angular/src/ui/navigation/topbar/sd-topbar.control.ts", lineNumber: 75, forbidOrphanRendering: true }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SdTopbarControl, { className: "SdTopbarControl", filePath: "packages/angular/src/ui/navigation/topbar/sd-topbar.control.ts", lineNumber: 76, forbidOrphanRendering: true }); })();

package/dist/ui/overlay/modal/sd-modal.control.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"sd-modal.control.d.ts","sourceRoot":"","sources":["../../../../src/ui/overlay/modal/sd-modal.control.ts"],"names":[],"mappings":"AAAA,OAAO,EAUL,KAAK,WAAW,EAEjB,MAAM,eAAe,CAAC;AAKvB,OAAO,wBAAwB,CAAC;;AAEhC,qBA0Ca,cAAc;IACzB,OAAO,CAAC,QAAQ,CAAC,MAAM,CAAmC;IAC1D,OAAO,CAAC,QAAQ,CAAC,eAAe,CAAwD;IACxF,OAAO,CAAC,QAAQ,CAAC,aAAa,CAAsD;IACpF,OAAO,CAAC,QAAQ,CAAC,WAAW,CAAsB;IAElD,IAAI,+CAAgB;IACpB,GAAG,0DAAwC;IAC3C,KAAK,8CAAa;IAClB,UAAU,+CAAgB;IAC1B,eAAe,+CAAgB;IAC/B,kBAAkB,+CAAe;IACjC,mBAAmB,+CAAe;IAClC,KAAK,+CAAgB;IACrB,IAAI,+CAAgB;IACpB,SAAS,+CAAgB;IACzB,OAAO,+CAAgB;IACvB,QAAQ,gFAA8D;IACtE,WAAW,0DAAwC;IACnD,UAAU,0DAAwC;IAClD,QAAQ,0DAAwC;IAChD,OAAO,0DAAwC;IAC/C,WAAW,0DAAwC;IACnD,sBAAsB,+CAAgB;IACtC,YAAY,oEAAkD;IAE9D,YAAY,iDAAkB;IAE9B,OAAO,CAAC,UAAU,CAEJ;IAEd,OAAO,CAAC,YAAY,CAUN;IAEd,OAAO,CAAC,QAAQ,CAAC,oBAAoB,CAA8B;IACnE,OAAO,CAAC,QAAQ,CAAC,kBAAkB,CAAa;;IAwDhD,iBAAiB,CAAC,KAAK,EAAE,UAAU,EAAE,GAAG,EAAE,MAAM,GAAG,IAAI;IAwBvD,iBAAiB,CAAC,KAAK,EAAE,UAAU,GAAG,IAAI;IAwB1C,eAAe,IAAI,IAAI;IAKvB,kBAAkB,IAAI,IAAI;IAI1B,eAAe,CAAC,KAAK,EAAE,aAAa,GAAG,IAAI;IAS3C,aAAa,IAAI,IAAI;IAIrB,OAAO,CAAC,aAAa;IAQrB,OAAO,CAAC,cAAc;IAuBtB,OAAO,CAAC,oBAAoB;IAa5B,OAAO,CAAC,aAAa;IAgBrB,OAAO,CAAC,YAAY;IAIpB,OAAO,CAAC,YAAY;IA4CpB,OAAO,CAAC,UAAU;YAcJ,WAAW;YAgBX,cAAc;yCArTjB,cAAc;2CAAd,cAAc;CAqU1B"}
+{"version":3,"file":"sd-modal.control.d.ts","sourceRoot":"","sources":["../../../../src/ui/overlay/modal/sd-modal.control.ts"],"names":[],"mappings":"AAAA,OAAO,EAUL,KAAK,WAAW,EAEjB,MAAM,eAAe,CAAC;AAKvB,OAAO,wBAAwB,CAAC;;AAEhC,qBAoQa,cAAc;IACzB,OAAO,CAAC,QAAQ,CAAC,MAAM,CAAmC;IAC1D,OAAO,CAAC,QAAQ,CAAC,eAAe,CAAwD;IACxF,OAAO,CAAC,QAAQ,CAAC,aAAa,CAAsD;IACpF,OAAO,CAAC,QAAQ,CAAC,WAAW,CAAsB;IAElD,IAAI,+CAAgB;IACpB,GAAG,0DAAwC;IAC3C,KAAK,8CAAa;IAClB,UAAU,+CAAgB;IAC1B,eAAe,+CAAgB;IAC/B,kBAAkB,+CAAe;IACjC,mBAAmB,+CAAe;IAClC,KAAK,+CAAgB;IACrB,IAAI,+CAAgB;IACpB,SAAS,+CAAgB;IACzB,OAAO,+CAAgB;IACvB,QAAQ,gFAA8D;IACtE,WAAW,0DAAwC;IACnD,UAAU,0DAAwC;IAClD,QAAQ,0DAAwC;IAChD,OAAO,0DAAwC;IAC/C,WAAW,0DAAwC;IACnD,sBAAsB,+CAAgB;IACtC,YAAY,oEAAkD;IAE9D,YAAY,iDAAkB;IAE9B,OAAO,CAAC,UAAU,CAEJ;IAEd,OAAO,CAAC,YAAY,CAUN;IAEd,OAAO,CAAC,QAAQ,CAAC,oBAAoB,CAA8B;IACnE,OAAO,CAAC,QAAQ,CAAC,kBAAkB,CAAa;;IA6DhD,iBAAiB,CAAC,KAAK,EAAE,UAAU,EAAE,GAAG,EAAE,MAAM,GAAG,IAAI;IAwBvD,iBAAiB,CAAC,KAAK,EAAE,UAAU,GAAG,IAAI;IAwB1C,eAAe,IAAI,IAAI;IAKvB,kBAAkB,IAAI,IAAI;IAI1B,eAAe,CAAC,KAAK,EAAE,aAAa,GAAG,IAAI;IAS3C,aAAa,IAAI,IAAI;IAIrB,OAAO,CAAC,aAAa;IAQrB,OAAO,CAAC,cAAc;IAuBtB,OAAO,CAAC,oBAAoB;IAa5B,OAAO,CAAC,aAAa;IAgBrB,OAAO,CAAC,YAAY;IAIpB,OAAO,CAAC,YAAY;IA4CpB,OAAO,CAAC,UAAU;YAcJ,WAAW;YAgBX,cAAc;yCA1TjB,cAAc;2CAAd,cAAc;CA0U1B"}

package/dist/ui/overlay/modal/sd-modal.control.js

@@ -98,6 +98,10 @@ export class SdModalControl {
     _onDocumentMouseMove;
     _onDocumentMouseUp;
     constructor() {
+        // data-sd-init: 첫 렌더 후 설정하여 CSS transition 트리거 허용
+        effect(() => {
+            this._elRef.nativeElement.setAttribute("data-sd-init", "");
+        });
         // widthPx/heightPx를 dialog 스타일에 적용
         effect(() => {
             const dialogEl = this._getDialogEl();
@@ -385,23 +389,16 @@ export class SdModalControl {
             i0.ɵɵconditional(!ctx.hideHeader() ? 2 : -1);
             i0.ɵɵadvance(3);
             i0.ɵɵconditional(ctx.resizable() ? 5 : -1);
-        } }, dependencies: [NgTemplateOutlet], encapsulation: 2, changeDetection: 0 });
+        } }, dependencies: [NgTemplateOutlet], styles: ["sd-modal {\n  display: block;\n  position: fixed;\n  z-index: var(--z-index-modal);\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  padding-top: calc(var(--topbar-height) + var(--gap-sm));\n  opacity: 0;\n  transition: opacity var(--animation-duration) ease-in-out;\n  pointer-events: none;\n}\nsd-modal > ._backdrop {\n  position: fixed;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  background: var(--trans-default);\n}\nsd-modal > ._dialog {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  margin: 0 auto;\n  width: fit-content;\n  min-width: 200px;\n  background: var(--control-color);\n  overflow: hidden;\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  border-radius: var(--border-radius-default);\n  transform: translateY(-25px);\n  transition: transform var(--animation-duration) ease-in-out;\n}\nsd-modal > ._dialog:focus {\n  outline: none;\n}\nsd-modal > ._dialog > ._header {\n  display: flex;\n  align-items: center;\n  user-select: none;\n  border-bottom: 1px solid var(--theme-gray-lightest);\n}\nsd-modal > ._dialog > ._header > ._title {\n  flex: 1;\n  padding: var(--gap-sm) var(--gap-default);\n}\nsd-modal > ._dialog > ._header > ._close-btn {\n  padding: var(--gap-sm) var(--gap-default);\n  border: none;\n  background: transparent;\n  cursor: pointer;\n  font-size: inherit;\n  color: inherit;\n}\nsd-modal > ._dialog > ._header > ._close-btn:hover {\n  background: var(--trans-lightest);\n}\nsd-modal > ._dialog > ._content {\n  flex: 1;\n  overflow: auto;\n}\nsd-modal > ._dialog > ._resize-handle {\n  position: absolute;\n}\nsd-modal > ._dialog > ._resize-handle._resize-left {\n  top: 0;\n  left: 0;\n  width: var(--gap-sm);\n  height: 100%;\n  cursor: ew-resize;\n}\nsd-modal > ._dialog > ._resize-handle._resize-right {\n  top: 0;\n  right: 0;\n  width: var(--gap-sm);\n  height: 100%;\n  cursor: ew-resize;\n}\nsd-modal > ._dialog > ._resize-handle._resize-top {\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: var(--gap-sm);\n  cursor: ns-resize;\n}\nsd-modal > ._dialog > ._resize-handle._resize-top-right {\n  right: 0;\n  top: 0;\n  width: var(--gap-sm);\n  height: var(--gap-sm);\n  z-index: 1;\n  cursor: nesw-resize;\n}\nsd-modal > ._dialog > ._resize-handle._resize-top-left {\n  left: 0;\n  top: 0;\n  width: var(--gap-sm);\n  height: var(--gap-sm);\n  cursor: nwse-resize;\n  z-index: 1;\n}\nsd-modal > ._dialog > ._resize-handle._resize-bottom {\n  bottom: 0;\n  left: 0;\n  width: 100%;\n  height: var(--gap-sm);\n  cursor: ns-resize;\n}\nsd-modal > ._dialog > ._resize-handle._resize-bottom-right {\n  right: 0;\n  bottom: 0;\n  width: var(--gap-sm);\n  height: var(--gap-sm);\n  z-index: 1;\n  cursor: nwse-resize;\n}\nsd-modal > ._dialog > ._resize-handle._resize-bottom-left {\n  left: 0;\n  bottom: 0;\n  width: var(--gap-sm);\n  height: var(--gap-sm);\n  cursor: nesw-resize;\n  z-index: 1;\n}\nsd-modal[data-sd-open][data-sd-init] {\n  opacity: 1;\n  pointer-events: auto;\n}\nsd-modal[data-sd-open][data-sd-init] > ._dialog {\n  transform: none;\n}\nsd-modal[data-sd-float] {\n  pointer-events: none;\n}\nsd-modal[data-sd-float] > ._backdrop {\n  display: none;\n}\nsd-modal[data-sd-float] > ._dialog {\n  pointer-events: auto;\n  opacity: 0;\n  box-shadow: 0 calc(4 * var(--elevation-size)) calc(4 * 4 * var(--elevation-size)) var(--trans-lighter), 0 var(--elevation-size) var(--elevation-size) var(--trans-lighter);\n  border: 1px solid var(--theme-gray-lighter);\n}\nsd-modal[data-sd-float] > ._dialog:focus {\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}\nsd-modal[data-sd-float][data-sd-open][data-sd-init] {\n  pointer-events: none;\n}\nsd-modal[data-sd-float][data-sd-open][data-sd-init] > ._dialog {\n  pointer-events: auto;\n  opacity: 1;\n}\nsd-modal[data-sd-position=bottom-right] > ._dialog {\n  position: absolute;\n  right: calc(var(--gap-xxl) * 2);\n  bottom: var(--gap-xxl);\n}\nsd-modal[data-sd-position=top-right] > ._dialog {\n  position: absolute;\n  right: var(--gap-xxl);\n  top: var(--gap-xxl);\n}\nsd-modal[data-sd-fill] {\n  padding-top: 0;\n}\nsd-modal[data-sd-fill] > ._dialog {\n  width: 100%;\n  height: 100%;\n  border: none;\n  border-radius: 0;\n}\nsd-modal[data-sd-fill] > ._dialog > ._header {\n  background: transparent;\n  color: var(--text-trans-lighter);\n}"], encapsulation: 2, changeDetection: 0 });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SdModalControl, [{
         type: Component,
-        args: [{
-                selector: "sd-modal",
-                changeDetection: ChangeDetectionStrategy.OnPush,
-                encapsulation: ViewEncapsulation.None,
-                standalone: true,
-                imports: [NgTemplateOutlet],
-                host: {
+        args: [{ selector: "sd-modal", changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, standalone: true, imports: [NgTemplateOutlet], host: {
                     "[attr.data-sd-open]": "open() || undefined",
                     "[attr.data-sd-float]": "float() || undefined",
                     "[attr.data-sd-fill]": "fill() || undefined",
                     "[attr.data-sd-position]": "position() || undefined",
-                },
-                template: `
+                }, template: `
     <div class="_backdrop" (mousedown)="onBackdropClick()"></div>
     <div class="_dialog" tabindex="-1"
          (keydown)="onDialogKeydown($event)"
@@ -429,7 +426,6 @@ export class SdModalControl {
         <div class="_resize-handle _resize-bottom-right" data-resize-dir="bottom-right" (mousedown)="onResizeMouseDown($event, 'bottom-right')"></div>
       }
     </div>
-  `,
-            }]
+  `, styles: ["sd-modal {\n  display: block;\n  position: fixed;\n  z-index: var(--z-index-modal);\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  padding-top: calc(var(--topbar-height) + var(--gap-sm));\n  opacity: 0;\n  transition: opacity var(--animation-duration) ease-in-out;\n  pointer-events: none;\n}\nsd-modal > ._backdrop {\n  position: fixed;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  background: var(--trans-default);\n}\nsd-modal > ._dialog {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  margin: 0 auto;\n  width: fit-content;\n  min-width: 200px;\n  background: var(--control-color);\n  overflow: hidden;\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  border-radius: var(--border-radius-default);\n  transform: translateY(-25px);\n  transition: transform var(--animation-duration) ease-in-out;\n}\nsd-modal > ._dialog:focus {\n  outline: none;\n}\nsd-modal > ._dialog > ._header {\n  display: flex;\n  align-items: center;\n  user-select: none;\n  border-bottom: 1px solid var(--theme-gray-lightest);\n}\nsd-modal > ._dialog > ._header > ._title {\n  flex: 1;\n  padding: var(--gap-sm) var(--gap-default);\n}\nsd-modal > ._dialog > ._header > ._close-btn {\n  padding: var(--gap-sm) var(--gap-default);\n  border: none;\n  background: transparent;\n  cursor: pointer;\n  font-size: inherit;\n  color: inherit;\n}\nsd-modal > ._dialog > ._header > ._close-btn:hover {\n  background: var(--trans-lightest);\n}\nsd-modal > ._dialog > ._content {\n  flex: 1;\n  overflow: auto;\n}\nsd-modal > ._dialog > ._resize-handle {\n  position: absolute;\n}\nsd-modal > ._dialog > ._resize-handle._resize-left {\n  top: 0;\n  left: 0;\n  width: var(--gap-sm);\n  height: 100%;\n  cursor: ew-resize;\n}\nsd-modal > ._dialog > ._resize-handle._resize-right {\n  top: 0;\n  right: 0;\n  width: var(--gap-sm);\n  height: 100%;\n  cursor: ew-resize;\n}\nsd-modal > ._dialog > ._resize-handle._resize-top {\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: var(--gap-sm);\n  cursor: ns-resize;\n}\nsd-modal > ._dialog > ._resize-handle._resize-top-right {\n  right: 0;\n  top: 0;\n  width: var(--gap-sm);\n  height: var(--gap-sm);\n  z-index: 1;\n  cursor: nesw-resize;\n}\nsd-modal > ._dialog > ._resize-handle._resize-top-left {\n  left: 0;\n  top: 0;\n  width: var(--gap-sm);\n  height: var(--gap-sm);\n  cursor: nwse-resize;\n  z-index: 1;\n}\nsd-modal > ._dialog > ._resize-handle._resize-bottom {\n  bottom: 0;\n  left: 0;\n  width: 100%;\n  height: var(--gap-sm);\n  cursor: ns-resize;\n}\nsd-modal > ._dialog > ._resize-handle._resize-bottom-right {\n  right: 0;\n  bottom: 0;\n  width: var(--gap-sm);\n  height: var(--gap-sm);\n  z-index: 1;\n  cursor: nwse-resize;\n}\nsd-modal > ._dialog > ._resize-handle._resize-bottom-left {\n  left: 0;\n  bottom: 0;\n  width: var(--gap-sm);\n  height: var(--gap-sm);\n  cursor: nesw-resize;\n  z-index: 1;\n}\nsd-modal[data-sd-open][data-sd-init] {\n  opacity: 1;\n  pointer-events: auto;\n}\nsd-modal[data-sd-open][data-sd-init] > ._dialog {\n  transform: none;\n}\nsd-modal[data-sd-float] {\n  pointer-events: none;\n}\nsd-modal[data-sd-float] > ._backdrop {\n  display: none;\n}\nsd-modal[data-sd-float] > ._dialog {\n  pointer-events: auto;\n  opacity: 0;\n  box-shadow: 0 calc(4 * var(--elevation-size)) calc(4 * 4 * var(--elevation-size)) var(--trans-lighter), 0 var(--elevation-size) var(--elevation-size) var(--trans-lighter);\n  border: 1px solid var(--theme-gray-lighter);\n}\nsd-modal[data-sd-float] > ._dialog:focus {\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}\nsd-modal[data-sd-float][data-sd-open][data-sd-init] {\n  pointer-events: none;\n}\nsd-modal[data-sd-float][data-sd-open][data-sd-init] > ._dialog {\n  pointer-events: auto;\n  opacity: 1;\n}\nsd-modal[data-sd-position=bottom-right] > ._dialog {\n  position: absolute;\n  right: calc(var(--gap-xxl) * 2);\n  bottom: var(--gap-xxl);\n}\nsd-modal[data-sd-position=top-right] > ._dialog {\n  position: absolute;\n  right: var(--gap-xxl);\n  top: var(--gap-xxl);\n}\nsd-modal[data-sd-fill] {\n  padding-top: 0;\n}\nsd-modal[data-sd-fill] > ._dialog {\n  width: 100%;\n  height: 100%;\n  border: none;\n  border-radius: 0;\n}\nsd-modal[data-sd-fill] > ._dialog > ._header {\n  background: transparent;\n  color: var(--text-trans-lighter);\n}"] }]
     }], () => [], { open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }], key: [{ type: i0.Input, args: [{ isSignal: true, alias: "key", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], hideHeader: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideHeader", required: false }] }], hideCloseButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideCloseButton", required: false }] }], useCloseByBackdrop: [{ type: i0.Input, args: [{ isSignal: true, alias: "useCloseByBackdrop", required: false }] }], useCloseByEscapeKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "useCloseByEscapeKey", required: false }] }], float: [{ type: i0.Input, args: [{ isSignal: true, alias: "float", required: false }] }], fill: [{ type: i0.Input, args: [{ isSignal: true, alias: "fill", required: false }] }], resizable: [{ type: i0.Input, args: [{ isSignal: true, alias: "resizable", required: false }] }], movable: [{ type: i0.Input, args: [{ isSignal: true, alias: "movable", required: false }] }], position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }], minHeightPx: [{ type: i0.Input, args: [{ isSignal: true, alias: "minHeightPx", required: false }] }], minWidthPx: [{ type: i0.Input, args: [{ isSignal: true, alias: "minWidthPx", required: false }] }], heightPx: [{ type: i0.Input, args: [{ isSignal: true, alias: "heightPx", required: false }] }], widthPx: [{ type: i0.Input, args: [{ isSignal: true, alias: "widthPx", required: false }] }], headerStyle: [{ type: i0.Input, args: [{ isSignal: true, alias: "headerStyle", required: false }] }], noFirstControlFocusing: [{ type: i0.Input, args: [{ isSignal: true, alias: "noFirstControlFocusing", required: false }] }], actionTplRef: [{ type: i0.Input, args: [{ isSignal: true, alias: "actionTplRef", required: false }] }], closeRequest: [{ type: i0.Output, args: ["closeRequest"] }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SdModalControl, { className: "SdModalControl", filePath: "packages/angular/src/ui/overlay/modal/sd-modal.control.ts", lineNumber: 62, forbidOrphanRendering: true }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SdModalControl, { className: "SdModalControl", filePath: "packages/angular/src/ui/overlay/modal/sd-modal.control.ts", lineNumber: 280, forbidOrphanRendering: true }); })();

package/dist/ui/overlay/modal/sd-modal.provider.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"sd-modal.provider.d.ts","sourceRoot":"","sources":["../../../../src/ui/overlay/modal/sd-modal.provider.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"sd-modal.provider.d.ts","sourceRoot":"","sources":["../../../../src/ui/overlay/modal/sd-modal.provider.ts"],"names":[],"mappings":"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"}

package/dist/ui/overlay/modal/sd-modal.provider.js

@@ -110,23 +110,35 @@ export class SdModalProvider {
             const cleanup = (result) => {
                 closeSub?.unsubscribe();
                 closeRequestSub?.unsubscribe();
-                // DOM에서 제거
+                // 닫힘 애니메이션 트리거: open(false) → CSS transition 시작
+                modalRef.instance.open.set(false);
                 const modalEl = modalRef.location.nativeElement;
-                if (modalEl.parentNode !== null) {
-                    modalEl.parentNode.removeChild(modalEl);
+                const doDestroy = () => {
+                    // DOM에서 제거
+                    if (modalEl.parentNode !== null) {
+                        modalEl.parentNode.removeChild(modalEl);
+                    }
+                    // 뷰 분리 + 파괴
+                    this._appRef.detachView(modalRef.hostView);
+                    this._appRef.detachView(contentRef.hostView);
+                    modalRef.destroy();
+                    contentRef.destroy();
+                    // modalCount 감소
+                    this.modalCount.update((v) => v - 1);
+                    // 포커스 복귀
+                    if (prevActiveEl !== null && prevActiveEl.isConnected) {
+                        prevActiveEl.focus();
+                    }
+                    resolve(result);
+                };
+                // transition duration 확인 후 대기 또는 즉시 destroy
+                const duration = parseFloat(getComputedStyle(modalEl).transitionDuration || "0");
+                if (duration > 0) {
+                    modalEl.addEventListener("transitionend", doDestroy, { once: true });
                 }
-                // 뷰 분리 + 파괴
-                this._appRef.detachView(modalRef.hostView);
-                this._appRef.detachView(contentRef.hostView);
-                modalRef.destroy();
-                contentRef.destroy();
-                // modalCount 감소
-                this.modalCount.update((v) => v - 1);
-                // 포커스 복귀
-                if (prevActiveEl !== null && prevActiveEl.isConnected) {
-                    prevActiveEl.focus();
+                else {
+                    doDestroy();
                 }
-                resolve(result);
             };
             // 10. close output 구독 (컨텐츠 컴포넌트가 직접 close.emit 호출)
             closeSub = outputToObservable(contentRef.instance.close).subscribe((result) => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@simplysm/angular",
-  "version": "14.0.18",
+  "version": "14.0.19",
   "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.18",
-    "@simplysm/core-common": "14.0.18",
-    "@simplysm/service-common": "14.0.18",
-    "@simplysm/service-client": "14.0.18"
+    "@simplysm/core-common": "14.0.19",
+    "@simplysm/core-browser": "14.0.19",
+    "@simplysm/service-client": "14.0.19",
+    "@simplysm/service-common": "14.0.19"
   },
   "devDependencies": {
     "@angular/compiler": "^21.2.7",

package/src/ui/navigation/topbar/sd-topbar.control.ts

@@ -30,12 +30,13 @@ import { tablerMenu2 } from "@ng-icons/tabler-icons";
         <ng-icon [svg]="tablerMenu2" />
       </sd-button>
     }
+    
     <ng-content />
   `,
   styles: [
     /* language=SCSS */ `
       sd-topbar {
-        min-height: var(--topbar-height);
+        height: var(--topbar-height);
         overflow-x: auto;
         overflow-y: hidden;
         user-select: none;

package/src/ui/overlay/modal/sd-modal.control.ts

@@ -58,6 +58,224 @@ import "@simplysm/core-browser";
       }
     </div>
   `,
+  styles: [
+    /* language=SCSS */ `
+      @use "../../../../scss/commons/mixins";
+
+      sd-modal {
+        display: block;
+        position: fixed;
+        z-index: var(--z-index-modal);
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        padding-top: calc(var(--topbar-height) + var(--gap-sm));
+        opacity: 0;
+        transition: opacity var(--animation-duration) ease-in-out;
+        pointer-events: none;
+
+        > ._backdrop {
+          position: fixed;
+          top: 0;
+          left: 0;
+          width: 100%;
+          height: 100%;
+          background: var(--trans-default);
+        }
+
+        > ._dialog {
+          position: relative;
+          display: flex;
+          flex-direction: column;
+          margin: 0 auto;
+          width: fit-content;
+          min-width: 200px;
+          background: var(--control-color);
+          overflow: hidden;
+          @include mixins.elevation(16);
+          border-radius: var(--border-radius-default);
+          transform: translateY(-25px);
+          transition: transform var(--animation-duration) ease-in-out;
+
+          &:focus {
+            outline: none;
+          }
+
+          > ._header {
+            display: flex;
+            align-items: center;
+            user-select: none;
+            border-bottom: 1px solid var(--theme-gray-lightest);
+
+            > ._title {
+              flex: 1;
+              padding: var(--gap-sm) var(--gap-default);
+            }
+
+            > ._close-btn {
+              padding: var(--gap-sm) var(--gap-default);
+              border: none;
+              background: transparent;
+              cursor: pointer;
+              font-size: inherit;
+              color: inherit;
+
+              &:hover {
+                background: var(--trans-lightest);
+              }
+            }
+          }
+
+          > ._content {
+            flex: 1;
+            overflow: auto;
+          }
+
+          > ._resize-handle {
+            position: absolute;
+
+            &._resize-left {
+              top: 0;
+              left: 0;
+              width: var(--gap-sm);
+              height: 100%;
+              cursor: ew-resize;
+            }
+
+            &._resize-right {
+              top: 0;
+              right: 0;
+              width: var(--gap-sm);
+              height: 100%;
+              cursor: ew-resize;
+            }
+
+            &._resize-top {
+              top: 0;
+              left: 0;
+              width: 100%;
+              height: var(--gap-sm);
+              cursor: ns-resize;
+            }
+
+            &._resize-top-right {
+              right: 0;
+              top: 0;
+              width: var(--gap-sm);
+              height: var(--gap-sm);
+              z-index: 1;
+              cursor: nesw-resize;
+            }
+
+            &._resize-top-left {
+              left: 0;
+              top: 0;
+              width: var(--gap-sm);
+              height: var(--gap-sm);
+              cursor: nwse-resize;
+              z-index: 1;
+            }
+
+            &._resize-bottom {
+              bottom: 0;
+              left: 0;
+              width: 100%;
+              height: var(--gap-sm);
+              cursor: ns-resize;
+            }
+
+            &._resize-bottom-right {
+              right: 0;
+              bottom: 0;
+              width: var(--gap-sm);
+              height: var(--gap-sm);
+              z-index: 1;
+              cursor: nwse-resize;
+            }
+
+            &._resize-bottom-left {
+              left: 0;
+              bottom: 0;
+              width: var(--gap-sm);
+              height: var(--gap-sm);
+              cursor: nesw-resize;
+              z-index: 1;
+            }
+          }
+        }
+
+        &[data-sd-open][data-sd-init] {
+          opacity: 1;
+          pointer-events: auto;
+
+          > ._dialog {
+            transform: none;
+          }
+        }
+
+        &[data-sd-float] {
+          pointer-events: none;
+
+          > ._backdrop {
+            display: none;
+          }
+
+          > ._dialog {
+            pointer-events: auto;
+            opacity: 0;
+            @include mixins.elevation(4);
+            border: 1px solid var(--theme-gray-lighter);
+
+            &:focus {
+              @include mixins.elevation(16);
+            }
+          }
+
+          &[data-sd-open][data-sd-init] {
+            pointer-events: none;
+
+            > ._dialog {
+              pointer-events: auto;
+              opacity: 1;
+            }
+          }
+        }
+
+        &[data-sd-position="bottom-right"] {
+          > ._dialog {
+            position: absolute;
+            right: calc(var(--gap-xxl) * 2);
+            bottom: var(--gap-xxl);
+          }
+        }
+
+        &[data-sd-position="top-right"] {
+          > ._dialog {
+            position: absolute;
+            right: var(--gap-xxl);
+            top: var(--gap-xxl);
+          }
+        }
+
+        &[data-sd-fill] {
+          padding-top: 0;
+
+          > ._dialog {
+            width: 100%;
+            height: 100%;
+            border: none;
+            border-radius: 0;
+
+            > ._header {
+              background: transparent;
+              color: var(--text-trans-lighter);
+            }
+          }
+        }
+      }
+    `,
+  ],
 })
 export class SdModalControl {
   private readonly _elRef = inject(ElementRef<HTMLElement>);
@@ -107,6 +325,11 @@ export class SdModalControl {
   private readonly _onDocumentMouseUp: () => void;
 
   constructor() {
+    // data-sd-init: 첫 렌더 후 설정하여 CSS transition 트리거 허용
+    effect(() => {
+      this._elRef.nativeElement.setAttribute("data-sd-init", "");
+    });
+
     // widthPx/heightPx를 dialog 스타일에 적용
     effect(() => {
       const dialogEl = this._getDialogEl();

package/src/ui/overlay/modal/sd-modal.provider.ts

@@ -192,27 +192,41 @@ export class SdModalProvider {
         closeSub?.unsubscribe();
         closeRequestSub?.unsubscribe();
 
-        // DOM에서 제거
+        // 닫힘 애니메이션 트리거: open(false) → CSS transition 시작
+        modalRef.instance.open.set(false);
+
         const modalEl = modalRef.location.nativeElement as HTMLElement;
-        if (modalEl.parentNode !== null) {
-          modalEl.parentNode.removeChild(modalEl);
-        }
 
-        // 뷰 분리 + 파괴
-        this._appRef.detachView(modalRef.hostView);
-        this._appRef.detachView(contentRef.hostView);
-        modalRef.destroy();
-        contentRef.destroy();
+        const doDestroy = () => {
+          // DOM에서 제거
+          if (modalEl.parentNode !== null) {
+            modalEl.parentNode.removeChild(modalEl);
+          }
 
-        // modalCount 감소
-        this.modalCount.update((v) => v - 1);
+          // 뷰 분리 + 파괴
+          this._appRef.detachView(modalRef.hostView);
+          this._appRef.detachView(contentRef.hostView);
+          modalRef.destroy();
+          contentRef.destroy();
 
-        // 포커스 복귀
-        if (prevActiveEl !== null && prevActiveEl.isConnected) {
-          prevActiveEl.focus();
-        }
+          // modalCount 감소
+          this.modalCount.update((v) => v - 1);
 
-        resolve(result);
+          // 포커스 복귀
+          if (prevActiveEl !== null && prevActiveEl.isConnected) {
+            prevActiveEl.focus();
+          }
+
+          resolve(result);
+        };
+
+        // transition duration 확인 후 대기 또는 즉시 destroy
+        const duration = parseFloat(getComputedStyle(modalEl).transitionDuration || "0");
+        if (duration > 0) {
+          modalEl.addEventListener("transitionend", doDestroy, { once: true });
+        } else {
+          doDestroy();
+        }
       };
 
       // 10. close output 구독 (컨텐츠 컴포넌트가 직접 close.emit 호출)