'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

const index = require('./index-7a477838.js');
const layoutBlockVariation_enum = require('./layout-block-variation.enum-f6102119.js');
const logger_util = require('./logger.util-fdafc086.js');
const randomIdGenerator_util = require('./randomIdGenerator.util-e7f4b6de.js');
const toolsFeedbackRatingVariation_enum = require('./tools-feedback-rating-variation.enum-2f71e84d.js');

const toolsFeedbackRatingCss = ".sc-digi-tools-feedback-rating-h {\n  container-type: inline-size;\n  display: block;\n  width: 100%;\n}\n.sc-digi-tools-feedback-rating-h .digi-tools-feedback-rating--fullwidth.sc-digi-tools-feedback-rating .digi-tools-feedback-rating__wrapper.sc-digi-tools-feedback-rating {\n  padding-left: 0;\n  padding-right: 0;\n}\n.sc-digi-tools-feedback-rating-h .digi-tools-feedback-rating--minimal.sc-digi-tools-feedback-rating .digi-tools-feedback-rating__wrapper.sc-digi-tools-feedback-rating {\n  padding: 0;\n}\n.sc-digi-tools-feedback-rating-h .digi-tools-feedback-rating__wrapper.sc-digi-tools-feedback-rating {\n  padding-top: var(--digi--padding--largest);\n  padding-inline: var(--digi--padding--largest);\n  padding-bottom: 40px;\n}\n@media (max-width: 47.9375rem) {\n  .sc-digi-tools-feedback-rating-h .digi-tools-feedback-rating__wrapper.sc-digi-tools-feedback-rating {\n    padding-bottom: 24px;\n    padding-top: var(--digi--padding--medium);\n  }\n}\n@media (max-width: 47.9375rem) {\n  .sc-digi-tools-feedback-rating-h .digi-tools-feedback-rating__wrapper.sc-digi-tools-feedback-rating {\n    padding-inline: var(--digi--padding--medium);\n  }\n}\n@container (max-width: 576px) {\n  .sc-digi-tools-feedback-rating-h .digi-tools-feedback-rating .digi-tools-feedback-rating__wrapper {\n    padding-inline: var(--digi--padding--medium);\n  }\n}\n@container (max-width: 768px) {\n  .sc-digi-tools-feedback-rating-h .digi-tools-feedback-rating .digi-tools-feedback-rating__wrapper {\n    padding-bottom: 24px;\n    padding-top: var(--digi--padding--medium);\n  }\n}\n.sc-digi-tools-feedback-rating-h .digi-tools-feedback-rating__step1-wrapper.sc-digi-tools-feedback-rating {\n  display: block;\n}\n@media (min-width: 47.9375rem) {\n  .sc-digi-tools-feedback-rating-h .digi-tools-feedback-rating__step1-wrapper.sc-digi-tools-feedback-rating {\n    margin-top: 0;\n  }\n}\n@media (max-width: 48rem) {\n  .sc-digi-tools-feedback-rating-h .digi-tools-feedback-rating__step1-wrapper.sc-digi-tools-feedback-rating {\n    flex-shrink: unset;\n  }\n}\n@container (min-width: 576px) {\n  .sc-digi-tools-feedback-rating-h .digi-tools-feedback-rating .digi-tools-feedback-rating__step1-wrapper {\n    margin-top: 0;\n  }\n}\n@container (max-width: 768px) {\n  .sc-digi-tools-feedback-rating-h .digi-tools-feedback-rating .digi-tools-feedback-rating__step1-wrapper {\n    flex-shrink: unset;\n  }\n}\n@container (max-width: 342px) {\n  .sc-digi-tools-feedback-rating-h .digi-tools-feedback-rating .digi-tools-feedback-rating__step1-wrapper {\n    display: flex;\n    align-items: flex-start;\n    flex-direction: column;\n    row-gap: var(--digi--padding--medium);\n  }\n}\n.sc-digi-tools-feedback-rating-h .digi-tools-feedback-rating__step1-description.sc-digi-tools-feedback-rating {\n  display: block;\n  margin-bottom: 10px;\n  font-weight: var(--digi--typography--label--font-weight--mobile);\n}\n.sc-digi-tools-feedback-rating-h .digi-tools-feedback-rating__heading.sc-digi-tools-feedback-rating {\n  margin-top: 0;\n  margin-inline-end: 3.5rem;\n  max-width: 500px;\n  margin-bottom: 16px;\n}\n@media (max-width: 48rem) {\n  .sc-digi-tools-feedback-rating-h .digi-tools-feedback-rating__heading.sc-digi-tools-feedback-rating {\n    margin-inline-end: 0;\n  }\n}\n@container (max-width: 768px) {\n  .sc-digi-tools-feedback-rating-h .digi-tools-feedback-rating legend .digi-tools-feedback-rating__heading {\n    margin-inline-end: 0;\n  }\n}\n.sc-digi-tools-feedback-rating-h .digi-tools-feedback-rating__fieldset.sc-digi-tools-feedback-rating {\n  max-width: inherit;\n  border: none !important;\n  margin: 0;\n  padding: 0;\n}\n.sc-digi-tools-feedback-rating-h .digi-tools-feedback-rating__star-rating.sc-digi-tools-feedback-rating {\n  padding: 0;\n  width: 100%;\n}\n.sc-digi-tools-feedback-rating-h .digi-tools-feedback-rating__star-rating.sc-digi-tools-feedback-rating legend.sc-digi-tools-feedback-rating {\n  padding-left: 0;\n  flex-basis: 26.8125rem;\n}\n.sc-digi-tools-feedback-rating-h .digi-tools-feedback-rating__star-rating.sc-digi-tools-feedback-rating .hidden.sc-digi-tools-feedback-rating {\n  border: 0;\n  clip: rect(1px, 1px, 1px, 1px);\n  -webkit-clip-path: inset(50%);\n  clip-path: inset(50%);\n  height: 1px;\n  margin: -1px;\n  overflow: hidden;\n  padding: 0;\n  position: absolute;\n  width: 1px;\n  white-space: nowrap;\n}\n.sc-digi-tools-feedback-rating-h .digi-tools-feedback-rating__star-rating-stars.sc-digi-tools-feedback-rating {\n  display: inline-flex;\n  flex-wrap: wrap;\n  max-height: 5rem;\n  margin-inline-end: 0.625rem;\n}\n.sc-digi-tools-feedback-rating-h .digi-tools-feedback-rating__star-rating-stars.sc-digi-tools-feedback-rating, .sc-digi-tools-feedback-rating-h .digi-tools-feedback-rating__thankyou-text.sc-digi-tools-feedback-rating {\n  display: flex;\n}\n.sc-digi-tools-feedback-rating-h .digi-tools-feedback-rating__thankyou-check-icon.sc-digi-tools-feedback-rating {\n  padding-right: 24px;\n  padding-top: 3px;\n  box-sizing: content-box;\n}\n.sc-digi-tools-feedback-rating-h .digi-tools-feedback-rating.sc-digi-tools-feedback-rating .step2.sc-digi-tools-feedback-rating .digi-tools-feedback-rating__heading.sc-digi-tools-feedback-rating {\n  margin-bottom: 0px;\n}\n.sc-digi-tools-feedback-rating-h .digi-tools-feedback-rating__star-rating-star-button.sc-digi-tools-feedback-rating {\n  background-color: unset;\n  border: unset;\n  cursor: pointer;\n  padding: var(--digi--gutter--smallest-3);\n  display: block;\n  position: relative;\n  margin-inline-end: 0.875rem;\n  height: 1.875rem;\n}\n.sc-digi-tools-feedback-rating-h .digi-tools-feedback-rating__star-rating-star-button.sc-digi-tools-feedback-rating:focus-visible {\n  outline: 2px solid black;\n  outline-offset: 2px;\n  box-shadow: 0px 0px 0px 5px white;\n}\n.sc-digi-tools-feedback-rating-h .digi-tools-feedback-rating-star-icon.sc-digi-tools-feedback-rating {\n  fill: none;\n}\n.sc-digi-tools-feedback-rating-h .digi-tools-feedback-rating-star-icon-border.sc-digi-tools-feedback-rating {\n  stroke: var(--digi--color--icon--primary);\n}\n.sc-digi-tools-feedback-rating-h .digi-tools-feedback-rating__infographic-primary.sc-digi-tools-feedback-rating {\n  fill: var(--digi--color--infographic--brand--primary);\n}\n.sc-digi-tools-feedback-rating-h .digi-tools-feedback-rating__star-rating-star-button.sc-digi-tools-feedback-rating:focus-visible .digi-tools-feedback-rating-star-icon.filled.sc-digi-tools-feedback-rating, .sc-digi-tools-feedback-rating-h .digi-tools-feedback-rating-star-icon.filled.sc-digi-tools-feedback-rating {\n  fill: var(--digi--color--icon--brand-primary);\n}\n.sc-digi-tools-feedback-rating-h .digi-tools-feedback-rating-star-icon.filled.sc-digi-tools-feedback-rating .digi-tools-feedback-rating-star-icon-border.sc-digi-tools-feedback-rating {\n  stroke: var(--digi--color--icon--brand-primary);\n}\n.sc-digi-tools-feedback-rating-h .digi-tools-feedback-rating__thankyou-text-with-rating.sc-digi-tools-feedback-rating {\n  margin-bottom: var(--digi--margin--medium);\n}";
const DigiToolsFeedbackRatingStyle0 = toolsFeedbackRatingCss;

