dap-design-system 0.52.0 → 0.52.2

package/dist/common/types.d.ts

@@ -2,7 +2,7 @@ import { ButtonVariant } from '../components/button/button.component';
 import { default as DapDSFileInputListItem, FileListElement } from '../components/file-input/file-input-list-item.component';
 export type Common<T> = Pick<T, keyof T>;
 export type Size = 'lg' | 'md' | 'sm' | 'xs' | 'xxs';
-export type CommonSize = Extract<Size, 'sm' | 'lg'>;
+export type CommonSize = Extract<Size, 'xs' | 'sm' | 'lg'>;
 export type CommonFormElementSize = Extract<Size, 'sm' | 'md' | 'lg'>;
 export type Layout = 'horizontal' | 'vertical';
 export type ElementSpacing = 'top' | 'bottom' | 'both' | 'none';
@@ -79,3 +79,4 @@ export interface TimePreset {
     label: string;
     value: string;
 }
+export type CloseSource = 'ok-button' | 'cancel-button' | 'close-button' | 'esc' | 'overlay';

package/dist/components/avatar/avatar.component.d.ts

@@ -11,7 +11,6 @@ export type AvatarVariant = 'image' | 'initials' | 'icon';
  * @slot icon - The icon to display when variant is 'icon'.
  * @slot fallback - Custom fallback content when image fails to load.
  *
- * @event dds-click - Fired when the avatar is clicked (only when interactive).
  * @event dds-load - Fired when the image loads successfully.
  * @event dds-error - Fired when the image fails to load.
  *

package/dist/components/checkbox/checkbox.component.d.ts

@@ -33,6 +33,7 @@ import { LabeledChoiceElement } from '../../internal/mixin/labeledChoiceElement'
  * @csspart input - The input of the checkbox.
  * @csspart control - The control of the checkbox.
  * @csspart icon - The icon of the checkbox.
+ * @csspart icon-base - The base icon container.
  * @csspart label-container - The label container of the checkbox.
  * @csspart description - The description of the checkbox.
  * @csspart readonly - The readonly state of the checkbox.

package/dist/components/chip/chip.component.d.ts

@@ -12,11 +12,12 @@ export type ChipSize = 'sm' | 'lg';
  * @csspart base - The base part
  * @csspart content-container - The container for the content
  * @csspart remove-button - The remove button
+ * @csspart remove-icon - The icon of the remove icon
+ * @csspart remove-icon-base - The base of the remove icon
+ * @csspart remove-icon-base-base - The base of the remove icon base
  *
- * @cssproperty --dds-chip-border-width - Border width of the chip (default: var(--dds-border-width-base))
- * @cssproperty --dds-chip-border-style - Border style of the chip (default: solid)
+ * @cssproperty --dds-chip-border - Border of the chip (default: var(--dds-border-width-base) solid var(--dds-transparent-black-base))
  * @cssproperty --dds-chip-border-radius - Border radius of the chip (default: var(--dds-radius-small))
- * @cssProperty --dds-chip-border-color - Border color of the chip (default: var(--dds-transparent-black-base))
  * @cssproperty --dds-chip-font-weight - Font weight of the chip (default: var(--dds-font-weight-bold))
  * @cssproperty --dds-chip-line-height - Line height of the chip (default: 1.5)
  * @cssproperty --dds-chip-transition - Transition timing for chip interactions (default: all 0.2s ease-in-out)

package/dist/components/datatable/helpers/angular.d.ts

