@thibezer/ui-components-kit 2.2.1 → 2.3.0

package/dist/components/ui-camadas/camadas-arraste-controles.d.ts

@@ -0,0 +1,2 @@
+import { CamadasHostCompleto } from './camadas-host';
+export declare function conectarArrasteControles(host: CamadasHostCompleto, shadow: ShadowRoot): void;

package/dist/components/ui-cores/cores-utils.d.ts

@@ -0,0 +1,13 @@
+import { ValorCor } from './tipos';
+/** Paleta técnica padrão (CAD/GIS) do seletor de cor. */
+export declare const PALETA_CORES_PADRAO: readonly string[];
+/**
+ * Normaliza uma cor para `#rrggbb` minúsculo ou `'none'`.
+ * Aceita `#rgb`, `#rrggbb`, `none` e `transparent` (sem cor); devolve `null` para qualquer outro valor.
+ */
+export declare function normalizarCor(cor: unknown): ValorCor | null;
+/** Limita a opacidade a [0, 1]; valores inválidos viram `padrao`. */
+export declare function normalizarOpacidade(valor: unknown, padrao?: number): number;
+/** Lista de cores válidas e sem repetição, na ordem recebida. */
+export declare function coresUnicas(cores: unknown): string[];
+export declare function escaparHtml(texto: unknown): string;

package/dist/components/ui-cores/index.d.ts

@@ -0,0 +1,4 @@
+export * from './tipos';
+export * from './cores-utils';
+export * from './ui-seletor-cor';
+export * from './ui-controle-cores';

package/dist/components/ui-cores/tipos.d.ts

@@ -0,0 +1,79 @@
+/** Qual das duas cores de uma forma está em edição. */
+export type AlvoCor = 'preenchimento' | 'traco';
+/**
+ * Cor aceita pelos componentes de cor: hexadecimal `#rrggbb` (ou `#rgb`) ou `'none'` (sem cor).
+ * Internamente tudo é normalizado para `#rrggbb` minúsculo ou `'none'`.
+ */
+export type ValorCor = string;
+/** Estado emitido pelo `<ui-seletor-cor>` a cada alteração, confirmação ou cancelamento. */
+export interface DetalheSeletorCor {
+    /** Alvo em edição no momento do evento. */
+    alvo: AlvoCor;
+    /** Cor do alvo em edição (no modo simples, a única cor). */
+    cor: ValorCor;
+    preenchimento: ValorCor;
+    traco: ValorCor;
+    /** Opacidade do preenchimento, de 0 a 1. */
+    opacidade: number;
+}
+/** Opções de `abrirSeletorCor()`. */
+export interface OpcoesSeletorCor {
+    /** Elemento ao lado do qual o seletor aparece (à direita; à esquerda se não couber). */
+    ancora: Element;
+    titulo?: string;
+    /**
+     * `duplo` mostra as abas Preenchimento/Traço (exige `preenchimento` e `traco`);
+     * `simples` edita uma única `cor`. Padrão: `duplo` quando `preenchimento` e `traco` são informados.
+     */
+    modo?: 'duplo' | 'simples';
+    alvo?: AlvoCor;
+    preenchimento?: ValorCor;
+    traco?: ValorCor;
+    /** Cor inicial do modo simples. */
+    cor?: ValorCor;
+    /** Opacidade inicial do preenchimento (0 a 1). Padrão 0.35. */
+    opacidade?: number;
+    /** Mostra o controle de opacidade. Padrão: só quando o alvo é o preenchimento. */
+    mostrarOpacidade?: boolean;
+    /** A cor inicial representa uma seleção com cores diferentes (mostra "MISTO"). */
+    misto?: boolean;
+    /** Cores extras oferecidas em "Cores do projeto" (duplicadas e inválidas são ignoradas). */
+    coresProjeto?: ValorCor[];
+    /** Substitui a paleta padrão. */
+    paleta?: ValorCor[];
+    /** Cada alteração (pré-visualização, ainda não confirmada). */
+    aoAlterar?: (detalhe: DetalheSeletorCor) => void;
+    /** Ao fechar confirmando: Concluir, ✕, Enter no hexadecimal, Esc ou clique fora. */
+    aoConfirmar?: (detalhe: DetalheSeletorCor) => void;
+    /** Ao cancelar: as cores iniciais são restauradas (com um `aoAlterar` antes) e não há confirmação. */
+    aoCancelar?: (detalhe: DetalheSeletorCor) => void;
+    /** Ao trocar de aba Preenchimento/Traço. */
+    aoTrocarAlvo?: (alvo: AlvoCor) => void;
+}
+/** Controle de um seletor aberto por `abrirSeletorCor()`. */
+export interface SeletorCorAberto {
+    readonly elemento: HTMLElement;
+    /** Fecha o seletor; com `confirmar` (padrão `true`) chama `aoConfirmar`. */
+    fechar(confirmar?: boolean): void;
+    readonly aberto: boolean;
+}
+/** Detalhe do evento `ui-cores-change` do `<ui-controle-cores>`. */
+export interface DetalheControleCores {
+    preenchimento: ValorCor;
+    traco: ValorCor;
+    opacidade: number;
+    alvo: AlvoCor;
+    /** `false` durante a pré-visualização no seletor; `true` quando a alteração deve ser gravada. */
+    confirmado: boolean;
+    /** Quais valores mudaram. */
+    alterados: Array<'preenchimento' | 'traco' | 'opacidade'>;
+    /** O que gerou a mudança. */
+    origem: 'seletor' | 'inverter' | 'sem-cor' | 'padrao';
+}
+/** Textos de atalho exibidos nas dicas dos botões (o kit não registra os atalhos; quem usa decide). */
+export interface AtalhosControleCores {
+    alternar?: string;
+    inverter?: string;
+    semCor?: string;
+    padrao?: string;
+}

