optimized-react-component-library-xyz123 0.19.21 → 0.19.23
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.d.mts +0 -2
- package/dist/index.d.ts +0 -2
- package/dist/index.js +59 -51
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +59 -51
- package/dist/index.mjs.map +1 -1
- package/package.json +1 -1
- package/src/css/mobileView.css +1 -2
- package/src/css/styles.css +3 -30
package/dist/index.d.mts
CHANGED
package/dist/index.d.ts
CHANGED
package/dist/index.js
CHANGED
|
@@ -333,6 +333,11 @@ var InputTextarea = ({
|
|
|
333
333
|
const aboutId = `about-${question.id}`;
|
|
334
334
|
const errorId = `error-${question.id}`;
|
|
335
335
|
const defaultMaxLength = 1e3;
|
|
336
|
+
const answerLength = (_b = (_a = question.answer) == null ? void 0 : _a.length) != null ? _b : 0;
|
|
337
|
+
const maxLength = (_d = (_c = question.questionExtraAttribute) == null ? void 0 : _c.answerMaxLength) != null ? _d : defaultMaxLength;
|
|
338
|
+
const isTooLong = answerLength > maxLength;
|
|
339
|
+
const counterText = activatedLanguage === "en" ? `${answerLength} of ${maxLength} characters` : `${answerLength} av ${maxLength} tecken`;
|
|
340
|
+
const maxLengthErrorText = activatedLanguage === "en" ? `The text must be ${maxLength} characters or less` : `Texten f\xE5r max vara ${maxLength} tecken`;
|
|
336
341
|
return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
|
|
337
342
|
!showPreview && question.visible && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
|
|
338
343
|
"div",
|
|
@@ -364,29 +369,20 @@ var InputTextarea = ({
|
|
|
364
369
|
required: question.isQuestionMandatory,
|
|
365
370
|
"aria-required": question.isQuestionMandatory,
|
|
366
371
|
"aria-invalid": question.hasValidationError,
|
|
367
|
-
maxLength: ((_a = question.questionExtraAttribute) == null ? void 0 : _a.answerMaxLength) || defaultMaxLength,
|
|
368
372
|
"aria-describedby": [question.aboutText ? aboutId : null, question.hasValidationError ? errorId : null].filter(Boolean).join(" ") || void 0,
|
|
369
373
|
id: inputId
|
|
370
374
|
}
|
|
371
375
|
),
|
|
372
376
|
/* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "pts-textarea-counter-error-container", children: [
|
|
373
|
-
question.hasValidationError && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "pts-root-error", id: errorId, children: [
|
|
377
|
+
!isTooLong && question.hasValidationError && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "pts-root-error", id: errorId, children: [
|
|
374
378
|
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { "aria-label": "Felmeddelande.", className: "errorDot", children: "!" }),
|
|
375
379
|
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "errorText", children: question.validationDefaultMessesege })
|
|
376
380
|
] }),
|
|
377
|
-
|
|
378
|
-
"
|
|
379
|
-
{
|
|
380
|
-
|
|
381
|
-
|
|
382
|
-
question.answer ? question.answer.length : 0,
|
|
383
|
-
" av",
|
|
384
|
-
" ",
|
|
385
|
-
((_e = question.questionExtraAttribute) == null ? void 0 : _e.answerMaxLength) || defaultMaxLength,
|
|
386
|
-
" tecken"
|
|
387
|
-
]
|
|
388
|
-
}
|
|
389
|
-
)
|
|
381
|
+
isTooLong && question.hasValidationError && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "pts-root-error", id: errorId, children: [
|
|
382
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { "aria-label": "Felmeddelande.", className: "errorDot", children: "!" }),
|
|
383
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "errorText", children: maxLengthErrorText })
|
|
384
|
+
] }),
|
|
385
|
+
!((_e = question.questionExtraAttribute) == null ? void 0 : _e.hideTextCounter) && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { "aria-live": "polite", className: `pts-character-counter`, children: counterText })
|
|
390
386
|
] })
|
|
391
387
|
]
|
|
392
388
|
}
|
|
@@ -423,18 +419,21 @@ var TextFieldStandard = ({
|
|
|
423
419
|
showPreview = false,
|
|
424
420
|
activatedLanguage
|
|
425
421
|
}) => {
|
|
426
|
-
var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m;
|
|
422
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n;
|
|
427
423
|
const questionId = `question-${question.id}`;
|
|
428
424
|
const inputId = `textField-${question.id}`;
|
|
429
425
|
const aboutId = `about-${question.id}`;
|
|
430
426
|
const errorId = `error-${question.id}`;
|
|
431
|
-
const
|
|
427
|
+
const answerLength = (_b = (_a = question.answer) == null ? void 0 : _a.length) != null ? _b : 0;
|
|
428
|
+
const maxLength = 100;
|
|
429
|
+
const isTooLong = answerLength > maxLength;
|
|
430
|
+
const maxLengthErrorText = activatedLanguage === "en" ? `The text must be ${maxLength} characters or less` : `Texten f\xE5r max vara ${maxLength} tecken`;
|
|
432
431
|
return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
|
|
433
432
|
!showPreview && question.visible && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
|
|
434
433
|
"div",
|
|
435
434
|
{
|
|
436
435
|
id: questionId,
|
|
437
|
-
className: `pts-root-question pts-textField-container${((
|
|
436
|
+
className: `pts-root-question pts-textField-container${((_c = question.questionExtraAttribute) == null ? void 0 : _c.disabled) ? " pts-textField-disabled" : ""}${question.aboutText ? " pts-question-hasAbout" : ""}`.trim(),
|
|
438
437
|
children: [
|
|
439
438
|
/* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("label", { htmlFor: inputId, children: [
|
|
440
439
|
question.questionLabel,
|
|
@@ -454,29 +453,33 @@ var TextFieldStandard = ({
|
|
|
454
453
|
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
|
|
455
454
|
"input",
|
|
456
455
|
{
|
|
457
|
-
type: (
|
|
458
|
-
autoComplete: (
|
|
459
|
-
inputMode: (
|
|
456
|
+
type: (_e = (_d = question.questionExtraAttribute) == null ? void 0 : _d.inputType) != null ? _e : "text",
|
|
457
|
+
autoComplete: (_g = (_f = question.questionExtraAttribute) == null ? void 0 : _f.autoComplete) != null ? _g : void 0,
|
|
458
|
+
inputMode: (_i = (_h = question.questionExtraAttribute) == null ? void 0 : _h.inputMode) != null ? _i : void 0,
|
|
460
459
|
name: `question-name-${question.id}`,
|
|
461
460
|
className: question.hasValidationError ? "pts-root-question-input-error-border" : void 0,
|
|
462
461
|
onChange: (e) => handleQuestionInputChange(e, question),
|
|
463
462
|
value: question.answer,
|
|
464
|
-
maxLength: ((_h = question.questionExtraAttribute) == null ? void 0 : _h.answerMaxLength) || defaultMaxLength,
|
|
465
463
|
id: inputId,
|
|
466
|
-
disabled: (
|
|
464
|
+
disabled: (_j = question.questionExtraAttribute) == null ? void 0 : _j.disabled,
|
|
467
465
|
required: question.isQuestionMandatory,
|
|
468
466
|
"aria-required": question.isQuestionMandatory,
|
|
469
467
|
"aria-describedby": [question.aboutText ? aboutId : null].filter(Boolean).join(" ") || void 0,
|
|
470
468
|
"aria-invalid": question.hasValidationError,
|
|
471
469
|
"aria-errormessage": question.hasValidationError ? errorId : void 0,
|
|
472
|
-
spellCheck: (
|
|
473
|
-
autoCapitalize: (
|
|
470
|
+
spellCheck: (_l = (_k = question.questionExtraAttribute) == null ? void 0 : _k.spellCheck) != null ? _l : void 0,
|
|
471
|
+
autoCapitalize: (_n = (_m = question.questionExtraAttribute) == null ? void 0 : _m.autoCapitalize) != null ? _n : void 0
|
|
474
472
|
}
|
|
475
473
|
),
|
|
476
474
|
question.hasValidationError && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "pts-root-error", id: errorId, children: [
|
|
477
475
|
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { "aria-hidden": true, className: "errorDot", children: "!" }),
|
|
478
476
|
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "sr-only", children: "Valideringsfel" }),
|
|
479
477
|
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "errorText", children: question.validationDefaultMessesege })
|
|
478
|
+
] }),
|
|
479
|
+
isTooLong && question.hasValidationError && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "pts-root-error", id: errorId, children: [
|
|
480
|
+
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { "aria-hidden": true, className: "errorDot", children: "!" }),
|
|
481
|
+
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "sr-only", children: "Valideringsfel" }),
|
|
482
|
+
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "errorText", children: maxLengthErrorText })
|
|
480
483
|
] })
|
|
481
484
|
]
|
|
482
485
|
}
|
|
@@ -1190,7 +1193,7 @@ var PreviewSingleCheckbox = ({
|
|
|
1190
1193
|
// src/helpers/hasQuestionValidationError/hasQuestionValidationError.tsx
|
|
1191
1194
|
var import_date_fns = require("date-fns");
|
|
1192
1195
|
var hasQuestionValidationError = (question, questions) => {
|
|
1193
|
-
var _a, _b, _c, _d, _e;
|
|
1196
|
+
var _a, _b, _c, _d, _e, _f;
|
|
1194
1197
|
let error = false;
|
|
1195
1198
|
if (question.isQuestionMandatory) {
|
|
1196
1199
|
if (question.isTouched === false) {
|
|
@@ -1203,19 +1206,34 @@ var hasQuestionValidationError = (question, questions) => {
|
|
|
1203
1206
|
error = true;
|
|
1204
1207
|
}
|
|
1205
1208
|
}
|
|
1206
|
-
if ((
|
|
1209
|
+
if ((_b = question.validationType) == null ? void 0 : _b.find(
|
|
1210
|
+
(e) => {
|
|
1211
|
+
var _a2;
|
|
1212
|
+
return e === "maxLength" && ((_a2 = question.questionExtraAttribute) == null ? void 0 : _a2.answerMaxLength);
|
|
1213
|
+
}
|
|
1214
|
+
)) {
|
|
1215
|
+
if (question.answer.length > question.questionExtraAttribute.answerMaxLength) {
|
|
1216
|
+
error = true;
|
|
1217
|
+
}
|
|
1218
|
+
}
|
|
1219
|
+
if (question.questionType === "TextField") {
|
|
1220
|
+
if (question.answer.length > 100) {
|
|
1221
|
+
error = true;
|
|
1222
|
+
}
|
|
1223
|
+
}
|
|
1224
|
+
if (((_c = question.validationType) == null ? void 0 : _c.find((e) => e === "email")) && (question.isQuestionMandatory || question.answer !== "")) {
|
|
1207
1225
|
const emailRegex = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
|
|
1208
1226
|
if (!emailRegex.test(question.answer)) {
|
|
1209
1227
|
error = true;
|
|
1210
1228
|
}
|
|
1211
1229
|
}
|
|
1212
|
-
if (((
|
|
1230
|
+
if (((_d = question.validationType) == null ? void 0 : _d.find((e) => e === "fourNumbers")) && (question.isQuestionMandatory || question.answer !== "")) {
|
|
1213
1231
|
const fourNumbersRegex = /^\d{4}$/.test(question.answer);
|
|
1214
1232
|
if (!fourNumbersRegex) {
|
|
1215
1233
|
error = true;
|
|
1216
1234
|
}
|
|
1217
1235
|
}
|
|
1218
|
-
if (((
|
|
1236
|
+
if (((_e = question.validationType) == null ? void 0 : _e.find((e) => e === "isDateFormatValid")) && question.answer !== "") {
|
|
1219
1237
|
const regex = /^\d{4}-\d{2}-\d{2}$/;
|
|
1220
1238
|
if (!regex.test(question.answer)) {
|
|
1221
1239
|
error = true;
|
|
@@ -1229,16 +1247,18 @@ var hasQuestionValidationError = (question, questions) => {
|
|
|
1229
1247
|
error = true;
|
|
1230
1248
|
}
|
|
1231
1249
|
}
|
|
1232
|
-
const groupCheckError = (
|
|
1250
|
+
const groupCheckError = (_f = question.validationType) == null ? void 0 : _f.find((e) => e.startsWith("groupCheck-"));
|
|
1233
1251
|
if (groupCheckError) {
|
|
1234
1252
|
const ids = groupCheckError.replace("groupCheck-", "").split("-");
|
|
1235
|
-
const relatedAnswers = ids.map(
|
|
1236
|
-
|
|
1237
|
-
|
|
1238
|
-
|
|
1239
|
-
|
|
1240
|
-
|
|
1241
|
-
|
|
1253
|
+
const relatedAnswers = ids.map(
|
|
1254
|
+
(id) => {
|
|
1255
|
+
var _a2;
|
|
1256
|
+
return (_a2 = questions.find((q) => {
|
|
1257
|
+
var _a3;
|
|
1258
|
+
return ((_a3 = q.id) == null ? void 0 : _a3.toString()) === id;
|
|
1259
|
+
})) == null ? void 0 : _a2.answer;
|
|
1260
|
+
}
|
|
1261
|
+
);
|
|
1242
1262
|
const currentAnswer = question.answer;
|
|
1243
1263
|
const allAnswers = [...relatedAnswers, currentAnswer];
|
|
1244
1264
|
if (allAnswers.every((ans) => ans === "")) {
|
|
@@ -2123,7 +2143,7 @@ var CookieBanner_default = CookieBanner;
|
|
|
2123
2143
|
|
|
2124
2144
|
// src/components/layout/FooterStandard/FooterStandard.tsx
|
|
2125
2145
|
var import_jsx_runtime16 = require("react/jsx-runtime");
|
|
2126
|
-
var Footer = ({ activatedLanguage = "sv"
|
|
2146
|
+
var Footer = ({ activatedLanguage = "sv" }) => {
|
|
2127
2147
|
return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("footer", { className: "pts-footer-container", children: [
|
|
2128
2148
|
/* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "pts-footer-slogan-text-container", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("p", { className: "pts-footer-slogan-text", children: activatedLanguage === "sv" ? "S\xE4ker och tillg\xE4nglig kommunikation f\xF6r Sverige" : "Secure and accessible communication for Sweden" }) }),
|
|
2129
2149
|
/* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "pts-footer-content", children: [
|
|
@@ -2192,19 +2212,7 @@ var Footer = ({ activatedLanguage = "sv", appUsesCookies = false, openCookieBann
|
|
|
2192
2212
|
]
|
|
2193
2213
|
}
|
|
2194
2214
|
) }),
|
|
2195
|
-
/* @__PURE__ */ (0, import_jsx_runtime16.jsx)("li", { children:
|
|
2196
|
-
"button",
|
|
2197
|
-
{
|
|
2198
|
-
type: "button",
|
|
2199
|
-
"aria-controls": "cookie-banner",
|
|
2200
|
-
onClick: openCookieBanner,
|
|
2201
|
-
className: "pts-footer-button",
|
|
2202
|
-
children: [
|
|
2203
|
-
/* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: "sr-only", children: activatedLanguage === "en" ? "PTS Cookies (opens cookie banner)" : "PTS Kakor (\xF6ppnar kakbanner)" }),
|
|
2204
|
-
/* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { "aria-hidden": "true", children: activatedLanguage === "en" ? "Cookies" : "Kakor" })
|
|
2205
|
-
]
|
|
2206
|
-
}
|
|
2207
|
-
) : /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
|
|
2215
|
+
/* @__PURE__ */ (0, import_jsx_runtime16.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
|
|
2208
2216
|
"a",
|
|
2209
2217
|
{
|
|
2210
2218
|
href: activatedLanguage === "en" ? "https://pts.se/en/cookies-eservices" : "https://www.pts.se/kakor-etjanster",
|