@simplysm/angular 14.0.52 → 14.0.54

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@simplysm/angular",
-  "version": "14.0.52",
+  "version": "14.0.54",
   "description": "심플리즘 패키지 - Angular",
   "author": "심플리즘",
   "license": "Apache-2.0",
@@ -24,12 +24,12 @@
     "./dist/**/*.css"
   ],
   "dependencies": {
-    "@angular/animations": "^21.2.9",
-    "@angular/common": "^21.2.9",
-    "@angular/core": "^21.2.9",
-    "@angular/platform-browser": "^21.2.9",
-    "@angular/router": "^21.2.9",
-    "@angular/service-worker": "^21.2.9",
+    "@angular/animations": "^21.2.10",
+    "@angular/common": "^21.2.10",
+    "@angular/core": "^21.2.10",
+    "@angular/platform-browser": "^21.2.10",
+    "@angular/router": "^21.2.10",
+    "@angular/service-worker": "^21.2.10",
     "@ng-icons/core": "^33.2.2",
     "@ng-icons/tabler-icons": "^33.2.2",
     "@tiptap/core": "^3.22.4",
@@ -50,14 +50,14 @@
     "jspdf": "^4.2.1",
     "rxjs": "^7.8.2",
     "tabbable": "^6.4.0",
-    "@simplysm/core-browser": "14.0.52",
-    "@simplysm/core-common": "14.0.52",
-    "@simplysm/service-client": "14.0.52",
-    "@simplysm/service-common": "14.0.52"
+    "@simplysm/core-browser": "14.0.54",
+    "@simplysm/service-client": "14.0.54",
+    "@simplysm/core-common": "14.0.54",
+    "@simplysm/service-common": "14.0.54"
   },
   "devDependencies": {
-    "@angular/compiler": "^21.2.9",
-    "@angular/platform-browser-dynamic": "^21.2.9"
+    "@angular/compiler": "^21.2.10",
+    "@angular/platform-browser-dynamic": "^21.2.10"
   },
   "scripts": {}
 }

package/scss/commons/_variables.scss

