1<#assign specificationName = 'ics' />
2<#assign paramNameSpecificationName = cpSpecificationOptionsSearchFacetDisplayContext.getParameterName() />
3<#assign isDebug = true />
4<#assign showAllSpecificationsName = false />
5
6
7<#function getCXConfig clientExtensionName>
8 <#if !clientExtensionName?has_content><#return {} /></#if>
9 <#local encoded = portalUtil.encodeURL(clientExtensionName) />
10 <#local items = restClient.get("/c/customconfigs/?fields=clientExtensionConfig&filter=clientExtensionName eq '" + encoded + "'").items![] />
11 <#return items?has_content?then(items[0].clientExtensionConfig?eval, {}) />
12</#function>
13
14<#if paramNameSpecificationName == specificationName || showAllSpecificationsName>
15<#assign cxConfig = getCXConfig("pago-curso-form") />
16<p>apiUrl: ${cxConfig.apiUrl!""}</p>
17<p>webApiUrl: ${cxConfig.webApiUrl!""}</p>
18
19
20 <#-- Variables -->
21 <#assign facetId = "facet-" + paramNameSpecificationName + "-" + renderResponse.getNamespace() />
22 <#assign facetClass = "facet-" + paramNameSpecificationName + "-combo-search-wrapper" />
23
24 <#-- ========================= -->
25 <#-- TOM SELECT framework -->
26 <#-- ========================= -->
27
28
29 <#-- ========================= -->
30 <#-- CSS -->
31 <#-- ========================= -->
32 <style>
33 /* ===========================
34 Variables de fuente compartidas
35 =========================== */
36 #${facetId} {
37 --facet-font-family: Inter;
38 --facet-font-size: 14px;
39 --facet-font-weight: 400;
40 --facet-line-height: 18px;
41 --facet-letter-spacing: 0.5px;
42 --facet-color: #66757f;
43 }
44
45 /* ===========================
46 Select original — oculto desde el inicio
47 =========================== */
48 #${facetId}-select {
49 appearance: none;
50 -webkit-appearance: none;
51 visibility: hidden;
52 position: absolute;
53 }
54
55 /* ===========================
56 TomSelect — wrapper oculto hasta inicializar
57 =========================== */
58 #${facetId} .ts-wrapper {
59 width: 100%;
60 margin-bottom: 16px;
61 opacity: 0;
62 transition: opacity 0.1s ease;
63 }
64
65 #${facetId} .ts-wrapper .ts-control {
66 padding: 15.5px 16px;
67 font-family: var(--facet-font-family);
68 font-size: var(--facet-font-size);
69 font-weight: var(--facet-font-weight);
70 line-height: var(--facet-line-height);
71 letter-spacing: var(--facet-letter-spacing);
72 color: var(--facet-color);
73 text-align: left;
74 height: 55px;
75 width: 100%;
76 border-radius: 4px;
77 border: none;
78 background-color: #F5F5F5;
79 background-image: url(/documents/d/global/ico-chevron-down-2);
80 background-repeat: no-repeat;
81 background-position: right 1rem center;
82 background-size: 18px 10px;
83 box-shadow: none;
84 cursor: pointer;
85 box-sizing: border-box;
86 }
87
88 #${facetId} .ts-wrapper .ts-control:focus,
89 #${facetId} .ts-wrapper .ts-control:focus-visible {
90 background-image: url(/documents/d/global/ico-chevron-down-2);
91 background-position: right 1rem center;
92 background-size: 18px 10px;
93 outline: none;
94 box-shadow: none;
95 }
96
97 #${facetId} .ts-wrapper .ts-control .item {
98 padding-right: 0.75rem;
99 overflow: hidden;
100 text-overflow: ellipsis;
101 max-width: calc(100% - 0.75rem);
102 }
103
104 /* Ocultar flecha nativa de TomSelect */
105 #${facetId} .ts-wrapper.single .ts-control::after {
106 display: none;
107 }
108
109 /* Input de búsqueda del dropdown */
110 #${facetId} .ts-dropdown .dropdown-input-wrap .dropdown-input {
111 font-family: var(--facet-font-family);
112 font-size: var(--facet-font-size);
113 font-weight: var(--facet-font-weight);
114 line-height: var(--facet-line-height);
115 letter-spacing: var(--facet-letter-spacing);
116 color: var(--facet-color);
117 padding: 8px 16px;
118 border: none;
119 border-bottom: 1px solid #d9d9d9;
120 background-color: #fff;
121 width: 100%;
122 box-sizing: border-box;
123 }
124
125 #${facetId} .ts-dropdown .dropdown-input-wrap .dropdown-input:focus {
126 outline: none;
127 box-shadow: none;
128 }
129
130 /* Opciones del dropdown */
131 #${facetId} .ts-dropdown .ts-dropdown-content .option {
132 font-family: var(--facet-font-family);
133 font-size: var(--facet-font-size);
134 font-weight: var(--facet-font-weight);
135 line-height: var(--facet-line-height);
136 letter-spacing: var(--facet-letter-spacing);
137 color: var(--facet-color);
138 padding: 8px 16px;
139 }
140
141 #${facetId} .ts-dropdown .ts-dropdown-content .option:hover,
142 #${facetId} .ts-dropdown .ts-dropdown-content .option.active {
143 background-color: #6a9bd3;
144 color: #fff;
145 }
146 </style>
147
148 <div class="checks-container ${facetClass}" id="${facetId}">
149 <div class="d-flex flex-column w-100">
150 <label class="panel-title mb-2" for="${facetId}-select">
151 ${languageUtil.get(locale, "norma." + paramNameSpecificationName)}
152 <#if isDebug>
153 <p style="font-size:11px;color:#999;font-weight:normal;">
154 (total options: ${entries?size})
155 </p>
156 <p style="font-size:11px;color:#999;font-weight:normal;">
157 (facetId: ${facetId})
158 </p>
159 </#if>
160 </label>
161
162 <#-- ========================= -->
163 <#-- SELECT UI -->
164 <#-- ========================= -->
165 <select id="${facetId}-select" data-parameter-name="${paramNameSpecificationName}">
166 <option value="">${languageUtil.get(locale, "search.cualquiera")}</option>
167 <#list entries?sort_by("displayName") as entry>
168 <option value="${htmlUtil.escape(entry.getDisplayName())}"
169 <#if entry.isSelected()>selected</#if>>
170 ${htmlUtil.escape(entry.getDisplayName())} (${entry.getFrequency()})
171 </option>
172 </#list>
173 </select>
174 </div>
175 </div>
176
177 <#-- ========================= -->
178 <#-- SCRIPT -->
179 <#-- ========================= -->
180 <script>
181 (function () {
182 var FACET_ID = '${facetId}';
183 var PARAM_NAME = '${paramNameSpecificationName}';
184
185 function applyUrlFilter(value) {
186 var url = new URL(window.location.href);
187 if (value) {
188 url.searchParams.set(PARAM_NAME, value);
189 } else {
190 url.searchParams.delete(PARAM_NAME);
191 }
192 window.location.href = url.toString();
193 }
194
195 function initFacet() {
196 var select = document.getElementById(FACET_ID + '-select');
197 if (!select) return;
198
199 if (select.tomselect) select.tomselect.destroy();
200 if (select.dataset.bound === 'true') return;
201 select.dataset.bound = 'true';
202
203 new TomSelect(select, {
204 allowEmptyOption: true,
205 maxItems: 1,
206 create: false,
207 render: {
208 no_results: function(data, escape) {
209 return '<div class="no-results">${languageUtil.get(locale, "occurrence-not-found")}</div>';
210 }
211 },
212 plugins: {
213 dropdown_input: {}
214 },
215 onDelete: function(value) {
216 this.isDelete = true;
217 },
218 onChange: function(value) {
219 if (value) {
220 this.lastValidValue = value;
221 applyUrlFilter(value);
222 return;
223 }
224 this.lastValidValue = '';
225 applyUrlFilter('');
226 },
227 onInitialize: function() {
228 this.lastValidValue = this.getValue() || '';
229 this.isDelete = false;
230 var wrapper = document.querySelector('#' + FACET_ID + ' .ts-wrapper');
231 if (wrapper) wrapper.style.opacity = '1';
232 }
233 });
234 }
235
236 if (document.readyState === 'loading') {
237 document.addEventListener('DOMContentLoaded', initFacet);
238 } else {
239 initFacet();
240 }
241 })();
242 </script>
243</#if>
