@wrrdev/fenix-ui 1.1.12 → 1.1.13

package/dist/fenix-ui4.esm.js

@@ -623,7 +623,7 @@ const _FxSelect = class _FxSelect extends FxElement {
   // `value` fica FORA da observação: refleti-lo no change não pode
   // re-renderizar o template e fechar o dropdown.
   static get observedAttributes() {
-    return ["size", "disabled", "placeholder", "searchable", "clearable", "error", "invalid", "success", "valid"];
+    return ["size", "disabled", "placeholder", "searchable", "clearable", "error", "invalid", "success", "valid", "placement"];
   }
   /** Tamanho do campo. Padrão: `'md'`. */
   get size() {
@@ -658,7 +658,7 @@ const _FxSelect = class _FxSelect extends FxElement {
     this.docListener = (e) => {
       if (!this.hasAttr("open")) return;
       if (e.composedPath().includes(this)) return;
-      this.removeAttribute("open");
+      this._fechar();
       this.render();
     };
     document.addEventListener("click", this.docListener);
@@ -667,10 +667,77 @@ const _FxSelect = class _FxSelect extends FxElement {
     super.disconnectedCallback();
     this.observer?.disconnect();
     if (this.docListener) document.removeEventListener("click", this.docListener);
+    this._unbindReflow();
+  }
+  /** Abre o dropdown, posiciona o painel e passa a reposicioná-lo no reflow. */
+  _abrir() {
+    this.setAttribute("open", "");
+    this._bindReflow();
+  }
+  /** Fecha o dropdown e libera os listeners de resize/scroll. */
+  _fechar() {
+    this.removeAttribute("open");
+    this.removeAttribute("data-placement");
+    this._unbindReflow();
+  }
+  /** Liga o reposicionamento (resize + scroll interno, em capture). */
+  _bindReflow() {
+    if (this.onReflow) return;
+    this.onReflow = () => {
+      if (this.hasAttr("open")) this.ajustarPosicao();
+    };
+    window.addEventListener("resize", this.onReflow);
+    window.addEventListener("scroll", this.onReflow, true);
+  }
+  _unbindReflow() {
+    if (!this.onReflow) return;
+    window.removeEventListener("resize", this.onReflow);
+    window.removeEventListener("scroll", this.onReflow, true);
+    this.onReflow = void 0;
+  }
+  /**
+   * Decide a posição vertical do painel medindo o espaço real da viewport.
+   *
+   * `placement="top"`/`"bottom"` são respeitados literalmente; o padrão
+   * (`auto`) só inverte quando o painel não cabe embaixo E couber melhor
+   * acima. Também limita a altura ao espaço disponível e evita overflow
+   * horizontal próximo à borda direita.
+   */
+  ajustarPosicao() {
+    const painel = this.root.querySelector(".panel");
+    const trigger = this.root.querySelector(".trigger");
+    if (!painel || !trigger) return;
+    const r = trigger.getBoundingClientRect();
+    const abaixo = window.innerHeight - r.bottom;
+    const acima = r.top;
+    const desejado = painel.scrollHeight;
+    const maxAltura = _FxSelect._maxAltura(this);
+    const pedido = this.getAttr("placement", "auto");
+    const paraCima = pedido === "top" || pedido !== "bottom" && abaixo < Math.min(desejado, maxAltura) && acima > abaixo;
+    if (paraCima) this.setAttribute("data-placement", "top");
+    else this.removeAttribute("data-placement");
+    const disponivel = Math.max(
+      _FxSelect.MIN_ALTURA,
+      (paraCima ? acima : abaixo) - _FxSelect.GAP
+    );
+    painel.style.maxHeight = `${Math.min(desejado || disponivel, disponivel, maxAltura)}px`;
+    painel.style.left = "";
+    const largura = painel.offsetWidth;
+    const excesso = r.left + largura - (window.innerWidth - _FxSelect.MARGEM);
+    if (excesso > 0) {
+      painel.style.left = `${-excesso}px`;
+      painel.style.right = "auto";
+    }
+  }
+  /** Altura máxima do painel a partir de `--fx-select-panel-max-height`. */
+  static _maxAltura(host) {
+    const raw = getComputedStyle(host).getPropertyValue("--fx-select-panel-max-height");
+    const n = parseInt(raw, 10);
+    return Number.isFinite(n) && n > 0 ? n : 260;
   }
   select(value) {
     this.value = value;
-    this.removeAttribute("open");
+    this._fechar();
     this.render();
     this.dispatchEvent(
       new CustomEvent("change", { bubbles: true, composed: true, detail: { value } })
@@ -680,7 +747,7 @@ const _FxSelect = class _FxSelect extends FxElement {
   _navigateOptions(e) {
     e.preventDefault();
     if (!this.hasAttr("open")) {
-      this.toggleAttribute("open");
+      this._abrir();
       this.render();
     }
     const opts = Array.from(this.root.querySelectorAll(".opt"));
@@ -725,6 +792,7 @@ const _FxSelect = class _FxSelect extends FxElement {
       </div>
     `);
     if (prevOpen) this.setAttribute("open", "");
+    if (this.hasAttr("open")) this.ajustarPosicao();
     const searchInput = this.root.querySelector(".search");
     if (searchInput) {
       searchInput.value = search;
@@ -744,7 +812,8 @@ const _FxSelect = class _FxSelect extends FxElement {
     trigger.addEventListener("click", (e) => {
       if (this.disabled) return;
       if (e.target.closest(".clear")) return;
-      this.toggleAttribute("open");
+      if (this.hasAttr("open")) this._fechar();
+      else this._abrir();
       this.render();
       this.root.querySelector(".search")?.focus();
     });
@@ -757,7 +826,7 @@ const _FxSelect = class _FxSelect extends FxElement {
       }
       if (e.key === "Escape") {
         if (this.hasAttr("open")) {
-          this.removeAttribute("open");
+          this._fechar();
           this.render();
           this.root.querySelector(".trigger")?.focus();
         }
@@ -770,7 +839,7 @@ const _FxSelect = class _FxSelect extends FxElement {
     this.root.querySelector(".clear")?.addEventListener("click", (e) => {
       e.stopPropagation();
       this.value = "";
-      this.removeAttribute("open");
+      this._fechar();
       this.render();
       this.dispatchEvent(
         new CustomEvent("change", { bubbles: true, composed: true, detail: { value: "" } })
@@ -792,6 +861,11 @@ _FxSelect.styles = css`
          e style inline no elemento definem a largura sem precisar do full. */
       width: var(--fx-select-width, max-content);
       min-width: var(--fx-select-min-width, 200px);
+      /* Espaço entre o campo e o painel + altura máxima do painel. Expostos
+         como custom property porque ::part() do lado do consumidor tem
+         prioridade MENOR que a folha do shadow root e não vence o top. */
+      --fx-select-panel-offset: 4px;
+      --fx-select-panel-max-height: 260px;
     }
     .trigger {
       display: inline-flex;
@@ -879,14 +953,15 @@ _FxSelect.styles = css`
     }
     .caret { font-size: calc(var(--fx-font-size) - 3px); color: var(--fx-text-muted); pointer-events: none; }
 
-    /* Painel do dropdown */
+    /* Painel do dropdown — a POSIÇÃO vertical é definida pelas regras
+       [data-placement] abaixo (o JS de ajustarPosicao decide), por isso
+       top/bottom não ficam aqui. */
     .panel {
       position: absolute;
-      top: calc(100% + 4px);
       left: 0;
       z-index: var(--fx-z-dropdown, 1000);
       width: max(100%, 220px);
-      max-height: 260px;
+      max-height: var(--fx-select-panel-max-height, 260px);
       overflow-y: auto;
       display: none;
       background: var(--fx-surface-background);
@@ -894,6 +969,16 @@ _FxSelect.styles = css`
       border-radius: var(--fx-radius-md);
       box-shadow: var(--fx-shadow-lg);
     }
+    /* Padrão: abre para baixo. */
+    :host([open]:not([data-placement='top'])) .panel {
+      top: calc(100% + var(--fx-select-panel-offset, 4px));
+    }
+    /* placement="top" explícito ou auto-flip: abre para cima. */
+    :host([open][placement='top']) .panel,
+    :host([open][data-placement='top']) .panel {
+      top: auto;
+      bottom: calc(100% + var(--fx-select-panel-offset, 4px));
+    }
     :host([open]) .panel { display: block; }
     .search {
       position: sticky;
@@ -941,6 +1026,9 @@ _FxSelect.styles = css`
     .clear:hover { color: var(--fx-color-danger); }
     .clear[hidden] { display: none; }
   `;
+_FxSelect.GAP = 4;
+_FxSelect.MARGEM = 8;
+_FxSelect.MIN_ALTURA = 80;
 let FxSelect = _FxSelect;
 function defineFxSelect() {
   return defineElement("fx-select", FxSelect);
@@ -5720,6 +5808,24 @@ const _FxCard = class _FxCard extends FxElement {
         <footer part="footer"><slot name="footer"></slot></footer>
       </div>
     `);
+    this._syncSlots();
+    for (const name of ["header", "footer"]) {
+      this.root.querySelector(`slot[name="${name}"]`)?.addEventListener("slotchange", () => this._syncSlots());
+    }
+  }
+  /**
+   * Esconde `header`/`footer` quando o respectivo slot não recebeu nenhum nó.
+   * O `<slot>` fica no shadow e os nós no light DOM, então a checagem é feita
+   * via `assignedNodes()` — cobre conteúdo adicionado dinamicamente.
+   */
+  _syncSlots() {
+    for (const name of ["header", "footer"]) {
+      const slot = this.root.querySelector(`slot[name="${name}"]`);
+      const section = this.root.querySelector(name);
+      if (!slot || !section) continue;
+      const temConteudo = slot.assignedNodes({ flatten: true }).some((n) => n.nodeType === 1 || (n.textContent ?? "").trim() !== "") || name === "header" && Boolean(this.getAttr("heading"));
+      section.toggleAttribute("hidden", !temConteudo);
+    }
   }
 };
 _FxCard.styles = css`