optimized-react-component-library-xyz123 0.28.6 → 0.28.7

package/dist/index.mjs

@@ -1,22 +1,29 @@
-// src/components/layout/ValidationMessage/ValidationMessage.tsx
+// src/components/input-components/InfoTextStandard/InfoTextStandard.tsx
+import DOMPurify from "dompurify";
 import { jsx, jsxs } from "react/jsx-runtime";
-var ValidationSummary = ({
-  validationMessesege,
-  validationId,
-  activatedLanguage = "sv",
-  showValidationMessage = false,
-  extraCssClass = ""
-}) => {
-  return showValidationMessage && /* @__PURE__ */ jsxs("div", { className: `pts-root-error ${extraCssClass}`, id: validationId, children: [
-    /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "pts-validation-error-icon", children: /* @__PURE__ */ jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", children: [
-      /* @__PURE__ */ jsx("rect", { width: "16", height: "16", rx: "8", fill: "#8E0039" }),
-      /* @__PURE__ */ jsx("path", { d: "M7.45996 10.4268L6.96094 5.34082V2.98926H9.03906V5.34082L8.54688 10.4268H7.45996ZM7.04297 13.0107V11.0898H8.96387V13.0107H7.04297Z", fill: "white" })
-    ] }) }),
-    /* @__PURE__ */ jsx("span", { className: "sr-only", children: activatedLanguage === "sv" ? "Valideringsfel" : "Validation error" }),
-    /* @__PURE__ */ jsx("span", { className: "errorText", children: validationMessesege })
-  ] });
+var InfoTextStandard = ({ infoText, selectedValue, questionId, activatedLanguage }) => {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      id: `textinfo-${questionId}-${selectedValue}`,
+      "aria-live": "polite",
+      "aria-atomic": "true",
+      children: infoText.length > 0 && /* @__PURE__ */ jsxs("div", { id: questionId, className: "pts-root-question pts-infoTextdStandard-container", children: [
+        /* @__PURE__ */ jsx("h2", { className: "sr-only", children: activatedLanguage === "en" ? `Information about selected alternative - ${selectedValue}` : `Information om valt alternativ - ${selectedValue}` }),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            id: questionId,
+            dangerouslySetInnerHTML: {
+              __html: DOMPurify.sanitize(infoText != null ? infoText : "")
+            }
+          }
+        )
+      ] })
+    }
+  );
 };
