@thibezer/ui-components-kit 1.0.0

package/dist/mapa.js

@@ -0,0 +1,264 @@
+var v = Object.defineProperty;
+var T = (s, n, t) => n in s ? v(s, n, { enumerable: !0, configurable: !0, writable: !0, value: t }) : s[n] = t;
+var a = (s, n, t) => T(s, typeof n != "symbol" ? n + "" : n, t);
+/* empty css               */
+import { c as _, o as h } from "./leaflet-loader-Cjcdgj5R.js";
+import { l as x, p as y } from "./leaflet-DkaFZYc5.js";
+import { d as u, S as d } from "./ssr-safe-5cWfJP-s.js";
+const M = ":host{display:block;width:100%;height:400px;position:relative;border-radius:var(--border-radius-md, 8px);overflow:hidden;box-shadow:var(--shadow-sm, 0 1px 3px rgba(0,0,0,.1))}.ui-mapa-container{width:100%;height:100%;z-index:1}.leaflet-top,.leaflet-bottom{z-index:1000}.ui-mapa-popup{font-family:inherit;font-size:13px;font-weight:500;color:#111827;padding:2px 4px}.ui-mapa-svg-pin,.ui-mapa-div-marker{background:transparent!important;border:none!important;cursor:pointer;transition:transform .15s ease,filter .15s ease}.ui-mapa-svg-pin:hover,.ui-mapa-div-marker:hover{transform:scale(1.15);filter:brightness(1.2)}";
+function w(s) {
+  return {
+    osm: {
+      nome: "OpenStreetMap",
+      layer: () => s.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
+        attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
+      })
+    },
+    satelite: {
+      nome: "Satélite (Esri)",
+      layer: () => s.tileLayer("https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}", {
+        attribution: "Tiles &copy; Esri &mdash; Source: Esri, i-cubed, USDA, USGS, AEX, GeoEye, Getmapping, Aerogrid, IGN, IGP, UPR-EGP, and the GIS User Community"
+      })
+    },
+    topografia: {
+      nome: "Topografia",
+      layer: () => s.tileLayer("https://{s}.tile.opentopomap.org/{z}/{x}/{y}.png", {
+        attribution: 'Map data: &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, <a href="http://viewfinderpanoramas.org">SRTM</a> | Map style: &copy; <a href="https://opentopomap.org">OpenTopoMap</a> (<a href="https://creativecommons.org/licenses/by-sa/3.0/">CC-BY-SA</a>)'
+      })
+    },
+    ruas: {
+      nome: "Ruas (Esri)",
+      layer: () => s.tileLayer("https://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer/tile/{z}/{y}/{x}", {
+        attribution: "Tiles &copy; Esri &mdash; Source: Esri, DeLorme, NAVTEQ, USGS, Intermap, iPC, NRCAN, Esri Japan, METI, Esri China (Hong Kong), Esri (Thailand), TomTom, 2012"
+      })
+    }
+  };
+}
+class C extends d {
+  constructor() {
+    super();
+    a(this, "mapContainer");
+    a(this, "mapInstance", null);
+    a(this, "_initTimer", null);
+    a(this, "_resizeObserver");
+    a(this, "_resizeTimer");
+    const t = this.attachShadow({ mode: "open" });
+    t.innerHTML = `
+      <style>
+        ${x}
+        ${M}
+      </style>
+      <div class="ui-mapa-container" id="map-container"></div>
+      <div style="display: none;"><slot></slot></div>
+    `, this.mapContainer = t.getElementById("map-container");
+  }
+  static get observedAttributes() {
+    return ["lat", "lng", "zoom"];
+  }
+  connectedCallback() {
+    this._initTimer = window.setTimeout(() => {
+      this.initMap();
+    }, 0);
+  }
+  disconnectedCallback() {
+    this._initTimer && (window.clearTimeout(this._initTimer), this._initTimer = null), this._resizeObserver && (this._resizeObserver.disconnect(), this._resizeObserver = void 0), this._resizeTimer && (window.clearTimeout(this._resizeTimer), this._resizeTimer = null), this.mapInstance && (this.mapInstance.remove(), this.mapInstance = null);
+  }
+  attributeChangedCallback(t, e, r) {
+    if (e !== r && this.mapInstance) {
+      const i = parseFloat(this.getAttribute("lat") || "-23.550520"), o = parseFloat(this.getAttribute("lng") || "-46.633308"), c = parseInt(this.getAttribute("zoom") || "13", 10);
+      !isNaN(i) && !isNaN(o) && this.mapInstance.setView([i, o], c);
+    }
+  }
+  async initMap() {
+    var g;
+    if (this.mapInstance) return;
+    const t = await _();
+    if (!t) {
+      this.mapContainer.innerHTML = `
+        <div style="display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; min-height: 140px; padding: 16px; box-sizing: border-box; text-align: center; color: var(--ui-cor-texto-secundario, #888899); font-family: var(--ui-fonte-base, 'Inter', sans-serif); font-size: 12px; background: var(--ui-cor-superficie, #141417); border-radius: var(--ui-raio-borda, 6px); border: 1px dashed var(--ui-cor-borda, rgba(255,255,255,0.15));">
+          <span style="font-size: 20px; margin-bottom: 6px;">🗺️</span>
+          <strong style="color: var(--ui-cor-texto, #e1e1e6); margin-bottom: 4px;">Leaflet não encontrado</strong>
+          <span style="max-width: 320px; line-height: 1.4;">Para utilizar o componente <code>&lt;ui-mapa&gt;</code>, instale a biblioteca <code>leaflet</code> ou inclua seu script no HTML: <code>&lt;script src=".../leaflet.js"&gt;&lt;/script&gt;</code>.</span>
+        </div>
+      `;
+      return;
+    }
+    const e = w(t), r = parseFloat(this.getAttribute("lat") || "-23.550520"), i = parseFloat(this.getAttribute("lng") || "-46.633308"), o = parseInt(this.getAttribute("zoom") || "13", 10);
+    this.mapInstance = t.map(this.mapContainer).setView([r, i], o);
+    const c = this.getAttribute("camadas");
+    let p = ["osm"];
+    c && (p = c.split(",").map((l) => l.trim().toLowerCase()).filter((l) => e[l]), p.length === 0 && (p = ["osm"]));
+    const f = e[p[0]].layer();
+    if (f.addTo(this.mapInstance), p.length > 1) {
+      const l = {};
+      l[e[p[0]].nome] = f;
+      for (let m = 1; m < p.length; m++) {
+        const b = p[m];
+        l[e[b].nome] = e[b].layer();
+      }
+      t.control.layers(l, void 0, { position: "topright" }).addTo(this.mapInstance);
+    }
+    (g = t.Icon) != null && g.Default && (t.Icon.Default.imagePath = "https://unpkg.com/leaflet@1.9.4/dist/images/"), typeof ResizeObserver < "u" && this.mapContainer && (this._resizeObserver = new ResizeObserver(() => {
+      this._resizeTimer && clearTimeout(this._resizeTimer), this._resizeTimer = setTimeout(() => {
+        this.mapInstance && this.mapInstance.invalidateSize();
+      }, 60);
+    }), this._resizeObserver.observe(this.mapContainer)), setTimeout(() => {
+      this.mapInstance && this.mapInstance.invalidateSize();
+    }, 100), this.dispatchEvent(new CustomEvent("ui-mapa-pronto", {
+      detail: { map: this.mapInstance },
+      bubbles: !0,
+      composed: !0
+    }));
+  }
+  getMap() {
+    return this.mapInstance;
+  }
+}
+u("ui-mapa", C);
+class I extends d {
+  constructor() {
+    super(...arguments);
+    a(this, "marker", null);
+    a(this, "_initTimer", null);
+    a(this, "_retryCount", 0);
+    a(this, "_parentMap", null);
+    a(this, "handleMapReady", () => {
+      this.marker && (this.marker.remove(), this.marker = null), this.initMarker();
+    });
+  }
+  static get observedAttributes() {
+    return ["lat", "lng", "titulo", "cor", "formato"];
+  }
+  connectedCallback() {
+    this._parentMap = this.closest("ui-mapa"), this._parentMap && this._parentMap.addEventListener("ui-mapa-pronto", this.handleMapReady), this._initTimer = setTimeout(() => this.initMarker(), 0);
+  }
+  disconnectedCallback() {
+    this._initTimer && (clearTimeout(this._initTimer), this._initTimer = null), this._parentMap && (this._parentMap.removeEventListener("ui-mapa-pronto", this.handleMapReady), this._parentMap = null), this.marker && (this.marker.remove(), this.marker = null);
+  }
+  attributeChangedCallback(t, e, r) {
+    if (e !== r && this.marker) {
+      if (t === "lat" || t === "lng") {
+        const i = y(this.getAttribute("lat"), this.getAttribute("lng"));
+        i && this.marker.setLatLng([i.lat, i.lon]);
+      }
+      if (t === "titulo" && (this.marker.unbindPopup(), r && this.marker.bindPopup(this.createPopupContent(r))), t === "cor" || t === "formato") {
+        const i = h() || window.L;
+        i && this.marker.setIcon(this.createIcon(i));
+      }
+    }
+  }
+  createPopupContent(t) {
+    const e = document.createElement("div");
+    return e.className = "ui-mapa-popup", e.textContent = t, e;
+  }
+  createIcon(t) {
+    const e = this.getAttribute("cor") || "#00f5a0";
+    if ((this.getAttribute("formato") || "pin") === "circle") {
+      const o = `<div style="width:14px; height:14px; background-color:${e}; border-radius:50%; border:2px solid #ffffff; box-shadow:0 1px 4px rgba(0,0,0,0.6);"></div>`;
+      return t.divIcon({
+        className: "ui-mapa-div-marker",
+        html: o,
+        iconSize: [14, 14],
+        iconAnchor: [7, 7]
+      });
+    }
+    const i = `
+      <svg width="24" height="32" viewBox="0 0 24 32" fill="none" xmlns="http://www.w3.org/2000/svg" style="filter: drop-shadow(0 2px 4px rgba(0,0,0,0.45));">
+        <path d="M12 0C5.372 0 0 5.372 0 12C0 21 12 32 12 32C12 32 24 21 24 12C24 5.372 18.628 0 12 0Z" fill="${e}"/>
+        <circle cx="12" cy="11" r="4.5" fill="#ffffff"/>
+      </svg>
+    `;
+    return t.divIcon({
+      className: "ui-mapa-svg-pin",
+      html: i,
+      iconSize: [24, 32],
+      iconAnchor: [12, 32],
+      popupAnchor: [0, -30]
+    });
+  }
+  initMarker() {
+    const t = this._parentMap || this.closest("ui-mapa");
+    if (!t) {
+      console.warn("<ui-mapa-marcador> deve estar dentro de um elemento <ui-mapa>");
+      return;
+    }
+    const e = t.getMap();
+    if (!e) {
+      if (this._retryCount >= 30) {
+        console.warn("<ui-mapa-marcador> Tempo limite esgotado aguardando inicialização do mapa pai.");
+        return;
+      }
+      this._retryCount++, this._initTimer = setTimeout(() => this.initMarker(), 50);
+      return;
+    }
+    this._retryCount = 0;
+    const r = y(this.getAttribute("lat"), this.getAttribute("lng"));
+    if (!r) return;
+    const i = this.getAttribute("titulo"), o = h() || window.L;
+    o && (this.marker = o.marker([r.lat, r.lon], {
+      icon: this.createIcon(o)
+    }), this.marker && (i && this.marker.bindPopup(this.createPopupContent(i)), this.marker.addTo(e)));
+  }
+}
+u("ui-mapa-marcador", I);
+class A extends d {
+  constructor() {
+    super(...arguments);
+    a(this, "polyline", null);
+    a(this, "_initTimer", null);
+    a(this, "_retryCount", 0);
+  }
+  static get observedAttributes() {
+    return ["pontos", "cor", "espessura"];
+  }
+  connectedCallback() {
+    this._initTimer = setTimeout(() => this.initLinha(), 0);
+  }
+  disconnectedCallback() {
+    this._initTimer && (clearTimeout(this._initTimer), this._initTimer = null), this.polyline && (this.polyline.remove(), this.polyline = null);
+  }
+  attributeChangedCallback(t, e, r) {
+    e !== r && this.polyline && (t === "pontos" ? this.polyline.setLatLngs(this.getPontos()) : (t === "cor" || t === "espessura") && this.polyline.setStyle({
+      color: this.getAttribute("cor") || "#3388ff",
+      weight: parseInt(this.getAttribute("espessura") || "3", 10)
+    }));
+  }
+  getPontos() {
+    try {
+      const t = this.getAttribute("pontos");
+      if (t)
+        return JSON.parse(t);
+    } catch (t) {
+      console.error('Formato inválido para atributo pontos no <ui-mapa-linha>. Deve ser um JSON array, ex: "[[lat, lng], ...]"', t);
+    }
+    return [];
+  }
+  initLinha() {
+    const t = this.closest("ui-mapa");
+    if (!t) {
+      console.warn("<ui-mapa-linha> deve estar dentro de um elemento <ui-mapa>");
+      return;
+    }
+    const e = t.getMap();
+    if (!e) {
+      if (this._retryCount >= 30) {
+        console.warn("<ui-mapa-linha> Tempo limite esgotado aguardando inicialização do mapa pai.");
+        return;
+      }
+      this._retryCount++, this._initTimer = setTimeout(() => this.initLinha(), 50);
+      return;
+    }
+    this._retryCount = 0;
+    const r = this.getAttribute("cor") || "#3388ff", i = parseInt(this.getAttribute("espessura") || "3", 10), o = h() || window.L;
+    o && (this.polyline = o.polyline(this.getPontos(), {
+      color: r,
+      weight: i
+    }), this.polyline && this.polyline.addTo(e));
+  }
+}
+u("ui-mapa-linha", A);
+export {
+  C as UIMapa,
+  A as UIMapaLinha,
+  I as UIMapaMarcador
+};

