@designsystem-se/af 39.0.1-beta.dark-mode → 39.1.0-beta.2

package/dist/cjs/digi-title-logo.cjs.entry.js

@@ -0,0 +1,125 @@
+'use strict';
+
+var index = require('./index-tbq85ezH.js');
+require('./badge-notification-shape.enum-CEyEo2G5.js');
+var typographyVariation_enum = require('./typography-variation.enum-4snUBTF7.js');
+require('./badge-status-variation.enum-XX8d--rj.js');
+require('./code-example-variation.enum-BCENTUV2.js');
+require('./form-input-type.enum-B2CsNSBg.js');
+require('./button-variation.enum-DkUalo9f.js');
+require('./calendar-week-view-heading-level.enum-NEkm5SUq.js');
+require('./bar-chart-variation.enum-BZFN4377.js');
+require('./code-variation.enum-BM-hhQuD.js');
+require('./expandable-accordion-header-level.enum-CjL9V3Kt.js');
+require('./expandable-faq-item-variation.enum-aKkYAQgd.js');
+require('./expandable-faq-variation.enum-FEybT9s4.js');
+require('./footer-card-variation.enum-BPnpkC45.js');
+require('./form-checkbox-variation.enum-BfOGU4Qt.js');
+require('./form-validation-message-variation.enum-DgkifAnP.js');
+require('./form-radiogroup-validation.enum-DBDbjF6N.js');
+require('./form-select-variation.enum-e6wjWyaS.js');
+require('./form-textarea-variation.enum-BcEyaR5W.js');
+require('./info-card-multi-type.enum-pqhvdrsN.js');
+require('./info-card-variation.enum-B1cqmknX.js');
+require('./layout-container-max-width.enum-DqWtU7WK.js');
+require('./layout-block-variation.enum-BldWvnDk.js');
+require('./layout-columns-variation.enum-OgD-hvRN.js');
+require('./link-button-variation.enum-03cHZQxx.js');
+require('./list-type.enum-CkFOn-eB.js');
+require('./loader-skeleton-variation.enum-UvPtdesw.js');
+require('./loader-spinner-size.enum-u5AQs-UJ.js');
+require('./logo-color.enum-BJZv-f6R.js');
+require('./media-figure-alignment.enum-BWO1sg67.js');
+require('./navigation-sidebar-variation.enum-70NIGQoi.js');
+require('./navigation-vertical-menu-variation.enum-7IUICId3.js');
+require('./progress-circle-role.enum-DCkczyl8.js');
+require('./progress-indicator-variation.enum-3KORUGDH.js');
+require('./progress-list-item-variation.enum-Dk3YS--x.js');
+require('./progress-list-variation.enum-BvLLJK9O.js');
+require('./progressbar-variation.enum-CnRJPSs7.js');
+require('./quote-image-inner-position.enum-CLifVlj0.js');
+require('./table-variation.enum-DlDZKXbq.js');
+require('./tag-media-icon.enum-DzhiwvjI.js');
+require('./tag-size.enum-DFom3Smn.js');
+require('./tools-feedback-banner-type.enum-Dyeg3XNb.js');
+require('./tools-feedback-rating-variation.enum-CBI4GhXs.js');
+require('./tools-theme-provider.brand.enum-BzduvCUY.js');
+require('./typography-heading-jumbo-variation.enum-Di1Jeh0G.js');
+require('./typography-meta-variation.enum-lvDemnSz.js');
+require('./typography-time-variation.enum-D2gIVzYH.js');
+var utilBreakpointObserverBreakpoints_enum = require('./util-breakpoint-observer-breakpoints.enum-zoJiezkV.js');
+
+const titleLogoCss = () => `.sc-digi-title-logo-h{display:block;--digi--title-logo-text-color:var(--digi--color--text--primary);--digi--title-logo-font-weight:var(--digi--global--typography--font-weight--bold);--digi--title-logo-font-size:var(--digi--typography--title-logo--font-size--mobile);--digi--title-logo-font-size-small:var(--digi--global--typography--font-size--large);--digi--title-logo-line-height-small:1.25rem;--digi--title-logo-symbol-color:var(--digi--color--logotype--primary--symbol);--digi--title-logo-symbol-width:36px;--digi--title-logo-symbol-height:36px;--digi--title-logo-symbol-width-mobile:44px;--digi--title-logo-symbol-height-mobile:44px;--digi--title-logo-text-height:40px;--digi--title-logo-border-width:var(--digi--global--border-width--base);--digi--title-logo-vertical-padding:1.375rem;--digi--title-logo-gap:9px}.sc-digi-title-logo-h .digi-title-logo.sc-digi-title-logo{color:var(--digi--title-logo-text-color);display:flex;align-items:center;padding:var(--digi--title-logo-vertical-padding) 0}@media (min-width: 48rem){.sc-digi-title-logo-h .digi-title-logo.sc-digi-title-logo{--digi--title-logo-vertical-padding:1.5rem}}.sc-digi-title-logo-h .digi-title-logo.sc-digi-title-logo:focus-visible{outline:2px solid black;outline-offset:-3px;box-shadow:0px 0px 0px 5px inset white}.sc-digi-title-logo-h .digi-title-logo-symbol.sc-digi-title-logo{height:var(--digi--title-logo-symbol-height);width:var(--digi--title-logo-symbol-width);display:flex;flex-shrink:0;align-items:center}.sc-digi-title-logo-h .digi-title-logo-symbol.sc-digi-title-logo svg.sc-digi-title-logo{fill:var(--digi--title-logo-symbol-color)}.sc-digi-title-logo-h .digi-title-logo-name-wrapper.sc-digi-title-logo{color:var(--digi--title-logo-text-color);display:flex;flex-direction:column;justify-content:center;height:var(--digi--title-logo-text-height);border-left:var(--digi--title-logo-border-width) solid;margin-left:var(--digi--title-logo-gap);padding-left:var(--digi--title-logo-gap);font-weight:var(--digi--title-logo-font-weight);font-size:var(--digi--title-logo-font-size)}.sc-digi-title-logo-h .digi-title-logo.sc-digi-title-logo-s>[slot=logo-two-rows],.sc-digi-title-logo-h .digi-title-logo .sc-digi-title-logo-s>[slot=logo-two-rows]{display:flex;flex-direction:column;font-size:var(--digi--title-logo-font-size-small);line-height:var(--digi--title-logo-line-height-small)}.sc-digi-title-logo-h .digi-title-logo--mobile.sc-digi-title-logo{--digi--title-logo-symbol-height:var(--digi--title-logo-symbol-height-mobile);--digi--title-logo-symbol-width:var(--digi--title-logo-symbol-width-mobile)}.sc-digi-title-logo-h .digi-title-logo--mobile.sc-digi-title-logo .digi-title-logo-name-wrapper.sc-digi-title-logo{display:none}.sc-digi-title-logo-h .digi-title-logo--one-row.sc-digi-title-logo-s>[slot=logo-two-rows],.sc-digi-title-logo-h .digi-title-logo--one-row .sc-digi-title-logo-s>[slot=logo-two-rows]{display:none}.sc-digi-title-logo-h .digi-title-logo--two-rows.sc-digi-title-logo-s>[slot=logo-one-row],.sc-digi-title-logo-h .digi-title-logo--two-rows .sc-digi-title-logo-s>[slot=logo-one-row]{display:none}`;
+
+const TitleLogo = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.handleWindowResize = () => {
+            this.titleLogoVariation = this.setLogoVariation(window.innerWidth);
+        };
+    }
+    setLogoVariation(width) {
+        if (this.isMobile)
+            return typographyVariation_enum.TitleLogoVariation.MOBILE;
+        const isNarrow = this.afLogoBreakpoint
+            ? width < this.afLogoBreakpoint
+            : this.isTablet;
+        if (isNarrow) {
+            return this.hasTwoRowLogoName
+                ? typographyVariation_enum.TitleLogoVariation.TWO_ROWS
+                : typographyVariation_enum.TitleLogoVariation.ONE_ROW;
+        }
+        return this.hasOneRowLogoName
+            ? typographyVariation_enum.TitleLogoVariation.ONE_ROW
+            : typographyVariation_enum.TitleLogoVariation.TWO_ROWS;
+    }
+    /**
+     * Find out if we have one or both of the possible logo variations
+     * Throw an error if we have none
+     */
+    componentWillLoad() {
+        this.hasOneRowLogoName = !!this.hostElement.querySelector('[slot="logo-one-row"]');
+        this.hasTwoRowLogoName = !!this.hostElement.querySelector('[slot="logo-two-rows"]');
+        if (!this.hasOneRowLogoName && !this.hasTwoRowLogoName) {
+            throw new Error('Du behöver ange minst en variant av logo-text');
+        }
+    }
+    /**
+     * We need a custom resize listener here, since we're
+     * not only relying on breakpoints
+     */
+    componentDidLoad() {
+        if (window) {
+            this.handleWindowResize();
+            window.addEventListener('resize', this.handleWindowResize, {
+                passive: true
+            });
+        }
+    }
+    /**
+     * Let's clean up as well
+     */
+    disconnectedCallback() {
+        if (window) {
+            window.removeEventListener('resize', this.handleWindowResize);
+        }
+    }
+    handleBreakpointObserver(e) {
+        this.isMobile = e.detail.value === utilBreakpointObserverBreakpoints_enum.UtilBreakpointObserverBreakpoints.SMALL;
+        this.isTablet = e.detail.value === utilBreakpointObserverBreakpoints_enum.UtilBreakpointObserverBreakpoints.MEDIUM;
+    }
+    get cssModifiers() {
+        return {
+            'digi-title-logo--mobile': this.titleLogoVariation === typographyVariation_enum.TitleLogoVariation.MOBILE,
+            'digi-title-logo--one-row': this.titleLogoVariation === typographyVariation_enum.TitleLogoVariation.ONE_ROW,
+            'digi-title-logo--two-rows': this.titleLogoVariation === typographyVariation_enum.TitleLogoVariation.TWO_ROWS
+        };
+    }
+    render() {
+        return (index.h("div", { key: 'a6b4469ef950c515fed566d2ae896e97b47cc913', class: Object.assign({ 'digi-title-logo': true }, this.cssModifiers) }, index.h("digi-util-breakpoint-observer", { key: 'ab48388d57bf01f711c1954d6d4bfbe979d25349', onAfOnChange: (e) => this.handleBreakpointObserver(e) }), index.h("div", { key: '57513832c5ae8d09b6578fe7fa9084ff26fae145', class: "digi-title-logo-symbol" }, index.h("svg", { key: '1bf2e94d0bebcfc84d0ca9ad1c70e1b96ae479a7', height: "44px", width: "44px", viewBox: "0 0 44 44", fill: "none", xmlns: "http://www.w3.org/2000/svg", role: "img" }, index.h("path", { key: 'b1795d919f4f412e996b632e1f3cfead50190715', "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M15.0076 6.97426V0C31.0194 0 44 12.9056 44 28.8261C44 34.3951 42.4073 39.5923 39.6561 44L33.8019 40.1595C35.822 36.8551 36.9855 32.9758 36.9855 28.8261C36.9855 16.7575 27.1458 6.97426 15.0076 6.97426ZM6.99059 28.8257C6.99059 33.2284 10.5795 36.7972 15.0076 36.7972C19.4356 36.7972 23.0245 33.2284 23.0245 28.8257C23.0245 24.4235 19.4356 20.8548 15.0076 20.8548C10.5795 20.8548 6.99059 24.4235 6.99059 28.8257ZM0 28.8257C0 20.5853 6.71916 13.9047 15.0076 13.9047C23.296 13.9047 30.0151 20.5853 30.0151 28.8257C30.0151 37.0666 23.296 43.7472 15.0076 43.7472C6.71916 43.7472 0 37.0666 0 28.8257Z", class: "main-symbol" }))), index.h("div", { key: 'aa07057fb3255f3c93b3c36672a63ee637ed54c1', class: "digi-title-logo-name-wrapper" }, index.h("slot", { key: '73f73fbad0f148d7a45296db645f9a4bb18b348e', name: "logo-one-row" }), index.h("slot", { key: '317ee5205fd79adee52676fc4c556d65315ce5b9', name: "logo-two-rows" }))));
+    }
+    get hostElement() { return index.getElement(this); }
+};
+TitleLogo.style = titleLogoCss();
+
+exports.digi_title_logo = TitleLogo;

