wagtail-enap-designsystem 1.2.1.136__py3-none-any.whl → 1.2.1.138__py3-none-any.whl

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 (19) hide show
  1. enap_designsystem/blocks/__init__.py +2 -0
  2. enap_designsystem/blocks/form.py +160 -24
  3. enap_designsystem/blocks/html_blocks.py +39 -15
  4. enap_designsystem/blocks/semana_blocks.py +4 -0
  5. enap_designsystem/settings.py +2 -2
  6. enap_designsystem/templates/enap_designsystem/blocks/apresentacao_block.html +1 -2
  7. enap_designsystem/templates/enap_designsystem/blocks/cards_titles.html +35 -5
  8. enap_designsystem/templates/enap_designsystem/blocks/job_vacancy_filtered_block.html +7 -0
  9. enap_designsystem/templates/enap_designsystem/blocks/logos_simple_block.html +1 -1
  10. enap_designsystem/templates/enap_designsystem/blocks/numeros_block.html +58 -179
  11. enap_designsystem/templates/enap_designsystem/blocks/video_hero_banner.html +23 -9
  12. enap_designsystem/templates/enap_designsystem/form_templates/formulario_page.html +397 -1080
  13. enap_designsystem/templates/enap_designsystem/includes/form_field.html +935 -1
  14. enap_designsystem/templates/enap_designsystem/sistema_votacao_page.html +76 -18
  15. {wagtail_enap_designsystem-1.2.1.136.dist-info → wagtail_enap_designsystem-1.2.1.138.dist-info}/METADATA +1 -1
  16. {wagtail_enap_designsystem-1.2.1.136.dist-info → wagtail_enap_designsystem-1.2.1.138.dist-info}/RECORD +19 -19
  17. {wagtail_enap_designsystem-1.2.1.136.dist-info → wagtail_enap_designsystem-1.2.1.138.dist-info}/WHEEL +0 -0
  18. {wagtail_enap_designsystem-1.2.1.136.dist-info → wagtail_enap_designsystem-1.2.1.138.dist-info}/licenses/LICENSE +0 -0
  19. {wagtail_enap_designsystem-1.2.1.136.dist-info → wagtail_enap_designsystem-1.2.1.138.dist-info}/top_level.txt +0 -0
@@ -818,13 +818,947 @@
818
818
  </div>
819
819
 
820
820
  {% for field_block in option_block.value.fields_to_show_con %}
