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

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.css CHANGED
@@ -599,6 +599,337 @@ textarea:focus-visible,
599
599
 
600
600
  /* src/NewInputComponentStandard/TextFieldStandard/TextFieldStandard.css */
601
601
 
602
+ /* src/NewInputComponentStandard/FilesUploadStandard/FilesUploadStandard.css */
603
+ .files-upload {
604
+ width: 100%;
605
+ max-width: 800px;
606
+ margin: 0 auto;
607
+ font-family:
608
+ "Segoe UI",
609
+ Tahoma,
610
+ Geneva,
611
+ Verdana,
612
+ sans-serif;
613
+ }
614
+ .files-drop-zone {
615
+ border: 2px dashed #6e3282;
616
+ border-radius: 12px;
617
+ padding: 3rem 2rem;
618
+ text-align: center;
619
+ transition: all 0.3s ease;
620
+ background-color: #fafafa;
621
+ cursor: pointer;
622
+ position: relative;
623
+ overflow: hidden;
624
+ }
625
+ .files-drop-zone:hover {
626
+ border-color: #6e3282;
627
+ background-color: #f5ebf8;
628
+ transform: translateY(-2px);
629
+ box-shadow: 0 4px 12px rgba(220, 148, 253, 0.15);
630
+ }
631
+ .files-drop-zone.drag-active {
632
+ border-color: #6e3282;
633
+ background-color: #f5ebf8;
634
+ transform: scale(1.02);
635
+ box-shadow: 0 8px 25px rgba(30, 167, 253, 0.2);
636
+ }
637
+ .files-drop-zone:focus {
638
+ border: 0.2rem solid #6e3282;
639
+ }
640
+ .files-drop-zone:focus-visible {
641
+ outline-offset: 0 !important;
642
+ outline-style: solid !important;
643
+ outline-color: #fff !important;
644
+ outline-width: 2px !important;
645
+ box-shadow: 0 0 0 4px #000 !important;
646
+ }
647
+ .files-drop-content {
648
+ pointer-events: none;
649
+ }
650
+ .files-icon {
651
+ font-size: 4rem;
652
+ margin-bottom: 1rem;
653
+ opacity: 0.7;
654
+ animation: float 3s ease-in-out infinite;
655
+ }
656
+ @keyframes float {
657
+ 0%, 100% {
658
+ transform: translateY(0px);
659
+ }
660
+ 50% {
661
+ transform: translateY(-10px);
662
+ }
663
+ }
664
+ .files-drop-text {
665
+ font-size: 1.2rem;
666
+ margin-bottom: 0.5rem;
667
+ color: #333;
668
+ font-weight: 500;
669
+ }
670
+ .files-drop-info {
671
+ font-size: 0.9rem;
672
+ color: #666;
673
+ margin: 0;
674
+ }
675
+ .files-allowed-types {
676
+ font-size: 0.85rem;
677
+ color: #555;
678
+ margin: 0.75rem 0 0 0;
679
+ padding: 0.5rem;
680
+ background-color: rgba(146, 64, 252, 0.1);
681
+ border-radius: 6px;
682
+ border-left: 3px solid #ce95e0;
683
+ }
684
+ .files-allowed-types strong {
685
+ color: #6e3282;
686
+ }
687
+ .files-input-hidden {
688
+ display: none;
689
+ }
690
+ .files-summary {
691
+ margin: 1.5rem 0;
692
+ padding: 1rem;
693
+ background-color: #f8f9fa;
694
+ border-radius: 8px;
695
+ border: 1px solid #e9ecef;
696
+ }
697
+ .files-summary-stats {
698
+ display: flex;
699
+ gap: 1rem;
700
+ margin-bottom: 1rem;
701
+ flex-wrap: wrap;
702
+ }
703
+ .stat {
704
+ padding: 0.5rem 1rem;
705
+ border-radius: 20px;
706
+ background-color: #e9ecef;
707
+ font-size: 0.9rem;
708
+ display: flex;
709
+ align-items: center;
710
+ gap: 0.5rem;
711
+ }
712
+ .stat.pending {
713
+ background-color: #fff3cd;
714
+ color: #856404;
715
+ }
716
+ .stat.completed {
717
+ background-color: #d1e7dd;
718
+ color: #0a3622;
719
+ }
720
+ .stat.error {
721
+ background-color: #f8d7da;
722
+ color: #721c24;
723
+ }
724
+ .files-summary-actions {
725
+ display: flex;
726
+ gap: 0.5rem;
727
+ flex-wrap: wrap;
728
+ }
729
+ .action-button {
730
+ padding: 0.75rem 1.5rem;
731
+ border: none;
732
+ border-radius: 6px;
733
+ cursor: pointer;
734
+ font-weight: 500;
735
+ transition: all 0.2s ease;
736
+ display: flex;
737
+ align-items: center;
738
+ gap: 0.5rem;
739
+ }
740
+ .action-button.primary {
741
+ background-color: #1ea7fd;
742
+ color: white;
743
+ }
744
+ .action-button.primary:hover {
745
+ background-color: #1890ff;
746
+ transform: translateY(-1px);
747
+ }
748
+ .action-button.secondary {
749
+ background-color: #6c757d;
750
+ color: white;
751
+ }
752
+ .action-button.secondary:hover {
753
+ background-color: #5a6268;
754
+ transform: translateY(-1px);
755
+ }
756
+ .files-list {
757
+ margin-top: 1.5rem;
758
+ }
759
+ .files-list h4 {
760
+ margin-bottom: 1rem;
761
+ color: #333;
762
+ font-size: 1.1rem;
763
+ font-weight: 600;
764
+ }
765
+ .files-items {
766
+ list-style: none;
767
+ padding: 0;
768
+ margin: 0;
769
+ }
770
+ .file-item {
771
+ display: flex;
772
+ align-items: center;
773
+ gap: 1rem;
774
+ padding: 1rem;
775
+ border: 1px solid #e9ecef;
776
+ border-radius: 8px;
777
+ margin-bottom: 0.75rem;
778
+ background-color: white;
779
+ transition: all 0.2s ease;
780
+ position: relative;
781
+ }
782
+ .file-item:hover {
783
+ background-color: #f8f9fa;
784
+ border-color: #dee2e6;
785
+ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
786
+ }
787
+ .file-item.uploading {
788
+ background-color: #e6f7ff;
789
+ border-color: #91d5ff;
790
+ }
791
+ .file-item.completed {
792
+ background-color: #f6ffed;
793
+ border-color: #b7eb8f;
794
+ }
795
+ .file-item.error {
796
+ background-color: #fff2f0;
797
+ border-color: #ffccc7;
798
+ }
799
+ .file-icon-status {
800
+ font-size: 1.5rem;
801
+ min-width: 2rem;
802
+ text-align: center;
803
+ }
804
+ .file-info {
805
+ flex: 1;
806
+ min-width: 0;
807
+ }
808
+ .file-name {
809
+ font-weight: 500;
810
+ color: #333;
811
+ margin-bottom: 0.5rem;
812
+ word-break: break-word;
813
+ }
814
+ .file-details {
815
+ display: flex;
816
+ gap: 1rem;
817
+ font-size: 0.85rem;
818
+ color: #666;
819
+ flex-wrap: wrap;
820
+ }
821
+ .file-size {
822
+ color: #666;
823
+ }
824
+ .file-status {
825
+ color: #1ea7fd;
826
+ font-weight: 500;
827
+ }
828
+ .file-error {
829
+ color: #dc3545;
830
+ font-weight: 500;
831
+ }
832
+ .progress-bar {
833
+ width: 100%;
834
+ height: 4px;
835
+ background-color: #e9ecef;
836
+ border-radius: 2px;
837
+ margin-top: 0.5rem;
838
+ overflow: hidden;
839
+ }
840
+ .progress-fill {
841
+ height: 100%;
842
+ background-color: #1ea7fd;
843
+ transition: width 0.3s ease;
844
+ border-radius: 2px;
845
+ }
846
+ .file-actions {
847
+ display: flex;
848
+ gap: 0.5rem;
849
+ }
850
+ .action-btn {
851
+ background: none;
852
+ border: 1px solid transparent;
853
+ padding: 0.5rem;
854
+ border-radius: 6px;
855
+ cursor: pointer;
856
+ font-size: 1rem;
857
+ transition: all 0.2s ease;
858
+ min-width: 2.5rem;
859
+ height: 2.5rem;
860
+ display: flex;
861
+ align-items: center;
862
+ justify-content: center;
863
+ }
864
+ .action-btn.upload {
865
+ color: #1ea7fd;
866
+ border-color: #1ea7fd;
867
+ }
868
+ .action-btn.upload:hover {
869
+ background-color: #1ea7fd;
870
+ color: white;
871
+ }
872
+ .action-btn.retry {
873
+ color: #fd7e14;
874
+ border-color: #fd7e14;
875
+ }
876
+ .action-btn.retry:hover {
877
+ background-color: #fd7e14;
878
+ color: white;
879
+ }
880
+ .action-btn.remove {
881
+ color: #6e3282;
882
+ border-color: #6e3282;
883
+ }
884
+ .action-btn.remove:hover {
885
+ background-color: #6e3282;
886
+ color: white;
887
+ }
888
+ @media (max-width: 768px) {
889
+ .files-drop-zone {
890
+ padding: 2rem 1rem;
891
+ }
892
+ .files-icon {
893
+ font-size: 3rem;
894
+ }
895
+ .files-drop-text {
896
+ font-size: 1rem;
897
+ }
898
+ .files-summary-stats {
899
+ flex-direction: column;
900
+ gap: 0.5rem;
901
+ }
902
+ .files-summary-actions {
903
+ flex-direction: column;
904
+ }
905
+ .action-button {
906
+ justify-content: center;
907
+ }
908
+ .file-item {
909
+ flex-direction: column;
910
+ align-items: flex-start;
911
+ gap: 0.75rem;
912
+ }
913
+ .file-details {
914
+ flex-direction: column;
915
+ gap: 0.25rem;
916
+ }
917
+ .file-actions {
918
+ align-self: flex-end;
919
+ }
920
+ }
921
+ @media (max-width: 480px) {
922
+ .files-upload {
923
+ padding: 0 0.5rem;
924
+ }
925
+ .files-drop-zone {
926
+ padding: 1.5rem 1rem;
927
+ }
928
+ .file-item {
929
+ padding: 0.75rem;
930
+ }
931
+ }
932
+
602
933
  /* src/NewTextComponentStandard/EditPreviewLinkStandard/EditPreviewLinkStandard.css */
