optimized-react-component-library-xyz123 0.1.157 → 0.1.159

package/dist/index.js

@@ -237,8 +237,10 @@ var CheckboxGroup = ({
   showPreview = false,
   activatedLanguage = "sv"
 }) => {
-  var _a;
+  var _a, _b;
   const questionId = `question-${question.id}`;
+  const errorId = `error-${question.id}`;
+  const groupId = `checkbox-group-${question.id}`;
   const [checkedValues, setCheckedValues] = (0, import_react2.useState)([]);
   (0, import_react2.useEffect)(() => {
     var _a2;
@@ -259,34 +261,44 @@ var CheckboxGroup = ({
     setCheckedValues(updatedValues);
     const e = { target: { value: updatedValues.toString() } };
     handleQuestionInputChange(e, question);
-    console.log(checkedValues);
+    console.log("checkedValues" + checkedValues);
   };
   return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
-    !showPreview && question.visible && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { id: questionId, className: "pts-root-question pts-checkboxGroup-container", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("fieldset", { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("legend", { className: "checkboxGroup-legend", id: `label-${questionId}`, children: [
-        question.questionLabel,
-        " ",
-        question.isQuestionMandatory && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { "aria-hidden": true, className: "pts-root-mandatoryAsterisk", children: "*" }),
-        " "
-      ] }),
-      (_a = question.options) == null ? void 0 : _a.map((option, index) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "checkboxGroup-options", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
-        " ",
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-          "input",
-          {
-            type: "checkbox",
-            name: `${question.id}-option`,
-            id: `${question.id}-option-${index}`,
-            value: option.label,
-            checked: checkedValues.includes(option.label),
-            onChange: (e) => handleInputChange(e, option.label),
-            className: question.hasValidationError ? "pts-root-question-input-error-border" : void 0
-          }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("label", { htmlFor: `${question.id}-option-${index}`, children: option.label })
-      ] }) }, index))
-    ] }) }),
-    " ",
+    !showPreview && question.visible && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { id: questionId, className: "pts-root-question pts-checkboxGroup-container", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+      "fieldset",
+      {
+        "aria-required": question.isQuestionMandatory,
+        "aria-invalid": question.hasValidationError ? question.hasValidationError : void 0,
+        "aria-errormessage": question.hasValidationError ? errorId : void 0,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("legend", { className: "pts-checkboxGroup-legend", id: `label-${groupId}`, children: [
+            question.questionLabel,
+            " ",
+            question.isQuestionMandatory && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { "aria-hidden": true, className: "pts-root-mandatoryAsterisk", children: "*" })
+          ] }),
+          (_a = question.options) == null ? void 0 : _a.map((option, index) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "pts-checkboxGroup-options", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+              "input",
+              {
+                type: "checkbox",
+                name: `${question.id}-option`,
+                id: `${question.id}-option-${index}`,
+                value: option.label,
+                checked: checkedValues.includes(option.label),
+                onChange: (e) => handleInputChange(e, option.label),
+                className: question.hasValidationError ? "pts-root-question-input-error-border" : void 0
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("label", { htmlFor: `${groupId}-option-${index}`, children: option.label })
+          ] }) }, index)),
+          question.hasValidationError && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "pts-root-error", id: errorId, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { "aria-hidden": true, className: "errorDot", children: "!" }),
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "sr-only", children: "Valideringsfel" }),
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "errorText", children: ((_b = question.validationDefaultMessesege) != null ? _b : activatedLanguage === "sv") ? "V\xE4nligen besvara" : "Please reply" })
+          ] })
+        ]
+      }
+    ) }),
     showPreview && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(PreviewCheckboxGroup, { activatedLanguage, question })
   ] });
 };