// #region Imports
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
    return c > 3 && r && Object.defineProperty(target, key, r), r;
};
var __metadata = (this && this.__metadata) || function (k, v) {
    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
};
import { Themeable } from '../../../../Controls/Behaviors/Themeable';
import { Busyable } from '../../../Behaviors/Busyable';
import { Checkable } from '../../../Behaviors/Checkable';
import { ContentAlignable } from '../../../Behaviors/ContentAlignable';
import { Fitable } from '../../../Behaviors/Fitable';
import { Labelable } from '../../../Behaviors/Labelable';
import { Orientable } from '../../../Behaviors/Orientable';
import { Reversible } from '../../../Behaviors/Reversible';
import { Component } from '../../../Decorators/ComponentDecorator';
import { RippleElement } from '../../Effects/Ripple/RippleElement';
import { StackElement } from '../../Layouts/Stack/StackElement';
import { IconElement } from '../../Media/Icon/IconElement';
import { FocusRingElement } from '../../Primitives/FocusRing/FocusRingElement';
import { TextElement } from '../../Primitives/Text/TextElement';
import { ProgressRingElement } from '../../Ranges/ProgressRing/ProgressRingElement';
import { ButtonBaseElement } from '../Abstracts/ButtonBaseElement';
import { toggleButtonElementJoyStyle } from './Themes/ToggleButtonElement.Joy';
import { toggleButtonElementRetroStyle } from './Themes/ToggleButtonElement.Retro';
import { toggleButtonElementTemplate } from './ToggleButtonElementTemplate';
import { toggleButtonElementCosmopolitanStyle } from './Themes/ToggleButtonElement.Cosmopolitan';
import { Iconable } from '../../../Behaviors/Iconable';
// #endregion
/**
 * ToggleButton - An interactive button component that maintains a checked/unchecked state for binary choices.
 *
 * Provides toggle functionality with visual state feedback, allowing users to switch between two
 * states (on/off, enabled/disabled, selected/unselected). Features persistent state management,
 * visual state indicators, and keyboard accessibility for binary preference controls.
 *
 * @name ToggleButtonElement
 * @element mosaik-toggle-button
 * @category Buttons
 *
 * @slot label - Text label content area for button identification
 * @slot icon - Icon content area for visual state representation
 * @slot overlay - Overlay content area for badges, notifications, or state indicators
 *
 * @csspart button - Main toggle button element container
 * @csspart focusRing - Focus ring indicator for accessibility
 * @csspart ripple - Ripple effect animation container
 * @csspart icon - Icon content styling container
 * @csspart label - Text label styling container
 * @csspart progressRing - Loading state progress indicator
 *
 * @cssprop --toggle-button-font-family - Font family for button text content
 * @cssprop --toggle-button-font-size - Font size for button text
 * @cssprop --toggle-button-font-line-height - Line height for button text
 * @cssprop --toggle-button-font-weight - Font weight for button text
 * @cssprop --toggle-button-font-letter-spacing - Letter spacing for button text
 * @cssprop --toggle-button-font-text-decoration - Text decoration for button text
 * @cssprop --toggle-button-font-text-transform - Text transform for button text
 * @cssprop --toggle-button-padding-top - Top padding for button content
 * @cssprop --toggle-button-padding-right - Right padding for button content
 * @cssprop --toggle-button-padding-bottom - Bottom padding for button content
 * @cssprop --toggle-button-padding-left - Left padding for button content
 * @cssprop --toggle-button-gap - Gap between icon and label elements
 * @cssprop --toggle-button-background-checked - Background color when toggled on
 * @cssprop --toggle-button-background-unchecked - Background color when toggled off
 * @cssprop --toggle-button-border-color-checked - Border color when toggled on
 * @cssprop --toggle-button-border-color-unchecked - Border color when toggled off
 *
 * @fires change - Dispatched when the toggle state changes
 * @fires checked - Dispatched when the button becomes checked
 * @fires unchecked - Dispatched when the button becomes unchecked
 * @fires click - Dispatched when the button is clicked
 *
 * @dependency RippleElement - For interactive ripple effects on user interaction
 * @dependency StackElement - For layout management of icon and label
 * @dependency IconElement - For displaying state icons and visual indicators
 * @dependency FocusRingElement - For accessibility focus indicators
 * @dependency TextElement - For rendering text labels
 * @dependency ProgressRingElement - For loading state visualization
 *
 * @example
 * ```html
 * <!-- Simple toggle button -->
 * <mosaik-toggle-button onchange="handleToggle(event)">
 *   <mosaik-icon slot="icon" data="star"></mosaik-icon>
 *   <mosaik-text slot="label">Favorite</mosaik-text>
 * </mosaik-toggle-button>
 *
 * <!-- Settings toggle button -->
 * <mosaik-toggle-button checked="true">
 *   <mosaik-icon slot="icon" data="bell"></mosaik-icon>
 *   <mosaik-text slot="label">Notifications</mosaik-text>
 * </mosaik-toggle-button>
 *
 * <!-- Feature toggle button -->
 * <mosaik-toggle-button appearance="soft">
 *   <mosaik-icon slot="icon" data="eye"></mosaik-icon>
 *   <mosaik-text slot="label">Show Preview</mosaik-text>
 * </mosaik-toggle-button>
 *
 * <!-- Toggle button group -->
 * <div class="toggle-group">
 *   <mosaik-toggle-button name="view" value="list">
 *     <mosaik-icon slot="icon" data="list"></mosaik-icon>
 *     <mosaik-text slot="label">List View</mosaik-text>
 *   </mosaik-toggle-button>
 *   <mosaik-toggle-button name="view" value="grid">
 *     <mosaik-icon slot="icon" data="grid"></mosaik-icon>
 *     <mosaik-text slot="label">Grid View</mosaik-text>
 *   </mosaik-toggle-button>
 * </div>
 *
 * <!-- Busy toggle button -->
 * <mosaik-toggle-button busy="true">
 *   <mosaik-icon slot="icon" data="sync"></mosaik-icon>
 *   <mosaik-text slot="label">Auto Sync</mosaik-text>
 * </mosaik-toggle-button>
 * ```
 *
 * @public
 */
let ToggleButtonElement = class ToggleButtonElement extends Themeable(Reversible(Orientable(ContentAlignable(Fitable(Busyable(Checkable(Labelable(Iconable(ButtonBaseElement))))))))) {
    // #region Ctor
    /**
     * @public
     */
    constructor() {
        super();
    }
    // #endregion
    // #region Properties
    /**
     * Returns the `{@link is}` property.
     * The `{@link is}` property represents natural name of this element.
     *
     * @public
     * @static
     * @readonly
     */
    static get is() {
        return 'mosaik-toggle-button';
    }
    // #endregion
    // #region Methods
    /**
     * Resets the element to its initial state.
     *
     * @public
     */
    reset() {
        this.isChecked = false;
    }
};
ToggleButtonElement = __decorate([
    Component({
        selector: 'mosaik-toggle-button',
        template: toggleButtonElementTemplate,
        themes: {
            joy: toggleButtonElementJoyStyle,
            retro: toggleButtonElementRetroStyle,
            cosmopolitan: toggleButtonElementCosmopolitanStyle
        },
        options: {
            mode: 'open',
            delegatesFocus: true
        },
        imports: [
            StackElement,
            IconElement,
            RippleElement,
            FocusRingElement,
            TextElement,
            ProgressRingElement
        ]
    }),
    __metadata("design:paramtypes", [])
], ToggleButtonElement);
export { ToggleButtonElement };
//# sourceMappingURL=ToggleButtonElement.js.map