UNPKG

dap-design-system

Version:

Official design system for the DÁP (www.dap.gov.hu)

1,145 lines (1,088 loc) 463 kB
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"> * ```