import { Host, h } from "@stencil/core";
import classNames from "classnames";
import { AriaValidationController } from "../../utils/aria/aria-validation-controller";
import { ElementActivationController } from "../../utils/aria/element-activation-controller";
import { findFormByRef, inheritAriaAttributes } from "../../utils/component";
import { ReactiveControllerHost } from "../../utils/reactive-controller-host";
export class LmvzButton extends ReactiveControllerHost {
    el;
    validationEl;
    inheritedAttributes = {};
    formEl = null;
    formButtonEl = null;
    lmvzActivation;
    get ti() {
        return 0;
    }
    scale = 'default';
    variant = 'secondary';
    disabled = false;
    type = 'button';
    form;
    constructor() {
        super();
        this.addController(new AriaValidationController(this));
        this.addController(new ElementActivationController(this, {
            localHandler: this.handleClick.bind(this),
            keys: ['Enter'],
        }));
    }
    connectedCallback() {
        this.inheritedAttributes = inheritAriaAttributes(this.el);
        super.connectedCallback();
    }
    renderHiddenButton() {
        const formEl = (this.formEl = findFormByRef(this.form, this.el));
        if (!formEl)
            return;
        const { formButtonEl } = this;
        if (formButtonEl !== null && formEl.contains(formButtonEl))
            return;
        const newFormButtonEl = (this.formButtonEl = document.createElement('button'));
        newFormButtonEl.type = 'submit';
        newFormButtonEl.style.display = 'none';
        newFormButtonEl.disabled = this.disabled;
        formEl.appendChild(newFormButtonEl);
    }
    submitForm(ev) {
        if (this.formEl && this.formButtonEl) {
            ev.preventDefault();
            this.formButtonEl.click();
        }
    }
    handleClick = (ev) => {
        if (this.type === 'submit') {
            this.submitForm(ev);
        }
    };
    render() {
        this.renderHiddenButton();
        return (h(Host, { key: '2897a943aca62561b0e78b5b3f2b7b85d76f4e78', "aria-disabled": this.disabled ? 'true' : null }, h("button", { key: '92555224e33b00fb2602fdb2d19075145c0d9097', ref: (e) => (this.validationEl = e), disabled: this.disabled, class: classNames(this.variant, { [this.scale ?? '']: !!this.scale, disabled: this.disabled }), ...this.inheritedAttributes }, h("slot", { key: '637a03a73db84a63bf1e3165d57c474151f87783' }))));
    }
    static get is() { return "lmvz-button"; }
    static get encapsulation() { return "shadow"; }
    static get delegatesFocus() { return true; }
    static get originalStyleUrls() {
        return {
            "$": ["./lmvz-button.css"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["lmvz-button.css"]
        };
    }
    static get properties() {
        return {
            "ti": {
                "type": "number",
                "mutable": false,
                "complexType": {
                    "original": "number",
                    "resolved": "number",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": true,
                "setter": false,
                "reflect": true,
                "attribute": "tabindex",
                "defaultValue": "0"
            },
            "scale": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "Button.Scale",
                    "resolved": "\"default\" | \"large\" | \"small\"",
                    "references": {
                        "Button": {
                            "location": "import",
                            "path": "../../api",
                            "id": "src/api/index.d.ts::Button",
                            "referenceLocation": "Button"
                        }
                    }
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [{
                            "name": "default",
                            "text": "'default'"
                        }],
                    "text": "Scale of the button"
                },
                "getter": false,
                "setter": false,
                "reflect": true,
                "attribute": "scale",
                "defaultValue": "'default'"
            },
            "variant": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "Button.Variant",
                    "resolved": "\"primary\" | \"secondary\" | \"tertiary\"",
                    "references": {
                        "Button": {
                            "location": "import",
                            "path": "../../api",
                            "id": "src/api/index.d.ts::Button",
                            "referenceLocation": "Button"
                        }
                    }
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [{
                            "name": "default",
                            "text": "'secondary', since the primary button should be marked as such in context"
                        }],
                    "text": "Variant of the button"
                },
                "getter": false,
                "setter": false,
                "reflect": true,
                "attribute": "variant",
                "defaultValue": "'secondary'"
            },
            "disabled": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [{
                            "name": "default",
                            "text": "false"
                        }],
                    "text": "Whether the button is disabled"
                },
                "getter": false,
                "setter": false,
                "reflect": true,
                "attribute": "disabled",
                "defaultValue": "false"
            },
            "type": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "'submit' | 'button'",
                    "resolved": "\"button\" | \"submit\"",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "type",
                "defaultValue": "'button'"
            },
            "form": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "FormRef",
                    "resolved": "HTMLFormElement | string | undefined",
                    "references": {
                        "FormRef": {
                            "location": "import",
                            "path": "../../api",
                            "id": "src/api/index.d.ts::FormRef",
                            "referenceLocation": "FormRef"
                        }
                    }
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "The HTML form element or form element id. Used to submit a form when the button is not a child of the form."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "form"
            }
        };
    }
    static get events() {
        return [{
                "method": "lmvzActivation",
                "name": "lmvzActivation",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": "Event emitted when the button is activated, either by a click or by pressing \"Enter\" when the button is focused."
                },
                "complexType": {
                    "original": "void",
                    "resolved": "void",
                    "references": {}
                }
            }];
    }
    static get elementRef() { return "el"; }
}
