@simplysm/angular 14.0.7 → 14.0.9

package/src/ui/overlay/modal/sd-modal.provider.ts

@@ -14,7 +14,10 @@ import {
 } from "@angular/core";
 import { outputToObservable } from "@angular/core/rxjs-interop";
 import { Subscription } from "rxjs";
-import type { TDirectiveInputSignals } from "../../../core/utils/TDirectiveInputSignals";
+import type {
+  TDirectiveInputSignals,
+  TWithOptional,
+} from "../../../core/utils/TDirectiveInputSignals";
 import { SdModalControl } from "./sd-modal.control";
 import "@simplysm/core-browser";
 
@@ -25,15 +28,24 @@ export interface ISdModal<O> {
   initialized: Signal<boolean>;
   close: OutputEmitterRef<O | undefined>;
   actionTplRef?: TemplateRef<any>;
+  readonly _optionalModalInputs?: string;
 }
 
+type TSdModalExcludeKeys = "initialized" | "close" | "actionTplRef" | "_optionalModalInputs";
+type TSdModalOptionalKeys<T> = T extends { _optionalModalInputs?: infer K extends string }
+  ? K
+  : never;
+
 /**
  * 모달 생성 시 전달하는 정보
  */
-export interface ISdModalInfo<T extends ISdModal<any>> {
+export interface ISdModalInfo<T extends ISdModal<any>, X extends keyof any = ""> {
   title: string;
   type: Type<T>;
-  inputs: Omit<TDirectiveInputSignals<T>, "initialized" | "close" | "actionTplRef">;
+  inputs: TWithOptional<
+    Omit<TDirectiveInputSignals<T>, TSdModalExcludeKeys | X>,
+    TSdModalOptionalKeys<T> & keyof Omit<TDirectiveInputSignals<T>, TSdModalExcludeKeys | X>
+  >;
 }
 
 /**

package/src/ui/overlay/toast/sd-toast.provider.ts

@@ -201,12 +201,13 @@ export class SdToastProvider {
       const progressSignal = toastRef.instance.progress;
 
       effect(
-        () => {
+        (onCleanup) => {
           const val = progressSignal();
           if (val >= 100) {
-            setTimeout(() => {
+            const timerId = setTimeout(() => {
               this._dismissToast(toastRef);
             }, 1000);
+            onCleanup(() => clearTimeout(timerId));
           }
         },
         { injector: toastRef.injector },
@@ -260,14 +261,19 @@ export class SdToastProvider {
     toastRef.instance.open.set(false);
 
     const el = toastRef.location.nativeElement as HTMLElement;
+    let fallbackId: ReturnType<typeof setTimeout>;
+
     const onTransitionEnd = () => {
+      clearTimeout(fallbackId);
       el.removeEventListener("transitionend", onTransitionEnd);
       this._destroyToast(toastRef);
     };
+
     el.addEventListener("transitionend", onTransitionEnd);
 
     // fallback: transition이 없는 경우 300ms 후 파괴
-    setTimeout(() => {
+    fallbackId = setTimeout(() => {
+      el.removeEventListener("transitionend", onTransitionEnd);
       this._destroyToast(toastRef);
     }, 300);
   }

package/src/ui/visual/sd-progress.control.ts

@@ -2,6 +2,7 @@ import {
   booleanAttribute,
   ChangeDetectionStrategy,
   Component,
+  computed,
   input,
   ViewEncapsulation,
 } from "@angular/core";
@@ -22,7 +23,7 @@ import { PercentPipe } from "@angular/common";
     <div class="_content tx-right">
       {{ value() | percent: "1.0-2" }}
     </div>
-    <div class="_progress" [style.width]="value() * 100 + '%'"></div>
+    <div class="_progress" [style.width]="_barWidth()"></div>
   `,
   styles: [
     /* language=SCSS */ `
@@ -85,4 +86,6 @@ export class SdProgressControl {
   >();
 
   value = input.required<number>();
+
+  _barWidth = computed(() => Math.min(this.value() * 100, 100) + "%");
 }

package/docs/commons-and-configuration.md

@@ -1,34 +0,0 @@
-# Commons & Configuration
-
-## `provideSdAngular`
-
-Bootstrap function that registers all core providers, event plugins, the global error handler, and zoneless change detection. Call in `bootstrapApplication`.
-
-```typescript
-function provideSdAngular(opt: { clientName: string }): EnvironmentProviders
-```
-
-Registers:
-- `SdAngularConfigProvider` with the given `clientName`
-- `SdThemeProvider` with dark mode persistence via `SdLocalStorageProvider`
-- All event manager plugins (`SdSaveCommandEventPlugin`, `SdRefreshCommandEventPlugin`, `SdInsertCommandEventPlugin`, `SdResizeEventPlugin`, `SdIntersectionEventPlugin`, `SdOptionEventPlugin`)
-- `SdGlobalErrorHandlerPlugin` as `ErrorHandler`
-- `provideZonelessChangeDetection()`
-- Global unhandled rejection/error listeners
-- Service Worker update polling (5-minute interval)
-- Router navigation busy indicator
-
-## `TXT_CHANGE_IGNORE_CONFIRM`
-
-Confirmation message text displayed when the user attempts to navigate away with unsaved changes.
-
-```typescript
-const TXT_CHANGE_IGNORE_CONFIRM: string
-```
-
-Value (Korean):
-```
-변경사항이 있습니다. 모든 변경사항을 무시하시겠습니까?
-- 확인: 변경사항을 무시하고, 현재 요청한 작업을 수행
-- 취소: 현재 요청한 작업을 취소하고, 변경사항 재검토
-```

package/docs/data-display-components.md

@@ -1,146 +0,0 @@
-# Data Display Components
-
-## `SdListControl`
-
-List container component.
-
-Selector: `sd-list`
-
-| Input | Type | Description |
-|-------|------|-------------|
-| `inset` | `boolean` (booleanAttribute) | Transparent background (default: `false`) |
-
-## `SdListItemControl`
-
-List item with accordion or flat layout. Supports collapsible child lists, ripple effect, selected state, tool template, and selected icon.
-
-Selector: `sd-list-item`
-
-| Input/Model | Type | Description |
-|-------------|------|-------------|
-| `layout` | `"accordion" \| "flat"` | Layout mode (default: `"accordion"`) |
-| `open` (model) | `boolean` | Collapse open state (default: `false`) |
-| `selected` | `boolean` (booleanAttribute) | Selected state (default: `false`) |
-| `selectedIcon` | `string` | Optional icon SVG for selection indicator |
-| `readonly` | `boolean` (booleanAttribute) | Read-only mode (default: `false`) |
-
-Content children:
-- `#toolTpl` template: Additional tool area rendered on the right side
-- `<sd-list>` child: Nested list shown in collapse
-
-## `SdSheetControl`
-
-Full-featured data grid with sorting, selection, tree expanding, pagination, column resizing, and configuration persistence.
-
-Selector: `sd-sheet`
-
-### Inputs
-
-| Input | Type | Description |
-|-------|------|-------------|
-| `key` | `string` | Config key for column settings persistence |
-| `items` | `T[]` | Data items (default: `[]`) |
-| `trackByFn` | `(item: T, index: number) => unknown` | Track-by function for rows |
-| `selectMode` | `"single" \| "multi"` | Selection mode |
-| `autoSelect` | `"click" \| "focus"` | Auto-select trigger |
-| `getItemSelectableFn` | `(item: T) => boolean \| string` | Item selectable check (string = disabled reason) |
-| `getChildrenFn` | `(item: T, index: number) => T[] \| undefined` | Children accessor for tree mode |
-| `useAutoSort` | `boolean` (booleanAttribute) | Enable client-side sorting (default: `false`) |
-| `visiblePageCount` | `number` | Visible page buttons (default: `10`) |
-| `totalPageCount` | `number` | Total pages (server-side pagination, default: `0`) |
-| `itemsPerPage` | `number` | Items per page (client-side pagination, default: `0` = no pagination) |
-| `focusMode` | `"row" \| "cell"` | Focus navigation mode (default: `"cell"`) |
-| `inset` | `boolean` (booleanAttribute) | Borderless inset style (default: `false`) |
-| `contentStyle` | `string` | Inline style for the scroll container |
-| `getItemCellClassFn` | `(item: T, colKey: string) => string` | Cell CSS class function |
-| `getItemCellStyleFn` | `(item: T, colKey: string) => string` | Cell inline style function |
-| `hideConfigBar` | `boolean` (booleanAttribute) | Hide config/pagination bar (default: `false`) |
-
-### Models
-
-| Model | Type | Description |
-|-------|------|-------------|
-| `selectedItems` | `T[]` | Selected items (default: `[]`) |
-| `expandedItems` | `T[]` | Expanded tree items (default: `[]`) |
-| `sorts` | `ISortingDef[]` | Sort definitions (default: `[]`) |
-| `currentPage` | `number` | Current page index, 0-based (default: `0`) |
-
-### Outputs
-
-| Output | Type | Description |
-|--------|------|-------------|
-| `itemKeydown` | `ISdSheetItemKeydownEventParam<T>` | Row-level keydown event |
-| `cellKeydown` | `ISdSheetItemKeydownEventParam<T>` | Cell-level keydown event |
-
-## `SdSheetColumnDirective`
-
-Column definition for `SdSheetControl`. Defines header, width, and cell/summary templates.
-
-Selector: `sd-sheet-column`
-
-| Input | Type | Description |
-|-------|------|-------------|
-| `key` | `string` (required) | Unique column key |
-| `header` | `string \| string[]` | Header text (multi-level headers via array, default: `""`) |
-| `width` | `string` | Column width (CSS value) |
-| `fixed` | `boolean` (booleanAttribute) | Fixed column (default: `false`) |
-| `hidden` | `boolean` (booleanAttribute) | Hidden column (default: `false`) |
-| `collapse` | `boolean` (booleanAttribute) | Collapsed column (default: `false`) |
-| `disableSorting` | `boolean` (booleanAttribute) | Disable sorting for this column (default: `false`) |
-| `disableResizing` | `boolean` (booleanAttribute) | Disable resizing for this column (default: `false`) |
-| `ordering` | `number` | Column display order (default: `0`) |
-
-Content children:
-- `#cellTpl` template: Cell content template. Context: `{ $implicit: T, item: T, index: number, depth: number, edit: boolean }`
-- `#summaryTpl` template: Summary (footer) template
-
-## `SdSheetConfigModal`
-
-Modal for configuring sheet columns (visibility, order, width, fixed state). Implements `ISdModal<ISdSheetConfig>`.
-
-Selector: `sd-sheet-config-modal`
-
-| Input | Type | Description |
-|-------|------|-------------|
-| `columns` | `SdSheetColumnDirective[]` (required) | Column directives |
-| `config` | `ISdSheetConfig` (required) | Current configuration |
-
-## Types
-
-### `ISdSheetColumnDef`
-
-| Field | Type | Description |
-|-------|------|-------------|
-| `key` | `string` | Unique column key |
-| `header` | `string \| string[]` | Header text |
-| `width` | `string \| undefined` | Column width |
-| `fixed` | `boolean` | Whether column is fixed |
-| `hidden` | `boolean` | Whether column is hidden |
-| `collapse` | `boolean` | Whether column is collapsed |
-| `disableSorting` | `boolean` | Whether sorting is disabled |
-| `disableResizing` | `boolean` | Whether resizing is disabled |
-| `ordering` | `number` | Display order |
-
-### `ISdSheetConfig`
-
-| Field | Type | Description |
-|-------|------|-------------|
-| `columnRecord` | `Record<string, { width?: string; hidden?: boolean; fixed?: boolean; ordering?: number }>` | Per-column overrides |
-
-### `ISdSheetHeaderDef`
-
-| Field | Type | Description |
-|-------|------|-------------|
-| `text` | `string` | Header cell text |
-| `colspan` | `number` | Column span |
-| `rowspan` | `number` | Row span |
-| `isLastRow` | `boolean` | Whether this is the last header row |
-| `colDef` | `ISdSheetColumnDef \| undefined` | Associated column definition |
-
-### `ISdSheetItemKeydownEventParam`
-
-| Field | Type | Description |
-|-------|------|-------------|
-| `item` | `T` | The data item |
-| `key` | `string` | Optional column key (for cell keydown) |
-| `event` | `KeyboardEvent` | The keyboard event |

package/docs/directives.md

@@ -1,158 +0,0 @@
-# Directives
-
-## `SdEventsDirective`
-
-Exposes capture, passive, once, and custom event outputs for template binding. Automatically selected when using supported event bindings.
-
-Selector: `[click.capture]`, `[click.once]`, `[mousedown.capture]`, `[scroll.passive]`, `[sdResize]`, `[sdSaveCommand]`, etc.
-
-Outputs:
-
-| Output | Type | Description |
-|--------|------|-------------|
-| `click.capture` | `OutputEmitterRef<MouseEvent>` | Click in capture phase |
-| `click.once` | `OutputEmitterRef<MouseEvent>` | Click once |
-| `click.capture.once` | `OutputEmitterRef<MouseEvent>` | Click capture once |
-| `mousedown.capture` | `OutputEmitterRef<MouseEvent>` | Mouse down capture |
-| `mouseup.capture` | `OutputEmitterRef<MouseEvent>` | Mouse up capture |
-| `mouseover.capture` | `OutputEmitterRef<MouseEvent>` | Mouse over capture |
-| `mouseout.capture` | `OutputEmitterRef<MouseEvent>` | Mouse out capture |
-| `keydown.capture` | `OutputEmitterRef<KeyboardEvent>` | Key down capture |
-| `keyup.capture` | `OutputEmitterRef<KeyboardEvent>` | Key up capture |
-| `focus.capture` | `OutputEmitterRef<FocusEvent>` | Focus capture |
-| `blur.capture` | `OutputEmitterRef<FocusEvent>` | Blur capture |
-| `invalid.capture` | `OutputEmitterRef<Event>` | Invalid capture |
-| `scroll.capture` | `OutputEmitterRef<Event>` | Scroll capture |
-| `scroll.passive` | `OutputEmitterRef<Event>` | Scroll passive |
-| `scroll.capture.passive` | `OutputEmitterRef<Event>` | Scroll capture passive |
-| `wheel.passive` | `OutputEmitterRef<WheelEvent>` | Wheel passive |
-| `wheel.capture.passive` | `OutputEmitterRef<WheelEvent>` | Wheel capture passive |
-| `touchstart.passive` | `OutputEmitterRef<TouchEvent>` | Touch start passive |
-| `touchstart.capture.passive` | `OutputEmitterRef<TouchEvent>` | Touch start capture passive |
-| `touchmove.passive` | `OutputEmitterRef<TouchEvent>` | Touch move passive |
-| `touchmove.capture.passive` | `OutputEmitterRef<TouchEvent>` | Touch move capture passive |
-| `touchend.passive` | `OutputEmitterRef<TouchEvent>` | Touch end passive |
-| `dragover.capture` | `OutputEmitterRef<DragEvent>` | Drag over capture |
-| `dragenter.capture` | `OutputEmitterRef<DragEvent>` | Drag enter capture |
-| `dragleave.capture` | `OutputEmitterRef<DragEvent>` | Drag leave capture |
-| `drop.capture` | `OutputEmitterRef<DragEvent>` | Drop capture |
-| `transitionend.once` | `OutputEmitterRef<TransitionEvent>` | Transition end once |
-| `animationend.once` | `OutputEmitterRef<AnimationEvent>` | Animation end once |
-| `sdResize` | `OutputEmitterRef<ISdResizeEvent>` | Resize observer event |
-| `sdRefreshCommand` | `OutputEmitterRef<KeyboardEvent>` | Ctrl+Alt+L command |
-| `sdSaveCommand` | `OutputEmitterRef<KeyboardEvent>` | Ctrl+S command |
-| `sdInsertCommand` | `OutputEmitterRef<KeyboardEvent>` | Ctrl+Insert command |
-
-## `SdRippleDirective`
-
-Adds material-style ripple effect on pointer interaction.
-
-Selector: `[sd-ripple]`
-
-| Input | Type | Description |
-|-------|------|-------------|
-| `sd-ripple` (alias) | `boolean` (required, booleanAttribute) | Whether ripple is enabled |
-
-## `SdShowEffectDirective`
-
-Animates element reveal when it enters the viewport via IntersectionObserver.
-
-Selector: `[sd-show-effect]`
-
-| Input | Type | Description |
-|-------|------|-------------|
-| `sd-show-effect` (alias) | `boolean` (required, booleanAttribute) | Whether effect is enabled |
-| `sdShowEffectType` | `"l2r" \| "t2b"` | Animation direction (default: `"t2b"`) |
-
-## `SdInvalidDirective`
-
-Shows a validation indicator with a custom message on the host element. Integrates with form validation.
-
-Selector: `[sd-invalid]`
-
-| Input | Type | Description |
-|-------|------|-------------|
-| `sd-invalid` (alias) | `string` (required) | Validation error message (empty string = valid) |
-
-## `SdTypedTemplateDirective`
-
-Provides type-safe ng-template context guard for custom template contexts.
-
-Selector: `ng-template[typed]`
-
-| Input | Type | Description |
-|-------|------|-------------|
-| `typed` | `T` (required) | Context type token |
-
-```typescript
-class SdTypedTemplateDirective<T> {
-  static ngTemplateContextGuard<TypeToken>(
-    _dir: SdTypedTemplateDirective<TypeToken>,
-    _ctx: unknown,
-  ): _ctx is TypeToken;
-}
-```
-
-## `SdItemOfTemplateDirective`
-
-Provides typed iteration context for ng-template. Used for passing item type information to template outlets.
-
-Selector: `ng-template[itemOf]`
-
-| Input | Type | Description |
-|-------|------|-------------|
-| `itemOf` | `TItem[]` (required) | Array of items for type inference |
-
-```typescript
-class SdItemOfTemplateDirective<TItem> {
-  static ngTemplateContextGuard<TContextItem>(
-    _dir: SdItemOfTemplateDirective<TContextItem>,
-    _ctx: unknown,
-  ): _ctx is SdItemOfTemplateContext<TContextItem>;
-}
-```
-
-### `SdItemOfTemplateContext`
-
-| Field | Type | Description |
-|-------|------|-------------|
-| `$implicit` | `TItem` | The current item |
-| `item` | `TItem` | The current item (named) |
-| `index` | `number` | Item index |
-| `depth` | `number` | Nesting depth |
-
-## `SdRouterLinkDirective`
-
-Navigation directive supporting router navigation, window opening, and outlet navigation. Ctrl/Alt+click opens in new tab; Shift+click opens in new window.
-
-Selector: `[sd-router-link]`
-
-| Input | Type | Description |
-|-------|------|-------------|
-| `sd-router-link` (alias) | `object \| undefined` | Navigation option |
-
-Option object fields:
-
-| Field | Type | Description |
-|-------|------|-------------|
-| `link` | `string` | Target route path |
-| `params` | `Record<string, string>` | Optional route parameters |
-| `window` | `{ width?: number; height?: number }` | Optional window dimensions |
-| `outletName` | `string` | Optional named outlet |
-| `queryParams` | `Record<string, string>` | Optional query parameters |
-
-## `SdCardDirective`
-
-Applies card styling (CSS class `card`) to the host element.
-
-Selector: `sd-card`, `[sd-card]`
-
-No inputs.
-
-## `SdPaneDirective`
-
-Applies fill-area pane styling (CSS class `fill`, `display: block`) to the host element.
-
-Selector: `sd-pane`, `[sd-pane]`
-
-No inputs.

package/docs/event-plugins.md

@@ -1,109 +0,0 @@
-# Event Plugins
-
-All event plugins are automatically registered by `provideSdAngular`.
-
-## `SdOptionEventPlugin`
-
-Adds `.capture`, `.passive`, `.once` modifiers to native DOM events in Angular templates.
-
-```typescript
-@Injectable({ providedIn: null })
-class SdOptionEventPlugin extends EventManagerPlugin {
-  supports(eventName: string): boolean;
-  addEventListener(element: HTMLElement, eventName: string, handler: (event: Event) => void): () => void;
-}
-```
-
-Usage in template:
-```html
-<div (click.capture)="onCapture($event)"></div>
-<div (scroll.passive)="onScroll($event)"></div>
-<div (click.once)="onClickOnce($event)"></div>
-<div (click.capture.once)="onCaptureOnce($event)"></div>
-```
-
-## `SdResizeEventPlugin`
-
-Provides `(sdResize)` event binding via `ResizeObserver`.
-
-```typescript
-@Injectable({ providedIn: null })
-class SdResizeEventPlugin extends EventManagerPlugin {
-  supports(eventName: string): boolean;   // "sdResize"
-  addEventListener(element: HTMLElement, eventName: string, handler: (entry: ISdResizeEvent) => void): () => void;
-}
-```
-
-### `ISdResizeEvent`
-
-| Field | Type | Description |
-|-------|------|-------------|
-| `heightChanged` | `boolean` | Whether height changed since last event |
-| `widthChanged` | `boolean` | Whether width changed since last event |
-| `target` | `Element` | The observed element |
-| `contentRect` | `DOMRectReadOnly` | Content rectangle of the element |
-
-## `SdIntersectionEventPlugin`
-
-Provides `(sdIntersection)` event binding via `IntersectionObserver`.
-
-```typescript
-@Injectable({ providedIn: null })
-class SdIntersectionEventPlugin extends EventManagerPlugin {
-  supports(eventName: string): boolean;   // "sdIntersection"
-  addEventListener(element: HTMLElement, eventName: string, handler: (entry: ISdIntersectionEvent) => void): () => void;
-}
-```
-
-### `ISdIntersectionEvent`
-
-| Field | Type | Description |
-|-------|------|-------------|
-| `entry` | `IntersectionObserverEntry` | The intersection observer entry |
-
-## `SdSaveCommandEventPlugin`
-
-Provides `(sdSaveCommand)` event binding that triggers on Ctrl+S. Respects modal stacking (only fires for the topmost open modal).
-
-```typescript
-@Injectable({ providedIn: null })
-class SdSaveCommandEventPlugin extends EventManagerPlugin {
-  supports(eventName: string): boolean;   // "sdSaveCommand"
-  addEventListener(element: HTMLElement, eventName: string, handler: (event: Event) => void): () => void;
-}
-```
-
-## `SdRefreshCommandEventPlugin`
-
-Provides `(sdRefreshCommand)` event binding that triggers on Ctrl+Alt+L. Respects modal stacking.
-
-```typescript
-@Injectable({ providedIn: null })
-class SdRefreshCommandEventPlugin extends EventManagerPlugin {
-  supports(eventName: string): boolean;   // "sdRefreshCommand"
-  addEventListener(element: HTMLElement, eventName: string, handler: (event: Event) => void): () => void;
-}
-```
-
-## `SdInsertCommandEventPlugin`
-
-Provides `(sdInsertCommand)` event binding that triggers on Ctrl+Insert. Respects modal stacking.
-
-```typescript
-@Injectable({ providedIn: null })
-class SdInsertCommandEventPlugin extends EventManagerPlugin {
-  supports(eventName: string): boolean;   // "sdInsertCommand"
-  addEventListener(element: HTMLElement, eventName: string, handler: (event: Event) => void): () => void;
-}
-```
-
-## `SdGlobalErrorHandlerPlugin`
-
-Global error handler implementing Angular's `ErrorHandler`. Handles `PromiseRejectionEvent`, `ErrorEvent`, `Error`, and unknown errors. Displays error overlay and destroys the application on unrecoverable errors.
-
-```typescript
-@Injectable({ providedIn: null })
-class SdGlobalErrorHandlerPlugin implements ErrorHandler {
-  handleError(event: any): false;
-}
-```