package/dist/modal.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});;/* empty css                 */const o=require("./ui-modal-Bi4isGYh.cjs");exports.UIDialog=o.UIDialog;exports.UIModal=o.UIModal;exports.aplicarInertForaDoModal=o.aplicarInertForaDoModal;exports.removerInertForaDoModal=o.removerInertForaDoModal;

package/dist/modal.d.ts

@@ -0,0 +1,8 @@
+import { UIModal, UIDialog } from './components/ui-modal';
+export * from './components/ui-modal';
+declare global {
+    interface HTMLElementTagNameMap {
+        'ui-modal': UIModal;
+        'ui-dialog': UIDialog;
+    }
+}

package/dist/modal.js

@@ -0,0 +1,8 @@
+/* empty css               */
+import { U as e, a as l, b as s, r as t } from "./ui-modal-DV-pw2x1.js";
+export {
+  e as UIDialog,
+  l as UIModal,
+  s as aplicarInertForaDoModal,
+  t as removerInertForaDoModal
+};

package/dist/register.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("./ssr-safe-CiHD1adl.cjs"),e=require("./zero-js-triggers-QGD7FOTv.cjs");require("./ui-botao-DF1yuUUD.cjs");require("./ui-switch-C6o4yZUF.cjs");require("./ui-segmented-NC5cBXLh.cjs");require("./ui-campo-texto-BCh5HyCM.cjs");require("./ui-paleta-ferramentas-B6dJ0O6K.cjs");require("./ui-badge-B95jSECC.cjs");require("./ui-card-Bhm6k91e.cjs");require("./ui-modal-Bi4isGYh.cjs");require("./ui-skeleton-D42oQufF.cjs");require("./ui-toast-CQBqvUm3.cjs");require("./ui-tabela-propriedades-7yJ9g7ti.cjs");function i(){r.isBrowser&&e.initZeroJSTriggers()}r.isBrowser&&e.initZeroJSTriggers();exports.isBrowser=r.isBrowser;exports.registrarTodosComponentes=i;