package/dist/components/ui-cores/ui-controle-cores.d.ts

@@ -0,0 +1,93 @@
+import { SafeHTMLElement } from '../../core/ssr-safe';
+import { AlvoCor, AtalhosControleCores, ValorCor } from './tipos';
+/**
+ * <ui-controle-cores> — par de cores de desenho no estilo Illustrator: preenchimento na frente,
+ * traço atrás, e botões de canto para inverter, "sem cor" e restaurar o padrão.
+ *
+ * - Clique na amostra de trás: ela vira o alvo ativo. Clique no alvo ativo (ou duplo clique,
+ *   Enter, Espaço): abre o `<ui-seletor-cor>` ao lado.
+ * - Mudanças feitas pelo usuário emitem `ui-cores-change`; `confirmado: false` é pré-visualização
+ *   (seletor aberto), `confirmado: true` deve ser gravado. Métodos `definir*` não emitem eventos.
+ * - O kit não registra atalhos de teclado; quem usa chama `alternarAlvo()`, `inverter()`,
+ *   `semCor()` e `restaurarPadrao()` e pode exibir as teclas nas dicas via `atalhos`.
+ *
+ * Atributos: preenchimento, traco, opacidade, alvo (preenchimento|traco), padrao-preenchimento,
+ *            padrao-traco, titulo-seletor, so-traco, desabilitado
+ * Propriedades: preenchimento, traco, opacidade, alvo, coresProjeto, atalhos, seletorAberto
+ * Métodos: definirCores(), obterCores(), definirAlvo(), alternarAlvo(), definirMisto(), inverter(),
+ *          semCor(), restaurarPadrao(), abrirSeletor(), fecharSeletor()
+ * Eventos: ui-cores-change (DetalheControleCores), ui-alvo-change { alvo }
+ */
+export declare class UIControleCores extends SafeHTMLElement {
+    static get observedAttributes(): string[];
+    private raiz;
+    private listeners;
+    private renderizado;
+    private _preenchimento;
+    private _traco;
+    private _opacidade;
+    private _alvo;
+    private _misto;
+    private _padrao;
+    private _coresProjeto;
+    private _atalhos;
+    private seletor;
+    private estadoAoAbrir;
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    attributeChangedCallback(nome: string, antigo: string | null, valor: string | null): void;
+    get preenchimento(): ValorCor;
+    set preenchimento(v: ValorCor);
+    get traco(): ValorCor;
+    set traco(v: ValorCor);
+    get opacidade(): number;
+    set opacidade(v: number);
+    get alvo(): AlvoCor;
+    set alvo(v: AlvoCor);
+    /** Cores oferecidas em "Cores do projeto" no seletor. */
+    get coresProjeto(): string[];
+    set coresProjeto(v: string[]);
+    /** Teclas exibidas nas dicas dos botões (ex.: `{ inverter: 'Shift+X' }`). */
+    get atalhos(): AtalhosControleCores;
+    set atalhos(v: AtalhosControleCores);
+    get seletorAberto(): boolean;
+    /** Define cores e/ou opacidade sem emitir eventos. Valores inválidos são ignorados; uma cor definida deixa de ser "mista". */
+    definirCores(cores?: {
+        preenchimento?: ValorCor;
+        traco?: ValorCor;
+        opacidade?: number;
+    }): void;
+    obterCores(): {
+        preenchimento: ValorCor;
+        traco: ValorCor;
+        opacidade: number;
+        alvo: AlvoCor;
+    };
+    /** Marca a amostra como ativa sem emitir eventos. */
+    definirAlvo(alvo: AlvoCor): void;
+    /** Mostra "?" nas amostras cujas cores divergem na seleção atual. */
+    definirMisto(misto?: {
+        preenchimento?: boolean;
+        traco?: boolean;
+    }): void;
+    /** Alterna o alvo ativo entre preenchimento e traço; emite `ui-alvo-change`. */
+    alternarAlvo(): void;
+    /** Troca preenchimento e traço; emite `ui-cores-change` confirmado. */
+    inverter(): void;
+    /** "Sem cor" no alvo indicado (padrão: o ativo); emite `ui-cores-change` confirmado. */
+    semCor(alvo?: AlvoCor): void;
+    /** Volta às cores de `padrao-preenchimento` e `padrao-traco`; emite `ui-cores-change` confirmado. */
+    restaurarPadrao(): void;
+    /** Abre o seletor de cor ancorado na amostra do alvo (que passa a ser o ativo). */
+    abrirSeletor(alvo?: AlvoCor): void;
+    /** Fecha o seletor aberto por este controle (confirmando, por padrão). */
+    fecharSeletor(confirmar?: boolean): void;
+    private mudarAlvo;
+    private aplicarDoSeletor;
+    private emitirCores;
+    private dica;
+    private renderizar;
+    private vincularEventos;
+    private atualizar;
+}

