dap-design-system/dist/react/dap-ds-select/index.d.ts

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

import { EventName } from '@lit/react';
import { default as Component } from '../../components/select/select.js';
import { DdsChangeEvent, DdsBlurEvent, DdsFocusEvent, DdsOpenedEvent, DdsClosedEvent } from '../../events/events';
export type { DdsChangeEvent } from '../../events/events';
export type { DdsBlurEvent } from '../../events/events';
export type { DdsFocusEvent } from '../../events/events';
export type { DdsOpenedEvent } from '../../events/events';
export type { DdsClosedEvent } from '../../events/events';
/**
* `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.
*/
declare const reactWrapper: import('@lit/react').ReactWebComponent<Component, {
    onDdsChange: EventName<DdsChangeEvent>;
    onDdsBlur: EventName<DdsBlurEvent>;
    onDdsFocus: EventName<DdsFocusEvent>;
    onDdsOpened: EventName<DdsOpenedEvent>;
    onDdsClosed: EventName<DdsClosedEvent>;
}>;
export default reactWrapper;