@@ -139,10 +139,10 @@ $vars: (
   animation-duration: 0.2s,
   elevation-size: 0.0833rem,
   sidebar: (
-    width: 15em,
+    width: 15rem,
   ),
   topbar: (
-    height: 3em,
+    height: 3rem,
   ),
   sheet: (
     pv: var(--gap-xs),

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

@@ -25,19 +25,19 @@ import { tablerSearch, tablerEraser } from "@ng-icons/tabler-icons";
 
 /**
  * 모달 선택 컴포넌트가 구현해야 하는 인터페이스
- * SdModalContentDef을 확장하여 selectMode와 selectedItemKeys를 추가한다.
+ * SdModalContentDef을 확장하여 selectMode와 selectedKeys를 추가한다.
  */
-export interface SdSelectModal<T> extends SdModalContentDef<SelectModalOutputResult<T>> {
+export interface SdSelectModal<TKey> extends SdModalContentDef<SelectModalOutputResult<TKey>> {
   selectMode: InputSignal<"single" | "multi" | undefined>;
-  selectedItemKeys: InputSignal<any[]>;
+  selectedKeys: InputSignal<TKey[]>;
 }
 
 /**
- * 모달 선택 정보 (selectMode/selectedItemKeys를 제외한 inputs)
+ * 모달 선택 정보 (selectMode/selectedKeys를 제외한 inputs)
  */
 export type SdSelectModalInfo<T extends SdSelectModal<any>> = SdModalInfo<
   T,
-  "selectMode" | "selectedItemKeys"
+  "selectMode" | "selectedKeys"
 >;
 
 @Component({
@@ -146,16 +146,14 @@ export type SdSelectModalInfo<T extends SdSelectModal<any>> = SdModalInfo<
   },
 })
 export class SdModalSelectButton<
-  T extends object,
   K,
   M extends keyof SelectModeValue<K> = keyof SelectModeValue<K>,
 > {
   private readonly _sdModal = inject(SdModalProvider);
 
-  modal = input.required<SdSelectModalInfo<SdSelectModal<T>>>();
+  modal = input.required<SdSelectModalInfo<SdSelectModal<K>>>();
 
   value = model<SelectModeValue<K>[M]>();
-  selectedItems = model<T[]>([]);
 
   disabled = input(false, { transform: booleanAttribute });
   required = input(false, { transform: booleanAttribute });
@@ -187,7 +185,6 @@ export class SdModalSelectButton<
 
   onEraseClick(): void {
     this.value.set((this.selectMode() === "multi" ? [] : undefined) as any);
-    this.selectedItems.set([]);
   }
 
   async onSearchClick(event: MouseEvent): Promise<void> {
@@ -199,7 +196,7 @@ export class SdModalSelectButton<
       ...modal,
       inputs: {
         selectMode: this.selectMode(),
-        selectedItemKeys: (this.selectMode() === "multi"
+        selectedKeys: (this.selectMode() === "multi"
           ? ((this.value() as any[] | undefined) ?? [])
           : [this.value()]
         ).filterExists(),
@@ -209,9 +206,8 @@ export class SdModalSelectButton<
 
     if (result) {
       const newValue =
-        this.selectMode() === "multi" ? result.selectedItemKeys : result.selectedItemKeys[0];
-      this.value.set(newValue);
-      this.selectedItems.set(result.selectedItems);
+        this.selectMode() === "multi" ? result.selectedKeys : result.selectedKeys[0];
+      this.value.set(newValue as SelectModeValue<K>[M]);
     }
   }
 }

package/src/core/select-modal-output-result.ts

@@ -1,7 +1,6 @@
 /**
  * 모달 선택 결과
  */
-export interface SelectModalOutputResult<T> {
-  selectedItemKeys: any[];
-  selectedItems: T[];
+export interface SelectModalOutputResult<TKey = any> {
+  selectedKeys: TKey[];
 }

package/src/core/selection/useSelectionManager.ts

@@ -1,27 +1,33 @@
 import { computed, type Signal, type WritableSignal } from "@angular/core";
 import { obj } from "@simplysm/core-common";
 
-export function useSelectionManager<T>(options: {
-  displayItems: Signal<T[]>;
-  selectedItems: WritableSignal<T[]>;
+export function useSelectionManager<TItem, TKey>(options: {
+  displayItems: Signal<TItem[]>;
+  selectedKeys: WritableSignal<NonNullable<TKey>[]>;
   selectMode: Signal<"single" | "multi" | undefined>;
-  getItemSelectableFn: Signal<((item: T) => boolean | string) | undefined>;
-  trackByFn: Signal<(item: T, index: number) => unknown>;
+  getItemSelectableFn: Signal<((item: TItem) => boolean | string) | undefined>;
+  trackByFn: Signal<(item: TItem, index: number) => TKey>;
 }): {
   hasSelectable: Signal<boolean>;
   isAllSelected: Signal<boolean>;
-  getSelectable(item: T): true | string | undefined;
-  getCanChangeFn(item: T): () => boolean;
-  select(item: T): void;
-  deselect(item: T): void;
-  toggle(item: T): void;
+  getSelectable(item: TItem): true | string | undefined;
+  getCanChangeFn(item: TItem): () => boolean;
+  select(item: TItem): void;
+  deselect(item: TItem): void;
+  toggle(item: TItem): void;
   toggleAll(): void;
-  isSelected(item: T): boolean;
+  isSelected(item: TItem): boolean;
 } {
   const selectableItems = computed(() => {
+    const trackFn = options.trackByFn();
+    const idxMap = new Map<TItem, number>();
+    options.displayItems().forEach((it, i) => idxMap.set(it, i));
     const fn = options.getItemSelectableFn();
-    if (fn == null) return options.displayItems();
-    return options.displayItems().filter((item) => fn(item) === true);
+    return options.displayItems().filter((item) => {
+      if (trackFn(item, idxMap.get(item) ?? 0) == null) return false;
+      if (fn == null) return true;
+      return fn(item) === true;
+    });
   });
 
   const hasSelectable = computed(() => {
@@ -29,22 +35,17 @@ export function useSelectionManager<T>(options: {
   });
 
   const displayItemIndexMap = computed(() => {
-    const map = new Map<T, number>();
+    const map = new Map<TItem, number>();
     options.displayItems().forEach((it, i) => map.set(it, i));
     return map;
   });
 
-  const selectedKeys = computed(() => {
-    const fn = options.trackByFn();
-    return options.selectedItems().map((it, i) => fn(it, i));
-  });
-
   function isKeyEqual(a: unknown, b: unknown): boolean {
     if (a === b) return true;
     return obj.equal(a, b);
   }
 
-  function keyOf(item: T): unknown {
+  function keyOf(item: TItem): TKey {
     const idx = displayItemIndexMap().get(item);
     return options.trackByFn()(item, idx ?? 0);
   }
@@ -52,7 +53,7 @@ export function useSelectionManager<T>(options: {
   const isAllSelected = computed(() => {
     const items = selectableItems();
     if (items.length === 0) return false;
-    const keys = selectedKeys();
+    const keys = options.selectedKeys();
     const fn = options.trackByFn();
     return items.every((it, i) => {
       const key = fn(it, i);
@@ -60,9 +61,10 @@ export function useSelectionManager<T>(options: {
     });
   });
 
-  function getSelectable(item: T): true | string | undefined {
+  function getSelectable(item: TItem): true | string | undefined {
     const mode = options.selectMode();
     if (mode == null) return undefined;
+    if (keyOf(item) == null) return undefined;
     const fn = options.getItemSelectableFn();
     if (fn == null) return true;
     const result = fn(item);
@@ -71,40 +73,40 @@ export function useSelectionManager<T>(options: {
     return result; // string reason
   }
 
-  function getCanChangeFn(item: T): () => boolean {
+  function getCanChangeFn(item: TItem): () => boolean {
     return () => {
       const selectable = getSelectable(item);
       return selectable === true;
     };
   }
 
-  function select(item: T): void {
+  function select(item: TItem): void {
     const mode = options.selectMode();
     if (mode == null) return;
     if (getSelectable(item) !== true) return;
 
+    const key = keyOf(item);
+    if (key == null) return;
+
     if (mode === "single") {
-      options.selectedItems.set([item]);
+      options.selectedKeys.set([key]);
       return;
     }
 
-    const key = keyOf(item);
-    const fn = options.trackByFn();
-    options.selectedItems.update((arr) => {
-      if (arr.some((it, i) => isKeyEqual(fn(it, i), key))) return arr;
-      return [...arr, item];
+    options.selectedKeys.update((arr) => {
+      if (arr.some((k) => isKeyEqual(k, key))) return arr;
+      return [...arr, key];
     });
   }
 
-  function deselect(item: T): void {
+  function deselect(item: TItem): void {
     const key = keyOf(item);
-    const fn = options.trackByFn();
-    options.selectedItems.update((arr) =>
-      arr.filter((it, i) => !isKeyEqual(fn(it, i), key)),
+    options.selectedKeys.update((arr) =>
+      arr.filter((k) => !isKeyEqual(k, key)),
     );
   }
 
-  function toggle(item: T): void {
+  function toggle(item: TItem): void {
     if (isSelected(item)) {
       deselect(item);
     } else {
@@ -119,27 +121,23 @@ export function useSelectionManager<T>(options: {
 
     if (isAllSelected()) {
       const keysToRemove = selectable.map((it) => fn(it, idxMap.get(it) ?? 0));
-      options.selectedItems.update((arr) =>
-        arr.filter((it, i) => {
-          const k = fn(it, i);
-          return !keysToRemove.some((rk) => isKeyEqual(rk, k));
-        }),
+      options.selectedKeys.update((arr) =>
+        arr.filter((k) => !keysToRemove.some((rk) => isKeyEqual(rk, k))),
       );
     } else {
-      options.selectedItems.update((arr) => {
-        const existingKeys = arr.map((it, i) => fn(it, i));
-        const toAdd = selectable.filter((it) => {
-          const k = fn(it, idxMap.get(it) ?? 0);
-          return !existingKeys.some((ek) => isKeyEqual(ek, k));
-        });
-        return [...arr, ...toAdd];
+      options.selectedKeys.update((arr) => {
+        const newKeys = selectable
+          .map((it) => fn(it, idxMap.get(it) ?? 0))
+          .filter((k): k is NonNullable<TKey> => k != null)
+          .filter((k) => !arr.some((ek) => isKeyEqual(ek, k)));
+        return [...arr, ...newKeys];
       });
     }
   }
 
-  function isSelected(item: T): boolean {
+  function isSelected(item: TItem): boolean {
     const key = keyOf(item);
-    return selectedKeys().some((k) => isKeyEqual(k, key));
+    return options.selectedKeys().some((k) => isKeyEqual(k, key));
   }
 
   return {

package/src/data/crud/sd-base-container.ts

@@ -0,0 +1,115 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  contentChild,
+  effect,
+  inject,
+  input,
+  model,
+  TemplateRef,
+  untracked,
+  ViewEncapsulation,
+} from "@angular/core";
+import { injectViewTitleSignal } from "../../core/routing/injectViewTitleSignal";
+import { SdBusyContainer } from "../../core/busy/sd-busy-container";
+import { SdSharedDataProvider } from "../../core/shared-data/sd-shared-data.provider";
+import { SdToastProvider } from "../../core/toast/sd-toast.provider";
+import { SdTopbar } from "../../layout/topbar/sd-topbar";
+import { SdTopbarContainer } from "../../layout/topbar/sd-topbar-container";
+import type { SdViewType } from "../../core/routing/injectViewTypeSignal";
+import { NgIcon } from "@ng-icons/core";
+import { tablerAlertTriangle } from "@ng-icons/tabler-icons";
+import { NgTemplateOutlet } from "@angular/common";
+
+@Component({
+  selector: "sd-base-container",
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  encapsulation: ViewEncapsulation.None,
+  standalone: true,
+  imports: [SdBusyContainer, NgIcon, SdTopbarContainer, NgTemplateOutlet, SdTopbar],
+  template: `
+    <sd-busy-container [busy]="initialized() && busyCount() > 0">
+      @if (initialized()) {
+        @if (restricted()) {
+          <div class="fill tx-theme-gray-light p-xxl tx-center">
+            <br />
+            <ng-icon [svg]="tablerAlertTriangle" [size]="'5rem'" />
+            <br />
+            <br />
+            '{{ viewTitle() }}'에 대한 사용권한이 없습니다. 시스템 관리자에게 문의하세요.
+          </div>
+        } @else if (viewType() === "page") {
+          <sd-topbar-container>
+            <sd-topbar>
+              <h4>{{ viewTitle() }}</h4>
+
+              <ng-template [ngTemplateOutlet]="topbarTplRef()" />
+            </sd-topbar>
+
+            <ng-template [ngTemplateOutlet]="content" />
+          </sd-topbar-container>
+        } @else {
+          <ng-template [ngTemplateOutlet]="content" />
+        }
+      }
+    </sd-busy-container>
+
+    <ng-template #content>
+      <div class="flex-column fill">
+        @if (commandTplRef()) {
+          <div class="p-default flex-row gap-default bdb bdb-theme-gray-lightest">
+            <ng-template [ngTemplateOutlet]="commandTplRef()" />
+          </div>
+        }
+
+        <div class="flex-fill">
+          <ng-content />
+        </div>
+
+        @if (bottomCommandTplRef()) {
+          <div class="p-sm-default flex-row main-align-end gap-sm bdt bdt-theme-gray-lightest">
+            <ng-template [ngTemplateOutlet]="bottomCommandTplRef()" />
+          </div>
+        }
+      </div>
+    </ng-template>
+  `,
+})
+export class SdBaseContainer {
+  private readonly _sdSharedData = inject(SdSharedDataProvider);
+  private readonly _sdToast = inject(SdToastProvider);
+
+  viewTitle = injectViewTitleSignal();
+
+  ready = model(false);
+  initialized = input(false);
+  busyCount = model(0);
+
+  restricted = input(false);
+
+  viewType = input.required<SdViewType>();
+
+  topbarTplRef = contentChild<TemplateRef<void>>("topbarTpl");
+  commandTplRef = contentChild<TemplateRef<void>>("commandTpl");
+  bottomCommandTplRef = contentChild<TemplateRef<void>>("bottomCommandTpl");
+
+  constructor() {
+    effect(() => {
+      if (this.restricted()) {
+        this.ready.set(true);
+        return;
+      }
+
+      void untracked(async () => {
+        this.busyCount.update((v) => v + 1);
+        await this._sdToast.try(async () => {
+          await this._sdSharedData.wait();
+        });
+        this.busyCount.update((v) => v - 1);
+        this.ready.set(true);
+      });
+    });
+  }
+
+  protected readonly tablerAlertTriangle = tablerAlertTriangle;
+}

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

@@ -0,0 +1,122 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  contentChild,
+  input,
+  model,
+  output,
+  type TemplateRef,
+  viewChild,
+  ViewEncapsulation,
+} from "@angular/core";
+import { SdButton } from "../../controls/button/sd-button";
+import { SdCommandDirective } from "../../core/commands/sd-command";
+import { SdForm } from "../../controls/form/sd-form";
+import type { SdViewType } from "../../core/routing/injectViewTypeSignal";
+import { SdBaseContainer } from "./sd-base-container";
+import { NgIcon } from "@ng-icons/core";
+import { NgTemplateOutlet } from "@angular/common";
+import { tablerDeviceFloppy } from "@ng-icons/tabler-icons";
+
+@Component({
+  selector: "sd-crud-detail",
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  encapsulation: ViewEncapsulation.None,
+  standalone: true,
+  imports: [SdBaseContainer, SdButton, NgIcon, NgTemplateOutlet, SdForm],
+  hostDirectives: [{ directive: SdCommandDirective, outputs: ["sdSaveCommand"] }],
+  host: {
+    "(sdSaveCommand)": "onSaveButtonClick()",
+  },
+  template: `
+    <sd-base-container
+      [(ready)]="ready"
+      [initialized]="initialized()"
+      [(busyCount)]="busyCount"
+      [restricted]="restricted()"
+      [viewType]="viewType()"
+    >
+      <!-- TOP -->
+      @if (viewType() === "page" && (!readonly() || commandTplRef())) {
+        <ng-template #topbarTpl>
+          @if (!readonly()) {
+            <sd-button [theme]="'link-primary'" (click)="formCtrl()?.requestSubmit()">
+              <ng-icon [svg]="tablerDeviceFloppy" />
+              저장
+              <small>(CTRL+S)</small>
+            </sd-button>
+          }
+
+          <ng-template [ngTemplateOutlet]="commandTplRef()" />
+        </ng-template>
+      } @else if (viewType() === "control" && (!readonly() || commandTplRef())) {
+        <ng-template #commandTpl>
+          @if (!readonly()) {
+            <sd-button [theme]="'primary'" (click)="onSaveButtonClick()">
+              <ng-icon [svg]="tablerDeviceFloppy" />
+              저장
+              <small>(CTRL+S)</small>
+            </sd-button>
+          }
+
+          <ng-template [ngTemplateOutlet]="commandTplRef()" />
+        </ng-template>
+      } @else if (commandTplRef()) {
+        <ng-template #commandTpl>
+          <ng-template [ngTemplateOutlet]="commandTplRef()" />
+        </ng-template>
+      }
+
+      <!-- BOTTOM -->
+      @if (viewType() === "modal" || bottomCommandTplRef()) {
+        <ng-template #bottomCommandTpl>
+          @if (bottomCommandTplRef()) {
+            <div class="flex-fill flex-row main-align-start gap-sm">
+              <ng-template [ngTemplateOutlet]="bottomCommandTplRef()" />
+            </div>
+          }
+
+          <sd-button [size]="'sm'" [theme]="'primary'" (click)="onSaveButtonClick()">
+            확인
+          </sd-button>
+        </ng-template>
+      }
+
+      <!-- CONTENT -->
+      <ng-template #contentTpl>
+        <ng-content />
+      </ng-template>
+
+      @if (readonly()) {
+        <div class="fill">
+          <ng-template [ngTemplateOutlet]="contentTpl" />
+        </div>
+      } @else {
+        <sd-form #formCtrl (formSubmit)="submit.emit()" class="block fill">
+          <ng-template [ngTemplateOutlet]="contentTpl" />
+        </sd-form>
+      }
+    </sd-base-container>
+  `,
+})
+export class SdCrudDetail {
+  ready = model(false);
+  initialized = input(false);
+  busyCount = model(0);
+  restricted = input(false);
+  readonly = input(false);
+  viewType = input.required<SdViewType>();
+
+  formCtrl = viewChild<SdForm>("formCtrl");
+
+  submit = output();
+
+  commandTplRef = contentChild<TemplateRef<void>>("commandTpl");
+  bottomCommandTplRef = contentChild<TemplateRef<void>>("bottomCommandTpl");
+
+  onSaveButtonClick() {
+    this.formCtrl()?.requestSubmit();
+  }
+
+  protected readonly tablerDeviceFloppy = tablerDeviceFloppy;
+}