import { Host, h } from "@stencil/core";
export class Button {
    constructor() {
        /**
         * Sets the button to active. This lets you keep the hover state look even when the focus is lost
         */
        this.active = false;
        /**
         * Accessible label for the button
         */
        this.ariaLabel = '';
        /**
         * The button context
         * Options are: `"primary"`, `"secondary"`, "text"`, `"icon"`, and `"free"`.
         * Default is "primary".
         */
        this.context = 'primary';
        /**
         * The type of the button matching the native button types.
         * Possible values are: `"submit"`, `"reset"` and `"button"`.
         * Default value is: `"button"`
         */
        this.type = 'button';
    }
    onBlur() {
        this.anjBlur.emit();
    }
    onFocus() {
        this.anjFocus.emit();
    }
    attrs(tag) {
        const baseAttrs = (tag === 'button')
            ? {
                type: this.type
            }
            : {
                download: this.download,
                href: this.href,
                rel: this.rel,
                target: this.target
            };
        // Always set the aria label to avoid it repeating for reasons I can't figure out https://git.zias.io/ui-foundation/anjuna/issues/595 -r
        baseAttrs['aria-label'] = this.ariaLabel ? this.ariaLabel : this.element.textContent;
        const disabledAttrs = this.disabled ?
            {
                'aria-disabled': 'true',
                disabled: true,
                tabindex: -1,
            } : {};
        return Object.assign(this.dataAttributes(), disabledAttrs, baseAttrs);
    }
    dataAttributes() {
        const attrMap = {};
        for (const key in this.element.attributes) {
            if (this.element.attributes[key].nodeName) {
                const name = this.element.attributes[key].nodeName;
                const value = this.element.attributes[key].nodeValue;
                if (name.includes('data-')) {
                    attrMap[name] = value;
                }
            }
        }
        return attrMap;
    }
    render() {
        const TagType = this.href === undefined ? 'button' : 'a';
        return (h(Host, null,
            h(TagType, Object.assign({ class: "anj-button" }, this.attrs(TagType), { onFocus: () => this.onFocus(), onBlur: () => this.onBlur() }),
                h("slot", { name: "icon-only" }),
                h("slot", { name: "start" }),
                h("slot", null),
                h("slot", { name: "end" }),
                h("div", { class: "anj-focus-overlay" }),
                h("anj-ripple-effect", { start: 0.15, end: this.context === 'free' ? 0.4 : 1 }))));
    }
    static get is() { return "anj-button"; }
    static get encapsulation() { return "scoped"; }
    static get originalStyleUrls() { return {
        "$": ["button.scss"]
    }; }
    static get styleUrls() { return {
        "$": ["button.css"]
    }; }
    static get properties() { return {
        "active": {
            "type": "boolean",
            "mutable": false,
            "complexType": {
                "original": "boolean",
                "resolved": "boolean",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": "Sets the button to active. This lets you keep the hover state look even when the focus is lost"
            },
            "attribute": "active",
            "reflect": true,
            "defaultValue": "false"
        },
        "ariaLabel": {
            "type": "string",
            "mutable": false,
            "complexType": {
                "original": "string",
                "resolved": "string",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": "Accessible label for the button"
            },
            "attribute": "aria-label",
            "reflect": false,
            "defaultValue": "''"
        },
        "context": {
            "type": "string",
            "mutable": false,
            "complexType": {
                "original": "'primary' | 'secondary' | 'text' | 'icon' | 'free'",
                "resolved": "\"free\" | \"icon\" | \"primary\" | \"secondary\" | \"text\"",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": "The button context\nOptions are: `\"primary\"`, `\"secondary\"`, \"text\"`, `\"icon\"`, and `\"free\"`.\nDefault is \"primary\"."
            },
            "attribute": "context",
            "reflect": true,
            "defaultValue": "'primary'"
        },
        "disabled": {
            "type": "boolean",
            "mutable": false,
            "complexType": {
                "original": "boolean",
                "resolved": "boolean",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": "Can the user interact with the button?"
            },
            "attribute": "disabled",
            "reflect": true
        },
        "download": {
            "type": "string",
            "mutable": false,
            "complexType": {
                "original": "string | undefined",
                "resolved": "string",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": "Is the url a download url"
            },
            "attribute": "download",
            "reflect": false
        },
        "href": {
            "type": "string",
            "mutable": false,
            "complexType": {
                "original": "string",
                "resolved": "string",
                "references": {}
            },
            "required": false,
            "optional": true,
            "docs": {
                "tags": [],
                "text": "Contains a URL or a URL fragment that the hyperlink points to."
            },
            "attribute": "href",
            "reflect": false
        },
        "rel": {
            "type": "string",
            "mutable": false,
            "complexType": {
                "original": "string | undefined",
                "resolved": "string",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": "For href buttons only"
            },
            "attribute": "rel",
            "reflect": false
        },
        "target": {
            "type": "string",
            "mutable": false,
            "complexType": {
                "original": "string | undefined",
                "resolved": "string",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": "For href buttons only, the target"
            },
            "attribute": "target",
            "reflect": false
        },
        "type": {
            "type": "string",
            "mutable": false,
            "complexType": {
                "original": "'submit' | 'reset' | 'button'",
                "resolved": "\"button\" | \"reset\" | \"submit\"",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": "The type of the button matching the native button types.\nPossible values are: `\"submit\"`, `\"reset\"` and `\"button\"`.\nDefault value is: `\"button\"`"
            },
            "attribute": "type",
            "reflect": false,
            "defaultValue": "'button'"
        }
    }; }
    static get events() { return [{
            "method": "anjBlur",
            "name": "anjBlur",
            "bubbles": true,
            "cancelable": true,
            "composed": true,
            "docs": {
                "tags": [],
                "text": "Fires when the button is blurred"
            },
            "complexType": {
                "original": "void",
                "resolved": "void",
                "references": {}
            }
        }, {
            "method": "anjFocus",
            "name": "anjFocus",
            "bubbles": true,
            "cancelable": true,
            "composed": true,
            "docs": {
                "tags": [],
                "text": "Fires when the button is focused"
            },
            "complexType": {
                "original": "void",
                "resolved": "void",
                "references": {}
            }
        }]; }
    static get elementRef() { return "element"; }
}
