dap-design-system/dist/components/select/select.component.d.ts

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

import { FloatingStrategy, PopupPlacement } from '../../common/types';
import { GenericFormElement } from '../../internal/mixin/genericFormElement';
import { default as DapDSFeedback } from '../feedback/feedback.component';
import { default as DapDSFormLabel } from '../form/form-label/form-label.component';
import { default as DapDSIcon } from '../icon/icon.component';
import { default as DapDSIconButton } from '../icon-button/icon-button.component';
import { default as ArrowsArrowDownSLine } from '../icons/arrows/arrows-arrow-down-s-line/arrows-arrow-down-s-line.component';
import { default as SystemLoadingSpinner } from '../icons/system/system-loading-spinner/system-loading-spinner.component';
import { default as DapDSOptionItem } from '../option-item/option-item.component';
import { default as DapDSOptionList } from '../option-list/option-list.component';
import { default as DapDSPopup } from '../popup/popup.component';
import { default as DapDSTooltip } from '../tooltip/tooltip.component';
import { default as DapDSTray } from '../tray/tray.component';
import { default as DapDSTypography } from '../typography/typography.component';
/**
 * `dap-ds-select`
 * @summary A select is a form element that allows the user to select one option from a set.
 * @element dap-ds-select
 * @title - Select
 *
 * @event {{ value: string }} dds-change - Fired when the select value changes.
 * @event {{ void }} dds-blur - Emitted when the select loses focus.
 * @event {{ void }} dds-focus - Emitted when the select gains focus.
 * @event {{ void }} dds-opened - Emitted when the select dropdown is opened.
 * @event {{ void }} dds-closed - Emitted when the select dropdown is closed.
 *
 * @property {string} value - The value of the select.
 * @property {string} label - The label of the select.
 * @property {boolean} hideLabel - Visually hides the label while keeping it available to assistive technology. (default: false)
 * @property {string} description - The description of the select.
 * @property {string} tooltip - The tooltip of the select.
 * @property {'top' | 'right' | 'bottom' | 'left'} tooltipPlacement - The tooltip placement of the select.
 * @property {'xs' | 'sm' | 'lg'} size - The size of the select. Default is `sm`.
 * @property {boolean} disabled - Whether the select is disabled.
 * @property {boolean} required - Whether the select is required.
 * @property {boolean} readonly - Whether the select is readonly.
 * @property {boolean} autofocus - Whether the select is autofocus.
 * @property {string} feedback - The feedback of the select.
 * @property {negative | positive | warning} feedbackType - The feedback type of the select. Can be `negative`, `positive`, or `warning`.
 * @property {string} status - The status of the select. Can be `success` or `error`.
 * @property {boolean} optional - The optional state of the select.
 * @property {string} optionalLabel - The optional label of the select.
 * @property {string} requiredLabel - The required indicator of the select. (default: '*')
 * @property {boolean} subtle - The weight of the label. Default is `false`
 *
 * @csspart base - The main select container.
 * @csspart trigger - The trigger button of the select.
 * @csspart label - The label of the select.
 * @csspart description - The description of the select.
 * @csspart feedback - The feedback of the select.
 * @csspart tooltip - The tooltip of the select.
 * @csspart popup-base - The base of the popup.
 * @csspart option-list - The option list of the select.
 * @csspart option-item - The option item of the select.
 * @csspart option-item-base - The base of the option item.
 * @csspart option-item-label - The label of the option item.
 * @csspart option-item-prefix - The prefix of the option item.
 * @csspart option-item-suffix - The suffix of the option item.
 * @csspart indicator-icon - The indicator icon of the select.
 * @csspart mobile-tray - The mobile tray of the select.
 * @csspart mobile-content - The mobile content of the select.
 * @csspart mobile-body - The mobile body of the select.
 * @csspart mobile-header - The mobile header of the select.
 * @csspart mobile-footer - The mobile footer of the select.
 *
 * @cssproperty --dds-select-min-height - Minimum height of the select component (default: var(--dds-spacing-1000))
 * @cssproperty --dds-select-padding - Padding of the select component (default: var(--dds-spacing-300))
 * @cssproperty --dds-select-column-gap - Column gap of the select component (default: var(--dds-spacing-100))
 * @cssproperty --dds-select-border-color - Border color of the select component (default: var(--dds-border-neutral-base))
 * @cssproperty --dds-select-border-radius - Border radius of the select component (default: var(--dds-radius-base))
 * @cssproperty --dds-select-bg-color - Background color of the select component (default: var(--dds-background-neutral-subtle))
 * @cssproperty --dds-select-text-color - Text color of the select component (default: var(--dds-text-neutral-base))
 * @cssproperty --dds-select-icon-right - Right position of the icon (default: var(--dds-spacing-200))
 * @cssproperty --dds-select-icon-color - Color of the icon (default: var(--dds-icon-neutral-subtle))
 * @cssproperty --dds-select-text-margin-right - Right margin of the text (default: var(--dds-spacing-600))
 * @cssproperty --dds-select-disabled-border-color - Border color when disabled (default: var(--dds-background-neutral-stronger))
 * @cssproperty --dds-select-disabled-bg-color - Background color when disabled (default: var(--dds-background-neutral-stronger))
 * @cssproperty --dds-select-disabled-text-color - Text color when disabled (default: var(--dds-text-neutral-disabled))
 * @cssproperty --dds-select-error-border-color - Border color in error state (default: var(--dds-border-negative-base))
 * @cssproperty --dds-select-success-border-color - Border color in success state (default: var(--dds-border-positive-base))
 * @cssproperty --dds-select-xs-min-height - Minimum height for extra small size (default: var(--dds-spacing-800))
 * @cssproperty --dds-select-xs-padding - Padding for extra small size (default: var(--dds-spacing-200))
 * @cssproperty --dds-select-xs-font-size - Font size for extra small size (default: var(--dds-font-sm))
 * @cssproperty --dds-select-lg-min-height - Minimum height for large size (default: var(--dds-spacing-1200))
 * @cssproperty --dds-select-lg-padding - Padding for large size (default: var(--dds-spacing-400))
 * @cssproperty --dds-select-lg-font-size - Font size for large size (default: var(--dds-font-lg))
 * @cssproperty --dds-select-lg-icon-right - Right position of the icon for large size (default: var(--dds-spacing-300))
 * @cssproperty --dds-select-lg-icon-color - Color of the icon for large size (default: var(--dds-text-icon-neutral-subtle))
 * @cssproperty --dds-select-popup-bg-color - Background color of the popup (default: var(--dds-background-neutral-subtle))
 * @cssproperty --dds-select-icon-opened-transform - Transform of the icon when the select is opened (default: rotate(90deg))
 *
 * @slot - The option list of the select.
 * @slot indicator-icon - The indicator icon of the select.
 */
