// #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);
};
var SplitButtonElement_1;
import { Busyable } from '../../../Behaviors/Busyable';
import { ContentAlignable } from '../../../Behaviors/ContentAlignable';
import { DropDownable } from '../../../Behaviors/DropDownable';
import { Fitable } from '../../../Behaviors/Fitable';
import { Iconable } from '../../../Behaviors/Iconable';
import { Labelable } from '../../../Behaviors/Labelable';
import { Orientable } from '../../../Behaviors/Orientable';
import { Reversible } from '../../../Behaviors/Reversible';
import { Themeable } from '../../../Behaviors/Themeable';
import { ClickOutsideController } from '../../../Controllers/ClickOutsideController';
import { Component } from '../../../Decorators/ComponentDecorator';
import { Watch } from '../../../Decorators/WatchDecorator';
import { RippleElement } from '../../Effects/Ripple/RippleElement';
import { StackElement } from '../../Layouts/Stack/StackElement';
import { IconElement } from '../../Media/Icon/IconElement';
import { FloatingElement } from '../../Primitives/Floating/FloatingElement';
import { FocusRingElement } from '../../Primitives/FocusRing/FocusRingElement';
import { PortalElement } from '../../Primitives/Portal/PortalElement';
import { ProjectionController } from '../../Primitives/Portal/ProjectionController';
import { TextElement } from '../../Primitives/Text/TextElement';
import { ProgressRingElement } from '../../Ranges/ProgressRing/ProgressRingElement';
import { MenuElement } from '../../Selectors/Menu/MenuElement';
import { ButtonBaseElement } from '../Abstracts/ButtonBaseElement';
import { splitButtonElementTemplate } from './SplitButtonElementTemplate';
import { splitButtonElementCosmopolitanStyle } from './Themes/SplitButtonElement.Cosmopolitan';
import { splitButtonElementJoyStyle } from './Themes/SplitButtonElement.Joy';
import { splitButtonElementMemphisStyle } from './Themes/SplitButtonElement.Memphis';
// #endregion
/**
 * Split Button - A user interface element that combines a regular button with a dropdown menu.
 *
 * @description
 * The Split Button is a versatile user interface component that merges the functionality of a standard button
 * with that of a dropdown menu. It typically consists of a visible button element and an attached dropdown menu.
 * When users click the button, it triggers a default action, while clicking the arrow or a designated part of the
 * button reveals a dropdown menu with additional options or actions. Split Buttons are commonly used for providing
 * both a primary action and a set of related secondary actions in applications.
 *
 * @name Split Button
 * @element mosaik-split-button
 * @category Buttons
 *
 * @slot - The default dropdown content slot.
 * @slot icon - The icon slot.
 * @slot label - The label slot.
 * @slot overlay - The overlay slot (useful for badge).
 *
 * @csspart button - The button part of the split button.
 * @csspart buttonSplit - The part of the button responsible for splitting the button from the dropdown.
 * @csspart focusRingMain - The focusRingMain part.
 * @csspart focusRingSplit - The focusRingSplit part.
 * @csspart icon - The icon part of the split button.
 * @csspart iconCaret - The caret icon part used for dropdown indication.
 * @csspart innerStack - The innerStack part.
 * @csspart label - The label part of the split button.
 * @csspart popup - The popup part of the split button.
 * @csspart progressRing - The progress ring part of the split button.
 * @csspart rippleMain - The rippleMain part.
 * @csspart rippleSplit - The rippleSplit part.
 *
 * @cssprop {Color} --split-button-background-color - The background color of the split button.
 * @cssprop {Color} --split-button-border-color - The border color of the split button.
 * @cssprop {String} --split-button-border-radius - The border radius of the split button.
 * @cssprop {String} --split-button-border-style - The border style of the split button.
 * @cssprop {String} --split-button-border-width - The border width of the split button.
 * @cssprop {String} --split-button-focus-ring-active-width - The button focus ring active width CSS custom property.
 * @cssprop {String} --split-button-focus-ring-color - The button focus ring color CSS custom property.
 * @cssprop {String} --split-button-focus-ring-inward-offset - The button focus ring inward offset CSS custom property.
 * @cssprop {String} --split-button-focus-ring-outward-offset - The button focus ring outward offset CSS custom property.
 * @cssprop {String} --split-button-font-family - The font family of the split button.
 * @cssprop {String} --split-button-font-letter-spacing - The font letter spacing of the split button.
 * @cssprop {String} --split-button-font-line-height - The font line height of the split button.
 * @cssprop {String} --split-button-font-size - The font size of the split button.
 * @cssprop {String} --split-button-font-text-decoration - The font text decoration of the split button.
 * @cssprop {String} --split-button-font-text-transform - The font text transform of the split button.
 * @cssprop {String} --split-button-font-weight - The font weight of the split button.
 * @cssprop {Color} --split-button-foreground-color - The foreground color of the split button.
 * @cssprop {String} --split-button-gap - The gap between elements of the split button.
 * @cssprop {String} --split-button-height - The button height CSS custom property.
 * @cssprop {String} --split-button-icon-min-height - The button icon min height CSS custom property.
 * @cssprop {String} --split-button-icon-min-width - The button icon min width CSS custom property.
 * @cssprop {String} --split-button-line-height - The line height of the split button text.
 * @cssprop {String} --split-button-min-height - The button min height CSS custom property.
 * @cssprop {String} --split-button-min-width - The button min width CSS custom property.
 * @cssprop {String} --split-button-padding-bottom - The padding bottom of the split button.
 * @cssprop {String} --split-button-padding-left - The padding left of the split button.
 * @cssprop {String} --split-button-padding-right - The padding right of the split button.
 * @cssprop {String} --split-button-padding-top - The padding top of the split button.
 * @cssprop {String} --split-button-progress-ring-width - The button progress ring width CSS custom property.
 * @cssprop {String} --split-button-progress-thickness - The button progress thickness CSS custom property.
 * @cssprop {Color} --split-button-ripple-color - The button ripple color CSS custom property.
 * @cssprop {String} --split-button-ripple-duration - The button ripple duration CSS custom property.
 * @cssprop {String} --split-button-shadow - The shadow of the split button.
 * @cssprop {String} --split-button-shadow-blur - The button shadow blur CSS custom property.
 * @cssprop {String} --split-button-shadow-color - The button shadow color CSS custom property.
 * @cssprop {String} --split-button-shadow-offset-x - The button shadow offset x CSS custom property.
 * @cssprop {String} --split-button-shadow-offset-y - The button shadow offset y CSS custom property.
 * @cssprop {String} --split-button-shadow-spread - The button shadow spread CSS custom property.
 * @cssprop {String} --split-button-transition-duration - The transition duration for the split button.
 * @cssprop {String} --split-button-transition-mode - The transition mode for the split button.
 * @cssprop {String} --split-button-transition-property - The transition property for the split button.
 * @cssprop {String} --split-button-translate - The button translate CSS custom property.
 * @cssprop {String} --split-button-width - The button width CSS custom property.
 *
 * @dependency {FloatingElement} mosaik-floating - The Floating component, used for floating behavior.
 * @dependency {FocusRingElement} mosaik-focus-ring - The Focus Ring component, used for focus indication.
 * @dependency {IconElement} mosaik-icon - The Icon component, used for displaying the icon.
 * @dependency {ProgressRingElement} mosaik-progress-ring - The Progress Ring component, used for progress indication.
 * @dependency {RippleElement} mosaik-ripple - The Ripple component, used for the ripple effect.
 * @dependency {StackElement} mosaik-stack - The Stack component, used for layout management.
 * @dependency {TextElement} mosaik-text - The Text component, used for displaying the label text.
 *
 * @example
 * Basic split button:
 * ```html
 * <mosaik-split-button label="Save">
 *   <mosaik-menu>
 *     <mosaik-menu-item label="Save as..."></mosaik-menu-item>
 *     <mosaik-menu-item label="Export"></mosaik-menu-item>
 *   </mosaik-menu>
 * </mosaik-split-button>
 * ```
 *
 * @example
 * Split button with variant:
 * ```html
 * <mosaik-split-button label="Submit" variant="primary">
 *   <mosaik-menu>
 *     <mosaik-menu-item label="Submit and notify"></mosaik-menu-item>
 *     <mosaik-menu-item label="Submit as draft"></mosaik-menu-item>
 *   </mosaik-menu>
 * </mosaik-split-button>
 * ```
 *
 * @public
 */
