@thibezer/ui-components-kit 2.6.1 → 2.8.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +265 -204
- package/README.md +815 -791
- package/dist/acessibilidade-CSzX-DkG.cjs +1 -0
- package/dist/acessibilidade-CUlSXc2X.js +38 -0
- package/dist/altura-controle-ukMRPckR.cjs +1 -0
- package/dist/altura-controle-vxQiXG4q.js +62 -0
- package/dist/botao.cjs +1 -1
- package/dist/botao.js +1 -1
- package/dist/camadas.cjs +94 -94
- package/dist/camadas.js +1218 -1124
- package/dist/campo-texto.cjs +1 -1
- package/dist/campo-texto.js +1 -1
- package/dist/canvas.cjs +66 -65
- package/dist/canvas.js +3769 -3389
- package/dist/card.cjs +1 -1
- package/dist/card.js +1 -1
- package/dist/components/ui-alerta/ui-toast.d.ts +4 -15
- package/dist/components/ui-avatar/ui-avatar.d.ts +11 -0
- package/dist/components/ui-badge/ui-badge.d.ts +2 -0
- package/dist/components/ui-barra-ferramentas/paleta-atalhos.d.ts +16 -0
- package/dist/components/ui-barra-ferramentas/paleta-pressao-longa.d.ts +24 -0
- package/dist/components/ui-barra-ferramentas/ribbon-render.d.ts +14 -0
- package/dist/components/ui-barra-ferramentas/ribbon-teclado.d.ts +17 -0
- package/dist/components/ui-barra-ferramentas/ui-paleta-ferramentas.d.ts +1 -7
- package/dist/components/ui-barra-ferramentas/ui-ribbon.d.ts +0 -1
- package/dist/components/ui-camadas/camadas-arraste-controles.d.ts +2 -0
- package/dist/components/ui-camadas/camadas-arvore-renderer.d.ts +4 -11
- package/dist/components/ui-camadas/camadas-colecao.d.ts +27 -0
- package/dist/components/ui-camadas/camadas-drag-drop.d.ts +13 -1
- package/dist/components/ui-camadas/camadas-drop-ops.d.ts +31 -0
- package/dist/components/ui-camadas/camadas-hierarquia.d.ts +10 -0
- package/dist/components/ui-camadas/camadas-lembranca.d.ts +34 -0
- package/dist/components/ui-camadas/camadas-render.d.ts +14 -0
- package/dist/components/ui-camadas/camadas-renomear.d.ts +12 -0
- package/dist/components/ui-camadas/camadas-selecao-api.d.ts +17 -0
- package/dist/components/ui-camadas/camadas-thumb.d.ts +1 -0
- package/dist/components/ui-camadas/ui-camadas.d.ts +3 -5
- package/dist/components/ui-canvas-cad/cad-acessibilidade.d.ts +15 -0
- package/dist/components/ui-canvas-cad/cad-atributos-sync.d.ts +2 -1
- package/dist/components/ui-canvas-cad/cad-broadcast.d.ts +1 -1
- package/dist/components/ui-canvas-cad/cad-evento-coordenadas.d.ts +22 -0
- package/dist/components/ui-canvas-cad/cad-eventos-canvas.d.ts +3 -8
- package/dist/components/ui-canvas-cad/cad-feicoes-camera.d.ts +26 -0
- package/dist/components/ui-canvas-cad/cad-feicoes-consulta.d.ts +21 -0
- package/dist/components/ui-canvas-cad/cad-feicoes-dados.d.ts +39 -0
- package/dist/components/ui-canvas-cad/cad-feicoes-desenho.d.ts +68 -0
- package/dist/components/ui-canvas-cad/cad-feicoes-edicao.d.ts +37 -0
- package/dist/components/ui-canvas-cad/cad-feicoes-operacoes.d.ts +48 -0
- package/dist/components/ui-canvas-cad/cad-feicoes-ponteiro.d.ts +24 -0
- package/dist/components/ui-canvas-cad/cad-feicoes-selecao-regiao.d.ts +22 -0
- package/dist/components/ui-canvas-cad/cad-feicoes-tipos.d.ts +53 -0
- package/dist/components/ui-canvas-cad/cad-feicoes-versoes.d.ts +33 -0
- package/dist/components/ui-canvas-cad/cad-feicoes.d.ts +26 -106
- package/dist/components/ui-canvas-cad/cad-inicializador.d.ts +3 -1
- package/dist/components/ui-canvas-cad/cad-leaflet-adaptador.d.ts +5 -0
- package/dist/components/ui-canvas-cad/cad-selecao-pontos.d.ts +5 -0
- package/dist/components/ui-canvas-cad/tipos.d.ts +37 -0
- package/dist/components/ui-canvas-cad/ui-canvas-cad.d.ts +4 -1
- package/dist/components/ui-checkbox/ui-checkbox.d.ts +4 -1
- package/dist/components/ui-linha/index.d.ts +1 -0
- package/dist/components/ui-linha/ui-linha.d.ts +48 -0
- package/dist/components/ui-mapa/mapa-atributos.d.ts +14 -0
- package/dist/components/ui-mapa/mapa-basemaps.d.ts +7 -0
- package/dist/components/ui-mapa/mapa-icones.d.ts +4 -0
- package/dist/components/ui-mapa/mapa-leaflet.d.ts +5 -0
- package/dist/components/ui-mapa/mapa-vinculo-pai.d.ts +22 -0
- package/dist/components/ui-mapa/tipos.d.ts +13 -0
- package/dist/components/ui-mapa/ui-mapa-linha.d.ts +12 -5
- package/dist/components/ui-mapa/ui-mapa-marcador.d.ts +15 -6
- package/dist/components/ui-mapa/ui-mapa.d.ts +14 -1
- package/dist/components/ui-modal/modal-acessibilidade.d.ts +5 -5
- package/dist/components/ui-modal/modal-foco.d.ts +28 -0
- package/dist/components/ui-modal/ui-modal.d.ts +1 -11
- package/dist/components/ui-radio/radio-grupo-registry.d.ts +10 -0
- package/dist/components/ui-radio/ui-radio.d.ts +9 -2
- package/dist/components/ui-skeleton/ui-skeleton.d.ts +9 -0
- package/dist/components/ui-switch/ui-switch.d.ts +3 -1
- package/dist/components/ui-tabela/tabela-estados.d.ts +16 -0
- package/dist/components/ui-tabela/tabela-rolagem.d.ts +44 -0
- package/dist/components/ui-tabela/tabela-teclado.d.ts +16 -0
- package/dist/components/ui-tabela/ui-tabela.d.ts +1 -19
- package/dist/components/ui-tooltip/tooltip-popover.d.ts +7 -0
- package/dist/components/ui-tooltip/tooltip-posicionamento.d.ts +29 -0
- package/dist/components/ui-tooltip/ui-tooltip.d.ts +24 -1
- package/dist/core/altura-controle.d.ts +34 -0
- package/dist/core/index.d.ts +1 -0
- package/dist/core/opcoes.d.ts +9 -0
- package/dist/core/rotulo-controle.d.ts +13 -0
- package/dist/core/tipos-toast.d.ts +16 -0
- package/dist/core/ui-bus.d.ts +9 -1
- package/dist/core.cjs +1 -1
- package/dist/core.js +29 -19
- package/dist/custom-elements.json +20984 -15700
- package/dist/data.cjs +1 -1
- package/dist/data.js +2 -2
- package/dist/feedback.cjs +1 -1
- package/dist/feedback.js +21 -21
- package/dist/form-validacao-BlQFxUVj.js +104 -0
- package/dist/form-validacao-DIeyQVH5.cjs +1 -0
- package/dist/forms.cjs +1 -1
- package/dist/forms.js +2 -2
- package/dist/index.cjs +1 -1
- package/dist/index.d.ts +3 -0
- package/dist/index.js +178 -177
- package/dist/mapa.cjs +11 -16
- package/dist/mapa.js +242 -170
- package/dist/modal.cjs +1 -1
- package/dist/modal.js +1 -1
- package/dist/opcoes-CJYLi6kd.js +12 -0
- package/dist/opcoes-CkyDxBuQ.cjs +1 -0
- package/dist/register.cjs +1 -1
- package/dist/register.js +13 -14
- package/dist/tabela.cjs +1 -1
- package/dist/tabela.js +1 -1
- package/dist/tipos-elementos.d.ts +33 -3
- package/dist/tipos-react.d.ts +2 -0
- package/dist/tipos-vue.d.ts +32 -3
- package/dist/tools.cjs +1 -1
- package/dist/tools.js +1 -1
- package/dist/ui-badge-BWhoGgo9.js +197 -0
- package/dist/ui-badge-SIR81R9l.cjs +28 -0
- package/dist/ui-botao-D24oXySA.cjs +12 -0
- package/dist/ui-botao-Dsj08jjw.js +165 -0
- package/dist/{zero-js-triggers-C_KrvFOQ.js → ui-bus-CUd99VJi.js} +36 -103
- package/dist/ui-bus-XqBLlTYQ.cjs +1 -0
- package/dist/{ui-campo-texto-Uu2dJE_0.js → ui-campo-texto-B_OHVGiN.js} +51 -51
- package/dist/ui-campo-texto-DauJCde3.cjs +16 -0
- package/dist/{ui-card-C_o5_0cB.js → ui-card-BNYCQ7g-.js} +50 -42
- package/dist/ui-card-BrjBL-yo.cjs +20 -0
- package/dist/ui-kit.css +1 -1
- package/dist/ui-linha-C6HBnsaw.cjs +19 -0
- package/dist/{ui-segmented-wUraId2e.js → ui-linha-nCDh2wPm.js} +200 -105
- package/dist/{ui-modal-DBOtSTbR.js → ui-modal-BkYvNP0G.js} +116 -140
- package/dist/ui-modal-CUNbpbZ1.cjs +18 -0
- package/dist/{ui-paleta-ferramentas-DNN5i6nL.js → ui-paleta-ferramentas-Ksh6gMW3.js} +359 -329
- package/dist/{ui-paleta-ferramentas-Ccmo-rB5.cjs → ui-paleta-ferramentas-bDLPbiGA.cjs} +7 -7
- package/dist/ui-skeleton-B2Rgrv8o.js +648 -0
- package/dist/ui-skeleton-DiOxTBZK.cjs +52 -0
- package/dist/ui-switch-D9a8XlVX.cjs +53 -0
- package/dist/{ui-switch-BcOqOkiV.js → ui-switch-DO1R0Ce7.js} +187 -128
- package/dist/{ui-tabela-propriedades-BokvDD3b.js → ui-tabela-propriedades-D9Echt2X.js} +845 -826
- package/dist/{ui-tabela-propriedades-BecPqC-e.cjs → ui-tabela-propriedades-DzZlyNZ_.cjs} +10 -10
- package/dist/zero-js-triggers-CJT988bR.js +83 -0
- package/dist/zero-js-triggers-CgM9IIQB.cjs +1 -0
- package/package.json +9 -2
- package/dist/form-validacao-BIOXxt-1.js +0 -140
- package/dist/form-validacao-ytRYSF3E.cjs +0 -1
- package/dist/ui-badge-BxT-sDmV.cjs +0 -28
- package/dist/ui-badge-C0eKBI8E.js +0 -183
- package/dist/ui-botao-BOOnP8ds.cjs +0 -12
- package/dist/ui-botao-DfqSivHl.js +0 -165
- package/dist/ui-campo-texto-Cnn2UAkS.cjs +0 -16
- package/dist/ui-card-B86lJXTP.cjs +0 -20
- package/dist/ui-modal-CvGFGh1h.cjs +0 -18
- package/dist/ui-segmented-D6b6zxVs.cjs +0 -19
- package/dist/ui-skeleton-DI4_9WOX.js +0 -428
- package/dist/ui-skeleton-elhKIh2B.cjs +0 -33
- package/dist/ui-switch-D7iPKDj-.cjs +0 -53
- package/dist/ui-toast-Bp_NlM5G.js +0 -156
- package/dist/ui-toast-DGTZKne5.cjs +0 -20
- package/dist/zero-js-triggers-C_gtaojZ.cjs +0 -1
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
var V = Object.defineProperty;
|
|
2
|
-
var
|
|
3
|
-
var
|
|
4
|
-
import { L as
|
|
2
|
+
var U = (a, o, t) => o in a ? V(a, o, { enumerable: !0, configurable: !0, writable: !0, value: t }) : a[o] = t;
|
|
3
|
+
var u = (a, o, t) => U(a, typeof o != "symbol" ? o + "" : o, t);
|
|
4
|
+
import { L as P } from "./listener-bag-DQgv7OON.js";
|
|
5
5
|
import { d as z, S as M } from "./ssr-safe-5cWfJP-s.js";
|
|
6
|
-
import { h as
|
|
7
|
-
const K = ':host{display:inline-flex;align-items:center;justify-content:center;vertical-align:middle;line-height:1;color:inherit;flex-shrink:0;width:var(--ui-tamanho-icone, 20px);height:var(--ui-tamanho-icone, 20px);box-sizing:border-box}.ui-icone{display:inline-flex;align-items:center;justify-content:center;width:100%;height:100%;color:inherit;font-size:var(--ui-tamanho-icone, 20px)}::slotted(svg),.ui-icone svg{width:100%!important;height:100%!important;display:block;shape-rendering:geometricPrecision}:host([cor="primaria"]),:host([color="primaria"]){color:var(--ui-cor-primaria, #00E08A)}:host([cor="secundaria"]),:host([color="secundaria"]){color:var(--ui-cor-texto-secundario, #888899)}:host([cor="erro"]),:host([color="erro"]){color:var(--ui-cor-texto-erro, #ff5555)}:host([cor="sucesso"]),:host([color="sucesso"]){color:var(--ui-cor-texto-sucesso, #00E08A)}:host([cor="alerta"]),:host([color="alerta"]){color:var(--ui-cor-texto-alerta, #ffb86c)}',
|
|
6
|
+
import { h as G } from "./svg-seguro-BsbNQqpd.js";
|
|
7
|
+
const K = ':host{display:inline-flex;align-items:center;justify-content:center;vertical-align:middle;line-height:1;color:inherit;flex-shrink:0;width:var(--ui-tamanho-icone, 20px);height:var(--ui-tamanho-icone, 20px);box-sizing:border-box}.ui-icone{display:inline-flex;align-items:center;justify-content:center;width:100%;height:100%;color:inherit;font-size:var(--ui-tamanho-icone, 20px)}::slotted(svg),.ui-icone svg{width:100%!important;height:100%!important;display:block;shape-rendering:geometricPrecision}:host([cor="primaria"]),:host([color="primaria"]){color:var(--ui-cor-primaria, #00E08A)}:host([cor="secundaria"]),:host([color="secundaria"]){color:var(--ui-cor-texto-secundario, #888899)}:host([cor="erro"]),:host([color="erro"]){color:var(--ui-cor-texto-erro, #ff5555)}:host([cor="sucesso"]),:host([color="sucesso"]){color:var(--ui-cor-texto-sucesso, #00E08A)}:host([cor="alerta"]),:host([color="alerta"]){color:var(--ui-cor-texto-alerta, #ffb86c)}', $ = {
|
|
8
8
|
search: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>',
|
|
9
9
|
check: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"></polyline></svg>',
|
|
10
10
|
eye: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path><circle cx="12" cy="12" r="3"></circle></svg>',
|
|
@@ -16,13 +16,13 @@ const K = ':host{display:inline-flex;align-items:center;justify-content:center;v
|
|
|
16
16
|
alert: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="8" x2="12" y2="12"></line><line x1="12" y1="16" x2="12.01" y2="16"></line></svg>',
|
|
17
17
|
close: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>'
|
|
18
18
|
};
|
|
19
|
-
class
|
|
19
|
+
class X extends M {
|
|
20
20
|
constructor() {
|
|
21
21
|
super();
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
22
|
+
u(this, "iconContainer");
|
|
23
|
+
u(this, "svgContainer");
|
|
24
|
+
u(this, "slotElement");
|
|
25
|
+
u(this, "handleSlotChange", () => {
|
|
26
26
|
this.syncState();
|
|
27
27
|
});
|
|
28
28
|
const t = this.attachShadow({ mode: "open" });
|
|
@@ -66,229 +66,251 @@ class Y extends M {
|
|
|
66
66
|
this.style.setProperty("--ui-tamanho-icone", t);
|
|
67
67
|
const e = this.getAttribute("cor") || this.getAttribute("color");
|
|
68
68
|
e ? (this.style.setProperty("--ui-cor-icone", e), this.iconContainer.style.color = e) : (this.style.removeProperty("--ui-cor-icone"), this.iconContainer.style.color = ""), this.hasAttribute("aria-label") || this.hasAttribute("label") ? this.iconContainer.removeAttribute("aria-hidden") : this.iconContainer.setAttribute("aria-hidden", "true");
|
|
69
|
-
const r = this.getAttribute("nome") || this.getAttribute("name"),
|
|
70
|
-
r &&
|
|
69
|
+
const r = this.getAttribute("nome") || this.getAttribute("name"), s = this.slotElement.assignedNodes().length > 0;
|
|
70
|
+
r && $[r] && !s ? (this.svgContainer.innerHTML = $[r], this.svgContainer.style.display = "inline-flex") : (this.svgContainer.innerHTML = "", this.svgContainer.style.display = "none");
|
|
71
71
|
}
|
|
72
72
|
}
|
|
73
|
-
z("ui-icone",
|
|
74
|
-
const W = ':host{display:block;position:relative;box-sizing:border-box;font-family:var(--ui-fonte-base, "Inter", sans-serif);color:var(--ui-cor-texto, #e1e1e6)}.ui-ribbon{display:flex;flex-direction:column;background:var(--ui-cor-superficie, #141417);border-bottom:1px solid var(--ui-cor-borda, rgba(255, 255, 255, .12));-webkit-user-select:none;user-select:none}.ui-ribbon__cabecalho{display:flex;align-items:stretch;height:30px;box-sizing:border-box;box-shadow:inset 0 -1px 0 var(--ui-cor-borda, rgba(255, 255, 255, .12))}.ui-ribbon__abas{display:flex;flex:1;min-width:0;align-items:flex-end;gap:2px;padding:0 8px;box-sizing:border-box;overflow-x:auto;scrollbar-width:none;background:linear-gradient(to right,var(--ui-cor-superficie, #141417) 20px,transparent) left top / 28px calc(100% - 1px) no-repeat local,linear-gradient(to left,var(--ui-cor-superficie, #141417) 20px,transparent) right top / 28px calc(100% - 1px) no-repeat local,linear-gradient(to right,rgba(0,0,0,.35),transparent) left top / 14px calc(100% - 1px) no-repeat scroll,linear-gradient(to left,rgba(0,0,0,.35),transparent) right top / 14px calc(100% - 1px) no-repeat scroll}.ui-ribbon__abas::-webkit-scrollbar{display:none}.ui-ribbon__aba{position:relative;flex-shrink:0;height:28px;margin-bottom:1px;padding:0 14px;border:0;border-radius:6px 6px 0 0;background:transparent;color:var(--ui-cor-texto-secundario, #888899);font:inherit;font-size:.75rem;font-weight:600;white-space:nowrap;cursor:pointer;transition:background-color .12s ease,color .12s ease}.ui-ribbon__aba:hover{color:var(--ui-cor-texto, #e1e1e6);background:var(--ui-cor-hover-menu, rgba(255, 255, 255, .08))}.ui-ribbon__aba:focus-visible{outline:2px solid var(--ui-cor-primaria, #00E08A);outline-offset:-2px}.ui-ribbon__aba--ativa,.ui-ribbon__aba--ativa:hover{height:30px;margin-bottom:0;color:var(--ui-cor-texto, #e1e1e6);background:var(--ui-cor-fundo-elevado, #1a1a1e);box-shadow:inset 1px 0 0 var(--ui-cor-borda, rgba(255, 255, 255, .12)),inset -1px 0 0 var(--ui-cor-borda, rgba(255, 255, 255, .12)),inset 0 1px 0 var(--ui-cor-borda, rgba(255, 255, 255, .12))}.ui-ribbon__aba--ativa:after{content:"";position:absolute;inset-inline:8px;bottom:1px;height:2px;border-radius:2px 2px 0 0;background:var(--ui-cor-primaria, #00E08A)}.ui-ribbon__aba--contextual{color:var(--ui-cor-primaria, #00E08A)}.ui-ribbon__aba--contextual:before{content:"";position:absolute;inset-inline:0;top:0;height:2px;border-radius:6px 6px 0 0;background:var(--ui-cor-primaria, #00E08A)}.ui-ribbon__fixar{display:inline-flex;flex-shrink:0;align-items:center;justify-content:center;align-self:center;width:28px;height:24px;margin-inline:2px 6px;padding:0;border:0;border-radius:var(--ui-raio-sm, 4px);background:transparent;color:var(--ui-cor-texto-secundario, #888899);cursor:pointer}.ui-ribbon__fixar:hover{color:var(--ui-cor-texto, #e1e1e6);background:var(--ui-cor-hover-menu, rgba(255, 255, 255, .08))}.ui-ribbon__fixar:focus-visible{outline:2px solid var(--ui-cor-primaria, #00E08A);outline-offset:-2px}.ui-ribbon__fixar:before{content:"";width:6px;height:6px;border:solid currentColor;border-width:2px 0 0 2px;transform:translateY(2px) rotate(45deg)}:host([recolhido]) .ui-ribbon__fixar:before{transform:translateY(-2px) rotate(225deg)}.ui-ribbon__painel{background:var(--ui-cor-fundo-elevado, #1a1a1e);overflow-x:auto;scrollbar-width:thin;scrollbar-color:var(--ui-cor-borda, rgba(255, 255, 255, .2)) transparent}.ui-ribbon__grupos{display:flex;align-items:stretch;width:max-content;min-width:100%;min-height:92px;padding:4px 8px;box-sizing:border-box}.ui-ribbon__grupo{display:flex;flex-direction:column;flex-shrink:0;padding:0 8px;border-inline-end:1px solid var(--ui-cor-borda, rgba(255, 255, 255, .12))}.ui-ribbon__grupo:last-child{border-inline-end:0}.ui-ribbon__grupo-itens{display:flex;flex:1;align-items:stretch;gap:2px}.ui-ribbon__grupo-rotulo{padding:3px 0 1px;color:var(--ui-cor-texto-secundario, #888899);font-size:.6875rem;line-height:1.2;text-align:center;white-space:nowrap}.ui-ribbon__coluna{display:flex;flex-direction:column;justify-content:center;gap:0}.ui-ribbon__separador{width:1px;margin:4px 3px;background:var(--ui-cor-borda, rgba(255, 255, 255, .12))}.ui-ferr-btn--grande{flex-direction:column;min-width:52px;padding:4px 6px;gap:3px}.ui-ferr-btn--grande .ui-ferr-btn__rotulo{max-width:72px;white-space:normal;text-align:center;line-height:1.15;overflow-wrap:anywhere}.ui-ferr-btn--pequeno{height:24px;padding:0 6px;justify-content:flex-start}.ui-ferr-btn--pequeno.ui-ferr-btn--so-icone{width:24px;padding:0;justify-content:center}.ui-ribbon__grupos .ui-ferr-btn:focus-visible{outline:2px solid var(--ui-cor-primaria, #00E08A);outline-offset:-2px;box-shadow:none}:host([recolhido]) .ui-ribbon__painel{display:none;position:absolute;top:100%;inset-inline:0;z-index:var(--ui-z-docked-bar, 600);border-bottom:1px solid var(--ui-cor-borda, rgba(255, 255, 255, .12));box-shadow:var(--ui-sombra-lg, 0 8px 24px rgba(0, 0, 0, .35))}:host([recolhido]) .ui-ribbon--aberto .ui-ribbon__painel{display:block}:host([recolhido]) .ui-ribbon__aba--ativa:after{display:none}:host([compacto]) .ui-ribbon__grupos{min-height:0;padding-block:2px}:host([compacto]) .ui-ribbon__grupo-rotulo{display:none}:host([compacto]) .ui-ferr-btn--grande{min-width:44px}@media (max-width: 720px){.ui-ferr-btn--pequeno:has(.ui-ferr-btn__icone) .ui-ferr-btn__rotulo{display:none}.ui-ferr-btn--pequeno:has(.ui-ferr-btn__icone){min-width:28px;justify-content:center;padding:0 4px}}@media (pointer: coarse){.ui-ribbon__cabecalho{height:38px}.ui-ribbon__aba{height:36px}.ui-ribbon__aba--ativa,.ui-ribbon__aba--ativa:hover{height:38px}.ui-ferr-btn--pequeno{height:32px}.ui-ferr-btn--pequeno.ui-ferr-btn--so-icone{width:32px}.ui-ribbon__fixar{width:36px;height:32px}}@media (prefers-reduced-motion: reduce){.ui-ribbon__aba{transition:none}}@media (forced-colors: active){.ui-ribbon__aba--ativa:after,.ui-ribbon__aba--contextual:before{background:Highlight;forced-color-adjust:none}.ui-ribbon__aba--ativa,.ui-ribbon__aba--ativa:hover{box-shadow:none;border:1px solid CanvasText;border-bottom-color:Canvas}.ui-ribbon__aba:focus-visible,.ui-ribbon__fixar:focus-visible,.ui-ribbon__grupos .ui-ferr-btn:focus-visible{outline-color:Highlight}}', q = '.ui-ferr-btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:4px;box-sizing:border-box;padding:0;border:1px solid transparent;border-radius:var(--ui-raio-borda, 6px);background:transparent;color:var(--ui-cor-texto, #e1e1e6);font-family:var(--ui-fonte-base, "Inter", sans-serif);font-size:.75rem;line-height:1;cursor:pointer;-webkit-user-select:none;user-select:none;touch-action:manipulation;-webkit-tap-highlight-color:transparent;transition:background-color .12s ease,border-color .12s ease,color .12s ease}.ui-ferr-btn:hover:not(:disabled){background:var(--ui-cor-hover-menu, rgba(255, 255, 255, .08))}.ui-ferr-btn:active:not(:disabled){background:color-mix(in srgb,var(--ui-cor-primaria, #00E08A) 14%,transparent)}.ui-ferr-btn:focus-visible{outline:2px solid transparent;outline-offset:2px;box-shadow:0 0 0 2px var(--ui-cor-fundo, #0b0b0d),0 0 0 4px var(--ui-cor-primaria, #00E08A)}.ui-ferr-btn:disabled{opacity:.4;cursor:not-allowed}.ui-ferr-btn--ativo{background:color-mix(in srgb,var(--ui-cor-primaria, #00E08A) 18%,transparent);border-color:color-mix(in srgb,var(--ui-cor-primaria, #00E08A) 55%,transparent)}.ui-ferr-btn.ui-ferr-btn--ativo:hover:not(:disabled){background:color-mix(in srgb,var(--ui-cor-primaria, #00E08A) 28%,transparent)}.ui-ferr-btn.ui-ferr-btn--ativo:active:not(:disabled){background:color-mix(in srgb,var(--ui-cor-primaria, #00E08A) 36%,transparent)}.ui-ferr-btn.ui-ferr-btn--ativo:disabled{background:var(--ui-cor-hover-menu, rgba(255, 255, 255, .08));border-color:var(--ui-cor-borda, rgba(255, 255, 255, .12))}.ui-ferr-btn__icone{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}.ui-ferr-btn__rotulo{white-space:nowrap}.ui-ferr-btn__caret{width:0;height:0;flex-shrink:0;border-left:3px solid transparent;border-right:3px solid transparent;border-top:4px solid currentColor;opacity:.7}.ui-ferr-menu{position:fixed;z-index:var(--ui-z-popover, 1050);display:flex;flex-direction:column;gap:1px;min-width:180px;max-height:calc(100vh - 8px);overflow-y:auto;padding:4px;box-sizing:border-box;background:var(--ui-cor-fundo-menu, #18181c);border:1px solid var(--ui-cor-borda, rgba(255, 255, 255, .12));border-radius:var(--ui-raio-borda, 6px);box-shadow:var(--ui-sombra-lg, 0 8px 24px rgba(0, 0, 0, .35));font-family:var(--ui-fonte-base, "Inter", sans-serif);color:var(--ui-cor-texto, #e1e1e6)}.ui-ferr-menu__item{position:relative;display:flex;align-items:center;gap:8px;width:100%;height:28px;padding:0 8px;box-sizing:border-box;border:0;border-radius:var(--ui-raio-sm, 4px);background:transparent;color:inherit;font:inherit;font-size:.75rem;text-align:start;cursor:pointer}.ui-ferr-menu__item:hover:not(:disabled){background:var(--ui-cor-hover-menu, rgba(255, 255, 255, .08))}.ui-ferr-menu__item:focus-visible{outline:2px solid var(--ui-cor-primaria, #00E08A);outline-offset:-2px;background:var(--ui-cor-hover-menu, rgba(255, 255, 255, .08))}.ui-ferr-menu__item:disabled{opacity:.4;cursor:not-allowed}.ui-ferr-menu__item--ativo,.ui-ferr-menu__item[aria-checked=true]{color:var(--ui-cor-primaria, #00E08A);font-weight:600}.ui-ferr-menu__item--ativo:after,.ui-ferr-menu__item[aria-checked=true]:after{content:"";flex-shrink:0;width:4px;height:8px;margin-inline-start:4px;border:solid currentColor;border-width:0 2px 2px 0;transform:rotate(45deg) translateY(-1px)}.ui-ferr-menu__icone{display:inline-flex;width:16px;justify-content:center}.ui-ferr-menu__rotulo{flex:1}.ui-ferr-menu__atalho{margin-inline-start:16px;color:var(--ui-cor-texto-secundario, #888899);font-size:.6875rem;font-variant-numeric:tabular-nums}.ui-ferr-menu__sep{height:1px;margin:3px 2px;background:var(--ui-cor-borda, rgba(255, 255, 255, .12))}@media (pointer: coarse){.ui-ferr-menu__item{height:36px}}@media (prefers-reduced-motion: reduce){.ui-ferr-btn{transition:none}}@media (forced-colors: active){.ui-ferr-btn:focus-visible,.ui-ferr-menu__item:focus-visible{outline:2px solid Highlight}.ui-ferr-btn--ativo{background:Highlight;color:HighlightText;border-color:ButtonText;forced-color-adjust:none}.ui-ferr-btn:disabled,.ui-ferr-menu__item:disabled{opacity:1;color:GrayText}.ui-ferr-menu{border-color:CanvasText}.ui-ferr-menu__item:hover:not(:disabled){background:Highlight;color:HighlightText}}';
|
|
75
|
-
function
|
|
76
|
-
if (!
|
|
73
|
+
z("ui-icone", X);
|
|
74
|
+
const Y = ':host{display:block;position:relative;box-sizing:border-box;font-family:var(--ui-fonte-base, "Inter", sans-serif);color:var(--ui-cor-texto, #e1e1e6)}.ui-ribbon{display:flex;flex-direction:column;background:var(--ui-cor-superficie, #141417);border-bottom:1px solid var(--ui-cor-borda, rgba(255, 255, 255, .12));-webkit-user-select:none;user-select:none}.ui-ribbon__cabecalho{display:flex;align-items:stretch;height:30px;box-sizing:border-box;box-shadow:inset 0 -1px 0 var(--ui-cor-borda, rgba(255, 255, 255, .12))}.ui-ribbon__abas{display:flex;flex:1;min-width:0;align-items:flex-end;gap:2px;padding:0 8px;box-sizing:border-box;overflow-x:auto;scrollbar-width:none;background:linear-gradient(to right,var(--ui-cor-superficie, #141417) 20px,transparent) left top / 28px calc(100% - 1px) no-repeat local,linear-gradient(to left,var(--ui-cor-superficie, #141417) 20px,transparent) right top / 28px calc(100% - 1px) no-repeat local,linear-gradient(to right,rgba(0,0,0,.35),transparent) left top / 14px calc(100% - 1px) no-repeat scroll,linear-gradient(to left,rgba(0,0,0,.35),transparent) right top / 14px calc(100% - 1px) no-repeat scroll}.ui-ribbon__abas::-webkit-scrollbar{display:none}.ui-ribbon__aba{position:relative;flex-shrink:0;height:28px;margin-bottom:1px;padding:0 14px;border:0;border-radius:6px 6px 0 0;background:transparent;color:var(--ui-cor-texto-secundario, #888899);font:inherit;font-size:.75rem;font-weight:600;white-space:nowrap;cursor:pointer;transition:background-color .12s ease,color .12s ease}.ui-ribbon__aba:hover{color:var(--ui-cor-texto, #e1e1e6);background:var(--ui-cor-hover-menu, rgba(255, 255, 255, .08))}.ui-ribbon__aba:focus-visible{outline:2px solid var(--ui-cor-primaria, #00E08A);outline-offset:-2px}.ui-ribbon__aba--ativa,.ui-ribbon__aba--ativa:hover{height:30px;margin-bottom:0;color:var(--ui-cor-texto, #e1e1e6);background:var(--ui-cor-fundo-elevado, #1a1a1e);box-shadow:inset 1px 0 0 var(--ui-cor-borda, rgba(255, 255, 255, .12)),inset -1px 0 0 var(--ui-cor-borda, rgba(255, 255, 255, .12)),inset 0 1px 0 var(--ui-cor-borda, rgba(255, 255, 255, .12))}.ui-ribbon__aba--ativa:after{content:"";position:absolute;inset-inline:8px;bottom:1px;height:2px;border-radius:2px 2px 0 0;background:var(--ui-cor-primaria, #00E08A)}.ui-ribbon__aba--contextual{color:var(--ui-cor-primaria, #00E08A)}.ui-ribbon__aba--contextual:before{content:"";position:absolute;inset-inline:0;top:0;height:2px;border-radius:6px 6px 0 0;background:var(--ui-cor-primaria, #00E08A)}.ui-ribbon__fixar{display:inline-flex;flex-shrink:0;align-items:center;justify-content:center;align-self:center;width:28px;height:24px;margin-inline:2px 6px;padding:0;border:0;border-radius:var(--ui-raio-sm, 4px);background:transparent;color:var(--ui-cor-texto-secundario, #888899);cursor:pointer}.ui-ribbon__fixar:hover{color:var(--ui-cor-texto, #e1e1e6);background:var(--ui-cor-hover-menu, rgba(255, 255, 255, .08))}.ui-ribbon__fixar:focus-visible{outline:2px solid var(--ui-cor-primaria, #00E08A);outline-offset:-2px}.ui-ribbon__fixar:before{content:"";width:6px;height:6px;border:solid currentColor;border-width:2px 0 0 2px;transform:translateY(2px) rotate(45deg)}:host([recolhido]) .ui-ribbon__fixar:before{transform:translateY(-2px) rotate(225deg)}.ui-ribbon__painel{background:var(--ui-cor-fundo-elevado, #1a1a1e);overflow-x:auto;scrollbar-width:thin;scrollbar-color:var(--ui-cor-borda, rgba(255, 255, 255, .2)) transparent}.ui-ribbon__grupos{display:flex;align-items:stretch;width:max-content;min-width:100%;min-height:92px;padding:4px 8px;box-sizing:border-box}.ui-ribbon__grupo{display:flex;flex-direction:column;flex-shrink:0;padding:0 8px;border-inline-end:1px solid var(--ui-cor-borda, rgba(255, 255, 255, .12))}.ui-ribbon__grupo:last-child{border-inline-end:0}.ui-ribbon__grupo-itens{display:flex;flex:1;align-items:stretch;gap:2px}.ui-ribbon__grupo-rotulo{padding:3px 0 1px;color:var(--ui-cor-texto-secundario, #888899);font-size:.6875rem;line-height:1.2;text-align:center;white-space:nowrap}.ui-ribbon__coluna{display:flex;flex-direction:column;justify-content:center;gap:0}.ui-ribbon__separador{width:1px;margin:4px 3px;background:var(--ui-cor-borda, rgba(255, 255, 255, .12))}.ui-ferr-btn--grande{flex-direction:column;min-width:52px;padding:4px 6px;gap:3px}.ui-ferr-btn--grande .ui-ferr-btn__rotulo{max-width:72px;white-space:normal;text-align:center;line-height:1.15;overflow-wrap:anywhere}.ui-ferr-btn--pequeno{height:24px;padding:0 6px;justify-content:flex-start}.ui-ferr-btn--pequeno.ui-ferr-btn--so-icone{width:24px;padding:0;justify-content:center}.ui-ribbon__grupos .ui-ferr-btn:focus-visible{outline:2px solid var(--ui-cor-primaria, #00E08A);outline-offset:-2px;box-shadow:none}:host([recolhido]) .ui-ribbon__painel{display:none;position:absolute;top:100%;inset-inline:0;z-index:var(--ui-z-docked-bar, 600);border-bottom:1px solid var(--ui-cor-borda, rgba(255, 255, 255, .12));box-shadow:var(--ui-sombra-lg, 0 8px 24px rgba(0, 0, 0, .35))}:host([recolhido]) .ui-ribbon--aberto .ui-ribbon__painel{display:block}:host([recolhido]) .ui-ribbon__aba--ativa:after{display:none}:host([compacto]) .ui-ribbon__grupos{min-height:0;padding-block:2px}:host([compacto]) .ui-ribbon__grupo-rotulo{display:none}:host([compacto]) .ui-ferr-btn--grande{min-width:44px}@media (max-width: 720px){.ui-ferr-btn--pequeno:has(.ui-ferr-btn__icone) .ui-ferr-btn__rotulo{display:none}.ui-ferr-btn--pequeno:has(.ui-ferr-btn__icone){min-width:28px;justify-content:center;padding:0 4px}}@media (pointer: coarse){.ui-ribbon__cabecalho{height:38px}.ui-ribbon__aba{height:36px}.ui-ribbon__aba--ativa,.ui-ribbon__aba--ativa:hover{height:38px}.ui-ferr-btn--pequeno{height:32px}.ui-ferr-btn--pequeno.ui-ferr-btn--so-icone{width:32px}.ui-ribbon__fixar{width:36px;height:32px}}@media (prefers-reduced-motion: reduce){.ui-ribbon__aba{transition:none}}@media (forced-colors: active){.ui-ribbon__aba--ativa:after,.ui-ribbon__aba--contextual:before{background:Highlight;forced-color-adjust:none}.ui-ribbon__aba--ativa,.ui-ribbon__aba--ativa:hover{box-shadow:none;border:1px solid CanvasText;border-bottom-color:Canvas}.ui-ribbon__aba:focus-visible,.ui-ribbon__fixar:focus-visible,.ui-ribbon__grupos .ui-ferr-btn:focus-visible{outline-color:Highlight}}', R = '.ui-ferr-btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:4px;box-sizing:border-box;padding:0;border:1px solid transparent;border-radius:var(--ui-raio-borda, 6px);background:transparent;color:var(--ui-cor-texto, #e1e1e6);font-family:var(--ui-fonte-base, "Inter", sans-serif);font-size:.75rem;line-height:1;cursor:pointer;-webkit-user-select:none;user-select:none;touch-action:manipulation;-webkit-tap-highlight-color:transparent;transition:background-color .12s ease,border-color .12s ease,color .12s ease}.ui-ferr-btn:hover:not(:disabled){background:var(--ui-cor-hover-menu, rgba(255, 255, 255, .08))}.ui-ferr-btn:active:not(:disabled){background:color-mix(in srgb,var(--ui-cor-primaria, #00E08A) 14%,transparent)}.ui-ferr-btn:focus-visible{outline:2px solid transparent;outline-offset:2px;box-shadow:0 0 0 2px var(--ui-cor-fundo, #0b0b0d),0 0 0 4px var(--ui-cor-primaria, #00E08A)}.ui-ferr-btn:disabled{opacity:.4;cursor:not-allowed}.ui-ferr-btn--ativo{background:color-mix(in srgb,var(--ui-cor-primaria, #00E08A) 18%,transparent);border-color:color-mix(in srgb,var(--ui-cor-primaria, #00E08A) 55%,transparent)}.ui-ferr-btn.ui-ferr-btn--ativo:hover:not(:disabled){background:color-mix(in srgb,var(--ui-cor-primaria, #00E08A) 28%,transparent)}.ui-ferr-btn.ui-ferr-btn--ativo:active:not(:disabled){background:color-mix(in srgb,var(--ui-cor-primaria, #00E08A) 36%,transparent)}.ui-ferr-btn.ui-ferr-btn--ativo:disabled{background:var(--ui-cor-hover-menu, rgba(255, 255, 255, .08));border-color:var(--ui-cor-borda, rgba(255, 255, 255, .12))}.ui-ferr-btn__icone{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}.ui-ferr-btn__rotulo{white-space:nowrap}.ui-ferr-btn__caret{width:0;height:0;flex-shrink:0;border-left:3px solid transparent;border-right:3px solid transparent;border-top:4px solid currentColor;opacity:.7}.ui-ferr-menu{position:fixed;z-index:var(--ui-z-popover, 1050);display:flex;flex-direction:column;gap:1px;min-width:180px;max-height:calc(100vh - 8px);overflow-y:auto;padding:4px;box-sizing:border-box;background:var(--ui-cor-fundo-menu, #18181c);border:1px solid var(--ui-cor-borda, rgba(255, 255, 255, .12));border-radius:var(--ui-raio-borda, 6px);box-shadow:var(--ui-sombra-lg, 0 8px 24px rgba(0, 0, 0, .35));font-family:var(--ui-fonte-base, "Inter", sans-serif);color:var(--ui-cor-texto, #e1e1e6)}.ui-ferr-menu__item{position:relative;display:flex;align-items:center;gap:8px;width:100%;height:28px;padding:0 8px;box-sizing:border-box;border:0;border-radius:var(--ui-raio-sm, 4px);background:transparent;color:inherit;font:inherit;font-size:.75rem;text-align:start;cursor:pointer}.ui-ferr-menu__item:hover:not(:disabled){background:var(--ui-cor-hover-menu, rgba(255, 255, 255, .08))}.ui-ferr-menu__item:focus-visible{outline:2px solid var(--ui-cor-primaria, #00E08A);outline-offset:-2px;background:var(--ui-cor-hover-menu, rgba(255, 255, 255, .08))}.ui-ferr-menu__item:disabled{opacity:.4;cursor:not-allowed}.ui-ferr-menu__item--ativo,.ui-ferr-menu__item[aria-checked=true]{color:var(--ui-cor-primaria, #00E08A);font-weight:600}.ui-ferr-menu__item--ativo:after,.ui-ferr-menu__item[aria-checked=true]:after{content:"";flex-shrink:0;width:4px;height:8px;margin-inline-start:4px;border:solid currentColor;border-width:0 2px 2px 0;transform:rotate(45deg) translateY(-1px)}.ui-ferr-menu__icone{display:inline-flex;width:16px;justify-content:center}.ui-ferr-menu__rotulo{flex:1}.ui-ferr-menu__atalho{margin-inline-start:16px;color:var(--ui-cor-texto-secundario, #888899);font-size:.6875rem;font-variant-numeric:tabular-nums}.ui-ferr-menu__sep{height:1px;margin:3px 2px;background:var(--ui-cor-borda, rgba(255, 255, 255, .12))}@media (pointer: coarse){.ui-ferr-menu__item{height:36px}}@media (prefers-reduced-motion: reduce){.ui-ferr-btn{transition:none}}@media (forced-colors: active){.ui-ferr-btn:focus-visible,.ui-ferr-menu__item:focus-visible{outline:2px solid Highlight}.ui-ferr-btn--ativo{background:Highlight;color:HighlightText;border-color:ButtonText;forced-color-adjust:none}.ui-ferr-btn:disabled,.ui-ferr-menu__item:disabled{opacity:1;color:GrayText}.ui-ferr-menu{border-color:CanvasText}.ui-ferr-menu__item:hover:not(:disabled){background:Highlight;color:HighlightText}}';
|
|
75
|
+
function B(a, o) {
|
|
76
|
+
if (!a) return null;
|
|
77
77
|
const t = document.createElement("ui-icone");
|
|
78
|
-
if (t.setAttribute("tamanho", String(
|
|
79
|
-
const e =
|
|
78
|
+
if (t.setAttribute("tamanho", String(o)), a.trimStart().startsWith("<")) {
|
|
79
|
+
const e = G(a);
|
|
80
80
|
if (!e) return null;
|
|
81
81
|
t.appendChild(e);
|
|
82
82
|
} else
|
|
83
|
-
t.setAttribute("nome",
|
|
83
|
+
t.setAttribute("nome", a);
|
|
84
84
|
return t;
|
|
85
85
|
}
|
|
86
86
|
const N = /* @__PURE__ */ new Set();
|
|
87
|
-
function I(
|
|
88
|
-
return
|
|
87
|
+
function I(a) {
|
|
88
|
+
return a.rotuloAcessivel ? a.rotuloAcessivel : a.rotulo ? a.rotulo : a.icone && !a.icone.trimStart().startsWith("<") ? a.icone : (N.has(a.id) || (N.add(a.id), console.warn(`[ui-barra-ferramentas] O item "${a.id}" não tem "rotulo" nem "rotuloAcessivel": o id será usado como nome acessível.`)), a.id);
|
|
89
89
|
}
|
|
90
|
-
function
|
|
91
|
-
const
|
|
92
|
-
return
|
|
90
|
+
function W(a) {
|
|
91
|
+
const o = I(a);
|
|
92
|
+
return a.atalho ? `${o} (${a.atalho})` : o;
|
|
93
93
|
}
|
|
94
|
-
function C(
|
|
94
|
+
function C(a, o) {
|
|
95
95
|
const t = /* @__PURE__ */ new Set(), e = /* @__PURE__ */ new Set();
|
|
96
|
-
|
|
96
|
+
a.forEach((i) => t.has(i) ? e.add(i) : t.add(i)), e.size && console.warn(`[ui-barra-ferramentas] ${o}: ids duplicados (${[...e].join(", ")}). Use ids únicos, senão atualizarItem() e os eventos podem atingir o item errado.`);
|
|
97
97
|
}
|
|
98
|
-
function L(
|
|
99
|
-
for (const t of
|
|
100
|
-
t.tipo !== "separador" && (
|
|
101
|
-
return
|
|
98
|
+
function L(a, o = []) {
|
|
99
|
+
for (const t of a)
|
|
100
|
+
t.tipo !== "separador" && (o.push(t.id), t.filhos && L(t.filhos, o));
|
|
101
|
+
return o;
|
|
102
102
|
}
|
|
103
|
-
function A(
|
|
104
|
-
|
|
105
|
-
const t =
|
|
106
|
-
e ?
|
|
103
|
+
function A(a, o) {
|
|
104
|
+
a.disabled = !!o.disabled;
|
|
105
|
+
const t = o.tipo, e = t === "toggle" || t === "ferramenta";
|
|
106
|
+
e ? a.setAttribute("aria-pressed", String(!!o.ativo)) : a.removeAttribute("aria-pressed"), a.classList.toggle("ui-ferr-btn--ativo", e && !!o.ativo);
|
|
107
107
|
}
|
|
108
|
-
function
|
|
109
|
-
var
|
|
108
|
+
function j(a, o, t) {
|
|
109
|
+
var n;
|
|
110
110
|
const e = document.createElement("button");
|
|
111
|
-
e.type = "button", e.className = `ui-ferr-btn ui-ferr-btn--${
|
|
112
|
-
const i =
|
|
111
|
+
e.type = "button", e.className = `ui-ferr-btn ui-ferr-btn--${o}`, e.dataset.id = a.id, e.tabIndex = -1, e.setAttribute("aria-label", I(a)), a.atalho && e.setAttribute("aria-keyshortcuts", a.atalho), e.title = W(a);
|
|
112
|
+
const i = B(a.icone, t);
|
|
113
113
|
if (i) {
|
|
114
|
-
const
|
|
115
|
-
|
|
114
|
+
const l = document.createElement("span");
|
|
115
|
+
l.className = "ui-ferr-btn__icone", l.appendChild(i), e.appendChild(l);
|
|
116
116
|
}
|
|
117
|
-
const r = !!((
|
|
118
|
-
if (
|
|
119
|
-
const
|
|
120
|
-
|
|
117
|
+
const r = !!((n = a.filhos) != null && n.length), s = o !== "paleta" && !a.somenteIcone && !!a.rotulo;
|
|
118
|
+
if (o !== "paleta" && a.somenteIcone && e.classList.add("ui-ferr-btn--so-icone"), s) {
|
|
119
|
+
const l = document.createElement("span");
|
|
120
|
+
l.className = "ui-ferr-btn__rotulo", l.textContent = a.rotulo, e.appendChild(l);
|
|
121
121
|
}
|
|
122
122
|
if (r) {
|
|
123
|
-
if (
|
|
123
|
+
if (o === "paleta")
|
|
124
124
|
e.classList.add("ui-ferr-btn--grupo");
|
|
125
125
|
else {
|
|
126
|
-
const
|
|
127
|
-
|
|
126
|
+
const l = document.createElement("span");
|
|
127
|
+
l.className = "ui-ferr-btn__caret", e.appendChild(l);
|
|
128
128
|
}
|
|
129
129
|
e.setAttribute("aria-haspopup", "menu"), e.setAttribute("aria-expanded", "false");
|
|
130
130
|
}
|
|
131
|
-
return A(e,
|
|
131
|
+
return A(e, a), e;
|
|
132
132
|
}
|
|
133
|
-
function
|
|
134
|
-
for (const t of
|
|
135
|
-
if (t.id ===
|
|
133
|
+
function m(a, o) {
|
|
134
|
+
for (const t of a) {
|
|
135
|
+
if (t.id === o) return t;
|
|
136
136
|
if (t.filhos) {
|
|
137
|
-
const e =
|
|
137
|
+
const e = m(t.filhos, o);
|
|
138
138
|
if (e) return e;
|
|
139
139
|
}
|
|
140
140
|
}
|
|
141
141
|
}
|
|
142
|
-
function T(
|
|
143
|
-
const
|
|
144
|
-
|
|
142
|
+
function T(a) {
|
|
143
|
+
const o = a.filter((t) => !t.disabled);
|
|
144
|
+
a.forEach((t) => t.tabIndex = -1), o.length && (o[0].tabIndex = 0);
|
|
145
145
|
}
|
|
146
|
-
function
|
|
147
|
-
const
|
|
148
|
-
|
|
149
|
-
t !==
|
|
150
|
-
}) : T(
|
|
146
|
+
function H(a) {
|
|
147
|
+
const o = a.find((t) => t.tabIndex === 0 && !t.disabled);
|
|
148
|
+
o ? a.forEach((t) => {
|
|
149
|
+
t !== o && (t.tabIndex = -1);
|
|
150
|
+
}) : T(a);
|
|
151
151
|
}
|
|
152
|
-
function
|
|
153
|
-
const t =
|
|
154
|
-
!t || t.disabled ||
|
|
152
|
+
function q(a, o) {
|
|
153
|
+
const t = a.find((e) => e === o || e.contains(o));
|
|
154
|
+
!t || t.disabled || a.forEach((e) => e.tabIndex = e === t ? 0 : -1);
|
|
155
155
|
}
|
|
156
|
-
function
|
|
157
|
-
const i =
|
|
158
|
-
if (r === 0 ||
|
|
159
|
-
let
|
|
160
|
-
if (t.includes(
|
|
161
|
-
else if (e.includes(
|
|
162
|
-
else if (
|
|
163
|
-
else if (
|
|
156
|
+
function S(a, o, t, e) {
|
|
157
|
+
const i = o.filter((l) => !l.disabled), r = i.length, s = i.findIndex((l) => l === a.target);
|
|
158
|
+
if (r === 0 || s < 0) return !1;
|
|
159
|
+
let n = s;
|
|
160
|
+
if (t.includes(a.key)) n = (s - 1 + r) % r;
|
|
161
|
+
else if (e.includes(a.key)) n = (s + 1) % r;
|
|
162
|
+
else if (a.key === "Home") n = 0;
|
|
163
|
+
else if (a.key === "End") n = r - 1;
|
|
164
164
|
else return !1;
|
|
165
|
-
return
|
|
165
|
+
return a.preventDefault(), o.forEach((l) => l.tabIndex = -1), i[n].tabIndex = 0, i[n].focus(), !0;
|
|
166
166
|
}
|
|
167
167
|
let J = 0;
|
|
168
|
-
function O(
|
|
169
|
-
var
|
|
170
|
-
const r = i.lado ?? "baixo",
|
|
171
|
-
|
|
172
|
-
const
|
|
173
|
-
let
|
|
174
|
-
const
|
|
175
|
-
var
|
|
176
|
-
|
|
168
|
+
function O(a, o, t, e, i = {}) {
|
|
169
|
+
var D;
|
|
170
|
+
const r = i.lado ?? "baixo", s = new P(), n = document.createElement("div");
|
|
171
|
+
n.className = "ui-ferr-menu", n.setAttribute("role", "menu"), n.id = `ui-ferr-menu-${++J}`, n.setAttribute("aria-label", o.getAttribute("aria-label") || "Menu"), o.setAttribute("aria-controls", n.id);
|
|
172
|
+
const l = [];
|
|
173
|
+
let d = !1;
|
|
174
|
+
const h = () => {
|
|
175
|
+
var c;
|
|
176
|
+
d || (d = !0, o.removeAttribute("aria-controls"), s.cleanup(), n.remove(), (c = i.onFechar) == null || c.call(i));
|
|
177
177
|
};
|
|
178
|
-
t.forEach((
|
|
179
|
-
if (
|
|
180
|
-
const
|
|
181
|
-
|
|
178
|
+
t.forEach((c) => {
|
|
179
|
+
if (c.tipo === "separador") {
|
|
180
|
+
const g = document.createElement("div");
|
|
181
|
+
g.className = "ui-ferr-menu__sep", g.setAttribute("role", "separator"), n.appendChild(g);
|
|
182
182
|
return;
|
|
183
183
|
}
|
|
184
184
|
const b = document.createElement("button");
|
|
185
185
|
b.type = "button", b.className = "ui-ferr-menu__item";
|
|
186
|
-
const y =
|
|
187
|
-
y === "toggle" ? (b.setAttribute("role", "menuitemcheckbox"), b.setAttribute("aria-checked", String(!!
|
|
188
|
-
const
|
|
189
|
-
|
|
190
|
-
const
|
|
191
|
-
|
|
186
|
+
const y = c.tipo ?? i.tipoPadrao ?? "botao";
|
|
187
|
+
y === "toggle" ? (b.setAttribute("role", "menuitemcheckbox"), b.setAttribute("aria-checked", String(!!c.ativo))) : y === "ferramenta" ? (b.setAttribute("role", "menuitemradio"), b.setAttribute("aria-checked", String(!!c.ativo))) : b.setAttribute("role", "menuitem"), b.dataset.id = c.id, b.disabled = !!c.disabled, c.atalho && b.setAttribute("aria-keyshortcuts", c.atalho), c.ativo && b.classList.add("ui-ferr-menu__item--ativo");
|
|
188
|
+
const x = document.createElement("span");
|
|
189
|
+
x.className = "ui-ferr-menu__icone";
|
|
190
|
+
const F = B(c.icone, 14);
|
|
191
|
+
F && x.appendChild(F), b.appendChild(x);
|
|
192
192
|
const k = document.createElement("span");
|
|
193
|
-
if (k.className = "ui-ferr-menu__rotulo", k.textContent = I(
|
|
194
|
-
const
|
|
195
|
-
|
|
193
|
+
if (k.className = "ui-ferr-menu__rotulo", k.textContent = I(c), b.appendChild(k), c.atalho) {
|
|
194
|
+
const g = document.createElement("span");
|
|
195
|
+
g.className = "ui-ferr-menu__atalho", g.textContent = c.atalho, b.appendChild(g);
|
|
196
196
|
}
|
|
197
|
-
b.addEventListener("click", (
|
|
198
|
-
|
|
199
|
-
}),
|
|
200
|
-
}),
|
|
201
|
-
const p =
|
|
202
|
-
let
|
|
203
|
-
f.width && w + f.width > window.innerWidth - 4 && (w = Math.max(4, window.innerWidth - f.width - 4)), w < 4 && (w = 4), f.height &&
|
|
204
|
-
const E = () =>
|
|
205
|
-
return
|
|
206
|
-
const b = E(), y = b.findIndex((
|
|
207
|
-
if (
|
|
208
|
-
|
|
209
|
-
else if (
|
|
210
|
-
|
|
211
|
-
else if (b.length && (
|
|
212
|
-
|
|
213
|
-
const
|
|
214
|
-
b[(y +
|
|
215
|
-
} else b.length &&
|
|
216
|
-
}),
|
|
217
|
-
const b =
|
|
218
|
-
!b.includes(
|
|
219
|
-
}, !0),
|
|
220
|
-
|
|
221
|
-
}, !0),
|
|
222
|
-
var
|
|
223
|
-
return (
|
|
197
|
+
b.addEventListener("click", (g) => {
|
|
198
|
+
g.stopPropagation(), h(), o.focus(), e(c);
|
|
199
|
+
}), l.push(b), n.appendChild(b);
|
|
200
|
+
}), a.appendChild(n);
|
|
201
|
+
const p = o.getBoundingClientRect(), _ = getComputedStyle(o).direction === "rtl", f = n.getBoundingClientRect();
|
|
202
|
+
let v = r === "direita" ? p.top : p.bottom + 2, w = r === "direita" ? _ ? p.left - f.width - 4 : p.right + 4 : _ ? p.right - f.width : p.left;
|
|
203
|
+
f.width && w + f.width > window.innerWidth - 4 && (w = Math.max(4, window.innerWidth - f.width - 4)), w < 4 && (w = 4), f.height && v + f.height > window.innerHeight - 4 && (v = Math.max(4, window.innerHeight - f.height - 4)), n.style.top = `${v}px`, n.style.left = `${w}px`;
|
|
204
|
+
const E = () => l.filter((c) => !c.disabled);
|
|
205
|
+
return s.add(n, "keydown", (c) => {
|
|
206
|
+
const b = E(), y = b.findIndex((x) => x === c.target);
|
|
207
|
+
if (c.key === "Escape")
|
|
208
|
+
c.preventDefault(), c.stopPropagation(), h(), o.focus();
|
|
209
|
+
else if (c.key === "Tab")
|
|
210
|
+
h();
|
|
211
|
+
else if (b.length && (c.key === "ArrowDown" || c.key === "ArrowUp")) {
|
|
212
|
+
c.preventDefault();
|
|
213
|
+
const x = c.key === "ArrowDown" ? 1 : -1;
|
|
214
|
+
b[(y + x + b.length) % b.length].focus();
|
|
215
|
+
} else b.length && c.key === "Home" ? (c.preventDefault(), b[0].focus()) : b.length && c.key === "End" && (c.preventDefault(), b[b.length - 1].focus());
|
|
216
|
+
}), s.add(document, "pointerdown", (c) => {
|
|
217
|
+
const b = c.composedPath();
|
|
218
|
+
!b.includes(n) && !b.includes(o) && h();
|
|
219
|
+
}, !0), s.add(window, "resize", h), s.add(window, "scroll", (c) => {
|
|
220
|
+
c.target instanceof Node && n.contains(c.target) || h();
|
|
221
|
+
}, !0), s.add(window, "blur", h), i.focar && ((D = E()[0]) == null || D.focus()), { elemento: n, ancora: o, fechar: h, focarPrimeiro: () => {
|
|
222
|
+
var c;
|
|
223
|
+
return (c = E()[0]) == null ? void 0 : c.focus();
|
|
224
224
|
} };
|
|
225
225
|
}
|
|
226
|
-
|
|
227
|
-
|
|
226
|
+
const Q = 3;
|
|
227
|
+
function Z({ aba: a, ativa: o, idBotao: t, idPainel: e }) {
|
|
228
|
+
const i = document.createElement("button");
|
|
229
|
+
return i.type = "button", i.className = "ui-ribbon__aba", i.setAttribute("role", "tab"), i.dataset.id = a.id, i.id = t, o && i.setAttribute("aria-controls", e), i.textContent = a.rotulo, i.tabIndex = o ? 0 : -1, i.setAttribute("aria-selected", String(o)), i.classList.toggle("ui-ribbon__aba--ativa", o), i.classList.toggle("ui-ribbon__aba--contextual", !!a.contextual), i;
|
|
230
|
+
}
|
|
231
|
+
function tt(a, o) {
|
|
232
|
+
const t = document.createElement("div");
|
|
233
|
+
t.className = "ui-ribbon__grupo", t.setAttribute("role", "group"), t.setAttribute("aria-label", a.rotulo), t.dataset.id = a.id;
|
|
234
|
+
const e = document.createElement("div");
|
|
235
|
+
e.className = "ui-ribbon__grupo-itens";
|
|
236
|
+
let i = null, r = 0;
|
|
237
|
+
const s = () => {
|
|
238
|
+
i && e.appendChild(i), i = null, r = 0;
|
|
239
|
+
};
|
|
240
|
+
a.itens.forEach((l) => {
|
|
241
|
+
if (l.tipo === "separador") {
|
|
242
|
+
s();
|
|
243
|
+
const d = document.createElement("div");
|
|
244
|
+
d.className = "ui-ribbon__separador", d.setAttribute("role", "separator"), e.appendChild(d);
|
|
245
|
+
} else l.tamanho === "grande" ? (s(), e.appendChild(o(l, "grande", 24))) : (i || (i = document.createElement("div"), i.className = "ui-ribbon__coluna"), i.appendChild(o(l, "pequeno", 16)), ++r === Q && s());
|
|
246
|
+
}), s();
|
|
247
|
+
const n = document.createElement("div");
|
|
248
|
+
return n.className = "ui-ribbon__grupo-rotulo", n.textContent = a.rotulo, t.appendChild(e), t.appendChild(n), t;
|
|
249
|
+
}
|
|
250
|
+
function et(a, o, t, e) {
|
|
251
|
+
if (o < 0 || t <= 0) return null;
|
|
252
|
+
const [i, r] = e ? ["ArrowLeft", "ArrowRight"] : ["ArrowRight", "ArrowLeft"];
|
|
253
|
+
return a === i ? { tipo: "ir-para", indice: (o + 1) % t } : a === r ? { tipo: "ir-para", indice: (o - 1 + t) % t } : a === "Home" ? { tipo: "ir-para", indice: 0 } : a === "End" ? { tipo: "ir-para", indice: t - 1 } : a === "ArrowDown" ? { tipo: "descer" } : null;
|
|
254
|
+
}
|
|
255
|
+
let it = 0;
|
|
256
|
+
class rt extends M {
|
|
228
257
|
constructor() {
|
|
229
258
|
super();
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
|
|
259
|
+
u(this, "rootElement");
|
|
260
|
+
u(this, "abasElement");
|
|
261
|
+
u(this, "gruposElement");
|
|
262
|
+
u(this, "painelElement");
|
|
263
|
+
u(this, "fixarElement");
|
|
264
|
+
u(this, "uid", `ui-ribbon-${++it}`);
|
|
265
|
+
u(this, "_abaPendente", "");
|
|
266
|
+
u(this, "_pronto", !1);
|
|
267
|
+
u(this, "_abas", []);
|
|
268
|
+
u(this, "_abaAtiva", "");
|
|
269
|
+
u(this, "menu", null);
|
|
270
|
+
u(this, "listeners", new P());
|
|
271
|
+
u(this, "handleFocusInGrupos", (t) => q(this.botoesPainel(), t.target));
|
|
243
272
|
/* ---------- Interação ---------- */
|
|
244
|
-
|
|
273
|
+
u(this, "handleClickAbas", (t) => {
|
|
245
274
|
const e = t.target.closest(".ui-ribbon__aba");
|
|
246
275
|
e != null && e.dataset.id && (this.selecionarAba(e.dataset.id), this.recolhido && this.rootElement.classList.toggle("ui-ribbon--aberto"));
|
|
247
276
|
});
|
|
248
|
-
|
|
277
|
+
u(this, "handleClickFixar", () => {
|
|
249
278
|
this.recolhido = !this.recolhido;
|
|
250
279
|
});
|
|
251
|
-
|
|
280
|
+
u(this, "handleDblClickAbas", (t) => {
|
|
252
281
|
t.target.closest(".ui-ribbon__aba") && (this.recolhido = !this.recolhido);
|
|
253
282
|
});
|
|
254
|
-
|
|
255
|
-
var
|
|
256
|
-
const e = Array.from(this.abasElement.querySelectorAll(".ui-ribbon__aba")), i = e.findIndex((
|
|
257
|
-
if (i
|
|
258
|
-
|
|
259
|
-
|
|
260
|
-
if (t.key === l) r = (i + 1) % e.length;
|
|
261
|
-
else if (t.key === a) r = (i - 1 + e.length) % e.length;
|
|
262
|
-
else if (t.key === "Home") r = 0;
|
|
263
|
-
else if (t.key === "End") r = e.length - 1;
|
|
264
|
-
else if (t.key === "ArrowDown") {
|
|
265
|
-
t.preventDefault(), this.recolhido && this.rootElement.classList.add("ui-ribbon--aberto"), (h = this.botoesPainel().find((p) => !p.disabled)) == null || h.focus();
|
|
283
|
+
u(this, "handleKeyDownAbas", (t) => {
|
|
284
|
+
var s, n;
|
|
285
|
+
const e = Array.from(this.abasElement.querySelectorAll(".ui-ribbon__aba")), i = et(t.key, e.findIndex((l) => l === t.target), e.length, this.rtl);
|
|
286
|
+
if (!i) return;
|
|
287
|
+
if (t.preventDefault(), i.tipo === "descer") {
|
|
288
|
+
this.recolhido && this.rootElement.classList.add("ui-ribbon--aberto"), (s = this.botoesPainel().find((l) => !l.disabled)) == null || s.focus();
|
|
266
289
|
return;
|
|
267
|
-
}
|
|
268
|
-
|
|
269
|
-
|
|
270
|
-
n && this.selecionarAba(n), (u = this.abasElement.querySelector(`.ui-ribbon__aba[data-id="${CSS.escape(n ?? "")}"]`)) == null || u.focus();
|
|
290
|
+
}
|
|
291
|
+
const r = e[i.indice].dataset.id;
|
|
292
|
+
r && this.selecionarAba(r), (n = this.abasElement.querySelector(`.ui-ribbon__aba[data-id="${CSS.escape(r ?? "")}"]`)) == null || n.focus();
|
|
271
293
|
});
|
|
272
|
-
|
|
294
|
+
u(this, "handleClickGrupos", (t) => {
|
|
273
295
|
const e = t.target.closest(".ui-ferr-btn");
|
|
274
296
|
e != null && e.dataset.id && this.acionar(e, t.detail === 0);
|
|
275
297
|
});
|
|
276
|
-
|
|
298
|
+
u(this, "handleKeyDownGrupos", (t) => {
|
|
277
299
|
var r;
|
|
278
300
|
const e = this.botoesPainel();
|
|
279
|
-
if (this.rtl ?
|
|
301
|
+
if (this.rtl ? S(t, e, ["ArrowRight"], ["ArrowLeft"]) : S(t, e, ["ArrowLeft"], ["ArrowRight"])) return;
|
|
280
302
|
const i = t.target instanceof HTMLButtonElement ? t.target : null;
|
|
281
303
|
(i == null ? void 0 : i.getAttribute("aria-haspopup")) === "menu" && t.key === "ArrowDown" && (t.preventDefault(), ((r = this.menu) == null ? void 0 : r.ancora) === i ? this.menu.focarPrimeiro() : this.acionar(i, !0));
|
|
282
304
|
});
|
|
283
|
-
|
|
305
|
+
u(this, "handleEscape", (t) => {
|
|
284
306
|
t.key === "Escape" && !this.menu && this.rootElement.classList.remove("ui-ribbon--aberto");
|
|
285
307
|
});
|
|
286
|
-
|
|
308
|
+
u(this, "handlePointerDownFora", (t) => {
|
|
287
309
|
!this.recolhido || !this.rootElement.classList.contains("ui-ribbon--aberto") || t.composedPath().includes(this) || this.rootElement.classList.remove("ui-ribbon--aberto");
|
|
288
310
|
});
|
|
289
311
|
const t = this.attachShadow({ mode: "open" });
|
|
290
312
|
t.innerHTML = `
|
|
291
|
-
<style>${
|
|
313
|
+
<style>${R}${Y}</style>
|
|
292
314
|
<div class="ui-ribbon">
|
|
293
315
|
<div class="ui-ribbon__cabecalho">
|
|
294
316
|
<div class="ui-ribbon__abas" role="tablist"></div>
|
|
@@ -372,27 +394,27 @@ class Z extends M {
|
|
|
372
394
|
));
|
|
373
395
|
}
|
|
374
396
|
definirAbaVisivel(t, e) {
|
|
375
|
-
const i = this._abas.find((
|
|
397
|
+
const i = this._abas.find((n) => n.id === t);
|
|
376
398
|
if (!i) return;
|
|
377
399
|
const r = this._abaAtiva;
|
|
378
400
|
i.oculta = !e, !e && r === t && (this._abaAtiva = ""), this.renderizar();
|
|
379
|
-
const
|
|
380
|
-
!e && r === t &&
|
|
381
|
-
new CustomEvent("ui-aba-change", { detail: { id:
|
|
401
|
+
const s = this._abas.find((n) => n.id === this._abaAtiva);
|
|
402
|
+
!e && r === t && s && this.dispatchEvent(
|
|
403
|
+
new CustomEvent("ui-aba-change", { detail: { id: s.id, aba: s }, bubbles: !0, composed: !0 })
|
|
382
404
|
);
|
|
383
405
|
}
|
|
384
406
|
/** Atualiza um item (estado ou aparência) sem precisar recriar as abas. */
|
|
385
407
|
atualizarItem(t, e) {
|
|
386
|
-
const i = this._abas.flatMap((
|
|
408
|
+
const i = this._abas.flatMap((d) => d.grupos.flatMap((h) => h.itens)), r = m(i, t);
|
|
387
409
|
if (!r) {
|
|
388
410
|
console.warn(`[ui-ribbon] atualizarItem("${t}"): item não encontrado.`);
|
|
389
411
|
return;
|
|
390
412
|
}
|
|
391
413
|
Object.assign(r, e);
|
|
392
|
-
const
|
|
393
|
-
if (!
|
|
394
|
-
const
|
|
395
|
-
|
|
414
|
+
const s = this._abas.find((d) => d.id === this._abaAtiva);
|
|
415
|
+
if (!s || !m(s.grupos.flatMap((d) => d.itens), t)) return;
|
|
416
|
+
const n = Object.keys(e).every((d) => d === "ativo" || d === "disabled"), l = this.gruposElement.querySelector(`.ui-ferr-btn[data-id="${CSS.escape(t)}"]`);
|
|
417
|
+
n ? l && (A(l, this.efetivo(r)), H(this.botoesPainel())) : this.comFoco(() => this.renderizarPainel());
|
|
396
418
|
}
|
|
397
419
|
efetivo(t) {
|
|
398
420
|
var e;
|
|
@@ -423,8 +445,12 @@ class Z extends M {
|
|
|
423
445
|
}
|
|
424
446
|
renderizarAbas() {
|
|
425
447
|
this.abasElement.innerHTML = "", this.abasVisiveis().forEach((t) => {
|
|
426
|
-
|
|
427
|
-
|
|
448
|
+
this.abasElement.appendChild(Z({
|
|
449
|
+
aba: t,
|
|
450
|
+
ativa: t.id === this._abaAtiva,
|
|
451
|
+
idBotao: this.idAba(t.id),
|
|
452
|
+
idPainel: this.painelElement.id
|
|
453
|
+
}));
|
|
428
454
|
});
|
|
429
455
|
}
|
|
430
456
|
idAba(t) {
|
|
@@ -437,29 +463,10 @@ class Z extends M {
|
|
|
437
463
|
this.painelElement.removeAttribute("aria-labelledby");
|
|
438
464
|
return;
|
|
439
465
|
}
|
|
440
|
-
this.painelElement.setAttribute("aria-labelledby", this.idAba(t.id)), t.grupos.forEach((e) => this.gruposElement.appendChild(this.
|
|
441
|
-
}
|
|
442
|
-
criarGrupo(t) {
|
|
443
|
-
const e = document.createElement("div");
|
|
444
|
-
e.className = "ui-ribbon__grupo", e.setAttribute("role", "group"), e.setAttribute("aria-label", t.rotulo), e.dataset.id = t.id;
|
|
445
|
-
const i = document.createElement("div");
|
|
446
|
-
i.className = "ui-ribbon__grupo-itens";
|
|
447
|
-
let r = null, l = 0;
|
|
448
|
-
const a = () => {
|
|
449
|
-
r && i.appendChild(r), r = null, l = 0;
|
|
450
|
-
};
|
|
451
|
-
t.itens.forEach((h) => {
|
|
452
|
-
if (h.tipo === "separador") {
|
|
453
|
-
a();
|
|
454
|
-
const u = document.createElement("div");
|
|
455
|
-
u.className = "ui-ribbon__separador", u.setAttribute("role", "separator"), i.appendChild(u);
|
|
456
|
-
} else h.tamanho === "grande" ? (a(), i.appendChild(this.criarBotao(h, "grande", 24))) : (r || (r = document.createElement("div"), r.className = "ui-ribbon__coluna"), r.appendChild(this.criarBotao(h, "pequeno", 16)), ++l === 3 && a());
|
|
457
|
-
}), a();
|
|
458
|
-
const n = document.createElement("div");
|
|
459
|
-
return n.className = "ui-ribbon__grupo-rotulo", n.textContent = t.rotulo, e.appendChild(i), e.appendChild(n), e;
|
|
466
|
+
this.painelElement.setAttribute("aria-labelledby", this.idAba(t.id)), t.grupos.forEach((e) => this.gruposElement.appendChild(tt(e, (i, r, s) => this.criarBotao(i, r, s)))), T(this.botoesPainel());
|
|
460
467
|
}
|
|
461
468
|
criarBotao(t, e, i) {
|
|
462
|
-
return
|
|
469
|
+
return j(this.efetivo(t), e, i);
|
|
463
470
|
}
|
|
464
471
|
botoesPainel() {
|
|
465
472
|
return Array.from(this.gruposElement.querySelectorAll(".ui-ferr-btn"));
|
|
@@ -468,34 +475,34 @@ class Z extends M {
|
|
|
468
475
|
return getComputedStyle(this).direction === "rtl";
|
|
469
476
|
}
|
|
470
477
|
acionar(t, e) {
|
|
471
|
-
var
|
|
472
|
-
const i = this._abas.find((
|
|
478
|
+
var s;
|
|
479
|
+
const i = this._abas.find((n) => n.id === this._abaAtiva), r = i && m(i.grupos.flatMap((n) => n.itens), t.dataset.id);
|
|
473
480
|
if (!(!r || r.disabled)) {
|
|
474
|
-
if ((
|
|
481
|
+
if ((s = r.filhos) != null && s.length) {
|
|
475
482
|
this.alternarMenu(t, r, e);
|
|
476
483
|
return;
|
|
477
484
|
}
|
|
478
485
|
if (r.tipo === "toggle") {
|
|
479
|
-
const
|
|
480
|
-
r.ativo = !
|
|
486
|
+
const n = r.ativo;
|
|
487
|
+
r.ativo = !n, A(t, r), this.emitir(r) || (r.ativo = n, A(t, r));
|
|
481
488
|
} else
|
|
482
489
|
this.emitir(r);
|
|
483
490
|
this.rootElement.classList.remove("ui-ribbon--aberto");
|
|
484
491
|
}
|
|
485
492
|
}
|
|
486
493
|
alternarMenu(t, e, i) {
|
|
487
|
-
var
|
|
488
|
-
const r = ((
|
|
494
|
+
var s;
|
|
495
|
+
const r = ((s = this.menu) == null ? void 0 : s.ancora) === t;
|
|
489
496
|
this.fecharMenu(), !r && (t.setAttribute("aria-expanded", "true"), this.menu = O(
|
|
490
497
|
this.shadowRoot,
|
|
491
498
|
t,
|
|
492
499
|
e.filhos,
|
|
493
|
-
(
|
|
494
|
-
if (
|
|
495
|
-
const
|
|
496
|
-
|
|
500
|
+
(n) => {
|
|
501
|
+
if (n.tipo === "toggle") {
|
|
502
|
+
const l = n.ativo;
|
|
503
|
+
n.ativo = !l, this.emitir(n, e) || (n.ativo = l);
|
|
497
504
|
} else
|
|
498
|
-
this.emitir(
|
|
505
|
+
this.emitir(n, e);
|
|
499
506
|
this.rootElement.classList.remove("ui-ribbon--aberto");
|
|
500
507
|
},
|
|
501
508
|
{
|
|
@@ -523,98 +530,121 @@ class Z extends M {
|
|
|
523
530
|
);
|
|
524
531
|
}
|
|
525
532
|
}
|
|
526
|
-
z("ui-ribbon",
|
|
527
|
-
const
|
|
528
|
-
class
|
|
533
|
+
z("ui-ribbon", rt);
|
|
534
|
+
const at = ':host{display:inline-flex;flex-direction:column;max-width:100%;max-height:100%;vertical-align:top;box-sizing:border-box;font-family:var(--ui-fonte-base, "Inter", sans-serif);color:var(--ui-cor-texto, #e1e1e6)}.ui-paleta{--ui-paleta-btn: 34px;--ui-paleta-padding: 4px;--ui-paleta-raio: var(--ui-paleta-raio-borda, 10px);--ui-paleta-btn-raio: var(--ui-paleta-raio-botao, max(2px, calc(var(--ui-paleta-raio) - var(--ui-paleta-padding))));display:flex;flex-direction:column;align-items:center;gap:2px;padding:var(--ui-paleta-padding);box-sizing:border-box;background:var(--ui-cor-superficie, #141417);border:1px solid var(--ui-cor-borda, rgba(255, 255, 255, .12));border-radius:var(--ui-paleta-raio);-webkit-user-select:none;user-select:none;min-width:0;min-height:0;max-width:100%;overflow:auto;scrollbar-width:thin}.ui-paleta--horizontal{flex-direction:row}.ui-paleta--sm{--ui-paleta-btn: 28px;--ui-paleta-raio: var(--ui-paleta-raio-borda, 8px)}.ui-paleta--lg{--ui-paleta-btn: 42px;--ui-paleta-raio: var(--ui-paleta-raio-borda, 12px)}.ui-paleta--cols-2{display:grid;grid-template-columns:repeat(2,var(--ui-paleta-btn));justify-content:center}.ui-paleta--cols-2 .ui-paleta__sep{grid-column:1 / -1}.ui-ferr-btn--grupo:after{content:"";position:absolute;inset-inline-end:3px;bottom:3px;width:0;height:0;border-inline-start:6px solid transparent;border-bottom:6px solid currentColor;opacity:.8;pointer-events:none;transition:opacity .12s ease,transform .12s ease}.ui-ferr-btn--grupo:hover:after,.ui-ferr-btn--grupo:focus-visible:after,.ui-ferr-btn--grupo[aria-expanded=true]:after{opacity:1;transform:scale(1.2);transform-origin:bottom right}.ui-paleta__sep{grid-column:1 / -1}.ui-paleta .ui-ferr-btn{width:var(--ui-paleta-btn);height:var(--ui-paleta-btn);border-radius:var(--ui-paleta-btn-raio)}.ui-paleta .ui-ferr-btn.ui-ferr-btn--ativo,.ui-paleta .ui-ferr-btn.ui-ferr-btn--ativo:hover:not(:disabled),.ui-paleta .ui-ferr-btn.ui-ferr-btn--ativo:active:not(:disabled){background:var(--ui-cor-primaria, #00E08A);border-color:transparent;color:var(--ui-cor-texto-sobre-primaria, #000000)}.ui-paleta .ui-ferr-btn.ui-ferr-btn--ativo:hover:not(:disabled){background:color-mix(in srgb,var(--ui-cor-primaria, #00E08A) 86%,#fff)}.ui-paleta .ui-ferr-btn.ui-ferr-btn--ativo:active:not(:disabled){background:color-mix(in srgb,var(--ui-cor-primaria, #00E08A) 80%,#000)}.ui-paleta .ui-ferr-btn.ui-ferr-btn--ativo:disabled{background:var(--ui-cor-hover-menu, rgba(255, 255, 255, .08));color:inherit}.ui-ferr-btn--grupo:after{content:"";position:absolute;right:3px;bottom:3px;width:0;height:0;border-left:5px solid transparent;border-bottom:5px solid currentColor;opacity:.7;pointer-events:none}.ui-paleta__sep{width:70%;height:1px;margin:3px 0;background:var(--ui-cor-borda, rgba(255, 255, 255, .12))}.ui-paleta--horizontal .ui-paleta__sep{width:1px;height:70%;margin:0 3px}@media (pointer: coarse){.ui-paleta{--ui-paleta-btn: 40px}.ui-paleta--sm{--ui-paleta-btn: 36px}.ui-paleta--lg{--ui-paleta-btn: 48px}}@media (prefers-reduced-motion: reduce){.ui-ferr-btn--grupo:after{transition:none}}@media (forced-colors: active){.ui-paleta{border-color:CanvasText}.ui-paleta .ui-ferr-btn.ui-ferr-btn--ativo,.ui-paleta .ui-ferr-btn.ui-ferr-btn--ativo:hover:not(:disabled),.ui-paleta .ui-ferr-btn.ui-ferr-btn--ativo:active:not(:disabled){background:Highlight;color:HighlightText;border-color:ButtonText;forced-color-adjust:none}.ui-paleta__sep{background:CanvasText}}', ot = 380, nt = 8, st = 50;
|
|
535
|
+
class lt {
|
|
536
|
+
constructor() {
|
|
537
|
+
u(this, "timer");
|
|
538
|
+
u(this, "timerSupressao");
|
|
539
|
+
u(this, "inicio", null);
|
|
540
|
+
u(this, "suprimir", !1);
|
|
541
|
+
}
|
|
542
|
+
/** Começa a contar; `aoDisparar` roda se o ponteiro ficar parado até `TEMPO_PRESSAO_LONGA_MS`. */
|
|
543
|
+
iniciar(o, t, e) {
|
|
544
|
+
this.cancelar(), window.clearTimeout(this.timerSupressao), this.inicio = { x: o, y: t }, this.timer = window.setTimeout(() => {
|
|
545
|
+
this.suprimir = !0, e();
|
|
546
|
+
}, ot);
|
|
547
|
+
}
|
|
548
|
+
/** Arrastar/rolar com o dedo cancela o clique longo. */
|
|
549
|
+
mover(o, t) {
|
|
550
|
+
this.timer === void 0 || !this.inicio || Math.hypot(o - this.inicio.x, t - this.inicio.y) > nt && this.cancelar();
|
|
551
|
+
}
|
|
552
|
+
/** Fim do gesto: cancela a contagem e, se o flyout abriu, descarta a supressão logo após o `click` residual. */
|
|
553
|
+
fim() {
|
|
554
|
+
this.cancelar(), this.suprimir && (window.clearTimeout(this.timerSupressao), this.timerSupressao = window.setTimeout(() => {
|
|
555
|
+
this.suprimir = !1;
|
|
556
|
+
}, st));
|
|
557
|
+
}
|
|
558
|
+
cancelar() {
|
|
559
|
+
this.timer !== void 0 && (window.clearTimeout(this.timer), this.timer = void 0), this.inicio = null;
|
|
560
|
+
}
|
|
561
|
+
/** `true` (uma única vez) se o próximo `click` deve ser ignorado por ser o resíduo de uma pressão longa. */
|
|
562
|
+
consumirSupressao() {
|
|
563
|
+
return this.suprimir ? (this.suprimir = !1, window.clearTimeout(this.timerSupressao), !0) : !1;
|
|
564
|
+
}
|
|
565
|
+
destruir() {
|
|
566
|
+
this.cancelar(), window.clearTimeout(this.timerSupressao), this.suprimir = !1;
|
|
567
|
+
}
|
|
568
|
+
}
|
|
569
|
+
const ut = /* @__PURE__ */ new Set(["textbox", "searchbox", "combobox", "spinbutton"]);
|
|
570
|
+
function ct(a) {
|
|
571
|
+
const o = a[0];
|
|
572
|
+
return o && (/^(INPUT|TEXTAREA|SELECT)$/.test(o.tagName) || o.isContentEditable) ? !0 : a.some((t) => {
|
|
573
|
+
var r, s;
|
|
574
|
+
const e = t, i = (r = e.getAttribute) == null ? void 0 : r.call(e, "role");
|
|
575
|
+
return ((s = e.getAttribute) == null ? void 0 : s.call(e, "aria-modal")) === "true" || !!i && ut.has(i);
|
|
576
|
+
});
|
|
577
|
+
}
|
|
578
|
+
function dt(a, o, t, e) {
|
|
579
|
+
const i = (a || "").toUpperCase();
|
|
580
|
+
if (i.length !== 1) return null;
|
|
581
|
+
const r = o.filter((l) => {
|
|
582
|
+
var d;
|
|
583
|
+
return !l.disabled && ((d = l.atalho) == null ? void 0 : d.toUpperCase()) === i;
|
|
584
|
+
});
|
|
585
|
+
if (r.length === 0) return null;
|
|
586
|
+
let s = r[0];
|
|
587
|
+
if (r.length > 1) {
|
|
588
|
+
const l = r.findIndex((d) => d.id === e);
|
|
589
|
+
s = r[(l + 1) % r.length];
|
|
590
|
+
}
|
|
591
|
+
const n = t.find((l) => {
|
|
592
|
+
var d;
|
|
593
|
+
return (d = l.filhos) == null ? void 0 : d.some((h) => h.id === s.id);
|
|
594
|
+
});
|
|
595
|
+
return { alvo: s, pai: n };
|
|
596
|
+
}
|
|
597
|
+
const ht = { sm: 16, md: 18, lg: 22 };
|
|
598
|
+
class bt extends M {
|
|
529
599
|
constructor() {
|
|
530
600
|
super();
|
|
531
|
-
|
|
532
|
-
|
|
533
|
-
|
|
534
|
-
|
|
535
|
-
|
|
601
|
+
u(this, "rootElement");
|
|
602
|
+
u(this, "_ferramentas", []);
|
|
603
|
+
u(this, "_ativo", "");
|
|
604
|
+
u(this, "_pendente", "");
|
|
605
|
+
u(this, "visiveis", /* @__PURE__ */ new Map());
|
|
536
606
|
// id do grupo → id do filho exibido
|
|
537
|
-
|
|
538
|
-
|
|
539
|
-
|
|
540
|
-
|
|
541
|
-
|
|
542
|
-
|
|
543
|
-
c(this, "handleClick", (t) => {
|
|
544
|
-
if (this.suprimirClique) {
|
|
545
|
-
this.suprimirClique = !1, window.clearTimeout(this.timerSupressao);
|
|
546
|
-
return;
|
|
547
|
-
}
|
|
548
|
-
const e = t.target.closest(".ui-ferr-btn"), i = e != null && e.dataset.id ? g(this._ferramentas, e.dataset.id) : void 0;
|
|
607
|
+
u(this, "menu", null);
|
|
608
|
+
u(this, "pressao", new lt());
|
|
609
|
+
u(this, "listeners", new P());
|
|
610
|
+
u(this, "handleClick", (t) => {
|
|
611
|
+
if (this.pressao.consumirSupressao()) return;
|
|
612
|
+
const e = t.target.closest(".ui-ferr-btn"), i = e != null && e.dataset.id ? m(this._ferramentas, e.dataset.id) : void 0;
|
|
549
613
|
if (!e || !i) return;
|
|
550
|
-
const r = e.dataset.grupo ?
|
|
614
|
+
const r = e.dataset.grupo ? m(this._ferramentas, e.dataset.grupo) : void 0;
|
|
551
615
|
this.acionar(i, r);
|
|
552
616
|
});
|
|
553
|
-
|
|
554
|
-
|
|
617
|
+
u(this, "handleFocusIn", (t) => q(this.botoes(), t.target));
|
|
618
|
+
u(this, "handlePointerDown", (t) => {
|
|
555
619
|
const e = t;
|
|
556
620
|
if (e.pointerType === "mouse" && e.button !== 0) return;
|
|
557
621
|
const i = t.target.closest(".ui-ferr-btn--grupo");
|
|
558
|
-
!i || i.disabled ||
|
|
559
|
-
this.suprimirClique = !0, this.abrirFlyout(i, !1);
|
|
560
|
-
}, et));
|
|
561
|
-
});
|
|
562
|
-
/** Arrastar/rolar com o dedo cancela o clique longo. */
|
|
563
|
-
c(this, "handlePointerMove", (t) => {
|
|
564
|
-
if (this.timerPressao === void 0 || !this.inicioPressao) return;
|
|
565
|
-
const e = t, i = (e.clientX ?? 0) - this.inicioPressao.x, r = (e.clientY ?? 0) - this.inicioPressao.y;
|
|
566
|
-
Math.hypot(i, r) > it && this.cancelarPressao();
|
|
622
|
+
!i || i.disabled || this.pressao.iniciar(e.clientX ?? 0, e.clientY ?? 0, () => this.abrirFlyout(i, !1));
|
|
567
623
|
});
|
|
568
|
-
|
|
569
|
-
|
|
570
|
-
this.
|
|
571
|
-
this.suprimirClique = !1;
|
|
572
|
-
}, rt));
|
|
573
|
-
});
|
|
574
|
-
c(this, "cancelarPressao", () => {
|
|
575
|
-
this.timerPressao !== void 0 && (window.clearTimeout(this.timerPressao), this.timerPressao = void 0), this.inicioPressao = null;
|
|
624
|
+
u(this, "handlePointerMove", (t) => {
|
|
625
|
+
const e = t;
|
|
626
|
+
this.pressao.mover(e.clientX ?? 0, e.clientY ?? 0);
|
|
576
627
|
});
|
|
577
|
-
|
|
628
|
+
u(this, "handlePointerFim", () => this.pressao.fim());
|
|
629
|
+
u(this, "handleContextMenu", (t) => {
|
|
578
630
|
const e = t.target.closest(".ui-ferr-btn--grupo");
|
|
579
|
-
e && (t.preventDefault(), this.
|
|
631
|
+
e && (t.preventDefault(), this.pressao.cancelar(), this.abrirFlyout(e, !1));
|
|
580
632
|
});
|
|
581
|
-
|
|
582
|
-
var
|
|
583
|
-
const e = this.getAttribute("orientacao") === "horizontal", i = getComputedStyle(this).direction === "rtl", r = e ? [i ? "ArrowRight" : "ArrowLeft"] : ["ArrowUp"],
|
|
584
|
-
if (
|
|
585
|
-
const
|
|
586
|
-
|
|
633
|
+
u(this, "handleKeyDown", (t) => {
|
|
634
|
+
var d;
|
|
635
|
+
const e = this.getAttribute("orientacao") === "horizontal", i = getComputedStyle(this).direction === "rtl", r = e ? [i ? "ArrowRight" : "ArrowLeft"] : ["ArrowUp"], s = e ? [i ? "ArrowLeft" : "ArrowRight"] : ["ArrowDown"];
|
|
636
|
+
if (S(t, this.botoes(), r, s)) return;
|
|
637
|
+
const n = e ? "ArrowDown" : i ? "ArrowLeft" : "ArrowRight", l = t.target instanceof HTMLButtonElement ? t.target : null;
|
|
638
|
+
l != null && l.dataset.grupo && t.key === n && (t.preventDefault(), ((d = this.menu) == null ? void 0 : d.ancora) === l ? this.menu.focarPrimeiro() : this.abrirFlyout(l, !0));
|
|
587
639
|
});
|
|
588
|
-
|
|
589
|
-
if (!this.hasAttribute("atalhos") || t.ctrlKey || t.metaKey || t.altKey || t.defaultPrevented) return;
|
|
590
|
-
const e = t.
|
|
591
|
-
|
|
592
|
-
var m, f;
|
|
593
|
-
const p = (m = u.getAttribute) == null ? void 0 : m.call(u, "role");
|
|
594
|
-
return ((f = u.getAttribute) == null ? void 0 : f.call(u, "aria-modal")) === "true" || p === "textbox" || p === "searchbox" || p === "combobox" || p === "spinbutton";
|
|
595
|
-
})) return;
|
|
596
|
-
const l = (t.key || "").toUpperCase();
|
|
597
|
-
if (l.length !== 1) return;
|
|
598
|
-
const a = this.todasFerramentas().filter((u) => {
|
|
599
|
-
var p;
|
|
600
|
-
return !u.disabled && ((p = u.atalho) == null ? void 0 : p.toUpperCase()) === l;
|
|
601
|
-
});
|
|
602
|
-
if (!a.length) return;
|
|
603
|
-
t.preventDefault();
|
|
604
|
-
let n = a[0];
|
|
605
|
-
if (a.length > 1) {
|
|
606
|
-
const u = a.findIndex((p) => p.id === this._ativo);
|
|
607
|
-
n = a[(u + 1) % a.length];
|
|
608
|
-
}
|
|
609
|
-
const h = this._ferramentas.find((u) => {
|
|
610
|
-
var p;
|
|
611
|
-
return (p = u.filhos) == null ? void 0 : p.some((m) => m.id === n.id);
|
|
612
|
-
});
|
|
613
|
-
this.acionar(n, h);
|
|
640
|
+
u(this, "handleAtalho", (t) => {
|
|
641
|
+
if (!this.hasAttribute("atalhos") || t.ctrlKey || t.metaKey || t.altKey || t.defaultPrevented || ct(t.composedPath())) return;
|
|
642
|
+
const e = dt(t.key, this.todasFerramentas(), this._ferramentas, this._ativo);
|
|
643
|
+
e && (t.preventDefault(), this.acionar(e.alvo, e.pai));
|
|
614
644
|
});
|
|
615
645
|
const t = this.attachShadow({ mode: "open" });
|
|
616
646
|
t.innerHTML = `
|
|
617
|
-
<style>${
|
|
647
|
+
<style>${R}${at}</style>
|
|
618
648
|
<div class="ui-paleta ui-paleta--vertical" role="toolbar" aria-orientation="vertical" aria-label="Ferramentas"></div>
|
|
619
649
|
`, this.rootElement = t.querySelector(".ui-paleta");
|
|
620
650
|
}
|
|
@@ -627,7 +657,7 @@ class ot extends M {
|
|
|
627
657
|
t && !this._ativo && (this._pendente = t), this.aplicarPendente(), this.renderizar();
|
|
628
658
|
}
|
|
629
659
|
disconnectedCallback() {
|
|
630
|
-
this.
|
|
660
|
+
this.pressao.destruir(), this.fecharMenu(), this.listeners.cleanup();
|
|
631
661
|
}
|
|
632
662
|
attributeChangedCallback(t, e, i) {
|
|
633
663
|
if (e !== i)
|
|
@@ -684,7 +714,7 @@ class ot extends M {
|
|
|
684
714
|
this.limpar(e);
|
|
685
715
|
return;
|
|
686
716
|
}
|
|
687
|
-
const i =
|
|
717
|
+
const i = m(this._ferramentas, t);
|
|
688
718
|
if (!i) {
|
|
689
719
|
this._ferramentas.length ? console.warn(`[ui-paleta-ferramentas] ativar("${t}"): ferramenta não encontrada.`) : this._pendente = t;
|
|
690
720
|
return;
|
|
@@ -703,24 +733,24 @@ class ot extends M {
|
|
|
703
733
|
!e && !this._pendente || (this._ativo = "", this._pendente = "", this.removeAttribute("valor"), this.removeAttribute("value"), this.renderizar(), t && e && this.emitirMudanca("", null, e));
|
|
704
734
|
}
|
|
705
735
|
atualizarItem(t, e) {
|
|
706
|
-
var
|
|
707
|
-
const i =
|
|
736
|
+
var n;
|
|
737
|
+
const i = m(this._ferramentas, t);
|
|
708
738
|
if (!i) {
|
|
709
739
|
console.warn(`[ui-paleta-ferramentas] atualizarItem("${t}"): item não encontrado.`);
|
|
710
740
|
return;
|
|
711
741
|
}
|
|
712
742
|
Object.assign(i, e);
|
|
713
|
-
const r = Object.keys(e).every((
|
|
714
|
-
var
|
|
715
|
-
return (
|
|
743
|
+
const r = Object.keys(e).every((l) => l === "ativo" || l === "disabled"), s = this._ferramentas.find((l) => {
|
|
744
|
+
var d;
|
|
745
|
+
return (d = l.filhos) == null ? void 0 : d.some((h) => h.id === t);
|
|
716
746
|
});
|
|
717
|
-
if (r && !(
|
|
718
|
-
const
|
|
719
|
-
if (
|
|
720
|
-
A(
|
|
747
|
+
if (r && !(s && "disabled" in e)) {
|
|
748
|
+
const l = this.botoes().find((d) => d.dataset.id === t || d.dataset.grupo === t);
|
|
749
|
+
if (l) {
|
|
750
|
+
A(l, this.itemParaBotao(s ?? i)), H(this.botoes());
|
|
721
751
|
return;
|
|
722
752
|
}
|
|
723
|
-
if (
|
|
753
|
+
if (s || (n = i.filhos) != null && n.length) return;
|
|
724
754
|
}
|
|
725
755
|
this.renderizar();
|
|
726
756
|
}
|
|
@@ -731,14 +761,14 @@ class ot extends M {
|
|
|
731
761
|
}
|
|
732
762
|
aplicarPendente() {
|
|
733
763
|
if (!this._pendente) return;
|
|
734
|
-
const t =
|
|
764
|
+
const t = m(this._ferramentas, this._pendente);
|
|
735
765
|
t && !t.disabled && (t.tipo ?? "ferramenta") === "ferramenta" ? (this.definirAtivoInterno(this._pendente), this._pendente = "") : this._ferramentas.length && (console.warn(`[ui-paleta-ferramentas] valor="${this._pendente}" não é uma ferramenta ativável em "ferramentas".`), this._pendente = "");
|
|
736
766
|
}
|
|
737
767
|
definirAtivoInterno(t) {
|
|
738
768
|
this._ativo = t;
|
|
739
769
|
const e = this._ferramentas.find((i) => {
|
|
740
770
|
var r;
|
|
741
|
-
return (r = i.filhos) == null ? void 0 : r.some((
|
|
771
|
+
return (r = i.filhos) == null ? void 0 : r.some((s) => s.id === t);
|
|
742
772
|
});
|
|
743
773
|
e && this.visiveis.set(e.id, t);
|
|
744
774
|
}
|
|
@@ -748,10 +778,10 @@ class ot extends M {
|
|
|
748
778
|
}
|
|
749
779
|
/** Filho exibido de um grupo: o último usado, pulando separadores e itens desabilitados. */
|
|
750
780
|
itemExibido(t) {
|
|
751
|
-
var
|
|
752
|
-
if (!((
|
|
753
|
-
const e = (
|
|
754
|
-
return (r && e(r) ? r : void 0) ?? t.filhos.find(e) ?? t.filhos.find((
|
|
781
|
+
var s;
|
|
782
|
+
if (!((s = t.filhos) != null && s.length)) return t;
|
|
783
|
+
const e = (n) => n.tipo !== "separador" && !n.disabled, i = this.visiveis.get(t.id), r = t.filhos.find((n) => n.id === i);
|
|
784
|
+
return (r && e(r) ? r : void 0) ?? t.filhos.find(e) ?? t.filhos.find((n) => n.tipo !== "separador") ?? t.filhos[0];
|
|
755
785
|
}
|
|
756
786
|
itemParaBotao(t) {
|
|
757
787
|
const e = this.itemExibido(t), i = e.tipo ?? "ferramenta";
|
|
@@ -770,26 +800,26 @@ class ot extends M {
|
|
|
770
800
|
}
|
|
771
801
|
/* ---------- Renderização ---------- */
|
|
772
802
|
renderizar() {
|
|
773
|
-
var
|
|
774
|
-
const t = (
|
|
803
|
+
var d;
|
|
804
|
+
const t = (d = this.shadowRoot) == null ? void 0 : d.activeElement, e = t && t.classList.contains("ui-ferr-btn") ? { id: t.dataset.id ?? "", grupo: t.dataset.grupo ?? "" } : null;
|
|
775
805
|
this.fecharMenu();
|
|
776
|
-
const i = this.orientacao, r = this.tamanho,
|
|
777
|
-
this.rootElement.className = `ui-paleta ui-paleta--${i} ui-paleta--${r}`,
|
|
778
|
-
const
|
|
779
|
-
this._ferramentas.forEach((
|
|
806
|
+
const i = this.orientacao, r = this.tamanho, s = this.colunas;
|
|
807
|
+
this.rootElement.className = `ui-paleta ui-paleta--${i} ui-paleta--${r}`, s === 2 && i === "vertical" && this.rootElement.classList.add("ui-paleta--cols-2"), this.rootElement.setAttribute("aria-orientation", i), this.rootElement.setAttribute("aria-label", this.getAttribute("aria-label") || "Ferramentas"), this.rootElement.innerHTML = "";
|
|
808
|
+
const n = ht[r] ?? 18;
|
|
809
|
+
this._ferramentas.forEach((h) => {
|
|
780
810
|
var f;
|
|
781
|
-
if (
|
|
782
|
-
const
|
|
783
|
-
|
|
811
|
+
if (h.tipo === "separador") {
|
|
812
|
+
const v = document.createElement("div");
|
|
813
|
+
v.className = "ui-paleta__sep", v.setAttribute("role", "separator"), this.rootElement.appendChild(v);
|
|
784
814
|
return;
|
|
785
815
|
}
|
|
786
|
-
const p = this.itemExibido(
|
|
787
|
-
|
|
816
|
+
const p = this.itemExibido(h), _ = j(this.itemParaBotao(h), "paleta", n);
|
|
817
|
+
_.dataset.id = p.id, (f = h.filhos) != null && f.length && (_.dataset.grupo = h.id), this.rootElement.appendChild(_);
|
|
788
818
|
}), T(this.botoes());
|
|
789
|
-
const
|
|
790
|
-
if (
|
|
791
|
-
const
|
|
792
|
-
|
|
819
|
+
const l = this.botoes().find((h) => h.dataset.id === this._ativo && !h.disabled);
|
|
820
|
+
if (l && (this.botoes().forEach((h) => h.tabIndex = -1), l.tabIndex = 0), e) {
|
|
821
|
+
const h = this.botoes().find((p) => e.grupo ? p.dataset.grupo === e.grupo : p.dataset.id === e.id);
|
|
822
|
+
h && !h.disabled && h.focus();
|
|
793
823
|
}
|
|
794
824
|
}
|
|
795
825
|
botoes() {
|
|
@@ -803,7 +833,7 @@ class ot extends M {
|
|
|
803
833
|
/* ---------- Interação ---------- */
|
|
804
834
|
acionar(t, e) {
|
|
805
835
|
if (t.disabled) return;
|
|
806
|
-
const i = t.tipo ?? "ferramenta", r = this._ativo,
|
|
836
|
+
const i = t.tipo ?? "ferramenta", r = this._ativo, s = t.ativo;
|
|
807
837
|
i === "ferramenta" ? this.ativar(t.id) : i === "toggle" && (t.ativo = !t.ativo, this.atualizarBotaoDe(t, e)), this.dispatchEvent(
|
|
808
838
|
new CustomEvent("ui-ferramenta", {
|
|
809
839
|
detail: {
|
|
@@ -817,25 +847,25 @@ class ot extends M {
|
|
|
817
847
|
composed: !0,
|
|
818
848
|
cancelable: !0
|
|
819
849
|
})
|
|
820
|
-
) || (i === "ferramenta" && r !== t.id ? r ? this.ativar(r) : this.limpar() : i === "toggle" && (t.ativo =
|
|
850
|
+
) || (i === "ferramenta" && r !== t.id ? r ? this.ativar(r) : this.limpar() : i === "toggle" && (t.ativo = s, this.atualizarBotaoDe(t, e)));
|
|
821
851
|
}
|
|
822
852
|
abrirFlyout(t, e) {
|
|
823
|
-
var
|
|
824
|
-
const i = t.dataset.grupo ?
|
|
825
|
-
if (!((
|
|
853
|
+
var s;
|
|
854
|
+
const i = t.dataset.grupo ? m(this._ferramentas, t.dataset.grupo) : void 0;
|
|
855
|
+
if (!((s = i == null ? void 0 : i.filhos) != null && s.length)) return;
|
|
826
856
|
this.fecharMenu();
|
|
827
|
-
const r = i.filhos.map((
|
|
828
|
-
...
|
|
829
|
-
ativo: (
|
|
857
|
+
const r = i.filhos.map((n) => ({
|
|
858
|
+
...n,
|
|
859
|
+
ativo: (n.tipo ?? "ferramenta") === "ferramenta" ? n.id === this._ativo : n.ativo
|
|
830
860
|
}));
|
|
831
861
|
t.setAttribute("aria-expanded", "true"), this.menu = O(
|
|
832
862
|
this.shadowRoot,
|
|
833
863
|
t,
|
|
834
864
|
r,
|
|
835
|
-
(
|
|
836
|
-
var
|
|
837
|
-
const
|
|
838
|
-
|
|
865
|
+
(n) => {
|
|
866
|
+
var d;
|
|
867
|
+
const l = m(i.filhos, n.id);
|
|
868
|
+
l && (this.acionar(l, i), (d = this.botoes().find((h) => h.dataset.grupo === i.id)) == null || d.focus());
|
|
839
869
|
},
|
|
840
870
|
{
|
|
841
871
|
lado: this.getAttribute("orientacao") === "horizontal" ? "baixo" : "direita",
|
|
@@ -852,9 +882,9 @@ class ot extends M {
|
|
|
852
882
|
(t = this.menu) == null || t.fechar(), this.menu = null;
|
|
853
883
|
}
|
|
854
884
|
}
|
|
855
|
-
z("ui-paleta-ferramentas",
|
|
885
|
+
z("ui-paleta-ferramentas", bt);
|
|
856
886
|
export {
|
|
857
|
-
|
|
858
|
-
|
|
859
|
-
|
|
887
|
+
X as U,
|
|
888
|
+
bt as a,
|
|
889
|
+
rt as b
|
|
860
890
|
};
|