@simplysm/angular 14.0.1 → 14.0.5

package/README.md

@@ -0,0 +1,318 @@
+# @simplysm/angular
+
+Simplysm Angular 21 UI component library. Provides configuration, providers, directives, pipes, setup functions, hooks, layout components, form controls, navigation, data display, overlays, and visual components -- all designed for zoneless Angular with signal-based APIs.
+
+## Installation
+
+```bash
+npm install @simplysm/angular
+```
+
+## API Overview
+
+### Commons & Configuration
+
+| API | Type | Description |
+|-----|------|-------------|
+| `provideSdAngular` | function | Bootstrap function that registers all core providers, event plugins, error handler, and zoneless change detection |
+| `TXT_CHANGE_IGNORE_CONFIRM` | const string | Confirmation message text for discarding unsaved changes |
+
+-> See [docs/commons-and-configuration.md](./docs/commons-and-configuration.md) for details.
+
+### Providers / Services
+
+| API | Type | Description |
+|-----|------|-------------|
+| `SdThemeProvider` | Injectable | Manages dark/light theme toggle via signal |
+| `SdAngularConfigProvider` | Injectable | Holds client application name |
+| `SdSystemLogProvider` | Injectable | Writes log messages to console and optional custom handler |
+| `SdNavigateWindowProvider` | Injectable | Opens navigation links in new windows/tabs |
+| `SdLocalStorageProvider` | Injectable | Typed localStorage wrapper scoped by client name |
+| `SdSystemConfigProvider` | Injectable | Persists/retrieves system configuration (localStorage or custom backend) |
+| `SdFileDialogProvider` | Injectable | Opens native file picker dialogs |
+| `SdServiceClientFactoryProvider` | Injectable | Manages WebSocket service client connections |
+| `SdAppStructureProvider` | Injectable (abstract) | Provides app menu/permission structure |
+| `SdAppStructureUtils` | abstract class | Static utilities for menu/permission computation |
+| `SdSharedDataProvider` | Injectable (abstract) | Real-time shared data with event-driven partial updates |
+| `SdModalProvider` | Injectable | Programmatically creates and shows modal dialogs |
+| `SdActivatedModalProvider` | Injectable | Injected inside a modal to access modal context |
+| `SdToastProvider` | Injectable | Shows toast notifications with severity levels |
+| `SdBusyProvider` | Injectable | Manages global busy/loading overlay |
+| `SdPrintProvider` | Injectable | Prints components or generates PDF buffers |
+
+-> See [docs/providers.md](./docs/providers.md) for details.
+
+### Event Plugins
+
+| API | Type | Description |
+|-----|------|-------------|
+| `SdOptionEventPlugin` | EventManagerPlugin | Adds `.capture`, `.passive`, `.once` modifiers to native events |
+| `SdResizeEventPlugin` | EventManagerPlugin | Provides `(sdResize)` event via ResizeObserver |
+| `ISdResizeEvent` | interface | Payload for sdResize event |
+| `SdIntersectionEventPlugin` | EventManagerPlugin | Provides `(sdIntersection)` event via IntersectionObserver |
+| `ISdIntersectionEvent` | interface | Payload for sdIntersection event |
+| `SdSaveCommandEventPlugin` | EventManagerPlugin | Provides `(sdSaveCommand)` event (Ctrl+S) |
+| `SdRefreshCommandEventPlugin` | EventManagerPlugin | Provides `(sdRefreshCommand)` event (Ctrl+Alt+L) |
+| `SdInsertCommandEventPlugin` | EventManagerPlugin | Provides `(sdInsertCommand)` event (Ctrl+Insert) |
+| `SdGlobalErrorHandlerPlugin` | ErrorHandler | Global error handler that displays errors and logs them |
+
+-> See [docs/event-plugins.md](./docs/event-plugins.md) for details.
+
+### Directives
+
+| API | Type | Description |
+|-----|------|-------------|
+| `SdEventsDirective` | Directive | Exposes capture/passive/once event outputs for template binding |
+| `SdRippleDirective` | Directive | Adds material-style ripple effect on pointer interaction |
+| `SdShowEffectDirective` | Directive | Animates element reveal on intersection |
+| `SdInvalidDirective` | Directive | Shows validation indicator with custom message |
+| `SdTypedTemplateDirective` | Directive | Provides type-safe ng-template context guard |
+| `SdItemOfTemplateDirective` | Directive | Provides typed iteration context for ng-template |
+| `SdItemOfTemplateContext` | interface | Context type for SdItemOfTemplateDirective |
+| `SdRouterLinkDirective` | Directive | Navigation directive with window/tab/outlet support |
+| `SdCardDirective` | Directive | Applies card styling class |
+| `SdPaneDirective` | Directive | Applies fill pane styling |
+
+-> See [docs/directives.md](./docs/directives.md) for details.
+
+### Pipes
+
+| API | Type | Description |
+|-----|------|-------------|
+| `FormatPipe` | Pipe | Formats DateTime, DateOnly, or string values using pattern |
+
+-> See [docs/pipes.md](./docs/pipes.md) for details.
+
+### Setup Functions
+
+| API | Type | Description |
+|-----|------|-------------|
+| `setupBgTheme` | function | Sets body background CSS variable based on theme |
+| `setupRipple` | function | Adds ripple effect to host element |
+| `setupRevealOnShow` | function | Animates element visibility on intersection |
+| `setupInvalid` | function | Adds form validation indicator to host element |
+| `setupModelHook` | function | Intercepts model signal set with async guard |
+| `setupCanDeactivate` | function | Registers route/modal can-deactivate guard |
+
+-> See [docs/setup-functions.md](./docs/setup-functions.md) for details.
+
+### Hooks & Utilities
+
+| API | Type | Description |
+|-----|------|-------------|
+| `usePermsSignal` | function | Returns signal of permitted keys for given view codes |
+| `useSdSystemConfigResource` | function | Creates a resource for reading/writing system config |
+| `useCurrentPageCodeSignal` | function | Returns signal of current page code from activated route |
+| `useFullPageCodeSignal` | function | Returns signal of full page code from router URL |
+| `useViewTitleSignal` | function | Returns signal of current view title |
+| `useViewTypeSignal` | function | Returns signal of view type (page/modal/control) |
+| `TSdViewType` | type | `"page" \| "modal" \| "control"` |
+| `useExpandingManager` | function | Manages tree expand/collapse state |
+| `IExpandItemDef` | interface | Tree item definition with depth and parent |
+| `useSelectionManager` | function | Manages item selection state (single/multi) |
+| `useSortingManager` | function | Manages column sorting state |
+| `ISortingDef` | interface | Sort definition with key and direction |
+| `setSafeStyle` | function | Safely sets multiple CSS styles via Renderer2 |
+| `TDirectiveInputSignals` | type | Extracts InputSignal value types from component |
+| `TUndefToOptional` | type | Converts undefined-containing properties to optional |
+
+-> See [docs/hooks-and-utilities.md](./docs/hooks-and-utilities.md) for details.
+
+### App Structure Types
+
+| API | Type | Description |
+|-----|------|-------------|
+| `TSdAppStructureItem` | type | Union of group and leaf structure items |
+| `ISdMenu` | interface | Menu tree node |
+| `ISdFlatMenu` | interface | Flattened menu entry |
+| `ISdPermission` | interface | Permission tree node |
+| `ISdFlatPermission` | interface | Flattened permission entry |
+
+-> See [docs/providers.md](./docs/providers.md) for details (under SdAppStructureProvider).
+
+### Layout Components
+
+| API | Type | Description |
+|-----|------|-------------|
+| `SdDockContainerControl` | Component | Container for docked panels |
+| `SdDockControl` | Component | Dockable panel (top/bottom/left/right) with optional resize |
+| `SdPaneDirective` | Directive | Fill-area pane |
+| `SdGapControl` | Component | Spacing element with preset or pixel sizes |
+| `SdViewControl` | Component | View container for tab-like content switching |
+| `SdViewItemControl` | Component | Individual view item, shown when value matches parent |
+| `SdCardDirective` | Directive | Card styling |
+| `SdKanbanBoardControl` | Component | Kanban board with drag-and-drop support |
+| `SdKanbanLaneControl` | Component | Kanban lane (column) |
+| `SdKanbanControl` | Component | Kanban card item |
+
+-> See [docs/layout-components.md](./docs/layout-components.md) for details.
+
+### Form Components
+
+| API | Type | Description |
+|-----|------|-------------|
+| `SdButtonControl` | Component | Themed button with ripple effect |
+| `SdAnchorControl` | Component | Inline clickable anchor element |
+| `SdAdditionalButtonControl` | Component | Content with adjacent action buttons |
+| `SdModalSelectButtonControl` | Component | Button that opens a modal for selection |
+| `SdTextfieldControl` | Component | Text/number/date/time input field |
+| `SdTextareaControl` | Component | Multi-line text input |
+| `SdNumpadControl` | Component | On-screen numeric keypad |
+| `SdRangeControl` | Component | From-to range input pair |
+| `SdDateRangePicker` | Component | Date range picker with period type selector |
+| `SdCheckboxControl` | Component | Checkbox with optional radio mode |
+| `SdSwitchControl` | Component | Toggle switch |
+| `SdCheckboxGroupControl` | Component | Group container for checkbox items |
+| `SdCheckboxGroupItemControl` | Component | Individual item in checkbox group |
+| `SdSelectControl` | Component | Dropdown select (single/multi) |
+| `SdSelectItemControl` | Component | Item inside SdSelectControl |
+| `SdSelectButtonControl` | Component | Additional button slot inside SdSelectControl |
+| `SdTiptapEditorControl` | Component | Rich text editor powered by Tiptap |
+| `SdStatePresetControl` | Component | Save/load named state presets |
+| `SdFormControl` | Component | Form wrapper with submit/validation |
+
+-> See [docs/form-components.md](./docs/form-components.md) for details.
+
+### Navigation Components
+
+| API | Type | Description |
+|-----|------|-------------|
+| `SdCollapseControl` | Component | Animated collapsible content |
+| `SdCollapseIconControl` | Component | Rotating chevron icon for collapse state |
+| `SdTabControl` | Component | Tab header container |
+| `SdTabItemControl` | Component | Individual tab header item |
+| `SdTabviewControl` | Component | Combined tab header + content view |
+| `SdTabviewItemControl` | Component | Tab content panel |
+| `SdPaginationControl` | Component | Page navigation with group support |
+| `SdSidebarContainerControl` | Component | Layout container with sidebar toggle |
+| `SdSidebarControl` | Component | Sidebar panel |
+| `SdSidebarMenuControl` | Component | Menu renderer for sidebar |
+| `ISdSidebarMenu` | interface | Sidebar menu item definition |
+| `SdSidebarUserControl` | Component | User info section in sidebar |
+| `ISidebarUserMenu` | interface | User menu definition |
+| `SdTopbarContainerControl` | Component | Layout container for topbar |
+| `SdTopbarControl` | Component | Top navigation bar |
+| `SdTopbarMenuControl` | Component | Menu renderer for topbar with dropdowns |
+| `ISdTopbarMenu` | interface | Topbar menu item definition |
+| `SdTopbarUserControl` | Component | User dropdown in topbar |
+| `ISdTopbarUserMenu` | interface | Topbar user menu definition |
+
+-> See [docs/navigation-components.md](./docs/navigation-components.md) for details.
+
+### Data Display Components
+
+| API | Type | Description |
+|-----|------|-------------|
+| `SdListControl` | Component | List container |
+| `SdListItemControl` | Component | List item with accordion/flat layout |
+| `SdSheetControl` | Component | Data grid with sorting, selection, expanding, pagination |
+| `SdSheetColumnDirective` | Directive | Column definition for SdSheetControl |
+| `SdSheetConfigModal` | Component | Sheet column configuration modal |
+| `ISdSheetColumnDef` | interface | Column definition fields |
+| `ISdSheetConfig` | interface | Sheet configuration (column widths, ordering, visibility) |
+| `ISdSheetHeaderDef` | interface | Header cell definition |
+| `ISdSheetItemKeydownEventParam` | interface | Keydown event parameter for sheet items |
+
+-> See [docs/data-display-components.md](./docs/data-display-components.md) for details.
+
+### Overlay Components
+
+| API | Type | Description |
+|-----|------|-------------|
+| `SdDropdownControl` | Component | Dropdown trigger container |
+| `SdDropdownPopupControl` | Component | Dropdown popup content |
+| `SdModalControl` | Component | Modal dialog with header, close, resize, drag |
+| `SdPromptModalControl` | Component | Built-in prompt modal (text input + confirm/cancel) |
+| `SdConfirmModalControl` | Component | Built-in confirm modal (confirm/cancel) |
+| `ISdModal` | interface | Interface for modal content components |
+| `ISdModalInfo` | interface | Modal creation info (title, type, inputs) |
+| `ISdModalOptions` | interface | Modal display options |
+| `SdToastControl` | Component | Individual toast notification |
+| `SdToastContainerControl` | Component | Toast container (fixed position) |
+| `ISdToast` | interface | Interface for custom toast content components |
+| `ISdToastInput` | interface | Toast creation info |
+| `TSdToastSeverity` | type | `"info" \| "success" \| "warning" \| "danger"` |
+| `TSdToastTheme` | type | Toast theme including severity and color themes |
+| `SdBusyContainerControl` | Component | Busy/loading overlay container |
+| `TSdBusyType` | type | `"spinner" \| "bar" \| "cube"` |
+
+-> See [docs/overlay-components.md](./docs/overlay-components.md) for details.
+
+### Visual Components
+
+| API | Type | Description |
+|-----|------|-------------|
+| `SdLabelControl` | Component | Colored label/badge |
+| `SdNoteControl` | Component | Note/callout block |
+| `SdProgressControl` | Component | Progress bar with percentage display |
+| `SdCalendarControl` | Component | Monthly calendar grid with item slots |
+| `SdBarcodeControl` | Component | Barcode/QR code renderer (bwip-js) |
+| `TBarcodeType` | type | Barcode type identifier |
+| `SdEchartsControl` | Component | ECharts wrapper component |
+
+-> See [docs/visual-components.md](./docs/visual-components.md) for details.
+
+### Shared Data Types
+
+| API | Type | Description |
+|-----|------|-------------|
+| `ISharedDataBase` | interface | Base interface for shared data items |
+| `ISharedDataInfo` | interface | Registration info for shared data |
+| `SharedDataHandle` | interface | Handle for accessing shared data items signal |
+| `SdSharedDataChangeEvent` | const | Event definition for shared data change notifications |
+| `ISdSelectModal` | interface | Interface for select modal components |
+| `ISelectModalOutputResult` | interface | Result from modal select |
+| `TSdSelectModalInfo` | type | Modal info type excluding select-specific inputs |
+| `TSelectModeValue` | type | `T \| T[] \| undefined` |
+| `TSdTextfieldTypes` | type | Map of textfield type names to value types |
+| `sdTextfieldTypes` | const | Array of all textfield type names |
+| `ISdStatePreset` | interface | Named state preset |
+
+-> See [docs/form-components.md](./docs/form-components.md) for details.
+
+## Usage Examples
+
+### Bootstrap Application
+
+```typescript
+import { provideSdAngular } from "@simplysm/angular";
+
+bootstrapApplication(AppComponent, {
+  providers: [
+    provideSdAngular({ clientName: "my-app" }),
+    provideRouter(routes),
+  ],
+});
+```
+
+### Modal Dialog
+
+```typescript
+import { SdModalProvider, SdConfirmModalControl } from "@simplysm/angular";
+
+const modal = inject(SdModalProvider);
+
+const confirmed = await modal.showAsync(
+  {
+    title: "Confirm Action",
+    type: SdConfirmModalControl,
+    inputs: { message: "Are you sure?" },
+  },
+  { useCloseByBackdrop: false },
+);
+```
+
+### Toast Notification
+
+```typescript
+import { SdToastProvider } from "@simplysm/angular";
+
+const toast = inject(SdToastProvider);
+toast.success("Operation completed successfully");
+toast.danger("An error occurred");
+
+// With progress
+const progress = toast.info("Uploading...", true);
+progress.set(50); // 50%
+progress.set(100); // auto-dismiss after 1s
+```

