@simplysm/angular 14.0.40 → 14.0.42

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

@@ -38,7 +38,7 @@ import "@simplysm/core-browser";
          (keydown)="onDialogKeydown($event)"
          (focus)="onDialogFocus()">
       @if (!hideHeader()) {
-        <div class="_header" (mousedown)="onHeaderMouseDown($event)">
+        <div class="_header" (mousedown)="onHeaderMouseDown($event)" [style]="headerStyle()">
           <span class="_title">{{ title() }}</span>
           @if (actionTplRef()) {
             <ng-container *ngTemplateOutlet="actionTplRef()!" />
@@ -285,8 +285,8 @@ import "@simplysm/core-browser";
 })
 export class SdModal {
   private readonly _elRef = inject(ElementRef<HTMLElement>);
-  private readonly _activatedModal = inject(SdActivatedModalProvider, { optional: true });
-  private readonly _systemConfig = inject(SdSystemConfigProvider, { optional: true });
+  private readonly _sdActivatedModal = inject(SdActivatedModalProvider, { optional: true });
+  private readonly _sdSystemConfig = inject(SdSystemConfigProvider, { optional: true });
   private readonly _errorHandler = inject(ErrorHandler);
   private readonly _focusTrap = injectFocusTrap();
 
@@ -297,6 +297,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);
@@ -347,7 +348,7 @@ export class SdModal {
     // key 기반 설정 복원
     effect(() => {
       const k = this.key();
-      if (k === undefined || this._systemConfig == null) return;
+      if (k === undefined || this._sdSystemConfig == null) return;
 
       void this._restoreConfig(k).catch((err) => this._errorHandler.handleError(err));
     });
@@ -389,7 +390,7 @@ export class SdModal {
   }
 
   private _requestClose(): void {
-    if (this._activatedModal !== null && !this._activatedModal.canDeactivateFn()) {
+    if (this._sdActivatedModal !== null && !this._sdActivatedModal.canDeactivateFn()) {
       return;
     }
     void this._saveConfig().catch((err) => this._errorHandler.handleError(err));
@@ -418,7 +419,7 @@ export class SdModal {
 
   private async _saveConfig(): Promise<void> {
     const k = this.key();
-    if (k === undefined || this._systemConfig == null) return;
+    if (k === undefined || this._sdSystemConfig == null) return;
 
     const dialogEl = this._getDialogEl();
     if (dialogEl === null) return;
@@ -429,13 +430,13 @@ export class SdModal {
     if (dialogEl.style.left !== "") config["left"] = dialogEl.style.left;
     if (dialogEl.style.top !== "") config["top"] = dialogEl.style.top;
 
-    await this._systemConfig.setAsync(`sd-modal.${k}` as any, config as any);
+    await this._sdSystemConfig.setAsync(`sd-modal.${k}` as any, config as any);
   }
 
   private async _restoreConfig(k: string): Promise<void> {
-    if (this._systemConfig == null) return;
+    if (this._sdSystemConfig == null) return;
 
-    const config = (await this._systemConfig.getAsync(`sd-modal.${k}` as any)) as
+    const config = (await this._sdSystemConfig.getAsync(`sd-modal.${k}` as any)) as
       | Record<string, string | undefined>
       | undefined;
     if (config == null) return;

package/src/core/routing/injectViewTitleSignal.ts

@@ -5,15 +5,15 @@ import { injectFullPageCodeSignal } from "./injectFullPageCodeSignal";
 import { injectCurrentPageCodeSignal } from "./injectCurrentPageCodeSignal";
 
 export function injectViewTitleSignal(): Signal<string> {
-  const activatedModal = inject(SdActivatedModalProvider, { optional: true });
+  const sdActivatedModal = inject(SdActivatedModalProvider, { optional: true });
   const sdAppStructure = inject(SdAppStructureProvider);
 
   const fullPageCode = injectFullPageCodeSignal();
   const currPageCode = injectCurrentPageCodeSignal();
 
   return computed(() => {
-    if (activatedModal != null) {
-      return activatedModal.modalComponent()?.title() ?? "";
+    if (sdActivatedModal != null) {
+      return sdActivatedModal.modalComponent()?.title() ?? "";
     }
 
     try {

package/src/core/routing/injectViewTypeSignal.ts

@@ -5,14 +5,14 @@ import { injectCurrentPageCodeSignal } from "./injectCurrentPageCodeSignal";
 import { injectFullPageCodeSignal } from "./injectFullPageCodeSignal";
 
 export function injectViewTypeSignal(getComp: () => object): Signal<SdViewType> {
-  const activatedModal = inject(SdActivatedModalProvider, { optional: true });
+  const sdActivatedModal = inject(SdActivatedModalProvider, { optional: true });
   const activatedRoute = inject(ActivatedRoute, { optional: true });
 
   const fullPageCode = injectFullPageCodeSignal();
   const currPageCode = injectCurrentPageCodeSignal();
 
   return computed<SdViewType>(() => {
-    if (activatedModal != null) {
+    if (sdActivatedModal != null) {
       return "modal";
     }
 

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

@@ -12,7 +12,7 @@ import { SdNavigateWindowProvider } from "./sd-navigate-window.provider";
 })
 export class SdRouterLink {
   private readonly _router = inject(Router);
-  private readonly _navWindow = inject(SdNavigateWindowProvider);
+  private readonly _sdNavigateWindow = inject(SdNavigateWindowProvider);
 
   option = input<
     | {
@@ -39,13 +39,13 @@ export class SdRouterLink {
     event.preventDefault();
     event.stopPropagation();
 
-    if (this._navWindow.isWindow) {
+    if (this._sdNavigateWindow.isWindow) {
       const width = option.window?.width ?? 800;
       const height = option.window?.height ?? 800;
       const qp = option.queryParams
         ? "?" + new URLSearchParams(option.queryParams).toString()
         : "";
-      this._navWindow.open(
+      this._sdNavigateWindow.open(
         option.link + qp,
         option.params,
         `width=${width},height=${height}`,
@@ -54,7 +54,7 @@ export class SdRouterLink {
       const qp = option.queryParams
         ? "?" + new URLSearchParams(option.queryParams).toString()
         : "";
-      this._navWindow.open(option.link + qp, option.params);
+      this._sdNavigateWindow.open(option.link + qp, option.params);
     } else if (option.outletName === undefined) {
       await this._router.navigate(
         [option.link, ...(option.params ? [option.params] : [])],

package/src/core/routing/setupCanDeactivate.ts

@@ -3,12 +3,12 @@ import { ActivatedRoute, type CanDeactivateFn } from "@angular/router";
 import { SdActivatedModalProvider } from "../modal/sd-activated-modal.provider";
 
 export function setupCanDeactivate(fn: () => boolean): void {
-  const activatedModal = inject(SdActivatedModalProvider, { optional: true });
+  const sdActivatedModal = inject(SdActivatedModalProvider, { optional: true });
   const activatedRoute = inject(ActivatedRoute, { optional: true });
   const elRef = inject(ElementRef);
 
-  if (activatedModal != null) {
-    activatedModal.canDeactivateFn = fn;
+  if (sdActivatedModal != null) {
+    sdActivatedModal.canDeactivateFn = fn;
     return;
   }
 

package/src/core/service-client/sd-service-client-factory.provider.ts

@@ -6,8 +6,8 @@ import { SdToastProvider } from "../toast/sd-toast.provider";
 
 @Injectable({ providedIn: "root" })
 export class SdServiceClientFactoryProvider {
-  private readonly _toastProvider = inject(SdToastProvider);
-  private readonly _configProvider = inject(SdAngularConfigProvider);
+  private readonly _sdToast = inject(SdToastProvider);
+  private readonly _sdAngularConfig = inject(SdAngularConfigProvider);
   private readonly _destroyRef = inject(DestroyRef);
 
   private readonly _clientMap = new Map<string, ServiceClient>();
@@ -43,7 +43,7 @@ export class SdServiceClientFactoryProvider {
       ...options,
     };
 
-    const client = createServiceClient(this._configProvider.clientName, mergedOptions);
+    const client = createServiceClient(this._sdAngularConfig.clientName, mergedOptions);
 
     client.on("request-progress", (state: ServiceProgressState) => {
       this._handleProgress("요청을 전송하는 중입니다.", state);
@@ -85,7 +85,7 @@ export class SdServiceClientFactoryProvider {
 
     let progressSignal = this._progressMap.get(uuid);
     if (progressSignal == null) {
-      progressSignal = this._toastProvider.info(message, true);
+      progressSignal = this._sdToast.info(message, true);
       this._progressMap.set(uuid, progressSignal);
     }
 

package/src/core/shared-data/sd-shared-data.provider.ts

@@ -40,8 +40,8 @@ interface SharedDataEntry<T extends SharedDataBase<string | number>> {
 
 @Injectable()
 export abstract class SdSharedDataProvider<T extends Record<string, SharedDataBase<string | number>>> {
-  private readonly _clientFactory = inject(SdServiceClientFactoryProvider);
-  private readonly _errorHandler = inject(ErrorHandler);
+  protected readonly _sdServiceClientFactory = inject(SdServiceClientFactoryProvider);
+  protected readonly _errorHandler = inject(ErrorHandler);
 
   readonly loadingCount: WritableSignal<number> = signal(0);
 
@@ -54,7 +54,7 @@ export abstract class SdSharedDataProvider<T extends Record<string, SharedDataBa
     if (existing != null) {
       // 기존 리스너 키 초기화 + generation 증가로 이전 이벤트 무시
       if (existing.listenerKey != null) {
-        const client = this._clientFactory.get(existing.info.serviceKey);
+        const client = this._sdServiceClientFactory.get(existing.info.serviceKey);
         void client.removeListener(existing.listenerKey);
         existing.listenerKey = undefined;
       }
@@ -109,7 +109,7 @@ export abstract class SdSharedDataProvider<T extends Record<string, SharedDataBa
       throw new Error(`등록되지 않은 공유 데이터: ${name as string}`);
     }
 
-    const client = this._clientFactory.get(entry.info.serviceKey);
+    const client = this._sdServiceClientFactory.get(entry.info.serviceKey);
     const event = client.getEvent<typeof SdSharedDataChangeEvent>("SdSharedDataChange");
     await event.emit(
       (item) => item.name === (name as string) && obj.equal(item.filter, entry.info.filter),
@@ -137,7 +137,7 @@ export abstract class SdSharedDataProvider<T extends Record<string, SharedDataBa
 
         // 이벤트 리스너 등록
         if (entry.listenerKey == null) {
-          const client = this._clientFactory.get(entry.info.serviceKey);
+          const client = this._sdServiceClientFactory.get(entry.info.serviceKey);
           const event = client.getEvent<typeof SdSharedDataChangeEvent>("SdSharedDataChange");
           entry.listenerKey = await event.addListener(
             { name, filter: entry.info.filter },

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

@@ -36,7 +36,7 @@ export class SdToastProvider {
   private readonly _appRef = inject(ApplicationRef);
   private readonly _envInjector = inject(EnvironmentInjector);
   private readonly _injector = inject(Injector);
-  private readonly _systemLog = inject(SdSystemLogProvider);
+  private readonly _sdSystemLog = inject(SdSystemLogProvider);
 
   alertThemes = signal<SdToastSeverity[]>([]);
   overlap = signal(false);
@@ -145,11 +145,11 @@ export class SdToastProvider {
     });
   }
 
-  async try<R>(fn: () => Promise<R>): Promise<R | undefined>;
-  async try<R>(fn: () => Promise<R>, messageFn: (err: unknown) => string): Promise<R | undefined>;
+  async try<R>(fn: () => Promise<R>, messageFn?: (err: Error) => string): Promise<R | undefined>;
+  try<R>(fn: () => R, messageFn?: (err: Error) => string): R | undefined;
   async try<R>(
-    fn: () => Promise<R>,
-    messageFn?: (err: unknown) => string,
+    fn: () => Promise<R> | R,
+    messageFn?: (err: Error) => string,
   ): Promise<R | undefined> {
     try {
       return await fn();
@@ -160,7 +160,7 @@ export class SdToastProvider {
 
       const message = messageFn !== undefined ? messageFn(err) : err.message;
       this.danger(message);
-      await this._systemLog.writeAsync("error", err.stack ?? err.message);
+      await this._sdSystemLog.writeAsync("error", err.stack ?? err.message);
       return undefined;
     }
   }

package/src/data/data-detail/sd-data-detail.base.ts

@@ -47,9 +47,9 @@ export abstract class SdDataDetailBase<T extends object, R = boolean>
 
   //-- implement
 
-  private readonly _sdToast = inject(SdToastProvider);
-  private readonly _sdSharedData = inject(SdSharedDataProvider);
-  private readonly _errorHandler = inject(ErrorHandler);
+  protected readonly _sdToast = inject(SdToastProvider);
+  protected readonly _sdSharedData = inject(SdSharedDataProvider);
+  protected readonly _errorHandler = inject(ErrorHandler);
 
   viewType = injectViewTypeSignal(() => this);
 

package/src/data/data-select-button/sd-data-select-button.base.ts

@@ -32,7 +32,7 @@ export abstract class SdDataSelectButtonBase<
 
   //-- implement
 
-  private readonly _sdModal = inject(SdModalProvider);
+  protected readonly _sdModal = inject(SdModalProvider);
 
   value = model<SelectModeValue<TKey>[TMode]>();
 

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

@@ -13,6 +13,7 @@ import {
 import { SdButton } from "../../controls/button/sd-button";
 import { SdForm } from "../../controls/form/sd-form";
 import { SdSheetColumn } from "../sheet/sd-sheet-column";
+import { SdSheetColumnCellTemplate } from "../sheet/sd-sheet-column-cell-template";
 import { SdSheet } from "../sheet/sd-sheet";
 import { injectParent } from "../../core/injectParent";
 import { FormatPipe } from "../../core/format.pipe";
@@ -45,6 +46,7 @@ import { SdDataSheetBase } from "./sd-data-sheet.base";
     SdButton,
     SdSheet,
     SdSheetColumn,
+    SdSheetColumnCellTemplate,
     NgTemplateOutlet,
     SdBaseContainer,
     FormatPipe,
@@ -214,7 +216,7 @@ import { SdDataSheetBase } from "./sd-data-sheet.base";
                 parent.itemPropInfo.isDeleted
               ) {
                 <sd-sheet-column [fixed]="true" [key]="parent.itemPropInfo.isDeleted!">
-                  <ng-template #cellTpl let-item>
+                  <ng-template [cell]="parent.items()" let-item="item">
                     <div class="p-xs-sm tx-center">
                       <sd-anchor
                         [theme]="'danger'"
@@ -244,12 +246,19 @@ import { SdDataSheetBase } from "./sd-data-sheet.base";
                   [key]="columnControl.key()"
                   [fixed]="columnControl.fixed()"
                   [header]="columnControl.header()"
+                  [headerStyle]="columnControl.headerStyle()"
+                  [tooltip]="columnControl.tooltip()"
                   [width]="columnControl.width()"
                   [disableSorting]="columnControl.disableSorting()"
                   [disableResizing]="columnControl.disableResizing()"
                   [hidden]="columnControl.hidden()"
                   [collapse]="columnControl.collapse()"
                 >
+                  @if (columnControl.headerTplRef()) {
+                    <ng-template #headerTpl>
+                      <ng-template [ngTemplateOutlet]="columnControl.headerTplRef()!" />
+                    </ng-template>
+                  }
                   @if (columnControl.summaryTplRef()) {
                     <ng-template #summaryTpl>
                       <ng-template [ngTemplateOutlet]="columnControl.summaryTplRef()!" />
@@ -257,8 +266,8 @@ import { SdDataSheetBase } from "./sd-data-sheet.base";
                   }
 
                   <ng-template
-                    #cellTpl
-                    let-item
+                    [cell]="parent.items()"
+                    let-item="item"
                     let-index="index"
                     let-depth="depth"
                     let-edit="edit"
@@ -311,7 +320,7 @@ import { SdDataSheetBase } from "./sd-data-sheet.base";
                   [key]="parent.itemPropInfo.lastModifiedAt!"
                   [hidden]="true"
                 >
-                  <ng-template #cellTpl let-item>
+                  <ng-template [cell]="parent.items()" let-item="item">
                     <div class="p-xs-sm tx-center">
                       {{
                         item[parent.itemPropInfo.lastModifiedAt!]
@@ -327,7 +336,7 @@ import { SdDataSheetBase } from "./sd-data-sheet.base";
                   [key]="parent.itemPropInfo.lastModifiedBy!"
                   [hidden]="true"
                 >
-                  <ng-template #cellTpl let-item>
+                  <ng-template [cell]="parent.items()" let-item="item">
                     <div class="p-xs-sm tx-center">
                       {{ item[parent.itemPropInfo.lastModifiedBy!] }}
                     </div>

package/src/data/sheet/sd-sheet-column-cell-template.ts

@@ -0,0 +1,17 @@
+import { Directive, input } from "@angular/core";
+import type { SdSheetCellContext } from "./sd-sheet-column";
+
+@Directive({
+  selector: "ng-template[cell]",
+  standalone: true,
+})
+export class SdSheetColumnCellTemplate<T> {
+  cell = input.required<T[]>();
+
+  static ngTemplateContextGuard<TContextItem>(
+    _dir: SdSheetColumnCellTemplate<TContextItem>,
+    _ctx: unknown,
+  ): _ctx is SdSheetCellContext<TContextItem> {
+    return true;
+  }
+}

package/src/data/sheet/sd-sheet-column.ts

@@ -5,10 +5,11 @@ import {
   input,
   TemplateRef,
 } from "@angular/core";
+import { SdSheetColumnCellTemplate } from "./sd-sheet-column-cell-template";
 
-export interface SdSheetCellContext {
-  $implicit: unknown;
-  item: unknown;
+export interface SdSheetCellContext<T = unknown> {
+  $implicit: T;
+  item: T;
   index: number;
   depth: number;
   edit: boolean;
@@ -18,9 +19,11 @@ export interface SdSheetCellContext {
   selector: "sd-sheet-column",
   standalone: true,
 })
-export class SdSheetColumn {
+export class SdSheetColumn<T = unknown> {
   key = input.required<string>();
   header = input<string | string[]>("");
+  headerStyle = input<string>();
+  tooltip = input<string>();
   width = input<string>();
   fixed = input(false, { transform: booleanAttribute });
   hidden = input(false, { transform: booleanAttribute });
@@ -29,6 +32,10 @@ export class SdSheetColumn {
   disableResizing = input(false, { transform: booleanAttribute });
   ordering = input(0);
 
-  cellTplRef = contentChild<TemplateRef<SdSheetCellContext>>("cellTpl");
+  cellTplRef = contentChild.required<any, TemplateRef<SdSheetCellContext<T>>>(
+    SdSheetColumnCellTemplate,
+    { read: TemplateRef },
+  );
+  headerTplRef = contentChild<TemplateRef<void>>("headerTpl");
   summaryTplRef = contentChild<TemplateRef<void>>("summaryTpl");
 }

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

@@ -99,10 +99,16 @@ import { SdSheetConfigModal } from "./sd-sheet-config.modal";
                   [attr.colspan]="cell.colspan > 1 ? cell.colspan : null"
                   [attr.rowspan]="cell.rowspan > 1 ? cell.rowspan : null"
                   [attr.aria-sort]="getAriaSortValue(cell)"
+                  [attr.title]="cell.colDef?.tooltip ?? cell.text"
+                  [class.help]="cell.colDef?.tooltip"
                   [style]="getHeaderCellStyle(cell)"
                   (click)="onHeaderClick($event, cell)"
                 >
-                  <span>{{ cell.text }}</span>
+                  @if (cell.colDef && getColumnHeaderTpl(cell.colDef.key); as headerTpl) {
+                    <ng-template [ngTemplateOutlet]="headerTpl" />
+                  } @else {
+                    <span>{{ cell.text }}</span>
+                  }
                   @if (cell.colDef && getSortDef(cell.colDef.key); as sortDef) {
                     <ng-icon
                       class="_sort-icon"
@@ -368,7 +374,7 @@ export class SdSheet<T> {
   columnControls = contentChildren(SdSheetColumn);
 
   // Injected providers
-  private readonly _modalProvider = inject(SdModalProvider);
+  private readonly _sdModal = inject(SdModalProvider);
 
   // DOM accessor & cell agent
   domAccessor = injectSheetDomAccessor();
@@ -463,6 +469,11 @@ export class SdSheet<T> {
     return map;
   });
 
+  getColumnHeaderTpl(key: string) {
+    const col = this._columnControlMap().get(key);
+    return col?.headerTplRef() ?? null;
+  }
+
   getColumnCellTpl(key: string) {
     const col = this._columnControlMap().get(key);
     return col?.cellTplRef() ?? null;
@@ -564,7 +575,7 @@ export class SdSheet<T> {
   }
 
   async onConfigButtonClick(): Promise<void> {
-    const result = await this._modalProvider.showAsync(
+    const result = await this._sdModal.showAsync(
       {
         title: "시트 설정",
         type: SdSheetConfigModal,

package/src/data/sheet/types.ts

@@ -1,6 +1,8 @@
 export interface SdSheetColumnDef {
   key: string;
   header: string | string[];
+  headerStyle: string | undefined;
+  tooltip: string | undefined;
   width: string | undefined;
   fixed: boolean;
   hidden: boolean;

package/src/data/sheet/useSheetCellStyling.ts

@@ -60,7 +60,11 @@ export function useSheetCellStyling<T>(options: {
 
   function getHeaderCellStyle(cell: SdSheetHeaderDef): string | null {
     if (cell.colDef == null) return null;
-    return headerColumnStyles().get(cell.colDef.key) ?? null;
+    const parts: string[] = [];
+    const baseStyle = headerColumnStyles().get(cell.colDef.key);
+    if (baseStyle != null) parts.push(baseStyle);
+    if (cell.colDef.headerStyle != null) parts.push(cell.colDef.headerStyle);
+    return parts.length > 0 ? parts.join("; ") : null;
   }
 
   function getCellStyle(item: T, colDef: SdSheetColumnDef): string | null {

package/src/data/sheet/useSheetLayoutEngine.ts

@@ -17,6 +17,8 @@ export function useSheetLayoutEngine(options: {
         return {
           key,
           header: col.header(),
+          headerStyle: col.headerStyle(),
+          tooltip: col.tooltip(),
           width: cfgCol?.width ?? col.width(),
           fixed: cfgCol?.fixed ?? col.fixed(),
           hidden: cfgCol?.hidden ?? col.hidden(),

package/src/index.ts

@@ -224,7 +224,8 @@ export {
 
 // data/sheet
 export { SdSheet } from "./data/sheet/sd-sheet";
-export { SdSheetColumn } from "./data/sheet/sd-sheet-column";
+export { SdSheetColumn, type SdSheetCellContext } from "./data/sheet/sd-sheet-column";
+export { SdSheetColumnCellTemplate } from "./data/sheet/sd-sheet-column-cell-template";
 export { SdSheetConfigModal } from "./data/sheet/sd-sheet-config.modal";
 export type {
   SdSheetColumnDef,

package/src/layout/base-container/sd-base-container.ts

@@ -82,7 +82,7 @@ import { tablerAlertTriangle } from "@ng-icons/tabler-icons";
 export class SdBaseContainer {
   private readonly _sdActivatedModal = inject(SdActivatedModalProvider, { optional: true });
   private readonly _sdAppStructure = inject(SdAppStructureProvider);
-  private readonly _systemLog = inject(SdSystemLogProvider);
+  private readonly _sdSystemLog = inject(SdSystemLogProvider);
 
   private readonly _parent = injectParent();
 
@@ -107,7 +107,7 @@ export class SdBaseContainer {
         this._sdAppStructure.getTitleByFullCode(this._currPageCode?.() ?? this._fullPageCode())
       );
     } catch (err) {
-      void this._systemLog.writeAsync("warn", `modalOrPageTitle 계산 중 에러: ${String(err)}`);
+      void this._sdSystemLog.writeAsync("warn", `modalOrPageTitle 계산 중 에러: ${String(err)}`);
       return "";
     }
   });