dap-design-system 0.51.0 → 0.52.1

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/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/option-group/option-group.component.d.ts

@@ -0,0 +1,24 @@
+import { DdsElement } from '../../internal/dds-hu-element';
+/**
+ * `dap-ds-option-group`
+ * @summary An option group is a container for grouping related option items.
+ * Used with dap-ds-select to create grouped options that render as native optgroup elements.
+ * @element dap-ds-option-group
+ * @title - Option group
+ *
+ * @property {string} label - The label of the option group (displayed in native optgroup).
+ * @property {boolean} disabled - Whether all options in the group are disabled.
+ *
+ * @slot - The option items in this group.
+ *
+ * @csspart base - The main option group container.
+ * @csspart label - The label of the option group.
+ */
+export default class DapDSOptionGroup extends DdsElement {
+    /** The label of the option group */
+    label?: string;
+    /** Whether all options in the group are disabled */
+    disabled?: boolean;
+    static readonly styles: import('lit').CSSResult;
+    render(): import('lit-html').TemplateResult<1>;
+}

package/dist/components/option-group/option-group.d.ts

@@ -0,0 +1,8 @@
+import { default as DapDSOptionGroup } from './option-group.component.js';
+export * from './option-group.component.js';
+export default DapDSOptionGroup;
+declare global {
+    interface HTMLElementTagNameMap {
+        'dap-ds-option-group': DapDSOptionGroup;
+    }
+}

package/dist/components/scroll-progress/scroll-progress.component.d.ts

@@ -0,0 +1,57 @@
+import { DdsElement } from '../../internal/dds-hu-element';
+export type ScrollProgressVariant = 'neutral' | 'brand' | 'negative' | 'positive' | 'inverted';
+export type ScrollProgressSize = 'xs' | 'sm' | 'md';
+/**
+ * `dap-ds-scroll-progress`
+ * @summary A progress bar that displays scroll position, supporting both page-level and container-level scroll tracking.
+ * @element dap-ds-scroll-progress
+ * @title - Scroll Progress
+ *
+ * @csspart base - The main scroll progress container.
+ * @csspart track - The progress track (background).
+ * @csspart fill - The progress fill bar.
+ *
+ * @cssprop --dds-scroll-progress-z-index - Z-index for fixed positioning (default: 1000)
+ * @cssprop --dds-scroll-progress-transition - Transition for progress updates (default: width 0.1s ease-out)
+ * @cssprop --dds-scroll-progress-track-color - Background color of the progress track (default: var(--dds-neutral-200))
+ * @cssprop --dds-scroll-progress-fill-color-neutral - Fill color for neutral variant
+ * @cssprop --dds-scroll-progress-fill-color-brand - Fill color for brand variant
+ * @cssprop --dds-scroll-progress-fill-color-negative - Fill color for negative variant
+ * @cssprop --dds-scroll-progress-fill-color-positive - Fill color for positive variant
+ * @cssprop --dds-scroll-progress-fill-color-inverted - Fill color for inverted variant
+ *
+ */
+export default class DapDSScrollProgress extends DdsElement {
+    /**
+     * CSS selector for scroll container. If not set, tracks global page scroll.
+     * When set, the component uses sticky positioning within the container.
+     */
+    target?: string;
+    /**
+     * The color variant of the progress indicator.
+     * @type {"neutral" | "brand" | "negative" | "positive" | "inverted"}
+     */
+    variant: ScrollProgressVariant;
+    /**
+     * The size of the progress bar.
+     * @type {"xs" | "sm" | "md"}
+     */
+    size: ScrollProgressSize;
+    /**
+     * Current progress value (0-100).
+     */
+    private progress;
+    private targetElement;
+    private rafId;
+    private boundHandleScroll;
+    static readonly styles: import('lit').CSSResult;
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    protected updated(changedProperties: Map<PropertyKey, unknown>): void;
+    private setupScrollListener;
+    private cleanupScrollListener;
+    private handleScroll;
+    private calculateProgress;
+    render(): import('lit-html').TemplateResult<1>;
+}

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

@@ -1,5 +1,6 @@
 import { FloatingStrategy, PopupPlacement } from '../../common/types';
 import { GenericFormElement } from '../../internal/mixin/genericFormElement';
+import { default as DapDSOptionItem } from '../option-item/option-item.component';
 import { default as DapDSOptionList } from '../option-list/option-list.component';
 /**
  * `dap-ds-select`
@@ -100,6 +101,8 @@ export default class DapDSSelect extends GenericFormElement {
     sync?: boolean;
     /** Whether the select is in mobile mode. */
     isMobile?: boolean;
+    /** Whether to render a native HTML select element for mobile-friendly option selection. */
+    native?: boolean;
     /** The loading state of the select. */
     loading?: boolean;
     /** The max heigth of the select dropdown. */
@@ -138,7 +141,7 @@ export default class DapDSSelect extends GenericFormElement {
      * Get the active descendant element for aria-activedescendant
      * Returns the currently focused option when dropdown is open, otherwise null
      */
-    getActiveDescendant(): import('../option-item/option-item.component').default | null | undefined;
+    getActiveDescendant(): DapDSOptionItem | null | undefined;
     /**
      * Get the aria-describedby value, combining description and feedback IDs
      */
@@ -153,6 +156,11 @@ export default class DapDSSelect extends GenericFormElement {
     handleInvalid(event: Event): void;
     private readonly handleSelectedChange;
     private readonly handleOptionDeselect;
+    private readonly handleNativeChange;
+    private renderNativeOption;
+    private renderNativeOptgroup;
+    private renderNativeOptions;
+    private renderNativeSelect;
     renderTriggerElement(): import('lit-html').TemplateResult;
     renderOptionList(): import('lit-html').TemplateResult;
     render(): import('lit-html').TemplateResult;