821
- {% include 'enap_designsystem/includes/form_field.html' with block=field_block %}
821
+ <!-- INÍCIO: Renderização de todos os tipos de campos -->
822
+
823
+ {% if field_block.block_type == 'section_header' %}
824
+ <!-- Section headers são processados no loop de seções, não aqui -->
825
+
826
+ {% elif field_block.block_type == 'divider' %}
827
+ <div data-block-type="divider" class="form-section divider-section">
828
+ {% if field_block.value.title %}
829
+ <h3 class="divider-title">{{ field_block.value.title }}</h3>
830
+ {% endif %}
831
+ </div>
832
+
833
+ {% elif field_block.block_type == 'nome_completo_field' %}
834
+ <div class="form-group">
835
+ <label for="{{ field_block.block_type }}_{{ field_block.id }}">
836
+ {{ field_block.value.label }}
837
+ {% if field_block.value.required %}<span class="required">*</span>{% endif %}
838
+ </label>
839
+
840
+ {% if field_block.value.help_text %}
841
+ <div class="help-text">{{ field_block.value.help_text }}</div>
842
+ {% endif %}
843
+
844
+ <input
845
+ type="text"
846
+ id="{{ field_block.block_type }}_{{ field_block.id }}"
847
+ name="{{ field_block.block_type }}_{{ field_block.id }}"
848
+ class="form-control nome-completo-field"
849
+ placeholder="{{ field_block.value.placeholder }}"
850
+ {% if field_block.value.required %}required{% endif %}
851
+ {% if field_block.value.min_length %}minlength="{{ field_block.value.min_length }}"{% endif %}
852
+ {% if field_block.value.max_length %}maxlength="{{ field_block.value.max_length }}"{% endif %}
853
+ value="{{ form_data|default_if_none:'' }}"
854
+ >
855
+
856
+ <div class="error-message"></div>
857
+ </div>
858
+
859
+ {% elif field_block.block_type == 'step_header' %}
860
+ <div class="step-header-field">
861
+ {% if field_block.value.header_type == 'logo' %}
862
+ {% if field_block.value.logo %}
863
+ <div class="step-logo">
864
+ {% image field_block.value.logo max-200x200 as step_logo %}
865
+ <img src="{{ step_logo.url }}"
866
+ alt="{{ field_block.value.logo_alt|default:'Logo da etapa' }}"
867
+ class="step-logo-image">
868
+ </div>
869
+ {% endif %}
870
+
871
+ {% if field_block.value.subtitle %}
872
+ <p class="step-subtitle">{{ field_block.value.subtitle }}</p>
873
+ {% endif %}
874
+ {% else %}
875
+ <h2 class="step-field-title">
876
+ {% if field_block.value.icon %}<span>{{ field_block.value.icon }}</span>{% endif %}
877
+ {{ field_block.value.title|default:"Cabeçalho da Seção" }}
878
+ </h2>
879
+ {% if field_block.value.subtitle %}
880
+ <p class="step-subtitle">{{ field_block.value.subtitle }}</p>
881
+ {% endif %}
882
+ {% endif %}
883
+ </div>
884
+
885
+ {% elif field_block.block_type == 'text_field' %}
886
+ <div class="form-group">
887
+ <label for="{{ field_block.block_type }}_{{ field_block.id }}">
888
+ {{ field_block.value.label }}
889
+ {% if field_block.value.required %}<span class="required">*</span>{% endif %}
890
+ </label>
891
+ {% if field_block.value.help_text %}
892
+ <div class="help-text">{{ field_block.value.help_text }}</div>
893
+ {% endif %}
894
+ <input
895
+ type="text"
896
+ id="{{ field_block.block_type }}_{{ field_block.id }}"
897
+ name="{{ field_block.block_type }}_{{ field_block.id }}"
898
+ class="form-control"
899
+ {% if field_block.value.placeholder %}placeholder="{{ field_block.value.placeholder }}"{% endif %}
900
+ {% if field_block.value.required %}required{% endif %}
901
+ value="{{ form_data|default_if_none:'' }}"
902
+ >
903
+ </div>
904
+
905
+ {% elif field_block.block_type == 'email_field' %}
906
+ <div class="form-group">
907
+ <label for="{{ field_block.block_type }}_{{ field_block.id }}">
908
+ {{ field_block.value.label }}
909
+ {% if field_block.value.required %}<span class="required">*</span>{% endif %}
910
+ </label>
911
+ <input
912
+ type="email"
913
+ id="{{ field_block.block_type }}_{{ field_block.id }}"
914
+ name="{{ field_block.block_type }}_{{ field_block.id }}"
915
+ class="form-control"
916
+ {% if field_block.value.placeholder %}placeholder="{{ field_block.value.placeholder }}"{% endif %}
917
+ {% if field_block.value.required %}required{% endif %}
918
+ value="{{ form_data|default_if_none:'' }}"
919
+ >
920
+ </div>
921
+
922
+ {% elif field_block.block_type == 'cpf_field' %}
923
+ <div class="form-group">
924
+ <label for="{{ field_block.block_type }}_{{ field_block.id }}">
925
+ {{ field_block.value.label }}
926
+ {% if field_block.value.required %}<span class="required">*</span>{% endif %}
927
+ </label>
928
+ {% if field_block.value.help_text %}
929
+ <div class="help-text">{{ field_block.value.help_text }}</div>
930
+ {% endif %}
931
+ <input
932
+ type="text"
933
+ id="{{ field_block.block_type }}_{{ field_block.id }}"
934
+ name="{{ field_block.block_type }}_{{ field_block.id }}"
935
+ class="form-control cpf-field"
936
+ maxlength="14"
937
+ placeholder="000.000.000-90"
938
+ {% if field_block.value.required %}required{% endif %}
939
+ value="{{ form_data|default_if_none:'' }}"
940
+ >
941
+ </div>
942
+
943
+ {% elif field_block.block_type == 'cnpj_field' %}
944
+ <div class="form-group">
945
+ <label for="{{ field_block.block_type }}_{{ field_block.id }}">
946
+ {{ field_block.value.label }}
947
+ {% if field_block.value.required %}<span class="required">*</span>{% endif %}
948
+ </label>
949
+ {% if field_block.value.help_text %}
950
+ <div class="help-text">{{ field_block.value.help_text }}</div>
951
+ {% endif %}
952
+ <input
953
+ type="text"
954
+ id="{{ field_block.block_type }}_{{ field_block.id }}"
955
+ name="{{ field_block.block_type }}_{{ field_block.id }}"
956
+ class="form-control cnpj-field"
957
+ placeholder="00.000.000/0000-00"
958
+ maxlength="18"
959
+ {% if field_block.value.required %}required{% endif %}
960
+ >
961
+ </div>
962
+
963
+ {% elif field_block.block_type == 'phone_field' %}
964
+ <div class="form-group">
965
+ <label for="{{ field_block.block_type }}_{{ field_block.id }}">
966
+ {{ field_block.value.label }}
967
+ {% if field_block.value.required %}<span class="required">*</span>{% endif %}
968
+ </label>
969
+ {% if field_block.value.help_text %}
970
+ <div class="help-text">{{ field_block.value.help_text }}</div>
971
+ {% endif %}
972
+ <input
973
+ type="tel"
974
+ id="{{ field_block.block_type }}_{{ field_block.id }}"
975
+ name="{{ field_block.block_type }}_{{ field_block.id }}"
976
+ class="form-control phone-field"
977
+ placeholder="(11) 99999-9999"
978
+ {% if field_block.value.required %}required{% endif %}
979
+ value="{{ form_data|default_if_none:'' }}"
980
+ >
981
+ {% if field_block.value.include_whatsapp %}
982
+ <div class="checkbox-item" style="margin-top: 0.5rem;">
983
+ <input
984
+ type="checkbox"
985
+ id="{{ field_block.block_type }}_{{ field_block.id }}_whatsapp"
986
+ name="{{ field_block.block_type }}_{{ field_block.id }}_whatsapp"
987
+ value="1"
988
+ >
989
+ <label for="{{ field_block.block_type }}_{{ field_block.id }}_whatsapp">
990
+ 📱 Este número é WhatsApp
991
+ </label>
992
+ </div>
993
+ {% endif %}
994
+ </div>
995
+
996
+ {% elif field_block.block_type == 'textarea_field' %}
997
+ <div class="form-group">
998
+ <label for="{{ field_block.block_type }}_{{ field_block.id }}">
999
+ {{ field_block.value.label }}
1000
+ {% if field_block.value.required %}<span class="required">*</span>{% endif %}
1001
+ </label>
1002
+ {% if field_block.value.help_text %}
1003
+ <div class="help-text">{{ field_block.value.help_text }}</div>
1004
+ {% endif %}
1005
+ <textarea
1006
+ id="{{ field_block.block_type }}_{{ field_block.id }}"
1007
+ name="{{ field_block.block_type }}_{{ field_block.id }}"
1008
+ class="form-control"
1009
+ rows="{{ field_block.value.rows|default:4 }}"
1010
+ {% if field_block.value.placeholder %}placeholder="{{ field_block.value.placeholder }}"{% endif %}
1011
+ {% if field_block.value.required %}required{% endif %}
1012
+ >{{ form_data|default_if_none:'' }}</textarea>
1013
+ </div>
1014
+
1015
+ {% elif field_block.block_type == 'number_field' %}
1016
+ <div class="form-group">
1017
+ <label for="{{ field_block.block_type }}_{{ field_block.id }}">
1018
+ {{ field_block.value.label }}
1019
+ {% if field_block.value.required %}<span class="required">*</span>{% endif %}
1020
+ </label>
1021
+ {% if field_block.value.help_text %}
1022
+ <div class="help-text">{{ field_block.value.help_text }}</div>
1023
+ {% endif %}
1024
+ <input
1025
+ type="number"
1026
+ id="{{ field_block.block_type }}_{{ field_block.id }}"
1027
+ name="{{ field_block.block_type }}_{{ field_block.id }}"
1028
+ class="form-control"
1029
+ {% if field_block.value.min_value %}min="{{ field_block.value.min_value }}"{% endif %}
1030
+ {% if field_block.value.max_value %}max="{{ field_block.value.max_value }}"{% endif %}
1031
+ {% if field_block.value.required %}required{% endif %}
1032
+ value="{{ form_data|default_if_none:'' }}"
1033
+ >
1034
+ </div>
1035
+
1036
+ {% elif field_block.block_type == 'date_field' %}
1037
+ <div class="form-group">
1038
+ <label for="{{ field_block.block_type }}_{{ field_block.id }}">
1039
+ {{ field_block.value.label }}
1040
+ {% if field_block.value.required %}<span class="required">*</span>{% endif %}
1041
+ </label>
1042
+ {% if field_block.value.help_text %}
1043
+ <div class="help-text">{{ field_block.value.help_text }}</div>
1044
+ {% endif %}
1045
+ <input
1046
+ type="date"
1047
+ id="{{ field_block.block_type }}_{{ field_block.id }}"
1048
+ name="{{ field_block.block_type }}_{{ field_block.id }}"
1049
+ class="form-control"
1050
+ {% if field_block.value.required %}required{% endif %}
1051
+ value="{{ form_data|default_if_none:'' }}"
1052
+ >
1053
+ </div>
1054
+
1055
+ {% elif field_block.block_type == 'dropdown_field' %}
1056
+ <div class="form-group">
1057
+ <label for="{{ field_block.block_type }}_{{ field_block.id }}">
1058
+ {{ field_block.value.label }}
1059
+ {% if field_block.value.required %}<span class="required">*</span>{% endif %}
1060
+ </label>
1061
+ {% if field_block.value.help_text %}
1062
+ <div class="help-text">{{ field_block.value.help_text }}</div>
1063
+ {% endif %}
1064
+ <select
1065
+ id="{{ field_block.block_type }}_{{ field_block.id }}"
1066
+ name="{{ field_block.block_type }}_{{ field_block.id }}"
1067
+ class="form-control"
1068
+ {% if field_block.value.required %}required{% endif %}
1069
+ >
1070
+ <option value="">Selecione uma opção...</option>
1071
+ {% for option in field_block.value.options %}
1072
+ <option value="{{ option }}" {% if form_data == option %}selected{% endif %}>
1073
+ {{ option }}
1074
+ </option>
1075
+ {% endfor %}
1076
+ </select>
1077
+ </div>
1078
+
1079
+ {% elif field_block.block_type == 'radio_field' %}
1080
+ <div class="form-group">
1081
+ <label>
1082
+ {{ field_block.value.label }}
1083
+ {% if field_block.value.required %}<span class="required">*</span>{% endif %}
1084
+ </label>
1085
+ {% if field_block.value.help_text %}
1086
+ <div class="help-text">{{ field_block.value.help_text }}</div>
1087
+ {% endif %}
1088
+ <div class="radio-group {% if field_block.value.layout == 'horizontal' %}horizontal{% endif %}">
1089
+ {% for option in field_block.value.options %}
1090
+ <div class="radio-item">
1091
+ <input
1092
+ type="radio"
1093
+ id="{{ field_block.block_type }}_{{ field_block.id }}_{{ forloop.counter }}"
1094
+ name="{{ field_block.block_type }}_{{ field_block.id }}"
1095
+ value="{{ option }}"
1096
+ {% if form_data == option %}checked{% endif %}
1097
+ {% if field_block.value.required %}required{% endif %}
1098
+ >
1099
+ <label for="{{ field_block.block_type }}_{{ field_block.id }}_{{ forloop.counter }}">
1100
+ {{ option }}
1101
+ </label>
1102
+ </div>
1103
+ {% endfor %}
1104
+ </div>
1105
+ </div>
1106
+
1107
+ {% elif field_block.block_type == 'checkbox_field' %}
1108
+ <div class="form-group">
1109
+ <label>{{ field_block.value.label }}</label>
1110
+ {% if field_block.value.help_text %}
1111
+ <div class="help-text">{{ field_block.value.help_text }}</div>
1112
+ {% endif %}
1113
+ <div class="checkbox-item">
1114
+ <input
1115
+ type="checkbox"
1116
+ id="{{ field_block.block_type }}_{{ field_block.id }}"
1117
+ name="{{ field_block.block_type }}_{{ field_block.id }}"
1118
+ value="1"
1119
+ {% if form_data %}checked{% endif %}
1120
+ {% if field_block.value.required %}required{% endif %}
1121
+ >
1122
+ <label for="{{ field_block.block_type }}_{{ field_block.id }}">
1123
+ {{ field_block.value.checkbox_text }}
1124
+ </label>
1125
+ </div>
1126
+ </div>
1127
+
1128
+ {% elif field_block.block_type == 'checkbox_multiple_field' %}
1129
+ <div class="form-group">
1130
+ <label>
1131
+ {{ field_block.value.label }}
1132
+ {% if field_block.value.required %}<span class="required">*</span>{% endif %}
1133
+ </label>
1134
+ {% if field_block.value.help_text %}
1135
+ <div class="help-text">{{ field_block.value.help_text }}</div>
1136
+ {% endif %}
1137
+ {% if field_block.value.min_selections > 1 %}
1138
+ <div class="help-text">Selecione pelo menos {{ field_block.value.min_selections }} opções</div>
1139
+ {% endif %}
1140
+ <div class="checkbox-group">
1141
+ {% for option in field_block.value.options %}
1142
+ <div class="checkbox-item">
1143
+ <input
1144
+ type="checkbox"
1145
+ id="{{ field_block.block_type }}_{{ field_block.id }}_{{ forloop.counter }}"
1146
+ name="{{ field_block.block_type }}_{{ field_block.id }}"
1147
+ value="{{ option }}"
1148
+ {% if option in form_data %}checked{% endif %}
1149
+ data-min-selections="{{ field_block.value.min_selections }}"
1150
+ >
1151
+ <label for="{{ field_block.block_type }}_{{ field_block.id }}_{{ forloop.counter }}">
1152
+ {{ option }}
1153
+ </label>
1154
+ </div>
1155
+ {% endfor %}
1156
+ </div>
1157
+ </div>
1158
+
1159
+ {% elif field_block.block_type == 'file_upload_field' %}
1160
+ <div class="form-group">
1161
+ <label for="{{ field_block.block_type }}_{{ field_block.id }}">
1162
+ {{ field_block.value.label }}
1163
+ {% if field_block.value.required %}<span class="required">*</span>{% endif %}
1164
+ </label>
1165
+ {% if field_block.value.help_text %}
1166
+ <div class="help-text">{{ field_block.value.help_text }}</div>
1167
+ {% endif %}
1168
+
1169
+ <div class="file-input"
1170
+ id="dropzone-{{ field_block.block_type }}_{{ field_block.id }}"
1171
+ onclick="document.getElementById('{{ field_block.block_type }}_{{ field_block.id }}').click()"
1172
+ ondrop="handleFileDrop(event, '{{ field_block.block_type }}_{{ field_block.id }}')"
1173
+ ondragover="handleDragOver(event)"
1174
+ ondragleave="handleDragLeave(event)">
1175
+ <div style="font-size: 2rem; margin-bottom: 0.5rem;">📎</div>
1176
+ <div><strong>Clique para selecionar</strong> ou arraste o arquivo aqui</div>
1177
+ <div class="file-info">
1178
+ <small>
1179
+ <strong>Tipos permitidos:</strong>
1180
+ {% for file_type in field_block.value.allowed_types %}
1181
+ {% if file_type == 'pdf' %}.PDF{% endif %}
1182
+ {% if file_type == 'doc' %}.DOC/.DOCX{% endif %}
1183
+ {% if file_type == 'image' %}.JPG/.PNG/.GIF{% endif %}
1184
+ {% if file_type == 'excel' %}.XLS/.XLSX{% endif %}
1185
+ {% if file_type == 'text' %}.TXT{% endif %}
1186
+ {% if file_type == 'csv' %}.CSV{% endif %}
1187
+ {% if not forloop.last %} • {% endif %}
1188
+ {% endfor %}
1189
+ <br><strong>Tamanho máximo:</strong> {{ field_block.value.max_size_mb }}MB
1190
+ {% if field_block.value.multiple_files|default:False %}
1191
+ <br><strong>Múltiplos arquivos:</strong> Até {{ field_block.value.max_files|default:3 }} arquivos
1192
+ {% endif %}
1193
+ </small>
1194
+ </div>
1195
+ </div>
1196
+
1197
+ <input
1198
+ type="file"
1199
+ id="{{ field_block.block_type }}_{{ field_block.id }}"
1200
+ name="{{ field_block.block_type }}_{{ field_block.id }}"
1201
+ style="display: none;"
1202
+ {% if field_block.value.required %}required{% endif %}
1203
+ {% if field_block.value.multiple_files|default:False %}multiple{% endif %}
1204
+ accept="{% for file_type in field_block.value.allowed_types %}{% if file_type == 'pdf' %}.pdf{% elif file_type == 'doc' %}.doc,.docx{% elif file_type == 'image' %}.jpg,.jpeg,.png,.gif{% elif file_type == 'excel' %}.xls,.xlsx{% elif file_type == 'text' %}.txt{% elif file_type == 'csv' %}.csv{% endif %}{% if not forloop.last %},{% endif %}{% endfor %}"
1205
+ data-max-size="{{ field_block.value.max_size_mb }}"
1206
+ {% if field_block.value.multiple_files|default:False %}data-max-files="{{ field_block.value.max_files|default:3 }}"{% endif %}
1207
+ onchange="updateFileName(this)"
1208
+ >
1209
+
1210
+ <div id="file-display-{{ field_block.block_type }}_{{ field_block.id }}"
1211
+ class="file-display"
1212
+ style="margin-top: 0.75rem; display: none;">
1213
+ </div>
1214
+
1215
+ <div id="file-error-{{ field_block.block_type }}_{{ field_block.id }}"
1216
+ class="file-error"
1217
+ style="display: none; color: #dc3545; font-size: 0.9rem; margin-top: 0.5rem;">
1218
+ </div>
1219
+ </div>
1220
+
1221
+ {% elif field_block.block_type == 'rating_field' %}
1222
+ <div class="form-group">
1223
+ <label>
1224
+ {{ field_block.value.label }}
1225
+ {% if field_block.value.required %}<span class="required">*</span>{% endif %}
1226
+ </label>
1227
+ {% if field_block.value.help_text %}
1228
+ <div class="help-text">{{ field_block.value.help_text }}</div>
1229
+ {% endif %}
1230
+ <div class="rating-group">
1231
+ <input type="hidden" name="{{ field_block.block_type }}_{{ field_block.id }}" value="{{ form_data|default_if_none:'' }}" {% if field_block.value.required %}required{% endif %}>
1232
+ {% for i in "12345678910"|make_list %}
1233
+ {% if forloop.counter <= field_block.value.max_rating %}
1234
+ <span class="star {% if form_data and forloop.counter <= form_data|add:0 %}active{% endif %}"
1235
+ data-value="{{ forloop.counter }}">⭐</span>
1236
+ {% endif %}
1237
+ {% endfor %}
1238
+ <span class="rating-text" id="rating-text-{{ field_block.block_type }}_{{ field_block.id }}">
1239
+ {% if form_data %}{{ form_data }} de {{ field_block.value.max_rating }} estrelas{% else %}Clique para avaliar{% endif %}
1240
+ </span>
1241
+ </div>
1242
+ </div>
1243
+
1244
+ {% elif field_block.block_type == 'info_text' %}
1245
+ <div class="info-block info-{{ field_block.value.style }}{% if field_block.value.dismissible %} dismissible{% endif %}">
1246
+ {% if field_block.value.dismissible %}
1247
+ <button type="button" class="info-close" onclick="this.parentElement.remove()">×</button>
1248
+ {% endif %}
1249
+
1250
+ {% if field_block.value.show_icon %}
1251
+ <div class="info-icon">
1252
+ {% if field_block.value.style == 'info' %}ℹ️
1253
+ {% elif field_block.value.style == 'warning' %}⚠️
1254
+ {% elif field_block.value.style == 'success' %}✅
1255
+ {% elif field_block.value.style == 'danger' %}❌
1256
+ {% elif field_block.value.style == 'neutral' %}📄
1257
+ {% elif field_block.value.style == 'primary' %}🌟
1258
+ {% endif %}
1259
+ </div>
1260
+ {% endif %}
1261
+
1262
+ <div class="info-content">
1263
+ {% if field_block.value.title %}
1264
+ <h3 class="info-title">{{ field_block.value.title }}</h3>
1265
+ {% endif %}
1266
+ <div class="info-text">
1267
+ {{ field_block.value.content|richtext }}
1268
+ </div>
1269
+ </div>
1270
+ </div>
1271
+
1272
+ {% elif field_block.block_type == 'country_field' %}
1273
+ <div class="form-group">
1274
+ <label for="{{ field_block.block_type }}_{{ field_block.id }}">
1275
+ {{ field_block.value.label }}
1276
+ {% if field_block.value.required %}<span class="required">*</span>{% endif %}
1277
+ </label>
1278
+ {% if field_block.value.help_text %}
1279
+ <div class="help-text">{{ field_block.value.help_text }}</div>
1280
+ {% endif %}
1281
+ <select
1282
+ id="{{ field_block.block_type }}_{{ field_block.id }}"
1283
+ name="{{ field_block.block_type }}_{{ field_block.id }}"
1284
+ class="form-control country-field"
1285
+ {% if field_block.value.required %}required{% endif %}
1286
+ >
1287
+ <option value="">Selecione um país</option>
1288
+ {% for country in field_block.value.available_countries %}
1289
+ <option value="{{ country.code }}"
1290
+ {% if form_data == country.code %}selected{% endif %}>
1291
+ {{ country.name }}
1292
+ </option>
1293
+ {% endfor %}
1294
+ </select>
1295
+ </div>
1296
+
1297
+ {% elif field_block.block_type == 'city_field' %}
1298
+ <div class="form-group conditional-field"
1299
+ data-depends-on="{{ field_block.value.country_field_id }}"
1300
+ style="display: none;">
1301
+ <label for="{{ field_block.block_type }}_{{ field_block.id }}">
1302
+ {{ field_block.value.label }}
1303
+ {% if field_block.value.required %}<span class="required">*</span>{% endif %}
1304
+ </label>
1305
+ {% if field_block.value.help_text %}
1306
+ <div class="help-text">{{ field_block.value.help_text }}</div>
1307
+ {% endif %}
1308
+ <select
1309
+ id="{{ field_block.block_type }}_{{ field_block.id }}"
1310
+ name="{{ field_block.block_type }}_{{ field_block.id }}"
1311
+ class="form-control city-field"
1312
+ {% if field_block.value.required %}required{% endif %}
1313
+ >
1314
+ <option value="">Selecione uma cidade</option>
1315
+ <!-- Opções serão populadas via JavaScript -->
1316
+ </select>
1317
+ </div>
1318
+
1319
+ {% elif field_block.block_type == 'conditional_dropdown_field' %}
1320
+ <div class="form-group conditional-field"
1321
+ data-depends-on="{{ field_block.value.depends_on_field }}"
1322
+ data-depends-value="{{ field_block.value.depends_on_value }}"
1323
+ style="display: none;">
1324
+ <label for="{{ field_block.block_type }}_{{ field_block.id }}">
1325
+ {{ field_block.value.label }}
1326
+ {% if field_block.value.required %}<span class="required">*</span>{% endif %}
1327
+ </label>
1328
+ {% if field_block.value.help_text %}
1329
+ <div class="help-text">{{ field_block.value.help_text }}</div>
1330
+ {% endif %}
1331
+ <select
1332
+ id="{{ field_block.block_type }}_{{ field_block.id }}"
1333
+ name="{{ field_block.block_type }}_{{ field_block.id }}"
1334
+ class="form-control conditional-dropdown"
1335
+ {% if field_block.value.required %}required{% endif %}
1336
+ >
1337
+ <option value="">Selecione uma opção</option>
1338
+ <!-- Opções serão populadas via JavaScript -->
1339
+ </select>
1340
+ </div>
1341
+
1342
+ {% elif field_block.block_type == 'conditional_field' %}
1343
+ <div class="form-group">
1344
+ <label for="{{ field_block.block_type }}_{{ field_block.id }}">
1345
+ {{ field_block.value.label }}
1346
+ {% if field_block.value.required %}<span class="required">*</span>{% endif %}
1347
+ </label>
1348
+ {% if field_block.value.help_text %}
1349
+ <div class="help-text">{{ field_block.value.help_text }}</div>
1350
+ {% endif %}
1351
+
1352
+ {% if field_block.value.field_type == 'dropdown' %}
1353
+ <select
1354
+ id="{{ field_block.block_type }}_{{ field_block.id }}"
1355
+ name="{{ field_block.block_type }}_{{ field_block.id }}"
1356
+ class="form-control conditional-trigger"
1357
+ {% if field_block.value.required %}required{% endif %}
1358
+ data-field-id="{{ field_block.block_type }}_{{ field_block.id }}"
1359
+ >
1360
+ <option value="">Selecione uma opção...</option>
1361
+ {% for option_block in field_block.value.conditional_options %}
1362
+ <option value="{{ option_block.value.value }}"
1363
+ {% if form_data == option_block.value.value %}selected{% endif %}>
1364
+ {{ option_block.value.value }}
1365
+ </option>
1366
+ {% endfor %}
1367
+ </select>
1368
+ {% else %}
1369
+ <div class="radio-group">
1370
+ {% for option_block in field_block.value.conditional_options %}
1371
+ <div class="radio-item">
1372
+ <input
1373
+ type="radio"
1374
+ id="{{ field_block.block_type }}_{{ field_block.id }}_{{ forloop.counter }}"
1375
+ name="{{ field_block.block_type }}_{{ field_block.id }}"
1376
+ value="{{ option_block.value.value }}"
1377
+ class="conditional-trigger"
1378
+ data-field-id="{{ field_block.block_type }}_{{ field_block.id }}"
1379
+ {% if form_data == option_block.value.value %}checked{% endif %}
1380
+ {% if field_block.value.required %}required{% endif %}
1381
+ >
1382
+ <label for="{{ field_block.block_type }}_{{ field_block.id }}_{{ forloop.counter }}">
1383
+ {{ option_block.value.value }}
1384
+ </label>
1385
+ </div>
1386
+ {% endfor %}
1387
+ </div>
1388
+ {% endif %}
1389
+
1390
+ <!-- Campos condicionais aninhados -->
1391
+ {% for option_block in field_block.value.conditional_options %}
1392
+ {% if option_block.value.action == 'show_fields' %}
1393
+ <div class="conditional-fields"
1394
+ data-parent-field="{{ field_block.block_type }}_{{ field_block.id }}"
1395
+ data-trigger-value="{{ option_block.value.value }}"
1396
+ style="display: none; margin-top: 1rem; padding: 1rem; border: 1px solid #e1e5e9; border-radius: 8px; background: #f8f9fa;">
1397
+
1398
+ {% for nested_field_block in option_block.value.fields_to_show %}
1399
+ {% include 'enap_designsystem/includes/form_field.html' with block=nested_field_block %}
1400
+ {% endfor %}
1401
+ </div>
1402
+ {% endif %}
1403
+ {% endfor %}
1404
+ </div>
1405
+
1406
+ {% elif field_block.block_type == 'checkbox_multi_redirect_field' %}
1407
+ <div class="form-group checkbox-multi-redirect-group"
1408
+ data-field-type="checkbox_multi_redirect_field"
1409
+ data-field-id="{{ field_block.block_type }}_{{ field_block.id }}"
1410
+ data-field-config='{
1411
+ "fieldId": "{{ field_block.block_type }}_{{ field_block.id }}",
1412
+ "fieldType": "{{ field_block.value.field_type }}",
1413
+ "options": [
1414
+ {% for option_block in field_block.value.redirect_options %}
1415
+ {
1416
+ "value": "{{ option_block.value.value|escapejs }}",
1417
+ "action": "{{ option_block.value.action }}",
1418
+ "targetSection": "{{ option_block.value.target_section_title|default:''|escapejs }}",
1419
+ "message": "{{ option_block.value.redirect_message|striptags|default:''|escapejs }}",
1420
+ "delay": {{ option_block.value.delay_seconds|default:1 }}
1421
+ }{% if not forloop.last %},{% endif %}
1422
+ {% endfor %}
1423
+ ]
1424
+ }'>
1425
+
1426
+ <label class="form-label">
1427
+ {{ field_block.value.label }}
1428
+ {% if field_block.value.required %}<span class="required">*</span>{% endif %}
1429
+ </label>
1430
+
1431
+ {% if field_block.value.help_text %}
1432
+ <div class="help-text">{{ field_block.value.help_text }}</div>
1433
+ {% endif %}
1434
+
1435
+ {% if field_block.value.field_type == 'checkbox' %}
1436
+ {% for option_block in field_block.value.redirect_options|slice:":1" %}
1437
+ <div class="checkbox-item multi-redirect-item" data-option-value="{{ option_block.value.value }}">
1438
+ <input
1439
+ type="checkbox"
1440
+ id="{{ field_block.block_type }}_{{ field_block.id }}"
1441
+ name="{{ field_block.block_type }}_{{ field_block.id }}"
1442
+ value="{{ option_block.value.value }}"
1443
+ {% if field_block.value.required %}required{% endif %}
1444
+ class="multi-redirect-input"
1445
+ data-option-index="0"
1446
+ >
1447
+ <label for="{{ field_block.block_type }}_{{ field_block.id }}" class="checkbox-label">
1448
+ {{ option_block.value.value }}
1449
+ </label>
1450
+ </div>
1451
+ {% endfor %}
1452
+
1453
+ {% elif field_block.value.field_type == 'radio' %}
1454
+ <div class="radio-group multi-redirect-radio-group">
1455
+ {% for option_block in field_block.value.redirect_options %}
1456
+ <div class="radio-item multi-redirect-item" data-option-value="{{ option_block.value.value }}">
1457
+ <input
1458
+ type="radio"
1459
+ id="{{ field_block.block_type }}_{{ field_block.id }}_{{ forloop.counter }}"
1460
+ name="{{ field_block.block_type }}_{{ field_block.id }}"
1461
+ value="{{ option_block.value.value }}"
1462
+ {% if field_block.value.required %}required{% endif %}
1463
+ class="multi-redirect-input"
1464
+ data-option-index="{{ forloop.counter0 }}"
1465
+ >
1466
+ <label for="{{ field_block.block_type }}_{{ field_block.id }}_{{ forloop.counter }}" class="radio-label">
1467
+ {{ option_block.value.value }}
1468
+ </label>
1469
+ </div>
1470
+ {% endfor %}
1471
+ </div>
1472
+
1473
+ {% else %}
1474
+ <select
1475
+ id="{{ field_block.block_type }}_{{ field_block.id }}"
1476
+ name="{{ field_block.block_type }}_{{ field_block.id }}"
1477
+ class="form-control multi-redirect-input"
1478
+ {% if field_block.value.required %}required{% endif %}
1479
+ >
1480
+ <option value="">Selecione uma opção...</option>
1481
+ {% for option_block in field_block.value.redirect_options %}
1482
+ <option value="{{ option_block.value.value }}" data-option-index="{{ forloop.counter0 }}">
1483
+ {{ option_block.value.value }}
1484
+ </option>
1485
+ {% endfor %}
1486
+ </select>
1487
+ {% endif %}
1488
+
1489
+ {% for option_block in field_block.value.redirect_options %}
1490
+ {% if option_block.value.redirect_message %}
1491
+ <div class="redirect-message multi-redirect-message"
1492
+ id="redirect_message_{{ field_block.id }}_{{ forloop.counter0 }}"
1493
+ style="display: none; margin-top: 1rem;">
1494
+ <div class="info-block info-info">
1495
+ <div class="redirect-message-content">
1496
+ <strong>
1497
+ {% if option_block.value.action == 'next_step' %}⏩ Avançando...
1498
+ {% elif option_block.value.action == 'specific_section' %}🎯 Redirecionando...
1499
+ {% elif option_block.value.action == 'skip_to_end' %}⏭️ Finalizando...
1500
+ {% else %}ℹ️ Informação:
1501
+ {% endif %}
1502
+ </strong>
1503
+ {{ option_block.value.redirect_message|richtext }}
1504
+ </div>
1505
+ </div>
1506
+ </div>
1507
+ {% endif %}
1508
+ {% endfor %}
1509
+
1510
+ {% for option_block in field_block.value.redirect_options %}
1511
+ {% if option_block.value.action == 'show_fields' and option_block.value.fields_to_show %}
1512
+ <div class="conditional-fields multi-redirect-fields"
1513
+ data-option-value="{{ option_block.value.value }}"
1514
+ data-parent-field="{{ field_block.block_type }}_{{ field_block.id }}"
1515
+ style="display: none; margin-top: 1.5rem; padding: 1.5rem; border: 2px solid var(--primary-color, #2A5E2C); border-radius: 12px; background: linear-gradient(135deg, rgba(42, 94, 44, 0.02) 0%, #ffffff 100%);">
1516
+
1517
+ {% for nested_field_block in option_block.value.fields_to_show %}
1518
+ {% include 'enap_designsystem/includes/form_field.html' with block=nested_field_block %}
1519
+ {% endfor %}
1520
+ </div>
1521
+ {% endif %}
1522
+ {% endfor %}
1523
+
1524
+ <div class="error-message" style="display: none;"></div>
1525
+ </div>
1526
+
1527
+ {% elif field_block.block_type == 'section_divider' %}
1528
+ <div class="section-divider"
1529
+ data-section-name="{{ field_block.value.section_name }}"
1530
+ data-block-id="{{ field_block.id }}"
1531
+ {% if field_block.value.is_hidden_by_default %}style="display: none;"{% endif %}>
1532
+
1533
+ <div class="divider-header">
1534
+ <h2 class="section-title">{{ field_block.value.title }}</h2>
1535
+ {% if field_block.value.subtitle %}
1536
+ <p class="section-subtitle">{{ field_block.value.subtitle }}</p>
1537
+ {% endif %}
1538
+ </div>
1539
+ <hr class="section-line">
1540
+ </div>
1541
+
1542
+ {% elif field_block.block_type == 'smart_navigation_field' %}
1543
+ <div class="form-group smart-navigation-group"
1544
+ data-field-type="smart_navigation_field"
1545
+ data-field-id="smart_navigation_field_{{ field_block.id }}">
1546
+
1547
+ <label>
1548
+ {{ field_block.value.label }}
1549
+ {% if field_block.value.required %}<span class="required">*</span>{% endif %}
1550
+ </label>
1551
+
1552
+ {% if field_block.value.help_text %}
1553
+ <div class="help-text">{{ field_block.value.help_text }}</div>
1554
+ {% endif %}
1555
+
1556
+ {% if field_block.value.field_type == 'radio' %}
1557
+ <div class="radio-group">
1558
+ {% for option in field_block.value.navigation_options %}
1559
+ <div class="radio-item">
1560
+ <input
1561
+ type="radio"
1562
+ name="smart_navigation_field_{{ field_block.id }}"
1563
+ id="smart_nav_{{ field_block.id }}_{{ forloop.counter }}"
1564
+ value="{{ option.value.value }}"
1565
+ class="smart-navigation-trigger"
1566
+ {% if field_block.value.required %}required{% endif %}>
1567
+ <label for="smart_nav_{{ field_block.id }}_{{ forloop.counter }}">
1568
+ {{ option.value.value }}
1569
+ </label>
1570
+ </div>
1571
+ {% endfor %}
1572
+ </div>
1573
+
1574
+ {% elif field_block.value.field_type == 'dropdown' %}
1575
+ <select
1576
+ class="form-control smart-navigation-trigger"
1577
+ name="smart_navigation_field_{{ field_block.id }}"
1578
+ id="smart_navigation_field_{{ field_block.id }}"
1579
+ {% if field_block.value.required %}required{% endif %}>
1580
+ <option value="">Selecione uma opção...</option>
1581
+ {% for option in field_block.value.navigation_options %}
1582
+ <option value="{{ option.value.value }}">
1583
+ {{ option.value.value }}
1584
+ </option>
1585
+ {% endfor %}
1586
+ </select>
1587
+
1588
+ {% elif field_block.value.field_type == 'checkbox' %}
1589
+ {% for option in field_block.value.navigation_options %}
1590
+ <div class="checkbox-item">
1591
+ <input
1592
+ type="checkbox"
1593
+ name="smart_navigation_field_{{ field_block.id }}"
1594
+ id="smart_nav_{{ field_block.id }}_{{ forloop.counter }}"
1595
+ value="{{ option.value.value }}"
1596
+ class="smart-navigation-trigger"
1597
+ {% if field_block.value.required %}required{% endif %}>
1598
+ <label for="smart_nav_{{ field_block.id }}_{{ forloop.counter }}">
1599
+ {{ option.value.value }}
1600
+ </label>
1601
+ </div>
1602
+ {% endfor %}
1603
+ {% endif %}
1604
+ </div>
1605
+
1606
+ {% elif field_block.block_type == 'conditional_field_condicional' %}
1607
+ <!-- CAMPO CONDICIONAL ANINHADO - Recursão -->
1608
+ {% include 'enap_designsystem/includes/form_field.html' with block=field_block %}
1609
+
1610
+ {% endif %}
1611
+
1612
+ <!-- FIM: Renderização de todos os tipos de campos -->
822
1613
  {% endfor %}