package/dist/cjs/digi-tools-feedback-banner.cjs.entry.js

@@ -1,26 +1,51 @@
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
+var index = require('./index-tbq85ezH.js');
+var randomIdGenerator_util = require('./randomIdGenerator.util-C8XR2Tn1.js');
+var logger_util = require('./logger.util-DUhrcCTY.js');
+var toolsFeedbackBannerType_enum = require('./tools-feedback-banner-type.enum-Dyeg3XNb.js');
+var layoutBlockVariation_enum = require('./layout-block-variation.enum-BldWvnDk.js');
 
-const index = require('./index-7a477838.js');
-const randomIdGenerator_util = require('./randomIdGenerator.util-e7f4b6de.js');
-const logger_util = require('./logger.util-fdafc086.js');
-const toolsFeedbackBannerType_enum = require('./tools-feedback-banner-type.enum-de373ba0.js');
-const layoutBlockVariation_enum = require('./layout-block-variation.enum-f6102119.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 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 FeedbackBanner = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
+        /**
+         * Sätter rubriken
+         * @en Sets the heading
+         */
         this.afHeading = 'Hjälp oss att bli bättre';
+        /**
+         * Sätt rubrikens vikt. 'h2' är förvalt.
+         * @en Set heading level. Default is 'h2'
+         */
         this.afHeadingLevel = toolsFeedbackBannerType_enum.ToolsFeedbackBannerHeadingLevel.H2;
+        /**
+         * Sätter brödtexten
+         * @en Sets the text
+         */
         this.afText = 'Skicka in dina synpunkter och förslag på förbättringar på (tjänst)';
+        /**
+         * Sätter typ på kortet. Kan vara 'fullwidth' eller 'grid'.
+         * @en Set card type. Can be 'fullwidth' or 'grid'.
+         */
         this.afType = toolsFeedbackBannerType_enum.ToolsFeedbackBannerType.FULLWIDTH;
+        /**
+         * Sätter attributet 'id'. Om inget väljs så skapas ett slumpmässigt id.
+         * @en Input id attribute. Defaults to random string.
+         */
         this.afId = randomIdGenerator_util.randomIdGenerator('digi-feedback-banner');
+        /**
+         * Används för att inte rendera länkarna om något a-element saknar href eller text
+         * @en Is used for not rendering the links if some a-element lacks href or text
+         */
         this.validLinks = true;
         this.validContent = true;
+        /**
+         * Listan för alla länkobjekt
+         * @en The list for all link objects
+         */
         this.linkItems = [];
     }
     /**
@@ -39,24 +64,16 @@ const FeedbackBanner = class {
         this.validateHeading();
     }
     componentWillUpdate() {
-        this.validateLinks(true);
+        this.validateLinks();
         this.validateHeading();
     }
-    validateLinks(update) {
-        const elements = this.hostElement.children;
-        if (elements.length < 1 || elements.length > 3) {
+    validateLinks() {
+        const links = Array.from(this.hostElement.children).filter((el) => el.tagName.toLowerCase() === 'a');
+        if (links.length < 1 || links.length > 3) {
             logger_util.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')
+        this.linkItems = links
             .filter((element) => {
             const text = element.textContent;
             const href = element.getAttribute('href');
@@ -67,12 +84,10 @@ const FeedbackBanner = class {
             }
             return true;
         })
-            .map((element) => {
-            return {
-                text: element.text,
-                href: element.href
-            };
-        });
+            .map((element) => ({
+            text: element.text,
+            href: element.href
+        }));
     }
     get cssModifiers() {
         return {
@@ -87,17 +102,21 @@ const FeedbackBanner = class {
         return (index.h("section", { class: "digi-tools-feedback-banner__container" }, this.validContent && (index.h("div", { class: "digi-tools-feedback-banner__main-content" }, index.h("div", { class: "digi-tools-feedback-banner__text-content" }, index.h(this.afHeadingLevel, { class: "digi-tools-feedback-banner__heading", id: this.afId + '-heading' }, this.afHeading), index.h("p", null, this.afText)), index.h("span", { class: "digi-tools-feedback-banner__illustration" }, this.icon))), index.h("div", { class: "digi-tools-feedback-banner__links" }, this.validLinks &&
             this.linkItems.map((item) => {
                 return (index.h("digi-link-external", { afHref: item.href, afTarget: "_blank", afDescribedby: this.afId + '-heading' }, item.text));
-            }), index.h("div", { hidden: true, class: "digi-tools-feedback-banner__slot" }, index.h("digi-util-mutation-observer", { ref: (el) => (this._observer = el), onAfOnChange: () => this.validateLinks() }, index.h("slot", null))))));
+            }), index.h("div", { hidden: true, class: "digi-tools-feedback-banner__slot" }, index.h("slot", { onSlotchange: () => this.validateLinks() })))));
     }
     render() {
-        return (index.h("div", { key: 'a8d0c416ba8392031fc8b19e03ef32e428d08662', class: Object.assign({ 'digi-tools-feedback-banner': true }, this.cssModifiers) }, this.afType === toolsFeedbackBannerType_enum.ToolsFeedbackBannerType.FULLWIDTH && (index.h("digi-layout-block", { key: '3c7d5c096b29f9483e58f06aa577d5785d2aea71', afVariation: layoutBlockVariation_enum.LayoutBlockVariation.TRANSPARENT }, this.content)), this.afType !== toolsFeedbackBannerType_enum.ToolsFeedbackBannerType.FULLWIDTH && this.content));
+        return (index.h("div", { key: 'effe0197ab17d3396bf34dc8e1baa7057181d2b4', class: Object.assign({ 'digi-tools-feedback-banner': true }, this.cssModifiers) }, this.afType === toolsFeedbackBannerType_enum.ToolsFeedbackBannerType.FULLWIDTH && (index.h("digi-layout-block", { key: '6e1c7312e120f3e7d76e6ecb3f01490cdca03408', afVariation: layoutBlockVariation_enum.LayoutBlockVariation.TRANSPARENT }, this.content)), this.afType !== toolsFeedbackBannerType_enum.ToolsFeedbackBannerType.FULLWIDTH && this.content));
     }
     get hostElement() { return index.getElement(this); }
     static get watchers() { return {
-        "afHeading": ["validateHeading"],
-        "afText": ["validateHeading"]
+        "afHeading": [{
+                "validateHeading": 0
+            }],
+        "afText": [{
+                "validateHeading": 0
+            }]
     }; }
 };
-FeedbackBanner.style = DigiToolsFeedbackBannerStyle0;
+FeedbackBanner.style = toolsFeedbackBannerCss();
 
 exports.digi_tools_feedback_banner = FeedbackBanner;

package/dist/cjs/digi-tools-feedback-rating.cjs.entry.js

@@ -1,44 +1,63 @@
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
+var index = require('./index-tbq85ezH.js');
+var layoutBlockVariation_enum = require('./layout-block-variation.enum-BldWvnDk.js');
+var logger_util = require('./logger.util-DUhrcCTY.js');
+var randomIdGenerator_util = require('./randomIdGenerator.util-C8XR2Tn1.js');
+var toolsFeedbackRatingVariation_enum = require('./tools-feedback-rating-variation.enum-CBI4GhXs.js');
 
-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: 36rem) {\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: 36rem) {\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 toolsFeedbackRatingCss = () => `.sc-digi-tools-feedback-rating-h{container-type:inline-size;display:block;width:100%}.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{padding-left:0;padding-right:0}.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{padding:0}.sc-digi-tools-feedback-rating-h .digi-tools-feedback-rating__wrapper.sc-digi-tools-feedback-rating{padding-top:var(--digi--padding--largest);padding-inline:var(--digi--padding--largest);padding-bottom:40px}@media (max-width: 47.9375rem){.sc-digi-tools-feedback-rating-h .digi-tools-feedback-rating__wrapper.sc-digi-tools-feedback-rating{padding-bottom:24px;padding-top:var(--digi--padding--medium)}}@media (max-width: 36rem){.sc-digi-tools-feedback-rating-h .digi-tools-feedback-rating__wrapper.sc-digi-tools-feedback-rating{padding-inline:var(--digi--padding--medium)}}@container (max-width: 576px){.sc-digi-tools-feedback-rating-h .digi-tools-feedback-rating .digi-tools-feedback-rating__wrapper{padding-inline:var(--digi--padding--medium)}}@container (max-width: 768px){.sc-digi-tools-feedback-rating-h .digi-tools-feedback-rating .digi-tools-feedback-rating__wrapper{padding-bottom:24px;padding-top:var(--digi--padding--medium)}}.sc-digi-tools-feedback-rating-h .digi-tools-feedback-rating__step1-wrapper.sc-digi-tools-feedback-rating{display:block}@media (min-width: 36rem){.sc-digi-tools-feedback-rating-h .digi-tools-feedback-rating__step1-wrapper.sc-digi-tools-feedback-rating{margin-top:0}}@media (max-width: 48rem){.sc-digi-tools-feedback-rating-h .digi-tools-feedback-rating__step1-wrapper.sc-digi-tools-feedback-rating{flex-shrink:unset}}@container (min-width: 576px){.sc-digi-tools-feedback-rating-h .digi-tools-feedback-rating .digi-tools-feedback-rating__step1-wrapper{margin-top:0}}@container (max-width: 768px){.sc-digi-tools-feedback-rating-h .digi-tools-feedback-rating .digi-tools-feedback-rating__step1-wrapper{flex-shrink:unset}}@container (max-width: 342px){.sc-digi-tools-feedback-rating-h .digi-tools-feedback-rating .digi-tools-feedback-rating__step1-wrapper{display:flex;align-items:flex-start;flex-direction:column;row-gap:var(--digi--padding--medium)}}.sc-digi-tools-feedback-rating-h .digi-tools-feedback-rating__step1-description.sc-digi-tools-feedback-rating{display:block;margin-bottom:10px;font-weight:var(--digi--typography--label--font-weight--mobile)}.sc-digi-tools-feedback-rating-h .digi-tools-feedback-rating__heading.sc-digi-tools-feedback-rating{margin-top:0;margin-inline-end:3.5rem;max-width:500px;margin-bottom:16px}@media (max-width: 48rem){.sc-digi-tools-feedback-rating-h .digi-tools-feedback-rating__heading.sc-digi-tools-feedback-rating{margin-inline-end:0}}@container (max-width: 768px){.sc-digi-tools-feedback-rating-h .digi-tools-feedback-rating legend .digi-tools-feedback-rating__heading{margin-inline-end:0}}.sc-digi-tools-feedback-rating-h .digi-tools-feedback-rating__fieldset.sc-digi-tools-feedback-rating{max-width:inherit;border:none !important;margin:0;padding:0}.sc-digi-tools-feedback-rating-h .digi-tools-feedback-rating__star-rating.sc-digi-tools-feedback-rating{padding:0;width:100%}.sc-digi-tools-feedback-rating-h .digi-tools-feedback-rating__star-rating.sc-digi-tools-feedback-rating legend.sc-digi-tools-feedback-rating{padding-left:0;flex-basis:26.8125rem}.sc-digi-tools-feedback-rating-h .digi-tools-feedback-rating__star-rating.sc-digi-tools-feedback-rating .hidden.sc-digi-tools-feedback-rating{border:0;clip:rect(1px, 1px, 1px, 1px);-webkit-clip-path:inset(50%);clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sc-digi-tools-feedback-rating-h .digi-tools-feedback-rating__star-rating-stars.sc-digi-tools-feedback-rating{display:inline-flex;flex-wrap:wrap;max-height:5rem;margin-inline-end:0.625rem}.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{display:flex}.sc-digi-tools-feedback-rating-h .digi-tools-feedback-rating__thankyou-check-icon.sc-digi-tools-feedback-rating{padding-right:24px;padding-top:3px;box-sizing:content-box}.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{margin-bottom:0px}.sc-digi-tools-feedback-rating-h .digi-tools-feedback-rating__star-rating-star-button.sc-digi-tools-feedback-rating{background-color:unset;border:unset;cursor:pointer;padding:var(--digi--gutter--smallest-3);display:block;position:relative;margin-inline-end:0.875rem;height:1.875rem}.sc-digi-tools-feedback-rating-h .digi-tools-feedback-rating__star-rating-star-button.sc-digi-tools-feedback-rating:focus-visible{outline:2px solid black;outline-offset:2px;box-shadow:0px 0px 0px 5px white}.sc-digi-tools-feedback-rating-h .digi-tools-feedback-rating-star-icon.sc-digi-tools-feedback-rating{fill:none}.sc-digi-tools-feedback-rating-h .digi-tools-feedback-rating-star-icon-border.sc-digi-tools-feedback-rating{stroke:var(--digi--color--icon--primary)}.sc-digi-tools-feedback-rating-h .digi-tools-feedback-rating__infographic-primary.sc-digi-tools-feedback-rating{fill:var(--digi--color--infographic--brand--primary)}.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{fill:var(--digi--color--icon--brand-primary)}.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{stroke:var(--digi--color--icon--brand-primary)}.sc-digi-tools-feedback-rating-h .digi-tools-feedback-rating__thankyou-text-with-rating.sc-digi-tools-feedback-rating{margin-bottom:var(--digi--margin--medium)}`;
 
 const ToolsFeedbackRating = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
         this.afOnClickFeedback = index.createEvent(this, "afOnClickFeedback", 7);
         this.afOnSubmitFeedbackLink = index.createEvent(this, "afOnSubmitFeedbackLink", 7);
+        /**
+         * Sätter ett id-attribut. Om inget anges används en slumpmässig sträng.
+         * @en Sets an id attribute.
+         */
         this.afId = randomIdGenerator_util.randomIdGenerator('digi-tools-feedback-rating');
