import { Host, h } from "@stencil/core";
import { randomIdGenerator } from "../../../global/utils/randomIdGenerator";
import { ButtonSize } from "./button-size.enum";
import { ButtonType } from "./button-type.enum";
import { ButtonVariation } from "./button-variation.enum";
/**
 * @slot default - Ska vara en textnod
 * @slot icon - Ska vara en ikon (eller en ikonlik) komponent
 * @slot icon-secondary - Ska vara en ikon (eller en ikonlik) komponent
 *
 * @enums ButtonSize - button-size.enum.ts
 * @enums ButtonType - button-type.enum.ts
 * @enums ButtonVariation - button-variation.enum.ts
 * @swedishName Knapp
 */
export class Button {
    constructor() {
        this.hasIcon = undefined;
        this.hasIconSecondary = undefined;
        this.isFullSize = undefined;
        this.afSize = ButtonSize.MEDIUM;
        this.afTabindex = undefined;
        this.afVariation = ButtonVariation.PRIMARY;
        this.afType = ButtonType.BUTTON;
        this.afId = randomIdGenerator('digi-button');
        this.afAriaLabel = undefined;
        this.afAriaLabelledby = undefined;
        this.afAriaControls = undefined;
        this.afForm = undefined;
        this.afAriaPressed = undefined;
        this.afAriaExpanded = undefined;
        this.afAriaHaspopup = undefined;
        this.afAriaCurrent = undefined;
        this.afRole = undefined;
        this.afAriaChecked = undefined;
        this.afLang = undefined;
        this.afDir = undefined;
        this.afFullWidth = false;
        this.afAutofocus = undefined;
        this.afInputRef = undefined;
    }
    fullWidthHandler() {
        this.isFullSize = this.afFullWidth;
    }
    /**
     * Hämta en referens till buttonelementet. Bra för att t.ex. sätta fokus programmatiskt.
     * @en Returns a reference to the button element. Handy for setting focus programmatically.
     */
    async afMGetButtonElement() {
        return this._button;
    }
    componentWillLoad() {
        this.setHasIcon();
        this.fullWidthHandler();
    }
    componentWillUpdate() {
        this.setHasIcon();
    }
    componentDidLoad() {
        this.afOnReady.emit();
    }
    setHasIcon() {
        const icon = !!this.hostElement.querySelector('[slot="icon"]');
        const iconSecondary = !!this.hostElement.querySelector('[slot="icon-secondary"]');
        if (icon) {
            this.hasIcon = icon;
        }
        if (iconSecondary) {
            this.hasIconSecondary = iconSecondary;
        }
    }
    get cssModifiers() {
        return {
            [`digi-button--variation-${this.afVariation}`]: !!this.afVariation,
            [`digi-button--size-${this.afSize}`]: !!this.afSize,
            'digi-button--icon': this.hasIcon,
            'digi-button--icon-secondary': this.hasIconSecondary,
            'digi-button--full-width': this.isFullSize
        };
    }
    get pressedState() {
        if (this.afAriaPressed === null || this.afAriaPressed === undefined) {
            return;
        }
        return this.afAriaPressed ? 'true' : 'false';
    }
    get expandedState() {
        if (this.afAriaExpanded === null || this.afAriaExpanded === undefined) {
            return;
        }
        return this.afAriaExpanded ? 'true' : 'false';
    }
    get hasPopup() {
        if (this.afAriaHaspopup === null || this.afAriaHaspopup === undefined) {
            return;
        }
        return this.afAriaHaspopup ? 'true' : 'false';
    }
    clickHandler(e) {
        this.afOnClick.emit(e);
    }
    focusHandler(e) {
        this.afOnFocus.emit(e);
    }
    blurHandler(e) {
        this.afOnBlur.emit(e);
    }
    render() {
        return (h(Host, { key: '3a398d75ad83e3caa9ec54928544d5bf8315d30f' }, h("button", { key: '2159552d7e8064acbb6da5c02c28ead3d4985e85', class: Object.assign({ 'digi-button': true }, this.cssModifiers), type: this.afType, role: this.afRole, ref: (el) => {
                var _a, _b, _c;
                this._button = el;
                (_a = this === null || this === void 0 ? void 0 : this.afInputRef) === null || _a === void 0 ? void 0 : _a.call(this, el);
                // Stencil has a bug wiith form attribute so we need to set it like this
                // https://github.com/ionic-team/stencil/issues/2703
                this.afForm
                    ? (_b = this._button) === null || _b === void 0 ? void 0 : _b.setAttribute('form', this.afForm)
                    : (_c = this._button) === null || _c === void 0 ? void 0 : _c.removeAttribute('form');
            }, id: this.afId, tabindex: this.afTabindex, "aria-label": this.afAriaLabel, "aria-labelledby": this.afAriaLabelledby, "aria-controls": this.afAriaControls, "aria-pressed": this.pressedState, "aria-expanded": this.expandedState, "aria-haspopup": this.hasPopup, "aria-current": this.afAriaCurrent, "aria-checked": this.afAriaChecked, onClick: (e) => this.clickHandler(e), onFocus: (e) => this.focusHandler(e), onBlur: (e) => this.blurHandler(e), autoFocus: this.afAutofocus ? this.afAutofocus : null, form: this.afForm, lang: this.afLang, dir: this.afDir }, this.hasIcon && (h("span", { key: '1188d5cb005a51e4e065b70663d06877db3a1477', class: "digi-button__icon" }, h("slot", { key: 'f90319563c18e1f82fa13f478b4d4d13ce3e9bf7', name: "icon" }))), h("span", { key: '17dce8eed2e845ca6166cf85a1c0252c2c0b8037', class: "digi-button__text" }, h("slot", { key: '2f637e48b837ecd0f0f2333349f328c497aee650' })), this.hasIconSecondary && (h("span", { key: '49ffd3361b0cc00c074e1ce332dab2de33127fcc', class: "digi-button__icon digi-button__icon--secondary" }, h("slot", { key: '367d3ba37e2fd0b7e83d600f35d02d4df303c1c0', name: "icon-secondary" }))))));
    }
    static get is() { return "digi-button"; }
    static get encapsulation() { return "scoped"; }
    static get originalStyleUrls() {
        return {
            "$": ["button.scss"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["button.css"]
        };
    }
    static get properties() {
        return {
            "afSize": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "`${ButtonSize}`",
                    "resolved": "\"medium\" | \"small\"",
                    "references": {
                        "ButtonSize": {
                            "location": "import",
                            "path": "./button-size.enum",
                            "id": "src/components/_button/button/button-size.enum.ts::ButtonSize"
                        }
                    }
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [{
                            "name": "en",
                            "text": "Set button size. Defaults to medium size."
                        }],
                    "text": "S\u00E4tter knappens storlek. 'medium' \u00E4r f\u00F6rvalt."
                },
                "getter": false,
                "setter": false,
                "attribute": "af-size",
                "reflect": false,
                "defaultValue": "ButtonSize.MEDIUM"
            },
            "afTabindex": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [{
                            "name": "en",
                            "text": "Sets a tabindex."
                        }],
                    "text": "S\u00E4tter attributet 'tabindex'."
                },
                "getter": false,
                "setter": false,
                "attribute": "af-tabindex",
                "reflect": false
            },
            "afVariation": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "`${ButtonVariation}`",
                    "resolved": "\"function\" | \"primary\" | \"secondary\" | \"tertiary\"",
                    "references": {
                        "ButtonVariation": {
                            "location": "import",
                            "path": "./button-variation.enum",
                            "id": "src/components/_button/button/button-variation.enum.ts::ButtonVariation"
                        }
                    }
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [{
                            "name": "en",
                            "text": "Set button variation. If set to FUNCTION, the button also needs an icon."
                        }],
                    "text": "S\u00E4tt variant. Om varianten \u00E4r 'tertiary' s\u00E5 kr\u00E4vs \u00E4ven en ikon."
                },
                "getter": false,
                "setter": false,
                "attribute": "af-variation",
                "reflect": false,
                "defaultValue": "ButtonVariation.PRIMARY"
            },
            "afType": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "`${ButtonType}`",
                    "resolved": "\"button\" | \"reset\" | \"submit\"",
                    "references": {
                        "ButtonType": {
                            "location": "import",
                            "path": "./button-type.enum",
                            "id": "src/components/_button/button/button-type.enum.ts::ButtonType"
                        }
                    }
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [{
                            "name": "en",
                            "text": "Set button `type` attribute."
                        }],
                    "text": "S\u00E4tt attributet 'type'."
                },
                "getter": false,
                "setter": false,
                "attribute": "af-type",
                "reflect": false,
                "defaultValue": "ButtonType.BUTTON"
            },
            "afId": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [{
                            "name": "en",
                            "text": "Input id attribute. Defaults to random string."
                        }],
                    "text": "S\u00E4tter attributet 'id'. Om inget v\u00E4ljs s\u00E5 skapas ett slumpm\u00E4ssigt id."
                },
                "getter": false,
                "setter": false,
                "attribute": "af-id",
                "reflect": false,
                "defaultValue": "randomIdGenerator('digi-button')"
            },
            "afAriaLabel": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [{
                            "name": "en",
                            "text": "Set button `aria-label` attribute."
                        }],
                    "text": "S\u00E4tt attributet 'aria-label'."
                },
                "getter": false,
                "setter": false,
                "attribute": "af-aria-label",
                "reflect": false
            },
            "afAriaLabelledby": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [{
                            "name": "en",
                            "text": "Set button `aria-labelledby` attribute."
                        }],
                    "text": "S\u00E4tt attributet 'aria-labelledby'."
                },
                "getter": false,
                "setter": false,
                "attribute": "af-aria-labelledby",
                "reflect": false
            },
            "afAriaControls": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [{
                            "name": "en",
                            "text": "Set button `aria-controls` attribute."
                        }],
                    "text": "S\u00E4tter attributet 'aria-controls'."
                },
                "getter": false,
                "setter": false,
                "attribute": "af-aria-controls",
                "reflect": false
            },
            "afForm": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [{
                            "name": "en",
                            "text": "Set button `form` attribute."
                        }],
                    "text": "S\u00E4tter attributet 'form'."
                },
                "getter": false,
                "setter": false,
                "attribute": "af-form",
                "reflect": false
            },
            "afAriaPressed": {
                "type": "boolean",
                "mutable": true,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [{
                            "name": "en",
                            "text": "Set button `aria-pressed` attribute."
                        }],
                    "text": "S\u00E4tter attributet 'aria-pressed'."
                },
                "getter": false,
                "setter": false,
                "attribute": "af-aria-pressed",
                "reflect": false
            },
            "afAriaExpanded": {
                "type": "boolean",
                "mutable": true,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [{
                            "name": "en",
                            "text": "Set button `aria-expanded` attribute."
                        }],
                    "text": "S\u00E4tter attributet 'aria-expanded'."
                },
                "getter": false,
                "setter": false,
                "attribute": "af-aria-expanded",
                "reflect": false
            },
            "afAriaHaspopup": {
                "type": "boolean",
                "mutable": true,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [{
                            "name": "en",
                            "text": "Set button `aria-haspopup` attribute."
                        }],
                    "text": "S\u00E4tter attributet 'aria-haspopup'."
                },
                "getter": false,
                "setter": false,
                "attribute": "af-aria-haspopup",
                "reflect": false
            },
            "afAriaCurrent": {
                "type": "string",
                "mutable": true,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [{
                            "name": "en",
                            "text": "Set button `aria-current` attribute."
                        }],
                    "text": "S\u00E4tter attributet 'aria-current'."
                },
                "getter": false,
                "setter": false,
                "attribute": "af-aria-current",
                "reflect": false
            },
            "afRole": {
                "type": "string",
                "mutable": true,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [{
                            "name": "en",
                            "text": "Set button `role` attribute."
                        }],
                    "text": "S\u00E4tter attributet 'role'."
                },
                "getter": false,
                "setter": false,
                "attribute": "af-role",
                "reflect": false
            },
            "afAriaChecked": {
                "type": "boolean",
                "mutable": true,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [{
                            "name": "en",
                            "text": "Set button `aria-checked` attribute. For example, use this togheter with role=\"menuitemradio\" or role=\"menuitemcheckbox\""
                        }],
                    "text": "S\u00E4tter attributet 'aria-checked'. Anv\u00E4nd till exempel tillsammans med role=\"menuitemradio\" eller role=\"menuitemcheckbox\""
                },
                "getter": false,
                "setter": false,
                "attribute": "af-aria-checked",
                "reflect": false
            },
            "afLang": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [{
                            "name": "en",
                            "text": "Set button `lang` attribute."
                        }],
                    "text": "S\u00E4tter attributet 'lang'."
                },
                "getter": false,
                "setter": false,
                "attribute": "af-lang",
                "reflect": false
            },
            "afDir": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [{
                            "name": "en",
                            "text": "Set button `dir` attribute."
                        }],
                    "text": "S\u00E4tter attributet 'dir'."
                },
                "getter": false,
                "setter": false,
                "attribute": "af-dir",
                "reflect": false
            },
            "afFullWidth": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [{
                            "name": "en",
                            "text": "Set button width to 100%."
                        }],
                    "text": "S\u00E4tter knappens bredd till 100%."
                },
                "getter": false,
                "setter": false,
                "attribute": "af-full-width",
                "reflect": false,
                "defaultValue": "false"
            },
            "afAutofocus": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [{
                            "name": "en",
                            "text": "Input autofocus attribute"
                        }],
                    "text": "S\u00E4tter attributet 'autofocus'."
                },
                "getter": false,
                "setter": false,
                "attribute": "af-autofocus",
                "reflect": false
            },
            "afInputRef": {
                "type": "unknown",
                "mutable": false,
                "complexType": {
                    "original": "(ref: HTMLButtonElement) => void",
                    "resolved": "(ref: HTMLButtonElement) => void",
                    "references": {
                        "HTMLButtonElement": {
                            "location": "global",
                            "id": "global::HTMLButtonElement"
                        }
                    }
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [{
                            "name": "en",
                            "text": "Reference for button"
                        }],
                    "text": "Referens till knappen"
                },
                "getter": false,
                "setter": false
            }
        };
    }
    static get states() {
        return {
            "hasIcon": {},
            "hasIconSecondary": {},
            "isFullSize": {}
        };
    }
    static get events() {
        return [{
                "method": "afOnClick",
                "name": "afOnClick",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [{
                            "name": "en",
                            "text": "The button element's 'onclick' event."
                        }],
                    "text": "Buttonelementets 'onclick'-event."
                },
                "complexType": {
                    "original": "MouseEvent",
                    "resolved": "MouseEvent",
                    "references": {
                        "MouseEvent": {
                            "location": "global",
                            "id": "global::MouseEvent"
                        }
                    }
                }
            }, {
                "method": "afOnFocus",
                "name": "afOnFocus",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [{
                            "name": "en",
                            "text": "The button element's 'onfocus' event."
                        }],
                    "text": "Buttonelementets 'onfocus'-event."
                },
                "complexType": {
                    "original": "FocusEvent",
                    "resolved": "FocusEvent",
                    "references": {
                        "FocusEvent": {
                            "location": "global",
                            "id": "global::FocusEvent"
                        }
                    }
                }
            }, {
                "method": "afOnBlur",
                "name": "afOnBlur",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [{
                            "name": "en",
                            "text": "The button element's 'onblur' event."
                        }],
                    "text": "Buttonelementets 'onblur'-event."
                },
                "complexType": {
                    "original": "any",
                    "resolved": "any",
                    "references": {}
                }
            }, {
                "method": "afOnReady",
                "name": "afOnReady",
                "bubbles": false,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [{
                            "name": "en",
                            "text": "When the component and slots are loaded and initialized this event will trigger."
                        }],
                    "text": "N\u00E4r komponenten och slotsen \u00E4r laddade och initierade s\u00E5 skickas detta eventet."
                },
                "complexType": {
                    "original": "any",
                    "resolved": "any",
                    "references": {}
                }
            }];
    }
    static get methods() {
        return {
            "afMGetButtonElement": {
                "complexType": {
                    "signature": "() => Promise<HTMLButtonElement>",
                    "parameters": [],
                    "references": {
                        "Promise": {
                            "location": "global",
                            "id": "global::Promise"
                        },
                        "HTMLButtonElement": {
                            "location": "global",
                            "id": "global::HTMLButtonElement"
                        }
                    },
                    "return": "Promise<HTMLButtonElement>"
                },
                "docs": {
                    "text": "H\u00E4mta en referens till buttonelementet. Bra f\u00F6r att t.ex. s\u00E4tta fokus programmatiskt.",
                    "tags": [{
                            "name": "en",
                            "text": "Returns a reference to the button element. Handy for setting focus programmatically."
                        }]
                }
            }
        };
    }
    static get elementRef() { return "hostElement"; }
    static get watchers() {
        return [{
                "propName": "afFullWidth",
                "methodName": "fullWidthHandler"
            }];
    }
}