@@ -0,0 +1,125 @@
+import { RenderCallbackContent } from '../types/cell-content';
+/**
+ * Angular core types - defined locally to avoid requiring @angular/core as a dependency
+ */
+interface Type<T> extends Function {
+    new (...args: any[]): T;
+}
+interface ComponentRef<T> {
+    instance: T;
+    setInput: (name: string, value: unknown) => void;
+    changeDetectorRef: {
+        detectChanges: () => void;
+    };
+    destroy: () => void;
+}
+interface EnvironmentInjector {
+    get: (token: any) => any;
+}
+/**
+ * Options for creating an Angular cell
+ */
+export interface AngularCellOptions {
+    /**
+     * Angular component class to render
+     * Uses Type<any> to support different Angular component types
+     */
+    component: Type<any>;
+    /**
+     * Input bindings to pass to the component
+     * These are set using Angular's setInput() method (Angular 14+)
+     */
+    inputs?: Record<string, any>;
+    /**
+     * Output event handlers to subscribe to
+     * Each output is expected to be an EventEmitter that will be subscribed to
+     * @example
+     * {
+     *   click: (e) => console.log('clicked', e),
+     *   change: (value) => console.log('changed', value)
+     * }
+     */
+    outputs?: Record<string, (...args: any[]) => void>;
+    /**
+     * Content to project into the component (ng-content)
+     * Note: Dynamic content projection is limited in Angular
+     */
+    content?: string;
+    /**
+     * Optional EnvironmentInjector for dependency injection
+     * If not provided, component will be created without DI context
+     */
+    environmentInjector?: EnvironmentInjector;
+}
+/**
+ * Type for Angular's createComponent function
+ * Made flexible to support different Angular versions
+ */
+type CreateComponentFn = (component: Type<any>, options: Record<string, any>) => ComponentRef<any>;
+/**
+ * Create a datatable cell that renders an Angular component using a factory function.
+ *
+ * This helper manages the Angular component lifecycle, creating and destroying
+ * the component when the cell is added/removed from the table.
+ *
+ * Note: This helper requires Angular 14+ for the `createComponent` function
+ * and `setInput` method support.
+ *
+ * @param createComponentFn - Angular's createComponent function from @angular/core
+ * @param options - Angular cell options
+ * @returns Render callback content for the datatable
+ *
+ * @example
+ * ```typescript
+ * import { createComponent, EnvironmentInjector, inject } from '@angular/core'
+ * import { createAngularCellWithFactory } from 'dap-design-system/helpers/angular'
+ * import { StatusBadgeComponent } from './status-badge.component'
+ *
+ * // Inside a component class
+ * private readonly injector = inject(EnvironmentInjector)
+ *
+ * columns = [
+ *   {
+ *     id: 'status',
+ *     header: 'Status',
+ *     cell: (info) => createAngularCellWithFactory(createComponent, {
+ *       component: StatusBadgeComponent,
+ *       inputs: {
+ *         status: info.row.original.status,
+ *         variant: 'success'
+ *       },
+ *       outputs: {
+ *         click: () => console.log('Badge clicked')
+ *       },
+ *       environmentInjector: this.injector
+ *     })
+ *   }
+ * ]
+ * ```
+ */
+export declare function createAngularCellWithFactory(createComponentFn: CreateComponentFn, options: AngularCellOptions): RenderCallbackContent;
+/**
+ * @deprecated Use createAngularCellWithFactory instead.
+ * This alias is provided for backwards compatibility.
+ */
+export declare const createAngularCell: typeof createAngularCellWithFactory;
+/**
+ * Type helper for creating type-safe cell renderers
+ *
+ * @example
+ * ```typescript
+ * import type { AngularCellRenderer } from 'dap-design-system/helpers/angular'
+ *
+ * interface User {
+ *   id: number
+ *   status: string
+ * }
+ *
+ * const statusCell: AngularCellRenderer<User> = (row) => createAngularCellWithFactory(createComponent, {
+ *   component: StatusBadgeComponent,
+ *   inputs: { status: row.status }
+ * })
+ * ```
+ */
+export type AngularCellRenderer<TData = any> = (row: TData) => RenderCallbackContent;
+export {};

package/dist/components/datatable/helpers/index.d.ts

@@ -11,3 +11,7 @@ export type { VueCellOptions, VueCellRenderer } from './vue';
 export { createVueCell } from './vue';
 export type { ReactCellOptions, ReactCellRenderer } from './react';
 export { createReactCell } from './react';
+export type { AngularCellOptions, AngularCellRenderer } from './angular';
+export { createAngularCell, createAngularCellWithFactory } from './angular';
+export type { SvelteCellOptions, SvelteCellRenderer } from './svelte';
+export { createSvelteCell } from './svelte';

package/dist/components/datatable/helpers/svelte.d.ts

@@ -0,0 +1,87 @@
+import { RenderCallbackContent } from '../types/cell-content';
+/**
+ * Options for creating a Svelte cell
+ */
+export interface SvelteCellOptions {
+    /**
+     * Svelte component to render (works with both Svelte 4 and 5)
+     * - Svelte 4: Class-based component (SvelteComponent)
+     * - Svelte 5: Function-based component (Component)
+     */
+    component: any;
+    /**
+     * Props to pass to the component
+     */
+    props?: Record<string, any>;
+    /**
+     * Event listeners to attach to the component
+     * Uses Svelte's event dispatching system ($on for v4, events option for v5)
+     * @example
+     * {
+     *   click: (e) => console.log('clicked', e),
+     *   change: (value) => console.log('changed', value)
+     * }
+     */
+    on?: Record<string, (...args: any[]) => void>;
+    /**
+     * Optional context to pass to the component
+     * Accepts either a Map or a plain object (converted to Map internally)
+     */
+    context?: Map<any, any> | Record<string, any>;
+}
+/**
+ * Create a datatable cell that renders a Svelte component
+ *
+ * This helper manages the Svelte component lifecycle, mounting and unmounting
+ * the component when the cell is added/removed from the table.
+ *
+ * Supports both Svelte 4 (class-based) and Svelte 5 (function-based) components
+ * with automatic version detection.
+ *
+ * @param options - Svelte cell options
+ * @returns Render callback content for the datatable
+ *
+ * @example
+ * ```typescript
+ * import { createSvelteCell } from 'dap-design-system/helpers/svelte'
+ * import StatusBadge from './StatusBadge.svelte'
+ *
+ * const columns = [
+ *   {
+ *     id: 'status',
+ *     header: 'Status',
+ *     cell: (row) => createSvelteCell({
+ *       component: StatusBadge,
+ *       props: {
+ *         status: row.status,
+ *         variant: 'success'
+ *       },
+ *       on: {
+ *         click: () => console.log('Badge clicked')
+ *       }
+ *     })
+ *   }
+ * ]
+ * ```
+ */
+export declare function createSvelteCell(options: SvelteCellOptions): RenderCallbackContent;
+export declare function createSvelteCell(component: any, props?: Record<string, any>): RenderCallbackContent;
+/**
+ * Type helper for creating type-safe cell renderers
+ *
+ * @example
+ * ```typescript
+ * import type { SvelteCellRenderer } from 'dap-design-system/helpers/svelte'
+ *
+ * interface User {
+ *   id: number
+ *   status: string
+ * }
+ *
+ * const statusCell: SvelteCellRenderer<User> = (row) => createSvelteCell({
+ *   component: StatusBadge,
+ *   props: { status: row.status }
+ * })
+ * ```
+ */
+export type SvelteCellRenderer<TData = any> = (row: TData) => RenderCallbackContent;

