@simplysm/angular 14.0.47 → 14.0.49

package/docs/utils.md

@@ -0,0 +1,244 @@
+# Utils & Setups
+
+## Utility Functions
+
+### `mark`
+
+WritableSignal의 변경 알림을 수동으로 트리거한다. 배열/객체의 내부 변경(mutation) 후 consumer에게 변경을 알릴 때 사용. shallow copy로 새 참조를 생성하여 signal을 업데이트한다.
+
+```typescript
+function mark(sig: WritableSignal<any>): void
+```
+
+| Parameter | Type | Description |
+|-----------|------|-------------|
+| `sig` | `WritableSignal<any>` | 대상 signal. 배열이면 `[...v]`, 객체이면 `{...v}`로 shallow copy하여 update |
+
+### `setSafeStyle`
+
+Renderer2를 사용하여 여러 CSS 스타일을 일괄 적용한다.
+
+```typescript
+function setSafeStyle(
+  renderer: Renderer2,
+  el: HTMLElement,
+  style: Partial<CSSStyleDeclaration>,
+): void
+```
+
+## Resource Functions
+
+### `injectSdSystemConfigResource`
+
+컴포넌트 태그명 기반 키로 시스템 설정을 읽고 쓰는 resource 래퍼. 생성자에서 호출.
+
+```typescript
+function injectSdSystemConfigResource<T>(options: {
+  key: Signal<string | undefined>;
+}): {
+  value: Signal<T | undefined>;
+  isLoading: Signal<boolean>;
+  status: Signal<ResourceStatus>;
+  hasValue: () => boolean;
+  reload: () => void;
+  set(value: T | undefined): void;
+  update(fn: (prev: T | undefined) => T | undefined): void;
+}
+```
+
+`set()`/`update()` 호출 시 signal을 즉시 업데이트하고, 비동기로 `SdSystemConfigProvider.setAsync()`를 호출하여 영속화한다.
+
+## Page Code / View Signals
+
+### `injectCurrentPageCodeSignal`
+
+현재 활성 라우트의 경로 세그먼트를 `.`으로 연결한 코드 signal. `ActivatedRoute`가 없으면 undefined 반환.
+
+```typescript
+function injectCurrentPageCodeSignal(): Signal<string> | undefined
+```
+
+### `injectFullPageCodeSignal`
+
+전체 URL 기반 페이지 코드 signal. `NavigationEnd` 이벤트를 구독하여 URL에서 코드를 추출한다.
+
+```typescript
+function injectFullPageCodeSignal(): Signal<string>
+```
+
+### `injectViewTitleSignal`
+
+현재 뷰의 타이틀 signal. 모달이면 모달 타이틀, 페이지이면 `SdAppStructureProvider`에서 조회.
+
+```typescript
+function injectViewTitleSignal(): Signal<string>
+```
+
+### `injectViewTypeSignal`
+
+현재 뷰의 타입 signal. 모달/페이지/컨트롤 중 하나를 반환한다.
+
+```typescript
+function injectViewTypeSignal(): Signal<SdViewType>
+```
+
+내부 판정 로직:
+- `SdActivatedModalProvider`가 inject되면 `"modal"`
+- `ActivatedRoute.component`의 `reflectComponentType().selector`가 호스트 `ElementRef.nativeElement.tagName.toLowerCase()`와 일치하고 `fullPageCode() === currPageCode?.()`이면 `"page"`
+- 그 외 `"control"`
+
+## Manager Functions
+
+### `useSelectionManager`
+
+선택 관리 composable. single/multi 모드를 지원한다. `trackByFn`이 반환하는 key를 기준으로 `obj.equal`(deep equal) 비교를 수행하므로, 같은 key의 다른 reference item도 `isSelected` true로 복원된다.
+
+```typescript
+function useSelectionManager<T>(options: {
+  displayItems: Signal<T[]>;
+  selectedItems: WritableSignal<T[]>;
+  selectMode: Signal<"single" | "multi" | undefined>;
+  getItemSelectableFn: Signal<((item: T) => boolean | string) | undefined>;
+  trackByFn: Signal<(item: T, index: number) => unknown>;
+}): {
+  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;
+  toggleAll(): void;
+  isSelected(item: T): boolean;
+}
+```
+
+| Return | Type | Description |
+|--------|------|-------------|
+| `hasSelectable` | `Signal<boolean>` | selectMode가 설정되어 있는지 여부 |
+| `isAllSelected` | `Signal<boolean>` | 모든 선택 가능 항목이 선택되었는지 |
+| `getSelectable(item)` | `true \| string \| undefined` | 선택 가능 여부. string은 불가 사유 |
+| `getCanChangeFn(item)` | `() => boolean` | 선택 변경 가능 여부 함수 |
+| `select(item)` | `void` | 항목 선택 (single이면 교체) |
+| `deselect(item)` | `void` | 항목 선택 해제 |
+| `toggle(item)` | `void` | 항목 토글 |
+| `toggleAll()` | `void` | 전체 선택/해제 토글 |
+| `isSelected(item)` | `boolean` | 선택 여부 |
+
+### `useSortingManager`
+
+정렬 관리 composable.
+
+```typescript
+function useSortingManager(options: {
+  sorts: WritableSignal<SortingDef[]>;
+}): {
+  defMap: Signal<Map<string, { indexText?: string; desc: boolean }>>;
+  toggle(key: string, multiple: boolean): void;
+  sort<T>(items: T[]): T[];
+}
+```
+
+| Return | Type | Description |
+|--------|------|-------------|
+| `defMap` | `Signal<Map<string, ...>>` | 키별 정렬 정의 (인덱스 텍스트, 방향) |
+| `toggle(key, multiple)` | `void` | 정렬 토글. `multiple=true`면 멀티 소트, `false`면 단일 소트. 3단계: asc -> desc -> 없음 |
+| `sort(items)` | `T[]` | 정렬 적용. 원본 배열은 변경하지 않음 |
+
+### `useExpandingManager`
+
+트리 확장/축소 관리 composable.
+
+```typescript
+function useExpandingManager<T>(binding: {
+  items: Signal<T[]>;
+  expandedItems: WritableSignal<T[]>;
+  getChildrenFn: Signal<((item: T, index: number) => T[] | undefined) | undefined>;
+  sort: (items: T[]) => T[];
+}): {
+  displayItems: Signal<T[]>;
+  hasExpandable: Signal<boolean>;
+  isAllExpanded: Signal<boolean>;
+  toggle(item: T): void;
+  toggleAll(): void;
+  isVisible(item: T): boolean;
+  def(item: T): ExpandItemDef<T>;
+}
+```
+
+| Return | Type | Description |
+|--------|------|-------------|
+| `displayItems` | `Signal<T[]>` | 트리를 평탄화한 전체 항목 (숨김 포함) |
+| `hasExpandable` | `Signal<boolean>` | 확장 가능한 항목 존재 여부 |
+| `isAllExpanded` | `Signal<boolean>` | 모든 확장 가능 항목이 펼쳐졌는지 |
+| `toggle(item)` | `void` | 항목 확장/축소 토글 |
+| `toggleAll()` | `void` | 전체 확장/축소 토글 |
+| `isVisible(item)` | `boolean` | 부모 체인이 모두 펼쳐져 항목이 보이는지 |
+| `def(item)` | `ExpandItemDef<T>` | 항목의 트리 정의 (depth, parentDef 등) |
+
+## Setup Functions
+
+생성자에서 호출하는 설정 함수들. `inject()`, `effect()`, `DestroyRef.onDestroy()`를 사용하여 수명주기를 관리한다.
+
+### `setupBgTheme`
+
+body 배경 테마 색상을 설정한다. 파괴 시 자동 복원.
+
+```typescript
+function setupBgTheme(options?: {
+  theme?: "primary" | "secondary" | "info" | "success" | "warning" | "danger" | "gray" | "blue-gray";
+  lightness?: "lightest" | "lighter";
+}): void
+```
+
+### `setupRipple`
+
+호스트 요소에 리플 효과를 설정한다. pointer 이벤트 기반.
+
+```typescript
+function setupRipple(enableFn?: () => boolean): void
+```
+
+### `setupRevealOnShow`
+
+뷰포트 진입 시 reveal 애니메이션을 설정한다. IntersectionObserver 사용.
+
+```typescript
+function setupRevealOnShow(optFn?: () => {
+  type?: "l2r" | "t2b";
+  enabled?: boolean;
+}): void
+```
+
+### `setupInvalid`
+
+유효성 검증 표시기를 설정한다. 빨간 점 indicator + hidden input으로 구현.
+
+```typescript
+function setupInvalid(getInvalidMessage: () => string): void
+```
+
+빈 문자열이면 유효, 비어있지 않으면 무효.
+
+### `setupModelHook`
+
+model signal의 `set`/`update`를 가드 함수로 래핑한다. 가드 함수가 `false`를 반환하면 값 변경을 차단.
+
+```typescript
+function setupModelHook<T, S extends WritableSignal<T>>(
+  model: S,
+  canFn: Signal<(item: T) => boolean | Promise<boolean>>,
+): void
+```
+
+### `setupCanDeactivate`
+
+모달 또는 라우트에 canDeactivate 가드를 설정한다.
+
+```typescript
+function setupCanDeactivate(fn: () => boolean): void
+```
+
+모달 내부이면 `SdActivatedModalProvider.canDeactivateFn`에 설정, 라우트 내부이면 `routeConfig.canDeactivate`에 추가.
+
+

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@simplysm/angular",
-  "version": "14.0.47",
+  "version": "14.0.49",
   "description": "심플리즘 패키지 - Angular",
   "author": "심플리즘",
   "license": "Apache-2.0",
