@sankhyalabs/ezui 6.6.1 → 6.7.0-dev.2

package/dist/collection/components/ez-tooltip/ez-tooltip.css

@@ -1,62 +1,90 @@
 :host {
-    --triangle-size: 8px;
+    /*@doc Define o tamanho do triângulo da seta do tooltip.*/
+    --ez-tooltip--triangle-size: var(--space--8);
+    
+    /*@doc Define o z-index do tooltip.*/
+    --ez-tooltip--z-index: var(--elevation--24);
+    
+    /*@doc Define o padding interno do tooltip.*/
+    --ez-tooltip--padding: var(--space--4) var(--space--8);
+    
+    /*@doc Define o border-radius do tooltip.*/
+    --ez-tooltip--border-radius: var(--border--radius-8);
+    
+    /*@doc Define a família da fonte do tooltip.*/
+    --ez-tooltip--font-family: var(--font--pattern);
+    
+    /*@doc Define o tamanho da fonte do tooltip.*/
+    --ez-tooltip--font-size: var(--font-size--small);
+    
+    /*@doc Define o peso da fonte do tooltip.*/
+    --ez-tooltip--font-weight: var(--font-weight--regular);
+    
     width: 100%;
 }
 
 .tooltip {
     position: absolute;
-    z-index: var(--elevation--24);
-    padding: var(--space--extra-small, 3px) var(--space--small, 6px);
-    border-radius: var(--border--radius-small);
+    z-index: var(--ez-tooltip--z-index);
+    padding: var(--ez-tooltip--padding);
+    border-radius: var(--ez-tooltip--border-radius);
     box-sizing: border-box;
-    font-family: var(--font-pattern	, 'Roboto', sans-serif);
-    font-size: var(--text--small, 12px);
-    font-weight: var(--text-weight--medium, 400);
+    font-family: var(--ez-tooltip--font-family);
+    font-size: var(--ez-tooltip--font-size);
+    font-weight: var(--ez-tooltip--font-weight);
     text-align: center;
     width: max-content;
     /* Initially hide the tooltip */
     display: none;
 }
 
+.tooltip[data-strategy="fixed"] {
+    position: fixed;
+}
+
 .arrow {
     position: absolute;
-    width: var(--triangle-size);
-    height: var(--triangle-size);
+    width: var(--ez-tooltip--triangle-size);
+    height: var(--ez-tooltip--triangle-size);
     transform: rotate(45deg);
 }
 
