optimized-react-component-library-xyz123 0.1.43 → 0.1.45

package/dist/index.css

@@ -333,6 +333,510 @@
   }
 }
 
+/* src/NewInputComponentStandard/AddFilesStandard/AddFilesStandard.css */
+.invisible {
+  display: none;
+  width: 1px;
+}
+.filePickLabel {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  width: 100%;
+  margin: 0;
+  padding: 0;
+  height: 48px;
+  border: 1px solid #747474;
+  border-radius: var(--bs-border-radius);
+}
+.filePickLabel:focus {
+  border: #000000 2px solid;
+  box-shadow: none;
+}
+.filePickLabel .filePickButton {
+  cursor: pointer;
+  padding: 16px;
+  height: 100%;
+  background: #747474;
+  border-top-left-radius: 4px;
+  border-bottom-left-radius: 4px;
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+  justify-content: center;
+  align-self: stretch;
+  color: #ffff;
+  font-family: Arial;
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 24px;
+}
+.filePickButton {
+  width: auto !important;
+  border: none;
+  margin-left: 0px !important;
+}
+.filePickButton.error {
+  background: #8e0039 !important;
+  color: #fff !important;
+}
+@media (max-width: 990px) {
+  .filePickLabel .filePickButton {
+    font-size: 14px;
+    line-height: 14px;
+    text-align: center;
+  }
+}
+.filePickLabel .filePickText {
+  padding-left: 16px;
+  color: #000;
+  font-family: Arial;
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 24px;
+}
+.inputContainer {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+}
+@media (max-width: 768px) {
+  .inputContainer {
+    margin-bottom: 16px;
+  }
+}
+.inputContainer button {
+  margin: 0;
+  padding: 8px 24px;
+  margin-left: 16px;
+  height: 50px;
+  width: 200px;
+}
+.inputContainer input[type=text] {
+  font-size: 16px;
+}
+.custom-file-button input[type=file] {
+  margin-left: -2px !important;
+}
+.custom-file-button input[type=file]::-webkit-file-upload-button {
+  display: none;
+}
+.custom-file-button input[type=file]::file-selector-button {
+  display: none;
+}
+.custom-file-button:hover label {
+  background-color: #dde0e3;
+  cursor: pointer;
+}
+@media (max-width: 768px) {
+  .DropZoneContainer {
+    display: none;
+  }
+}
+.DropZone {
+  color: #000;
+  margin-top: 20px;
+  margin-bottom: 16px;
+  font-family: Arial;
+  font-size: 20px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 24px;
+  display: inline-flex;
+  width: 100%;
+  height: 180px;
+  position: relative;
+  clip-path: inset(0 round 8px 8px 8px 8px);
+  background: var(--neutral-350, #f7f7f7);
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  gap: 10px;
+  flex-direction: column;
+  cursor: pointer;
+}
+.DropZone::before {
+  content: "";
+  position: absolute;
+  left: -7px;
+  top: -7px;
+  right: -7px;
+  bottom: -7px;
+  border: 9px dashed rgba(0, 0, 0, 0.6);
+  border-radius: 15px 15px 15px 15px;
+  box-sizing: border-box;
+}
+.DropZone:hover {
+  background: var(--neutral-350, #f7f7f7);
+  opacity: 0.9;
+  cursor: copy;
+}
+.ClipboardLink {
+  display: block;
+  position: relative;
+  z-index: 2000;
+  cursor: pointer;
+  font-size: "12px";
+  text-decoration: "underline";
+  color: black;
+}
+.ClipboardLink:hover {
+  cursor: pointer;
+}
+.makeTopSpace {
+  margin-top: 12px;
+}
+.UploadedFile {
+  margin-top: 24px;
+}
+.uploadFileRow {
+  max-width: 555px;
+}
+@media (max-width: 768px) {
+  .uploadFileRow {
+    margin-left: 0px;
+  }
+}
+.uploadedFileName {
+  color: #000000;
+  position: relative;
+  border: 0px solid red;
+  width: 76%;
+  top: -21px;
+  left: 24px;
+}
+.desktopFileName {
+  display: block;
+}
+.mobileFirstFileName {
+  display: block;
+}
+.uploadedDot.mobileVersion {
+  display: none;
+}
+@media (max-width: 768px) {
+  svg.uploadFileIcon {
+    display: none;
+  }
+  .uploadedDot.mobileVersion {
+    display: flex;
+  }
+}
+.lastCol {
+  display: flex;
+  justify-content: flex-end;
+  max-width: 62px;
+  padding: 0;
+  margin: 0;
+}
+.fileInListContainer {
+  max-width: 624px;
+}
+.fileListUnorderedList {
+  list-style: none !important;
+  padding: 0;
+  margin: 0;
+}
+.fileInList {
+  width: 100%;
+}
+.fileInList .row {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  max-width: 100% !important;
+  border: 0px solid black;
+  padding: 0px 0px;
+  --bs-gutter-x: 0px !important;
+}
+.fileInList .row .col {
+  padding: 0;
+  margin: 0;
+}
+.fileInList .row .lastCol {
+  display: flex;
+  justify-content: flex-end;
+}
+.fileInList .makeSpace {
+  border-bottom: 1px solid #747474;
+}
+.fileInfo {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 13px;
+}
+.uploadedPercentage {
+  font-family: Arial;
+  font-size: 13px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 16px;
+  margin-top: 2px;
+}
+@media (max-width: 768px) {
+  .uploadedPercentage {
+    display: none;
+  }
+}
+.trashCan {
+  width: 57px;
+  display: flex;
+  flex-direction: column;
+  flex-shrink: 0;
+  justify-content: start;
+  align-items: center;
+  padding: 0;
+}
+.trashCan a {
+  cursor: pointer;
+  display: flex;
+  flex-direction: column;
+  flex-shrink: 0;
+  justify-content: center;
+  align-items: center;
+  padding: 0;
+}
+.trashCan svg {
+  width: 24px;
+  height: 27px;
+  stroke-width: 2px;
+  stroke: var(--purple-900-primary, #6e3282);
+}
+.trashCanPositioning {
+  display: flex;
+  align-items: flex-start;
+  justify-content: flex-end;
+  gap: 4px;
+  flex-shrink: 0;
+  padding: 0;
+  position: relative;
+  border: 0px solid red;
+  max-width: 70px;
+  top: -6px;
+  left: 12px;
+}
+.trashCanText {
+  color: #6e3282;
+  font-family: Arial;
+  font-size: 10px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: normal;
+}
+.removeError {
+  width: 57px;
+  display: flex;
+  flex-direction: column;
+  flex-shrink: 0;
+  justify-content: start;
+  align-items: center;
+  padding: 0;
+}
+.removeError svg {
+  width: 16px;
+  height: 18px;
+  stroke-width: 2px;
+  stroke: var(--purple-900-primary, #6e3282);
+}
+.removeError a {
+  cursor: pointer;
+}
+.uploadedDot {
+  border-radius: 17px;
+  background: var(--red-green-green, #008e55);
+  display: flex;
+  width: 16px;
+  height: 16px;
+  padding: 10px;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  gap: 10px;
+  flex-shrink: 0;
+}
+.uploadedDot.uploadFailed {
+  background: var(--red-green-red, #8e0039);
+  color: var(--neutral-300, #fff);
+  font-family: Arial;
+  font-size: 13px;
+  font-style: normal;
+  font-weight: 700;
+  line-height: 16px;
+}
+.uploadedDot svg {
+  stroke-width: 1.5px;
+  stroke: var(--neutral-300, #fff);
+  flex-shrink: 0;
+}
+.uploadStatus {
+  display: flex;
+  align-items: flex-start;
+  justify-content: flex-end;
+  gap: 8px;
+  flex-shrink: 0;
+  padding: 0;
+  position: relative;
+  border: 0px solid red;
+  max-width: 70px;
+  top: 0;
+  right: 0;
+}
+@media (max-width: 768px) {
+  .uploadStatus {
+    display: none;
+  }
+}
+.uploadFileIcon {
+  display: flex;
+  align-items: flex-start;
+  justify-content: flex-end;
+  gap: 8px;
+  flex-shrink: 0;
+  padding: 0;
+  position: relative;
+  border: 0px solid red;
+  max-width: 70px;
+  top: 0;
+  left: 0;
+}
+.uploadFileName {
+  display: flex;
+  align-items: normal;
+  justify-content: flex-start;
+  gap: 8px;
+  flex-shrink: 0;
+  padding: 0;
+  color: #000;
+  font-family: Arial;
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 24px;
+}
+.uploadFileName.uploadFailed {
+  color: var(--red-green-red, #8e0039);
+}
+.errorMessageAddingFile {
+  color: var(--red-green-red, #8e0039);
+  font-family: Arial;
+  font-size: 13px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 16px;
+}
+@media (max-width: 768px) {
+  .errorMessageAddingFile {
+    margin-left: 12px;
+  }
+}
+.selectedFilesLinkButton {
+  display: flex;
+  align-items: center;
+  padding-bottom: 16px;
+  padding-left: 0;
+  gap: 8px;
+  flex-shrink: 0;
+  stroke-width: 2px;
+  stroke: var(--purple-900-primary, #6e3282);
+  color: var(--purple-900-primary, #6e3282);
+  font-family: Arial;
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 24px;
+  text-decoration: none;
+  cursor: pointer;
+  background-color: transparent;
+  border: 0px;
+}
+.selectedFilesLinkButton:hover {
+  color: var(--purple-900-primary, #6e3282);
+  text-decoration: underline;
+}
+.uploadFileRow_x {
+  max-width: 630px;
+}
+.uploadIndicator {
+  height: 6px;
+  flex-shrink: 0;
+  margin-top: 0px;
+  border-radius: 8px 8px 8px 8px;
+}
+@media (max-width: 768px) {
+  .uploadIndicator {
+    display: none;
+  }
+}
+.uploadIndicator.uploadDone {
+  width: 100%;
+  background: var(--red-green-green, #008e55);
+}
+.uploadIndicator.uploadFailed {
+  width: 10%;
+  background: var(--red-green-red, #8e0039);
+}
+.uploadIndicator.uploadLoading {
+  width: 50%;
+  background: var(--red-green-red, rgb(211, 165, 0));
+}
+.UploadedFile .divider {
+  border: 1px solid #747474;
+  margin-top: 24px;
+}
+@media (max-width: 768px) {
+  .UploadedFile .divider {
+    margin-top: 0px;
+  }
+}
+.ClipboardFiles {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 16px;
+  padding: 16px;
+  margin-top: 32px;
+  background-color: #222;
+  animation-name: color;
+  animation-duration: 1s;
+  animation-iteration-count: infinite;
+  border-radius: 8px;
+  cursor: pointer;
+}
+.ClipboardFiles.clicked {
+  background-color: #ccc;
+  animation-name: none;
+  cursor: copy;
+}
+@keyframes color {
+  0% {
+    background-color: #ddd;
+  }
+  25% {
+    background-color: #ccc;
+  }
+  50% {
+    background-color: #bbb;
+  }
+  75% {
+    background-color: #ccc;
+  }
+  100% {
+    background-color: #ddd;
+  }
+}
+.addFilesMandatory {
+  margin-bottom: 16px;
+}
+.addFilesMandatory.error {
+  display: inline;
+  margin-bottom: 0px;
+}
+
 /* src/NewTextComponentStandard/EditPreviewLinkStandard/EditPreviewLinkStandard.css */
 
 /* src/NewTextComponentStandard/FooterStandard/FooterStandard.css */

package/dist/index.d.mts

@@ -163,6 +163,19 @@ interface FilesUploadStandardProps {
 
 declare const FilesUpload: React.FC<FilesUploadStandardProps>;
 
+interface AddFilesProps {
+    questionObject: IQuestion;
+    isTouched: any;
+    visible?: boolean;
+    showPreview?: boolean;
+    activatedLanguage?: string;
+    allowedFileTypes?: Array<string>;
+    allowedNumberOfFiles?: number;
+    allowedTotalFileSize?: number;
+}
+
+declare const AddFiles: FC<AddFilesProps>;
+
 declare const questionHasValidationError: (questionObject: any, arrayOfQuestionObjects: any[]) => boolean;
 
 interface TranslatedAnswers {
@@ -209,7 +222,7 @@ declare const RenderQuestion: ({ question, isTouched, activatedLanguage, showPre
 declare const RenderQuestionGroup: ({ questionArray, wrapper, legend, isTouched, activatedLanguage, showPreview, AddQuestionDisplayed, hideValidationMessage, }: any) => react_jsx_runtime.JSX.Element;
 
 interface EditPreviewLinkProps {
-    step: IStepObject;
+    step: number;
     changeStepHandler: any;
     activatedLanguage?: string;
 }
@@ -310,4 +323,4 @@ interface CookieBannerProps {
 
 declare const CookieBanner: React.FC<CookieBannerProps>;
 
-export { CookieBanner, CreateApiDataObject, doCategoriesAndQuestionsVisible as DoCategoriesAndQuestionsVisible, EditPreviewLink as EditPreviewLinkStandard, FilesUpload as FilesUploadStandard, Footer as FooterStandard, groupQuestionByStepPreviewPage as GroupQuestionByStepPreviewPage, groupQuestionsByStepCategoryGroup as GroupQuestionsByStepCategoryGroup, Header as HeaderStandard, type IApplicationContent, type IFormState, type ILanguage, type ILanguageSupport, ILanguageSupportinitialState, type IOption, type IPTSLink, type IQuestion, type IQuestionExtraAttribute, type IStepObject, type IStepQuestionData, type ITextBlock, InfoOnly as InfoOnlyStandard, isDependsOnOtherQuestionTrue as IsDependsOnOtherQuestionTrue, Modal as ModalStandard, MultipleCheckboxes as MultipleCheckboxesStandard, PrincipleOfPublicity as PrincipleOfPublicityStandard, questionHasValidationError as QuestionHasValidationError, QuestioninitialState, InputRadio as RadioMultipleStandard, RenderQuestion, RenderQuestionGroup, ServiceHeadlineAndBody as ServiceHeadlineAndBodyStandard, SkipLink as SkipLinkStandard, StepperButtons as StepperButtonsStandard, Stepper as StepperStandard, InputTextarea as TextAreaStandard, TextFieldStandard, TextHeadlineAndBody as TextHeadlineAndBodyStandard, validationCheckAllVisibleQuestions as ValidationCheckAllVisibleQuestion, ValidationErrorSummaryList };
+export { AddFiles as AddFilesStandard, CookieBanner, CreateApiDataObject, doCategoriesAndQuestionsVisible as DoCategoriesAndQuestionsVisible, EditPreviewLink as EditPreviewLinkStandard, FilesUpload as FilesUploadStandard, Footer as FooterStandard, groupQuestionByStepPreviewPage as GroupQuestionByStepPreviewPage, groupQuestionsByStepCategoryGroup as GroupQuestionsByStepCategoryGroup, Header as HeaderStandard, type IApplicationContent, type IFormState, type ILanguage, type ILanguageSupport, ILanguageSupportinitialState, type IOption, type IPTSLink, type IQuestion, type IQuestionExtraAttribute, type IStepObject, type IStepQuestionData, type ITextBlock, InfoOnly as InfoOnlyStandard, isDependsOnOtherQuestionTrue as IsDependsOnOtherQuestionTrue, Modal as ModalStandard, MultipleCheckboxes as MultipleCheckboxesStandard, PrincipleOfPublicity as PrincipleOfPublicityStandard, questionHasValidationError as QuestionHasValidationError, QuestioninitialState, InputRadio as RadioMultipleStandard, RenderQuestion, RenderQuestionGroup, ServiceHeadlineAndBody as ServiceHeadlineAndBodyStandard, SkipLink as SkipLinkStandard, StepperButtons as StepperButtonsStandard, Stepper as StepperStandard, InputTextarea as TextAreaStandard, TextFieldStandard, TextHeadlineAndBody as TextHeadlineAndBodyStandard, validationCheckAllVisibleQuestions as ValidationCheckAllVisibleQuestion, ValidationErrorSummaryList };

package/dist/index.d.ts

@@ -163,6 +163,19 @@ interface FilesUploadStandardProps {
 
 declare const FilesUpload: React.FC<FilesUploadStandardProps>;
 
+interface AddFilesProps {
+    questionObject: IQuestion;
+    isTouched: any;
+    visible?: boolean;
+    showPreview?: boolean;
+    activatedLanguage?: string;
+    allowedFileTypes?: Array<string>;
+    allowedNumberOfFiles?: number;
+    allowedTotalFileSize?: number;
+}
+
+declare const AddFiles: FC<AddFilesProps>;
+
 declare const questionHasValidationError: (questionObject: any, arrayOfQuestionObjects: any[]) => boolean;
 
 interface TranslatedAnswers {
@@ -209,7 +222,7 @@ declare const RenderQuestion: ({ question, isTouched, activatedLanguage, showPre
 declare const RenderQuestionGroup: ({ questionArray, wrapper, legend, isTouched, activatedLanguage, showPreview, AddQuestionDisplayed, hideValidationMessage, }: any) => react_jsx_runtime.JSX.Element;
 
 interface EditPreviewLinkProps {
-    step: IStepObject;
+    step: number;
     changeStepHandler: any;
     activatedLanguage?: string;
 }
@@ -310,4 +323,4 @@ interface CookieBannerProps {
 
 declare const CookieBanner: React.FC<CookieBannerProps>;
 
-export { CookieBanner, CreateApiDataObject, doCategoriesAndQuestionsVisible as DoCategoriesAndQuestionsVisible, EditPreviewLink as EditPreviewLinkStandard, FilesUpload as FilesUploadStandard, Footer as FooterStandard, groupQuestionByStepPreviewPage as GroupQuestionByStepPreviewPage, groupQuestionsByStepCategoryGroup as GroupQuestionsByStepCategoryGroup, Header as HeaderStandard, type IApplicationContent, type IFormState, type ILanguage, type ILanguageSupport, ILanguageSupportinitialState, type IOption, type IPTSLink, type IQuestion, type IQuestionExtraAttribute, type IStepObject, type IStepQuestionData, type ITextBlock, InfoOnly as InfoOnlyStandard, isDependsOnOtherQuestionTrue as IsDependsOnOtherQuestionTrue, Modal as ModalStandard, MultipleCheckboxes as MultipleCheckboxesStandard, PrincipleOfPublicity as PrincipleOfPublicityStandard, questionHasValidationError as QuestionHasValidationError, QuestioninitialState, InputRadio as RadioMultipleStandard, RenderQuestion, RenderQuestionGroup, ServiceHeadlineAndBody as ServiceHeadlineAndBodyStandard, SkipLink as SkipLinkStandard, StepperButtons as StepperButtonsStandard, Stepper as StepperStandard, InputTextarea as TextAreaStandard, TextFieldStandard, TextHeadlineAndBody as TextHeadlineAndBodyStandard, validationCheckAllVisibleQuestions as ValidationCheckAllVisibleQuestion, ValidationErrorSummaryList };
+export { AddFiles as AddFilesStandard, CookieBanner, CreateApiDataObject, doCategoriesAndQuestionsVisible as DoCategoriesAndQuestionsVisible, EditPreviewLink as EditPreviewLinkStandard, FilesUpload as FilesUploadStandard, Footer as FooterStandard, groupQuestionByStepPreviewPage as GroupQuestionByStepPreviewPage, groupQuestionsByStepCategoryGroup as GroupQuestionsByStepCategoryGroup, Header as HeaderStandard, type IApplicationContent, type IFormState, type ILanguage, type ILanguageSupport, ILanguageSupportinitialState, type IOption, type IPTSLink, type IQuestion, type IQuestionExtraAttribute, type IStepObject, type IStepQuestionData, type ITextBlock, InfoOnly as InfoOnlyStandard, isDependsOnOtherQuestionTrue as IsDependsOnOtherQuestionTrue, Modal as ModalStandard, MultipleCheckboxes as MultipleCheckboxesStandard, PrincipleOfPublicity as PrincipleOfPublicityStandard, questionHasValidationError as QuestionHasValidationError, QuestioninitialState, InputRadio as RadioMultipleStandard, RenderQuestion, RenderQuestionGroup, ServiceHeadlineAndBody as ServiceHeadlineAndBodyStandard, SkipLink as SkipLinkStandard, StepperButtons as StepperButtonsStandard, Stepper as StepperStandard, InputTextarea as TextAreaStandard, TextFieldStandard, TextHeadlineAndBody as TextHeadlineAndBodyStandard, validationCheckAllVisibleQuestions as ValidationCheckAllVisibleQuestion, ValidationErrorSummaryList };