/*!
 * KoliBri - The accessible HTML-Standard
 */
'use strict';

var index = require('./index-DBbl8tEq.js');
var tslib_es6 = require('./tslib.es6-Cm0ytgPY.js');
var componentNames = require('./component-names-5KS_pYRF.js');
var clsx = require('./clsx-Bm_HQUnh.js');
var alignFloatingElements = require('./align-floating-elements-DfUaAAqe.js');
require('./common-DAAt5YQ7.js');
var inline = require('./inline-1X3ssV6v.js');
var align = require('./align-e4FQ7dUp.js');
var dev_utils = require('./dev.utils-Cdn-EtYb.js');
var elementInteraction = require('./element-interaction-CmOQWzhR.js');
require('./element-focus-B4BhAkh_.js');

const validatePopoverAlign = (component, value) => {
    align.validateAlignment(component, '_popoverAlign', value);
};

const PopoverFC = (props) => {
    const { align = 'bottom', popoverRef, arrowRef, class: classNames } = props, rest = tslib_es6.__rest(props, ["align", "popoverRef", "arrowRef", "class"]);
    return (index.h("div", Object.assign({}, rest, { class: clsx.clsx('kol-popover', classNames), ref: popoverRef, popover: "auto" }), index.h("div", { class: clsx.clsx('kol-popover__arrow', `kol-popover__arrow--${align}`), ref: arrowRef }), index.h("slot", null)));
};

class PopoverController {
    constructor() {
        this.show = false;
        this.align = 'bottom';
        this.setPopoverElementRef = (element) => {
            this.popoverElement = element;
            this.arrowElement = element === null || element === void 0 ? void 0 : element.querySelector('.kol-popover__arrow');
        };
        this.setTriggerElement = (element) => {
            this.triggerElement = element;
        };
        this.setAlign = (align) => {
            this.align = align;
        };
        this.alignPopover = async () => {
            if (!this.popoverElement || !this.triggerElement) {
                return;
            }
            await alignFloatingElements.alignFloatingElements({
                align: this.align,
                referenceElement: this.triggerElement,
                arrowElement: this.arrowElement,
                floatingElement: this.popoverElement,
            });
        };
        this.setupAutoUpdate = () => {
            if (!this.popoverElement || !this.triggerElement || this.cleanupAutoUpdate) {
                return;
            }
            this.cleanupAutoUpdate = alignFloatingElements.autoUpdate(this.triggerElement, this.popoverElement, () => {
                void this.alignPopover();
            });
        };
    }
    setShow(value) {
        this.show = value;
        if (!this.popoverElement) {
            return;
        }
        const toggleVisibility = () => {
            var _a;
            if (!this.popoverElement) {
                return;
            }
            const isOpen = this.popoverElement.matches(':popover-open');
            if (this.show) {
                if (!isOpen) {
                    try {
                        this.popoverElement.showPopover();
                        this.setupAutoUpdate();
                        void this.alignPopover();
                    }
                    catch (_b) {
                    }
                }
            }
            else {
                if (isOpen) {
                    try {
                        this.popoverElement.hidePopover();
                        (_a = this.cleanupAutoUpdate) === null || _a === void 0 ? void 0 : _a.call(this);
                        this.cleanupAutoUpdate = undefined;
                    }
                    catch (_c) {
                    }
                }
            }
        };
        if (this.popoverElement.isConnected) {
            toggleVisibility();
        }
        else {
            requestAnimationFrame(() => {
                toggleVisibility();
            });
        }
    }
    destroy() {
        var _a;
        (_a = this.cleanupAutoUpdate) === null || _a === void 0 ? void 0 : _a.call(this);
        this.cleanupAutoUpdate = undefined;
        this.popoverElement = undefined;
        this.arrowElement = undefined;
        this.triggerElement = undefined;
    }
}