-        this.afIsDone = undefined;
-        this.afVariation = undefined;
+        /**
+         * Sätter typ som kan vara 'fullwidth', 'grid' eller 'minimal'.
+         * @en Sets type. Can be 'fullwidth', 'grid' or 'minimal'.
+         */
         this.afType = toolsFeedbackRatingVariation_enum.FeedbackRatingType.FULLWIDTH;
+        /**
+         * Sätt rubrikens vikt. 'h2' är förvalt.
+         * @en Set heading level. Default is 'h2'
+         */
         this.afHeadingLevel = toolsFeedbackRatingVariation_enum.FeedbackRatingHeadingLevel.H2;
+        /**
+         * Anger frågan på det som ska betygsättas.
+         * @en Sets the question
+         */
         this.afQuestion = 'Hur nöjd är du med tjänsten?';
+        /**
+         * Anger rubriken efter inskickat betyg.
+         * @en Sets the heading after the rating is sent
+         */
         this.afThankYouHeading = 'Tack för din feedback!';
+        /**
+         * Anger svarsalternativen som visas i komponenten och spåras med Piwik. Behöver separeras med semikolon.
+         * @en Sets the answer options
+         */
         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;
+        /**
+         * Om afLink används, kombineras den med URL-variabler för inkludering av betyg och URL:en som användaren kommer ifrån
+         * @en Adds custom link for sending rating to Webropol
+         */
         this.afUseCustomLink = false;
