optimized-react-component-library-xyz123 0.19.21 → 0.19.22
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 +55 -51
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +55 -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,22 @@ 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, _o, _p;
|
|
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 defaultMaxLength =
|
|
427
|
+
const defaultMaxLength = 100;
|
|
428
|
+
const answerLength = (_b = (_a = question.answer) == null ? void 0 : _a.length) != null ? _b : 0;
|
|
429
|
+
const maxLength = (_d = (_c = question.questionExtraAttribute) == null ? void 0 : _c.answerMaxLength) != null ? _d : defaultMaxLength;
|
|
430
|
+
const isTooLong = answerLength > maxLength;
|
|
431
|
+
const maxLengthErrorText = activatedLanguage === "en" ? `The text must be ${maxLength} characters or less` : `Texten f\xE5r max vara ${maxLength} tecken`;
|
|
432
432
|
return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
|
|
433
433
|
!showPreview && question.visible && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
|
|
434
434
|
"div",
|
|
435
435
|
{
|
|
436
436
|
id: questionId,
|
|
437
|
-
className: `pts-root-question pts-textField-container${((
|
|
437
|
+
className: `pts-root-question pts-textField-container${((_e = question.questionExtraAttribute) == null ? void 0 : _e.disabled) ? " pts-textField-disabled" : ""}${question.aboutText ? " pts-question-hasAbout" : ""}`.trim(),
|
|
438
438
|
children: [
|
|
439
439
|
/* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("label", { htmlFor: inputId, children: [
|
|
440
440
|
question.questionLabel,
|
|
@@ -454,29 +454,33 @@ var TextFieldStandard = ({
|
|
|
454
454
|
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
|
|
455
455
|
"input",
|
|
456
456
|
{
|
|
457
|
-
type: (
|
|
458
|
-
autoComplete: (
|
|
459
|
-
inputMode: (
|
|
457
|
+
type: (_g = (_f = question.questionExtraAttribute) == null ? void 0 : _f.inputType) != null ? _g : "text",
|
|
458
|
+
autoComplete: (_i = (_h = question.questionExtraAttribute) == null ? void 0 : _h.autoComplete) != null ? _i : void 0,
|
|
459
|
+
inputMode: (_k = (_j = question.questionExtraAttribute) == null ? void 0 : _j.inputMode) != null ? _k : void 0,
|
|
460
460
|
name: `question-name-${question.id}`,
|
|
461
461
|
className: question.hasValidationError ? "pts-root-question-input-error-border" : void 0,
|
|
462
462
|
onChange: (e) => handleQuestionInputChange(e, question),
|
|
463
463
|
value: question.answer,
|
|
464
|
-
maxLength: ((_h = question.questionExtraAttribute) == null ? void 0 : _h.answerMaxLength) || defaultMaxLength,
|
|
465
464
|
id: inputId,
|
|
466
|
-
disabled: (
|
|
465
|
+
disabled: (_l = question.questionExtraAttribute) == null ? void 0 : _l.disabled,
|
|
467
466
|
required: question.isQuestionMandatory,
|
|
468
467
|
"aria-required": question.isQuestionMandatory,
|
|
469
468
|
"aria-describedby": [question.aboutText ? aboutId : null].filter(Boolean).join(" ") || void 0,
|
|
470
469
|
"aria-invalid": question.hasValidationError,
|
|
471
470
|
"aria-errormessage": question.hasValidationError ? errorId : void 0,
|
|
472
|
-
spellCheck: (
|
|
473
|
-
autoCapitalize: (
|
|
471
|
+
spellCheck: (_n = (_m = question.questionExtraAttribute) == null ? void 0 : _m.spellCheck) != null ? _n : void 0,
|
|
472
|
+
autoCapitalize: (_p = (_o = question.questionExtraAttribute) == null ? void 0 : _o.autoCapitalize) != null ? _p : void 0
|
|
474
473
|
}
|
|
475
474
|
),
|
|
476
475
|
question.hasValidationError && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "pts-root-error", id: errorId, children: [
|
|
477
476
|
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { "aria-hidden": true, className: "errorDot", children: "!" }),
|
|
478
477
|
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "sr-only", children: "Valideringsfel" }),
|
|
479
478
|
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "errorText", children: question.validationDefaultMessesege })
|
|
479
|
+
] }),
|
|
480
|
+
isTooLong && question.hasValidationError && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "pts-root-error", id: errorId, children: [
|
|
481
|
+
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { "aria-hidden": true, className: "errorDot", children: "!" }),
|
|
482
|
+
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "sr-only", children: "Valideringsfel" }),
|
|
483
|
+
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "errorText", children: maxLengthErrorText })
|
|
480
484
|
] })
|
|
481
485
|
]
|
|
482
486
|
}
|
|
@@ -1190,7 +1194,7 @@ var PreviewSingleCheckbox = ({
|
|
|
1190
1194
|
// src/helpers/hasQuestionValidationError/hasQuestionValidationError.tsx
|
|
1191
1195
|
var import_date_fns = require("date-fns");
|
|
1192
1196
|
var hasQuestionValidationError = (question, questions) => {
|
|
1193
|
-
var _a, _b, _c, _d, _e;
|
|
1197
|
+
var _a, _b, _c, _d, _e, _f;
|
|
1194
1198
|
let error = false;
|
|
1195
1199
|
if (question.isQuestionMandatory) {
|
|
1196
1200
|
if (question.isTouched === false) {
|
|
@@ -1203,19 +1207,29 @@ var hasQuestionValidationError = (question, questions) => {
|
|
|
1203
1207
|
error = true;
|
|
1204
1208
|
}
|
|
1205
1209
|
}
|
|
1206
|
-
if ((
|
|
1210
|
+
if ((_b = question.validationType) == null ? void 0 : _b.find(
|
|
1211
|
+
(e) => {
|
|
1212
|
+
var _a2;
|
|
1213
|
+
return e === "maxLength" && ((_a2 = question.questionExtraAttribute) == null ? void 0 : _a2.answerMaxLength);
|
|
1214
|
+
}
|
|
1215
|
+
)) {
|
|
1216
|
+
if (question.answer.length > question.questionExtraAttribute.answerMaxLength) {
|
|
1217
|
+
error = true;
|
|
1218
|
+
}
|
|
1219
|
+
}
|
|
1220
|
+
if (((_c = question.validationType) == null ? void 0 : _c.find((e) => e === "email")) && (question.isQuestionMandatory || question.answer !== "")) {
|
|
1207
1221
|
const emailRegex = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
|
|
1208
1222
|
if (!emailRegex.test(question.answer)) {
|
|
1209
1223
|
error = true;
|
|
1210
1224
|
}
|
|
1211
1225
|
}
|
|
1212
|
-
if (((
|
|
1226
|
+
if (((_d = question.validationType) == null ? void 0 : _d.find((e) => e === "fourNumbers")) && (question.isQuestionMandatory || question.answer !== "")) {
|
|
1213
1227
|
const fourNumbersRegex = /^\d{4}$/.test(question.answer);
|
|
1214
1228
|
if (!fourNumbersRegex) {
|
|
1215
1229
|
error = true;
|
|
1216
1230
|
}
|
|
1217
1231
|
}
|
|
1218
|
-
if (((
|
|
1232
|
+
if (((_e = question.validationType) == null ? void 0 : _e.find((e) => e === "isDateFormatValid")) && question.answer !== "") {
|
|
1219
1233
|
const regex = /^\d{4}-\d{2}-\d{2}$/;
|
|
1220
1234
|
if (!regex.test(question.answer)) {
|
|
1221
1235
|
error = true;
|
|
@@ -1229,16 +1243,18 @@ var hasQuestionValidationError = (question, questions) => {
|
|
|
1229
1243
|
error = true;
|
|
1230
1244
|
}
|
|
1231
1245
|
}
|
|
1232
|
-
const groupCheckError = (
|
|
1246
|
+
const groupCheckError = (_f = question.validationType) == null ? void 0 : _f.find((e) => e.startsWith("groupCheck-"));
|
|
1233
1247
|
if (groupCheckError) {
|
|
1234
1248
|
const ids = groupCheckError.replace("groupCheck-", "").split("-");
|
|
1235
|
-
const relatedAnswers = ids.map(
|
|
1236
|
-
|
|
1237
|
-
|
|
1238
|
-
|
|
1239
|
-
|
|
1240
|
-
|
|
1241
|
-
|
|
1249
|
+
const relatedAnswers = ids.map(
|
|
1250
|
+
(id) => {
|
|
1251
|
+
var _a2;
|
|
1252
|
+
return (_a2 = questions.find((q) => {
|
|
1253
|
+
var _a3;
|
|
1254
|
+
return ((_a3 = q.id) == null ? void 0 : _a3.toString()) === id;
|
|
1255
|
+
})) == null ? void 0 : _a2.answer;
|
|
1256
|
+
}
|
|
1257
|
+
);
|
|
1242
1258
|
const currentAnswer = question.answer;
|
|
1243
1259
|
const allAnswers = [...relatedAnswers, currentAnswer];
|
|
1244
1260
|
if (allAnswers.every((ans) => ans === "")) {
|
|
@@ -2123,7 +2139,7 @@ var CookieBanner_default = CookieBanner;
|
|
|
2123
2139
|
|
|
2124
2140
|
// src/components/layout/FooterStandard/FooterStandard.tsx
|
|
2125
2141
|
var import_jsx_runtime16 = require("react/jsx-runtime");
|
|
2126
|
-
var Footer = ({ activatedLanguage = "sv"
|
|
2142
|
+
var Footer = ({ activatedLanguage = "sv" }) => {
|
|
2127
2143
|
return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("footer", { className: "pts-footer-container", children: [
|
|
2128
2144
|
/* @__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
2145
|
/* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "pts-footer-content", children: [
|
|
@@ -2192,19 +2208,7 @@ var Footer = ({ activatedLanguage = "sv", appUsesCookies = false, openCookieBann
|
|
|
2192
2208
|
]
|
|
2193
2209
|
}
|
|
2194
2210
|
) }),
|
|
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)(
|
|
2211
|
+
/* @__PURE__ */ (0, import_jsx_runtime16.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
|
|
2208
2212
|
"a",
|
|
2209
2213
|
{
|
|
2210
2214
|
href: activatedLanguage === "en" ? "https://pts.se/en/cookies-eservices" : "https://www.pts.se/kakor-etjanster",
|