@thibezer/ui-components-kit 2.15.0 → 2.17.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 +42 -0
- package/README.md +1 -1
- package/dist/botao.cjs +1 -1
- package/dist/botao.js +1 -1
- package/dist/camadas.cjs +50 -50
- package/dist/camadas.js +381 -373
- package/dist/campo-texto.cjs +1 -1
- package/dist/campo-texto.js +1 -1
- package/dist/canvas.cjs +24 -24
- package/dist/canvas.js +757 -751
- package/dist/card.cjs +1 -1
- package/dist/card.js +1 -1
- package/dist/components/ui-avatar/ui-avatar.d.ts +7 -0
- package/dist/components/ui-barra-ferramentas/ui-paleta-ferramentas.d.ts +2 -0
- package/dist/components/ui-canvas-cad/ui-canvas-cad.d.ts +7 -0
- package/dist/components/ui-mapa/ui-mapa.d.ts +1 -0
- package/dist/components/ui-seletor-mapa-base/ui-seletor-mapa-base.d.ts +6 -0
- package/dist/components/ui-skeleton/ui-skeleton.d.ts +9 -0
- package/dist/components/ui-stat/ui-stat.d.ts +12 -0
- package/dist/components/ui-tabela-propriedades/propriedades-dom-utils.d.ts +2 -1
- package/dist/components/ui-tabela-propriedades/propriedades-persistencia.d.ts +63 -0
- package/dist/components/ui-tabela-propriedades/propriedades-render-arvore.d.ts +1 -0
- package/dist/components/ui-tabela-propriedades/tipos.d.ts +16 -0
- package/dist/components/ui-tabela-propriedades/ui-tabela-propriedades.d.ts +40 -1
- package/dist/core/degrade.d.ts +34 -0
- package/dist/core/index.d.ts +1 -0
- package/dist/core.cjs +1 -1
- package/dist/core.js +33 -24
- package/dist/cores.cjs +1 -1
- package/dist/cores.js +1 -1
- package/dist/custom-elements.json +20565 -19020
- package/dist/data.cjs +1 -1
- package/dist/data.js +89 -79
- package/dist/degrade-CIxvOTUv.cjs +1 -0
- package/dist/degrade-gDa5sW__.js +119 -0
- package/dist/feedback.cjs +1 -1
- package/dist/feedback.js +2 -2
- package/dist/forms.cjs +1 -1
- package/dist/forms.js +2 -2
- package/dist/index.cjs +1 -1
- package/dist/index.d.ts +1 -0
- package/dist/index.js +215 -196
- package/dist/mapa.cjs +1 -1
- package/dist/mapa.js +1 -1
- package/dist/modal.cjs +1 -1
- package/dist/modal.js +1 -1
- package/dist/register.cjs +1 -1
- package/dist/register.js +11 -11
- package/dist/seletor-mapa-base.cjs +10 -10
- package/dist/seletor-mapa-base.js +34 -28
- package/dist/tabela.cjs +1 -1
- package/dist/tabela.js +83 -73
- package/dist/tipos-elementos.d.ts +33 -3
- package/dist/tipos-vue.d.ts +30 -3
- package/dist/tools.cjs +1 -1
- package/dist/tools.js +1 -1
- package/dist/ui-badge-1UU8vT-b.js +198 -0
- package/dist/ui-badge-CKKKPdt8.cjs +28 -0
- package/dist/ui-badge-DE58YSBY.cjs +28 -0
- package/dist/ui-badge-KgmI3jOD.js +201 -0
- package/dist/ui-botao-Dz8YvmiA.cjs +12 -0
- package/dist/ui-botao-bU_bf6SU.js +166 -0
- package/dist/ui-botao-xTbH5mpH.cjs +12 -0
- package/dist/ui-botao-zLkcMMyP.js +168 -0
- package/dist/ui-campo-texto-DVU_sWV1.cjs +16 -0
- package/dist/ui-campo-texto-Dliyt9qr.cjs +16 -0
- package/dist/ui-campo-texto-W5M0gNE4.js +377 -0
- package/dist/ui-campo-texto-btevggO3.js +379 -0
- package/dist/ui-card-BYyYxxY1.cjs +20 -0
- package/dist/ui-card-CojoGXaT.js +144 -0
- package/dist/ui-card-DFnRp9bl.js +146 -0
- package/dist/ui-card-DrWVJQKw.cjs +20 -0
- package/dist/ui-controle-cores-Bq_XUrIQ.cjs +32 -0
- package/dist/ui-controle-cores-BtA6yzu3.js +291 -0
- package/dist/ui-kit.css +1 -1
- package/dist/ui-linha-2kY7TNUJ.cjs +38 -0
- package/dist/ui-linha-DAz6DBcl.cjs +38 -0
- package/dist/ui-linha-DkxwMhD-.js +749 -0
- package/dist/ui-linha-KFF86FW5.js +752 -0
- package/dist/ui-modal-4nU-tXjO.cjs +18 -0
- package/dist/ui-modal-BrXzVZ65.js +216 -0
- package/dist/ui-modal-BwB9fksp.js +214 -0
- package/dist/ui-modal-lARKzEVZ.cjs +18 -0
- package/dist/ui-paleta-ferramentas-Bu6JaT0s.js +1245 -0
- package/dist/ui-paleta-ferramentas-D3Jhwt26.cjs +21 -0
- package/dist/ui-skeleton-BLEV6h3k.js +653 -0
- package/dist/ui-skeleton-B_XTaGrX.cjs +52 -0
- package/dist/ui-skeleton-DEHwpDqa.js +648 -0
- package/dist/ui-skeleton-sIphhOSx.cjs +52 -0
- package/dist/ui-switch-BXIDwC-Y.cjs +66 -0
- package/dist/ui-switch-Ctxk-jKS.js +1212 -0
- package/dist/ui-switch-DAIgOhqr.cjs +66 -0
- package/dist/ui-switch-_F8yubdX.js +1203 -0
- package/dist/ui-tabela-propriedades-2bq2nX-b.js +3202 -0
- package/dist/ui-tabela-propriedades-CJyo568n.js +3517 -0
- package/dist/ui-tabela-propriedades-CnfW9DZG.cjs +142 -0
- package/dist/ui-tabela-propriedades-Wa34hfIr.cjs +142 -0
- package/package.json +187 -187
|
@@ -0,0 +1,379 @@
|
|
|
1
|
+
var b = Object.defineProperty;
|
|
2
|
+
var g = (a, s, t) => s in a ? b(a, s, { enumerable: !0, configurable: !0, writable: !0, value: t }) : a[s] = t;
|
|
3
|
+
var i = (a, s, t) => g(a, typeof s != "symbol" ? s + "" : s, t);
|
|
4
|
+
import { A as x, a as f } from "./degrade-gDa5sW__.js";
|
|
5
|
+
import { S as _, d as p } from "./ssr-safe-5cWfJP-s.js";
|
|
6
|
+
import { b as v } from "./altura-controle-vxQiXG4q.js";
|
|
7
|
+
import { L as E } from "./listener-bag-DQgv7OON.js";
|
|
8
|
+
import { i as c } from "./opcoes-CupvWVIm.js";
|
|
9
|
+
import { g as y, o as A, c as w } from "./acessibilidade-CUlSXc2X.js";
|
|
10
|
+
import { v as S, a as V } from "./form-validacao-BlQFxUVj.js";
|
|
11
|
+
import { a as k } from "./form-submissao-C-SPRKgT.js";
|
|
12
|
+
const q = ':host{display:flex;flex-direction:column;gap:4px;width:100%;box-sizing:border-box;font-family:var(--ui-fonte-base, "Inter", sans-serif)}:host([inline]){width:auto;display:inline-flex;vertical-align:middle}.ui-campo-texto__container{position:relative;width:100%;display:flex;flex-direction:column;justify-content:center}:host([label-flutuante]) .ui-campo-texto__container{margin-top:6px}.ui-campo-texto__label{display:flex;align-items:center;justify-content:space-between;font-size:var(--ui-tamanho-corpo-sm, 13px);font-weight:var(--ui-peso-medio, 500);color:var(--ui-cor-texto, #e1e1e6);-webkit-user-select:none;user-select:none;margin-bottom:4px;flex-shrink:0}.ui-campo-texto__asterisco{color:var(--ui-cor-texto-erro, #ff5555);margin-left:2px;font-weight:600}.ui-campo-texto__wrapper{position:relative;display:flex;align-items:center;width:100%;height:var(--ui-campo-altura, 34px);min-height:var(--ui-campo-altura, 34px);background:var(--ui-degrade-interno, var(--ui-campo-texto-fundo, var(--ui-fundo-elevado, var(--ui-cor-fundo-elevado, #1a1a1e))));border:1px solid var(--ui-cor-borda, rgba(255, 255, 255, .12));border-radius:var(--ui-raio-borda, 6px);padding:0 8px;gap:6px;box-sizing:border-box;transition:border-color .15s ease,box-shadow .15s ease,background-color .15s ease}.ui-campo-texto__wrapper--foco{border-color:var(--ui-cor-primaria, #00E08A);box-shadow:0 0 0 2px color-mix(in srgb,var(--ui-cor-primaria, #00E08A) 18%,transparent);background:var(--ui-degrade-interno, var(--ui-campo-texto-fundo, var(--ui-fundo-card, var(--ui-cor-fundo-menu, #18181c))))}.ui-campo-texto__wrapper--erro{border-color:var(--ui-cor-texto-erro, #ff5555)!important;box-shadow:0 0 0 2px color-mix(in srgb,var(--ui-cor-texto-erro, #ff5555) 18%,transparent)!important}.ui-campo-texto__wrapper--disabled{opacity:.5;cursor:not-allowed;background:var(--ui-campo-texto-desabilitado-fundo, color-mix(in srgb, var(--ui-cor-texto, #e1e1e6) 3%, transparent))}.ui-campo-texto__input{flex:1;width:100%;height:100%;min-height:0;background:transparent;border:none;outline:none;color:var(--ui-cor-texto, #e1e1e6);font-family:inherit;font-size:clamp(11px,.85rem,13px);line-height:1.2;padding:0;margin:0;box-sizing:border-box}.ui-campo-texto__input::placeholder{color:var(--ui-cor-texto-secundario, #888899);opacity:.65}.ui-campo-texto__input:disabled{cursor:not-allowed}.ui-campo-texto__icone{display:inline-flex;align-items:center;justify-content:center;color:var(--ui-cor-texto-secundario, #888899);flex-shrink:0;font-size:14px;line-height:1;max-height:100%}.ui-campo-texto__icone svg,.ui-campo-texto__icone ::slotted(svg),.ui-campo-texto__icone ::slotted(ui-icone){shape-rendering:geometricPrecision;display:inline-flex;vertical-align:middle}.ui-campo-texto__icone--clicavel{cursor:pointer;-webkit-user-select:none;user-select:none;transition:opacity .15s ease,transform .15s ease}.ui-campo-texto__icone--clicavel:hover{opacity:.85;transform:scale(1.1)}:host([label-flutuante]) .ui-campo-texto__label{position:absolute;left:8px;top:50%;transform:translateY(-50%);font-size:12px;color:var(--ui-cor-texto-secundario, #888899);pointer-events:none;z-index:3;background:var(--ui-campo-texto-rotulo-fundo, var(--ui-cor-fundo-elevado, #1a1a1e));padding:0 4px;border-radius:3px;margin-bottom:0;white-space:nowrap;max-width:calc(100% - 16px);overflow:hidden;text-overflow:ellipsis;transition:top .15s cubic-bezier(.4,0,.2,1),transform .15s cubic-bezier(.4,0,.2,1),color .15s ease,font-size .15s ease}:host([label-flutuante][tem-icone-esquerda]) .ui-campo-texto__label{left:28px}:host([label-flutuante]) .ui-campo-texto__label--ativa{top:-8px;left:8px!important;transform:translateY(0) scale(.85);transform-origin:left top;font-weight:600;color:var(--ui-cor-primaria, #00E08A);background:var(--ui-campo-texto-rotulo-fundo, var(--ui-cor-fundo-elevado, #1a1a1e))}:host([label-flutuante][erro]) .ui-campo-texto__label--ativa,:host([label-flutuante][mensagem-erro]) .ui-campo-texto__label--ativa{color:var(--ui-cor-texto-erro, #ff5555)}.ui-campo-texto__helper{font-size:var(--ui-tamanho-caption, 11px);color:var(--ui-cor-texto-secundario, #888899);line-height:var(--ui-altura-linha-compacta, 1.2);margin-top:2px}.ui-campo-texto__helper--erro{color:var(--ui-cor-texto-erro, #ff5555);font-weight:500;display:flex;align-items:center;gap:4px}.ui-campo-texto__wrapper{touch-action:manipulation;-webkit-tap-highlight-color:transparent}.ui-campo-texto__input{touch-action:manipulation}@media (max-width: 640px),(pointer: coarse) and (max-width: 1024px){.ui-campo-texto__input{font-size:16px!important}:host(:not([inline])) .ui-campo-texto__wrapper{min-height:max(var(--ui-campo-altura, 38px),38px);padding:0 10px}.ui-campo-texto__label{font-size:13px}.ui-campo-texto__icone--clicavel{min-width:32px;min-height:32px}}:host(.squarecircle) .ui-campo-texto__container,:host(.squarecircles) .ui-campo-texto__container,:host(.ui-squarecircle) .ui-campo-texto__container,:host(.ui-squarecircles) .ui-campo-texto__container,:host([formato="squarecircle"]) .ui-campo-texto__container,:host([formato="squarecircles"]) .ui-campo-texto__container,:host([formato="squircle"]) .ui-campo-texto__container{border-radius:var(--ui-raio-lg, 10px)}:host(.degrade),:host(.ui-degrade),:host(.gradiente),:host(.ui-gradiente),:host([degrade]:not([degrade="false"]):not([degrade="none"]):not([degrade="0"]):not([degrade="off"])),:host([gradiente]:not([gradiente="false"]):not([gradiente="none"]):not([gradiente="0"]):not([gradiente="off"])),:host([gradient]:not([gradient="false"]):not([gradient="none"]):not([gradient="0"]):not([gradient="off"])){--ui-fundo-elevado: var(--ui-gradiente-elevado);--ui-fundo-card: var(--ui-gradiente-card)}', C = [
|
|
13
|
+
"label",
|
|
14
|
+
"placeholder",
|
|
15
|
+
"value",
|
|
16
|
+
"tipo",
|
|
17
|
+
"type",
|
|
18
|
+
"obrigatorio",
|
|
19
|
+
"required",
|
|
20
|
+
"minlength",
|
|
21
|
+
"min-length",
|
|
22
|
+
"maxlength",
|
|
23
|
+
"max-length",
|
|
24
|
+
"pattern",
|
|
25
|
+
"min",
|
|
26
|
+
"max",
|
|
27
|
+
"step",
|
|
28
|
+
"mensagem-validacao",
|
|
29
|
+
"helper-text",
|
|
30
|
+
"erro",
|
|
31
|
+
"mensagem-erro",
|
|
32
|
+
"disabled",
|
|
33
|
+
"readonly",
|
|
34
|
+
"label-flutuante",
|
|
35
|
+
"alternar-senha",
|
|
36
|
+
"tamanho",
|
|
37
|
+
"size",
|
|
38
|
+
"altura",
|
|
39
|
+
"height",
|
|
40
|
+
"densidade",
|
|
41
|
+
"aria-label",
|
|
42
|
+
...x
|
|
43
|
+
];
|
|
44
|
+
function I() {
|
|
45
|
+
return `
|
|
46
|
+
<style>${q}</style>
|
|
47
|
+
<div class="ui-campo-texto__container">
|
|
48
|
+
<label class="ui-campo-texto__label" part="rotulo" style="display: none;"></label>
|
|
49
|
+
<div class="ui-campo-texto__wrapper" part="campo">
|
|
50
|
+
<span class="ui-campo-texto__icone ui-campo-texto__icone--esquerda" part="icone icone-esquerda">
|
|
51
|
+
<slot name="icone-esquerda"></slot>
|
|
52
|
+
</span>
|
|
53
|
+
<input class="ui-campo-texto__input" part="input" type="text" />
|
|
54
|
+
<span class="ui-campo-texto__icone ui-campo-texto__icone--direita" part="icone icone-direita">
|
|
55
|
+
<slot name="icone-direita"></slot>
|
|
56
|
+
</span>
|
|
57
|
+
</div>
|
|
58
|
+
</div>
|
|
59
|
+
<div class="ui-campo-texto__helper" part="ajuda" aria-live="polite" style="display: none;"></div>
|
|
60
|
+
`;
|
|
61
|
+
}
|
|
62
|
+
function L(a, s, t, e) {
|
|
63
|
+
if (a.textContent = s, !t) return;
|
|
64
|
+
const r = document.createElement("span");
|
|
65
|
+
r.className = e, r.setAttribute("aria-hidden", "true"), r.textContent = "*", a.append(" ", r);
|
|
66
|
+
}
|
|
67
|
+
function z(a) {
|
|
68
|
+
const { labelElement: s, inputElement: t, labelText: e, placeholderText: r, isFlutuante: n, estaFocado: o, obrigatorio: u } = a, l = t.value.trim() !== "";
|
|
69
|
+
let h = !1;
|
|
70
|
+
try {
|
|
71
|
+
h = t.matches(":-webkit-autofill");
|
|
72
|
+
} catch {
|
|
73
|
+
h = !1;
|
|
74
|
+
}
|
|
75
|
+
e ? (L(s, e, !!u, "ui-campo-texto__asterisco"), s.style.display = "flex", n && (o || l || h) ? s.classList.add("ui-campo-texto__label--ativa") : s.classList.remove("ui-campo-texto__label--ativa")) : s.style.display = "none", n && !o && !l && !h ? t.placeholder = "" : t.placeholder = r;
|
|
76
|
+
}
|
|
77
|
+
function T(a, s, t) {
|
|
78
|
+
s ? (a.classList.add("ui-campo-texto__icone--clicavel"), a.setAttribute("role", "button"), a.setAttribute("tabindex", "0"), a.setAttribute("aria-label", t ? "Ocultar senha" : "Exibir senha")) : (a.classList.remove("ui-campo-texto__icone--clicavel"), a.removeAttribute("role"), a.removeAttribute("tabindex"), a.removeAttribute("aria-label"));
|
|
79
|
+
}
|
|
80
|
+
function D(a, s, t, e, r, n, o = "ui-campo-texto") {
|
|
81
|
+
e ? (a.classList.add(`${o}__wrapper--erro`), s.setAttribute("aria-invalid", "true")) : (a.classList.remove(`${o}__wrapper--erro`), s.removeAttribute("aria-invalid")), e && r ? (t.textContent = `⚠️ ${r}`, t.className = `${o}__helper ${o}__helper--erro`, t.style.display = "block") : n ? (t.textContent = n, t.className = `${o}__helper`, t.style.display = "block") : t.style.display = "none";
|
|
82
|
+
}
|
|
83
|
+
class d extends _ {
|
|
84
|
+
constructor() {
|
|
85
|
+
super();
|
|
86
|
+
i(this, "internals");
|
|
87
|
+
i(this, "_formDisabled", !1);
|
|
88
|
+
i(this, "_customErrorMessage", "");
|
|
89
|
+
this.internals = typeof this.attachInternals == "function" ? this.attachInternals() : {};
|
|
90
|
+
}
|
|
91
|
+
// === Ciclo de Vida Form-Associated Custom Elements ===
|
|
92
|
+
formDisabledCallback(t) {
|
|
93
|
+
this._formDisabled = t, this.syncState();
|
|
94
|
+
}
|
|
95
|
+
get form() {
|
|
96
|
+
var t;
|
|
97
|
+
return this.closest("form") ?? ((t = this.internals) == null ? void 0 : t.form) ?? null;
|
|
98
|
+
}
|
|
99
|
+
get required() {
|
|
100
|
+
return this.hasAttribute("obrigatorio") || this.hasAttribute("required");
|
|
101
|
+
}
|
|
102
|
+
set required(t) {
|
|
103
|
+
t ? this.setAttribute("obrigatorio", "") : (this.removeAttribute("obrigatorio"), this.removeAttribute("required")), this.syncState();
|
|
104
|
+
}
|
|
105
|
+
get obrigatorio() {
|
|
106
|
+
return this.required;
|
|
107
|
+
}
|
|
108
|
+
set obrigatorio(t) {
|
|
109
|
+
this.required = t;
|
|
110
|
+
}
|
|
111
|
+
// === API de Validação Nativa ===
|
|
112
|
+
get validity() {
|
|
113
|
+
var t;
|
|
114
|
+
return this.atualizarValidade(), (t = this.internals) == null ? void 0 : t.validity;
|
|
115
|
+
}
|
|
116
|
+
get validationMessage() {
|
|
117
|
+
var t;
|
|
118
|
+
return this.atualizarValidade(), ((t = this.internals) == null ? void 0 : t.validationMessage) ?? "";
|
|
119
|
+
}
|
|
120
|
+
get willValidate() {
|
|
121
|
+
var t;
|
|
122
|
+
return ((t = this.internals) == null ? void 0 : t.willValidate) ?? !1;
|
|
123
|
+
}
|
|
124
|
+
checkValidity() {
|
|
125
|
+
var t, e;
|
|
126
|
+
return this.atualizarValidade(), ((e = (t = this.internals) == null ? void 0 : t.checkValidity) == null ? void 0 : e.call(t)) ?? !0;
|
|
127
|
+
}
|
|
128
|
+
reportValidity() {
|
|
129
|
+
var t, e;
|
|
130
|
+
return this.atualizarValidade(), ((e = (t = this.internals) == null ? void 0 : t.reportValidity) == null ? void 0 : e.call(t)) ?? !0;
|
|
131
|
+
}
|
|
132
|
+
setCustomValidity(t) {
|
|
133
|
+
this._customErrorMessage = t || "", this.atualizarValidade();
|
|
134
|
+
}
|
|
135
|
+
}
|
|
136
|
+
i(d, "formAssociated", !0);
|
|
137
|
+
class m extends d {
|
|
138
|
+
constructor() {
|
|
139
|
+
super();
|
|
140
|
+
i(this, "labelElement");
|
|
141
|
+
i(this, "wrapperElement");
|
|
142
|
+
i(this, "inputElement");
|
|
143
|
+
i(this, "helperElement");
|
|
144
|
+
i(this, "rightIconContainer");
|
|
145
|
+
i(this, "leftSlotElement");
|
|
146
|
+
i(this, "_senhaVisivel", !1);
|
|
147
|
+
i(this, "listeners", new E());
|
|
148
|
+
i(this, "_checkTimer", null);
|
|
149
|
+
i(this, "_focado", !1);
|
|
150
|
+
i(this, "_inputId");
|
|
151
|
+
i(this, "_defaultValue", "");
|
|
152
|
+
i(this, "handleSlotChange", () => {
|
|
153
|
+
this.syncState();
|
|
154
|
+
});
|
|
155
|
+
i(this, "handleHostClick", (t) => {
|
|
156
|
+
w(this, t) && !this.disabled && this.inputElement.focus();
|
|
157
|
+
});
|
|
158
|
+
i(this, "handleRightIconClick", (t) => {
|
|
159
|
+
(this.getAttribute("tipo") === "password" || this.hasAttribute("alternar-senha")) && (t.stopPropagation(), this.alternarVisibilidadeSenha());
|
|
160
|
+
});
|
|
161
|
+
i(this, "handleRightIconKeyDown", (t) => {
|
|
162
|
+
(this.getAttribute("tipo") === "password" || this.hasAttribute("alternar-senha")) && (t.key === "Enter" || t.key === " ") && (t.preventDefault(), t.stopPropagation(), this.alternarVisibilidadeSenha());
|
|
163
|
+
});
|
|
164
|
+
i(this, "handleFocus", () => {
|
|
165
|
+
this._focado = !0, this.wrapperElement.classList.add("ui-campo-texto__wrapper--foco"), this.syncState();
|
|
166
|
+
});
|
|
167
|
+
i(this, "handleBlur", () => {
|
|
168
|
+
this._focado = !1, this.wrapperElement.classList.remove("ui-campo-texto__wrapper--foco"), this.syncState();
|
|
169
|
+
});
|
|
170
|
+
/**
|
|
171
|
+
* Enter submete o formulário como num <input> nativo. Aguarda um tick para que
|
|
172
|
+
* ouvintes do consumidor possam cancelar com `preventDefault()` no keydown.
|
|
173
|
+
*/
|
|
174
|
+
i(this, "handleKeyDown", (t) => {
|
|
175
|
+
if (t.key !== "Enter" || t.isComposing || t.altKey || t.ctrlKey || t.metaKey || t.shiftKey) return;
|
|
176
|
+
const e = this.form;
|
|
177
|
+
e && setTimeout(() => {
|
|
178
|
+
!t.defaultPrevented && this.isConnected && k(e);
|
|
179
|
+
});
|
|
180
|
+
});
|
|
181
|
+
i(this, "handleInput", (t) => {
|
|
182
|
+
t.stopPropagation();
|
|
183
|
+
const e = t.target.value;
|
|
184
|
+
this.internals.setFormValue(e), this.syncState(), this.dispatchEvent(
|
|
185
|
+
new CustomEvent("ui-input", {
|
|
186
|
+
detail: { value: e },
|
|
187
|
+
bubbles: !0,
|
|
188
|
+
composed: !0
|
|
189
|
+
})
|
|
190
|
+
), this.dispatchEvent(
|
|
191
|
+
new Event("input", {
|
|
192
|
+
bubbles: !0,
|
|
193
|
+
composed: !0
|
|
194
|
+
})
|
|
195
|
+
);
|
|
196
|
+
});
|
|
197
|
+
i(this, "handleChange", (t) => {
|
|
198
|
+
t.stopPropagation();
|
|
199
|
+
const e = t.target.value;
|
|
200
|
+
this.internals.setFormValue(e), this.syncState(), this.dispatchEvent(
|
|
201
|
+
new CustomEvent("ui-change", {
|
|
202
|
+
detail: { value: e },
|
|
203
|
+
bubbles: !0,
|
|
204
|
+
composed: !0
|
|
205
|
+
})
|
|
206
|
+
), this.dispatchEvent(
|
|
207
|
+
new Event("change", {
|
|
208
|
+
bubbles: !0,
|
|
209
|
+
composed: !0
|
|
210
|
+
})
|
|
211
|
+
);
|
|
212
|
+
});
|
|
213
|
+
const t = this.attachShadow({ mode: "open", delegatesFocus: !0 });
|
|
214
|
+
t.innerHTML = I(), this.labelElement = t.querySelector(".ui-campo-texto__label"), this.wrapperElement = t.querySelector(".ui-campo-texto__wrapper"), this.inputElement = t.querySelector(".ui-campo-texto__input"), this.helperElement = t.querySelector(".ui-campo-texto__helper"), this.rightIconContainer = t.querySelector(".ui-campo-texto__icone--direita"), this.leftSlotElement = t.querySelector('slot[name="icone-esquerda"]'), this._inputId = y("ui-input"), this.inputElement.id = this._inputId, this.labelElement.htmlFor = this._inputId, this.helperElement.id = `${this._inputId}-helper`;
|
|
215
|
+
}
|
|
216
|
+
static get observedAttributes() {
|
|
217
|
+
return C;
|
|
218
|
+
}
|
|
219
|
+
focus(t) {
|
|
220
|
+
this.inputElement.focus(t);
|
|
221
|
+
}
|
|
222
|
+
blur() {
|
|
223
|
+
this.inputElement.blur();
|
|
224
|
+
}
|
|
225
|
+
connectedCallback() {
|
|
226
|
+
this.listeners.cleanup(), this.listeners.add(this.inputElement, "input", this.handleInput), this.listeners.add(this.inputElement, "change", this.handleChange), this.listeners.add(this.inputElement, "focus", this.handleFocus), this.listeners.add(this.inputElement, "blur", this.handleBlur), this.listeners.add(this.inputElement, "keydown", this.handleKeyDown), this.listeners.add(this.rightIconContainer, "click", this.handleRightIconClick), this.listeners.add(this.rightIconContainer, "keydown", this.handleRightIconKeyDown), this.listeners.add(this.leftSlotElement, "slotchange", this.handleSlotChange), this.listeners.add(this, "click", this.handleHostClick), this._defaultValue = this.getAttribute("value") || "", this.hasAttribute("value") && !this.inputElement.value && (this.inputElement.value = this._defaultValue), this.syncState(), this._checkTimer && clearTimeout(this._checkTimer), this._checkTimer = setTimeout(() => this.syncState(), 100);
|
|
227
|
+
}
|
|
228
|
+
disconnectedCallback() {
|
|
229
|
+
this.listeners.cleanup(), this._checkTimer && clearTimeout(this._checkTimer), this._checkTimer = null;
|
|
230
|
+
}
|
|
231
|
+
attributeChangedCallback(t, e, r) {
|
|
232
|
+
t === "value" && r !== this.inputElement.value && !this._focado && (this.inputElement.value = r || ""), this.syncState();
|
|
233
|
+
}
|
|
234
|
+
get value() {
|
|
235
|
+
return this.inputElement ? this.inputElement.value : this.getAttribute("value") || "";
|
|
236
|
+
}
|
|
237
|
+
set value(t) {
|
|
238
|
+
if (this.setAttribute("value", t), this.inputElement)
|
|
239
|
+
try {
|
|
240
|
+
this.inputElement.value = t;
|
|
241
|
+
} catch {
|
|
242
|
+
}
|
|
243
|
+
this.syncState();
|
|
244
|
+
}
|
|
245
|
+
// === Ciclo de Vida Form-Associated Custom Elements (W3C FACE) ===
|
|
246
|
+
formResetCallback() {
|
|
247
|
+
var t;
|
|
248
|
+
this.inputElement.value = this._defaultValue, (t = this.internals) == null || t.setFormValue(this._defaultValue), this.syncState();
|
|
249
|
+
}
|
|
250
|
+
formStateRestoreCallback(t, e) {
|
|
251
|
+
typeof t == "string" && (this.value = t);
|
|
252
|
+
}
|
|
253
|
+
get name() {
|
|
254
|
+
return this.getAttribute("name") || "";
|
|
255
|
+
}
|
|
256
|
+
set name(t) {
|
|
257
|
+
this.setAttribute("name", t);
|
|
258
|
+
}
|
|
259
|
+
get type() {
|
|
260
|
+
return this.getAttribute("tipo") || this.getAttribute("type") || "text";
|
|
261
|
+
}
|
|
262
|
+
get disabled() {
|
|
263
|
+
return this.hasAttribute("disabled") || this._formDisabled;
|
|
264
|
+
}
|
|
265
|
+
set disabled(t) {
|
|
266
|
+
t ? this.setAttribute("disabled", "") : this.removeAttribute("disabled");
|
|
267
|
+
}
|
|
268
|
+
get minLength() {
|
|
269
|
+
return c(this.getAttribute("minlength") ?? this.getAttribute("min-length")) ?? -1;
|
|
270
|
+
}
|
|
271
|
+
set minLength(t) {
|
|
272
|
+
t >= 0 ? this.setAttribute("minlength", String(t)) : this.removeAttribute("minlength"), this.syncState();
|
|
273
|
+
}
|
|
274
|
+
get maxLength() {
|
|
275
|
+
return c(this.getAttribute("maxlength") ?? this.getAttribute("max-length")) ?? -1;
|
|
276
|
+
}
|
|
277
|
+
set maxLength(t) {
|
|
278
|
+
t >= 0 ? this.setAttribute("maxlength", String(t)) : this.removeAttribute("maxlength"), this.syncState();
|
|
279
|
+
}
|
|
280
|
+
get pattern() {
|
|
281
|
+
return this.getAttribute("pattern") || "";
|
|
282
|
+
}
|
|
283
|
+
set pattern(t) {
|
|
284
|
+
t ? this.setAttribute("pattern", t) : this.removeAttribute("pattern"), this.syncState();
|
|
285
|
+
}
|
|
286
|
+
atualizarValidade() {
|
|
287
|
+
var l, h;
|
|
288
|
+
const t = this.getAttribute("min"), e = this.getAttribute("max"), r = this.inputElement ? this.inputElement.value : "", n = this.getAttribute("value") || r, o = !!((h = (l = this.inputElement) == null ? void 0 : l.validity) != null && h.badInput), u = S({
|
|
289
|
+
val: r,
|
|
290
|
+
rawVal: n,
|
|
291
|
+
badInput: o,
|
|
292
|
+
disabled: this.disabled,
|
|
293
|
+
required: this.required,
|
|
294
|
+
tipo: this.type,
|
|
295
|
+
minlength: this.minLength >= 0 ? this.minLength : null,
|
|
296
|
+
maxlength: this.maxLength >= 0 ? this.maxLength : null,
|
|
297
|
+
min: t !== null ? parseFloat(t) : null,
|
|
298
|
+
max: e !== null ? parseFloat(e) : null,
|
|
299
|
+
step: this.getAttribute("step"),
|
|
300
|
+
pattern: this.getAttribute("pattern"),
|
|
301
|
+
customError: this._customErrorMessage,
|
|
302
|
+
mensagemValidacao: this.getAttribute("mensagem-validacao")
|
|
303
|
+
});
|
|
304
|
+
V(this.internals, u, this.inputElement);
|
|
305
|
+
}
|
|
306
|
+
alternarVisibilidadeSenha() {
|
|
307
|
+
var r;
|
|
308
|
+
if (!(this.getAttribute("tipo") === "password" || this._senhaVisivel)) return;
|
|
309
|
+
this._senhaVisivel = !this._senhaVisivel, this.inputElement.type = this._senhaVisivel ? "text" : "password";
|
|
310
|
+
const e = (r = this.shadowRoot) == null ? void 0 : r.querySelector('slot[name="icone-direita"]');
|
|
311
|
+
e && e.assignedElements().forEach((o) => {
|
|
312
|
+
var u, l;
|
|
313
|
+
(((u = o.textContent) == null ? void 0 : u.trim()) === "👁️" || ((l = o.textContent) == null ? void 0 : l.trim()) === "🙈") && (o.textContent = this._senhaVisivel ? "🙈" : "👁️");
|
|
314
|
+
}), this.dispatchEvent(
|
|
315
|
+
new CustomEvent("ui-toggle-senha", {
|
|
316
|
+
detail: { visivel: this._senhaVisivel },
|
|
317
|
+
bubbles: !0,
|
|
318
|
+
composed: !0
|
|
319
|
+
})
|
|
320
|
+
);
|
|
321
|
+
}
|
|
322
|
+
syncState() {
|
|
323
|
+
this.leftSlotElement.assignedNodes().length > 0 || this.querySelector('[slot="icone-esquerda"]') !== null ? this.setAttribute("tem-icone-esquerda", "") : this.removeAttribute("tem-icone-esquerda"), v(this), f(this, this.wrapperElement), z({
|
|
324
|
+
labelElement: this.labelElement,
|
|
325
|
+
inputElement: this.inputElement,
|
|
326
|
+
labelText: this.getAttribute("label"),
|
|
327
|
+
placeholderText: this.getAttribute("placeholder") || "",
|
|
328
|
+
isFlutuante: this.hasAttribute("label-flutuante"),
|
|
329
|
+
estaFocado: this._focado,
|
|
330
|
+
obrigatorio: this.required
|
|
331
|
+
}), this.sincronizarNomeAcessivel();
|
|
332
|
+
const e = this.getAttribute("tipo") || this.getAttribute("type") || "text";
|
|
333
|
+
if (!this._senhaVisivel)
|
|
334
|
+
try {
|
|
335
|
+
this.inputElement.type = e;
|
|
336
|
+
} catch {
|
|
337
|
+
this.inputElement.type = "text";
|
|
338
|
+
}
|
|
339
|
+
this.minLength >= 0 ? this.inputElement.minLength = this.minLength : this.inputElement.removeAttribute("minlength"), this.maxLength >= 0 ? this.inputElement.maxLength = this.maxLength : this.inputElement.removeAttribute("maxlength");
|
|
340
|
+
const r = this.getAttribute("pattern");
|
|
341
|
+
r !== null ? this.inputElement.pattern = r : this.inputElement.removeAttribute("pattern"), this.internals.setFormValue(this.inputElement.value);
|
|
342
|
+
const n = this.hasAttribute("disabled") || this._formDisabled, o = this.hasAttribute("readonly");
|
|
343
|
+
this.inputElement.disabled = n, this.inputElement.readOnly = o, n ? this.wrapperElement.classList.add("ui-campo-texto__wrapper--disabled") : this.wrapperElement.classList.remove("ui-campo-texto__wrapper--disabled");
|
|
344
|
+
const u = e === "password" || this.hasAttribute("alternar-senha");
|
|
345
|
+
T(this.rightIconContainer, u, this._senhaVisivel);
|
|
346
|
+
const l = this.hasAttribute("erro") || this.hasAttribute("mensagem-erro");
|
|
347
|
+
D(
|
|
348
|
+
this.wrapperElement,
|
|
349
|
+
this.inputElement,
|
|
350
|
+
this.helperElement,
|
|
351
|
+
l,
|
|
352
|
+
this.getAttribute("mensagem-erro"),
|
|
353
|
+
this.getAttribute("helper-text")
|
|
354
|
+
), this.helperElement.style.display === "none" ? this.inputElement.removeAttribute("aria-describedby") : this.inputElement.setAttribute("aria-describedby", this.helperElement.id), this.required ? this.inputElement.setAttribute("aria-required", "true") : this.inputElement.removeAttribute("aria-required"), this.atualizarValidade();
|
|
355
|
+
}
|
|
356
|
+
/**
|
|
357
|
+
* Sem o atributo `label`, o input nativo herda o nome acessível de fora do Shadow DOM
|
|
358
|
+
* (`aria-label` no host, `<label for>` ou `<label>` envolvente).
|
|
359
|
+
*/
|
|
360
|
+
sincronizarNomeAcessivel() {
|
|
361
|
+
const t = this.getAttribute("label") ? "" : A(this, this.internals);
|
|
362
|
+
t ? this.inputElement.setAttribute("aria-label", t) : this.inputElement.removeAttribute("aria-label");
|
|
363
|
+
}
|
|
364
|
+
}
|
|
365
|
+
class F extends m {
|
|
366
|
+
}
|
|
367
|
+
p("ui-campo-texto", m);
|
|
368
|
+
p("ui-input", F);
|
|
369
|
+
export {
|
|
370
|
+
C as A,
|
|
371
|
+
d as F,
|
|
372
|
+
m as U,
|
|
373
|
+
F as a,
|
|
374
|
+
T as b,
|
|
375
|
+
I as c,
|
|
376
|
+
z as d,
|
|
377
|
+
L as r,
|
|
378
|
+
D as s
|
|
379
|
+
};
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
"use strict";var E=Object.defineProperty;var A=(t,i,e)=>i in t?E(t,i,{enumerable:!0,configurable:!0,writable:!0,value:e}):t[i]=e;var s=(t,i,e)=>A(t,typeof i!="symbol"?i+"":i,e);const _=require("./listener-bag-D5omxZ9h.cjs"),g=require("./ssr-safe-CiHD1adl.cjs"),f=require("./opcoes-vdAUY5OI.cjs"),w=':host{display:block;width:100%;box-sizing:border-box}:host([hidden]){display:none}:host(.h-full),:host([style*="height: 100%"]){height:100%}.ui-card{display:flex;flex-direction:column;width:100%;height:100%;box-sizing:border-box;background-color:var(--ui-cor-fundo-card, #18181c);border:1px solid var(--ui-cor-borda, rgba(255, 255, 255, .12));border-radius:var(--ui-raio-borda, 8px);overflow:hidden;transition:transform .2s cubic-bezier(.4,0,.2,1),box-shadow .2s cubic-bezier(.4,0,.2,1),border-color .2s ease;color:var(--ui-cor-texto, #e1e1e6);font-family:var(--ui-fonte-base, "Inter", sans-serif)}.ui-card--plano{background-color:var(--ui-cor-fundo-card, #18181c);box-shadow:none}.ui-card--elevado{background-color:var(--ui-cor-fundo-elevado, #1e1e24);box-shadow:var(--ui-sombra-lg, 0 8px 24px rgba(0, 0, 0, .4));border-color:color-mix(in srgb,var(--ui-cor-texto, #e1e1e6) 8%,transparent)}.ui-card--destaque{border-color:var(--ui-cor-primaria, #00E08A);background-color:var(--ui-cor-fundo-card, #18181c);box-shadow:0 0 0 1px color-mix(in srgb,var(--ui-cor-primaria, #00E08A) 25%,transparent)}.ui-card--clicavel{cursor:pointer;-webkit-user-select:none;user-select:none}@media (hover: hover){.ui-card--clicavel:hover{transform:translateY(-3px);border-color:var(--ui-cor-primaria, #00E08A);box-shadow:var(--ui-sombra-lg, 0 10px 30px rgba(0, 0, 0, .5)),0 0 15px color-mix(in srgb,var(--ui-cor-primaria, #00E08A) 15%,transparent)}}.ui-card--clicavel:active{transform:translateY(-1px)}.ui-card--clicavel:focus-visible{outline:2px solid var(--ui-cor-primaria, #00E08A);outline-offset:2px;border-color:var(--ui-cor-primaria, #00E08A)}@media (prefers-reduced-motion: reduce){.ui-card{transition:none}.ui-card--clicavel:hover,.ui-card--clicavel:active{transform:none}}.ui-card--disabled{opacity:.5;cursor:not-allowed!important;pointer-events:none}.ui-card__media{width:100%;overflow:hidden;display:block;line-height:0}::slotted([slot="midia"]),::slotted([slot="media"]){width:100%;height:auto;display:block;object-fit:cover}.ui-card__header{padding:14px 16px 8px;display:flex;align-items:center;justify-content:space-between;gap:12px;box-sizing:border-box}.ui-card__body{padding:12px 16px;flex:1;box-sizing:border-box}.ui-card__footer{padding:10px 16px 14px;border-top:1px solid color-mix(in srgb,var(--ui-cor-texto, #e1e1e6) 6%,transparent);display:flex;align-items:center;justify-content:space-between;gap:12px;box-sizing:border-box}.ui-card--compacto .ui-card__header{padding:10px 12px 6px}.ui-card--compacto .ui-card__body{padding:8px 12px}.ui-card--compacto .ui-card__footer{padding:8px 12px 10px}:host(.squarecircle) .ui-card,:host(.squarecircles) .ui-card,:host(.ui-squarecircle) .ui-card,:host(.ui-squarecircles) .ui-card,:host([formato="squarecircle"]) .ui-card,:host([formato="squarecircles"]) .ui-card,:host([formato="squircle"]) .ui-card{border-radius:var(--ui-raio-lg, 12px)}',k=["button","a","input","select","textarea","label","summary","ui-botao","ui-switch","ui-checkbox","ui-radio","ui-campo-texto","ui-segmented",'[contenteditable]:not([contenteditable="false"])','[role="button"]','[role="link"]','[role="checkbox"]','[role="switch"]','[role="menuitem"]'].join(", ");function C(t,i){if(typeof Element>"u"||!(t instanceof Element))return!1;const e=t.closest(k);return e!==null&&e!==i&&i.contains(e)}function S(t,i){return t.key!=="Enter"&&t.key!==" "||t.repeat||t.ctrlKey||t.altKey||t.metaKey?!1:t.target===i}function q(t,i,e){return Array.from(i.children).some(r=>e.includes(r.getAttribute("slot")??""))?!0:t?Array.from(t.querySelectorAll("slot")).filter(r=>e.includes(r.name)).some(r=>r.assignedNodes({flatten:!0}).some(o=>o.nodeType===1||o.nodeType===3&&(o.textContent??"").trim()!=="")):!1}const x=["plano","elevado","destaque"];class y extends g.SafeHTMLElement{constructor(){super();s(this,"cardElement");s(this,"listeners",new _.ListenerBag);s(this,"handleSlotChange",()=>{this.syncState()});s(this,"handleClick",e=>{this.disabled||!this.clicavel||e&&C(e.target,this)||this.emitirClique()});s(this,"handleKeyDown",e=>{!this.clicavel||this.disabled||!S(e,this.cardElement)||(e.preventDefault(),this.emitirClique())});const e=this.attachShadow({mode:"open"});e.innerHTML=`
|
|
2
|
+
<style>${w}</style>
|
|
3
|
+
<div class="ui-card" part="base">
|
|
4
|
+
<div class="ui-card__media" part="midia">
|
|
5
|
+
<slot name="midia"></slot>
|
|
6
|
+
<slot name="media"></slot>
|
|
7
|
+
</div>
|
|
8
|
+
<div class="ui-card__header" part="cabecalho">
|
|
9
|
+
<slot name="cabecalho"></slot>
|
|
10
|
+
<slot name="header"></slot>
|
|
11
|
+
</div>
|
|
12
|
+
<div class="ui-card__body" part="corpo">
|
|
13
|
+
<slot></slot>
|
|
14
|
+
</div>
|
|
15
|
+
<div class="ui-card__footer" part="rodape">
|
|
16
|
+
<slot name="rodape"></slot>
|
|
17
|
+
<slot name="footer"></slot>
|
|
18
|
+
</div>
|
|
19
|
+
</div>
|
|
20
|
+
`,this.cardElement=e.querySelector(".ui-card")}static get observedAttributes(){return["elevacao","elevation","variante","variant","formato","clicavel","clickable","compacto","compact","disabled","aria-label"]}connectedCallback(){var a;this.listeners.cleanup(),this.listeners.add(this.cardElement,"click",this.handleClick),this.listeners.add(this.cardElement,"keydown",this.handleKeyDown);const e=(a=this.shadowRoot)==null?void 0:a.querySelectorAll("slot");e==null||e.forEach(c=>this.listeners.add(c,"slotchange",this.handleSlotChange)),this.syncState()}disconnectedCallback(){this.listeners.cleanup()}attributeChangedCallback(e,a,c){this.syncState()}focus(e){this.clicavel&&!this.disabled?this.cardElement.focus(e):super.focus(e)}get clicavel(){return this.hasAttribute("clicavel")||this.hasAttribute("clickable")}set clicavel(e){e?this.setAttribute("clicavel",""):(this.removeAttribute("clicavel"),this.removeAttribute("clickable")),this.syncState()}get disabled(){return this.hasAttribute("disabled")}set disabled(e){e?this.setAttribute("disabled",""):this.removeAttribute("disabled"),this.syncState()}syncState(){var b,m,p,v;const e=f.escolherOpcao(this.getAttribute("elevacao")||this.getAttribute("elevation"),x,"plano"),a=f.escolherOpcaoOpcional(this.getAttribute("variante")||this.getAttribute("variant"),x),c=this.clicavel,r=this.hasAttribute("compacto")||this.hasAttribute("compact"),o=this.disabled;if(this.cardElement.className="ui-card",this.cardElement.classList.add(`ui-card--${e}`),a&&this.cardElement.classList.add(`ui-card--${a}`),c){this.cardElement.classList.add("ui-card--clicavel"),this.cardElement.setAttribute("role","button"),this.cardElement.setAttribute("tabindex",o?"-1":"0");const l=(b=this.getAttribute("aria-label"))==null?void 0:b.trim();l?this.cardElement.setAttribute("aria-label",l):this.cardElement.removeAttribute("aria-label")}else this.cardElement.removeAttribute("role"),this.cardElement.removeAttribute("tabindex"),this.cardElement.removeAttribute("aria-label");o?this.cardElement.setAttribute("aria-disabled","true"):this.cardElement.removeAttribute("aria-disabled"),r&&this.cardElement.classList.add("ui-card--compacto"),o&&this.cardElement.classList.add("ui-card--disabled");const n=(m=this.shadowRoot)==null?void 0:m.querySelector(".ui-card__header"),u=(p=this.shadowRoot)==null?void 0:p.querySelector(".ui-card__footer"),h=(v=this.shadowRoot)==null?void 0:v.querySelector(".ui-card__media"),d=l=>q(this.shadowRoot,this,l);h&&(h.style.display=d(["midia","media"])?"block":"none"),n&&(n.style.display=d(["cabecalho","header"])?"flex":"none"),u&&(u.style.display=d(["rodape","footer"])?"flex":"none")}emitirClique(){const e={id:this.id||"sem-id"};this.dispatchEvent(new CustomEvent("ui-click",{detail:e,bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("ui-clique",{detail:{...e},bubbles:!0,composed:!0}))}}g.definirCustomElement("ui-card",y);exports.UICard=y;
|
|
@@ -0,0 +1,144 @@
|
|
|
1
|
+
var x = Object.defineProperty;
|
|
2
|
+
var g = (t, i, e) => i in t ? x(t, i, { enumerable: !0, configurable: !0, writable: !0, value: e }) : t[i] = e;
|
|
3
|
+
var s = (t, i, e) => g(t, typeof i != "symbol" ? i + "" : i, e);
|
|
4
|
+
import { L as y } from "./listener-bag-DQgv7OON.js";
|
|
5
|
+
import { d as E, S as A } from "./ssr-safe-5cWfJP-s.js";
|
|
6
|
+
import { e as _, a as w } from "./opcoes-CupvWVIm.js";
|
|
7
|
+
const k = ':host{display:block;width:100%;box-sizing:border-box}:host([hidden]){display:none}:host(.h-full),:host([style*="height: 100%"]){height:100%}.ui-card{display:flex;flex-direction:column;width:100%;height:100%;box-sizing:border-box;background-color:var(--ui-cor-fundo-card, #18181c);border:1px solid var(--ui-cor-borda, rgba(255, 255, 255, .12));border-radius:var(--ui-raio-borda, 8px);overflow:hidden;transition:transform .2s cubic-bezier(.4,0,.2,1),box-shadow .2s cubic-bezier(.4,0,.2,1),border-color .2s ease;color:var(--ui-cor-texto, #e1e1e6);font-family:var(--ui-fonte-base, "Inter", sans-serif)}.ui-card--plano{background-color:var(--ui-cor-fundo-card, #18181c);box-shadow:none}.ui-card--elevado{background-color:var(--ui-cor-fundo-elevado, #1e1e24);box-shadow:var(--ui-sombra-lg, 0 8px 24px rgba(0, 0, 0, .4));border-color:color-mix(in srgb,var(--ui-cor-texto, #e1e1e6) 8%,transparent)}.ui-card--destaque{border-color:var(--ui-cor-primaria, #00E08A);background-color:var(--ui-cor-fundo-card, #18181c);box-shadow:0 0 0 1px color-mix(in srgb,var(--ui-cor-primaria, #00E08A) 25%,transparent)}.ui-card--clicavel{cursor:pointer;-webkit-user-select:none;user-select:none}@media (hover: hover){.ui-card--clicavel:hover{transform:translateY(-3px);border-color:var(--ui-cor-primaria, #00E08A);box-shadow:var(--ui-sombra-lg, 0 10px 30px rgba(0, 0, 0, .5)),0 0 15px color-mix(in srgb,var(--ui-cor-primaria, #00E08A) 15%,transparent)}}.ui-card--clicavel:active{transform:translateY(-1px)}.ui-card--clicavel:focus-visible{outline:2px solid var(--ui-cor-primaria, #00E08A);outline-offset:2px;border-color:var(--ui-cor-primaria, #00E08A)}@media (prefers-reduced-motion: reduce){.ui-card{transition:none}.ui-card--clicavel:hover,.ui-card--clicavel:active{transform:none}}.ui-card--disabled{opacity:.5;cursor:not-allowed!important;pointer-events:none}.ui-card__media{width:100%;overflow:hidden;display:block;line-height:0}::slotted([slot="midia"]),::slotted([slot="media"]){width:100%;height:auto;display:block;object-fit:cover}.ui-card__header{padding:14px 16px 8px;display:flex;align-items:center;justify-content:space-between;gap:12px;box-sizing:border-box}.ui-card__body{padding:12px 16px;flex:1;box-sizing:border-box}.ui-card__footer{padding:10px 16px 14px;border-top:1px solid color-mix(in srgb,var(--ui-cor-texto, #e1e1e6) 6%,transparent);display:flex;align-items:center;justify-content:space-between;gap:12px;box-sizing:border-box}.ui-card--compacto .ui-card__header{padding:10px 12px 6px}.ui-card--compacto .ui-card__body{padding:8px 12px}.ui-card--compacto .ui-card__footer{padding:8px 12px 10px}:host(.squarecircle) .ui-card,:host(.squarecircles) .ui-card,:host(.ui-squarecircle) .ui-card,:host(.ui-squarecircles) .ui-card,:host([formato="squarecircle"]) .ui-card,:host([formato="squarecircles"]) .ui-card,:host([formato="squircle"]) .ui-card{border-radius:var(--ui-raio-lg, 12px)}', C = [
|
|
8
|
+
"button",
|
|
9
|
+
"a",
|
|
10
|
+
"input",
|
|
11
|
+
"select",
|
|
12
|
+
"textarea",
|
|
13
|
+
"label",
|
|
14
|
+
"summary",
|
|
15
|
+
"ui-botao",
|
|
16
|
+
"ui-switch",
|
|
17
|
+
"ui-checkbox",
|
|
18
|
+
"ui-radio",
|
|
19
|
+
"ui-campo-texto",
|
|
20
|
+
"ui-segmented",
|
|
21
|
+
'[contenteditable]:not([contenteditable="false"])',
|
|
22
|
+
'[role="button"]',
|
|
23
|
+
'[role="link"]',
|
|
24
|
+
'[role="checkbox"]',
|
|
25
|
+
'[role="switch"]',
|
|
26
|
+
'[role="menuitem"]'
|
|
27
|
+
].join(", ");
|
|
28
|
+
function S(t, i) {
|
|
29
|
+
if (typeof Element > "u" || !(t instanceof Element)) return !1;
|
|
30
|
+
const e = t.closest(C);
|
|
31
|
+
return e !== null && e !== i && i.contains(e);
|
|
32
|
+
}
|
|
33
|
+
function q(t, i) {
|
|
34
|
+
return t.key !== "Enter" && t.key !== " " || t.repeat || t.ctrlKey || t.altKey || t.metaKey ? !1 : t.target === i;
|
|
35
|
+
}
|
|
36
|
+
function L(t, i, e) {
|
|
37
|
+
return Array.from(i.children).some((r) => e.includes(r.getAttribute("slot") ?? "")) ? !0 : t ? Array.from(t.querySelectorAll("slot")).filter((r) => e.includes(r.name)).some(
|
|
38
|
+
(r) => r.assignedNodes({ flatten: !0 }).some(
|
|
39
|
+
(o) => o.nodeType === 1 || o.nodeType === 3 && (o.textContent ?? "").trim() !== ""
|
|
40
|
+
)
|
|
41
|
+
) : !1;
|
|
42
|
+
}
|
|
43
|
+
const v = ["plano", "elevado", "destaque"];
|
|
44
|
+
class O extends A {
|
|
45
|
+
constructor() {
|
|
46
|
+
super();
|
|
47
|
+
s(this, "cardElement");
|
|
48
|
+
s(this, "listeners", new y());
|
|
49
|
+
s(this, "handleSlotChange", () => {
|
|
50
|
+
this.syncState();
|
|
51
|
+
});
|
|
52
|
+
s(this, "handleClick", (e) => {
|
|
53
|
+
this.disabled || !this.clicavel || e && S(e.target, this) || this.emitirClique();
|
|
54
|
+
});
|
|
55
|
+
s(this, "handleKeyDown", (e) => {
|
|
56
|
+
!this.clicavel || this.disabled || !q(e, this.cardElement) || (e.preventDefault(), this.emitirClique());
|
|
57
|
+
});
|
|
58
|
+
const e = this.attachShadow({ mode: "open" });
|
|
59
|
+
e.innerHTML = `
|
|
60
|
+
<style>${k}</style>
|
|
61
|
+
<div class="ui-card" part="base">
|
|
62
|
+
<div class="ui-card__media" part="midia">
|
|
63
|
+
<slot name="midia"></slot>
|
|
64
|
+
<slot name="media"></slot>
|
|
65
|
+
</div>
|
|
66
|
+
<div class="ui-card__header" part="cabecalho">
|
|
67
|
+
<slot name="cabecalho"></slot>
|
|
68
|
+
<slot name="header"></slot>
|
|
69
|
+
</div>
|
|
70
|
+
<div class="ui-card__body" part="corpo">
|
|
71
|
+
<slot></slot>
|
|
72
|
+
</div>
|
|
73
|
+
<div class="ui-card__footer" part="rodape">
|
|
74
|
+
<slot name="rodape"></slot>
|
|
75
|
+
<slot name="footer"></slot>
|
|
76
|
+
</div>
|
|
77
|
+
</div>
|
|
78
|
+
`, this.cardElement = e.querySelector(".ui-card");
|
|
79
|
+
}
|
|
80
|
+
static get observedAttributes() {
|
|
81
|
+
return [
|
|
82
|
+
"elevacao",
|
|
83
|
+
"elevation",
|
|
84
|
+
"variante",
|
|
85
|
+
"variant",
|
|
86
|
+
"formato",
|
|
87
|
+
"clicavel",
|
|
88
|
+
"clickable",
|
|
89
|
+
"compacto",
|
|
90
|
+
"compact",
|
|
91
|
+
"disabled",
|
|
92
|
+
"aria-label"
|
|
93
|
+
];
|
|
94
|
+
}
|
|
95
|
+
connectedCallback() {
|
|
96
|
+
var a;
|
|
97
|
+
this.listeners.cleanup(), this.listeners.add(this.cardElement, "click", this.handleClick), this.listeners.add(this.cardElement, "keydown", this.handleKeyDown);
|
|
98
|
+
const e = (a = this.shadowRoot) == null ? void 0 : a.querySelectorAll("slot");
|
|
99
|
+
e == null || e.forEach((c) => this.listeners.add(c, "slotchange", this.handleSlotChange)), this.syncState();
|
|
100
|
+
}
|
|
101
|
+
disconnectedCallback() {
|
|
102
|
+
this.listeners.cleanup();
|
|
103
|
+
}
|
|
104
|
+
attributeChangedCallback(e, a, c) {
|
|
105
|
+
this.syncState();
|
|
106
|
+
}
|
|
107
|
+
/** Leva o foco ao card clicável e habilitado; nos demais casos mantém o comportamento nativo do host. */
|
|
108
|
+
focus(e) {
|
|
109
|
+
this.clicavel && !this.disabled ? this.cardElement.focus(e) : super.focus(e);
|
|
110
|
+
}
|
|
111
|
+
get clicavel() {
|
|
112
|
+
return this.hasAttribute("clicavel") || this.hasAttribute("clickable");
|
|
113
|
+
}
|
|
114
|
+
set clicavel(e) {
|
|
115
|
+
e ? this.setAttribute("clicavel", "") : (this.removeAttribute("clicavel"), this.removeAttribute("clickable")), this.syncState();
|
|
116
|
+
}
|
|
117
|
+
get disabled() {
|
|
118
|
+
return this.hasAttribute("disabled");
|
|
119
|
+
}
|
|
120
|
+
set disabled(e) {
|
|
121
|
+
e ? this.setAttribute("disabled", "") : this.removeAttribute("disabled"), this.syncState();
|
|
122
|
+
}
|
|
123
|
+
syncState() {
|
|
124
|
+
var b, m, p, f;
|
|
125
|
+
const e = _(this.getAttribute("elevacao") || this.getAttribute("elevation"), v, "plano"), a = w(this.getAttribute("variante") || this.getAttribute("variant"), v), c = this.clicavel, r = this.hasAttribute("compacto") || this.hasAttribute("compact"), o = this.disabled;
|
|
126
|
+
if (this.cardElement.className = "ui-card", this.cardElement.classList.add(`ui-card--${e}`), a && this.cardElement.classList.add(`ui-card--${a}`), c) {
|
|
127
|
+
this.cardElement.classList.add("ui-card--clicavel"), this.cardElement.setAttribute("role", "button"), this.cardElement.setAttribute("tabindex", o ? "-1" : "0");
|
|
128
|
+
const l = (b = this.getAttribute("aria-label")) == null ? void 0 : b.trim();
|
|
129
|
+
l ? this.cardElement.setAttribute("aria-label", l) : this.cardElement.removeAttribute("aria-label");
|
|
130
|
+
} else
|
|
131
|
+
this.cardElement.removeAttribute("role"), this.cardElement.removeAttribute("tabindex"), this.cardElement.removeAttribute("aria-label");
|
|
132
|
+
o ? this.cardElement.setAttribute("aria-disabled", "true") : this.cardElement.removeAttribute("aria-disabled"), r && this.cardElement.classList.add("ui-card--compacto"), o && this.cardElement.classList.add("ui-card--disabled");
|
|
133
|
+
const n = (m = this.shadowRoot) == null ? void 0 : m.querySelector(".ui-card__header"), u = (p = this.shadowRoot) == null ? void 0 : p.querySelector(".ui-card__footer"), h = (f = this.shadowRoot) == null ? void 0 : f.querySelector(".ui-card__media"), d = (l) => L(this.shadowRoot, this, l);
|
|
134
|
+
h && (h.style.display = d(["midia", "media"]) ? "block" : "none"), n && (n.style.display = d(["cabecalho", "header"]) ? "flex" : "none"), u && (u.style.display = d(["rodape", "footer"]) ? "flex" : "none");
|
|
135
|
+
}
|
|
136
|
+
emitirClique() {
|
|
137
|
+
const e = { id: this.id || "sem-id" };
|
|
138
|
+
this.dispatchEvent(new CustomEvent("ui-click", { detail: e, bubbles: !0, composed: !0 })), this.dispatchEvent(new CustomEvent("ui-clique", { detail: { ...e }, bubbles: !0, composed: !0 }));
|
|
139
|
+
}
|
|
140
|
+
}
|
|
141
|
+
E("ui-card", O);
|
|
142
|
+
export {
|
|
143
|
+
O as U
|
|
144
|
+
};
|