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