@synergy-design-system/components
Version:
This package provides the base of the Synergy Design System as native web components. It uses [lit](https://www.lit.dev) and parts of [shoelace](https://shoelace.style/). Synergy officially supports the latest two versions of all major browsers (as define
66 lines (65 loc) • 2.54 kB
TypeScript
/**
* ---------------------------------------------------------------------
* 🔒 AUTOGENERATED BY VENDORISM
* Removing this comment will prevent it from being managed by it.
* ---------------------------------------------------------------------
*/
import SynergyElement from '../../internal/synergy-element.js';
import SynIcon from '../icon/icon.component.js';
import type { CSSResultGroup } from 'lit';
/**
* @summary Options define the selectable items within various form controls such as [select](/components/select).
* @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-option--docs
* @status stable
* @since 2.0
*
* @dependency syn-icon
*
* @slot - The option's label.
* @slot prefix - Used to prepend an icon or similar element to the menu item.
* @slot suffix - Used to append an icon or similar element to the menu item.
*
* @csspart checked-icon - The checked icon, an `<syn-icon>` element.
* @csspart base - The component's base wrapper.
* @csspart label - The option's label.
* @csspart prefix - The container that wraps the prefix.
* @csspart suffix - The container that wraps the suffix.
*/
export default class SynOption extends SynergyElement {
static styles: CSSResultGroup;
static dependencies: {
'syn-icon': typeof SynIcon;
};
private readonly localize;
private originalValue;
private isInitialized;
defaultSlot: HTMLSlotElement;
delimiter: string;
current: boolean;
selected: boolean;
hasHover: boolean;
/**
* The option's value. When selected, the containing form control will receive this value. The value must be unique
* from other options in the same group. Values may not contain spaces, as spaces are used as delimiters when listing
* multiple values.
*/
value: string | number;
/** Draws the option in a disabled state, preventing selection. */
disabled: boolean;
connectedCallback(): void;
private handleDefaultSlotChange;
private handleMouseEnter;
private handleMouseLeave;
handleDisabledChange(): void;
handleSelectedChange(): void;
handleDelimiterChange(): void;
handleValueChange(): void;
/**
* Replaces any occurrences of the delimiter in the option's original value with underscores.
*/
sanitizeValueForDelimiter(): void;
/** Returns a plain text label based on the option's content. */
getTextLabel(): string;
private triggerParentDefaultSlotChange;
render(): import("lit").TemplateResult<1>;
}