+        /**
+         * Sätter nuvarande steg
+         * @en Sets current steps
+         */
         this.currentStep = 1;
+        /**
+         * Kontrollerar att frågan inte är en tom sträng
+         * @en Checks if mandatory content are included
+         */
         this.validContent = true;
-        this.hoveredRating = undefined;
-        this.selectedRating = undefined;
-        this.selectedText = undefined;
     }
     afIsDoneHandler() {
         this.currentStep = 2;
@@ -170,14 +189,18 @@ const ToolsFeedbackRating = class {
             {}).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: '92be9e5f875efdfaae5655bf648b4aef277ed240', class: Object.assign({ 'digi-tools-feedback-rating': true }, this.cssModifiers) }, index.h("digi-layout-block", { key: 'b4dddd1ef54e948b267ba979bc2e8f02a031caa0', afVariation: this.layoutBlockVariation, afMarginTop: true, "af-container": "none" }, this.content)));
+        return (index.h("div", { key: 'fdff695b9e34b152364130a2c7be4a38b2c2aca2', class: Object.assign({ 'digi-tools-feedback-rating': true }, this.cssModifiers) }, index.h("digi-layout-block", { key: '6b507973581b8306c0322a12d9f9ea0a7db34d16', afVariation: this.layoutBlockVariation, afMarginTop: true, "af-container": "none" }, this.content)));
     }
     get hostElement() { return index.getElement(this); }
     static get watchers() { return {
-        "afIsDone": ["afIsDoneHandler"],
-        "afQuestion": ["validateQuestion"]
+        "afIsDone": [{
+                "afIsDoneHandler": 0
+            }],
+        "afQuestion": [{
+                "validateQuestion": 0
+            }]
     }; }
 };
