Título

Link do botão
Ícone do botão Button Label
Ícone de carregamento
Tipo
Categoria
Ordenar
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@238a3782"; 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 21, 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 
13<#-- Liferay Services --> 
14<#assign journalArticleLocalService = serviceLocator.findService("com.liferay.journal.service.JournalArticleLocalService") /> 
15<#assign fileEntryService = staticUtil["com.liferay.document.library.kernel.service.DLFileEntryLocalServiceUtil"] /> 
16<#assign layoutLocalService = serviceLocator.findService("com.liferay.portal.kernel.service.LayoutLocalService")> 
17<#assign assetCategoryLocalService = serviceLocator.findService("com.liferay.asset.kernel.service.AssetCategoryLocalService") /> 
18<#assign assetVocabularyService = serviceLocator.findService("com.liferay.asset.kernel.service.AssetVocabularyService") /> 
19<#assign assetCategoryPropService = serviceLocator.findService("com.liferay.asset.category.property.service.AssetCategoryPropertyLocalService") /> 
20<#assign layout = layoutLocalService.getLayout(themeDisplay.getPlid())> 
21<#assign vocabularies = assetVocabularyService.getGroupVocabularies(groupId) /> 
22 
23<#assign ourEnergyVocabulary = findVocabulary("Nossa Energia", vocabularies)/> 
24<#assign typeOfNewsVocabulary = findVocabulary("Tipo de Notícia", vocabularies )/> 
25	 
26<#--  
27    typeOfNewsVocabulary - category ids: 
28    10720344 - Artigo 
29    10720341 - Infográfico 
30--> 
31 
32<#assign category = "" /> 
33<#assign categoryName = "" > 
34<#if locale?lower_case == 'pt_br'> 
35	<#assign categoryName = "Todos" > 
36<#else> 
37	<#assign categoryName = "All" > 
38</#if> 
39 
40<#if request.getParameter("category")?? && request.getParameter("category")?has_content> 
41    <#assign categoryId = request.getParameter("category")?number> 
42    <#if categoryId?? && categoryId?has_content> 
43        <#assign category = assetCategoryLocalService.getCategory(categoryId) /> 
44        <#assign categoryName = category.getTitle(locale) /> 
45    </#if> 
46</#if> 
47 
48 
49<#if categoryId?? && categoryId?has_content> 
50    <#attempt> 
51            <#assign categoryDates = restClient.get("/headless-admin-taxonomy/v1.0/taxonomy-categories/${categoryId}")> 
52            <#recover> 
53                <#assign categoryDates = {  "name": "", "description": "<p></p>", "parentTaxonomyVocabulary" : {"name": ""}}> 
54    </#attempt> 
55<#else> 
56    <#assign categoryDates = {  "name": "", "description": "<p></p>", "parentTaxonomyVocabulary" : {"name": ""}}> 
57</#if> 
58 
59 
60<#assign categoryPage = getFirstCategoryOfVocabularyInPage(layout, ourEnergyVocabulary) /> 
61<#if categoryPage?? && categoryPage?has_content> 
62    <#assign categoryName = categoryPage.getTitle(locale) /> 
63    <#assign categoryId = categoryPage.getCategoryId() /> 
64    <#assign category = categoryPage /> 
65    <script> 
66        if (!window.location.search.includes('category') && !document.body.classList.contains("has-edit-mode-menu")) { 
67            // Redirecionar para uma nova URL 
68            const url = new URL(window.location.href);           
69            url.searchParams.set('category', "${categoryId}"); 
70					  url.searchParams.set('sort', "createDate-"); 
71            window.location.href = url.toString(); 
72
73    </script> 
74</#if> 
75 
76 
77<#if categoryDates.parentTaxonomyVocabulary.name="Nossa Energia"> 
78    <#attempt> 
79        <#assign ourEnergyStyles = [] /> 
80        <#assign shadowColorCategory = "" /> 
81        <#if (assetCategoryPropService.fetchCategoryProperty(category.getCategoryId(),"Cor da Sombra")??)> 
82            <#assign categoryShadowColorByService = assetCategoryPropService.fetchCategoryProperty(category.getCategoryId(),"Cor da Sombra") /> 
83            <#assign shadowColorCategory = categoryShadowColorByService.value /> 
84        </#if> 
85 
86        <#assign backgroundColorCategory = "" /> 
87        <#if (assetCategoryPropService.fetchCategoryProperty(category.getCategoryId(),"Cor de Fundo")??)> 
88            <#assign categoryBackgroundColorByService = assetCategoryPropService.fetchCategoryProperty(category.getCategoryId(),"Cor de Fundo") /> 
89            <#assign backgroundColorCategory = categoryBackgroundColorByService.value /> 
90        </#if> 
91 
92        <#assign textColorCategory = "" /> 
93        <#if (assetCategoryPropService.fetchCategoryProperty(category.getCategoryId(),"Cor do Texto")??)> 
94            <#assign categoryTextColorByService = assetCategoryPropService.fetchCategoryProperty(category.getCategoryId(),"Cor do Texto") /> 
95            <#assign textColorCategory = categoryTextColorByService.value /> 
96        </#if> 
97 
98        <#assign textColorHighContrastCategory = "" /> 
99        <#if (assetCategoryPropService.fetchCategoryProperty(category.getCategoryId(),"Cor do Texto em Alto Contraste")??)> 
100            <#assign categoryTextColorHighContrastByService = assetCategoryPropService.fetchCategoryProperty(category.getCategoryId(),"Cor do Texto em Alto Contraste") /> 
101            <#assign textColorHighContrastCategory = categoryTextColorHighContrastByService.value /> 
102        </#if> 
103 
104        <#assign ourEnergyStyles = [{"titleLocale": category.getTitle(locale),"shadowColor": shadowColorCategory, "backgroundColor": backgroundColorCategory, "textColor": textColorCategory, "textColorHighContrast": textColorHighContrastCategory}] /> 
105 
106        <#recover> 
107            <#assign ourEnergyStyles = [{"titleLocale": "Nenhum", "shadowColor": "000", "backgroundColor": "000", "textColor": "FFF", "textColorHighContrast": "FFF"}] /> 
108 
109    </#attempt> 
110		 
111</#if> 
112 
113 
114<#-- Root Css -> Para poder instanciar dois elementos e não dar confusão no JS --> 
115<#assign contentNumber =  randomNumber(4586) /> 
116<#assign rootCss = "results-list-category-container_" + randomNumber(4586) /> 
117 
118<#-- Função para obter a primeira categoria associonada a um Vocabulário o qual está associado a um Jornal Article --> 
119<#function getFirstCategoryOfVocabulary journalArticle vocabulary > 
120    <#attempt> 
121        <#assign categories = assetCategoryLocalService.getCategories("com.liferay.journal.model.JournalArticle", journalArticle.getClassPK()) /> 
122         
123        <#list categories as category> 
124            <#if vocabulary.getVocabularyId() == category.getVocabularyId()> 
125                <#return category.getTitle(locale)> 
126            </#if> 
127        </#list> 
128 
129        <#return ""> 
130 
131        <#recover> 
132            <#return "" /> 
133    </#attempt> 
134 
135</#function> 
136 
137<#function getFirstCategoryOfVocabularyInPage layout vocabulary > 
138    <#attempt> 
139        <#assign categories = assetCategoryLocalService.getCategories("com.liferay.portal.kernel.model.Layout", layout.getPlid()) /> 
140         
141        <#list categories as category> 
142            <#if vocabulary.getVocabularyId() == category.getVocabularyId()> 
143                <#return category> 
144            </#if> 
145        </#list> 
146 
147        <#return ""> 
148 
149        <#recover> 
150            <#return "" /> 
151    </#attempt> 
152 
153</#function> 
154 
155<#-- Função para obter os dados de um card no Web Content (Journal Article) --> 
156<#function getDataForCard entry > 
157    <#attempt> 
158        <#assign journalArticle = journalArticleLocalService.getLatestArticle(entry.getClassPK()) /> 
159        <#assign ddmStructure = journalArticle.getDDMStructure() /> 
160        <#assign fieldList = getFieldListByStructure(ddmStructure) /> 
161        <#assign xmlArticle = journalArticle.getDocument().getRootElement() /> 
162 
163        <#-- Tentando pegar Imagem --> 
164        <#assign mediasGroup = getNodes(getIdFromFieldName(fieldList, "Mídia de destaque da notícia"), xmlArticle) /> 
165        <#assign media = "" /> 
166        <#list mediasGroup as mediaGroup > 
167            <#assign media = getMediaInfo(fieldList, mediaGroup, "Imagem Destaque", fileEntryService) /> 
168 
169            <#assign fileDataRequest = restClient.get("/headless-delivery/v1.0/documents/${media.fileEntryId}") /> 
170 
171            <#assign urlAdaptativeMedia = ""/> 
172            <#if media.url?? && media.url?has_content > 
173                <#assign dataAdaptativeMedia = fileDataRequest.adaptedImages /> 
174                <#list dataAdaptativeMedia as data> 
175                    <#if data.resolutionName == "Preview-1000x0"> 
176                        <#assign urlAdaptativeMedia = data.contentUrl/> 
177                    </#if>      
178                </#list> 
179            </#if> 
180 
181            <#assign media = {"imageSrc": media.url, "imageAlt": media.alt, "imageFileEntryId": media.fileEntryId, "urlAdaptativeMedia": urlAdaptativeMedia} />  
182             
183            <#-- Se não tiver imagem, tentar pegar vídeo --> 
184            <#if !media.imageSrc?? || !media.imageSrc?has_content>               
185                <#assign youtubeID = getFieldValue(fieldList, mediaGroup, "ID do vídeo do YouTube do vídeo de destaque") /> 
186                <#if youtubeID?? && youtubeID?has_content>  
187                    <#assign media = {"videoYotubeID": youtubeID} /> 
188                <#else> 
189                    <#-- Tentar pegar vídeo Interno --> 
190                    <#assign internalVideo = getMediaInfo(fieldList, mediaGroup, "Fazer upload de um vídeo de destaque", fileEntryService) /> 
191                    <#if internalVideo?? && internalVideo?has_content> 
192                        <#assign media = {"internalVideo": internalVideo} /> 
193                    </#if> 
194                </#if>          
195            </#if> 
196        </#list> 
197 
198        <#assign title = getFieldValue(fieldList, xmlArticle, "Título de destaque da notícia") /> 
199 
200        <#assign timeRead = getFieldValue(fieldList, xmlArticle, "Tempo de Leitura") /> 
201         
202        <#assign typeOfNews = getFirstCategoryOfVocabulary(entry, typeOfNewsVocabulary) /> 
203 
204        <#assign ourEnergy = getFirstCategoryOfVocabulary(entry, ourEnergyVocabulary) /> 
205         
206				<#if themeDisplay.getPortalURL()?contains("webserver")> 
207					<#assign urlNews = themeDisplay.getPortalURL() + themeDisplay.getPathFriendlyURLPublic() + layout.getGroup().friendlyURL + "/w/" + journalArticle.getUrlTitle()> 
208				<#else> 
209						<#assign urlNews = themeDisplay.getPortalURL() + "/w/" + journalArticle.getUrlTitle()> 
210				</#if> 
211 
212        <#if !urlNews?has_content > 
213            <#assign urlNews = "" > 
214        </#if> 
215         
216        <#assign cardData = {"media": media, "title": title, "timeRead": timeRead, "typeOfNews": typeOfNews, "ourEnergy": ourEnergy, "urlNews": urlNews} /> 
217         
218        <#return cardData> 
219 
220        <#recover> 
221            <#return {"media": "", "title": "", "timeRead": "", "typeOfNews": "", "ourEnergy": "", "urlNews": ""} /> 
222    </#attempt> 
223 
224    <#-- cardData ->    image: url, alt 
225                        title 
226                        timeRead 
227                        ourEnergyCategory 
228                        typeOfNews 
229                        urlNews 
230    --> 
231</#function> 
232 
233<#macro renderCard cardData> 
234    <#-- cardData ->    image: url, alt 
235                        title 
236                        timeRead 
237                        ourEnergyCategory 
238                        typeOfNews 
239                        urlNews 
240    --> 
241    <div class="card-news-container"> 
242        <div class="overlay-card-highlight"> </div> 
243        <svg class="graphism-card-highlight" width="632" height="226" viewBox="0 0 632 226" fill="none" xmlns="http://www.w3.org/2000/svg"> 
244            <g style="mix-blend-mode:multiply" opacity="0.5"> 
245            <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"/> 
246            </g> 
247        </svg> 
248 
249        <a class="card-category-link card-link" href="${cardData.urlNews}" style="display: none;"> ${cardData.title} </a> 
250         
251        <div class="card-news-thumb"> 
252            <#assign noImage = "" /> 
253            <#if cardData.media?? && cardData.media?has_content> 
254                <#if cardData.media.imageSrc?? && cardData.media.imageSrc?has_content> 
255                    <#assign imageSrc = cardData.media.imageSrc /> 
256                    <#if cardData.media.urlAdaptativeMedia?? && cardData.media.urlAdaptativeMedia?has_content> 
257                        <#assign imageSrc = cardData.media.urlAdaptativeMedia /> 
258                    </#if> 
259                     
260                    <img class="card-news-image" src="${imageSrc}" alt="${cardData.media.imageAlt}"/> 
261                     
262                <#else> 
263                    <#if cardData.media.videoYotubeID?? && cardData.media.videoYotubeID?has_content> 
264                        <img class="card-news-image" src="https://img.youtube.com/vi/${cardData.media.videoYotubeID}/maxresdefault.jpg" alt="YouTube Thumbnail"/>  
265                    <#else> 
266                        <#if (cardData.media.internalVideo?? && cardData.media.internalVideo.url?has_content) > 
267                            <video class="card-news-image"> 
268                                <source src="${cardData.media.internalVideo.url}"> 
269                                Your browser does not support the video tag. 
270                            </video> 
271                        <#else> 
272                            <#assign noImage = "no-image" /> 
273                        </#if> 
274                    </#if>       
275                </#if>  
276            </#if>        
277        </div> 
278         
279        <div class="card-news-category-container ${noImage}">  
280            <div data-category="${categoryName}" class="card-news-category paragraph-micro-regular"> ${categoryName} </div> 
281        </div>  
282 
283        <div class="card-news-text-content ${noImage}"> 
284            <div class="card-news-title h4"> ${cardData.title} </div> 
285 
286            <div class="card-news-info"> 
287                <div class="card-news-type"> 
288                    <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"> 
289                        <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"/> 
290                    </svg> 
291                    <div class="card-news-type-text paragraph-micro-regular">${cardData.typeOfNews}</div> 
292                </div> 
293                <#if cardData.timeRead?? && cardData.timeRead?has_content> 
294                    <div class="card-news-time-read">  
295                            <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"> 
296                                    <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"/> 
297                            </svg> 
298                            <div class="card-news-time-read-text paragraph-micro-regular">${cardData.timeRead} min</div> 
299                    </div> 
300                </#if> 
301            </div> 
302        </div> 
303    </div> 
304 
305</#macro> 
306 
307 
308<#if entries?has_content> 
309	 
310    <div class="${rootCss}"> 
311        <div class="results-category-title fragment_85017"> 
312            <div class="petro-title"> 
313                <h2 id="title" class="display-sm" > 
314                    ${categoryName} 
315                </h2> 
316                <div class="yellow-bar bar-display-sm"></div> 
317            </div> 
318        </div> 
319        <div class="card-news-list-background"> </div> 
320 
321        <div class="card-news-list-breakpoint breakpoint"> 
322 
323            <div class="results-quantity-filter-container col-1-11 md-col-1-8 sm-col-1-4"> 
324                <span class="quantify-results-text paragraph-sm-regular"> 
325                    <#if locale?lower_case == "pt_br"> 
326                        <#if searchContainer.getTotal() == 0> 
327                            Poxa! Sua busca não encontrou nenhum resultado 
328                        <#else> 
329                            Foram encontrados<span class="quantify-results-text-number paragraph-sm-bold"> ${searchContainer.getTotal()}</span> conteúdos 
330                        </#if> 
331                    <#else> 
332                        <#if searchContainer.getTotal() == 0> 
333                            Wow! Your search did not return any results 
334                        <#else> 
335                            Found<span class="quantify-results-text-number  paragraph-sm-bold"> ${searchContainer.getTotal()}</span> contents 
336                        </#if> 
337                    </#if> 
338                </span> 
339                <div class="order-container"> 
340                    <span class="paragraph-sm-regular"> 
341                        <#if locale?lower_case == 'pt_br'> 
342                            Ordenar por:  
343                        <#else> 
344                            Order by:  
345                        </#if> 
346                    </span> 
347                    <select name="ordenação" id="select-order"> 
348                        <option class="paragraph-sm-regular" value="createDate-">  
349                            <#if locale?lower_case == 'pt_br'> 
350                                Mais recentes 
351                            <#else> 
352                                Recents 
353                            </#if> 
354                        </option> 
355                        <option class="paragraph-sm-regular" value="createDate%2B">  
356                            <#if locale?lower_case == 'pt_br'> 
357                                Mais antigos 
358                            <#else> 
359                                Olders 
360                            </#if> 
361                        </option> 
362                    </select> 
363                </div> 
364 
365                <#-- <br> 
366                <#if searchContainer.getTotal() gt 0> 
367                    <div> 
368                        <label for="select-type"> 
369                            <#if locale?lower_case == 'pt_br'> 
370                                Tipo:  
371                            <#else> 
372                                Type:  
373                            </#if> 
374                        </label> 
375                        <select id="select-type"> 
376                            <option> 
377                                <#if locale?lower_case == 'pt_br'> 
378                                    Todos 
379                                <#else> 
380                                    All 
381                                </#if> 
382                            </option> 
383                            <#list typeOfNewsVocabulary.getCategories() as type> 
384                                <option> ${type.getTitle(locale)}</option> 
385                            </#list> 
386                        </select> 
387                    </div> 
388                </#if --> 
389            </div> 
390					  
391            <div class="card-news-list col-1-12 md-col-1-8 sm-col-1-4"> 
392                <#if entries?has_content> 
393                    <#list entries as entry> 
394                            <#assign cardData = getDataForCard(entry) />                            
395                            <@renderCard cardData/> 
396                    </#list> 
397                </#if> 
398            </div> 
399        </div>   
400    </div> 
401</#if> 
402 
403<#if ourEnergyStyles?? > 
404    <#list ourEnergyStyles as ourEnergyStyle> 
405        <style> 
406            .${rootCss} [data-category="${ourEnergyStyle.titleLocale}"] { 
407                <#if ourEnergyStyle.backgroundColor?? && ourEnergyStyle.backgroundColor?has_content> 
408                    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; 
409                </#if> 
410                box-shadow: 0px 2px 6px 0px #${ourEnergyStyle.shadowColor} !important; 
411                color: #${ourEnergyStyle.textColor} !important; 
412
413 
414            body.high-contrast-active .${rootCss} [data-category="${ourEnergyStyle.titleLocale}"] { 
415                <#if ourEnergyStyle.backgroundColor?? && ourEnergyStyle.backgroundColor?has_content> 
416                    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; 
417                </#if> 
418                color: #${ourEnergyStyle.textColorHighContrast} !important; 
419
420 
421        </style> 
422    </#list> 
423 
424 
425</#if> 
426 
427 
428<style> 
429 
430    .${rootCss} .results-category-title { 
431        background: var(--background-surface-level-02, #F8F8F8); 
432        display: flex; 
433        width: 100%; 
434        padding: var(--spacing-space-xl, 40px) var(--spacing-space-big, 72px); 
435        flex-direction: column; 
436        align-items: center; 
437
438     
439    .${rootCss} .results-category-title .petro-title { 
440        width: 100%; 
441        max-width: 1440px; 
442        margin:  0 var(--space-big); 
443
444			 
445    .${rootCss} .fragment_85017 .petro-title .yellow-bar.bar-display-sm { 
446        background-color: var(--text-secondary-accent, #FDC82F); 
447
448 
449    .${rootCss} .results-quantity-filter-container .order-container { 
450        display: none; 
451        flex-direction: column; 
452        gap: var(--spacing-space-xxs, 8px); 
453
454 
455    .${rootCss} .results-quantity-filter-container .order-container.active { 
456        display: flex; 
457
458 
459    .${rootCss} .results-quantity-filter-container .order-container #select-order { 
460        display: flex; 
461        padding: var(--spacing-space-xxs, 8px) var(--spacing-space-xl, 40px) var(--spacing-space-xxs, 8px) var(--spacing-space-sm, 16px); 
462        align-items: center; 
463        gap: var(--spacing-space-md, 24px); 
464        align-self: stretch; 
465        border-radius: var(--border-radius-lg, 16px); 
466        border: 1px solid var(--border-color-light); 
467        appearance: none; 
468        -webkit-appearance: none; 
469        -moz-appearance: none; 
470        background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4NCiAgICA8cGF0aCBkPSJNMTMgNkw4IDExTDMgNiIgc3Ryb2tlPSIjNTI1MjUyIiBzdHJva2Utd2lkdGg9IjAuNzUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPg0KPC9zdmc+); 
471        background-repeat: no-repeat; 
472        background-position: 95%; 
473
474 
475     
476    body.high-contrast-active .${rootCss} .results-quantity-filter-container .order-container #select-order { 
477        background: transparent; 
478        background-image: url('data:image/svg+xml,%3Csvg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath d="M13 6L8 11L3 6" stroke="white" stroke-width="0.75" stroke-linecap="round" stroke-linejoin="round"/%3E%3C/svg%3E'); 
479        background-repeat: no-repeat; 
480        background-position: 95% 
481
482 
483     
484    body.high-contrast-active .${rootCss} .results-quantity-filter-container .order-container #select-order option { 
485        background-color: var(--color-neutral-900); 
486
487 
488    /* renderCard */ 
489    .${rootCss} .card-news-list { 
490    display: none; 
491    flex-wrap: wrap; 
492    gap: var(--space-lg); 
493    width: 100%; 
494    justify-content: flex-start; 
495
496     
497    .${rootCss} .card-news-list.active { 
498        display: flex; 
499
500 
501    .${rootCss} .card-news-container { 
502        width: 300px; 
503        height: 370px; 
504        display: flex; 
505        flex-direction: column; 
506        flex-shrink: 0; 
507        align-items: flex-start; 
508        border-radius: var(--border-radius-lg); 
509        border: var(--border-width-hairline) solid var(--border-card-default, #EEE); 
510        background: var(--background-surface-level-01, #FFF); 
511        box-shadow: 0px 12px 60px -10px rgba(145, 147, 149, 0.12); 
512        overflow: hidden; 
513        scroll-snap-align: start; 
514        cursor: pointer; 
515        transition: border 300ms ease-in-out; 
516        text-decoration: none; 
517        position: relative; 
518
519 
520    body.high-contrast-active .${rootCss} .card-news-container {      
521        border: var(--border-width-hairline) solid var(--border-card-default, #525252); 
522        background: var(--background-surface-level-01, #010101); 
523
524 
525    .${rootCss} .card-news-container:hover { 
526        border: var(--border-width-hairline) solid rgb(0, 133, 66); 
527
528 
529    body.high-contrast-active .${rootCss} .card-news-container:hover { 
530        border: var(--border-width-hairline) solid var(--border-card-default, #E4F7E8); 
531
532 
533    .${rootCss} .card-news-container .card-news-link { 
534        position: absolute; 
535        top: 0; 
536        width: 100%; 
537        height: 100%; 
538		z-index: 3; 
539
540 
541    .${rootCss} .card-news-container .card-news-thumb { 
542        position: relative; 
543        width: 100%; 
544			  pointer-events: none; 
545
546 
547    .${rootCss} .card-news-container .card-news-image { 
548        width: 100%; 
549        height: 168px; 
550        object-fit: cover; 
551			  pointer-events: none; 
552
553 
554    .${rootCss} .card-news-container .card-news-category-container { 
555        position: relative; 
556
557 
558    .${rootCss} .card-news-container .card-news-category-container .card-news-category { 
559        display: flex; 
560        justify-content: center; 
561        align-items: center;  
562        padding: var(--space-micro) var(--space-xs); 
563        position: absolute; 
564        z-index: 2; 
565        left: var(--space-md); 
566        top: -13px; 
567        border-radius: var(--border-radius-pill); 
568        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); 
569        box-shadow: 0px 2px 6px 0px rgba(0, 178, 169, 0.10); 
570        line-height: var(--line-height-lg, 144%); 
571        color: var(--default-sup-green-water, #006B65); 
572			  white-space: nowrap; 
573			  pointer-events: none; 
574
575 
576    body.high-contrast-active .${rootCss} .card-news-container .card-news-category-container .card-news-category { 
577        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); 
578        color: var(--default-sup-green-water, #99E0DD);  
579
580 
581    .${rootCss} .card-news-container .card-news-category-container.no-image .card-news-category { 
582        position: relative; 
583        top: 0; 
584        left: 0; 
585        margin-left: var(--space-md); 
586        margin-top: var(--space-md); 
587
588 
589    .${rootCss} .card-news-container .card-news-text-content { 
590        display: flex; 
591        padding: var(--space-lg, 32px) var(--space-md, 24px) var(--space-md, 24px) var(--space-md, 24px); 
592        flex-direction: column; 
593        justify-content: space-between; 
594        align-items: flex-start; 
595        flex: 1 0 0; 
596        align-self: stretch; 
597        z-index: 1; 
598			  pointer-events: none; 
599
600 
601    .${rootCss} .card-news-container .card-news-text-content.no-image { 
602        padding-top: var(--space-sm); 
603
604 
605    .${rootCss} .card-news-container .card-news-text-content .card-news-title { 
606        display: -webkit-box; 
607        -webkit-box-orient: vertical; 
608        -webkit-line-clamp: 4; 
609        align-self: stretch; 
610        overflow: hidden; 
611        color: var(--text-primary-default, #373737); 
612        text-overflow: ellipsis; 
613        margin: 0; 
614
615 
616    body.high-contrast-active .${rootCss} .card-news-container .card-news-text-content .card-news-title { 
617        color: var(--text-primary-default, #FFF); 
618
619 
620    .${rootCss} .card-news-container .card-news-text-content .card-news-info { 
621        display: flex; 
622        align-items: center; 
623        align-content: center; 
624        gap: var(--space-sm, 16px); 
625        align-self: stretch; 
626        flex-wrap: wrap; 
627
628 
629    .${rootCss} .card-news-container .card-news-text-content .card-news-info .card-news-type, 
630    .${rootCss} .card-news-container .card-news-text-content .card-news-info .card-news-time-read { 
631        display: flex; 
632        align-items: center; 
633        gap: var(--space-xxs, 8px); 
634
635 
636    body.high-contrast-active .${rootCss} .results-category-title { 
637        background: var(--background-surface-level-02, #373737) !important; 
638
639 
640    body.high-contrast-active .${rootCss} .results-category-title .petro-title { 
641        color: var(--text-primary-default, #FFF) !important; 
642
643 
644    body.high-contrast-active .${rootCss} .fragment_85017 .petro-title .yellow-bar.bar-display-sm { 
645        background-color: var(--text-secondary-accent, #FFEEB3); 
646
647 
648    .${rootCss} .card-news-list .card-news-container .overlay-card-highlight { 
649        display: none; 
650
651 
652    .${rootCss} .card-news-list .card-news-container .graphism-card-highlight { 
653        display: none; 
654
655 
656    /* Card Highlights */ 
657    .${rootCss} .card-news-list .card-news-container.card-highlights { 
658        width: 632px; 
659        height: 360px; 
660        justify-content: flex-end; 
661
662 
663    .${rootCss} .card-news-list .card-news-container.card-highlights .overlay-card-highlight { 
664        display: block; 
665        position: absolute; 
666        top: 0; 
667        left: 0; 
668        width: 100%; 
669        height: 100%; 
670        background: linear-gradient(190deg, rgba(13, 19, 16, 0.00) 27.69%, rgba(13, 19, 16, 0.94) 63.29%); 
671        z-index: 1; 
672        opacity: 0.8; 
673			  pointer-events: none; 
674
675 
676    .${rootCss} .card-news-list .card-news-container.card-highlights .graphism-card-highlight { 
677        display: block; 
678        position: absolute; 
679        bottom: 0; 
680        left: 0; 
681        z-index: 1; 
682			  pointer-events: none; 
683
684 
685    .${rootCss} .card-news-list .card-news-container.card-highlights  .card-news-title { 
686        color: var(--text-primary-default, #FFF); 
687
688 
689    .${rootCss} .card-news-list .card-news-container.card-highlights .card-news-thumb { 
690        height: 100%; 
691
692 
693    .${rootCss} .card-news-list .card-news-container.card-highlights  .card-news-image { 
694        width: 632px; 
695        height: 360px; 
696        position: absolute; 
697        top: 0; 
698        left: 0; 
699			  pointer-events: none; 
700
701 
702    .${rootCss} .card-news-list .card-news-container.card-highlights  .card-news-category { 
703        display: none; 
704
705 
706    .${rootCss} .card-news-list .card-news-container.card-highlights  .card-news-text-content { 
707        width: 100%; 
708        position: relative; 
709        height: 200px; 
710        flex-grow: revert; 
711        bottom: 30px; 
712
713 
714    .${rootCss} .card-news-list .card-news-container.card-highlights  .card-news-text-content .card-news-info { 
715        position: absolute; 
716        top: -1px; 
717
718	 
719		@media screen and (max-width: 767px) { 
720			.${rootCss} .card-news-list .card-news-container.card-highlights { 
721				width: 100%; 
722
723			 
724			.${rootCss} .card-news-list .card-news-container.card-highlights .card-news-image { 
725				width: 100%; 
726
727
728 
729    /* *** End Card Highlights *** */ 
730 
731    body.high-contrast-active .${rootCss} .card-news-container .card-news-text-content .card-news-info .card-news-type path { 
732        stroke: #D7D7D7; 
733
734 
735    .${rootCss} .card-news-container .card-news-text-content .card-news-info .card-news-type .card-news-type-text, 
736    .${rootCss} .card-news-container .card-news-text-content .card-news-info .card-news-time-read .card-news-time-read-text { 
737        color: var(--text-tertiary-default, #959595); 
738        line-height: var(--line-height-lg, 144%); 
739
740 
741    body.high-contrast-active .${rootCss} .card-news-container .card-news-text-content .card-news-info .card-news-type .card-news-type-text, 
742    body.high-contrast-active .${rootCss} .card-news-container .card-news-text-content .card-news-info .card-news-time-read .card-news-time-read-text { 
743        color: var(--text-tertiary-default, #EEE); 
744
745 
746    .${rootCss} .card-news-container .card-news-text-content .card-news-info .card-news-time-read .card-news-icon-time-read { 
747        transform: translateY(-0.5px); 
748
749 
750    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 { 
751        fill: #D7D7D7; 
752
753	 
754    /* Results Quantity Massage */ 
755	.${rootCss} .quantify-results-text-number { 
756        color: var(--border-color-accent); 
757
758 
759    .${rootCss} .results-quantity-filter-container { 
760        display: flex; 
761        gap: var(--space-xxs, 8px); 
762        flex-wrap: wrap; 
763        justify-content: space-between; 
764        align-items: center; 
765        width: 100%; 
766        margin: var(--space-xl) 0; 
767        height: 68px; 
768
769	 
770    body.high-contrast-active .${rootCss} .results-quantity-filter-container * { 
771        color: var(--text-tertiary-default, #EEE) !important; 
772
773     
774    /* Liferay Pagination */ 
775    .pagination-bar .pagination-items-per-page { 
776        display: none !important; 
777
778 
779    .pagination-bar .pagination-results { 
780        display: none !important; 
781
782 
783    .pagination-bar .pagination { 
784        width: 100%; 
785        display: flex; 
786        justify-content: center; 
787        margin-top: var(--space-xl); 
788
789 
790    .pagination-bar .page-item { 
791        display: none !important; 
792        outline: none; 
793        display: flex; 
794        flex-direction: column; 
795        align-items: center; 
796        justify-content: center; 
797        width: var(--size-lg); 
798        height: var(--size-lg); 
799        border-radius: var(--border-radius-pill, 100px); 
800        color: var(--text-tertiary-default, #959595); 
801        background: transparent; 
802        border: var(--border-width-hairline) solid transparent; 
803        transition: background 300ms ease-in-out, border-color 300ms ease-in-out; 
804
805	 
806    .pagination-bar .page-item.active .page-link { 
807        background: transparent; 
808
809	 
810    .pagination-bar .page-item .page-link:hover{ 
811        background: transparent; 
812
813 
814    .pagination-bar .page-item:hover{ 
815        border-color: var(--border-color-accent); 
816        background: transparent; 
817
818     
819    .pagination-bar .page-item.round-border { 
820        border-radius: var(--radius-pill, 100px); 
821        border: 1px solid var(--border-color-accent); 
822
823     
824    .pagination-bar .page-item.disabled.round-border { 
825        border: 1px solid var(--text-tertiary-default, #959595); 
826 
827
828 
829    .pagination-bar .page-item.show-item { 
830        display: flex !important; 
831
832 
833    .pagination-bar .page-item.disabled span span svg { 
834        stroke: #525252; 
835
836 
837    .pagination-bar .page-item span span svg { 
838        stroke: var(--border-color-accent); 
839
840	 
841    .pagination-bar .page-item.disabled { 
842        pointer-events: none; 
843
844		 
845    .pagination-bar .page-item.disabled:hover{ 
846        background: transparent; 
847
848 
849    .pagination-bar .page-item.active { 
850        background: var(--background-surface-level-02, #F8F8F8); 
851        box-shadow: 0px 12px 60px -10px rgba(145, 147, 149, 0.12); 
852        border: var(--border-width-hairline) solid #F8F8F8; 
853        pointer-events: none; 
854
855	 
856	 
857    .pagination-bar .page-item.active * { 
858        color: var(--border-color-accent); 
859        font-weight: 700; 
860
861	 
862    body.high-contrast-active .pagination-bar .page-item span span svg { 
863        stroke: var(--tertiary-default, #EEE) !important; 
864
865 
866    body.high-contrast-active .pagination-bar * { 
867        color: var(--tertiary-default, #EEE) !important; 
868 
869
870 
871    body.high-contrast-active .pagination-bar .page-item.round-border { 
872        border-color: var(--tertiary-default, #EEE) !important; 
873
874 
875    body.high-contrast-active .pagination-bar .page-item.active { 
876        color: var(--tertiary-default, #EEE) !important; 
877        border: none; 
878
879 
880    body.high-contrast-active .pagination-bar .page-item.active { 
881        background: var(--surface-level-02, #373737) !important;    
882
883 
884    body.high-contrast-active .pagination-bar .page-item:hover{ 
885        border-color: var(--tertiary-default, #EEE); 
886
887 
888 
889</style> 
890 
891<script> 
892    AUI().ready(function () { 
893         
894        const editMode = document.body.classList.contains('has-edit-mode-menu'); 
895        const cardsList = document.querySelector('.${rootCss} .card-news-list'); 
896 
897        if (!editMode) { 
898            // Card Highlight 
899            const firstImage = cardsList.querySelector('.card-news-container img'); 
900            const firstContent = cardsList.querySelector('.card-news-container'); 
901            const firstContentWithImage = null; 
902 
903            if (firstImage) { 
904 
905                const firstContentWithImage =  firstImage.parentElement.parentElement; 
906                if (firstContentWithImage) { 
907                    let cloneElementWithImage = firstContentWithImage.cloneNode(true); 
908                    cloneElementWithImage.classList.add('card-highlights'); 
909									cloneElementWithImage.addEventListener('click', (event) => { 
910										const element = event.target; 
911										element.querySelector('a').click(); 
912									}); 
913                    cardsList.insertBefore(cloneElementWithImage, firstContent); 
914                    firstContentWithImage.remove() 
915
916
917
918         
919        cardsList.classList.add('active'); 
920 
921        const url = new URL(window.location.href); 
922        const searchParams = url.searchParams; 
923         
924        // Order Functions 
925        const setOrder = (orderBy) => { 
926 
927            //const url = new URL(window.location.href); 
928            //const searchParams = url.searchParams; 
929 
930            searchParams.set('sort', orderBy); 
931            url.search = searchParams.toString(); 
932            let newUrl = url.toString();  
933             
934            newUrl.includes("sort=createDate%25") && (newUrl = url.toString().replace("sort=createDate%25", "sort=createDate%")); 
935            window.location.href = newUrl 
936
937 
938        // Order By Combo Listeners         
939        const orderContainer = document.querySelector('.${rootCss} .results-quantity-filter-container .order-container') 
940        const orderCombo = orderContainer.querySelector('#select-order') 
941        const orderComboOptions = orderCombo.querySelectorAll('option'); 
942        orderComboOptions.forEach((item) => { 
943             
944            let actualSort = searchParams.get('sort') ? searchParams.get('sort').replace(/\+/g, '%2B') : ''; 
945            if (item.value === actualSort) { 
946                item.setAttribute('selected', '') 
947
948 
949        }) 
950 
951        orderCombo.addEventListener('change', (item) => { 
952            setOrder(item.target.value); 
953        }) 
954 
955        orderContainer.classList.add('active'); 
956 
957        // Liferay Pagination Edits: 
958        const paginationItens = document.querySelectorAll('.pagination-bar .pagination .page-item') 
959 
960        if (paginationItens.length > 0) { 
961            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"> 
962            <path d="M13.5 8H2.5M2.5 8L7 3.5M2.5 8L7 12.5"  stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> 
963            </svg>` 
964 
965            paginationItens[0].classList.add('round-border') 
966 
967            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"> 
968            <path d="M2.5 8H13.5M13.5 8L9 3.5M13.5 8L9 12.5" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> 
969            </svg>` 
970 
971            paginationItens[(paginationItens.length - 1)].classList.add('round-border') 
972 
973             
974            paginationItens.forEach(item => { 
975                item.classList.add('show-item') 
976            }) 
977 
978
979			 
980			 
981    }); 
982	 
983	 
984function setLinks${contentNumber}() { 
985	 
986			const allCards = document.querySelectorAll(".${rootCss} .card-news-container"); 
987			allCards.forEach((card) => { 
988				card.addEventListener('click', (event) => { 
989					const element = event.target; 
990					element.querySelector('a').click(); 
991				}); 
992			}) 
993			 
994			document.querySelector('.${rootCss} .card-news-list').classList.add('active'); 
995		 
996
997 
998setLinks${contentNumber}() 
999	 
1000	 
1001 
1002</script> 




Canais

Acessibilidade

Faça uma busca:

Buscar

Sugestões de busca

Link de exemplo
Ícone do botão /documents/d/nossa-energia/chevronright-svg?download=true Exibir mais resultados
Ícone de carregamento

Mais pesquisados

Preço dos combustíveis

Pré-Sal

Time Petrobras

Escolha um Canal:

Acessibilidade

Alto-Contraste

Desligado

Ligado

Texto Grande

Desligado

Ligado

Idioma:

Selecione um idioma: