1<#-- Variables --> 

2<#assign specificationName = 'ics' /> 

3<#assign paramNameSpecificationName  = cpSpecificationOptionsSearchFacetDisplayContext.getParameterName() /> 

4<#assign isDebug = false /> 

5<#assign showAllSpecificationsName = false /> 

6<#assign staticHost = getCXConfig("ecom-static-files") /> 

7 

8<#-- ========================= --> 

9<#-- Functions freemaker       --> 

10<#-- ========================= --> 

11<#function getCXConfig clientExtensionName field="webApiUrl"> 

12    <#if !clientExtensionName?has_content><#return "" /></#if> 

13    <#local encoded = urlCodec.encodeURL(clientExtensionName) /> 

14    <#local items   = restClient.get("/c/customconfigs/?fields=clientExtensionConfig&filter=clientExtensionName eq '" + encoded + "'").items![] /> 

15    <#return items?has_content?then(items[0].clientExtensionConfig?eval[field]!"", "") /> 

16</#function> 

17 

18 

19<#if paramNameSpecificationName == specificationName || showAllSpecificationsName> 

20 

21	<#-- ------------------------------------- --> 

22 

23<#assign sharedSearchResponse = renderRequest.getAttribute("LIFERAY_SHARED_PortletSharedSearchResponse") /> 

24<#assign searchResponse       = sharedSearchResponse.get() /> 

25<#assign esResponse           = searchResponse.getSearchResponse() /> 

26<#assign aggResult            = esResponse.getAggregationResult("organismos") /> 

27<#list aggResult.getBuckets() as bucket> 

28    <p>key: ${bucket.getKey()} - count: ${bucket.getDocCount()}</p> 

29</#list> 

30		 

31	<#-- ------------------------------------- --> 

32	 

33	 

34    <#-- Variables --> 

35    <#assign facetId    = "facet-" + paramNameSpecificationName + "-" + renderResponse.getNamespace() /> 

36    <#assign facetClass = "facet-" + paramNameSpecificationName + "-combo-search-wrapper" /> 

37 

38    <#-- ========================= --> 

39    <#-- TOM SELECT framework      --> 

40    <#-- ========================= --> 

41    <@liferay_util["html-top"] outputKey="tom-select"> 

42        <link href="${staticHost}/scripts/vendor/tom-select/tom-select.css" rel="stylesheet"> 

43        <script src="${staticHost}/scripts/vendor/tom-select/tom-select.complete.min.js"></script> 

44    </@> 

45 

46    <#-- ========================= --> 

47    <#-- CSS                       --> 

48    <#-- ========================= --> 

49    <style> 

50        /* =========================== 

51           Variables de fuente compartidas 

52           =========================== */ 

53        #${facetId} { 

54            --facet-font-family: Inter; 

55            --facet-font-size: 14px; 

56            --facet-font-weight: 400; 

57            --facet-line-height: 18px; 

58            --facet-letter-spacing: 0.5px; 

59            --facet-color: #66757f; 

60        } 

61 

62        /* =========================== 

63           Select original — oculto desde el inicio 

64           =========================== */ 

65        #${facetId}-select { 

66            appearance: none; 

67            -webkit-appearance: none; 

68            visibility: hidden; 

69            position: absolute; 

70        } 

71 

72        /* =========================== 

73           TomSelect — wrapper oculto hasta inicializar 

74           =========================== */ 

75        #${facetId} .ts-wrapper { 

76            width: 100%; 

77            margin-bottom: 16px; 

78            opacity: 0; 

79            transition: opacity 0.1s ease; 

80        } 

81 

82        #${facetId} .ts-wrapper .ts-control { 

83            padding: 15.5px 16px; 

84            font-family: var(--facet-font-family); 

85            font-size: var(--facet-font-size); 

86            font-weight: var(--facet-font-weight); 

87            line-height: var(--facet-line-height); 

88            letter-spacing: var(--facet-letter-spacing); 

89            color: var(--facet-color); 

90            text-align: left; 

91            height: 55px; 

92            width: 100%; 

93            border-radius: 4px; 

94            border: none; 

95            background-color: #F5F5F5; 

96            background-image: url(/documents/d/global/ico-chevron-down-2); 

97            background-repeat: no-repeat; 

98            background-position: right 1rem center; 

99            background-size: 18px 10px; 

100            box-shadow: none; 

101            cursor: pointer; 

102            box-sizing: border-box; 

103        } 

104 

105        #${facetId} .ts-wrapper .ts-control:focus, 

106        #${facetId} .ts-wrapper .ts-control:focus-visible { 

107            background-image: url(/documents/d/global/ico-chevron-down-2); 

108            background-position: right 1rem center; 

109            background-size: 18px 10px; 

110            outline: none; 

111            box-shadow: none; 

112        } 

113 

114        #${facetId} .ts-wrapper .ts-control .item { 

115            padding-right: 0.75rem; 

116            overflow: hidden; 

117            text-overflow: ellipsis; 

118            max-width: calc(100% - 0.75rem); 

119        } 

120 

121        /* Ocultar flecha nativa de TomSelect */ 

122        #${facetId} .ts-wrapper.single .ts-control::after { 