package/dist/components/modal/modal.component.d.ts

@@ -27,7 +27,7 @@ import { default as ModalBaseElement } from './modal-base-element';
  * @property {boolean} hideCancelButton - Whether the Cancel button should be hidden.
  * @property {string} footer - Whether the modal should have a footer. Default is true.
  * @property {string} header - Whether the modal should have a header. Default is true.
- * @property {boolean} useNativeFocus - Whether the modal should use native focus. Default is false.
+ * @property {boolean} useNativeFocus - Whether the modal should use native browser handled focus. Default is false.
  *
  * @event {{ void }} dds-before-open - Fires before the modal opens.
  * @event {{ void }} dds-opened - Fires after the modal opens.

package/dist/components/overlay/overlay.component.d.ts

@@ -15,10 +15,10 @@ import { DdsElement } from '../../internal/dds-hu-element';
  *
  * @slot - The content of the overlay.
  *
- * @csspart overlay - The overlay element
+ * @csspart base - The overlay element
  *
  * @cssproperty --dds-overlay-z-index - Controls the z-index of the overlay (default: 1)
- * @cssproperty --dds-overlay-background-color - Controls the background color of the overlay (default: var(--dds-black-10))
+ * @cssproperty --dds-overlay-background - Controls the background of the overlay (default: var(--dds-black-10))
  * @cssproperty --dds-overlay-opacity-closed - Controls the opacity when overlay is closed (default: 0)
  * @cssproperty --dds-overlay-opacity-open - Controls the opacity when overlay is open (default: 1)
  * @cssproperty --dds-overlay-transition-duration - Controls the transition duration (default: var(--dds-transition-fast))

package/dist/components/tab/tab-group.component.d.ts

@@ -16,6 +16,7 @@ import { DdsElement } from '../../internal/dds-hu-element';
  * @csspart tab-content - The tab content container.
  *
  * @cssproperty --dds-tab-group-border-radius - Border radius of the tab group container (default: var(--dds-radius-base))
+ * @cssproperty --dds-tab-border-radius - Border radius for tab items (default: var(--dds-radius-base) var(--dds-radius-base) 0 0)
  * @cssproperty --dds-tab-group-border-width - Border width of the tab navigation (default: var(--dds-border-width-base))
  * @cssproperty --dds-tab-group-border-color - Border color of the tab navigation (default: var(--dds-border-neutral-subtle))
  * @cssproperty --dds-tab-height-sm - Height of small tabs (default: 40px)

package/dist/components/toc/toc.component.d.ts

@@ -32,6 +32,12 @@ declare const DapDSTOC_base: typeof DdsElement & {
  * @cssproperty --dds-toc-link-border-color - Border color of the active TOC link. (default: var(--dds-border-brand-base))
  * @cssproperty --dds-toc-link-line-height - Line height of the TOC links. (default: 1.2)
  * @cssproperty --dds-toc-link-padding - Padding of the TOC links. (default: var(--dds-spacing-200))
+ * @cssproperty --dds-toc-indent-level-0 - Indent level of the TOC items. (default: var(--dds-spacing-400))
+ * @cssproperty --dds-toc-indent-level-1 - Indent level of the TOC items. (default: var(--dds-spacing-800))
+ * @cssproperty --dds-toc-indent-level-2 - Indent level of the TOC items. (default: var(--dds-spacing-1200))
+ * @cssproperty --dds-toc-indent-level-3 - Indent level of the TOC items. (default: var(--dds-spacing-1600))
+ * @cssproperty --dds-toc-indent-level-4 - Indent level of the TOC items. (default: var(--dds-spacing-2000))
+ * @cssproperty --dds-toc-indent-level-5 - Indent level of the TOC items. (default: var(--dds-spacing-2400))
  */
 export default class DapDSTOC extends DapDSTOC_base {
     /** The root element to observe [`IntersectionObserver`](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#root) */