603
934
 
604
935
  /* src/NewTextComponentStandard/FooterStandard/FooterStandard.css */
package/dist/index.d.mts CHANGED
@@ -1,4 +1,4 @@
1
- import { FC } from 'react';
1
+ import React, { FC } from 'react';
2
2
  import * as react_jsx_runtime from 'react/jsx-runtime';
3
3
 
4
4
  interface IApplicationContent {
@@ -138,6 +138,29 @@ interface TextFieldStandardProps {
138
138
 
139
139
  declare const TextFieldStandard: FC<TextFieldStandardProps>;
140
140
 
141
+ interface SelectedFile {
142
+ id: string;
143
+ file: File;
144
+ dataURL?: string;
145
+ }
146
+ interface FilesUploadStandardProps {
147
+ question: IQuestion;
148
+ isTouched: any;
149
+ visible?: boolean;
150
+ showPreview?: boolean;
151
+ activatedLanguage?: string;
152
+ allowedFileTypes?: Array<string>;
153
+ allowedNumberOfFiles?: number;
154
+ allowedTotalFileSize?: number;
155
+ onFilesAdded?: (files: SelectedFile[]) => void;
156
+ onFileRemoved?: (fileId: string) => void;
157
+ maxFileSize?: number;
158
+ allowDuplicates?: boolean;
159
+ multiple?: boolean;
160
+ }
161
+
162
+ declare const FilesUpload: React.FC<FilesUploadStandardProps>;
163
+
141
164
  declare const questionHasValidationError: (questionObject: any, arrayOfQuestionObjects: any[]) => boolean;
142
165
 
143
166
  interface TranslatedAnswers {
@@ -266,4 +289,4 @@ interface TextHeadlineAndBodyProps {
266
289
 
267
290
  declare const TextHeadlineAndBody: FC<TextHeadlineAndBodyProps>;
268
291
 
269
- 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 };
292
+ 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 CHANGED
@@ -1,4 +1,4 @@
1
- import { FC } from 'react';
1
+ import React, { FC } from 'react';
2
2
  import * as react_jsx_runtime from 'react/jsx-runtime';
3
3
 
4
4
  interface IApplicationContent {
@@ -138,6 +138,29 @@ interface TextFieldStandardProps {
138
138
 
139
139
  declare const TextFieldStandard: FC<TextFieldStandardProps>;
140
140
 
141
+ interface SelectedFile {
142
+ id: string;
143
+ file: File;
144
+ dataURL?: string;
145
+ }
146
+ interface FilesUploadStandardProps {
147
+ question: IQuestion;
148
+ isTouched: any;
149
+ visible?: boolean;
150
+ showPreview?: boolean;
151
+ activatedLanguage?: string;
152
+ allowedFileTypes?: Array<string>;
153
+ allowedNumberOfFiles?: number;
154
+ allowedTotalFileSize?: number;
155
+ onFilesAdded?: (files: SelectedFile[]) => void;
156
+ onFileRemoved?: (fileId: string) => void;
157
+ maxFileSize?: number;
158
+ allowDuplicates?: boolean;
159
+ multiple?: boolean;
160
+ }
161
+
162
+ declare const FilesUpload: React.FC<FilesUploadStandardProps>;
163
+
141
164
  declare const questionHasValidationError: (questionObject: any, arrayOfQuestionObjects: any[]) => boolean;
142
165
 
143
166
  interface TranslatedAnswers {
@@ -266,4 +289,4 @@ interface TextHeadlineAndBodyProps {
266
289
 
267
290
  declare const TextHeadlineAndBody: FC<TextHeadlineAndBodyProps>;
268
291
 
269
- 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 };
292
+ 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 };