823
1614
  </div>
824
1615
  {% endif %}
825
1616
  {% endfor %}
826
1617
  </div>
827
1618
 
1619
+ <!-- JavaScript para campos condicionais -->
1620
+ <script>
1621
+ document.addEventListener('DOMContentLoaded', function() {
1622
+ // Função para lidar com campos condicionais condicional
1623
+ function handleConditionalFieldsCondicional() {
1624
+ const conditionalBlocks = document.querySelectorAll('.conditional-condicional-fields');
1625
+
1626
+ conditionalBlocks.forEach(block => {
1627
+ const parentFieldName = block.dataset.parentField;
1628
+ const triggerValue = block.dataset.triggerValue;
1629
+ const parentInputs = document.querySelectorAll(`[name="${parentFieldName}"]`);
1630
+
1631
+ if (parentInputs.length === 0) return;
1632
+
1633
+ function checkAndToggle() {
1634
+ let shouldShow = false;
1635
+
1636
+ parentInputs.forEach(input => {
1637
+ if (input.type === 'radio') {
1638
+ if (input.checked && input.value === triggerValue) {
1639
+ shouldShow = true;
1640
+ }
1641
+ } else if (input.type === 'select-one') {
1642
+ if (input.value === triggerValue) {
1643
+ shouldShow = true;
1644
+ }
1645
+ }
1646
+ });
1647
+
1648
+ if (shouldShow) {
1649
+ block.style.display = 'block';
1650
+ block.classList.add('show');
1651
+
1652
+ // Ativar campos específicos dentro do bloco condicional
1653
+ initializeNestedFields(block);
1654
+ } else {
1655
+ block.style.display = 'none';
1656
+ block.classList.remove('show');
1657
+
1658
+ // Desativar campos específicos
1659
+ deactivateNestedFields(block);
1660
+ }
1661
+ }
1662
+
1663
+ // Adicionar listeners
1664
+ parentInputs.forEach(input => {
1665
+ if (input.type === 'radio') {
1666
+ input.addEventListener('change', checkAndToggle);
1667
+ } else if (input.type === 'select-one') {
1668
+ input.addEventListener('change', checkAndToggle);
1669
+ }
1670
+ });
1671
+
1672
+ // Verificar estado inicial
1673
+ checkAndToggle();
1674
+ });
1675
+ }
1676
+
1677
+ // Função para inicializar campos aninhados específicos
1678
+ function initializeNestedFields(container) {
1679
+ // CPF fields
1680
+ const cpfFields = container.querySelectorAll('.cpf-field');
1681
+ cpfFields.forEach(field => {
1682
+ if (!field.hasAttribute('data-cpf-initialized')) {
1683
+ // Implementar máscara de CPF aqui
1684
+ field.setAttribute('data-cpf-initialized', 'true');
1685
+ }
1686
+ });
1687
+
1688
+ // CNPJ fields
1689
+ const cnpjFields = container.querySelectorAll('.cnpj-field');
1690
+ cnpjFields.forEach(field => {
1691
+ if (!field.hasAttribute('data-cnpj-initialized')) {
1692
+ // Implementar máscara de CNPJ aqui
1693
+ field.setAttribute('data-cnpj-initialized', 'true');
1694
+ }
1695
+ });
1696
+
1697
+ // Phone fields
1698
+ const phoneFields = container.querySelectorAll('.phone-field');
1699
+ phoneFields.forEach(field => {
1700
+ if (!field.hasAttribute('data-phone-initialized')) {
1701
+ // Implementar máscara de telefone aqui
1702
+ field.setAttribute('data-phone-initialized', 'true');
1703
+ }
1704
+ });
1705
+
1706
+ // File upload fields
1707
+ const fileFields = container.querySelectorAll('input[type="file"]');
1708
+ fileFields.forEach(field => {
1709
+ if (!field.hasAttribute('data-file-initialized')) {
1710
+ // Implementar funcionalidade de upload aqui
1711
+ field.setAttribute('data-file-initialized', 'true');
1712
+ }
1713
+ });
1714
+
1715
+ // Rating fields
1716
+ const ratingGroups = container.querySelectorAll('.rating-group');
1717
+ ratingGroups.forEach(group => {
1718
+ if (!group.hasAttribute('data-rating-initialized')) {
1719
+ // Implementar funcionalidade de rating aqui
1720
+ group.setAttribute('data-rating-initialized', 'true');
1721
+ }
1722
+ });
1723
+
1724
+ // Outros campos condicionais aninhados
1725
+ const nestedConditionalFields = container.querySelectorAll('.conditional-trigger, .conditional-condicional-trigger');
1726
+ nestedConditionalFields.forEach(field => {
1727
+ if (!field.hasAttribute('data-nested-conditional-initialized')) {
1728
+ // Re-executar a função de campos condicionais para campos aninhados
1729
+ setTimeout(() => {
1730
+ handleConditionalFieldsCondicional();
1731
+ }, 100);
1732
+ field.setAttribute('data-nested-conditional-initialized', 'true');
1733
+ }
1734
+ });
1735
+ }
1736
+
1737
+ // Função para desativar campos aninhados
1738
+ function deactivateNestedFields(container) {
1739
+ // Limpar valores de campos ocultos
1740
+ const inputs = container.querySelectorAll('input, select, textarea');
1741
+ inputs.forEach(input => {
1742
+ if (input.type !== 'hidden') {
1743
+ if (input.type === 'checkbox' || input.type === 'radio') {
1744
+ input.checked = false;
1745
+ } else {
1746
+ input.value = '';
1747
+ }
1748
+ }
1749
+ });
1750
+
1751
+ // Ocultar mensagens de erro
1752
+ const errorMessages = container.querySelectorAll('.error-message, .file-error');
1753
+ errorMessages.forEach(msg => {
1754
+ msg.style.display = 'none';
1755
+ });
1756
+ }
1757
+
1758
+ // Inicializar
1759
+ handleConditionalFieldsCondicional();
1760
+ });
1761
+ </script>
828
1762
 
829
1763
  <style>
830
1764
  /* Estilos específicos para conditional_field_condicional */