package/dist/core/commons.d.ts

@@ -0,0 +1,2 @@
+export declare const TXT_CHANGE_IGNORE_CONFIRM: string;
+//# sourceMappingURL=commons.d.ts.map

package/dist/core/commons.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"commons.d.ts","sourceRoot":"","sources":["..\\..\\src\\core\\commons.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,yBAAyB,QAGC,CAAC"}

package/dist/core/commons.js

@@ -0,0 +1,4 @@
+export const TXT_CHANGE_IGNORE_CONFIRM = `
+변경사항이 있습니다. 모든 변경사항을 무시하시겠습니까?
+- 확인: 변경사항을 무시하고, 현재 요청한 작업을 수행
+- 취소: 현재 요청한 작업을 취소하고, 변경사항 재검토`.trim();

package/dist/core/directives/sd-events.directive.js

@@ -1,22 +1,22 @@
 import { Directive, output } from "@angular/core";
 import * as i0 from "@angular/core";
 export class SdEventsDirective {
-    // Click
+    // 클릭
     "click.capture" = output();
     "click.once" = output();
     "click.capture.once" = output();
-    // Mouse
+    // 마우스
     "mousedown.capture" = output();
     "mouseup.capture" = output();
     "mouseover.capture" = output();
     "mouseout.capture" = output();
-    // Keyboard
+    // 키보드
     "keydown.capture" = output();
     "keyup.capture" = output();
     // Focus (버블링 안 되므로 capture 필수)
     "focus.capture" = output();
     "blur.capture" = output();
-    // Form
+    // 폼
     "invalid.capture" = output();
     // Scroll (passive로 성능 최적화)
     "scroll.capture" = output();
@@ -31,7 +31,7 @@ export class SdEventsDirective {
     "touchmove.passive" = output();
     "touchmove.capture.passive" = output();
     "touchend.passive" = output();
-    // Drag & Drop
+    // 드래그 앤 드롭
     "dragover.capture" = output();
     "dragenter.capture" = output();
     "dragleave.capture" = output();
@@ -39,9 +39,9 @@ export class SdEventsDirective {
     // Animation/Transition (once로 한 번만)
     "transitionend.once" = output();
     "animationend.once" = output();
-    // Custom events
+    // 커스텀 이벤트
     "sdResize" = output();
-    // Command events
+    // 커맨드 이벤트
     "sdRefreshCommand" = output();
     "sdSaveCommand" = output();
     "sdInsertCommand" = output();

package/dist/core/directives/sd-item-of-template.directive.d.ts

@@ -0,0 +1,14 @@
+import * as i0 from "@angular/core";
+export declare class SdItemOfTemplateDirective<TItem> {
+    itemOf: import("@angular/core").InputSignal<TItem[]>;
+    static ngTemplateContextGuard<TContextItem>(_dir: SdItemOfTemplateDirective<TContextItem>, _ctx: unknown): _ctx is SdItemOfTemplateContext<TContextItem>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<SdItemOfTemplateDirective<any>, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<SdItemOfTemplateDirective<any>, "ng-template[itemOf]", never, { "itemOf": { "alias": "itemOf"; "required": true; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+export interface SdItemOfTemplateContext<TItem> {
+    $implicit: TItem;
+    item: TItem;
+    index: number;
+    depth: number;
+}
+//# sourceMappingURL=sd-item-of-template.directive.d.ts.map

package/dist/core/directives/sd-item-of-template.directive.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"sd-item-of-template.directive.d.ts","sourceRoot":"","sources":["..\\..\\..\\src\\core\\directives\\sd-item-of-template.directive.ts"],"names":[],"mappings":";AAEA,qBAIa,yBAAyB,CAAC,KAAK;IAC1C,MAAM,+CAA6B;IAEnC,MAAM,CAAC,sBAAsB,CAAC,YAAY,EACxC,IAAI,EAAE,yBAAyB,CAAC,YAAY,CAAC,EAC7C,IAAI,EAAE,OAAO,GACZ,IAAI,IAAI,uBAAuB,CAAC,YAAY,CAAC;yCANrC,yBAAyB;2CAAzB,yBAAyB;CASrC;AAED,MAAM,WAAW,uBAAuB,CAAC,KAAK;IAC5C,SAAS,EAAE,KAAK,CAAC;IACjB,IAAI,EAAE,KAAK,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;CACf"}

package/dist/core/directives/sd-item-of-template.directive.js

@@ -0,0 +1,17 @@
+import { Directive, input } from "@angular/core";
+import * as i0 from "@angular/core";
+export class SdItemOfTemplateDirective {
+    itemOf = input.required(...(ngDevMode ? [{ debugName: "itemOf" }] : /* istanbul ignore next */ []));
+    static ngTemplateContextGuard(_dir, _ctx) {
+        return true;
+    }
+    static ɵfac = function SdItemOfTemplateDirective_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || SdItemOfTemplateDirective)(); };
+    static ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: SdItemOfTemplateDirective, selectors: [["ng-template", "itemOf", ""]], inputs: { itemOf: [1, "itemOf"] } });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SdItemOfTemplateDirective, [{
+        type: Directive,
+        args: [{
+                selector: "ng-template[itemOf]",
+                standalone: true,
+            }]
+    }], null, { itemOf: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemOf", required: true }] }] }); })();

package/dist/core/directives/sd-router-link.directive.d.ts

@@ -0,0 +1,19 @@
+import * as i0 from "@angular/core";
+export declare class SdRouterLinkDirective {
+    private readonly _router;
+    private readonly _navWindow;
+    option: import("@angular/core").InputSignal<{
+        link: string;
+        params?: Record<string, string>;
+        window?: {
+            width?: number;
+            height?: number;
+        };
+        outletName?: string;
+        queryParams?: Record<string, string>;
+    } | undefined>;
+    onClick(event: MouseEvent): Promise<void>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<SdRouterLinkDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<SdRouterLinkDirective, "[sd-router-link]", never, { "option": { "alias": "sd-router-link"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+//# sourceMappingURL=sd-router-link.directive.d.ts.map

package/dist/core/directives/sd-router-link.directive.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"sd-router-link.directive.d.ts","sourceRoot":"","sources":["..\\..\\..\\src\\core\\directives\\sd-router-link.directive.ts"],"names":[],"mappings":";AAIA,qBAQa,qBAAqB;IAChC,OAAO,CAAC,QAAQ,CAAC,OAAO,CAAkB;IAC1C,OAAO,CAAC,QAAQ,CAAC,UAAU,CAAoC;IAE/D,MAAM;cAEM,MAAM;iBACH,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC;iBACtB;YACP,KAAK,CAAC,EAAE,MAAM,CAAC;YACf,MAAM,CAAC,EAAE,MAAM,CAAC;SACjB;qBACY,MAAM;sBACL,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC;mBAGA;IAEpC,OAAO,CAAC,KAAK,EAAE,UAAU,GAAG,OAAO,CAAC,IAAI,CAAC;yCAlBpC,qBAAqB;2CAArB,qBAAqB;CAoEjC"}

package/dist/core/directives/sd-router-link.directive.js

@@ -0,0 +1,64 @@
+import { Directive, inject, input } from "@angular/core";
+import { Router } from "@angular/router";
+import { SdNavigateWindowProvider } from "../providers/sd-navigate-window.provider";
+import * as i0 from "@angular/core";
+export class SdRouterLinkDirective {
+    _router = inject(Router);
+    _navWindow = inject(SdNavigateWindowProvider);
+    option = input(undefined, { ...(ngDevMode ? { debugName: "option" } : /* istanbul ignore next */ {}), alias: "sd-router-link" });
+    async onClick(event) {
+        const option = this.option();
+        if (!option)
+            return;
+        event.preventDefault();
+        event.stopPropagation();
+        if (this._navWindow.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(option.link + qp, option.params, `width=${width},height=${height}`);
+        }
+        else if (event.ctrlKey || event.altKey) {
+            const qp = option.queryParams
+                ? "?" + new URLSearchParams(option.queryParams).toString()
+                : "";
+            this._navWindow.open(option.link + qp, option.params, "_blank");
+        }
+        else if (event.shiftKey) {
+            const width = option.window?.width ?? 800;
+            const height = option.window?.height ?? 800;
+            const qp = option.queryParams
+                ? "?" + new URLSearchParams(option.queryParams).toString()
+                : "";
+            this._navWindow.open(option.link + qp, option.params, `width=${width},height=${height}`);
+        }
+        else if (option.outletName === undefined) {
+            await this._router.navigate([option.link, ...(option.params ? [option.params] : [])], option.queryParams ? { queryParams: option.queryParams } : undefined);
+        }
+        else {
+            await this._router.navigate([
+                { outlets: { [option.outletName]: option.link } },
+                ...(option.params ? [option.params] : []),
+            ], option.queryParams ? { queryParams: option.queryParams } : undefined);
+        }
+    }
+    static ɵfac = function SdRouterLinkDirective_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || SdRouterLinkDirective)(); };
+    static ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: SdRouterLinkDirective, selectors: [["", "sd-router-link", ""]], hostVars: 2, hostBindings: function SdRouterLinkDirective_HostBindings(rf, ctx) { if (rf & 1) {
+            i0.ɵɵlistener("click", function SdRouterLinkDirective_click_HostBindingHandler($event) { return ctx.onClick($event); });
+        } if (rf & 2) {
+            i0.ɵɵstyleProp("cursor", "pointer");
+        } }, inputs: { option: [1, "sd-router-link", "option"] } });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SdRouterLinkDirective, [{
+        type: Directive,
+        args: [{
+                selector: "[sd-router-link]",
+                standalone: true,
+                host: {
+                    "[style.cursor]": "'pointer'",
+                    "(click)": "onClick($event)",
+                },
+            }]
+    }], null, { option: [{ type: i0.Input, args: [{ isSignal: true, alias: "sd-router-link", required: false }] }] }); })();

package/dist/core/directives/sd-typed-template.directive.d.ts

@@ -0,0 +1,8 @@
+import * as i0 from "@angular/core";
+export declare class SdTypedTemplateDirective<T> {
+    typed: import("@angular/core").InputSignal<T>;
+    static ngTemplateContextGuard<TypeToken>(_dir: SdTypedTemplateDirective<TypeToken>, _ctx: unknown): _ctx is TypeToken;
+    static ɵfac: i0.ɵɵFactoryDeclaration<SdTypedTemplateDirective<any>, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<SdTypedTemplateDirective<any>, "ng-template[typed]", never, { "typed": { "alias": "typed"; "required": true; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+//# sourceMappingURL=sd-typed-template.directive.d.ts.map

package/dist/core/directives/sd-typed-template.directive.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"sd-typed-template.directive.d.ts","sourceRoot":"","sources":["..\\..\\..\\src\\core\\directives\\sd-typed-template.directive.ts"],"names":[],"mappings":";AAEA,qBAIa,wBAAwB,CAAC,CAAC;IACrC,KAAK,yCAAuB;IAE5B,MAAM,CAAC,sBAAsB,CAAC,SAAS,EACrC,IAAI,EAAE,wBAAwB,CAAC,SAAS,CAAC,EACzC,IAAI,EAAE,OAAO,GACZ,IAAI,IAAI,SAAS;yCANT,wBAAwB;2CAAxB,wBAAwB;CASpC"}

package/dist/core/directives/sd-typed-template.directive.js

@@ -0,0 +1,17 @@
+import { Directive, input } from "@angular/core";
+import * as i0 from "@angular/core";
+export class SdTypedTemplateDirective {
+    typed = input.required(...(ngDevMode ? [{ debugName: "typed" }] : /* istanbul ignore next */ []));
+    static ngTemplateContextGuard(_dir, _ctx) {
+        return true;
+    }
+    static ɵfac = function SdTypedTemplateDirective_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || SdTypedTemplateDirective)(); };
+    static ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: SdTypedTemplateDirective, selectors: [["ng-template", "typed", ""]], inputs: { typed: [1, "typed"] } });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SdTypedTemplateDirective, [{
+        type: Directive,
+        args: [{
+                selector: "ng-template[typed]",
+                standalone: true,
+            }]
+    }], null, { typed: [{ type: i0.Input, args: [{ isSignal: true, alias: "typed", required: true }] }] }); })();

package/dist/core/pipes/format.pipe.d.ts

@@ -0,0 +1,9 @@
+import { type PipeTransform } from "@angular/core";
+import { DateOnly, DateTime } from "@simplysm/core-common";
+import * as i0 from "@angular/core";
+export declare class FormatPipe implements PipeTransform {
+    transform(value: string | DateTime | DateOnly | undefined, format: string): string;
+    static ɵfac: i0.ɵɵFactoryDeclaration<FormatPipe, never>;
+    static ɵpipe: i0.ɵɵPipeDeclaration<FormatPipe, "format", true>;
+}
+//# sourceMappingURL=format.pipe.d.ts.map

package/dist/core/pipes/format.pipe.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"format.pipe.d.ts","sourceRoot":"","sources":["..\\..\\..\\src\\core\\pipes\\format.pipe.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,KAAK,aAAa,EAAE,MAAM,eAAe,CAAC;AACzD,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;;AAE3D,qBAIa,UAAW,YAAW,aAAa;IAC9C,SAAS,CAAC,KAAK,EAAE,MAAM,GAAG,QAAQ,GAAG,QAAQ,GAAG,SAAS,EAAE,MAAM,EAAE,MAAM,GAAG,MAAM;yCADvE,UAAU;uCAAV,UAAU;CA6BtB"}

package/dist/core/pipes/format.pipe.js

@@ -0,0 +1,43 @@
+import { Pipe } from "@angular/core";
+import { DateOnly, DateTime } from "@simplysm/core-common";
+import * as i0 from "@angular/core";
+export class FormatPipe {
+    transform(value, format) {
+        if (value == null) {
+            return "";
+        }
+        else if (value instanceof DateTime || value instanceof DateOnly) {
+            return value.toFormatString(format);
+        }
+        else {
+            const formatItems = format.split("|");
+            for (const formatItem of formatItems) {
+                const fullLength = formatItem.match(/X/g)?.length;
+                if (fullLength === value.length) {
+                    let result = "";
+                    let valCur = 0;
+                    for (const formatItemChar of formatItem) {
+                        if (formatItemChar === "X") {
+                            result += value[valCur];
+                            valCur++;
+                        }
+                        else {
+                            result += formatItemChar;
+                        }
+                    }
+                    return result;
+                }
+            }
+            return value;
+        }
+    }
+    static ɵfac = function FormatPipe_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || FormatPipe)(); };
+    static ɵpipe = /*@__PURE__*/ i0.ɵɵdefinePipe({ name: "format", type: FormatPipe, pure: true });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(FormatPipe, [{
+        type: Pipe,
+        args: [{
+                standalone: true,
+                name: "format",
+            }]
+    }], null, null); })();