export default class DapDSSelect extends GenericFormElement {
    static tagName: string;
    static dependencies: {
        'dap-ds-icon-loading-spinner': typeof SystemLoadingSpinner;
        'dap-ds-icon-arrow-down-s-line': typeof ArrowsArrowDownSLine;
        'dap-ds-option-list': typeof DapDSOptionList;
        'dap-ds-form-label': typeof DapDSFormLabel;
        'dap-ds-tooltip': typeof DapDSTooltip;
        'dap-ds-icon-button': typeof DapDSIconButton;
        'dap-ds-icon': typeof DapDSIcon;
        'dap-ds-typography': typeof DapDSTypography;
        'dap-ds-popup': typeof DapDSPopup;
        'dap-ds-tray': typeof DapDSTray;
        'dap-ds-feedback': typeof DapDSFeedback;
    };
    /**
     * @ignore
     */
    triggerButton: HTMLButtonElement;
    /**
     * @ignore
     */
    optionList: DapDSOptionList;
    /** The popup placement of the select
     * @type {'top' | 'top-start' | 'top-end' | 'right' | 'right-start'| 'right-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end'}
     */
    placement: PopupPlacement;
    /** Whether the select dropdown is opened.*/
    opened?: boolean | undefined;
    /** The placeholder of the select. */
    placeholder: string | null;
    /** The sync size of the select dropdown */
    sync?: boolean;
    /** Whether the select is in mobile mode. */
    isMobile?: boolean;
    /** Whether to render a native HTML select element for mobile-friendly option selection. */
    native?: boolean;
    /** The loading state of the select. */
    loading?: boolean;
    /** The max heigth of the select dropdown. */
    maxHeight?: number;
    /** Whether the select dropdown indicator is animated or not */
    noAnimation?: boolean;
    /** The floating strategy of the select dropdown
     * @type {'absolute' | 'fixed'}
     */
    floatingStrategy: FloatingStrategy;
    /** Whether to keep popup open when trigger leaves viewport. */
    disableViewportAutoClose: boolean;
    /**
     * @ignore
     */
    selectedItem: any;
    static readonly styles: import('lit').CSSResult;
    private languageChangeHandler;
    connectedCallback(): void;
    disconnectedCallback(): void;
    /**
     * Lifecycle method to handle property changes
     */
    updated(changedProperties: Map<string, unknown>): void;
    private readonly handleClick;
    private readonly handleKeyDown;
    private readonly handleListKeyDown;
    private readonly handleDocumentMouseDown;
    private readonly handlePopupAutoClose;
    private readonly handleFocus;
    private readonly handleBlur;
    formResetCallback(): void;
    showDropDown(key?: string): Promise<void>;
    hideDropDown(options?: {
        skipFocus?: boolean;
    }): Promise<void>;
    get focusElement(): HTMLButtonElement;
    /**
     * Get the active descendant element for aria-activedescendant
     * Returns the currently focused option when dropdown is open, otherwise null
     */
    getActiveDescendant(): DapDSOptionItem | null | undefined;
    /**
     * Get the aria-describedby value, combining description and feedback IDs
     */
    private getAriaDescribedBy;
    get validity(): ValidityState;
    get validationMessage(): string;
    /** Get the current display text for the selected item, dynamically fetching from the option */
    get selectedDisplayText(): string | null;
    checkValidity(): boolean;
    reportValidity(): boolean;
    setValidity(): void;
    handleInvalid(event: Event): void;
    private readonly handleSelectedChange;
    private readonly handleOptionDeselect;
    private readonly handleNativeChange;
    private renderNativeOption;
    private renderNativeOptgroup;
    private renderNativeOptions;
    private renderNativeSelect;
    renderTriggerElement(): import('lit-html').TemplateResult;
    renderOptionList(): import('lit-html').TemplateResult;
    render(): import('lit-html').TemplateResult;
}