-ToolsFeedbackRating.style = DigiToolsFeedbackRatingStyle0;
+ToolsFeedbackRating.style = toolsFeedbackRatingCss();
 
 exports.digi_tools_feedback_rating = ToolsFeedbackRating;

package/dist/cjs/digi-tools-feedback.cjs.entry.js

@@ -1,56 +1,95 @@
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
+var index = require('./index-tbq85ezH.js');
+var randomIdGenerator_util = require('./randomIdGenerator.util-C8XR2Tn1.js');
+var typographyVariation_enum = require('./typography-variation.enum-4snUBTF7.js');
+var layoutBlockVariation_enum = require('./layout-block-variation.enum-BldWvnDk.js');
+require('./badge-notification-shape.enum-CEyEo2G5.js');
+require('./badge-status-variation.enum-XX8d--rj.js');
+var codeExampleVariation_enum = require('./code-example-variation.enum-BCENTUV2.js');
+require('./form-input-type.enum-B2CsNSBg.js');
+var buttonVariation_enum = require('./button-variation.enum-DkUalo9f.js');
+require('./calendar-week-view-heading-level.enum-NEkm5SUq.js');
+require('./bar-chart-variation.enum-BZFN4377.js');
+require('./code-variation.enum-BM-hhQuD.js');
+require('./expandable-accordion-header-level.enum-CjL9V3Kt.js');
+require('./expandable-faq-item-variation.enum-aKkYAQgd.js');
+require('./expandable-faq-variation.enum-FEybT9s4.js');
+require('./footer-card-variation.enum-BPnpkC45.js');
+require('./form-checkbox-variation.enum-BfOGU4Qt.js');
+require('./form-validation-message-variation.enum-DgkifAnP.js');
+require('./form-radiogroup-validation.enum-DBDbjF6N.js');
+require('./form-select-variation.enum-e6wjWyaS.js');
+require('./form-textarea-variation.enum-BcEyaR5W.js');
+require('./info-card-multi-type.enum-pqhvdrsN.js');
+require('./info-card-variation.enum-B1cqmknX.js');
+require('./layout-container-max-width.enum-DqWtU7WK.js');
+require('./layout-columns-variation.enum-OgD-hvRN.js');
+require('./link-button-variation.enum-03cHZQxx.js');
+require('./list-type.enum-CkFOn-eB.js');
+require('./loader-skeleton-variation.enum-UvPtdesw.js');
+require('./loader-spinner-size.enum-u5AQs-UJ.js');
+require('./logo-color.enum-BJZv-f6R.js');
+require('./media-figure-alignment.enum-BWO1sg67.js');
+require('./navigation-sidebar-variation.enum-70NIGQoi.js');
+require('./navigation-vertical-menu-variation.enum-7IUICId3.js');
+require('./progress-circle-role.enum-DCkczyl8.js');
+require('./progress-indicator-variation.enum-3KORUGDH.js');
+require('./progress-list-item-variation.enum-Dk3YS--x.js');
+require('./progress-list-variation.enum-BvLLJK9O.js');
+require('./progressbar-variation.enum-CnRJPSs7.js');
+require('./quote-image-inner-position.enum-CLifVlj0.js');
+require('./table-variation.enum-DlDZKXbq.js');
+require('./tag-media-icon.enum-DzhiwvjI.js');
+require('./tag-size.enum-DFom3Smn.js');
+require('./tools-feedback-banner-type.enum-Dyeg3XNb.js');
+require('./tools-feedback-rating-variation.enum-CBI4GhXs.js');
+require('./tools-theme-provider.brand.enum-BzduvCUY.js');
+require('./typography-heading-jumbo-variation.enum-Di1Jeh0G.js');
+require('./typography-meta-variation.enum-lvDemnSz.js');
+require('./typography-time-variation.enum-D2gIVzYH.js');
+require('./util-breakpoint-observer-breakpoints.enum-zoJiezkV.js');
 