const KolPopoverButtonWc = class {
    constructor(hostRef) {
        index.registerInstance(this, hostRef);
        this.ctaRef = elementInteraction.createCtaRef();
        this.popoverCtrl = new PopoverController();
        this.popoverId = dev_utils.createUniqueId('popover');
        this.setPopoverElementRef = (element) => {
            this.popoverElement = element;
            this.popoverCtrl.setPopoverElementRef(element);
        };
        this.setButtonElementRef = (element) => {
            this.ctaRef(element);
            if (element) {
                this.popoverCtrl.setTriggerElement(element);
            }
        };
        this.on = {
            onClick: () => {
                this.popoverCtrl.setShow(!this.popoverOpen);
            },
        };
        this.state = {
            _label: '',
            _popoverAlign: 'bottom',
            _inline: false,
        };
        this.popoverOpen = false;
        this.handleToggle = (event) => {
            this.popoverOpen = event.newState === 'open';
        };
        this._disabled = false;
        this._hideLabel = false;
        this._inline = false;
        this._popoverAlign = 'bottom';
        this._tooltipAlign = 'top';
        this._type = 'button';
        this._variant = 'normal';
    }
    async hidePopover() {
        this.popoverCtrl.setShow(false);
    }
    async showPopover() {
        this.popoverCtrl.setShow(true);
    }
    async focus(options) { }
    async click() { }
    render() {
        return (index.h(index.Fragment, null, index.h(componentNames.KolButtonWcTag, { key: '9e1a7324de0e3164562d41b81d9b794304508658', class: clsx.clsx('kol-popover-button', {
                'kol-popover-button--open': this.popoverOpen,
                'kol-popover-button--inline': this.state._inline === true,
                'kol-popover-button--standalone': this.state._inline === false,
            }), _accessKey: this._accessKey, _ariaControls: this.popoverId, _ariaDescription: this._ariaDescription, _ariaExpanded: this.popoverOpen, _customClass: this._customClass, _disabled: this._disabled, _hideLabel: this._hideLabel, _icons: this._icons, _id: this._id, _inline: this._inline, _label: this._label, _name: this._name, _on: this.on, _shortKey: this._shortKey, _syncValueBySelector: this._syncValueBySelector, _tabIndex: this._tabIndex, _tooltipAlign: this._tooltipAlign, _type: this._type, _value: this._value, _variant: this._variant, ref: this.setButtonElementRef }, index.h("slot", { key: '647d8e36914dd39d3b5ed610051ba0a3fb081052', name: "expert", slot: "expert" })), index.h(PopoverFC, { key: '4158958c2efaf7f7bf7c02537e9aa4c45b855c88', align: this.state._popoverAlign || 'bottom', popoverRef: this.setPopoverElementRef, class: "kol-popover-button__popover", id: this.popoverId }, index.h("slot", { key: '0cc270905c7835fc7db5119b7609553d86b49050' }))));
    }
    validateInline(value) {
        inline.validateInline(this, value, {
            defaultValue: false,
        });
    }
    validatePopoverAlign(value) {
        validatePopoverAlign(this, value);
        if (value) {
            this.popoverCtrl.setAlign(value);
        }
    }
    componentWillLoad() {
        this.validateInline(this._inline);
        this.validatePopoverAlign(this._popoverAlign);
    }
    componentDidRender() {
        if (this.popoverElement) {
            this.popoverElement.addEventListener('toggle', this.handleToggle);
        }
        if (this.state._popoverAlign) {
            this.popoverCtrl.setAlign(this.state._popoverAlign);
        }
    }
    disconnectedCallback() {
        if (this.popoverElement) {
            this.popoverElement.removeEventListener('toggle', this.handleToggle);
        }
        this.popoverCtrl.destroy();
        this.popoverElement = undefined;
    }
    static get watchers() { return {
        "_inline": ["validateInline"],
        "_popoverAlign": ["validatePopoverAlign"]
    }; }
};
tslib_es6.__decorate([
    elementInteraction.directFocus('ctaRef')
], KolPopoverButtonWc.prototype, "focus", null);
tslib_es6.__decorate([
    elementInteraction.directClick('ctaRef')
], KolPopoverButtonWc.prototype, "click", null);

exports.kol_popover_button_wc = KolPopoverButtonWc;
//# sourceMappingURL=kol-popover-button-wc.entry.cjs.js.map
