import { r as registerInstance, h, g as getElement } from './index-148a7577.js';
import { r as randomIdGenerator } from './randomIdGenerator.util-56406f2e.js';
import { l as logger } from './logger.util-ede3c48a.js';
import { T as ToolsFeedbackBannerHeadingLevel, a as ToolsFeedbackBannerType } from './tools-feedback-banner-type.enum-74b4e580.js';
import { L as LayoutBlockVariation } from './layout-block-variation.enum-b7a20db4.js';

const toolsFeedbackBannerCss = ".sc-digi-tools-feedback-banner-h .digi-tools-feedback-banner.sc-digi-tools-feedback-banner{background-color:var(--digi--color--background--pop-out);font-family:var(--digi--global--typography--font-family--default)}.sc-digi-tools-feedback-banner-h .digi-tools-feedback-banner__heading.sc-digi-tools-feedback-banner{font-size:var(--digi--typography--heading-2--font-size--desktop);font-weight:var(--digi--typography--heading-2--font-weight--desktop);margin-top:0}@media (max-width: 47.9375rem){.sc-digi-tools-feedback-banner-h .digi-tools-feedback-banner__heading.sc-digi-tools-feedback-banner{font-size:var(--digi--typography--heading-2--font-size--mobile);font-weight:var(--digi--typography--heading-2--font-weight--mobile)}}.sc-digi-tools-feedback-banner-h .digi-tools-feedback-banner--grid.sc-digi-tools-feedback-banner{display:grid;padding-inline:var(--digi--padding--medium)}@media (max-width: 47.9375rem){.sc-digi-tools-feedback-banner-h .digi-tools-feedback-banner--grid.sc-digi-tools-feedback-banner{padding-inline:unset}}.sc-digi-tools-feedback-banner-h .digi-tools-feedback-banner__container.sc-digi-tools-feedback-banner{padding-top:var(--digi--padding--largest);padding-bottom:var(--digi--padding--largest-2)}@media (max-width: 47.9375rem){.sc-digi-tools-feedback-banner-h .digi-tools-feedback-banner__container.sc-digi-tools-feedback-banner{padding:var(--digi--padding--large) var(--digi--padding--medium) var(--digi--padding--largest-2) var(--digi--padding--medium)}}.sc-digi-tools-feedback-banner-h .digi-tools-feedback-banner__illustration.sc-digi-tools-feedback-banner{flex-basis:4.25rem;padding-left:var(--digi--padding--large)}@media (max-width: 47.9375rem){.sc-digi-tools-feedback-banner-h .digi-tools-feedback-banner__illustration.sc-digi-tools-feedback-banner{padding-left:var(--digi--padding--smaller)}}.sc-digi-tools-feedback-banner-h .digi-tools-feedback-banner__infographic-secondary.sc-digi-tools-feedback-banner{fill:var(--digi--color--infographic--brand--secondary)}.sc-digi-tools-feedback-banner-h .digi-tools-feedback-banner__main-content.sc-digi-tools-feedback-banner{display:inline-flex;padding-bottom:var(--digi--padding--largest)}.sc-digi-tools-feedback-banner-h .digi-tools-feedback-banner__text-content.sc-digi-tools-feedback-banner{flex-basis:17.6875rem}@media (max-width: 47.9375rem){.sc-digi-tools-feedback-banner-h .digi-tools-feedback-banner__links.sc-digi-tools-feedback-banner{display:flex;flex-direction:column}}.sc-digi-tools-feedback-banner-h .digi-tools-feedback-banner.sc-digi-tools-feedback-banner digi-link-external.sc-digi-tools-feedback-banner{padding-right:var(--digi--padding--large)}@media (max-width: 47.9375rem){.sc-digi-tools-feedback-banner-h .digi-tools-feedback-banner.sc-digi-tools-feedback-banner digi-link-external.sc-digi-tools-feedback-banner{padding-bottom:var(--digi--padding--smaller)}}";
const DigiToolsFeedbackBannerStyle0 = toolsFeedbackBannerCss;

