dap-design-system
Version:
Official design system for the DÁP (www.dap.gov.hu)
1,145 lines (1,088 loc) • 463 kB
TypeScript
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 { PropertyValues } 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';
export 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 heading text of the accordion, this will be used as the aria label of the heading also if ariaLabel is not provided */
heading?: string;
/** 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';
export declare type ActionType = {
href?: string;
target?: LinkTarget;
rel?: string;
text?: string;
variant?: ButtonVariant;
func?: () => void;
};
export declare type AlertType = 'default' | 'information' | 'successful' | 'error';
export declare type Alignment = 'vertical' | 'horizontal';
export declare const anchorClass = "dds-anchor";
/**
* `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 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-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 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-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 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-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 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-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 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-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 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-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 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-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 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-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 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-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 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-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 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-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 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-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 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-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 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-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 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-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 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-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 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-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 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-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 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;
}
declare type AvatarGroupLayout = 'stack' | 'grid';
declare type AvatarShape = 'circle' | 'rounded' | 'square';
declare type AvatarVariant = 'image' | 'initials' | 'icon';
export declare type BackgroundShade = 'subtle' | 'base' | 'medium' | 'strong';
declare type BadgeSize = 'sm' | 'lg';
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';
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.
*/
export 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-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 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;
}
export declare type ButtonShape = 'button' | 'circle';
export 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 type ChipSize = 'sm' | 'lg';
declare interface ChoiceElementMixinInterface {
checked: boolean;
}
export { ColumnDef }
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;
multiselect: boolean;
maxSelections?: number;
selectedItem: any;
selectedItems: any[];
currentItem: any;
selectedText: string;
private optionListObserver;
private isUserInteraction;
private pendingInitialValues;
static readonly styles: CSSResult;
protected firstUpdated(_changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): Promise<void>;
protected updated(_changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void;
/**
* Handles value changes from outside the component
* This ensures the selection state is updated when the value is set programmatically
*/
private handleValueChange;
private setupOptionListObserver;
private updateComboboxState;
/**
* Updates the selection state based on the current value
* This is useful when options are loaded asynchronously
*/
private updateSelectionFromValue;
private cleanupOptionListObserver;
disconnectedCallback(): void;
attributeChangedCallback(name: string, _old: string | null, value: string | null): void;
get isAutoComplete(): boolean;
/**
* Get all option items directly from the combobox element
* This is more reliable for dynamic updates than the option list component
*/
private getComboboxOptions;
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<false | void | 0>;
handleInput: (event: InputEvent) => Promise<void>;
clearSelection(): Promise<void>;
/**
* Multiselect helper methods
*/
private getSelectedValues;
private isMaxSelectionsReached;
private addSelectedItem;
private removeSelectedItem;
private clearAllSelections;
private updateMultipleSelectionsFromValues;
/**
* Override value getter/setter to handle multiselect mode
*/
get value(): string | undefined;
set value(val: string | undefined);
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>;
handleOptionDeselect: (event: CustomEvent) => void;
handleCurrentOptionChange: (event: CustomEvent) => void;
handleListChanged: (event: CustomEvent) => void;
handleClearClick: () => void;
handleSearchClick: (event: MouseEvent) => void;
private setSelectionRange;
private clearSelectionRange;
getValidity(): boolean;
formResetCallback(): void;
private getMultiSelectValidity;
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 handleChipRemove;
private renderChip;
private renderChips;
private renderInput;
private renderClearButton;
private renderIndicatorIcon;
private renderSelectActions;
private renderOptionList;
renderCombobox(): TemplateResult_2;
}
export declare type Common<T> = Pick<T, keyof T>;
export declare type CommonFormElementSize = Extract<Size, 'sm' | 'md' | 'lg'>;
export declare type CommonSize = Extract<Size, 'sm' | 'lg'>;
export 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 {string} heading - The heading text of the accordion, this will be used as the aria label of the heading also if ariaLabel is not provided
* @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 button of the accordion.
* @csspart content - The content of the accordion.
* @csspart content-container - The container of the accordion content.
* @csspart icon-wrapper - The icon wrapper of the accordion.
* @csspart open-icon - The icon when the accordion is opened.
* @csspart open-icon-base - The base of the icon when the accordion is opened.
* @csspart close-icon - The icon when the accordion is closed.
* @csspart close-icon-base - The base of the icon when the accordion is closed.
*
* @cssproperty --dds-accordion-border-width - The width of the accordion border (default: var(--dds-border-width-base))
* @cssproperty --dds-accordion-border-style - The style of the accordion border (default: solid)
* @cssproperty --dds-accordion-border-radius - The border radius of the accordion (default: var(--dds-radius-base))
* @cssproperty --dds-accordion-border-color - The color of the accordion border (default: var(--dds-border-neutral-divider))
* @cssproperty --dds-accordion-background-color - The background color of the accordion (default: var(--dds-background-neutral-subtle))
* @cssproperty --dds-accordion-text-color - The text color of the accordion (default: var(--dds-text-neutral-strong))
* @cssproperty --dds-accordion-hover-background - The background color when hovering over the accordion (default: var(--dds-background-neutral-base))
* @cssproperty --dds-accordion-active-background - The background color when the accordion is active (default: var(--dds-background-neutral-medium))
* @cssproperty --dds-accordion-icon-background - The background color of the accordion icon (default: var(--dds-transparent-black-subtle))
* @cssproperty --dds-accordion-icon-color - The color of the accordion icon (default: var(--dds-icon-neutral-base))
* @cssproperty --dds-accordion-icon-hover-background - The background color of the accordion icon when hovered (default: var(--dds-transparent-black-base))
* @cssproperty --dds-accordion-icon-active-background - The background color of the accordion icon when active (default: var(--dds-transparent-black-strong))
* @cssproperty --dds-accordion-icon-hover-color - The color of the accordion icon when hovered (default: var(--dds-icon-neutral-strong))
* @cssproperty --dds-accordion-icon-active-color - The color of the accordion icon when active (default: var(--dds-icon-neutral-strong))
* @cssproperty --dds-accordion-content-color - The color of the accordion content (default: var(--dds-text-text-neutral))
* @cssproperty --dds-accordion-transition-duration - The duration of the accordion transitions (default: var(--dds-transition-fast))
* @cssproperty --dds-accordion-transition-timing - The timing function of the accordion transitions (default: var(--dds-easing-ease-in-out))
* @cssproperty --dds-accordion-divider-color - The color of the divider between accordion items (default: var(--dds-border-neutral-divider))
*/
export declare class DapDSAccordion extends AccordionBaseElement {
render(): TemplateResult_2;
}
/**
* `dap-ds-accordion-group` is a custom accordion group component.
* @element dap-ds-accordion-group
* @summary An accordion group is a collection of accordion components.
* @title - Accordion group
* @group accordion
*
* @slot - The content of the accordion group.
*
* @csspart base - The main accordion group container.
*
* @cssproperty --dds-accordion-group-spacing - Controls the gap between accordion items (default: var(--dds-spacing-300))
* @cssproperty --dds-accordion-group-border-color - Controls the border color (default: var(--dds-border-neutral-subtle))
* @cssproperty --dds-accordion-group-border-width - Controls the border width (default: var(--dds-border-width-base))
* @cssproperty --dds-accordion-group-border-radius - Controls the border radius (default: var(--dds-radius-base))
* @cssproperty --dds-accordion-group-background - Controls the background color (default: transparent)
*/
export declare class DapDSAccordionGroup extends DdsElement {
private readonly accordions;
/** Whether to close other accordions when one is opened. */
autoClose: string;
/** The variant of the accordion
* @type { 'default' | 'collapsed' | 'clean' | 'clean-collapsed' }
*/
variant: AccordionVariant;
static readonly styles: CSSResult;
private readonly boundOnAccordionChange;
private readonly boundOnSlotChange;
connectedCallback(): void;
disconnectedCallback(): void;
protected firstUpdated(_changedProperties: PropertyValueMap<DapDSAccordionGroup> | Map<PropertyKey, unknown>): void;
private onSlotChange;
private setupAccordions;
private onAccordionChange;
render(): TemplateResult_2;
}
/**
* `dap-ds-anchor-heading`
* @summary Anchor heading is a heading with an anchor link.
* @element dap-ds-anchor-heading
* @title - Anchor heading
*
* @attribute {'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'} variant - The variant of the heading. Default is `h2`. Can be `h1`, `h2`, `h3`, `h4`, `h5`, or `h6`.
* @attribute {string} label - The label of the heading.
*
* @csspart base - The main anchor heading container.
* @csspart link - The link of the anchor heading. dap-ds-link element.
* @csspart link-base - The base of the link part.
* @csspart text - The text of the anchor heading.
*
* @cssproperty --dds-anchor-link-color - The color of the anchor link. Default is the primary color.
* @cssproperty --dds-anchor-link-opacity - The opacity of the anchor link when not hovered. Default is 0.
* @cssproperty --dds-anchor-link-hover-opacity - The opacity of the anchor link when hovered. Default is 1.
* @cssproperty --dds-anchor-link-transition - The transition property for the anchor link opacity. Default is 'opacity 0.2s ease-in-out'.
*/
export declare class DapDSAnchorHeading extends DdsElement {
variant: HeadingVariant;
label: string;
static readonly styles: CSSResult[];
createRenderRoot(): this;
get elementId(): string;
get anchorTitle(): string;
render(): TemplateResult_2;
}
/**
* `dap-ds-avatar`
* @summary Avatar component can be used to display user profile images, initials, or icons.
* @element dap-ds-avatar
* @title - Avatar
*
* @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.
*
* @csspart base - The main avatar container.
* @csspart img - The avatar image.
* @csspart initials - The initials container.
* @csspart icon - The icon container.
* @csspart fallback - The fallback content container.
* @csspart loading - The loading indicator.
*
* @cssproperty --dds-avatar-border-radius - The border radius of the avatar. Default varies by shape.
* @cssproperty --dds-avatar-background-color - The background color of the avatar. Default is neutral.
* @cssproperty --dds-avatar-border-width - The width of the avatar's border. Default is 0.
* @cssproperty --dds-avatar-border-color - The color of the avatar's border. Default is transparent.
* @cssproperty --dds-avatar-border-style - The style of the avatar's border. Default is solid.
* @cssproperty --dds-avatar-transition - The transition property for the avatar. Default is 'all 0.2s ease-in-out'.
* @cssproperty --dds-avatar-text-color - The color of initials text. Default is neutral strong.
* @cssproperty --dds-avatar-font-size - The font size for initials. Calculated based on size.
* @cssproperty --dds-avatar-font-weight - The font weight for initials. Default is semibold.
*
* @cssproperty --dds-avatar-size-lg - The size of the large avatar. Default is 80px.
* @cssproperty --dds-avatar-size-md - The size of the medium avatar. Default is 64px.
* @cssproperty --dds-avatar-size-sm - The size of the small avatar. Default is 48px.
* @cssproperty --dds-avatar-size-xs - The size of the extra small avatar. Default is 32px.
* @cssproperty --dds-avatar-size-xxs - The size of the extra extra small avatar. Default is 24px.
*/
export declare class DapDSAvatar extends DdsElement {
/** The size of the avatar
* @default md
* @type { 'xxs' | 'xs' | 'sm' | 'md' | 'lg' }
* @example
* ```html
* <dap-ds-avatar size="xxs">
* <dap-ds-avatar size="xs">
* <dap-ds-avatar size="sm">
* <dap-ds-avatar size="md">
* <dap-ds-avatar size="lg">
* ```
*/
size: Size;
/** The shape of the avatar
* @default circle
* @type { 'circle' | 'rounded' | 'square' }
* @example
* ```html
* <dap-ds-avatar shape="circle">
* <dap-ds-avatar shape="rounded">
* <dap-ds-avatar shape="square">
* ```
*/
shape: AvatarShape;
/** The variant type of the avatar
* @default image
* @type { 'image' | 'initials' | 'icon' }
* @example
* ```html
* <dap-ds-avatar variant="image">
* <dap-ds-avatar variant="initials">
* <dap-ds-avatar variant="icon">
* ```
*/
variant: AvatarVariant;
/** The source of the avatar image */
src: string;
/** The alt text of the avatar */
alt: string;
/** The initials to display when variant is 'initials' */
initials: string;
/** Accessible label for the avatar */
label: string;
/** Loading state indicator */
loading: boolean;
/** Whether the avatar is interactive (clickable) */
interactive: boolean;
/** The width of the avatar. This will override the size */
width: number;
/** The height of the avatar. This will override the size */
height: number;
private hasImageError;
private isImageLoading;
static readonly styles: CSSResult;
private handleImageLoad;
private handleImageError;
private handleClick;
private generateInitials;
private mapSizeToSpinnerSize;
private renderImage;
private renderInitials;
private renderIcon;
private renderFallback;
private renderLoading;
private renderContent;
render(): TemplateResult_2;
}
/**
* `dap-ds-avatar-group`
* @summary Avatar group component displays multiple avatars in an organized layout with overflow management.
* @element dap-ds-avatar-group
* @title - Avatar Group
* @group avatar
*
* @slot - The avatars to display in the group.
*
* @event dds-overflow-click - Fired when the overflow indicator is clicked.
*
* @csspart base - The main container of the avatar group.
* @csspart avatars - The container for the visible avatars.
* @csspart overflow - The overflow indicator element.
*
* @cssproperty --dds-avatar-group-gap - Gap between avatars in grid layout. Default is 0.
* @cssproperty --dds-avatar-group-overlap - Overlap amount for stacked layout. Default is -8px.
* @cssproperty --dds-avatar-group-border-width - Border width for avatars. Default is 2px.
* @cssproperty --dds-avatar-group-border-color - Border color for avatars. Default is white.
* @cssproperty --dds-avatar-group-overflow-bg - Background color for overflow indicator.
* @cssproperty --dds-avatar-group-overflow-color - Text color for overflow indicator.
* @cssproperty --dds-avatar-group-overflow-border - Border for overflow indicator.
* @cssproperty --dds-avatar-group-size-lg - Size for large avatars. Default is 80px.
* @cssproperty --dds-avatar-group-size-md - Size for medium avatars. Default is 64px.
* @cssproperty --dds-avatar-group-size-sm - Size for small avatars. Default is 48px.
* @cssproperty --dds-avatar-group-size-xs - Size for extra small avatars. Default is 32px.
* @cssproperty --dds-avatar-group-size-xxs - Size for extra extra small avatars. Default is 24px.
*/
export declare class DapDSAvatarGroup extends DdsElement {
private avatars;
/** The size of avatars in the group
* @default md
* @type { 'xxs' | 'xs' | 'sm' | 'md' | 'lg' }
* @example
* ```html
* <dap-ds-avatar-group size="xxs">
* <dap-ds-avatar-group size="xs">
* <dap-ds-avatar-group size="sm">
* <dap-ds-avatar-group size="md">
* <dap-ds-avatar-group size="lg">
* ```