optimized-react-component-library-xyz123
Version:
A modern React component library using TypeScript with React 19 support.
1,010 lines (995 loc) • 177 kB
JavaScript
"use strict";
var __create = Object.create;
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __getProtoOf = Object.getPrototypeOf;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
for (var name in all)
__defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
if (from && typeof from === "object" || typeof from === "function") {
for (let key of __getOwnPropNames(from))
if (!__hasOwnProp.call(to, key) && key !== except)
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
}
return to;
};
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
// If the importer is in node compatibility mode or this is not an ESM
// file that has been converted to a CommonJS file using a Babel-
// compatible transform (i.e. "__esModule" has not been set), then set
// "default" to the CommonJS "module.exports" for node compatibility.
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
mod
));
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
// src/index.tsx
var index_exports = {};
__export(index_exports, {
AddFilesStandard: () => AddFilesStandard_default,
CookieBanner: () => CookieBanner_default,
CreateApiDataObject: () => CreateApiDataObject_default,
DoCategoriesAndQuestionsVisible: () => DoCategoriesAndQuestionsVisible_default,
EditPreviewLinkStandard: () => EditPreviewLinkStandard_default,
FilesUploadStandard: () => FilesUploadStandard_default,
FooterStandard: () => FooterStandard_default,
GroupQuestionByStepPreviewPage: () => GroupQuestionByStepPreviewPage_default,
GroupQuestionsByStepCategoryGroup: () => GroupQuestionsByStepCategoryGroup_default,
HeaderStandard: () => HeaderStandard_default,
ILanguageSupportinitialState: () => ILanguageSupportinitialState,
InfoOnlyStandard: () => InfoOnlyStandard_default,
IsDependsOnOtherQuestionTrue: () => IsDependsOnOtherQuestionTrue_default,
ModalStandard: () => ModalStandard_default,
MultipleCheckboxesStandard: () => MultipleCheckboxesStandard_default,
PrincipleOfPublicityStandard: () => PrincipleOfPublicityStandard_default,
QuestionHasValidationError: () => QuestionHasValidationError_default,
QuestioninitialState: () => QuestioninitialState,
RadioMultipleStandard: () => RadioMultipleStandard_default,
RenderQuestion: () => RenderQuestion_default,
RenderQuestionGroup: () => RenderQuestionGroup_default,
ServiceHeadlineAndBodyStandard: () => ServiceHeadlineAndBodyStandard_default,
SkipLinkStandard: () => SkipLinkStandard_default,
StepperButtonsStandard: () => StepperButtonsStandard_default,
StepperStandard: () => StepperStandard_default,
TextAreaStandard: () => TextAreaStandard_default,
TextFieldStandard: () => TextFieldStandard_default,
TextHeadlineAndBodyStandard: () => TextHeadlineAndBodyStandard_default,
ValidationCheckAllVisibleQuestion: () => ValidationCheckAllVisibleQuestion_default,
ValidationErrorSummaryList: () => ValidationErrorSummaryList_default
});
module.exports = __toCommonJS(index_exports);
// src/NewInputComponentStandard/RadioMultipleStandard/RadioMultipleStandard.tsx
var import_jsx_runtime = require("react/jsx-runtime");
var InputRadio = ({ question, isTouched, showPreview = false }) => {
var _a;
const questionId = `question-${question.id}`;
const groupId = `radio-group-${question.id}`;
const errorId = `error-${question.id}`;
const handleInputChange = (event) => {
const e = { target: { value: event.target.value } };
isTouched(e, question);
};
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
!showPreview && question.visible && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "pts-root-question pts-radioMultiple-container", id: questionId, children: /* @__PURE__ */ (0, import_jsx_runtime.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_runtime.jsxs)("legend", { id: `label-${groupId}`, children: [
question.questionLabel,
" ",
question.isQuestionMandatory && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { "aria-hidden": true, className: "pts-root-mandatoryAsterisk", children: "*" })
] }),
(_a = question.options) == null ? void 0 : _a.map((option, index) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "pts-radio-option", children: [
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
"input",
{
type: "radio",
name: `name-${question.id}`,
id: `${groupId}-option-${index}`,
value: option.value,
checked: question.answer === option.value,
onChange: handleInputChange
}
),
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("label", { htmlFor: `${groupId}-option-${index}`, children: option.label }),
" "
] }, index)),
question.hasValidationError && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "pts-root-error", id: errorId, children: [
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { "aria-hidden": true, className: "errorDot", children: "!" }),
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "sr-only", children: "Valideringsfel" }),
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "errorText", children: question.validationDefaultMessesege })
] })
]
}
) }),
showPreview && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PreviewRadio, { question })
] });
};
var RadioMultipleStandard_default = InputRadio;
var PreviewRadio = ({ question }) => {
var _a, _b;
const previewId = `preview-${question.id}`;
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("dt", { id: `question-${previewId}`, children: (_a = question.previewLabel) != null ? _a : question.questionLabel }),
((_b = question.answer) == null ? void 0 : _b.trim()) ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("dd", { className: "pts-radioMultiple-preview pts-root-answer", id: `answer-${previewId}`, children: question.answer }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
"dd",
{
className: "pts-radioMultiple-preview pts-root-answer no-answer-preview-page",
id: `answer-${previewId}`,
children: "Inget svar"
}
)
] });
};
// src/NewInputComponentStandard/MultipleCheckboxesStandard/MultipleCheckboxesStandard.tsx
var import_react = require("react");
var import_jsx_runtime2 = require("react/jsx-runtime");
var MultipleCheckboxes = ({
question,
isTouched,
showPreview = false,
activatedLanguage = "sv"
}) => {
var _a;
const questionId = `question-${question.id}`;
const [checkedValues, setCheckedValues] = (0, import_react.useState)([]);
(0, import_react.useEffect)(() => {
var _a2;
const initialValues = ((_a2 = question.options) == null ? void 0 : _a2.filter((option) => {
var _a3;
return (_a3 = question.answer) == null ? void 0 : _a3.includes(option.label);
}).map((option) => option.label)) || [];
console.log("Initial values:", initialValues);
setCheckedValues(initialValues);
}, [question.answer, question.options]);
const handleInputChange = (event, optionValue) => {
let updatedValues = [...checkedValues];
if (updatedValues.includes(optionValue)) {
updatedValues = updatedValues.filter((val) => val !== optionValue);
} else {
updatedValues.push(optionValue);
}
setCheckedValues(updatedValues);
const e = { target: { value: updatedValues.toString() } };
isTouched(e, question);
};
return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
!showPreview && question.visible && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { id: questionId, className: "pts-root-question pts-multipleCheckboxes-container", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("fieldset", { children: [
/* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("legend", { id: `label-${questionId}`, children: [
question.questionLabel,
" ",
question.isQuestionMandatory && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { "aria-hidden": true, className: "pts-root-mandatoryAsterisk", children: "*" }),
" "
] }),
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)("ul", { children: (_a = question.options) == null ? void 0 : _a.map((option, index) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
" ",
/* @__PURE__ */ (0, import_jsx_runtime2.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_runtime2.jsx)("label", { htmlFor: `${question.id}-option-${index}`, children: option.label })
] }) }, index)) })
] }) }),
" ",
showPreview && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(PrevieMultipleCheckboxes, { activatedLanguage, question })
] });
};
var MultipleCheckboxesStandard_default = MultipleCheckboxes;
var PrevieMultipleCheckboxes = ({
question,
activatedLanguage
}) => {
var _a, _b;
const previewId = `preview-${question.id}`;
return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)("dt", { id: `question-${previewId}`, children: (_a = question.previewLabel) != null ? _a : question.questionLabel }),
question.answer ? question.options && question.options.length === 1 ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("dd", { children: question.options[0].label }) : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("dd", { children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("ul", { className: "preview-answer-list", children: (_b = question.options) == null ? void 0 : _b.filter((option) => {
var _a2;
return (_a2 = question.answer) == null ? void 0 : _a2.includes(option.label);
}).map((option, index) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("li", { children: option.label }, index)) }) }) : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("dd", { className: "no-answer-preview-page", children: activatedLanguage === "en" ? "No Answer" : "Inget svar" }),
" "
] });
};
// src/NewInputComponentStandard/TextAreaStandard/TextAreaStandard.tsx
var import_dompurify = __toESM(require("dompurify"));
var import_jsx_runtime3 = require("react/jsx-runtime");
var InputTextarea = ({
question,
isTouched,
showPreview = false,
activatedLanguage
}) => {
var _a, _b, _c, _d, _e;
const questionId = `question-${question.id}`;
const inputId = `textarea-${question.id}`;
const aboutId = `about-${question.id}`;
const errorId = `error-${question.id}`;
const defaultMaxLength = 1e3;
return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
!showPreview && question.visible && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
"div",
{
id: questionId,
className: `pts-root-question pts-textArea-container${question.aboutText ? " pts-question-hasAbout" : ""}`,
children: [
/* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("label", { htmlFor: inputId, children: [
question.questionLabel,
" ",
question.isQuestionMandatory && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "pts-root-mandatoryAsterisk", "aria-hidden": "true", children: "*" })
] }),
question.aboutText && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
"div",
{
id: aboutId,
className: "pts-about",
dangerouslySetInnerHTML: {
__html: import_dompurify.default.sanitize(question.aboutText)
}
}
),
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
"textarea",
{
className: question.hasValidationError ? "pts-root-question-input-error-border" : void 0,
onChange: (e) => isTouched(e, question),
value: question.answer,
required: question.isQuestionMandatory,
"aria-required": question.isQuestionMandatory,
"aria-invalid": question.hasValidationError,
maxLength: ((_a = question.questionExtraAttribute) == null ? void 0 : _a.answerMaxLength) || defaultMaxLength,
"aria-describedby": [question.aboutText ? aboutId : null, question.hasValidationError ? errorId : null].filter(Boolean).join(" ") || void 0,
id: inputId
}
),
/* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "pts-textarea-counter-error-container", children: [
question.hasValidationError && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "pts-root-error", id: errorId, children: [
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { "aria-label": "Felmeddelande.", className: "errorDot", children: "!" }),
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "errorText", children: question.validationDefaultMessesege })
] }),
!((_b = question.questionExtraAttribute) == null ? void 0 : _b.hideTextCounter) && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
"div",
{
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",
" ",
((_e = question.questionExtraAttribute) == null ? void 0 : _e.answerMaxLength) || defaultMaxLength,
" tecken"
]
}
)
] })
]
}
),
showPreview && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(PreviewTextarea, { activatedLanguage, question })
] });
};
var TextAreaStandard_default = InputTextarea;
var PreviewTextarea = ({
question,
activatedLanguage
}) => {
var _a, _b;
const previewId = `preview-${question.id}`;
return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)("dt", { id: `question-${previewId}`, children: (_a = question.previewLabel) != null ? _a : question.questionLabel }),
((_b = question.answer) == null ? void 0 : _b.trim()) ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("dd", { className: "pts-textArea-preview pts-root-answer", id: `answer-${previewId}`, children: question.answer }) : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
"dd",
{
className: "pts-textArea-preview pts-root-answer no-answer-preview-page",
id: `answer-${previewId}`,
children: activatedLanguage === "en" ? "No Answer" : "Inget svar"
}
)
] });
};
// src/NewInputComponentStandard/TextFieldStandard/TextFieldStandard.tsx
var import_dompurify2 = __toESM(require("dompurify"));
var import_jsx_runtime4 = require("react/jsx-runtime");
var TextFieldStandard = ({
question,
isTouched,
showPreview = false,
activatedLanguage
}) => {
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}`;
const errorId = `error-${question.id}`;
const defaultMaxLength = 1e3;
return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
!showPreview && question.visible && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
"div",
{
id: questionId,
className: `pts-root-question pts-textField-container${((_a = question.questionExtraAttribute) == null ? void 0 : _a.disabled) ? " pts-textField-disabled" : ""}${question.aboutText ? " pts-question-hasAbout" : ""}`.trim(),
children: [
/* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("label", { htmlFor: inputId, children: [
question.questionLabel,
" ",
question.isQuestionMandatory && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { "aria-hidden": "true", className: "pts-root-mandatoryAsterisk", children: "*" })
] }),
question.aboutText && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
"div",
{
id: aboutId,
className: "pts-about",
dangerouslySetInnerHTML: {
__html: import_dompurify2.default.sanitize(question.aboutText)
}
}
),
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
"input",
{
type: (_c = (_b = question.questionExtraAttribute) == null ? void 0 : _b.inputType) != null ? _c : "text",
autoComplete: (_e = (_d = question.questionExtraAttribute) == null ? void 0 : _d.autoComplete) != null ? _e : void 0,
inputMode: (_g = (_f = question.questionExtraAttribute) == null ? void 0 : _f.inputMode) != null ? _g : void 0,
name: `question-name-${question.id}`,
className: question.hasValidationError ? "pts-root-question-input-error-border" : void 0,
onChange: (e) => isTouched(e, question),
value: question.answer,
maxLength: ((_h = question.questionExtraAttribute) == null ? void 0 : _h.answerMaxLength) || defaultMaxLength,
id: inputId,
disabled: (_i = question.questionExtraAttribute) == null ? void 0 : _i.disabled,
required: question.isQuestionMandatory,
"aria-required": question.isQuestionMandatory,
"aria-describedby": [question.aboutText ? aboutId : null].filter(Boolean).join(" ") || void 0,
"aria-invalid": question.hasValidationError,
"aria-errormessage": question.hasValidationError ? errorId : void 0,
spellCheck: (_k = (_j = question.questionExtraAttribute) == null ? void 0 : _j.spellCheck) != null ? _k : void 0,
autoCapitalize: (_m = (_l = question.questionExtraAttribute) == null ? void 0 : _l.autoCapitalize) != null ? _m : void 0
}
),
question.hasValidationError && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "pts-root-error", id: errorId, children: [
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { "aria-hidden": true, className: "errorDot", children: "!" }),
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "sr-only", children: "Valideringsfel" }),
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "errorText", children: question.validationDefaultMessesege })
] })
]
}
),
showPreview && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(PreviewTextField, { activatedLanguage, question })
] });
};
var TextFieldStandard_default = TextFieldStandard;
var PreviewTextField = ({
question,
activatedLanguage
}) => {
var _a, _b;
const previewId = `preview-${question.id}`;
return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)("dt", { id: `question-${previewId}`, children: (_a = question.previewLabel) != null ? _a : question.questionLabel }),
((_b = question.answer) == null ? void 0 : _b.trim()) ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("dd", { className: "pts-textField-preview pts-root-answer", id: `answer-${previewId}`, children: question.answer }) : /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
"dd",
{
className: "pts-textField-preview pts-root-answer no-answer-preview-page",
id: `answer-${previewId}`,
children: activatedLanguage === "en" ? "No Answer" : "Inget svar"
}
)
] });
};
// src/NewInputComponentStandard/FilesUploadStandard/FilesUploadStandard.tsx
var import_react2 = require("react");
var import_clsx = __toESM(require("clsx"));
var import_dompurify3 = __toESM(require("dompurify"));
var import_jsx_runtime5 = require("react/jsx-runtime");
var FilesUpload = ({
question,
isTouched,
visible: _visible = true,
showPreview = false,
activatedLanguage: _activatedLanguage = "sv",
onFilesAdded,
onFileRemoved,
allowedNumberOfFiles = 5,
allowedFileTypes = [
".pdf",
".doc",
".docx",
".xls",
".xlsx",
".txt",
".rtf",
".ppt",
".pptx",
".jpg",
".jpeg",
".png",
".tif",
".tiff",
".csv"
],
maxFileSize = 50 * 1024 * 1024,
// 50MB default
allowedTotalFileSize = 20 * 1024 * 1024,
// 20MB default
allowDuplicates = false,
multiple = true
}) => {
var _a;
const questionId = `question-${question.id}`;
const inputId = `file-${question.id}`;
const aboutId = `about-${question.id}`;
const errorId = `error-${question.id}`;
const [selectedFiles, setSelectedFiles] = (0, import_react2.useState)([]);
const [dragActive, setDragActive] = (0, import_react2.useState)(false);
const fileInputRef = (0, import_react2.useRef)(null);
const generateFileId = (file) => {
return `${file.name}-${file.size}-${Date.now()}`;
};
const readFileAsDataURL = (file) => {
return new Promise((resolve, reject) => {
const reader = new FileReader();
reader.onload = () => resolve(reader.result);
reader.onerror = () => reject(reader.error);
reader.readAsDataURL(file);
});
};
(0, import_react2.useEffect)(() => {
if (question.files && question.files.length > 0) {
const existingFiles = question.files.map(
(item) => {
if (item instanceof File) {
return {
id: generateFileId(item),
file: item
};
} else {
return {
id: item.id || generateFileId(item.file),
file: item.file,
dataURL: item.dataURL
};
}
}
);
setSelectedFiles(existingFiles);
}
}, [question.files]);
(0, import_react2.useEffect)(() => {
alert("Selected files changed");
const e = { target: { value: `question-name-${question.id}` } };
isTouched(e, question);
}, [selectedFiles]);
const getTotalFileSize = () => {
return selectedFiles.reduce((total, selectedFile) => total + selectedFile.file.size, 0);
};
const validateFile = (file, additionalFiles = []) => {
var _a2;
if (file.size > maxFileSize) {
return `Filen \xE4r f\xF6r stor. Max storlek: ${formatFileSize(maxFileSize)}`;
}
const currentTotalSize = getTotalFileSize();
const additionalSize = additionalFiles.reduce((sum, f) => sum + f.size, 0);
const newTotalSize = currentTotalSize + additionalSize + file.size;
if (newTotalSize > allowedTotalFileSize) {
const remainingSize = allowedTotalFileSize - currentTotalSize - additionalSize;
return `Total filstorlek \xF6verskrider gr\xE4nsen p\xE5 ${formatFileSize(
allowedTotalFileSize
)}. \xC5terst\xE5ende: ${formatFileSize(Math.max(0, remainingSize))}`;
}
if (allowedFileTypes.length > 0 && !allowedFileTypes.includes("*")) {
const fileExtension = (_a2 = file.name.split(".").pop()) == null ? void 0 : _a2.toLowerCase();
if (!fileExtension) {
return `Fil saknar fil\xE4ndelse`;
}
const isValidType = allowedFileTypes.some((type) => {
const cleanType = type.startsWith(".") ? type.slice(1).toLowerCase() : type.toLowerCase();
return cleanType === fileExtension;
});
if (!isValidType) {
const displayTypes = allowedFileTypes.map(
(type) => type.startsWith(".") ? type : `.${type}`
);
return `Filtyp inte till\xE5ten. Till\xE5tna: ${displayTypes.join(", ")}`;
}
}
if (!allowDuplicates) {
const isDuplicate = selectedFiles.some(
(selectedFile) => selectedFile.file.name === file.name && selectedFile.file.size === file.size
);
if (isDuplicate) {
return `Filen finns redan i listan`;
}
}
if (selectedFiles.length >= allowedNumberOfFiles) {
return `Maximalt ${allowedNumberOfFiles} filer till\xE5tet`;
}
return null;
};
const addFilesToList = async (files) => {
const fileArray = Array.from(files);
const newFiles = [];
const errors = [];
for (const file of fileArray) {
const validatedFiles = fileArray.slice(0, fileArray.indexOf(file));
const error = validateFile(file, validatedFiles);
if (error) {
errors.push(`${file.name}: ${error}`);
} else {
try {
const dataURL = await readFileAsDataURL(file);
const newFile = {
id: generateFileId(file),
file,
dataURL
};
newFiles.push(newFile);
} catch (error2) {
errors.push(`${file.name}: Fel vid l\xE4sning av fil`);
}
}
}
if (errors.length > 0) {
alert(errors.join("\n"));
}
if (newFiles.length > 0) {
const updatedFiles = [...selectedFiles, ...newFiles];
setSelectedFiles(updatedFiles);
const enhancedFiles = newFiles.map((sf) => ({
file: sf.file,
dataURL: sf.dataURL,
id: sf.id
}));
if (question.files) {
question.files.push(...enhancedFiles);
} else {
question.files = [...enhancedFiles];
}
onFilesAdded == null ? void 0 : onFilesAdded(updatedFiles);
}
};
const removeFile = (fileId) => {
const fileToRemove = selectedFiles.find((f) => f.id === fileId);
const updatedFiles = selectedFiles.filter((f) => f.id !== fileId);
setSelectedFiles(updatedFiles);
if (fileToRemove && question.files) {
const fileIndex = question.files.findIndex(
(f) => {
if (f instanceof File) {
return f.name === fileToRemove.file.name && f.size === fileToRemove.file.size;
} else {
return f.file.name === fileToRemove.file.name && f.file.size === fileToRemove.file.size;
}
}
);
if (fileIndex !== -1) {
question.files.splice(fileIndex, 1);
}
}
onFileRemoved == null ? void 0 : onFileRemoved(fileId);
};
const handleDrop = async (e) => {
e.preventDefault();
e.stopPropagation();
setDragActive(false);
if (e.dataTransfer.files && e.dataTransfer.files.length > 0) {
await addFilesToList(e.dataTransfer.files);
}
};
const handleDragOver = (e) => {
e.preventDefault();
e.stopPropagation();
setDragActive(true);
};
const handleDragLeave = (e) => {
e.preventDefault();
e.stopPropagation();
setDragActive(false);
};
const handleFileInput = async (e) => {
if (e.target.files && e.target.files.length > 0) {
await addFilesToList(e.target.files);
e.target.value = "";
}
};
const openFileDialog = () => {
var _a2;
(_a2 = fileInputRef.current) == null ? void 0 : _a2.click();
};
const formatFileSize = (bytes) => {
if (bytes === 0) return "0 Bytes";
const k = 1024;
const sizes = ["Bytes", "KB", "MB", "GB"];
const i = Math.floor(Math.log(bytes) / Math.log(k));
return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + " " + sizes[i];
};
return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_jsx_runtime5.Fragment, { children: !showPreview && question.visible && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
"div",
{
id: questionId,
className: `pts-root-question pts-textArea-container${question.aboutText ? " pts-question-hasAbout" : ""}`,
children: [
/* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("label", { htmlFor: inputId, children: [
question.questionLabel,
" ",
question.isQuestionMandatory && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "pts-root-mandatoryAsterisk", "aria-hidden": "true", children: "*" })
] }),
question.aboutText && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
"div",
{
className: "pts-about",
dangerouslySetInnerHTML: {
__html: import_dompurify3.default.sanitize(question.aboutText)
}
}
),
/* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
"div",
{
className: (0, import_clsx.default)("files-drop-zone", { "drag-active": dragActive }),
onDrop: handleDrop,
onDragOver: handleDragOver,
onDragLeave: handleDragLeave,
onClick: openFileDialog,
onKeyDown: (e) => {
if (e.key === "Enter" || e.key === " ") {
e.preventDefault();
openFileDialog();
}
},
tabIndex: 0,
role: "button",
"aria-label": "V\xE4lj filer att ladda upp",
children: [
/* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "files-drop-content", children: [
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "files-icon", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
"svg",
{
"aria-hidden": "true",
xmlns: "http://www.w3.org/2000/svg",
width: "72",
height: "48",
viewBox: "0 0 72 48",
fill: "none",
children: [
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)("g", { clipPath: "url(#clip0_247_596)", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
"path",
{
d: "M66.6084 23.0844C64.6397 21.6247 62.2209 20.5531 59.6672 19.9752C59.2479 19.8808 58.8641 19.6692 58.5605 19.3649C58.257 19.0606 58.0463 18.6763 57.953 18.2567C56.8561 13.37 54.495 9.1794 51.0244 6.00409C46.9898 2.30706 41.6545 0.273621 36 0.273621C31.0289 0.273621 26.4375 1.83174 22.7292 4.78065C20.216 6.78238 18.193 9.33154 16.8145 12.2338C16.6651 12.5513 16.4434 12.8295 16.1672 13.0461C15.8911 13.2627 15.5681 13.4117 15.2241 13.4811C11.4623 14.2405 8.06625 15.8535 5.47312 18.1386C1.89281 21.3027 0 25.5088 0 30.3111C0 35.1655 2.03766 39.5924 5.73609 42.793C9.26859 45.8431 14.0245 47.5236 19.125 47.5236H33.75V25.956L28.5905 31.1155C28.3751 31.3309 28.1182 31.5003 27.8354 31.6134C27.5525 31.7266 27.2497 31.7811 26.9452 31.7738C26.6406 31.7664 26.3408 31.6973 26.0638 31.5706C25.7867 31.4439 25.5383 31.2623 25.3336 31.0367C24.518 30.141 24.5967 28.7446 25.4531 27.8881L34.4095 18.9331C34.8314 18.5115 35.4035 18.2747 36 18.2747C36.5965 18.2747 37.1686 18.5115 37.5905 18.9331L46.5469 27.8853C47.43 28.7699 47.4806 30.2197 46.6017 31.107C46.3932 31.3176 46.1451 31.485 45.8718 31.5994C45.5984 31.7139 45.3051 31.7732 45.0088 31.774C44.7124 31.7748 44.4188 31.717 44.1449 31.604C43.8709 31.491 43.622 31.325 43.4123 31.1155L38.25 25.956V47.5236H55.6875C60.0947 47.5236 64.1124 46.2861 67.0008 44.0403C70.2717 41.495 72 37.8528 72 33.5174C72 29.3071 70.1353 25.6972 66.6084 23.0844Z",
fill: "#6E3282"
}
) }),
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("clipPath", { id: "clip0_247_596", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
"rect",
{
width: "72",
height: "47.1064",
fill: "white",
transform: "translate(0 0.446777)"
}
) }) })
]
}
) }),
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { className: "files-drop-text", children: "Dra och sl\xE4pp filer h\xE4r eller klicka f\xF6r att v\xE4lja" }),
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { className: "files-drop-info" }),
/* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("p", { className: "files-drop-info", children: [
"Max ",
allowedNumberOfFiles,
" filer, ",
formatFileSize(maxFileSize),
" per fil,",
" ",
formatFileSize(allowedTotalFileSize),
" totalt"
] }),
allowedFileTypes.length > 0 && !allowedFileTypes.includes("*") && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("p", { className: "files-allowed-types", children: [
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)("strong", { children: "Till\xE5tna filtyper:" }),
" ",
allowedFileTypes.map((type) => type.startsWith(".") ? type : `.${type}`).join(", ")
] })
] }),
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
"input",
{
ref: fileInputRef,
type: "file",
multiple,
accept: allowedFileTypes.join(","),
onChange: handleFileInput,
className: "files-input-hidden",
name: `question-name-${question.id}`,
disabled: (_a = question.questionExtraAttribute) == null ? void 0 : _a.disabled,
required: question.isQuestionMandatory,
"aria-required": question.isQuestionMandatory,
"aria-describedby": `${question.aboutText ? aboutId : ""} ${question.hasValidationError ? errorId : ""}`.trim(),
"aria-invalid": question.hasValidationError,
"aria-errormessage": question.hasValidationError ? errorId : void 0
}
)
]
}
),
selectedFiles.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "files-list", children: [
/* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("h4", { children: [
"Filer (",
selectedFiles.length,
")"
] }),
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)("ul", { className: "files-items", children: selectedFiles.map((selectedFile) => /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("li", { className: "file-item", children: [
/* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "file-info", children: [
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "file-name", children: selectedFile.file.name }),
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "file-details", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "file-size", children: formatFileSize(selectedFile.file.size) }) })
] }),
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "file-actions", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
"button",
{
className: "action-btn remove",
onClick: () => removeFile(selectedFile.id),
type: "button",
title: "Ta bort fil",
children: "Radera"
}
) })
] }, selectedFile.id)) })
] })
]
}
) });
};
var FilesUploadStandard_default = FilesUpload;
// src/NewInputComponentStandard/AddFilesStandard/AddFilesStandard.tsx
var import_react7 = require("react");
var import_clsx5 = __toESM(require("clsx"));
// src/NewInputComponentStandard/AddFilesStandard/DropFilesStandard.tsx
var import_react_dropzone = require("react-dropzone");
var import_jsx_runtime6 = require("react/jsx-runtime");
var DropFiles = ({ FilesSelected, DropFilesText = "Dra och sl\xE4pp dina filer h\xE4r" }) => {
const onDrop = FilesSelected;
const { getRootProps, getInputProps, isDragActive } = (0, import_react_dropzone.useDropzone)({ onDrop, noKeyboard: true });
const handleFileExplorer = (event) => {
event.preventDefault();
event.stopPropagation();
};
return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_jsx_runtime6.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "DropZoneContainer", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "DropZone", ...getRootProps(), onClick: handleFileExplorer, children: [
/* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("label", { htmlFor: "fileDropInput", hidden: true, children: [
"Dra och sl\xE4pp filer h\xE4r omr\xE5de",
/* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
"input",
{
...getInputProps({
id: "fileDropInput",
name: "fileDropInput"
}),
role: "presentation"
}
)
] }),
isDragActive ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("b", { className: "dropFilesNowText", children: "Sl\xE4pp filerna, nu ...!" }) : /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_jsx_runtime6.Fragment, { children: [
/* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
"svg",
{
"aria-hidden": "true",
xmlns: "http://www.w3.org/2000/svg",
width: "72",
height: "48",
viewBox: "0 0 72 48",
fill: "none",
children: [
/* @__PURE__ */ (0, import_jsx_runtime6.jsx)("g", { clipPath: "url(#clip0_247_596)", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
"path",
{
d: "M66.6084 23.0844C64.6397 21.6247 62.2209 20.5531 59.6672 19.9752C59.2479 19.8808 58.8641 19.6692 58.5605 19.3649C58.257 19.0606 58.0463 18.6763 57.953 18.2567C56.8561 13.37 54.495 9.1794 51.0244 6.00409C46.9898 2.30706 41.6545 0.273621 36 0.273621C31.0289 0.273621 26.4375 1.83174 22.7292 4.78065C20.216 6.78238 18.193 9.33154 16.8145 12.2338C16.6651 12.5513 16.4434 12.8295 16.1672 13.0461C15.8911 13.2627 15.5681 13.4117 15.2241 13.4811C11.4623 14.2405 8.06625 15.8535 5.47312 18.1386C1.89281 21.3027 0 25.5088 0 30.3111C0 35.1655 2.03766 39.5924 5.73609 42.793C9.26859 45.8431 14.0245 47.5236 19.125 47.5236H33.75V25.956L28.5905 31.1155C28.3751 31.3309 28.1182 31.5003 27.8354 31.6134C27.5525 31.7266 27.2497 31.7811 26.9452 31.7738C26.6406 31.7664 26.3408 31.6973 26.0638 31.5706C25.7867 31.4439 25.5383 31.2623 25.3336 31.0367C24.518 30.141 24.5967 28.7446 25.4531 27.8881L34.4095 18.9331C34.8314 18.5115 35.4035 18.2747 36 18.2747C36.5965 18.2747 37.1686 18.5115 37.5905 18.9331L46.5469 27.8853C47.43 28.7699 47.4806 30.2197 46.6017 31.107C46.3932 31.3176 46.1451 31.485 45.8718 31.5994C45.5984 31.7139 45.3051 31.7732 45.0088 31.774C44.7124 31.7748 44.4188 31.717 44.1449 31.604C43.8709 31.491 43.622 31.325 43.4123 31.1155L38.25 25.956V47.5236H55.6875C60.0947 47.5236 64.1124 46.2861 67.0008 44.0403C70.2717 41.495 72 37.8528 72 33.5174C72 29.3071 70.1353 25.6972 66.6084 23.0844Z",
fill: "#6E3282"
}
) }),
/* @__PURE__ */ (0, import_jsx_runtime6.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("clipPath", { id: "clip0_247_596", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
"rect",
{
width: "72",
height: "47.1064",
fill: "white",
transform: "translate(0 0.446777)"
}
) }) })
]
}
),
/* @__PURE__ */ (0, import_jsx_runtime6.jsx)("p", { className: "dropFilesText", children: DropFilesText })
] })
] }) }) });
};
var DropFilesStandard_default = DropFiles;
// src/NewInputComponentStandard/AddFilesStandard/ExploreFilesStandard.tsx
var import_react4 = require("react");
var import_clsx2 = __toESM(require("clsx"));
// src/NewInputComponentStandard/AddFilesStandard/ScreenReaderErrors.tsx
var import_react3 = __toESM(require("react"));
var import_jsx_runtime7 = require("react/jsx-runtime");
var ScreenReaderErrors = ({
errorMessageAddingFile,
activatedLanguage
}) => {
const [activateErrorMessagesForScreenReader, setActivateErrorMessagesForScreenReader] = import_react3.default.useState(false);
const [errorMessagesForScreenReader, setErrorMessagesForScreenReader] = import_react3.default.useState("");
import_react3.default.useEffect(() => {
if (errorMessageAddingFile.length > 0) {
let errorMessages = "";
errorMessages += errorMessageAddingFile.length;
errorMessages += activatedLanguage === "sv" ? " fel vid uppladdning av filer. " : " errors uploading files. ";
errorMessages += errorMessageAddingFile.map(
(err) => activatedLanguage === "sv" ? `${err.FileName}. ${err.svMessage}` : `${err.FileName}. ${err.enMessage}`
).join(".\n");
setErrorMessagesForScreenReader(errorMessages);
setActivateErrorMessagesForScreenReader(true);
}
}, [errorMessageAddingFile]);
return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_jsx_runtime7.Fragment, { children: activateErrorMessagesForScreenReader && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("p", { role: "alert", className: "sr-only", "aria-atomic": "true", children: errorMessagesForScreenReader }) });
};
var ScreenReaderErrors_default = ScreenReaderErrors;
// src/NewInputComponentStandard/AddFilesStandard/ExploreFilesStandard.tsx
var import_jsx_runtime8 = require("react/jsx-runtime");
var ExploreFiles = ({
FilesSelected,
numberOfFiles,
allowedNumberOfFiles,
activatedLanguage,
inputId,
labelId,
aboutId,
errorId,
questionObject,
showErrors,
errorMessageAddingFile
}) => {
const fileInputRef = (0, import_react4.useRef)(null);
const buttonInputRef = (0, import_react4.useRef)(null);
const handleFiles = (event) => {
const files = Array.from(event.target.files || []);
FilesSelected(files);
event.target.value = "";
};
const handleKeyOrClick = () => {
var _a;
(_a = fileInputRef.current) == null ? void 0 : _a.click();
};
let addFilesInfoText = numberOfFiles > 0 ? activatedLanguage === "sv" ? `${numberOfFiles} filer valda (max ${allowedNumberOfFiles})` : `${numberOfFiles} files chosed (max ${allowedNumberOfFiles})` : activatedLanguage === "sv" ? "Ingen fil vald" : "No file chosen";
const ariaLabelText = `${activatedLanguage === "sv" ? "V\xE4lj fil" : "Choose file"} ${addFilesInfoText}`;
return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_jsx_runtime8.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "inputContainer", children: [
/* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
"div",
{
className: (0, import_clsx2.default)(
["form-control"],
"filePickLabel",
showErrors && questionObject.error ? ["form-control error"] : ""
),
id: labelId,
children: [
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
"button",
{
ref: buttonInputRef,
onClick: handleKeyOrClick,
className: (0, import_clsx2.default)(
"filePickButton",
showErrors && questionObject.error ? "filePickButton error" : ""
),
"aria-describedby": `${aboutId} ${questionObject.hasValidationError ? errorId : ""}`.trim(),
"aria-label": ariaLabelText,
children: activatedLanguage === "sv" ? "V\xE4lj fil" : "Choose file"
}
),
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { "aria-hidden": true, className: "filePickText", children: addFilesInfoText }),
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)("label", { htmlFor: inputId, "aria-hidden": true, className: "invisible" })
]
}
),
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
"input",
{
"aria-hidden": true,
ref: fileInputRef,
type: "file",
className: "invisible",
multiple: true,
onChange: handleFiles,
tabIndex: -1,
id: inputId
}
),
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
ScreenReaderErrors_default,
{
errorMessageAddingFile,
activatedLanguage
}
)
] }) });
};
var ExploreFilesStandard_default = ExploreFiles;
// src/NewInputComponentStandard/AddFilesStandard/SelectedFilesStandard.tsx
var import_react6 = __toESM(require("react"));
var import_react_bootstrap = require("react-bootstrap");
// src/NewInputComponentStandard/AddFilesStandard/IndicatorStandard.tsx
var import_react5 = require("react");
var import_clsx3 = __toESM(require("clsx"));
var import_jsx_runtime9 = require("react/jsx-runtime");
var Indicator = (filename) => {
const [uploadPercentage, setUploadPercentage] = (0, import_react5.useState)(0);
const [uploadDone, setUploadDone] = (0, import_react5.useState)(false);
return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_jsx_runtime9.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: (0, import_clsx3.default)("uploadIndicator", "uploadDone") }) });
};
var IndicatorStandard_default = Indicator;
// src/NewInputComponentStandard/AddFilesStandard/SelectedFilesStandard.tsx
var import_clsx4 = __toESM(require("clsx"));
var import_jsx_runtime10 = require("react/jsx-runtime");
var SelectedFiles = ({
questionObject,
isTouched,
removeError,
removeFile,
showIndicator = true,
errorMessageAddingFile,
activatedLanguage,
numberOfFiles,
setNumberOfFiles,
removeUploadErrors
}) => {
const theDiv = (0, import_react6.useRef)(null);
const remove = (file) => {
let newFiles = questionObject.files.filter((f) => f !== file);
const newCountOfFiles = newFiles.length;
setNumberOfFiles(newCountOfFiles);
const e = { target: { value: `${newCountOfFiles} files`, files: newFiles } };
isTouched(e, questionObject);
removeFile(newCountOfFiles);
};
(0, import_react6.useEffect)(() => {
var _a;
numberOfFiles > 0 && ((_a = theDiv.current) == null ? void 0 : _a.scrollIntoView({ behavior: "smooth", block: "end" }));
}, [numberOfFiles]);
const useWindowWidth = () => {
const [windowWidth2, setWindowWidth] = (0, import_react6.useState)(window.innerWidth);
(0, import_react6.useEffect)(() => {
const handleResize = () => {
setWindowWidth(window.innerWidth);
};
window.addEventListener("resize", handleResize);
return () => {
window.removeEventListener("resize", handleResize);
};
}, []);
return windowWidth2;
};
const windowWidth = useWindowWidth();
return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_jsx_runtime10.Fragment, { children: [
/* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { children: [
errorMessageAddingFile.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("ul", { "aria-hidden": true, className: "fileListUnorderedList", children: [
" ",
errorMessageAddingFile.map((errorObj, index) => {
const errorFileName = errorObj.FileName;
let mobileFirstFileName = errorObj.FileName.split(".").shift();
mobileFirstFileName = mobileFirstFileName.length > 8 ? mobileFirstFileName.substring(0, 8) + ".." : mobileFirstFileName;
const fileType = errorObj.FileName.split(".").pop();
mobileFirstFileName = mobileFirstFileName + "." + fileType;
return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react6.default.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "fileInListContainer", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "fileInList", children: [
/* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_react_bootstrap.Row, { children: [
/* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react_bootstrap.Col, { style: { maxWidth: "30px" }, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
"span",
{
"aria-hidden": "true",
className: (0, import_clsx4.default)("uploadedDot", "uploadFailed"),
children: "!"
}