const FeedbackBanner = class {
    constructor(hostRef) {
        registerInstance(this, hostRef);
        this.afHeading = 'Hjälp oss att bli bättre';
        this.afHeadingLevel = ToolsFeedbackBannerHeadingLevel.H2;
        this.afText = 'Skicka in dina synpunkter och förslag på förbättringar på (tjänst)';
        this.afType = ToolsFeedbackBannerType.FULLWIDTH;
        this.afId = randomIdGenerator('digi-feedback-banner');
        this.validLinks = true;
        this.validContent = true;
        this.linkItems = [];
    }
    /**
     * Kontrollerar så att man inte matar in en tom rubrik och paragraf
     * @en Control for empty heading and paragraph
     */
    validateHeading() {
        if (!this.afHeading || !this.afText) {
            logger.warn(`digi-feedback-banner must have a heading and text. Please add af-heading and af-text`, this.hostElement);
            this.validContent = false;
            return false;
        }
    }
    componentWillLoad() {
        this.validateLinks();
        this.validateHeading();
    }
    componentWillUpdate() {
        this.validateLinks(true);
        this.validateHeading();
    }
    validateLinks(update) {
        const elements = this.hostElement.children;
        if (elements.length < 1 || elements.length > 3) {
            logger.warn(`The slot contains no link elements or there are more than 3 links specified (only 3 can be showed)`, this.hostElement);
            return;
        }
        let items;
        if (update) {
            items = this._observer.children;
        }
        else {
            items = elements;
        }
        this.linkItems = [...items]
            .filter((element) => element.tagName.toLowerCase() === 'a')
            .filter((element) => {
            const text = element.textContent;
            const href = element.getAttribute('href');
            if (!text || !href) {
                this.validLinks = false;
                logger.warn(`No links in digi-feedback-banner are rendered because a specified <a>-element must have both a text and href`, this.hostElement);
                return false;
            }
            return true;
        })
            .map((element) => {
            return {
                text: element.text,
                href: element.href
            };
        });
    }
    get cssModifiers() {
        return {
            'digi-tools-feedback-banner--fullwidth': this.afType === ToolsFeedbackBannerType.FULLWIDTH,
            'digi-tools-feedback-banner--grid': this.afType === ToolsFeedbackBannerType.GRID
        };
    }
    get icon() {
        return (h("svg", { width: "70px", height: "55px", viewBox: "0 -1 70 57", version: "1.1", xmlns: "http://www.w3.org/2000/svg" }, h("g", { id: "Page-1", stroke: "none", "stroke-width": "1", fill: "none", "fill-rule": "evenodd" }, h("g", { id: "Artboard", transform: "translate(-1.000000, -1.000000)" }, h("g", { id: "Illustration", transform: "translate(36.000000, 28.500000) scale(-1, 1) translate(-36.000000, -28.500000) translate(1.000000, 1.000000)" }, h("path", { d: "M42.6854848,46.8545136 L52.1772369,46.8545136 L60.0989602,53.7853167 L60.0989602,46.8545136 L63.5554881,46.8545136 C66.2322456,46.8545136 68.4223676,44.6442917 68.4223676,41.9430542 L68.4223676,21.4518253 C68.4223676,18.7503271 66.2322456,16.5401053 63.5554881,16.5401053 L45.2209187,16.5401053 C45.2209187,16.5401053 45.2972177,30.5151432 45.2972177,32.3423051 C45.2972177,34.1692063 43.6708169,38.4874313 37.8183432,38.4874313 C37.7811114,41.1448606 37.8183432,41.9430542 37.8183432,41.9430542 C37.8183432,44.6442917 40.0084652,46.8545136 42.6854848,46.8545136 Z", id: "Fill-1", class: "digi-tools-feedback-banner__infographic-secondary" }), h("path", { d: "M46.0035734,16.5771857 L65.0615411,16.5771857 C67.777628,16.5771857 70,18.7874075 70,21.488645 L70,43.1577375 C70,45.858975 67.777628,48.0691969 65.0615411,48.0691969 L61.5544094,48.0691969 L61.5544094,55 L53.5160089,48.0691969 L43.8850309,48.0691969 C41.1686818,48.0691969 38.9463098,45.858975 38.9463098,43.1577375 L38.9463098,38.8848853", id: "Stroke-3", stroke: "#333333", "stroke-width": "1.5552", "stroke-linejoin": "round" }), h("g", { id: "Group-8" }, h("path", { d: "M46.0035734,16.5771857 L46.0035734,6.19362792 C46.0035734,2.81701593 43.2256083,0.0542385739 39.8304342,0.0542385739 L39.8579648,0 L6.17313916,0 C2.77796506,0 0,2.76277736 0,6.13938934 L0,32.7454959 C0,36.1221079 2.77796506,38.8848853 6.17313916,38.8848853 L11.926765,38.8848853 L11.926765,51.8799782 L24.212476,38.8848853 L39.8304342,38.8848853 C43.2256083,38.8848853 46.0035734,36.1221079 46.0035734,32.7454959 L46.0035734,16.5172103", id: "Fill-5", fill: "#FFFFFF" }), h("path", { d: "M46.0035734,16.5771857 L46.0035734,6.19362792 C46.0035734,2.81701593 43.2256083,0.0542385739 39.8304342,0.0542385739 L39.8579648,0 L6.17313916,0 C2.77796506,0 0,2.76277736 0,6.13938934 L0,32.7454959 C0,36.1221079 2.77796506,38.8848853 6.17313916,38.8848853 L11.926765,38.8848853 L11.926765,51.8799782 L24.212476,38.8848853 L39.8304342,38.8848853 C43.2256083,38.8848853 46.0035734,36.1221079 46.0035734,32.7454959 L46.0035734,16.5172103", id: "Stroke-7", stroke: "#333333", "stroke-width": "1.5552", "stroke-linejoin": "round" })), h("line", { x1: "34.3569122", y1: "10.998957", x2: "11.7267882", y2: "10.998957", id: "Stroke-9", stroke: "#333333", "stroke-width": "1.5552", "stroke-linejoin": "round" }), h("line", { x1: "61.6306297", y1: "27.8791224", x2: "57.7779239", y2: "27.8791224", id: "Stroke-11", stroke: "#333333", "stroke-width": "1.5552", "stroke-linejoin": "round" }), h("line", { x1: "56.1242808", y1: "27.8791224", x2: "52.271575", y2: "27.8791224", id: "Stroke-13", stroke: "#333333", "stroke-width": "1.5552", "stroke-linejoin": "round" }), h("line", { x1: "50.6179582", y1: "27.8791224", x2: "46.7652523", y2: "27.8791224", id: "Stroke-15", stroke: "#333333", "stroke-width": "1.5552", "stroke-linejoin": "round" }), h("line", { x1: "61.6306297", y1: "33.1988052", x2: "56.1142912", y2: "33.1988052", id: "Stroke-17", stroke: "#333333", "stroke-width": "1.5552", "stroke-linejoin": "round" }), h("line", { x1: "52.1812485", y1: "33.1988052", x2: "46.4129397", y2: "33.1988052", id: "Stroke-19", stroke: "#333333", "stroke-width": "1.5552", "stroke-linejoin": "round" }), h("line", { x1: "34.3569122", y1: "16.6256614", x2: "11.7267882", y2: "16.6256614", id: "Stroke-21", stroke: "#333333", "stroke-width": "1.5552", "stroke-linejoin": "round" }), h("line", { x1: "34.3569122", y1: "22.2523919", x2: "11.7267882", y2: "22.2523919", id: "Stroke-23", stroke: "#333333", "stroke-width": "1.5552", "stroke-linejoin": "round" }), h("line", { x1: "34.3569122", y1: "27.8791224", x2: "20.5357822", y2: "27.8791224", id: "Stroke-25", stroke: "#333333", "stroke-width": "1.5552", "stroke-linejoin": "round" }))))));
    }
    get content() {
        return (h("section", { class: "digi-tools-feedback-banner__container" }, this.validContent && (h("div", { class: "digi-tools-feedback-banner__main-content" }, h("div", { class: "digi-tools-feedback-banner__text-content" }, h(this.afHeadingLevel, { class: "digi-tools-feedback-banner__heading", id: this.afId + '-heading' }, this.afHeading), h("p", null, this.afText)), h("span", { class: "digi-tools-feedback-banner__illustration" }, this.icon))), h("div", { class: "digi-tools-feedback-banner__links" }, this.validLinks &&
            this.linkItems.map((item) => {
                return (h("digi-link-external", { afHref: item.href, afTarget: "_blank", afDescribedby: this.afId + '-heading' }, item.text));
            }), h("div", { hidden: true, class: "digi-tools-feedback-banner__slot" }, h("digi-util-mutation-observer", { ref: (el) => (this._observer = el), onAfOnChange: () => this.validateLinks() }, h("slot", null))))));
    }
    render() {
        return (h("div", { key: 'c4a6bae55f9dc9f78580d7f1c8d29e0c78b63c56', class: Object.assign({ 'digi-tools-feedback-banner': true }, this.cssModifiers) }, this.afType === ToolsFeedbackBannerType.FULLWIDTH && (h("digi-layout-block", { key: '51796498a975044e431ed8b5048bc3724c4ca641', afVariation: LayoutBlockVariation.TRANSPARENT }, this.content)), this.afType !== ToolsFeedbackBannerType.FULLWIDTH && this.content));
    }
    get hostElement() { return getElement(this); }
    static get watchers() { return {
        "afHeading": ["validateHeading"],
        "afText": ["validateHeading"]
    }; }
};
FeedbackBanner.style = DigiToolsFeedbackBannerStyle0;

export { FeedbackBanner as digi_tools_feedback_banner };
