import { h, Fragment, Host } from "@stencil/core";
import { LinkButtonVariation } from "./link-button-variation.enum";
/**
 * @slot default - Ska vara en textnod
 * @slot notification - Ska vara digi-badge-notification
 * @enums LinkButtonVariation - link-button-variation.enum.ts
 * @swedishName Länkknapp
 */
export class LinkButton {
    constructor() {
        this.afHref = undefined;
        this.afAriaLabel = undefined;
        this.afVariation = LinkButtonVariation.PRIMARY;
        this.afOverrideLink = false;
        this.afLinkContainer = false;
        this.afHideIcon = false;
        this.afFullwidth = false;
        this.hasNotification = undefined;
    }
    clickLinkHandler(e) {
        if (this.afOverrideLink) {
            e.preventDefault();
        }
        this.afOnClick.emit(e);
    }
    initRouting() {
        const tabIndex = this.hostElement.getAttribute('tabIndex');
        !!tabIndex && tabIndex === '0' && this._link.setAttribute('tabIndex', '-1');
    }
    componentWillLoad() {
        this.setHasNotification();
    }
    componentWillUpdate() {
        this.setHasNotification();
    }
    componentDidLoad() {
        this.initRouting();
    }
    setHasNotification() {
        const notification = !!this.hostElement.querySelector('[slot="notification"]');
        if (notification) {
            this.hasNotification = notification;
        }
    }
    get cssModifiers() {
        return {
            'digi-link-button--primary': this.afVariation === LinkButtonVariation.PRIMARY,
            'digi-link-button--secondary': this.afVariation === LinkButtonVariation.SECONDARY,
            'digi-link-button--primary-alt': this.afVariation === LinkButtonVariation.PRIMARY_ALT,
            'digi-link-button--secondary-alt': this.afVariation === LinkButtonVariation.SECONDARY_ALT,
            'digi-link-button--hide-icon': this.afHideIcon,
            'digi-link-button--fullwidth': this.afFullwidth
        };
    }
    render() {
        return (h(Host, { key: 'b7df717440d77f93d4409dac41d8c20e76060a79', class: Object.assign({ 'digi-link-button': true }, this.cssModifiers) }, !this.afLinkContainer && (h("a", { key: 'c9b58e0ed39b37bf25cef164e4cd40a53fbdd8f1', href: this.afHref, "aria-label": this.afAriaLabel, onClick: (e) => this.clickLinkHandler(e), ref: (el) => (this._link = el) }, h("span", { key: '5062e81175450f27a31f49a9814a6b01cb2c0eb9', class: "digi-link-button__text" }, h("slot", { key: 'f3734c85aac1e666a3bf33c9bb2c113a56df8c34' })), this.hasNotification && h("slot", { key: 'c86d00afcec32b45f09f658df729910e58fd2202', name: "notification" }), h("digi-icon-chevron-right", { key: '9f09e448bedd9df9931164aae7c8855d5f8f9a79', class: "digi-link-button__icon" }))), this.afLinkContainer && (h(Fragment, { key: 'be1a5ddec8edc54a6f683f8b7e3534a58b7feaa2' }, h("slot", { key: 'd26912444efb155c3c2b2866d4b930b58cf509ec' }), this.hasNotification && h("slot", { key: 'a2ff785749f8334b515b0e0fbed1c64113dca870', name: "notification" })))));
    }
    static get is() { return "digi-link-button"; }
    static get encapsulation() { return "scoped"; }
    static get originalStyleUrls() {
        return {
            "$": ["link-button.scss"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["link-button.css"]
        };
    }
    static get properties() {
        return {
            "afHref": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": true,
                "optional": false,
                "docs": {
                    "tags": [{
                            "name": "en",
                            "text": "Set `href` attribute"
                        }],
                    "text": "S\u00E4tter attributet 'href'"
                },
                "getter": false,
                "setter": false,
                "attribute": "af-href",
                "reflect": false
            },
            "afAriaLabel": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [{
                            "name": "en",
                            "text": "Sets 'aria-label' attribute."
                        }],
                    "text": "S\u00E4tter attributet 'aria-label'."
                },
                "getter": false,
                "setter": false,
                "attribute": "af-aria-label",
                "reflect": false
            },
            "afVariation": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "LinkButtonVariation",
                    "resolved": "LinkButtonVariation.PRIMARY | LinkButtonVariation.PRIMARY_ALT | LinkButtonVariation.SECONDARY | LinkButtonVariation.SECONDARY_ALT",
                    "references": {
                        "LinkButtonVariation": {
                            "location": "import",
                            "path": "./link-button-variation.enum",
                            "id": "src/components/_link/link-button/link-button-variation.enum.ts::LinkButtonVariation"
                        }
                    }
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [{
                            "name": "en",
                            "text": "Set variation. Can be 'primary', 'secondary', 'primary-alt' or 'secondary-alt'"
                        }],
                    "text": "S\u00E4tter variant. Kan vara 'primary', 'secondary', 'primary-alt' eller 'secondary-alt'"
                },
                "getter": false,
                "setter": false,
                "attribute": "af-variation",
                "reflect": false,
                "defaultValue": "LinkButtonVariation.PRIMARY"
            },
            "afOverrideLink": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [{
                            "name": "en",
                            "text": "Override default link behavior. Should only be used if default link behaviour is a problem with e.g. routing"
                        }],
                    "text": "Kringg\u00E5r l\u00E4nkens vanliga beteende.\nB\u00F6r endast anv\u00E4ndas om det vanliga beteendet \u00E4r problematiskt pga dynamisk routing eller liknande."
                },
                "getter": false,
                "setter": false,
                "attribute": "af-override-link",
                "reflect": false,
                "defaultValue": "false"
            },
            "afLinkContainer": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [{
                            "name": "en",
                            "text": "Set to true if using Angular"
                        }],
                    "text": "S\u00E4tt till true om du anv\u00E4nder Angular, se exempelkod under '\u00D6versikt'"
                },
                "getter": false,
                "setter": false,
                "attribute": "af-link-container",
                "reflect": false,
                "defaultValue": "false"
            },
            "afHideIcon": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [{
                            "name": "en",
                            "text": "Hide icon."
                        }],
                    "text": "D\u00F6lj ikonen."
                },
                "getter": false,
                "setter": false,
                "attribute": "af-hide-icon",
                "reflect": false,
                "defaultValue": "false"
            },
            "afFullwidth": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [{
                            "name": "en",
                            "text": "Fullwidth."
                        }],
                    "text": "Fullbredd."
                },
                "getter": false,
                "setter": false,
                "attribute": "af-fullwidth",
                "reflect": false,
                "defaultValue": "false"
            }
        };
    }
    static get states() {
        return {
            "hasNotification": {}
        };
    }
    static get events() {
        return [{
                "method": "afOnClick",
                "name": "afOnClick",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [{
                            "name": "en",
                            "text": "The link element's 'onclick' event."
                        }],
                    "text": "L\u00E4nkelementets 'onclick'-event."
                },
                "complexType": {
                    "original": "MouseEvent",
                    "resolved": "MouseEvent",
                    "references": {
                        "MouseEvent": {
                            "location": "global",
                            "id": "global::MouseEvent"
                        }
                    }
                }
            }];
    }
    static get elementRef() { return "hostElement"; }
}