-const index = require('./index-7a477838.js');
-const randomIdGenerator_util = require('./randomIdGenerator.util-e7f4b6de.js');
-const typographyVariation_enum = require('./typography-variation.enum-ad1b2403.js');
-const layoutBlockVariation_enum = require('./layout-block-variation.enum-f6102119.js');
-require('./badge-notification-shape.enum-ff802554.js');
-require('./badge-status-variation.enum-0a5adc21.js');
-const codeExampleVariation_enum = require('./code-example-variation.enum-1611825e.js');
-require('./form-input-type.enum-1fb2180a.js');
-const buttonVariation_enum = require('./button-variation.enum-bc521499.js');
-require('./calendar-week-view-heading-level.enum-fd0c841b.js');
-require('./bar-chart-variation.enum-a4e866b6.js');
-require('./code-variation.enum-c4a4e6fd.js');
-require('./expandable-accordion-header-level.enum-45483252.js');
-require('./expandable-faq-variation.enum-af923f49.js');
-require('./form-radiogroup-validation.enum-03a17d4d.js');
-require('./form-textarea-variation.enum-9c90d40f.js');
-require('./list-type.enum-aea4d012.js');
-require('./loader-skeleton-variation.enum-d52ba55e.js');
-require('./loader-spinner-size.enum-db2973f0.js');
-require('./media-figure-alignment.enum-3885aba5.js');
-require('./navigation-sidebar-variation.enum-1c0c3064.js');
-require('./progress-circle-role.enum-b7fdcf0c.js');
-require('./progress-list-item-variation.enum-90e4c874.js');
-require('./progress-list-variation.enum-06d5ce27.js');
-require('./progressbar-variation.enum-aff9fa80.js');
-require('./quote-image-inner-position.enum-e64e7a6d.js');
-require('./table-variation.enum-25df2ad7.js');
-require('./tag-size.enum-387c516c.js');
-require('./tools-feedback-banner-type.enum-de373ba0.js');
-require('./tools-feedback-rating-variation.enum-2f71e84d.js');
-require('./typography-meta-variation.enum-13ac3538.js');
-require('./typography-time-variation.enum-bce1d87e.js');
-require('./util-breakpoint-observer-breakpoints.enum-e96d3a84.js');
-
-const toolsFeedbackCss = ".sc-digi-tools-feedback-h{--digi--tools-feedback--background-color--primary:var(--digi--color--background--pop-out);--digi--tools-feedback--background-color--secondary:var(--digi--color--background--primary-elevated);--digi--tools-feedback--padding:var(--digi--padding--large);--digi--tools-feedback--font-size--desktop:var(--digi--typography--heading-2--font-size--desktop);--digi--tools-feedback--font-size--mobile:var(--digi--typography--heading-2--font-size--mobile);--digi--tools-feedback--heading--font-family:var(--digi--global--typography--font-family--default);--digi--tools-feedback--heading--font-weight:var(--digi--typography--heading-4--font-weight--desktop)}.sc-digi-tools-feedback-h .digi-tools-feedback.sc-digi-tools-feedback{background-color:var(--BACKGROUND-COLOR);font-family:var(--digi--tools-feedback--heading--font-family)}@media (max-width: 47.9375rem){.sc-digi-tools-feedback-h .digi-tools-feedback.sc-digi-tools-feedback{padding-top:var(--digi--padding--medium);padding-inline-start:0;padding-bottom:3rem}}.sc-digi-tools-feedback-h .digi-tools-feedback--primary.sc-digi-tools-feedback{--BACKGROUND-COLOR:var(--digi--tools-feedback--background-color--primary)}.sc-digi-tools-feedback-h .digi-tools-feedback--secondary.sc-digi-tools-feedback{--BACKGROUND-COLOR:var(--digi--tools-feedback--background-color--secondary)}.sc-digi-tools-feedback-h .digi-tools-feedback--grid.sc-digi-tools-feedback{display:grid;padding-inline:var(--digi--padding--medium)}.sc-digi-tools-feedback-h .digi-tools-feedback--grid.sc-digi-tools-feedback .digi-tools-feedback__container.sc-digi-tools-feedback{grid-column:1;grid-row:1}.sc-digi-tools-feedback-h .digi-tools-feedback__container.sc-digi-tools-feedback{display:flex;flex-direction:row;align-items:center;padding-top:var(--digi--padding--largest-3);padding-bottom:3.563rem}@media (max-width: 47.9375rem){.sc-digi-tools-feedback-h .digi-tools-feedback__container.sc-digi-tools-feedback{display:flex;flex-direction:column;align-items:flex-start;padding-inline-start:0;padding-top:0;padding-bottom:0}}.sc-digi-tools-feedback-h .digi-tools-feedback__container-header.sc-digi-tools-feedback{display:flex;flex-direction:row;padding-inline-end:var(--digi--padding--largest-3);font-size:var(--digi--tools-feedback--font-size--desktop)}@media (max-width: 47.9375rem){.sc-digi-tools-feedback-h .digi-tools-feedback__container-header.sc-digi-tools-feedback{padding-inline-start:0;padding-inline-end:0}}.sc-digi-tools-feedback-h .digi-tools-feedback__container-header-title.sc-digi-tools-feedback{margin-top:0.4rem;font-size:var(--digi--tools-feedback--font-size--desktop);margin-bottom:0 !important;font-weight:var(--digi--tools-feedback--heading--font-weight)}@media (max-width: 47.9375rem){.sc-digi-tools-feedback-h .digi-tools-feedback__container-header-title.sc-digi-tools-feedback{font-size:var(--digi--tools-feedback--font-size--mobile)}}.sc-digi-tools-feedback-h .digi-tools-feedback__container-header-icon.sc-digi-tools-feedback{margin-top:0.4rem;padding-inline-end:var(--digi--padding--large);flex-shrink:0}@media (max-width: 47.9375rem){.sc-digi-tools-feedback-h .digi-tools-feedback__container-header-icon.sc-digi-tools-feedback{padding-inline-end:var(--digi--padding--medium)}}.sc-digi-tools-feedback-h .digi-tools-feedback__container-btns.sc-digi-tools-feedback{display:flex;column-gap:var(--digi--padding--smaller)}.sc-digi-tools-feedback-h .digi-tools-feedback__container-btns.sc-digi-tools-feedback digi-button.sc-digi-tools-feedback{--digi--button--width:5.625rem;text-align:center}@media (max-width: 47.9375rem){.sc-digi-tools-feedback-h .digi-tools-feedback__container-btns.sc-digi-tools-feedback{padding-top:var(--digi--padding--medium);padding-inline-start:calc(58px + 1rem)}}.sc-digi-tools-feedback-h .digi-tools-feedback__infographic-secondary.sc-digi-tools-feedback{fill:var(--digi--color--infographic--brand--secondary)}.sc-digi-tools-feedback-h .digi-tools-feedback__infographic-primary.sc-digi-tools-feedback{fill:var(--digi--color--infographic--brand--primary)}.sc-digi-tools-feedback-h .digi-tools-feedback__close-button.sc-digi-tools-feedback{visibility:hidden}.sc-digi-tools-feedback-h .digi-tools-feedback--step-two.sc-digi-tools-feedback .digi-tools-feedback__container.sc-digi-tools-feedback{padding-bottom:0}.sc-digi-tools-feedback-h .digi-tools-feedback--step-three.sc-digi-tools-feedback{padding-inline-start:var(--digi--padding--medium);padding-top:var(--digi--padding--largest-3);padding-bottom:3.563rem}@media (max-width: 47.9375rem){.sc-digi-tools-feedback-h .digi-tools-feedback--step-three.sc-digi-tools-feedback{padding-inline-start:0}}.sc-digi-tools-feedback-h .digi-tools-feedback--step-three.sc-digi-tools-feedback .digi-tools-feedback__container-header-icon.sc-digi-tools-feedback{margin-top:0.65rem}.sc-digi-tools-feedback-s>[slot=form]{display:none}.digi-tools-feedback--step-two.sc-digi-tools-feedback .digi-tools-feedback__close-button.sc-digi-tools-feedback{display:grid;justify-content:end;padding-top:var(--digi--padding--medium);padding-inline-end:var(--digi--padding--smaller);visibility:visible}@media (max-width: 47.9375rem){.digi-tools-feedback--step-two.sc-digi-tools-feedback .digi-tools-feedback__close-button.sc-digi-tools-feedback{padding-top:0;padding-bottom:var(--digi--padding--medium)}}.digi-tools-feedback--step-two.sc-digi-tools-feedback-s>[slot=form],.digi-tools-feedback--step-two .sc-digi-tools-feedback-s>[slot=form]{display:flex;flex-direction:column;padding-top:var(--digi--padding--large);padding-bottom:3.563rem;max-width:37.5rem}@media (max-width: 47.9375rem){.digi-tools-feedback--step-two.sc-digi-tools-feedback-s>[slot=form],.digi-tools-feedback--step-two .sc-digi-tools-feedback-s>[slot=form]{padding-inline-start:0}}";
-const DigiToolsFeedbackStyle0 = toolsFeedbackCss;
+const toolsFeedbackCss = () => `.sc-digi-tools-feedback-h{--digi--tools-feedback--background-color--primary:var(--digi--color--background--pop-out);--digi--tools-feedback--background-color--secondary:var(--digi--color--background--primary);--digi--tools-feedback--padding:var(--digi--padding--large);--digi--tools-feedback--font-size--desktop:var(--digi--typography--heading-2--font-size--desktop);--digi--tools-feedback--font-size--mobile:var(--digi--typography--heading-2--font-size--mobile);--digi--tools-feedback--heading--font-family:var(--digi--global--typography--font-family--default);--digi--tools-feedback--heading--font-weight:var(--digi--typography--heading-4--font-weight--desktop)}.sc-digi-tools-feedback-h .digi-tools-feedback.sc-digi-tools-feedback{background-color:var(--BACKGROUND-COLOR);font-family:var(--digi--tools-feedback--heading--font-family)}@media (max-width: 47.9375rem){.sc-digi-tools-feedback-h .digi-tools-feedback.sc-digi-tools-feedback{padding-top:var(--digi--padding--medium);padding-inline-start:0;padding-bottom:3rem}}.sc-digi-tools-feedback-h .digi-tools-feedback--primary.sc-digi-tools-feedback{--BACKGROUND-COLOR:var(--digi--tools-feedback--background-color--primary)}.sc-digi-tools-feedback-h .digi-tools-feedback--secondary.sc-digi-tools-feedback{--BACKGROUND-COLOR:var(--digi--tools-feedback--background-color--secondary)}.sc-digi-tools-feedback-h .digi-tools-feedback--grid.sc-digi-tools-feedback{display:grid;padding-inline:var(--digi--padding--medium)}.sc-digi-tools-feedback-h .digi-tools-feedback--grid.sc-digi-tools-feedback .digi-tools-feedback__container.sc-digi-tools-feedback{grid-column:1;grid-row:1}.sc-digi-tools-feedback-h .digi-tools-feedback__container.sc-digi-tools-feedback{display:flex;flex-direction:row;align-items:center;padding-top:var(--digi--padding--largest-3);padding-bottom:3.563rem}@media (max-width: 47.9375rem){.sc-digi-tools-feedback-h .digi-tools-feedback__container.sc-digi-tools-feedback{display:flex;flex-direction:column;align-items:flex-start;padding-inline-start:0;padding-top:0;padding-bottom:0}}.sc-digi-tools-feedback-h .digi-tools-feedback__container-header.sc-digi-tools-feedback{display:flex;flex-direction:row;padding-inline-end:var(--digi--padding--largest-3);font-size:var(--digi--tools-feedback--font-size--desktop)}@media (max-width: 47.9375rem){.sc-digi-tools-feedback-h .digi-tools-feedback__container-header.sc-digi-tools-feedback{padding-inline-start:0;padding-inline-end:0}}.sc-digi-tools-feedback-h .digi-tools-feedback__container-header-title.sc-digi-tools-feedback{margin-top:0.4rem;font-size:var(--digi--tools-feedback--font-size--desktop);margin-bottom:0 !important;font-weight:var(--digi--tools-feedback--heading--font-weight)}@media (max-width: 47.9375rem){.sc-digi-tools-feedback-h .digi-tools-feedback__container-header-title.sc-digi-tools-feedback{font-size:var(--digi--tools-feedback--font-size--mobile)}}.sc-digi-tools-feedback-h .digi-tools-feedback__container-header-icon.sc-digi-tools-feedback{margin-top:0.4rem;padding-inline-end:var(--digi--padding--large);flex-shrink:0}@media (max-width: 47.9375rem){.sc-digi-tools-feedback-h .digi-tools-feedback__container-header-icon.sc-digi-tools-feedback{padding-inline-end:var(--digi--padding--medium)}}.sc-digi-tools-feedback-h .digi-tools-feedback__container-btns.sc-digi-tools-feedback{display:flex;column-gap:var(--digi--padding--smaller)}.sc-digi-tools-feedback-h .digi-tools-feedback__container-btns.sc-digi-tools-feedback digi-button.sc-digi-tools-feedback{--digi--button--width:5.625rem;text-align:center}@media (max-width: 47.9375rem){.sc-digi-tools-feedback-h .digi-tools-feedback__container-btns.sc-digi-tools-feedback{padding-top:var(--digi--padding--medium);padding-inline-start:calc(58px + 1rem)}}.sc-digi-tools-feedback-h .digi-tools-feedback__infographic-secondary.sc-digi-tools-feedback{fill:var(--digi--color--infographic--brand--secondary)}.sc-digi-tools-feedback-h .digi-tools-feedback__infographic-primary.sc-digi-tools-feedback{fill:var(--digi--color--infographic--brand--primary)}.sc-digi-tools-feedback-h .digi-tools-feedback__close-button.sc-digi-tools-feedback{visibility:hidden}.sc-digi-tools-feedback-h .digi-tools-feedback--step-two.sc-digi-tools-feedback .digi-tools-feedback__container.sc-digi-tools-feedback{padding-bottom:0}.sc-digi-tools-feedback-h .digi-tools-feedback--step-three.sc-digi-tools-feedback{padding-inline-start:var(--digi--padding--medium);padding-top:var(--digi--padding--largest-3);padding-bottom:3.563rem}@media (max-width: 47.9375rem){.sc-digi-tools-feedback-h .digi-tools-feedback--step-three.sc-digi-tools-feedback{padding-inline-start:0}}.sc-digi-tools-feedback-h .digi-tools-feedback--step-three.sc-digi-tools-feedback .digi-tools-feedback__container-header-icon.sc-digi-tools-feedback{margin-top:0.65rem}.sc-digi-tools-feedback-s>[slot=form]{display:none}.digi-tools-feedback--step-two.sc-digi-tools-feedback .digi-tools-feedback__close-button.sc-digi-tools-feedback{display:grid;justify-content:end;padding-top:var(--digi--padding--medium);padding-inline-end:var(--digi--padding--smaller);visibility:visible}@media (max-width: 47.9375rem){.digi-tools-feedback--step-two.sc-digi-tools-feedback .digi-tools-feedback__close-button.sc-digi-tools-feedback{padding-top:0;padding-bottom:var(--digi--padding--medium)}}.digi-tools-feedback--step-two.sc-digi-tools-feedback-s>[slot=form],.digi-tools-feedback--step-two .sc-digi-tools-feedback-s>[slot=form]{display:flex;flex-direction:column;padding-top:var(--digi--padding--large);padding-bottom:3.563rem;max-width:37.5rem}@media (max-width: 47.9375rem){.digi-tools-feedback--step-two.sc-digi-tools-feedback-s>[slot=form],.digi-tools-feedback--step-two .sc-digi-tools-feedback-s>[slot=form]{padding-inline-start:0}}`;
 
 const ToolsFeedback = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
         this.afOnReady = index.createEvent(this, "afOnReady", 3);
