Um erro ocorreu enquanto processava o modelo.
Java method "com.sun.proxy.$Proxy192.getGroupVocabularies(long)" threw an exception when invoked on com.sun.proxy.$Proxy192 object "com.liferay.portlet.asset.service.impl.AssetVocabularyServiceImpl@3d50d7bd"; see cause exception in the Java stack trace. ---- FTL stack trace ("~" means nesting-related): - Failed at: #assign vocabularies = assetVocabular... [in template "20099#20135#11049244" at line 34, column 1] ----
1<#--
2Widget templates can be used to modify the look of a
3specific application.
4
5Please use the right panel to quickly add commonly used variables.
6Autocomplete is also available and can be invoked by typing "${".
7-->
8
9<#assign codGlobalSite = 20135 />
10
11<#if codGlobalSite != themeDisplay.getScopeGroupId() >
12
13<#-- Conteúdo Web -> Templates: Funções gerais -->
14<#include "${templatesPath}/1975398" />
15
16<#-- Conteúdo Web -> Templates: Busca pelas imagens do tipo de noticia -->
17<#include "${templatesPath}/18598756" />
18
19<#assign POST_TYPES_CATEGORIES = getPostTypeImages()!default([]) />
20
21<#-- Nome das midias adaptativas de imagem para desktop e mobile -->
22<#assign adaptativeMediaDesktopResolutionName = "Preview-1000x0" />
23<#assign adaptativeMediaMobileResolutionName = "Thumbnail-300x300" />
24
25
26<#-- Liferay Services -->
27<#assign journalArticleLocalService = serviceLocator.findService("com.liferay.journal.service.JournalArticleLocalService") />
28<#assign fileEntryService = staticUtil["com.liferay.document.library.kernel.service.DLFileEntryLocalServiceUtil"] />
29<#assign layoutLocalService = serviceLocator.findService("com.liferay.portal.kernel.service.LayoutLocalService")>
30<#assign assetCategoryLocalService = serviceLocator.findService("com.liferay.asset.kernel.service.AssetCategoryLocalService") />
31<#assign assetVocabularyService = serviceLocator.findService("com.liferay.asset.kernel.service.AssetVocabularyService") />
32<#assign assetCategoryPropService = serviceLocator.findService("com.liferay.asset.category.property.service.AssetCategoryPropertyLocalService") />
33<#assign layout = layoutLocalService.getLayout(themeDisplay.getPlid())>
34<#assign vocabularies = assetVocabularyService.getGroupVocabularies(groupId) />
35
36<#assign ourEnergyVocabulary = findVocabulary("Nossa Energia", vocabularies)/>
37<#assign typeOfNewsVocabulary = findVocabulary("Tipo de Notícia", vocabularies )/>
38<#assign typeOfNewsVocabularyId = 10720340 />
39
40
41<#assign contentNumber = randomNumber(4586) />
42
43<#assign folderId = "18598813"/>
44
45<#assign category = "" />
46<#assign categoryName = "" >
47<#if locale?lower_case == 'pt_br'>
48 <#assign categoryName = "Todos" >
49<#else>
50 <#assign categoryName = "All" >
51</#if>
52
53<#if request.getParameter("category")?? && request.getParameter("category")?has_content>
54 <#assign categoryId = request.getParameter("category")?number>
55 <#if categoryId?? && categoryId?has_content>
56 <#assign category = assetCategoryLocalService.getCategory(categoryId) />
57 <#assign categoryName = category.getTitle(locale) />
58 </#if>
59</#if>
60
61<#if categoryId?? && categoryId?has_content>
62 <#attempt>
63 <#assign categoryDates = restClient.get("/headless-admin-taxonomy/v1.0/taxonomy-categories/${categoryId}")>
64 <#recover>
65 <#assign categoryDates = { "name": "", "description": "<p></p>", "parentTaxonomyVocabulary" : {"name": ""}}>
66 </#attempt>
67<#else>
68 <#assign categoryDates = { "name": "", "description": "<p></p>", "parentTaxonomyVocabulary" : {"name": ""}}>
69</#if>
70
71
72<#assign categoryPage = getFirstCategoryOfVocabularyInPage(layout, ourEnergyVocabulary) />
73<#if categoryPage?? && categoryPage?has_content>
74 <#assign categoryName = categoryPage.getTitle(locale) />
75 <#assign categoryId = categoryPage.getCategoryId() />
76 <#assign category = categoryPage />
77 <script>
78 if (!window.location.search.includes('category') && !document.body.classList.contains("has-edit-mode-menu")) {
79 // Redirecionar para uma nova URL
80 const urlPage = new URL(window.location.href);
81 urlPage.searchParams.set('sort', "createDate-");
82 urlPage.searchParams.set('category', "${categoryId}");
83 window.location.href = urlPage.toString();
84 }
85 </script>
86</#if>
87
88<#if categoryDates.parentTaxonomyVocabulary.name="Nossa Energia">
89 <#attempt>
90 <#assign ourEnergyStyles = [] />
91 <#assign shadowColorCategory = "" />
92 <#if (assetCategoryPropService.fetchCategoryProperty(category.getCategoryId(),"Cor da Sombra")??)>
93 <#assign categoryShadowColorByService = assetCategoryPropService.fetchCategoryProperty(category.getCategoryId(),"Cor da Sombra") />
94 <#assign shadowColorCategory = categoryShadowColorByService.value />
95 </#if>
96
97 <#assign backgroundColorCategory = "" />
98 <#if (assetCategoryPropService.fetchCategoryProperty(category.getCategoryId(),"Cor de Fundo")??)>
99 <#assign categoryBackgroundColorByService = assetCategoryPropService.fetchCategoryProperty(category.getCategoryId(),"Cor de Fundo") />
100 <#assign backgroundColorCategory = categoryBackgroundColorByService.value />
101 </#if>
102
103 <#assign textColorCategory = "" />
104 <#if (assetCategoryPropService.fetchCategoryProperty(category.getCategoryId(),"Cor do Texto")??)>
105 <#assign categoryTextColorByService = assetCategoryPropService.fetchCategoryProperty(category.getCategoryId(),"Cor do Texto") />
106 <#assign textColorCategory = categoryTextColorByService.value />
107 </#if>
108
109 <#assign textColorHighContrastCategory = "" />
110 <#if (assetCategoryPropService.fetchCategoryProperty(category.getCategoryId(),"Cor do Texto em Alto Contraste")??)>
111 <#assign categoryTextColorHighContrastByService = assetCategoryPropService.fetchCategoryProperty(category.getCategoryId(),"Cor do Texto em Alto Contraste") />
112 <#assign textColorHighContrastCategory = categoryTextColorHighContrastByService.value />
113 </#if>
114
115 <#assign ourEnergyStyles = [{"titleLocale": category.getTitle(locale),"shadowColor": shadowColorCategory, "backgroundColor": backgroundColorCategory, "textColor": textColorCategory, "textColorHighContrast": textColorHighContrastCategory}] />
116
117 <#recover>
118 <#assign ourEnergyStyles = [{"titleLocale": "Nenhum", "shadowColor": "000", "backgroundColor": "000", "textColor": "FFF", "textColorHighContrast": "FFF"}] />
119
120 </#attempt>
121</#if>
122
123
124<#-- Root Css -> Para poder instanciar dois elementos e não dar confusão no JS -->
125<#assign rootCss = "results-list-category-container_" + randomNumber(4586) />
126
127<#-- Função para obter a primeira categoria associonada a um Vocabulário o qual está associado a um Jornal Article -->
128<#function getFirstCategoryOfVocabulary journalArticle vocabulary >
129 <#attempt>
130 <#assign categories = assetCategoryLocalService.getCategories("com.liferay.journal.model.JournalArticle", journalArticle.getClassPK()) />
131
132 <#list categories as category>
133 <#if vocabulary.getVocabularyId() == category.getVocabularyId()>
134 <#return category.getTitle(locale)>
135 </#if>
136 </#list>
137
138 <#return "">
139
140 <#recover>
141 <#return "" />
142 </#attempt>
143
144</#function>
145
146<#function getFirstCategoryOfVocabularyInPage layout vocabulary >
147 <#attempt>
148 <#assign categories = assetCategoryLocalService.getCategories("com.liferay.portal.kernel.model.Layout", layout.getPlid()) />
149
150 <#list categories as category>
151 <#if vocabulary.getVocabularyId() == category.getVocabularyId()>
152 <#return category>
153 </#if>
154 </#list>
155
156 <#return "">
157
158 <#recover>
159 <#return "" />
160 </#attempt>
161
162</#function>
163
164
165<#assign countCategoriesDates = 0 />
166<#assign categoriesRestInfo = [] />
167
168<#function getCategoriesDates >
169
170 <#attempt>
171 <#assign countCategoriesDates = countCategoriesDates + 1 />
172
173 <#assign journalArticle = journalArticleLocalService.getLatestArticle(entries[0].getClassPK()) />
174 <#assign ddmStructure = journalArticle.getDDMStructure() />
175 <#assign highlightsRestDates = restClient.get("/headless-delivery/v1.0/content-structures/10700214/structured-contents?fields=contentFields%2CfriendlyUrlPath%2Cid%2Ckey%2CtaxonomyCategoryBriefs%2Ctitle&page=${countCategoriesDates}&pageSize=10&search=%3CtaxonomyCategoryName%3E${categoryName}%3C%2FtaxonomyCategoryName%3E&sort=dateCreated%3Adesc") />
176
177 <#list highlightsRestDates.items as item>
178 <#list item.taxonomyCategoryBriefs as category>
179 <#if category.taxonomyCategoryId == categoryId>
180 <#assign categoriesRestInfo += [item] >
181 </#if>
182 </#list>
183 <#if categoriesRestInfo?size gte 3>
184 <#return categoriesRestInfo />
185 </#if>
186
187 </#list>
188
189 <#if categoriesRestInfo?size lt 3>
190 <#call getCategoriesDates() />
191 <#else>
192 <#return categoriesRestInfo />
193 </#if>
194
195 <#recover>
196 <#return categoriesRestInfo />
197 </#attempt>
198
199</#function>
200
201
202<#if categoryId?? && categoryId?has_content>
203 <#attempt>
204 <#assign categoryDates = restClient.get("/headless-admin-taxonomy/v1.0/taxonomy-categories/${categoryId}")>
205 <#recover>
206 <#assign categoryDates = { "name": "", "description": "<p></p>", "parentTaxonomyVocabulary" : {"name": ""}}>
207 </#attempt>
208</#if>
209
210<#function getCategoriesImages >
211 <#attempt>
212 <#-- Image Banner -->
213 <#assign categoryImageDates = restClient.get("/headless-delivery/v1.0/document-folders/${folderId}/documents?search=${categoryName}&sort=dateCreated%3Adesc")>
214 <#if categoryImageDates?? && categoryImageDates?has_content && categoryImageDates.items?? && (categoryImageDates.items!?size > 0)>
215 <#assign categoriesImagesInfo = categoryImageDates.items[0] />
216 <#else>
217 <#assign categoriesImagesInfo = { "contentUrl": "", "id": "0" } />
218 </#if>
219
220 <#return categoriesImagesInfo />
221
222 <#recover>
223 <#assign categoriesImagesInfo = { "contentUrl": "", "id": "0" } >
224 <#return categoriesImagesInfo />
225 </#attempt>
226
227</#function>
228
229
230
231<#if categoryDates.parentTaxonomyVocabulary.name="Nossa Energia">
232
233 <#assign highlightsDates = getCategoriesDates() />
234 <#assign categoryImage = getCategoriesImages() />
235
236</#if>
237
238<#-- Função para obter os dados de um card no Web Content (Journal Article) -->
239<#function getDataForCard entry >
240 <#attempt>
241 <#assign journalArticle = journalArticleLocalService.getLatestArticle(entry.getClassPK()) />
242 <#assign ddmStructure = journalArticle.getDDMStructure() />
243 <#assign fieldList = getFieldListByStructure(ddmStructure) />
244 <#assign xmlArticle = journalArticle.getDocument().getRootElement() />
245
246 <#-- Tentando pegar Imagem -->
247 <#assign mediasGroup = getNodes(getIdFromFieldName(fieldList, "Mídia de destaque da notícia"), xmlArticle) />
248 <#assign media = "" />
249 <#list mediasGroup as mediaGroup >
250 <#assign media = getMediaInfo(fieldList, mediaGroup, "Imagem Destaque", fileEntryService) />
251
252 <#assign fileDataRequest = restClient.get("/headless-delivery/v1.0/documents/${media.fileEntryId}") />
253
254 <#assign urlAdaptativeMediaDesktop = ""/>
255 <#assign urlAdaptativeMediaMobile = ""/>
256 <#if media.url?? && media.url?has_content >
257 <#assign dataAdaptativeMedia = fileDataRequest.adaptedImages />
258 <#list dataAdaptativeMedia as data>
259 <#if data.resolutionName == adaptativeMediaDesktopResolutionName>
260 <#assign urlAdaptativeMediaDesktop = data.contentUrl/>
261 </#if>
262 <#if data.resolutionName == adaptativeMediaMobileResolutionName>
263 <#assign urlAdaptativeMediaMobile = data.contentUrl/>
264 </#if>
265 </#list>
266 </#if>
267
268 <#assign media = {"imageSrc": media.url, "imageAlt": media.alt, "imageFileEntryId": media.fileEntryId, "urlAdaptativeMedia": {"desktop": urlAdaptativeMediaDesktop, "mobile": urlAdaptativeMediaMobile}} />
269
270 <#-- Se não tiver imagem, tentar pegar vídeo -->
271 <#if !media.imageSrc?? || !media.imageSrc?has_content>
272 <#assign youtubeID = getFieldValue(fieldList, mediaGroup, "ID do vídeo do YouTube do vídeo de destaque") />
273 <#if youtubeID?? && youtubeID?has_content>
274 <#assign media = {"videoYotubeID": youtubeID} />
275 <#else>
276 <#-- Tentar pegar vídeo Interno -->
277 <#assign internalVideo = getMediaInfo(fieldList, mediaGroup, "Fazer upload de um vídeo de destaque", fileEntryService) />
278 <#if internalVideo?? && internalVideo?has_content>
279 <#assign media = {"internalVideo": internalVideo} />
280 </#if>
281 </#if>
282 </#if>
283 </#list>
284
285 <#assign title = getFieldValue(fieldList, xmlArticle, "Título de destaque da notícia") />
286
287 <#assign timeRead = getFieldValue(fieldList, xmlArticle, "Tempo de Leitura") />
288
289 <#assign typeOfNews = getFirstCategoryOfVocabulary(entry, typeOfNewsVocabulary) />
290
291 <#assign ourEnergy = getFirstCategoryOfVocabulary(entry, ourEnergyVocabulary) />
292
293 <#if themeDisplay.getPortalURL()?contains("webserver")>
294 <#assign urlNews = themeDisplay.getPortalURL() + themeDisplay.getPathFriendlyURLPublic() + layout.getGroup().friendlyURL + "/w/" + journalArticle.getUrlTitle()>
295 <#else>
296 <#assign urlNews = themeDisplay.getPortalURL() + "/w/" + journalArticle.getUrlTitle()>
297 </#if>
298
299 <#if !urlNews?has_content >
300 <#assign urlNews = "" >
301 </#if>
302
303 <#assign cardData = {"media": media, "title": title, "timeRead": timeRead, "typeOfNews": typeOfNews, "ourEnergy": ourEnergy, "urlNews": urlNews} />
304
305 <#return cardData>
306
307 <#recover>
308 <#return {"media": "", "title": "", "timeRead": "", "typeOfNews": "", "ourEnergy": "", "urlNews": ""} />
309 </#attempt>
310
311 <#-- cardData -> image: url, alt
312 title
313 timeRead
314 ourEnergyCategory
315 typeOfNews
316 urlNews
317 -->
318</#function>
319
320<#macro renderCard cardData>
321 <#-- cardData -> image: url, alt
322 title
323 timeRead
324 ourEnergyCategory
325 typeOfNews
326 urlNews
327 -->
328 <div class="card-news-container">
329 <div class="overlay-card-highlight"> </div>
330
331 <a class="card-category-link card-link" href="${cardData.urlNews}" style="display: none;"> ${cardData.title} </a>
332
333 <div class="card-news-thumb">
334 <#assign noImage = "" />
335 <#if cardData.media?? && cardData.media?has_content>
336 <#if cardData.media.imageSrc?? && cardData.media.imageSrc?has_content>
337 <#assign imageSrcDesktop = cardData.media.imageSrc />
338 <#assign imageSrcmobile = cardData.media.imageSrc />
339 <#if cardData.media.urlAdaptativeMedia?? && cardData.media.urlAdaptativeMedia?has_content>
340 <#assign imageSrcDesktop = cardData.media.urlAdaptativeMedia.desktop />
341 <#assign imageSrcMobile = cardData.media.urlAdaptativeMedia.mobile />
342 </#if>
343
344 <picture >
345 <source media="(max-width:767px)" srcset="${imageSrcMobile}">
346 <img class="card-news-image" loading="lazy" src="${imageSrcDesktop}" alt="${cardData.media.imageAlt}"/>
347 </picture>
348
349 <#else>
350 <#if cardData.media.videoYotubeID?? && cardData.media.videoYotubeID?has_content>
351 <picture >
352 <source media="(max-width:767px)" srcset="https://img.youtube.com/vi/${cardData.media.videoYotubeID}/mqdefault.jpg">
353 <img class="card-news-image" loading="lazy" src="https://img.youtube.com/vi/${cardData.media.videoYotubeID}/maxresdefault.jpg" alt="YouTube Thumbnail"/>
354 </picture>
355 <#else>
356 <#if (cardData.media.internalVideo?? && cardData.media.internalVideo.url?has_content) >
357 <video class="card-news-image">
358 <source src="${cardData.media.internalVideo.url}">
359 Your browser does not support the video tag.
360 </video>
361 <#else>
362 <#assign noImage = "no-image" />
363 </#if>
364 </#if>
365 </#if>
366 </#if>
367 </div>
368
369 <div class="card-news-category-container ${noImage}">
370 <div data-category="${categoryName}" class="card-news-category paragraph-micro-regular"> ${cardData.ourEnergy} </div>
371 </div>
372
373 <div class="card-news-text-content ${noImage}">
374 <div class="card-news-title h4"> ${cardData.title} </div>
375
376 <div class="card-news-info">
377 <div class="card-news-type">
378 <#if getPostTypeImageUrl(POST_TYPES_CATEGORIES, (cardData.typeOfNews)!default(""))?? >
379 <#assign postTypeIconUrl = getPostTypeImageUrl(POST_TYPES_CATEGORIES, (cardData.typeOfNews)!default("")) />
380 <img src="${postTypeIconUrl}" alt="post type icon" loading="lazy" />
381 <div class="card-news-type-text paragraph-micro-regular">${cardData.typeOfNews}</div>
382 <#else/>
383 <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
384 <path d="M6.25 7.5H13.75M6.25 10H13.75M6.25 12.5H13.75M3.125 3.75H16.875C17.2202 3.75 17.5 4.02982 17.5 4.375V15.625C17.5 15.9702 17.2202 16.25 16.875 16.25H3.125C2.77982 16.25 2.5 15.9702 2.5 15.625V4.375C2.5 4.02982 2.77982 3.75 3.125 3.75Z" stroke="#959595" stroke-linecap="round" stroke-linejoin="round"/>
385 </svg>
386 <div class="card-news-type-text paragraph-micro-regular">Artigo</div>
387 </#if>
388 </div>
389
390 <#if cardData.timeRead?? && cardData.timeRead?has_content>
391 <div class="card-news-time-read">
392 <svg class="card-news-icon-time-read" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
393 <path d="M10.5 5.625C10.5 5.34886 10.2761 5.125 10 5.125C9.72386 5.125 9.5 5.34886 9.5 5.625H10.5ZM10 10H9.5C9.5 10.2761 9.72386 10.5 10 10.5V10ZM14.375 10.5C14.6511 10.5 14.875 10.2761 14.875 10C14.875 9.72386 14.6511 9.5 14.375 9.5V10.5ZM17 10C17 13.866 13.866 17 10 17V18C14.4183 18 18 14.4183 18 10H17ZM10 17C6.13401 17 3 13.866 3 10H2C2 14.4183 5.58172 18 10 18V17ZM3 10C3 6.13401 6.13401 3 10 3V2C5.58172 2 2 5.58172 2 10H3ZM10 3C13.866 3 17 6.13401 17 10H18C18 5.58172 14.4183 2 10 2V3ZM9.5 5.625V10H10.5V5.625H9.5ZM10 10.5H14.375V9.5H10V10.5Z" fill="#959595"/>
394 </svg>
395 <div class="card-news-time-read-text paragraph-micro-regular">${cardData.timeRead} min</div>
396 </div>
397 </#if>
398 </div>
399 </div>
400 </div>
401
402</#macro>
403
404<#macro renderFilters >
405 <div class="order-filter-container">
406
407 <div class="order-container" >
408 <span class="paragraph-sm-regular">
409 <#if locale?lower_case == 'pt_br'>
410 Ordenar por:
411 <#else>
412 Order by:
413 </#if>
414 </span>
415 <select name="order" id="select-order">
416
417 <option class="paragraph-sm-regular" value="">
418 <#if locale?lower_case == 'pt_br'>
419 Padrão
420 <#else>
421 Default
422 </#if>
423 </option>
424 <option class="paragraph-sm-regular" value="createDate-">
425 <#if locale?lower_case == 'pt_br'>
426 Mais recentes
427 <#else>
428 Recents
429 </#if>
430 </option>
431 <option class="paragraph-sm-regular" value="createDate%2B">
432 <#if locale?lower_case == 'pt_br'>
433 Mais antigos
434 <#else>
435 Olders
436 </#if>
437 </option>
438 </select>
439 </div>
440
441 <div class="filter-container">
442 <span class="paragraph-sm-regular">
443 <#if locale?lower_case == 'pt_br'>
444 Filtrar por:
445 <#else>
446 Filter by:
447 </#if>
448 </span>
449
450 <select name="filter" id="select-filter">
451 <option class="paragraph-sm-regular" value="0">
452 <#if locale?lower_case == 'pt_br'>
453 Todos
454 <#else>
455 All
456 </#if>
457 </option>
458 </select>
459 </div>
460
461 </div>
462
463</#macro>
464
465<#if entries?has_content>
466
467 <div class="${rootCss}">
468
469 <#if categoryDates.parentTaxonomyVocabulary.name == "Nossa Energia">
470
471 <#-- Names Fields -->
472 <#assign newsTitle = "Título de destaque da notícia" />
473 <#assign readTime = "Tempo de Leitura" />
474 <#assign highlightMedia = "Mídia de destaque da notícia" />
475 <#assign highlightImage = "Imagem Destaque" />
476
477 <#-- Type of News Dates -->
478 <#attempt>
479 <#assign typeOfNewsRestDates = restClient.get("/headless-admin-taxonomy/v1.0/taxonomy-vocabularies/${typeOfNewsVocabulary.getVocabularyId()}/taxonomy-categories?sort=dateCreated")>
480 <#assign typeOfNewsDates = typeOfNewsRestDates.items >
481 <#recover>
482 <#assign typeOfNewsDates = []>
483 </#attempt>
484
485 <div class="category-top-border"></div>
486 <div class="dates-category-container">
487 <div class="breakpoint">
488 <#assign categoryWithImage = "" >
489 <#if categoryImage.contentUrl != "">
490 <#assign categoryWithImage = "with-image" >
491 </#if>
492 <div class="category-top-session col-1-12 md-col-1-8 sm-col-1-4 ${categoryWithImage}">
493 <div class="text-container">
494
495 <div class="results-category-title fragment_85017">
496 <div class="petro-title">
497 <h2 id="title" class="h2" >
498 ${categoryDates.name}
499 </h2>
500 <div class="yellow-bar bar-h2"></div>
501 </div>
502 </div>
503
504 <div class="category-description paragraph-md-regular">
505 ${categoryDates.description}
506 </div>
507
508 </div>
509 <#if categoryImage.contentUrl != "" >
510 <div class="category-banner" >
511 <picture >
512 <source media="(max-width:767px)" srcset="/o/adaptive-media/image/${categoryImage.id}/${adaptativeMediaMobileResolutionName}/image">
513 <img
514 src="/o/adaptive-media/image/${categoryImage.id}/${adaptativeMediaDesktopResolutionName}/image"
515 alt="Image ${categoryDates.name}" loading="lazy">
516 </picture>
517 </div>
518 </#if>
519 </div>
520 </div>
521
522
523 <div class="cards-highlights-container col-1-12 md-col-1-8 sm-col-1-4">
524 <#list highlightsDates as cardHighlight>
525
526 <#assign newsTitleDate = "" />
527 <#assign readTimeDate = "" />
528 <#assign highlightImageUrl = "" />
529 <#assign highlightImageFileEntryId = "" />
530 <#assign highlightImageDescription = "" />
531 <#assign highlightTypeNews = "" />
532
533 <#list cardHighlight.contentFields as contentField>
534
535 <#if contentField.label == newsTitle>
536 <#assign newsTitleDate = contentField.contentFieldValue.data />
537 </#if>
538 <#if contentField.label == readTime>
539 <#assign readTimeDate = contentField.contentFieldValue.data />
540 </#if>
541 <#if contentField.label == highlightMedia>
542 <#list contentField.nestedContentFields as nestedContent>
543 <#if nestedContent.label == highlightImage && nestedContent.contentFieldValue.image?? >
544 <#assign highlightImageUrl = nestedContent.contentFieldValue.image.contentUrl />
545 <#assign highlightImageFileEntryId = nestedContent.contentFieldValue.image.id />
546 <#assign highlightImageDescription = nestedContent.contentFieldValue.image.description />
547 </#if>
548 </#list>
549 </#if>
550
551 </#list>
552
553 <#list cardHighlight.taxonomyCategoryBriefs as categories >
554
555 <#list typeOfNewsDates as types >
556 <#if categories.taxonomyCategoryId?number == types.id?number >
557 <#assign highlightTypeNews = categories.taxonomyCategoryName />
558 <#break>
559 </#if>
560 </#list>
561 </#list>
562
563 <div class="card-category-highlight-container">
564 <#assign newsJournalArticleFriendlyUrl = "/">
565 <#if themeDisplay.getPortalURL()?contains("webserver")>
566 <#assign newsJournalArticleFriendlyUrl = themeDisplay.getPortalURL() + themeDisplay.getPathFriendlyURLPublic() + layout.getGroup().friendlyURL + "/w/" + cardHighlight.friendlyUrlPath>
567 <#else>
568 <#assign newsJournalArticleFriendlyUrl = themeDisplay.getPortalURL() + "/w/" + cardHighlight.friendlyUrlPath>
569 </#if>
570 <a class="card-category-link cards-category-highlights-link" href="${newsJournalArticleFriendlyUrl}">
571 <span style="display: none;"> ${newsTitleDate} </span>
572 </a>
573
574 <#if highlightImageUrl?has_content && highlightImageUrl != "" >
575 <picture >
576 <source media="(max-width:767px)" srcset="/o/adaptive-media/image/${highlightImageFileEntryId}/${adaptativeMediaMobileResolutionName}/image">
577 <img
578 class="card-news-image" src="/o/adaptive-media/image/${highlightImageFileEntryId}/${adaptativeMediaDesktopResolutionName}/image"
579 alt="${highlightImageDescription}" loading="lazy"
580 >
581 </picture>
582 <#else>
583 <div class="no-image"></div>
584 </#if>
585
586 <div class="card-news-category-container ">
587 <div data-category="${categoryDates.name}" class="card-news-category paragraph-micro-regular">
588 ${categoryDates.name}
589 </div>
590 </div>
591 <div class="card-news-text-content ">
592 <div class="card-news-title h4">
593 ${newsTitleDate}
594 </div>
595 <div class="card-news-info">
596 <div class="card-news-type">
597 <#if getPostTypeImageUrl(POST_TYPES_CATEGORIES, highlightTypeNews)?? >
598 <#assign postTypeIconUrl = getPostTypeImageUrl(POST_TYPES_CATEGORIES, highlightTypeNews) />
599 <img src="${postTypeIconUrl}" alt="post type icon" loading="lazy" />
600 <div class="card-news-type-text paragraph-micro-regular">${highlightTypeNews}</div>
601 <#else/>
602 <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
603 <path d="M6.25 7.5H13.75M6.25 10H13.75M6.25 12.5H13.75M3.125 3.75H16.875C17.2202 3.75 17.5 4.02982 17.5 4.375V15.625C17.5 15.9702 17.2202 16.25 16.875 16.25H3.125C2.77982 16.25 2.5 15.9702 2.5 15.625V4.375C2.5 4.02982 2.77982 3.75 3.125 3.75Z" stroke="#959595" stroke-linecap="round" stroke-linejoin="round"/>
604 </svg>
605 <div class="card-news-type-text paragraph-micro-regular">Artigo</div>
606 </#if>
607 </div>
608 <div class="card-news-time-read">
609 <svg class="card-news-icon-time-read" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
610 <path d="M10.5 5.625C10.5 5.34886 10.2761 5.125 10 5.125C9.72386 5.125 9.5 5.34886 9.5 5.625H10.5ZM10 10H9.5C9.5 10.2761 9.72386 10.5 10 10.5V10ZM14.375 10.5C14.6511 10.5 14.875 10.2761 14.875 10C14.875 9.72386 14.6511 9.5 14.375 9.5V10.5ZM17 10C17 13.866 13.866 17 10 17V18C14.4183 18 18 14.4183 18 10H17ZM10 17C6.13401 17 3 13.866 3 10H2C2 14.4183 5.58172 18 10 18V17ZM3 10C3 6.13401 6.13401 3 10 3V2C5.58172 2 2 5.58172 2 10H3ZM10 3C13.866 3 17 6.13401 17 10H18C18 5.58172 14.4183 2 10 2V3ZM9.5 5.625V10H10.5V5.625H9.5ZM10 10.5H14.375V9.5H10V10.5Z"
611 fill="#959595">
612 </path>
613 </svg>
614 <div class="card-news-time-read-text paragraph-micro-regular">
615 ${readTimeDate} min
616 </div>
617 </div>
618 </div>
619 </div>
620 </div>
621 </#list>
622
623
624 </div>
625
626
627 </div>
628 </#if>
629
630
631 <#if categoryDates.parentTaxonomyVocabulary.name != "Nossa Energia">
632
633 <div class="results-category-title tags-title ">
634 <div class="breakpoint">
635 <div class="tags-title-container col-1-12 md-col-1-8 sm-col-1-4">
636 <div class="title-section fragment_85017">
637 <div class="petro-title">
638 <h2 id="title" class="h2" >
639 ${categoryDates.name}
640 </h2>
641 <div class="yellow-bar bar-h2"></div>
642 </div>
643 </div>
644
645 <div class="filters-section">
646 <span class="quantify-results-text paragraph-sm-regular">
647 <#if searchContainer.getTotal() != 0>
648
649 <#-- <#if locale?lower_case == "pt_br"> -->
650 Foram encontrados<span class="quantify-results-text-number paragraph-sm-bold"> ${searchContainer.getTotal()}</span> conteúdos
651
652 <#-- <#else>
653 Found<span class="quantify-results-text-number paragraph-sm-bold"> ${searchContainer.getTotal()}</span> contents
654 </#if> -->
655 </#if>
656 </span>
657
658 <@renderFilters />
659 </div>
660 </div>
661 </div>
662 </div>
663
664 </#if>
665
666 <div class="card-news-list-breakpoint breakpoint">
667
668 <#if categoryDates.parentTaxonomyVocabulary.name="Nossa Energia">
669 <div class="title-filter-container col-1-12 md-col-1-8 sm-col-1-4">
670
671 <div class="results-category-title fragment_85017">
672 <div class="petro-title">
673 <h3 id="title" class="h3" >
674 <#if locale?lower_case == 'pt_br'>
675 Saiba mais
676 <#else>
677 Know more:
678 </#if>
679 </h3>
680 <div class="yellow-bar bar-h3"></div>
681
682 </div>
683 </div>
684
685 <@renderFilters />
686
687 </div>
688
689 </#if>
690
691 <div class="card-news-list col-1-12 md-col-1-8 sm-col-1-4">
692
693 <#if searchContainer.getTotal() == 0>
694 <span class="quantify-results-text paragraph-sm-regular">
695 <#if locale?lower_case == "pt_br">
696 Poxa! Sua busca não encontrou nenhum resultado
697 <#else>
698 Wow! Your search did not return any results
699 </#if>
700 </span>
701 </#if>
702
703 <#if entries?has_content>
704 <#list entries as entry>
705 <#assign cardData = getDataForCard(entry) />
706 <@renderCard cardData/>
707 </#list>
708 </#if>
709 </div>
710 </div>
711 </div>
712</#if>
713
714<#if ourEnergyStyles?? >
715 <#list ourEnergyStyles as ourEnergyStyle>
716 <style>
717 .${rootCss} [data-category="${ourEnergyStyle.titleLocale}"] {
718 <#if ourEnergyStyle.backgroundColor?? && ourEnergyStyle.backgroundColor?has_content>
719 background: linear-gradient(0deg, var(--background-surface-opacity-light-level-07, rgba(255, 255, 255, 0.96)) 0%, var(--background-surface-opacity-light-level-07, rgba(255, 255, 255, 0.96)) 100%), #${ourEnergyStyle.backgroundColor} !important;
720 </#if>
721 box-shadow: 0px 2px 6px 0px #${ourEnergyStyle.shadowColor} !important;
722 color: #${ourEnergyStyle.textColor} !important;
723 }
724
725 body.high-contrast-active .${rootCss} [data-category="${ourEnergyStyle.titleLocale}"] {
726 <#if ourEnergyStyle.backgroundColor?? && ourEnergyStyle.backgroundColor?has_content>
727 background: linear-gradient(0deg, var(--background-surface-opacity-light-level-07, rgba(55, 55, 55, 1)) 0%, var(--background-surface-opacity-light-level-07, rgba(55, 55, 55, 1)) 100%), #${ourEnergyStyle.backgroundColor} !important;
728 </#if>
729 color: #${ourEnergyStyle.textColorHighContrast} !important;
730 }
731
732 </style>
733 </#list>
734</#if>
735
736
737
738<style>
739
740 /* BANNER CATEGORIES AND HIGHLIGHTS SESSION */
741 .category-top-border {
742 width: 100%;
743 height: 16px;
744
745 /* Gradient Verde Claro */
746 background: linear-gradient(270deg, #C4D600 0%, #F1C115 68%);
747
748 }
749
750 body.high-contrast-active .category-top-border {
751 background: linear-gradient(270deg, var(--color-neutral-600) 0%, var(--color-neutral-800) 68%);
752 }
753
754 .${rootCss} .dates-category-container .category-top-session {
755 display: flex;
756 width: 100%;
757 justify-content: space-between;
758 padding: var(--space-xl) 0;
759 }
760
761 .${rootCss} .dates-category-container .category-top-session .text-container {
762 width: 100%;
763 }
764
765
766 .${rootCss} .dates-category-container .category-top-session .text-container .petro-title {
767 flex-shrink: 0;
768 }
769
770 .${rootCss} .text-container {
771 display: flex;
772 justify-content: space-between;
773 align-items: center;
774 gap: var(--space-lg);
775 }
776
777 .${rootCss} .dates-category-container .category-top-session.with-image .text-container {
778 flex-direction: column;
779 align-items: flex-start;
780 max-width: 100%;
781 }
782
783 body.high-contrast-active .${rootCss} .text-container {
784 color: var(--text-primary-default, #FFF) !important;
785 }
786
787 .${rootCss} .text-container .category-title {
788 width: 480px;
789 flex-shrink: 0;
790 }
791
792 .${rootCss} .text-container .category-description {
793 padding-top: var(--space-xs);
794 max-width: 70%;
795 }
796
797 .${rootCss} .category-banner {
798 width: 455px;
799 height: 256px;
800 flex-shrink: 0;
801 }
802
803 .${rootCss} .category-banner img {
804 width: 100%;
805 height: 100%;
806 object-fit: cover;
807 }
808
809
810 .${rootCss} .cards-highlights-container {
811 display: flex;
812 justify-content: space-between;
813 height: 420px;
814 width: 100%;
815 max-width: 1440px;
816 margin: var(--space-lg) auto var(--space-xl);
817 gap: var(--space-md);
818 overflow-x: auto;
819
820 scrollbar-color: #008542 #E7E9EF;
821 scrollbar-width: auto;
822 }
823
824 body.high-contrast-active .${rootCss} .cards-highlights-container {
825 scrollbar-color: var(--color-neutral-600) var(--color-neutral-800);
826 }
827
828 .${rootCss} .cards-highlights-container::-webkit-scrollbar {
829 background: #fff;
830 width: 15px;
831 height: 15px;
832 }
833
834 .${rootCss} .card-category-highlight-container {
835 width: 410px;
836 height: 370px;
837 display: flex;
838 flex-direction: column;
839 flex-shrink: 0;
840 border-radius: var(--border-radius-lg);
841 border: var(--border-width-hairline) solid var(--border-card-default, #EEE);
842 background: var(--background-surface-level-01, #FFF);
843 box-shadow: 0px 12px 60px -10px rgba(145, 147, 149, 0.12);
844 overflow: hidden;
845 scroll-snap-align: start;
846 cursor: pointer;
847 transition: border 300ms ease-in-out;
848 text-decoration: none;
849 position: relative;
850 }
851
852
853 .${rootCss} .card-category-highlight-container:hover {
854 border: var(--border-width-hairline) solid rgb(0, 133, 66);
855 }
856
857
858 body.high-contrast-active .${rootCss} .card-category-highlight-container {
859 border: var(--border-width-hairline) solid var(--border-card-default, #525252);
860 background: var(--background-surface-level-01, #010101);
861 }
862
863
864 body.high-contrast-active .${rootCss} .card-category-highlight-container:hover {
865 border: var(--border-width-hairline) solid var(--border-card-default, #E4F7E8);
866 }
867
868
869 body.high-contrast-active .${rootCss} .card-category-highlight-container * {
870 color: var(--text-primary-default, #FFF) !important;
871 }
872
873 .${rootCss} .cards-highlights-container .card-category-highlight-container .card-category-link {
874 position: absolute;
875 top: 0;
876 width: 100%;
877 height: 100%;
878 z-index: 1;
879 }
880
881 .${rootCss} .card-category-highlight-container .card-news-image {
882 position: relative;
883 width: 100%;
884 }
885
886 .${rootCss} .card-category-highlight-container .no-image {
887 height: 50px;
888 }
889
890 .${rootCss} .card-category-highlight-container .card-news-image {
891 width: 100%;
892 height: 168px;
893 object-fit: cover;
894 }
895
896 .${rootCss} .card-category-highlight-container .card-news-category-container {
897 position: relative;
898 }
899
900 .${rootCss} .card-category-highlight-container .card-news-category-container .card-news-category {
901 display: flex;
902 justify-content: center;
903 align-items: center;
904 padding: var(--space-micro) var(--space-xs);
905 position: absolute;
906 z-index: 2;
907 left: var(--space-md);
908 top: -13px;
909 border-radius: var(--border-radius-pill);
910
911 box-shadow: 0px 2px 6px 0px rgba(0, 178, 169, 0.10);
912 line-height: var(--line-height-lg, 144%);
913 color: var(--default-sup-green-water, #006B65);
914 white-space: nowrap;
915 }
916
917 .${rootCss} .card-category-highlight-container .card-news-text-content {
918 display: flex;
919 padding: var(--space-lg, 32px) var(--space-md, 24px) var(--space-md, 24px) var(--space-md, 24px);
920 flex-direction: column;
921 justify-content: space-between;
922 align-items: flex-start;
923 flex: 1 0 0;
924 align-self: stretch;
925 }
926
927 .${rootCss} .card-category-highlight-container .card-news-text-content .card-news-title {
928 display: -webkit-box;
929 -webkit-box-orient: vertical;
930 -webkit-line-clamp: 4;
931 align-self: stretch;
932 overflow: hidden;
933 color: var(--text-primary-default, #373737);
934 text-overflow: ellipsis;
935 margin: 0;
936 }
937
938 .${rootCss} .card-category-highlight-container .card-news-text-content .card-news-info {
939 display: flex;
940 align-items: center;
941 align-content: center;
942 gap: var(--space-sm, 16px);
943 align-self: stretch;
944 flex-wrap: wrap;
945 }
946
947 .${rootCss} .card-category-highlight-container .card-news-text-content .card-news-info .card-news-type,
948 .${rootCss} .card-category-highlight-container .card-news-text-content .card-news-info .card-news-time-read {
949 display: flex;
950 align-items: center;
951 gap: var(--space-xxs, 8px);
952 }
953
954 .${rootCss} .card-category-highlight-container .card-news-text-content .card-news-info .card-news-type .card-news-type-text,
955 .${rootCss} .card-category-highlight-container .card-news-text-content .card-news-info .card-news-time-read .card-news-time-read-text {
956 color: var(--text-tertiary-default, #959595);
957 line-height: var(--line-height-lg, 144%);
958 }
959
960 .${rootCss} .card-category-highlight-container .card-news-text-content .card-news-info .card-news-type,
961 .${rootCss} .card-category-highlight-container .card-news-text-content .card-news-info .card-news-time-read {
962 display: flex;
963 align-items: center;
964 gap: var(--space-xxs, 8px);
965 }
966
967 .${rootCss} .card-category-highlight-container .card-news-text-content .card-news-info .card-news-type .card-news-type-text,
968 .${rootCss} .card-category-highlight-container .card-news-text-content .card-news-info .card-news-time-read .card-news-time-read-text {
969 color: var(--text-tertiary-default, #959595);
970 line-height: var(--line-height-lg, 144%);
971 }
972
973 /* END BANNER CATEGORIES AND HIGHLIGHTS SESSION */
974
975
976
977 .${rootCss} .results-category-title.tags-title {
978 background: var(--color-neutral-300);
979 padding: var(--space-xl) 0;
980
981 }
982
983
984 .${rootCss} .results-category-title.tags-title .filters-section {
985 display: flex;
986 justify-content: space-between;
987 width: 100%;
988 }
989
990 .${rootCss} .results-category-title.tags-title .filters-section .quantify-results-text {
991 padding-top: var(--space-xs);
992 padding-right: var(--space-xs);
993 }
994
995
996
997 .${rootCss} .fragment_85017 .petro-title .yellow-bar.bar-h2,
998 .${rootCss} .fragment_85017 .petro-title .yellow-bar.bar-h3 {
999 background-color: var(--text-secondary-accent, #FDC82F);
1000 }
1001
1002 .${rootCss} .title-filter-container {
1003 display: flex;
1004 justify-content: space-between;
1005 height: 68px;
1006 }
1007
1008 /* Order and Filter */
1009 .${rootCss} .order-filter-container {
1010 display: flex;
1011 }
1012
1013 .${rootCss} .filter-container,
1014 .${rootCss} .order-container {
1015 display: none;
1016 flex-shrink: 0;
1017 align-items: center;
1018 height: 45px;
1019 gap: var(--spacing-space-xxs, 8px);
1020 margin-right: var(--space-lg);
1021 }
1022
1023 .${rootCss} .filter-container.active,
1024 .${rootCss} .order-container.active {
1025 display: flex;
1026 }
1027
1028 body.high-contrast-active .${rootCss} .filter-container,
1029 body.high-contrast-active .${rootCss} .order-container {
1030 color: var(--color-neutral-200);
1031 }
1032
1033 .${rootCss} .filter-container #select-filter,
1034 .${rootCss} .order-container #select-order {
1035 display: flex;
1036 padding: var(--spacing-space-xxs, 8px) var(--spacing-space-xl, 40px) var(--spacing-space-xxs, 8px) var(--spacing-space-sm, 16px);
1037 align-items: center;
1038 gap: var(--spacing-space-md, 24px);
1039 align-self: stretch;
1040 border-radius: var(--border-radius-lg, 16px);
1041 border: 1px solid var(--border-color-light);
1042 appearance: none;
1043 -webkit-appearance: none;
1044 -moz-appearance: none;
1045 background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4NCiAgICA8cGF0aCBkPSJNMTMgNkw4IDExTDMgNiIgc3Ryb2tlPSIjNTI1MjUyIiBzdHJva2Utd2lkdGg9IjAuNzUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPg0KPC9zdmc+);
1046 background-repeat: no-repeat;
1047 background-position: 95%;
1048 }
1049
1050
1051 body.high-contrast-active .${rootCss} .filter-container #select-filter option,
1052 body.high-contrast-active .${rootCss} .order-container #select-order option {
1053 background-color: var(--color-neutral-200);
1054 }
1055
1056 /* renderCard */
1057 .${rootCss} .card-news-list {
1058 display: none;
1059 flex-wrap: wrap;
1060 gap: var(--space-lg);
1061 width: 100%;
1062 justify-content: flex-start;
1063 padding-top: var(--space-lg)
1064 }
1065
1066 .${rootCss} .card-news-list.active {
1067 display: flex;
1068 }
1069
1070 .${rootCss} .card-news-container {
1071 width: 300px;
1072 height: 370px;
1073 display: flex;
1074 flex-direction: column;
1075 flex-shrink: 0;
1076 align-items: flex-start;
1077 border-radius: var(--border-radius-lg);
1078 border: var(--border-width-hairline) solid var(--border-card-default, #EEE);
1079 background: var(--background-surface-level-01, #FFF);
1080 box-shadow: 0px 12px 60px -10px rgba(145, 147, 149, 0.12);
1081 overflow: hidden;
1082 scroll-snap-align: start;
1083 cursor: pointer;
1084 transition: border 300ms ease-in-out;
1085 text-decoration: none;
1086 position: relative;
1087 }
1088
1089 body.high-contrast-active .${rootCss} .card-news-container {
1090 border: var(--border-width-hairline) solid var(--border-card-default, #525252);
1091 background: var(--background-surface-level-01, #010101);
1092 }
1093
1094 .${rootCss} .card-news-container:hover {
1095 border: var(--border-width-hairline) solid rgb(0, 133, 66);
1096 }
1097
1098 body.high-contrast-active .${rootCss} .card-news-container:hover {
1099 border: var(--border-width-hairline) solid var(--border-card-default, #E4F7E8);
1100 }
1101
1102 .${rootCss} .card-news-container .card-category-link {
1103 position: absolute;
1104 top: 0;
1105 width: 100%;
1106 height: 100%;
1107 z-index: 3;
1108 }
1109
1110 .${rootCss} .card-news-container .card-news-thumb {
1111 position: relative;
1112 width: 100%;
1113 pointer-events: none;
1114 }
1115
1116 .${rootCss} .card-news-container .card-news-image {
1117 width: 100%;
1118 height: 168px;
1119 object-fit: cover;
1120
1121 pointer-events: none;
1122 }
1123
1124 .${rootCss} .card-news-container .card-news-category-container {
1125 position: relative;
1126 }
1127
1128 .${rootCss} .card-category-highlight-container .card-news-category-container .card-news-category,
1129 .${rootCss} .card-news-container .card-news-category-container .card-news-category {
1130 display: flex;
1131 justify-content: center;
1132 align-items: center;
1133 padding: var(--space-micro) var(--space-xs);
1134 position: absolute;
1135 z-index: 2;
1136 left: var(--space-md);
1137 top: -13px;
1138 border-radius: var(--border-radius-pill);
1139 background: linear-gradient(0deg, var(--background-surface-opacity-light-level-07, rgba(255, 255, 255, 0.96)) 0%, var(--background-surface-opacity-light-level-07, rgba(255, 255, 255, 0.96)) 100%), var(--default-sup-green-water, #006B65);
1140 box-shadow: 0px 2px 6px 0px rgba(0, 178, 169, 0.10);
1141 line-height: var(--line-height-lg, 144%);
1142 color: var(--default-sup-green-water, #006B65);
1143 white-space: nowrap;
1144
1145 pointer-events: none;
1146 }
1147
1148 body.high-contrast-active .${rootCss} .card-news-container .card-news-category-container .card-news-category {
1149 background: linear-gradient(0deg, var(--background-surface-opacity-light-level-07, #373737) 0%, var(--background-surface-opacity-light-level-07, #373737) 100%), var(--default-sup-green-water, #99E0DD);
1150 color: var(--default-sup-green-water, #99E0DD);
1151 }
1152
1153 .${rootCss} .card-news-container .card-news-category-container.no-image .card-news-category {
1154 position: relative;
1155 top: 0;
1156 left: 0;
1157 margin-left: var(--space-md);
1158 margin-top: var(--space-md);
1159 }
1160
1161 .${rootCss} .card-news-container .card-news-text-content {
1162 display: flex;
1163 padding: var(--space-lg, 32px) var(--space-md, 24px) var(--space-md, 24px) var(--space-md, 24px);
1164 flex-direction: column;
1165 justify-content: space-between;
1166 align-items: flex-start;
1167 flex: 1 0 0;
1168 align-self: stretch;
1169 z-index: 1;
1170
1171 pointer-events: none;
1172 }
1173
1174 .${rootCss} .card-news-container .card-news-text-content.no-image {
1175 padding-top: var(--space-sm);
1176 }
1177
1178 .${rootCss} .card-news-container .card-news-text-content .card-news-title {
1179 display: -webkit-box;
1180 -webkit-box-orient: vertical;
1181 -webkit-line-clamp: 4;
1182 align-self: stretch;
1183 overflow: hidden;
1184 color: var(--text-primary-default, #373737);
1185 text-overflow: ellipsis;
1186 margin: 0;
1187 }
1188
1189 body.high-contrast-active .${rootCss} .card-news-container .card-news-text-content .card-news-title {
1190 color: var(--text-primary-default, #FFF);
1191 }
1192
1193 .${rootCss} .card-news-container .card-news-text-content .card-news-info {
1194 display: flex;
1195 align-items: center;
1196 align-content: center;
1197 gap: var(--space-sm, 16px);
1198 align-self: stretch;
1199 flex-wrap: wrap;
1200 }
1201
1202 .${rootCss} .card-news-container .card-news-text-content .card-news-info .card-news-type,
1203 .${rootCss} .card-news-container .card-news-text-content .card-news-info .card-news-time-read {
1204 display: flex;
1205 align-items: center;
1206 gap: var(--space-xxs, 8px);
1207 }
1208
1209
1210 body.high-contrast-active .${rootCss} .results-category-title .petro-title {
1211 color: var(--text-primary-default, #FFF) !important;
1212 }
1213
1214 body.high-contrast-active .${rootCss} .fragment_85017 .petro-title .yellow-bar.bar-h2,
1215 body.high-contrast-active .${rootCss} .fragment_85017 .petro-title .yellow-bar.bar-h3 {
1216 background-color: var(--text-secondary-accent, #FFEEB3);
1217 }
1218
1219 .${rootCss} .card-news-list .card-news-container .overlay-card-highlight {
1220 display: none;
1221 }
1222
1223 .${rootCss} .card-news-list .card-news-container .graphism-card-highlight {
1224 display: none;
1225 }
1226
1227
1228 /* Card Highlights */
1229 .${rootCss} .card-news-list .card-news-container.card-highlights {
1230 width: 632px;
1231 height: 360px;
1232 justify-content: flex-end;
1233 }
1234
1235 .${rootCss} .card-news-list .card-news-container.card-highlights .overlay-card-highlight {
1236 display: block;
1237 position: absolute;
1238 top: 0;
1239 left: 0;
1240 width: 100%;
1241 height: 100%;
1242 background: linear-gradient(190deg, rgba(13, 19, 16, 0.00) 27.69%, rgba(13, 19, 16, 0.94) 63.29%);
1243 z-index: 1;
1244 opacity: 0.8;
1245
1246 pointer-events: none;
1247 }
1248
1249 .${rootCss} .card-news-list .card-news-container.card-highlights .graphism-card-highlight {
1250 display: block;
1251 position: absolute;
1252 bottom: 0;
1253 left: 0;
1254 z-index: 1;
1255
1256 pointer-events: none;
1257 }
1258
1259 .${rootCss} .card-news-list .card-news-container.card-highlights .card-news-title {
1260 color: var(--text-primary-default, #FFF);
1261 }
1262
1263 .${rootCss} .card-news-list .card-news-container.card-highlights .card-news-image {
1264 width: 632px;
1265 height: 360px;
1266 position: absolute;
1267 top: 0;
1268 left: 0;
1269
1270 pointer-events: none;
1271 }
1272
1273 .${rootCss} .card-news-list .card-news-container.card-highlights .card-news-thumb {
1274 height: 100%;
1275 }
1276
1277
1278 .${rootCss} .card-news-list .card-news-container.card-highlights .card-news-category {
1279 display: none;
1280 }
1281
1282 .${rootCss} .card-news-list .card-news-container.card-highlights .card-news-text-content {
1283 width: 632px;
1284 position: relative;
1285 height: 200px;
1286 flex-grow: revert;
1287 bottom: 30px;
1288 }
1289
1290 .${rootCss} .card-news-list .card-news-container.card-highlights .card-news-text-content .card-news-info {
1291 position: absolute;
1292 top: -1px;
1293 }
1294 /* *** End Card Highlights *** */
1295
1296 body.high-contrast-active .${rootCss} .card-news-container .card-news-text-content .card-news-info .card-news-type path {
1297 stroke: #D7D7D7;
1298 }
1299
1300 .${rootCss} .card-news-container .card-news-text-content .card-news-info .card-news-type .card-news-type-text,
1301 .${rootCss} .card-news-container .card-news-text-content .card-news-info .card-news-time-read .card-news-time-read-text {
1302 color: var(--text-tertiary-default, #959595);
1303 line-height: var(--line-height-lg, 144%);
1304 }
1305
1306 body.high-contrast-active .${rootCss} .card-news-container .card-news-text-content .card-news-info .card-news-type .card-news-type-text,
1307 body.high-contrast-active .${rootCss} .card-news-container .card-news-text-content .card-news-info .card-news-time-read .card-news-time-read-text {
1308 color: var(--text-tertiary-default, #EEE);
1309 }
1310
1311 .${rootCss} .card-news-container .card-news-text-content .card-news-info .card-news-time-read .card-news-icon-time-read {
1312 transform: translateY(-0.5px);
1313 }
1314
1315 body.high-contrast-active .${rootCss} .card-news-container .card-news-text-content .card-news-info .card-news-time-read .card-news-icon-time-read path {
1316 fill: #D7D7D7;
1317 }
1318
1319
1320
1321 .${rootCss} .quantify-results-text-number {
1322 color: var(--border-color-accent);
1323 }
1324
1325
1326 /* Liferay Pagination */
1327 .pagination-bar .pagination-items-per-page {
1328 display: none !important;
1329 }
1330
1331 .pagination-bar .pagination-results {
1332 display: none !important;
1333 }
1334
1335 .pagination-bar .pagination {
1336 width: 100%;
1337 display: flex;
1338 justify-content: center;
1339 margin-top: var(--space-xl);
1340 }
1341
1342 .pagination-bar .page-item {
1343 display: none !important;
1344 outline: none;
1345 display: flex;
1346 flex-direction: column;
1347 align-items: center;
1348 justify-content: center;
1349 width: var(--size-lg);
1350 height: var(--size-lg);
1351 border-radius: var(--border-radius-pill, 100px);
1352 color: var(--text-tertiary-default, #959595);
1353 background: transparent;
1354 border: var(--border-width-hairline) solid transparent;
1355 transition: background 300ms ease-in-out, border-color 300ms ease-in-out;
1356 }
1357
1358 .pagination-bar .page-item.active .page-link {
1359 background: transparent;
1360 }
1361
1362 .pagination-bar .page-item .page-link:hover{
1363 background: transparent;
1364 }
1365
1366 .pagination-bar .page-item:hover{
1367 border-color: var(--border-color-accent);
1368 background: transparent;
1369 }
1370
1371 .pagination-bar .page-item.round-border {
1372 border-radius: var(--radius-pill, 100px);
1373 border: 1px solid var(--border-color-accent);
1374 }
1375
1376 .pagination-bar .page-item.disabled.round-border {
1377 border: 1px solid var(--text-tertiary-default, #959595);
1378
1379 }
1380
1381 .pagination-bar .page-item.show-item {
1382 display: flex !important;
1383 }
1384
1385 .pagination-bar .page-item.disabled span span svg {
1386 stroke: #525252;
1387 }
1388
1389 .pagination-bar .page-item span span svg {
1390 stroke: var(--border-color-accent);
1391 }
1392
1393 .pagination-bar .page-item.disabled {
1394 pointer-events: none;
1395 }
1396
1397 .pagination-bar .page-item.disabled:hover{
1398 background: transparent;
1399 }
1400
1401 .pagination-bar .page-item.active {
1402 background: var(--background-surface-level-02, #F8F8F8);
1403 box-shadow: 0px 12px 60px -10px rgba(145, 147, 149, 0.12);
1404 border: var(--border-width-hairline) solid #F8F8F8;
1405 pointer-events: none;
1406 }
1407
1408
1409 .pagination-bar .page-item.active * {
1410 color: var(--border-color-accent);
1411 font-weight: 700;
1412 }
1413
1414 body.high-contrast-active .pagination-bar .page-item span span svg {
1415 stroke: var(--tertiary-default, #EEE) !important;
1416 }
1417
1418 body.high-contrast-active .pagination-bar * {
1419 color: var(--tertiary-default, #EEE) !important;
1420
1421 }
1422
1423 body.high-contrast-active .pagination-bar .page-item.round-border {
1424 border-color: var(--tertiary-default, #EEE) !important;
1425 }
1426
1427 body.high-contrast-active .pagination-bar .page-item.active {
1428 color: var(--tertiary-default, #EEE) !important;
1429 border: none;
1430 }
1431
1432 body.high-contrast-active .pagination-bar .page-item.active {
1433 background: var(--surface-level-02, #373737) !important;
1434 }
1435
1436 body.high-contrast-active .pagination-bar .page-item:hover{
1437 border-color: var(--tertiary-default, #EEE);
1438 }
1439
1440
1441 @media screen and (max-width: 1440px) {
1442
1443 .${rootCss} .cards-highlights-container {
1444 padding: 0 var(--space-big);
1445 }
1446 }
1447
1448 @media screen and (max-width: 1024px) {
1449 .${rootCss} .dates-category-container .category-top-session {
1450 display: grid;
1451 grid-template-areas:
1452 "banner"
1453 "text";
1454 grid-template-columns: 100%;
1455 }
1456
1457 .${rootCss} .text-container {
1458 grid-area: text;
1459 width: 100%;
1460 max-width: 100%;
1461 }
1462
1463 .${rootCss} .category-banner {
1464 grid-area: banner;
1465 margin: 0 auto var(--space-lg);
1466 }
1467
1468 }
1469
1470
1471
1472 @media screen and (max-width: 766px) {
1473 .${rootCss} .dates-category-container .category-top-session {
1474 padding: 0;
1475 }
1476
1477
1478 .${rootCss} .category-banner {
1479 height: 205px;
1480 width: 100%;
1481
1482 }
1483
1484 .${rootCss} .category-banner img {
1485 position: absolute;
1486 width: 100vw;
1487 left: 0;
1488 height: 205px;
1489 }
1490
1491 .${rootCss} .category-top-session .text-container {
1492 margin: var(--space-md) 0;
1493 flex-direction: column;
1494 align-items: flex-start;
1495 }
1496
1497 .${rootCss} .text-container .category-description {
1498 max-width: 100%;
1499 }
1500
1501 .${rootCss} .dates-category-container .category-top-session.with-image .text-container {
1502 max-width: 100%;
1503 }
1504
1505 .${rootCss} .cards-highlights-container {
1506 padding: 0 var(--space-lg);
1507 }
1508
1509 .${rootCss} .cards-highlights-container .card-category-highlight-container {
1510 width: 312px;
1511 }
1512
1513
1514 .${rootCss} .results-category-title.tags-title .filters-section {
1515 flex-direction: column;
1516 gap: var(--space-lg);
1517 }
1518
1519 .${rootCss} .title-filter-container {
1520 flex-direction: column;
1521 gap: var(--space-lg);
1522 height: fit-content;
1523 }
1524
1525
1526 .${rootCss} .filter-container.active,
1527 .${rootCss} .order-container.active {
1528 flex-direction: column;
1529 align-items: flex-start;
1530 }
1531
1532 .${rootCss} .filter-container.active #select-filter,
1533 .${rootCss} .order-container.active #select-order {
1534 align-self: flex-start;
1535 }
1536
1537
1538 .${rootCss} .card-news-list .card-news-container.card-highlights {
1539 width: 100%;
1540 }
1541
1542
1543 .${rootCss} .card-news-list .card-news-container.card-highlights .card-news-text-content {
1544 width: 100%;
1545 }
1546
1547
1548 .${rootCss} .card-news-list .card-news-container.card-highlights .card-news-image {
1549 width: 100%;
1550 }
1551
1552 }
1553
1554</style>
1555
1556<script>
1557 AUI().ready(function () {
1558
1559 const editMode = document.body.classList.contains('has-edit-mode-menu');
1560 const cardsList = document.querySelector('.${rootCss} .card-news-list');
1561
1562
1563 if (!editMode) {
1564 const cardsHighlightsListLinks = document.querySelectorAll('.${rootCss} .cards-highlights-container .card-category-highlight-container .cards-category-highlights-link');
1565 const cards = cardsList.querySelectorAll('.card-news-container');
1566
1567 cards.forEach((card, index) => {
1568 let cardLink = card.querySelector('a');
1569 cardsHighlightsListLinks.forEach((cardHighligh) => {
1570 //let cardLinkHref = cardLink.href.toString();
1571 if (cardLink.href.includes(cardHighligh.href)) {
1572 card.remove();
1573 }
1574 })
1575 })
1576
1577
1578 const firstImage = cardsList.querySelector('.card-news-container img');
1579 const firstContent = cardsList.querySelector('.card-news-container');
1580 const firstContentWithImage = null;
1581
1582
1583 if (firstImage) {
1584 // Card Highlight - List
1585 const firstContentWithImage = firstImage.parentElement.parentElement.parentElement;
1586
1587 if (firstContentWithImage) {
1588 let cloneElementWithImage = firstContentWithImage.cloneNode(true);
1589 const divSvg = document.createElement("div");
1590 divSvg.innerHTML = `<svg
1591 class="graphism-card-highlight" width="632" height="226" viewBox="0 0 632 226" fill="none" xmlns="http://www.w3.org/2000/svg">
1592 <g style="mix-blend-mode:multiply" opacity="0.5">
1593 <path d="M632 226L16 226C7.16345 226 0 218.837 0 210V0L516.247 42.7231C527.012 43.6139 536.601 49.8754 541.745 59.3732L632 226Z" fill="#00552A"/>
1594 </g>
1595 </svg>`;
1596 cloneElementWithImage.insertBefore(divSvg, cloneElementWithImage.firstChild);
1597 cloneElementWithImage.classList.add('card-highlights');
1598 cardsList.insertBefore(cloneElementWithImage, firstContent);
1599 firstContentWithImage.remove();
1600 }
1601 }
1602 }
1603
1604 cardsList.classList.add('active');
1605
1606 const url = new URL(window.location.href);
1607 const searchParams = url.searchParams;
1608
1609 // Order and Filters - Combos
1610 const orderContainer = document.querySelector('.${rootCss} .order-container');
1611 const filterContainer = document.querySelector('.${rootCss} .filter-container');
1612 const orderCombo = orderContainer.querySelector('#select-order');
1613 const filterCombo = filterContainer.querySelector('#select-filter');
1614
1615 // Order Functions
1616 const setOrder = (orderBy) => {
1617
1618 //const url = new URL(window.location.href);
1619 //const searchParams = url.searchParams;
1620
1621 searchParams.set('sort', orderBy);
1622 url.search = searchParams.toString();
1623 let newUrl = url.toString();
1624
1625 newUrl.includes("sort=createDate%25") && (newUrl = url.toString().replace("sort=createDate%25", "sort=createDate%"));
1626 window.location.href = newUrl;
1627 }
1628
1629 // Filter Functions
1630 const setFilter = (filterBy) => {
1631 if (+filterBy === 0 ) {
1632 searchParams.delete('categoryTypeNews')
1633 } else {
1634 searchParams.set('categoryTypeNews', filterBy);
1635 }
1636
1637 url.search = searchParams.toString();
1638 let newUrl = url.toString();
1639
1640 window.location.href = newUrl;
1641 }
1642
1643 const renderTypeOptions = (options) => {
1644 let actualFilter = searchParams.get('categoryTypeNews');
1645 options.forEach(typeItem => {
1646 let optionItem = document.createElement('option');
1647 optionItem.classList.add('paragraph-sm-regular');
1648 optionItem.setAttribute("value", typeItem.id);
1649
1650 if (+typeItem.id == +actualFilter) {
1651 optionItem.setAttribute('selected', '');
1652 }
1653
1654 let optionItemName = document.createTextNode(typeItem.name);
1655 optionItem.appendChild(optionItemName);
1656
1657 filterCombo.appendChild(optionItem);
1658 })
1659 }
1660
1661
1662 async function getTypeNews(vocabularyId) {
1663 try {
1664 const restResponse = await fetch(`/o/headless-admin-taxonomy/v1.0/taxonomy-vocabularies/${typeOfNewsVocabularyId}/taxonomy-categories?fields=id%2Cname`, {
1665 headers: {
1666 "x-csrf-token": Liferay.authToken,
1667 'accept': 'application/json'
1668 },
1669 method: "GET",
1670 });
1671
1672
1673 const eventData = await restResponse.json();
1674
1675 renderTypeOptions(eventData.items);
1676
1677 } catch (error) {
1678 console.error("Error connecting to vocabularies API:", error);
1679 }
1680 }
1681
1682 async function getRenderData() {
1683 await getTypeNews();
1684 }
1685
1686 getRenderData();
1687
1688 const orderComboOptions = orderCombo.querySelectorAll('option');
1689 const filterComboOptions = filterCombo.querySelectorAll('option');
1690
1691
1692 orderComboOptions.forEach((item) => {
1693
1694 let actualSort = searchParams.get('sort') ? searchParams.get('sort').replace(/\+/g, '%2B') : '';
1695 if (item.value === actualSort) {
1696 item.setAttribute('selected', '');
1697 }
1698
1699 })
1700
1701 orderCombo.addEventListener('change', (item) => {
1702 setOrder(item.target.value);
1703 })
1704
1705 filterCombo.addEventListener('change', (item) => {
1706 setFilter(item.target.value);
1707 })
1708
1709
1710
1711 orderContainer.classList.add('active');
1712 filterContainer.classList.add('active');
1713
1714 // *******************************************
1715 const cards = cardsList.querySelectorAll('.card-news-container');
1716
1717 if (cards.length == 0) {
1718 let noItemMsg = document.createElement('p');
1719 let msg = document.createTextNode('Nenhum resultado encontrado para o filtro selecionado além do(s) card(s) em destaque!');
1720 noItemMsg.classList.add('paragraph-sm-regular');
1721
1722 noItemMsg.appendChild(msg);
1723
1724 cardsList.appendChild(noItemMsg);
1725 }
1726
1727 // Liferay Pagination Edits:
1728 const paginationItens = document.querySelectorAll('.pagination-bar .pagination .page-item');
1729
1730 if (paginationItens.length > 0) {
1731 paginationItens[0].querySelector('span span').innerHTML=`<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
1732 <path d="M13.5 8H2.5M2.5 8L7 3.5M2.5 8L7 12.5" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
1733 </svg>`;
1734
1735 paginationItens[0].classList.add('round-border');
1736
1737 paginationItens[(paginationItens.length - 1)].querySelector('span span').innerHTML=`<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
1738 <path d="M2.5 8H13.5M13.5 8L9 3.5M13.5 8L9 12.5" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
1739 </svg>`;
1740
1741 paginationItens[(paginationItens.length - 1)].classList.add('round-border');
1742
1743
1744 paginationItens.forEach(item => {
1745 item.classList.add('show-item');
1746 });
1747
1748 }
1749 });
1750
1751
1752AUI().ready(() => {
1753 function setLinks${contentNumber}() {
1754
1755 const allCards = document.querySelectorAll(".${rootCss} .card-news-container");
1756 allCards.forEach((card) => {
1757 card.addEventListener('click', (event) => {
1758 card.querySelector('a').click();
1759 });
1760 })
1761
1762 document.querySelector('.${rootCss} .card-news-list').classList.add('active');
1763
1764 }
1765
1766 setLinks${contentNumber}()
1767});
1768
1769</script>
1770
1771
1772</#if>
Escolha um Canal:
Navegue nas Seções:
Acessibilidade
Idioma:
Selecione um idioma: