/*!
 * KoliBri - The accessible HTML-Standard
 */
import { __decorate } from "tslib";
import { Fragment, h } from "@stencil/core";
import { KolButtonWcTag } from "../../core/component-names";
import { PopoverFC } from "../../internal/functional-components/popover/component";
import { PopoverController } from "../../internal/functional-components/popover/controller";
import { validateInline, validatePopoverAlign } from "../../schema";
import clsx from "../../utils/clsx";
import { createUniqueId } from "../../utils/dev.utils";
import { createCtaRef, directClick, directFocus } from "../../utils/element-interaction";
export class KolPopoverButtonWc {
    constructor() {
        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 is() { return "kol-popover-button-wc"; }
    static get properties() {
        return {
            "_accessKey": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "AccessKeyPropType",
                    "resolved": "string | undefined",
                    "references": {
                        "AccessKeyPropType": {
                            "location": "import",
                            "path": "../../schema",
                            "id": "src/schema/index.ts::AccessKeyPropType"
                        }
                    }
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Defines the key combination that can be used to trigger or focus the component's interactive element."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "_access-key"
            },
            "_ariaDescription": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "AriaDescriptionPropType",
                    "resolved": "string | undefined",
                    "references": {
                        "AriaDescriptionPropType": {
                            "location": "import",
                            "path": "../../schema",
                            "id": "src/schema/index.ts::AriaDescriptionPropType"
                        }
                    }
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Defines the value for the aria-description attribute."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "_aria-description"
            },
            "_customClass": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "CustomClassPropType",
                    "resolved": "string | undefined",
                    "references": {
                        "CustomClassPropType": {
                            "location": "import",
                            "path": "../../schema",
                            "id": "src/schema/index.ts::CustomClassPropType"
                        }
                    }
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Defines the custom class attribute if _variant=\"custom\" is set."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "_custom-class"
            },
            "_disabled": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean | undefined",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Makes the element not focusable and ignore all events."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "_disabled",
                "defaultValue": "false"
            },
            "_hideLabel": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean | undefined",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [{
                            "name": "TODO",
                            "text": ": Change type back to `HideLabelPropType` after Stencil#4663 has been resolved."
                        }],
                    "text": "Hides the caption by default and displays the caption text with a tooltip when the\ninteractive element is focused or the mouse is over it."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "_hide-label",
                "defaultValue": "false"
            },
            "_icons": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "IconsPropType",
                    "resolved": "KoliBriHorizontalIcons & KoliBriVerticalIcons | string | undefined",
                    "references": {
                        "IconsPropType": {
                            "location": "import",
                            "path": "../../schema",
                            "id": "src/schema/index.ts::IconsPropType"
                        }
                    }
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Defines the icon classnames (e.g. `_icons=\"fa-solid fa-user\"`)."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "_icons"
            },
            "_id": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "IdPropType",
                    "resolved": "string | undefined",
                    "references": {
                        "IdPropType": {
                            "location": "import",
                            "path": "../../schema",
                            "id": "src/schema/index.ts::IdPropType"
                        }
                    }
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [{
                            "name": "internal",
                            "text": undefined
                        }],
                    "text": "Defines the internal ID of the primary component element."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "_id"
            },
            "_inline": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "InlinePropType",
                    "resolved": "boolean | undefined",
                    "references": {
                        "InlinePropType": {
                            "location": "import",
                            "path": "../../schema",
                            "id": "src/schema/index.ts::InlinePropType"
                        }
                    }
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Defines whether the component is displayed as a standalone block or inline without enforcing a minimum size of 44px."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "_inline",
                "defaultValue": "false"
            },
            "_label": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "LabelWithExpertSlotPropType",
                    "resolved": "string",
                    "references": {
                        "LabelWithExpertSlotPropType": {
                            "location": "import",
                            "path": "../../schema",
                            "id": "src/schema/index.ts::LabelWithExpertSlotPropType"
                        }
                    }
                },
                "required": true,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "_label"
            },
            "_name": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string | undefined",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Defines the technical name of an input field."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "_name"
            },
            "_popoverAlign": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "PopoverAlignPropType",
                    "resolved": "\"bottom\" | \"left\" | \"right\" | \"top\" | undefined",
                    "references": {
                        "PopoverAlignPropType": {
                            "location": "import",
                            "path": "../../schema",
                            "id": "src/schema/index.ts::PopoverAlignPropType"
                        }
                    }
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Defines where to show the Popover preferably: top, right, bottom or left."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "_popover-align",
                "defaultValue": "'bottom'"
            },
            "_shortKey": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "ShortKeyPropType",
                    "resolved": "string | undefined",
                    "references": {
                        "ShortKeyPropType": {
                            "location": "import",
                            "path": "../../schema",
                            "id": "src/schema/index.ts::ShortKeyPropType"
                        }
                    }
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Adds a visual shortcut hint after the label and instructs the screen reader to read the shortcut aloud."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "_short-key"
            },
            "_syncValueBySelector": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "SyncValueBySelectorPropType",
                    "resolved": "string | undefined",
                    "references": {
                        "SyncValueBySelectorPropType": {
                            "location": "import",
                            "path": "../../schema",
                            "id": "src/schema/index.ts::SyncValueBySelectorPropType"
                        }
                    }
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [{
                            "name": "internal",
                            "text": undefined
                        }],
                    "text": "Selector for synchronizing the value with another input element."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "_sync-value-by-selector"
            },
            "_tabIndex": {
                "type": "number",
                "mutable": false,
                "complexType": {
                    "original": "number",
                    "resolved": "number | undefined",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Defines which tab-index the primary element of the component has. (https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex)"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "_tab-index"
            },
            "_tooltipAlign": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "TooltipAlignPropType",
                    "resolved": "\"bottom\" | \"left\" | \"right\" | \"top\" | undefined",
                    "references": {
                        "TooltipAlignPropType": {
                            "location": "import",
                            "path": "../../schema",
                            "id": "src/schema/index.ts::TooltipAlignPropType"
                        }
                    }
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Defines where to show the Tooltip preferably: top, right, bottom or left."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "_tooltip-align",
                "defaultValue": "'top'"
            },
            "_type": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "ButtonTypePropType",
                    "resolved": "\"button\" | \"reset\" | \"submit\" | undefined",
                    "references": {
                        "ButtonTypePropType": {
                            "location": "import",
                            "path": "../../schema",
                            "id": "src/schema/index.ts::ButtonTypePropType"
                        }
                    }
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Defines either the type of the component or of the components interactive element."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "_type",
                "defaultValue": "'button'"
            },
            "_value": {
                "type": "any",
                "mutable": false,
                "complexType": {
                    "original": "StencilUnknown",
                    "resolved": "boolean | null | number | object | string | undefined",
                    "references": {
                        "StencilUnknown": {
                            "location": "import",
                            "path": "../../schema",
                            "id": "src/schema/index.ts::StencilUnknown"
                        }
                    }
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Defines the value of the element."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "_value"
            },
            "_variant": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "ButtonVariantPropType",
                    "resolved": "\"custom\" | \"danger\" | \"ghost\" | \"normal\" | \"primary\" | \"secondary\" | \"tertiary\" | undefined",
                    "references": {
                        "ButtonVariantPropType": {
                            "location": "import",
                            "path": "../../schema",
                            "id": "src/schema/index.ts::ButtonVariantPropType"
                        }
                    }
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Defines which variant should be used for presentation."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "_variant",
                "defaultValue": "'normal'"
            }
        };
    }
    static get states() {
        return {
            "state": {},
            "popoverOpen": {}
        };
    }
    static get methods() {
        return {
            "hidePopover": {
                "complexType": {
                    "signature": "() => Promise<void>",
                    "parameters": [],
                    "references": {
                        "Promise": {
                            "location": "global",
                            "id": "global::Promise"
                        }
                    },
                    "return": "Promise<void>"
                },
                "docs": {
                    "text": "Hides the popover programmatically by calling the PopoverController.",
                    "tags": []
                }
            },
            "showPopover": {
                "complexType": {
                    "signature": "() => Promise<void>",
                    "parameters": [],
                    "references": {
                        "Promise": {
                            "location": "global",
                            "id": "global::Promise"
                        }
                    },
                    "return": "Promise<void>"
                },
                "docs": {
                    "text": "Show the popover programmatically by calling the PopoverController.",
                    "tags": []
                }
            },
            "focus": {
                "complexType": {
                    "signature": "(options?: KolFocusOptions) => Promise<void>",
                    "parameters": [{
                            "name": "options",
                            "type": "KolFocusOptions | undefined",
                            "docs": ""
                        }],
                    "references": {
                        "Promise": {
                            "location": "global",
                            "id": "global::Promise"
                        },
                        "KolFocusOptions": {
                            "location": "import",
                            "path": "../../schema",
                            "id": "src/schema/index.ts::KolFocusOptions"
                        }
                    },
                    "return": "Promise<void>"
                },
                "docs": {
                    "text": "Sets focus on the internal element.",
                    "tags": []
                }
            },
            "click": {
                "complexType": {
                    "signature": "() => Promise<void>",
                    "parameters": [],
                    "references": {
                        "Promise": {
                            "location": "global",
                            "id": "global::Promise"
                        }
                    },
                    "return": "Promise<void>"
                },
                "docs": {
                    "text": "Clicks the primary interactive element inside this component.",
                    "tags": []
                }
            }
        };
    }
    static get watchers() {
        return [{
                "propName": "_inline",
                "methodName": "validateInline"
            }, {
                "propName": "_popoverAlign",
                "methodName": "validatePopoverAlign"
            }];
    }
}
__decorate([
    directFocus('ctaRef')
], KolPopoverButtonWc.prototype, "focus", null);
__decorate([
    directClick('ctaRef')
], KolPopoverButtonWc.prototype, "click", null);
//# sourceMappingURL=component.js.map