@@ -16,7 +16,8 @@
   "files": [
     "dist",
     "src",
-    "scss"
+    "scss",
+    "docs"
   ],
   "sideEffects": [
     "./src/index.ts",
@@ -30,30 +31,30 @@
     "@angular/platform-browser": "^21.2.9",
     "@angular/router": "^21.2.9",
     "@angular/service-worker": "^21.2.9",
-    "@ng-icons/core": "^33.2.1",
-    "@ng-icons/tabler-icons": "^33.2.1",
-    "@tiptap/core": "^3.22.3",
-    "@tiptap/extension-color": "^3.22.3",
-    "@tiptap/extension-document": "^3.22.3",
-    "@tiptap/extension-highlight": "^3.22.3",
-    "@tiptap/extension-image": "^3.22.3",
-    "@tiptap/extension-paragraph": "^3.22.3",
-    "@tiptap/extension-placeholder": "^3.22.3",
-    "@tiptap/extension-text": "^3.22.3",
-    "@tiptap/extension-text-align": "^3.22.3",
-    "@tiptap/extension-text-style": "^3.22.3",
-    "@tiptap/extension-underline": "^3.22.3",
-    "@tiptap/starter-kit": "^3.22.3",
+    "@ng-icons/core": "^33.2.2",
+    "@ng-icons/tabler-icons": "^33.2.2",
+    "@tiptap/core": "^3.22.4",
+    "@tiptap/extension-color": "^3.22.4",
+    "@tiptap/extension-document": "^3.22.4",
+    "@tiptap/extension-highlight": "^3.22.4",
+    "@tiptap/extension-image": "^3.22.4",
+    "@tiptap/extension-paragraph": "^3.22.4",
+    "@tiptap/extension-placeholder": "^3.22.4",
+    "@tiptap/extension-text": "^3.22.4",
+    "@tiptap/extension-text-align": "^3.22.4",
+    "@tiptap/extension-text-style": "^3.22.4",
+    "@tiptap/extension-underline": "^3.22.4",
+    "@tiptap/starter-kit": "^3.22.4",
     "bwip-js": "^4.9.2",
     "echarts": "^6.0.0",
     "html-to-image": "^1.11.13",
     "jspdf": "^4.2.1",
     "rxjs": "^7.8.2",
     "tabbable": "^6.4.0",
-    "@simplysm/core-browser": "14.0.47",
-    "@simplysm/service-common": "14.0.47",
-    "@simplysm/core-common": "14.0.47",
-    "@simplysm/service-client": "14.0.47"
+    "@simplysm/core-browser": "14.0.49",
+    "@simplysm/core-common": "14.0.49",
+    "@simplysm/service-client": "14.0.49",
+    "@simplysm/service-common": "14.0.49"
   },
   "devDependencies": {
     "@angular/compiler": "^21.2.9",

package/scss/commons/_styles.scss

@@ -111,6 +111,18 @@
 } // @layer base
 
 @layer utilities {
+  .block {
+    display: block;
+  }
+
+  .inline-block {
+    display: inline-block;
+  }
+
+  .inline {
+    display: inline;
+  }
+
   //-- FONT SIZE
 
   @each $h in (h1, h2, h3, h4, h5, h6) {

package/src/controls/dropdown/sd-dropdown-popup.ts

@@ -91,6 +91,7 @@ export class SdDropdownPopup {
     forwardRef(() => SdDropdown),
   );
   private readonly _elRef = inject(ElementRef<HTMLElement>);
+  private _capped = false;
 
   onKeydown(event: KeyboardEvent): void {
     this._parentControl.onPopupKeydown(event);
@@ -98,8 +99,11 @@ export class SdDropdownPopup {
 
   onResize(): void {
     const el = this._elRef.nativeElement;
-    const divEl = el.firstElementChild!;
-    if (divEl.clientHeight > 300) {
+    const divEl = el.firstElementChild as HTMLElement;
+    const shouldCap = divEl.scrollHeight > 300;
+    if (shouldCap === this._capped) return;
+    this._capped = shouldCap;
+    if (shouldCap) {
       el.style.height = "300px";
     } else {
       el.style.removeProperty("height");

package/src/controls/dropdown/sd-dropdown.ts

@@ -37,10 +37,9 @@ export class SdDropdown {
   open = model(false);
   disabled = input(false, { transform: booleanAttribute });
 
-  popupElRef = contentChild.required<SdDropdownPopup, ElementRef<HTMLElement>>(
-    SdDropdownPopup,
-    { read: ElementRef },
-  );
+  popupElRef = contentChild.required<SdDropdownPopup, ElementRef<HTMLElement>>(SdDropdownPopup, {
+    read: ElementRef,
+  });
 
   private _popupEl?: HTMLElement;
   private _mouseoverEl?: HTMLElement;

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

@@ -52,7 +52,12 @@ export type SelectModeValue<T> = {
   ],
   template: `
     <sd-dropdown [disabled]="disabled()" [(open)]="dropdownOpen">
-      <div class="_sd-select-control" [sdRipple]="!disabled()">
+      <div
+        class="_sd-select-control"
+        [class]="contentClass()"
+        [style]="contentStyle()"
+        [sdRipple]="!disabled()"
+      >
         <div class="_sd-select-control-content" #contentEl>
           @if (_selectedItemContentHTML() != null) {
             <div [innerHTML]="_selectedItemContentHTML()"></div>
@@ -321,30 +326,9 @@ export class SdSelect<M extends "single" | "multi", T> {
       return "";
     });
 
-    // D3: contentClass/contentStyle via effect() on popup element
-    // + D4: keyboard navigation via tabbable()
     effect((onCleanup) => {
       if (this.dropdownOpen()) {
         const popupEl = this._dropdownControl().popupElRef().nativeElement;
-        const cls = this.contentClass();
-        const addedClasses: string[] = [];
-        if (cls != null) {
-          for (const c of cls.split(" ").filter(Boolean)) {
-            popupEl.classList.add(c);
-            addedClasses.push(c);
-          }
-        }
-        const style = this.contentStyle();
-        const addedStyleProps: string[] = [];
-        if (style != null) {
-          const tempEl = document.createElement("div");
-          tempEl.style.cssText = style;
-          for (let i = 0; i < tempEl.style.length; i++) {
-            const prop = tempEl.style[i];
-            addedStyleProps.push(prop);
-            popupEl.style.setProperty(prop, tempEl.style.getPropertyValue(prop));
-          }
-        }
 
         const onKeydown = (event: KeyboardEvent) => {
           if (event.ctrlKey || event.altKey) return;
@@ -364,9 +348,7 @@ export class SdSelect<M extends "single" | "multi", T> {
                 tabbableEls[nextIndex].focus();
               }
             } else {
-              // ArrowUp
               if (currIndex <= 0) {
-                // Return focus to dropdown trigger
                 this._dropdownElRef().nativeElement.focus();
               } else {
                 tabbableEls[currIndex - 1].focus();
@@ -378,12 +360,6 @@ export class SdSelect<M extends "single" | "multi", T> {
         popupEl.addEventListener("keydown", onKeydown);
         onCleanup(() => {
           popupEl.removeEventListener("keydown", onKeydown);
-          for (const c of addedClasses) {
-            popupEl.classList.remove(c);
-          }
-          for (const prop of addedStyleProps) {
-            popupEl.style.removeProperty(prop);
-          }
         });
       }
     });

package/src/core/routing/injectViewTypeSignal.ts

@@ -1,12 +1,13 @@
-import { computed, inject, type Signal } from "@angular/core";
+import { computed, ElementRef, inject, reflectComponentType, type Signal } from "@angular/core";
 import { ActivatedRoute } from "@angular/router";
 import { SdActivatedModalProvider } from "../modal/sd-activated-modal.provider";
 import { injectCurrentPageCodeSignal } from "./injectCurrentPageCodeSignal";
 import { injectFullPageCodeSignal } from "./injectFullPageCodeSignal";
 
-export function injectViewTypeSignal(getComp: () => object): Signal<SdViewType> {
+export function injectViewTypeSignal(): Signal<SdViewType> {
   const sdActivatedModal = inject(SdActivatedModalProvider, { optional: true });
   const activatedRoute = inject(ActivatedRoute, { optional: true });
+  const elRef = inject(ElementRef);
 
   const fullPageCode = injectFullPageCodeSignal();
   const currPageCode = injectCurrentPageCodeSignal();
@@ -16,14 +17,20 @@ export function injectViewTypeSignal(getComp: () => object): Signal<SdViewType>
       return "modal";
     }
 
-    const comp = getComp();
-
-    if (
-      activatedRoute &&
-      activatedRoute.component === comp.constructor &&
-      fullPageCode() === currPageCode?.()
-    ) {
-      return "page";
+    if (activatedRoute) {
+      const component = activatedRoute.component;
+      if (component == null || typeof component === "string") {
+        return "control";
+      }
+      if (
+        reflectComponentType(component)?.selector !==
+        elRef.nativeElement.tagName.toLowerCase()
+      ) {
+        return "control";
+      }
+      if (fullPageCode() === currPageCode?.()) {
+        return "page";
+      }
     }
 
     return "control";

package/src/core/selection/useSelectionManager.ts

@@ -1,10 +1,12 @@
 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[]>;
   selectMode: Signal<"single" | "multi" | undefined>;
   getItemSelectableFn: Signal<((item: T) => boolean | string) | undefined>;
+  trackByFn: Signal<(item: T, index: number) => unknown>;
 }): {
   hasSelectable: Signal<boolean>;
   isAllSelected: Signal<boolean>;
@@ -26,13 +28,36 @@ export function useSelectionManager<T>(options: {
     return options.selectMode() != null;
   });
 
-  const selectedItemsSet = computed(() => new Set(options.selectedItems()));
+  const displayItemIndexMap = computed(() => {
+    const map = new Map<T, 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 {
+    const idx = displayItemIndexMap().get(item);
+    return options.trackByFn()(item, idx ?? 0);
+  }
 
   const isAllSelected = computed(() => {
     const items = selectableItems();
     if (items.length === 0) return false;
-    const set = selectedItemsSet();
-    return items.every((item) => set.has(item));
+    const keys = selectedKeys();
+    const fn = options.trackByFn();
+    return items.every((it, i) => {
+      const key = fn(it, i);
+      return keys.some((k) => isKeyEqual(k, key));
+    });
   });
 
   function getSelectable(item: T): true | string | undefined {
@@ -60,16 +85,23 @@ export function useSelectionManager<T>(options: {
 
     if (mode === "single") {
       options.selectedItems.set([item]);
-    } else {
-      options.selectedItems.update((arr) => {
-        if (arr.includes(item)) return arr;
-        return [...arr, item];
-      });
+      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];
+    });
   }
 
   function deselect(item: T): void {
-    options.selectedItems.update((arr) => arr.filter((i) => i !== item));
+    const key = keyOf(item);
+    const fn = options.trackByFn();
+    options.selectedItems.update((arr) =>
+      arr.filter((it, i) => !isKeyEqual(fn(it, i), key)),
+    );
   }
 
   function toggle(item: T): void {
@@ -81,15 +113,33 @@ export function useSelectionManager<T>(options: {
   }
 
   function toggleAll(): void {
+    const selectable = selectableItems();
+    const fn = options.trackByFn();
+    const idxMap = displayItemIndexMap();
+
     if (isAllSelected()) {
-      options.selectedItems.set([]);
+      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));
+        }),
+      );
     } else {
-      options.selectedItems.set([...selectableItems()]);
+      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];
+      });
     }
   }
 
   function isSelected(item: T): boolean {
-    return selectedItemsSet().has(item);
+    const key = keyOf(item);
+    return selectedKeys().some((k) => isKeyEqual(k, key));
   }
 
   return {