dap-design-system 0.21.1 → 0.22.0

package/dist/dds.d.ts

@@ -1,9 +1,17 @@
+import { ColumnDef } from '@tanstack/lit-table';
 import { CSSResult } from 'lit';
 import { Dayjs } from 'dayjs';
 import { default as default_2 } from 'dayjs';
 import { LitElement } from 'lit';
 import { nothing } from 'lit';
+import { PaginationState } from '@tanstack/lit-table';
 import { PropertyValueMap } from 'lit';
+import { Row } from '@tanstack/lit-table';
+import { RowData } from '@tanstack/lit-table';
+import { RowSelectionState } from '@tanstack/lit-table';
+import { SortingState } from '@tanstack/lit-table';
+import { Table } from '@tanstack/lit-table';
+import { TableController } from '@tanstack/lit-table';
 import { TemplateResult } from 'lit';
 import { TemplateResult as TemplateResult_2 } from 'lit-html';
 
@@ -503,7 +511,11 @@ export declare class ArrowsExpandUpDownFill extends DdsElement {
 
 export declare type BackgroundShade = 'subtle' | 'base' | 'medium' | 'strong';
 
-declare type BadgeType = 'neutral' | 'brand' | 'info' | 'positive' | 'warning' | 'negative';
+export declare type BadgeType = 'neutral' | 'brand' | 'info' | 'positive' | 'warning' | 'negative';
+
+declare type BadgeType_2 = 'neutral' | 'brand' | 'info' | 'positive' | 'warning' | 'negative';
+
+declare type BadgeVariant = 'round' | 'dot';
 
 declare type BannerVariant = 'brand' | 'positive' | 'info' | 'warning' | 'negative';
 
@@ -597,6 +609,8 @@ declare interface ChoiceElementMixinInterface {
     checked: boolean;
 }
 
+export { ColumnDef }
+
 declare class ComboboxBaseElement extends GenericFormElement {
     triggerInput: HTMLInputElement;
     optionList: DapDSOptionList;
@@ -804,7 +818,7 @@ export declare class DapDSBadge extends DdsElement {
     /** The type of the badge
      * @type { 'neutral' | 'brand' | 'info' | 'positive' | 'warning' | 'negative' }
      */
-    type: BadgeType;
+    type: BadgeType_2;
     /** The size of the badge
      * @type { 'lg' | 'sm' }
      */
@@ -1565,6 +1579,70 @@ export declare class DapDSDAPBadge extends DdsElement {
     render(): TemplateResult_2;
 }
 
+/**
+ * `dap-ds-datatable`
+ * @summary A data table is a component that displays data in a tabular format.
+ * @element dap-ds-datatable
+ * @title - Data table
+ *
+ * @event dds-sorting-change - Fired when the sorting of the table changes.
+ * @event dds-selection-change - Fired when the selection of the table changes.
+ * @event dds-pagination-change - Fired when the pagination of the table changes.
+ * @event dds-row-click - Fired when a row is clicked.
+ *
+ * @csspart base - The main table container.
+ * @csspart header - The header of the table.
+ * @csspart header-row - The header row of the table.
+ * @csspart header-cell - All cells of the header.
+ * @csspart body - The body of the table.
+ * @csspart row - All rows of the table.
+ * @csspart cell - All cells of the table.
+ * @csspart pager - The pager of the table.
+ *
+ */
+export declare class DapDSDataTable<T> extends DdsElement {
+    static styles: CSSResult;
+    private tableController;
+    /** Data to display in the table */
+    data: RowData[];
+    /** Columns to display in the table */
+    columns: ColumnDef<T>[];
+    /** Row key to use for row selection, this should be a unique key for each row */
+    rowKey: string;
+    /** Enable row selection on the table, can be a boolean or a function that returns a boolean */
+    enableRowSelection: boolean | ((row: Row<T>) => boolean);
+    /** Enable sorting on the table */
+    enableSorting: boolean;
+    /** Enable manual sorting on the table */
+    manualSorting: boolean;
+    /** Enables manual pagination. If this option is set to true, the table will not automatically paginate rows and instead will expect you to manually paginate the rows before passing them to the table. This is useful if you are doing server-side pagination and aggregation. */
+    manualPagination: boolean;
+    /** If set to true, pagination will be reset to the first page when page-altering state changes eg. data is updated, filters change, grouping changes, etc. */
+    autoResetPageIndex: boolean;
+    /** Enable row click on the table */
+    enableRowClick: boolean;
+    /** Loading state of the table */
+    loading: boolean;
+    /** Sorting state of the table */
+    sorting: SortingState;
+    private _sorting;
+    /** Selection state of the table */
+    rowSelection: RowSelectionState;
+    private _rowSelection;
+    pagination: PaginationState;
+    private _pagination;
+    /** Number of rows in the table */
+    rowCount: number;
+    /** @ignore */
+    debug: boolean;
+    protected firstUpdated(_changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void;
+    protected updated(_changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void;
+    columnsMemo: () => ColumnDef<T>[];
+    renderHeader: (table: Table<T>) => TemplateResult_2<1>;
+    renderBody: (table: Table<T>) => TemplateResult_2<1>;
+    protected render(): TemplateResult_2<1>;
+}
+
 /**
  * `dap-ds-datepicker`
  * @summary A datepicker is a graphical user interface widget that allows the user to select a date from a calendar and/or time from a time range.
@@ -1908,8 +1986,6 @@ declare const DapDSFileInputListItem_base: typeof DdsElement & {
  * @title - Form label
  * @group form
  *
- * @property {string} for - The id of the form element that the label is associated with.
- * @property {boolean} renderAsText - Whether the label should be rendered as text or a <label> tag. Default is false.
  * @property {string} optionalLabel - Label of optional text
  * @property {boolean} subtle - Text weight of the label.
  * @property {boolean} optional - If the label is optional.
@@ -1918,13 +1994,15 @@ declare const DapDSFileInputListItem_base: typeof DdsElement & {
  * @csspart required - The required indicator of the form label.
  * @csspart optional - The optional indicator of the form label.
  */
-export declare class DapDSFormLabel extends DapDSFormLabel_base {
+declare class DapDSFormLabel extends DapDSFormLabel_base {
     for?: string;
-    renderAsText?: boolean;
+    renderAs: string;
     static styles: CSSResult;
     createRenderRoot(): this;
     render(): TemplateResult_2;
 }
+export { DapDSFormLabel }
+export { DapDSFormLabel as DapDSLabel }
 
 declare const DapDSFormLabel_base: {
     new (...args: any[]): LabelableElementInterface;
@@ -2211,6 +2289,14 @@ export declare class DapDSListItem extends DdsElement {
      * Whether the list item is interactive. Generates an anchor tag.
      */
     interactive: boolean;
+    /** The link target of the list item when interactive.
+     * @type { '_blank' | '_self' | '_parent' | '_top' }
+     */
+    target: LinkTarget;
+    /** The href of the list item when interactive */
+    href: string;
+    /** The rel of the list item when interactive */
+    rel: string;
     /**
      * Whether the list item has an icon.
      */
@@ -2266,6 +2352,46 @@ export declare class DapDSModal extends ModalBaseElement {
     render(): TemplateResult_2<1>;
 }
 
+/**
+ * `dap-ds-notification-badge`
+ * @summary A notification badge component is a user interface element that visually indicates the presence of new information or updates, often displaying a numeric count of unread notifications, messages, or items requiring attention.
+ * @element dap-ds-notification-badge
+ * @title - Notification badge
+ *
+ * @slot - The content of the notification badge.
+ *
+ * @csspart base - The main container of the notification badge.
+ * @csspart noty - The notification badge container.
+ */
+export declare class DapDSNotificationBadge extends DdsElement {
+    /** The content of the badge, it can be a number or a string. Content tried to be parsed as a number, if it's not a number, it will be displayed as a string. */
+    badgeContent: string;
+    /** This switch decides the visibility of the badge. This property overrides the badge content visibility. Use it for explicit control. */
+    visible: boolean;
+    /** This switch decides whether to show a zero value or not. */
+    showZero: boolean;
+    /** The color scheme of the badge
+     * @type { 'neutral' | 'brand' | 'info' | 'positive' | 'warning' | 'negative' }
+     */
+    type: BadgeType;
+    /** The variant of the badge.
+     * @type { 'round' | 'dot' }
+     */
+    variant: BadgeVariant;
+    /** The cap value of badge content, if the badge content is greater than the max value, it will be displayed as `[number]+`. Zero means no cap. */
+    max: number;
+    /** The position of the badge content around the slot content.
+     * @type { 'top-start' | 'top-end' | 'bottom-start' | 'bottom-end' }
+     */
+    placement: PopupPlacement;
+    static styles: CSSResult;
+    private parseBadgeContent;
+    private handleMax;
+    private renderContent;
+    private get hide();
+    render(): TemplateResult_2;
+}
+
 /**
  * `dap-ds-number-input`
  * @summary A number input is a field for entering a number.
@@ -2453,6 +2579,38 @@ export declare class DapDSOverlay extends DdsElement {
     render(): TemplateResult_2<1>;
 }
 
+/**
+ * `dap-ds-pager`
+ * @summary A pager is a component that displays pagination controls.
+ * @element dap-ds-pager
+ * @title - Pager
+ *
+ * @event dds-pagination-change - Event fired when the pagination changes
+ *
+ * @csspart base - The main pager container.
+ * @csspart first - The first page button.
+ * @csspart previous - The previous page button.
+ * @csspart next - The next page button.
+ * @csspart last - The last page button.
+ *
+ */
+export declare class DapDSPager extends DdsElement {
+    /** Enable manual pagination. If true, the component will not automatically update the page index. */
+    manualPagination: boolean;
+    /** The current page index. */
+    pageIndex: number;
+    private _pageIndex;
+    /** The number of items per page. */
+    pageSize: number;
+    private _pageSize;
+    /** The total number of rows. */
+    totalRows: number;
+    static styles: CSSResult;
+    protected updated(_changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void;
+    private updatePageIndex;
+    protected render(): TemplateResult_2<1>;
+}
+
 /**
  * `dap-ds-password-input`
  * @summary A password input a field for entering a password.
@@ -3322,12 +3480,14 @@ export declare class DapDSTextarea extends GenericFormElement {
  * @element dap-ds-toc
  * @title - toc
  *
+ * @property {'sm' | 'lg'} size - The size of the toc. Default is `lg`.
+ *
  * @event dds-anchor-change - Event that is triggered when the anchor changes.
  *
  * @csspart base - The main container of the toc.
  *
  */
-export declare class DapDSTOC extends DdsElement {
+export declare class DapDSTOC extends DapDSTOC_base {
     /** The root element to observe [`IntersectionObserver`](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#root) */
     root: string;
     /** The margin around the root element to observe [`IntersectionObserver`](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#rootmargin) */
@@ -3351,6 +3511,7 @@ export declare class DapDSTOC extends DdsElement {
     private _selectors;
     private _items;
     static styles: CSSResult;
+    constructor();
     get activeAnchor(): HTMLAnchorElement;
     get anchors(): HTMLElement[];
     get items(): Heading[];
@@ -3368,6 +3529,11 @@ export declare class DapDSTOC extends DdsElement {
     private _handleIntersect;
 }
 
+declare const DapDSTOC_base: typeof DdsElement & {
+    new (...args: any[]): SizedElementInterface;
+    prototype: SizedElementInterface;
+};
+
 /**
  * `dap-ds-tooltip`
  * @summary A tooltip is a container for tooltip content.
@@ -3562,10 +3728,18 @@ export declare type DdsOptionChangeEvent = CustomEvent<Record<PropertyKey, never
 
 export declare type DdsOptionItemsChangedEvent = CustomEvent<Record<PropertyKey, never>>;
 
+export declare type DdsPaginationChangeEvent = CustomEvent<SortingState[]>;
+
+export declare type DdsRowClickEvent = CustomEvent<SortingState[]>;
+
 export declare type DdsSearchEvent = CustomEvent<Record<PropertyKey, never>>;
 
 export declare type DdsSelectEvent = CustomEvent<Record<PropertyKey, never>>;
 
+export declare type DdsSelectionChangeEvent = CustomEvent<RowSelectionState>;
+
+export declare type DdsSortingChangeEvent = CustomEvent<SortingState[]>;
+
 export declare type DdsTabSelectEvent = CustomEvent<{
     tabId: string;
 }>;
@@ -3885,6 +4059,7 @@ declare class ModalBaseElement extends DdsElement {
     private canceled;
     static styles: CSSResult;
     protected updated(_changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void;
+    scrollLock: (open: boolean) => void;
     protected firstUpdated(_changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void;
     show(): void;
     hide(): void;
@@ -3936,6 +4111,10 @@ export declare type PopupPlacement = 'top' | 'top-start' | 'top-end' | 'right' |
 
 export declare type PopupTrigger = 'click' | 'hover' | 'focus' | 'manual' | 'hover focus';
 
+export { RowData }
+
+export { RowSelectionState }
+
 export declare type Size = 'lg' | 'md' | 'sm' | 'xs' | 'xxs';
 
 declare interface SizedElementInterface {
@@ -3952,6 +4131,8 @@ export declare type SnackbarMessage = {
 
 export declare type SnackbarPosition = 'bottom-left' | 'bottom-right' | 'bottom-center' | 'top-right' | 'top-center';
 
+export { SortingState }
+
 export declare type Spacing = 0 | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 1000 | 1200 | 1400 | 1600 | 1800 | 2000 | 2400 | 3000 | 4000 | 5000 | 6000;
 
 declare type Spacing_2 = 'top' | 'bottom' | 'both' | 'none';
@@ -4954,6 +5135,10 @@ export declare class SystemSubtractLine2 extends DdsElement {
     render(): TemplateResult_2;
 }
 
+export { Table }
+
+export { TableController }
+
 export declare type TooltipMode = 'tooltip' | 'toggle';
 
 declare type TooltipMode_2 = 'tooltip' | 'toggle';
@@ -5149,6 +5334,20 @@ declare global {
 }
 
 
+declare global {
+    interface GlobalEventHandlersEventMap {
+        'dds-pagination-change': DdsPaginationChangeEvent;
+    }
+}
+
+
+declare global {
+    interface GlobalEventHandlersEventMap {
+        'dds-row-click': DdsRowClickEvent;
+    }
+}
+
+
 declare global {
     interface GlobalEventHandlersEventMap {
         'dds-search': DdsSearchEvent;
@@ -5163,6 +5362,20 @@ declare global {
 }
 
 
+declare global {
+    interface GlobalEventHandlersEventMap {
+        'dds-selection-change': DdsSelectionChangeEvent;
+    }
+}
+
+
+declare global {
+    interface GlobalEventHandlersEventMap {
+        'dds-sorting-change': DdsSortingChangeEvent;
+    }
+}
+
+
 declare global {
     interface GlobalEventHandlersEventMap {
         'dds-tab-select': DdsTabSelectEvent;
@@ -5336,6 +5549,13 @@ declare global {
 }
 
 
+declare global {
+    interface HTMLElementTagNameMap {
+        'dap-ds-datatable': DapDSDataTable<unknown>;
+    }
+}
+
+
 declare global {
     interface HTMLElementTagNameMap {
         'dap-ds-datepicker': DapDSDatePicker;
@@ -5798,6 +6018,13 @@ declare global {
 }
 
 
+declare global {
+    interface HTMLElementTagNameMap {
+        'dap-ds-notification-badge': DapDSNotificationBadge;
+    }
+}
+
+
 declare global {
     interface HTMLElementTagNameMap {
         'dap-ds-number-input': DapDSNumberInput;
@@ -5826,6 +6053,13 @@ declare global {
 }
 
 
+declare global {
+    interface HTMLElementTagNameMap {
+        'dap-ds-pager': DapDSPager;
+    }
+}
+
+
 declare global {
     interface HTMLElementTagNameMap {
         'dap-ds-password-input': DapDSPasswordInput;