dap-design-system 0.44.10 → 0.45.1

package/dist/components.d.ts

@@ -2,6 +2,7 @@ import { ColumnDef } from '@tanstack/lit-table';
 import { CSSResult } from 'lit';
 import { Dayjs } from 'dayjs';
 import { default as default_2 } from 'dayjs';
+import { default as i18next } from 'i18next';
 import { LitElement } from 'lit';
 import { nothing } from 'lit';
 import { PaginationState } from '@tanstack/lit-table';
@@ -1234,7 +1235,7 @@ export declare class DapDSCalendar extends DdsElement {
      */
     disabledDate: (date: Dayjs) => boolean;
     /** The locale of the calendar.
-     * @type {string}
+     * @type {'hu' | 'en' | 'de'}
      * @default dayjs.locale()
      */
     locale: string;
@@ -2687,7 +2688,7 @@ export declare class DapDSDatePicker extends GenericFormElement {
     /** The floating strategy of the datepicker. */
     floatingStrategy: FloatingStrategy;
     /** The locale of the datepicker. By default it uses the global locale from dayjs. It is determined from the browser language.
-     * @type {'hu' | 'en'}
+     * @type {'hu' | 'en' | 'de'}
      */
     locale: string;
     /** Whether to hide dates from adjacent months (previous/next) in the calendar grid. When not explicitly set, defaults to `false` for single mode and `true` for range mode.
@@ -4272,17 +4273,32 @@ declare const DapDSOptionList_base: typeof DdsElement & {
  * @element dap-ds-overlay
  * @title - Overlay
  *
+ * @property {boolean} open - The open state of the overlay.
+ *
+ * @event {CustomEvent} dds-before-open - Fires before the overlay opens.
+ * @event {CustomEvent} dds-opened - Fires after the overlay opens.
+ * @event {CustomEvent} dds-before-close - Fires before the overlay closes.
+ * @event {CustomEvent} dds-closed - Fires after the overlay closes.
+ *
+ * @slot - The content of the overlay.
+ *
  * @csspart overlay - 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-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))
+ * @cssproperty --dds-overlay-transition-timing - Controls the transition timing function (default: var(--dds-easing-ease-in-out))
  */
 export declare class DapDSOverlay extends DdsElement {
     /** The open state of the overlay. */
-    open?: boolean;
+    open: boolean;
     static readonly styles: CSSResult;
+    connectedCallback(): void;
+    protected updated(changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void;
+    private handleOpen;
+    private handleClose;
     render(): TemplateResult_2<1>;
 }
 
@@ -4358,10 +4374,10 @@ export declare class DapDSPager extends DdsElement {
     nextButtonLabel: string;
     /** The last button label. */
     lastButtonLabel: string;
-    /** The function to determine the pager text
+    /** The function to determine the pager text. If not provided, uses default reactive translation.
      * @type {Function}
      */
-    pageStateText: (pageIndex: number, pageSize: number, totalRows: number) => string;
+    pageStateText?: (pageIndex: number, pageSize: number, totalRows: number) => unknown;
     static readonly styles: CSSResult;
     protected updated(_changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void;
     private updatePageIndex;
@@ -4481,6 +4497,109 @@ export declare class DapDSPopup extends PopupBaseElement {
     render(): TemplateResult_2;
 }
 
+/**
+ * `dap-ds-progress`
+ * @summary Progress indicator component with linear and circular variants.
+ * @element dap-ds-progress
+ * @title - Progress
+ *
+ * @csspart base - The main progress container.
+ * @csspart track - The progress track (background).
+ * @csspart fill - The progress fill (bar for linear, circle for circular).
+ * @csspart label - The progress label text.
+ * @csspart percentage - The percentage text (circular variant only).
+ * @csspart background - The background circle (circular variant only).
+ *
+ * @slot label - Custom label content for the progress indicator.
+ *
+ * @cssprop --dds-progress-track-color - Background color of the progress track. Default is var(--dds-neutral-200).
+ * @cssprop --dds-progress-fill-color-neutral - Fill color for neutral variant. Default is var(--dds-icon-neutral-base).
+ * @cssprop --dds-progress-fill-color-brand - Fill color for brand variant. Default is var(--dds-icon-brand-subtle).
+ * @cssprop --dds-progress-fill-color-negative - Fill color for negative variant. Default is var(--dds-icon-negative-subtle).
+ * @cssprop --dds-progress-fill-color-positive - Fill color for positive variant. Default is var(--dds-icon-positive-subtle).
+ * @cssprop --dds-progress-fill-color-inverted - Fill color for inverted variant. Default is var(--dds-icon-neutral-inverted).
+ * @cssprop --dds-progress-height-xs - Height for extra small linear progress. Default is var(--dds-spacing-50).
+ * @cssprop --dds-progress-height-sm - Height for small linear progress. Default is var(--dds-spacing-100).
+ * @cssprop --dds-progress-height-md - Height for medium linear progress. Default is var(--dds-spacing-150).
+ * @cssprop --dds-progress-height-lg - Height for large linear progress. Default is var(--dds-spacing-200).
+ * @cssprop --dds-progress-height-xl - Height for extra large linear progress. Default is var(--dds-spacing-300).
+ * @cssprop --dds-progress-height-xxl - Height for extra extra large linear progress. Default is var(--dds-spacing-400).
+ * @cssprop --dds-progress-diameter-xs - Diameter for extra small circular progress. Default is var(--dds-spacing-600).
+ * @cssprop --dds-progress-diameter-sm - Diameter for small circular progress. Default is var(--dds-spacing-800).
+ * @cssprop --dds-progress-diameter-md - Diameter for medium circular progress. Default is var(--dds-spacing-1200).
+ * @cssprop --dds-progress-diameter-lg - Diameter for large circular progress. Default is var(--dds-spacing-1600).
+ * @cssprop --dds-progress-diameter-xl - Diameter for extra large circular progress. Default is var(--dds-spacing-2000).
+ * @cssprop --dds-progress-diameter-xxl - Diameter for extra extra large circular progress. Default is var(--dds-spacing-2400).
+ * @cssprop --dds-progress-stroke-width - Stroke width for circular progress. Default is var(--dds-spacing-200).
+ * @cssprop --dds-progress-animation-duration - Duration of indeterminate animation. Default is 1.5s.
+ *
+ */
+export declare class DapDSProgress extends DdsElement {
+    /**
+     * The variant of the progress indicator.
+     * @type {"linear" | "circular"}
+     */
+    variant: ProgressVariant;
+    /**
+     * The color variant of the progress indicator.
+     * @type {"neutral" | "brand" | "negative" | "positive" | "inverted"}
+     */
+    color: ProgressColor;
+    /**
+     * The size of the progress indicator.
+     * @type {"xxl" | "xl" | "lg" | "md" | "sm" | "xs"}
+     */
+    size: IconSize;
+    /**
+     * Current progress value (0-100 for percentage, or 0-max).
+     */
+    value?: number;
+    /**
+     * Maximum value for the progress indicator.
+     */
+    max: number;
+    /**
+     * Whether to show the progress as indeterminate (loading animation).
+     */
+    indeterminate: boolean;
+    /**
+     * Whether to show percentage text in the center (circular variant only).
+     */
+    showPercentage: boolean;
+    /**
+     * Label text for the progress indicator.
+     */
+    label?: string;
+    /**
+     * The aria-live politeness level for screen readers.
+     * @type {"polite" | "assertive" | "off"}
+     */
+    ariaLive: 'polite' | 'assertive' | 'off';
+    static readonly styles: CSSResult;
+    /**
+     * Calculate the percentage value (0-100).
+     */
+    private get percentage();
+    /**
+     * Calculate the stroke-dashoffset for circular progress.
+     * Circle circumference = 2πr where r = 45 (radius of circle with center at 50,50 in viewBox 0 0 100 100)
+     */
+    private get circleOffset();
+    /**
+     * Get the accessible label for the progress indicator.
+     */
+    private get accessibleLabel();
+    /**
+     * Render the linear progress variant.
+     */
+    private renderLinear;
+    /**
+     * Render the circular progress variant.
+     */
+    private renderCircular;
+    render(): TemplateResult_2<1>;
+}
+
 /**
  * `dap-ds-radio-button`
  * @summary A radio button is a graphical control element that allows the user to choose only one of a predefined set of mutually exclusive options.
@@ -4964,6 +5083,9 @@ export declare class DapDSSelect extends GenericFormElement {
      */
     selectedItem: any;
     static readonly styles: CSSResult;
+    private languageChangeHandler;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
     /**
      * Lifecycle method to handle property changes
      */
@@ -4980,6 +5102,8 @@ export declare class DapDSSelect extends GenericFormElement {
     get focusElement(): HTMLButtonElement;
     get validity(): ValidityState;
     get validationMessage(): string;
+    /** Get the current display text for the selected item, dynamically fetching from the option */
+    get selectedDisplayText(): string | null;
     checkValidity(): boolean;
     reportValidity(): boolean;
     setValidity(): void;
@@ -6072,7 +6196,7 @@ export declare class DapDSTimePicker extends GenericFormElement {
     /** The floating strategy of the timepicker. */
     floatingStrategy: FloatingStrategy;
     /** The locale of the timepicker. By default it uses the global locale from dayjs.
-     * @type {'hu' | 'en'}
+     * @type {'hu' | 'en' | 'de'}
      */
     locale: string;
     /** Whether the dropdown should close when a time is selected. */
@@ -6831,6 +6955,8 @@ export declare class HttpError extends Error {
     constructor(message: string, response: any, status: number);
 }
 
+export { i18next }
+
 declare type IconSize = 'xxl' | 'xl' | 'lg' | 'md' | 'sm' | 'xs';
 
 declare class InputBaseElement extends GenericFormElement {
@@ -7060,6 +7186,10 @@ export declare type PopupPlacement = 'top' | 'top-start' | 'top-end' | 'right' |
 
 export declare type PopupTrigger = 'click' | 'hover' | 'focus' | 'manual' | 'hover focus';
 
+declare type ProgressColor = 'neutral' | 'brand' | 'negative' | 'positive' | 'inverted';
+
+declare type ProgressVariant = 'linear' | 'circular';
+
 export { Row }
 
 export { RowData }