-.default-tooltip {
-    background: var(--title--primary, #2b3a54);
-    color: var(--color--inverted);
+.tooltip[data-type="default"] {
+    background: var(--color--petroleum-600);
+    color: var(--color--gray-70);
+}
+
+.tooltip[data-type="default"] .arrow {
+    background: var(--color--petroleum-600);
 }
 
-.default-tooltip .arrow {
-    background: var(--title--primary, #2b3a54);
+.tooltip[data-type="error"] {
+    background: var(--color--red-600);
+    color: var(--color--red-100);
 }
 
-.error-tooltip {
-    background: var(--color-alert--error-800, #BD0025);
-    color: var(--color--error-200, #F7E0E5);
+.tooltip[data-type="error"] .arrow {
+    background: var(--color--red-600);
 }
 
-.error-tooltip .arrow {
-    background: var(--color-alert--error-800, #BD0025);
+.tooltip[data-type="success"] {
+    background: var(--color--green-600);
+    color: var(--color--green-100);
 }
 
-.success-tooltip {
-    background: var(--color--success, #00cb94);
-    color: var(--color--success-200, #EBFFFA);
+.tooltip[data-type="success"] .arrow {
+    background: var(--color--green-600);
 }
 
-.success-tooltip .arrow {
-    background: var(--color--success, #00cb94);
+.tooltip[data-type="warning"] {
+    background: var(--color--yellow-600);
+    color: var(--color--yellow-100);
 }
 
-.warning-tooltip {
-    background: var(--color--warning, #f2d410);
-    color: var(--color--warning-200, #FDF8D8);
+.tooltip[data-type="warning"] .arrow {
+    background: var(--color--yellow-600);
 }
 
-.warning-tooltip .arrow {
-    background: var(--color--warning, #f2d410);
+.tooltip[data-active="false"] {
+    display: none !important;
 }

package/dist/collection/components/ez-tooltip/ez-tooltip.js

@@ -1,4 +1,4 @@
-import { arrow, computePosition, flip, offset, shift } from "@floating-ui/dom";
+import { arrow, autoUpdate, computePosition, flip, offset, shift } from "@floating-ui/dom";
 import { ElementIDUtils } from "@sankhyalabs/core";
 import { h, Host } from "@stencil/core";
 export class EzTooltip {
@@ -13,6 +13,7 @@ export class EzTooltip {
     this.active = true;
     this.maxWidth = 200;
     this.useAnchorSize = false;
+    this.strategy = 'absolute';
   }
   watchAnchoringElement(newValue, oldValue) {
     if (newValue) {
@@ -52,30 +53,36 @@ export class EzTooltip {
       const anchorSize = element.getBoundingClientRect().width;
       this._tooltipElement.style.width = `${anchorSize}px`;
     }
-    await computePosition(element, this._tooltipElement, {
-      placement: this.placement,
-      middleware: [
-        offset(5),
-        flip(),
-        shift(),
-        arrow({ element: this._arrowElement })
-      ],
-    }).then(({ x, y, placement, middlewareData }) => {
-      const newTop = placement.includes("bottom") ? y + this.gapOptions.verticalGap : y - this.gapOptions.verticalGap;
-      const newLeft = placement.includes("start") ? x + this.gapOptions.horizontalGap : x - this.gapOptions.horizontalGap;
-      Object.assign(this._tooltipElement.style, {
-        top: `${newTop}px`,
-        left: `${newLeft}px`,
-      });
-      if (middlewareData.arrow) {
-        const { x } = middlewareData.arrow;
-        const onBottom = placement.includes("bottom");
-        Object.assign(this._arrowElement.style, {
-          left: `${x}px`,
-          top: onBottom ? `${-this._arrowElement.offsetHeight / 2}px` : '',
-          bottom: !onBottom ? `${-this._arrowElement.offsetHeight / 2}px` : '',
+    if (this._cleanup) {
+      this._cleanup();
+    }
+    this._cleanup = autoUpdate(element, this._tooltipElement, () => {
+      computePosition(element, this._tooltipElement, {
+        placement: this.placement,
+        strategy: this.strategy,
+        middleware: [
+          offset(5),
+          flip(),
+          shift({ padding: 8 }),
+          arrow({ element: this._arrowElement })
+        ],
+      }).then(({ x, y, placement, middlewareData }) => {
+        const newTop = placement.includes("bottom") ? y + this.gapOptions.verticalGap : y - this.gapOptions.verticalGap;
+        const newLeft = placement.includes("start") ? x + this.gapOptions.horizontalGap : x - this.gapOptions.horizontalGap;
+        Object.assign(this._tooltipElement.style, {
+          top: `${newTop}px`,
+          left: `${newLeft}px`,
         });
-      }
+        if (middlewareData.arrow) {
+          const { x } = middlewareData.arrow;
+          const onBottom = placement.includes("bottom");
+          Object.assign(this._arrowElement.style, {
+            left: `${x}px`,
+            top: onBottom ? `${-this._arrowElement.offsetHeight / 2}px` : '',
+            bottom: !onBottom ? `${-this._arrowElement.offsetHeight / 2}px` : '',
+          });
+        }
+      });
     });
   }
   handleSlotChange(ev) {
@@ -87,32 +94,41 @@ export class EzTooltip {
     if (!element) {
       return;
     }
-    element.addEventListener('mouseenter', () => {
-      this.openTooltip();
-    });
-    element.addEventListener('mouseleave', () => {
-      this.closeTooltip();
-    });
+    this.removeEvents(element);
+    this._mouseEnterHandler = () => this.openTooltip();
+    this._mouseLeaveHandler = () => this.closeTooltip();
+    element.addEventListener('mouseenter', this._mouseEnterHandler);
+    element.addEventListener('mouseleave', this._mouseLeaveHandler);
   }
   removeEvents(element = this.anchoringElement) {
     if (!element) {
       return;
     }
-    element.removeEventListener('mouseenter', () => {
-      this.openTooltip();
-    });
-    element.removeEventListener('mouseleave', () => {
-      this.closeTooltip();
-    });
+    if (this._mouseEnterHandler) {
+      element.removeEventListener('mouseenter', this._mouseEnterHandler);
+    }
+    if (this._mouseLeaveHandler) {
+      element.removeEventListener('mouseleave', this._mouseLeaveHandler);
+    }
   }
   componentDidLoad() {
     this.setEvents();
+    this.addInfoId();
+  }
+  addInfoId() {
+    if (this._element) {
+      ElementIDUtils.addIDInfo(this._element);
+    }
+  }
+  disconnectedCallback() {
+    this.removeEvents();
+    if (this._cleanup) {
+      this._cleanup();
+    }
+    clearTimeout(this._debouncingTimeout);
   }
   render() {
-    return (h(Host, null, h("div", Object.assign({ ref: ref => this._tooltipElement = ref }, { inert: true }, { class: {
-        "tooltip": true,
-        [`${this.type}-tooltip`]: true,
-      }, style: {
+    return (h(Host, null, h("div", Object.assign({ ref: ref => this._tooltipElement = ref }, { inert: true }, { class: "tooltip", "data-type": this.type, "data-active": this.active.toString(), "data-strategy": this.strategy, style: {
         maxWidth: (this.maxWidth && !this.useAnchorSize) ? `${this.maxWidth}px` : undefined,
       }, role: "tooltip", "data-element-id": ElementIDUtils.getInternalIDInfo("tooltip") }), this.message, h("div", { ref: ref => this._arrowElement = ref, class: "arrow" })), h("slot", { onSlotchange: (ev) => { this.handleSlotChange(ev); } })));
   }
@@ -294,6 +310,24 @@ export class EzTooltip {
         "attribute": "use-anchor-size",
         "reflect": false,
         "defaultValue": "false"
+      },
+      "strategy": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'absolute' | 'fixed'",
+          "resolved": "\"absolute\" | \"fixed\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Define a estrat\u00E9gia de posicionamento do tooltip.\nUse 'fixed' quando o elemento estiver dentro de containers com position: relative."
+        },
+        "attribute": "strategy",
+        "reflect": false,
+        "defaultValue": "'absolute'"
       }
     };
   }

package/dist/collection/components/ez-tree/ez-tree.js

@@ -82,6 +82,18 @@ export class EzTree {
   async applyFilter(pattern) {
     await this._tree.setFilterPattern(pattern, this.enableHierarchicalFilter);
   }
+  /**
+   * Expande todos os itens da árvore.
+   */
+  async expandAll() {
+    this._tree.expandAll();
+  }
+  /**
+   * Recolhe todos os itens da árvore.
+   */
+  async collapseAll() {
+    this._tree.collapseAll();
+  }
   /**
    * Atualiza um item
    */
@@ -616,6 +628,38 @@ export class EzTree {
           "tags": []
         }
       },
+      "expandAll": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "Expande todos os itens da \u00E1rvore.",
+          "tags": []
+        }
+      },
+      "collapseAll": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "Recolhe todos os itens da \u00E1rvore.",
+          "tags": []
+        }
+      },
       "updateItem": {
         "complexType": {
           "signature": "(item: ITreeItem) => Promise<void>",

package/dist/collection/components/ez-tree/types/Tree.js

@@ -50,6 +50,7 @@ export class Tree extends Node {
     }
     else {
       this._filterPattern = StringUtils.replaceAccentuatedCharsKeepSymbols(pattern);
+      this.setAllChildrenExpanded(this, false);
       this.applyFilter(this);
     }
     this._changeCallback();
@@ -84,6 +85,11 @@ export class Tree extends Node {
     });
   }
   applyFilter(node) {
+    if (!this._filterPattern) {
+      node.visible = true;
+      this.setAllChildrenVisible(node);
+      return;
+    }
     node.children.forEach((value) => {
       this.applyFilter(value);
     });
@@ -94,6 +100,7 @@ export class Tree extends Node {
     let isVisible = false;
     if (normalizedLabel.includes(this._filterPattern)) {
       isVisible = true;
+      node.item.expanded = true;
       this.setAllChildrenVisible(node);
     }
     else {
@@ -160,6 +167,22 @@ export class Tree extends Node {
       });
     });
   }
+  expandAll() {
+    this.setAllChildrenExpanded(this, true);
+    this._changeCallback();
+  }
+  collapseAll() {
+    this.setAllChildrenExpanded(this, false);
+    this._changeCallback();
+  }
+  setAllChildrenExpanded(node, expanded) {
+    if (node.item && !node.isPlaceHolder) {
+      node.item.expanded = expanded;
+    }
+    node.children.forEach(child => {
+      this.setAllChildrenExpanded(child, expanded);
+    });
+  }
   async loadLevel(node) {
     return new Promise(resolve => {
       node.addPlaceHolder();

package/dist/collection/components/ez-view-stack/ez-view-stack.js

@@ -30,7 +30,7 @@ export class EzViewStack {
   policyShowAppend(index) {
     let selectedElement = this._hostElem.querySelector(`#${this._dataKey}_el_${index}`);
     if (selectedElement) {
-      selectedElement.removeAttribute("style");
+      selectedElement.setAttribute("style", "visibility: visible");
     }
     else {
       this._hostElem.append(this._elemList[index]);
@@ -57,6 +57,9 @@ export class EzViewStack {
         if (index !== 0) {
           this.checkElementVisibility(element);
         }
+        else {
+          element.setAttribute("style", "visibility: visible");
+        }
         this._totalStackItems++;
         this._elemList.push(element);
       });

package/dist/collection/global/app-init.js

@@ -1,6 +1,8 @@
 import initI18n from '../utils/i18n';
 export default async function initializeApp() {
   await initI18n();
-  console.log('Global initialization ez-ui completed!');
+  if (process.env.NODE_ENV !== 'development') {
+    console.log('Global initialization ez-ui completed!');
+  }
 }
 ;

package/dist/collection/utils/i18n/locales/en-us.js

@@ -13,6 +13,7 @@ export default {
       loading: "Loading",
       apply: "Apply",
       cancel: "Cancel",
+      confirm: "Confirm",
       ok: "OK",
       alerts: "Alerts",
       requiredInfo: " (required) *",
@@ -62,6 +63,10 @@ export default {
       placeholder: "Select an item",
       noResults: "No results found",
     },
+    "ez-classic-combo-box": {
+      emptyOption: "Select an item",
+      noResults: "No results found",
+    },
     "ez-date-time-input": {
       invalidDate: "The entered value is not a valid date and time"
     },
@@ -280,6 +285,9 @@ export default {
       waitForLoad: "Wait for loading to select records from all pages",
       allRecordsSelected: "All <strong>{{selectionCount}} records</strong> in the grid are selected.",
       selectedRecords: "There <strong>{{selectionCount}} record{{plural}}</strong> selected in the grid.",
+    },
+    spinner: {
+      loading: "Loading..."
     }
   }
 };

package/dist/collection/utils/i18n/locales/es-es.js

@@ -13,6 +13,7 @@ export default {
       loading: "Cargando",
       apply: "Aplicar",
       cancel: "Cancelar",
+      confirm: "Confirmar",
       ok: "OK",
       alerts: "Avisos",
       requiredInfo: " (obligatorio) *",
@@ -62,6 +63,10 @@ export default {
       placeholder: "Seleccione un elemento",
       noResults: "No se encontraron resultados",
     },
+    "ez-classic-combo-box": {
+      emptyOption: "Seleccione un elemento",
+      noResults: "No se encontraron resultados",
+    },
     "ez-date-time-input": {
       invalidDate: "El valor ingresado no es una fecha y hora válida"
     },
@@ -280,6 +285,9 @@ export default {
       waitForLoad: "Espere a que se carguen para seleccionar los registros de todas las páginas",
       allRecordsSelected: "Todos los <strong>{{selectionCount}} registros</strong> en la cuadrícula están seleccionados.",
       selectedRecords: "Hay <strong>{{selectionCount}} registro{{plural}}</strong> seleccionado{{plural}} en la cuadrícula.",
+    },
+    spinner: {
+      loading: "Cargando...",
     }
   }
 };

package/dist/collection/utils/i18n/locales/pt-br.js

@@ -13,6 +13,7 @@ export default {
       loading: "Carregando",
       apply: "Aplicar",
       cancel: "Cancelar",
+      confirm: "Confirmar",
       ok: "OK",
       alerts: "Avisos",
       requiredInfo: " (obrigatório) *",
@@ -62,6 +63,10 @@ export default {
       placeholder: "Selecione um item",
       noResults: "Nenhum resultado encontrado",
     },
+    "ez-classic-combo-box": {
+      emptyOption: "Selecione um item",
+      noResults: "Nenhum resultado encontrado",
+    },
     "ez-date-time-input": {
       invalidDate: "O valor digitado não é uma data e hora válida"
     },
@@ -280,6 +285,9 @@ export default {
       waitForLoad: "Aguarde o carregamento para selecionar o registro de todas as páginas",
       allRecordsSelected: "Todos os <strong>{{selectionCount}} registros</strong> da grade estão selecionados.",
       selectedRecords: "Há <strong>{{selectionCount}} registro{{plural}}</strong> selecionado{{plural}} na grade.",
+    },
+    spinner: {
+      loading: "Carregando..."
     }
   }
 };

package/dist/custom-elements/index.d.ts

@@ -188,6 +188,12 @@ export const EzGrid: {
   new (): EzGrid;
 };
 
+interface EzGridView extends Components.EzGridView, HTMLElement {}
+export const EzGridView: {
+  prototype: EzGridView;
+  new (): EzGridView;
+};
+
 interface EzGuideNavigator extends Components.EzGuideNavigator, HTMLElement {}
 export const EzGuideNavigator: {
   prototype: EzGuideNavigator;
@@ -212,6 +218,12 @@ export const EzList: {
   new (): EzList;
 };
 
+interface EzListItem extends Components.EzListItem, HTMLElement {}
+export const EzListItem: {
+  prototype: EzListItem;
+  new (): EzListItem;
+};
+
 interface EzLoadingBar extends Components.EzLoadingBar, HTMLElement {}
 export const EzLoadingBar: {
   prototype: EzLoadingBar;
@@ -374,6 +386,12 @@ export const EzSortableList: {
   new (): EzSortableList;
 };
 
+interface EzSpinner extends Components.EzSpinner, HTMLElement {}
+export const EzSpinner: {
+  prototype: EzSpinner;
+  new (): EzSpinner;
+};
+
 interface EzSplitButton extends Components.EzSplitButton, HTMLElement {}
 export const EzSplitButton: {
   prototype: EzSplitButton;