import { __decorate } from "tslib";
import { attr, observable } from '@ni/fast-element';
import { DesignSystem, FoundationElement } from '@ni/fast-foundation';
import { styles } from './styles';
import { template } from './template';
import { FvSplitButtonAppearance, FvSplitButtonAppearanceVariant } from './types';
/**
 * A button with a primary action and a secondary expandable menu surface.
 */
export class FvSplitButton extends FoundationElement {
    constructor() {
        super(...arguments);
        this.label = 'Primary function';
        this.disabled = false;
        this.open = false;
        this.appearance = FvSplitButtonAppearance.outline;
        this.appearanceVariant = FvSplitButtonAppearanceVariant.default;
        this.documentClickHandler = (event) => {
            if (!this.open) {
                return;
            }
            if (!event.composedPath().includes(this)) {
                this.setOpen(false);
            }
        };
        this.keydownHandler = (event) => {
            if (event.key === 'Escape') {
                this.setOpen(false);
            }
        };
        this.menuChangeHandler = () => {
            this.handleMenuChange();
        };
    }
    /** @internal */
    disabledChanged() {
        if (this.disabled) {
            this.setOpen(false);
        }
    }
    /** @internal */
    connectedCallback() {
        super.connectedCallback();
        document.addEventListener('click', this.documentClickHandler);
        document.addEventListener('keydown', this.keydownHandler);
    }
    /** @internal */
    disconnectedCallback() {
        document.removeEventListener('click', this.documentClickHandler);
        document.removeEventListener('keydown', this.keydownHandler);
        super.disconnectedCallback();
    }
    /** @internal */
    handlePrimaryClick() {
        if (this.disabled) {
            return;
        }
        this.dispatchEvent(new CustomEvent('trigger', {
            bubbles: true,
            composed: true
        }));
    }
    /** @internal */
    handleToggleClick() {
        if (this.disabled) {
            return;
        }
        this.setOpen(!this.open);
    }
    /** @internal */
    handleMenuChange() {
        this.setOpen(false);
    }
    /** @internal */
    regionChanged(prev, _next) {
        if (prev) {
            prev.removeEventListener('change', this.menuChangeHandler);
        }
        if (this.region) {
            this.region.anchorElement = this.splitButtonContainer ?? this;
            this.region.addEventListener('change', this.menuChangeHandler, { capture: true });
        }
    }
    /** @internal */
    splitButtonContainerChanged() {
        if (this.region) {
            this.region.anchorElement = this.splitButtonContainer ?? this;
        }
    }
    setOpen(nextOpen) {
        if (this.open === nextOpen) {
            return;
        }
        this.open = nextOpen;
        this.dispatchEvent(new CustomEvent('toggle', {
            bubbles: true,
            composed: true,
            detail: { open: this.open }
        }));
    }
}
__decorate([
    attr
], FvSplitButton.prototype, "label", void 0);
__decorate([
    attr({ mode: 'boolean' })
], FvSplitButton.prototype, "disabled", void 0);
__decorate([
    attr({ mode: 'boolean' })
], FvSplitButton.prototype, "open", void 0);
__decorate([
    attr()
], FvSplitButton.prototype, "appearance", void 0);
__decorate([
    attr({ attribute: 'appearance-variant' })
], FvSplitButton.prototype, "appearanceVariant", void 0);
__decorate([
    observable
], FvSplitButton.prototype, "splitButtonContainer", void 0);
__decorate([
    observable
], FvSplitButton.prototype, "region", void 0);
const okFvSplitButton = FvSplitButton.compose({
    baseName: 'fv-split-button',
    template,
    styles
});
DesignSystem.getOrCreate().withPrefix('ok').register(okFvSplitButton());
export const fvSplitButtonTag = 'ok-fv-split-button';
//# sourceMappingURL=index.js.map