import { h, Host } from "@stencil/core";
import { InfoCardMultiType } from "./info-card-multi-type.enum";
import { logger } from "../../../global/utils/logger";
import { TagMediaIcon } from "../../_tag/tag-media/tag-media-icon.enum";
/**
 * @slot default - Kan innehålla vad som helst
 *
 * @enums myEnum - info-card-multi-myEnum.enum.ts
 *
 * @swedishName Multikort
 */
export class InfoCardMulti {
    constructor() {
        this.afSrc = undefined;
        this.afAlt = undefined;
        this.afTagText = undefined;
        this.afTagIcon = TagMediaIcon.NEWS;
        this.afHeading = undefined;
        this.afHeadingLevel = undefined;
        this.afType = InfoCardMultiType.MEDIA;
        this.afLinkHref = undefined;
        this.hideVisitedColor = undefined;
        this.activeLink = false;
    }
    componentWillLoad() {
        this.validateHeading();
    }
    validateHeading() {
        if (!this.afHeading || !this.afHeadingLevel) {
            logger.warn(`digi-info-card must have a heading and a heading level. Please add af-heading and af-heading-level`, this.hostElement);
        }
    }
    clickLinkHandler(e) {
        this.afOnClickLink.emit(e);
    }
    get cssModifiers() {
        return {
            'digi-info-card-multi--media': this.afType === InfoCardMultiType.MEDIA,
            'digi-info-card-multi--related': this.afType === InfoCardMultiType.RELATED,
            'digi-info-card-multi--entry': this.afType === InfoCardMultiType.ENTRY,
            'digi-info-card-multi--hide-visited': this.hideVisitedColor
        };
    }
    render() {
        return (h(Host, { key: '6e86c3b96afe06bc97aa6369bb53db6c607046e7' }, h("div", { key: '9e28770ffebbea882a5ede870ca79d9757de9d2d', class: Object.assign({ 'digi-info-card-multi': true }, this.cssModifiers) }, h("div", { key: 'bf58e7f90fa33731a3cf25a07b7013c45cdc7857', class: "digi-info-card-multi__content" }, this.afType == InfoCardMultiType.MEDIA && (h("div", { key: '0a91943c8086fb9f463e2da8c1f0e7b2c24f9ffa', class: "digi-info-card-multi__image" }, h("digi-media-image", { key: '5985ea0130334c9ed194600b30ada961034fa8c9', afUnlazy: true, afFullwidth: true, "af-src": this.afSrc, afAlt: this.afAlt }, h("div", { key: '2ba0f3bd7ac2bd4f06c726b7f5b59ab18e5f29f6', class: "digi-info-card-multi__tag" }, h("digi-tag-media", { key: '6f01d9340fe572086a0076ad8cc6f9705a7e2bec', "af-icon": this.afTagIcon, afText: this.afTagText }))))), h("div", { key: '81b5c079fffa56ae0606343b596302c74c2cbd82', class: "digi-info-card-multi__text" }, h(this.afHeadingLevel, { key: '66e4f9ce65b09d50e783ea79bb922371be6416ea', class: "digi-info-card-multi__heading" }, h("a", { key: '4f5de4bf0cc5185238af8a355b9a7f54a3b3b4a3', class: "digi-info-card-multi__link", href: this.afLinkHref, onMouseEnter: () => (this.activeLink = true), onFocus: () => (this.activeLink = true), onMouseLeave: () => (this.activeLink = false), onBlur: () => (this.activeLink = false), onClick: (e) => this.clickLinkHandler(e) }, this.afHeading)), h("digi-typography", { key: '0e47d96e70e0fb698330ad7c433a290e6c847e2b' }, h("slot", { key: 'a9b62dc9e1f3797850919da12b88ae5cd348e378' })))))));
    }
    static get is() { return "digi-info-card-multi"; }
    static get encapsulation() { return "scoped"; }
    static get originalStyleUrls() {
        return {
            "$": ["info-card-multi.scss"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["info-card-multi.css"]
        };
    }
    static get properties() {
        return {
            "afSrc": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [{
                            "name": "en",
                            "text": "Set `src` attribute."
                        }],
                    "text": "S\u00E4tter attributet 'src'."
                },
                "getter": false,
                "setter": false,
                "attribute": "af-src",
                "reflect": false
            },
            "afAlt": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [{
                            "name": "en",
                            "text": "Set `alt` attribute."
                        }],
                    "text": "S\u00E4tter attributet 'alt'."
                },
                "getter": false,
                "setter": false,
                "attribute": "af-alt",
                "reflect": false
            },
            "afTagText": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [{
                            "name": "en",
                            "text": "set tag for image"
                        }],
                    "text": "S\u00E4tter Taggtext p\u00E5 bild"
                },
                "getter": false,
                "setter": false,
                "attribute": "af-tag-text",
                "reflect": false
            },
            "afTagIcon": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "TagMediaIcon",
                    "resolved": "TagMediaIcon.FILM | TagMediaIcon.NEWS | TagMediaIcon.PLAYLIST | TagMediaIcon.PODCAST | TagMediaIcon.WEBINAR | TagMediaIcon.WEBTV",
                    "references": {
                        "TagMediaIcon": {
                            "location": "import",
                            "path": "../../_tag/tag-media/tag-media-icon.enum",
                            "id": "src/components/_tag/tag-media/tag-media-icon.enum.ts::TagMediaIcon"
                        }
                    }
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [{
                            "name": "en",
                            "text": "set icon for tag"
                        }],
                    "text": "S\u00E4tter ikon f\u00F6r taggen"
                },
                "getter": false,
                "setter": false,
                "attribute": "af-tag-icon",
                "reflect": false,
                "defaultValue": "TagMediaIcon.NEWS"
            },
            "afHeading": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": true,
                "optional": false,
                "docs": {
                    "tags": [{
                            "name": "en",
                            "text": "The heading text"
                        }],
                    "text": "Rubrikens text"
                },
                "getter": false,
                "setter": false,
                "attribute": "af-heading",
                "reflect": false
            },
            "afHeadingLevel": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "InfoCardMultiHeadingLevel",
                    "resolved": "InfoCardMultiHeadingLevel.H1 | InfoCardMultiHeadingLevel.H2 | InfoCardMultiHeadingLevel.H3 | InfoCardMultiHeadingLevel.H4 | InfoCardMultiHeadingLevel.H5 | InfoCardMultiHeadingLevel.H6",
                    "references": {
                        "InfoCardMultiHeadingLevel": {
                            "location": "import",
                            "path": "./info-card-multi-heading-level.enum",
                            "id": "src/components/_info-card/info-card-multi/info-card-multi-heading-level.enum.ts::InfoCardMultiHeadingLevel"
                        }
                    }
                },
                "required": true,
                "optional": false,
                "docs": {
                    "tags": [{
                            "name": "en",
                            "text": "Set heading level (h1-h6)"
                        }],
                    "text": "S\u00E4tter rubrikens vikt (h1-h6)"
                },
                "getter": false,
                "setter": false,
                "attribute": "af-heading-level",
                "reflect": false
            },
            "afType": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "InfoCardMultiType",
                    "resolved": "InfoCardMultiType.ENTRY | InfoCardMultiType.MEDIA | InfoCardMultiType.RELATED",
                    "references": {
                        "InfoCardMultiType": {
                            "location": "import",
                            "path": "./info-card-multi-type.enum",
                            "id": "src/components/_info-card/info-card-multi/info-card-multi-type.enum.ts::InfoCardMultiType"
                        }
                    }
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [{
                            "name": "en",
                            "text": "Set info card variation. Can be 'media' or 'text'."
                        }],
                    "text": "S\u00E4tter typ. Kan vara 'media' eller 'text'."
                },
                "getter": false,
                "setter": false,
                "attribute": "af-type",
                "reflect": false,
                "defaultValue": "InfoCardMultiType.MEDIA"
            },
            "afLinkHref": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [{
                            "name": "en",
                            "text": "Link href attribute"
                        }],
                    "text": "S\u00E4tter attributet 'href' p\u00E5 l\u00E4nken"
                },
                "getter": false,
                "setter": false,
                "attribute": "af-link-href",
                "reflect": false
            },
            "hideVisitedColor": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [{
                            "name": "en",
                            "text": "If link color should change when visited"
                        }],
                    "text": "Avg\u00F6r om f\u00E4rgen p\u00E5 l\u00E4nken inte ska \u00E4ndras p\u00E5 bes\u00F6kta l\u00E4nkar"
                },
                "getter": false,
                "setter": false,
                "attribute": "hide-visited-color",
                "reflect": false
            }
        };
    }
    static get states() {
        return {
            "activeLink": {}
        };
    }
    static get events() {
        return [{
                "method": "afOnClickLink",
                "name": "afOnClickLink",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [{
                            "name": "en",
                            "text": "Link element's 'onclick' event"
                        }],
                    "text": "L\u00E4nkelementets 'onclick'-event"
                },
                "complexType": {
                    "original": "any",
                    "resolved": "any",
                    "references": {}
                }
            }];
    }
    static get elementRef() { return "hostElement"; }
    static get watchers() {
        return [{
                "propName": "afHeading",
                "methodName": "validateHeading"
            }, {
                "propName": "afHeadingLevel",
                "methodName": "validateHeading"
            }];
    }
}