package/dist/components/ui-cores/ui-seletor-cor.d.ts

@@ -0,0 +1,65 @@
+import { SafeHTMLElement } from '../../core/ssr-safe';
+import { AlvoCor, DetalheSeletorCor, OpcoesSeletorCor, SeletorCorAberto, ValorCor } from './tipos';
+/** Configuração aceita por `UISeletorCor.configurar()` (as opções de `abrirSeletorCor` sem âncora e callbacks). */
+export type ConfiguracaoSeletorCor = Omit<OpcoesSeletorCor, 'ancora' | 'aoAlterar' | 'aoConfirmar' | 'aoCancelar' | 'aoTrocarAlvo'>;
+/**
+ * <ui-seletor-cor> — painel de cor no estilo Illustrator: abas Preenchimento/Traço, prévia
+ * antes × depois, hexadecimal, seletor do sistema, opacidade do preenchimento, cores do projeto,
+ * paleta padrão e "sem cor".
+ *
+ * Normalmente aberto por `abrirSeletorCor()`, que posiciona o painel junto a uma âncora e cuida
+ * de fechar com Esc ou clique fora. Pode também ser usado direto no DOM.
+ *
+ * Métodos: configurar(opcoes), trocarAlvo(alvo), definirCor(cor), definirOpacidade(v),
+ *          confirmar(), cancelar(), obterEstado()
+ * Eventos: ui-cor-input (pré-visualização), ui-cor-confirmar, ui-cor-cancelar — detail: DetalheSeletorCor;
+ *          ui-alvo-change { alvo }
+ */
+export declare class UISeletorCor extends SafeHTMLElement {
+    private raiz;
+    private listeners;
+    private _titulo;
+    private _duplo;
+    private _alvo;
+    private _preenchimento;
+    private _traco;
+    private _opacidade;
+    private _mostrarOpacidade;
+    private _misto;
+    private _coresProjeto;
+    private _paleta;
+    private inicial;
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    /** Define o estado inicial (também usado pelo "Cancelar" para restaurar). */
+    configurar(opcoes?: ConfiguracaoSeletorCor): void;
+    get alvo(): AlvoCor;
+    /** Cor do alvo em edição. */
+    get cor(): ValorCor;
+    get opacidade(): number;
+    obterEstado(): DetalheSeletorCor;
+    /** Alterna entre Preenchimento e Traço (só no modo duplo). */
+    trocarAlvo(alvo: AlvoCor): void;
+    /** Aplica uma cor ao alvo em edição e emite `ui-cor-input`. Cores inválidas são ignoradas. */
+    definirCor(cor: ValorCor): void;
+    /** Opacidade do preenchimento (0 a 1); emite `ui-cor-input`. */
+    definirOpacidade(valor: number): void;
+    confirmar(): void;
+    /** Restaura as cores iniciais (emitindo `ui-cor-input`) e emite `ui-cor-cancelar`. */
+    cancelar(): void;
+    private get opacidadeVisivel();
+    private renderizar;
+    private atualizarVisual;
+    private vincularEventos;
+    private emitir;
+}
+/**
+ * Abre um `<ui-seletor-cor>` flutuante ao lado de `ancora` (à direita; à esquerda se não couber).
+ * Só um seletor fica aberto por vez: abrir outro descarta o anterior sem confirmar.
+ * Fecha confirmando com Concluir, ✕, Enter no hexadecimal, Esc ou clique fora; "Cancelar"
+ * restaura as cores iniciais. `X` alterna Preenchimento/Traço enquanto ele está aberto.
+ */
+export declare function abrirSeletorCor(opcoes: OpcoesSeletorCor): SeletorCorAberto;
+/** Fecha o seletor aberto por `abrirSeletorCor()`, se houver. */
+export declare function fecharSeletorCor(confirmar?: boolean): void;

package/dist/cores.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});;/* empty css                 */const r=require("./ui-controle-cores-Er6ZcQ7U.cjs");exports.PALETA_CORES_PADRAO=r.PALETA_CORES_PADRAO;exports.UIControleCores=r.UIControleCores;exports.UISeletorCor=r.UISeletorCor;exports.abrirSeletorCor=r.abrirSeletorCor;exports.coresUnicas=r.coresUnicas;exports.escaparHtml=r.escaparHtml;exports.fecharSeletorCor=r.fecharSeletorCor;exports.normalizarCor=r.normalizarCor;exports.normalizarOpacidade=r.normalizarOpacidade;

package/dist/cores.d.ts

@@ -0,0 +1,8 @@
+import { UIControleCores, UISeletorCor } from './components/ui-cores';
+export * from './components/ui-cores';
+declare global {
+    interface HTMLElementTagNameMap {
+        'ui-controle-cores': UIControleCores;
+        'ui-seletor-cor': UISeletorCor;
+    }
+}

package/dist/cores.js

@@ -0,0 +1,13 @@
+/* empty css               */
+import { P as e, U as s, a as l, b as t, c as C, e as c, f as i, n as m, d as n } from "./ui-controle-cores-BS0WYPdi.js";
+export {
+  e as PALETA_CORES_PADRAO,
+  s as UIControleCores,
+  l as UISeletorCor,
+  t as abrirSeletorCor,
+  C as coresUnicas,
+  c as escaparHtml,
+  i as fecharSeletorCor,
+  m as normalizarCor,
+  n as normalizarOpacidade
+};