123            display: none; 

124        } 

125 

126        /* Input de búsqueda del dropdown */ 

127        #${facetId} .ts-dropdown .dropdown-input-wrap .dropdown-input { 

128            font-family: var(--facet-font-family); 

129            font-size: var(--facet-font-size); 

130            font-weight: var(--facet-font-weight); 

131            line-height: var(--facet-line-height); 

132            letter-spacing: var(--facet-letter-spacing); 

133            color: var(--facet-color); 

134            padding: 8px 16px; 

135            border: none; 

136            border-bottom: 1px solid #d9d9d9; 

137            background-color: #fff; 

138            width: 100%; 

139            box-sizing: border-box; 

140        } 

141 

142        #${facetId} .ts-dropdown .dropdown-input-wrap .dropdown-input:focus { 

143            outline: none; 

144            box-shadow: none; 

145        } 

146 

147        /* Opciones del dropdown */ 

148        #${facetId} .ts-dropdown .ts-dropdown-content .option { 

149            font-family: var(--facet-font-family); 

150            font-size: var(--facet-font-size); 

151            font-weight: var(--facet-font-weight); 

152            line-height: var(--facet-line-height); 

153            letter-spacing: var(--facet-letter-spacing); 

154            color: var(--facet-color); 

155            padding: 8px 16px; 

156        } 

157 

158        #${facetId} .ts-dropdown .ts-dropdown-content .option:hover, 

159        #${facetId} .ts-dropdown .ts-dropdown-content .option.active { 

160            background-color: #6a9bd3; 

161            color: #fff; 

162        } 

163    </style> 

164 

165    <div class="checks-container ${facetClass}" id="${facetId}"> 

166        <div class="d-flex flex-column w-100"> 

167            <label class="panel-title mb-2" for="${facetId}-select"> 

168                ${languageUtil.get(locale, "norma." + paramNameSpecificationName)} 

169                <#if isDebug> 

170                    <p style="font-size:11px;color:#999;font-weight:normal;"> 

171                        (total options: ${entries?size}) 

172                    </p> 

173                    <p style="font-size:11px;color:#999;font-weight:normal;"> 

174                        (facetId: ${facetId}) 

175                    </p> 

176                </#if> 

177            </label> 

178 

179            <#-- ========================= --> 

180            <#-- SELECT UI                 --> 

181            <#-- ========================= --> 

182            <select id="${facetId}-select" data-parameter-name="${paramNameSpecificationName}"> 

183                <option value="">${languageUtil.get(locale, "search.cualquiera")}</option> 

184                <#list entries?sort_by("displayName") as entry> 

185                    <option value="${htmlUtil.escape(entry.getDisplayName())}" 

186                        <#if entry.isSelected()>selected</#if>> 

187                        ${htmlUtil.escape(entry.getDisplayName())} (${entry.getFrequency()}) 

188                    </option> 

189                </#list> 

190            </select> 

191        </div> 

192    </div> 

193 

194    <#-- ========================= --> 

195    <#-- SCRIPT                    --> 

196    <#-- ========================= --> 

197    <script> 

198        (function () { 

199            var FACET_ID   = '${facetId}'; 

200            var PARAM_NAME = '${paramNameSpecificationName}'; 

201 

202            function applyUrlFilter(value) { 

203                var url = new URL(window.location.href); 

204                if (value) { 

205                    url.searchParams.set(PARAM_NAME, value); 

206                } else { 

207                    url.searchParams.delete(PARAM_NAME); 

208                } 

209                window.location.href = url.toString(); 

210            } 

211 

212            function initFacet() { 

213                var select = document.getElementById(FACET_ID + '-select'); 

214                if (!select) return; 

215 

216                if (select.tomselect) select.tomselect.destroy(); 

217                if (select.dataset.bound === 'true') return; 

218                select.dataset.bound = 'true'; 

219 

220                new TomSelect(select, { 

221                    allowEmptyOption: true, 

222                    maxItems: 1, 

223                    create: false, 

224                    render: { 

225                        no_results: function(data, escape) { 

226                            return '<div class="no-results">${languageUtil.get(locale, "occurrence-not-found")}</div>'; 

227                        } 

228                    }, 

229                    plugins: { 

230                        dropdown_input: {} 

231                    }, 

232                    onDelete: function(value) { 

233                        this.isDelete = true; 

234                    }, 

235                    onChange: function(value) { 

236                        if (value) { 

237                            this.lastValidValue = value; 

238                            applyUrlFilter(value); 

239                            return; 

240                        } 

241                        this.lastValidValue = ''; 

242                        applyUrlFilter(''); 

243                    }, 

244                    onInitialize: function() { 

245                        this.lastValidValue = this.getValue() || ''; 

246                        this.isDelete = false; 

247                        var wrapper = document.querySelector('#' + FACET_ID + ' .ts-wrapper'); 

248                        if (wrapper) wrapper.style.opacity = '1'; 

249                    } 

250                }); 

251            } 

252 

253            if (document.readyState === 'loading') { 

254                document.addEventListener('DOMContentLoaded', initFacet); 

255            } else { 

256                initFacet(); 

257            } 

258        })(); 

259    </script> 

260</#if>