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