@simplysm/angular 14.0.4 → 14.0.6

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/docs/commons-and-configuration.md

@@ -0,0 +1,34 @@
+# 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

@@ -0,0 +1,146 @@
+# 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

@@ -0,0 +1,158 @@
+# 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.