+        /**
+         * Sätter variant. Kan vara 'primär' eller 'sekundär'.
+         * @en Sets the variation of the feedback.
+         */
         this.afVariation = typographyVariation_enum.FeedbackVariation.PRIMARY;
+        /**
+         * Sätter typ på kortet. Kan vara 'fullwidth' eller 'grid'.
+         * @en Set card type. Can be 'fullwidth' or 'grid'.
+         */
         this.afType = typographyVariation_enum.ToolsFeedbackType.FULLWIDTH;
-        this.afText = undefined;
+        /**
+         * Visa stäng-knapp
+         * @en Show close button
+         */
         this.afCloseButtonText = 'Stäng';
+        /**
+         * Sätter textens vikt (h1-h6)
+         * @en Set text level (h1-h6)
+         */
         this.afHeadingLevel = typographyVariation_enum.ToolsFeedbackHeadingLevel.H4;
-        this.afFeedback = undefined;
+        /**
+         * Sätter attributet 'id'. Om inget väljs så skapas ett slumpmässigt id.
+         * @en Input id attribute. Defaults to random string.
+         */
         this.afId = randomIdGenerator_util.randomIdGenerator('digi-tools-feedback');
+        /**
+         * Gör det möjligt att visa ett tack-meddelande som visas när användaren har delat med sig av feedback.
+         * @en If true, a response message  will show thanking the user for sharing that the page was helpful
+         */
         this.afIsDone = false;
