dap-design-system

import { ColumnDef } from '@tanstack/lit-table'; import { CSSResult } from 'lit'; import { Dayjs } from 'dayjs'; import { default as default_2 } from 'dayjs'; import { EventName } from '@lit/react'; import { LitElement } from 'lit'; import { nothing } from 'lit'; import { PaginationState } from '@tanstack/lit-table'; import { PropertyValueMap } from 'lit'; import { PropertyValues } from 'lit'; import { ReactWebComponent } from '@lit/react'; 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 { TemplateResult } from 'lit'; import { TemplateResult as TemplateResult_2 } from 'lit-html'; declare class AccordionBaseElement extends DdsElement { static readonly styles: CSSResult; private readonly accordionId; private readonly buttonId; private readonly contentId; /** The size of the accordion * @type { 'sm' | 'lg' } */ size: CommonSize; /** The heading level of the accordion * @type { 1 | 2 | 3 | 4 | 5 | 6 } */ headingLevel: HeadingLevel; /** Whether the accordion is opened */ opened: boolean; /** Whether the accordion is disabled */ disabled: boolean; /** Whether the accordion is in loading state */ loading: boolean; /** The loading aria label of the accordion */ loadingAriaLabel?: string; /** The location of the icon * @type { 'left' | 'right' } */ iconLocation: LabelPlacement; /** The variant of the accordion * @type { 'default' | 'collapsed' | 'clean' | 'clean-collapsed' } */ variant: AccordionVariant; /** Whether this is the last item in an accordion group */ lastItem: boolean; /** ID of element that describes the accordion */ ariaDescribedBy?: string; constructor(); headingRender(): TemplateResult; contentRender(): TemplateResult; connectedCallback(): void; validateProperties(): void; protected firstUpdated(_changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void; private onChange; private toggle; private handleKeyDown; private handleClick; private renderButtons; private renderContent; private renderHeading; renderAccordion(): TemplateResult; } declare type AccordionVariant = 'default' | 'collapsed' | 'clean' | 'clean-collapsed'; declare type ActionType = { href?: string; target?: LinkTarget; rel?: string; text?: string; variant?: ButtonVariant; func?: () => void; }; declare type AlertType = 'default' | 'information' | 'successful' | 'error'; declare type Alignment = 'vertical' | 'horizontal'; /** * `dap-ds-icon-arrow-down-line` * @summary An icon * @element dap-ds-icon-arrow-down-line * @title - ArrowsArrowDownLine * @group icon * @icontype arrows * * @attribute {number} size - (optional) The width and height in pixels * @attribute {boolean} selected - (optional) Sets the icon color via the `fill` attribute * @attribute {string} accessibilityTitle - (optional) When using the icon standalone, make it meaningful for accessibility * @attribute {boolean} focusable - (optional) If `true` the icon can receive focus * * @csspart base - The main icon container. */ declare class ArrowsArrowDownLine extends DdsElement { /** (optional) The width and height in pixels */ size?: number | undefined; /** (optional) Sets the icon color via the `fill` attribute */ selected?: boolean; /** (optional) When using the icon standalone, make it meaningful for accessibility */ accessibilityTitle?: string; /** (optional) If `true` the icon can receive focus */ focusable?: boolean; static readonly styles: CSSResult; protected firstUpdated(_changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void; render(): TemplateResult_2; } /** * `dap-ds-icon-arrow-down-line` * @summary An icon * @element dap-ds-icon-arrow-down-line * @title - ArrowsArrowDownLine * @group icon * @icontype arrows * * @attribute {number} size - (optional) The width and height in pixels * @attribute {boolean} selected - (optional) Sets the icon color via the `fill` attribute * @attribute {string} accessibilityTitle - (optional) When using the icon standalone, make it meaningful for accessibility * @attribute {boolean} focusable - (optional) If `true` the icon can receive focus * * @csspart base - The main icon container. */ export declare const ArrowsArrowDownLineReact: ReactWebComponent<ArrowsArrowDownLine, {}>; /** * `dap-ds-icon-arrow-down-s-fill` * @summary An icon * @element dap-ds-icon-arrow-down-s-fill * @title - ArrowsArrowDownSFill * @group icon * @icontype arrows * * @attribute {number} size - (optional) The width and height in pixels * @attribute {boolean} selected - (optional) Sets the icon color via the `fill` attribute * @attribute {string} accessibilityTitle - (optional) When using the icon standalone, make it meaningful for accessibility * @attribute {boolean} focusable - (optional) If `true` the icon can receive focus * * @csspart base - The main icon container. */ declare class ArrowsArrowDownSFill extends DdsElement { /** (optional) The width and height in pixels */ size?: number | undefined; /** (optional) Sets the icon color via the `fill` attribute */ selected?: boolean; /** (optional) When using the icon standalone, make it meaningful for accessibility */ accessibilityTitle?: string; /** (optional) If `true` the icon can receive focus */ focusable?: boolean; static readonly styles: CSSResult; protected firstUpdated(_changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void; render(): TemplateResult_2; } /** * `dap-ds-icon-arrow-down-s-fill` * @summary An icon * @element dap-ds-icon-arrow-down-s-fill * @title - ArrowsArrowDownSFill * @group icon * @icontype arrows * * @attribute {number} size - (optional) The width and height in pixels * @attribute {boolean} selected - (optional) Sets the icon color via the `fill` attribute * @attribute {string} accessibilityTitle - (optional) When using the icon standalone, make it meaningful for accessibility * @attribute {boolean} focusable - (optional) If `true` the icon can receive focus * * @csspart base - The main icon container. */ export declare const ArrowsArrowDownSFillReact: ReactWebComponent<ArrowsArrowDownSFill, {}>; /** * `dap-ds-icon-arrow-down-s-line` * @summary An icon * @element dap-ds-icon-arrow-down-s-line * @title - ArrowsArrowDownSLine * @group icon * @icontype arrows * * @attribute {number} size - (optional) The width and height in pixels * @attribute {boolean} selected - (optional) Sets the icon color via the `fill` attribute * @attribute {string} accessibilityTitle - (optional) When using the icon standalone, make it meaningful for accessibility * @attribute {boolean} focusable - (optional) If `true` the icon can receive focus * * @csspart base - The main icon container. */ declare class ArrowsArrowDownSLine extends DdsElement { /** (optional) The width and height in pixels */ size?: number | undefined; /** (optional) Sets the icon color via the `fill` attribute */ selected?: boolean; /** (optional) When using the icon standalone, make it meaningful for accessibility */ accessibilityTitle?: string; /** (optional) If `true` the icon can receive focus */ focusable?: boolean; static readonly styles: CSSResult; protected firstUpdated(_changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void; render(): TemplateResult_2; } /** * `dap-ds-icon-arrow-down-s-line` * @summary An icon * @element dap-ds-icon-arrow-down-s-line * @title - ArrowsArrowDownSLine * @group icon * @icontype arrows * * @attribute {number} size - (optional) The width and height in pixels * @attribute {boolean} selected - (optional) Sets the icon color via the `fill` attribute * @attribute {string} accessibilityTitle - (optional) When using the icon standalone, make it meaningful for accessibility * @attribute {boolean} focusable - (optional) If `true` the icon can receive focus * * @csspart base - The main icon container. */ export declare const ArrowsArrowDownSLineReact: ReactWebComponent<ArrowsArrowDownSLine, {}>; /** * `dap-ds-icon-arrow-left-down-line` * @summary An icon * @element dap-ds-icon-arrow-left-down-line * @title - ArrowsArrowLeftDownLine * @group icon * @icontype arrows * * @attribute {number} size - (optional) The width and height in pixels * @attribute {boolean} selected - (optional) Sets the icon color via the `fill` attribute * @attribute {string} accessibilityTitle - (optional) When using the icon standalone, make it meaningful for accessibility * @attribute {boolean} focusable - (optional) If `true` the icon can receive focus * * @csspart base - The main icon container. */ declare class ArrowsArrowLeftDownLine extends DdsElement { /** (optional) The width and height in pixels */ size?: number | undefined; /** (optional) Sets the icon color via the `fill` attribute */ selected?: boolean; /** (optional) When using the icon standalone, make it meaningful for accessibility */ accessibilityTitle?: string; /** (optional) If `true` the icon can receive focus */ focusable?: boolean; static readonly styles: CSSResult; protected firstUpdated(_changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void; render(): TemplateResult_2; } /** * `dap-ds-icon-arrow-left-down-line` * @summary An icon * @element dap-ds-icon-arrow-left-down-line * @title - ArrowsArrowLeftDownLine * @group icon * @icontype arrows * * @attribute {number} size - (optional) The width and height in pixels * @attribute {boolean} selected - (optional) Sets the icon color via the `fill` attribute * @attribute {string} accessibilityTitle - (optional) When using the icon standalone, make it meaningful for accessibility * @attribute {boolean} focusable - (optional) If `true` the icon can receive focus * * @csspart base - The main icon container. */ export declare const ArrowsArrowLeftDownLineReact: ReactWebComponent<ArrowsArrowLeftDownLine, {}>; /** * `dap-ds-icon-arrow-left-line` * @summary An icon * @element dap-ds-icon-arrow-left-line * @title - ArrowsArrowLeftLine * @group icon * @icontype arrows * * @attribute {number} size - (optional) The width and height in pixels * @attribute {boolean} selected - (optional) Sets the icon color via the `fill` attribute * @attribute {string} accessibilityTitle - (optional) When using the icon standalone, make it meaningful for accessibility * @attribute {boolean} focusable - (optional) If `true` the icon can receive focus * * @csspart base - The main icon container. */ declare class ArrowsArrowLeftLine extends DdsElement { /** (optional) The width and height in pixels */ size?: number | undefined; /** (optional) Sets the icon color via the `fill` attribute */ selected?: boolean; /** (optional) When using the icon standalone, make it meaningful for accessibility */ accessibilityTitle?: string; /** (optional) If `true` the icon can receive focus */ focusable?: boolean; static readonly styles: CSSResult; protected firstUpdated(_changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void; render(): TemplateResult_2; } /** * `dap-ds-icon-arrow-left-line` * @summary An icon * @element dap-ds-icon-arrow-left-line * @title - ArrowsArrowLeftLine * @group icon * @icontype arrows * * @attribute {number} size - (optional) The width and height in pixels * @attribute {boolean} selected - (optional) Sets the icon color via the `fill` attribute * @attribute {string} accessibilityTitle - (optional) When using the icon standalone, make it meaningful for accessibility * @attribute {boolean} focusable - (optional) If `true` the icon can receive focus * * @csspart base - The main icon container. */ export declare const ArrowsArrowLeftLineReact: ReactWebComponent<ArrowsArrowLeftLine, {}>; /** * `dap-ds-icon-arrow-left-l-line` * @summary An icon * @element dap-ds-icon-arrow-left-l-line * @title - ArrowsArrowLeftLLine * @group icon * @icontype arrows * * @attribute {number} size - (optional) The width and height in pixels * @attribute {boolean} selected - (optional) Sets the icon color via the `fill` attribute * @attribute {string} accessibilityTitle - (optional) When using the icon standalone, make it meaningful for accessibility * @attribute {boolean} focusable - (optional) If `true` the icon can receive focus * * @csspart base - The main icon container. */ declare class ArrowsArrowLeftLLine extends DdsElement { /** (optional) The width and height in pixels */ size?: number | undefined; /** (optional) Sets the icon color via the `fill` attribute */ selected?: boolean; /** (optional) When using the icon standalone, make it meaningful for accessibility */ accessibilityTitle?: string; /** (optional) If `true` the icon can receive focus */ focusable?: boolean; static readonly styles: CSSResult; protected firstUpdated(_changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void; render(): TemplateResult_2; } /** * `dap-ds-icon-arrow-left-l-line` * @summary An icon * @element dap-ds-icon-arrow-left-l-line * @title - ArrowsArrowLeftLLine * @group icon * @icontype arrows * * @attribute {number} size - (optional) The width and height in pixels * @attribute {boolean} selected - (optional) Sets the icon color via the `fill` attribute * @attribute {string} accessibilityTitle - (optional) When using the icon standalone, make it meaningful for accessibility * @attribute {boolean} focusable - (optional) If `true` the icon can receive focus * * @csspart base - The main icon container. */ export declare const ArrowsArrowLeftLLineReact: ReactWebComponent<ArrowsArrowLeftLLine, {}>; /** * `dap-ds-icon-arrow-left-s-fill` * @summary An icon * @element dap-ds-icon-arrow-left-s-fill * @title - ArrowsArrowLeftSFill * @group icon * @icontype arrows * * @attribute {number} size - (optional) The width and height in pixels * @attribute {boolean} selected - (optional) Sets the icon color via the `fill` attribute * @attribute {string} accessibilityTitle - (optional) When using the icon standalone, make it meaningful for accessibility * @attribute {boolean} focusable - (optional) If `true` the icon can receive focus * * @csspart base - The main icon container. */ declare class ArrowsArrowLeftSFill extends DdsElement { /** (optional) The width and height in pixels */ size?: number | undefined; /** (optional) Sets the icon color via the `fill` attribute */ selected?: boolean; /** (optional) When using the icon standalone, make it meaningful for accessibility */ accessibilityTitle?: string; /** (optional) If `true` the icon can receive focus */ focusable?: boolean; static readonly styles: CSSResult; protected firstUpdated(_changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void; render(): TemplateResult_2; } /** * `dap-ds-icon-arrow-left-s-fill` * @summary An icon * @element dap-ds-icon-arrow-left-s-fill * @title - ArrowsArrowLeftSFill * @group icon * @icontype arrows * * @attribute {number} size - (optional) The width and height in pixels * @attribute {boolean} selected - (optional) Sets the icon color via the `fill` attribute * @attribute {string} accessibilityTitle - (optional) When using the icon standalone, make it meaningful for accessibility * @attribute {boolean} focusable - (optional) If `true` the icon can receive focus * * @csspart base - The main icon container. */ export declare const ArrowsArrowLeftSFillReact: ReactWebComponent<ArrowsArrowLeftSFill, {}>; /** * `dap-ds-icon-arrow-left-s-line` * @summary An icon * @element dap-ds-icon-arrow-left-s-line * @title - ArrowsArrowLeftSLine * @group icon * @icontype arrows * * @attribute {number} size - (optional) The width and height in pixels * @attribute {boolean} selected - (optional) Sets the icon color via the `fill` attribute * @attribute {string} accessibilityTitle - (optional) When using the icon standalone, make it meaningful for accessibility * @attribute {boolean} focusable - (optional) If `true` the icon can receive focus * * @csspart base - The main icon container. */ declare class ArrowsArrowLeftSLine extends DdsElement { /** (optional) The width and height in pixels */ size?: number | undefined; /** (optional) Sets the icon color via the `fill` attribute */ selected?: boolean; /** (optional) When using the icon standalone, make it meaningful for accessibility */ accessibilityTitle?: string; /** (optional) If `true` the icon can receive focus */ focusable?: boolean; static readonly styles: CSSResult; protected firstUpdated(_changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void; render(): TemplateResult_2; } /** * `dap-ds-icon-arrow-left-s-line` * @summary An icon * @element dap-ds-icon-arrow-left-s-line * @title - ArrowsArrowLeftSLine * @group icon * @icontype arrows * * @attribute {number} size - (optional) The width and height in pixels * @attribute {boolean} selected - (optional) Sets the icon color via the `fill` attribute * @attribute {string} accessibilityTitle - (optional) When using the icon standalone, make it meaningful for accessibility * @attribute {boolean} focusable - (optional) If `true` the icon can receive focus * * @csspart base - The main icon container. */ export declare const ArrowsArrowLeftSLineReact: ReactWebComponent<ArrowsArrowLeftSLine, {}>; /** * `dap-ds-icon-arrow-left-up-line` * @summary An icon * @element dap-ds-icon-arrow-left-up-line * @title - ArrowsArrowLeftUpLine * @group icon * @icontype arrows * * @attribute {number} size - (optional) The width and height in pixels * @attribute {boolean} selected - (optional) Sets the icon color via the `fill` attribute * @attribute {string} accessibilityTitle - (optional) When using the icon standalone, make it meaningful for accessibility * @attribute {boolean} focusable - (optional) If `true` the icon can receive focus * * @csspart base - The main icon container. */ declare class ArrowsArrowLeftUpLine extends DdsElement { /** (optional) The width and height in pixels */ size?: number | undefined; /** (optional) Sets the icon color via the `fill` attribute */ selected?: boolean; /** (optional) When using the icon standalone, make it meaningful for accessibility */ accessibilityTitle?: string; /** (optional) If `true` the icon can receive focus */ focusable?: boolean; static readonly styles: CSSResult; protected firstUpdated(_changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void; render(): TemplateResult_2; } /** * `dap-ds-icon-arrow-left-up-line` * @summary An icon * @element dap-ds-icon-arrow-left-up-line * @title - ArrowsArrowLeftUpLine * @group icon * @icontype arrows * * @attribute {number} size - (optional) The width and height in pixels * @attribute {boolean} selected - (optional) Sets the icon color via the `fill` attribute * @attribute {string} accessibilityTitle - (optional) When using the icon standalone, make it meaningful for accessibility * @attribute {boolean} focusable - (optional) If `true` the icon can receive focus * * @csspart base - The main icon container. */ export declare const ArrowsArrowLeftUpLineReact: ReactWebComponent<ArrowsArrowLeftUpLine, {}>; /** * `dap-ds-icon-arrow-right-down-line` * @summary An icon * @element dap-ds-icon-arrow-right-down-line * @title - ArrowsArrowRightDownLine * @group icon * @icontype arrows * * @attribute {number} size - (optional) The width and height in pixels * @attribute {boolean} selected - (optional) Sets the icon color via the `fill` attribute * @attribute {string} accessibilityTitle - (optional) When using the icon standalone, make it meaningful for accessibility * @attribute {boolean} focusable - (optional) If `true` the icon can receive focus * * @csspart base - The main icon container. */ declare class ArrowsArrowRightDownLine extends DdsElement { /** (optional) The width and height in pixels */ size?: number | undefined; /** (optional) Sets the icon color via the `fill` attribute */ selected?: boolean; /** (optional) When using the icon standalone, make it meaningful for accessibility */ accessibilityTitle?: string; /** (optional) If `true` the icon can receive focus */ focusable?: boolean; static readonly styles: CSSResult; protected firstUpdated(_changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void; render(): TemplateResult_2; } /** * `dap-ds-icon-arrow-right-down-line` * @summary An icon * @element dap-ds-icon-arrow-right-down-line * @title - ArrowsArrowRightDownLine * @group icon * @icontype arrows * * @attribute {number} size - (optional) The width and height in pixels * @attribute {boolean} selected - (optional) Sets the icon color via the `fill` attribute * @attribute {string} accessibilityTitle - (optional) When using the icon standalone, make it meaningful for accessibility * @attribute {boolean} focusable - (optional) If `true` the icon can receive focus * * @csspart base - The main icon container. */ export declare const ArrowsArrowRightDownLineReact: ReactWebComponent<ArrowsArrowRightDownLine, {}>; /** * `dap-ds-icon-arrow-right-line` * @summary An icon * @element dap-ds-icon-arrow-right-line * @title - ArrowsArrowRightLine * @group icon * @icontype arrows * * @attribute {number} size - (optional) The width and height in pixels * @attribute {boolean} selected - (optional) Sets the icon color via the `fill` attribute * @attribute {string} accessibilityTitle - (optional) When using the icon standalone, make it meaningful for accessibility * @attribute {boolean} focusable - (optional) If `true` the icon can receive focus * * @csspart base - The main icon container. */ declare class ArrowsArrowRightLine extends DdsElement { /** (optional) The width and height in pixels */ size?: number | undefined; /** (optional) Sets the icon color via the `fill` attribute */ selected?: boolean; /** (optional) When using the icon standalone, make it meaningful for accessibility */ accessibilityTitle?: string; /** (optional) If `true` the icon can receive focus */ focusable?: boolean; static readonly styles: CSSResult; protected firstUpdated(_changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void; render(): TemplateResult_2; } /** * `dap-ds-icon-arrow-right-line` * @summary An icon * @element dap-ds-icon-arrow-right-line * @title - ArrowsArrowRightLine * @group icon * @icontype arrows * * @attribute {number} size - (optional) The width and height in pixels * @attribute {boolean} selected - (optional) Sets the icon color via the `fill` attribute * @attribute {string} accessibilityTitle - (optional) When using the icon standalone, make it meaningful for accessibility * @attribute {boolean} focusable - (optional) If `true` the icon can receive focus * * @csspart base - The main icon container. */ export declare const ArrowsArrowRightLineReact: ReactWebComponent<ArrowsArrowRightLine, {}>; /** * `dap-ds-icon-arrow-right-l-line` * @summary An icon * @element dap-ds-icon-arrow-right-l-line * @title - ArrowsArrowRightLLine * @group icon * @icontype arrows * * @attribute {number} size - (optional) The width and height in pixels * @attribute {boolean} selected - (optional) Sets the icon color via the `fill` attribute * @attribute {string} accessibilityTitle - (optional) When using the icon standalone, make it meaningful for accessibility * @attribute {boolean} focusable - (optional) If `true` the icon can receive focus * * @csspart base - The main icon container. */ declare class ArrowsArrowRightLLine extends DdsElement { /** (optional) The width and height in pixels */ size?: number | undefined; /** (optional) Sets the icon color via the `fill` attribute */ selected?: boolean; /** (optional) When using the icon standalone, make it meaningful for accessibility */ accessibilityTitle?: string; /** (optional) If `true` the icon can receive focus */ focusable?: boolean; static readonly styles: CSSResult; protected firstUpdated(_changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void; render(): TemplateResult_2; } /** * `dap-ds-icon-arrow-right-l-line` * @summary An icon * @element dap-ds-icon-arrow-right-l-line * @title - ArrowsArrowRightLLine * @group icon * @icontype arrows * * @attribute {number} size - (optional) The width and height in pixels * @attribute {boolean} selected - (optional) Sets the icon color via the `fill` attribute * @attribute {string} accessibilityTitle - (optional) When using the icon standalone, make it meaningful for accessibility * @attribute {boolean} focusable - (optional) If `true` the icon can receive focus * * @csspart base - The main icon container. */ export declare const ArrowsArrowRightLLineReact: ReactWebComponent<ArrowsArrowRightLLine, {}>; /** * `dap-ds-icon-arrow-right-s-fill` * @summary An icon * @element dap-ds-icon-arrow-right-s-fill * @title - ArrowsArrowRightSFill * @group icon * @icontype arrows * * @attribute {number} size - (optional) The width and height in pixels * @attribute {boolean} selected - (optional) Sets the icon color via the `fill` attribute * @attribute {string} accessibilityTitle - (optional) When using the icon standalone, make it meaningful for accessibility * @attribute {boolean} focusable - (optional) If `true` the icon can receive focus * * @csspart base - The main icon container. */ declare class ArrowsArrowRightSFill extends DdsElement { /** (optional) The width and height in pixels */ size?: number | undefined; /** (optional) Sets the icon color via the `fill` attribute */ selected?: boolean; /** (optional) When using the icon standalone, make it meaningful for accessibility */ accessibilityTitle?: string; /** (optional) If `true` the icon can receive focus */ focusable?: boolean; static readonly styles: CSSResult; protected firstUpdated(_changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void; render(): TemplateResult_2; } /** * `dap-ds-icon-arrow-right-s-fill` * @summary An icon * @element dap-ds-icon-arrow-right-s-fill * @title - ArrowsArrowRightSFill * @group icon * @icontype arrows * * @attribute {number} size - (optional) The width and height in pixels * @attribute {boolean} selected - (optional) Sets the icon color via the `fill` attribute * @attribute {string} accessibilityTitle - (optional) When using the icon standalone, make it meaningful for accessibility * @attribute {boolean} focusable - (optional) If `true` the icon can receive focus * * @csspart base - The main icon container. */ export declare const ArrowsArrowRightSFillReact: ReactWebComponent<ArrowsArrowRightSFill, {}>; /** * `dap-ds-icon-arrow-right-s-line` * @summary An icon * @element dap-ds-icon-arrow-right-s-line * @title - ArrowsArrowRightSLine * @group icon * @icontype arrows * * @attribute {number} size - (optional) The width and height in pixels * @attribute {boolean} selected - (optional) Sets the icon color via the `fill` attribute * @attribute {string} accessibilityTitle - (optional) When using the icon standalone, make it meaningful for accessibility * @attribute {boolean} focusable - (optional) If `true` the icon can receive focus * * @csspart base - The main icon container. */ declare class ArrowsArrowRightSLine extends DdsElement { /** (optional) The width and height in pixels */ size?: number | undefined; /** (optional) Sets the icon color via the `fill` attribute */ selected?: boolean; /** (optional) When using the icon standalone, make it meaningful for accessibility */ accessibilityTitle?: string; /** (optional) If `true` the icon can receive focus */ focusable?: boolean; static readonly styles: CSSResult; protected firstUpdated(_changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void; render(): TemplateResult_2; } /** * `dap-ds-icon-arrow-right-s-line` * @summary An icon * @element dap-ds-icon-arrow-right-s-line * @title - ArrowsArrowRightSLine * @group icon * @icontype arrows * * @attribute {number} size - (optional) The width and height in pixels * @attribute {boolean} selected - (optional) Sets the icon color via the `fill` attribute * @attribute {string} accessibilityTitle - (optional) When using the icon standalone, make it meaningful for accessibility * @attribute {boolean} focusable - (optional) If `true` the icon can receive focus * * @csspart base - The main icon container. */ export declare const ArrowsArrowRightSLineReact: ReactWebComponent<ArrowsArrowRightSLine, {}>; /** * `dap-ds-icon-arrow-right-up-line` * @summary An icon * @element dap-ds-icon-arrow-right-up-line * @title - ArrowsArrowRightUpLine * @group icon * @icontype arrows * * @attribute {number} size - (optional) The width and height in pixels * @attribute {boolean} selected - (optional) Sets the icon color via the `fill` attribute * @attribute {string} accessibilityTitle - (optional) When using the icon standalone, make it meaningful for accessibility * @attribute {boolean} focusable - (optional) If `true` the icon can receive focus * * @csspart base - The main icon container. */ declare class ArrowsArrowRightUpLine extends DdsElement { /** (optional) The width and height in pixels */ size?: number | undefined; /** (optional) Sets the icon color via the `fill` attribute */ selected?: boolean; /** (optional) When using the icon standalone, make it meaningful for accessibility */ accessibilityTitle?: string; /** (optional) If `true` the icon can receive focus */ focusable?: boolean; static readonly styles: CSSResult; protected firstUpdated(_changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void; render(): TemplateResult_2; } /** * `dap-ds-icon-arrow-right-up-line` * @summary An icon * @element dap-ds-icon-arrow-right-up-line * @title - ArrowsArrowRightUpLine * @group icon * @icontype arrows * * @attribute {number} size - (optional) The width and height in pixels * @attribute {boolean} selected - (optional) Sets the icon color via the `fill` attribute * @attribute {string} accessibilityTitle - (optional) When using the icon standalone, make it meaningful for accessibility * @attribute {boolean} focusable - (optional) If `true` the icon can receive focus * * @csspart base - The main icon container. */ export declare const ArrowsArrowRightUpLineReact: ReactWebComponent<ArrowsArrowRightUpLine, {}>; /** * `dap-ds-icon-arrow-up-line` * @summary An icon * @element dap-ds-icon-arrow-up-line * @title - ArrowsArrowUpLine * @group icon * @icontype arrows * * @attribute {number} size - (optional) The width and height in pixels * @attribute {boolean} selected - (optional) Sets the icon color via the `fill` attribute * @attribute {string} accessibilityTitle - (optional) When using the icon standalone, make it meaningful for accessibility * @attribute {boolean} focusable - (optional) If `true` the icon can receive focus * * @csspart base - The main icon container. */ declare class ArrowsArrowUpLine extends DdsElement { /** (optional) The width and height in pixels */ size?: number | undefined; /** (optional) Sets the icon color via the `fill` attribute */ selected?: boolean; /** (optional) When using the icon standalone, make it meaningful for accessibility */ accessibilityTitle?: string; /** (optional) If `true` the icon can receive focus */ focusable?: boolean; static readonly styles: CSSResult; protected firstUpdated(_changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void; render(): TemplateResult_2; } /** * `dap-ds-icon-arrow-up-line` * @summary An icon * @element dap-ds-icon-arrow-up-line * @title - ArrowsArrowUpLine * @group icon * @icontype arrows * * @attribute {number} size - (optional) The width and height in pixels * @attribute {boolean} selected - (optional) Sets the icon color via the `fill` attribute * @attribute {string} accessibilityTitle - (optional) When using the icon standalone, make it meaningful for accessibility * @attribute {boolean} focusable - (optional) If `true` the icon can receive focus * * @csspart base - The main icon container. */ export declare const ArrowsArrowUpLineReact: ReactWebComponent<ArrowsArrowUpLine, {}>; /** * `dap-ds-icon-arrow-up-s-fill` * @summary An icon * @element dap-ds-icon-arrow-up-s-fill * @title - ArrowsArrowUpSFill * @group icon * @icontype arrows * * @attribute {number} size - (optional) The width and height in pixels * @attribute {boolean} selected - (optional) Sets the icon color via the `fill` attribute * @attribute {string} accessibilityTitle - (optional) When using the icon standalone, make it meaningful for accessibility * @attribute {boolean} focusable - (optional) If `true` the icon can receive focus * * @csspart base - The main icon container. */ declare class ArrowsArrowUpSFill extends DdsElement { /** (optional) The width and height in pixels */ size?: number | undefined; /** (optional) Sets the icon color via the `fill` attribute */ selected?: boolean; /** (optional) When using the icon standalone, make it meaningful for accessibility */ accessibilityTitle?: string; /** (optional) If `true` the icon can receive focus */ focusable?: boolean; static readonly styles: CSSResult; protected firstUpdated(_changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void; render(): TemplateResult_2; } /** * `dap-ds-icon-arrow-up-s-fill` * @summary An icon * @element dap-ds-icon-arrow-up-s-fill * @title - ArrowsArrowUpSFill * @group icon * @icontype arrows * * @attribute {number} size - (optional) The width and height in pixels * @attribute {boolean} selected - (optional) Sets the icon color via the `fill` attribute * @attribute {string} accessibilityTitle - (optional) When using the icon standalone, make it meaningful for accessibility * @attribute {boolean} focusable - (optional) If `true` the icon can receive focus * * @csspart base - The main icon container. */ export declare const ArrowsArrowUpSFillReact: ReactWebComponent<ArrowsArrowUpSFill, {}>; /** * `dap-ds-icon-arrow-up-s-line` * @summary An icon * @element dap-ds-icon-arrow-up-s-line * @title - ArrowsArrowUpSLine * @group icon * @icontype arrows * * @attribute {number} size - (optional) The width and height in pixels * @attribute {boolean} selected - (optional) Sets the icon color via the `fill` attribute * @attribute {string} accessibilityTitle - (optional) When using the icon standalone, make it meaningful for accessibility * @attribute {boolean} focusable - (optional) If `true` the icon can receive focus * * @csspart base - The main icon container. */ declare class ArrowsArrowUpSLine extends DdsElement { /** (optional) The width and height in pixels */ size?: number | undefined; /** (optional) Sets the icon color via the `fill` attribute */ selected?: boolean; /** (optional) When using the icon standalone, make it meaningful for accessibility */ accessibilityTitle?: string; /** (optional) If `true` the icon can receive focus */ focusable?: boolean; static readonly styles: CSSResult; protected firstUpdated(_changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void; render(): TemplateResult_2; } /** * `dap-ds-icon-arrow-up-s-line` * @summary An icon * @element dap-ds-icon-arrow-up-s-line * @title - ArrowsArrowUpSLine * @group icon * @icontype arrows * * @attribute {number} size - (optional) The width and height in pixels * @attribute {boolean} selected - (optional) Sets the icon color via the `fill` attribute * @attribute {string} accessibilityTitle - (optional) When using the icon standalone, make it meaningful for accessibility * @attribute {boolean} focusable - (optional) If `true` the icon can receive focus * * @csspart base - The main icon container. */ export declare const ArrowsArrowUpSLineReact: ReactWebComponent<ArrowsArrowUpSLine, {}>; /** * `dap-ds-icon-expand-up-down-fill` * @summary An icon * @element dap-ds-icon-expand-up-down-fill * @title - ArrowsExpandUpDownFill * @group icon * @icontype arrows * * @attribute {number} size - (optional) The width and height in pixels * @attribute {boolean} selected - (optional) Sets the icon color via the `fill` attribute * @attribute {string} accessibilityTitle - (optional) When using the icon standalone, make it meaningful for accessibility * @attribute {boolean} focusable - (optional) If `true` the icon can receive focus * * @csspart base - The main icon container. */ declare class ArrowsExpandUpDownFill extends DdsElement { /** (optional) The width and height in pixels */ size?: number | undefined; /** (optional) Sets the icon color via the `fill` attribute */ selected?: boolean; /** (optional) When using the icon standalone, make it meaningful for accessibility */ accessibilityTitle?: string; /** (optional) If `true` the icon can receive focus */ focusable?: boolean; static readonly styles: CSSResult; protected firstUpdated(_changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void; render(): TemplateResult_2; } /** * `dap-ds-icon-expand-up-down-fill` * @summary An icon * @element dap-ds-icon-expand-up-down-fill * @title - ArrowsExpandUpDownFill * @group icon * @icontype arrows * * @attribute {number} size - (optional) The width and height in pixels * @attribute {boolean} selected - (optional) Sets the icon color via the `fill` attribute * @attribute {string} accessibilityTitle - (optional) When using the icon standalone, make it meaningful for accessibility * @attribute {boolean} focusable - (optional) If `true` the icon can receive focus * * @csspart base - The main icon container. */ export declare const ArrowsExpandUpDownFillReact: ReactWebComponent<ArrowsExpandUpDownFill, {}>; declare type AvatarGroupLayout = 'stack' | 'grid'; declare type AvatarShape = 'circle' | 'rounded' | 'square'; declare type AvatarVariant = 'image' | 'initials' | 'icon'; declare type BackgroundShade = 'subtle' | 'base' | 'medium' | 'strong'; declare type BadgeSize = 'sm' | 'lg'; 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'; declare type BodyProps = { variant: Extract<TypographyVariant, 'body'>; size: TypographySize; }; /** * `dap-ds-icon-home-6-line` * @summary An icon * @element dap-ds-icon-home-6-line * @title - BuildingsHome6Line * @group icon * @icontype buildings * * @attribute {number} size - (optional) The width and height in pixels * @attribute {boolean} selected - (optional) Sets the icon color via the `fill` attribute * @attribute {string} accessibilityTitle - (optional) When using the icon standalone, make it meaningful for accessibility * @attribute {boolean} focusable - (optional) If `true` the icon can receive focus * * @csspart base - The main icon container. */ declare class BuildingsHome6Line extends DdsElement { /** (optional) The width and height in pixels */ size?: number | undefined; /** (optional) Sets the icon color via the `fill` attribute */ selected?: boolean; /** (optional) When using the icon standalone, make it meaningful for accessibility */ accessibilityTitle?: string; /** (optional) If `true` the icon can receive focus */ focusable?: boolean; static readonly styles: CSSResult; protected firstUpdated(_changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void; render(): TemplateResult_2; } /** * `dap-ds-icon-home-6-line` * @summary An icon * @element dap-ds-icon-home-6-line * @title - BuildingsHome6Line * @group icon * @icontype buildings * * @attribute {number} size - (optional) The width and height in pixels * @attribute {boolean} selected - (optional) Sets the icon color via the `fill` attribute * @attribute {string} accessibilityTitle - (optional) When using the icon standalone, make it meaningful for accessibility * @attribute {boolean} focusable - (optional) If `true` the icon can receive focus * * @csspart base - The main icon container. */ export declare const BuildingsHome6LineReact: ReactWebComponent<BuildingsHome6Line, {}>; /** * `dap-ds-icon-calendar-line` * @summary An icon * @element dap-ds-icon-calendar-line * @title - BusinessCalendarLine * @group icon * @icontype business * * @attribute {number} size - (optional) The width and height in pixels * @attribute {boolean} selected - (optional) Sets the icon color via the `fill` attribute * @attribute {string} accessibilityTitle - (optional) When using the icon standalone, make it meaningful for accessibility * @attribute {boolean} focusable - (optional) If `true` the icon can receive focus * * @csspart base - The main icon container. */ declare class BusinessCalendarLine extends DdsElement { /** (optional) The width and height in pixels */ size?: number | undefined; /** (optional) Sets the icon color via the `fill` attribute */ selected?: boolean; /** (optional) When using the icon standalone, make it meaningful for accessibility */ accessibilityTitle?: string; /** (optional) If `true` the icon can receive focus */ focusable?: boolean; static readonly styles: CSSResult; protected firstUpdated(_changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void; render(): TemplateResult_2; } /** * `dap-ds-icon-calendar-line` * @summary An icon * @element dap-ds-icon-calendar-line * @title - BusinessCalendarLine * @group icon * @icontype business * * @attribute {number} size - (optional) The width and height in pixels * @attribute {boolean} selected - (optional) Sets the icon color via the `fill` attribute * @attribute {string} accessibilityTitle - (optional) When using the icon standalone, make it meaningful for accessibility * @attribute {boolean} focusable - (optional) If `true` the icon can receive focus * * @csspart base - The main icon container. */ export declare const BusinessCalendarLineReact: ReactWebComponent<BusinessCalendarLine, {}>; declare type ButtonShape = 'button' | 'circle'; declare type ButtonSize = Extract<Size, 'lg' | 'md' | 'sm' | 'xs'>; declare type ButtonSize_2 = Extract<Size, 'lg' | 'md' | 'sm' | 'xs'>; declare type ButtonVariant = 'primary' | 'outline' | 'subtle' | 'clean' | 'primary-inverted' | 'outline-inverted' | 'subtle-inverted' | 'clean-inverted' | 'subtle-neutral' | 'subtle-quiet' | 'subtle-quiet-inverted' | 'subtle-menu' | 'subtle-menu-item'; declare type ButtonVariant_2 = 'neutral' | 'brand' | 'inverted' | 'inverted-brand'; declare type CalloutVariant = 'brand' | 'info' | 'positive' | 'warning' | 'negative'; declare type CaptionProps = { variant: Extract<TypographyVariant, 'caption'>; size: never; }; declare interface ChoiceElementMixinInterface { checked: boolean; } declare class ComboboxBaseElement extends GenericFormElement { readonly triggerInput: HTMLInputElement; readonly optionList: DapDSOptionList; placement: PopupPlacement; opened: boolean; searchMode: 'none' | 'typehead' | 'autocomplete' | 'manual'; search: boolean; clearButton?: string; placeholder: string | null; sync?: boolean; allowManualInput?: boolean; searchForText?: boolean; searchOnValueSet?: string | undefined; loading?: boolean; selectable?: string; noAnimation?: boolean; textComplete?: boolean; openOnEmpty?: boolean; searchButtonAriaLabel?: string; subtle: boolean; selectedItem: any; currentItem: any; selectedText: string; static readonly styles: CSSResult; protected firstUpdated(_changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): Promise<void>; attributeChangedCallback(name: string, _old: string | null, value: string | null): void; get isAutoComplete(): boolean; get isOpenOnEmpty(): boolean; get isOpenOnAutocomplete(): boolean; get shouldHideClearIcon(): boolean; handleClick: () => void; private handleEnterKey; private handleCurrentItemEnter; private handleSearchEnter; private handleDefaultEnter; private handleSelectedItemChange; private handleTextSearch; private handleArrowKeys; handleKeyDown: (event: KeyboardEvent) => Promise<void | 0>; handleInput: (event: InputEvent) => Promise<void>; clearSelection(): Promise<void>; handleListKeyDown: (event: CustomEvent) => void; handleDocumentMouseDown: (event: MouseEvent) => void; handleFocus: () => void; handleBlur: () => void; showDropDown(): Promise<void>; hideDropDown(): Promise<void>; get focusElement(): HTMLInputElement; handleSelectedChange: (event: CustomEvent) => Promise<void>; handleCurrentOptionChange: (event: CustomEvent) => void; handleListChanged: (event: CustomEvent) => void; handleClearClick: () => void; handleSearchClick: (event: MouseEvent) => void; private setSelectionRange; private clearSelectionRange; getValidity(): boolean; formResetCallback(): void; private getAutoCompleteValidity; private getManualInputValidity; private getSearchTextValidity; private getSelectedItemValidity; private getBasicValidity; get validity(): ValidityState; get validationMessage(): string; checkValidity(): boolean; reportValidity(): boolean; setValidity(): void; handleInvalid(event: Event): void; getActiveDescendant(): HTMLInputElement | DapDSOptionItem | null | undefined; getSearchIconSize(size: string): "lg" | "md" | "sm"; getInnerIconSize(size: string): 10 | 16; private renderInput; private renderClearButton; private renderIndicatorIcon; private renderSelectActions; private renderOptionList; renderCombobox(): TemplateResult_2; } declare type Common<T> = Pick<T, keyof T>; declare type CommonSize = Extract<Size, 'sm' | 'lg'>; declare type CSSFlexDirection = 'column' | 'row' | 'column-reverse' | 'row-reverse'; /** * `dap-ds-accordion` is a custom accordion component. * @element dap-ds-accordion * @summary An accordion is a vertically stacked list of interactive items that can be expanded or collapsed to reveal or hide content. * @title - Accordion * * @property { 'sm' | 'lg' } size - The size of the accordion. Default is `sm`. * @property { 1 | 2 | 3 | 4 | 5 | 6 } headingLevel - The heading level of the accordion. Default is `4`. * @property {boolean} opened - Whether the accordion is opened. Default is `false`. * @property { 'left' | 'right' } iconLocation - The location of the icon. Default is `right`. * @property { 'default' | 'collapsed' | 'clean' | 'clean-collapsed' } variant - The variant of the accordion. * @property {boolean} lastItem - Whether the accordion is the last item. * @property {boolean} disabled - Whether the accordion is disabled. * @property {boolean} loading - Whether the accordion is in loading state. * * @event {{ open: boolean, item: AccordionBaseElement }} dds-opened - Event fired when the accordion is opened. * @event {{ open: boolean, item: AccordionBaseElement }} dds-closed - Event fired when the accordion is closed. * * @slot default - The content of the accordion. * @slot heading - The heading of the accordion. * @slot icon-opened - The icon when the accordion is opened. * @slot icon-closed - The icon when the accordion is closed. * * @csspart base - The main accordion container. * @csspart heading - The heading of the accordion. * @csspart button - The