Página inicial Nossa Energia Nossa Energia
Faça uma busca:
Mais pesquisados
Preço dos combustíveis
Pré-Sal
Time Petrobras
Um erro ocorreu enquanto processava o modelo.
Java method "com.sun.proxy.$Proxy194.getGroupVocabularies(long)" threw an exception when invoked on com.sun.proxy.$Proxy194 object "com.liferay.portlet.asset.service.impl.AssetVocabularyServiceImpl@66982168"; 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?? && categoryDates.parentTaxonomyVocabulary?? && (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">${cardData.typeOfNews}</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 && (categoryDates.name != "" || categoryId?? && categoryId?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">${highlightTypeNews}</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} .petro-title { 771 font-family: var(--font-family-base); 772 font-style: normal; 773 font-weight: 700; 774 color: #373737; 775 font-size: 22px; 776 } 777 778 .${rootCss} .petro-title h3 { 779 font-size: var(--font-size-lg); 780 } 781 782 .${rootCss} .text-container { 783 display: flex; 784 justify-content: space-between; 785 align-items: center; 786 gap: var(--space-lg); 787 } 788 789 .${rootCss} .dates-category-container .category-top-session.with-image .text-container { 790 flex-direction: column; 791 align-items: flex-start; 792 max-width: 100%; 793 } 794 795 body.high-contrast-active .${rootCss} .text-container { 796 color: var(--text-primary-default, #FFF) !important; 797 } 798 799 .${rootCss} .text-container .category-title { 800 width: 480px; 801 flex-shrink: 0; 802 } 803 804 .${rootCss} .text-container .category-description { 805 padding-top: var(--space-xs); 806 max-width: 70%; 807 } 808 809 .${rootCss} .category-banner { 810 width: 455px; 811 height: 256px; 812 flex-shrink: 0; 813 } 814 815 .${rootCss} .category-banner img { 816 width: 100%; 817 height: 100%; 818 object-fit: cover; 819 } 820 821 822 .${rootCss} .cards-highlights-container { 823 display: flex; 824 justify-content: space-between; 825 height: 420px; 826 width: 100%; 827 max-width: 1440px; 828 margin: var(--space-lg) auto var(--space-xl); 829 gap: var(--space-md); 830 overflow-x: auto; 831 832 scrollbar-color: #008542 #E7E9EF; 833 scrollbar-width: auto; 834 } 835 836 body.high-contrast-active .${rootCss} .cards-highlights-container { 837 scrollbar-color: var(--color-neutral-600) var(--color-neutral-800); 838 } 839 840 .${rootCss} .cards-highlights-container::-webkit-scrollbar { 841 background: #fff; 842 width: 15px; 843 height: 15px; 844 } 845 846 .${rootCss} .card-category-highlight-container { 847 width: 410px; 848 height: 370px; 849 display: flex; 850 flex-direction: column; 851 flex-shrink: 0; 852 border-radius: var(--border-radius-lg); 853 border: var(--border-width-hairline) solid var(--border-card-default, #EEE); 854 background: var(--background-surface-level-01, #FFF); 855 box-shadow: 0px 12px 60px -10px rgba(145, 147, 149, 0.12); 856 overflow: hidden; 857 scroll-snap-align: start; 858 cursor: pointer; 859 transition: border 300ms ease-in-out; 860 text-decoration: none; 861 position: relative; 862 } 863 864 865 .${rootCss} .card-category-highlight-container:hover { 866 border: var(--border-width-hairline) solid rgb(0, 133, 66); 867 } 868 869 870 body.high-contrast-active .${rootCss} .card-category-highlight-container { 871 border: var(--border-width-hairline) solid var(--border-card-default, #525252); 872 background: var(--background-surface-level-01, #010101); 873 } 874 875 876 body.high-contrast-active .${rootCss} .card-category-highlight-container:hover { 877 border: var(--border-width-hairline) solid var(--border-card-default, #E4F7E8); 878 } 879 880 881 body.high-contrast-active .${rootCss} .card-category-highlight-container * { 882 color: var(--text-primary-default, #FFF) !important; 883 } 884 885 .${rootCss} .cards-highlights-container .card-category-highlight-container .card-category-link { 886 position: absolute; 887 top: 0; 888 width: 100%; 889 height: 100%; 890 z-index: 1; 891 } 892 893 .${rootCss} .card-category-highlight-container .card-news-image { 894 position: relative; 895 width: 100%; 896 } 897 898 .${rootCss} .card-category-highlight-container .no-image { 899 height: 50px; 900 } 901 902 .${rootCss} .card-category-highlight-container .card-news-image { 903 width: 100%; 904 height: 168px; 905 object-fit: cover; 906 } 907 908 .${rootCss} .card-category-highlight-container .card-news-category-container { 909 position: relative; 910 } 911 912 .${rootCss} .card-category-highlight-container .card-news-category-container .card-news-category { 913 display: flex; 914 justify-content: center; 915 align-items: center; 916 padding: var(--space-micro) var(--space-xs); 917 position: absolute; 918 z-index: 2; 919 left: var(--space-md); 920 top: -13px; 921 border-radius: var(--border-radius-pill); 922 923 box-shadow: 0px 2px 6px 0px rgba(0, 178, 169, 0.10); 924 line-height: var(--line-height-lg, 144%); 925 color: var(--default-sup-green-water, #006B65); 926 white-space: nowrap; 927 } 928 929 .${rootCss} .card-category-highlight-container .card-news-text-content { 930 display: flex; 931 padding: var(--space-lg, 32px) var(--space-md, 24px) var(--space-md, 24px) var(--space-md, 24px); 932 flex-direction: column; 933 justify-content: space-between; 934 align-items: flex-start; 935 flex: 1 0 0; 936 align-self: stretch; 937 } 938 939 .${rootCss} .card-category-highlight-container .card-news-text-content .card-news-title { 940 display: -webkit-box; 941 -webkit-box-orient: vertical; 942 -webkit-line-clamp: 4; 943 align-self: stretch; 944 overflow: hidden; 945 color: var(--text-primary-default, #373737); 946 text-overflow: ellipsis; 947 margin: 0; 948 } 949 950 .${rootCss} .card-category-highlight-container .card-news-text-content .card-news-info { 951 display: flex; 952 align-items: center; 953 align-content: center; 954 gap: var(--space-sm, 16px); 955 align-self: stretch; 956 flex-wrap: wrap; 957 } 958 959 .${rootCss} .card-category-highlight-container .card-news-text-content .card-news-info .card-news-type, 960 .${rootCss} .card-category-highlight-container .card-news-text-content .card-news-info .card-news-time-read { 961 display: flex; 962 align-items: center; 963 gap: var(--space-xxs, 8px); 964 } 965 966 .${rootCss} .card-category-highlight-container .card-news-text-content .card-news-info .card-news-type .card-news-type-text, 967 .${rootCss} .card-category-highlight-container .card-news-text-content .card-news-info .card-news-time-read .card-news-time-read-text { 968 color: var(--text-tertiary-default, #959595); 969 line-height: var(--line-height-lg, 144%); 970 } 971 972 .${rootCss} .card-category-highlight-container .card-news-text-content .card-news-info .card-news-type, 973 .${rootCss} .card-category-highlight-container .card-news-text-content .card-news-info .card-news-time-read { 974 display: flex; 975 align-items: center; 976 gap: var(--space-xxs, 8px); 977 } 978 979 .${rootCss} .card-category-highlight-container .card-news-text-content .card-news-info .card-news-type .card-news-type-text, 980 .${rootCss} .card-category-highlight-container .card-news-text-content .card-news-info .card-news-time-read .card-news-time-read-text { 981 color: var(--text-tertiary-default, #959595); 982 line-height: var(--line-height-lg, 144%); 983 } 984 985 /* END BANNER CATEGORIES AND HIGHLIGHTS SESSION */ 986 987 988 989 .${rootCss} .results-category-title.tags-title { 990 background: var(--color-neutral-300); 991 padding: var(--space-xl) 0; 992 993 } 994 995 996 .${rootCss} .results-category-title.tags-title .filters-section { 997 display: flex; 998 justify-content: space-between; 999 width: 100%; 1000 } 1001 1002 .${rootCss} .results-category-title.tags-title .filters-section .quantify-results-text { 1003 padding-top: var(--space-xs); 1004 padding-right: var(--space-xs); 1005 } 1006 1007 1008 1009 .${rootCss} .fragment_85017 .petro-title .yellow-bar.bar-h2, 1010 .${rootCss} .fragment_85017 .petro-title .yellow-bar.bar-h3 { 1011 background-color: var(--text-secondary-accent, #FDC82F); 1012 } 1013 1014 .${rootCss} .title-filter-container { 1015 display: flex; 1016 justify-content: space-between; 1017 height: 68px; 1018 } 1019 1020 /* Order and Filter */ 1021 .${rootCss} .order-filter-container { 1022 display: flex; 1023 } 1024 1025 .${rootCss} .filter-container, 1026 .${rootCss} .order-container { 1027 display: none; 1028 flex-shrink: 0; 1029 align-items: center; 1030 height: 45px; 1031 gap: var(--spacing-space-xxs, 8px); 1032 margin-right: var(--space-lg); 1033 } 1034 1035 .${rootCss} .filter-container.active, 1036 .${rootCss} .order-container.active { 1037 display: flex; 1038 } 1039 1040 body.high-contrast-active .${rootCss} .filter-container, 1041 body.high-contrast-active .${rootCss} .order-container { 1042 color: var(--color-neutral-200); 1043 } 1044 1045 .${rootCss} .filter-container #select-filter, 1046 .${rootCss} .order-container #select-order { 1047 display: flex; 1048 padding: var(--spacing-space-xxs, 8px) var(--spacing-space-xl, 40px) var(--spacing-space-xxs, 8px) var(--spacing-space-sm, 16px); 1049 align-items: center; 1050 gap: var(--spacing-space-md, 24px); 1051 align-self: stretch; 1052 border-radius: var(--border-radius-lg, 16px); 1053 border: 1px solid var(--border-color-light); 1054 appearance: none; 1055 -webkit-appearance: none; 1056 -moz-appearance: none; 1057 background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4NCiAgICA8cGF0aCBkPSJNMTMgNkw4IDExTDMgNiIgc3Ryb2tlPSIjNTI1MjUyIiBzdHJva2Utd2lkdGg9IjAuNzUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPg0KPC9zdmc+); 1058 background-repeat: no-repeat; 1059 background-position: 95%; 1060 transition: transform 0.3s ease-in-out; 1061 color: #373737; 1062 font-weight: 400; 1063 font-size: 14px; 1064 } 1065 1066 .${rootCss} .paragraph-sm-regular { 1067 font-size: var(--font-size-xxxs); 1068 line-height: var(--line-height-sm); 1069 font-weight: var(--font-weight-regular); 1070 color: #525252; 1071 } 1072 1073 /* Quando o select está aberto */ 1074 .order-container.open #select-order { 1075 background-image: url("data:image/svg+xml;base64,PHN2ZyB3d2lkdGg9IjE2IiBoZWlnaHQ9IjE2IiB2aWV3Qm94PSIwIDAgMTYgMTYiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+DQo8cGF0aCBkPSJNMTMgMTBMOCA1TDMgMTAiIHN0cm9rZT0iIzUyNTI1MiIgc3Ryb2tlLXdpZHRoPSIwLjc1IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4NCjwvc3ZnPg=="); 1076 } 1077 1078 .order-container.open #select-filter { 1079 background-image: url("data:image/svg+xml;base64,PHN2ZyB3d2lkdGg9IjE2IiBoZWlnaHQ9IjE2IiB2aWV3Qm94PSIwIDAgMTYgMTYiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+DQo8cGF0aCBkPSJNMTMgMTBMOCA1TDMgMTAiIHN0cm9rZT0iIzUyNTI1MiIgc3Ryb2tlLXdpZHRoPSIwLjc1IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4NCjwvc3ZnPg=="); 1080 } 1081 1082 1083 body.high-contrast-active .${rootCss} .filter-container #select-filter option, 1084 body.high-contrast-active .${rootCss} .order-container #select-order option { 1085 background-color: var(--color-neutral-200); 1086 } 1087 1088 /* renderCard */ 1089 .${rootCss} .card-news-list { 1090 display: none; 1091 flex-wrap: wrap; 1092 gap: var(--space-lg); 1093 width: 100%; 1094 justify-content: flex-start; 1095 padding-top: var(--space-lg) 1096 } 1097 1098 .${rootCss} .card-news-list.active { 1099 display: flex; 1100 } 1101 1102 .${rootCss} .card-news-container { 1103 width: 300px; 1104 height: 370px; 1105 display: flex; 1106 flex-direction: column; 1107 flex-shrink: 0; 1108 align-items: flex-start; 1109 border-radius: var(--border-radius-lg); 1110 border: var(--border-width-hairline) solid var(--border-card-default, #EEE); 1111 background: var(--background-surface-level-01, #FFF); 1112 box-shadow: 0px 12px 60px -10px rgba(145, 147, 149, 0.12); 1113 overflow: hidden; 1114 scroll-snap-align: start; 1115 cursor: pointer; 1116 transition: border 300ms ease-in-out; 1117 text-decoration: none; 1118 position: relative; 1119 } 1120 1121 body.high-contrast-active .${rootCss} .card-news-container { 1122 border: var(--border-width-hairline) solid var(--border-card-default, #525252); 1123 background: var(--background-surface-level-01, #010101); 1124 } 1125 1126 .${rootCss} .card-news-container:hover { 1127 border: var(--border-width-hairline) solid rgb(0, 133, 66); 1128 } 1129 1130 body.high-contrast-active .${rootCss} .card-news-container:hover { 1131 border: var(--border-width-hairline) solid var(--border-card-default, #E4F7E8); 1132 } 1133 1134 .${rootCss} .card-news-container .card-category-link { 1135 position: absolute; 1136 top: 0; 1137 width: 100%; 1138 height: 100%; 1139 z-index: 3; 1140 } 1141 1142 .${rootCss} .card-news-container .card-news-thumb { 1143 position: relative; 1144 width: 100%; 1145 pointer-events: none; 1146 } 1147 1148 .${rootCss} .card-news-container .card-news-image { 1149 width: 100%; 1150 height: 168px; 1151 object-fit: cover; 1152 1153 pointer-events: none; 1154 } 1155 1156 .${rootCss} .card-news-container .card-news-category-container { 1157 position: relative; 1158 } 1159 1160 .${rootCss} .card-category-highlight-container .card-news-category-container .card-news-category, 1161 .${rootCss} .card-news-container .card-news-category-container .card-news-category { 1162 display: flex; 1163 justify-content: center; 1164 align-items: center; 1165 padding: var(--space-micro) var(--space-xs); 1166 position: absolute; 1167 z-index: 2; 1168 left: var(--space-md); 1169 top: -13px; 1170 border-radius: var(--border-radius-pill); 1171 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); 1172 box-shadow: 0px 2px 6px 0px rgba(0, 178, 169, 0.10); 1173 line-height: var(--line-height-lg, 144%); 1174 color: var(--default-sup-green-water, #006B65); 1175 white-space: nowrap; 1176 1177 pointer-events: none; 1178 } 1179 1180 body.high-contrast-active .${rootCss} .card-news-container .card-news-category-container .card-news-category { 1181 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); 1182 color: var(--default-sup-green-water, #99E0DD); 1183 } 1184 1185 .${rootCss} .card-news-container .card-news-category-container.no-image .card-news-category { 1186 position: relative; 1187 top: 0; 1188 left: 0; 1189 margin-left: var(--space-md); 1190 margin-top: var(--space-md); 1191 } 1192 1193 .${rootCss} .card-news-container .card-news-text-content { 1194 display: flex; 1195 padding: var(--space-lg, 32px) var(--space-md, 24px) var(--space-md, 24px) var(--space-md, 24px); 1196 flex-direction: column; 1197 justify-content: space-between; 1198 align-items: flex-start; 1199 flex: 1 0 0; 1200 align-self: stretch; 1201 z-index: 1; 1202 1203 pointer-events: none; 1204 } 1205 1206 .${rootCss} .card-news-container .card-news-text-content.no-image { 1207 padding-top: var(--space-sm); 1208 } 1209 1210 .${rootCss} .card-news-container .card-news-text-content .card-news-title { 1211 display: -webkit-box; 1212 -webkit-box-orient: vertical; 1213 -webkit-line-clamp: 4; 1214 align-self: stretch; 1215 overflow: hidden; 1216 color: var(--text-primary-default, #373737); 1217 text-overflow: ellipsis; 1218 margin: 0; 1219 } 1220 1221 body.high-contrast-active .${rootCss} .card-news-container .card-news-text-content .card-news-title { 1222 color: var(--text-primary-default, #FFF); 1223 } 1224 1225 .${rootCss} .card-news-container .card-news-text-content .card-news-info { 1226 display: flex; 1227 align-items: center; 1228 align-content: center; 1229 gap: var(--space-sm, 16px); 1230 align-self: stretch; 1231 flex-wrap: wrap; 1232 } 1233 1234 .${rootCss} .card-news-container .card-news-text-content .card-news-info .card-news-type, 1235 .${rootCss} .card-news-container .card-news-text-content .card-news-info .card-news-time-read { 1236 display: flex; 1237 align-items: center; 1238 gap: var(--space-xxs, 8px); 1239 } 1240 1241 1242 body.high-contrast-active .${rootCss} .results-category-title .petro-title { 1243 color: var(--text-primary-default, #FFF) !important; 1244 } 1245 1246 body.high-contrast-active .${rootCss} .fragment_85017 .petro-title .yellow-bar.bar-h2, 1247 body.high-contrast-active .${rootCss} .fragment_85017 .petro-title .yellow-bar.bar-h3 { 1248 background-color: var(--text-secondary-accent, #FFEEB3); 1249 } 1250 1251 .${rootCss} .card-news-list .card-news-container .overlay-card-highlight { 1252 display: none; 1253 } 1254 1255 .${rootCss} .card-news-list .card-news-container .graphism-card-highlight { 1256 display: none; 1257 } 1258 1259 1260 /* Card Highlights */ 1261 .${rootCss} .card-news-list .card-news-container.card-highlights { 1262 width: 632px; 1263 height: 360px; 1264 justify-content: flex-end; 1265 } 1266 1267 .${rootCss} .card-news-list .card-news-container.card-highlights .overlay-card-highlight { 1268 display: block; 1269 position: absolute; 1270 top: 0; 1271 left: 0; 1272 width: 100%; 1273 height: 100%; 1274 background: linear-gradient(190deg, rgba(13, 19, 16, 0.00) 27.69%, rgba(13, 19, 16, 0.94) 63.29%); 1275 z-index: 1; 1276 opacity: 0.8; 1277 1278 pointer-events: none; 1279 } 1280 1281 .${rootCss} .card-news-list .card-news-container.card-highlights .graphism-card-highlight { 1282 display: block; 1283 position: absolute; 1284 bottom: 0; 1285 left: 0; 1286 z-index: 1; 1287 1288 pointer-events: none; 1289 } 1290 1291 .${rootCss} .card-news-list .card-news-container.card-highlights .card-news-title { 1292 color: var(--text-primary-default, #FFF); 1293 } 1294 1295 .${rootCss} .card-news-list .card-news-container.card-highlights .card-news-image { 1296 width: 632px; 1297 height: 360px; 1298 position: absolute; 1299 top: 0; 1300 left: 0; 1301 1302 pointer-events: none; 1303 } 1304 1305 .${rootCss} .card-news-list .card-news-container.card-highlights .card-news-thumb { 1306 height: 100%; 1307 } 1308 1309 1310 .${rootCss} .card-news-list .card-news-container.card-highlights .card-news-category { 1311 display: none; 1312 } 1313 1314 .${rootCss} .card-news-list .card-news-container.card-highlights .card-news-text-content { 1315 width: 632px; 1316 position: relative; 1317 height: 200px; 1318 flex-grow: revert; 1319 bottom: 30px; 1320 } 1321 1322 .${rootCss} .card-news-list .card-news-container.card-highlights .card-news-text-content .card-news-info { 1323 position: absolute; 1324 top: -1px; 1325 } 1326 /* *** End Card Highlights *** */ 1327 1328 body.high-contrast-active .${rootCss} .card-news-container .card-news-text-content .card-news-info .card-news-type path { 1329 stroke: #D7D7D7; 1330 } 1331 1332 .${rootCss} .card-news-container .card-news-text-content .card-news-info .card-news-type .card-news-type-text, 1333 .${rootCss} .card-news-container .card-news-text-content .card-news-info .card-news-time-read .card-news-time-read-text { 1334 color: var(--text-tertiary-default, #959595); 1335 line-height: var(--line-height-lg, 144%); 1336 } 1337 1338 body.high-contrast-active .${rootCss} .card-news-container .card-news-text-content .card-news-info .card-news-type .card-news-type-text, 1339 body.high-contrast-active .${rootCss} .card-news-container .card-news-text-content .card-news-info .card-news-time-read .card-news-time-read-text { 1340 color: var(--text-tertiary-default, #EEE); 1341 } 1342 1343 .${rootCss} .card-news-container .card-news-text-content .card-news-info .card-news-time-read .card-news-icon-time-read { 1344 transform: translateY(-0.5px); 1345 } 1346 1347 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 { 1348 fill: #D7D7D7; 1349 } 1350 1351 1352 1353 .${rootCss} .quantify-results-text-number { 1354 color: var(--border-color-accent); 1355 } 1356 1357 1358 /* Liferay Pagination */ 1359 .pagination-bar { 1360 justify-content: center; 1361 } 1362 1363 .pagination-bar .pagination-items-per-page { 1364 display: none !important; 1365 } 1366 1367 .pagination-bar .pagination-results { 1368 display: none !important; 1369 } 1370 1371 .pagination-bar .pagination { 1372 width: 100%; 1373 display: flex; 1374 justify-content: center; 1375 margin-top: var(--space-xl); 1376 } 1377 1378 .pagination-bar .page-item { 1379 display: none !important; 1380 outline: none; 1381 display: flex; 1382 flex-direction: column; 1383 align-items: center; 1384 justify-content: center; 1385 width: var(--size-lg); 1386 height: var(--size-lg); 1387 border-radius: var(--border-radius-pill, 100px); 1388 color: var(--text-tertiary-default, #959595); 1389 background: transparent; 1390 border: var(--border-width-hairline) solid transparent; 1391 transition: background 300ms ease-in-out, border-color 300ms ease-in-out; 1392 } 1393 1394 .pagination-bar .page-item.active .page-link { 1395 background: transparent; 1396 } 1397 1398 .pagination-bar .page-item .page-link:hover{ 1399 background: transparent; 1400 } 1401 1402 .pagination-bar .page-item:hover{ 1403 border-color: var(--border-color-accent); 1404 background: transparent; 1405 } 1406 1407 .pagination-bar .page-item.round-border { 1408 border-radius: var(--radius-pill, 100px); 1409 border: 1px solid var(--border-color-accent); 1410 } 1411 1412 .pagination-bar .page-item.disabled.round-border { 1413 border: 1px solid var(--text-tertiary-default, #959595); 1414 1415 } 1416 1417 .pagination-bar .page-item.show-item { 1418 display: flex !important; 1419 } 1420 1421 .pagination-bar .page-item.disabled span span svg { 1422 stroke: #525252; 1423 } 1424 1425 .pagination-bar .page-item span span svg { 1426 stroke: var(--border-color-accent); 1427 } 1428 1429 .pagination-bar .page-item.disabled { 1430 pointer-events: none; 1431 } 1432 1433 .pagination-bar .page-item.disabled:hover{ 1434 background: transparent; 1435 } 1436 1437 .pagination-bar .page-item.active { 1438 background: var(--background-surface-level-02, #F8F8F8); 1439 box-shadow: 0px 12px 60px -10px rgba(145, 147, 149, 0.12); 1440 border: var(--border-width-hairline) solid #F8F8F8; 1441 pointer-events: none; 1442 } 1443 1444 1445 .pagination-bar .page-item.active * { 1446 color: var(--border-color-accent); 1447 font-weight: 700; 1448 } 1449 1450 body.high-contrast-active .pagination-bar .page-item span span svg { 1451 stroke: var(--tertiary-default, #EEE) !important; 1452 } 1453 1454 body.high-contrast-active .pagination-bar * { 1455 color: var(--tertiary-default, #EEE) !important; 1456 1457 } 1458 1459 body.high-contrast-active .pagination-bar .page-item.round-border { 1460 border-color: var(--tertiary-default, #EEE) !important; 1461 } 1462 1463 body.high-contrast-active .pagination-bar .page-item.active { 1464 color: var(--tertiary-default, #EEE) !important; 1465 border: none; 1466 } 1467 1468 body.high-contrast-active .pagination-bar .page-item.active { 1469 background: var(--surface-level-02, #373737) !important; 1470 } 1471 1472 body.high-contrast-active .pagination-bar .page-item:hover{ 1473 border-color: var(--tertiary-default, #EEE); 1474 } 1475 1476 1477 @media screen and (max-width: 1440px) { 1478 1479 .${rootCss} .cards-highlights-container { 1480 padding: 0 var(--space-big); 1481 } 1482 } 1483 1484 @media screen and (max-width: 1024px) { 1485 .${rootCss} .dates-category-container .category-top-session { 1486 display: grid; 1487 grid-template-areas: 1488 "banner" 1489 "text"; 1490 grid-template-columns: 100%; 1491 } 1492 1493 .${rootCss} .text-container { 1494 grid-area: text; 1495 width: 100%; 1496 max-width: 100%; 1497 } 1498 1499 .${rootCss} .category-banner { 1500 grid-area: banner; 1501 margin: 0 auto var(--space-lg); 1502 } 1503 1504 } 1505 1506 1507 1508 @media screen and (max-width: 766px) { 1509 .${rootCss} .dates-category-container .category-top-session { 1510 padding: 0; 1511 } 1512 1513 1514 .${rootCss} .category-banner { 1515 height: 205px; 1516 width: 100%; 1517 1518 } 1519 1520 .${rootCss} .category-banner img { 1521 position: absolute; 1522 width: 100vw; 1523 left: 0; 1524 height: 205px; 1525 } 1526 1527 .${rootCss} .category-top-session .text-container { 1528 margin: var(--space-md) 0; 1529 flex-direction: column; 1530 align-items: flex-start; 1531 } 1532 1533 .${rootCss} .text-container .category-description { 1534 max-width: 100%; 1535 } 1536 1537 .${rootCss} .dates-category-container .category-top-session.with-image .text-container { 1538 max-width: 100%; 1539 } 1540 1541 .${rootCss} .cards-highlights-container { 1542 padding: 0 var(--space-lg); 1543 } 1544 1545 .${rootCss} .cards-highlights-container .card-category-highlight-container { 1546 width: 312px; 1547 } 1548 1549 1550 .${rootCss} .results-category-title.tags-title .filters-section { 1551 flex-direction: column; 1552 gap: var(--space-lg); 1553 } 1554 1555 .${rootCss} .title-filter-container { 1556 flex-direction: column; 1557 gap: var(--space-lg); 1558 height: fit-content; 1559 margin-bottom: 22px; 1560 } 1561 1562 1563 .${rootCss} .filter-container.active, 1564 .${rootCss} .order-container.active { 1565 flex-direction: column; 1566 align-items: flex-start; 1567 } 1568 1569 .${rootCss} .filter-container.active #select-filter, 1570 .${rootCss} .order-container.active #select-order { 1571 align-self: flex-start; 1572 } 1573 1574 1575 .${rootCss} .card-news-list .card-news-container.card-highlights { 1576 width: 100%; 1577 } 1578 1579 1580 .${rootCss} .card-news-list .card-news-container.card-highlights .card-news-text-content { 1581 width: 100%; 1582 } 1583 1584 1585 .${rootCss} .card-news-list .card-news-container.card-highlights .card-news-image { 1586 width: 100%; 1587 } 1588 1589 .${rootCss} .results-category-title { 1590 height: 62px; 1591 } 1592 1593 .${rootCss} .filter-container, 1594 .${rootCss} .order-container { 1595 margin-right: var(--space-sm); 1596 } 1597 } 1598 1599</style> 1600 1601<script> 1602 AUI().ready(function () { 1603 1604 const editMode = document.body.classList.contains('has-edit-mode-menu'); 1605 const cardsList = document.querySelector('.${rootCss} .card-news-list'); 1606 1607 1608 if (!editMode) { 1609 const cardsHighlightsListLinks = document.querySelectorAll('.${rootCss} .cards-highlights-container .card-category-highlight-container .cards-category-highlights-link'); 1610 const cards = cardsList.querySelectorAll('.card-news-container'); 1611 1612 /*cards.forEach((card, index) => { 1613 let cardLink = card.querySelector('a'); 1614 cardsHighlightsListLinks.forEach((cardHighligh) => { 1615 //let cardLinkHref = cardLink.href.toString(); 1616 if (cardLink.href.includes(cardHighligh.href)) { 1617 card.remove(); 1618 } 1619 }) 1620 })*/ 1621 1622 const cardsToRemove = []; 1623 1624 cards.forEach((card) => { 1625 let cardLink = card.querySelector('a'); 1626 if (!cardLink) return; 1627 1628 cardsHighlightsListLinks.forEach((cardHighlight) => { 1629 if (cardHighlight.href && cardLink.href.includes(cardHighlight.href)) { 1630 cardsToRemove.push(card); 1631 } 1632 }); 1633 }); 1634 1635 cardsToRemove.forEach((card) => card.remove()); 1636 1637 1638 1639 const firstImage = cardsList.querySelector('.card-news-container img'); 1640 const firstContent = cardsList.querySelector('.card-news-container'); 1641 const firstContentWithImage = null; 1642 1643 1644 if (firstImage) { 1645 // Card Highlight - List 1646 const firstContentWithImage = firstImage.parentElement.parentElement.parentElement; 1647 1648 if (firstContentWithImage) { 1649 let cloneElementWithImage = firstContentWithImage.cloneNode(true); 1650 const divSvg = document.createElement("div"); 1651 divSvg.innerHTML = `<svg 1652 class="graphism-card-highlight" width="632" height="226" viewBox="0 0 632 226" fill="none" xmlns="http://www.w3.org/2000/svg"> 1653 <g style="mix-blend-mode:multiply" opacity="0.5"> 1654 <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"/> 1655 </g> 1656 </svg>`; 1657 cloneElementWithImage.insertBefore(divSvg, cloneElementWithImage.firstChild); 1658 cloneElementWithImage.classList.add('card-highlights'); 1659 cardsList.insertBefore(cloneElementWithImage, firstContent); 1660 firstContentWithImage.remove(); 1661 } 1662 } 1663 } 1664 1665 cardsList.classList.add('active'); 1666 1667 const url = new URL(window.location.href); 1668 const searchParams = url.searchParams; 1669 1670 // Order and Filters - Combos 1671 const orderContainer = document.querySelector('.${rootCss} .order-container'); 1672 const filterContainer = document.querySelector('.${rootCss} .filter-container'); 1673 const orderCombo = orderContainer.querySelector('#select-order'); 1674 const filterCombo = filterContainer.querySelector('#select-filter'); 1675 1676 // Order Functions 1677 const setOrder = (orderBy) => { 1678 1679 //const url = new URL(window.location.href); 1680 //const searchParams = url.searchParams; 1681 1682 searchParams.set('sort', orderBy); 1683 url.search = searchParams.toString(); 1684 let newUrl = url.toString(); 1685 1686 newUrl.includes("sort=createDate%25") && (newUrl = url.toString().replace("sort=createDate%25", "sort=createDate%")); 1687 window.location.href = newUrl; 1688 } 1689 1690 // Filter Functions 1691 const setFilter = (filterBy) => { 1692 if (+filterBy === 0 ) { 1693 searchParams.delete('categoryTypeNews') 1694 } else { 1695 searchParams.set('categoryTypeNews', filterBy); 1696 } 1697 1698 url.search = searchParams.toString(); 1699 let newUrl = url.toString(); 1700 1701 window.location.href = newUrl; 1702 } 1703 1704 const renderTypeOptions = (options) => { 1705 let actualFilter = searchParams.get('categoryTypeNews'); 1706 options.forEach(typeItem => { 1707 let optionItem = document.createElement('option'); 1708 optionItem.classList.add('paragraph-sm-regular'); 1709 optionItem.setAttribute("value", typeItem.id); 1710 1711 if (+typeItem.id == +actualFilter) { 1712 optionItem.setAttribute('selected', ''); 1713 } 1714 1715 let optionItemName = document.createTextNode(typeItem.name); 1716 optionItem.appendChild(optionItemName); 1717 1718 filterCombo.appendChild(optionItem); 1719 }) 1720 } 1721 1722 1723 async function getTypeNews(vocabularyId) { 1724 try { 1725 const restResponse = await fetch(`/o/headless-admin-taxonomy/v1.0/taxonomy-vocabularies/${typeOfNewsVocabularyId}/taxonomy-categories?fields=id%2Cname`, { 1726 headers: { 1727 "x-csrf-token": Liferay.authToken, 1728 'accept': 'application/json' 1729 }, 1730 method: "GET", 1731 }); 1732 1733 1734 const eventData = await restResponse.json(); 1735 1736 renderTypeOptions(eventData.items); 1737 1738 } catch (error) { 1739 console.error("Error connecting to vocabularies API:", error); 1740 } 1741 } 1742 1743 async function getRenderData() { 1744 await getTypeNews(); 1745 } 1746 1747 getRenderData(); 1748 1749 const orderComboOptions = orderCombo.querySelectorAll('option'); 1750 const filterComboOptions = filterCombo.querySelectorAll('option'); 1751 1752 1753 orderComboOptions.forEach((item) => { 1754 1755 let actualSort = searchParams.get('sort') ? searchParams.get('sort').replace(/\+/g, '%2B') : ''; 1756 if (item.value === actualSort) { 1757 item.setAttribute('selected', ''); 1758 } 1759 1760 }) 1761 1762 orderCombo.addEventListener('change', (item) => { 1763 setOrder(item.target.value); 1764 }) 1765 1766 filterCombo.addEventListener('change', (item) => { 1767 setFilter(item.target.value); 1768 }) 1769 1770 1771 1772 orderContainer.classList.add('active'); 1773 filterContainer.classList.add('active'); 1774 1775 // ******************************************* 1776 const cards = cardsList.querySelectorAll('.card-news-container'); 1777 1778 if (cards.length == 0) { 1779 let noItemMsg = document.createElement('p'); 1780 let msg = document.createTextNode('Nenhum resultado encontrado para o filtro selecionado além do(s) card(s) em destaque!'); 1781 noItemMsg.classList.add('paragraph-sm-regular'); 1782 1783 noItemMsg.appendChild(msg); 1784 1785 cardsList.appendChild(noItemMsg); 1786 } 1787 1788 // Liferay Pagination Edits: 1789 const paginationItens = document.querySelectorAll('.pagination-bar .pagination .page-item'); 1790 1791 if (paginationItens.length > 0) { 1792 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"> 1793 <path d="M13.5 8H2.5M2.5 8L7 3.5M2.5 8L7 12.5" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> 1794 </svg>`; 1795 1796 paginationItens[0].classList.add('round-border'); 1797 1798 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"> 1799 <path d="M2.5 8H13.5M13.5 8L9 3.5M13.5 8L9 12.5" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> 1800 </svg>`; 1801 1802 paginationItens[(paginationItens.length - 1)].classList.add('round-border'); 1803 1804 1805 paginationItens.forEach(item => { 1806 item.classList.add('show-item'); 1807 }); 1808 1809 } 1810 }); 1811 1812 1813AUI().ready(() => { 1814 function setLinks${contentNumber}() { 1815 1816 const allCards = document.querySelectorAll(".${rootCss} .card-news-container"); 1817 allCards.forEach((card) => { 1818 card.addEventListener('click', (event) => { 1819 card.querySelector('a').click(); 1820 }); 1821 }) 1822 1823 document.querySelector('.${rootCss} .card-news-list').classList.add('active'); 1824 1825 } 1826 1827 setLinks${contentNumber}() 1828}); 1829 1830//Dropdown Select-order e Select-filter 1831 AUI().ready(function() { 1832 function setupDropdown(selectId, containerClass) { 1833 const select = document.getElementById(selectId); 1834 const container = document.querySelector("." + containerClass); 1835 1836 if (!select || !container) return; 1837 1838 let isDropdownOpen = false; 1839 1840 select.addEventListener("click", function () { 1841 isDropdownOpen = !isDropdownOpen; 1842 container.classList.toggle("open", isDropdownOpen); 1843 1844 select.style.backgroundImage = isDropdownOpen 1845 ? "url('data:image/svg+xml;base64,PHN2ZyB3d2lkdGg9IjE2IiBoZWlnaHQ9IjE2IiB2aWV3Qm94PSIwIDAgMTYgMTYiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+DQo8cGF0aCBkPSJNMTMgMTBMOCA1TDMgMTAiIHN0cm9rZT0iIzUyNTI1MiIgc3Ryb2tlLXdpZHRoPSIwLjc1IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4NCjwvc3ZnPg==')" // Para cima quando abre 1846 : "url('data:image/svg+xml;base64,PHN2ZyB3d2lkdGg9IjE2IiBoZWlnaHQ9IjE2IiB2aWV3Qm94PSIwIDAgMTYgMTYiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+DQo8cGF0aCBkPSJNMTMgNkw4IDExTDMgNiIgc3Ryb2tlPSIjNTI1MjUyIiBzdHJva2Utd2lkdGg9IjAuNzUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPg0KPC9zdmc+')"; // Para baixo quando fecha 1847 }); 1848 1849 document.addEventListener("click", function (event) { 1850 if (!select.contains(event.target) && !container.contains(event.target)) { 1851 isDropdownOpen = false; 1852 container.classList.remove("open"); 1853 1854 select.style.backgroundImage = "url('data:image/svg+xml;base64,PHN2ZyB3d2lkdGg9IjE2IiBoZWlnaHQ9IjE2IiB2aWV3Qm94PSIwIDAgMTYgMTYiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+DQo8cGF0aCBkPSJNMTMgNkw4IDExTDMgNiIgc3Ryb2tlPSIjNTI1MjUyIiBzdHJva2Utd2lkdGg9IjAuNzUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPg0KPC9zdmc+')"; 1855 } 1856 }); 1857 } 1858 1859 setupDropdown("select-order", "order-container"); 1860 setupDropdown("select-filter", "filter-container"); 1861}); 1862 1863</script> 1864 1865 1866</#if> Faça uma busca:
Mais pesquisados
Preço dos combustíveis
Pré-Sal
Time Petrobras
Escolha um Canal:
Navegue nas Seções:
Acessibilidade
Idioma:
Selecione um idioma: