@thibezer/ui-components-kit 2.17.1 → 2.17.2
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 +8 -0
- package/dist/camadas.cjs +51 -52
- package/dist/camadas.js +136 -135
- package/dist/custom-elements.json +4090 -4090
- package/package.json +1 -1
- package/dist/form-validacao-BIOXxt-1.js +0 -140
- package/dist/form-validacao-ytRYSF3E.cjs +0 -1
- package/dist/gerencigeo-canvas/layer_defaults.d.ts +0 -3
- package/dist/gerencigeo-canvas/layer_instance_ops.d.ts +0 -6
- package/dist/gerencigeo-canvas/layer_state_ops.d.ts +0 -6
- package/dist/leaflet-DcO7uRC-.cjs +0 -1
- package/dist/leaflet-PPDKB6Dd.js +0 -69
- package/dist/motor-BCWqlv3e.cjs +0 -1
- package/dist/motor-CXjQjVba.js +0 -1386
- package/dist/svg-seguro-BsbNQqpd.js +0 -50
- package/dist/svg-seguro-C76iLlAZ.cjs +0 -1
- package/dist/ui-badge-1UU8vT-b.js +0 -198
- package/dist/ui-badge-B5J_c5P5.js +0 -197
- package/dist/ui-badge-BxT-sDmV.cjs +0 -28
- package/dist/ui-badge-C0eKBI8E.js +0 -183
- package/dist/ui-badge-CKKKPdt8.cjs +0 -28
- package/dist/ui-badge-DC4y6Dik.cjs +0 -28
- package/dist/ui-botao-BOOnP8ds.cjs +0 -12
- package/dist/ui-botao-D24oXySA.cjs +0 -12
- package/dist/ui-botao-DfqSivHl.js +0 -165
- package/dist/ui-botao-Dsj08jjw.js +0 -165
- package/dist/ui-botao-OGJV6Vfk.js +0 -165
- package/dist/ui-botao-bU_bf6SU.js +0 -166
- package/dist/ui-botao-psS1juof.cjs +0 -12
- package/dist/ui-botao-xTbH5mpH.cjs +0 -12
- package/dist/ui-campo-texto-19tIrmBK.js +0 -377
- package/dist/ui-campo-texto-CH8mzX61.cjs +0 -16
- package/dist/ui-campo-texto-Cnn2UAkS.cjs +0 -16
- package/dist/ui-campo-texto-DVU_sWV1.cjs +0 -16
- package/dist/ui-campo-texto-Uu2dJE_0.js +0 -379
- package/dist/ui-campo-texto-W5M0gNE4.js +0 -377
- package/dist/ui-card-0wu4rjEX.cjs +0 -20
- package/dist/ui-card-B86lJXTP.cjs +0 -20
- package/dist/ui-card-BYyYxxY1.cjs +0 -20
- package/dist/ui-card-C_o5_0cB.js +0 -111
- package/dist/ui-card-CojoGXaT.js +0 -144
- package/dist/ui-card-DRtpOo3l.js +0 -143
- package/dist/ui-controle-cores-B4R6ct4I.js +0 -291
- package/dist/ui-controle-cores-BS0WYPdi.js +0 -572
- package/dist/ui-controle-cores-Bq_XUrIQ.cjs +0 -32
- package/dist/ui-controle-cores-BtA6yzu3.js +0 -291
- package/dist/ui-controle-cores-C8um-If9.cjs +0 -32
- package/dist/ui-controle-cores-CHMKGemo.cjs +0 -141
- package/dist/ui-controle-cores-C_cVXxCn.js +0 -291
- package/dist/ui-controle-cores-CuDFS8Y8.cjs +0 -32
- package/dist/ui-controle-cores-Dog7ERYv.js +0 -697
- package/dist/ui-controle-cores-Er6ZcQ7U.cjs +0 -111
- package/dist/ui-linha-BxhEBn27.js +0 -749
- package/dist/ui-linha-C306zxWG.cjs +0 -19
- package/dist/ui-linha-C_azWkcG.js +0 -517
- package/dist/ui-linha-CcalUBDw.cjs +0 -38
- package/dist/ui-linha-DAz6DBcl.cjs +0 -38
- package/dist/ui-linha-DkxwMhD-.js +0 -749
- package/dist/ui-modal-4nU-tXjO.cjs +0 -18
- package/dist/ui-modal-BkYvNP0G.js +0 -214
- package/dist/ui-modal-BwB9fksp.js +0 -214
- package/dist/ui-modal-CUNbpbZ1.cjs +0 -18
- package/dist/ui-modal-CvGFGh1h.cjs +0 -18
- package/dist/ui-modal-DBOtSTbR.js +0 -238
- package/dist/ui-paleta-ferramentas-BXXrI1Y7.js +0 -1233
- package/dist/ui-paleta-ferramentas-CEZYcN4J.js +0 -624
- package/dist/ui-paleta-ferramentas-CU4icLl0.js +0 -1171
- package/dist/ui-paleta-ferramentas-Ccmo-rB5.cjs +0 -21
- package/dist/ui-paleta-ferramentas-CsPMTY0G.cjs +0 -21
- package/dist/ui-paleta-ferramentas-DLwZHIDv.cjs +0 -21
- package/dist/ui-paleta-ferramentas-DNN5i6nL.js +0 -860
- package/dist/ui-paleta-ferramentas-Dbj1kBS9.cjs +0 -18
- package/dist/ui-paleta-ferramentas-DbwdWVtT.js +0 -1173
- package/dist/ui-paleta-ferramentas-bvqxj1Yd.cjs +0 -21
- package/dist/ui-segmented-D6b6zxVs.cjs +0 -19
- package/dist/ui-segmented-DyF5YLsV.js +0 -418
- package/dist/ui-segmented-rn9RxRGM.cjs +0 -19
- package/dist/ui-segmented-wUraId2e.js +0 -412
- package/dist/ui-seletor-cor-C4U2eqxY.cjs +0 -82
- package/dist/ui-seletor-cor-D2_C6Aor.js +0 -391
- package/dist/ui-seletor-cor-DPKqf5wb.cjs +0 -82
- package/dist/ui-seletor-cor-FYtRccnK.js +0 -396
- package/dist/ui-skeleton-B2Rgrv8o.js +0 -648
- package/dist/ui-skeleton-DEHwpDqa.js +0 -648
- package/dist/ui-skeleton-DI4_9WOX.js +0 -428
- package/dist/ui-skeleton-DiOxTBZK.cjs +0 -52
- package/dist/ui-skeleton-SPYqku8P.cjs +0 -52
- package/dist/ui-skeleton-W9uwIceA.js +0 -585
- package/dist/ui-skeleton-elhKIh2B.cjs +0 -33
- package/dist/ui-skeleton-sIphhOSx.cjs +0 -52
- package/dist/ui-switch-BL-x_-SM.js +0 -1202
- package/dist/ui-switch-BcOqOkiV.js +0 -856
- package/dist/ui-switch-C0i_3QXu.cjs +0 -66
- package/dist/ui-switch-D7iPKDj-.cjs +0 -53
- package/dist/ui-switch-DAIgOhqr.cjs +0 -66
- package/dist/ui-switch-_F8yubdX.js +0 -1203
- package/dist/ui-tabela-propriedades-2bq2nX-b.js +0 -3202
- package/dist/ui-tabela-propriedades-8IAYmk3P.cjs +0 -142
- package/dist/ui-tabela-propriedades-B8AwlpqL.cjs +0 -141
- package/dist/ui-tabela-propriedades-BBr5sqki.cjs +0 -145
- package/dist/ui-tabela-propriedades-BecPqC-e.cjs +0 -141
- package/dist/ui-tabela-propriedades-BoYXzP5Z.js +0 -3191
- package/dist/ui-tabela-propriedades-BokvDD3b.js +0 -2648
- package/dist/ui-tabela-propriedades-Boy7I5yW.js +0 -2412
- package/dist/ui-tabela-propriedades-C-PeuW1i.cjs +0 -141
- package/dist/ui-tabela-propriedades-C5YYnod1.js +0 -3053
- package/dist/ui-tabela-propriedades-CnfW9DZG.cjs +0 -142
- package/dist/ui-tabela-propriedades-CyPyKXtB.js +0 -3013
- package/dist/ui-tabela-propriedades-DWOKznMN.cjs +0 -142
- package/dist/ui-tabela-propriedades-Df9ajC6M.js +0 -2648
- package/dist/ui-tabela-propriedades-DqvPilK_.cjs +0 -142
- package/dist/ui-tabela-propriedades-DuaC4sFX.js +0 -2767
- package/dist/ui-toast-Bp_NlM5G.js +0 -156
- package/dist/ui-toast-DGTZKne5.cjs +0 -20
- package/dist/zero-js-triggers-C_KrvFOQ.js +0 -244
- package/dist/zero-js-triggers-C_gtaojZ.cjs +0 -1
|
@@ -1,624 +0,0 @@
|
|
|
1
|
-
var j = Object.defineProperty;
|
|
2
|
-
var B = (o, l, e) => l in o ? j(o, l, { enumerable: !0, configurable: !0, writable: !0, value: e }) : o[l] = e;
|
|
3
|
-
var c = (o, l, e) => B(o, typeof l != "symbol" ? l + "" : l, e);
|
|
4
|
-
import { L as k } from "./listener-bag-DQgv7OON.js";
|
|
5
|
-
import { d as E, S as C } from "./ssr-safe-5cWfJP-s.js";
|
|
6
|
-
import { h as H } from "./svg-seguro-BsbNQqpd.js";
|
|
7
|
-
const q = ':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)}', S = {
|
|
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
|
-
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
|
-
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>',
|
|
11
|
-
eyeOff: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24"></path><line x1="1" y1="1" x2="23" y2="23"></line></svg>',
|
|
12
|
-
lock: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="11" width="18" height="11" rx="2" ry="2"></rect><path d="M7 11V7a5 5 0 0 1 10 0v4"></path></svg>',
|
|
13
|
-
trash: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="3 6 5 6 21 6"></polyline><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path></svg>',
|
|
14
|
-
gear: '<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="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>',
|
|
15
|
-
bell: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"></path><path d="M13.73 21a2 2 0 0 1-3.46 0"></path></svg>',
|
|
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
|
-
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
|
-
};
|
|
19
|
-
class $ extends C {
|
|
20
|
-
constructor() {
|
|
21
|
-
super();
|
|
22
|
-
c(this, "iconContainer");
|
|
23
|
-
c(this, "svgContainer");
|
|
24
|
-
c(this, "slotElement");
|
|
25
|
-
c(this, "handleSlotChange", () => {
|
|
26
|
-
this.syncState();
|
|
27
|
-
});
|
|
28
|
-
const e = this.attachShadow({ mode: "open" });
|
|
29
|
-
e.innerHTML = `
|
|
30
|
-
<style>${q}</style>
|
|
31
|
-
<span class="ui-icone" aria-hidden="true">
|
|
32
|
-
<span class="ui-icone__svg" style="display: none;"></span>
|
|
33
|
-
<slot></slot>
|
|
34
|
-
</span>
|
|
35
|
-
`, this.iconContainer = e.querySelector(".ui-icone"), this.svgContainer = e.querySelector(".ui-icone__svg"), this.slotElement = e.querySelector("slot");
|
|
36
|
-
}
|
|
37
|
-
static get observedAttributes() {
|
|
38
|
-
return ["tamanho", "size", "cor", "color", "nome", "name"];
|
|
39
|
-
}
|
|
40
|
-
connectedCallback() {
|
|
41
|
-
this.slotElement.addEventListener("slotchange", this.handleSlotChange), this.syncState();
|
|
42
|
-
}
|
|
43
|
-
disconnectedCallback() {
|
|
44
|
-
this.slotElement.removeEventListener("slotchange", this.handleSlotChange);
|
|
45
|
-
}
|
|
46
|
-
attributeChangedCallback(e, t, i) {
|
|
47
|
-
this.syncState();
|
|
48
|
-
}
|
|
49
|
-
resolveTamanhoPx() {
|
|
50
|
-
const e = this.getAttribute("tamanho") || this.getAttribute("size") || "md";
|
|
51
|
-
switch (e.toLowerCase()) {
|
|
52
|
-
case "sm":
|
|
53
|
-
return "16px";
|
|
54
|
-
case "md":
|
|
55
|
-
return "20px";
|
|
56
|
-
case "lg":
|
|
57
|
-
return "24px";
|
|
58
|
-
case "xl":
|
|
59
|
-
return "32px";
|
|
60
|
-
default:
|
|
61
|
-
return isNaN(Number(e)) ? e : `${e}px`;
|
|
62
|
-
}
|
|
63
|
-
}
|
|
64
|
-
syncState() {
|
|
65
|
-
const e = this.resolveTamanhoPx();
|
|
66
|
-
this.style.setProperty("--ui-tamanho-icone", e);
|
|
67
|
-
const t = this.getAttribute("cor") || this.getAttribute("color");
|
|
68
|
-
t ? (this.style.setProperty("--ui-cor-icone", t), this.iconContainer.style.color = t) : (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"), n = this.slotElement.assignedNodes().length > 0;
|
|
70
|
-
r && S[r] && !n ? (this.svgContainer.innerHTML = S[r], this.svgContainer.style.display = "inline-flex") : (this.svgContainer.innerHTML = "", this.svgContainer.style.display = "none");
|
|
71
|
-
}
|
|
72
|
-
}
|
|
73
|
-
E("ui-icone", $);
|
|
74
|
-
const F = ':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__abas{display:flex;align-items:flex-end;gap:2px;height:30px;padding:0 8px;box-sizing:border-box;overflow-x:auto;scrollbar-width:none;border-bottom:1px solid var(--ui-cor-borda, rgba(255, 255, 255, .12))}.ui-ribbon__abas::-webkit-scrollbar{display:none}.ui-ribbon__aba{position:relative;flex-shrink:0;height:28px;padding:0 14px;border:0;border-radius:6px 6px 0 0;background:transparent;color:var(--ui-cor-texto-secundario, #888899);font:inherit;font-size:12px;font-weight:600;white-space:nowrap;cursor:pointer}.ui-ribbon__aba:hover{color:var(--ui-cor-texto, #e1e1e6)}.ui-ribbon__aba:focus-visible{outline:none;box-shadow:inset 0 0 0 2px var(--ui-cor-primaria, #00E08A)}.ui-ribbon__aba--ativa{color:var(--ui-cor-texto, #e1e1e6);background:var(--ui-cor-fundo-elevado, #1a1a1e)}.ui-ribbon__aba--ativa:after{content:"";position:absolute;left:8px;right:8px;bottom:0;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__painel{background:var(--ui-cor-fundo-elevado, #1a1a1e);overflow-x:auto}.ui-ribbon__grupos{display:flex;align-items:stretch;min-height:84px;padding:4px 8px;box-sizing:border-box}.ui-ribbon__grupo{display:flex;flex-direction:column;flex-shrink:0;padding:0 8px;border-right:1px solid var(--ui-cor-borda, rgba(255, 255, 255, .12))}.ui-ribbon__grupo:last-child{border-right:0}.ui-ribbon__grupo-itens{display:flex;flex:1;align-items:stretch;gap:2px}.ui-ribbon__grupo-rotulo{padding-top:2px;color:var(--ui-cor-texto-secundario, #888899);font-size:11px;text-align:center;white-space:nowrap}.ui-ribbon__coluna{display:flex;flex-direction:column;justify-content:center;gap:1px}.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--pequeno{height:22px;padding:0 6px;justify-content:flex-start}.ui-ferr-btn--pequeno.ui-ferr-btn--so-icone{width:24px;padding:0;justify-content:center}:host([recolhido]) .ui-ribbon__painel{display:none;position:absolute;top:100%;left:0;right: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:64px}:host([compacto]) .ui-ferr-btn--grande{min-width:44px}', P = '.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:12px;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:none;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__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;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{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:12px;text-align:left;cursor:pointer}.ui-ferr-menu__item:hover:not(:disabled),.ui-ferr-menu__item:focus-visible{outline:none;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{color:var(--ui-cor-primaria, #00E08A)}.ui-ferr-menu__icone{display:inline-flex;width:16px;justify-content:center}.ui-ferr-menu__rotulo{flex:1}.ui-ferr-menu__atalho{color:var(--ui-cor-texto-secundario, #888899);font-size:11px}.ui-ferr-menu__sep{height:1px;margin:3px 2px;background:var(--ui-cor-borda, rgba(255, 255, 255, .12))}';
|
|
75
|
-
function L(o, l) {
|
|
76
|
-
if (!o) return null;
|
|
77
|
-
const e = document.createElement("ui-icone");
|
|
78
|
-
if (e.setAttribute("tamanho", String(l)), o.trimStart().startsWith("<")) {
|
|
79
|
-
const t = H(o);
|
|
80
|
-
if (!t) return null;
|
|
81
|
-
e.appendChild(t);
|
|
82
|
-
} else
|
|
83
|
-
e.setAttribute("nome", o);
|
|
84
|
-
return e;
|
|
85
|
-
}
|
|
86
|
-
function R(o) {
|
|
87
|
-
const l = o.rotulo || o.id;
|
|
88
|
-
return o.atalho ? `${l} (${o.atalho})` : l;
|
|
89
|
-
}
|
|
90
|
-
function w(o, l) {
|
|
91
|
-
o.disabled = !!l.disabled;
|
|
92
|
-
const e = l.tipo, t = e === "toggle" || e === "ferramenta";
|
|
93
|
-
t ? o.setAttribute("aria-pressed", String(!!l.ativo)) : o.removeAttribute("aria-pressed"), o.classList.toggle("ui-ferr-btn--ativo", t && !!l.ativo);
|
|
94
|
-
}
|
|
95
|
-
function I(o, l, e) {
|
|
96
|
-
var a;
|
|
97
|
-
const t = document.createElement("button");
|
|
98
|
-
t.type = "button", t.className = `ui-ferr-btn ui-ferr-btn--${l}`, t.dataset.id = o.id, t.tabIndex = -1, t.setAttribute("aria-label", o.rotulo || o.id), t.title = R(o);
|
|
99
|
-
const i = L(o.icone, e);
|
|
100
|
-
if (i) {
|
|
101
|
-
const s = document.createElement("span");
|
|
102
|
-
s.className = "ui-ferr-btn__icone", s.appendChild(i), t.appendChild(s);
|
|
103
|
-
}
|
|
104
|
-
const r = !!((a = o.filhos) != null && a.length), n = l !== "paleta" && !o.somenteIcone && !!o.rotulo;
|
|
105
|
-
if (l !== "paleta" && o.somenteIcone && t.classList.add("ui-ferr-btn--so-icone"), n) {
|
|
106
|
-
const s = document.createElement("span");
|
|
107
|
-
s.className = "ui-ferr-btn__rotulo", s.textContent = o.rotulo, t.appendChild(s);
|
|
108
|
-
}
|
|
109
|
-
if (r) {
|
|
110
|
-
if (l === "paleta")
|
|
111
|
-
t.classList.add("ui-ferr-btn--grupo");
|
|
112
|
-
else {
|
|
113
|
-
const s = document.createElement("span");
|
|
114
|
-
s.className = "ui-ferr-btn__caret", t.appendChild(s);
|
|
115
|
-
}
|
|
116
|
-
t.setAttribute("aria-haspopup", "menu"), t.setAttribute("aria-expanded", "false");
|
|
117
|
-
}
|
|
118
|
-
return w(t, o), t;
|
|
119
|
-
}
|
|
120
|
-
function f(o, l) {
|
|
121
|
-
for (const e of o) {
|
|
122
|
-
if (e.id === l) return e;
|
|
123
|
-
if (e.filhos) {
|
|
124
|
-
const t = f(e.filhos, l);
|
|
125
|
-
if (t) return t;
|
|
126
|
-
}
|
|
127
|
-
}
|
|
128
|
-
}
|
|
129
|
-
function D(o) {
|
|
130
|
-
const l = o.filter((e) => !e.disabled);
|
|
131
|
-
o.forEach((e) => e.tabIndex = -1), l.length && (l[0].tabIndex = 0);
|
|
132
|
-
}
|
|
133
|
-
function N(o, l, e, t) {
|
|
134
|
-
const i = l.filter((s) => !s.disabled), r = i.length, n = i.findIndex((s) => s === o.target);
|
|
135
|
-
if (r === 0 || n < 0) return !1;
|
|
136
|
-
let a = n;
|
|
137
|
-
if (e.includes(o.key)) a = (n - 1 + r) % r;
|
|
138
|
-
else if (t.includes(o.key)) a = (n + 1) % r;
|
|
139
|
-
else if (o.key === "Home") a = 0;
|
|
140
|
-
else if (o.key === "End") a = r - 1;
|
|
141
|
-
else return !1;
|
|
142
|
-
return o.preventDefault(), l.forEach((s) => s.tabIndex = -1), i[a].tabIndex = 0, i[a].focus(), !0;
|
|
143
|
-
}
|
|
144
|
-
function T(o, l, e, t, i = {}) {
|
|
145
|
-
var M;
|
|
146
|
-
const r = i.lado ?? "baixo", n = new k(), a = document.createElement("div");
|
|
147
|
-
a.className = "ui-ferr-menu", a.setAttribute("role", "menu");
|
|
148
|
-
const s = [];
|
|
149
|
-
let h = !1;
|
|
150
|
-
const b = () => {
|
|
151
|
-
var u;
|
|
152
|
-
h || (h = !0, n.cleanup(), a.remove(), (u = i.onFechar) == null || u.call(i));
|
|
153
|
-
};
|
|
154
|
-
e.forEach((u) => {
|
|
155
|
-
if (u.tipo === "separador") {
|
|
156
|
-
const p = document.createElement("div");
|
|
157
|
-
p.className = "ui-ferr-menu__sep", p.setAttribute("role", "separator"), a.appendChild(p);
|
|
158
|
-
return;
|
|
159
|
-
}
|
|
160
|
-
const d = document.createElement("button");
|
|
161
|
-
d.type = "button", d.className = "ui-ferr-menu__item", d.setAttribute("role", "menuitem"), d.dataset.id = u.id, d.disabled = !!u.disabled, u.ativo && d.classList.add("ui-ferr-menu__item--ativo");
|
|
162
|
-
const y = document.createElement("span");
|
|
163
|
-
y.className = "ui-ferr-menu__icone";
|
|
164
|
-
const _ = L(u.icone, 14);
|
|
165
|
-
_ && y.appendChild(_), d.appendChild(y);
|
|
166
|
-
const A = document.createElement("span");
|
|
167
|
-
if (A.className = "ui-ferr-menu__rotulo", A.textContent = u.rotulo || u.id, d.appendChild(A), u.atalho) {
|
|
168
|
-
const p = document.createElement("span");
|
|
169
|
-
p.className = "ui-ferr-menu__atalho", p.textContent = u.atalho, d.appendChild(p);
|
|
170
|
-
}
|
|
171
|
-
d.addEventListener("click", (p) => {
|
|
172
|
-
p.stopPropagation(), b(), t(u);
|
|
173
|
-
}), s.push(d), a.appendChild(d);
|
|
174
|
-
}), o.appendChild(a);
|
|
175
|
-
const m = l.getBoundingClientRect();
|
|
176
|
-
let v = r === "direita" ? m.top : m.bottom + 2, g = r === "direita" ? m.right + 4 : m.left;
|
|
177
|
-
const x = a.getBoundingClientRect();
|
|
178
|
-
x.width && g + x.width > window.innerWidth - 4 && (g = Math.max(4, window.innerWidth - x.width - 4)), x.height && v + x.height > window.innerHeight - 4 && (v = Math.max(4, window.innerHeight - x.height - 4)), a.style.top = `${v}px`, a.style.left = `${g}px`;
|
|
179
|
-
const z = () => s.filter((u) => !u.disabled);
|
|
180
|
-
return n.add(a, "keydown", (u) => {
|
|
181
|
-
const d = z(), y = d.findIndex((_) => _ === u.target);
|
|
182
|
-
if (u.key === "Escape")
|
|
183
|
-
u.preventDefault(), u.stopPropagation(), b(), l.focus();
|
|
184
|
-
else if (u.key === "Tab")
|
|
185
|
-
b();
|
|
186
|
-
else if (d.length && (u.key === "ArrowDown" || u.key === "ArrowUp")) {
|
|
187
|
-
u.preventDefault();
|
|
188
|
-
const _ = u.key === "ArrowDown" ? 1 : -1;
|
|
189
|
-
d[(y + _ + d.length) % d.length].focus();
|
|
190
|
-
} else d.length && u.key === "Home" ? (u.preventDefault(), d[0].focus()) : d.length && u.key === "End" && (u.preventDefault(), d[d.length - 1].focus());
|
|
191
|
-
}), n.add(document, "pointerdown", (u) => {
|
|
192
|
-
const d = u.composedPath();
|
|
193
|
-
!d.includes(a) && !d.includes(l) && b();
|
|
194
|
-
}, !0), n.add(window, "resize", b), n.add(window, "blur", b), i.focar && ((M = z()[0]) == null || M.focus()), { elemento: a, ancora: l, fechar: b };
|
|
195
|
-
}
|
|
196
|
-
class V extends C {
|
|
197
|
-
constructor() {
|
|
198
|
-
super();
|
|
199
|
-
c(this, "rootElement");
|
|
200
|
-
c(this, "abasElement");
|
|
201
|
-
c(this, "gruposElement");
|
|
202
|
-
c(this, "_abas", []);
|
|
203
|
-
c(this, "_abaAtiva", "");
|
|
204
|
-
c(this, "menu", null);
|
|
205
|
-
c(this, "listeners", new k());
|
|
206
|
-
/* ---------- Interação ---------- */
|
|
207
|
-
c(this, "handleClickAbas", (e) => {
|
|
208
|
-
const t = e.target.closest(".ui-ribbon__aba");
|
|
209
|
-
t != null && t.dataset.id && (this.selecionarAba(t.dataset.id), this.recolhido && this.rootElement.classList.toggle("ui-ribbon--aberto"));
|
|
210
|
-
});
|
|
211
|
-
c(this, "handleDblClickAbas", (e) => {
|
|
212
|
-
e.target.closest(".ui-ribbon__aba") && (this.recolhido = !this.recolhido);
|
|
213
|
-
});
|
|
214
|
-
c(this, "handleKeyDownAbas", (e) => {
|
|
215
|
-
var a, s;
|
|
216
|
-
const t = Array.from(this.abasElement.querySelectorAll(".ui-ribbon__aba")), i = t.findIndex((h) => h === e.target);
|
|
217
|
-
if (i < 0) return;
|
|
218
|
-
let r = i;
|
|
219
|
-
if (e.key === "ArrowRight") r = (i + 1) % t.length;
|
|
220
|
-
else if (e.key === "ArrowLeft") r = (i - 1 + t.length) % t.length;
|
|
221
|
-
else if (e.key === "Home") r = 0;
|
|
222
|
-
else if (e.key === "End") r = t.length - 1;
|
|
223
|
-
else if (e.key === "ArrowDown") {
|
|
224
|
-
e.preventDefault(), (a = this.botoesPainel().find((h) => !h.disabled)) == null || a.focus();
|
|
225
|
-
return;
|
|
226
|
-
} else return;
|
|
227
|
-
e.preventDefault();
|
|
228
|
-
const n = t[r].dataset.id;
|
|
229
|
-
n && this.selecionarAba(n), (s = this.abasElement.querySelector(`.ui-ribbon__aba[data-id="${CSS.escape(n ?? "")}"]`)) == null || s.focus();
|
|
230
|
-
});
|
|
231
|
-
c(this, "handleClickGrupos", (e) => {
|
|
232
|
-
const t = e.target.closest(".ui-ferr-btn");
|
|
233
|
-
t != null && t.dataset.id && this.acionar(t, !1);
|
|
234
|
-
});
|
|
235
|
-
c(this, "handleKeyDownGrupos", (e) => {
|
|
236
|
-
const t = this.botoesPainel();
|
|
237
|
-
if (N(e, t, ["ArrowLeft"], ["ArrowRight"])) return;
|
|
238
|
-
const i = e.target instanceof HTMLButtonElement ? e.target : null;
|
|
239
|
-
(i == null ? void 0 : i.getAttribute("aria-haspopup")) === "menu" && e.key === "ArrowDown" && (e.preventDefault(), this.acionar(i, !0));
|
|
240
|
-
});
|
|
241
|
-
c(this, "handleEscape", (e) => {
|
|
242
|
-
e.key === "Escape" && !this.menu && this.rootElement.classList.remove("ui-ribbon--aberto");
|
|
243
|
-
});
|
|
244
|
-
c(this, "handlePointerDownFora", (e) => {
|
|
245
|
-
!this.recolhido || !this.rootElement.classList.contains("ui-ribbon--aberto") || e.composedPath().includes(this) || this.rootElement.classList.remove("ui-ribbon--aberto");
|
|
246
|
-
});
|
|
247
|
-
const e = this.attachShadow({ mode: "open" });
|
|
248
|
-
e.innerHTML = `
|
|
249
|
-
<style>${P}${F}</style>
|
|
250
|
-
<div class="ui-ribbon">
|
|
251
|
-
<div class="ui-ribbon__abas" role="tablist"></div>
|
|
252
|
-
<div class="ui-ribbon__painel" role="tabpanel">
|
|
253
|
-
<div class="ui-ribbon__grupos" role="toolbar" aria-label="Ferramentas"></div>
|
|
254
|
-
</div>
|
|
255
|
-
</div>
|
|
256
|
-
`, this.rootElement = e.querySelector(".ui-ribbon"), this.abasElement = e.querySelector(".ui-ribbon__abas"), this.gruposElement = e.querySelector(".ui-ribbon__grupos");
|
|
257
|
-
}
|
|
258
|
-
static get observedAttributes() {
|
|
259
|
-
return ["aba-ativa", "recolhido"];
|
|
260
|
-
}
|
|
261
|
-
connectedCallback() {
|
|
262
|
-
this.listeners.cleanup(), this.listeners.add(this.abasElement, "click", this.handleClickAbas), this.listeners.add(this.abasElement, "dblclick", this.handleDblClickAbas), this.listeners.add(this.abasElement, "keydown", this.handleKeyDownAbas), this.listeners.add(this.gruposElement, "click", this.handleClickGrupos), this.listeners.add(this.gruposElement, "keydown", this.handleKeyDownGrupos), this.listeners.add(document, "pointerdown", this.handlePointerDownFora, !0), this.listeners.add(this.rootElement, "keydown", this.handleEscape);
|
|
263
|
-
const e = this.getAttribute("aba-ativa");
|
|
264
|
-
e && !this._abaAtiva && (this._abaAtiva = e), this.renderizar();
|
|
265
|
-
}
|
|
266
|
-
disconnectedCallback() {
|
|
267
|
-
this.fecharMenu(), this.listeners.cleanup();
|
|
268
|
-
}
|
|
269
|
-
attributeChangedCallback(e, t, i) {
|
|
270
|
-
t !== i && (e === "aba-ativa" && i && i !== this._abaAtiva ? this.selecionarAba(i, !1) : e === "recolhido" && this.rootElement.classList.remove("ui-ribbon--aberto"));
|
|
271
|
-
}
|
|
272
|
-
/* ---------- API pública ---------- */
|
|
273
|
-
get abas() {
|
|
274
|
-
return this._abas;
|
|
275
|
-
}
|
|
276
|
-
set abas(e) {
|
|
277
|
-
this._abas = Array.isArray(e) ? e : [], this.renderizar();
|
|
278
|
-
}
|
|
279
|
-
get abaAtiva() {
|
|
280
|
-
return this._abaAtiva;
|
|
281
|
-
}
|
|
282
|
-
set abaAtiva(e) {
|
|
283
|
-
this.selecionarAba(e);
|
|
284
|
-
}
|
|
285
|
-
get recolhido() {
|
|
286
|
-
return this.hasAttribute("recolhido");
|
|
287
|
-
}
|
|
288
|
-
set recolhido(e) {
|
|
289
|
-
e ? this.setAttribute("recolhido", "") : this.removeAttribute("recolhido");
|
|
290
|
-
}
|
|
291
|
-
selecionarAba(e, t = !0) {
|
|
292
|
-
const i = this._abas.find((r) => r.id === e && !r.oculta);
|
|
293
|
-
!i || i.id === this._abaAtiva || (this.fecharMenu(), this._abaAtiva = i.id, this.getAttribute("aba-ativa") !== i.id && this.setAttribute("aba-ativa", i.id), this.renderizar(), t && this.dispatchEvent(
|
|
294
|
-
new CustomEvent("ui-aba-change", {
|
|
295
|
-
detail: { id: i.id, aba: i },
|
|
296
|
-
bubbles: !0,
|
|
297
|
-
composed: !0
|
|
298
|
-
})
|
|
299
|
-
));
|
|
300
|
-
}
|
|
301
|
-
definirAbaVisivel(e, t) {
|
|
302
|
-
const i = this._abas.find((r) => r.id === e);
|
|
303
|
-
i && (i.oculta = !t, !t && this._abaAtiva === e && (this._abaAtiva = ""), this.renderizar());
|
|
304
|
-
}
|
|
305
|
-
/** Atualiza um item (estado ou aparência) sem precisar recriar as abas. */
|
|
306
|
-
atualizarItem(e, t) {
|
|
307
|
-
const i = this._abas.flatMap((s) => s.grupos.flatMap((h) => h.itens)), r = f(i, e);
|
|
308
|
-
if (!r) return;
|
|
309
|
-
Object.assign(r, t);
|
|
310
|
-
const n = Object.keys(t).every((s) => s === "ativo" || s === "disabled"), a = this.gruposElement.querySelector(`.ui-ferr-btn[data-id="${CSS.escape(e)}"]`);
|
|
311
|
-
n && a ? w(a, r) : this.renderizarPainel();
|
|
312
|
-
}
|
|
313
|
-
/* ---------- Renderização ---------- */
|
|
314
|
-
abasVisiveis() {
|
|
315
|
-
return this._abas.filter((e) => !e.oculta);
|
|
316
|
-
}
|
|
317
|
-
renderizar() {
|
|
318
|
-
var t;
|
|
319
|
-
const e = this.abasVisiveis();
|
|
320
|
-
e.some((i) => i.id === this._abaAtiva) || (this._abaAtiva = ((t = e[0]) == null ? void 0 : t.id) ?? ""), this.renderizarAbas(), this.renderizarPainel();
|
|
321
|
-
}
|
|
322
|
-
renderizarAbas() {
|
|
323
|
-
this.abasElement.innerHTML = "", this.abasVisiveis().forEach((e) => {
|
|
324
|
-
const t = e.id === this._abaAtiva, i = document.createElement("button");
|
|
325
|
-
i.type = "button", i.className = "ui-ribbon__aba", i.setAttribute("role", "tab"), i.dataset.id = e.id, i.textContent = e.rotulo, i.tabIndex = t ? 0 : -1, i.setAttribute("aria-selected", String(t)), i.classList.toggle("ui-ribbon__aba--ativa", t), i.classList.toggle("ui-ribbon__aba--contextual", !!e.contextual), this.abasElement.appendChild(i);
|
|
326
|
-
});
|
|
327
|
-
}
|
|
328
|
-
renderizarPainel() {
|
|
329
|
-
this.fecharMenu(), this.gruposElement.innerHTML = "";
|
|
330
|
-
const e = this._abas.find((t) => t.id === this._abaAtiva);
|
|
331
|
-
e && (e.grupos.forEach((t) => this.gruposElement.appendChild(this.criarGrupo(t))), D(this.botoesPainel()));
|
|
332
|
-
}
|
|
333
|
-
criarGrupo(e) {
|
|
334
|
-
const t = document.createElement("div");
|
|
335
|
-
t.className = "ui-ribbon__grupo", t.setAttribute("role", "group"), t.setAttribute("aria-label", e.rotulo), t.dataset.id = e.id;
|
|
336
|
-
const i = document.createElement("div");
|
|
337
|
-
i.className = "ui-ribbon__grupo-itens";
|
|
338
|
-
let r = null, n = 0;
|
|
339
|
-
const a = () => {
|
|
340
|
-
r && i.appendChild(r), r = null, n = 0;
|
|
341
|
-
};
|
|
342
|
-
e.itens.forEach((h) => {
|
|
343
|
-
if (h.tipo === "separador") {
|
|
344
|
-
a();
|
|
345
|
-
const b = document.createElement("div");
|
|
346
|
-
b.className = "ui-ribbon__separador", b.setAttribute("role", "separator"), i.appendChild(b);
|
|
347
|
-
} 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)), ++n === 3 && a());
|
|
348
|
-
}), a();
|
|
349
|
-
const s = document.createElement("div");
|
|
350
|
-
return s.className = "ui-ribbon__grupo-rotulo", s.textContent = e.rotulo, t.appendChild(i), t.appendChild(s), t;
|
|
351
|
-
}
|
|
352
|
-
criarBotao(e, t, i) {
|
|
353
|
-
var n;
|
|
354
|
-
const r = (n = e.filhos) != null && n.length ? { ...e, tipo: "menu" } : e;
|
|
355
|
-
return I(r, t, i);
|
|
356
|
-
}
|
|
357
|
-
botoesPainel() {
|
|
358
|
-
return Array.from(this.gruposElement.querySelectorAll(".ui-ferr-btn"));
|
|
359
|
-
}
|
|
360
|
-
acionar(e, t) {
|
|
361
|
-
var n;
|
|
362
|
-
const i = this._abas.find((a) => a.id === this._abaAtiva), r = i && f(i.grupos.flatMap((a) => a.itens), e.dataset.id);
|
|
363
|
-
if (!(!r || r.disabled)) {
|
|
364
|
-
if ((n = r.filhos) != null && n.length) {
|
|
365
|
-
this.alternarMenu(e, r, t);
|
|
366
|
-
return;
|
|
367
|
-
}
|
|
368
|
-
r.tipo === "toggle" && (r.ativo = !r.ativo, w(e, r)), this.emitir(r), this.rootElement.classList.remove("ui-ribbon--aberto");
|
|
369
|
-
}
|
|
370
|
-
}
|
|
371
|
-
alternarMenu(e, t, i) {
|
|
372
|
-
var n;
|
|
373
|
-
const r = ((n = this.menu) == null ? void 0 : n.ancora) === e;
|
|
374
|
-
this.fecharMenu(), !r && (e.setAttribute("aria-expanded", "true"), this.menu = T(
|
|
375
|
-
this.shadowRoot,
|
|
376
|
-
e,
|
|
377
|
-
t.filhos,
|
|
378
|
-
(a) => {
|
|
379
|
-
a.tipo === "toggle" && (a.ativo = !a.ativo), this.emitir(a, t), this.rootElement.classList.remove("ui-ribbon--aberto");
|
|
380
|
-
},
|
|
381
|
-
{
|
|
382
|
-
lado: "baixo",
|
|
383
|
-
focar: i,
|
|
384
|
-
onFechar: () => {
|
|
385
|
-
e.setAttribute("aria-expanded", "false"), this.menu = null;
|
|
386
|
-
}
|
|
387
|
-
}
|
|
388
|
-
));
|
|
389
|
-
}
|
|
390
|
-
fecharMenu() {
|
|
391
|
-
var e;
|
|
392
|
-
(e = this.menu) == null || e.fechar(), this.menu = null;
|
|
393
|
-
}
|
|
394
|
-
emitir(e, t) {
|
|
395
|
-
this.dispatchEvent(
|
|
396
|
-
new CustomEvent("ui-ferramenta", {
|
|
397
|
-
detail: { id: e.id, item: e, pai: t, ativo: e.ativo, origem: "ribbon", aba: this._abaAtiva },
|
|
398
|
-
bubbles: !0,
|
|
399
|
-
composed: !0
|
|
400
|
-
})
|
|
401
|
-
);
|
|
402
|
-
}
|
|
403
|
-
}
|
|
404
|
-
E("ui-ribbon", V);
|
|
405
|
-
const O = ':host{display:inline-block;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}.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-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--ativo{background:var(--ui-cor-primaria, #00E08A);border-color:transparent;color:var(--ui-cor-texto-sobre-primaria, #000000)}.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}', K = 380, U = { sm: 16, md: 18, lg: 22 };
|
|
406
|
-
class G extends C {
|
|
407
|
-
constructor() {
|
|
408
|
-
super();
|
|
409
|
-
c(this, "rootElement");
|
|
410
|
-
c(this, "_ferramentas", []);
|
|
411
|
-
c(this, "_ativo", "");
|
|
412
|
-
c(this, "visiveis", /* @__PURE__ */ new Map());
|
|
413
|
-
// id do grupo → id do filho exibido
|
|
414
|
-
c(this, "menu", null);
|
|
415
|
-
c(this, "timerPressao");
|
|
416
|
-
c(this, "suprimirClique", !1);
|
|
417
|
-
c(this, "listeners", new k());
|
|
418
|
-
c(this, "handleClick", (e) => {
|
|
419
|
-
if (this.suprimirClique) {
|
|
420
|
-
this.suprimirClique = !1;
|
|
421
|
-
return;
|
|
422
|
-
}
|
|
423
|
-
const t = e.target.closest(".ui-ferr-btn"), i = t != null && t.dataset.id ? f(this._ferramentas, t.dataset.id) : void 0;
|
|
424
|
-
if (!t || !i) return;
|
|
425
|
-
const r = t.dataset.grupo ? f(this._ferramentas, t.dataset.grupo) : void 0;
|
|
426
|
-
this.acionar(i, r);
|
|
427
|
-
});
|
|
428
|
-
c(this, "handlePointerDown", (e) => {
|
|
429
|
-
const t = e;
|
|
430
|
-
if (t.pointerType === "mouse" && t.button !== 0) return;
|
|
431
|
-
const i = e.target.closest(".ui-ferr-btn--grupo");
|
|
432
|
-
!i || i.disabled || (this.cancelarPressao(), this.timerPressao = window.setTimeout(() => {
|
|
433
|
-
this.suprimirClique = !0, this.abrirFlyout(i, !1);
|
|
434
|
-
}, K));
|
|
435
|
-
});
|
|
436
|
-
c(this, "cancelarPressao", () => {
|
|
437
|
-
this.timerPressao !== void 0 && (window.clearTimeout(this.timerPressao), this.timerPressao = void 0);
|
|
438
|
-
});
|
|
439
|
-
c(this, "handleContextMenu", (e) => {
|
|
440
|
-
const t = e.target.closest(".ui-ferr-btn--grupo");
|
|
441
|
-
t && (e.preventDefault(), this.cancelarPressao(), this.abrirFlyout(t, !1));
|
|
442
|
-
});
|
|
443
|
-
c(this, "handleKeyDown", (e) => {
|
|
444
|
-
const t = this.getAttribute("orientacao") === "horizontal", i = t ? ["ArrowLeft"] : ["ArrowUp"], r = t ? ["ArrowRight"] : ["ArrowDown"];
|
|
445
|
-
if (N(e, this.botoes(), i, r)) return;
|
|
446
|
-
const n = t ? "ArrowDown" : "ArrowRight", a = e.target instanceof HTMLButtonElement ? e.target : null;
|
|
447
|
-
a != null && a.dataset.grupo && e.key === n && (e.preventDefault(), this.abrirFlyout(a, !0));
|
|
448
|
-
});
|
|
449
|
-
c(this, "handleAtalho", (e) => {
|
|
450
|
-
if (!this.hasAttribute("atalhos") || e.ctrlKey || e.metaKey || e.altKey || e.defaultPrevented) return;
|
|
451
|
-
const t = e.composedPath()[0];
|
|
452
|
-
if (t && (/^(INPUT|TEXTAREA|SELECT)$/.test(t.tagName) || t.isContentEditable)) return;
|
|
453
|
-
const i = (e.key || "").toUpperCase();
|
|
454
|
-
if (i.length !== 1) return;
|
|
455
|
-
const r = this.todasFerramentas().filter((s) => {
|
|
456
|
-
var h;
|
|
457
|
-
return !s.disabled && ((h = s.atalho) == null ? void 0 : h.toUpperCase()) === i;
|
|
458
|
-
});
|
|
459
|
-
if (!r.length) return;
|
|
460
|
-
e.preventDefault();
|
|
461
|
-
let n = r[0];
|
|
462
|
-
if (r.length > 1) {
|
|
463
|
-
const s = r.findIndex((h) => h.id === this._ativo);
|
|
464
|
-
n = r[(s + 1) % r.length];
|
|
465
|
-
}
|
|
466
|
-
const a = this._ferramentas.find((s) => {
|
|
467
|
-
var h;
|
|
468
|
-
return (h = s.filhos) == null ? void 0 : h.some((b) => b.id === n.id);
|
|
469
|
-
});
|
|
470
|
-
this.acionar(n, a);
|
|
471
|
-
});
|
|
472
|
-
const e = this.attachShadow({ mode: "open" });
|
|
473
|
-
e.innerHTML = `
|
|
474
|
-
<style>${P}${O}</style>
|
|
475
|
-
<div class="ui-paleta ui-paleta--vertical" role="toolbar" aria-orientation="vertical" aria-label="Ferramentas"></div>
|
|
476
|
-
`, this.rootElement = e.querySelector(".ui-paleta");
|
|
477
|
-
}
|
|
478
|
-
static get observedAttributes() {
|
|
479
|
-
return ["valor", "value", "orientacao", "colunas", "tamanho", "size"];
|
|
480
|
-
}
|
|
481
|
-
connectedCallback() {
|
|
482
|
-
this.listeners.cleanup(), this.listeners.add(this.rootElement, "click", this.handleClick), this.listeners.add(this.rootElement, "pointerdown", this.handlePointerDown), this.listeners.add(this.rootElement, "pointerup", this.cancelarPressao), this.listeners.add(this.rootElement, "pointerleave", this.cancelarPressao), this.listeners.add(this.rootElement, "pointercancel", this.cancelarPressao), this.listeners.add(this.rootElement, "contextmenu", this.handleContextMenu), this.listeners.add(this.rootElement, "keydown", this.handleKeyDown), this.listeners.add(document, "keydown", this.handleAtalho);
|
|
483
|
-
const e = this.getAttribute("valor") || this.getAttribute("value");
|
|
484
|
-
e && !this._ativo && this.definirAtivoInterno(e), this.renderizar();
|
|
485
|
-
}
|
|
486
|
-
disconnectedCallback() {
|
|
487
|
-
this.cancelarPressao(), this.fecharMenu(), this.listeners.cleanup();
|
|
488
|
-
}
|
|
489
|
-
attributeChangedCallback(e, t, i) {
|
|
490
|
-
t !== i && (e === "valor" || e === "value" ? i && i !== this._ativo && this.ativar(i, !1) : this.renderizar());
|
|
491
|
-
}
|
|
492
|
-
/* ---------- API pública ---------- */
|
|
493
|
-
get ferramentas() {
|
|
494
|
-
return this._ferramentas;
|
|
495
|
-
}
|
|
496
|
-
set ferramentas(e) {
|
|
497
|
-
this._ferramentas = Array.isArray(e) ? e : [], this.visiveis.clear(), this._ativo && this.definirAtivoInterno(this._ativo), this.renderizar();
|
|
498
|
-
}
|
|
499
|
-
get valor() {
|
|
500
|
-
return this._ativo;
|
|
501
|
-
}
|
|
502
|
-
set valor(e) {
|
|
503
|
-
this.ativar(e);
|
|
504
|
-
}
|
|
505
|
-
get value() {
|
|
506
|
-
return this.valor;
|
|
507
|
-
}
|
|
508
|
-
set value(e) {
|
|
509
|
-
this.valor = e;
|
|
510
|
-
}
|
|
511
|
-
/** Ativa uma ferramenta (exclusiva). Se estiver dentro de um grupo, ela passa a ser a exibida. */
|
|
512
|
-
ativar(e, t = !0) {
|
|
513
|
-
const i = f(this._ferramentas, e);
|
|
514
|
-
if (!i || i.disabled || (i.tipo ?? "ferramenta") !== "ferramenta") return;
|
|
515
|
-
const r = this._ativo;
|
|
516
|
-
if (this.definirAtivoInterno(e), this.getAttribute("valor") !== e && this.setAttribute("valor", e), this.renderizar(), t && r !== e) {
|
|
517
|
-
const n = { valor: e, item: i, anterior: r };
|
|
518
|
-
this.dispatchEvent(new CustomEvent("ui-change", { detail: n, bubbles: !0, composed: !0 })), this.dispatchEvent(new CustomEvent("ui-selecionar", { detail: n, bubbles: !0, composed: !0 }));
|
|
519
|
-
}
|
|
520
|
-
}
|
|
521
|
-
atualizarItem(e, t) {
|
|
522
|
-
const i = f(this._ferramentas, e);
|
|
523
|
-
i && (Object.assign(i, t), this.renderizar());
|
|
524
|
-
}
|
|
525
|
-
/* ---------- Estado interno ---------- */
|
|
526
|
-
definirAtivoInterno(e) {
|
|
527
|
-
this._ativo = e;
|
|
528
|
-
const t = this._ferramentas.find((i) => {
|
|
529
|
-
var r;
|
|
530
|
-
return (r = i.filhos) == null ? void 0 : r.some((n) => n.id === e);
|
|
531
|
-
});
|
|
532
|
-
t && this.visiveis.set(t.id, e);
|
|
533
|
-
}
|
|
534
|
-
itemExibido(e) {
|
|
535
|
-
var i;
|
|
536
|
-
if (!((i = e.filhos) != null && i.length)) return e;
|
|
537
|
-
const t = this.visiveis.get(e.id);
|
|
538
|
-
return e.filhos.find((r) => r.id === t) ?? e.filhos[0];
|
|
539
|
-
}
|
|
540
|
-
todasFerramentas() {
|
|
541
|
-
return this._ferramentas.flatMap((e) => {
|
|
542
|
-
var t;
|
|
543
|
-
return (t = e.filhos) != null && t.length ? e.filhos : [e];
|
|
544
|
-
}).filter((e) => e.tipo !== "separador");
|
|
545
|
-
}
|
|
546
|
-
/* ---------- Renderização ---------- */
|
|
547
|
-
renderizar() {
|
|
548
|
-
this.fecharMenu();
|
|
549
|
-
const e = this.getAttribute("orientacao") === "horizontal" ? "horizontal" : "vertical", t = this.getAttribute("tamanho") || this.getAttribute("size") || "md", i = this.getAttribute("colunas") === "2" ? 2 : 1;
|
|
550
|
-
this.rootElement.className = `ui-paleta ui-paleta--${e} ui-paleta--${t}`, i === 2 && e === "vertical" && this.rootElement.classList.add("ui-paleta--cols-2"), this.rootElement.setAttribute("aria-orientation", e), this.rootElement.innerHTML = "";
|
|
551
|
-
const r = U[t] ?? 18;
|
|
552
|
-
this._ferramentas.forEach((a) => {
|
|
553
|
-
var v;
|
|
554
|
-
if (a.tipo === "separador") {
|
|
555
|
-
const g = document.createElement("div");
|
|
556
|
-
g.className = "ui-paleta__sep", g.setAttribute("role", "separator"), this.rootElement.appendChild(g);
|
|
557
|
-
return;
|
|
558
|
-
}
|
|
559
|
-
const s = this.itemExibido(a), h = s.tipo ?? "ferramenta", b = {
|
|
560
|
-
...s,
|
|
561
|
-
tipo: h,
|
|
562
|
-
ativo: h === "ferramenta" ? s.id === this._ativo : s.ativo,
|
|
563
|
-
filhos: a.filhos
|
|
564
|
-
}, m = I(b, "paleta", r);
|
|
565
|
-
m.dataset.id = s.id, (v = a.filhos) != null && v.length && (m.dataset.grupo = a.id), this.rootElement.appendChild(m);
|
|
566
|
-
}), D(this.botoes());
|
|
567
|
-
const n = this.botoes().find((a) => a.dataset.id === this._ativo && !a.disabled);
|
|
568
|
-
n && (this.botoes().forEach((a) => a.tabIndex = -1), n.tabIndex = 0);
|
|
569
|
-
}
|
|
570
|
-
botoes() {
|
|
571
|
-
return Array.from(this.rootElement.querySelectorAll(".ui-ferr-btn"));
|
|
572
|
-
}
|
|
573
|
-
/* ---------- Interação ---------- */
|
|
574
|
-
acionar(e, t) {
|
|
575
|
-
if (e.disabled) return;
|
|
576
|
-
const i = e.tipo ?? "ferramenta";
|
|
577
|
-
i === "ferramenta" ? this.ativar(e.id) : i === "toggle" && (e.ativo = !e.ativo, this.renderizar()), this.dispatchEvent(
|
|
578
|
-
new CustomEvent("ui-ferramenta", {
|
|
579
|
-
detail: {
|
|
580
|
-
id: e.id,
|
|
581
|
-
item: e,
|
|
582
|
-
pai: t,
|
|
583
|
-
ativo: i === "ferramenta" ? !0 : e.ativo,
|
|
584
|
-
origem: "paleta"
|
|
585
|
-
},
|
|
586
|
-
bubbles: !0,
|
|
587
|
-
composed: !0
|
|
588
|
-
})
|
|
589
|
-
);
|
|
590
|
-
}
|
|
591
|
-
abrirFlyout(e, t) {
|
|
592
|
-
var n;
|
|
593
|
-
const i = e.dataset.grupo ? f(this._ferramentas, e.dataset.grupo) : void 0;
|
|
594
|
-
if (!((n = i == null ? void 0 : i.filhos) != null && n.length)) return;
|
|
595
|
-
this.fecharMenu();
|
|
596
|
-
const r = i.filhos.map((a) => ({ ...a, ativo: a.id === this._ativo }));
|
|
597
|
-
e.setAttribute("aria-expanded", "true"), this.menu = T(
|
|
598
|
-
this.shadowRoot,
|
|
599
|
-
e,
|
|
600
|
-
r,
|
|
601
|
-
(a) => {
|
|
602
|
-
const s = f(i.filhos, a.id);
|
|
603
|
-
s && this.acionar(s, i);
|
|
604
|
-
},
|
|
605
|
-
{
|
|
606
|
-
lado: this.getAttribute("orientacao") === "horizontal" ? "baixo" : "direita",
|
|
607
|
-
focar: t,
|
|
608
|
-
onFechar: () => {
|
|
609
|
-
e.setAttribute("aria-expanded", "false"), this.menu = null;
|
|
610
|
-
}
|
|
611
|
-
}
|
|
612
|
-
);
|
|
613
|
-
}
|
|
614
|
-
fecharMenu() {
|
|
615
|
-
var e;
|
|
616
|
-
(e = this.menu) == null || e.fechar(), this.menu = null;
|
|
617
|
-
}
|
|
618
|
-
}
|
|
619
|
-
E("ui-paleta-ferramentas", G);
|
|
620
|
-
export {
|
|
621
|
-
$ as U,
|
|
622
|
-
G as a,
|
|
623
|
-
V as b
|
|
624
|
-
};
|