const ToolsFeedbackRating = class {
    constructor(hostRef) {
        index.registerInstance(this, hostRef);
        this.afOnClickFeedback = index.createEvent(this, "afOnClickFeedback", 7);
        this.afOnSubmitFeedbackLink = index.createEvent(this, "afOnSubmitFeedbackLink", 7);
        this.afId = randomIdGenerator_util.randomIdGenerator('digi-tools-feedback-rating');
        this.afIsDone = undefined;
        this.afVariation = undefined;
        this.afType = toolsFeedbackRatingVariation_enum.FeedbackRatingType.FULLWIDTH;
        this.afHeadingLevel = toolsFeedbackRatingVariation_enum.FeedbackRatingHeadingLevel.H2;
        this.afQuestion = 'Hur nöjd är du med tjänsten?';
        this.afThankYouHeading = 'Tack för din feedback!';
        this.afRatings = 'Inte alls nöjd;Inte särskilt nöjd;Ganska nöjd;Nöjd;Mycket nöjd';
        this.afDir = undefined;
        this.afLang = undefined;
        this.afLink = undefined;
        this.afLinkText = undefined;
        this.afProduct = undefined;
        this.afApplication = undefined;
        this.afProductArea = undefined;
        this.afName = undefined;
        this.afQuestionType = undefined;
        this.afUseCustomLink = false;
        this.currentStep = 1;
        this.validContent = true;
        this.hoveredRating = undefined;
        this.selectedRating = undefined;
        this.selectedText = undefined;
    }
    afIsDoneHandler() {
        this.currentStep = 2;
    }
    validateQuestion() {
        if (this.afQuestion == '') {
            logger_util.logger.warn(`digi-tools-feedback-rating must have a question - please add af-question to the component`, this.hostElement);
            this.validContent = false;
            return false;
        }
    }
    componentWillLoad() {
        this.validateQuestion();
    }
    componentDidRender() {
        if (this._thankYouHeading) {
            this._thankYouHeading.focus();
        }
    }
    getCurrentPageUrl() {
        return window.location.href;
    }
    renderLink() {
        if (this.afUseCustomLink) {
            return `${this.afLink}?q1o${this.selectedRating}=1&q2o1=${this.getCurrentPageUrl()}`;
        }
        else {
            return this.afLink;
        }
    }
    /**
     * Används för att ändra steg mellan 1-2.
     * @en Use to change step between 1-2
     * @ignore
     */
    async afMSetStep(step) {
        this.currentStep = step;
    }
    /**
     * Används för att ändra till steg 1 och återställa betyget.
     * @en Use to change to step 1 and reset star rating
     */
    async afMReset() {
        this.afMSetStep(1);
        this.selectedRating = null;
    }
    submitFeedback() {
        this.afOnClickFeedback.emit(this.getFeedbackData());
    }
    submitFeedbackLink() {
        this.afOnSubmitFeedbackLink.emit(this.getFeedbackLinkData());
    }
    ratingsData() {
        let ratings = [];
        if (this.afRatings) {
            ratings = this.afRatings.split(';');
        }
        const ratingItems = [];
        for (let i = 0; i < 5; i++) {
            ratingItems.push({
                value: i + 1,
                text: ratings[i] || ''
            });
        }
        return ratingItems;
    }
    handleRatingChange(rating) {
        this.selectedRating = rating;
        this.selectedText =
            (this.ratingsData().find((item) => item.value === this.selectedRating) ||
                {}).text || null;
        this.submitFeedback();
        this.currentStep = 2;
    }
    handleHover(rating) {
        this.hoveredRating = rating;
    }
    getFeedbackData() {
        return {
            productarea: this.afProductArea,
            product: this.afProduct,
            application: this.afApplication,
            id: this.afId,
            name: this.afName,
            questionType: this.afQuestionType,
            question: this.afQuestion,
            rating: this.selectedRating,
            ratingDescription: this.selectedText,
            variation: this.afVariation,
            version: '2'
        };
    }
    getFeedbackLinkData() {
        return {
            productarea: this.afProductArea,
            product: this.afProduct,
            application: this.afApplication,
            id: this.afId,
            name: this.afName,
            questionType: this.afQuestionType,
            question: this.afQuestion,
            linkText: this.afLinkText,
            linkHref: this.afLink,
            version: '2'
        };
    }
    get cssModifiers() {
        return {
            'digi-tools-feedback-rating--fullwidth': this.afType === toolsFeedbackRatingVariation_enum.FeedbackRatingType.FULLWIDTH,
            'digi-tools-feedback-rating--grid': this.afType === toolsFeedbackRatingVariation_enum.FeedbackRatingType.GRID,
            'digi-tools-feedback-rating--minimal': this.afType === toolsFeedbackRatingVariation_enum.FeedbackRatingType.MINIMAL
        };
    }
    get layoutBlockVariation() {
        if (this.afType === toolsFeedbackRatingVariation_enum.FeedbackRatingType.MINIMAL)
            return layoutBlockVariation_enum.LayoutBlockVariation.TRANSPARENT;
        switch (this.afVariation) {
            case toolsFeedbackRatingVariation_enum.FeedbackRatingVariation.PRIMARY:
                return layoutBlockVariation_enum.LayoutBlockVariation.SYMBOL;
            case toolsFeedbackRatingVariation_enum.FeedbackRatingVariation.SECONDARY:
                return layoutBlockVariation_enum.LayoutBlockVariation.PRIMARY;
            case toolsFeedbackRatingVariation_enum.FeedbackRatingVariation.TERTIARY:
                return layoutBlockVariation_enum.LayoutBlockVariation.SECONDARY;
        }
    }
    get content() {
        return (index.h("digi-typography", null, this.validContent && (index.h("div", { dir: this.afDir, lang: this.afLang, class: `digi-tools-feedback-rating__wrapper ${this.currentStep === 2 ? 'step2' : ''}` }, this.currentStep === 1 && (index.h("div", { class: "digi-tools-feedback-rating__star-rating" }, index.h(this.afHeadingLevel, { id: `${this.afId}-rating-question`, class: `digi-tools-feedback-rating__heading ${this.afType === toolsFeedbackRatingVariation_enum.FeedbackRatingType.MINIMAL ? 'hidden' : ''}` }, this.afQuestion), index.h("div", { class: "digi-tools-feedback-rating__step1-wrapper" }, this.afRatings && (index.h("span", { class: "digi-tools-feedback-rating__step1-description" }, "V\u00E4lj fr\u00E5n", ' ', `${(this.ratingsData().find((item) => item.value === 1) ||
            {}).text.toLowerCase() || null} till ${(this.ratingsData().find((item) => item.value === 5) ||
            {}).text.toLowerCase() || null}`)), index.h("div", { "aria-labelledby": `${this.afId}-rating-question`, class: "digi-tools-feedback-rating__star-rating-stars", role: "group" }, this.ratingsData().map(({ text, value }) => (index.h("div", { class: "digi-tools-feedback-rating__star-rating-star" }, index.h("button", { class: "digi-tools-feedback-rating__star-rating-star-button", onClick: () => this.handleRatingChange(value), "aria-label": `${value} ${value === 1 ? 'stjärna' : 'stjärnor'}${text !== '' ? ', ' + text : ''}`, onMouseEnter: () => this.handleHover(value), onMouseLeave: () => this.handleHover(0), onFocus: () => this.handleHover(value), onFocusout: () => this.handleHover(0) }, index.h("svg", { "aria-hidden": "true", width: "29px", height: "29px", viewBox: "0 0 32 32", version: "1.1", xmlns: "http://www.w3.org/2000/svg", class: `digi-tools-feedback-rating-star-icon ${this.hoveredRating >= value ? 'filled' : ''}` }, index.h("g", { stroke: "none", "stroke-width": "1", "stroke-linecap": "round", "stroke-linejoin": "round" }, index.h("g", { transform: "translate(-1852, -2564)", "stroke-width": "2", class: "digi-tools-feedback-rating-star-icon-border" }, index.h("g", { transform: "translate(1663, 2565)" }, index.h("g", { transform: "translate(190, 0)" }, index.h("path", { d: "M13.0369701,1.00988613 L9.47212213,8.51643297 L1.4958694,9.72422429 C0.0655277509,9.93973122 -0.507709524,11.7709448 0.529620648,12.8199039 L6.30005635,18.6595463 L4.93529305,26.9090563 C4.6897182,28.3999832 6.20191813,29.5170473 7.46854321,28.8195669 L14.6037422,24.9244875 L21.7391705,28.8195669 C23.0057956,29.5113322 24.5179955,28.3999832 24.2721914,26.9090563 L22.9074281,18.6595463 L28.6780931,12.8199039 C29.715194,11.7709448 29.1419567,9.93973122 27.711615,9.72422429 L19.7355916,8.51643297 L16.1707436,1.00988613 C15.531928,-0.328161856 13.6810595,-0.345069029 13.0369701,1.00988613 L13.0369701,1.00988613 Z" })))))))))))))), this.currentStep === 2 && (index.h("div", { class: "digi-tools-feedback-rating__thankyou" }, index.h("div", { class: "digi-tools-feedback-rating__thankyou-text" }, index.h("svg", { width: "32", height: "26", xmlns: "http://www.w3.org/2000/svg", class: "digi-tools-feedback-rating__thankyou-check-icon" }, index.h("g", { fill: "none", "fill-rule": "evenodd" }, index.h("path", { d: "M12.431 25.438C5.577 25.438 0 19.848 0 12.978 0 6.107 5.577.518 12.43.518c2.874 0 5.677 1.006 7.893 2.833l-1.441 1.755a10.163 10.163 0 0 0-6.452-2.315c-5.604 0-10.163 4.57-10.163 10.187 0 5.616 4.56 10.186 10.163 10.186 4.346 0 8.21-2.766 9.617-6.883l2.146.737a12.435 12.435 0 0 1-11.763 8.42", fill: "#333" }), index.h("path", { d: "M13.073 20.935a.725.725 0 0 1-1.022 0l-8.042-8.013a.72.72 0 0 1 0-1.019l1.704-1.699a.725.725 0 0 1 1.023 0l5.826 5.805L28.417.211a.724.724 0 0 1 1.023 0l1.704 1.699a.72.72 0 0 1 0 1.02l-18.07 18.005Z", fill: "none", class: "digi-tools-feedback-rating__infographic-primary" }))), index.h("h2", { class: "digi-tools-feedback-rating__thankyou-text", tabindex: "-1", ref: (el) => (this._thankYouHeading = el) }, this.afThankYouHeading)), this.afRatings && (index.h("p", { class: "digi-tools-feedback-rating__thankyou-text-with-rating" }, "Du har gett betyget \"", this.selectedText.toLowerCase(), "\" med", ' ', this.selectedRating, `${this.selectedRating === 1 ? ' stjärna' : ' stjärnor'}`, ".")))), this.currentStep === 2 && this.afLinkText && (index.h("div", { class: "digi-tools-feedback-rating__link" }, index.h("digi-link-external", { afHref: this.renderLink(), "af-target": "_blank", onAfOnClick: () => this.submitFeedbackLink(), "af-variation": "small" }, this.afLinkText)))))));
    }
    render() {
        return (index.h("div", { key: '4ddfd9efaa8f9981d35d30ba4c00d46c3c0e70b5', class: Object.assign({ 'digi-tools-feedback-rating': true }, this.cssModifiers) }, index.h("digi-layout-block", { key: '6069b2caffded6690f66e2928baaa547b5fa9c3a', afVariation: this.layoutBlockVariation, afMarginTop: true, "af-container": "none" }, this.content)));
    }
    get hostElement() { return index.getElement(this); }
    static get watchers() { return {
        "afIsDone": ["afIsDoneHandler"],
        "afQuestion": ["validateQuestion"]
    }; }
};
ToolsFeedbackRating.style = DigiToolsFeedbackRatingStyle0;

exports.digi_tools_feedback_rating = ToolsFeedbackRating;