package/dist/core/plugins/commands/findTopOpenModalEl.d.ts

@@ -0,0 +1,8 @@
+/**
+ * DOM에서 열린 모달 중 z-index가 가장 큰 모달 요소를 반환한다.
+ * 열린 모달이 없으면 null을 반환한다.
+ *
+ * SdModalProvider를 import하지 않아 순환 의존을 회피한다.
+ */
+export declare function findTopOpenModalEl(): HTMLElement | null;
+//# sourceMappingURL=findTopOpenModalEl.d.ts.map

package/dist/core/plugins/commands/findTopOpenModalEl.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"findTopOpenModalEl.d.ts","sourceRoot":"","sources":["..\\..\\..\\..\\src\\core\\plugins\\commands\\findTopOpenModalEl.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AACH,wBAAgB,kBAAkB,IAAI,WAAW,GAAG,IAAI,CAgBvD"}

package/dist/core/plugins/commands/findTopOpenModalEl.js

@@ -0,0 +1,21 @@
+/**
+ * DOM에서 열린 모달 중 z-index가 가장 큰 모달 요소를 반환한다.
+ * 열린 모달이 없으면 null을 반환한다.
+ *
+ * SdModalProvider를 import하지 않아 순환 의존을 회피한다.
+ */
+export function findTopOpenModalEl() {
+    const openModals = document.querySelectorAll("sd-modal[data-sd-open]");
+    if (openModals.length === 0)
+        return null;
+    let topModal = openModals[0];
+    let maxZ = parseInt(topModal.style.zIndex || "0", 10);
+    for (let i = 1; i < openModals.length; i++) {
+        const z = parseInt(openModals[i].style.zIndex || "0", 10);
+        if (z > maxZ) {
+            maxZ = z;
+            topModal = openModals[i];
+        }
+    }
+    return topModal;
+}

