From 01aee06e0186f37b93293b057de35a653fa52810 Mon Sep 17 00:00:00 2001 From: Gabriel-SAbreu Date: Wed, 17 Jun 2026 16:50:02 -0300 Subject: [PATCH 01/40] =?UTF-8?q?#1399172=20-=20Teste=20de=20c=C3=B3digo?= =?UTF-8?q?=20para=20funcionar=20como=20web=20component=20da=20=20=20barra?= =?UTF-8?q?=20estado=20v01?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../BarraEstado/BarraEstadoStandalone.js | 991 ++++++++++++++---- 1 file changed, 800 insertions(+), 191 deletions(-) diff --git a/src/components/BarraEstado/BarraEstadoStandalone.js b/src/components/BarraEstado/BarraEstadoStandalone.js index 409f3fc..749b73d 100644 --- a/src/components/BarraEstado/BarraEstadoStandalone.js +++ b/src/components/BarraEstado/BarraEstadoStandalone.js @@ -1,9 +1,472 @@ +// (function () { +// 'use strict' + +// var STYLE_ID = 'barra-estado-standalone-style' +// var MOUNT_ATTR = 'data-barra-estado-mounted' +// var HOST_ATTR = 'data-barra-estado-host' +// var toggleSequence = 0 + +// var STYLE_TEXT = ` +// :host { +// display: block; +// width: 100%; + +// --barra-estado-background: transparent; +// --barra-estado-menu-background: #f8f8f8; +// --barra-estado-hover-color: #000000; +// --barra-estado-active-color: #e4e4e4; +// --barra-estado-font-size: 12px; +// --barra-estado-font-size-desktop: var(--barra-estado-font-size, 12px); +// --barra-estado-height: 32px; +// --barra-estado-link-padding: 13px 40px; +// --barra-estado-link-padding-desktop: 9px 13px; +// --barra-estado-guria-link-padding: 7px 13px; +// --barra-estado-highlight-color: var(--green-matriz-link-activated, #135428); +// --barra-estado-toggle-color: #bcbcbb; +// --barra-estado-toggle-hover-color: #fff; +// } + +// #rs-gov { +// color: var(--green-matriz-link, #1a7235); +// vertical-align: initial; +// } + +// input.barra-estado__checkbox, +// .barra-estado__toggle { +// display: none; +// } + +// .barra-estado { +// background: var(--barra-estado-background); +// min-height: var(--barra-estado-height); +// } + +// .barra-estado__container { +// min-height: var(--barra-estado-height); +// } + +// .barra-estado__menu { +// background: var(--barra-estado-menu-background); +// } + +// .barra-estado__menu > li { +// float: left; +// list-style: none; +// } + +// .barra-estado__nav { +// display: block; +// float: right; +// } + +// .barra-estado__menu, +// .barra-estado__menu > li, +// .barra-estado__menu > li > a, +// .barra-estado__nav { +// height: 100%; +// } + +// .barra-estado__nav__form { +// display: inline-block; +// padding: 0; +// margin: 0; +// min-height: var(--barra-estado-height); +// } + +// .barra-estado__menu > li > a { +// display: block; +// box-sizing: border-box; +// padding: var(--barra-estado-link-padding); +// color: var(--green-matriz-link, #1a7235); +// font-size: var(--barra-estado-font-size); +// font-weight: 700; +// line-height: 1; +// transition: box-shadow 0.25s linear, color 0.25s linear; +// } + +// .barra-estado__menu > li > a:hover > svg > path, +// .barra-estado__menu > li > a:focus > svg > path { +// fill: var(--barra-estado-hover-color); +// } + +// .barra-estado__menu > li > a:focus, +// .barra-estado__menu > li > a:hover { +// box-shadow: inset 5px 0 var(--barra-estado-highlight-color); +// color: var(--barra-estado-hover-color); +// } + +// .barra-estado__menu > li > a:active { +// color: var(--barra-estado-active-color) !important; +// } + +// .barra-estado__menu, +// .barra-estado__menu > li, +// .barra-estado__menu > li > a { +// height: auto; +// } + +// .barra-estado__toggle { +// z-index: 2; +// } + +// .barra-estado__toggle:after { +// color: var(--barra-estado-toggle-color); +// content: attr(data-open); +// transition: all 0.5s linear; +// } + +// .barra-estado__toggle:hover:after { +// color: var(--barra-estado-toggle-hover-color); +// } + +// .barra-estado__toggle:focus-visible { +// outline: 2px solid var(--govrs-color-focus, #ffcd07); +// outline-offset: 2px; +// } + +// input.barra-estado__checkbox:checked + label.barra-estado__toggle:after { +// content: attr(data-close); +// } + +// @media only screen and (min-width: 992px) { +// .barra-estado__menu { +// padding: 0; +// border-top: none; +// margin-top: 0; +// background: var(--barra-estado-menu-background); +// } + +// .barra-estado__menu > li > a { +// padding: var(--barra-estado-link-padding-desktop); +// font-size: var(--barra-estado-font-size-desktop); +// } + +// .barra-estado__menu > li > a:focus, +// .barra-estado__menu > li > a:hover { +// box-shadow: inset 0 2px var(--barra-estado-highlight-color); +// color: var(--barra-estado-hover-color); +// } +// } + +// .barra-estado__menu > li > a.barra-estado__guria-link { +// padding: var(--barra-estado-guria-link-padding); +// } + +// .visually-hidden { +// position: absolute !important; +// overflow: hidden !important; +// width: 1px !important; +// height: 1px !important; +// padding: 0 !important; +// border: 0 !important; +// margin: -1px !important; +// clip: rect(0, 0, 0, 0) !important; +// white-space: nowrap !important; +// } + +// :host-context(.high-contrast) .barra-estado { +// border-bottom: 1px solid var(--govrs-color-contrast-foreground, #ffffff) !important; +// background-color: var(--govrs-color-contrast-background, #000000) !important; +// } + +// :host-context(.high-contrast) .barra-estado__menu { +// background-color: var(--govrs-color-contrast-background, #000000) !important; +// } + +// :host-context(.high-contrast) .barra-estado__menu > li > a > #GurIA path { +// fill: var(--govrs-color-contrast-foreground, #ffffff) !important; +// } + +// :host-context(.high-contrast) .barra-estado__menu > li > a:focus { +// box-shadow: inset 0 5px var(--govrs-color-contrast-foreground, #ffffff) !important; +// color: var(--govrs-color-contrast-foreground, #ffffff) !important; +// } + +// :host-context(.high-contrast) .barra-estado__menu > li > a:hover { +// box-shadow: inset 0 5px var(--govrs-color-contrast-foreground, #ffffff) !important; +// color: var(--govrs-color-contrast-foreground, #ffffff) !important; +// } + +// :host-context(.high-contrast) #rs-gov > path { +// fill: var(--govrs-color-contrast-foreground, #ffffff) !important; +// } +// ` + +// var RS_GOV_SVG = ` +// +// RS.GOV +// Governo do Estado do Rio Grande do Sul +// +// +// +// +// +// +// +// +// +// +// ` + +// var GURIA_SVG = ` +// +// GurIA +// A tua nova assistente digital +// +// +// +// +// +// +// +// ` + +// function renderMenuItem(item) { +// var className = item.className ? ' class="' + item.className + '"' : '' +// var content = item.html || '' + item.label + +// return '
  • ' + content + '
    • ' +// } + +// var MENU_ITEMS = [ +// { href: 'https://estado.rs.gov.br/agencia-de-noticias', label: 'Notícias' }, +// { href: 'https://www.rs.gov.br/', label: 'Serviços' }, +// { href: 'https://www.centraldocidadao.rs.gov.br/', label: 'Central do Cidadão' }, +// { href: 'http://www.transparencia.rs.gov.br/', label: 'Transparência' }, +// { href: 'https://estado.rs.gov.br/institucional', label: 'Locais e Órgãos', className: 'barra-letters' }, +// { href: 'https://www.diariooficial.rs.gov.br/', label: 'Diário Oficial' }, +// { +// href: 'https://www.rs.gov.br/guria', +// className: 'barra-estado__guria-link', +// html: '' + GURIA_SVG, +// }, +// ] + +// var MENU_ITEMS_HTML = MENU_ITEMS.map(renderMenuItem).join('') + +// function ensureWindowOrigin() { +// if (typeof window === 'undefined') return + +// if (!('origin' in window.location)) { +// try { +// var locationObject = window.location +// locationObject.origin = locationObject.protocol + '//' + locationObject.host +// } catch (error) { +// } +// } +// } + +// function ensureStyles(styleHost) { +// if (typeof document === 'undefined' || !styleHost) return null + +// if (typeof styleHost.querySelector === 'function') { +// var existingStyle = styleHost.querySelector('#' + STYLE_ID) +// if (existingStyle) return existingStyle +// } + +// var styleElement = document.createElement('style') +// styleElement.id = STYLE_ID +// styleElement.type = 'text/css' +// styleElement.textContent = STYLE_TEXT + +// if (typeof styleHost.appendChild === 'function') { +// styleHost.appendChild(styleElement) +// return styleElement +// } + +// return null +// } + +// function createToggleId() { +// toggleSequence += 1 +// return 'barra-estado__toggle-' + toggleSequence +// } + +// function renderMarkup(toggleId) { +// return [ +// '
    ', +// '
    ', +// '
    ', +// '', +// '
    ', +// '
    ', +// '', +// '', +// '
      ', +// MENU_ITEMS_HTML, +// '
    ', +// '
    ', +// '
    ', +// '
    ', +// '
    ', +// '
    ', +// ].join('') +// } + +// function createRenderRoot(hostElement) { +// if (!hostElement) return null + +// if (hostElement.shadowRoot) return hostElement.shadowRoot + +// if (typeof hostElement.attachShadow !== 'function') { +// console.error('BarraEstadoStandalone: Shadow DOM não é suportado neste ambiente.') +// return null +// } + +// try { +// return hostElement.attachShadow({ mode: 'open' }) +// } catch (error) { +// console.error('BarraEstadoStandalone: falha ao criar Shadow DOM.', error) +// return null +// } +// } + +// function clearRenderRoot(renderRoot) { +// if (!renderRoot) return + +// while (renderRoot.firstChild) { +// renderRoot.removeChild(renderRoot.firstChild) +// } +// } + +// function bindToggleBehavior(renderRoot, toggleId) { +// if (!renderRoot || typeof renderRoot.querySelector !== 'function') return + +// var checkbox = renderRoot.querySelector('#' + toggleId) +// var toggle = renderRoot.querySelector('#' + toggleId + '-toggle') + +// if (!checkbox || !toggle) return + +// var syncAriaState = function () { +// var isOpen = Boolean(checkbox.checked) +// toggle.setAttribute('aria-expanded', isOpen ? 'true' : 'false') +// } + +// toggle.addEventListener('keydown', function (event) { +// if (event.key === 'Enter' || event.key === ' ') { +// event.preventDefault() +// checkbox.click() +// } + +// if (event.key === 'Escape' && checkbox.checked) { +// event.preventDefault() +// checkbox.checked = false +// checkbox.dispatchEvent(new Event('change', { bubbles: true })) +// } +// }) + +// checkbox.addEventListener('change', syncAriaState) +// syncAriaState() +// } + +// function mountBarraEstado(hostElement) { +// if (typeof document === 'undefined' || !hostElement) return null + +// ensureWindowOrigin() + +// var renderRoot = createRenderRoot(hostElement) +// if (!renderRoot) return null + +// var toggleId = createToggleId() + +// clearRenderRoot(renderRoot) +// ensureStyles(renderRoot) + +// var fragmentHost = document.createElement('div') +// fragmentHost.innerHTML = renderMarkup(toggleId) + +// while (fragmentHost.firstChild) { +// renderRoot.appendChild(fragmentHost.firstChild) +// } + +// bindToggleBehavior(renderRoot, toggleId) +// hostElement.setAttribute(MOUNT_ATTR, 'true') + +// return hostElement +// } + +// function getExistingHost() { +// if (typeof document === 'undefined') return null +// return document.querySelector('[' + HOST_ATTR + '="true"]') +// } + +// function createMountHost() { +// if (typeof document === 'undefined' || !document.body) return null + +// var existingHost = getExistingHost() +// if (existingHost) return existingHost + +// var host = document.createElement('div') +// host.setAttribute(HOST_ATTR, 'true') +// host.setAttribute(MOUNT_ATTR, 'false') + +// if (document.body.firstChild) { +// document.body.insertBefore(host, document.body.firstChild) +// } else { +// document.body.appendChild(host) +// } + +// return host +// } + +// function bootstrapIntoBody() { +// if (typeof document === 'undefined') return null + +// var run = function () { +// var host = createMountHost() + +// if (!host) { +// console.error('BarraEstadoStandalone: não foi possível criar o host no .') +// return null +// } + +// return mountBarraEstado(host) +// } + +// if (document.body) { +// return run() +// } + +// if (document.readyState === 'loading') { +// document.addEventListener('DOMContentLoaded', run, { once: true }) +// return null +// } + +// window.addEventListener('load', run, { once: true }) +// return null +// } + +// bootstrapIntoBody() +// })() +// =======Versão de teste Web Component======== (function () { 'use strict' var STYLE_ID = 'barra-estado-standalone-style' - var MOUNT_ATTR = 'data-barra-estado-mounted' var HOST_ATTR = 'data-barra-estado-host' + var MOUNT_ATTR = 'data-barra-estado-mounted' var toggleSequence = 0 var STYLE_TEXT = ` @@ -11,129 +474,232 @@ display: block; width: 100%; - --barra-estado-background: transparent; - --barra-estado-menu-background: #f8f8f8; - --barra-estado-hover-color: #000000; - --barra-estado-active-color: #e4e4e4; - --barra-estado-font-size: 12px; - --barra-estado-font-size-desktop: var(--barra-estado-font-size, 12px); --barra-estado-height: 32px; - --barra-estado-link-padding: 13px 40px; - --barra-estado-link-padding-desktop: 9px 13px; - --barra-estado-guria-link-padding: 7px 13px; - --barra-estado-highlight-color: var(--green-matriz-link-activated, #135428); + --barra-estado-background: #4f4f4f; + --barra-estado-menu-background: #737474; + --barra-estado-link-color: #e4e4e4; + --barra-estado-link-hover-color: #ffffff; + --barra-estado-link-active-color: #e4e4e4; + --barra-estado-highlight-color: #ffffff; --barra-estado-toggle-color: #bcbcbb; - --barra-estado-toggle-hover-color: #fff; + --barra-estado-toggle-hover-color: #ffffff; + --barra-estado-font-family: Roboto, Arial, sans-serif; + --barra-estado-font-size-mobile: 14px; + --barra-estado-font-size-desktop: 11px; + --barra-estado-link-padding-mobile: 13px 40px; + --barra-estado-link-padding-desktop: 9px 13px; + --barra-estado-guria-link-padding-desktop: 7px 13px; } -#rs-gov { - color: var(--green-matriz-link, #1a7235); - vertical-align: initial; +*, +*::before, +*::after { + box-sizing: border-box; } -input.barra-estado__checkbox, -.barra-estado__toggle { - display: none; +@import url(//fonts.googleapis.com/css?family=Roboto); + +.container-menu { + width: 100%; } .barra-estado { - background: var(--barra-estado-background); - min-height: var(--barra-estado-height); + height: var(--barra-estado-height); + background-color: var(--barra-estado-background); } .barra-estado__container { - min-height: var(--barra-estado-height); + position: relative; + height: 100%; + padding-right: 15px; + padding-left: 15px; + margin-right: auto; + margin-left: auto; } -.barra-estado__menu { - background: var(--barra-estado-menu-background); +.barra-estado__container a { + text-decoration: none; } -.barra-estado__menu > li { - float: left; - list-style: none; +@media (min-width: 768px) { + .barra-estado__container { + width: 750px; + } } -.barra-estado__nav { - display: block; - float: right; +@media (min-width: 992px) { + .barra-estado__container { + width: 970px; + } +} + +@media (min-width: 1200px) { + .barra-estado__container { + width: 1170px; + } +} + +.barra-estado__logo { + position: absolute; + left: 15px; + width: 77px; + height: 16px; + margin-top: 6px; +} + +.barra-estado__logo svg path { + fill: #f4f4f1; } -.barra-estado__menu, -.barra-estado__menu > li, -.barra-estado__menu > li > a, .barra-estado__nav { + display: block; + float: right; height: 100%; } .barra-estado__nav__form { display: inline-block; + height: 100%; padding: 0; margin: 0; - min-height: var(--barra-estado-height); +} + +.barra-estado__checkbox, +.barra-estado__toggle { + display: none; +} + +.barra-estado__menu { + height: auto; + padding: 14px 0 20px; + margin: 0; + font-family: var(--barra-estado-font-family); + text-transform: uppercase; + background: var(--barra-estado-menu-background); + border-top: 1px solid #ffffff; +} + +.barra-estado__menu > li { + float: left; + height: auto; + list-style: none; } .barra-estado__menu > li > a { display: block; - box-sizing: border-box; - padding: var(--barra-estado-link-padding); - color: var(--green-matriz-link, #1a7235); - font-size: var(--barra-estado-font-size); - font-weight: 700; + height: auto; + padding: var(--barra-estado-link-padding-mobile); + color: var(--barra-estado-link-color); + font-size: var(--barra-estado-font-size-mobile); + font-weight: 400; line-height: 1; + text-decoration: none; transition: box-shadow 0.25s linear, color 0.25s linear; } -.barra-estado__menu > li > a:hover > svg > path, -.barra-estado__menu > li > a:focus > svg > path { - fill: var(--barra-estado-hover-color); +.barra-estado__menu > li > a:visited { + color: var(--barra-estado-link-color) !important; } .barra-estado__menu > li > a:focus, .barra-estado__menu > li > a:hover { + color: var(--barra-estado-link-hover-color); box-shadow: inset 5px 0 var(--barra-estado-highlight-color); - color: var(--barra-estado-hover-color); } .barra-estado__menu > li > a:active { - color: var(--barra-estado-active-color) !important; + color: var(--barra-estado-link-active-color) !important; } -.barra-estado__menu, -.barra-estado__menu > li, -.barra-estado__menu > li > a { - height: auto; +.barra-estado__menu > li > a:focus-visible, +.barra-estado__toggle:focus-visible { + outline: 2px solid #ffcd07; + outline-offset: 2px; +} + +.barra-estado__menu > li > a:hover svg path, +.barra-estado__menu > li > a:focus svg path { + fill: var(--barra-estado-link-hover-color); } .barra-estado__toggle { z-index: 2; } -.barra-estado__toggle:after { - color: var(--barra-estado-toggle-color); +.barra-estado__toggle::after { content: attr(data-open); + display: block; + position: absolute; + right: 0; + width: 45px; + height: var(--barra-estado-height); + color: var(--barra-estado-toggle-color); + font-size: 18px; + line-height: 13px; + text-align: right; transition: all 0.5s linear; } -.barra-estado__toggle:hover:after { +.barra-estado__toggle:hover::after { color: var(--barra-estado-toggle-hover-color); } -.barra-estado__toggle:focus-visible { - outline: 2px solid var(--govrs-color-focus, #ffcd07); - outline-offset: 2px; +.barra-estado__checkbox:checked + .barra-estado__toggle::after { + content: attr(data-close); } -input.barra-estado__checkbox:checked + label.barra-estado__toggle:after { - content: attr(data-close); +@media only screen and (max-width: 991px) { + .barra-estado__menu { + display: none; + position: absolute; + top: var(--barra-estado-height); + right: 0; + z-index: 999; + width: 280px; + opacity: 0; + } + + .barra-estado__menu > li { + display: block; + float: none; + width: 100%; + margin: 0; + } + + .barra-estado__menu > li > a { + display: block; + width: 100%; + } + + .barra-estado__toggle { + display: block; + position: relative; + width: 45px; + height: var(--barra-estado-height); + cursor: pointer; + -webkit-touch-callout: none; + -webkit-user-select: none; + user-select: none; + } + + .barra-estado__checkbox:checked ~ .barra-estado__menu { + display: block; + opacity: 1; + } } @media only screen and (min-width: 992px) { .barra-estado__menu { + height: 100%; padding: 0; - border-top: none; margin-top: 0; - background: var(--barra-estado-menu-background); + background: transparent; + border-top: none; + } + + .barra-estado__menu > li, + .barra-estado__menu > li > a { + height: auto; } .barra-estado__menu > li > a { @@ -141,160 +707,140 @@ input.barra-estado__checkbox:checked + label.barra-estado__toggle:after { font-size: var(--barra-estado-font-size-desktop); } + .barra-estado__menu > li:last-child > a, + .barra-estado__menu > li > a.barra-estado__guria-link { + padding: var(--barra-estado-guria-link-padding-desktop); + } + .barra-estado__menu > li > a:focus, .barra-estado__menu > li > a:hover { + color: var(--barra-estado-link-hover-color); box-shadow: inset 0 2px var(--barra-estado-highlight-color); - color: var(--barra-estado-hover-color); } } -.barra-estado__menu > li > a.barra-estado__guria-link { - padding: var(--barra-estado-guria-link-padding); -} - +.sr-only, .visually-hidden { position: absolute !important; - overflow: hidden !important; width: 1px !important; height: 1px !important; padding: 0 !important; - border: 0 !important; margin: -1px !important; + overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; + border: 0 !important; } :host-context(.high-contrast) .barra-estado { - border-bottom: 1px solid var(--govrs-color-contrast-foreground, #ffffff) !important; - background-color: var(--govrs-color-contrast-background, #000000) !important; + background-color: #000000 !important; + border-bottom: 1px solid #ffffff !important; } :host-context(.high-contrast) .barra-estado__menu { - background-color: var(--govrs-color-contrast-background, #000000) !important; -} - -:host-context(.high-contrast) .barra-estado__menu > li > a > #GurIA path { - fill: var(--govrs-color-contrast-foreground, #ffffff) !important; + background-color: #000000 !important; } +:host-context(.high-contrast) .barra-estado__menu > li > a, +:host-context(.high-contrast) .barra-estado__menu > li > a:visited, +:host-context(.high-contrast) .barra-estado__menu > li > a:hover, :host-context(.high-contrast) .barra-estado__menu > li > a:focus { - box-shadow: inset 0 5px var(--govrs-color-contrast-foreground, #ffffff) !important; - color: var(--govrs-color-contrast-foreground, #ffffff) !important; + color: #ffffff !important; } -:host-context(.high-contrast) .barra-estado__menu > li > a:hover { - box-shadow: inset 0 5px var(--govrs-color-contrast-foreground, #ffffff) !important; - color: var(--govrs-color-contrast-foreground, #ffffff) !important; -} - -:host-context(.high-contrast) #rs-gov > path { - fill: var(--govrs-color-contrast-foreground, #ffffff) !important; +:host-context(.high-contrast) svg path { + fill: #ffffff !important; } ` var RS_GOV_SVG = ` - - RS.GOV + + RS.GOV.BR Governo do Estado do Rio Grande do Sul - - - - - - - - - + + + + + + + + + ` var GURIA_SVG = ` - + GurIA A tua nova assistente digital - - - - - - + + + + + + ` - function renderMenuItem(item) { - var className = item.className ? ' class="' + item.className + '"' : '' - var content = item.html || '' + item.label - - return '
  • ' + content + '
    • ' - } - var MENU_ITEMS = [ - { href: 'https://estado.rs.gov.br/agencia-de-noticias', label: 'Notícias' }, - { href: 'https://www.rs.gov.br/', label: 'Serviços' }, - { href: 'https://www.centraldocidadao.rs.gov.br/', label: 'Central do Cidadão' }, - { href: 'http://www.transparencia.rs.gov.br/', label: 'Transparência' }, - { href: 'https://estado.rs.gov.br/institucional', label: 'Locais e Órgãos', className: 'barra-letters' }, - { href: 'https://www.diariooficial.rs.gov.br/', label: 'Diário Oficial' }, + { + href: 'https://estado.rs.gov.br/agencia-de-noticias', + label: 'Notícias' + }, + { + href: 'https://www.rs.gov.br/', + label: 'Serviços' + }, + { + href: 'https://www.centraldocidadao.rs.gov.br/', + label: 'Central do Cidadão' + }, + { + href: 'http://www.transparencia.rs.gov.br/', + label: 'Transparência' + }, + { + href: 'https://estado.rs.gov.br/institucional', + label: 'Secretarias e Órgãos' + }, + { + href: 'https://www.diariooficial.rs.gov.br/', + label: 'Diário Oficial' + }, { href: 'https://www.rs.gov.br/guria', className: 'barra-estado__guria-link', - html: '' + GURIA_SVG, - }, + html: 'Estado ' + GURIA_SVG + } ] - var MENU_ITEMS_HTML = MENU_ITEMS.map(renderMenuItem).join('') - function ensureWindowOrigin() { if (typeof window === 'undefined') return - if (!('origin' in window.location)) { + if (!window.location.origin) { try { - var locationObject = window.location - locationObject.origin = locationObject.protocol + '//' + locationObject.host + window.location.origin = window.location.protocol + '//' + window.location.host } catch (error) { + // Ignora erro em navegadores que não permitem escrita em window.location.origin } } } - function ensureStyles(styleHost) { - if (typeof document === 'undefined' || !styleHost) return null - - if (typeof styleHost.querySelector === 'function') { - var existingStyle = styleHost.querySelector('#' + STYLE_ID) - if (existingStyle) return existingStyle - } + function removeExistingLegacyBars() { + if (typeof document === 'undefined') return - var styleElement = document.createElement('style') - styleElement.id = STYLE_ID - styleElement.type = 'text/css' - styleElement.textContent = STYLE_TEXT - - if (typeof styleHost.appendChild === 'function') { - styleHost.appendChild(styleElement) - return styleElement - } + var legacyBars = document.querySelectorAll('.barra-estado') + Array.prototype.forEach.call(legacyBars, function (element) { + element.remove() + }) - return null + var legacyContainers = document.querySelectorAll('.container-menu') + Array.prototype.forEach.call(legacyContainers, function (element) { + if (!element.closest('[' + HOST_ATTR + '="true"]')) { + element.remove() + } + }) } function createToggleId() { @@ -302,33 +848,67 @@ input.barra-estado__checkbox:checked + label.barra-estado__toggle:after { return 'barra-estado__toggle-' + toggleSequence } + function renderMenuItem(item) { + var className = item.className ? ' class="' + item.className + '"' : '' + var content = item.html || 'Estado ' + item.label + + return [ + '
  • ', + '', item.href, '', + content, + '', + '
    • ' + ].join('') + } + function renderMarkup(toggleId) { + var menuItemsHtml = MENU_ITEMS.map(renderMenuItem).join('') + return [ '
    ', '
    ', '
    ', - '', + '
    ', '
    ', - '', - '', - '
      ', - MENU_ITEMS_HTML, + + '', + + '
    ', '
    ', '
    ', '
    ', - '
    ', + '' ].join('') } function createRenderRoot(hostElement) { if (!hostElement) return null - if (hostElement.shadowRoot) return hostElement.shadowRoot + if (hostElement.shadowRoot) { + return hostElement.shadowRoot + } if (typeof hostElement.attachShadow !== 'function') { console.error('BarraEstadoStandalone: Shadow DOM não é suportado neste ambiente.') @@ -351,6 +931,24 @@ input.barra-estado__checkbox:checked + label.barra-estado__toggle:after { } } + function ensureStyles(renderRoot) { + if (!renderRoot) return null + + var existingStyle = renderRoot.querySelector('#' + STYLE_ID) + if (existingStyle) { + return existingStyle + } + + var styleElement = document.createElement('style') + styleElement.id = STYLE_ID + styleElement.type = 'text/css' + styleElement.textContent = STYLE_TEXT + + renderRoot.appendChild(styleElement) + + return styleElement + } + function bindToggleBehavior(renderRoot, toggleId) { if (!renderRoot || typeof renderRoot.querySelector !== 'function') return @@ -359,21 +957,30 @@ input.barra-estado__checkbox:checked + label.barra-estado__toggle:after { if (!checkbox || !toggle) return - var syncAriaState = function () { + function syncAriaState() { var isOpen = Boolean(checkbox.checked) toggle.setAttribute('aria-expanded', isOpen ? 'true' : 'false') } toggle.addEventListener('keydown', function (event) { - if (event.key === 'Enter' || event.key === ' ') { + var key = event.key || event.keyCode + + if (key === 'Enter' || key === ' ' || key === 13 || key === 32) { event.preventDefault() checkbox.click() } - if (event.key === 'Escape' && checkbox.checked) { + if ((key === 'Escape' || key === 'Esc' || key === 27) && checkbox.checked) { event.preventDefault() checkbox.checked = false - checkbox.dispatchEvent(new Event('change', { bubbles: true })) + + if (typeof Event === 'function') { + checkbox.dispatchEvent(new Event('change', { bubbles: true })) + } else { + var changeEvent = document.createEvent('Event') + changeEvent.initEvent('change', true, true) + checkbox.dispatchEvent(changeEvent) + } } }) @@ -381,10 +988,35 @@ input.barra-estado__checkbox:checked + label.barra-estado__toggle:after { syncAriaState() } + function getExistingHost() { + if (typeof document === 'undefined') return null + return document.querySelector('[' + HOST_ATTR + '="true"]') + } + + function createMountHost() { + if (typeof document === 'undefined' || !document.body) return null + + var existingHost = getExistingHost() + if (existingHost) return existingHost + + var host = document.createElement('div') + host.setAttribute(HOST_ATTR, 'true') + host.setAttribute(MOUNT_ATTR, 'false') + + if (document.body.firstChild) { + document.body.insertBefore(host, document.body.firstChild) + } else { + document.body.appendChild(host) + } + + return host + } + function mountBarraEstado(hostElement) { if (typeof document === 'undefined' || !hostElement) return null ensureWindowOrigin() + removeExistingLegacyBars() var renderRoot = createRenderRoot(hostElement) if (!renderRoot) return null @@ -402,39 +1034,16 @@ input.barra-estado__checkbox:checked + label.barra-estado__toggle:after { } bindToggleBehavior(renderRoot, toggleId) + hostElement.setAttribute(MOUNT_ATTR, 'true') return hostElement } - function getExistingHost() { - if (typeof document === 'undefined') return null - return document.querySelector('[' + HOST_ATTR + '="true"]') - } - - function createMountHost() { - if (typeof document === 'undefined' || !document.body) return null - - var existingHost = getExistingHost() - if (existingHost) return existingHost - - var host = document.createElement('div') - host.setAttribute(HOST_ATTR, 'true') - host.setAttribute(MOUNT_ATTR, 'false') - - if (document.body.firstChild) { - document.body.insertBefore(host, document.body.firstChild) - } else { - document.body.appendChild(host) - } - - return host - } - function bootstrapIntoBody() { if (typeof document === 'undefined') return null - var run = function () { + function run() { var host = createMountHost() if (!host) { From 4783c0a393a7ae5a281d1d0bf02bc76f57ccad95 Mon Sep 17 00:00:00 2001 From: Gabriel-SAbreu Date: Tue, 23 Jun 2026 08:45:52 -0300 Subject: [PATCH 02/40] =?UTF-8?q?#1399172=20-=20Adicionado=20verifica?= =?UTF-8?q?=C3=A7=C3=A3o=20de=20dominio=20para=20evitar=20renderiza=C3=A7?= =?UTF-8?q?=C3=A3o?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../BarraEstado/BarraEstadoStandalone.js | 664 +++--------------- 1 file changed, 81 insertions(+), 583 deletions(-) diff --git a/src/components/BarraEstado/BarraEstadoStandalone.js b/src/components/BarraEstado/BarraEstadoStandalone.js index 749b73d..ea22836 100644 --- a/src/components/BarraEstado/BarraEstadoStandalone.js +++ b/src/components/BarraEstado/BarraEstadoStandalone.js @@ -462,610 +462,108 @@ // })() // =======Versão de teste Web Component======== (function () { - 'use strict' - - var STYLE_ID = 'barra-estado-standalone-style' - var HOST_ATTR = 'data-barra-estado-host' - var MOUNT_ATTR = 'data-barra-estado-mounted' - var toggleSequence = 0 - - var STYLE_TEXT = ` -:host { - display: block; - width: 100%; - - --barra-estado-height: 32px; - --barra-estado-background: #4f4f4f; - --barra-estado-menu-background: #737474; - --barra-estado-link-color: #e4e4e4; - --barra-estado-link-hover-color: #ffffff; - --barra-estado-link-active-color: #e4e4e4; - --barra-estado-highlight-color: #ffffff; - --barra-estado-toggle-color: #bcbcbb; - --barra-estado-toggle-hover-color: #ffffff; - --barra-estado-font-family: Roboto, Arial, sans-serif; - --barra-estado-font-size-mobile: 14px; - --barra-estado-font-size-desktop: 11px; - --barra-estado-link-padding-mobile: 13px 40px; - --barra-estado-link-padding-desktop: 9px 13px; - --barra-estado-guria-link-padding-desktop: 7px 13px; -} - -*, -*::before, -*::after { - box-sizing: border-box; -} - -@import url(//fonts.googleapis.com/css?family=Roboto); - -.container-menu { - width: 100%; -} - -.barra-estado { - height: var(--barra-estado-height); - background-color: var(--barra-estado-background); -} - -.barra-estado__container { - position: relative; - height: 100%; - padding-right: 15px; - padding-left: 15px; - margin-right: auto; - margin-left: auto; -} - -.barra-estado__container a { - text-decoration: none; -} - -@media (min-width: 768px) { - .barra-estado__container { - width: 750px; - } -} - -@media (min-width: 992px) { - .barra-estado__container { - width: 970px; - } -} - -@media (min-width: 1200px) { - .barra-estado__container { - width: 1170px; - } -} - -.barra-estado__logo { - position: absolute; - left: 15px; - width: 77px; - height: 16px; - margin-top: 6px; -} - -.barra-estado__logo svg path { - fill: #f4f4f1; -} - -.barra-estado__nav { - display: block; - float: right; - height: 100%; -} - -.barra-estado__nav__form { - display: inline-block; - height: 100%; - padding: 0; - margin: 0; -} - -.barra-estado__checkbox, -.barra-estado__toggle { - display: none; -} - -.barra-estado__menu { - height: auto; - padding: 14px 0 20px; - margin: 0; - font-family: var(--barra-estado-font-family); - text-transform: uppercase; - background: var(--barra-estado-menu-background); - border-top: 1px solid #ffffff; -} - -.barra-estado__menu > li { - float: left; - height: auto; - list-style: none; -} - -.barra-estado__menu > li > a { - display: block; - height: auto; - padding: var(--barra-estado-link-padding-mobile); - color: var(--barra-estado-link-color); - font-size: var(--barra-estado-font-size-mobile); - font-weight: 400; - line-height: 1; - text-decoration: none; - transition: box-shadow 0.25s linear, color 0.25s linear; -} - -.barra-estado__menu > li > a:visited { - color: var(--barra-estado-link-color) !important; -} - -.barra-estado__menu > li > a:focus, -.barra-estado__menu > li > a:hover { - color: var(--barra-estado-link-hover-color); - box-shadow: inset 5px 0 var(--barra-estado-highlight-color); -} - -.barra-estado__menu > li > a:active { - color: var(--barra-estado-link-active-color) !important; -} - -.barra-estado__menu > li > a:focus-visible, -.barra-estado__toggle:focus-visible { - outline: 2px solid #ffcd07; - outline-offset: 2px; -} - -.barra-estado__menu > li > a:hover svg path, -.barra-estado__menu > li > a:focus svg path { - fill: var(--barra-estado-link-hover-color); -} - -.barra-estado__toggle { - z-index: 2; -} - -.barra-estado__toggle::after { - content: attr(data-open); - display: block; - position: absolute; - right: 0; - width: 45px; - height: var(--barra-estado-height); - color: var(--barra-estado-toggle-color); - font-size: 18px; - line-height: 13px; - text-align: right; - transition: all 0.5s linear; -} - -.barra-estado__toggle:hover::after { - color: var(--barra-estado-toggle-hover-color); -} - -.barra-estado__checkbox:checked + .barra-estado__toggle::after { - content: attr(data-close); -} - -@media only screen and (max-width: 991px) { - .barra-estado__menu { - display: none; - position: absolute; - top: var(--barra-estado-height); - right: 0; - z-index: 999; - width: 280px; - opacity: 0; - } - - .barra-estado__menu > li { - display: block; - float: none; - width: 100%; - margin: 0; - } - - .barra-estado__menu > li > a { - display: block; - width: 100%; - } - - .barra-estado__toggle { - display: block; - position: relative; - width: 45px; - height: var(--barra-estado-height); - cursor: pointer; - -webkit-touch-callout: none; - -webkit-user-select: none; - user-select: none; - } - - .barra-estado__checkbox:checked ~ .barra-estado__menu { - display: block; - opacity: 1; - } -} - -@media only screen and (min-width: 992px) { - .barra-estado__menu { - height: 100%; - padding: 0; - margin-top: 0; - background: transparent; - border-top: none; - } - - .barra-estado__menu > li, - .barra-estado__menu > li > a { - height: auto; - } - - .barra-estado__menu > li > a { - padding: var(--barra-estado-link-padding-desktop); - font-size: var(--barra-estado-font-size-desktop); - } - - .barra-estado__menu > li:last-child > a, - .barra-estado__menu > li > a.barra-estado__guria-link { - padding: var(--barra-estado-guria-link-padding-desktop); - } - - .barra-estado__menu > li > a:focus, - .barra-estado__menu > li > a:hover { - color: var(--barra-estado-link-hover-color); - box-shadow: inset 0 2px var(--barra-estado-highlight-color); - } -} - -.sr-only, -.visually-hidden { - position: absolute !important; - width: 1px !important; - height: 1px !important; - padding: 0 !important; - margin: -1px !important; - overflow: hidden !important; - clip: rect(0, 0, 0, 0) !important; - white-space: nowrap !important; - border: 0 !important; -} - -:host-context(.high-contrast) .barra-estado { - background-color: #000000 !important; - border-bottom: 1px solid #ffffff !important; -} - -:host-context(.high-contrast) .barra-estado__menu { - background-color: #000000 !important; -} - -:host-context(.high-contrast) .barra-estado__menu > li > a, -:host-context(.high-contrast) .barra-estado__menu > li > a:visited, -:host-context(.high-contrast) .barra-estado__menu > li > a:hover, -:host-context(.high-contrast) .barra-estado__menu > li > a:focus { - color: #ffffff !important; -} - -:host-context(.high-contrast) svg path { - fill: #ffffff !important; -} -` - - var RS_GOV_SVG = ` - - RS.GOV.BR - Governo do Estado do Rio Grande do Sul - - - - - - - - - - -` - - var GURIA_SVG = ` - - GurIA - A tua nova assistente digital - - - - - - - -` - - var MENU_ITEMS = [ - { - href: 'https://estado.rs.gov.br/agencia-de-noticias', - label: 'Notícias' - }, - { - href: 'https://www.rs.gov.br/', - label: 'Serviços' - }, - { - href: 'https://www.centraldocidadao.rs.gov.br/', - label: 'Central do Cidadão' - }, - { - href: 'http://www.transparencia.rs.gov.br/', - label: 'Transparência' - }, - { - href: 'https://estado.rs.gov.br/institucional', - label: 'Secretarias e Órgãos' - }, - { - href: 'https://www.diariooficial.rs.gov.br/', - label: 'Diário Oficial' - }, - { - href: 'https://www.rs.gov.br/guria', - className: 'barra-estado__guria-link', - html: 'Estado ' + GURIA_SVG - } - ] - - function ensureWindowOrigin() { - if (typeof window === 'undefined') return - - if (!window.location.origin) { - try { - window.location.origin = window.location.protocol + '//' + window.location.host - } catch (error) { - // Ignora erro em navegadores que não permitem escrita em window.location.origin - } - } - } - - function removeExistingLegacyBars() { - if (typeof document === 'undefined') return - - var legacyBars = document.querySelectorAll('.barra-estado') - Array.prototype.forEach.call(legacyBars, function (element) { - element.remove() - }) - - var legacyContainers = document.querySelectorAll('.container-menu') - Array.prototype.forEach.call(legacyContainers, function (element) { - if (!element.closest('[' + HOST_ATTR + '="true"]')) { - element.remove() - } - }) - } - - function createToggleId() { - toggleSequence += 1 - return 'barra-estado__toggle-' + toggleSequence - } - - function renderMenuItem(item) { - var className = item.className ? ' class="' + item.className + '"' : '' - var content = item.html || 'Estado ' + item.label - - return [ - '
  • ', - '', item.href, '', - content, - '', - '
    • ' - ].join('') - } - - function renderMarkup(toggleId) { - var menuItemsHtml = MENU_ITEMS.map(renderMenuItem).join('') - - return [ - '
    ', - '
    ', - '
    ', - - '', - - '
    ', - '
    ', - - '', - - '
    ', - '
    ', - '
    ', - '
    ', - '
    ' - ].join('') - } + 'use strict'; - function createRenderRoot(hostElement) { - if (!hostElement) return null + /* =========================CONTROLE DE DOMÍNIO========================== */ + function ignorarDominio() { + var dominioAtual = window.location.hostname.toLowerCase(); - if (hostElement.shadowRoot) { - return hostElement.shadowRoot - } + var dominiosIgnorados = [ + // adicionar outros se necessário + "exemplo.rs.gov.br" + ]; - if (typeof hostElement.attachShadow !== 'function') { - console.error('BarraEstadoStandalone: Shadow DOM não é suportado neste ambiente.') - return null + if (dominiosIgnorados.includes(dominioAtual)) { + return true; } - try { - return hostElement.attachShadow({ mode: 'open' }) - } catch (error) { - console.error('BarraEstadoStandalone: falha ao criar Shadow DOM.', error) - return null + if (dominioAtual.endsWith(".pro.intra.rs.gov.br")) { + return true; } - } - function clearRenderRoot(renderRoot) { - if (!renderRoot) return - - while (renderRoot.firstChild) { - renderRoot.removeChild(renderRoot.firstChild) - } + return false; } - function ensureStyles(renderRoot) { - if (!renderRoot) return null - - var existingStyle = renderRoot.querySelector('#' + STYLE_ID) - if (existingStyle) { - return existingStyle - } - - var styleElement = document.createElement('style') - styleElement.id = STYLE_ID - styleElement.type = 'text/css' - styleElement.textContent = STYLE_TEXT - - renderRoot.appendChild(styleElement) - - return styleElement + if (ignorarDominio()) return; + + + /* ========================= + ⚙ CONFIG + ========================== */ + var STYLE_ID = "barra-estado-style"; + var toggleId = "barra-toggle-" + Date.now(); + + + /* ========================= CSS (mantido do código 2) ========================== */ + var STYLE = ` + :host { display:block;width:100%; } + .barra-estado { min-height:32px; background:#fff; } + .barra-estado__container { display:flex; justify-content:space-between; align-items:center; padding:0 15px; } + .barra-estado__menu { list-style:none; display:flex; margin:0; padding:0; gap:10px; } + .barra-estado__menu a { text-decoration:none; font-size:12px; font-weight:bold; color:#1a7235; } + `; + + + /* ========================= HTML ========================== */ + function getHTML(id) { + return ` +
    +
    + + + RS.GOV + + +
    + + + + +
    + +
    +
    + `; } - function bindToggleBehavior(renderRoot, toggleId) { - if (!renderRoot || typeof renderRoot.querySelector !== 'function') return - var checkbox = renderRoot.querySelector('#' + toggleId) - var toggle = renderRoot.querySelector('#' + toggleId + '-toggle') + /* ========================= RENDER (Shadow DOM) ========================== */ + function render() { + var host = document.createElement("div"); - if (!checkbox || !toggle) return + // cria shadow DOM + var shadow = host.attachShadow({ mode: "open" }); - function syncAriaState() { - var isOpen = Boolean(checkbox.checked) - toggle.setAttribute('aria-expanded', isOpen ? 'true' : 'false') - } + // adiciona estilo + var style = document.createElement("style"); + style.id = STYLE_ID; + style.textContent = STYLE; + shadow.appendChild(style); - toggle.addEventListener('keydown', function (event) { - var key = event.key || event.keyCode - - if (key === 'Enter' || key === ' ' || key === 13 || key === 32) { - event.preventDefault() - checkbox.click() - } - - if ((key === 'Escape' || key === 'Esc' || key === 27) && checkbox.checked) { - event.preventDefault() - checkbox.checked = false - - if (typeof Event === 'function') { - checkbox.dispatchEvent(new Event('change', { bubbles: true })) - } else { - var changeEvent = document.createEvent('Event') - changeEvent.initEvent('change', true, true) - checkbox.dispatchEvent(changeEvent) - } - } - }) - - checkbox.addEventListener('change', syncAriaState) - syncAriaState() - } + // adiciona HTML + var wrapper = document.createElement("div"); + wrapper.innerHTML = getHTML(toggleId); + shadow.appendChild(wrapper); - function getExistingHost() { - if (typeof document === 'undefined') return null - return document.querySelector('[' + HOST_ATTR + '="true"]') + // insere no topo da página + document.body.prepend(host); } - function createMountHost() { - if (typeof document === 'undefined' || !document.body) return null - - var existingHost = getExistingHost() - if (existingHost) return existingHost - var host = document.createElement('div') - host.setAttribute(HOST_ATTR, 'true') - host.setAttribute(MOUNT_ATTR, 'false') - - if (document.body.firstChild) { - document.body.insertBefore(host, document.body.firstChild) + /* ========================= INIT ========================== */ + function init() { + if (document.readyState === "loading") { + document.addEventListener("DOMContentLoaded", render); } else { - document.body.appendChild(host) + render(); } - - return host } - function mountBarraEstado(hostElement) { - if (typeof document === 'undefined' || !hostElement) return null - - ensureWindowOrigin() - removeExistingLegacyBars() - - var renderRoot = createRenderRoot(hostElement) - if (!renderRoot) return null - - var toggleId = createToggleId() - - clearRenderRoot(renderRoot) - ensureStyles(renderRoot) - - var fragmentHost = document.createElement('div') - fragmentHost.innerHTML = renderMarkup(toggleId) - - while (fragmentHost.firstChild) { - renderRoot.appendChild(fragmentHost.firstChild) - } - - bindToggleBehavior(renderRoot, toggleId) - - hostElement.setAttribute(MOUNT_ATTR, 'true') - - return hostElement - } - - function bootstrapIntoBody() { - if (typeof document === 'undefined') return null - - function run() { - var host = createMountHost() - - if (!host) { - console.error('BarraEstadoStandalone: não foi possível criar o host no .') - return null - } - - return mountBarraEstado(host) - } - - if (document.body) { - return run() - } - - if (document.readyState === 'loading') { - document.addEventListener('DOMContentLoaded', run, { once: true }) - return null - } - - window.addEventListener('load', run, { once: true }) - return null - } + init(); - bootstrapIntoBody() -})() \ No newline at end of file +})(); \ No newline at end of file From 1960de0177417cb584c7532118b3caa5e6a51d09 Mon Sep 17 00:00:00 2001 From: Gabriel-SAbreu Date: Tue, 23 Jun 2026 10:09:33 -0300 Subject: [PATCH 03/40] #1399172 - Ajuste nos dominios de intranet --- src/components/BarraEstado/BarraEstadoStandalone.js | 8 +++----- 1 file changed, 3 insertions(+), 5 deletions(-) diff --git a/src/components/BarraEstado/BarraEstadoStandalone.js b/src/components/BarraEstado/BarraEstadoStandalone.js index ea22836..8cb9404 100644 --- a/src/components/BarraEstado/BarraEstadoStandalone.js +++ b/src/components/BarraEstado/BarraEstadoStandalone.js @@ -477,7 +477,7 @@ return true; } - if (dominioAtual.endsWith(".pro.intra.rs.gov.br")) { + if (dominioAtual.endsWith(".intra.rs.gov.br")) { return true; } @@ -487,14 +487,12 @@ if (ignorarDominio()) return; - /* ========================= - ⚙ CONFIG - ========================== */ + /* ========================= CONFIG ========================== */ var STYLE_ID = "barra-estado-style"; var toggleId = "barra-toggle-" + Date.now(); - /* ========================= CSS (mantido do código 2) ========================== */ + /* ========================= CSS ========================== */ var STYLE = ` :host { display:block;width:100%; } .barra-estado { min-height:32px; background:#fff; } From 2ec816d3ac795239d556b02dc162e2b62baff3d1 Mon Sep 17 00:00:00 2001 From: Gabriel-SAbreu Date: Tue, 23 Jun 2026 11:19:52 -0300 Subject: [PATCH 04/40] #1399172 - Ajuste nos dominios de intranet v2 --- .../BarraEstado/BarraEstadoStandalone.js | 839 ++++++++++++++++-- 1 file changed, 775 insertions(+), 64 deletions(-) diff --git a/src/components/BarraEstado/BarraEstadoStandalone.js b/src/components/BarraEstado/BarraEstadoStandalone.js index 8cb9404..222b32f 100644 --- a/src/components/BarraEstado/BarraEstadoStandalone.js +++ b/src/components/BarraEstado/BarraEstadoStandalone.js @@ -461,23 +461,138 @@ // bootstrapIntoBody() // })() // =======Versão de teste Web Component======== +// (function () { +// 'use strict'; + +// /* =========================CONTROLE DE DOMÍNIO========================== */ +// function ignorarDominio() { +// var dominioAtual = window.location.hostname.toLowerCase(); + +// var dominiosIgnorados = [ +// // adicionar outros se necessário +// "exemplo.rs.gov.br" +// ]; + +// if (dominiosIgnorados.includes(dominioAtual)) { +// return true; +// } + +// if (dominioAtual.endsWith(".intra.rs.gov.br")) { +// return true; +// } + +// return false; +// } + +// if (ignorarDominio()) return; + + +// /* ========================= CONFIG ========================== */ +// var STYLE_ID = "barra-estado-style"; +// var toggleId = "barra-toggle-" + Date.now(); + + +// /* ========================= CSS ========================== */ +// var STYLE = ` +// :host { display:block;width:100%; } +// .barra-estado { min-height:32px; background:#fff; } +// .barra-estado__container { display:flex; justify-content:space-between; align-items:center; padding:0 15px; } +// .barra-estado__menu { list-style:none; display:flex; margin:0; padding:0; gap:10px; } +// .barra-estado__menu a { text-decoration:none; font-size:12px; font-weight:bold; color:#1a7235; } +// `; + + +// /* ========================= HTML ========================== */ +// function getHTML(id) { +// return ` +//
    +//
    + +// +// RS.GOV +// + +//
    +// +// + +//
      +//
    • Notícias
      • +//
    • Serviços
      • +//
    • .rs.gov.br/">Central
      • +//
    • parencia.rs.gov.br/">Transparência
      • +//
    +//
    + +//
    +//
    +// `; +// } + + +// /* ========================= RENDER (Shadow DOM) ========================== */ +// function render() { +// var host = document.createElement("div"); + +// // cria shadow DOM +// var shadow = host.attachShadow({ mode: "open" }); + +// // adiciona estilo +// var style = document.createElement("style"); +// style.id = STYLE_ID; +// style.textContent = STYLE; +// shadow.appendChild(style); + +// // adiciona HTML +// var wrapper = document.createElement("div"); +// wrapper.innerHTML = getHTML(toggleId); +// shadow.appendChild(wrapper); + +// // insere no topo da página +// document.body.prepend(host); +// } + + +// /* ========================= INIT ========================== */ +// function init() { +// if (document.readyState === "loading") { +// document.addEventListener("DOMContentLoaded", render); +// } else { +// render(); +// } +// } + +// init(); + +// })(); + +/* ========================= Código teste 23/06 web component ========================== */ (function () { 'use strict'; - /* =========================CONTROLE DE DOMÍNIO========================== */ + var STYLE_ID = 'barra-estado-standalone-style'; + var HOST_ATTR = 'data-barra-estado-host'; + var MOUNT_ATTR = 'data-barra-estado-mounted'; + var toggleSequence = 0; + + /* ========================= + * Controle de domínio + * ========================= */ function ignorarDominio() { + if (typeof window === 'undefined' || !window.location) return false; + var dominioAtual = window.location.hostname.toLowerCase(); var dominiosIgnorados = [ - // adicionar outros se necessário - "exemplo.rs.gov.br" + 'exemplo.rs.gov.br' + // adicionar outros domínios específicos aqui ]; - if (dominiosIgnorados.includes(dominioAtual)) { + if (dominiosIgnorados.indexOf(dominioAtual) !== -1) { return true; } - if (dominioAtual.endsWith(".intra.rs.gov.br")) { + if (dominioAtual.endsWith('.pro.intra.rs.gov.br')) { return true; } @@ -486,82 +601,678 @@ if (ignorarDominio()) return; + /* ========================= + * Polyfill location.origin + * ========================= */ + function ensureWindowOrigin() { + if (typeof window === 'undefined') return; + + if (!window.location.origin) { + try { + window.location.origin = + window.location.protocol + '//' + window.location.host; + } catch (error) { + // silencioso por compatibilidade com browsers legados + } + } + } - /* ========================= CONFIG ========================== */ - var STYLE_ID = "barra-estado-style"; - var toggleId = "barra-toggle-" + Date.now(); + /* ========================= + * CSS baseado no código de produção + * ========================= */ + var STYLE_TEXT = ` +:host { + display: block; + width: 100%; + font-family: Roboto, Arial, sans-serif; +} + +:host *, +:host *::before, +:host *::after { + box-sizing: border-box; +} + +@import url(//fonts.googleapis.com/css?family=Roboto); + +.barra-estado { + height: 32px; + min-height: 32px; + background-color: #4f4f4f; + position: relative; + z-index: 999; +} + +.barra-estado__container { + position: relative; + padding-right: 15px; + padding-left: 15px; + margin-right: auto; + margin-left: auto; + height: 100%; +} + +.barra-estado__container a { + text-decoration: none; +} + +@media (min-width: 768px) { + .barra-estado__container { + width: 750px; + } +} +@media (min-width: 992px) { + .barra-estado__container { + width: 970px; + } +} - /* ========================= CSS ========================== */ - var STYLE = ` - :host { display:block;width:100%; } - .barra-estado { min-height:32px; background:#fff; } - .barra-estado__container { display:flex; justify-content:space-between; align-items:center; padding:0 15px; } - .barra-estado__menu { list-style:none; display:flex; margin:0; padding:0; gap:10px; } - .barra-estado__menu a { text-decoration:none; font-size:12px; font-weight:bold; color:#1a7235; } - `; +@media (min-width: 1200px) { + .barra-estado__container { + width: 1170px; + } +} + +.barra-estado__logo { + position: absolute; + width: 77px; + height: 16px; + margin-top: 6px; + left: 15px; +} + +.barra-estado__logo svg { + display: block; +} + +.barra-estado__logo svg path { + fill: #f4f4f1; +} + +.barra-estado__nav { + display: block; + float: right; + height: 100%; +} + +.barra-estado__nav__form { + margin: 0; + padding: 0; + display: inline-block; + height: 100%; +} + +.barra-estado__checkbox, +.barra-estado__toggle { + display: none; +} + +.barra-estado__menu { + font-family: Roboto, Arial, sans-serif; + text-transform: uppercase; + background: #737474; + border-top: 1px solid #fff; + margin-top: 0; + padding: 14px 0 20px; + list-style: none; +} + +.barra-estado__menu, +.barra-estado__menu > li, +.barra-estado__menu > li > a, +.barra-estado__nav { + height: 100%; +} + +.barra-estado__menu > li { + list-style: none; + float: left; +} + +.barra-estado__menu > li > a { + display: block; + font-weight: 400; + padding: 13px 40px; + font-size: 14px; + line-height: 1; + color: #e4e4e4; + text-decoration: none; + transition: box-shadow 0.25s linear, color 0.25s linear; +} + +.barra-estado__menu > li > a:visited { + color: #e4e4e4 !important; +} + +.barra-estado__menu > li > a:focus, +.barra-estado__menu > li > a:hover { + box-shadow: inset 5px 0 #fff; + color: #fff; +} + +.barra-estado__menu > li > a:focus svg path, +.barra-estado__menu > li > a:hover svg path { + fill: #fff; +} + +.barra-estado__menu > li > a:active { + color: #e4e4e4 !important; +} + +.barra-estado__menu, +.barra-estado__menu > li, +.barra-estado__menu > li > a { + height: auto; +} + +.barra-estado__guria-link svg { + display: block; +} + +.barra-estado__guria-link svg path { + fill: #fff; +} + +.barra-estado__toggle { + z-index: 2; +} + +.barra-estado__toggle:after { + content: attr(data-open); + display: block; + position: absolute; + right: 0; + width: 45px; + height: 32px; + text-align: right; + font-size: 18px; + line-height: 13px; + color: #bcbcbb; + transition: all 0.5s linear; +} + +.barra-estado__toggle:hover:after { + color: #fff; +} + +.barra-estado__toggle:focus-visible { + outline: 2px solid #ffcd07; + outline-offset: 2px; +} + +.barra-estado__checkbox:checked + .barra-estado__toggle:after { + content: attr(data-close); +} + +.sr-only, +.visually-hidden { + position: absolute !important; + width: 1px !important; + height: 1px !important; + padding: 0 !important; + margin: -1px !important; + overflow: hidden !important; + clip: rect(0, 0, 0, 0) !important; + border: 0 !important; + white-space: nowrap !important; +} + +/* ========================= + * Mobile + * ========================= */ +@media only screen and (max-width: 991px) { + .barra-estado__menu { + display: none; + opacity: 0; + width: 280px; + position: absolute; + right: 0; + top: 32px; + z-index: 999; + } + .barra-estado__menu > li { + display: block; + width: 100%; + margin: 0; + float: none; + } - /* ========================= HTML ========================== */ - function getHTML(id) { - return ` -
    -
    - - - RS.GOV - - -
    - - - - -
    - -
    -
    - `; + .barra-estado__menu > li > a { + display: block; + width: 100%; + padding: 13px 40px; + } + + .barra-estado__toggle { + display: block; + position: relative; + cursor: pointer; + touch-action: manipulation; + user-select: none; + width: 45px; + height: 32px; + } + + .barra-estado__checkbox:checked ~ .barra-estado__menu { + display: block; + opacity: 1; + } +} + +/* ========================= + * Desktop + * ========================= */ +@media only screen and (min-width: 992px) { + .barra-estado__menu { + background: transparent; + border-top: none; + padding: 0; + margin-top: 0; } + .barra-estado__menu > li > a { + padding: 9px 13px; + font-size: 11px; + } - /* ========================= RENDER (Shadow DOM) ========================== */ - function render() { - var host = document.createElement("div"); + .barra-estado__menu > li > a.barra-estado__guria-link { + padding: 7px 13px; + } - // cria shadow DOM - var shadow = host.attachShadow({ mode: "open" }); + .barra-estado__menu > li > a:focus, + .barra-estado__menu > li > a:hover { + box-shadow: inset 0 2px #fff; + color: #fff; + } +} + +/* ========================= + * Alto contraste + * ========================= */ +:host-context(.high-contrast) .barra-estado { + border-bottom: 1px solid #ffffff !important; + background-color: #000000 !important; +} + +:host-context(.high-contrast) .barra-estado__menu { + background-color: #000000 !important; +} + +:host-context(.high-contrast) .barra-estado__menu > li > a { + color: #ffffff !important; +} + +:host-context(.high-contrast) .barra-estado__menu > li > a:focus, +:host-context(.high-contrast) .barra-estado__menu > li > a:hover { + box-shadow: inset 0 5px #ffffff !important; + color: #ffffff !important; +} + +:host-context(.high-contrast) svg path { + fill: #ffffff !important; +} +`; + + /* ========================= + * SVGs inline + * Use aqui os SVGs completos já existentes + * ========================= */ + + var RS_GOV_SVG = ` + + RS.GOV.BR + Governo do Estado do Rio Grande do Sul + + + + + + + + + + +`; + + var GURIA_SVG = ` + + GurIA + A tua nova assistente digital + + + + + + + +`; + + /* ========================= + * Itens do menu + * ========================= */ + var MENU_ITEMS = [ + { + href: 'https://estado.rs.gov.br/agencia-de-noticias', + label: 'Notícias' + }, + { + href: 'https://www.rs.gov.br/', + label: 'Serviços' + }, + { + href: 'https://www.centraldocidadao.rs.gov.br/', + label: 'Central do Cidadão' + }, + { + href: 'http://www.transparencia.rs.gov.br/', + label: 'Transparência' + }, + { + href: 'https://estado.rs.gov.br/institucional', + label: 'Secretarias e Órgãos' + }, + { + href: 'https://www.diariooficial.rs.gov.br/', + label: 'Diário Oficial' + }, + { + href: 'https://www.rs.gov.br/guria', + className: 'barra-estado__guria-link', + html: 'Estado ' + GURIA_SVG + } + ]; + + function escapeHtml(value) { + return String(value) + .replace(/&/g, '&') + .replace(//g, '>') + .replace(/"/g, '"') + .replace(/'/g, '''); + } - // adiciona estilo - var style = document.createElement("style"); - style.id = STYLE_ID; - style.textContent = STYLE; - shadow.appendChild(style); + function renderMenuItem(item) { + var className = item.className ? ' class="' + item.className + '"' : ''; + var content = + item.html || + 'Estado ' + escapeHtml(item.label); + + return ( + '
  • ' + + '' + + content + + '' + + '
    • ' + ); + } - // adiciona HTML - var wrapper = document.createElement("div"); - wrapper.innerHTML = getHTML(toggleId); - shadow.appendChild(wrapper); + function createToggleId() { + toggleSequence += 1; + return 'barra-estado__toggle-' + Date.now() + '-' + toggleSequence; + } - // insere no topo da página - document.body.prepend(host); + function renderMarkup(toggleId) { + var menuItemsHtml = MENU_ITEMS.map(renderMenuItem).join(''); + + return [ + '
    ', + '
    ', + '
    ', + + '', + + '
    ', + '
    ', + + '', + + '
    ', + '
    ', + + '
    ', + '
    ', + '
    ' + ].join(''); } + /* ========================= + * Shadow DOM + * ========================= */ + function createRenderRoot(hostElement) { + if (!hostElement) return null; + + if (hostElement.shadowRoot) { + return hostElement.shadowRoot; + } - /* ========================= INIT ========================== */ - function init() { - if (document.readyState === "loading") { - document.addEventListener("DOMContentLoaded", render); + if (typeof hostElement.attachShadow !== 'function') { + console.error('BarraEstado: Shadow DOM não é suportado neste ambiente.'); + return null; + } + + try { + return hostElement.attachShadow({ mode: 'open' }); + } catch (error) { + console.error('BarraEstado: falha ao criar Shadow DOM.', error); + return null; + } + } + + function clearRenderRoot(renderRoot) { + if (!renderRoot) return; + + while (renderRoot.firstChild) { + renderRoot.removeChild(renderRoot.firstChild); + } + } + + function ensureStyles(renderRoot) { + if (!renderRoot || typeof document === 'undefined') return null; + + var existingStyle = renderRoot.querySelector('#' + STYLE_ID); + + if (existingStyle) { + return existingStyle; + } + + var styleElement = document.createElement('style'); + styleElement.id = STYLE_ID; + styleElement.type = 'text/css'; + styleElement.textContent = STYLE_TEXT; + + renderRoot.appendChild(styleElement); + + return styleElement; + } + + function bindToggleBehavior(renderRoot, toggleId) { + if (!renderRoot || typeof renderRoot.querySelector !== 'function') return; + + var checkbox = renderRoot.querySelector('#' + toggleId); + var toggle = renderRoot.querySelector('#' + toggleId + '-toggle'); + + if (!checkbox || !toggle) return; + + function syncAriaState() { + var isOpen = Boolean(checkbox.checked); + toggle.setAttribute('aria-expanded', isOpen ? 'true' : 'false'); + } + + toggle.addEventListener('keydown', function (event) { + var key = event.key || event.code; + + if (key === 'Enter' || key === ' ') { + event.preventDefault(); + checkbox.click(); + } + + if (key === 'Escape' && checkbox.checked) { + event.preventDefault(); + checkbox.checked = false; + checkbox.dispatchEvent(new Event('change', { bubbles: true })); + } + }); + + checkbox.addEventListener('change', syncAriaState); + + syncAriaState(); + } + + /* ========================= + * Host / montagem + * ========================= */ + function getExistingHost() { + if (typeof document === 'undefined') return null; + + return document.querySelector('[' + HOST_ATTR + '="true"]'); + } + + function removeLegacyBarraEstado() { + if (typeof document === 'undefined') return; + + /* + * Remove possíveis barras antigas de produção. + * No jQuery antigo era removido apenas .barra-estado. + * Aqui removemos também wrappers comuns para evitar sobras. + */ + var oldBars = document.querySelectorAll( + '.barra-estado, .container-menu:not([' + HOST_ATTR + '])' + ); + + Array.prototype.forEach.call(oldBars, function (element) { + if (element && element.parentNode) { + element.parentNode.removeChild(element); + } + }); + } + + function createMountHost() { + if (typeof document === 'undefined' || !document.body) return null; + + var existingHost = getExistingHost(); + + if (existingHost) { + return existingHost; + } + + var host = document.createElement('div'); + + host.setAttribute(HOST_ATTR, 'true'); + host.setAttribute(MOUNT_ATTR, 'false'); + + if (document.body.firstChild) { + document.body.insertBefore(host, document.body.firstChild); } else { - render(); + document.body.appendChild(host); + } + + return host; + } + + function mountBarraEstado(hostElement) { + if (typeof document === 'undefined' || !hostElement) return null; + + ensureWindowOrigin(); + + var renderRoot = createRenderRoot(hostElement); + + if (!renderRoot) return null; + + var toggleId = createToggleId(); + + clearRenderRoot(renderRoot); + ensureStyles(renderRoot); + + var fragmentHost = document.createElement('div'); + fragmentHost.innerHTML = renderMarkup(toggleId); + + while (fragmentHost.firstChild) { + renderRoot.appendChild(fragmentHost.firstChild); } + + bindToggleBehavior(renderRoot, toggleId); + + hostElement.setAttribute(MOUNT_ATTR, 'true'); + + return hostElement; + } + + function bootstrapIntoBody() { + if (typeof document === 'undefined') return null; + + var run = function () { + removeLegacyBarraEstado(); + + var host = createMountHost(); + + if (!host) { + console.error('BarraEstado: não foi possível criar o host no .'); + return null; + } + + return mountBarraEstado(host); + }; + + if (document.body) { + return run(); + } + + if (document.readyState === 'loading') { + document.addEventListener('DOMContentLoaded', run, { once: true }); + return null; + } + + window.addEventListener('load', run, { once: true }); + return null; } - init(); + bootstrapIntoBody(); +})(); -})(); \ No newline at end of file + From e80a7e87600d8d92bf6a17a11dfba0ebb7efadf4 Mon Sep 17 00:00:00 2001 From: Gabriel-SAbreu Date: Tue, 23 Jun 2026 11:22:41 -0300 Subject: [PATCH 05/40] #1399172 - Ajuste nos dominios de intranet v3 --- src/components/BarraEstado/BarraEstadoStandalone.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/BarraEstado/BarraEstadoStandalone.js b/src/components/BarraEstado/BarraEstadoStandalone.js index 222b32f..49ad8f1 100644 --- a/src/components/BarraEstado/BarraEstadoStandalone.js +++ b/src/components/BarraEstado/BarraEstadoStandalone.js @@ -592,7 +592,7 @@ return true; } - if (dominioAtual.endsWith('.pro.intra.rs.gov.br')) { + if (dominioAtual.endsWith('.intra.rs.gov.br')) { return true; } From d8ece6d9449111971c1ae104596be58995d46aa8 Mon Sep 17 00:00:00 2001 From: Gabriel-SAbreu Date: Tue, 23 Jun 2026 11:46:09 -0300 Subject: [PATCH 06/40] #1399172 - Ajuste nos dominios de intranet v4 --- .../BarraEstado/BarraEstadoStandalone.js | 159 ++++++++---------- 1 file changed, 66 insertions(+), 93 deletions(-) diff --git a/src/components/BarraEstado/BarraEstadoStandalone.js b/src/components/BarraEstado/BarraEstadoStandalone.js index 49ad8f1..7717a6b 100644 --- a/src/components/BarraEstado/BarraEstadoStandalone.js +++ b/src/components/BarraEstado/BarraEstadoStandalone.js @@ -570,10 +570,10 @@ (function () { 'use strict'; - var STYLE_ID = 'barra-estado-standalone-style'; - var HOST_ATTR = 'data-barra-estado-host'; - var MOUNT_ATTR = 'data-barra-estado-mounted'; - var toggleSequence = 0; + const STYLE_ID = 'barra-estado-standalone-style'; + const HOST_ATTR = 'data-barra-estado-host'; + const MOUNT_ATTR = 'data-barra-estado-mounted'; + let toggleSequence = 0; /* ========================= * Controle de domínio @@ -581,14 +581,14 @@ function ignorarDominio() { if (typeof window === 'undefined' || !window.location) return false; - var dominioAtual = window.location.hostname.toLowerCase(); + const dominioAtual = window.location.hostname.toLowerCase(); - var dominiosIgnorados = [ + const dominiosIgnorados = [ 'exemplo.rs.gov.br' // adicionar outros domínios específicos aqui ]; - if (dominiosIgnorados.indexOf(dominioAtual) !== -1) { + if (dominiosIgnorados.includes(dominioAtual)) { return true; } @@ -620,7 +620,9 @@ /* ========================= * CSS baseado no código de produção * ========================= */ - var STYLE_TEXT = ` + const STYLE_TEXT = ` +@import url(//fonts.googleapis.com/css?family=Roboto); + :host { display: block; width: 100%; @@ -633,8 +635,6 @@ box-sizing: border-box; } -@import url(//fonts.googleapis.com/css?family=Roboto); - .barra-estado { height: 32px; min-height: 32px; @@ -915,12 +915,7 @@ } `; - /* ========================= - * SVGs inline - * Use aqui os SVGs completos já existentes - * ========================= */ - - var RS_GOV_SVG = ` + const RS_GOV_SVG = ` `; - var GURIA_SVG = ` + const GURIA_SVG = ` Estado ' + escapeHtml(item.label); - - return ( - '
  • ' + - '' + - content + - '' + - '
    • ' - ); + const className = item.className ? ` class="${item.className}"` : ''; + const content = item.html || `Estado ${escapeHtml(item.label)}`; + + return `
  • ${content}
    • `; } function createToggleId() { @@ -1039,46 +1022,38 @@ } function renderMarkup(toggleId) { - var menuItemsHtml = MENU_ITEMS.map(renderMenuItem).join(''); - - return [ - '
    ', - '
    ', - '
    ', - - '', - - '
    ', - '
    ', - - '', - - '
    ', - '
    ', - - '
    ', - '
    ', - '
    ' - ].join(''); + const menuItemsHtml = MENU_ITEMS.map(renderMenuItem).join(''); + + return ` +
    +
    +
    + +
    +
    + + +
      + ${menuItemsHtml} +
    +
    +
    +
    +
    +
    `; } /* ========================= @@ -1115,13 +1090,13 @@ function ensureStyles(renderRoot) { if (!renderRoot || typeof document === 'undefined') return null; - var existingStyle = renderRoot.querySelector('#' + STYLE_ID); + const existingStyle = renderRoot.querySelector(`#${STYLE_ID}`); if (existingStyle) { return existingStyle; } - var styleElement = document.createElement('style'); + const styleElement = document.createElement('style'); styleElement.id = STYLE_ID; styleElement.type = 'text/css'; styleElement.textContent = STYLE_TEXT; @@ -1134,18 +1109,18 @@ function bindToggleBehavior(renderRoot, toggleId) { if (!renderRoot || typeof renderRoot.querySelector !== 'function') return; - var checkbox = renderRoot.querySelector('#' + toggleId); - var toggle = renderRoot.querySelector('#' + toggleId + '-toggle'); + const checkbox = renderRoot.querySelector(`#${toggleId}`); + const toggle = renderRoot.querySelector(`#${toggleId}-toggle`); if (!checkbox || !toggle) return; function syncAriaState() { - var isOpen = Boolean(checkbox.checked); + const isOpen = Boolean(checkbox.checked); toggle.setAttribute('aria-expanded', isOpen ? 'true' : 'false'); } toggle.addEventListener('keydown', function (event) { - var key = event.key || event.code; + const key = event.key || event.code; if (key === 'Enter' || key === ' ') { event.preventDefault(); @@ -1181,27 +1156,25 @@ * No jQuery antigo era removido apenas .barra-estado. * Aqui removemos também wrappers comuns para evitar sobras. */ - var oldBars = document.querySelectorAll( - '.barra-estado, .container-menu:not([' + HOST_ATTR + '])' + const oldBars = document.querySelectorAll( + `.barra-estado, .container-menu:not([${HOST_ATTR}])` ); - Array.prototype.forEach.call(oldBars, function (element) { - if (element && element.parentNode) { - element.parentNode.removeChild(element); - } + Array.from(oldBars).forEach((element) => { + element?.parentNode?.removeChild(element); }); } function createMountHost() { if (typeof document === 'undefined' || !document.body) return null; - var existingHost = getExistingHost(); + const existingHost = getExistingHost(); if (existingHost) { return existingHost; } - var host = document.createElement('div'); + const host = document.createElement('div'); host.setAttribute(HOST_ATTR, 'true'); host.setAttribute(MOUNT_ATTR, 'false'); @@ -1220,16 +1193,16 @@ ensureWindowOrigin(); - var renderRoot = createRenderRoot(hostElement); + const renderRoot = createRenderRoot(hostElement); if (!renderRoot) return null; - var toggleId = createToggleId(); + const toggleId = createToggleId(); clearRenderRoot(renderRoot); ensureStyles(renderRoot); - var fragmentHost = document.createElement('div'); + const fragmentHost = document.createElement('div'); fragmentHost.innerHTML = renderMarkup(toggleId); while (fragmentHost.firstChild) { @@ -1246,10 +1219,10 @@ function bootstrapIntoBody() { if (typeof document === 'undefined') return null; - var run = function () { + const run = () => { removeLegacyBarraEstado(); - var host = createMountHost(); + const host = createMountHost(); if (!host) { console.error('BarraEstado: não foi possível criar o host no .'); From 5fb2d52dcd536c8f2d71a2bc2148a1086b2e3111 Mon Sep 17 00:00:00 2001 From: Gabriel-SAbreu Date: Tue, 23 Jun 2026 11:46:30 -0300 Subject: [PATCH 07/40] #1399172 - Ajuste nos dominios de intranet v4 --- .../BarraEstado/BarraEstadoStandalone.js | 589 +----------------- 1 file changed, 1 insertion(+), 588 deletions(-) diff --git a/src/components/BarraEstado/BarraEstadoStandalone.js b/src/components/BarraEstado/BarraEstadoStandalone.js index 7717a6b..4c9ec28 100644 --- a/src/components/BarraEstado/BarraEstadoStandalone.js +++ b/src/components/BarraEstado/BarraEstadoStandalone.js @@ -1,571 +1,3 @@ -// (function () { -// 'use strict' - -// var STYLE_ID = 'barra-estado-standalone-style' -// var MOUNT_ATTR = 'data-barra-estado-mounted' -// var HOST_ATTR = 'data-barra-estado-host' -// var toggleSequence = 0 - -// var STYLE_TEXT = ` -// :host { -// display: block; -// width: 100%; - -// --barra-estado-background: transparent; -// --barra-estado-menu-background: #f8f8f8; -// --barra-estado-hover-color: #000000; -// --barra-estado-active-color: #e4e4e4; -// --barra-estado-font-size: 12px; -// --barra-estado-font-size-desktop: var(--barra-estado-font-size, 12px); -// --barra-estado-height: 32px; -// --barra-estado-link-padding: 13px 40px; -// --barra-estado-link-padding-desktop: 9px 13px; -// --barra-estado-guria-link-padding: 7px 13px; -// --barra-estado-highlight-color: var(--green-matriz-link-activated, #135428); -// --barra-estado-toggle-color: #bcbcbb; -// --barra-estado-toggle-hover-color: #fff; -// } - -// #rs-gov { -// color: var(--green-matriz-link, #1a7235); -// vertical-align: initial; -// } - -// input.barra-estado__checkbox, -// .barra-estado__toggle { -// display: none; -// } - -// .barra-estado { -// background: var(--barra-estado-background); -// min-height: var(--barra-estado-height); -// } - -// .barra-estado__container { -// min-height: var(--barra-estado-height); -// } - -// .barra-estado__menu { -// background: var(--barra-estado-menu-background); -// } - -// .barra-estado__menu > li { -// float: left; -// list-style: none; -// } - -// .barra-estado__nav { -// display: block; -// float: right; -// } - -// .barra-estado__menu, -// .barra-estado__menu > li, -// .barra-estado__menu > li > a, -// .barra-estado__nav { -// height: 100%; -// } - -// .barra-estado__nav__form { -// display: inline-block; -// padding: 0; -// margin: 0; -// min-height: var(--barra-estado-height); -// } - -// .barra-estado__menu > li > a { -// display: block; -// box-sizing: border-box; -// padding: var(--barra-estado-link-padding); -// color: var(--green-matriz-link, #1a7235); -// font-size: var(--barra-estado-font-size); -// font-weight: 700; -// line-height: 1; -// transition: box-shadow 0.25s linear, color 0.25s linear; -// } - -// .barra-estado__menu > li > a:hover > svg > path, -// .barra-estado__menu > li > a:focus > svg > path { -// fill: var(--barra-estado-hover-color); -// } - -// .barra-estado__menu > li > a:focus, -// .barra-estado__menu > li > a:hover { -// box-shadow: inset 5px 0 var(--barra-estado-highlight-color); -// color: var(--barra-estado-hover-color); -// } - -// .barra-estado__menu > li > a:active { -// color: var(--barra-estado-active-color) !important; -// } - -// .barra-estado__menu, -// .barra-estado__menu > li, -// .barra-estado__menu > li > a { -// height: auto; -// } - -// .barra-estado__toggle { -// z-index: 2; -// } - -// .barra-estado__toggle:after { -// color: var(--barra-estado-toggle-color); -// content: attr(data-open); -// transition: all 0.5s linear; -// } - -// .barra-estado__toggle:hover:after { -// color: var(--barra-estado-toggle-hover-color); -// } - -// .barra-estado__toggle:focus-visible { -// outline: 2px solid var(--govrs-color-focus, #ffcd07); -// outline-offset: 2px; -// } - -// input.barra-estado__checkbox:checked + label.barra-estado__toggle:after { -// content: attr(data-close); -// } - -// @media only screen and (min-width: 992px) { -// .barra-estado__menu { -// padding: 0; -// border-top: none; -// margin-top: 0; -// background: var(--barra-estado-menu-background); -// } - -// .barra-estado__menu > li > a { -// padding: var(--barra-estado-link-padding-desktop); -// font-size: var(--barra-estado-font-size-desktop); -// } - -// .barra-estado__menu > li > a:focus, -// .barra-estado__menu > li > a:hover { -// box-shadow: inset 0 2px var(--barra-estado-highlight-color); -// color: var(--barra-estado-hover-color); -// } -// } - -// .barra-estado__menu > li > a.barra-estado__guria-link { -// padding: var(--barra-estado-guria-link-padding); -// } - -// .visually-hidden { -// position: absolute !important; -// overflow: hidden !important; -// width: 1px !important; -// height: 1px !important; -// padding: 0 !important; -// border: 0 !important; -// margin: -1px !important; -// clip: rect(0, 0, 0, 0) !important; -// white-space: nowrap !important; -// } - -// :host-context(.high-contrast) .barra-estado { -// border-bottom: 1px solid var(--govrs-color-contrast-foreground, #ffffff) !important; -// background-color: var(--govrs-color-contrast-background, #000000) !important; -// } - -// :host-context(.high-contrast) .barra-estado__menu { -// background-color: var(--govrs-color-contrast-background, #000000) !important; -// } - -// :host-context(.high-contrast) .barra-estado__menu > li > a > #GurIA path { -// fill: var(--govrs-color-contrast-foreground, #ffffff) !important; -// } - -// :host-context(.high-contrast) .barra-estado__menu > li > a:focus { -// box-shadow: inset 0 5px var(--govrs-color-contrast-foreground, #ffffff) !important; -// color: var(--govrs-color-contrast-foreground, #ffffff) !important; -// } - -// :host-context(.high-contrast) .barra-estado__menu > li > a:hover { -// box-shadow: inset 0 5px var(--govrs-color-contrast-foreground, #ffffff) !important; -// color: var(--govrs-color-contrast-foreground, #ffffff) !important; -// } - -// :host-context(.high-contrast) #rs-gov > path { -// fill: var(--govrs-color-contrast-foreground, #ffffff) !important; -// } -// ` - -// var RS_GOV_SVG = ` -// -// RS.GOV -// Governo do Estado do Rio Grande do Sul -// -// -// -// -// -// -// -// -// -// -// ` - -// var GURIA_SVG = ` -// -// GurIA -// A tua nova assistente digital -// -// -// -// -// -// -// -// ` - -// function renderMenuItem(item) { -// var className = item.className ? ' class="' + item.className + '"' : '' -// var content = item.html || '' + item.label - -// return '
  • ' + content + '
    • ' -// } - -// var MENU_ITEMS = [ -// { href: 'https://estado.rs.gov.br/agencia-de-noticias', label: 'Notícias' }, -// { href: 'https://www.rs.gov.br/', label: 'Serviços' }, -// { href: 'https://www.centraldocidadao.rs.gov.br/', label: 'Central do Cidadão' }, -// { href: 'http://www.transparencia.rs.gov.br/', label: 'Transparência' }, -// { href: 'https://estado.rs.gov.br/institucional', label: 'Locais e Órgãos', className: 'barra-letters' }, -// { href: 'https://www.diariooficial.rs.gov.br/', label: 'Diário Oficial' }, -// { -// href: 'https://www.rs.gov.br/guria', -// className: 'barra-estado__guria-link', -// html: '' + GURIA_SVG, -// }, -// ] - -// var MENU_ITEMS_HTML = MENU_ITEMS.map(renderMenuItem).join('') - -// function ensureWindowOrigin() { -// if (typeof window === 'undefined') return - -// if (!('origin' in window.location)) { -// try { -// var locationObject = window.location -// locationObject.origin = locationObject.protocol + '//' + locationObject.host -// } catch (error) { -// } -// } -// } - -// function ensureStyles(styleHost) { -// if (typeof document === 'undefined' || !styleHost) return null - -// if (typeof styleHost.querySelector === 'function') { -// var existingStyle = styleHost.querySelector('#' + STYLE_ID) -// if (existingStyle) return existingStyle -// } - -// var styleElement = document.createElement('style') -// styleElement.id = STYLE_ID -// styleElement.type = 'text/css' -// styleElement.textContent = STYLE_TEXT - -// if (typeof styleHost.appendChild === 'function') { -// styleHost.appendChild(styleElement) -// return styleElement -// } - -// return null -// } - -// function createToggleId() { -// toggleSequence += 1 -// return 'barra-estado__toggle-' + toggleSequence -// } - -// function renderMarkup(toggleId) { -// return [ -// '
    ', -// '
    ', -// '
    ', -// '', -// '
    ', -// '
    ', -// '', -// '', -// '
      ', -// MENU_ITEMS_HTML, -// '
    ', -// '
    ', -// '
    ', -// '
    ', -// '
    ', -// '
    ', -// ].join('') -// } - -// function createRenderRoot(hostElement) { -// if (!hostElement) return null - -// if (hostElement.shadowRoot) return hostElement.shadowRoot - -// if (typeof hostElement.attachShadow !== 'function') { -// console.error('BarraEstadoStandalone: Shadow DOM não é suportado neste ambiente.') -// return null -// } - -// try { -// return hostElement.attachShadow({ mode: 'open' }) -// } catch (error) { -// console.error('BarraEstadoStandalone: falha ao criar Shadow DOM.', error) -// return null -// } -// } - -// function clearRenderRoot(renderRoot) { -// if (!renderRoot) return - -// while (renderRoot.firstChild) { -// renderRoot.removeChild(renderRoot.firstChild) -// } -// } - -// function bindToggleBehavior(renderRoot, toggleId) { -// if (!renderRoot || typeof renderRoot.querySelector !== 'function') return - -// var checkbox = renderRoot.querySelector('#' + toggleId) -// var toggle = renderRoot.querySelector('#' + toggleId + '-toggle') - -// if (!checkbox || !toggle) return - -// var syncAriaState = function () { -// var isOpen = Boolean(checkbox.checked) -// toggle.setAttribute('aria-expanded', isOpen ? 'true' : 'false') -// } - -// toggle.addEventListener('keydown', function (event) { -// if (event.key === 'Enter' || event.key === ' ') { -// event.preventDefault() -// checkbox.click() -// } - -// if (event.key === 'Escape' && checkbox.checked) { -// event.preventDefault() -// checkbox.checked = false -// checkbox.dispatchEvent(new Event('change', { bubbles: true })) -// } -// }) - -// checkbox.addEventListener('change', syncAriaState) -// syncAriaState() -// } - -// function mountBarraEstado(hostElement) { -// if (typeof document === 'undefined' || !hostElement) return null - -// ensureWindowOrigin() - -// var renderRoot = createRenderRoot(hostElement) -// if (!renderRoot) return null - -// var toggleId = createToggleId() - -// clearRenderRoot(renderRoot) -// ensureStyles(renderRoot) - -// var fragmentHost = document.createElement('div') -// fragmentHost.innerHTML = renderMarkup(toggleId) - -// while (fragmentHost.firstChild) { -// renderRoot.appendChild(fragmentHost.firstChild) -// } - -// bindToggleBehavior(renderRoot, toggleId) -// hostElement.setAttribute(MOUNT_ATTR, 'true') - -// return hostElement -// } - -// function getExistingHost() { -// if (typeof document === 'undefined') return null -// return document.querySelector('[' + HOST_ATTR + '="true"]') -// } - -// function createMountHost() { -// if (typeof document === 'undefined' || !document.body) return null - -// var existingHost = getExistingHost() -// if (existingHost) return existingHost - -// var host = document.createElement('div') -// host.setAttribute(HOST_ATTR, 'true') -// host.setAttribute(MOUNT_ATTR, 'false') - -// if (document.body.firstChild) { -// document.body.insertBefore(host, document.body.firstChild) -// } else { -// document.body.appendChild(host) -// } - -// return host -// } - -// function bootstrapIntoBody() { -// if (typeof document === 'undefined') return null - -// var run = function () { -// var host = createMountHost() - -// if (!host) { -// console.error('BarraEstadoStandalone: não foi possível criar o host no .') -// return null -// } - -// return mountBarraEstado(host) -// } - -// if (document.body) { -// return run() -// } - -// if (document.readyState === 'loading') { -// document.addEventListener('DOMContentLoaded', run, { once: true }) -// return null -// } - -// window.addEventListener('load', run, { once: true }) -// return null -// } - -// bootstrapIntoBody() -// })() -// =======Versão de teste Web Component======== -// (function () { -// 'use strict'; - -// /* =========================CONTROLE DE DOMÍNIO========================== */ -// function ignorarDominio() { -// var dominioAtual = window.location.hostname.toLowerCase(); - -// var dominiosIgnorados = [ -// // adicionar outros se necessário -// "exemplo.rs.gov.br" -// ]; - -// if (dominiosIgnorados.includes(dominioAtual)) { -// return true; -// } - -// if (dominioAtual.endsWith(".intra.rs.gov.br")) { -// return true; -// } - -// return false; -// } - -// if (ignorarDominio()) return; - - -// /* ========================= CONFIG ========================== */ -// var STYLE_ID = "barra-estado-style"; -// var toggleId = "barra-toggle-" + Date.now(); - - -// /* ========================= CSS ========================== */ -// var STYLE = ` -// :host { display:block;width:100%; } -// .barra-estado { min-height:32px; background:#fff; } -// .barra-estado__container { display:flex; justify-content:space-between; align-items:center; padding:0 15px; } -// .barra-estado__menu { list-style:none; display:flex; margin:0; padding:0; gap:10px; } -// .barra-estado__menu a { text-decoration:none; font-size:12px; font-weight:bold; color:#1a7235; } -// `; - - -// /* ========================= HTML ========================== */ -// function getHTML(id) { -// return ` -//
    -//
    - -// -// RS.GOV -// - -//
    -// -// - -//
      -//
    • Notícias
      • -//
    • Serviços
      • -//
    • .rs.gov.br/">Central
      • -//
    • parencia.rs.gov.br/">Transparência
      • -//
    -//
    - -//
    -//
    -// `; -// } - - -// /* ========================= RENDER (Shadow DOM) ========================== */ -// function render() { -// var host = document.createElement("div"); - -// // cria shadow DOM -// var shadow = host.attachShadow({ mode: "open" }); - -// // adiciona estilo -// var style = document.createElement("style"); -// style.id = STYLE_ID; -// style.textContent = STYLE; -// shadow.appendChild(style); - -// // adiciona HTML -// var wrapper = document.createElement("div"); -// wrapper.innerHTML = getHTML(toggleId); -// shadow.appendChild(wrapper); - -// // insere no topo da página -// document.body.prepend(host); -// } - - -// /* ========================= INIT ========================== */ -// function init() { -// if (document.readyState === "loading") { -// document.addEventListener("DOMContentLoaded", render); -// } else { -// render(); -// } -// } - -// init(); - -// })(); - /* ========================= Código teste 23/06 web component ========================== */ (function () { 'use strict'; @@ -575,9 +7,7 @@ const MOUNT_ATTR = 'data-barra-estado-mounted'; let toggleSequence = 0; - /* ========================= - * Controle de domínio - * ========================= */ + function ignorarDominio() { if (typeof window === 'undefined' || !window.location) return false; @@ -617,9 +47,6 @@ } } - /* ========================= - * CSS baseado no código de produção - * ========================= */ const STYLE_TEXT = ` @import url(//fonts.googleapis.com/css?family=Roboto); @@ -965,9 +392,6 @@ `; - /* ========================= - * Itens do menu - * ========================= */ const MENU_ITEMS = [ { href: 'https://estado.rs.gov.br/agencia-de-noticias', @@ -1056,9 +480,6 @@ `; } - /* ========================= - * Shadow DOM - * ========================= */ function createRenderRoot(hostElement) { if (!hostElement) return null; @@ -1139,9 +560,6 @@ syncAriaState(); } - /* ========================= - * Host / montagem - * ========================= */ function getExistingHost() { if (typeof document === 'undefined') return null; @@ -1151,11 +569,6 @@ function removeLegacyBarraEstado() { if (typeof document === 'undefined') return; - /* - * Remove possíveis barras antigas de produção. - * No jQuery antigo era removido apenas .barra-estado. - * Aqui removemos também wrappers comuns para evitar sobras. - */ const oldBars = document.querySelectorAll( `.barra-estado, .container-menu:not([${HOST_ATTR}])` ); From 074468d0a7f8f5a37614f2d3792025912367f825 Mon Sep 17 00:00:00 2001 From: Gabriel-SAbreu Date: Tue, 23 Jun 2026 16:11:51 -0300 Subject: [PATCH 08/40] #1399172 - Ajuste nos dominios de intranet v5 --- .../BarraEstado/BarraEstadoStandalone.js | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/src/components/BarraEstado/BarraEstadoStandalone.js b/src/components/BarraEstado/BarraEstadoStandalone.js index 4c9ec28..fc026cc 100644 --- a/src/components/BarraEstado/BarraEstadoStandalone.js +++ b/src/components/BarraEstado/BarraEstadoStandalone.js @@ -37,7 +37,7 @@ function ensureWindowOrigin() { if (typeof window === 'undefined') return; - if (!window.location.origin) { + if (!('origin' in window.location)) { try { window.location.origin = window.location.protocol + '//' + window.location.host; @@ -379,7 +379,6 @@ height="13.21px" viewBox="0 0 49.94 13.21" enable-background="new 0 0 49.94 13.21" - xml:space="preserve" > GurIA A tua nova assistente digital @@ -411,7 +410,8 @@ }, { href: 'https://estado.rs.gov.br/institucional', - label: 'Secretarias e Órgãos' + label: 'Secretarias e Órgãos', + className: 'barra-letters' }, { href: 'https://www.diariooficial.rs.gov.br/', @@ -420,7 +420,7 @@ { href: 'https://www.rs.gov.br/guria', className: 'barra-estado__guria-link', - html: 'Estado ' + GURIA_SVG + html: '' + GURIA_SVG } ]; @@ -435,7 +435,7 @@ function renderMenuItem(item) { const className = item.className ? ` class="${item.className}"` : ''; - const content = item.html || `Estado ${escapeHtml(item.label)}`; + const content = item.html || `${escapeHtml(item.label)}`; return `
  • ${content}
    • `; } @@ -488,14 +488,14 @@ } if (typeof hostElement.attachShadow !== 'function') { - console.error('BarraEstado: Shadow DOM não é suportado neste ambiente.'); + console.error('BarraEstadoStandalone: Shadow DOM não é suportado neste ambiente.'); return null; } try { return hostElement.attachShadow({ mode: 'open' }); } catch (error) { - console.error('BarraEstado: falha ao criar Shadow DOM.', error); + console.error('BarraEstadoStandalone: falha ao criar Shadow DOM.', error); return null; } } @@ -638,7 +638,7 @@ const host = createMountHost(); if (!host) { - console.error('BarraEstado: não foi possível criar o host no .'); + console.error('BarraEstadoStandalone: não foi possível criar o host no .'); return null; } From 1906e4be281691f01edca95982967b87d10fb8a8 Mon Sep 17 00:00:00 2001 From: Gabriel-SAbreu Date: Wed, 24 Jun 2026 09:46:21 -0300 Subject: [PATCH 09/40] #1399172 - Ajuste nos dominios de intranet v6 --- .../BarraEstado/BarraEstadoStandalone.js | 1303 +++++++++-------- 1 file changed, 696 insertions(+), 607 deletions(-) diff --git a/src/components/BarraEstado/BarraEstadoStandalone.js b/src/components/BarraEstado/BarraEstadoStandalone.js index fc026cc..ae3dd89 100644 --- a/src/components/BarraEstado/BarraEstadoStandalone.js +++ b/src/components/BarraEstado/BarraEstadoStandalone.js @@ -1,664 +1,753 @@ -/* ========================= Código teste 23/06 web component ========================== */ -(function () { - 'use strict'; +// /* ========================= Código teste 23/06 web component ========================== */ +// (function () { +// 'use strict'; - const STYLE_ID = 'barra-estado-standalone-style'; - const HOST_ATTR = 'data-barra-estado-host'; - const MOUNT_ATTR = 'data-barra-estado-mounted'; - let toggleSequence = 0; +// const STYLE_ID = 'barra-estado-standalone-style'; +// const HOST_ATTR = 'data-barra-estado-host'; +// const MOUNT_ATTR = 'data-barra-estado-mounted'; +// let toggleSequence = 0; - function ignorarDominio() { - if (typeof window === 'undefined' || !window.location) return false; +// function ignorarDominio() { +// if (typeof window === 'undefined' || !window.location) return false; + +// const dominioAtual = window.location.hostname.toLowerCase(); + +// const dominiosIgnorados = [ +// 'exemplo.rs.gov.br' +// // adicionar outros domínios específicos aqui +// ]; + +// if (dominiosIgnorados.includes(dominioAtual)) { +// return true; +// } + +// if (dominioAtual.endsWith('.intra.rs.gov.br')) { +// return true; +// } + +// return false; +// } + +// if (ignorarDominio()) return; + +// /* ========================= +// * Polyfill location.origin +// * ========================= */ +// function ensureWindowOrigin() { +// if (typeof window === 'undefined') return; + +// if (!('origin' in window.location)) { +// try { +// window.location.origin = +// window.location.protocol + '//' + window.location.host; +// } catch (error) { +// // silencioso por compatibilidade com browsers legados +// } +// } +// } + +// const STYLE_TEXT = ` +// @import url(//fonts.googleapis.com/css?family=Roboto); + +// :host { +// display: block; +// width: 100%; +// font-family: Roboto, Arial, sans-serif; +// } + +// :host *, +// :host *::before, +// :host *::after { +// box-sizing: border-box; +// } + +// .barra-estado { +// height: 32px; +// min-height: 32px; +// background-color: #4f4f4f; +// position: relative; +// z-index: 999; +// } + +// .barra-estado__container { +// position: relative; +// padding-right: 15px; +// padding-left: 15px; +// margin-right: auto; +// margin-left: auto; +// height: 100%; +// } + +// .barra-estado__container a { +// text-decoration: none; +// } + +// @media (min-width: 768px) { +// .barra-estado__container { +// width: 750px; +// } +// } + +// @media (min-width: 992px) { +// .barra-estado__container { +// width: 970px; +// } +// } + +// @media (min-width: 1200px) { +// .barra-estado__container { +// width: 1170px; +// } +// } + +// .barra-estado__logo { +// position: absolute; +// width: 77px; +// height: 16px; +// margin-top: 6px; +// left: 15px; +// } + +// .barra-estado__logo svg { +// display: block; +// } + +// .barra-estado__logo svg path { +// fill: #f4f4f1; +// } + +// .barra-estado__nav { +// display: block; +// float: right; +// height: 100%; +// } + +// .barra-estado__nav__form { +// margin: 0; +// padding: 0; +// display: inline-block; +// height: 100%; +// } + +// .barra-estado__checkbox, +// .barra-estado__toggle { +// display: none; +// } + +// .barra-estado__menu { +// font-family: Roboto, Arial, sans-serif; +// text-transform: uppercase; +// background: #737474; +// border-top: 1px solid #fff; +// margin-top: 0; +// padding: 14px 0 20px; +// list-style: none; +// } + +// .barra-estado__menu, +// .barra-estado__menu > li, +// .barra-estado__menu > li > a, +// .barra-estado__nav { +// height: 100%; +// } + +// .barra-estado__menu > li { +// list-style: none; +// float: left; +// } + +// .barra-estado__menu > li > a { +// display: block; +// font-weight: 400; +// padding: 13px 40px; +// font-size: 14px; +// line-height: 1; +// color: #e4e4e4; +// text-decoration: none; +// transition: box-shadow 0.25s linear, color 0.25s linear; +// } + +// .barra-estado__menu > li > a:visited { +// color: #e4e4e4 !important; +// } + +// .barra-estado__menu > li > a:focus, +// .barra-estado__menu > li > a:hover { +// box-shadow: inset 5px 0 #fff; +// color: #fff; +// } + +// .barra-estado__menu > li > a:focus svg path, +// .barra-estado__menu > li > a:hover svg path { +// fill: #fff; +// } + +// .barra-estado__menu > li > a:active { +// color: #e4e4e4 !important; +// } + +// .barra-estado__menu, +// .barra-estado__menu > li, +// .barra-estado__menu > li > a { +// height: auto; +// } + +// .barra-estado__guria-link svg { +// display: block; +// } + +// .barra-estado__guria-link svg path { +// fill: #fff; +// } + +// .barra-estado__toggle { +// z-index: 2; +// } + +// .barra-estado__toggle:after { +// content: attr(data-open); +// display: block; +// position: absolute; +// right: 0; +// width: 45px; +// height: 32px; +// text-align: right; +// font-size: 18px; +// line-height: 13px; +// color: #bcbcbb; +// transition: all 0.5s linear; +// } + +// .barra-estado__toggle:hover:after { +// color: #fff; +// } + +// .barra-estado__toggle:focus-visible { +// outline: 2px solid #ffcd07; +// outline-offset: 2px; +// } + +// .barra-estado__checkbox:checked + .barra-estado__toggle:after { +// content: attr(data-close); +// } + +// .sr-only, +// .visually-hidden { +// position: absolute !important; +// width: 1px !important; +// height: 1px !important; +// padding: 0 !important; +// margin: -1px !important; +// overflow: hidden !important; +// clip: rect(0, 0, 0, 0) !important; +// border: 0 !important; +// white-space: nowrap !important; +// } + +// /* ========================= +// * Mobile +// * ========================= */ +// @media only screen and (max-width: 991px) { +// .barra-estado__menu { +// display: none; +// opacity: 0; +// width: 280px; +// position: absolute; +// right: 0; +// top: 32px; +// z-index: 999; +// } + +// .barra-estado__menu > li { +// display: block; +// width: 100%; +// margin: 0; +// float: none; +// } + +// .barra-estado__menu > li > a { +// display: block; +// width: 100%; +// padding: 13px 40px; +// } + +// .barra-estado__toggle { +// display: block; +// position: relative; +// cursor: pointer; +// touch-action: manipulation; +// user-select: none; +// width: 45px; +// height: 32px; +// } + +// .barra-estado__checkbox:checked ~ .barra-estado__menu { +// display: block; +// opacity: 1; +// } +// } + +// /* ========================= +// * Desktop +// * ========================= */ +// @media only screen and (min-width: 992px) { +// .barra-estado__menu { +// background: transparent; +// border-top: none; +// padding: 0; +// margin-top: 0; +// } + +// .barra-estado__menu > li > a { +// padding: 9px 13px; +// font-size: 11px; +// } + +// .barra-estado__menu > li > a.barra-estado__guria-link { +// padding: 7px 13px; +// } + +// .barra-estado__menu > li > a:focus, +// .barra-estado__menu > li > a:hover { +// box-shadow: inset 0 2px #fff; +// color: #fff; +// } +// } + +// /* ========================= +// * Alto contraste +// * ========================= */ +// :host-context(.high-contrast) .barra-estado { +// border-bottom: 1px solid #ffffff !important; +// background-color: #000000 !important; +// } + +// :host-context(.high-contrast) .barra-estado__menu { +// background-color: #000000 !important; +// } + +// :host-context(.high-contrast) .barra-estado__menu > li > a { +// color: #ffffff !important; +// } + +// :host-context(.high-contrast) .barra-estado__menu > li > a:focus, +// :host-context(.high-contrast) .barra-estado__menu > li > a:hover { +// box-shadow: inset 0 5px #ffffff !important; +// color: #ffffff !important; +// } + +// :host-context(.high-contrast) svg path { +// fill: #ffffff !important; +// } +// `; + +// const RS_GOV_SVG = ` +// +// RS.GOV.BR +// Governo do Estado do Rio Grande do Sul +// +// +// +// +// +// +// +// +// +// +// `; + +// const GURIA_SVG = ` +// +// GurIA +// A tua nova assistente digital +// +// +// +// +// +// +// +// `; + +// const MENU_ITEMS = [ +// { +// href: 'https://estado.rs.gov.br/agencia-de-noticias', +// label: 'Notícias' +// }, +// { +// href: 'https://www.rs.gov.br/', +// label: 'Serviços' +// }, +// { +// href: 'https://www.centraldocidadao.rs.gov.br/', +// label: 'Central do Cidadão' +// }, +// { +// href: 'http://www.transparencia.rs.gov.br/', +// label: 'Transparência' +// }, +// { +// href: 'https://estado.rs.gov.br/institucional', +// label: 'Secretarias e Órgãos', +// className: 'barra-letters' +// }, +// { +// href: 'https://www.diariooficial.rs.gov.br/', +// label: 'Diário Oficial' +// }, +// { +// href: 'https://www.rs.gov.br/guria', +// className: 'barra-estado__guria-link', +// html: '' + GURIA_SVG +// } +// ]; + +// function escapeHtml(value) { +// return String(value) +// .replace(/&/g, '&') +// .replace(//g, '>') +// .replace(/"/g, '"') +// .replace(/'/g, '''); +// } + +// function renderMenuItem(item) { +// const className = item.className ? ` class="${item.className}"` : ''; +// const content = item.html || `${escapeHtml(item.label)}`; + +// return `
  • ${content}
    • `; +// } + +// function createToggleId() { +// toggleSequence += 1; +// return 'barra-estado__toggle-' + Date.now() + '-' + toggleSequence; +// } + +// function renderMarkup(toggleId) { +// const menuItemsHtml = MENU_ITEMS.map(renderMenuItem).join(''); + +// return ` +//
    +//
    +//
    +// +//
    +//
    +// +// +//
      +// ${menuItemsHtml} +//
    +//
    +//
    +//
    +//
    +//
    `; +// } + +// function createRenderRoot(hostElement) { +// if (!hostElement) return null; + +// if (hostElement.shadowRoot) { +// return hostElement.shadowRoot; +// } + +// if (typeof hostElement.attachShadow !== 'function') { +// console.error('BarraEstadoStandalone: Shadow DOM não é suportado neste ambiente.'); +// return null; +// } + +// try { +// return hostElement.attachShadow({ mode: 'open' }); +// } catch (error) { +// console.error('BarraEstadoStandalone: falha ao criar Shadow DOM.', error); +// return null; +// } +// } + +// function clearRenderRoot(renderRoot) { +// if (!renderRoot) return; + +// while (renderRoot.firstChild) { +// renderRoot.removeChild(renderRoot.firstChild); +// } +// } + +// function ensureStyles(renderRoot) { +// if (!renderRoot || typeof document === 'undefined') return null; + +// const existingStyle = renderRoot.querySelector(`#${STYLE_ID}`); + +// if (existingStyle) { +// return existingStyle; +// } + +// const styleElement = document.createElement('style'); +// styleElement.id = STYLE_ID; +// styleElement.type = 'text/css'; +// styleElement.textContent = STYLE_TEXT; + +// renderRoot.appendChild(styleElement); + +// return styleElement; +// } + +// function bindToggleBehavior(renderRoot, toggleId) { +// if (!renderRoot || typeof renderRoot.querySelector !== 'function') return; - const dominioAtual = window.location.hostname.toLowerCase(); +// const checkbox = renderRoot.querySelector(`#${toggleId}`); +// const toggle = renderRoot.querySelector(`#${toggleId}-toggle`); - const dominiosIgnorados = [ - 'exemplo.rs.gov.br' - // adicionar outros domínios específicos aqui - ]; +// if (!checkbox || !toggle) return; - if (dominiosIgnorados.includes(dominioAtual)) { - return true; - } +// function syncAriaState() { +// const isOpen = Boolean(checkbox.checked); +// toggle.setAttribute('aria-expanded', isOpen ? 'true' : 'false'); +// } - if (dominioAtual.endsWith('.intra.rs.gov.br')) { - return true; - } +// toggle.addEventListener('keydown', function (event) { +// const key = event.key || event.code; - return false; - } +// if (key === 'Enter' || key === ' ') { +// event.preventDefault(); +// checkbox.click(); +// } - if (ignorarDominio()) return; - - /* ========================= - * Polyfill location.origin - * ========================= */ - function ensureWindowOrigin() { - if (typeof window === 'undefined') return; - - if (!('origin' in window.location)) { - try { - window.location.origin = - window.location.protocol + '//' + window.location.host; - } catch (error) { - // silencioso por compatibilidade com browsers legados - } - } - } +// if (key === 'Escape' && checkbox.checked) { +// event.preventDefault(); +// checkbox.checked = false; +// checkbox.dispatchEvent(new Event('change', { bubbles: true })); +// } +// }); - const STYLE_TEXT = ` -@import url(//fonts.googleapis.com/css?family=Roboto); - -:host { - display: block; - width: 100%; - font-family: Roboto, Arial, sans-serif; -} - -:host *, -:host *::before, -:host *::after { - box-sizing: border-box; -} - -.barra-estado { - height: 32px; - min-height: 32px; - background-color: #4f4f4f; - position: relative; - z-index: 999; -} - -.barra-estado__container { - position: relative; - padding-right: 15px; - padding-left: 15px; - margin-right: auto; - margin-left: auto; - height: 100%; -} - -.barra-estado__container a { - text-decoration: none; -} - -@media (min-width: 768px) { - .barra-estado__container { - width: 750px; - } -} +// checkbox.addEventListener('change', syncAriaState); -@media (min-width: 992px) { - .barra-estado__container { - width: 970px; - } -} +// syncAriaState(); +// } -@media (min-width: 1200px) { - .barra-estado__container { - width: 1170px; - } -} - -.barra-estado__logo { - position: absolute; - width: 77px; - height: 16px; - margin-top: 6px; - left: 15px; -} - -.barra-estado__logo svg { - display: block; -} - -.barra-estado__logo svg path { - fill: #f4f4f1; -} - -.barra-estado__nav { - display: block; - float: right; - height: 100%; -} - -.barra-estado__nav__form { - margin: 0; - padding: 0; - display: inline-block; - height: 100%; -} - -.barra-estado__checkbox, -.barra-estado__toggle { - display: none; -} - -.barra-estado__menu { - font-family: Roboto, Arial, sans-serif; - text-transform: uppercase; - background: #737474; - border-top: 1px solid #fff; - margin-top: 0; - padding: 14px 0 20px; - list-style: none; -} - -.barra-estado__menu, -.barra-estado__menu > li, -.barra-estado__menu > li > a, -.barra-estado__nav { - height: 100%; -} - -.barra-estado__menu > li { - list-style: none; - float: left; -} - -.barra-estado__menu > li > a { - display: block; - font-weight: 400; - padding: 13px 40px; - font-size: 14px; - line-height: 1; - color: #e4e4e4; - text-decoration: none; - transition: box-shadow 0.25s linear, color 0.25s linear; -} - -.barra-estado__menu > li > a:visited { - color: #e4e4e4 !important; -} - -.barra-estado__menu > li > a:focus, -.barra-estado__menu > li > a:hover { - box-shadow: inset 5px 0 #fff; - color: #fff; -} - -.barra-estado__menu > li > a:focus svg path, -.barra-estado__menu > li > a:hover svg path { - fill: #fff; -} - -.barra-estado__menu > li > a:active { - color: #e4e4e4 !important; -} - -.barra-estado__menu, -.barra-estado__menu > li, -.barra-estado__menu > li > a { - height: auto; -} - -.barra-estado__guria-link svg { - display: block; -} - -.barra-estado__guria-link svg path { - fill: #fff; -} - -.barra-estado__toggle { - z-index: 2; -} - -.barra-estado__toggle:after { - content: attr(data-open); - display: block; - position: absolute; - right: 0; - width: 45px; - height: 32px; - text-align: right; - font-size: 18px; - line-height: 13px; - color: #bcbcbb; - transition: all 0.5s linear; -} - -.barra-estado__toggle:hover:after { - color: #fff; -} - -.barra-estado__toggle:focus-visible { - outline: 2px solid #ffcd07; - outline-offset: 2px; -} - -.barra-estado__checkbox:checked + .barra-estado__toggle:after { - content: attr(data-close); -} - -.sr-only, -.visually-hidden { - position: absolute !important; - width: 1px !important; - height: 1px !important; - padding: 0 !important; - margin: -1px !important; - overflow: hidden !important; - clip: rect(0, 0, 0, 0) !important; - border: 0 !important; - white-space: nowrap !important; -} - -/* ========================= - * Mobile - * ========================= */ -@media only screen and (max-width: 991px) { - .barra-estado__menu { - display: none; - opacity: 0; - width: 280px; - position: absolute; - right: 0; - top: 32px; - z-index: 999; - } +// function getExistingHost() { +// if (typeof document === 'undefined') return null; - .barra-estado__menu > li { - display: block; - width: 100%; - margin: 0; - float: none; - } +// return document.querySelector('[' + HOST_ATTR + '="true"]'); +// } - .barra-estado__menu > li > a { - display: block; - width: 100%; - padding: 13px 40px; - } +// function removeLegacyBarraEstado() { +// if (typeof document === 'undefined') return; - .barra-estado__toggle { - display: block; - position: relative; - cursor: pointer; - touch-action: manipulation; - user-select: none; - width: 45px; - height: 32px; - } +// const oldBars = document.querySelectorAll( +// `.barra-estado, .container-menu:not([${HOST_ATTR}])` +// ); - .barra-estado__checkbox:checked ~ .barra-estado__menu { - display: block; - opacity: 1; - } -} - -/* ========================= - * Desktop - * ========================= */ -@media only screen and (min-width: 992px) { - .barra-estado__menu { - background: transparent; - border-top: none; - padding: 0; - margin-top: 0; - } +// Array.from(oldBars).forEach((element) => { +// element?.parentNode?.removeChild(element); +// }); +// } - .barra-estado__menu > li > a { - padding: 9px 13px; - font-size: 11px; - } +// function createMountHost() { +// if (typeof document === 'undefined' || !document.body) return null; - .barra-estado__menu > li > a.barra-estado__guria-link { - padding: 7px 13px; - } +// const existingHost = getExistingHost(); - .barra-estado__menu > li > a:focus, - .barra-estado__menu > li > a:hover { - box-shadow: inset 0 2px #fff; - color: #fff; - } -} - -/* ========================= - * Alto contraste - * ========================= */ -:host-context(.high-contrast) .barra-estado { - border-bottom: 1px solid #ffffff !important; - background-color: #000000 !important; -} - -:host-context(.high-contrast) .barra-estado__menu { - background-color: #000000 !important; -} - -:host-context(.high-contrast) .barra-estado__menu > li > a { - color: #ffffff !important; -} - -:host-context(.high-contrast) .barra-estado__menu > li > a:focus, -:host-context(.high-contrast) .barra-estado__menu > li > a:hover { - box-shadow: inset 0 5px #ffffff !important; - color: #ffffff !important; -} - -:host-context(.high-contrast) svg path { - fill: #ffffff !important; -} -`; +// if (existingHost) { +// return existingHost; +// } - const RS_GOV_SVG = ` - - RS.GOV.BR - Governo do Estado do Rio Grande do Sul - - - - - - - - - - -`; +// const host = document.createElement('div'); - const GURIA_SVG = ` - - GurIA - A tua nova assistente digital - - - - - - - -`; +// host.setAttribute(HOST_ATTR, 'true'); +// host.setAttribute(MOUNT_ATTR, 'false'); - const MENU_ITEMS = [ - { - href: 'https://estado.rs.gov.br/agencia-de-noticias', - label: 'Notícias' - }, - { - href: 'https://www.rs.gov.br/', - label: 'Serviços' - }, - { - href: 'https://www.centraldocidadao.rs.gov.br/', - label: 'Central do Cidadão' - }, - { - href: 'http://www.transparencia.rs.gov.br/', - label: 'Transparência' - }, - { - href: 'https://estado.rs.gov.br/institucional', - label: 'Secretarias e Órgãos', - className: 'barra-letters' - }, - { - href: 'https://www.diariooficial.rs.gov.br/', - label: 'Diário Oficial' - }, - { - href: 'https://www.rs.gov.br/guria', - className: 'barra-estado__guria-link', - html: '' + GURIA_SVG - } - ]; - - function escapeHtml(value) { - return String(value) - .replace(/&/g, '&') - .replace(//g, '>') - .replace(/"/g, '"') - .replace(/'/g, '''); - } +// if (document.body.firstChild) { +// document.body.insertBefore(host, document.body.firstChild); +// } else { +// document.body.appendChild(host); +// } - function renderMenuItem(item) { - const className = item.className ? ` class="${item.className}"` : ''; - const content = item.html || `${escapeHtml(item.label)}`; +// return host; +// } - return `
  • ${content}
    • `; - } - - function createToggleId() { - toggleSequence += 1; - return 'barra-estado__toggle-' + Date.now() + '-' + toggleSequence; - } - - function renderMarkup(toggleId) { - const menuItemsHtml = MENU_ITEMS.map(renderMenuItem).join(''); - - return ` -
    -
    -
    - -
    -
    - - -
      - ${menuItemsHtml} -
    -
    -
    -
    -
    -
    `; - } +// function mountBarraEstado(hostElement) { +// if (typeof document === 'undefined' || !hostElement) return null; - function createRenderRoot(hostElement) { - if (!hostElement) return null; +// ensureWindowOrigin(); - if (hostElement.shadowRoot) { - return hostElement.shadowRoot; - } +// const renderRoot = createRenderRoot(hostElement); - if (typeof hostElement.attachShadow !== 'function') { - console.error('BarraEstadoStandalone: Shadow DOM não é suportado neste ambiente.'); - return null; - } +// if (!renderRoot) return null; - try { - return hostElement.attachShadow({ mode: 'open' }); - } catch (error) { - console.error('BarraEstadoStandalone: falha ao criar Shadow DOM.', error); - return null; - } - } +// const toggleId = createToggleId(); - function clearRenderRoot(renderRoot) { - if (!renderRoot) return; +// clearRenderRoot(renderRoot); +// ensureStyles(renderRoot); - while (renderRoot.firstChild) { - renderRoot.removeChild(renderRoot.firstChild); - } - } +// const fragmentHost = document.createElement('div'); +// fragmentHost.innerHTML = renderMarkup(toggleId); - function ensureStyles(renderRoot) { - if (!renderRoot || typeof document === 'undefined') return null; +// while (fragmentHost.firstChild) { +// renderRoot.appendChild(fragmentHost.firstChild); +// } - const existingStyle = renderRoot.querySelector(`#${STYLE_ID}`); +// bindToggleBehavior(renderRoot, toggleId); - if (existingStyle) { - return existingStyle; - } +// hostElement.setAttribute(MOUNT_ATTR, 'true'); - const styleElement = document.createElement('style'); - styleElement.id = STYLE_ID; - styleElement.type = 'text/css'; - styleElement.textContent = STYLE_TEXT; +// return hostElement; +// } - renderRoot.appendChild(styleElement); +// function bootstrapIntoBody() { +// if (typeof document === 'undefined') return null; - return styleElement; - } +// const run = () => { +// removeLegacyBarraEstado(); - function bindToggleBehavior(renderRoot, toggleId) { - if (!renderRoot || typeof renderRoot.querySelector !== 'function') return; +// const host = createMountHost(); - const checkbox = renderRoot.querySelector(`#${toggleId}`); - const toggle = renderRoot.querySelector(`#${toggleId}-toggle`); +// if (!host) { +// console.error('BarraEstadoStandalone: não foi possível criar o host no .'); +// return null; +// } - if (!checkbox || !toggle) return; +// return mountBarraEstado(host); +// }; - function syncAriaState() { - const isOpen = Boolean(checkbox.checked); - toggle.setAttribute('aria-expanded', isOpen ? 'true' : 'false'); - } +// if (document.body) { +// return run(); +// } - toggle.addEventListener('keydown', function (event) { - const key = event.key || event.code; +// if (document.readyState === 'loading') { +// document.addEventListener('DOMContentLoaded', run, { once: true }); +// return null; +// } - if (key === 'Enter' || key === ' ') { - event.preventDefault(); - checkbox.click(); - } +// window.addEventListener('load', run, { once: true }); +// return null; +// } - if (key === 'Escape' && checkbox.checked) { - event.preventDefault(); - checkbox.checked = false; - checkbox.dispatchEvent(new Event('change', { bubbles: true })); - } - }); +// bootstrapIntoBody(); +// })(); - checkbox.addEventListener('change', syncAriaState); + +(function () { + document.addEventListener("DOMContentLoaded", initBarraEstado); - syncAriaState(); + function initBarraEstado() { + removeExisting(); + ensureOrigin(); + injectStyles(); + injectHTML(); } - function getExistingHost() { - if (typeof document === 'undefined') return null; - - return document.querySelector('[' + HOST_ATTR + '="true"]'); + function removeExisting() { + document.querySelectorAll(".barra-estado").forEach(el => el.remove()); } - function removeLegacyBarraEstado() { - if (typeof document === 'undefined') return; - - const oldBars = document.querySelectorAll( - `.barra-estado, .container-menu:not([${HOST_ATTR}])` - ); - - Array.from(oldBars).forEach((element) => { - element?.parentNode?.removeChild(element); - }); - } - - function createMountHost() { - if (typeof document === 'undefined' || !document.body) return null; - - const existingHost = getExistingHost(); - - if (existingHost) { - return existingHost; + function ensureOrigin() { + if (!window.location.origin) { + window.location.origin = + window.location.protocol + "//" + window.location.host; } - - const host = document.createElement('div'); - - host.setAttribute(HOST_ATTR, 'true'); - host.setAttribute(MOUNT_ATTR, 'false'); - - if (document.body.firstChild) { - document.body.insertBefore(host, document.body.firstChild); - } else { - document.body.appendChild(host); - } - - return host; } - function mountBarraEstado(hostElement) { - if (typeof document === 'undefined' || !hostElement) return null; - - ensureWindowOrigin(); - - const renderRoot = createRenderRoot(hostElement); - - if (!renderRoot) return null; - - const toggleId = createToggleId(); - - clearRenderRoot(renderRoot); - ensureStyles(renderRoot); - - const fragmentHost = document.createElement('div'); - fragmentHost.innerHTML = renderMarkup(toggleId); - - while (fragmentHost.firstChild) { - renderRoot.appendChild(fragmentHost.firstChild); - } - - bindToggleBehavior(renderRoot, toggleId); - - hostElement.setAttribute(MOUNT_ATTR, 'true'); - - return hostElement; + function injectStyles() { + const css = `@import url(//fonts.googleapis.com/css?family=Roboto); +body{-webkit-animation:bugfix infinite 1s} +@-webkit-keyframes bugfix{from,to{padding:0}} +#barra-estado__toggle,.barra-estado__toggle{display:none} +.barra-estado__menu>li{list-style:none;float:left} +@media only screen and (max-width:991px){ +.barra-estado__menu{display:none;opacity:0;width:280px;position:absolute;right:0;top:32px;z-index:999} +.barra-estado__menu>li{display:block;width:100%;margin:0} +.barra-estado__menu>li>a{display:block;width:100%;text-decoration:none;box-sizing:border-box} +.barra-estado__toggle{display:block;position:relative;cursor:pointer;user-select:none} +#barra-estado__toggle:checked~.barra-estado__menu{display:block;opacity:1}} +.barra-estado{height:32px;background-color:#4f4f4f} +.barra-estado__container{position:relative;padding:0 15px;margin:auto;height:100%;} +.barra-estado__logo{position:absolute;width:77px;height:16px;margin-top:6px;left:15px;} +.barra-estado__menu{font-family:Roboto,Arial,sans-serif;text-transform:uppercase;background:#737474;border-top:1px solid #fff;margin-top:0;padding:14px 0 20px} +.barra-estado__nav{display:block;float:right} +.barra-estado__menu>li>a{display:block;font-weight:400;padding:13px 40px;font-size:14px;color:#e4e4e4} +.barra-estado__menu>li>a:hover{box-shadow:inset 5px 0 #fff;color:#fff} +@media only screen and (min-width:992px){ +.barra-estado__menu{background:none;border-top:none;padding:0;margin-top:0} +.barra-estado__menu>li>a{padding:9px 13px;font-size:11px} +.barra-estado__menu>li>a:hover{box-shadow:inset 0 2px #fff}} +.sr-only{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0;}`; + + const style = document.createElement("style"); + style.textContent = css; + document.head.appendChild(style); } - function bootstrapIntoBody() { - if (typeof document === 'undefined') return null; - - const run = () => { - removeLegacyBarraEstado(); - - const host = createMountHost(); - - if (!host) { - console.error('BarraEstadoStandalone: não foi possível criar o host no .'); - return null; - } + function injectHTML() { + const html = ` +
    +
    + + +
    +
    + + + + +
    +
    +
    +
    +`; - return mountBarraEstado(host); - }; + const container = document.createElement("div"); + container.className = "container-menu"; + container.innerHTML = html; - if (document.body) { - return run(); - } - - if (document.readyState === 'loading') { - document.addEventListener('DOMContentLoaded', run, { once: true }); - return null; - } - - window.addEventListener('load', run, { once: true }); - return null; + document.body.insertBefore(container, document.body.firstChild); } - - bootstrapIntoBody(); -})(); - - +})(); \ No newline at end of file From 314f8544aae20807c616de53683105016f33e63e Mon Sep 17 00:00:00 2001 From: Gabriel-SAbreu Date: Wed, 24 Jun 2026 09:56:42 -0300 Subject: [PATCH 10/40] #1399172 - Ajuste nos dominios de intranet v7 --- .../BarraEstado/BarraEstadoStandalone.js | 1124 ++++++----------- 1 file changed, 417 insertions(+), 707 deletions(-) diff --git a/src/components/BarraEstado/BarraEstadoStandalone.js b/src/components/BarraEstado/BarraEstadoStandalone.js index ae3dd89..c030e31 100644 --- a/src/components/BarraEstado/BarraEstadoStandalone.js +++ b/src/components/BarraEstado/BarraEstadoStandalone.js @@ -1,753 +1,463 @@ -// /* ========================= Código teste 23/06 web component ========================== */ -// (function () { -// 'use strict'; - -// const STYLE_ID = 'barra-estado-standalone-style'; -// const HOST_ATTR = 'data-barra-estado-host'; -// const MOUNT_ATTR = 'data-barra-estado-mounted'; -// let toggleSequence = 0; - - -// function ignorarDominio() { -// if (typeof window === 'undefined' || !window.location) return false; - -// const dominioAtual = window.location.hostname.toLowerCase(); - -// const dominiosIgnorados = [ -// 'exemplo.rs.gov.br' -// // adicionar outros domínios específicos aqui -// ]; - -// if (dominiosIgnorados.includes(dominioAtual)) { -// return true; -// } - -// if (dominioAtual.endsWith('.intra.rs.gov.br')) { -// return true; -// } - -// return false; -// } - -// if (ignorarDominio()) return; - -// /* ========================= -// * Polyfill location.origin -// * ========================= */ -// function ensureWindowOrigin() { -// if (typeof window === 'undefined') return; - -// if (!('origin' in window.location)) { -// try { -// window.location.origin = -// window.location.protocol + '//' + window.location.host; -// } catch (error) { -// // silencioso por compatibilidade com browsers legados -// } -// } -// } - -// const STYLE_TEXT = ` -// @import url(//fonts.googleapis.com/css?family=Roboto); - -// :host { -// display: block; -// width: 100%; -// font-family: Roboto, Arial, sans-serif; -// } - -// :host *, -// :host *::before, -// :host *::after { -// box-sizing: border-box; -// } - -// .barra-estado { -// height: 32px; -// min-height: 32px; -// background-color: #4f4f4f; -// position: relative; -// z-index: 999; -// } - -// .barra-estado__container { -// position: relative; -// padding-right: 15px; -// padding-left: 15px; -// margin-right: auto; -// margin-left: auto; -// height: 100%; -// } - -// .barra-estado__container a { -// text-decoration: none; -// } - -// @media (min-width: 768px) { -// .barra-estado__container { -// width: 750px; -// } -// } - -// @media (min-width: 992px) { -// .barra-estado__container { -// width: 970px; -// } -// } - -// @media (min-width: 1200px) { -// .barra-estado__container { -// width: 1170px; -// } -// } - -// .barra-estado__logo { -// position: absolute; -// width: 77px; -// height: 16px; -// margin-top: 6px; -// left: 15px; -// } - -// .barra-estado__logo svg { -// display: block; -// } - -// .barra-estado__logo svg path { -// fill: #f4f4f1; -// } - -// .barra-estado__nav { -// display: block; -// float: right; -// height: 100%; -// } - -// .barra-estado__nav__form { -// margin: 0; -// padding: 0; -// display: inline-block; -// height: 100%; -// } - -// .barra-estado__checkbox, -// .barra-estado__toggle { -// display: none; -// } - -// .barra-estado__menu { -// font-family: Roboto, Arial, sans-serif; -// text-transform: uppercase; -// background: #737474; -// border-top: 1px solid #fff; -// margin-top: 0; -// padding: 14px 0 20px; -// list-style: none; -// } - -// .barra-estado__menu, -// .barra-estado__menu > li, -// .barra-estado__menu > li > a, -// .barra-estado__nav { -// height: 100%; -// } - -// .barra-estado__menu > li { -// list-style: none; -// float: left; -// } - -// .barra-estado__menu > li > a { -// display: block; -// font-weight: 400; -// padding: 13px 40px; -// font-size: 14px; -// line-height: 1; -// color: #e4e4e4; -// text-decoration: none; -// transition: box-shadow 0.25s linear, color 0.25s linear; -// } - -// .barra-estado__menu > li > a:visited { -// color: #e4e4e4 !important; -// } - -// .barra-estado__menu > li > a:focus, -// .barra-estado__menu > li > a:hover { -// box-shadow: inset 5px 0 #fff; -// color: #fff; -// } - -// .barra-estado__menu > li > a:focus svg path, -// .barra-estado__menu > li > a:hover svg path { -// fill: #fff; -// } - -// .barra-estado__menu > li > a:active { -// color: #e4e4e4 !important; -// } - -// .barra-estado__menu, -// .barra-estado__menu > li, -// .barra-estado__menu > li > a { -// height: auto; -// } - -// .barra-estado__guria-link svg { -// display: block; -// } - -// .barra-estado__guria-link svg path { -// fill: #fff; -// } - -// .barra-estado__toggle { -// z-index: 2; -// } - -// .barra-estado__toggle:after { -// content: attr(data-open); -// display: block; -// position: absolute; -// right: 0; -// width: 45px; -// height: 32px; -// text-align: right; -// font-size: 18px; -// line-height: 13px; -// color: #bcbcbb; -// transition: all 0.5s linear; -// } - -// .barra-estado__toggle:hover:after { -// color: #fff; -// } - -// .barra-estado__toggle:focus-visible { -// outline: 2px solid #ffcd07; -// outline-offset: 2px; -// } - -// .barra-estado__checkbox:checked + .barra-estado__toggle:after { -// content: attr(data-close); -// } - -// .sr-only, -// .visually-hidden { -// position: absolute !important; -// width: 1px !important; -// height: 1px !important; -// padding: 0 !important; -// margin: -1px !important; -// overflow: hidden !important; -// clip: rect(0, 0, 0, 0) !important; -// border: 0 !important; -// white-space: nowrap !important; -// } - -// /* ========================= -// * Mobile -// * ========================= */ -// @media only screen and (max-width: 991px) { -// .barra-estado__menu { -// display: none; -// opacity: 0; -// width: 280px; -// position: absolute; -// right: 0; -// top: 32px; -// z-index: 999; -// } - -// .barra-estado__menu > li { -// display: block; -// width: 100%; -// margin: 0; -// float: none; -// } - -// .barra-estado__menu > li > a { -// display: block; -// width: 100%; -// padding: 13px 40px; -// } - -// .barra-estado__toggle { -// display: block; -// position: relative; -// cursor: pointer; -// touch-action: manipulation; -// user-select: none; -// width: 45px; -// height: 32px; -// } - -// .barra-estado__checkbox:checked ~ .barra-estado__menu { -// display: block; -// opacity: 1; -// } -// } - -// /* ========================= -// * Desktop -// * ========================= */ -// @media only screen and (min-width: 992px) { -// .barra-estado__menu { -// background: transparent; -// border-top: none; -// padding: 0; -// margin-top: 0; -// } - -// .barra-estado__menu > li > a { -// padding: 9px 13px; -// font-size: 11px; -// } - -// .barra-estado__menu > li > a.barra-estado__guria-link { -// padding: 7px 13px; -// } - -// .barra-estado__menu > li > a:focus, -// .barra-estado__menu > li > a:hover { -// box-shadow: inset 0 2px #fff; -// color: #fff; -// } -// } - -// /* ========================= -// * Alto contraste -// * ========================= */ -// :host-context(.high-contrast) .barra-estado { -// border-bottom: 1px solid #ffffff !important; -// background-color: #000000 !important; -// } - -// :host-context(.high-contrast) .barra-estado__menu { -// background-color: #000000 !important; -// } - -// :host-context(.high-contrast) .barra-estado__menu > li > a { -// color: #ffffff !important; -// } - -// :host-context(.high-contrast) .barra-estado__menu > li > a:focus, -// :host-context(.high-contrast) .barra-estado__menu > li > a:hover { -// box-shadow: inset 0 5px #ffffff !important; -// color: #ffffff !important; -// } - -// :host-context(.high-contrast) svg path { -// fill: #ffffff !important; -// } -// `; - -// const RS_GOV_SVG = ` -// -// RS.GOV.BR -// Governo do Estado do Rio Grande do Sul -// -// -// -// -// -// -// -// -// -// -// `; - -// const GURIA_SVG = ` -// -// GurIA -// A tua nova assistente digital -// -// -// -// -// -// -// -// `; - -// const MENU_ITEMS = [ -// { -// href: 'https://estado.rs.gov.br/agencia-de-noticias', -// label: 'Notícias' -// }, -// { -// href: 'https://www.rs.gov.br/', -// label: 'Serviços' -// }, -// { -// href: 'https://www.centraldocidadao.rs.gov.br/', -// label: 'Central do Cidadão' -// }, -// { -// href: 'http://www.transparencia.rs.gov.br/', -// label: 'Transparência' -// }, -// { -// href: 'https://estado.rs.gov.br/institucional', -// label: 'Secretarias e Órgãos', -// className: 'barra-letters' -// }, -// { -// href: 'https://www.diariooficial.rs.gov.br/', -// label: 'Diário Oficial' -// }, -// { -// href: 'https://www.rs.gov.br/guria', -// className: 'barra-estado__guria-link', -// html: '' + GURIA_SVG -// } -// ]; - -// function escapeHtml(value) { -// return String(value) -// .replace(/&/g, '&') -// .replace(//g, '>') -// .replace(/"/g, '"') -// .replace(/'/g, '''); -// } - -// function renderMenuItem(item) { -// const className = item.className ? ` class="${item.className}"` : ''; -// const content = item.html || `${escapeHtml(item.label)}`; - -// return `
  • ${content}
    • `; -// } - -// function createToggleId() { -// toggleSequence += 1; -// return 'barra-estado__toggle-' + Date.now() + '-' + toggleSequence; -// } - -// function renderMarkup(toggleId) { -// const menuItemsHtml = MENU_ITEMS.map(renderMenuItem).join(''); - -// return ` -//
    -//
    -//
    -// -//
    -//
    -// -// -//
      -// ${menuItemsHtml} -//
    -//
    -//
    -//
    -//
    -//
    `; -// } - -// function createRenderRoot(hostElement) { -// if (!hostElement) return null; - -// if (hostElement.shadowRoot) { -// return hostElement.shadowRoot; -// } - -// if (typeof hostElement.attachShadow !== 'function') { -// console.error('BarraEstadoStandalone: Shadow DOM não é suportado neste ambiente.'); -// return null; -// } - -// try { -// return hostElement.attachShadow({ mode: 'open' }); -// } catch (error) { -// console.error('BarraEstadoStandalone: falha ao criar Shadow DOM.', error); -// return null; -// } -// } - -// function clearRenderRoot(renderRoot) { -// if (!renderRoot) return; - -// while (renderRoot.firstChild) { -// renderRoot.removeChild(renderRoot.firstChild); -// } -// } - -// function ensureStyles(renderRoot) { -// if (!renderRoot || typeof document === 'undefined') return null; - -// const existingStyle = renderRoot.querySelector(`#${STYLE_ID}`); - -// if (existingStyle) { -// return existingStyle; -// } - -// const styleElement = document.createElement('style'); -// styleElement.id = STYLE_ID; -// styleElement.type = 'text/css'; -// styleElement.textContent = STYLE_TEXT; - -// renderRoot.appendChild(styleElement); - -// return styleElement; -// } - -// function bindToggleBehavior(renderRoot, toggleId) { -// if (!renderRoot || typeof renderRoot.querySelector !== 'function') return; - -// const checkbox = renderRoot.querySelector(`#${toggleId}`); -// const toggle = renderRoot.querySelector(`#${toggleId}-toggle`); - -// if (!checkbox || !toggle) return; +(function () { + 'use strict' + + var STYLE_ID = 'barra-estado-standalone-style' + var MOUNT_ATTR = 'data-barra-estado-mounted' + var HOST_ATTR = 'data-barra-estado-host' + var toggleSequence = 0 + + var STYLE_TEXT = ` +:host { + display: block; + width: 100%; + + // --barra-estado-background: transparent; + --barra-estado-background: #4f4f4f; + --barra-estado-menu-background: #f8f8f8; + --barra-estado-hover-color: #000000; + --barra-estado-active-color: #e4e4e4; + --barra-estado-font-size: 12px; + --barra-estado-font-size-desktop: var(--barra-estado-font-size, 12px); + --barra-estado-height: 32px; + --barra-estado-link-padding: 13px 40px; + --barra-estado-link-padding-desktop: 9px 13px; + --barra-estado-guria-link-padding: 7px 13px; + --barra-estado-highlight-color: var(--green-matriz-link-activated, #135428); + --barra-estado-toggle-color: #bcbcbb; + --barra-estado-toggle-hover-color: #fff; +} + +#rs-gov { + color: var(--green-matriz-link, #1a7235); + vertical-align: initial; +} + +input.barra-estado__checkbox, +.barra-estado__toggle { + display: none; +} + +.barra-estado { + background: var(--barra-estado-background); + min-height: var(--barra-estado-height); +} + +.barra-estado__container { + min-height: var(--barra-estado-height); +} + +.barra-estado__menu { + background: var(--barra-estado-menu-background); +} + +.barra-estado__menu > li { + float: left; + list-style: none; +} + +.barra-estado__nav { + display: block; + float: right; +} + +.barra-estado__menu, +.barra-estado__menu > li, +.barra-estado__menu > li > a, +.barra-estado__nav { + height: 100%; +} + +.barra-estado__nav__form { + display: inline-block; + padding: 0; + margin: 0; + min-height: var(--barra-estado-height); +} + +.barra-estado__menu > li > a { + display: block; + box-sizing: border-box; + padding: var(--barra-estado-link-padding); + color: var(--green-matriz-link, #1a7235); + font-size: var(--barra-estado-font-size); + font-weight: 700; + line-height: 1; + transition: box-shadow 0.25s linear, color 0.25s linear; +} + +.barra-estado__menu > li > a:hover > svg > path, +.barra-estado__menu > li > a:focus > svg > path { + fill: var(--barra-estado-hover-color); +} + +.barra-estado__menu > li > a:focus, +.barra-estado__menu > li > a:hover { + box-shadow: inset 5px 0 var(--barra-estado-highlight-color); + color: var(--barra-estado-hover-color); +} + +.barra-estado__menu > li > a:active { + color: var(--barra-estado-active-color) !important; +} + +.barra-estado__menu, +.barra-estado__menu > li, +.barra-estado__menu > li > a { + height: auto; +} + +.barra-estado__toggle { + z-index: 2; +} + +.barra-estado__toggle:after { + color: var(--barra-estado-toggle-color); + content: attr(data-open); + transition: all 0.5s linear; +} + +.barra-estado__toggle:hover:after { + color: var(--barra-estado-toggle-hover-color); +} + +.barra-estado__toggle:focus-visible { + outline: 2px solid var(--govrs-color-focus, #ffcd07); + outline-offset: 2px; +} + +input.barra-estado__checkbox:checked + label.barra-estado__toggle:after { + content: attr(data-close); +} + +@media only screen and (min-width: 992px) { + .barra-estado__menu { + padding: 0; + border-top: none; + margin-top: 0; + background: var(--barra-estado-menu-background); + } -// function syncAriaState() { -// const isOpen = Boolean(checkbox.checked); -// toggle.setAttribute('aria-expanded', isOpen ? 'true' : 'false'); -// } + .barra-estado__menu > li > a { + padding: var(--barra-estado-link-padding-desktop); + font-size: var(--barra-estado-font-size-desktop); + } -// toggle.addEventListener('keydown', function (event) { -// const key = event.key || event.code; + .barra-estado__menu > li > a:focus, + .barra-estado__menu > li > a:hover { + box-shadow: inset 0 2px var(--barra-estado-highlight-color); + color: var(--barra-estado-hover-color); + } +} + +.barra-estado__menu > li > a.barra-estado__guria-link { + padding: var(--barra-estado-guria-link-padding); +} + +.visually-hidden { + position: absolute !important; + overflow: hidden !important; + width: 1px !important; + height: 1px !important; + padding: 0 !important; + border: 0 !important; + margin: -1px !important; + clip: rect(0, 0, 0, 0) !important; + white-space: nowrap !important; +} + +:host-context(.high-contrast) .barra-estado { + border-bottom: 1px solid var(--govrs-color-contrast-foreground, #ffffff) !important; + background-color: var(--govrs-color-contrast-background, #000000) !important; +} + +:host-context(.high-contrast) .barra-estado__menu { + background-color: var(--govrs-color-contrast-background, #000000) !important; +} + +:host-context(.high-contrast) .barra-estado__menu > li > a > #GurIA path { + fill: var(--govrs-color-contrast-foreground, #ffffff) !important; +} + +:host-context(.high-contrast) .barra-estado__menu > li > a:focus { + box-shadow: inset 0 5px var(--govrs-color-contrast-foreground, #ffffff) !important; + color: var(--govrs-color-contrast-foreground, #ffffff) !important; +} + +:host-context(.high-contrast) .barra-estado__menu > li > a:hover { + box-shadow: inset 0 5px var(--govrs-color-contrast-foreground, #ffffff) !important; + color: var(--govrs-color-contrast-foreground, #ffffff) !important; +} + +:host-context(.high-contrast) #rs-gov > path { + fill: var(--govrs-color-contrast-foreground, #ffffff) !important; +} +` + + var RS_GOV_SVG = ` + + RS.GOV + Governo do Estado do Rio Grande do Sul + + + + + + + + + + +` + + var GURIA_SVG = ` + + GurIA + A tua nova assistente digital + + + + + + + +` + + function renderMenuItem(item) { + var className = item.className ? ' class="' + item.className + '"' : '' + var content = item.html || '' + item.label + + return '
  • ' + content + '
    • ' + } -// if (key === 'Enter' || key === ' ') { -// event.preventDefault(); -// checkbox.click(); -// } + var MENU_ITEMS = [ + { href: 'https://estado.rs.gov.br/agencia-de-noticias', label: 'Notícias' }, + { href: 'https://www.rs.gov.br/', label: 'Serviços' }, + { href: 'https://www.centraldocidadao.rs.gov.br/', label: 'Central do Cidadão' }, + { href: 'http://www.transparencia.rs.gov.br/', label: 'Transparência' }, + { href: 'https://estado.rs.gov.br/institucional', label: 'Locais e Órgãos', className: 'barra-letters' }, + { href: 'https://www.diariooficial.rs.gov.br/', label: 'Diário Oficial' }, + { + href: 'https://www.rs.gov.br/guria', + className: 'barra-estado__guria-link', + html: '' + GURIA_SVG, + }, + ] + + var MENU_ITEMS_HTML = MENU_ITEMS.map(renderMenuItem).join('') + + function ensureWindowOrigin() { + if (typeof window === 'undefined') return + + if (!('origin' in window.location)) { + try { + var locationObject = window.location + locationObject.origin = locationObject.protocol + '//' + locationObject.host + } catch (error) { + } + } + } -// if (key === 'Escape' && checkbox.checked) { -// event.preventDefault(); -// checkbox.checked = false; -// checkbox.dispatchEvent(new Event('change', { bubbles: true })); -// } -// }); + function ensureStyles(styleHost) { + if (typeof document === 'undefined' || !styleHost) return null -// checkbox.addEventListener('change', syncAriaState); + if (typeof styleHost.querySelector === 'function') { + var existingStyle = styleHost.querySelector('#' + STYLE_ID) + if (existingStyle) return existingStyle + } -// syncAriaState(); -// } + var styleElement = document.createElement('style') + styleElement.id = STYLE_ID + styleElement.type = 'text/css' + styleElement.textContent = STYLE_TEXT -// function getExistingHost() { -// if (typeof document === 'undefined') return null; + if (typeof styleHost.appendChild === 'function') { + styleHost.appendChild(styleElement) + return styleElement + } -// return document.querySelector('[' + HOST_ATTR + '="true"]'); -// } + return null + } -// function removeLegacyBarraEstado() { -// if (typeof document === 'undefined') return; + function createToggleId() { + toggleSequence += 1 + return 'barra-estado__toggle-' + toggleSequence + } -// const oldBars = document.querySelectorAll( -// `.barra-estado, .container-menu:not([${HOST_ATTR}])` -// ); + function renderMarkup(toggleId) { + return [ + '
    ', + '
    ', + '
    ', + '', + '
    ', + '
    ', + '', + '', + '
      ', + MENU_ITEMS_HTML, + '
    ', + '
    ', + '
    ', + '
    ', + '
    ', + '
    ', + ].join('') + } -// Array.from(oldBars).forEach((element) => { -// element?.parentNode?.removeChild(element); -// }); -// } + function createRenderRoot(hostElement) { + if (!hostElement) return null -// function createMountHost() { -// if (typeof document === 'undefined' || !document.body) return null; + if (hostElement.shadowRoot) return hostElement.shadowRoot -// const existingHost = getExistingHost(); + if (typeof hostElement.attachShadow !== 'function') { + console.error('BarraEstadoStandalone: Shadow DOM não é suportado neste ambiente.') + return null + } -// if (existingHost) { -// return existingHost; -// } + try { + return hostElement.attachShadow({ mode: 'open' }) + } catch (error) { + console.error('BarraEstadoStandalone: falha ao criar Shadow DOM.', error) + return null + } + } -// const host = document.createElement('div'); + function clearRenderRoot(renderRoot) { + if (!renderRoot) return -// host.setAttribute(HOST_ATTR, 'true'); -// host.setAttribute(MOUNT_ATTR, 'false'); + while (renderRoot.firstChild) { + renderRoot.removeChild(renderRoot.firstChild) + } + } -// if (document.body.firstChild) { -// document.body.insertBefore(host, document.body.firstChild); -// } else { -// document.body.appendChild(host); -// } + function bindToggleBehavior(renderRoot, toggleId) { + if (!renderRoot || typeof renderRoot.querySelector !== 'function') return -// return host; -// } + var checkbox = renderRoot.querySelector('#' + toggleId) + var toggle = renderRoot.querySelector('#' + toggleId + '-toggle') -// function mountBarraEstado(hostElement) { -// if (typeof document === 'undefined' || !hostElement) return null; + if (!checkbox || !toggle) return -// ensureWindowOrigin(); + var syncAriaState = function () { + var isOpen = Boolean(checkbox.checked) + toggle.setAttribute('aria-expanded', isOpen ? 'true' : 'false') + } -// const renderRoot = createRenderRoot(hostElement); + toggle.addEventListener('keydown', function (event) { + if (event.key === 'Enter' || event.key === ' ') { + event.preventDefault() + checkbox.click() + } + + if (event.key === 'Escape' && checkbox.checked) { + event.preventDefault() + checkbox.checked = false + checkbox.dispatchEvent(new Event('change', { bubbles: true })) + } + }) + + checkbox.addEventListener('change', syncAriaState) + syncAriaState() + } -// if (!renderRoot) return null; + function mountBarraEstado(hostElement) { + if (typeof document === 'undefined' || !hostElement) return null -// const toggleId = createToggleId(); + ensureWindowOrigin() -// clearRenderRoot(renderRoot); -// ensureStyles(renderRoot); + var renderRoot = createRenderRoot(hostElement) + if (!renderRoot) return null -// const fragmentHost = document.createElement('div'); -// fragmentHost.innerHTML = renderMarkup(toggleId); + var toggleId = createToggleId() -// while (fragmentHost.firstChild) { -// renderRoot.appendChild(fragmentHost.firstChild); -// } + clearRenderRoot(renderRoot) + ensureStyles(renderRoot) -// bindToggleBehavior(renderRoot, toggleId); + var fragmentHost = document.createElement('div') + fragmentHost.innerHTML = renderMarkup(toggleId) -// hostElement.setAttribute(MOUNT_ATTR, 'true'); + while (fragmentHost.firstChild) { + renderRoot.appendChild(fragmentHost.firstChild) + } -// return hostElement; -// } + bindToggleBehavior(renderRoot, toggleId) + hostElement.setAttribute(MOUNT_ATTR, 'true') -// function bootstrapIntoBody() { -// if (typeof document === 'undefined') return null; + return hostElement + } -// const run = () => { -// removeLegacyBarraEstado(); + function getExistingHost() { + if (typeof document === 'undefined') return null + return document.querySelector('[' + HOST_ATTR + '="true"]') + } -// const host = createMountHost(); + function createMountHost() { + if (typeof document === 'undefined' || !document.body) return null -// if (!host) { -// console.error('BarraEstadoStandalone: não foi possível criar o host no .'); -// return null; -// } + var existingHost = getExistingHost() + if (existingHost) return existingHost -// return mountBarraEstado(host); -// }; + var host = document.createElement('div') + host.setAttribute(HOST_ATTR, 'true') + host.setAttribute(MOUNT_ATTR, 'false') -// if (document.body) { -// return run(); -// } + if (document.body.firstChild) { + document.body.insertBefore(host, document.body.firstChild) + } else { + document.body.appendChild(host) + } -// if (document.readyState === 'loading') { -// document.addEventListener('DOMContentLoaded', run, { once: true }); -// return null; -// } + return host + } -// window.addEventListener('load', run, { once: true }); -// return null; -// } + function bootstrapIntoBody() { + if (typeof document === 'undefined') return null -// bootstrapIntoBody(); -// })(); + var run = function () { + var host = createMountHost() - -(function () { - document.addEventListener("DOMContentLoaded", initBarraEstado); + if (!host) { + console.error('BarraEstadoStandalone: não foi possível criar o host no .') + return null + } - function initBarraEstado() { - removeExisting(); - ensureOrigin(); - injectStyles(); - injectHTML(); - } + return mountBarraEstado(host) + } - function removeExisting() { - document.querySelectorAll(".barra-estado").forEach(el => el.remove()); - } + if (document.body) { + return run() + } - function ensureOrigin() { - if (!window.location.origin) { - window.location.origin = - window.location.protocol + "//" + window.location.host; + if (document.readyState === 'loading') { + document.addEventListener('DOMContentLoaded', run, { once: true }) + return null } - } - function injectStyles() { - const css = `@import url(//fonts.googleapis.com/css?family=Roboto); -body{-webkit-animation:bugfix infinite 1s} -@-webkit-keyframes bugfix{from,to{padding:0}} -#barra-estado__toggle,.barra-estado__toggle{display:none} -.barra-estado__menu>li{list-style:none;float:left} -@media only screen and (max-width:991px){ -.barra-estado__menu{display:none;opacity:0;width:280px;position:absolute;right:0;top:32px;z-index:999} -.barra-estado__menu>li{display:block;width:100%;margin:0} -.barra-estado__menu>li>a{display:block;width:100%;text-decoration:none;box-sizing:border-box} -.barra-estado__toggle{display:block;position:relative;cursor:pointer;user-select:none} -#barra-estado__toggle:checked~.barra-estado__menu{display:block;opacity:1}} -.barra-estado{height:32px;background-color:#4f4f4f} -.barra-estado__container{position:relative;padding:0 15px;margin:auto;height:100%;} -.barra-estado__logo{position:absolute;width:77px;height:16px;margin-top:6px;left:15px;} -.barra-estado__menu{font-family:Roboto,Arial,sans-serif;text-transform:uppercase;background:#737474;border-top:1px solid #fff;margin-top:0;padding:14px 0 20px} -.barra-estado__nav{display:block;float:right} -.barra-estado__menu>li>a{display:block;font-weight:400;padding:13px 40px;font-size:14px;color:#e4e4e4} -.barra-estado__menu>li>a:hover{box-shadow:inset 5px 0 #fff;color:#fff} -@media only screen and (min-width:992px){ -.barra-estado__menu{background:none;border-top:none;padding:0;margin-top:0} -.barra-estado__menu>li>a{padding:9px 13px;font-size:11px} -.barra-estado__menu>li>a:hover{box-shadow:inset 0 2px #fff}} -.sr-only{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0;}`; - - const style = document.createElement("style"); - style.textContent = css; - document.head.appendChild(style); + window.addEventListener('load', run, { once: true }) + return null } - function injectHTML() { - const html = ` -
    -
    - - -
    -
    - - - - -
    -
    -
    -
    -`; - - const container = document.createElement("div"); - container.className = "container-menu"; - container.innerHTML = html; - - document.body.insertBefore(container, document.body.firstChild); - } -})(); \ No newline at end of file + bootstrapIntoBody() +})() \ No newline at end of file From cace8e09b66c25f3f001e5dd75afff8ee24b260c Mon Sep 17 00:00:00 2001 From: Gabriel-SAbreu Date: Wed, 24 Jun 2026 10:28:45 -0300 Subject: [PATCH 11/40] #1399172 - Ajuste nos dominios de intranet v7 --- src/components/BarraEstado/BarraEstadoStandalone.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/BarraEstado/BarraEstadoStandalone.js b/src/components/BarraEstado/BarraEstadoStandalone.js index c030e31..687aaf7 100644 --- a/src/components/BarraEstado/BarraEstadoStandalone.js +++ b/src/components/BarraEstado/BarraEstadoStandalone.js @@ -11,7 +11,7 @@ display: block; width: 100%; - // --barra-estado-background: transparent; + // --barra-estado-background: transparent; --barra-estado-background: #4f4f4f; --barra-estado-menu-background: #f8f8f8; --barra-estado-hover-color: #000000; From 1cbe2a161215282af39da5366569e72d93cb6003 Mon Sep 17 00:00:00 2001 From: Gabriel-SAbreu Date: Wed, 24 Jun 2026 11:41:35 -0300 Subject: [PATCH 12/40] #1399172 - Ajuste nos dominios de intranet v7 --- src/components/BarraEstado/BarraEstadoStandalone.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/BarraEstado/BarraEstadoStandalone.js b/src/components/BarraEstado/BarraEstadoStandalone.js index 687aaf7..c030e31 100644 --- a/src/components/BarraEstado/BarraEstadoStandalone.js +++ b/src/components/BarraEstado/BarraEstadoStandalone.js @@ -11,7 +11,7 @@ display: block; width: 100%; - // --barra-estado-background: transparent; + // --barra-estado-background: transparent; --barra-estado-background: #4f4f4f; --barra-estado-menu-background: #f8f8f8; --barra-estado-hover-color: #000000; From d832423211f11368b2af1799c19bea5ce8f04ee8 Mon Sep 17 00:00:00 2001 From: Gabriel-SAbreu Date: Wed, 24 Jun 2026 12:47:53 -0300 Subject: [PATCH 13/40] #1399172 - Ajuste nos dominios de intranet v7 --- .../BarraEstado/BarraEstadoStandalone.js | 491 +++--------------- 1 file changed, 59 insertions(+), 432 deletions(-) diff --git a/src/components/BarraEstado/BarraEstadoStandalone.js b/src/components/BarraEstado/BarraEstadoStandalone.js index c030e31..2077815 100644 --- a/src/components/BarraEstado/BarraEstadoStandalone.js +++ b/src/components/BarraEstado/BarraEstadoStandalone.js @@ -1,463 +1,90 @@ (function () { - 'use strict' + 'use strict'; - var STYLE_ID = 'barra-estado-standalone-style' - var MOUNT_ATTR = 'data-barra-estado-mounted' - var HOST_ATTR = 'data-barra-estado-host' - var toggleSequence = 0 + var STYLE_ID = 'barra-estado-standalone-style'; + var HOST_ATTR = 'data-barra-estado-host'; + var toggleSequence = 0; var STYLE_TEXT = ` -:host { - display: block; - width: 100%; - - // --barra-estado-background: transparent; - --barra-estado-background: #4f4f4f; - --barra-estado-menu-background: #f8f8f8; - --barra-estado-hover-color: #000000; - --barra-estado-active-color: #e4e4e4; - --barra-estado-font-size: 12px; - --barra-estado-font-size-desktop: var(--barra-estado-font-size, 12px); - --barra-estado-height: 32px; - --barra-estado-link-padding: 13px 40px; - --barra-estado-link-padding-desktop: 9px 13px; - --barra-estado-guria-link-padding: 7px 13px; - --barra-estado-highlight-color: var(--green-matriz-link-activated, #135428); - --barra-estado-toggle-color: #bcbcbb; - --barra-estado-toggle-hover-color: #fff; -} - -#rs-gov { - color: var(--green-matriz-link, #1a7235); - vertical-align: initial; -} - -input.barra-estado__checkbox, -.barra-estado__toggle { - display: none; -} - -.barra-estado { - background: var(--barra-estado-background); - min-height: var(--barra-estado-height); -} - -.barra-estado__container { - min-height: var(--barra-estado-height); -} - -.barra-estado__menu { - background: var(--barra-estado-menu-background); -} - -.barra-estado__menu > li { - float: left; - list-style: none; -} - -.barra-estado__nav { - display: block; - float: right; -} - -.barra-estado__menu, -.barra-estado__menu > li, -.barra-estado__menu > li > a, -.barra-estado__nav { - height: 100%; -} - -.barra-estado__nav__form { - display: inline-block; - padding: 0; - margin: 0; - min-height: var(--barra-estado-height); -} - -.barra-estado__menu > li > a { - display: block; - box-sizing: border-box; - padding: var(--barra-estado-link-padding); - color: var(--green-matriz-link, #1a7235); - font-size: var(--barra-estado-font-size); - font-weight: 700; - line-height: 1; - transition: box-shadow 0.25s linear, color 0.25s linear; -} - -.barra-estado__menu > li > a:hover > svg > path, -.barra-estado__menu > li > a:focus > svg > path { - fill: var(--barra-estado-hover-color); -} - -.barra-estado__menu > li > a:focus, -.barra-estado__menu > li > a:hover { - box-shadow: inset 5px 0 var(--barra-estado-highlight-color); - color: var(--barra-estado-hover-color); -} - -.barra-estado__menu > li > a:active { - color: var(--barra-estado-active-color) !important; -} - -.barra-estado__menu, -.barra-estado__menu > li, -.barra-estado__menu > li > a { - height: auto; -} - -.barra-estado__toggle { - z-index: 2; -} - -.barra-estado__toggle:after { - color: var(--barra-estado-toggle-color); - content: attr(data-open); - transition: all 0.5s linear; -} - -.barra-estado__toggle:hover:after { - color: var(--barra-estado-toggle-hover-color); -} - -.barra-estado__toggle:focus-visible { - outline: 2px solid var(--govrs-color-focus, #ffcd07); - outline-offset: 2px; -} - -input.barra-estado__checkbox:checked + label.barra-estado__toggle:after { - content: attr(data-close); -} - -@media only screen and (min-width: 992px) { - .barra-estado__menu { - padding: 0; - border-top: none; - margin-top: 0; - background: var(--barra-estado-menu-background); - } - - .barra-estado__menu > li > a { - padding: var(--barra-estado-link-padding-desktop); - font-size: var(--barra-estado-font-size-desktop); - } - - .barra-estado__menu > li > a:focus, - .barra-estado__menu > li > a:hover { - box-shadow: inset 0 2px var(--barra-estado-highlight-color); - color: var(--barra-estado-hover-color); - } -} - -.barra-estado__menu > li > a.barra-estado__guria-link { - padding: var(--barra-estado-guria-link-padding); -} - -.visually-hidden { - position: absolute !important; - overflow: hidden !important; - width: 1px !important; - height: 1px !important; - padding: 0 !important; - border: 0 !important; - margin: -1px !important; - clip: rect(0, 0, 0, 0) !important; - white-space: nowrap !important; -} - -:host-context(.high-contrast) .barra-estado { - border-bottom: 1px solid var(--govrs-color-contrast-foreground, #ffffff) !important; - background-color: var(--govrs-color-contrast-background, #000000) !important; -} - -:host-context(.high-contrast) .barra-estado__menu { - background-color: var(--govrs-color-contrast-background, #000000) !important; -} - -:host-context(.high-contrast) .barra-estado__menu > li > a > #GurIA path { - fill: var(--govrs-color-contrast-foreground, #ffffff) !important; -} - -:host-context(.high-contrast) .barra-estado__menu > li > a:focus { - box-shadow: inset 0 5px var(--govrs-color-contrast-foreground, #ffffff) !important; - color: var(--govrs-color-contrast-foreground, #ffffff) !important; -} - -:host-context(.high-contrast) .barra-estado__menu > li > a:hover { - box-shadow: inset 0 5px var(--govrs-color-contrast-foreground, #ffffff) !important; - color: var(--govrs-color-contrast-foreground, #ffffff) !important; -} - -:host-context(.high-contrast) #rs-gov > path { - fill: var(--govrs-color-contrast-foreground, #ffffff) !important; -} -` +:host { display:block;width:100%;--barra-estado-background:#4f4f4f;--barra-estado-menu-background:#f8f8f8;} +.barra-estado{background:var(--barra-estado-background);min-height:32px} +.barra-estado__menu>li{list-style:none;float:left} +.barra-estado__menu{background:var(--barra-estado-menu-background)} +.barra-estado__nav{float:right} +.barra-estado__menu>li>a{display:block;padding:13px 40px;font-weight:bold;color:#1a7235;text-decoration:none} +.barra-estado__menu>li>a:hover{color:#000} +`; var RS_GOV_SVG = ` - - RS.GOV - Governo do Estado do Rio Grande do Sul - - - - - - - - - - -` - - var GURIA_SVG = ` - - GurIA - A tua nova assistente digital - - - - - - + + -` - - function renderMenuItem(item) { - var className = item.className ? ' class="' + item.className + '"' : '' - var content = item.html || '' + item.label - - return '
  • ' + content + '
    • ' - } +`; var MENU_ITEMS = [ { href: 'https://estado.rs.gov.br/agencia-de-noticias', label: 'Notícias' }, { href: 'https://www.rs.gov.br/', label: 'Serviços' }, { href: 'https://www.centraldocidadao.rs.gov.br/', label: 'Central do Cidadão' }, - { href: 'http://www.transparencia.rs.gov.br/', label: 'Transparência' }, - { href: 'https://estado.rs.gov.br/institucional', label: 'Locais e Órgãos', className: 'barra-letters' }, - { href: 'https://www.diariooficial.rs.gov.br/', label: 'Diário Oficial' }, - { - href: 'https://www.rs.gov.br/guria', - className: 'barra-estado__guria-link', - html: '' + GURIA_SVG, - }, - ] - - var MENU_ITEMS_HTML = MENU_ITEMS.map(renderMenuItem).join('') - - function ensureWindowOrigin() { - if (typeof window === 'undefined') return - - if (!('origin' in window.location)) { - try { - var locationObject = window.location - locationObject.origin = locationObject.protocol + '//' + locationObject.host - } catch (error) { - } - } - } - - function ensureStyles(styleHost) { - if (typeof document === 'undefined' || !styleHost) return null - - if (typeof styleHost.querySelector === 'function') { - var existingStyle = styleHost.querySelector('#' + STYLE_ID) - if (existingStyle) return existingStyle - } - - var styleElement = document.createElement('style') - styleElement.id = STYLE_ID - styleElement.type = 'text/css' - styleElement.textContent = STYLE_TEXT - - if (typeof styleHost.appendChild === 'function') { - styleHost.appendChild(styleElement) - return styleElement - } + { href: 'http://www.transparencia.rs.gov.br/', label: 'Transparência' } + ]; - return null + function renderMenuItem(item) { + return `
  • ${item.label}
    • `; } function createToggleId() { - toggleSequence += 1 - return 'barra-estado__toggle-' + toggleSequence - } - - function renderMarkup(toggleId) { - return [ - '
    ', - '
    ', - '
    ', - '', - '
    ', - '
    ', - '', - '', - '
      ', - MENU_ITEMS_HTML, - '
    ', - '
    ', - '
    ', - '
    ', - '
    ', - '
    ', - ].join('') - } - - function createRenderRoot(hostElement) { - if (!hostElement) return null - - if (hostElement.shadowRoot) return hostElement.shadowRoot - - if (typeof hostElement.attachShadow !== 'function') { - console.error('BarraEstadoStandalone: Shadow DOM não é suportado neste ambiente.') - return null - } - - try { - return hostElement.attachShadow({ mode: 'open' }) - } catch (error) { - console.error('BarraEstadoStandalone: falha ao criar Shadow DOM.', error) - return null - } + toggleSequence++; + return `barra-estado__toggle-${toggleSequence}`; } - function clearRenderRoot(renderRoot) { - if (!renderRoot) return - - while (renderRoot.firstChild) { - renderRoot.removeChild(renderRoot.firstChild) - } + function ensureStyles(shadow) { + if (shadow.querySelector(`#${STYLE_ID}`)) return; + var style = document.createElement('style'); + style.id = STYLE_ID; + style.textContent = STYLE_TEXT; + shadow.appendChild(style); } - function bindToggleBehavior(renderRoot, toggleId) { - if (!renderRoot || typeof renderRoot.querySelector !== 'function') return - - var checkbox = renderRoot.querySelector('#' + toggleId) - var toggle = renderRoot.querySelector('#' + toggleId + '-toggle') - - if (!checkbox || !toggle) return - - var syncAriaState = function () { - var isOpen = Boolean(checkbox.checked) - toggle.setAttribute('aria-expanded', isOpen ? 'true' : 'false') - } - - toggle.addEventListener('keydown', function (event) { - if (event.key === 'Enter' || event.key === ' ') { - event.preventDefault() - checkbox.click() - } - - if (event.key === 'Escape' && checkbox.checked) { - event.preventDefault() - checkbox.checked = false - checkbox.dispatchEvent(new Event('change', { bubbles: true })) - } - }) - - checkbox.addEventListener('change', syncAriaState) - syncAriaState() + function renderMarkup(toggleId) { + return ` +
    +
    + ${RS_GOV_SVG} +
    + + +
      + ${MENU_ITEMS.map(renderMenuItem).join('')} +
    +
    +
    +
    `; } - function mountBarraEstado(hostElement) { - if (typeof document === 'undefined' || !hostElement) return null - - ensureWindowOrigin() - - var renderRoot = createRenderRoot(hostElement) - if (!renderRoot) return null - - var toggleId = createToggleId() - - clearRenderRoot(renderRoot) - ensureStyles(renderRoot) - - var fragmentHost = document.createElement('div') - fragmentHost.innerHTML = renderMarkup(toggleId) - - while (fragmentHost.firstChild) { - renderRoot.appendChild(fragmentHost.firstChild) + function mount() { + var host = document.querySelector(`[${HOST_ATTR}]`); + if (!host) { + host = document.createElement('div'); + host.setAttribute(HOST_ATTR, 'true'); + document.body.prepend(host); } - bindToggleBehavior(renderRoot, toggleId) - hostElement.setAttribute(MOUNT_ATTR, 'true') - - return hostElement - } - - function getExistingHost() { - if (typeof document === 'undefined') return null - return document.querySelector('[' + HOST_ATTR + '="true"]') - } - - function createMountHost() { - if (typeof document === 'undefined' || !document.body) return null + var shadow = host.shadowRoot || host.attachShadow({ mode: 'open' }); + shadow.innerHTML = ''; - var existingHost = getExistingHost() - if (existingHost) return existingHost + ensureStyles(shadow); - var host = document.createElement('div') - host.setAttribute(HOST_ATTR, 'true') - host.setAttribute(MOUNT_ATTR, 'false') + var wrapper = document.createElement('div'); + wrapper.innerHTML = renderMarkup(createToggleId()); - if (document.body.firstChild) { - document.body.insertBefore(host, document.body.firstChild) - } else { - document.body.appendChild(host) + while (wrapper.firstChild) { + shadow.appendChild(wrapper.firstChild); } - - return host } - function bootstrapIntoBody() { - if (typeof document === 'undefined') return null - - var run = function () { - var host = createMountHost() - - if (!host) { - console.error('BarraEstadoStandalone: não foi possível criar o host no .') - return null - } - - return mountBarraEstado(host) - } - - if (document.body) { - return run() - } - - if (document.readyState === 'loading') { - document.addEventListener('DOMContentLoaded', run, { once: true }) - return null - } - - window.addEventListener('load', run, { once: true }) - return null + if (document.readyState === 'loading') { + document.addEventListener('DOMContentLoaded', mount); + } else { + mount(); } - - bootstrapIntoBody() -})() \ No newline at end of file +})(); From 2d3ad2962fb8055314c7519d6dde8d02a4b2772f Mon Sep 17 00:00:00 2001 From: Gabriel-SAbreu Date: Wed, 24 Jun 2026 12:49:42 -0300 Subject: [PATCH 14/40] #1399172 - Ajuste nos dominios de intranet v7 --- src/components/BarraEstado/BarraEstadoStandalone.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/BarraEstado/BarraEstadoStandalone.js b/src/components/BarraEstado/BarraEstadoStandalone.js index 2077815..1d3c466 100644 --- a/src/components/BarraEstado/BarraEstadoStandalone.js +++ b/src/components/BarraEstado/BarraEstadoStandalone.js @@ -17,7 +17,7 @@ var RS_GOV_SVG = ` - + `; From 401d5b5f311aef432956209fd61cd2e0d6d3f618 Mon Sep 17 00:00:00 2001 From: Gabriel-SAbreu Date: Wed, 24 Jun 2026 13:25:08 -0300 Subject: [PATCH 15/40] #1399172 - Ajuste nos dominios de intranet v7 --- .../BarraEstado/BarraEstadoStandalone.js | 240 ++++++++++++++++-- 1 file changed, 221 insertions(+), 19 deletions(-) diff --git a/src/components/BarraEstado/BarraEstadoStandalone.js b/src/components/BarraEstado/BarraEstadoStandalone.js index 1d3c466..5efc343 100644 --- a/src/components/BarraEstado/BarraEstadoStandalone.js +++ b/src/components/BarraEstado/BarraEstadoStandalone.js @@ -1,3 +1,93 @@ +// (function () { +// 'use strict'; + +// var STYLE_ID = 'barra-estado-standalone-style'; +// var HOST_ATTR = 'data-barra-estado-host'; +// var toggleSequence = 0; + +// var STYLE_TEXT = ` +// :host { display:block;width:100%;--barra-estado-background:#4f4f4f;--barra-estado-menu-background:#f8f8f8;} +// .barra-estado{background:var(--barra-estado-background);min-height:32px} +// .barra-estado__menu>li{list-style:none;float:left} +// .barra-estado__menu{background:var(--barra-estado-menu-background)} +// .barra-estado__nav{float:right} +// .barra-estado__menu>li>a{display:block;padding:13px 40px;font-weight:bold;color:#1a7235;text-decoration:none} +// .barra-estado__menu>li>a:hover{color:#000} +// `; + +// var RS_GOV_SVG = ` +// +// +// +// `; + +// var MENU_ITEMS = [ +// { href: 'https://estado.rs.gov.br/agencia-de-noticias', label: 'Notícias' }, +// { href: 'https://www.rs.gov.br/', label: 'Serviços' }, +// { href: 'https://www.centraldocidadao.rs.gov.br/', label: 'Central do Cidadão' }, +// { href: 'http://www.transparencia.rs.gov.br/', label: 'Transparência' } +// ]; + +// function renderMenuItem(item) { +// return `
  • ${item.label}
    • `; +// } + +// function createToggleId() { +// toggleSequence++; +// return `barra-estado__toggle-${toggleSequence}`; +// } + +// function ensureStyles(shadow) { +// if (shadow.querySelector(`#${STYLE_ID}`)) return; +// var style = document.createElement('style'); +// style.id = STYLE_ID; +// style.textContent = STYLE_TEXT; +// shadow.appendChild(style); +// } + +// function renderMarkup(toggleId) { +// return ` +//
    +//
    +// ${RS_GOV_SVG} +//
    +// +// +//
      +// ${MENU_ITEMS.map(renderMenuItem).join('')} +//
    +//
    +//
    +//
    `; +// } + +// function mount() { +// var host = document.querySelector(`[${HOST_ATTR}]`); +// if (!host) { +// host = document.createElement('div'); +// host.setAttribute(HOST_ATTR, 'true'); +// document.body.prepend(host); +// } + +// var shadow = host.shadowRoot || host.attachShadow({ mode: 'open' }); +// shadow.innerHTML = ''; + +// ensureStyles(shadow); + +// var wrapper = document.createElement('div'); +// wrapper.innerHTML = renderMarkup(createToggleId()); + +// while (wrapper.firstChild) { +// shadow.appendChild(wrapper.firstChild); +// } +// } + +// if (document.readyState === 'loading') { +// document.addEventListener('DOMContentLoaded', mount); +// } else { +// mount(); +// } +// })(); (function () { 'use strict'; @@ -6,18 +96,126 @@ var toggleSequence = 0; var STYLE_TEXT = ` -:host { display:block;width:100%;--barra-estado-background:#4f4f4f;--barra-estado-menu-background:#f8f8f8;} -.barra-estado{background:var(--barra-estado-background);min-height:32px} -.barra-estado__menu>li{list-style:none;float:left} -.barra-estado__menu{background:var(--barra-estado-menu-background)} -.barra-estado__nav{float:right} -.barra-estado__menu>li>a{display:block;padding:13px 40px;font-weight:bold;color:#1a7235;text-decoration:none} -.barra-estado__menu>li>a:hover{color:#000} +:host { + display: block; + width: 100%; + font-family: Roboto, Arial, sans-serif; + + --barra-bg: #4f4f4f; + --menu-bg: #737474; + --text-color: #e4e4e4; + --hover-color: #fff; + --highlight: #ffffff; +} + +/* container */ +.barra-estado { + background: var(--barra-bg); + min-height: 32px; + display: flex; + align-items: center; +} + +/* layout principal */ +.barra-estado__container { + display: flex; + align-items: center; + justify-content: space-between; + padding: 0 15px; + width: 100%; + max-width: 1170px; + margin: 0 auto; + height: 32px; +} + +/* logo */ +.barra-estado__logo svg path { + fill: #f4f4f1; +} + +/* nav */ +.barra-estado__nav { + position: relative; +} + +/* menu */ +.barra-estado__menu { + list-style: none; + margin: 0; + padding: 0; + display: flex; + background: transparent; +} + +.barra-estado__menu li { + margin: 0; +} + +.barra-estado__menu a { + display: block; + padding: 9px 13px; + font-size: 12px; + text-transform: uppercase; + text-decoration: none; + color: var(--text-color); + transition: all .2s ease; +} + +.barra-estado__menu a:hover, +.barra-estado__menu a:focus { + color: var(--hover-color); + box-shadow: inset 0 2px var(--highlight); +} + +/* toggle */ +.barra-estado__toggle { + display: none; + cursor: pointer; + font-size: 18px; + color: #ccc; +} + +/* MOBILE */ +@media (max-width: 991px) { + + .barra-estado__toggle { + display: block; + } + + .barra-estado__menu { + flex-direction: column; + position: absolute; + right: 0; + top: 32px; + width: 280px; + background: var(--menu-bg); + opacity: 0; + pointer-events: none; + transition: opacity .2s ease; + } + + .barra-estado__menu a { + padding: 13px 20px; + } + + input[type="checkbox"]:checked ~ .barra-estado__menu { + opacity: 1; + pointer-events: all; + } +} + +/* acessibilidade */ +.sr-only { + position: absolute; + width: 1px; + height: 1px; + overflow: hidden; +} `; var RS_GOV_SVG = ` - + `; @@ -29,7 +227,7 @@ ]; function renderMenuItem(item) { - return `
  • ${item.label}
    • `; + return `
  • ${item.label}
    • `; } function createToggleId() { @@ -48,16 +246,20 @@ function renderMarkup(toggleId) { return `
    -
    - ${RS_GOV_SVG} -
    - - -
      - ${MENU_ITEMS.map(renderMenuItem).join('')} -
    -
    -
    +
    + + +
    + + + +
      + ${MENU_ITEMS.map(renderMenuItem).join('')} +
    +
    +
    `; } From 5c0c0fbc8e138ab1e85078e27aafc0e6944b41c0 Mon Sep 17 00:00:00 2001 From: Gabriel-SAbreu Date: Wed, 24 Jun 2026 15:01:43 -0300 Subject: [PATCH 16/40] #1399172 - Ajuste nos dominios de intranet v7 --- .../BarraEstado/BarraEstadoStandalone.js | 215 +++++++++++------- 1 file changed, 138 insertions(+), 77 deletions(-) diff --git a/src/components/BarraEstado/BarraEstadoStandalone.js b/src/components/BarraEstado/BarraEstadoStandalone.js index 5efc343..83a333c 100644 --- a/src/components/BarraEstado/BarraEstadoStandalone.js +++ b/src/components/BarraEstado/BarraEstadoStandalone.js @@ -89,46 +89,45 @@ // } // })(); (function () { - 'use strict'; + 'use strict' - var STYLE_ID = 'barra-estado-standalone-style'; - var HOST_ATTR = 'data-barra-estado-host'; - var toggleSequence = 0; + var STYLE_ID = 'barra-estado-standalone-style' + var MOUNT_ATTR = 'data-barra-estado-mounted' + var HOST_ATTR = 'data-barra-estado-host' + var toggleSequence = 0 var STYLE_TEXT = ` :host { display: block; width: 100%; - font-family: Roboto, Arial, sans-serif; - --barra-bg: #4f4f4f; - --menu-bg: #737474; - --text-color: #e4e4e4; - --hover-color: #fff; - --highlight: #ffffff; + --barra-estado-background: #4f4f4f; + --barra-estado-menu-background: #737474; + --barra-estado-hover-color: #fff; + --barra-estado-active-color: #e4e4e4; + --barra-estado-font-size: 12px; + --barra-estado-height: 32px; + --barra-estado-highlight-color: #ffffff; } -/* container */ +/* base */ .barra-estado { - background: var(--barra-bg); - min-height: 32px; + background: var(--barra-estado-background); + min-height: var(--barra-estado-height); display: flex; align-items: center; } -/* layout principal */ .barra-estado__container { display: flex; align-items: center; justify-content: space-between; padding: 0 15px; + margin: 0 auto; width: 100%; max-width: 1170px; - margin: 0 auto; - height: 32px; } -/* logo */ .barra-estado__logo svg path { fill: #f4f4f1; } @@ -141,38 +140,49 @@ /* menu */ .barra-estado__menu { list-style: none; + display: flex; margin: 0; padding: 0; - display: flex; background: transparent; } -.barra-estado__menu li { - margin: 0; +.barra-estado__menu > li { + display: flex; } -.barra-estado__menu a { +.barra-estado__menu > li > a { display: block; padding: 9px 13px; - font-size: 12px; - text-transform: uppercase; + font-size: var(--barra-estado-font-size); text-decoration: none; - color: var(--text-color); + color: #e4e4e4; transition: all .2s ease; } -.barra-estado__menu a:hover, -.barra-estado__menu a:focus { - color: var(--hover-color); - box-shadow: inset 0 2px var(--highlight); +.barra-estado__menu > li > a:hover, +.barra-estado__menu > li > a:focus { + color: var(--barra-estado-hover-color); + box-shadow: inset 0 2px var(--barra-estado-highlight-color); +} + +.barra-estado__menu > li > a:active { + color: var(--barra-estado-active-color); } /* toggle */ +input.barra-estado__checkbox { + display: none; +} + .barra-estado__toggle { display: none; cursor: pointer; font-size: 18px; - color: #ccc; + color: #bcbcbb; +} + +.barra-estado__toggle:hover { + color: #fff; } /* MOBILE */ @@ -188,59 +198,101 @@ right: 0; top: 32px; width: 280px; - background: var(--menu-bg); + background: var(--barra-estado-menu-background); opacity: 0; pointer-events: none; transition: opacity .2s ease; } - .barra-estado__menu a { + .barra-estado__menu > li > a { padding: 13px 20px; } - input[type="checkbox"]:checked ~ .barra-estado__menu { + input.barra-estado__checkbox:checked ~ .barra-estado__menu { opacity: 1; pointer-events: all; } } /* acessibilidade */ -.sr-only { - position: absolute; - width: 1px; - height: 1px; - overflow: hidden; +.visually-hidden { + position: absolute !important; + overflow: hidden !important; + width: 1px !important; + height: 1px !important; + margin: -1px !important; } -`; +` var RS_GOV_SVG = ` - - + + + +` + + var GURIA_SVG = ` + + GurIA + A tua nova assistente digital + + + + + + -`; +` + + function renderMenuItem(item) { + var className = item.className ? ' class="' + item.className + '"' : '' + var content = item.html || '' + item.label + + return '
  • ' + content + '
    • ' + } var MENU_ITEMS = [ { href: 'https://estado.rs.gov.br/agencia-de-noticias', label: 'Notícias' }, { href: 'https://www.rs.gov.br/', label: 'Serviços' }, { href: 'https://www.centraldocidadao.rs.gov.br/', label: 'Central do Cidadão' }, - { href: 'http://www.transparencia.rs.gov.br/', label: 'Transparência' } - ]; - - function renderMenuItem(item) { - return `
  • ${item.label}
    • `; + { href: 'http://www.transparencia.rs.gov.br/', label: 'Transparência' }, + { href: 'https://estado.rs.gov.br/institucional', label: 'Locais e Órgãos' }, + { + href: 'https://www.rs.gov.br/guria', + className: 'barra-estado__guria-link', + html: '' + GURIA_SVG, + }, + ] + + var MENU_ITEMS_HTML = MENU_ITEMS.map(renderMenuItem).join('') + + function ensureStyles(styleHost) { + if (styleHost.querySelector('#' + STYLE_ID)) return + + var styleElement = document.createElement('style') + styleElement.id = STYLE_ID + styleElement.textContent = STYLE_TEXT + styleHost.appendChild(styleElement) } function createToggleId() { - toggleSequence++; - return `barra-estado__toggle-${toggleSequence}`; - } - - function ensureStyles(shadow) { - if (shadow.querySelector(`#${STYLE_ID}`)) return; - var style = document.createElement('style'); - style.id = STYLE_ID; - style.textContent = STYLE_TEXT; - shadow.appendChild(style); + toggleSequence += 1 + return 'barra-estado__toggle-' + toggleSequence } function renderMarkup(toggleId) { @@ -252,41 +304,50 @@
    - - + +
      - ${MENU_ITEMS.map(renderMenuItem).join('')} + ${MENU_ITEMS_HTML}
    -`; +` } - function mount() { - var host = document.querySelector(`[${HOST_ATTR}]`); - if (!host) { - host = document.createElement('div'); - host.setAttribute(HOST_ATTR, 'true'); - document.body.prepend(host); - } + function mountBarraEstado(hostElement) { + var renderRoot = hostElement.shadowRoot || hostElement.attachShadow({ mode: 'open' }) + renderRoot.innerHTML = '' - var shadow = host.shadowRoot || host.attachShadow({ mode: 'open' }); - shadow.innerHTML = ''; + ensureStyles(renderRoot) - ensureStyles(shadow); - - var wrapper = document.createElement('div'); - wrapper.innerHTML = renderMarkup(createToggleId()); + var wrapper = document.createElement('div') + wrapper.innerHTML = renderMarkup(createToggleId()) while (wrapper.firstChild) { - shadow.appendChild(wrapper.firstChild); + renderRoot.appendChild(wrapper.firstChild) } + + hostElement.setAttribute(MOUNT_ATTR, 'true') + return hostElement + } + + function createMountHost() { + var host = document.createElement('div') + host.setAttribute(HOST_ATTR, 'true') + document.body.prepend(host) + return host + } + + function bootstrap() { + var host = createMountHost() + mountBarraEstado(host) } if (document.readyState === 'loading') { - document.addEventListener('DOMContentLoaded', mount); + document.addEventListener('DOMContentLoaded', bootstrap) } else { - mount(); + bootstrap() } -})(); + +})() \ No newline at end of file From 85ab5ab7d4655360fb947fdf6062c232fd30278b Mon Sep 17 00:00:00 2001 From: Gabriel-SAbreu Date: Wed, 24 Jun 2026 16:11:00 -0300 Subject: [PATCH 17/40] Teste arquivo como web component --- .../BarraEstado/BarraEstadoStandalone.js | 609 ++++++++++-------- 1 file changed, 333 insertions(+), 276 deletions(-) diff --git a/src/components/BarraEstado/BarraEstadoStandalone.js b/src/components/BarraEstado/BarraEstadoStandalone.js index 83a333c..d24f04a 100644 --- a/src/components/BarraEstado/BarraEstadoStandalone.js +++ b/src/components/BarraEstado/BarraEstadoStandalone.js @@ -1,353 +1,410 @@ -// (function () { -// 'use strict'; - -// var STYLE_ID = 'barra-estado-standalone-style'; -// var HOST_ATTR = 'data-barra-estado-host'; -// var toggleSequence = 0; - -// var STYLE_TEXT = ` -// :host { display:block;width:100%;--barra-estado-background:#4f4f4f;--barra-estado-menu-background:#f8f8f8;} -// .barra-estado{background:var(--barra-estado-background);min-height:32px} -// .barra-estado__menu>li{list-style:none;float:left} -// .barra-estado__menu{background:var(--barra-estado-menu-background)} -// .barra-estado__nav{float:right} -// .barra-estado__menu>li>a{display:block;padding:13px 40px;font-weight:bold;color:#1a7235;text-decoration:none} -// .barra-estado__menu>li>a:hover{color:#000} -// `; - -// var RS_GOV_SVG = ` -// -// -// -// `; - -// var MENU_ITEMS = [ -// { href: 'https://estado.rs.gov.br/agencia-de-noticias', label: 'Notícias' }, -// { href: 'https://www.rs.gov.br/', label: 'Serviços' }, -// { href: 'https://www.centraldocidadao.rs.gov.br/', label: 'Central do Cidadão' }, -// { href: 'http://www.transparencia.rs.gov.br/', label: 'Transparência' } -// ]; - -// function renderMenuItem(item) { -// return `
  • ${item.label}
    • `; -// } - -// function createToggleId() { -// toggleSequence++; -// return `barra-estado__toggle-${toggleSequence}`; -// } - -// function ensureStyles(shadow) { -// if (shadow.querySelector(`#${STYLE_ID}`)) return; -// var style = document.createElement('style'); -// style.id = STYLE_ID; -// style.textContent = STYLE_TEXT; -// shadow.appendChild(style); -// } - -// function renderMarkup(toggleId) { -// return ` -//
    -//
    -// ${RS_GOV_SVG} -//
    -// -// -//
      -// ${MENU_ITEMS.map(renderMenuItem).join('')} -//
    -//
    -//
    -//
    `; -// } - -// function mount() { -// var host = document.querySelector(`[${HOST_ATTR}]`); -// if (!host) { -// host = document.createElement('div'); -// host.setAttribute(HOST_ATTR, 'true'); -// document.body.prepend(host); -// } - -// var shadow = host.shadowRoot || host.attachShadow({ mode: 'open' }); -// shadow.innerHTML = ''; - -// ensureStyles(shadow); - -// var wrapper = document.createElement('div'); -// wrapper.innerHTML = renderMarkup(createToggleId()); - -// while (wrapper.firstChild) { -// shadow.appendChild(wrapper.firstChild); -// } -// } - -// if (document.readyState === 'loading') { -// document.addEventListener('DOMContentLoaded', mount); -// } else { -// mount(); -// } -// })(); -(function () { - 'use strict' - - var STYLE_ID = 'barra-estado-standalone-style' - var MOUNT_ATTR = 'data-barra-estado-mounted' - var HOST_ATTR = 'data-barra-estado-host' - var toggleSequence = 0 - - var STYLE_TEXT = ` +// barra-estado.js +// Web Component da barra de estado do Governo do RS +// Uso: +// import './barra-estado.js'; +// +// +// Também pode ser servido por CDN (ex.: jsDelivr) a partir de GitHub ou npm. + +const COMPONENT_TAG = 'barra-estado'; + +const DEFAULT_LINKS = [ + { href: 'https://estado.rs.gov.br/agencia-de-noticias', label: 'Notícias', srPrefix: 'Estado ' }, + { href: 'https://www.rs.gov.br/', label: 'Serviços', srPrefix: 'Estado ' }, + { href: 'https://www.centraldocidadao.rs.gov.br/', label: 'Central do Cidadão', srPrefix: 'Estado ' }, + { href: 'http://www.transparencia.rs.gov.br/', label: 'Transparência', srPrefix: 'Estado ' }, + { href: 'https://estado.rs.gov.br/institucional', label: 'Secretarias e Órgãos', srPrefix: 'Estado ' }, + { href: 'https://www.diariooficial.rs.gov.br/', label: 'Diário Oficial', srPrefix: 'Estado ' }, + { href: 'https://sosenchentes.rs.gov.br', label: '>> SOS RS <<', srPrefix: 'Estado ' }, +]; + +const LOGO_SVG = ` +`; + +const CSS_TEXT = ` +@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400&display=swap'); + :host { + --barra-estado-height: 32px; + --barra-estado-bg: #4f4f4f; + --barra-estado-menu-bg: #737474; + --barra-estado-text: #e4e4e4; + --barra-estado-text-hover: #ffffff; + --barra-estado-alt-text: #bcbcbb; + --barra-estado-logo-fill: #f4f4f1; + --barra-estado-container-max-768: 750px; + --barra-estado-container-max-992: 970px; + --barra-estado-container-max-1200: 1170px; display: block; - width: 100%; + contain: content; + font-family: Roboto, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif; +} - --barra-estado-background: #4f4f4f; - --barra-estado-menu-background: #737474; - --barra-estado-hover-color: #fff; - --barra-estado-active-color: #e4e4e4; - --barra-estado-font-size: 12px; - --barra-estado-height: 32px; - --barra-estado-highlight-color: #ffffff; +*, *::before, *::after { + box-sizing: border-box; +} + +@keyframes bugfix { + from, to { padding: 0; } +} + +:host { + -webkit-animation: bugfix infinite 1s; + animation: bugfix infinite 1s; +} + +.sr-only { + position: absolute; + inline-size: 1px; + block-size: 1px; + padding: 0; + margin: -1px; + overflow: hidden; + clip: rect(0, 0, 0, 0); + white-space: nowrap; + border: 0; } -/* base */ .barra-estado { - background: var(--barra-estado-background); - min-height: var(--barra-estado-height); - display: flex; - align-items: center; + block-size: var(--barra-estado-height); + background-color: var(--barra-estado-bg); } .barra-estado__container { - display: flex; + position: relative; + inline-size: 100%; + block-size: 100%; + margin-inline: auto; + padding-inline: 15px; +} + +.barra-estado__container a { + text-decoration: none; +} + +.barra-estado__logo { + position: absolute; + inset-inline-start: 15px; + inset-block-start: 6px; + inline-size: 77px; + block-size: 16px; + display: inline-flex; align-items: center; - justify-content: space-between; - padding: 0 15px; - margin: 0 auto; - width: 100%; - max-width: 1170px; +} + +.barra-estado__logo svg { + display: block; + inline-size: 77px; + block-size: 16px; } .barra-estado__logo svg path { - fill: #f4f4f1; + fill: var(--barra-estado-logo-fill); } -/* nav */ .barra-estado__nav { - position: relative; + display: block; + float: right; + block-size: 100%; } -/* menu */ -.barra-estado__menu { - list-style: none; - display: flex; +.barra-estado__nav__form { margin: 0; padding: 0; - background: transparent; + display: inline-block; +} + +#barra-estado__toggle, +.barra-estado__toggle { + display: none; +} + +.barra-estado__menu, +.barra-estado__menu > li, +.barra-estado__menu > li > a, +.barra-estado__nav { + block-size: 100%; +} + +.barra-estado__menu { + margin: 0; + padding: 14px 0 20px; + background: var(--barra-estado-menu-bg); + border-block-start: 1px solid #fff; + text-transform: uppercase; + font-family: inherit; + list-style: none; +} + +.barra-estado__menu, +.barra-estado__menu > li, +.barra-estado__menu > li > a { + block-size: auto; } .barra-estado__menu > li { - display: flex; + list-style: none; + float: left; } .barra-estado__menu > li > a { display: block; - padding: 9px 13px; - font-size: var(--barra-estado-font-size); + padding: 13px 40px; + color: var(--barra-estado-text); + font-size: 14px; + font-weight: 400; + line-height: 1; + transition: box-shadow .25s linear, color .25s linear; text-decoration: none; - color: #e4e4e4; - transition: all .2s ease; -} - -.barra-estado__menu > li > a:hover, -.barra-estado__menu > li > a:focus { - color: var(--barra-estado-hover-color); - box-shadow: inset 0 2px var(--barra-estado-highlight-color); } +.barra-estado__menu > li > a:visited, .barra-estado__menu > li > a:active { - color: var(--barra-estado-active-color); + color: var(--barra-estado-text) !important; } -/* toggle */ -input.barra-estado__checkbox { - display: none; +.barra-estado__menu > li > a:hover, +.barra-estado__menu > li > a:focus-visible { + box-shadow: inset 5px 0 #fff; + color: var(--barra-estado-text-hover); + outline: none; } .barra-estado__toggle { - display: none; - cursor: pointer; + z-index: 2; +} + +.barra-estado__toggle::after { + content: attr(data-open); + position: absolute; + inset-inline-end: 0; + display: block; + inline-size: 45px; + block-size: 32px; + color: var(--barra-estado-alt-text); font-size: 18px; - color: #bcbcbb; + line-height: 13px; + text-align: right; + transition: color .5s linear; } -.barra-estado__toggle:hover { +.barra-estado__toggle:hover::after, +.barra-estado__toggle:focus-visible::after { color: #fff; } -/* MOBILE */ -@media (max-width: 991px) { - - .barra-estado__toggle { - display: block; - } +#barra-estado__toggle:checked + .barra-estado__toggle::after { + content: attr(data-close); +} +@media only screen and (max-width: 991px) { .barra-estado__menu { - flex-direction: column; position: absolute; - right: 0; - top: 32px; - width: 280px; - background: var(--barra-estado-menu-background); + inset-inline-end: 0; + inset-block-start: 32px; + z-index: 999; + display: none; + inline-size: 280px; opacity: 0; - pointer-events: none; - transition: opacity .2s ease; + } + + .barra-estado__menu > li { + display: block; + inline-size: 100%; + margin: 0; } .barra-estado__menu > li > a { - padding: 13px 20px; + display: block; + inline-size: 100%; + } + + .barra-estado__toggle { + position: relative; + display: block; + cursor: pointer; + user-select: none; + -webkit-touch-callout: none; } - input.barra-estado__checkbox:checked ~ .barra-estado__menu { + #barra-estado__toggle:checked ~ .barra-estado__menu { + display: block; opacity: 1; - pointer-events: all; } } -/* acessibilidade */ -.visually-hidden { - position: absolute !important; - overflow: hidden !important; - width: 1px !important; - height: 1px !important; - margin: -1px !important; -} -` - - var RS_GOV_SVG = ` - - - -` - - var GURIA_SVG = ` - - GurIA - A tua nova assistente digital - - - - - - - -` - - function renderMenuItem(item) { - var className = item.className ? ' class="' + item.className + '"' : '' - var content = item.html || '' + item.label - - return '
  • ' + content + '
    • ' +@media (min-width: 768px) { + .barra-estado__container { + max-inline-size: var(--barra-estado-container-max-768); + } +} + +@media (min-width: 992px) { + .barra-estado__container { + max-inline-size: var(--barra-estado-container-max-992); + } + + .barra-estado__menu { + margin-top: 0; + padding: 0; + background: transparent; + border-block-start: none; + } + + .barra-estado__menu > li > a { + padding: 9px 13px; + font-size: 11px; } - var MENU_ITEMS = [ - { href: 'https://estado.rs.gov.br/agencia-de-noticias', label: 'Notícias' }, - { href: 'https://www.rs.gov.br/', label: 'Serviços' }, - { href: 'https://www.centraldocidadao.rs.gov.br/', label: 'Central do Cidadão' }, - { href: 'http://www.transparencia.rs.gov.br/', label: 'Transparência' }, - { href: 'https://estado.rs.gov.br/institucional', label: 'Locais e Órgãos' }, - { - href: 'https://www.rs.gov.br/guria', - className: 'barra-estado__guria-link', - html: '' + GURIA_SVG, - }, - ] - - var MENU_ITEMS_HTML = MENU_ITEMS.map(renderMenuItem).join('') - - function ensureStyles(styleHost) { - if (styleHost.querySelector('#' + STYLE_ID)) return - - var styleElement = document.createElement('style') - styleElement.id = STYLE_ID - styleElement.textContent = STYLE_TEXT - styleHost.appendChild(styleElement) + .barra-estado__menu > li > a:hover, + .barra-estado__menu > li > a:focus-visible { + box-shadow: inset 0 2px #fff; + color: var(--barra-estado-text-hover); } +} - function createToggleId() { - toggleSequence += 1 - return 'barra-estado__toggle-' + toggleSequence +@media (min-width: 1200px) { + .barra-estado__container { + max-inline-size: var(--barra-estado-container-max-1200); } +} +`; - function renderMarkup(toggleId) { +function createMenuHtml(links) { + const items = links.map((item) => { + const target = item.target || '_self'; + const rel = target === '_blank' ? ' rel="noopener noreferrer"' : ''; return ` -
    -
    - - -
    - - - -
      - ${MENU_ITEMS_HTML} -
    -
    -
    -
    ` +
  • + + ${item.srPrefix || ''}${item.label} + +
    • `; + }).join(''); + + return ` +
    +
    + +
    +
    + + +
      + ${items} +
    +
    +
    +
    +
    `; +} + +export class RsBarraEstado extends HTMLElement { + static get observedAttributes() { + return ['links']; } - function mountBarraEstado(hostElement) { - var renderRoot = hostElement.shadowRoot || hostElement.attachShadow({ mode: 'open' }) - renderRoot.innerHTML = '' + constructor() { + super(); + this.attachShadow({ mode: 'open' }); + this._links = null; + this._rendered = false; + } - ensureStyles(renderRoot) + get links() { + return this._links ?? DEFAULT_LINKS; + } - var wrapper = document.createElement('div') - wrapper.innerHTML = renderMarkup(createToggleId()) + set links(value) { + if (Array.isArray(value) && value.length > 0) { + this._links = value; + this.render(); + } + } - while (wrapper.firstChild) { - renderRoot.appendChild(wrapper.firstChild) + attributeChangedCallback(name, oldValue, newValue) { + if (name === 'links' && oldValue !== newValue && typeof newValue === 'string') { + try { + const parsed = JSON.parse(newValue); + if (Array.isArray(parsed)) { + this._links = parsed; + this.render(); + } + } catch { + // Ignora JSON inválido e mantém os links padrão. + } } + } - hostElement.setAttribute(MOUNT_ATTR, 'true') - return hostElement + connectedCallback() { + this.render(); } - function createMountHost() { - var host = document.createElement('div') - host.setAttribute(HOST_ATTR, 'true') - document.body.prepend(host) - return host + render() { + if (!this.shadowRoot) return; + + this.shadowRoot.innerHTML = ` + + ${createMenuHtml(this.links)} + `; + + this.setupA11y(); + this._rendered = true; } - function bootstrap() { - var host = createMountHost() - mountBarraEstado(host) + setupA11y() { + const toggleInput = this.shadowRoot?.querySelector('#barra-estado__toggle'); + const toggleLabel = this.shadowRoot?.querySelector('.barra-estado__toggle'); + + if (!toggleInput || !toggleLabel) return; + + const syncAria = () => { + toggleLabel.setAttribute('aria-expanded', String(toggleInput.checked)); + }; + + syncAria(); + toggleInput.addEventListener('change', syncAria, { passive: true }); + + toggleLabel.addEventListener('keydown', (event) => { + if (event.key === 'Enter' || event.key === ' ') { + event.preventDefault(); + toggleInput.checked = !toggleInput.checked; + toggleInput.dispatchEvent(new Event('change', { bubbles: true })); + } + }); } +} - if (document.readyState === 'loading') { - document.addEventListener('DOMContentLoaded', bootstrap) - } else { - bootstrap() +export function defineRsBarraEstado(tagName = COMPONENT_TAG) { + if (typeof window === 'undefined' || !('customElements' in window)) return; + if (!window.customElements.get(tagName)) { + window.customElements.define(tagName, RsBarraEstado); } +} + +// Auto-registro em ambiente de navegador. +defineRsBarraEstado(); -})() \ No newline at end of file +export default RsBarraEstado; From 9e62a501adaabbe234e4194ec1df0c07e150f3c2 Mon Sep 17 00:00:00 2001 From: Gabriel-SAbreu Date: Wed, 24 Jun 2026 16:46:38 -0300 Subject: [PATCH 18/40] Teste arquivo como web component --- .../BarraEstado/BarraEstadoStandalone.js | 168 ++++++++++++++---- 1 file changed, 138 insertions(+), 30 deletions(-) diff --git a/src/components/BarraEstado/BarraEstadoStandalone.js b/src/components/BarraEstado/BarraEstadoStandalone.js index d24f04a..9aa4191 100644 --- a/src/components/BarraEstado/BarraEstadoStandalone.js +++ b/src/components/BarraEstado/BarraEstadoStandalone.js @@ -1,8 +1,5 @@ // barra-estado.js -// Web Component da barra de estado do Governo do RS -// Uso: -// import './barra-estado.js'; -// +// Web Component da>// Web Component da barra de estado do Governo do RS // // Também pode ser servido por CDN (ex.: jsDelivr) a partir de GitHub ou npm. @@ -15,10 +12,78 @@ const DEFAULT_LINKS = [ { href: 'http://www.transparencia.rs.gov.br/', label: 'Transparência', srPrefix: 'Estado ' }, { href: 'https://estado.rs.gov.br/institucional', label: 'Secretarias e Órgãos', srPrefix: 'Estado ' }, { href: 'https://www.diariooficial.rs.gov.br/', label: 'Diário Oficial', srPrefix: 'Estado ' }, - { href: 'https://sosenchentes.rs.gov.br', label: '>> SOS RS <<', srPrefix: 'Estado ' }, + { href: 'https://sosenchentes.rs.gov.br', label: '>> SOS RS <<', srPrefix: 'Estado ' }, ]; -const LOGO_SVG = ` +/** + * Decodifica entidades HTML comuns e também casos duplamente escapados, + * por exemplo: + * <div> ->
    + * &gt; -> > + * &amp;lt; -> < + * + * Essa função protege o conteúdo de templates, CSS inline e SVG inline, + * caso algum processo de publicação/editor tenha escapado o HTML. + */ +function normalizeEscapedHtml(input = '') { + if (typeof input !== 'string') return input; + + const entityMap = { + '<': '<', + '>': '>', + '&': '&', + '"': '"', + ''': "'", + ''': "'", + '/': '/', + '/': '/', + ' ': ' ', + }; + + const entityRegex = /&(lt|gt|amp|quot|#39|apos|#x2F|#47|nbsp);/g; + + let output = input; + let previous; + + // Reaplica até estabilizar, para corrigir casos duplamente escapados. + do { + previous = output; + output = output.replace(entityRegex, (match) => entityMap[match] ?? match); + } while (output !== previous && entityRegex.test(output)); + + return output; +} + +/** + * Escapa texto para inserção segura em HTML. + * Usado para labels/textos vindos de atributos/propriedades. + */ +function escapeHtml(value = '') { + return String(value) + .replaceAll('&', '&') + .replaceAll('<', '<') + .replaceAll('>', '>') + .replaceAll('"', '"') + .replaceAll("'", '''); +} + +/** + * Sanitiza URL minimamente para uso em href. + * Aceita apenas protocolos seguros comuns. + */ +function sanitizeUrl(url = '') { + const value = normalizeEscapedHtml(String(url).trim()); + + try { + const parsed = new URL(value, window.location.href); + const allowedProtocols = ['http:', 'https:', 'mailto:', 'tel:']; + return allowedProtocols.includes(parsed.protocol) ? parsed.href : '#'; + } catch { + return '#'; + } +} + +const LOGO_SVG = normalizeEscapedHtml(` `; + +`); -const CSS_TEXT = ` +const CSS_TEXT = normalizeEscapedHtml(` @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400&display=swap'); :host { @@ -281,26 +347,38 @@ const CSS_TEXT = ` max-inline-size: var(--barra-estado-container-max-1200); } } -`; +`); function createMenuHtml(links) { const items = links.map((item) => { - const target = item.target || '_self'; + const target = item.target === '_blank' ? '_blank' : '_self'; const rel = target === '_blank' ? ' rel="noopener noreferrer"' : ''; + + const href = sanitizeUrl(item.href); + const label = escapeHtml(normalizeEscapedHtml(item.label || '')); + const srPrefix = escapeHtml(normalizeEscapedHtml(item.srPrefix || '')); + return `
  • - - ${item.srPrefix || ''}${item.label} + + ${srPrefix}${label}
    • `; }).join(''); - return ` + return normalizeEscapedHtml(`
    - +
    @@ -312,16 +390,18 @@ function createMenuHtml(links) { aria-label="Abrir ou fechar menu" tabindex="0" > +
      ${items}
    -
    `; +
    + `); } -export class RsBarraEstado extends HTMLElement { +export class BarraEstado extends HTMLElement { static get observedAttributes() { return ['links']; } @@ -330,7 +410,8 @@ export class RsBarraEstado extends HTMLElement { super(); this.attachShadow({ mode: 'open' }); this._links = null; - this._rendered = false; + this._onToggleChange = null; + this._onToggleKeydown = null; } get links() { @@ -362,16 +443,24 @@ export class RsBarraEstado extends HTMLElement { this.render(); } + disconnectedCallback() { + this.removeA11yListeners(); + } + render() { if (!this.shadowRoot) return; + this.removeA11yListeners(); + + const safeCss = normalizeEscapedHtml(CSS_TEXT); + const safeHtml = createMenuHtml(this.links); + this.shadowRoot.innerHTML = ` - - ${createMenuHtml(this.links)} + + ${safeHtml} `; this.setupA11y(); - this._rendered = true; } setupA11y() { @@ -380,31 +469,50 @@ export class RsBarraEstado extends HTMLElement { if (!toggleInput || !toggleLabel) return; - const syncAria = () => { + this._onToggleChange = () => { toggleLabel.setAttribute('aria-expanded', String(toggleInput.checked)); }; - syncAria(); - toggleInput.addEventListener('change', syncAria, { passive: true }); - - toggleLabel.addEventListener('keydown', (event) => { + this._onToggleKeydown = (event) => { if (event.key === 'Enter' || event.key === ' ') { event.preventDefault(); toggleInput.checked = !toggleInput.checked; toggleInput.dispatchEvent(new Event('change', { bubbles: true })); } - }); + }; + + this._onToggleChange(); + toggleInput.addEventListener('change', this._onToggleChange, { passive: true }); + toggleLabel.addEventListener('keydown', this._onToggleKeydown); + } + + removeA11yListeners() { + const toggleInput = this.shadowRoot?.querySelector('#barra-estado__toggle'); + const toggleLabel = this.shadowRoot?.querySelector('.barra-estado__toggle'); + + if (toggleInput && this._onToggleChange) { + toggleInput.removeEventListener('change', this._onToggleChange); + } + + if (toggleLabel && this._onToggleKeydown) { + toggleLabel.removeEventListener('keydown', this._onToggleKeydown); + } + + this._onToggleChange = null; + this._onToggleKeydown = null; } } -export function defineRsBarraEstado(tagName = COMPONENT_TAG) { +export function defineBarraEstado(tagName = COMPONENT_TAG) { if (typeof window === 'undefined' || !('customElements' in window)) return; if (!window.customElements.get(tagName)) { - window.customElements.define(tagName, RsBarraEstado); + window.customElements.define(tagName, BarraEstado); } } // Auto-registro em ambiente de navegador. -defineRsBarraEstado(); +defineBarraEstado(); -export default RsBarraEstado; +export default BarraEstado; +// Uso: +// import './barra-estado.js'; From b157d1e53f169ca18b145bb6f21f538247f1472f Mon Sep 17 00:00:00 2001 From: Gabriel-SAbreu Date: Thu, 25 Jun 2026 09:39:28 -0300 Subject: [PATCH 19/40] Teste arquivo como web component --- .../BarraEstado/BarraEstadoStandalone.js | 17 ++++++++++++----- 1 file changed, 12 insertions(+), 5 deletions(-) diff --git a/src/components/BarraEstado/BarraEstadoStandalone.js b/src/components/BarraEstado/BarraEstadoStandalone.js index 9aa4191..ce12716 100644 --- a/src/components/BarraEstado/BarraEstadoStandalone.js +++ b/src/components/BarraEstado/BarraEstadoStandalone.js @@ -1,7 +1,8 @@ // barra-estado.js -// Web Component da>// Web Component da barra de estado do Governo do RS +// Web Component da barra de estado do Governo do RS // // Também pode ser servido por CDN (ex.: jsDelivr) a partir de GitHub ou npm. +// Compatível tanto com +// From 846cbc744167f799e434670aa046f3c8ccc832d4 Mon Sep 17 00:00:00 2001 From: Gabriel-SAbreu Date: Thu, 25 Jun 2026 10:35:34 -0300 Subject: [PATCH 20/40] feat(BarraEstado): auto-monta no ao carregar o script --- .../BarraEstado/BarraEstadoStandalone.js | 41 ++++++++++++++++++- 1 file changed, 39 insertions(+), 2 deletions(-) diff --git a/src/components/BarraEstado/BarraEstadoStandalone.js b/src/components/BarraEstado/BarraEstadoStandalone.js index ce12716..d13c118 100644 --- a/src/components/BarraEstado/BarraEstadoStandalone.js +++ b/src/components/BarraEstado/BarraEstadoStandalone.js @@ -511,15 +511,52 @@ function defineBarraEstado(tagName = COMPONENT_TAG) { } } +/** + * Auto-injeta a barra no início do , removendo qualquer instância + * anterior (.barra-estado legada via jQuery, ou .container-menu). + * + * Reproduz o comportamento do script jQuery legado, no qual a barra + * aparece automaticamente em qualquer página que carregue este JS, + * sem precisar adicionar a tag no HTML. + */ +function autoMountBarraEstado() { + if (typeof document === 'undefined') return; + + const mount = () => { + // Remove instâncias anteriores (versão jQuery e versões já montadas deste script). + document.querySelectorAll( + '.barra-estado, .container-menu, ' + COMPONENT_TAG + ).forEach((node) => node.remove()); + + if (!document.body) return; + + const wrapper = document.createElement('div'); + wrapper.className = 'container-menu'; + + const barra = document.createElement(COMPONENT_TAG); + wrapper.appendChild(barra); + + document.body.prepend(wrapper); + }; + + if (document.readyState === 'loading') { + document.addEventListener('DOMContentLoaded', mount, { once: true }); + } else { + mount(); + } +} + // Expõe globalmente para uso em -// +// (a barra é injetada automaticamente no topo do ) From 7b842f0ae2f23e02dca90eab0988d526080482c7 Mon Sep 17 00:00:00 2001 From: Gabriel-SAbreu Date: Thu, 25 Jun 2026 10:37:31 -0300 Subject: [PATCH 21/40] feat(BarraEstado): auto-monta no ao carregar o script --- src/components/BarraEstado/BarraEstadoStandalone.js | 8 -------- 1 file changed, 8 deletions(-) diff --git a/src/components/BarraEstado/BarraEstadoStandalone.js b/src/components/BarraEstado/BarraEstadoStandalone.js index d13c118..9b35982 100644 --- a/src/components/BarraEstado/BarraEstadoStandalone.js +++ b/src/components/BarraEstado/BarraEstadoStandalone.js @@ -513,11 +513,6 @@ function defineBarraEstado(tagName = COMPONENT_TAG) { /** * Auto-injeta a barra no início do , removendo qualquer instância - * anterior (.barra-estado legada via jQuery, ou .container-menu). - * - * Reproduz o comportamento do script jQuery legado, no qual a barra - * aparece automaticamente em qualquer página que carregue este JS, - * sem precisar adicionar a tag no HTML. */ function autoMountBarraEstado() { if (typeof document === 'undefined') return; @@ -557,6 +552,3 @@ if (typeof window !== 'undefined') { defineBarraEstado(); autoMountBarraEstado(); -// Uso: -// -// (a barra é injetada automaticamente no topo do ) From d1031ef1dd6565cf83c15db9d560e86f4e685c46 Mon Sep 17 00:00:00 2001 From: Gabriel-SAbreu Date: Thu, 25 Jun 2026 11:21:35 -0300 Subject: [PATCH 22/40] fix(BarraEstado): zera padding/margin do body para eliminar gap superior --- .../BarraEstado/BarraEstadoStandalone.js | 40 ++++++++++++++++++- 1 file changed, 38 insertions(+), 2 deletions(-) diff --git a/src/components/BarraEstado/BarraEstadoStandalone.js b/src/components/BarraEstado/BarraEstadoStandalone.js index 9b35982..bf00140 100644 --- a/src/components/BarraEstado/BarraEstadoStandalone.js +++ b/src/components/BarraEstado/BarraEstadoStandalone.js @@ -511,6 +511,31 @@ function defineBarraEstado(tagName = COMPONENT_TAG) { } } +/** + * Injeta no uma regra global que zera padding/margin superior do + * e , equivalente ao "hack" do script jQuery legado: + * + * body { -webkit-animation: bugfix infinite 1s } + * @-webkit-keyframes bugfix { from, to { padding: 0 } } + * + * Sem isso, temas que aplicam padding-top ao deixam um espaço + * em branco acima da barra. + */ +function injectBodyReset() { + if (typeof document === 'undefined' || !document.head) return; + if (document.getElementById('barra-estado-body-reset')) return; + + const style = document.createElement('style'); + style.id = 'barra-estado-body-reset'; + style.textContent = + 'html.barra-estado-mounted,' + + 'body.barra-estado-mounted{' + + 'margin-top:0 !important;' + + 'padding-top:0 !important;' + + '}'; + document.head.appendChild(style); +} + /** * Auto-injeta a barra no início do , removendo qualquer instância */ @@ -520,15 +545,26 @@ function autoMountBarraEstado() { const mount = () => { // Remove instâncias anteriores (versão jQuery e versões já montadas deste script). document.querySelectorAll( - '.barra-estado, .container-menu, ' + COMPONENT_TAG + '.barra-estado, .container-menu, .barra-estado-host, ' + COMPONENT_TAG ).forEach((node) => node.remove()); if (!document.body) return; + // Reset de padding/margin no html e body para evitar gap acima da barra. + injectBodyReset(); + document.documentElement.classList.add('barra-estado-mounted'); + document.body.classList.add('barra-estado-mounted'); + const wrapper = document.createElement('div'); - wrapper.className = 'container-menu'; + // Classe específica para evitar colisão com CSS legado do tema (.container-menu). + // Mantemos .container-menu por compatibilidade de seletores externos. + wrapper.className = 'barra-estado-host container-menu'; + // Reset inline para neutralizar qualquer margin/padding herdado do tema. + wrapper.style.cssText = + 'margin:0;padding:0;display:block;width:100%;line-height:0;'; const barra = document.createElement(COMPONENT_TAG); + barra.style.cssText = 'display:block;margin:0;padding:0;line-height:normal;'; wrapper.appendChild(barra); document.body.prepend(wrapper); From 05654f537ceba46a97d5ad41059de44ac4de4962 Mon Sep 17 00:00:00 2001 From: Gabriel-SAbreu Date: Thu, 25 Jun 2026 14:03:45 -0300 Subject: [PATCH 23/40] feat(BarraEstado): adicionado logo guria no lugar de sos rs --- .../BarraEstado/BarraEstadoStandalone.js | 98 +++++++++++++++++-- 1 file changed, 89 insertions(+), 9 deletions(-) diff --git a/src/components/BarraEstado/BarraEstadoStandalone.js b/src/components/BarraEstado/BarraEstadoStandalone.js index bf00140..3ca04e3 100644 --- a/src/components/BarraEstado/BarraEstadoStandalone.js +++ b/src/components/BarraEstado/BarraEstadoStandalone.js @@ -6,15 +6,24 @@ const COMPONENT_TAG = 'barra-estado'; -const DEFAULT_LINKS = [ - { href: 'https://estado.rs.gov.br/agencia-de-noticias', label: 'Notícias', srPrefix: 'Estado ' }, - { href: 'https://www.rs.gov.br/', label: 'Serviços', srPrefix: 'Estado ' }, - { href: 'https://www.centraldocidadao.rs.gov.br/', label: 'Central do Cidadão', srPrefix: 'Estado ' }, - { href: 'http://www.transparencia.rs.gov.br/', label: 'Transparência', srPrefix: 'Estado ' }, - { href: 'https://estado.rs.gov.br/institucional', label: 'Secretarias e Órgãos', srPrefix: 'Estado ' }, - { href: 'https://www.diariooficial.rs.gov.br/', label: 'Diário Oficial', srPrefix: 'Estado ' }, - { href: 'https://sosenchentes.rs.gov.br', label: '>> SOS RS <<', srPrefix: 'Estado ' }, -]; +/** + * Hosts em que a barra NÃO deve ser renderizada. + * - Strings iniciadas com "." são tratadas como sufixo (ex.: ".intra.rs.gov.br" + * bloqueia "foo.intra.rs.gov.br" e "intra.rs.gov.br"). + * - Strings sem ponto inicial são comparadas por igualdade exata. + * - Também aceita RegExp. + * + * Para acrescentar hosts adicionais no consumidor, defina ANTES de carregar + * este script: + * + * + * + */ +const DEFAULT_BLOCKED_HOSTS = ['.intra.rs.gov.br']; /** * Decodifica entidades HTML comuns e também casos duplamente escapados, @@ -101,6 +110,30 @@ const LOGO_SVG = normalizeEscapedHtml(` `); +const GURIA_SVG = normalizeEscapedHtml(` + +`); + +const DEFAULT_LINKS = [ + { href: 'https://estado.rs.gov.br/agencia-de-noticias', label: 'Notícias', srPrefix: 'Estado ' }, + { href: 'https://www.rs.gov.br/', label: 'Serviços', srPrefix: 'Estado ' }, + { href: 'https://www.centraldocidadao.rs.gov.br/', label: 'Central do Cidadão', srPrefix: 'Estado ' }, + { href: 'http://www.transparencia.rs.gov.br/', label: 'Transparência', srPrefix: 'Estado ' }, + { href: 'https://estado.rs.gov.br/institucional', label: 'Secretarias e Órgãos', srPrefix: 'Estado ' }, + { href: 'https://www.diariooficial.rs.gov.br/', label: 'Diário Oficial', srPrefix: 'Estado ' }, + { href: 'https://www.rs.gov.br/guria', label: 'GurIA', srPrefix: 'Estado ', svgHtml: GURIA_SVG }, +]; + const CSS_TEXT = normalizeEscapedHtml(` @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400&display=swap'); @@ -250,6 +283,13 @@ const CSS_TEXT = normalizeEscapedHtml(` outline: none; } +.barra-estado__menu > li > a svg { + display: inline-block; + vertical-align: middle; + block-size: auto; + max-block-size: 14px; +} + .barra-estado__toggle { z-index: 2; } @@ -359,6 +399,18 @@ function createMenuHtml(links) { const label = escapeHtml(normalizeEscapedHtml(item.label || '')); const srPrefix = escapeHtml(normalizeEscapedHtml(item.srPrefix || '')); + // Se o item fornecer svgHtml, o SVG substitui o texto visível. + // O label vai inteiro no para leitores de tela. + if (typeof item.svgHtml === 'string' && item.svgHtml.trim()) { + const svg = normalizeEscapedHtml(item.svgHtml); + return ` +
  • + + ${srPrefix}${label}${svg} + +
    • `; + } + return `
  • @@ -511,6 +563,31 @@ function defineBarraEstado(tagName = COMPONENT_TAG) { } } +/** + * Retorna true se o host atual estiver na lista de bloqueio. + * Combina DEFAULT_BLOCKED_HOSTS com window.barraEstadoConfig.blockedHosts. + */ +function isHostBlocked() { + if (typeof window === 'undefined' || !window.location) return false; + + const config = window.barraEstadoConfig || {}; + const extra = Array.isArray(config.blockedHosts) ? config.blockedHosts : []; + const patterns = DEFAULT_BLOCKED_HOSTS.concat(extra); + const host = String(window.location.hostname || '').toLowerCase(); + + return patterns.some((pattern) => { + if (pattern instanceof RegExp) return pattern.test(host); + if (typeof pattern !== 'string' || pattern === '') return false; + + const p = pattern.toLowerCase(); + // Sufixo: ".intra.rs.gov.br" casa "foo.intra.rs.gov.br" e "intra.rs.gov.br". + if (p.startsWith('.')) { + return host === p.slice(1) || host.endsWith(p); + } + return host === p; + }); +} + /** * Injeta no uma regra global que zera padding/margin superior do * e , equivalente ao "hack" do script jQuery legado: @@ -541,6 +618,7 @@ function injectBodyReset() { */ function autoMountBarraEstado() { if (typeof document === 'undefined') return; + if (isHostBlocked()) return; const mount = () => { // Remove instâncias anteriores (versão jQuery e versões já montadas deste script). @@ -582,6 +660,8 @@ if (typeof window !== 'undefined') { window.BarraEstado = BarraEstado; window.defineBarraEstado = defineBarraEstado; window.mountBarraEstado = autoMountBarraEstado; + window.isBarraEstadoHostBlocked = isHostBlocked; + window.BARRA_ESTADO_DEFAULT_BLOCKED_HOSTS = DEFAULT_BLOCKED_HOSTS.slice(); } // Auto-registro do custom element + auto-mount no . From 34fae2f63162b42fc3de13d483a95de5632604fc Mon Sep 17 00:00:00 2001 From: Gabriel-SAbreu Date: Thu, 25 Jun 2026 14:23:41 -0300 Subject: [PATCH 24/40] feat(BarraEstado): adicionado logo guria no lugar de sos rs --- src/components/BarraEstado/BarraEstadoStandalone.js | 12 +----------- 1 file changed, 1 insertion(+), 11 deletions(-) diff --git a/src/components/BarraEstado/BarraEstadoStandalone.js b/src/components/BarraEstado/BarraEstadoStandalone.js index 3ca04e3..2759067 100644 --- a/src/components/BarraEstado/BarraEstadoStandalone.js +++ b/src/components/BarraEstado/BarraEstadoStandalone.js @@ -23,7 +23,7 @@ const COMPONENT_TAG = 'barra-estado'; * * */ -const DEFAULT_BLOCKED_HOSTS = ['.intra.rs.gov.br']; +const DEFAULT_BLOCKED_HOSTS = ['https://pcm.des.intra.rs.gov.br/inicial','https://pcm.pro.intra.rs.gov.br/inicial']; /** * Decodifica entidades HTML comuns e também casos duplamente escapados, @@ -588,16 +588,6 @@ function isHostBlocked() { }); } -/** - * Injeta no uma regra global que zera padding/margin superior do - * e , equivalente ao "hack" do script jQuery legado: - * - * body { -webkit-animation: bugfix infinite 1s } - * @-webkit-keyframes bugfix { from, to { padding: 0 } } - * - * Sem isso, temas que aplicam padding-top ao deixam um espaço - * em branco acima da barra. - */ function injectBodyReset() { if (typeof document === 'undefined' || !document.head) return; if (document.getElementById('barra-estado-body-reset')) return; From ab3478945649b97b6d5c060c5cf666af80f00cc6 Mon Sep 17 00:00:00 2001 From: Gabriel-SAbreu Date: Thu, 25 Jun 2026 14:41:24 -0300 Subject: [PATCH 25/40] feat(BarraEstado): adicionado logo guria no lugar de sos rs --- .../BarraEstado/BarraEstadoStandalone.js | 18 +++++++++++++++++- 1 file changed, 17 insertions(+), 1 deletion(-) diff --git a/src/components/BarraEstado/BarraEstadoStandalone.js b/src/components/BarraEstado/BarraEstadoStandalone.js index 2759067..1c50652 100644 --- a/src/components/BarraEstado/BarraEstadoStandalone.js +++ b/src/components/BarraEstado/BarraEstadoStandalone.js @@ -23,7 +23,23 @@ const COMPONENT_TAG = 'barra-estado'; * * */ -const DEFAULT_BLOCKED_HOSTS = ['https://pcm.des.intra.rs.gov.br/inicial','https://pcm.pro.intra.rs.gov.br/inicial']; +const DEFAULT_BLOCKED_HOSTS = [ "sitedpers.des.intra.rs.gov.br", + "sitedpers.hml.rs.gov.br", + "www.defensoria.rs.def.br", + "www.defensoria.rs.gov.br", + "www.dpe.rs.gov.br", + "matriz2-hotsite.des.procergs.localhost", + "servicos.detran.rs.gov.br", + "siteexp.des.procergs.localhost", + "siteexp.des.intra.rs.gov.br", + "siteexp.hml.rs.gov.br", + "expointer.rs.gov.br", + "www.expointer.rs.gov.br", + "sitedigx.des.intra.rs.gov.br", + "sitedigx01.hml.rs.gov.br", + "sitedigx03.rs.gov.br", + "conversasdigitais.rs.gov.br", + "www.conversasdigitais.rs.gov.br"]; /** * Decodifica entidades HTML comuns e também casos duplamente escapados, From df35348208fc837ea23c1bd9a81eb355b2a603ed Mon Sep 17 00:00:00 2001 From: Gabriel-SAbreu Date: Thu, 25 Jun 2026 16:06:44 -0300 Subject: [PATCH 26/40] feat(BarraEstado): teste para css legado intra pcm --- .../BarraEstado/BarraEstadoStandalone.js | 41 +------------------ 1 file changed, 1 insertion(+), 40 deletions(-) diff --git a/src/components/BarraEstado/BarraEstadoStandalone.js b/src/components/BarraEstado/BarraEstadoStandalone.js index 1c50652..27ea3eb 100644 --- a/src/components/BarraEstado/BarraEstadoStandalone.js +++ b/src/components/BarraEstado/BarraEstadoStandalone.js @@ -1,28 +1,8 @@ // barra-estado.js // Web Component da barra de estado do Governo do RS -// -// Também pode ser servido por CDN (ex.: jsDelivr) a partir de GitHub ou npm. -// Compatível tanto com - * - */ const DEFAULT_BLOCKED_HOSTS = [ "sitedpers.des.intra.rs.gov.br", "sitedpers.hml.rs.gov.br", "www.defensoria.rs.def.br", @@ -41,16 +21,6 @@ const DEFAULT_BLOCKED_HOSTS = [ "sitedpers.des.intra.rs.gov.br", "conversasdigitais.rs.gov.br", "www.conversasdigitais.rs.gov.br"]; -/** - * Decodifica entidades HTML comuns e também casos duplamente escapados, - * por exemplo: - * <div> ->
    - * &gt; -> > - * &amp;lt; -> < - * - * Essa função protege o conteúdo de templates, CSS inline e SVG inline, - * caso algum processo de publicação/editor tenha escapado o HTML. - */ function normalizeEscapedHtml(input = '') { if (typeof input !== 'string') return input; @@ -80,10 +50,6 @@ function normalizeEscapedHtml(input = '') { return output; } -/** - * Escapa texto para inserção segura em HTML. - * Usado para labels/textos vindos de atributos/propriedades. - */ function escapeHtml(value = '') { return String(value) .replaceAll('&', '&') @@ -93,10 +59,6 @@ function escapeHtml(value = '') { .replaceAll("'", '''); } -/** - * Sanitiza URL minimamente para uso em href. - * Aceita apenas protocolos seguros comuns. - */ function sanitizeUrl(url = '') { const value = normalizeEscapedHtml(String(url).trim()); @@ -648,6 +610,7 @@ function autoMountBarraEstado() { 'margin:0;padding:0;display:block;width:100%;line-height:0;'; const barra = document.createElement(COMPONENT_TAG); + barra.className = 'barra-estado'; //TESTE PARA CSS LEGADO barra.style.cssText = 'display:block;margin:0;padding:0;line-height:normal;'; wrapper.appendChild(barra); @@ -661,7 +624,6 @@ function autoMountBarraEstado() { } } -// Expõe globalmente para uso em