import { h } from '../edel-elements.core.js';

import { a as ButtonType } from './chunk-2e00f500.js';

var IconPosition;
(function (IconPosition) {
    IconPosition["left"] = "left";
    IconPosition["right"] = "right";
})(IconPosition || (IconPosition = {}));

class EdelButtonComponent {
    constructor() {
        this.hasHover = true;
        this.full = false;
        this.slim = false;
        this.disabled = false;
        this.icon = null;
        this.label = null;
        this.showImage = false;
        this.plain = false;
        this.iconPosition = IconPosition.left;
        this.type = ButtonType.default;
        this.autofocus = false;
        this.submit = false;
        this.noPointerEvents = false;
    }
    render() {
        if (this.submit)
            return (h("button", { class: this.getClass(), onClick: event => this.handleClick(event), type: "submit" },
                this.getIcon(this.icon),
                this.getLabel(this.label),
                this.getImage(this.showImage)));
        return (h("a", { class: this.getClass(), onClick: event => this.handleClick(event) },
            this.getIcon(this.icon),
            this.getLabel(this.label),
            this.getImage(this.showImage)));
    }
    componentDidLoad() {
        if (this.autofocus)
            this.hostElement.focus();
    }
    getLabel(content) {
        return content == null ? null : h("span", { class: "button-label" }, content);
    }
    getIcon(content) {
        return content == null ? null : (h("span", { class: "button-icon" },
            h("i", { class: `fas fa-${content}` })));
    }
    getImage(useImage) {
        return useImage == null ? null : (h("span", { class: "button-image" },
            h("slot", null)));
    }
    getClass() {
        let classes = 'button';
        if (!this.hasHover)
            classes = `${classes} button--has-no-hover`;
        if (this.full)
            classes = `${classes} button--full`;
        if (this.slim)
            classes = `${classes} button--slim`;
        if (this.disabled)
            classes = `${classes} button--disabled`;
        if (this.plain)
            classes = `${classes} button--plain`;
        if (!this.disabled)
            classes = `${classes} button--${this.type}`;
        if (this.iconPosition === IconPosition.right && this.icon != null)
            classes = `${classes} button--reversed`;
        if (this.noPointerEvents)
            classes = `${classes} no-pointer-events`;
        return classes;
    }
    handleClick(event) {
        if (this.disabled)
            return;
        this.emit.emit(event);
    }
    handleKeyDown(event) {
        if (event.which === 13 && this.type === ButtonType.primary) {
            this.handleClick();
        }
    }
    static get is() { return "edel-button"; }
    static get properties() { return {
        "autofocus": {
            "type": Boolean,
            "attr": "autofocus",
            "watchCallbacks": ["componentDidLoad"]
        },
        "disabled": {
            "type": Boolean,
            "attr": "disabled"
        },
        "full": {
            "type": Boolean,
            "attr": "full"
        },
        "hasHover": {
            "type": Boolean,
            "attr": "has-hover"
        },
        "hostElement": {
            "elementRef": true
        },
        "icon": {
            "type": String,
            "attr": "icon"
        },
        "iconPosition": {
            "type": String,
            "attr": "icon-position"
        },
        "label": {
            "type": String,
            "attr": "label"
        },
        "noPointerEvents": {
            "type": Boolean,
            "attr": "no-pointer-events"
        },
        "plain": {
            "type": Boolean,
            "attr": "plain"
        },
        "showImage": {
            "type": Boolean,
            "attr": "show-image"
        },
        "slim": {
            "type": Boolean,
            "attr": "slim"
        },
        "submit": {
            "type": Boolean,
            "attr": "submit"
        },
        "type": {
            "type": String,
            "attr": "type"
        }
    }; }
    static get events() { return [{
            "name": "emit",
            "method": "emit",
            "bubbles": true,
            "cancelable": true,
            "composed": true
        }]; }
    static get listeners() { return [{
            "name": "keydown",
            "method": "handleKeyDown"
        }]; }
}

export { EdelButtonComponent as EdelButton };
