/*!
 * KoliBri - The accessible HTML-Standard
 */
import { h, proxyCustomElement, HTMLElement, Fragment } from '@stencil/core/internal/client';
import { a as __rest, _ as __decorate } from './tslib.es6.js';
import { b as KolButtonWcTag } from './component-names.js';
import { c as clsx } from './clsx.js';
import { a as alignFloatingElements, b as autoUpdate } from './align-floating-elements.js';
import './common.js';
import './prop.validators.js';
import { v as validateInline } from './inline.js';
import { b as validateAlignment } from './align.js';
import { c as createUniqueId } from './dev.utils.js';
import { c as createCtaRef, b as directFocus, e as directClick } from './element-interaction.js';

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

const PopoverFC = (props) => {
    const { align = 'bottom', popoverRef, arrowRef, class: classNames } = props, rest = __rest(props, ["align", "popoverRef", "arrowRef", "class"]);
    return (h("div", Object.assign({}, rest, { class: clsx('kol-popover', classNames), ref: popoverRef, popover: "auto" }), h("div", { class: clsx('kol-popover__arrow', `kol-popover__arrow--${align}`), ref: arrowRef }), 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({
                align: this.align,
                referenceElement: this.triggerElement,
                arrowElement: this.arrowElement,
                floatingElement: this.popoverElement,
            });
        };
        this.setupAutoUpdate = () => {
            if (!this.popoverElement || !this.triggerElement || this.cleanupAutoUpdate) {
                return;
            }
            this.cleanupAutoUpdate = 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$1 = proxyCustomElement(class KolPopoverButtonWc extends HTMLElement {
    constructor(registerHost) {
        super();
        if (registerHost !== false) {
            this.__registerHost();
        }
        this.ctaRef = createCtaRef();
        this.popoverCtrl = new PopoverController();
        this.popoverId = 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 (h(Fragment, null, h(KolButtonWcTag, { key: '9e1a7324de0e3164562d41b81d9b794304508658', class: 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 }, h("slot", { key: '647d8e36914dd39d3b5ed610051ba0a3fb081052', name: "expert", slot: "expert" })), h(PopoverFC, { key: '4158958c2efaf7f7bf7c02537e9aa4c45b855c88', align: this.state._popoverAlign || 'bottom', popoverRef: this.setPopoverElementRef, class: "kol-popover-button__popover", id: this.popoverId }, h("slot", { key: '0cc270905c7835fc7db5119b7609553d86b49050' }))));
    }
    validateInline(value) {
        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"]
    }; }
}, [260, "kol-popover-button-wc", {
        "_accessKey": [1, "_access-key"],
        "_ariaDescription": [1, "_aria-description"],
        "_customClass": [1, "_custom-class"],
        "_disabled": [4],
        "_hideLabel": [4, "_hide-label"],
        "_icons": [1],
        "_id": [1],
        "_inline": [4],
        "_label": [1],
        "_name": [1],
        "_popoverAlign": [1, "_popover-align"],
        "_shortKey": [1, "_short-key"],
        "_syncValueBySelector": [1, "_sync-value-by-selector"],
        "_tabIndex": [2, "_tab-index"],
        "_tooltipAlign": [1, "_tooltip-align"],
        "_type": [1],
        "_value": [8],
        "_variant": [1],
        "state": [32],
        "popoverOpen": [32],
        "hidePopover": [64],
        "showPopover": [64],
        "focus": [64],
        "click": [64]
    }, undefined, {
        "_inline": ["validateInline"],
        "_popoverAlign": ["validatePopoverAlign"]
    }]);
__decorate([
    directFocus('ctaRef')
], KolPopoverButtonWc$1.prototype, "focus", null);
__decorate([
    directClick('ctaRef')
], KolPopoverButtonWc$1.prototype, "click", null);
function defineCustomElement$1() {
    if (typeof customElements === "undefined") {
        return;
    }
    const components = ["kol-popover-button-wc"];
    components.forEach(tagName => { switch (tagName) {
        case "kol-popover-button-wc":
            if (!customElements.get(tagName)) {
                customElements.define(tagName, KolPopoverButtonWc$1);
            }
            break;
    } });
}

const KolPopoverButtonWc = KolPopoverButtonWc$1;
const defineCustomElement = defineCustomElement$1;

export { KolPopoverButtonWc, defineCustomElement };
//# sourceMappingURL=kol-popover-button-wc.js.map

//# sourceMappingURL=kol-popover-button-wc.js.map