@wrrdev/fenix-ui 1.1.7 → 1.1.8

package/dist/fenix-ui4.esm.js

@@ -5,8 +5,8 @@ var __accessCheck = (obj, member, msg) => member.has(obj) || __typeError("Cannot
 var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
 var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "access private method"), method);
 var _FxToast_instances, render_fn;
-import { a as FENIX_ICON_BASE_CSS, f as fenixIconHtml, e as esc, i as isFenixIconName } from "./assets/base-css-Be_r8aTo.js";
-import { s, b } from "./assets/base-css-Be_r8aTo.js";
+import { a as FENIX_ICON_BASE_CSS, f as fenixIconHtml, e as esc, i as isFenixIconName, l as loadFenixIconsFont } from "./assets/font-CF0TXsAP.js";
+import { s, g } from "./assets/font-CF0TXsAP.js";
 const lightTokens = {
   color: {
     primary: "#c2410c",
@@ -1967,9 +1967,9 @@ const _FxCalendar = class _FxCalendar extends FxElement {
       <div class="grid ${this.view}">${cells}</div>
     `);
     this.root.querySelectorAll("[data-nav]").forEach(
-      (b2) => b2.addEventListener(
+      (b) => b.addEventListener(
         "click",
-        () => this.navigate(Number(b2.dataset.nav))
+        () => this.navigate(Number(b.dataset.nav))
       )
     );
     const gotoBtn = this.root.querySelector("[data-goto]");
@@ -1978,21 +1978,21 @@ const _FxCalendar = class _FxCalendar extends FxElement {
       this.render();
     });
     this.root.querySelectorAll("[data-day]").forEach(
-      (b2) => b2.addEventListener(
+      (b) => b.addEventListener(
         "click",
-        () => this.pickDay(Number(b2.dataset.day))
+        () => this.pickDay(Number(b.dataset.day))
       )
     );
     this.root.querySelectorAll("[data-month]").forEach(
-      (b2) => b2.addEventListener("click", () => {
-        this.cursor.m = Number(b2.dataset.month);
+      (b) => b.addEventListener("click", () => {
+        this.cursor.m = Number(b.dataset.month);
         this.view = "days";
         this.render();
       })
     );
     this.root.querySelectorAll("[data-year]").forEach(
-      (b2) => b2.addEventListener("click", () => {
-        this.cursor.y = Number(b2.dataset.year);
+      (b) => b.addEventListener("click", () => {
+        this.cursor.y = Number(b.dataset.year);
         this.view = "months";
         this.render();
       })
@@ -2403,7 +2403,7 @@ const _FxDatepicker = class _FxDatepicker extends FxElement {
     if (Number.isNaN(d.getTime())) return null;
     const [y, m, day] = iso.split("-").map((n) => parseInt(n, 10));
     if (d.getFullYear() !== y || d.getMonth() + 1 !== m || d.getDate() !== day) return null;
-    const cmp = (a, b2) => a.split("T")[0].localeCompare(b2.split("T")[0]);
+    const cmp = (a, b) => a.split("T")[0].localeCompare(b.split("T")[0]);
     const min = this.getAttr("min");
     const max = this.getAttr("max");
     if (min && cmp(iso, min) < 0) return null;
@@ -2430,9 +2430,9 @@ const _FxDatepicker = class _FxDatepicker extends FxElement {
         this.setAttribute("start", this.withTime(parsed));
         this.removeAttribute("end");
       } else {
-        const [a, b2] = [this.getAttr("start").split("T")[0], parsed].sort();
+        const [a, b] = [this.getAttr("start").split("T")[0], parsed].sort();
         this.setAttribute("start", this.withTime(a));
-        this.setAttribute("end", this.withTime(b2));
+        this.setAttribute("end", this.withTime(b));
       }
       this.emitChange({ start: this.getAttr("start"), end: this.getAttr("end") });
     } else {
@@ -3399,8 +3399,8 @@ const _FxTable = class _FxTable extends FxElement {
     }
     const total = this.lazy ? this.total : out.length;
     if (this.sortField) {
-      out.sort((a, b2) => {
-        const av = a[this.sortField], bv = b2[this.sortField];
+      out.sort((a, b) => {
+        const av = a[this.sortField], bv = b[this.sortField];
         if (typeof av === "number" && typeof bv === "number")
           return (av - bv) * this.sortDir;
         return String(av ?? "").localeCompare(String(bv ?? ""), "pt-BR") * this.sortDir;
@@ -5465,6 +5465,75 @@ function defineFxAvatar() {
   return defineElement("fx-avatar", FxAvatar);
 }
 defineFxAvatar();
+const _FxIcon = class _FxIcon extends FxElement {
+  static get observedAttributes() {
+    return ["name", "size", "label", "fill", "bold"];
+  }
+  /** Nome do glifo (ou texto livre/emoji). */
+  get name() {
+    return this.getAttr("name");
+  }
+  set name(value) {
+    this.setAttribute("name", value);
+  }
+  /** Tamanho: '' (herda 1em) | 'sm' | 'md' | 'lg' | 'xl'. */
+  get size() {
+    return this.getAttr("size");
+  }
+  set size(value) {
+    if (value) this.setAttribute("size", value);
+    else this.removeAttribute("size");
+  }
+  /** Nome acessível; vazio = ícone decorativo (aria-hidden). */
+  get label() {
+    return this.getAttr("label");
+  }
+  set label(value) {
+    if (value) this.setAttribute("label", value);
+    else this.removeAttribute("label");
+  }
+  connectedCallback() {
+    loadFenixIconsFont();
+    super.connectedCallback();
+  }
+  render() {
+    const name = this.getAttr("name").trim();
+    const label = this.getAttr("label").trim();
+    const a11y = label ? `role="img" aria-label="${esc(label)}"` : 'aria-hidden="true"';
+    if (!name) {
+      this.setTemplate(`<span class="icon" part="icon" ${a11y}></span>`);
+      return;
+    }
+    const inner = isFenixIconName(name) ? `<i class="icon fx-icon" part="icon" ${a11y}>${esc(name)}</i>` : `<span class="icon" part="icon" ${a11y}>${esc(name)}</span>`;
+    this.setTemplate(inner);
+  }
+};
+_FxIcon.styles = css`
+    :host {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      vertical-align: middle;
+      line-height: 1;
+      color: currentColor;
+      font-size: var(--fx-icon-size, 1em);
+    }
+    :host([size='sm']) { font-size: var(--fx-icon-size-sm, 16px); }
+    :host([size='md']) { font-size: var(--fx-icon-size-md, 20px); }
+    :host([size='lg']) { font-size: var(--fx-icon-size-lg, 24px); }
+    :host([size='xl']) { font-size: var(--fx-icon-size-xl, 32px); }
+    :host([hidden]) { display: none; }
+    .icon { display: inline-block; }
+    /* Variantes da fonte (FILL/wght): vencem a classe base .fx-icon. */
+    :host([fill]) .icon { font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24; }
+    :host([bold]) .icon { font-variation-settings: 'FILL' 0, 'wght' 600, 'GRAD' 0, 'opsz' 24; }
+    ${FENIX_ICON_BASE_CSS}
+  `;
+let FxIcon = _FxIcon;
+function defineFxIcon() {
+  return defineElement("fx-icon", FxIcon);
+}
+defineFxIcon();
 const _FxCard = class _FxCard extends FxElement {
   static get observedAttributes() {
     return ["variant", "radius", "size", "padded", "heading"];
@@ -9451,7 +9520,7 @@ const _FxOrderList = class _FxOrderList extends FxElement {
   _handleMoveAction(action) {
     if (!this._selection.length) return;
     const displayData = this._getDisplayData();
-    const selectedIndices = this._selection.map((s2) => displayData.findIndex((d) => this._getItemKey(d, -1) === this._getItemKey(s2, -1))).filter((i) => i >= 0).sort((a, b2) => a - b2);
+    const selectedIndices = this._selection.map((s2) => displayData.findIndex((d) => this._getItemKey(d, -1) === this._getItemKey(s2, -1))).filter((i) => i >= 0).sort((a, b) => a - b);
     if (selectedIndices.length === 0) return;
     switch (action) {
       case "top":
@@ -9476,7 +9545,7 @@ const _FxOrderList = class _FxOrderList extends FxElement {
       items.push(this._data[actualIdx]);
       actualIndices.push(actualIdx);
     }
-    actualIndices.sort((a, b2) => b2 - a).forEach((i) => this._data.splice(i, 1));
+    actualIndices.sort((a, b) => b - a).forEach((i) => this._data.splice(i, 1));
     const insertIdx = this._getActualIndex(0);
     this._data.splice(insertIdx, 0, ...items);
     this._applyFilter();
@@ -9492,7 +9561,7 @@ const _FxOrderList = class _FxOrderList extends FxElement {
       items.push(this._data[actualIdx]);
       actualIndices.push(actualIdx);
     }
-    actualIndices.sort((a, b2) => b2 - a).forEach((i) => this._data.splice(i, 1));
+    actualIndices.sort((a, b) => b - a).forEach((i) => this._data.splice(i, 1));
     const displayData = this._getDisplayData();
     const insertIdx = this._getActualIndex(displayData.length - 1);
     this._data.splice(insertIdx + 1, 0, ...items);
@@ -9504,7 +9573,7 @@ const _FxOrderList = class _FxOrderList extends FxElement {
   _moveSelectedByOne(indices, delta) {
     const displayData = this._getDisplayData();
     if (displayData.length === 0) return;
-    const actualIndices = indices.map((idx) => this._getActualIndex(idx)).filter((idx) => idx >= 0).sort((a, b2) => a - b2);
+    const actualIndices = indices.map((idx) => this._getActualIndex(idx)).filter((idx) => idx >= 0).sort((a, b) => a - b);
     if (actualIndices.length === 0) return;
     if (delta < 0 && actualIndices[0] <= 0) return;
     if (delta > 0 && actualIndices[actualIndices.length - 1] >= this._data.length - 1) return;
@@ -10676,6 +10745,7 @@ export {
   FxEmptyState,
   FxFileUpload,
   FxFloatlabel,
+  FxIcon,
   FxInput,
   FxKnob,
   FxMenu,
@@ -10722,7 +10792,7 @@ export {
   resetTheme,
   s as sanitizeData,
   setTokens,
-  b as stripTags,
+  g as stripTags,
   theme,
   themePresets,
   tokenCssVars