@unvired/turboforms-embed-sdk 1.0.9 → 1.0.11

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.
Files changed (5) hide show
  1. package/dist/unvired-form-sdk.html +270 -44
  2. package/dist/unvired-forms-sdk.js +919 -1244
  3. package/package.json +4 -3
  4. package/dist/index.d.ts +0 -216
  5. package/dist/unvired-forms-sdk-flutter.js +0 -65956
package/dist/unvired-form-sdk.html CHANGED
@@ -504,6 +504,7 @@
504
504
  border: none;
505
505
  box-shadow: none;
506
506
  }
507
+
507
508
  html,
508
509
  body {
509
510
  margin: 0;
@@ -519,6 +520,7 @@ body {
519
520
  background-color: #fff;
520
521
  border-radius: 8px;
521
522
  }
523
+
522
524
  #progressContainer {
523
525
  position: fixed;
524
526
  top: 0;
@@ -670,6 +672,7 @@ body {
670
672
  position: relative;
671
673
  margin-top: 2rem;
672
674
  }
675
+
673
676
  .formio-component-select label {
674
677
  position: absolute;
675
678
  top: 1rem;
@@ -682,6 +685,7 @@ body {
682
685
  pointer-events: none;
683
686
  z-index: 2;
684
687
  }
688
+
685
689
  .formio-component-select.has-value label,
686
690
  .formio-component-select.dropdown-open label {
687
691
  top: -0.6rem;
@@ -689,6 +693,7 @@ body {
689
693
  font-size: 0.75rem;
690
694
  color: #333;
691
695
  }
696
+
692
697
  .control-label--hidden {
693
698
  display: none;
694
699
  }
@@ -793,18 +798,21 @@ body {
793
798
 
794
799
  /* Print and PDF Modes */
795
800
  @media print {
801
+
796
802
  .formio-wrapper,
797
803
  #formio {
798
804
  height: auto !important;
799
805
  max-height: none !important;
800
806
  overflow: visible !important;
801
807
  }
808
+
802
809
  .custom-break-inside-avoid {
803
810
  break-inside: avoid !important;
804
811
  page-break-inside: avoid !important;
805
812
  display: block;
806
813
  }
807
814
  }
815
+
808
816
  .pdf-mode,
809
817
  .print-mode {
810
818
  padding: 0 !important;
@@ -813,6 +821,7 @@ body {
813
821
  box-shadow: none !important;
814
822
  border-radius: 0 !important;
815
823
  }
824
+
816
825
  .pdf-mode #progressContainer,
817
826
  .pdf-mode button[onclick="FormOnBack()"],
818
827
  .pdf-mode #sticky-footer,
@@ -821,6 +830,7 @@ body {
821
830
  .print-mode #sticky-footer {
822
831
  display: none !important;
823
832
  }
833
+
824
834
  .pdf-mode .formio-wrapper,
825
835
  .print-mode .formio-wrapper {
826
836
  padding: 0 !important;
@@ -829,9 +839,11 @@ body {
829
839
  box-shadow: none !important;
830
840
  border-radius: 0 !important;
831
841
  }
842
+
832
843
  .hidden {
833
844
  display: none !important;
834
845
  }
846
+
835
847
  .relative-position {
836
848
  position: relative;
837
849
  }
@@ -842,7 +854,8 @@ body {
842
854
  top: 0;
843
855
  left: 0;
844
856
  width: 100%;
845
- height: 2px; /* thin line for desktop */
857
+ height: 2px;
858
+ /* thin line for desktop */
846
859
  background: #e0e0e0;
847
860
  z-index: 10000;
848
861
  }
@@ -858,7 +871,8 @@ body {
858
871
  /* Square Badge */
859
872
  #progress-bar .badge {
860
873
  position: absolute;
861
- top: -0px; /* place above the bar */
874
+ top: -0px;
875
+ /* place above the bar */
862
876
  background: #ffffff;
863
877
  color: #000000;
864
878
  border: 2px solid #28a745;
@@ -872,14 +886,17 @@ body {
872
886
  justify-content: center;
873
887
  align-items: center;
874
888
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
875
- transition: left 0.4s ease-in-out; /* smooth badge movement */
889
+ transition: left 0.4s ease-in-out;
890
+ /* smooth badge movement */
876
891
  }
877
892
 
878
893
  /* Tablet screens */
879
894
  @media (max-width: 768px) {
880
895
  #progress-bar {
881
- height: 2px; /* slightly thicker for tablets */
896
+ height: 2px;
897
+ /* slightly thicker for tablets */
882
898
  }
899
+
883
900
  #progress-bar .badge {
884
901
  font-size: 0.75rem;
885
902
  min-width: 36px;
@@ -891,8 +908,10 @@ body {
891
908
  /* Mobile screens */
892
909
  @media (max-width: 480px) {
893
910
  #progress-bar {
894
- height: 2px; /* visible on phones */
911
+ height: 2px;
912
+ /* visible on phones */
895
913
  }
914
+
896
915
  #progress-bar .badge {
897
916
  font-size: 0.7rem;
898
917
  min-width: 32px;
@@ -904,8 +923,10 @@ body {
904
923
  /* Very small phones */
905
924
  @media (max-width: 360px) {
906
925
  #progress-bar {
907
- height: 2px; /* keep readable */
926
+ height: 2px;
927
+ /* keep readable */
908
928
  }
929
+
909
930
  myFragment #progress-bar .badge {
910
931
  font-size: 0.65rem;
911
932
  min-width: 30px;
@@ -921,7 +942,80 @@ body {
921
942
  #myFragment {
922
943
  padding: 0px !important;
923
944
  }
924
- </style>
945
+
946
+ /* ============================================
947
+ SDK LOADER STYLES
948
+ ============================================ */
949
+
950
+ #sdk-form-loader {
951
+ position: fixed;
952
+ top: 0;
953
+ left: 0;
954
+ width: 100%;
955
+ height: 100%;
956
+ background: rgba(255, 255, 255, 0.95);
957
+ backdrop-filter: blur(10px);
958
+ display: flex;
959
+ flex-direction: column;
960
+ justify-content: center;
961
+ align-items: center;
962
+ z-index: 99999;
963
+ opacity: 1;
964
+ transition: opacity 0.4s ease-out, visibility 0.4s ease-out;
965
+ }
966
+
967
+ #sdk-form-loader.hidden {
968
+ opacity: 0;
969
+ visibility: hidden;
970
+ pointer-events: none;
971
+ }
972
+
973
+ .sdk-loader-spinner {
974
+ width: 60px;
975
+ height: 60px;
976
+ border: 4px solid #e0e0e0;
977
+ border-top: 4px solid #0077b6;
978
+ border-radius: 50%;
979
+ animation: sdk-spin 1s linear infinite;
980
+ margin-bottom: 20px;
981
+ }
982
+
983
+ .sdk-loader-text {
984
+ color: #0077b6;
985
+ font-size: 1.1rem;
986
+ font-weight: 500;
987
+ letter-spacing: 0.5px;
988
+ animation: sdk-pulse 1.5s ease-in-out infinite;
989
+ }
990
+
991
+ .sdk-loader-subtext {
992
+ color: #666;
993
+ font-size: 0.9rem;
994
+ margin-top: 8px;
995
+ opacity: 0.7;
996
+ }
997
+
998
+ @keyframes sdk-spin {
999
+ 0% {
1000
+ transform: rotate(0deg);
1001
+ }
1002
+
1003
+ 100% {
1004
+ transform: rotate(360deg);
1005
+ }
1006
+ }
1007
+
1008
+ @keyframes sdk-pulse {
1009
+
1010
+ 0%,
1011
+ 100% {
1012
+ opacity: 1;
1013
+ }
1014
+
1015
+ 50% {
1016
+ opacity: 0.5;
1017
+ }
1018
+ }</style>
925
1019
  <style>.r6o-drawing{cursor:none}.r6o-relations-layer.readonly .handle rect{pointer-events:none}.r6o-relations-layer{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none}.r6o-relations-layer circle{stroke:#515151;stroke-width:.4;fill:#3f3f3f}.r6o-relations-layer path{stroke:#595959;stroke-linecap:round;stroke-linejoin:round;fill:transparent}.r6o-relations-layer path.connection{stroke-width:1.6;stroke-dasharray:2,3}.r6o-relations-layer path.r6o-arrow{stroke-width:1.8;fill:#7f7f7f}.r6o-relations-layer .handle rect{stroke-width:1;stroke:#595959;fill:#fff;pointer-events:auto;cursor:pointer}.r6o-relations-layer .handle text{font-size:10px}.r6o-relations-layer .hover{stroke:rgba(63,63,63,.9);stroke-width:1.4;fill:transparent}
926
1020
  .r6o-btn{background-color:#4483c4;border:1px solid #4483c4;box-sizing:border-box;color:#fff;cursor:pointer;display:inline-block;font-size:14px;margin:0;outline:none;text-decoration:none;white-space:nowrap;padding:6px 18px;min-width:70px;vertical-align:middle;-webkit-border-radius:2px;-khtml-border-radius:2px;-moz-border-radius:2px;border-radius:2px}.r6o-btn *{vertical-align:middle;cursor:pointer}.r6o-btn .r6o-icon{margin-right:4px}.r6o-btn:disabled{border-color:#a3c2e2 !important;background-color:#a3c2e2 !important}.r6o-btn:hover{background-color:#4f92d7;border-color:#4f92d7}.r6o-btn.outline{border:1px solid #4483c4;color:#4483c4;background-color:transparent;text-shadow:none}.r6o-autocomplete{display:inline;position:relative}.r6o-autocomplete div[role=combobox]{display:inline}.r6o-autocomplete input{outline:none;border:none;width:80px;height:100%;line-height:14px;white-space:pre;box-sizing:border-box;background-color:transparent;font-size:14px;color:#3f3f3f}.r6o-autocomplete ul{position:absolute;margin:0;padding:0;list-style-type:none;background-color:#fff;border-radius:3px;border:1px solid #d6d7d9;box-sizing:border-box;box-shadow:0 0 20px rgba(0,0,0,.25)}.r6o-autocomplete ul:empty{display:none}.r6o-autocomplete li{box-sizing:border-box;padding:2px 12px;width:100%;cursor:pointer}.r6o-editable-text{max-height:120px;overflow:auto;outline:none;min-height:2em;font-size:14px;font-family:"Lato",sans-serif}.r6o-editable-text:empty:not(:focus):before{content:attr(data-placeholder);color:#c2c2c2}.r6o-widget.comment{font-size:14px;min-height:3em;background-color:#fff;position:relative}.r6o-widget.comment .r6o-editable-text,.r6o-widget.comment .r6o-readonly-comment{padding:10px;width:100%;box-sizing:border-box;outline:none;border:none;background-color:transparent;resize:none}.r6o-widget.comment .r6o-readonly-comment{white-space:pre}.r6o-widget.comment .r6o-editable-text::-webkit-input-placeholder{color:#c2c2c2}.r6o-widget.comment .r6o-editable-text::-moz-placeholder{color:#c2c2c2}.r6o-widget.comment .r6o-editable-text:-moz-placeholder{color:#c2c2c2}.r6o-widget.comment .r6o-editable-text:-ms-input-placeholder{color:#c2c2c2}.r6o-widget.comment .r6o-lastmodified{border:1px solid #e5e5e5;display:inline-block;border-radius:2px;margin:0 10px 8px 10px;padding:4px 5px;line-height:100%;font-size:12px}.r6o-widget.comment .r6o-lastmodified .r6o-lastmodified-at{color:#757575;padding-left:3px}.r6o-widget.comment .r6o-arrow-down{position:absolute;height:20px;width:20px;top:9px;right:9px;line-height:22px;background-color:#fff;text-align:center;-webkit-font-smoothing:antialiased;border:1px solid #e5e5e5;cursor:pointer;-webkit-border-radius:1px;-khtml-border-radius:1px;-moz-border-radius:1px;border-radius:1px}.r6o-widget.comment .r6o-arrow-down.r6o-menu-open{border-color:#4483c4}.r6o-widget.comment .r6o-comment-dropdown-menu{position:absolute;top:32px;right:8px;background-color:#fff;border:1px solid #e5e5e5;list-style-type:none;margin:0;padding:5px 0;z-index:9999;-webkit-box-shadow:0 2px 4px rgba(0,0,0,.2);-moz-box-shadow:0 2px 4px rgba(0,0,0,.2);box-shadow:0 2px 4px rgba(0,0,0,.2)}.r6o-widget.comment .r6o-comment-dropdown-menu li{padding:0 15px;cursor:pointer}.r6o-widget.comment .r6o-comment-dropdown-menu li:hover{background-color:#ecf0f1}.r6o-widget.comment .r6o-purposedropdown{position:relative;z-index:2}.r6o-widget.comment.editable{background-color:#ecf0f1}.r6o-widget.r6o-tag:empty{display:none}@media all and (-ms-high-contrast: none),(-ms-high-contrast: active){.r6o-widget.tag .r6o-taglist li{height:27px}.r6o-widget.tag .r6o-taglist li .r6o-delete-wrapper .r6o-delete{position:relative;top:-4px}}.r6o-widget.r6o-tag{background-color:#ecf0f1;border-bottom:1px solid #e5e5e5;padding:1px 3px;display:flex}.r6o-widget.r6o-tag ul{margin:0;padding:0;list-style-type:none;z-index:1}.r6o-widget.r6o-tag ul.r6o-taglist{flex:0;white-space:nowrap}.r6o-widget.r6o-tag ul.r6o-taglist li{margin:0;display:inline-block;margin:1px 1px 1px 0;padding:0;vertical-align:middle;overflow:hidden;font-size:12px;background-color:#fff;border:1px solid #d6d7d9;cursor:pointer;position:relative;line-height:180%;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-border-radius:2px;-khtml-border-radius:2px;-moz-border-radius:2px;border-radius:2px;-webkit-box-shadow:0 0 4px rgba(0,0,0,.1);-moz-box-shadow:0 0 4px rgba(0,0,0,.1);box-shadow:0 0 4px rgba(0,0,0,.1)}.r6o-widget.r6o-tag ul.r6o-taglist li .r6o-label{padding:2px 8px;display:inline-block}.r6o-widget.r6o-tag ul.r6o-taglist li .r6o-delete-wrapper{display:inline-block;padding:2px 0;color:#fff;width:0;height:100%;background-color:#4483c4;-webkit-border-top-right-radius:2px;-webkit-border-bottom-right-radius:2px;-khtml-border-radius-topright:2px;-khtml-border-radius-bottomright:2px;-moz-border-radius-topright:2px;-moz-border-radius-bottomright:2px;border-top-right-radius:2px;border-bottom-right-radius:2px}.r6o-widget.r6o-tag ul.r6o-taglist li .r6o-delete-wrapper .r6o-delete{padding:2px 6px}.r6o-widget.r6o-tag ul.r6o-taglist li .r6o-delete-wrapper svg{vertical-align:text-top}.r6o-widget.r6o-tag ul.r6o-taglist li .r6o-delete-enter-active{width:24px;transition:width 200ms}.r6o-widget.r6o-tag ul.r6o-taglist li .r6o-delete-enter-done{width:24px}.r6o-widget.r6o-tag ul.r6o-taglist li .r6o-delete-exit{width:24px}.r6o-widget.r6o-tag ul.r6o-taglist li .r6o-delete-exit-active{width:0;transition:width 200ms}.r6o-widget.r6o-tag .r6o-autocomplete{flex:1;position:relative}.r6o-widget.r6o-tag .r6o-autocomplete li{font-size:14px}.r6o-widget.r6o-tag input{width:100%;padding:0 3px;min-width:80px;outline:none;border:none;line-height:170%;background-color:transparent;color:#3f3f3f}.r6o-widget.r6o-tag input::-webkit-input-placeholder{color:#c2c2c2}.r6o-widget.r6o-tag input::-moz-placeholder{color:#c2c2c2}.r6o-widget.r6o-tag input:-moz-placeholder{color:#c2c2c2}.r6o-widget.r6o-tag input:-ms-input-placeholder{color:#c2c2c2}.r6o-editor{position:absolute;z-index:99999;width:400px;color:#3f3f3f;opacity:0;font-family:"Lato",sans-serif;font-size:17px;line-height:27px;-webkit-transition:opacity .2s ease-in;-moz-transition:opacity .2s ease-in;transition:opacity .2s ease-in}.r6o-editor .r6o-arrow{position:absolute;overflow:hidden;top:-12px;left:12px;width:28px;height:12px;display:none}.r6o-editor .r6o-arrow:after{content:"";position:absolute;top:5px;left:5px;width:18px;height:18px;background-color:#fff;-webkit-backface-visibility:hidden;-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-ms-transform:rotate(45deg);-o-transform:rotate(45deg);transform:rotate(45deg)}.r6o-editor .r6o-editor-inner{background-color:#fff;-webkit-border-radius:2px;-khtml-border-radius:2px;-moz-border-radius:2px;border-radius:2px;-webkit-box-shadow:2px 2px 42px rgba(0,0,0,.4);-moz-box-shadow:2px 2px 42px rgba(0,0,0,.4);box-shadow:2px 2px 42px rgba(0,0,0,.4)}.r6o-editor .r6o-editor-inner .r6o-widget:first-child{-webkit-border-top-left-radius:2px;-webkit-border-top-right-radius:2px;-khtml-border-radius-topleft:2px;-khtml-border-radius-topright:2px;-moz-border-radius-topleft:2px;-moz-border-radius-topright:2px;border-top-left-radius:2px;border-top-right-radius:2px}.r6o-editor .r6o-editor-inner .r6o-widget{border-bottom:1px solid #e5e5e5}.r6o-editor .r6o-footer{position:relative;text-align:right;padding:8px 0}.r6o-editor .r6o-footer .r6o-btn{margin-right:8px}.r6o-editor .r6o-footer .r6o-btn.delete-annotation{position:absolute;top:7px;left:7px;background-color:transparent;border:none;color:#4483c4;width:32px;height:32px;min-width:0;border-radius:100%;padding:0;display:flex;justify-content:center;align-items:center;-webkit-transition:all .1s ease-in;-moz-transition:all .1s ease-in;-o-transition:all .1s ease-in;transition:all .1s ease-in}.r6o-editor .r6o-footer .r6o-btn.delete-annotation:hover{color:#fff;background-color:#ef352c}@media(max-width: 640px){.r6o-editor{width:260px}}.r6o-editor.r6o-arrow-top .r6o-arrow{display:block}.r6o-editor.r6o-arrow-right{margin-left:8px}.r6o-editor.r6o-arrow-right .r6o-arrow{left:auto;right:12px}.r6o-editor.r6o-arrow-bottom .r6o-arrow{display:block;top:auto;bottom:-12px}.r6o-editor.r6o-arrow-bottom .r6o-arrow::after{top:-11px;box-shadow:none}.r6o-editor.pushed .r6o-arrow,.r6o-editor.dragged .r6o-arrow{display:none}.r6o-editor .r6o-draggable{cursor:move}.r6o-purposedropdown{width:150px;display:inline-block}.r6o-noselect{-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.r6o-editor{margin-left:-12px}.r6o-annotation{background-color:rgba(255,165,0,.2);border-bottom:2px solid orange;cursor:pointer}.r6o-selection{background-color:rgba(207,207,255,.63);cursor:pointer}.r6o-hide-selection::selection,.r6o-hide-selection ::selection{background:transparent}.r6o-hide-selection::-moz-selection .r6o-hide-selection ::-moz-selection{background:transparent}.r6o-relation-editor{position:absolute;font-family:"Lato",sans-serif;font-size:17px;line-height:27px;-webkit-box-shadow:0 1px 14px rgba(0,0,0,.4);-moz-box-shadow:0 1px 14px rgba(0,0,0,.4);box-shadow:0 1px 14px rgba(0,0,0,.4);-webkit-border-radius:3px;-khtml-border-radius:3px;-moz-border-radius:3px;border-radius:3px;transform:translate(-50%, -50%);background-color:#fff}.r6o-relation-editor svg{vertical-align:middle;shape-rendering:geometricPrecision}.r6o-relation-editor *{box-sizing:border-box}.r6o-relation-editor .input-wrapper{height:34px;padding:0 6px;margin-right:68px;font-size:14px;background-color:#ecf0f1;cursor:text;-webkit-border-top-left-radius:3px;-webkit-border-bottom-left-radius:3px;-khtml-border-radius-topleft:3px;-khtml-border-radius-bottomleft:3px;-moz-border-radius-topleft:3px;-moz-border-radius-bottomleft:3px;border-top-left-radius:3px;border-bottom-left-radius:3px}.r6o-relation-editor .input-wrapper .r6o-autocomplete ul{position:relative;left:-6px}.r6o-relation-editor .buttons{position:absolute;display:inline-flex;top:0;right:0}.r6o-relation-editor .buttons span{height:34px;display:inline-block;width:34px;text-align:center;font-size:14px;cursor:pointer;padding:1px 0}.r6o-relation-editor .buttons .delete{background-color:#fff;color:#9ca4b1;border-left:1px solid #e5e5e5}.r6o-relation-editor .buttons .delete:hover{background-color:#f6f6f6}.r6o-relation-editor .buttons .ok{background-color:#4483c4;color:#fff;-webkit-border-top-right-radius:3px;-webkit-border-bottom-right-radius:3px;-khtml-border-radius-topright:3px;-khtml-border-radius-bottomright:3px;-moz-border-radius-topright:3px;-moz-border-radius-bottomright:3px;border-top-right-radius:3px;border-bottom-right-radius:3px}.r6o-relation-editor .buttons .ok:hover{background-color:#4f92d7}
927
1021
  .r6o-btn{background-color:#4483c4;border:1px solid #4483c4;box-sizing:border-box;color:#fff;cursor:pointer;display:inline-block;font-size:14px;margin:0;outline:none;text-decoration:none;white-space:nowrap;padding:6px 18px;min-width:70px;vertical-align:middle;-webkit-border-radius:2px;-khtml-border-radius:2px;-moz-border-radius:2px;border-radius:2px}.r6o-btn *{vertical-align:middle;cursor:pointer}.r6o-btn .r6o-icon{margin-right:4px}.r6o-btn:disabled{border-color:#a3c2e2 !important;background-color:#a3c2e2 !important}.r6o-btn:hover{background-color:#4f92d7;border-color:#4f92d7}.r6o-btn.outline{border:1px solid #4483c4;color:#4483c4;background-color:transparent;text-shadow:none}.r6o-autocomplete{display:inline;position:relative}.r6o-autocomplete div[role=combobox]{display:inline}.r6o-autocomplete input{outline:none;border:none;width:80px;height:100%;line-height:14px;white-space:pre;box-sizing:border-box;background-color:transparent;font-size:14px;color:#3f3f3f}.r6o-autocomplete ul{position:absolute;margin:0;padding:0;list-style-type:none;background-color:#fff;border-radius:3px;border:1px solid #d6d7d9;box-sizing:border-box;box-shadow:0 0 20px rgba(0,0,0,.25)}.r6o-autocomplete ul:empty{display:none}.r6o-autocomplete li{box-sizing:border-box;padding:2px 12px;width:100%;cursor:pointer}.r6o-editable-text{max-height:120px;overflow:auto;outline:none;min-height:2em;font-size:14px;font-family:"Lato",sans-serif}.r6o-editable-text:empty:not(:focus):before{content:attr(data-placeholder);color:#c2c2c2}.r6o-widget.comment{font-size:14px;min-height:3em;background-color:#fff;position:relative}.r6o-widget.comment .r6o-editable-text,.r6o-widget.comment .r6o-readonly-comment{padding:10px;width:100%;box-sizing:border-box;outline:none;border:none;background-color:transparent;resize:none}.r6o-widget.comment .r6o-readonly-comment{white-space:pre}.r6o-widget.comment .r6o-editable-text::-webkit-input-placeholder{color:#c2c2c2}.r6o-widget.comment .r6o-editable-text::-moz-placeholder{color:#c2c2c2}.r6o-widget.comment .r6o-editable-text:-moz-placeholder{color:#c2c2c2}.r6o-widget.comment .r6o-editable-text:-ms-input-placeholder{color:#c2c2c2}.r6o-widget.comment .r6o-lastmodified{border:1px solid #e5e5e5;display:inline-block;border-radius:2px;margin:0 10px 8px 10px;padding:4px 5px;line-height:100%;font-size:12px}.r6o-widget.comment .r6o-lastmodified .r6o-lastmodified-at{color:#757575;padding-left:3px}.r6o-widget.comment .r6o-arrow-down{position:absolute;height:20px;width:20px;top:9px;right:9px;line-height:22px;background-color:#fff;text-align:center;-webkit-font-smoothing:antialiased;border:1px solid #e5e5e5;cursor:pointer;-webkit-border-radius:1px;-khtml-border-radius:1px;-moz-border-radius:1px;border-radius:1px}.r6o-widget.comment .r6o-arrow-down.r6o-menu-open{border-color:#4483c4}.r6o-widget.comment .r6o-comment-dropdown-menu{position:absolute;top:32px;right:8px;background-color:#fff;border:1px solid #e5e5e5;list-style-type:none;margin:0;padding:5px 0;z-index:9999;-webkit-box-shadow:0 2px 4px rgba(0,0,0,.2);-moz-box-shadow:0 2px 4px rgba(0,0,0,.2);box-shadow:0 2px 4px rgba(0,0,0,.2)}.r6o-widget.comment .r6o-comment-dropdown-menu li{padding:0 15px;cursor:pointer}.r6o-widget.comment .r6o-comment-dropdown-menu li:hover{background-color:#ecf0f1}.r6o-widget.comment .r6o-purposedropdown{position:relative;z-index:2}.r6o-widget.comment.editable{background-color:#ecf0f1}.r6o-widget.r6o-tag:empty{display:none}@media all and (-ms-high-contrast: none),(-ms-high-contrast: active){.r6o-widget.tag .r6o-taglist li{height:27px}.r6o-widget.tag .r6o-taglist li .r6o-delete-wrapper .r6o-delete{position:relative;top:-4px}}.r6o-widget.r6o-tag{background-color:#ecf0f1;border-bottom:1px solid #e5e5e5;padding:1px 3px;display:flex}.r6o-widget.r6o-tag ul{margin:0;padding:0;list-style-type:none;z-index:1}.r6o-widget.r6o-tag ul.r6o-taglist{flex:0;white-space:nowrap}.r6o-widget.r6o-tag ul.r6o-taglist li{margin:0;display:inline-block;margin:1px 1px 1px 0;padding:0;vertical-align:middle;overflow:hidden;font-size:12px;background-color:#fff;border:1px solid #d6d7d9;cursor:pointer;position:relative;line-height:180%;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-border-radius:2px;-khtml-border-radius:2px;-moz-border-radius:2px;border-radius:2px;-webkit-box-shadow:0 0 4px rgba(0,0,0,.1);-moz-box-shadow:0 0 4px rgba(0,0,0,.1);box-shadow:0 0 4px rgba(0,0,0,.1)}.r6o-widget.r6o-tag ul.r6o-taglist li .r6o-label{padding:2px 8px;display:inline-block}.r6o-widget.r6o-tag ul.r6o-taglist li .r6o-delete-wrapper{display:inline-block;padding:2px 0;color:#fff;width:0;height:100%;background-color:#4483c4;-webkit-border-top-right-radius:2px;-webkit-border-bottom-right-radius:2px;-khtml-border-radius-topright:2px;-khtml-border-radius-bottomright:2px;-moz-border-radius-topright:2px;-moz-border-radius-bottomright:2px;border-top-right-radius:2px;border-bottom-right-radius:2px}.r6o-widget.r6o-tag ul.r6o-taglist li .r6o-delete-wrapper .r6o-delete{padding:2px 6px}.r6o-widget.r6o-tag ul.r6o-taglist li .r6o-delete-wrapper svg{vertical-align:text-top}.r6o-widget.r6o-tag ul.r6o-taglist li .r6o-delete-enter-active{width:24px;transition:width 200ms}.r6o-widget.r6o-tag ul.r6o-taglist li .r6o-delete-enter-done{width:24px}.r6o-widget.r6o-tag ul.r6o-taglist li .r6o-delete-exit{width:24px}.r6o-widget.r6o-tag ul.r6o-taglist li .r6o-delete-exit-active{width:0;transition:width 200ms}.r6o-widget.r6o-tag .r6o-autocomplete{flex:1;position:relative}.r6o-widget.r6o-tag .r6o-autocomplete li{font-size:14px}.r6o-widget.r6o-tag input{width:100%;padding:0 3px;min-width:80px;outline:none;border:none;line-height:170%;background-color:transparent;color:#3f3f3f}.r6o-widget.r6o-tag input::-webkit-input-placeholder{color:#c2c2c2}.r6o-widget.r6o-tag input::-moz-placeholder{color:#c2c2c2}.r6o-widget.r6o-tag input:-moz-placeholder{color:#c2c2c2}.r6o-widget.r6o-tag input:-ms-input-placeholder{color:#c2c2c2}.r6o-editor{position:absolute;z-index:99999;width:400px;color:#3f3f3f;opacity:0;font-family:"Lato",sans-serif;font-size:17px;line-height:27px;-webkit-transition:opacity .2s ease-in;-moz-transition:opacity .2s ease-in;transition:opacity .2s ease-in}.r6o-editor .r6o-arrow{position:absolute;overflow:hidden;top:-12px;left:12px;width:28px;height:12px;display:none}.r6o-editor .r6o-arrow:after{content:"";position:absolute;top:5px;left:5px;width:18px;height:18px;background-color:#fff;-webkit-backface-visibility:hidden;-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-ms-transform:rotate(45deg);-o-transform:rotate(45deg);transform:rotate(45deg)}.r6o-editor .r6o-editor-inner{background-color:#fff;-webkit-border-radius:2px;-khtml-border-radius:2px;-moz-border-radius:2px;border-radius:2px;-webkit-box-shadow:2px 2px 42px rgba(0,0,0,.4);-moz-box-shadow:2px 2px 42px rgba(0,0,0,.4);box-shadow:2px 2px 42px rgba(0,0,0,.4)}.r6o-editor .r6o-editor-inner .r6o-widget:first-child{-webkit-border-top-left-radius:2px;-webkit-border-top-right-radius:2px;-khtml-border-radius-topleft:2px;-khtml-border-radius-topright:2px;-moz-border-radius-topleft:2px;-moz-border-radius-topright:2px;border-top-left-radius:2px;border-top-right-radius:2px}.r6o-editor .r6o-editor-inner .r6o-widget{border-bottom:1px solid #e5e5e5}.r6o-editor .r6o-footer{position:relative;text-align:right;padding:8px 0}.r6o-editor .r6o-footer .r6o-btn{margin-right:8px}.r6o-editor .r6o-footer .r6o-btn.delete-annotation{position:absolute;top:7px;left:7px;background-color:transparent;border:none;color:#4483c4;width:32px;height:32px;min-width:0;border-radius:100%;padding:0;display:flex;justify-content:center;align-items:center;-webkit-transition:all .1s ease-in;-moz-transition:all .1s ease-in;-o-transition:all .1s ease-in;transition:all .1s ease-in}.r6o-editor .r6o-footer .r6o-btn.delete-annotation:hover{color:#fff;background-color:#ef352c}@media(max-width: 640px){.r6o-editor{width:260px}}.r6o-editor.r6o-arrow-top .r6o-arrow{display:block}.r6o-editor.r6o-arrow-right{margin-left:8px}.r6o-editor.r6o-arrow-right .r6o-arrow{left:auto;right:12px}.r6o-editor.r6o-arrow-bottom .r6o-arrow{display:block;top:auto;bottom:-12px}.r6o-editor.r6o-arrow-bottom .r6o-arrow::after{top:-11px;box-shadow:none}.r6o-editor.pushed .r6o-arrow,.r6o-editor.dragged .r6o-arrow{display:none}.r6o-editor .r6o-draggable{cursor:move}.r6o-purposedropdown{width:150px;display:inline-block}.r6o-noselect{-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}
@@ -40397,6 +40491,7 @@ select.ui.dropdown {
40397
40491
  border: none;
40398
40492
  box-shadow: none;
40399
40493
  }
40494
+
40400
40495
  html,
40401
40496
  body {
40402
40497
  margin: 0;
@@ -40412,6 +40507,7 @@ body {
40412
40507
  background-color: #fff;
40413
40508
  border-radius: 8px;
40414
40509
  }
40510
+
40415
40511
  #progressContainer {
40416
40512
  position: fixed;
40417
40513
  top: 0;
@@ -40563,6 +40659,7 @@ body {
40563
40659
  position: relative;
40564
40660
  margin-top: 2rem;
40565
40661
  }
40662
+
40566
40663
  .formio-component-select label {
40567
40664
  position: absolute;
40568
40665
  top: 1rem;
@@ -40575,6 +40672,7 @@ body {
40575
40672
  pointer-events: none;
40576
40673
  z-index: 2;
40577
40674
  }
40675
+
40578
40676
  .formio-component-select.has-value label,
40579
40677
  .formio-component-select.dropdown-open label {
40580
40678
  top: -0.6rem;
@@ -40582,6 +40680,7 @@ body {
40582
40680
  font-size: 0.75rem;
40583
40681
  color: #333;
40584
40682
  }
40683
+
40585
40684
  .control-label--hidden {
40586
40685
  display: none;
40587
40686
  }
@@ -40686,18 +40785,21 @@ body {
40686
40785
 
40687
40786
  /* Print and PDF Modes */
40688
40787
  @media print {
40788
+
40689
40789
  .formio-wrapper,
40690
40790
  #formio {
40691
40791
  height: auto !important;
40692
40792
  max-height: none !important;
40693
40793
  overflow: visible !important;
40694
40794
  }
40795
+
40695
40796
  .custom-break-inside-avoid {
40696
40797
  break-inside: avoid !important;
40697
40798
  page-break-inside: avoid !important;
40698
40799
  display: block;
40699
40800
  }
40700
40801
  }
40802
+
40701
40803
  .pdf-mode,
40702
40804
  .print-mode {
40703
40805
  padding: 0 !important;
@@ -40706,6 +40808,7 @@ body {
40706
40808
  box-shadow: none !important;
40707
40809
  border-radius: 0 !important;
40708
40810
  }
40811
+
40709
40812
  .pdf-mode #progressContainer,
40710
40813
  .pdf-mode button[onclick="FormOnBack()"],
40711
40814
  .pdf-mode #sticky-footer,
@@ -40714,6 +40817,7 @@ body {
40714
40817
  .print-mode #sticky-footer {
40715
40818
  display: none !important;
40716
40819
  }
40820
+
40717
40821
  .pdf-mode .formio-wrapper,
40718
40822
  .print-mode .formio-wrapper {
40719
40823
  padding: 0 !important;
@@ -40722,9 +40826,11 @@ body {
40722
40826
  box-shadow: none !important;
40723
40827
  border-radius: 0 !important;
40724
40828
  }
40829
+
40725
40830
  .hidden {
40726
40831
  display: none !important;
40727
40832
  }
40833
+
40728
40834
  .relative-position {
40729
40835
  position: relative;
40730
40836
  }
@@ -40735,7 +40841,8 @@ body {
40735
40841
  top: 0;
40736
40842
  left: 0;
40737
40843
  width: 100%;
40738
- height: 2px; /* thin line for desktop */
40844
+ height: 2px;
40845
+ /* thin line for desktop */
40739
40846
  background: #e0e0e0;
40740
40847
  z-index: 10000;
40741
40848
  }
@@ -40751,7 +40858,8 @@ body {
40751
40858
  /* Square Badge */
40752
40859
  #progress-bar .badge {
40753
40860
  position: absolute;
40754
- top: -0px; /* place above the bar */
40861
+ top: -0px;
40862
+ /* place above the bar */
40755
40863
  background: #ffffff;
40756
40864
  color: #000000;
40757
40865
  border: 2px solid #28a745;
@@ -40765,14 +40873,17 @@ body {
40765
40873
  justify-content: center;
40766
40874
  align-items: center;
40767
40875
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
40768
- transition: left 0.4s ease-in-out; /* smooth badge movement */
40876
+ transition: left 0.4s ease-in-out;
40877
+ /* smooth badge movement */
40769
40878
  }
40770
40879
 
40771
40880
  /* Tablet screens */
40772
40881
  @media (max-width: 768px) {
40773
40882
  #progress-bar {
40774
- height: 2px; /* slightly thicker for tablets */
40883
+ height: 2px;
40884
+ /* slightly thicker for tablets */
40775
40885
  }
40886
+
40776
40887
  #progress-bar .badge {
40777
40888
  font-size: 0.75rem;
40778
40889
  min-width: 36px;
@@ -40784,8 +40895,10 @@ body {
40784
40895
  /* Mobile screens */
40785
40896
  @media (max-width: 480px) {
40786
40897
  #progress-bar {
40787
- height: 2px; /* visible on phones */
40898
+ height: 2px;
40899
+ /* visible on phones */
40788
40900
  }
40901
+
40789
40902
  #progress-bar .badge {
40790
40903
  font-size: 0.7rem;
40791
40904
  min-width: 32px;
@@ -40797,8 +40910,10 @@ body {
40797
40910
  /* Very small phones */
40798
40911
  @media (max-width: 360px) {
40799
40912
  #progress-bar {
40800
- height: 2px; /* keep readable */
40913
+ height: 2px;
40914
+ /* keep readable */
40801
40915
  }
40916
+
40802
40917
  myFragment #progress-bar .badge {
40803
40918
  font-size: 0.65rem;
40804
40919
  min-width: 30px;
@@ -40814,7 +40929,80 @@ body {
40814
40929
  #myFragment {
40815
40930
  padding: 0px !important;
40816
40931
  }
40817
- </style>
40932
+
40933
+ /* ============================================
40934
+ SDK LOADER STYLES
40935
+ ============================================ */
40936
+
40937
+ #sdk-form-loader {
40938
+ position: fixed;
40939
+ top: 0;
40940
+ left: 0;
40941
+ width: 100%;
40942
+ height: 100%;
40943
+ background: rgba(255, 255, 255, 0.95);
40944
+ backdrop-filter: blur(10px);
40945
+ display: flex;
40946
+ flex-direction: column;
40947
+ justify-content: center;
40948
+ align-items: center;
40949
+ z-index: 99999;
40950
+ opacity: 1;
40951
+ transition: opacity 0.4s ease-out, visibility 0.4s ease-out;
40952
+ }
40953
+
40954
+ #sdk-form-loader.hidden {
40955
+ opacity: 0;
40956
+ visibility: hidden;
40957
+ pointer-events: none;
40958
+ }
40959
+
40960
+ .sdk-loader-spinner {
40961
+ width: 60px;
40962
+ height: 60px;
40963
+ border: 4px solid #e0e0e0;
40964
+ border-top: 4px solid #0077b6;
40965
+ border-radius: 50%;
40966
+ animation: sdk-spin 1s linear infinite;
40967
+ margin-bottom: 20px;
40968
+ }
40969
+
40970
+ .sdk-loader-text {
40971
+ color: #0077b6;
40972
+ font-size: 1.1rem;
40973
+ font-weight: 500;
40974
+ letter-spacing: 0.5px;
40975
+ animation: sdk-pulse 1.5s ease-in-out infinite;
40976
+ }
40977
+
40978
+ .sdk-loader-subtext {
40979
+ color: #666;
40980
+ font-size: 0.9rem;
40981
+ margin-top: 8px;
40982
+ opacity: 0.7;
40983
+ }
40984
+
40985
+ @keyframes sdk-spin {
40986
+ 0% {
40987
+ transform: rotate(0deg);
40988
+ }
40989
+
40990
+ 100% {
40991
+ transform: rotate(360deg);
40992
+ }
40993
+ }
40994
+
40995
+ @keyframes sdk-pulse {
40996
+
40997
+ 0%,
40998
+ 100% {
40999
+ opacity: 1;
41000
+ }
41001
+
41002
+ 50% {
41003
+ opacity: 0.5;
41004
+ }
41005
+ }</style>
40818
41006
 
40819
41007
  <script>
40820
41008
  // Configure LESS for production builds
@@ -58825,19 +59013,31 @@ function FormOnBackNavigation() {
58825
59013
 
58826
59014
  // ============================================ FORM-IO ===========================================================
58827
59015
 
59016
+ // Button state management based on privateExternal and permission
58828
59017
  // Button state management based on privateExternal and permission
58829
59018
  function initialButtonSetup(privateExternal, permission) {
58830
59019
  const saveBtn = document.getElementById("saveBtn");
58831
59020
  const submitBtn = document.getElementById("submitBtn");
59021
+ const completeOption = document.getElementById("completeOption");
59022
+ const saveOption = document.getElementById("saveOption");
59023
+ const completeDivider = document.getElementById("completeDivider");
59024
+ const saveDivider = document.getElementById("saveDivider");
59025
+
58832
59026
  if (!saveBtn || !submitBtn) return;
58833
59027
 
58834
59028
  const isPrivate = privateExternal === true || privateExternal === "true";
58835
59029
  const isPublic = privateExternal === false || privateExternal === "false";
58836
59030
  const permissionMode = String(permission || "").toLowerCase();
58837
59031
 
58838
- console.log("=== initialButtonSetup ===");
58839
- console.log("privateExternal:", privateExternal);
58840
- console.log("permission:", permissionMode);
59032
+ // Helper to toggle dropdown items
59033
+ const toggleDropdown = (option, divider, show) => {
59034
+ if (option) option.style.display = show ? "block" : "none";
59035
+ if (divider) divider.style.display = show ? "block" : "none";
59036
+ };
59037
+
59038
+ // Default: Hide dropdown specific items
59039
+ toggleDropdown(completeOption, completeDivider, false);
59040
+ toggleDropdown(saveOption, saveDivider, false);
58841
59041
 
58842
59042
  // READ ONLY
58843
59043
  if (permissionMode === "read") {
@@ -58854,23 +59054,35 @@ function initialButtonSetup(privateExternal, permission) {
58854
59054
  console.log("Mode: PUBLIC WRITE → Show submit (disabled)");
58855
59055
  saveBtn.style.display = "none";
58856
59056
  submitBtn.style.display = "";
59057
+ submitBtn.innerHTML = '<i class="icon save"></i> Submit';
58857
59058
  submitBtn.disabled = true;
58858
59059
  }
58859
59060
 
58860
59061
  // PRIVATE FORM - writemultiple
58861
59062
  else if (isPrivate && permissionMode === "writemultiple") {
58862
- console.log("Mode: PRIVATE WRITEMULTIPLE → Show submit (disabled)");
58863
- saveBtn.style.display = "none";
58864
- submitBtn.style.display = "";
58865
- submitBtn.disabled = true;
59063
+ console.log(
59064
+ "Mode: PRIVATE WRITEMULTIPLE → Show save (disabled), Complete in Dropdown"
59065
+ );
59066
+ saveBtn.style.display = "";
59067
+ submitBtn.style.display = "none";
59068
+ saveBtn.disabled = true;
59069
+
59070
+ // Show Complete in Dropdown
59071
+ toggleDropdown(completeOption, completeDivider, true);
58866
59072
  }
58867
59073
 
58868
59074
  // PRIVATE FORM - writesingle
58869
59075
  else if (isPrivate && permissionMode === "writesingle") {
58870
- console.log("Mode: PRIVATE WRITESINGLE → Show save (disabled)");
58871
- saveBtn.style.display = "";
58872
- submitBtn.style.display = "none";
58873
- saveBtn.disabled = true;
59076
+ console.log(
59077
+ "Mode: PRIVATE WRITESINGLE → Show submit (disabled), Save in Dropdown"
59078
+ );
59079
+ saveBtn.style.display = "none";
59080
+ submitBtn.style.display = "";
59081
+ submitBtn.innerHTML = '<i class="icon save"></i> Complete';
59082
+ submitBtn.disabled = true;
59083
+
59084
+ // Show Save in Dropdown
59085
+ toggleDropdown(saveOption, saveDivider, true);
58874
59086
  }
58875
59087
 
58876
59088
  // DEFAULT / UNKNOWN
@@ -58878,6 +59090,7 @@ function initialButtonSetup(privateExternal, permission) {
58878
59090
  console.log("Mode: DEFAULT / UNKNOWN → Show submit (disabled)");
58879
59091
  saveBtn.style.display = "none";
58880
59092
  submitBtn.style.display = "";
59093
+ submitBtn.innerHTML = '<i class="icon save"></i> Submit';
58881
59094
  submitBtn.disabled = true;
58882
59095
  }
58883
59096
  }
@@ -58901,16 +59114,12 @@ function onChangeButtonSetup(
58901
59114
  v !== undefined &&
58902
59115
  v !== null &&
58903
59116
  v !== "" &&
58904
- !(Array.isArray(v) && v.length === 0)
59117
+ v !== false &&
59118
+ !(Array.isArray(v) && v.length === 0) &&
59119
+ !(typeof v === "object" && !Array.isArray(v) && Object.keys(v).length === 0)
58905
59120
  );
58906
59121
  const isComplete = completionPercentage >= 100;
58907
59122
 
58908
- console.log("=== onChangeButtonSetup ===");
58909
- console.log("privateExternal:", privateExternal);
58910
- console.log("permission:", permissionMode);
58911
- console.log("hasAnyValue:", hasAnyValue);
58912
- console.log("completionPercentage:", completionPercentage);
58913
-
58914
59123
  // READ ONLY
58915
59124
  if (permissionMode === "read") {
58916
59125
  console.log("Mode: READ → Hide all buttons");
@@ -58922,26 +59131,24 @@ function onChangeButtonSetup(
58922
59131
  // PRIVATE FORM - writesingle
58923
59132
  if (isPrivate && permissionMode === "writesingle") {
58924
59133
  console.log("Mode: PRIVATE WRITESINGLE");
59134
+ // Main: Complete (Submit)
58925
59135
  saveBtn.style.display = "none";
58926
59136
  submitBtn.style.display = "";
58927
- submitBtn.disabled = !hasAnyValue;
59137
+
59138
+ // Logic: Disable Complete until 100%
59139
+ submitBtn.disabled = !isComplete;
58928
59140
  return;
58929
59141
  }
58930
59142
 
58931
59143
  // PRIVATE FORM - writemultiple
58932
59144
  if (isPrivate && permissionMode === "writemultiple") {
58933
59145
  console.log("Mode: PRIVATE WRITEMULTIPLE");
58934
- if (isComplete) {
58935
- console.log("→ Complete: Show submit");
58936
- saveBtn.style.display = "none";
58937
- submitBtn.style.display = "";
58938
- submitBtn.disabled = false;
58939
- } else {
58940
- console.log("→ Incomplete: Show save");
58941
- saveBtn.style.display = "";
58942
- submitBtn.style.display = "none";
58943
- saveBtn.disabled = !hasAnyValue;
58944
- }
59146
+ // Main: Save
59147
+ saveBtn.style.display = "";
59148
+ submitBtn.style.display = "none";
59149
+
59150
+ // Logic: Enable Save if hasAnyValue
59151
+ saveBtn.disabled = !hasAnyValue;
58945
59152
  return;
58946
59153
  }
58947
59154
 
@@ -59362,6 +59569,9 @@ function setupOnChange(privateExternal, permission) {
59362
59569
  const completion =
59363
59570
  mandatory === 0 ? 100 : Math.round((filledMandatory / mandatory) * 100);
59364
59571
 
59572
+ calculationPercentage = completion;
59573
+ completeFlag = completion >= 100;
59574
+
59365
59575
  console.log("📊 Completion %:", completion);
59366
59576
  onChangeButtonSetup(completion, formObj.data, privateExternal, permission);
59367
59577
 
@@ -59520,6 +59730,22 @@ function loadComments() {
59520
59730
  function FormOnSave() {
59521
59731
  if (!formObj) return;
59522
59732
 
59733
+ const formData = formObj.getValue().data;
59734
+ const hasAnyValue = Object.values(formData || {}).some(
59735
+ (v) =>
59736
+ v !== undefined &&
59737
+ v !== null &&
59738
+ v !== "" &&
59739
+ v !== false &&
59740
+ !(Array.isArray(v) && v.length === 0) &&
59741
+ !(typeof v === "object" && !Array.isArray(v) && Object.keys(v).length === 0)
59742
+ );
59743
+
59744
+ if (!hasAnyValue) {
59745
+ showDynamicModal("Attention", [{ label: "OK" }], "Please fill at least one field before saving.");
59746
+ return;
59747
+ }
59748
+
59523
59749
  showDynamicModal("Do you want to save the data?", [
59524
59750
  {
59525
59751
  label: "Yes",