import { IEventDetail, IEventEmitter } from '@breadstone/mosaik-elements'; import { CustomElement } from '../../../Abstracts/CustomElement'; import type { ISelectorItemElementProps } from './ISelectorItemElementProps'; import type { SelectorElement } from './SelectorElement'; declare const SelectorItemElement_base: import("../../../../../Index").ControlBehaviorReturn>; /** * Selector Item - An abstract foundation for individual selectable items within selector components. * * @description * The SelectorItemElement serves as the base class for items that can be selected or deselected * within parent selector components (single or multi-select). This element manages its own * selection state, provides value representation, tracks its position index within the parent * collection, and emits selection/deselection events for reactive UI updates. It is designed * to be extended by concrete implementations such as dropdown options, listbox items, menu items, * tab headers, radio buttons, or any selectable child element within a selector container. * The element integrates seamlessly with SelectorElement and MultiSelectorElement parent components, * providing bidirectional selection synchronization and comprehensive accessibility support. * * @name Selector Item * @category Selectors * * @fires selected {SelectedEvent} - Fired when the item is selected, either programmatically or through user interaction * @fires deselected {DeselectedEvent} - Fired when the item is deselected, either programmatically or through user interaction * @fires changed {PropertyChangedEvent} - Fired when any property changes * @fires connected {ConnectedEvent} - Fired when the element is connected to the DOM * * @example * Extending for a dropdown option: * ```typescript * class OptionElement extends SelectorItemElement { * protected get parent(): DropdownElement { * return this.closest('mosaik-dropdown') as DropdownElement; * } * } * ``` * * @example * Using selection state: * ```typescript * const item = document.querySelector('my-item'); * item.select(); // Programmatically select * item.deselect(); // Programmatically deselect * console.log(item.isSelected); // Check selection state * console.log(item.index); // Get position in parent * console.log(item.value); // Get item value * ``` * * @example * Listening to selection events: * ```typescript * const item = document.querySelector('my-item'); * item.addEventListener('selected', () => { * console.log('Item selected:', item.displayText); * }); * item.addEventListener('deselected', () => { * console.log('Item deselected:', item.displayText); * }); * ``` * * @example * Declarative usage in HTML: * ```html * * Small * Medium * Large * * ``` * * @public * @abstract */ export declare abstract class SelectorItemElement extends SelectorItemElement_base implements ISelectorItemElementProps { private readonly _selected; private readonly _deselected; private _isSelected; /** * @public */ constructor(); /** * Returns the `is` property. * The `is` property represents natural name of this element. * * @public * @static * @readonly */ static get is(): string; /** * Gets or sets the `isSelected` property. * * @public * @attr */ get isSelected(): boolean; set isSelected(value: boolean); /** * Gets the index of the item. * * @public * @readonly */ get index(): number; /** * Gets the `displayText` property. * * @public * @readonly * @hidden */ get displayText(): string; /** * Called when the item is selected. * Provides reference to `IEventDetail` as event detail. * * @public * @readonly * @eventProperty */ get selected(): IEventEmitter; /** * Called when the item is deselected. * Provides reference to `IEventDetail` as event detail. * * @public * @readonly * @eventProperty */ get deselected(): IEventEmitter; /** * Get the item parent. * * @protected * @abstract * @readonly */ protected abstract get parent(): TParent; } /** * @public */ declare global { interface HTMLElementTagNameMap { 'mosaik-selector-item': SelectorItemElement; } } export {}; //# sourceMappingURL=SelectorItemElement.d.ts.map