@simplysm/angular 14.0.23 → 14.0.24

package/docs/ui-overlay.md

@@ -1,330 +0,0 @@
-# UI Overlay
-
-Overlay components: dropdowns, modals, toasts, and busy indicators.
-
-## `SdDropdownControl`
-
-Toggleable dropdown trigger that manages popup positioning, mobile bottom-sheet, and focus lifecycle.
-
-```typescript
-@Component({ selector: "sd-dropdown" })
-class SdDropdownControl {
-  open = model(false);
-  disabled = input(false, { transform: booleanAttribute });
-}
-```
-
-| Input | Type | Default | Description |
-|-------|------|---------|-------------|
-| `open` | `boolean` | `false` | Two-way open state |
-| `disabled` | `boolean` | `false` | Disables toggle |
-
-Keyboard: ArrowDown opens, ArrowUp/Escape closes, Space toggles.
-
-## `SdDropdownPopupControl`
-
-Container for dropdown popup content. Auto-caps height at 300px.
-
-```typescript
-@Component({ selector: "sd-dropdown-popup" })
-class SdDropdownPopupControl { }
-```
-
-## `SdModalControl`
-
-Modal dialog shell with drag, resize, focus-trap, z-index management, and config persistence.
-
-```typescript
-@Component({ selector: "sd-modal" })
-class SdModalControl {
-  open = model(false);
-  key = input<string>();
-  title = input("");
-  hideHeader = input(false, { transform: booleanAttribute });
-  hideCloseButton = input(false, { transform: booleanAttribute });
-  useCloseByBackdrop = input(true, { transform: booleanAttribute });
-  useCloseByEscapeKey = input(true, { transform: booleanAttribute });
-  float = input(false, { transform: booleanAttribute });
-  fill = input(false, { transform: booleanAttribute });
-  resizable = input(false, { transform: booleanAttribute });
-  movable = input(false, { transform: booleanAttribute });
-  position = input<"bottom-right" | "top-right">();
-  minHeightPx = input<number>();
-  minWidthPx = input<number>();
-  heightPx = input<number>();
-  widthPx = input<number>();
-  headerStyle = input<string>();
-  noFirstControlFocusing = input(false, { transform: booleanAttribute });
-  actionTplRef = input<TemplateRef<any>>();
-  closeRequest = output<void>();
-}
-```
-
-| Input | Type | Default | Description |
-|-------|------|---------|-------------|
-| `open` | `boolean` | `false` | Two-way open state |
-| `key` | `string \| undefined` | — | Persistence key for size/position |
-| `title` | `string` | `""` | Modal title |
-| `hideHeader` | `boolean` | `false` | Hides the header bar |
-| `hideCloseButton` | `boolean` | `false` | Hides the X button |
-| `useCloseByBackdrop` | `boolean` | `true` | Close on backdrop click |
-| `useCloseByEscapeKey` | `boolean` | `true` | Close on Escape key |
-| `float` | `boolean` | `false` | Floating (non-centered) modal |
-| `fill` | `boolean` | `false` | Full-screen modal |
-| `resizable` | `boolean` | `false` | Enable resize handles |
-| `movable` | `boolean` | `false` | Enable header drag-to-move |
-| `position` | `"bottom-right" \| "top-right" \| undefined` | — | Fixed position variant |
-| `minHeightPx` | `number \| undefined` | — | Minimum height |
-| `minWidthPx` | `number \| undefined` | — | Minimum width |
-| `heightPx` | `number \| undefined` | — | Initial height |
-| `widthPx` | `number \| undefined` | — | Initial width |
-| `headerStyle` | `string \| undefined` | — | Inline style for header |
-| `noFirstControlFocusing` | `boolean` | `false` | Skip auto-focus on first control |
-
-## `SdModalProvider`
-
-Programmatically creates and displays modals.
-
-```typescript
-@Injectable({ providedIn: "root" })
-class SdModalProvider {
-  modalCount: WritableSignal<number>;
-  async showAsync<T extends ISdModal<any>>(modal: ISdModalInfo<T>, options?: ISdModalOptions): Promise</* output type */>;
-}
-```
-
-## `SdActivatedModalProvider`
-
-Injected inside a modal component tree to access the modal shell and content.
-
-```typescript
-@Injectable()
-class SdActivatedModalProvider<T> {
-  modalComponent: WritableSignal<any>;
-  contentComponent: WritableSignal<T | undefined>;
-  canDeactiveFn: () => boolean;
-}
-```
-
-## `ISdModal`
-
-Contract that modal content components must implement.
-
-```typescript
-interface ISdModal<O> {
-  initialized: Signal<boolean>;
-  close: OutputEmitterRef<O | undefined>;
-  actionTplRef?: TemplateRef<any>;
-}
-```
-
-| Field | Type | Description |
-|-------|------|-------------|
-| `initialized` | `Signal<boolean>` | Signals when component is ready |
-| `close` | `OutputEmitterRef<O \| undefined>` | Emits result on close |
-| `actionTplRef` | `TemplateRef<any> \| undefined` | Optional action bar template |
-
-## `ISdModalInfo`
-
-Input descriptor for `SdModalProvider.showAsync`.
-
-```typescript
-interface ISdModalInfo<T> {
-  title: string;
-  type: Type<T>;
-  inputs: Omit<TDirectiveInputSignals<T>, "initialized" | "close" | "actionTplRef">;
-}
-```
-
-| Field | Type | Description |
-|-------|------|-------------|
-| `title` | `string` | Modal title |
-| `type` | `Type<T>` | Component class |
-| `inputs` | `Omit<TDirectiveInputSignals<T>, ...>` | Input values (excluding modal internals) |
-
-## `ISdModalOptions`
-
-Display and behavior options for `showAsync`.
-
-```typescript
-interface ISdModalOptions {
-  key?: string;
-  hideHeader?: boolean;
-  hideCloseButton?: boolean;
-  useCloseByBackdrop?: boolean;
-  useCloseByEscapeKey?: boolean;
-  float?: boolean;
-  fill?: boolean;
-  resizable?: boolean;
-  movable?: boolean;
-  position?: "bottom-right" | "top-right";
-  minHeightPx?: number;
-  minWidthPx?: number;
-  heightPx?: number;
-  widthPx?: number;
-  headerStyle?: string;
-  noFirstControlFocusing?: boolean;
-}
-```
-
-## `SdPromptModalControl`
-
-Built-in modal with a text input. Implements `ISdModal<string>`.
-
-```typescript
-@Component({ selector: "sd-prompt-modal" })
-class SdPromptModalControl implements ISdModal<string> {
-  message = input.required<string>();
-  close = output<string | undefined>();
-  initialized = signal(true);
-}
-```
-
-Confirm emits the entered string; cancel emits `undefined`.
-
-## `SdConfirmModalControl`
-
-Built-in confirm/cancel modal. Implements `ISdModal<boolean>`.
-
-```typescript
-@Component({ selector: "sd-confirm-modal" })
-class SdConfirmModalControl implements ISdModal<boolean> {
-  message = input.required<string>();
-  close = output<boolean | undefined>();
-  initialized = signal(true);
-}
-```
-
-Confirm emits `true`; cancel emits `undefined`.
-
-## `SdToastControl`
-
-Single toast notification with optional progress bar and slide/fade animation.
-
-```typescript
-@Component({ selector: "sd-toast" })
-class SdToastControl {
-  open = model(false);
-  progress = model(0);
-  message = model<string>();
-  useProgress = input(false, { transform: booleanAttribute });
-  theme = input<TSdToastTheme>("info");
-}
-```
-
-## `SdToastContainerControl`
-
-Fixed-position container for `sd-toast` elements. Stacks vertically at top of viewport.
-
-```typescript
-@Component({ selector: "sd-toast-container" })
-class SdToastContainerControl {
-  overlap = input(false, { transform: booleanAttribute });
-}
-```
-
-| Input | Type | Default | Description |
-|-------|------|---------|-------------|
-| `overlap` | `boolean` | `false` | Single toast as full-bottom overlay |
-
-## `SdToastProvider`
-
-Programmatic toast creation and display.
-
-```typescript
-@Injectable({ providedIn: "root" })
-class SdToastProvider {
-  alertThemes: WritableSignal<TSdToastSeverity[]>;
-  overlap: WritableSignal<boolean>;
-  beforeShowFn?: (theme: TSdToastSeverity) => void;
-
-  info(message: string, useProgress?: boolean): void | WritableSignal<number>;
-  success(message: string, useProgress?: boolean): void | WritableSignal<number>;
-  warning(message: string, useProgress?: boolean): void | WritableSignal<number>;
-  danger(message: string, useProgress?: boolean): void | WritableSignal<number>;
-  async notify<T>(input: ISdToastInput<T>): Promise<any>;
-  async try<R>(fn: () => Promise<R>, messageFn?: (err: Error) => string): Promise<R | undefined>;
-}
-```
-
-- When `useProgress` is `true`, returns a `WritableSignal<number>` to update progress (0–100).
-- `try`: runs async function; shows `danger` toast on error and logs via `SdSystemLogProvider`.
-
-## `TSdToastSeverity`
-
-```typescript
-type TSdToastSeverity = "info" | "success" | "warning" | "danger";
-```
-
-## `TSdToastTheme`
-
-```typescript
-type TSdToastTheme = "primary" | "secondary" | TSdToastSeverity | "gray" | "blue-gray";
-```
-
-## `ISdToast`
-
-Contract for custom toast content components.
-
-```typescript
-interface ISdToast<O> {
-  close: OutputEmitterRef<O | undefined>;
-}
-```
-
-## `ISdToastInput`
-
-Input for `SdToastProvider.notify`.
-
-```typescript
-interface ISdToastInput<T> {
-  type: Type<T>;
-  inputs: Omit<TDirectiveInputSignals<T>, "close">;
-}
-```
-
-| Field | Type | Description |
-|-------|------|-------------|
-| `type` | `Type<T>` | Toast component class |
-| `inputs` | `Omit<TDirectiveInputSignals<T>, "close">` | Input values |
-
-## `SdBusyContainerControl`
-
-Overlay that blocks interaction and shows an animated indicator while busy.
-
-```typescript
-@Component({ selector: "sd-busy-container" })
-class SdBusyContainerControl {
-  busy = input(false, { transform: booleanAttribute });
-  message = input<string>();
-  type = input<TSdBusyType>();
-  progressPercent = input<number>();
-}
-```
-
-| Input | Type | Default | Description |
-|-------|------|---------|-------------|
-| `busy` | `boolean` | `false` | Shows overlay when true |
-| `message` | `string \| undefined` | — | Message shown during busy |
-| `type` | `TSdBusyType \| undefined` | provider default | Animation type |
-| `progressPercent` | `number \| undefined` | — | Shows progress bar when set |
-
-## `SdBusyProvider`
-
-Global busy state manager. Creates a full-screen overlay on `document.body`.
-
-```typescript
-@Injectable({ providedIn: "root" })
-class SdBusyProvider {
-  type: WritableSignal<TSdBusyType>; // default: "bar"
-  globalBusyCount: WritableSignal<number>;
-}
-```
-
-Increment `globalBusyCount` to show the overlay; decrement to hide.
-
-## `TSdBusyType`
-
-```typescript
-type TSdBusyType = "spinner" | "bar" | "cube";
-```

