import { IEventEmitter } from '@breadstone/mosaik-elements'; import type { ICheckedEventDetail, IIndeterminateEventDetail, IUncheckedEventDetail } from '../../../../events'; import { CustomElement } from '../../../Abstracts/CustomElement'; import type { IToggableElementProps } from './IToggableElementProps'; declare const ToggableElement_base: import("../../../../../Index").ControlBehaviorReturn; /** * Toggable - Abstract base class for elements with toggleable checked/unchecked states. * * @description * The ToggableElement provides comprehensive toggle behavior for interactive components that * support checked, unchecked, and optionally indeterminate states. This abstract base class * implements the complete state management lifecycle including keyboard interaction (Space/Enter * keys), state transition logic, and event emission for state changes. It supports both two-state * (checked/unchecked) and three-state (checked/unchecked/indeterminate) modes, making it ideal * as a foundation for checkboxes, radio buttons, toggle switches, expandable sections, and other * binary or tri-state UI controls. The class leverages the Focusable behavior for keyboard * accessibility and provides convenient methods (check, uncheck, toggle) for programmatic control. * * @name Toggable * @category Primitives * * @dependency {Focusable} - Focus management and keyboard interaction support * @dependency {KeyboardController} - Keyboard event handling and key binding management * * @fires checked {CheckedEvent} - Dispatched when the element transitions to checked state (isChecked = true) * @fires unchecked {UncheckedEvent} - Dispatched when the element transitions to unchecked state (isChecked = false) * @fires indeterminate {IndeterminateEvent} - Dispatched when the element transitions to indeterminate state (isChecked = null, requires isThreeState = true) * * @example * Creating a custom checkbox component: * ```typescript * @Component({ * selector: 'mosaik-checkbox', * template: checkboxTemplate * }) * export class CheckboxElement extends ToggableElement { * public constructor() { * super(); * this.isThreeState = false; * } * } * ``` * * @example * Using three-state toggle: * ```html * * * * ``` * * @example * Programmatic control: * ```typescript * const toggle = document.querySelector('custom-toggle'); * toggle.check(); // Set to checked * toggle.uncheck(); // Set to unchecked * toggle.toggle(); // Cycle to next state * * // Listen to state changes * toggle.checked.subscribe(() => { * console.log('Element is now checked'); * }); * ``` * * @example * Handling indeterminate state for parent-child relationships: * ```typescript * class SelectAllCheckbox extends ToggableElement { * private updateFromChildren(children: Array): void { * const allChecked = children.every(c => c.isChecked); * const someChecked = children.some(c => c.isChecked); * * this.isThreeState = true; * if (allChecked) { * this.isChecked = true; * } else if (someChecked) { * this.isChecked = null; // Indeterminate * } else { * this.isChecked = false; * } * } * } * ``` * * @abstract * @public */ export declare class ToggableElement extends ToggableElement_base implements IToggableElementProps { private readonly _checked; private readonly _unchecked; private readonly _indeterminate; private readonly _keyboardController; private _isChecked; private _isThreeState; constructor(); /** * Returns the `is` property. * The `is` property represents natural name of this element. * * @public * @static * @readonly */ static get is(): string; /** * Indicates whether the `ToggableElement` is checked. * * @public * @attr */ get isChecked(): boolean | null; set isChecked(value: boolean | null); /** * The `isThreeState` property determines whether the `ToggableElement` supports two or three states. * `isChecked` property can be set to `null` as a third state when `isThreeState` is `true` * * @public * @attr */ get isThreeState(): boolean; set isThreeState(value: boolean); /** * Called when the `isChecked` property is `true`. * Provides reference to the `ICheckedEventDetail` as event argument. * * @public * @eventProperty * @readonly */ get checked(): IEventEmitter; /** * Called when the `isChecked` property is `false`. * Provides reference to the `IUncheckedEventDetail` as event argument. * * @public * @eventProperty * @readonly */ get unchecked(): IEventEmitter; /** * Called when the `isChecked` property is `null`. * Provides reference to the `IIndeterminateEventDetail` as event argument. * * @public * @eventProperty * @readonly */ get indeterminate(): IEventEmitter; /** * @public * @override */ connectedCallback(): void; /** * @public */ check(): void; /** * @public */ uncheck(): void; /** * @public */ toggle(): void; /** * This method is invoked when the `isChecked` property is changed. * * @protected */ protected onIsCheckedChanged(_prev: boolean | null, newValue: boolean | null): void; /** * Returns the next possible state based on the current state. * * @private */ private nextPossibleState; } /** * @public */ declare global { } export {}; //# sourceMappingURL=ToggableElement.d.ts.map