@simplysm/angular 14.0.41 → 14.0.43

package/src/core/modal/injectDragResize.ts

@@ -30,10 +30,10 @@ export function injectDragResize(opt: DragResizeOptions): {
     | undefined;
 
   function applyDrag(event: MouseEvent): void {
-    if (dragState === undefined) return;
+    if (dragState == null) return;
 
     const dialogEl = opt.getDialogEl();
-    if (dialogEl === null) return;
+    if (dialogEl == null) return;
 
     const dx = event.clientX - dragState.startX;
     const dy = event.clientY - dragState.startY;
@@ -43,10 +43,10 @@ export function injectDragResize(opt: DragResizeOptions): {
   }
 
   function applyResize(event: MouseEvent): void {
-    if (resizeState === undefined) return;
+    if (resizeState == null) return;
 
     const dialogEl = opt.getDialogEl();
-    if (dialogEl === null) return;
+    if (dialogEl == null) return;
 
     const dx = event.clientX - resizeState.startX;
     const dy = event.clientY - resizeState.startY;
@@ -86,16 +86,16 @@ export function injectDragResize(opt: DragResizeOptions): {
   }
 
   function onDocumentMouseMove(event: MouseEvent): void {
-    if (resizeState !== undefined) {
+    if (resizeState != null) {
       applyResize(event);
     }
-    if (dragState !== undefined) {
+    if (dragState != null) {
       applyDrag(event);
     }
   }
 
   function onDocumentMouseUp(): void {
-    const hadState = resizeState !== undefined || dragState !== undefined;
+    const hadState = resizeState != null || dragState != null;
     resizeState = undefined;
     dragState = undefined;
     document.removeEventListener("mousemove", onDocumentMouseMove);
@@ -114,7 +114,7 @@ export function injectDragResize(opt: DragResizeOptions): {
 
   function startDrag(event: MouseEvent): void {
     const dialogEl = opt.getDialogEl();
-    if (dialogEl === null) return;
+    if (dialogEl == null) return;
 
     const dialogRect = dialogEl.getBoundingClientRect();
     const parentRect = getParentRect(dialogEl);
@@ -131,7 +131,7 @@ export function injectDragResize(opt: DragResizeOptions): {
 
   function startResize(event: MouseEvent, dir: string): void {
     const dialogEl = opt.getDialogEl();
-    if (dialogEl === null) return;
+    if (dialogEl == null) return;
 
     const dialogRect = dialogEl.getBoundingClientRect();
     const parentRect = getParentRect(dialogEl);

package/src/core/modal/injectFocusTrap.ts

@@ -10,7 +10,7 @@ export function injectFocusTrap(): {
     const result: HTMLElement[] = [];
     const walker = document.createTreeWalker(container, NodeFilter.SHOW_ELEMENT);
     let node = walker.nextNode();
-    while (node !== null) {
+    while (node != null) {
       if (node instanceof HTMLElement && isTabbable(node)) {
         result.push(node);
       }

package/src/core/modal/sd-modal.provider.ts

@@ -56,6 +56,7 @@ export interface SdModalOptions {
   key?: string;
   hideHeader?: boolean;
   hideCloseButton?: boolean;
+  headerStyle?: string;
   useCloseByBackdrop?: boolean;
   useCloseByEscapeKey?: boolean;
   float?: boolean;
@@ -124,9 +125,9 @@ export class SdModalProvider {
 
       // 6. 옵션 바인딩
       modalRef.setInput("title", modal.title);
-      if (options !== undefined) {
+      if (options != null) {
         for (const [key, value] of Object.entries(options)) {
-          if (value !== undefined && key !== "noFirstControlFocusing") {
+          if (value != null && key !== "noFirstControlFocusing") {
             modalRef.setInput(key, value);
           }
         }
@@ -173,7 +174,7 @@ export class SdModalProvider {
           // 컨텐츠 영역에서 첫 탭 이동 가능 요소 검색
           const contentEl = modalEl.querySelector("._content");
           const firstTabbable = contentEl?.findFirstTabbableChild();
-          if (firstTabbable !== undefined) {
+          if (firstTabbable != null) {
             firstTabbable.focus();
           } else {
             dialogEl.focus();
@@ -196,7 +197,7 @@ export class SdModalProvider {
 
         const doDestroy = () => {
           // DOM에서 제거
-          if (modalEl.parentNode !== null) {
+          if (modalEl.parentNode != null) {
             modalEl.parentNode.removeChild(modalEl);
           }
 
@@ -210,7 +211,7 @@ export class SdModalProvider {
           this.modalCount.update((v) => v - 1);
 
           // 포커스 복귀
-          if (prevActiveEl !== null && prevActiveEl.isConnected) {
+          if (prevActiveEl != null && prevActiveEl.isConnected) {
             prevActiveEl.focus();
           }
 

package/src/core/modal/sd-modal.ts

@@ -18,6 +18,8 @@ import { SdActivatedModalProvider } from "./sd-activated-modal.provider";
 import { SdSystemConfigProvider } from "../config/sd-system-config.provider";
 import { injectFocusTrap } from "./injectFocusTrap";
 import { injectDragResize } from "./injectDragResize";
+import { SdAnchor } from "../../controls/button/sd-anchor";
+import { SdResizeDirective, type SdResizeEvent } from "../events/sd-resize";
 import "@simplysm/core-browser";
 
 @Component({
@@ -25,39 +27,86 @@ import "@simplysm/core-browser";
   changeDetection: ChangeDetectionStrategy.OnPush,
   encapsulation: ViewEncapsulation.None,
   standalone: true,
-  imports: [NgTemplateOutlet, NgIcon],
+  imports: [NgTemplateOutlet, NgIcon, SdAnchor, SdResizeDirective],
+  hostDirectives: [{ directive: SdResizeDirective, outputs: ["sdResize"] }],
   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",
+    "(sdResize)": "onHostResize($event)",
+    "(window:resize)": "onWindowResize()",
   },
   template: `
-    <div class="_backdrop" (mousedown)="onBackdropClick()"></div>
-    <div class="_dialog" tabindex="-1"
-         (keydown)="onDialogKeydown($event)"
-         (focus)="onDialogFocus()">
+    <div
+      class="_backdrop"
+      tabindex="-1"
+      role="button"
+      (click)="onBackdropClick()"
+      (keydown.enter)="onBackdropClick()"
+    ></div>
+    <div
+      class="_dialog"
+      tabindex="-1"
+      (keydown)="onDialogKeydown($event)"
+      (focus)="onDialogFocus()"
+      (sdResize)="onDialogResize($event)"
+    >
       @if (!hideHeader()) {
-        <div class="_header" (mousedown)="onHeaderMouseDown($event)">
-          <span class="_title">{{ title() }}</span>
+        <div class="_header" (mousedown)="onHeaderMouseDown($event)" [style]="headerStyle()">
+          <h5 class="_title">{{ title() }}</h5>
           @if (actionTplRef()) {
             <ng-container *ngTemplateOutlet="actionTplRef()!" />
           }
           @if (!hideCloseButton()) {
-            <button class="_close-btn" (click)="onCloseButtonClick()"><ng-icon [svg]="tablerX" /></button>
+            <sd-anchor [theme]="'gray'" class="_close-btn" (click)="onCloseButtonClick()">
+              <ng-icon [svg]="tablerX" />
+            </sd-anchor>
           }
         </div>
       }
       <div class="_content"><ng-content /></div>
       @if (resizable()) {
-        <div class="_resize-handle _resize-top" data-resize-dir="top" (mousedown)="onResizeMouseDown($event, 'top')"></div>
-        <div class="_resize-handle _resize-bottom" data-resize-dir="bottom" (mousedown)="onResizeMouseDown($event, 'bottom')"></div>
-        <div class="_resize-handle _resize-left" data-resize-dir="left" (mousedown)="onResizeMouseDown($event, 'left')"></div>
-        <div class="_resize-handle _resize-right" data-resize-dir="right" (mousedown)="onResizeMouseDown($event, 'right')"></div>
-        <div class="_resize-handle _resize-top-left" data-resize-dir="top-left" (mousedown)="onResizeMouseDown($event, 'top-left')"></div>
-        <div class="_resize-handle _resize-top-right" data-resize-dir="top-right" (mousedown)="onResizeMouseDown($event, 'top-right')"></div>
-        <div class="_resize-handle _resize-bottom-left" data-resize-dir="bottom-left" (mousedown)="onResizeMouseDown($event, 'bottom-left')"></div>
-        <div class="_resize-handle _resize-bottom-right" data-resize-dir="bottom-right" (mousedown)="onResizeMouseDown($event, 'bottom-right')"></div>
+        <div
+          class="_resize-handle _resize-top"
+          data-resize-dir="top"
+          (mousedown)="onResizeMouseDown($event, 'top')"
+        ></div>
+        <div
+          class="_resize-handle _resize-bottom"
+          data-resize-dir="bottom"
+          (mousedown)="onResizeMouseDown($event, 'bottom')"
+        ></div>
+        <div
+          class="_resize-handle _resize-left"
+          data-resize-dir="left"
+          (mousedown)="onResizeMouseDown($event, 'left')"
+        ></div>
+        <div
+          class="_resize-handle _resize-right"
+          data-resize-dir="right"
+          (mousedown)="onResizeMouseDown($event, 'right')"
+        ></div>
+        <div
+          class="_resize-handle _resize-top-left"
+          data-resize-dir="top-left"
+          (mousedown)="onResizeMouseDown($event, 'top-left')"
+        ></div>
+        <div
+          class="_resize-handle _resize-top-right"
+          data-resize-dir="top-right"
+          (mousedown)="onResizeMouseDown($event, 'top-right')"
+        ></div>
+        <div
+          class="_resize-handle _resize-bottom-left"
+          data-resize-dir="bottom-left"
+          (mousedown)="onResizeMouseDown($event, 'bottom-left')"
+        ></div>
+        <div
+          class="_resize-handle _resize-bottom-right"
+          data-resize-dir="bottom-right"
+          (mousedown)="onResizeMouseDown($event, 'bottom-right')"
+        ></div>
       }
     </div>
   `,
@@ -117,19 +166,7 @@ import "@simplysm/core-browser";
             }
 
             > ._close-btn {
-              display: flex;
-              align-items: center;
-              justify-content: center;
               padding: var(--gap-sm) var(--gap-default);
-              border: none;
-              background: transparent;
-              cursor: pointer;
-              font-size: inherit;
-              color: inherit;
-
-              &:hover {
-                background: var(--trans-lightest);
-              }
             }
           }
 
@@ -297,6 +334,7 @@ export class SdModal {
   title = input("");
   hideHeader = input(false);
   hideCloseButton = input(false);
+  headerStyle = input<string | undefined>(undefined);
   useCloseByBackdrop = input(true);
   useCloseByEscapeKey = input(true);
   float = input(false);
@@ -328,16 +366,16 @@ export class SdModal {
     // widthPx/heightPx를 dialog 스타일에 적용
     effect(() => {
       const dialogEl = this._getDialogEl();
-      if (dialogEl === null) return;
+      if (dialogEl == null) return;
 
       const w = this.widthPx();
       const h = this.heightPx();
-      if (w !== undefined) {
+      if (w != null) {
         dialogEl.style.width = `${w}px`;
       } else {
         dialogEl.style.width = "";
       }
-      if (h !== undefined) {
+      if (h != null) {
         dialogEl.style.height = `${h}px`;
       } else {
         dialogEl.style.height = "";
@@ -347,11 +385,10 @@ export class SdModal {
     // key 기반 설정 복원
     effect(() => {
       const k = this.key();
-      if (k === undefined || this._sdSystemConfig == null) return;
+      if (k == null || this._sdSystemConfig == null) return;
 
       void this._restoreConfig(k).catch((err) => this._errorHandler.handleError(err));
     });
-
   }
 
   onResizeMouseDown(event: MouseEvent, dir: string): void {
@@ -361,7 +398,7 @@ export class SdModal {
 
   onHeaderMouseDown(event: MouseEvent): void {
     if (!this.movable()) return;
-    if ((event.target as HTMLElement).closest("button") !== null) return;
+    if ((event.target as HTMLElement).closest("button, sd-anchor") != null) return;
     event.preventDefault();
     this._dragResize.startDrag(event);
   }
@@ -388,8 +425,30 @@ export class SdModal {
     this._bringToFront();
   }
 
+  onHostResize(event: SdResizeEvent): void {
+    if (event.heightChanged) this._calcHeight();
+    if (event.widthChanged) this._calcWidth();
+  }
+
+  onDialogResize(event: SdResizeEvent): void {
+    if (event.heightChanged) this._calcHeight();
+    if (event.widthChanged) this._calcWidth();
+  }
+
+  onWindowResize(): void {
+    const dialogEl = this._getDialogEl();
+    if (dialogEl == null) return;
+    const hostEl = this._elRef.nativeElement;
+    if (dialogEl.offsetLeft > hostEl.offsetWidth - 100) {
+      dialogEl.style.left = hostEl.offsetWidth - 100 + "px";
+    }
+    if (dialogEl.offsetTop > hostEl.offsetHeight - 100) {
+      dialogEl.style.top = hostEl.offsetHeight - 100 + "px";
+    }
+  }
+
   private _requestClose(): void {
-    if (this._sdActivatedModal !== null && !this._sdActivatedModal.canDeactivateFn()) {
+    if (this._sdActivatedModal != null && !this._sdActivatedModal.canDeactivateFn()) {
       return;
     }
     void this._saveConfig().catch((err) => this._errorHandler.handleError(err));
@@ -412,16 +471,36 @@ export class SdModal {
     hostEl.style.zIndex = String(maxZ + 1);
   }
 
+  private _calcHeight(): void {
+    const dialogEl = this._getDialogEl();
+    if (dialogEl == null) return;
+    const style = getComputedStyle(this._elRef.nativeElement);
+    const paddingTop = style.paddingTop === "" ? 0 : parseInt(style.paddingTop, 10) || 0;
+    if (dialogEl.offsetHeight > this._elRef.nativeElement.offsetHeight - paddingTop) {
+      dialogEl.style.maxHeight = "100%";
+      dialogEl.style.height = "100%";
+    }
+  }
+
+  private _calcWidth(): void {
+    const dialogEl = this._getDialogEl();
+    if (dialogEl == null) return;
+    if (dialogEl.offsetWidth > this._elRef.nativeElement.offsetWidth) {
+      dialogEl.style.maxWidth = "100%";
+      dialogEl.style.width = "100%";
+    }
+  }
+
   private _getDialogEl(): HTMLElement | null {
     return this._elRef.nativeElement.querySelector("._dialog");
   }
 
   private async _saveConfig(): Promise<void> {
     const k = this.key();
-    if (k === undefined || this._sdSystemConfig == null) return;
+    if (k == null || this._sdSystemConfig == null) return;
 
     const dialogEl = this._getDialogEl();
-    if (dialogEl === null) return;
+    if (dialogEl == null) return;
 
     const config: Record<string, string> = {};
     if (dialogEl.style.width !== "") config["width"] = dialogEl.style.width;
@@ -441,11 +520,11 @@ export class SdModal {
     if (config == null) return;
 
     const dialogEl = this._getDialogEl();
-    if (dialogEl === null) return;
+    if (dialogEl == null) return;
 
-    if (config["width"] !== undefined) dialogEl.style.width = config["width"];
-    if (config["height"] !== undefined) dialogEl.style.height = config["height"];
-    if (config["left"] !== undefined) dialogEl.style.left = config["left"];
-    if (config["top"] !== undefined) dialogEl.style.top = config["top"];
+    if (config["width"] != null) dialogEl.style.width = config["width"];
+    if (config["height"] != null) dialogEl.style.height = config["height"];
+    if (config["left"] != null) dialogEl.style.left = config["left"];
+    if (config["top"] != null) dialogEl.style.top = config["top"];
   }
 }

package/src/core/provideSdAngular.ts

@@ -27,11 +27,6 @@ import { SdAngularConfigProvider } from "./config/sd-angular-config.provider";
 import { SdThemeProvider } from "../features/theme/sd-theme-provider";
 import { SdLocalStorageProvider } from "./config/sd-local-storage.provider";
 import { SdGlobalErrorHandlerPlugin } from "./error-handler/sd-global-error-handler.plugin";
-import { SdSaveCommandEventPlugin } from "./commands/sd-save-command-event.plugin";
-import { SdRefreshCommandEventPlugin } from "./commands/sd-refresh-command-event.plugin";
-import { SdInsertCommandEventPlugin } from "./commands/sd-insert-command-event.plugin";
-import { SdResizeEventPlugin } from "./events/sd-resize-event.plugin";
-import { SdIntersectionEventPlugin } from "./events/sd-intersection-event.plugin";
 import { SdOptionEventPlugin } from "./events/sd-option-event.plugin";
 
 export function provideSdAngular(opt: { clientName: string }): EnvironmentProviders {
@@ -109,11 +104,6 @@ export function provideSdAngular(opt: { clientName: string }): EnvironmentProvid
         return provider;
       },
     },
-    { provide: EVENT_MANAGER_PLUGINS, useClass: SdSaveCommandEventPlugin, multi: true },
-    { provide: EVENT_MANAGER_PLUGINS, useClass: SdRefreshCommandEventPlugin, multi: true },
-    { provide: EVENT_MANAGER_PLUGINS, useClass: SdInsertCommandEventPlugin, multi: true },
-    { provide: EVENT_MANAGER_PLUGINS, useClass: SdResizeEventPlugin, multi: true },
-    { provide: EVENT_MANAGER_PLUGINS, useClass: SdIntersectionEventPlugin, multi: true },
     { provide: EVENT_MANAGER_PLUGINS, useClass: SdOptionEventPlugin, multi: true },
     { provide: ErrorHandler, useClass: SdGlobalErrorHandlerPlugin },
     provideZonelessChangeDetection(),

package/src/core/ripple/setupRipple.ts

@@ -14,7 +14,7 @@ export function setupRipple(enableFn?: () => boolean): void {
     let indicatorEl: HTMLElement | undefined;
 
     const onPointerDown = (event: PointerEvent): void => {
-      if (enableFn !== undefined && !enableFn()) return;
+      if (enableFn != null && !enableFn()) return;
 
       const rect = el.getBoundingClientRect();
       const size = Math.max(rect.width, rect.height);
@@ -22,7 +22,7 @@ export function setupRipple(enableFn?: () => boolean): void {
       const x = event.clientX - rect.left;
       const y = event.clientY - rect.top;
 
-      if (indicatorEl !== undefined) {
+      if (indicatorEl != null) {
         indicatorEl.remove();
       }
 
@@ -45,21 +45,21 @@ export function setupRipple(enableFn?: () => boolean): void {
       el.appendChild(indicatorEl);
 
       indicatorEl.ontransitionend = (ev: TransitionEvent) => {
-        if (ev.propertyName === "opacity" && indicatorEl !== undefined) {
+        if (ev.propertyName === "opacity" && indicatorEl != null) {
           indicatorEl.remove();
           indicatorEl = undefined;
         }
       };
 
       requestAnimationFrame(() => {
-        if (indicatorEl !== undefined) {
+        if (indicatorEl != null) {
           indicatorEl.style.transform = "scale(1)";
         }
       });
     };
 
     const onPointerUp = (): void => {
-      if (indicatorEl !== undefined) {
+      if (indicatorEl != null) {
         indicatorEl.style.opacity = "0";
       }
     };

package/src/core/routing/menu-utils.ts

@@ -5,7 +5,7 @@ export type { SdMenu } from "../app-structure/sd-app-structure.types";
 export function getMenuRouterLinkOption(
   menu: SdMenu,
 ): { link: string; queryParams: Record<string, string> | undefined } | undefined {
-  if (menu.children !== undefined || menu.url != null) {
+  if (menu.children != null || menu.url != null) {
     return undefined;
   }
 

package/src/core/routing/sd-navigate-window.provider.ts

@@ -34,7 +34,7 @@ export class SdNavigateWindowProvider {
         });
       }
     } else {
-      const paramStr = params !== undefined ? new URLSearchParams(params).toString() : "";
+      const paramStr = params != null ? new URLSearchParams(params).toString() : "";
       const suffix = paramStr !== "" ? `;${paramStr}` : "";
       window.open(
         `${location.pathname}#${navigate}${suffix}`,

package/src/core/routing/sd-router-link.ts

@@ -55,7 +55,7 @@ export class SdRouterLink {
         ? "?" + new URLSearchParams(option.queryParams).toString()
         : "";
       this._sdNavigateWindow.open(option.link + qp, option.params);
-    } else if (option.outletName === undefined) {
+    } else if (option.outletName == null) {
       await this._router.navigate(
         [option.link, ...(option.params ? [option.params] : [])],
         option.queryParams ? { queryParams: option.queryParams } : undefined,

package/src/core/selection/setupCumulateSelectedKeys.ts

@@ -15,11 +15,11 @@ export function setupCumulateSelectedKeys<TItem, TKey>(options: {
     if (selectedItems.length === 0) return;
 
     const itemKeySet = new Set(
-      items.map((item) => options.keySelectorFn(item)).filter((k) => k !== undefined),
+      items.map((item) => options.keySelectorFn(item)).filter((k) => k != null),
     );
     const filtered = selectedItems.filter((item) => {
       const key = options.keySelectorFn(item);
-      return key !== undefined && itemKeySet.has(key);
+      return key != null && itemKeySet.has(key);
     });
 
     if (filtered.length !== selectedItems.length) {
@@ -32,7 +32,7 @@ export function setupCumulateSelectedKeys<TItem, TKey>(options: {
     const selectedItems = options.selectedItems();
     const keys = selectedItems
       .map((item) => options.keySelectorFn(item))
-      .filter((k): k is TKey => k !== undefined);
+      .filter((k): k is TKey => k != null);
     options.selectedItemKeys.set(keys);
   });
 }

package/src/core/setupModelHook.ts

@@ -44,7 +44,7 @@ export function setupModelHook<T, S extends WritableSignal<T>>(
     void canSet
       .then((allowed) => {
         if (allowed !== false) {
-          orgSet(fn(model()));
+          orgSet(value);
         }
       })
       .catch((err) => {

package/src/core/toast/sd-toast-container.ts

@@ -14,7 +14,7 @@ import {
   host: {
     "[attr.data-sd-overlap]": "overlap() || undefined",
   },
-  template: `<ng-content />`,
+  template: "",
   styles: [
     /* language=SCSS */ `
       @use "../../../scss/commons/variables";

package/src/core/toast/sd-toast.provider.ts

@@ -48,14 +48,14 @@ export class SdToastProvider {
 
   constructor() {
     effect(() => {
-      if (this._containerRef !== undefined) {
+      if (this._containerRef != null) {
         this._containerRef.setInput("overlap", this.overlap());
       }
     });
   }
 
   private _getContainerRef(): ComponentRef<SdToastContainer> {
-    if (this._containerRef === undefined) {
+    if (this._containerRef == null) {
       this._containerRef = createComponent(SdToastContainer, {
         environmentInjector: this._envInjector,
       });
@@ -158,7 +158,7 @@ export class SdToastProvider {
         throw err;
       }
 
-      const message = messageFn !== undefined ? messageFn(err) : err.message;
+      const message = messageFn != null ? messageFn(err) : err.message;
       this.danger(message);
       await this._sdSystemLog.writeAsync("error", err.stack ?? err.message);
       return undefined;
@@ -177,7 +177,7 @@ export class SdToastProvider {
     }
 
     // beforeShowFn 콜백
-    if (this.beforeShowFn !== undefined) {
+    if (this.beforeShowFn != null) {
       this.beforeShowFn(theme);
     }
 
@@ -299,14 +299,14 @@ export class SdToastProvider {
 
     // 연결된 contentRef 파괴
     const contentRef = this._contentRefs.get(toastRef);
-    if (contentRef !== undefined) {
+    if (contentRef != null) {
       this._contentRefs.delete(toastRef);
       this._appRef.detachView(contentRef.hostView);
       contentRef.destroy();
     }
 
     const el = toastRef.location.nativeElement as HTMLElement;
-    if (el.parentNode !== null) {
+    if (el.parentNode != null) {
       el.parentNode.removeChild(el);
     }
     this._appRef.detachView(toastRef.hostView);