package/docs/ui-visual.md

@@ -1,131 +0,0 @@
-# UI Visual
-
-Visual display components: labels, notes, progress bars, calendars, barcodes, and charts.
-
-## `SdLabelControl`
-
-Inline badge/tag label.
-
-```typescript
-@Component({ selector: "sd-label" })
-class SdLabelControl {
-  theme = input<"primary" | "secondary" | "info" | "success" | "warning" | "danger" | "gray" | "blue-gray">();
-  color = input<string>();
-  clickable = input(false, { transform: booleanAttribute });
-}
-```
-
-| Input | Type | Default | Description |
-|-------|------|---------|-------------|
-| `theme` | theme token \| undefined | — | Predefined color theme |
-| `color` | `string \| undefined` | — | Custom CSS background color |
-| `clickable` | `boolean` | `false` | Adds hover/cursor styles |
-
-## `SdNoteControl`
-
-Block-level note/callout box.
-
-```typescript
-@Component({ selector: "sd-note" })
-class SdNoteControl {
-  theme = input<"primary" | "secondary" | "info" | "success" | "warning" | "danger" | "gray" | "blue-gray">();
-  size = input<"sm" | "lg">();
-  inset = input(false, { transform: booleanAttribute });
-}
-```
-
-| Input | Type | Default | Description |
-|-------|------|---------|-------------|
-| `theme` | theme token \| undefined | — | Color theme |
-| `size` | `"sm" \| "lg" \| undefined` | — | Size variant |
-| `inset` | `boolean` | `false` | Removes border-radius |
-
-## `SdProgressControl`
-
-Progress bar with percentage label.
-
-```typescript
-@Component({ selector: "sd-progress" })
-class SdProgressControl {
-  theme = input.required<"primary" | "secondary" | "info" | "success" | "warning" | "danger" | "gray" | "blue-gray">();
-  value = input.required<number>();
-  inset = input(false, { transform: booleanAttribute });
-  size = input<"sm" | "lg">();
-}
-```
-
-| Input | Type | Description |
-|-------|------|-------------|
-| `theme` | theme token | Color theme (required) |
-| `value` | `number` | Progress from `0.0` to `1.0` (required) |
-| `inset` | `boolean` | Removes border-radius |
-| `size` | `"sm" \| "lg" \| undefined` | Size variant |
-
-## `SdCalendarControl`
-
-Month calendar grid that distributes typed items by date.
-
-```typescript
-@Component({ selector: "sd-calendar" })
-class SdCalendarControl<T> {
-  items = input.required<T[]>();
-  getItemDateFn = input.required<(item: T, index: number) => DateOnly>();
-  yearMonth = input<DateOnly>(/* first day of current month */);
-  weekStartDay = input(0);
-  minDaysInFirstWeek = input(1);
-}
-```
-
-| Input | Type | Default | Description |
-|-------|------|---------|-------------|
-| `items` | `T[]` | — | Data items (required) |
-| `getItemDateFn` | `(item, index) => DateOnly` | — | Maps item to date (required) |
-| `yearMonth` | `DateOnly` | current month | Month to display |
-| `weekStartDay` | `number` | `0` (Sunday) | First day of week |
-| `minDaysInFirstWeek` | `number` | `1` | Min days in first week |
-
-Content template: `SdItemOfTemplateDirective` — template for rendering each item cell.
-
-## `SdBarcodeControl`
-
-Renders a barcode as inline SVG using bwip-js.
-
-```typescript
-@Component({ selector: "sd-barcode" })
-class SdBarcodeControl {
-  type = input.required<TBarcodeType>();
-  value = input<string>();
-}
-```
-
-| Input | Type | Description |
-|-------|------|-------------|
-| `type` | `TBarcodeType` | Barcode format (required) |
-| `value` | `string \| undefined` | Barcode content; empty clears display |
-
-## `TBarcodeType`
-
-Union of ~100 barcode format strings supported by bwip-js.
-
-```typescript
-type TBarcodeType = "qrcode" | "code128" | "ean13" | "pdf417" | "datamatrix" | /* ... ~100 more */;
-```
-
-## `SdEchartsControl`
-
-Apache ECharts wrapper with auto-resize and SVG renderer.
-
-```typescript
-@Component({ selector: "sd-echarts" })
-class SdEchartsControl {
-  option = input.required<echarts.EChartsOption>();
-  notMerge = input(false);
-  loading = input(false);
-}
-```
-
-| Input | Type | Default | Description |
-|-------|------|---------|-------------|
-| `option` | `echarts.EChartsOption` | — | ECharts configuration (required) |
-| `notMerge` | `boolean` | `false` | Whether to replace options instead of merge |
-| `loading` | `boolean` | `false` | Shows/hides ECharts loading overlay |