-var ValidationMessage_default = ValidationSummary;
+var InfoTextStandard_default = InfoTextStandard;
 
 // src/components/input-components/RadioMultipleStandard/RadioMultipleStandard.tsx
 import { Fragment, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
@@ -26,7 +33,7 @@ var InputRadio = ({
   showPreview = false,
   activatedLanguage = "sv"
 }) => {
-  var _a, _b, _c;
+  var _a, _b, _c, _d;
   const questionId = `question-${question.id}`;
   const groupId = `radio-group-${question.id}`;
   const errorId = `error-${question.id}`;
@@ -34,46 +41,59 @@ var InputRadio = ({
     const e = { target: { value: event.target.value } };
     handleQuestionInputChange(e, question);
   };
+  const languageObj = question.languageSupport[0];
+  var optionsInfoText = [];
+  if ("optionsInfoText" in languageObj) {
+    optionsInfoText = languageObj.optionsInfoText;
+  }
+  console.log(optionsInfoText);
   return /* @__PURE__ */ jsxs2(Fragment, { children: [
-    !showPreview && question.visible && /* @__PURE__ */ jsx2("div", { className: "pts-root-question pts-radioMultiple-container", id: questionId, children: /* @__PURE__ */ jsxs2(
-      "fieldset",
-      {
-        "aria-required": question.isQuestionMandatory,
-        "aria-invalid": question.hasValidationError ? question.hasValidationError : void 0,
-        "aria-errormessage": question.hasValidationError ? errorId : void 0,
-        children: [
-          /* @__PURE__ */ jsxs2("legend", { id: `label-${groupId}`, children: [
-            question.questionLabel,
-            " ",
-            question.isQuestionMandatory && /* @__PURE__ */ jsx2("span", { "aria-hidden": true, className: "pts-root-mandatoryAsterisk", children: "*" })
-          ] }),
-          (_a = question.options) == null ? void 0 : _a.map((option, index) => /* @__PURE__ */ jsxs2("div", { className: "pts-radio-option", children: [
-            /* @__PURE__ */ jsx2(
-              "input",
-              {
-                type: "radio",
-                name: `name-${question.id}`,
-                id: `${groupId}-option-${index}`,
-                value: option.value,
-                checked: question.answer === option.value,
-                onChange: handleInputChange
-              }
-            ),
-            /* @__PURE__ */ jsx2("label", { htmlFor: `${groupId}-option-${index}`, children: option.label }),
-            " "
-          ] }, index)),
-          /* @__PURE__ */ jsx2(
-            ValidationMessage_default,
-            {
-              showValidationMessage: (_b = question.hasValidationError) != null ? _b : false,
-              validationId: errorId,
-              validationMessesege: (_c = question.validationDefaultMessesege) != null ? _c : "",
-              activatedLanguage
-            }
-          )
-        ]
-      }
-    ) }),
+    !showPreview && question.visible && /* @__PURE__ */ jsxs2("div", { className: "pts-root-question pts-radioMultiple-container", id: questionId, children: [
+      /* @__PURE__ */ jsxs2(
+        "fieldset",
+        {
+          "aria-required": question.isQuestionMandatory,
+          "aria-invalid": question.hasValidationError ? question.hasValidationError : void 0,
+          "aria-errormessage": question.hasValidationError ? errorId : void 0,
+          children: [
+            /* @__PURE__ */ jsxs2("legend", { id: `label-${groupId}`, children: [
+              question.questionLabel,
+              " ",
+              question.isQuestionMandatory && /* @__PURE__ */ jsx2("span", { "aria-hidden": true, className: "pts-root-mandatoryAsterisk", children: "*" })
+            ] }),
+            (_a = question.options) == null ? void 0 : _a.map((option, index) => /* @__PURE__ */ jsxs2("div", { className: "pts-radio-option", children: [
+              /* @__PURE__ */ jsx2(
+                "input",
+                {
+                  type: "radio",
+                  name: `name-${question.id}`,
+                  id: `${groupId}-option-${index}`,
+                  value: option.value,
+                  checked: question.answer === option.value,
+                  onChange: handleInputChange
+                }
+              ),
+              /* @__PURE__ */ jsx2("label", { htmlFor: `${groupId}-option-${index}`, children: option.label }),
+              " "
+            ] }, index)),
+            question.hasValidationError && /* @__PURE__ */ jsxs2("div", { className: "pts-root-error", id: errorId, children: [
+              /* @__PURE__ */ jsx2("span", { "aria-hidden": true, className: "errorDot", children: "!" }),
+              /* @__PURE__ */ jsx2("span", { className: "sr-only", children: "Valideringsfel" }),
+              /* @__PURE__ */ jsx2("span", { className: "errorText", children: question.validationDefaultMessesege })
+            ] })
+          ]
+        }
+      ),
+      optionsInfoText.length > 0 && /* @__PURE__ */ jsx2(
+        InfoTextStandard_default,
+        {
+          infoText: (_c = (_b = optionsInfoText.find((op) => op.selectedValue === question.answer)) == null ? void 0 : _b.infoText) != null ? _c : "",
+          selectedValue: (_d = question.answer) != null ? _d : "",
+          questionId,
+          activatedLanguage: activatedLanguage != null ? activatedLanguage : "sv"
+        }
+      )
+    ] }),
     showPreview && /* @__PURE__ */ jsx2(PreviewRadio, { question })
   ] });
 };
@@ -181,7 +201,7 @@ var CheckboxGroup = ({
   showPreview = false,
   activatedLanguage = "sv"
 }) => {
-  var _a, _b, _c;
+  var _a;
   const questionId = `question-${question.id}`;
   const errorId = `error-${question.id}`;
   const groupId = `checkbox-group-${question.id}`;
@@ -233,15 +253,11 @@ var CheckboxGroup = ({
             ),
             /* @__PURE__ */ jsx4("label", { htmlFor: `${groupId}-option-${index}`, children: option.label })
           ] }, index)),