package/dist/core/plugins/commands/sd-insert-command-event.plugin.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"sd-insert-command-event.plugin.d.ts","sourceRoot":"","sources":["..\\..\\..\\..\\src\\core\\plugins\\commands\\sd-insert-command-event.plugin.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,kBAAkB,EAAE,MAAM,2BAA2B,CAAC;;AAG/D,qBACa,0BAA2B,SAAQ,kBAAkB;;IAKvD,QAAQ,CAAC,SAAS,EAAE,MAAM,GAAG,OAAO;IAIpC,gBAAgB,CACvB,OAAO,EAAE,WAAW,EACpB,SAAS,EAAE,MAAM,EACjB,OAAO,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,GAC9B,MAAM,IAAI;yCAbF,0BAA0B;6CAA1B,0BAA0B;CA4BtC"}
+{"version":3,"file":"sd-insert-command-event.plugin.d.ts","sourceRoot":"","sources":["..\\..\\..\\..\\src\\core\\plugins\\commands\\sd-insert-command-event.plugin.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,kBAAkB,EAAE,MAAM,2BAA2B,CAAC;;AAI/D,qBACa,0BAA2B,SAAQ,kBAAkB;;IAKvD,QAAQ,CAAC,SAAS,EAAE,MAAM,GAAG,OAAO;IAIpC,gBAAgB,CACvB,OAAO,EAAE,WAAW,EACpB,SAAS,EAAE,MAAM,EACjB,OAAO,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,GAC9B,MAAM,IAAI;yCAbF,0BAA0B;6CAA1B,0BAA0B;CA+BtC"}