@simplysm/angular 14.0.4 → 14.0.5

package/docs/event-plugins.md

@@ -0,0 +1,109 @@
+# 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;
+}
+```

package/docs/form-components.md

@@ -0,0 +1,362 @@
+# Form Components
+
+## `SdButtonControl`
+
+Themed button with ripple effect.
+
+Selector: `sd-button`
+
+| Input | Type | Description |
+|-------|------|-------------|
+| `type` | `"button" \| "submit"` | Button type (default: `"button"`) |
+| `theme` | `"primary" \| "secondary" \| "info" \| "success" \| "warning" \| "danger" \| "gray" \| "blue-gray" \| "link" \| "link-primary" \| "link-secondary" \| "link-info" \| "link-success" \| "link-warning" \| "link-danger" \| "link-gray" \| "link-blue-gray" \| "link-rev"` | Visual theme |
+| `inline` | `boolean` (booleanAttribute) | Inline display (default: `false`) |
+| `inset` | `boolean` (booleanAttribute) | Borderless inset style (default: `false`) |
+| `size` | `"sm" \| "lg"` | Size variant |
+| `disabled` | `boolean` (booleanAttribute) | Disabled state (default: `false`) |
+| `buttonStyle` | `string` | Inline style for the inner button |
+| `buttonClass` | `string` | CSS class for the inner button |
+
+## `SdAnchorControl`
+
+Inline clickable anchor element with theme coloring and hover underline.
+
+Selector: `sd-anchor`
+
+| Input | Type | Description |
+|-------|------|-------------|
+| `disabled` | `boolean` (booleanAttribute) | Disabled state (default: `false`) |
+| `theme` | `"primary" \| "secondary" \| "info" \| "success" \| "warning" \| "danger" \| "gray" \| "blue-gray"` | Color theme (default: `"primary"`) |
+
+## `SdAdditionalButtonControl`
+
+Content area with adjacent action buttons (anchors or buttons projected via content).
+
+Selector: `sd-additional-button`
+
+| Input | Type | Description |
+|-------|------|-------------|
+| `size` | `"sm" \| "lg"` | Size variant |
+| `inset` | `boolean` (booleanAttribute) | Borderless inset style (default: `false`) |
+
+## `SdModalSelectButtonControl`
+
+Button that opens a modal for item selection. Supports single/multi mode with erase functionality.
+
+Selector: `sd-modal-select-button`
+
+| Input/Model | Type | Description |
+|-------------|------|-------------|
+| `selectMode` | `"single" \| "multi"` | Selection mode (default: `"single"`) |
+| `value` (model) | `TSelectModeValue<any>` | Selected value(s) |
+| `selectedItems` (model) | `Record<string, unknown>[]` | Selected item records (default: `[]`) |
+| `disabled` | `boolean` (booleanAttribute) | Disabled state (default: `false`) |
+| `required` | `boolean` (booleanAttribute) | Required validation (default: `false`) |
+| `modal` | `TSdSelectModalInfo<any>` | Modal info for opening selection modal |
+| `modalOptions` | `ISdModalOptions` | Modal display options |
+| `size` | `"sm" \| "lg"` | Size variant |
+| `inset` | `boolean` (booleanAttribute) | Borderless inset style (default: `false`) |
+
+### `ISdSelectModal`
+
+| Field | Type | Description |
+|-------|------|-------------|
+| `selectMode` | `InputSignal<"single" \| "multi">` | Selection mode input |
+| `selectedItemKeys` | `InputSignal<T[]>` | Currently selected keys input |
+
+Extends `ISdModal<ISelectModalOutputResult<T>>`.
+
+### `ISelectModalOutputResult`
+
+| Field | Type | Description |
+|-------|------|-------------|
+| `selectedItemKeys` | `T[]` | Selected item keys |
+| `selectedItems` | `Record<string, unknown>[]` | Selected item records |
+
+### `TSdSelectModalInfo`
+
+```typescript
+type TSdSelectModalInfo<T extends ISdSelectModal<any>> = Omit<ISdModalInfo<T>, "inputs"> & {
+  inputs: Omit<TDirectiveInputSignals<T>, "initialized" | "close" | "actionTplRef" | "selectMode" | "selectedItemKeys">;
+};
+```
+
+## `SdTextfieldControl`
+
+Text/number/date/time input field with inset/readonly/disabled modes.
+
+Selector: `sd-textfield`
+
+| Input/Model | Type | Description |
+|-------------|------|-------------|
+| `value` (model) | `TSdTextfieldTypes[K]` | Current value |
+| `type` | `K` (required) | Input type key |
+| `placeholder` | `string` | Placeholder text |
+| `title` | `string` | Title attribute |
+| `inputStyle` | `string` | Inline style for the input element |
+| `inputClass` | `string` | CSS class for the input element |
+| `disabled` | `boolean` (booleanAttribute) | Disabled state (default: `false`) |
+| `readonly` | `boolean` (booleanAttribute) | Read-only state (default: `false`) |
+| `required` | `boolean` (booleanAttribute) | Required validation (default: `false`) |
+| `min` | `TSdTextfieldTypes[K]` | Minimum value |
+| `max` | `TSdTextfieldTypes[K]` | Maximum value |
+| `format` | `string` | Display format pattern |
+| `step` | `number` | Step increment |
+| `autocomplete` | `string` | Autocomplete attribute |
+| `inline` | `boolean` (booleanAttribute) | Inline display (default: `false`) |
+| `inset` | `boolean` (booleanAttribute) | Borderless inset style (default: `false`) |
+| `size` | `"sm" \| "lg"` | Size variant |
+| `theme` | `"primary" \| "secondary" \| "info" \| "success" \| "warning" \| "danger" \| "gray" \| "blue-gray"` | Background theme |
+
+### `TSdTextfieldTypes`
+
+```typescript
+type TSdTextfieldTypes = {
+  "number": number;
+  "text": string;
+  "password": string;
+  "color": string;
+  "email": string;
+  "format": string;
+  "date": DateOnly;
+  "month": DateOnly;
+  "year": DateOnly;
+  "datetime": DateTime;
+  "datetime-sec": DateTime;
+  "time": Time;
+  "time-sec": Time;
+};
+```
+
+### `sdTextfieldTypes`
+
+```typescript
+const sdTextfieldTypes: (keyof TSdTextfieldTypes)[];
+```
+
+## `SdTextareaControl`
+
+Multi-line text input with inset/readonly/disabled modes.
+
+Selector: `sd-textarea`
+
+| Input/Model | Type | Description |
+|-------------|------|-------------|
+| `value` (model) | `string` | Current text value |
+| `placeholder` | `string` | Placeholder text |
+| `title` | `string` | Title attribute |
+| `disabled` | `boolean` (booleanAttribute) | Disabled state (default: `false`) |
+| `readonly` | `boolean` (booleanAttribute) | Read-only state (default: `false`) |
+| `required` | `boolean` (booleanAttribute) | Required validation (default: `false`) |
+| `inline` | `boolean` (booleanAttribute) | Inline display (default: `false`) |
+| `inset` | `boolean` (booleanAttribute) | Borderless inset style (default: `false`) |
+| `size` | `"sm" \| "lg"` | Size variant |
+| `theme` | `"primary" \| "secondary" \| "info" \| "success" \| "warning" \| "danger" \| "gray" \| "blue-gray"` | Background theme |
+| `inputStyle` | `string` | Inline style for the textarea |
+| `inputClass` | `string` | CSS class for the textarea |
+
+## `SdNumpadControl`
+
+On-screen numeric keypad for number input.
+
+Selector: `sd-numpad`
+
+| Input/Model | Type | Description |
+|-------------|------|-------------|
+| `value` (model) | `number` | Current numeric value |
+| `placeholder` | `string` | Placeholder text |
+| `required` | `boolean` (booleanAttribute) | Required validation (default: `false`) |
+| `inputDisabled` | `boolean` (booleanAttribute) | Disable text input (default: `false`) |
+| `useEnterButton` | `boolean` (booleanAttribute) | Show enter button (default: `false`) |
+| `useMinusButton` | `boolean` (booleanAttribute) | Show minus button (default: `false`) |
+
+| Output | Type | Description |
+|--------|------|-------------|
+| `enterButtonClick` | `void` | Emitted when enter button is clicked |
+
+## `SdRangeControl`
+
+From-to range input pair using two `SdTextfieldControl` instances.
+
+Selector: `sd-range`
+
+| Input/Model | Type | Description |
+|-------------|------|-------------|
+| `type` | `K` (required) | Textfield type key |
+| `from` (model) | `TSdTextfieldTypes[K]` | Start value |
+| `to` (model) | `TSdTextfieldTypes[K]` | End value |
+| `inputStyle` | `string` | Inline style for both inputs |
+| `required` | `boolean` (booleanAttribute) | Required validation (default: `false`) |
+| `disabled` | `boolean` (booleanAttribute) | Disabled state (default: `false`) |
+
+## `SdDateRangePicker`
+
+Date range picker with period type selector (day/month/range).
+
+Selector: `sd-date-range-picker`
+
+| Input/Model | Type | Description |
+|-------------|------|-------------|
+| `periodType` (model) | `"day" \| "month" \| "range"` | Period type (default: `"range"`) |
+| `from` (model) | `DateOnly` | Start date |
+| `to` (model) | `DateOnly` | End date |
+| `required` | `boolean` (booleanAttribute) | Required validation (default: `false`) |
+
+Note: Period type labels are in Korean: "일" (day), "월" (month), "범위" (range).
+
+## `SdCheckboxControl`
+
+Checkbox with optional radio mode, ripple effect, and model hook guard.
+
+Selector: `sd-checkbox`
+
+| Input/Model | Type | Description |
+|-------------|------|-------------|
+| `value` (model) | `boolean` | Checked state (default: `false`) |
+| `canChangeFn` | `(item: boolean) => boolean \| Promise<boolean>` | Guard function before change (default: `() => true`) |
+| `icon` | `string` | Check icon SVG (default: tabler check icon) |
+| `radio` | `boolean` (booleanAttribute) | Radio mode -- can only set to true (default: `false`) |
+| `disabled` | `boolean` (booleanAttribute) | Disabled state (default: `false`) |
+| `size` | `"sm" \| "lg"` | Size variant |
+| `inline` | `boolean` (booleanAttribute) | Inline display (default: `false`) |
+| `inset` | `boolean` (booleanAttribute) | Borderless inset style (default: `false`) |
+| `theme` | `"primary" \| "secondary" \| "info" \| "success" \| "warning" \| "danger" \| "gray" \| "blue-gray" \| "white"` | Color theme |
+| `contentStyle` | `string` | Inline style for content area |
+
+## `SdSwitchControl`
+
+Toggle switch component.
+
+Selector: `sd-switch`
+
+| Input/Model | Type | Description |
+|-------------|------|-------------|
+| `value` (model) | `boolean` | On/off state (default: `false`) |
+| `disabled` | `boolean` (booleanAttribute) | Disabled state (default: `false`) |
+| `inline` | `boolean` (booleanAttribute) | Inline display (default: `false`) |
+| `inset` | `boolean` (booleanAttribute) | Borderless inset style (default: `false`) |
+| `size` | `"sm" \| "lg"` | Size variant |
+| `theme` | `"primary" \| "secondary" \| "info" \| "success" \| "warning" \| "danger" \| "gray" \| "blue-gray"` | Color theme |
+
+## `SdCheckboxGroupControl`
+
+Group container for checkbox items. Manages a multi-select value array.
+
+Selector: `sd-checkbox-group`
+
+| Input/Model | Type | Description |
+|-------------|------|-------------|
+| `value` (model) | `T[]` | Selected values (default: `[]`) |
+| `disabled` | `boolean` (booleanAttribute) | Disabled state (default: `false`) |
+
+## `SdCheckboxGroupItemControl`
+
+Individual item in a checkbox group. Toggles its value in the parent group's array.
+
+Selector: `sd-checkbox-group-item`
+
+| Input | Type | Description |
+|-------|------|-------------|
+| `value` | `T` (required) | Item value |
+| `inline` | `boolean` (booleanAttribute) | Inline display (default: `false`) |
+
+## `SdSelectControl`
+
+Dropdown select supporting single and multi selection modes with dropdown popup.
+
+Selector: `sd-select`
+
+| Input/Model | Type | Description |
+|-------------|------|-------------|
+| `selectMode` | `"single" \| "multi"` | Selection mode (default: `"single"`) |
+| `value` (model) | `TSelectModeValue<T>` | Selected value(s) |
+| `placeholder` | `string` | Placeholder text |
+| `disabled` | `boolean` (booleanAttribute) | Disabled state (default: `false`) |
+| `inline` | `boolean` (booleanAttribute) | Inline display (default: `false`) |
+| `inset` | `boolean` (booleanAttribute) | Borderless inset style (default: `false`) |
+| `size` | `"sm" \| "lg"` | Size variant |
+| `required` | `boolean` (booleanAttribute) | Required validation (default: `false`) |
+| `hideSelectAll` | `boolean` (booleanAttribute) | Hide select/deselect all bar in multi mode (default: `false`) |
+| `multiSelectionDisplayDirection` | `"vertical"` | Display direction for multi selections |
+| `items` | `T[]` | Items for itemOf template rendering |
+| `getChildrenFn` | `(item: T) => T[] \| undefined` | Children accessor for tree items |
+| `contentClass` | `string` | CSS class for the content area |
+| `contentStyle` | `string` | Inline style for the content area |
+
+### `TSelectModeValue`
+
+```typescript
+type TSelectModeValue<T> = T | T[] | undefined;
+```
+
+## `SdSelectItemControl`
+
+Item inside `SdSelectControl`. Renders content and handles click/keyboard selection.
+
+Selector: `sd-select-item`
+
+| Input | Type | Description |
+|-------|------|-------------|
+| `value` | `T` (required) | Item value |
+| `disabled` | `boolean` (booleanAttribute) | Disabled state (default: `false`) |
+| `hidden` | `boolean` (booleanAttribute) | Hidden state (default: `false`) |
+
+## `SdSelectButtonControl`
+
+Additional button slot rendered inline next to the select dropdown trigger. Has ripple effect.
+
+Selector: `sd-select-button`
+
+No inputs.
+
+## `SdTiptapEditorControl`
+
+Rich text editor powered by Tiptap. Includes toolbar with formatting commands (headings, bold, italic, underline, strike, colors, lists, alignment, links, images, tables).
+
+Selector: `sd-tiptap-editor`
+
+| Input/Model | Type | Description |
+|-------------|------|-------------|
+| `value` (model) | `string` | HTML content |
+| `disabled` | `boolean` (booleanAttribute) | Disabled state (default: `false`) |
+| `readonly` | `boolean` (booleanAttribute) | Read-only state (default: `false`) |
+| `required` | `boolean` (booleanAttribute) | Required validation (default: `false`) |
+| `placeholder` | `string` | Placeholder text |
+| `validatorFn` | `(value: string \| undefined) => string \| undefined` | Custom validation function |
+| `extensions` | `AnyExtension[]` | Additional Tiptap extensions |
+
+## `SdStatePresetControl`
+
+Save and load named state presets. Persists presets via system config.
+
+Selector: `sd-state-preset`
+
+| Input/Model | Type | Description |
+|-------------|------|-------------|
+| `key` | `string` (required) | Config key for preset storage |
+| `state` (model) | `any` | Current state to save/restore |
+| `size` | `"sm" \| "lg"` | Size variant |
+
+### `ISdStatePreset`
+
+| Field | Type | Description |
+|-------|------|-------------|
+| `name` | `string` | Preset display name |
+| `state` | `any` | Stored state value |
+
+## `SdFormControl`
+
+Form wrapper with submit handling and validation. Prevents default form submission, validates, and emits appropriate events.
+
+Selector: `sd-form`
+
+| Output | Type | Description |
+|--------|------|-------------|
+| `formSubmit` | `SubmitEvent` | Emitted on valid form submission |
+| `formInvalid` | `void` | Emitted when form validation fails |
+
+Public methods:
+
+```typescript
+requestSubmit(): void;  // Programmatically trigger form submission
+```

package/docs/hooks-and-utilities.md

@@ -0,0 +1,175 @@
+# Hooks & Utilities
+
+Hook functions (prefixed with `use`) must be called within Angular injection context (constructor or `runInInjectionContext`).
+
+## `usePermsSignal`
+
+Returns a signal of permitted keys for the given view codes. Filters `permKeys` by checking the app structure's permission record.
+
+```typescript
+function usePermsSignal<K extends string>(viewCodes: string[], keys: K[]): Signal<K[]>;
+```
+
+## `useSdSystemConfigResource`
+
+Creates a resource for reading and writing system configuration values, scoped by the host element's tag name.
+
+```typescript
+function useSdSystemConfigResource<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;
+};
+```
+
+## `useCurrentPageCodeSignal`
+
+Returns a signal of the current page code derived from the activated route's URL segments (joined by `.`). Returns `undefined` if no ActivatedRoute is available.
+
+```typescript
+function useCurrentPageCodeSignal(): Signal<string> | undefined;
+```
+
+## `useFullPageCodeSignal`
+
+Returns a signal of the full page code derived from the router's current URL. Updated on every `NavigationEnd`.
+
+```typescript
+function useFullPageCodeSignal(): Signal<string>;
+```
+
+## `useViewTitleSignal`
+
+Returns a signal of the current view's title. Uses modal title if inside a modal, otherwise derives from app structure using the page code.
+
+```typescript
+function useViewTitleSignal(): Signal<string>;
+```
+
+## `useViewTypeSignal`
+
+Returns a signal indicating whether the current view is displayed as a page, modal, or embedded control.
+
+```typescript
+function useViewTypeSignal(getComp: () => object): Signal<TSdViewType>;
+```
+
+### `TSdViewType`
+
+```typescript
+type TSdViewType = "page" | "modal" | "control";
+```
+
+## `useExpandingManager`
+
+Manages tree expand/collapse state for hierarchical data. Computes flattened display items, tracks expanded items, and provides toggle/visibility methods.
+
+```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): IExpandItemDef<T>;
+};
+```
+
+### `IExpandItemDef`
+
+| Field | Type | Description |
+|-------|------|-------------|
+| `item` | `T` | The data item |
+| `parentDef` | `IExpandItemDef<T> \| undefined` | Parent definition (for tree traversal) |
+| `hasChildren` | `boolean` | Whether item has children |
+| `depth` | `number` | Nesting depth (0-based) |
+
+## `useSelectionManager`
+
+Manages item selection state (single or multi mode). Provides select/deselect/toggle operations and computed selection state.
+
+```typescript
+function useSelectionManager<T>(options: {
+  displayItems: Signal<T[]>;
+  selectedItems: WritableSignal<T[]>;
+  selectMode: Signal<"single" | "multi" | undefined>;
+  getItemSelectableFn: Signal<((item: T) => boolean | string) | undefined>;
+}): {
+  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;
+};
+```
+
+## `useSortingManager`
+
+Manages column sorting state with single and multi-column support. Toggle cycles through: ascending, descending, removed.
+
+```typescript
+function useSortingManager(options: {
+  sorts: WritableSignal<ISortingDef[]>;
+}): {
+  defMap: Signal<Map<string, { indexText?: string; desc: boolean }>>;
+  toggle(key: string, multiple: boolean): void;
+  sort<T>(items: T[]): T[];
+};
+```
+
+### `ISortingDef`
+
+| Field | Type | Description |
+|-------|------|-------------|
+| `key` | `string` | Column/property key to sort by |
+| `desc` | `boolean` | Whether sort is descending |
+
+## `setSafeStyle`
+
+Safely sets multiple CSS style properties on an element via Renderer2.
+
+```typescript
+function setSafeStyle(
+  renderer: Renderer2,
+  el: HTMLElement,
+  style: Partial<CSSStyleDeclaration>,
+): void;
+```
+
+## `TDirectiveInputSignals`
+
+Utility type that extracts `InputSignal` value types from a component/directive. Non-InputSignal properties are excluded. Properties with `undefined` in their type become optional.
+
+```typescript
+type TDirectiveInputSignals<T> = TUndefToOptional<{
+  [P in keyof T as T[P] extends InputSignal<any> ? P : never]: T[P] extends InputSignal<infer V> ? V : never;
+}>;
+```
+
+## `TUndefToOptional`
+
+Utility type that converts properties containing `undefined` in their type to optional properties.
+
+```typescript
+type TUndefToOptional<T> = {
+  [K in keyof T as undefined extends T[K] ? never : K]: T[K];
+} & {
+  [K in keyof T as undefined extends T[K] ? K : never]?: Exclude<T[K], undefined>;
+};
+```