@thibezer/ui-components-kit 2.12.0 → 2.12.3

package/dist/ui-controle-cores-CuDFS8Y8.cjs

@@ -0,0 +1,32 @@
+"use strict";var S=Object.defineProperty;var T=(u,h,e)=>h in u?S(u,h,{enumerable:!0,configurable:!0,writable:!0,value:e}):u[h]=e;var i=(u,h,e)=>T(u,typeof h!="symbol"?h+"":h,e);const g=require("./ssr-safe-CiHD1adl.cjs"),w=require("./listener-bag-D5omxZ9h.cjs"),p=require("./ui-seletor-cor-DPKqf5wb.cjs"),q=':host{--_a: var(--ui-controle-cores-amostra, 26px);--_pilha: calc(var(--_a) * 5 / 3);--_borda: color-mix(in srgb, var(--ui-cor-texto, #e1e1e6) 30%, transparent);--_borda-forte: color-mix(in srgb, var(--ui-cor-texto, #e1e1e6) 70%, transparent);--_base: var(--ui-cor-superficie, #1d1d22);--_destaque: var(--ui-cor-primaria, #00e08a);--_vermelho: #ef4444;display:inline-block;flex-shrink:0;-webkit-user-select:none;user-select:none}:host([hidden]){display:none}*,*:before,*:after{box-sizing:border-box}.pilha{display:flex;align-items:stretch;gap:6px}.amostras{position:relative;flex:none;width:var(--_pilha);height:var(--_pilha)}.amostra{position:absolute;width:var(--_a);height:var(--_a);padding:0;background:var(--_base);border:1px solid var(--_borda);border-radius:6px;cursor:pointer;transition:transform .15s ease,border-color .15s ease,box-shadow .15s ease,opacity .15s ease}.amostra--traco{right:0;bottom:0;z-index:1}.amostra--preenchimento{top:0;left:0;z-index:2;box-shadow:0 2px 6px #00000059}.amostra:hover{border-color:var(--_borda-forte);transform:scale(1.05)}.amostra:focus-visible{outline:2px solid var(--ui-cor-texto, #e1e1e6);outline-offset:2px}.amostra--ativa,.amostra--ativa:hover{z-index:3;border-color:var(--_destaque);box-shadow:0 0 0 1.5px var(--_destaque),0 2px 6px #00000059}:host([so-traco]) .amostra--preenchimento{opacity:.4}.face{position:absolute;top:3px;right:3px;bottom:3px;left:3px;border-radius:3.5px;pointer-events:none}.face--traco{background:transparent;border:4px solid #ffffff}.face--sem-cor{background:repeating-conic-gradient(#3a3a45,#3a3a45 25%,#24242b 0%,#24242b 50%) 50% / 6px 6px!important;border-color:#ef44448c!important;overflow:hidden}.face--sem-cor:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(to top right,transparent calc(50% - 1px),var(--_vermelho) calc(50% - 1px),var(--_vermelho) calc(50% + 1px),transparent calc(50% + 1px))}.face--misto{display:flex;align-items:center;justify-content:center;background:#2e2e38!important;border-color:#64748b!important}.face--misto:after{content:"?";color:#fff;font-size:12px;font-weight:800;line-height:1;text-shadow:0 1px 2px rgba(0,0,0,.8)}.acoes{display:flex;flex:none;flex-direction:column;gap:2px;width:16px}.acao{display:flex;flex:1;align-items:center;justify-content:center;min-height:0;padding:0;background:transparent;border:0;border-radius:4px;color:var(--ui-cor-texto-secundario, #9696a6);cursor:pointer;transition:color .15s ease,background .15s ease}.acao:hover{background:color-mix(in srgb,var(--ui-cor-texto, #e1e1e6) 12%,transparent);color:var(--_destaque)}.acao:focus-visible{outline:2px solid var(--ui-cor-texto, #e1e1e6);outline-offset:1px}.acao svg{width:12px;height:12px}.acao--sem-cor:hover{background:#ef444433;color:var(--_vermelho)}.icone-padrao{position:relative;width:11px;height:11px}.ponto{position:absolute;width:7px;height:7px;border-radius:1.5px}.ponto--preenchimento{top:0;left:0;background:#00e08a;border:1px solid var(--_borda-forte)}.ponto--traco{right:0;bottom:0;background:var(--_base);border:1.5px solid #ffffff}:host([desabilitado]) .pilha{opacity:.5}:host([desabilitado]) .amostra,:host([desabilitado]) .acao{cursor:not-allowed;pointer-events:none}@media (prefers-reduced-motion: reduce){.amostra,.acao{transition:none}.amostra:hover{transform:none}}';class C extends g.SafeHTMLElement{constructor(){super();i(this,"raiz");i(this,"listeners",new w.ListenerBag);i(this,"renderizado",!1);i(this,"_preenchimento","#00e08a");i(this,"_traco","#ffffff");i(this,"_opacidade",.35);i(this,"_espessuraTraco",2.5);i(this,"_alvo","preenchimento");i(this,"_misto",{preenchimento:!1,traco:!1});i(this,"_padrao",{preenchimento:"#00e08a",traco:"#ffffff"});i(this,"_coresProjeto",[]);i(this,"_atalhos",{});i(this,"seletor",null);i(this,"estadoAoAbrir",null);this.raiz=this.attachShadow({mode:"open"})}static get observedAttributes(){return["preenchimento","traco","opacidade","espessura-traco","alvo","padrao-preenchimento","padrao-traco","desabilitado"]}connectedCallback(){this.renderizado||this.renderizar(),this.listeners.cleanup(),this.vincularEventos(),this.atualizar()}disconnectedCallback(){this.fecharSeletor(!0),this.listeners.cleanup()}attributeChangedCallback(e,t,r){if(t!==r){if(e==="desabilitado"){this.hasAttribute("desabilitado")&&this.fecharSeletor(!1),this.atualizar();return}if(r!==null){if(e==="preenchimento")this.definirCores({preenchimento:r});else if(e==="traco")this.definirCores({traco:r});else if(e==="opacidade")this.definirCores({opacidade:Number(r)});else if(e==="espessura-traco")this.definirCores({espessuraTraco:p.normalizarEspessura(r)});else if(e==="alvo")this.definirAlvo(r);else if(e==="padrao-preenchimento"||e==="padrao-traco"){const a=p.normalizarCor(r);if(!a)return;e==="padrao-preenchimento"?this._padrao.preenchimento=a:this._padrao.traco=a,this.atualizar()}}}}get preenchimento(){return this._preenchimento}set preenchimento(e){this.definirCores({preenchimento:e})}get traco(){return this._traco}set traco(e){this.definirCores({traco:e})}get opacidade(){return this._opacidade}set opacidade(e){this.definirCores({opacidade:e})}get espessuraTraco(){return this._espessuraTraco}set espessuraTraco(e){this.definirCores({espessuraTraco:e})}get alvo(){return this._alvo}set alvo(e){this.definirAlvo(e)}get coresProjeto(){return[...this._coresProjeto]}set coresProjeto(e){this._coresProjeto=p.coresUnicas(e)}get atalhos(){return{...this._atalhos}}set atalhos(e){this._atalhos={...e||{}},this.atualizar()}get seletorAberto(){var e;return!!((e=this.seletor)!=null&&e.aberto)}definirCores(e={}){const t=p.normalizarCor(e.preenchimento),r=p.normalizarCor(e.traco);t&&(this._preenchimento=t,this._misto.preenchimento=!1),r&&(this._traco=r,this._misto.traco=!1),e.opacidade!==void 0&&(this._opacidade=p.normalizarOpacidade(e.opacidade,this._opacidade)),e.espessuraTraco!==void 0&&(this._espessuraTraco=p.normalizarEspessura(e.espessuraTraco,this._espessuraTraco)),this.atualizar()}obterCores(){return{preenchimento:this._preenchimento,traco:this._traco,opacidade:this._opacidade,espessuraTraco:this._espessuraTraco,alvo:this._alvo}}definirAlvo(e){this._alvo=e==="traco"?"traco":"preenchimento",this.atualizar(),this.sincronizarSeletor()}definirMisto(e={}){this._misto={preenchimento:!!e.preenchimento,traco:!!e.traco},this.atualizar()}alternarAlvo(){this.mudarAlvo(this._alvo==="traco"?"preenchimento":"traco")}inverter(){const e=this._preenchimento;this._preenchimento=this._traco,this._traco=e,this._misto={preenchimento:this._misto.traco,traco:this._misto.preenchimento},this.atualizar(),this.emitirCores(!0,["preenchimento","traco"],"inverter")}semCor(e=this._alvo){const t=e==="traco"?"traco":"preenchimento";t==="traco"?this._traco="none":this._preenchimento="none",this._misto[t]=!1,this.atualizar(),this.emitirCores(!0,[t],"sem-cor")}restaurarPadrao(){this._preenchimento=this._padrao.preenchimento,this._traco=this._padrao.traco,this._misto={preenchimento:!1,traco:!1},this.atualizar(),this.emitirCores(!0,["preenchimento","traco"],"padrao")}abrirSeletor(e=this._alvo,t=!1){if(this.hasAttribute("desabilitado")||(this.mudarAlvo(e==="traco"?"traco":"preenchimento"),this.seletorAberto))return;const r=this.raiz.querySelector(`[data-alvo="${this._alvo}"]`)||this;this.estadoAoAbrir=this.obterCores(),this.seletor=p.abrirSeletorCor({ancora:r,titulo:this.getAttribute("titulo-seletor")||"Cores e estilo",modo:"duplo",alvo:this._alvo,preenchimento:this._preenchimento,traco:this._traco,opacidade:this._opacidade,espessuraTraco:this._espessuraTraco,misto:this._misto[this._alvo],focar:t,aoAlterar:a=>this.aplicarDoSeletor(a,!1),aoConfirmar:a=>{this.seletor=null,this.aplicarDoSeletor(a,!0)},aoCancelar:()=>{this.seletor=null,this.estadoAoAbrir=null},aoTrocarAlvo:a=>this.mudarAlvo(a)})}fecharSeletor(e=!0){const t=this.seletor;t&&(e?t.fechar(!0):t.elemento.cancelar())}mudarAlvo(e){e!==this._alvo&&(this._alvo=e,this.atualizar(),this.sincronizarSeletor(),this.dispatchEvent(new CustomEvent("ui-alvo-change",{detail:{alvo:e},bubbles:!0,composed:!0})))}sincronizarSeletor(){var e,t;(t=(e=this.seletor)==null?void 0:e.elemento)==null||t.trocarAlvo(this._alvo)}aplicarDoSeletor(e,t){const r=o=>{const d=[];return e.preenchimento!==o.preenchimento&&d.push("preenchimento"),e.traco!==o.traco&&d.push("traco"),e.opacidade!==o.opacidade&&d.push("opacidade"),e.espessuraTraco!==void 0&&Math.abs(e.espessuraTraco-o.espessuraTraco)>.05&&d.push("espessuraTraco"),d},a=r(this.obterCores());if(this._preenchimento=e.preenchimento,this._traco=e.traco,this._opacidade=e.opacidade,e.espessuraTraco!==void 0&&(this._espessuraTraco=e.espessuraTraco),a.includes("preenchimento")&&(this._misto.preenchimento=!1),a.includes("traco")&&(this._misto.traco=!1),this.atualizar(),!t){a.length&&this.emitirCores(!1,a,"seletor");return}this.emitirCores(!0,this.estadoAoAbrir?r(this.estadoAoAbrir):a,"seletor"),this.estadoAoAbrir=null}emitirCores(e,t,r){const a={...this.obterCores(),confirmado:e,alterados:t,origem:r};this.dispatchEvent(new CustomEvent("ui-cores-change",{detail:a,bubbles:!0,composed:!0}))}dica(e,t){return t?`${e} [${t}]`:e}renderizar(){this.raiz.innerHTML=`
+      <style>${q}</style>
+      <div class="pilha" part="pilha" role="group" aria-label="Cores de desenho">
+        <div class="amostras" part="amostras">
+          <button type="button" class="amostra amostra--traco" data-alvo="traco" part="amostra amostra-traco">
+            <span class="face face--traco"></span>
+          </button>
+          <button type="button" class="amostra amostra--preenchimento" data-alvo="preenchimento" part="amostra amostra-preenchimento">
+            <span class="face face--preenchimento"></span>
+          </button>
+        </div>
+        <div class="acoes" part="acoes">
+          <button type="button" class="acao acao--inverter" data-acao="inverter" part="acao acao-inverter" aria-label="Inverter preenchimento e traço">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+              <path d="m16 3 4 4-4 4"/><path d="M20 7H4"/><path d="m8 21-4-4 4-4"/><path d="M4 17h16"/>
+            </svg>
+          </button>
+          <button type="button" class="acao acao--sem-cor" data-acao="sem-cor" part="acao acao-sem-cor" aria-label="Sem cor">
+            <svg viewBox="0 0 24 24" fill="none" stroke-width="2.4" stroke-linecap="round" aria-hidden="true">
+              <circle cx="12" cy="12" r="8" stroke="currentColor"/>
+              <line x1="6.5" y1="6.5" x2="17.5" y2="17.5" stroke="#ef4444"/>
+            </svg>
+          </button>
+          <button type="button" class="acao acao--padrao" data-acao="padrao" part="acao acao-padrao" aria-label="Restaurar cores padrão">
+            <span class="icone-padrao" aria-hidden="true">
+              <span class="ponto ponto--preenchimento"></span>
+              <span class="ponto ponto--traco"></span>
+            </span>
+          </button>
+        </div>
+      </div>
+    `,this.renderizado=!0}vincularEventos(){const e=this.raiz;e.querySelectorAll("[data-alvo]").forEach(r=>{const a=r.dataset.alvo;this.listeners.add(r,"click",o=>{o.stopPropagation(),a!==this._alvo?this.mudarAlvo(a):this.seletorAberto?this.fecharSeletor(!0):this.abrirSeletor(a)}),this.listeners.add(r,"dblclick",o=>{o.stopPropagation(),this.abrirSeletor(a)}),this.listeners.add(r,"keydown",o=>{o.key!=="Enter"&&o.key!==" "||(o.preventDefault(),a===this._alvo&&this.seletorAberto?this.fecharSeletor(!0):this.abrirSeletor(a,!0))}),this.listeners.add(r,"keyup",o=>{o.key===" "&&o.preventDefault()})});const t=(r,a)=>{this.listeners.add(e.querySelector(`[data-acao="${r}"]`),"click",o=>{o.stopPropagation(),a()})};t("inverter",()=>this.inverter()),t("sem-cor",()=>this.semCor()),t("padrao",()=>this.restaurarPadrao())}atualizar(){if(!this.renderizado)return;const e=this.raiz,t=this._atalhos,r=this.hasAttribute("desabilitado"),a=(s,n)=>n?"Misto (?) [várias cores na seleção]":s==="none"?"Sem cor":s,o=(s,n,c,y,A="")=>{const l=e.querySelector(`[data-alvo="${s}"]`),f=l==null?void 0:l.querySelector(".face");if(!l||!f)return;const _=this._alvo===s;l.classList.toggle("amostra--ativa",_),l.setAttribute("aria-pressed",String(_)),l.disabled=r,f.classList.toggle("face--misto",c),f.classList.toggle("face--sem-cor",!c&&n==="none");const k=s==="traco"?"borderColor":"backgroundColor";f.style[k]=c||n==="none"?"":n,s==="traco"&&n!=="none"&&!c&&(f.style.borderWidth=`${Math.max(2,Math.min(4.5,this._espessuraTraco))}px`);const x=`${y}: ${a(n,c)}${A}`;l.title=this.dica(`${x} — clique para ativar, clique de novo para editar`,t.alternar),l.setAttribute("aria-label",x)},d=this._preenchimento==="none"||this._misto.preenchimento?"":`, opacidade ${Math.round(this._opacidade*100)}%`;o("preenchimento",this._preenchimento,this._misto.preenchimento,"Preenchimento",d);const z=this._traco==="none"||this._misto.traco?"":`, espessura ${this._espessuraTraco}px`;o("traco",this._traco,this._misto.traco,"Traço / contorno",z);const m=(s,n)=>{const c=e.querySelector(`[data-acao="${s}"]`);c&&(c.title=n,c.disabled=r)};m("inverter",this.dica("Inverter preenchimento e traço",t.inverter)),m("sem-cor",this.dica("Sem cor no alvo ativo",t.semCor)),m("padrao",this.dica("Restaurar cores padrão",t.padrao));const b=e.querySelector(".ponto--preenchimento");b&&(b.style.backgroundColor=this._padrao.preenchimento==="none"?"transparent":this._padrao.preenchimento);const v=e.querySelector(".ponto--traco");v&&(v.style.borderColor=this._padrao.traco==="none"?"#ef4444":this._padrao.traco)}}g.definirCustomElement("ui-controle-cores",C);exports.UIControleCores=C;