package/dist/register.d.ts

@@ -0,0 +1,7 @@
+import { isBrowser } from './core/ssr-safe';
+export { isBrowser };
+/**
+ * Registra manualmente todos os componentes do kit caso ainda não estejam registrados.
+ * Seguro para chamar múltiplas vezes ou no ciclo de montagem de frameworks client-side (Next.js 'use client', Vue onMounted, etc.).
+ */
+export declare function registrarTodosComponentes(): void;

package/dist/register.js

@@ -0,0 +1,21 @@
+import { i as r } from "./ssr-safe-5cWfJP-s.js";
+import { i } from "./zero-js-triggers-DdESy0tk.js";
+import "./ui-botao-BShEouvi.js";
+import "./ui-switch-CO9MoS8x.js";
+import "./ui-segmented-C8wuycjJ.js";
+import "./ui-campo-texto-B_JF6POq.js";
+import "./ui-paleta-ferramentas-Bpp4XBVg.js";
+import "./ui-badge-92yelKls.js";
+import "./ui-card-BJ8SmvVf.js";
+import "./ui-modal-DV-pw2x1.js";
+import "./ui-skeleton-B3xQyn0Z.js";
+import "./ui-toast-CwUmiqyG.js";
+import "./ui-tabela-propriedades-D-XKNVwK.js";
+function d() {
+  r && i();
+}
+r && i();
+export {
+  r as isBrowser,
+  d as registrarTodosComponentes
+};

