@simplysm/angular 14.0.6 → 14.0.8

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

@@ -2,7 +2,8 @@ import { Injectable } from "@angular/core";
 
 @Injectable({ providedIn: "root" })
 export class SdNavigateWindowProvider {
-  private _beforeUnloadController: AbortController | undefined;
+  private readonly _openedWindows = new Set<Window>();
+  private _beforeUnloadRegistered = false;
 
   get isWindow(): boolean {
     const urlSearchParams = new URLSearchParams(
@@ -19,21 +20,19 @@ export class SdNavigateWindowProvider {
         features,
       );
 
-      // 기존 beforeunload 리스너 제거
-      if (this._beforeUnloadController != null) {
-        this._beforeUnloadController.abort();
+      if (newWindow) {
+        this._openedWindows.add(newWindow);
       }
-      this._beforeUnloadController = new AbortController();
 
-      window.addEventListener(
-        "beforeunload",
-        () => {
-          if (newWindow) {
-            newWindow.close();
+      if (!this._beforeUnloadRegistered) {
+        this._beforeUnloadRegistered = true;
+        window.addEventListener("beforeunload", () => {
+          for (const w of this._openedWindows) {
+            w.close();
           }
-        },
-        { signal: this._beforeUnloadController.signal },
-      );
+          this._openedWindows.clear();
+        });
+      }
     } else {
       window.open(
         `${location.pathname}#${navigate};${new URLSearchParams(params).toString()}`,

package/src/core/utils/injectParent.ts

@@ -0,0 +1,41 @@
+import { type AbstractType, inject, Injector, ViewContainerRef } from "@angular/core";
+
+export function injectParent<T = object>(): T;
+export function injectParent<T = object>(type: AbstractType<T>): T;
+export function injectParent<T = object>(
+  type: AbstractType<T>,
+  options: { optional: true },
+): T | undefined;
+export function injectParent<T = object>(
+  type?: AbstractType<T>,
+  options?: { optional: true },
+): T | undefined {
+  let currentInjector: Injector | undefined = inject(ViewContainerRef).injector;
+  while (currentInjector != null) {
+    // Angular internal: NodeInjector._lView[CONTEXT=8]에 컴포넌트 인스턴스 저장
+    const lView: unknown[] | undefined = (
+      currentInjector as unknown as { _lView?: unknown[] }
+    )._lView;
+    if (lView == null) {
+      break;
+    }
+
+    const comp = lView[8] as object;
+    if (type == null) {
+      return comp as T;
+    }
+    if (comp instanceof type) {
+      return comp as T;
+    }
+
+    currentInjector = currentInjector.get(Injector, undefined, {
+      skipSelf: true,
+      optional: true,
+    }) as Injector | undefined;
+  }
+
+  if (options?.optional) {
+    return undefined;
+  }
+  throw new Error("부모 컴포넌트를 찾을 수 없습니다.");
+}

package/src/core/utils/setups/setupCanDeactivate.ts

@@ -1,4 +1,4 @@
-import { ElementRef, inject, reflectComponentType } from "@angular/core";
+import { DestroyRef, ElementRef, inject, reflectComponentType } from "@angular/core";
 import { ActivatedRoute, type CanDeactivateFn } from "@angular/router";
 import { SdActivatedModalProvider } from "../../../ui/overlay/modal/sd-modal.provider";
 
@@ -8,7 +8,7 @@ export function setupCanDeactivate(fn: () => boolean): void {
   const elRef = inject(ElementRef);
 
   if (activatedModal != null) {
-    activatedModal.canDeactivefn = fn;
+    activatedModal.canDeactiveFn = fn;
     return;
   }
 
@@ -30,5 +30,13 @@ export function setupCanDeactivate(fn: () => boolean): void {
       activatedRoute.routeConfig.canDeactivate = [];
     }
     activatedRoute.routeConfig.canDeactivate.push(canDeactivateFn);
+
+    const destroyRef = inject(DestroyRef);
+    destroyRef.onDestroy(() => {
+      const idx = activatedRoute.routeConfig!.canDeactivate!.indexOf(canDeactivateFn);
+      if (idx !== -1) {
+        activatedRoute.routeConfig!.canDeactivate!.splice(idx, 1);
+      }
+    });
   }
 }

package/src/core/utils/setups/setupInvalid.ts

@@ -26,6 +26,11 @@ export function setupInvalid(getInvalidMessage: () => string): void {
     setSafeStyle(renderer, indicatorEl, { display: isInvalid ? "block" : "none" });
   });
 
+  destroyRef.onDestroy(() => {
+    indicatorEl.remove();
+    inputEl.remove();
+  });
+
   const formEl = inputEl.form;
   if (formEl == null) return;
 

package/src/core/utils/setups/setupModelHook.ts

@@ -1,9 +1,10 @@
-import type { Signal, WritableSignal } from "@angular/core";
+import { ErrorHandler, inject, type Signal, type WritableSignal } from "@angular/core";
 
 export function setupModelHook<T, S extends WritableSignal<T>>(
   model: S,
   canFn: Signal<(item: T) => boolean | Promise<boolean>>,
 ): void {
+  const errorHandler = inject(ErrorHandler);
   const orgSet = model.set;
   model.set = (value) => {
     const canSet = canFn()(value);
@@ -21,6 +22,8 @@ export function setupModelHook<T, S extends WritableSignal<T>>(
       if (allowed !== false) {
         orgSet(value);
       }
-    }).catch(() => {});
+    }).catch((err) => {
+      errorHandler.handleError(err);
+    });
   };
 }

package/src/core/utils/setups/setupRipple.ts

@@ -44,9 +44,10 @@ export function setupRipple(enableFn?: () => boolean): void {
       });
       el.appendChild(indicatorEl);
 
