dap-design-system
Version:
Official design system for the DÁP (dap.gov.hu)
90 lines (89 loc) • 7.39 kB
TypeScript
import { default as ComboboxBaseElement } from './comboboxBase';
/**
* `dap-ds-combobox`
* @summary A select is a form element that allows the user to select one option from a set.
* @element dap-ds-combobox
* @title - Combobox
*
* @event {{ value }} 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-clear - Emitted when the select is cleared.
* @event {{ search: string }} dds-search - Emitted when the manual input value changes.
* @event {{ input: string, originalEvent: Event }} dds-input - Emitted when typing happens in the input.
*
* @property {string} value - The value of the select.
* @property {string} placeholder - The placeholder of the select.
* @property { 'top' | 'top-start' | 'top-end' | 'right' | 'right-start'| 'right-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end'} placement - The placement of the select dropdown. Default is 'bottom-start'.
* @property {boolean} opened - Whether the select dropdown is opened.
* @property {boolean} sync - The sync mode of the select dropdown. How the dropdown item size is synced to the trigger element'.
* @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 input.
* @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 content of the select.
* @property {'negative' | 'positive' | 'warning' | 'info'} feedbackType - The feedback type of the select.
* @property {'none' | 'typehead' | 'autocomplete' | 'manual'} searchMode - The search mode of the select.
* @property {boolean} openOnEmpty - Whether the combobox should open on empty results.
* @property {boolean} allowManualInput - Whether the combobox allows manual input, or free text.
* @property {boolean} searchForText - Whether the combobox should search for the selected item text.
* @property {boolean} textComplete - Whether the combobox should complete the text.
* @property {string} searchButtonAriaLabel - The aria label of the search button.
* @property {string} selectable - Show the selected item check mark in the dropdown. 'true' or 'false'
* @property {boolean} noAnimation - Whether the combobox open indicator should be animated.
* @property {boolean} multiselect - Whether the combobox is multiselect.
* @property {number} maxSelections - The maximum number of selections allowed.
*
* @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 option-list - The option list of the select.
* @csspart input - The input of the select.
*
* @cssproperty --dds-combobox-background - The background color of the combobox. (default: var(--dds-fields-background-default))
* @cssproperty --dds-combobox-border-color - The border color of the combobox. (default: var(--dds-border-neutral-base))
* @cssproperty --dds-combobox-border-width - The border width of the combobox. (default: var(--dds-border-width-base, 1px))
* @cssproperty --dds-combobox-border-radius - The border radius of the combobox. (default: var(--dds-radius-base))
* @cssproperty --dds-combobox-text-color - The text color of the combobox. (default: var(--dds-text-neutral-base))
* @cssproperty --dds-combobox-placeholder-color - The placeholder text color. (default: var(--dds-text-neutral-subtle))
* @cssproperty --dds-combobox-disabled-background - The background color when disabled. (default: var(--dds-background-neutral-stronger))
* @cssproperty --dds-combobox-disabled-text - The text color when disabled. (default: var(--dds-text-neutral-disabled))
* @cssproperty --dds-combobox-error-border - The border color for error state. (default: var(--dds-border-negative-base))
* @cssproperty --dds-combobox-success-border - The border color for success state. (default: var(--dds-border-positive-base))
* @cssproperty --dds-combobox-icon-color - The color of the icons. (default: var(--dds-text-icon-neutral-subtle))
* @cssproperty --dds-combobox-loading-spinner-color - The color of the loading spinner. (default: var(--dds-icon-neutral-base))
* @cssproperty --dds-combobox-clear-icon-color - The color of the clear icon. (default: var(--dds-button-subtle-icon-neutral-enabled))
* @cssproperty --dds-combobox-popup-background - The background color of the popup. (default: var(--dds-background-neutral-subtle))
* @cssproperty --dds-combobox-popup-shadow - The box shadow of the popup. (default: 0 4px 6px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -1px rgba(0, 0, 0, 0.06))
* @cssproperty --dds-combobox-icon-opened-transform - The transform of the icon when the combobox is opened (default: rotate(90deg)).
* @cssproperty --dds-combobox-padding-xs - The padding for extra small size. (default: var(--dds-spacing-200))
* @cssproperty --dds-combobox-padding-sm - The padding for small size. (default: var(--dds-spacing-200))
* @cssproperty --dds-combobox-padding-lg - The padding for large size. (default: var(--dds-spacing-300))
* @cssproperty --dds-combobox-padding-horizontal - The horizontal padding. (default: var(--dds-spacing-300))
* @cssproperty --dds-combobox-padding-vertical - The vertical padding. (default: var(--dds-spacing-200))
* @cssproperty --dds-combobox-gap - The gap between elements. (default: var(--dds-spacing-100))
* @cssproperty --dds-combobox-icon-gap - The gap between icons. (default: var(--dds-spacing-200))
* @cssproperty --dds-combobox-action-gap - The gap between action elements. (default: var(--dds-spacing-200))
* @cssproperty --dds-combobox-action-padding - The padding for action elements. (default: var(--dds-spacing-300))
* @cssproperty --dds-combobox-clear-icon-width - The width of the clear icon. (default: var(--dds-spacing-800))
* @cssproperty --dds-combobox-dropdown-icon-right - The right position of the dropdown icon. (default: var(--dds-spacing-600))
* @cssproperty --dds-combobox-min-width - The minimum width of the combobox. (default: 7.5rem)
* @cssproperty --dds-combobox-chips-gap - The gap between chips. (default: var(--dds-spacing-100))
* @cssproperty --dds-combobox-chips-padding - The padding for chips. (default: var(--dds-spacing-100))
* @cssproperty --dds-combobox-chips-max-height - The maximum height of the chips. (default: 120px)
*
* @slot - The default slot for the options.
*/
export default class DapDSCombobox extends ComboboxBaseElement {
static tagName: string;
render(): import('lit-html').TemplateResult;
}