let SplitButtonElement = SplitButtonElement_1 = class SplitButtonElement extends Themeable(Reversible(Orientable(ContentAlignable(Fitable(DropDownable(Busyable(Labelable(Iconable(ButtonBaseElement))))))))) {
    // #region Fields
    _clickOutsideController;
    _projectionController;
    // #endregion
    // #region Ctor
    /**
     * @public
     */
    constructor() {
        super();
        this._clickOutsideController = new ClickOutsideController(this, {
            skipInitial: true,
            callback: () => this.onClickedOutside()
        });
        this._projectionController = new ProjectionController(this, {
            slotName: '',
            targetSelector: '[part="projection"]',
            projecting: (element) => {
                element.setAttribute(`${SplitButtonElement_1.is}-projection`, '');
            }
        });
        // REMARK: This is a workaround for the issue with the docs generation.
        Object.assign(this, { dropDownMaxHeight: 'auto' });
    }
    // #endregion
    // #region Properties
    /**
     * Returns the `is` property.
     * The `is` property represents natural name of this element.
     *
     * @public
     * @static
     * @readonly
     */
    static get is() {
        return 'mosaik-split-button';
    }
    // #endregion
    // #region Methods
    /**
     * @protected
     */
    onIsDropDownOpenPropertyChanged(_prev, next) {
        // handle interaction outside of popup
        if (next) {
            // if busy, close the popup
            if (this.isBusy) {
                this.close();
                return;
            }
            this._clickOutsideController.observe();
        }
        else {
            this._clickOutsideController.unobserve();
        }
    }
    onIsBusyPropertyChanged(_prev, next) {
        // if busy, close the popup
        if (next) {
            this.isDropDownOpen = false;
        }
    }
    onSplit(e) {
        this.toggle();
    }
    /**
     * @private
     */
    onClickedOutside() {
        this.close();
    }
};
__decorate([
    Watch('isDropDownOpen', { waitUntilFirstUpdate: true }),
    __metadata("design:type", Function),
    __metadata("design:paramtypes", [Boolean, Boolean]),
    __metadata("design:returntype", void 0)
], SplitButtonElement.prototype, "onIsDropDownOpenPropertyChanged", null);
__decorate([
    Watch('isBusy', { waitUntilFirstUpdate: true }),
    __metadata("design:type", Function),
    __metadata("design:paramtypes", [Boolean, Boolean]),
    __metadata("design:returntype", void 0)
], SplitButtonElement.prototype, "onIsBusyPropertyChanged", null);
SplitButtonElement = SplitButtonElement_1 = __decorate([
    Component({
        selector: 'mosaik-split-button',
        template: splitButtonElementTemplate,
        themes: {
            joy: splitButtonElementJoyStyle,
            memphis: splitButtonElementMemphisStyle,
            cosmopolitan: splitButtonElementCosmopolitanStyle
        },
        options: {
            mode: 'open',
            delegatesFocus: true
        },
        imports: [
            StackElement,
            IconElement,
            RippleElement,
            FocusRingElement,
            TextElement,
            ProgressRingElement,
            FloatingElement,
            MenuElement,
            PortalElement
        ]
    }),
    __metadata("design:paramtypes", [])
], SplitButtonElement);
export { SplitButtonElement };
//# sourceMappingURL=SplitButtonElement.js.map