optimized-react-component-library-xyz123 0.0.5 → 0.0.6

package/dist/index.css

@@ -599,6 +599,327 @@ textarea:focus-visible,
 
 /* src/NewInputComponentStandard/TextFieldStandard/TextFieldStandard.css */
 
+/* src/NewInputComponentStandard/FilesUploadStandard/FilesUploadStandard.css */
+.files-upload {
+  width: 100%;
+  max-width: 800px;
+  margin: 0 auto;
+  font-family:
+    "Segoe UI",
+    Tahoma,
+    Geneva,
+    Verdana,
+    sans-serif;
+}
+.files-drop-zone {
+  border: 2px dashed #ccc;
+  border-radius: 12px;
+  padding: 3rem 2rem;
+  text-align: center;
+  transition: all 0.3s ease;
+  background-color: #fafafa;
+  cursor: pointer;
+  position: relative;
+  overflow: hidden;
+}
+.files-drop-zone:hover {
+  border-color: #1ea7fd;
+  background-color: #f0f8ff;
+  transform: translateY(-2px);
+  box-shadow: 0 4px 12px rgba(30, 167, 253, 0.15);
+}
+.files-drop-zone.drag-active {
+  border-color: #1ea7fd;
+  background-color: #e6f7ff;
+  transform: scale(1.02);
+  box-shadow: 0 8px 25px rgba(30, 167, 253, 0.2);
+}
+.files-drop-content {
+  pointer-events: none;
+}
+.files-icon {
+  font-size: 4rem;
+  margin-bottom: 1rem;
+  opacity: 0.7;
+  animation: float 3s ease-in-out infinite;
+}
+@keyframes float {
+  0%, 100% {
+    transform: translateY(0px);
+  }
+  50% {
+    transform: translateY(-10px);
+  }
+}
+.files-drop-text {
+  font-size: 1.2rem;
+  margin-bottom: 0.5rem;
+  color: #333;
+  font-weight: 500;
+}
+.files-drop-info {
+  font-size: 0.9rem;
+  color: #666;
+  margin: 0;
+}
+.files-allowed-types {
+  font-size: 0.85rem;
+  color: #555;
+  margin: 0.75rem 0 0 0;
+  padding: 0.5rem;
+  background-color: rgba(30, 167, 253, 0.1);
+  border-radius: 6px;
+  border-left: 3px solid #1ea7fd;
+}
+.files-allowed-types strong {
+  color: #1ea7fd;
+}
+.files-input-hidden {
+  display: none;
+}
+.files-summary {
+  margin: 1.5rem 0;
+  padding: 1rem;
+  background-color: #f8f9fa;
+  border-radius: 8px;
+  border: 1px solid #e9ecef;
+}
+.files-summary-stats {
+  display: flex;
+  gap: 1rem;
+  margin-bottom: 1rem;
+  flex-wrap: wrap;
+}
+.stat {
+  padding: 0.5rem 1rem;
+  border-radius: 20px;
+  background-color: #e9ecef;
+  font-size: 0.9rem;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+.stat.pending {
+  background-color: #fff3cd;
+  color: #856404;
+}
+.stat.completed {
+  background-color: #d1e7dd;
+  color: #0a3622;
+}
+.stat.error {
+  background-color: #f8d7da;
+  color: #721c24;
+}
+.files-summary-actions {
+  display: flex;
+  gap: 0.5rem;
+  flex-wrap: wrap;
+}
+.action-button {
+  padding: 0.75rem 1.5rem;
+  border: none;
+  border-radius: 6px;
+  cursor: pointer;
+  font-weight: 500;
+  transition: all 0.2s ease;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+.action-button.primary {
+  background-color: #1ea7fd;
+  color: white;
+}
+.action-button.primary:hover {
+  background-color: #1890ff;
+  transform: translateY(-1px);
+}
+.action-button.secondary {
+  background-color: #6c757d;
+  color: white;
+}
+.action-button.secondary:hover {
+  background-color: #5a6268;
+  transform: translateY(-1px);
+}
+.files-list {
+  margin-top: 1.5rem;
+}
+.files-list h4 {
+  margin-bottom: 1rem;
+  color: #333;
+  font-size: 1.1rem;
+  font-weight: 600;
+}
+.files-items {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+.file-item {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  padding: 1rem;
+  border: 1px solid #e9ecef;
+  border-radius: 8px;
+  margin-bottom: 0.75rem;
+  background-color: white;
+  transition: all 0.2s ease;
+  position: relative;
+}
+.file-item:hover {
+  background-color: #f8f9fa;
+  border-color: #dee2e6;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
+}
+.file-item.uploading {
+  background-color: #e6f7ff;
+  border-color: #91d5ff;
+}
+.file-item.completed {
+  background-color: #f6ffed;
+  border-color: #b7eb8f;
+}
+.file-item.error {
+  background-color: #fff2f0;
+  border-color: #ffccc7;
+}
+.file-icon-status {
+  font-size: 1.5rem;
+  min-width: 2rem;
+  text-align: center;
+}
+.file-info {
+  flex: 1;
+  min-width: 0;
+}
+.file-name {
+  font-weight: 500;
+  color: #333;
+  margin-bottom: 0.5rem;
+  word-break: break-word;
+}
+.file-details {
+  display: flex;
+  gap: 1rem;
+  font-size: 0.85rem;
+  color: #666;
+  flex-wrap: wrap;
+}
+.file-size {
+  color: #666;
+}
+.file-status {
+  color: #1ea7fd;
+  font-weight: 500;
+}
+.file-error {
+  color: #dc3545;
+  font-weight: 500;
+}
+.progress-bar {
+  width: 100%;
+  height: 4px;
+  background-color: #e9ecef;
+  border-radius: 2px;
+  margin-top: 0.5rem;
+  overflow: hidden;
+}
+.progress-fill {
+  height: 100%;
+  background-color: #1ea7fd;
+  transition: width 0.3s ease;
+  border-radius: 2px;
+}
+.file-actions {
+  display: flex;
+  gap: 0.5rem;
+}
+.action-btn {
+  background: none;
+  border: 1px solid transparent;
+  padding: 0.5rem;
+  border-radius: 6px;
+  cursor: pointer;
+  font-size: 1rem;
+  transition: all 0.2s ease;
+  min-width: 2.5rem;
+  height: 2.5rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.action-btn.upload {
+  color: #1ea7fd;
+  border-color: #1ea7fd;
+}
+.action-btn.upload:hover {
+  background-color: #1ea7fd;
+  color: white;
+}
+.action-btn.retry {
+  color: #fd7e14;
+  border-color: #fd7e14;
+}
+.action-btn.retry:hover {
+  background-color: #fd7e14;
+  color: white;
+}
+.action-btn.remove {
+  color: #dc3545;
+  border-color: #dc3545;
+}
+.action-btn.remove:hover {
+  background-color: #dc3545;
+  color: white;
+}
+@media (max-width: 768px) {
+  .files-drop-zone {
+    padding: 2rem 1rem;
+  }
+  .files-icon {
+    font-size: 3rem;
+  }
+  .files-drop-text {
+    font-size: 1rem;
+  }
+  .files-summary-stats {
+    flex-direction: column;
+    gap: 0.5rem;
+  }
+  .files-summary-actions {
+    flex-direction: column;
+  }
+  .action-button {
+    justify-content: center;
+  }
+  .file-item {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 0.75rem;
+  }
+  .file-details {
+    flex-direction: column;
+    gap: 0.25rem;
+  }
+  .file-actions {
+    align-self: flex-end;
+  }
+}
+@media (max-width: 480px) {
+  .files-upload {
+    padding: 0 0.5rem;
+  }
+  .files-drop-zone {
+    padding: 1.5rem 1rem;
+  }
+  .file-item {
+    padding: 0.75rem;
+  }
+}
+
 /* src/NewTextComponentStandard/EditPreviewLinkStandard/EditPreviewLinkStandard.css */
 
 /* src/NewTextComponentStandard/FooterStandard/FooterStandard.css */

package/dist/index.d.mts

@@ -1,4 +1,4 @@
-import { FC } from 'react';
+import React, { FC } from 'react';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 
 interface IApplicationContent {
@@ -138,6 +138,29 @@ interface TextFieldStandardProps {
 
 declare const TextFieldStandard: FC<TextFieldStandardProps>;
 
+interface SelectedFile {
+    id: string;
+    file: File;
+    dataURL?: string;
+}
+interface FilesUploadStandardProps {
+    question: IQuestion;
+    isTouched: any;
+    visible?: boolean;
+    showPreview?: boolean;
+    activatedLanguage?: string;
+    allowedFileTypes?: Array<string>;
+    allowedNumberOfFiles?: number;
+    allowedTotalFileSize?: number;
+    onFilesAdded?: (files: SelectedFile[]) => void;
+    onFileRemoved?: (fileId: string) => void;
+    maxFileSize?: number;
+    allowDuplicates?: boolean;
+    multiple?: boolean;
+}
+
+declare const FilesUpload: React.FC<FilesUploadStandardProps>;
+
 declare const questionHasValidationError: (questionObject: any, arrayOfQuestionObjects: any[]) => boolean;
 
 interface TranslatedAnswers {
@@ -266,4 +289,4 @@ interface TextHeadlineAndBodyProps {
 
 declare const TextHeadlineAndBody: FC<TextHeadlineAndBodyProps>;
 
-export { CreateApiDataObject, doCategoriesAndQuestionsVisible as DoCategoriesAndQuestionsVisible, EditPreviewLink as EditPreviewLinkStandard, 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 };
+export { 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 };

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-import { FC } from 'react';
+import React, { FC } from 'react';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 
 interface IApplicationContent {
@@ -138,6 +138,29 @@ interface TextFieldStandardProps {
 
 declare const TextFieldStandard: FC<TextFieldStandardProps>;
 
+interface SelectedFile {
+    id: string;
+    file: File;
+    dataURL?: string;
+}
+interface FilesUploadStandardProps {
+    question: IQuestion;
+    isTouched: any;
+    visible?: boolean;
+    showPreview?: boolean;
+    activatedLanguage?: string;
+    allowedFileTypes?: Array<string>;
+    allowedNumberOfFiles?: number;
+    allowedTotalFileSize?: number;
+    onFilesAdded?: (files: SelectedFile[]) => void;
+    onFileRemoved?: (fileId: string) => void;
+    maxFileSize?: number;
+    allowDuplicates?: boolean;
+    multiple?: boolean;
+}
+
+declare const FilesUpload: React.FC<FilesUploadStandardProps>;
+
 declare const questionHasValidationError: (questionObject: any, arrayOfQuestionObjects: any[]) => boolean;
 
 interface TranslatedAnswers {
@@ -266,4 +289,4 @@ interface TextHeadlineAndBodyProps {
 
 declare const TextHeadlineAndBody: FC<TextHeadlineAndBodyProps>;
 
-export { CreateApiDataObject, doCategoriesAndQuestionsVisible as DoCategoriesAndQuestionsVisible, EditPreviewLink as EditPreviewLinkStandard, 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 };
+export { 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 };