dap-design-system
Version:
Official design system for the DÁP (dap.gov.hu)
70 lines (69 loc) • 4 kB
TypeScript
import { PropertyValueMap } from 'lit';
import { DdsElement } from '../../internal/dds-hu-element';
import { default as SystemCheckLine } from '../icons/system/system-check-line/system-check-line.component';
import { default as DapDSStack } from '../stack/stack.component';
declare const DapDSOptionItem_base: typeof DdsElement & {
new (...args: any[]): import('../../internal/mixin/sizedMixin').SizedElementInterface;
prototype: import('../../internal/mixin/sizedMixin').SizedElementInterface;
};
/**
* `dap-ds-option-item`
* @summary An option item is a selectable item in a list of options.
* @element dap-ds-option-item
* @title - Option item
* @group select,combobox
* *
* @csspart base - The main option item container.
* @csspart prefix - The prefix of the option item.
* @csspart label - The label of the option item.
* @csspart suffix - The suffix of the option item.
*
* @slot prefix - The prefix of the option item.
* @slot - The label of the option item.
* @slot suffix - The suffix of the option item.
*
* @cssproperty --dds-option-item-padding-vertical - The vertical padding of the option item (default: var(--dds-spacing-100))
* @cssproperty --dds-option-item-padding-horizontal - The horizontal padding of the option item (default: var(--dds-spacing-200))
* @cssproperty --dds-option-item-border-radius - The border radius of the option item (default: var(--dds-radius-small, 4px))
* @cssproperty --dds-option-item-color - The text color of the option item (default: var(--dds-text-neutral-base))
* @cssproperty --dds-option-item-hover-bg - The background color of the option item when hovered (default: var(--dds-background-neutral-medium))
* @cssproperty --dds-option-item-active-bg - The background color of the option item when active (default: var(--dds-background-neutral-strong))
* @cssproperty --dds-option-item-disabled-color - The text color of the option item when disabled (default: var(--dds-text-neutral-disabled))
* @cssproperty --dds-option-item-high-contrast-border - The border color of the option item in high contrast mode (default: var(--dds-border-neutral-transparent-interactive, #fff500))
* @cssproperty --dds-option-item-selected-font-weight - The font weight of the option item when selected (default: var(--dds-font-weight-bold))
* @cssproperty --dds-option-item-xs-font-size - The font size of the option item in extra small size (default: var(--dds-font-sm))
* @cssproperty --dds-option-item-lg-font-size - The font size of the option item in large size (default: var(--dds-font-lg))
* @cssproperty --dds-option-item-selected-icon-width - The width of the selected icon (default: var(--dds-spacing-400))
*/
export default class DapDSOptionItem extends DapDSOptionItem_base {
static tagName: string;
static dependencies: {
'dap-ds-stack': typeof DapDSStack;
'dap-ds-icon-check-line': typeof SystemCheckLine;
};
/** The selected state of the option item */
selected?: boolean;
/** Wheteher the item is selectable, whether it shows the selected icon */
selectable?: string | undefined;
/** The position of the selected icon */
selectedIconPosition?: string | undefined;
/** The value of the option item */
value?: any;
/** The disabled state of the option item */
disabled?: boolean;
/** The focused state of the option item */
focused?: boolean;
/** The label of the option item, it can be a simplier version of an item */
label?: string;
private readonly _prefixNode;
private readonly _postfixNode;
private _hasPrefix;
private _hasSuffix;
static readonly styles: import('lit').CSSResult;
protected firstUpdated(_changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void;
protected updated(_changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void;
private handleClick;
get optionText(): string;
render(): import('lit-html').TemplateResult<1>;
}
export {};