-          /* @__PURE__ */ jsx4(
-            ValidationMessage_default,
-            {
-              showValidationMessage: (_b = question.hasValidationError) != null ? _b : false,
-              validationId: errorId,
-              validationMessesege: (_c = question.validationDefaultMessesege) != null ? _c : "",
-              activatedLanguage
-            }
-          )
+          question.hasValidationError && /* @__PURE__ */ jsxs4("div", { className: "pts-root-error", id: errorId, children: [
+            /* @__PURE__ */ jsx4("span", { "aria-hidden": true, className: "errorDot", children: "!" }),
+            /* @__PURE__ */ jsx4("span", { className: "sr-only", children: "Valideringsfel" }),
+            /* @__PURE__ */ jsx4("span", { className: "errorText", children: question.validationDefaultMessesege })
+          ] })
         ]
       }
     ) }),
@@ -266,7 +282,7 @@ var PreviewCheckboxGroup = ({
 };
 
 // src/components/input-components/TextAreaStandard/TextAreaStandard.tsx
-import DOMPurify from "dompurify";
+import DOMPurify2 from "dompurify";
 import { Fragment as Fragment4, jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
 var InputTextarea = ({
   question,
@@ -274,7 +290,7 @@ var InputTextarea = ({
   showPreview = false,
   activatedLanguage
 }) => {
-  var _a, _b, _c, _d, _e, _f, _g;
+  var _a, _b, _c, _d, _e;
   const questionId = `question-${question.id}`;
   const inputId = `textarea-${question.id}`;
   const aboutId = `about-${question.id}`;
@@ -298,7 +314,7 @@ var InputTextarea = ({
               id: aboutId,
               className: "pts-about",
               dangerouslySetInnerHTML: {
-                __html: DOMPurify.sanitize(question.aboutText)
+                __html: DOMPurify2.sanitize(question.aboutText)
               }
             }
           ),
@@ -317,24 +333,19 @@ var InputTextarea = ({
             }
           ),
           /* @__PURE__ */ jsxs5("div", { className: "pts-textarea-counter-error-container", children: [
-            /* @__PURE__ */ jsx5(
-              ValidationMessage_default,
-              {
-                showValidationMessage: (_b = question.hasValidationError) != null ? _b : false,
-                validationId: errorId,
-                validationMessesege: (_c = question.validationDefaultMessesege) != null ? _c : "",
-                activatedLanguage: activatedLanguage != null ? activatedLanguage : "sv"
-              }
-            ),
-            !((_d = question.questionExtraAttribute) == null ? void 0 : _d.hideTextCounter) && /* @__PURE__ */ jsxs5(
+            question.hasValidationError && /* @__PURE__ */ jsxs5("div", { className: "pts-root-error", id: errorId, children: [
+              /* @__PURE__ */ jsx5("span", { "aria-label": "Felmeddelande.", className: "errorDot", children: "!" }),
+              /* @__PURE__ */ jsx5("span", { className: "errorText", children: question.validationDefaultMessesege })
+            ] }),
+            !((_b = question.questionExtraAttribute) == null ? void 0 : _b.hideTextCounter) && /* @__PURE__ */ jsxs5(
               "div",
               {
-                className: `pts-character-counter ${question.answer && (((_e = question.questionExtraAttribute) == null ? void 0 : _e.answerMaxLength) || defaultMaxLength) && question.answer.length > (((_f = question.questionExtraAttribute) == null ? void 0 : _f.answerMaxLength) || defaultMaxLength) ? "error" : ""}`,
+                className: `pts-character-counter ${question.answer && (((_c = question.questionExtraAttribute) == null ? void 0 : _c.answerMaxLength) || defaultMaxLength) && question.answer.length > (((_d = question.questionExtraAttribute) == null ? void 0 : _d.answerMaxLength) || defaultMaxLength) ? "error" : ""}`,
                 children: [
                   question.answer ? question.answer.length : 0,
                   " av",
                   " ",
-                  ((_g = question.questionExtraAttribute) == null ? void 0 : _g.answerMaxLength) || defaultMaxLength,
+                  ((_e = question.questionExtraAttribute) == null ? void 0 : _e.answerMaxLength) || defaultMaxLength,
                   " tecken"
                 ]
               }
@@ -367,7 +378,7 @@ var PreviewTextarea = ({
 };
 
 // src/components/input-components/TextFieldStandard/TextFieldStandard.tsx
-import DOMPurify2 from "dompurify";
+import DOMPurify3 from "dompurify";
 import { Fragment as Fragment5, jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
 var TextFieldStandard = ({
   question,
@@ -375,7 +386,7 @@ var TextFieldStandard = ({
   showPreview = false,
   activatedLanguage
 }) => {
-  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o;
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m;
   const questionId = `question-${question.id}`;
   const inputId = `textField-${question.id}`;
   const aboutId = `about-${question.id}`;
@@ -399,7 +410,7 @@ var TextFieldStandard = ({
               id: aboutId,
               className: "pts-about",
               dangerouslySetInnerHTML: {
-                __html: DOMPurify2.sanitize(question.aboutText)
+                __html: DOMPurify3.sanitize(question.aboutText)
               }
             }
           ),
@@ -425,15 +436,11 @@ var TextFieldStandard = ({
               autoCapitalize: (_m = (_l = question.questionExtraAttribute) == null ? void 0 : _l.autoCapitalize) != null ? _m : void 0
             }
           ),
-          /* @__PURE__ */ jsx6(
-            ValidationMessage_default,
-            {
-              showValidationMessage: (_n = question.hasValidationError) != null ? _n : false,
-              validationId: errorId,
-              validationMessesege: (_o = question.validationDefaultMessesege) != null ? _o : "",
-              activatedLanguage: activatedLanguage != null ? activatedLanguage : "sv"
-            }
-          )
+          question.hasValidationError && /* @__PURE__ */ jsxs6("div", { className: "pts-root-error", id: errorId, children: [
+            /* @__PURE__ */ jsx6("span", { "aria-hidden": true, className: "errorDot", children: "!" }),
+            /* @__PURE__ */ jsx6("span", { className: "sr-only", children: "Valideringsfel" }),
+            /* @__PURE__ */ jsx6("span", { className: "errorText", children: question.validationDefaultMessesege })
+          ] })
         ]
       }
     ),
@@ -812,7 +819,6 @@ var AddFiles = ({
   allowedTotalFileSize = 20971520
   // 20MB = (1024 * 1024) * 20
 }) => {
-  var _a, _b;
   if (allowedFileTypes.length < 1) {
     allowedFileTypes = [
       "pdf",
@@ -856,7 +862,7 @@ var AddFiles = ({
   }, []);
   const onDrop = useCallback(
     (acceptedFiles) => {
-      var _a2, _b2, _c;
+      var _a, _b, _c;
       const validationErrors = [];
       const validFiles = [];
       const currentTotalFileSize = (questionObject.files || []).reduce(
@@ -864,7 +870,7 @@ var AddFiles = ({
         0
       );
       setTotalFileSize(currentTotalFileSize);
-      if ((((_a2 = questionObject.files) == null ? void 0 : _a2.length) || 0) >= allowedNumberOfFiles) {
+      if ((((_a = questionObject.files) == null ? void 0 : _a.length) || 0) >= allowedNumberOfFiles) {
         acceptedFiles.forEach((file) => {
           validationErrors.push({
             FileName: file.name,
@@ -877,7 +883,7 @@ var AddFiles = ({
       }
       let accumulatedNewSize = 0;
       for (const file of acceptedFiles) {
-        const fileExtension = ((_b2 = file.name.split(".").pop()) == null ? void 0 : _b2.toLowerCase()) || "";
+        const fileExtension = ((_b = file.name.split(".").pop()) == null ? void 0 : _b.toLowerCase()) || "";
         if (!allowedFileTypes.includes(fileExtension)) {
           validationErrors.push({
             FileName: file.name,
@@ -990,16 +996,11 @@ var AddFiles = ({
           ]
         }
       ),
-      /* @__PURE__ */ jsx12(
-        ValidationMessage_default,
-        {
-          showValidationMessage: (_a = questionObject.hasValidationError) != null ? _a : false,
-          validationId: errorId,
-          validationMessesege: (_b = questionObject.validationDefaultMessesege) != null ? _b : "",
-          activatedLanguage,
-          extraCssClass: "error addfileserror"
-        }
-      ),
+      questionObject.hasValidationError && /* @__PURE__ */ jsxs10("div", { className: "pts-root-error error addfileserror", id: errorId, children: [
+        /* @__PURE__ */ jsx12("span", { "aria-hidden": true, className: "errorDot", children: "!" }),
+        /* @__PURE__ */ jsx12("span", { className: "sr-only", children: "Valideringsfel" }),
+        /* @__PURE__ */ jsx12("span", { className: "errorText", children: questionObject.validationDefaultMessesege })
+      ] }),
       /* @__PURE__ */ jsx12(
         ExploreFilesStandard_default,
         {
@@ -1065,7 +1066,7 @@ var SingleCheckbox = ({
   showPreview = false,
   activatedLanguage = "sv"
 }) => {
-  var _a, _b, _c, _d;
+  var _a, _b;
   const questionId = `question-${question.id}`;
   const inputId = `checkbox-${question.id}`;
   const aboutId = `about-${question.id}`;
@@ -1118,15 +1119,12 @@ var SingleCheckbox = ({
         }
       ),
       " ",
-      /* @__PURE__ */ jsx13(
-        ValidationMessage_default,
-        {
-          showValidationMessage: (_c = question.hasValidationError) != null ? _c : false,
-          validationId: errorId,
-          validationMessesege: (_d = question.validationDefaultMessesege) != null ? _d : "",
-          activatedLanguage
-        }
-      )
+      question.hasValidationError && /* @__PURE__ */ jsxs11("div", { className: "pts-root-error", id: errorId, children: [
+        /* @__PURE__ */ jsx13("span", { "aria-hidden": true, className: "errorDot", children: "!" }),
+        /* @__PURE__ */ jsx13("span", { className: "sr-only", children: "Valideringsfel" }),
+        /* @__PURE__ */ jsx13("span", { className: "errorText", children: question.validationDefaultMessesege })
+      ] }),
+      " "
     ] }),
     " ",
     showPreview && /* @__PURE__ */ jsx13(PreviewSingleCheckbox, { activatedLanguage, question })
@@ -1947,12 +1945,11 @@ var QuestionGroup = ({
   showPreview = false,
   markQuestionAsDisplayed
 }) => {
-  var _a, _b, _c;
+  var _a;
   if (!questions || questions.length === 0) {
     return null;
   }
   const firstQuestion = questions[0];
-  const errorId = firstQuestion.id + "-error";
   const groupMandatory = (_a = firstQuestion.validationType) == null ? void 0 : _a.find((e) => e.startsWith("groupCheck-"));
   useEffect11(() => {
     questions.forEach((question) => {
@@ -1993,15 +1990,10 @@ var QuestionGroup = ({
                 firstQuestion.validationDefaultMessesege
               ] })
             ] }),
-            /* @__PURE__ */ jsx15(
-              ValidationMessage_default,
-              {
-                showValidationMessage: (_b = firstQuestion.hasValidationError) != null ? _b : false,
-                validationId: errorId,
-                validationMessesege: (_c = firstQuestion.validationDefaultMessesege) != null ? _c : "",
-                activatedLanguage: activatedLanguage != null ? activatedLanguage : "sv"
-              }
-            ),
+            firstQuestion.hasValidationError && /* @__PURE__ */ jsxs13("div", { className: "pts-root-error", id: firstQuestion.id + "-error", children: [
+              /* @__PURE__ */ jsx15("span", { "aria-label": "Valideringsfel", className: "errorDot", children: "!" }),
+              /* @__PURE__ */ jsx15("span", { className: "errorText", children: firstQuestion.validationDefaultMessesege })
+            ] }),
             groupQuestions
           ]
         }
@@ -2659,7 +2651,7 @@ var SkipLinkStandard_default = SkipLink;
 
 // src/components/text-blocks/TextHeadlineAndBodyStandard/TextHeadlineAndBodyStandard.tsx
 import { createElement } from "react";
-import DOMPurify3 from "dompurify";
+import DOMPurify4 from "dompurify";
 import { jsx as jsx22, jsxs as jsxs19 } from "react/jsx-runtime";
 var TextHeadlineAndBody = ({ data, headlineType = "h2" }) => {
   return /* @__PURE__ */ jsxs19(
@@ -2668,7 +2660,7 @@ var TextHeadlineAndBody = ({ data, headlineType = "h2" }) => {
       className: "pts-textHeadlineAndBody-container",
       children: [
         data.headline && createElement(headlineType, { id: "textHeadlineAndBody-headline" }, data.headline),
-        data.body && /* @__PURE__ */ jsx22("div", { dangerouslySetInnerHTML: { __html: DOMPurify3.sanitize(data.body) } }),
+        data.body && /* @__PURE__ */ jsx22("div", { dangerouslySetInnerHTML: { __html: DOMPurify4.sanitize(data.body) } }),
         data.linksForMoreInfo && data.linksForMoreInfo.length > 1 && /* @__PURE__ */ jsx22("ul", { className: "pts-moreinfo-list", children: data.linksForMoreInfo.map((link, index) => /* @__PURE__ */ jsx22("li", { className: index > 0 ? "notFirstInList" : "", children: /* @__PURE__ */ jsxs19(
           "a",
           {
@@ -2789,11 +2781,11 @@ var PrincipleOfPublicity = ({ activatedLanguage = "" }) => {
 var PrincipleOfPublicityStandard_default = PrincipleOfPublicity;
 
 // src/components/text-blocks/TextBody/TextBody.tsx
-import DOMPurify4 from "dompurify";
+import DOMPurify5 from "dompurify";
 import { jsx as jsx24, jsxs as jsxs20 } from "react/jsx-runtime";
 var TextBody = ({ data }) => {
   return /* @__PURE__ */ jsxs20("div", { className: "pts-textBody-container", children: [
-    data.body && /* @__PURE__ */ jsx24("div", { dangerouslySetInnerHTML: { __html: DOMPurify4.sanitize(data.body) } }),
+    data.body && /* @__PURE__ */ jsx24("div", { dangerouslySetInnerHTML: { __html: DOMPurify5.sanitize(data.body) } }),
     data.linksForMoreInfo && data.linksForMoreInfo.length > 1 && /* @__PURE__ */ jsx24("ul", { className: "pts-moreinfo-list", children: data.linksForMoreInfo.map((link, index) => /* @__PURE__ */ jsx24("li", { className: index > 0 ? "notFirstInList" : "", children: /* @__PURE__ */ jsxs20(
       "a",
       {