+        /**
+         * Sätter nuvarande steg
+         * @en Set current steps
+         */
         this.currentStep = 1;
     }
     afIsDoneHandler() {
@@ -99,13 +138,15 @@ const ToolsFeedback = class {
         this.afOnReady.emit();
     }
     render() {
-        return (index.h("div", { key: '8d8391ebc8fbc5a4a597e74965dc8ec42051e795', class: Object.assign({ 'digi-tools-feedback': true }, this.cssModifiers) }, this.afType === typographyVariation_enum.ToolsFeedbackType.FULLWIDTH && (index.h("digi-layout-block", { key: '3af4691534a06683985b40ae583bb00da3e8f43d', afVariation: layoutBlockVariation_enum.LayoutBlockVariation.TRANSPARENT }, this.content)), this.afType !== typographyVariation_enum.ToolsFeedbackType.FULLWIDTH && this.content));
+        return (index.h("div", { key: 'f0f5510a11313227c03079a425d187013ffa6b44', class: Object.assign({ 'digi-tools-feedback': true }, this.cssModifiers) }, this.afType === typographyVariation_enum.ToolsFeedbackType.FULLWIDTH && (index.h("digi-layout-block", { key: 'e04c0a4b68c1a78e611b7cc5b5a65d528ba2cb7a', afVariation: layoutBlockVariation_enum.LayoutBlockVariation.TRANSPARENT }, this.content)), this.afType !== typographyVariation_enum.ToolsFeedbackType.FULLWIDTH && this.content));
     }
     get hostElement() { return index.getElement(this); }
     static get watchers() { return {
-        "afIsDone": ["afIsDoneHandler"]
+        "afIsDone": [{
+                "afIsDoneHandler": 0
+            }]
     }; }
 };
-ToolsFeedback.style = DigiToolsFeedbackStyle0;
+ToolsFeedback.style = toolsFeedbackCss();
 
 exports.digi_tools_feedback = ToolsFeedback;