-      indicatorEl.ontransitionend = () => {
-        if (indicatorEl !== undefined && getComputedStyle(indicatorEl).opacity === "0") {
+      indicatorEl.ontransitionend = (ev: TransitionEvent) => {
+        if (ev.propertyName === "opacity" && indicatorEl !== undefined) {
           indicatorEl.remove();
+          indicatorEl = undefined;
         }
       };
 

package/src/core/utils/useExpandingManager.ts

@@ -86,9 +86,10 @@ export function useExpandingManager<T>(binding: {
     const itemDef = map.get(item);
     if (itemDef == null) return false;
 
+    const expandedSet = new Set(binding.expandedItems());
     let current = itemDef.parentDef;
     while (current != null) {
-      if (!binding.expandedItems().includes(current.item)) {
+      if (!expandedSet.has(current.item)) {
         return false;
       }
       current = current.parentDef;

package/src/core/utils/useSdSystemConfigResource.ts

@@ -1,9 +1,10 @@
-import { ElementRef, inject, type ResourceRef, resource, type Signal } from "@angular/core";
+import { ElementRef, ErrorHandler, inject, type ResourceRef, resource, type Signal } from "@angular/core";
 import { SdSystemConfigProvider } from "../providers/sd-system-config.provider";
 
 export function useSdSystemConfigResource<T>(options: { key: Signal<string | undefined> }) {
   const sdSystemConfig = inject<SdSystemConfigProvider<Record<string, T>>>(SdSystemConfigProvider);
   const elRef = inject(ElementRef);
+  const errorHandler = inject(ErrorHandler);
 
   const elTag = elRef.nativeElement.tagName.toLowerCase();
 
@@ -24,8 +25,10 @@ export function useSdSystemConfigResource<T>(options: { key: Signal<string | und
       res.set(value);
       const key = options.key();
       if (key == null) return;
-      queueMicrotask(async () => {
-        await sdSystemConfig.setAsync(`${elTag}.${key}`, value as T);
+      queueMicrotask(() => {
+        sdSystemConfig.setAsync(`${elTag}.${key}`, value as T).catch((err) => {
+          errorHandler.handleError(err);
+        });
       });
     },
     update(fn: (prev: T | undefined) => T | undefined) {

package/src/features/base/sd-base-container.control.ts

@@ -0,0 +1,113 @@
+import { NgTemplateOutlet } from "@angular/common";
+import {
+  booleanAttribute,
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  contentChild,
+  inject,
+  input,
+  TemplateRef,
+  ViewEncapsulation,
+} from "@angular/core";
+import { SdBusyContainerControl } from "../../ui/overlay/busy/sd-busy-container.control";
+import { SdTopbarContainerControl } from "../../ui/navigation/topbar/sd-topbar-container.control";
+import { SdTopbarControl } from "../../ui/navigation/topbar/sd-topbar.control";
+import { SdAppStructureProvider } from "../../core/providers/sd-app-structure.provider";
+import { SdActivatedModalProvider } from "../../ui/overlay/modal/sd-modal.provider";
+import { useCurrentPageCodeSignal } from "../../core/utils/useCurrentPageCodeSignal";
+import { useFullPageCodeSignal } from "../../core/utils/useFullPageCodeSignal";
+import {
+  useViewTypeSignal,
+  type TSdViewType,
+} from "../../core/utils/useViewTypeSignal";
+import { injectParent } from "../../core/utils/injectParent";
+import { NgIcon } from "@ng-icons/core";
+import { tablerAlertTriangle } from "@ng-icons/tabler-icons";
+
+@Component({
+  selector: "sd-base-container",
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  encapsulation: ViewEncapsulation.None,
+  standalone: true,
+  imports: [
+    SdBusyContainerControl,
+    SdTopbarContainerControl,
+    SdTopbarControl,
+    NgTemplateOutlet,
+    NgIcon,
+  ],
+  template: `
+    <sd-busy-container [busy]="busy()" [message]="busyMessage()">
+      @if (initialized() === undefined || initialized()) {
+        @if (restricted()) {
+          <div class="fill tx-theme-gray-light p-xxl tx-center">
+            <br />
+            <ng-icon [svg]="tablerAlertTriangle" [size]="'5em'" />
+            <br />
+            <br />
+            '{{ modalOrPageTitle() }}'에 대한 사용권한이 없습니다. 시스템 관리자에게 문의하세요.
+          </div>
+        } @else if (currViewType() === "page") {
+          <sd-topbar-container>
+            <sd-topbar>
+              <h4>{{ modalOrPageTitle() }}</h4>
+
+              <ng-template [ngTemplateOutlet]="pageTopbarTplRef() ?? null" />
+            </sd-topbar>
+
+            <div class="fill">
+              <ng-template [ngTemplateOutlet]="contentTplRef()" />
+            </div>
+          </sd-topbar-container>
+        } @else if (currViewType() === "modal") {
+          <div class="flex-column fill">
+            <div class="flex-fill">
+              <ng-template [ngTemplateOutlet]="contentTplRef()" />
+            </div>
+            @if (modalBottomTplRef()) {
+              <div class="bdt bdt-theme-gray-lightest">
+                <ng-template [ngTemplateOutlet]="modalBottomTplRef() ?? null" />
+              </div>
+            }
+          </div>
+        } @else {
+          <ng-template [ngTemplateOutlet]="contentTplRef()" />
+        }
+      }
+    </sd-busy-container>
+  `,
+})
+export class SdBaseContainerControl {
+  private readonly _sdActivatedModal = inject(SdActivatedModalProvider, { optional: true });
+  private readonly _sdAppStructure = inject(SdAppStructureProvider);
+
+  private readonly _parent = injectParent();
+
+  private readonly _fullPageCode = useFullPageCodeSignal();
+  private readonly _currPageCode = useCurrentPageCodeSignal();
+
+  contentTplRef = contentChild.required("contentTpl", { read: TemplateRef });
+
+  pageTopbarTplRef = contentChild("pageTopbarTpl", { read: TemplateRef });
+  modalBottomTplRef = contentChild("modalBottomTpl", { read: TemplateRef });
+
+  private readonly _parentViewType = useViewTypeSignal(() => this._parent);
+  viewType = input<TSdViewType>();
+  currViewType = computed(() => this.viewType() ?? this._parentViewType());
+
+  header = input<string>();
+  modalOrPageTitle = computed(
+    () =>
+      this.header() ??
+      this._sdActivatedModal?.modalComponent()?.title() ??
+      this._sdAppStructure.getTitleByFullCode(this._currPageCode?.() ?? this._fullPageCode()),
+  );
+
+  initialized = input<boolean | undefined>(undefined);
+  restricted = input(false, { transform: booleanAttribute });
+  busy = input(false, { transform: booleanAttribute });
+  busyMessage = input<string>();
+
+  protected readonly tablerAlertTriangle = tablerAlertTriangle;
+}

package/src/index.ts

@@ -62,6 +62,10 @@ export {
   type IExpandItemDef,
 } from "./core/utils/useExpandingManager";
 export { useSelectionManager } from "./core/utils/useSelectionManager";
+export { injectParent } from "./core/utils/injectParent";
+
+// features
+export { SdBaseContainerControl } from "./features/base/sd-base-container.control";
 
 // ui/layout
 export { SdDockContainerControl } from "./ui/layout/dock/sd-dock-container.control";

package/src/ui/data/list/sd-list-item.control.ts

@@ -131,7 +131,7 @@ export class SdListItemControl {
   });
 
   constructor() {
-    setupRipple(() => !this.readonly() && !(this.layout() === "flat" && this.hasChildren()));
+    setupRipple(() => !this.readonly() && this.layout() !== "flat");
   }
 
   onContentClick(): void {

package/src/ui/data/sheet/sd-sheet.control.ts

@@ -384,7 +384,7 @@ export class SdSheetControl<T> {
   // Resizing state
   _isResizing = signal(false);
   _resizeIndicatorLeft = signal(0);
-  private _isOnResizing = false;
+  private _lastResizeEndTimeStamp = 0;
   private _resizingCleanup: (() => void) | null = null;
 
   // Config resource
@@ -478,13 +478,21 @@ export class SdSheetControl<T> {
     getItemSelectableFn: this.getItemSelectableFn,
   });
 
+  private readonly _columnControlMap = computed(() => {
+    const map = new Map<string, SdSheetColumnDirective>();
+    for (const col of this.columnControls()) {
+      map.set(col.key(), col);
+    }
+    return map;
+  });
+
   getColumnCellTpl(key: string) {
-    const col = this.columnControls().find((c) => c.key() === key);
+    const col = this._columnControlMap().get(key);
     return col?.cellTplRef() ?? null;
   }
 
   getColumnSummaryTpl(key: string) {
-    const col = this.columnControls().find((c) => c.key() === key);
+    const col = this._columnControlMap().get(key);
     return col?.summaryTplRef() ?? null;
   }
 
@@ -513,9 +521,8 @@ export class SdSheetControl<T> {
     if (fixedStyle != null) {
       parts.push(fixedStyle);
     }
-    const customStyle = this.getItemCellStyleFn()
-      ? this.getItemCellStyleFn()!(item, colDef.key)
-      : undefined;
+    const styleFn = this.getItemCellStyleFn();
+    const customStyle = styleFn != null ? styleFn(item, colDef.key) : undefined;
     if (customStyle != null) {
       parts.push(customStyle);
     }
@@ -556,7 +563,7 @@ export class SdSheetControl<T> {
   }
 
   onHeaderClick(event: MouseEvent, cell: ISdSheetHeaderDef): void {
-    if (this._isOnResizing) return;
+    if (event.timeStamp - this._lastResizeEndTimeStamp < 50) return;
     if (cell.colDef == null) return;
     if (cell.colDef.disableSorting) return;
     this.sorting.toggle(cell.colDef.key, event.shiftKey);
@@ -642,7 +649,8 @@ export class SdSheetControl<T> {
 
   getDataCellClass(item: T, colDef: ISdSheetColumnDef, r: number, c: number): string | null {
     const parts: string[] = [];
-    const customClass = this.getItemCellClassFn() ? this.getItemCellClassFn()!(item, colDef.key) : undefined;
+    const classFn = this.getItemCellClassFn();
+    const customClass = classFn != null ? classFn(item, colDef.key) : undefined;
     if (customClass != null) {
       parts.push(customClass);
     }
@@ -700,7 +708,6 @@ export class SdSheetControl<T> {
     const startWidth = th.offsetWidth;
 
     this._isResizing.set(true);
-    this._isOnResizing = true;
     this._resizeIndicatorLeft.set(
       th.offsetLeft + th.offsetWidth - container.scrollLeft,
     );
@@ -724,10 +731,7 @@ export class SdSheetControl<T> {
       this._isResizing.set(false);
       this._saveColumnConfig(colDef.key, { width: `${newWidth}px` });
 
-      // Prevent sorting for 300ms after resize
-      setTimeout(() => {
-        this._isOnResizing = false;
-      }, 300);
+      this._lastResizeEndTimeStamp = e.timeStamp;
     };
 
     document.addEventListener("mousemove", onMouseMove);

package/src/ui/data/sheet/useSheetCellAgent.ts

@@ -192,8 +192,7 @@ export function useSheetCellAgent(options: {
       }
 
       event.preventDefault();
-      const text = td.textContent;
-      await navigator.clipboard.writeText(text);
+      await navigator.clipboard.writeText(td.textContent);
       return;
     }
 

package/src/ui/data/sheet/useSheetLayoutEngine.ts

@@ -112,6 +112,7 @@ export function useSheetLayoutEngine(options: {
 
           if (canMerge && lastCell != null) {
             lastCell.colspan += 1;
+            spanStartHeaders[row] = headers;
           } else {
             table[row].push({
               text,