package/dist/seletor-mapa-base.cjs

@@ -0,0 +1,53 @@
+"use strict";var d=Object.defineProperty;var h=(o,p,e)=>p in o?d(o,p,{enumerable:!0,configurable:!0,writable:!0,value:e}):o[p]=e;var r=(o,p,e)=>h(o,typeof p!="symbol"?p+"":p,e);Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});;/* empty css                 */const n=require("./ssr-safe-CiHD1adl.cjs"),f=require("./listener-bag-D5omxZ9h.cjs"),g=':host{display:inline-block;font-family:var(--ui-fonte-principal, "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);color:var(--ui-cor-texto, #f1f1f5);box-sizing:border-box;-webkit-user-select:none;user-select:none}:host *,:host *:before,:host *:after{box-sizing:border-box}:host([posicao="bottom-right"]){position:absolute;bottom:16px;right:16px;z-index:var(--ui-z-workspace-hud, 500)}:host([posicao="bottom-left"]){position:absolute;bottom:16px;left:16px;z-index:var(--ui-z-workspace-hud, 500)}:host([posicao="top-right"]){position:absolute;top:16px;right:16px;z-index:var(--ui-z-workspace-hud, 500)}:host([posicao="top-left"]){position:absolute;top:16px;left:16px;z-index:var(--ui-z-workspace-hud, 500)}:host([posicao="inline"]){position:relative;display:inline-flex}.ui-basemap-wrapper{position:relative;display:inline-flex;align-items:center}.ui-basemap-trigger{display:inline-flex;align-items:center;gap:8px;height:34px;padding:0 12px 0 6px;background:var(--ui-cor-fundo-elevado, rgba(18, 18, 24, .88));backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid var(--ui-cor-borda, rgba(255, 255, 255, .12));border-radius:9999px;color:var(--ui-cor-texto, #f1f1f5);cursor:pointer;outline:none;font-size:11.5px;font-weight:500;letter-spacing:.2px;box-shadow:0 4px 14px #00000059,0 1px 3px #0003;transition:all .18s cubic-bezier(.16,1,.3,1)}.ui-basemap-trigger:hover{background:var(--ui-cor-fundo-hover, rgba(28, 28, 36, .95));border-color:var(--ui-cor-primaria, #00E08A);transform:translateY(-1px);box-shadow:0 6px 20px #00000073,0 0 12px #00e08a33}.ui-basemap-trigger:focus-visible{border-color:var(--ui-cor-primaria, #00E08A);box-shadow:0 0 0 2px #00e08a59}.ui-basemap-trigger.active{border-color:var(--ui-cor-primaria, #00E08A);background:var(--ui-cor-fundo-ativo, rgba(22, 26, 32, .95));box-shadow:0 4px 16px #0006,0 0 10px #00e08a40}:host([compacto]) .ui-basemap-trigger,.ui-basemap-trigger.compacto{width:36px;height:36px;padding:0;justify-content:center;border-radius:50%}:host([compacto]) .ui-basemap-label,:host([compacto]) .ui-basemap-chevron,.ui-basemap-trigger.compacto .ui-basemap-label,.ui-basemap-trigger.compacto .ui-basemap-chevron{display:none!important}.ui-basemap-thumb-mini{width:22px;height:22px;border-radius:50%;object-fit:cover;flex-shrink:0;border:1.5px solid var(--ui-cor-borda, rgba(255, 255, 255, .2));box-shadow:0 1px 3px #0006}.ui-basemap-thumb-mini.fallback{display:flex;align-items:center;justify-content:center;background:#ffffff14;color:var(--ui-cor-primaria, #00E08A)}.ui-basemap-thumb-mini.fallback svg{width:13px;height:13px}.ui-basemap-label{white-space:nowrap;max-width:130px;overflow:hidden;text-overflow:ellipsis}.ui-basemap-chevron{display:inline-flex;align-items:center;justify-content:center;color:var(--ui-cor-texto-secundario, #888899);transition:transform .2s cubic-bezier(.16,1,.3,1);margin-left:2px}.ui-basemap-chevron svg{width:12px;height:12px}.ui-basemap-trigger.active .ui-basemap-chevron{transform:rotate(180deg);color:var(--ui-cor-primaria, #00E08A)}.ui-basemap-popover{position:absolute;min-width:210px;max-width:250px;background:var(--ui-cor-fundo-elevado, rgba(16, 16, 22, .95));backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid var(--ui-cor-borda, rgba(255, 255, 255, .12));border-radius:12px;padding:6px;box-shadow:0 12px 32px #0009,0 2px 8px #0000004d;z-index:var(--ui-z-popover, 1050);display:flex;flex-direction:column;gap:3px;opacity:0;visibility:hidden;pointer-events:none;transform:translateY(8px) scale(.97);transition:opacity .18s cubic-bezier(.16,1,.3,1),transform .18s cubic-bezier(.16,1,.3,1),visibility .18s}.ui-basemap-wrapper.pos-bottom-right .ui-basemap-popover,.ui-basemap-wrapper.pos-bottom-left .ui-basemap-popover,.ui-basemap-wrapper.pos-bottom .ui-basemap-popover{bottom:calc(100% + 8px);transform:translateY(8px) scale(.97)}.ui-basemap-wrapper.pos-bottom-right .ui-basemap-popover{right:0}.ui-basemap-wrapper.pos-bottom-left .ui-basemap-popover{left:0}.ui-basemap-wrapper.pos-top-right .ui-basemap-popover,.ui-basemap-wrapper.pos-top-left .ui-basemap-popover,.ui-basemap-wrapper.pos-top .ui-basemap-popover{top:calc(100% + 8px);transform:translateY(-8px) scale(.97)}.ui-basemap-wrapper.pos-top-right .ui-basemap-popover{right:0}.ui-basemap-wrapper.pos-top-left .ui-basemap-popover{left:0}.ui-basemap-popover.aberto{opacity:1;visibility:visible;pointer-events:auto;transform:translateY(0) scale(1)}.ui-basemap-popover-header{display:flex;align-items:center;justify-content:space-between;padding:4px 8px 6px;border-bottom:1px solid rgba(255,255,255,.06);margin-bottom:2px}.ui-basemap-popover-titulo{font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:.6px;color:var(--ui-cor-texto-secundario, #888899)}.ui-basemap-popover-badge{font-size:9px;font-weight:600;padding:1px 5px;border-radius:4px;background:#00e08a1f;color:var(--ui-cor-primaria, #00E08A);font-variant-numeric:tabular-nums}.ui-basemap-list{display:flex;flex-direction:column;gap:2px;max-height:280px;overflow-y:auto;overflow-x:hidden;padding-right:2px}.ui-basemap-list::-webkit-scrollbar{width:4px}.ui-basemap-list::-webkit-scrollbar-track{background:transparent}.ui-basemap-list::-webkit-scrollbar-thumb{background:#ffffff26;border-radius:2px}.ui-basemap-item{display:flex;align-items:center;gap:8px;padding:5px 8px;border-radius:7px;background:transparent;border:1px solid transparent;cursor:pointer;transition:all .12s ease;outline:none}.ui-basemap-item:hover{background:#ffffff0f;border-color:#ffffff14}.ui-basemap-item:focus-visible{border-color:var(--ui-cor-primaria, #00E08A);background:#00e08a0f}.ui-basemap-item.active{background:#00e08a1f;border-color:#00e08a59}.ui-basemap-item-preview{width:32px;height:24px;border-radius:4px;object-fit:cover;flex-shrink:0;border:1px solid rgba(255,255,255,.1);box-shadow:0 1px 3px #0000004d}.ui-basemap-item-preview-none{width:32px;height:24px;border-radius:4px;flex-shrink:0;display:flex;align-items:center;justify-content:center;background:#ffffff0a;border:1px solid rgba(255,255,255,.08);color:var(--ui-cor-texto-secundario, #888899)}.ui-basemap-item-preview-none svg{width:14px;height:14px}.ui-basemap-item-info{display:flex;flex-direction:column;min-width:0;flex:1}.ui-basemap-item-nome{font-size:11px;font-weight:500;color:var(--ui-cor-texto, #f1f1f5);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ui-basemap-item.active .ui-basemap-item-nome{color:var(--ui-cor-primaria, #00E08A);font-weight:600}.ui-basemap-item-desc{font-size:9.5px;color:var(--ui-cor-texto-secundario, #77778b);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ui-basemap-item-check{display:flex;align-items:center;justify-content:center;width:14px;height:14px;flex-shrink:0;color:var(--ui-cor-primaria, #00E08A);opacity:0;transform:scale(.6);transition:all .15s cubic-bezier(.16,1,.3,1)}.ui-basemap-item.active .ui-basemap-item-check{opacity:1;transform:scale(1)}.ui-basemap-item-check svg{width:13px;height:13px}:host-context([data-tema="claro"]),:host-context(.light),:host([data-tema="claro"]){--ui-cor-texto: #1a1a1e;--ui-cor-texto-secundario: #666677}:host-context([data-tema="claro"]) .ui-basemap-trigger,:host([data-tema="claro"]) .ui-basemap-trigger{background:#ffffffeb;border-color:#0000001f;color:#1a1a1e;box-shadow:0 4px 14px #0000001a}:host-context([data-tema="claro"]) .ui-basemap-popover,:host([data-tema="claro"]) .ui-basemap-popover{background:#fffffff7;border-color:#0000001f;box-shadow:0 12px 32px #0000002e}:host-context([data-tema="claro"]) .ui-basemap-item:hover,:host([data-tema="claro"]) .ui-basemap-item:hover{background:#0000000a}:host-context([data-tema="claro"]) .ui-basemap-item.active,:host([data-tema="claro"]) .ui-basemap-item.active{background:#00b46e1f;border-color:#00b46e59}',b=[{id:"none",nome:"Sem Mapa",descricao:"Tela CAD neutra com grade quadriculada"},{id:"google_satelite_puro",nome:"Google Puro",descricao:"Satélite limpo sem ruas ou rótulos",thumbnailUrl:"https://images.unsplash.com/photo-1524661135-423995f22d0b?w=160&auto=format&fit=crop&q=80"},{id:"google_satelite",nome:"Google Híbrido",descricao:"Satélite com nomes de ruas e divisas",thumbnailUrl:"https://images.unsplash.com/photo-1524661135-423995f22d0b?w=160&auto=format&fit=crop&q=80"},{id:"satelite",nome:"Esri Satélite",descricao:"Imagens orbitais de alta resolução",thumbnailUrl:"https://images.unsplash.com/photo-1451187580459-43490279c0fa?w=160&auto=format&fit=crop&q=80"},{id:"osm",nome:"OpenStreetMap",descricao:"Mapa viário e urbano colaborativo",thumbnailUrl:"https://images.unsplash.com/photo-1569336415962-a4bd9f69cd83?w=160&auto=format&fit=crop&q=80"},{id:"topografia",nome:"Topografia",descricao:"Curvas de nível e relevo sombreado",thumbnailUrl:"https://images.unsplash.com/photo-1464822759023-fed622ff2c3b?w=160&auto=format&fit=crop&q=80"},{id:"dark",nome:"Dark Canvas",descricao:"Mapa escuro de alto contraste para CAD",thumbnailUrl:"https://images.unsplash.com/photo-1518709268805-4e9042af9f23?w=160&auto=format&fit=crop&q=80"}],x=`
+<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="2" y1="12" x2="22" y2="12"></line>
+  <path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"></path>
+</svg>
+`,v=`
+<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
+  <polyline points="6 9 12 15 18 9"></polyline>
+</svg>
+`,w=`
+<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round">
+  <polyline points="20 6 9 17 4 12"></polyline>
+</svg>
+`,u=`
+<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+  <rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect>
+  <line x1="3" y1="9" x2="21" y2="9"></line>
+  <line x1="3" y1="15" x2="21" y2="15"></line>
+  <line x1="9" y1="3" x2="9" y2="21"></line>
+  <line x1="15" y1="3" x2="15" y2="21"></line>
+</svg>
+`;class c extends n.SafeHTMLElement{constructor(){super();r(this,"shadow");r(this,"listeners",new f.ListenerBag);r(this,"_mapasBase",[...b]);r(this,"wrapperEl");r(this,"triggerBtn");r(this,"popoverEl");r(this,"listEl");r(this,"thumbEl");r(this,"labelEl");this.shadow=this.attachShadow({mode:"open"}),this.shadow.innerHTML=`
+      <style>${g}</style>
+      <div class="ui-basemap-wrapper" id="basemap-wrapper">
+        <button class="ui-basemap-trigger" id="basemap-trigger" type="button" aria-haspopup="listbox" aria-expanded="false" title="Alternar Mapa Base">
+          <span class="ui-basemap-thumb-container" id="thumb-container"></span>
+          <span class="ui-basemap-label" id="basemap-label">Esri Satélite</span>
+          <span class="ui-basemap-chevron">${v}</span>
+        </button>
+
+        <div class="ui-basemap-popover" id="basemap-popover" role="listbox" aria-label="Selecione o Mapa Base">
+          <div class="ui-basemap-popover-header">
+            <span class="ui-basemap-popover-titulo">Mapa Base</span>
+            <span class="ui-basemap-popover-badge" id="popover-count">7 opções</span>
+          </div>
+          <div class="ui-basemap-list" id="basemap-list"></div>
+        </div>
+      </div>
+    `,this.wrapperEl=this.shadow.getElementById("basemap-wrapper"),this.triggerBtn=this.shadow.getElementById("basemap-trigger"),this.popoverEl=this.shadow.getElementById("basemap-popover"),this.listEl=this.shadow.getElementById("basemap-list"),this.thumbEl=this.shadow.getElementById("thumb-container"),this.labelEl=this.shadow.getElementById("basemap-label")}static get observedAttributes(){return["mapa-base-ativo","valor","posicao","aberto","compacto","desabilitado"]}connectedCallback(){this.atualizarPosicaoClasses(),this.renderizarOpcoes(),this.atualizarGatilho(),this.conectarEventos()}disconnectedCallback(){this.listeners.cleanup()}attributeChangedCallback(e,t,a){if(t!==a)if(e==="mapa-base-ativo"||e==="valor")this.atualizarSelecaoVisual(),this.atualizarGatilho();else if(e==="posicao")this.atualizarPosicaoClasses();else if(e==="aberto"){const i=a!==null&&a!=="false";this.aplicarEstadoAberto(i)}else e==="compacto"&&this.triggerBtn.classList.toggle("compacto",a!==null&&a!=="false")}get mapaBaseAtivo(){return this.getAttribute("mapa-base-ativo")||this.getAttribute("valor")||"satelite"}set mapaBaseAtivo(e){this.setAttribute("mapa-base-ativo",e),this.setAttribute("valor",e)}get valor(){return this.mapaBaseAtivo}set valor(e){this.mapaBaseAtivo=e}get posicao(){return this.getAttribute("posicao")||"inline"}set posicao(e){this.setAttribute("posicao",e)}get aberto(){return this.hasAttribute("aberto")&&this.getAttribute("aberto")!=="false"}set aberto(e){e?this.setAttribute("aberto",""):this.removeAttribute("aberto")}get compacto(){return this.hasAttribute("compacto")&&this.getAttribute("compacto")!=="false"}set compacto(e){e?this.setAttribute("compacto",""):this.removeAttribute("compacto")}get mapasBase(){return this._mapasBase}definirMapasBase(e){Array.isArray(e)&&(this._mapasBase=[...e],this.renderizarOpcoes(),this.atualizarGatilho())}abrir(){this.aberto=!0}fechar(){this.aberto=!1}alternar(){this.aberto=!this.aberto}selecionar(e){if(!e||this.mapaBaseAtivo===e){this.fechar();return}this.mapaBaseAtivo=e;const t=this._mapasBase.find(i=>i.id===e),a={mapaBaseId:e,item:t};this.dispatchEvent(new CustomEvent("ui-mapa-base-alterado",{detail:a,bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("change",{detail:{value:e},bubbles:!0,composed:!0})),this.fechar()}atualizarPosicaoClasses(){const e=this.posicao;this.wrapperEl.className=`ui-basemap-wrapper pos-${e}`}aplicarEstadoAberto(e){this.popoverEl.classList.toggle("aberto",e),this.triggerBtn.classList.toggle("active",e),this.triggerBtn.setAttribute("aria-expanded",String(e))}atualizarGatilho(){const e=this.mapaBaseAtivo,t=this._mapasBase.find(a=>a.id===e)||this._mapasBase[0];t?(this.labelEl.textContent=t.nome,this.triggerBtn.title=`Mapa Base: ${t.nome} (${t.descricao||""})`,t.thumbnailUrl?this.thumbEl.innerHTML=`<img class="ui-basemap-thumb-mini" src="${l(t.thumbnailUrl)}" alt="${l(t.nome)}" />`:this.thumbEl.innerHTML=`<span class="ui-basemap-thumb-mini fallback">${u}</span>`):(this.labelEl.textContent="Mapa Base",this.thumbEl.innerHTML=`<span class="ui-basemap-thumb-mini fallback">${x}</span>`)}renderizarOpcoes(){const e=this.shadow.getElementById("popover-count");e&&(e.textContent=`${this._mapasBase.length} opções`);const t=this.mapaBaseAtivo;this.listEl.innerHTML=this._mapasBase.map(a=>{const i=a.id===t,s=a.thumbnailUrl?`<img class="ui-basemap-item-preview" src="${l(a.thumbnailUrl)}" alt="${l(a.nome)}" loading="lazy" />`:`<div class="ui-basemap-item-preview-none">${u}</div>`;return`
+        <div class="ui-basemap-item ${i?"active":""}" 
+             data-id="${l(a.id)}" 
+             role="option" 
+             aria-selected="${i}"
+             tabindex="0">
+          ${s}
+          <div class="ui-basemap-item-info">
+            <span class="ui-basemap-item-nome">${l(a.nome)}</span>
+            ${a.descricao?`<span class="ui-basemap-item-desc">${l(a.descricao)}</span>`:""}
+          </div>
+          <span class="ui-basemap-item-check">${w}</span>
+        </div>
+      `}).join("")}atualizarSelecaoVisual(){const e=this.mapaBaseAtivo;this.listEl.querySelectorAll(".ui-basemap-item").forEach(a=>{const s=a.getAttribute("data-id")===e;a.classList.toggle("active",s),a.setAttribute("aria-selected",String(s))})}conectarEventos(){this.listeners.add(this.triggerBtn,"click",a=>{a.stopPropagation(),this.alternar()}),this.listeners.add(this.listEl,"click",a=>{const i=a.target.closest(".ui-basemap-item");if(!i)return;const s=i.getAttribute("data-id");s&&this.selecionar(s)}),this.listeners.add(this.listEl,"keydown",a=>{if(a.key==="Enter"||a.key===" "){const i=a.target.closest(".ui-basemap-item");if(i){a.preventDefault();const s=i.getAttribute("data-id");s&&this.selecionar(s)}}});const e=a=>{if(!this.aberto)return;a.composedPath().includes(this)||this.fechar()};this.listeners.add(document,"click",e);const t=a=>{a.key==="Escape"&&this.aberto&&(this.fechar(),this.triggerBtn.focus())};this.listeners.add(document,"keydown",t)}}function l(o){return o?String(o).replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/"/g,"&quot;").replace(/'/g,"&#039;"):""}class m extends c{}n.definirCustomElement("ui-seletor-mapa-base",c);n.definirCustomElement("ui-mapa-base",m);exports.MAPAS_BASE_PADRAO=b;exports.UIMapaBase=m;exports.UISeletorMapaBase=c;

package/dist/seletor-mapa-base.d.ts

@@ -0,0 +1,8 @@
+import { UISeletorMapaBase } from './components/ui-seletor-mapa-base';
+export * from './components/ui-seletor-mapa-base';
+declare global {
+    interface HTMLElementTagNameMap {
+        'ui-seletor-mapa-base': UISeletorMapaBase;
+        'ui-mapa-base': UISeletorMapaBase;
+    }
+}