@sankhyalabs/ezui 6.6.0-dev.3 → 6.6.0-dev.4

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

@@ -334,9 +334,13 @@ export class EzChip {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "'primary' | 'secondary'",
-          "resolved": "\"primary\" | \"secondary\"",
-          "references": {}
+          "original": "EzChipType",
+          "resolved": "\"error\" | \"error-light\" | \"primary\" | \"secondary\" | \"success\" | \"success-light\" | \"warning\" | \"warning-light\"",
+          "references": {
+            "EzChipType": {
+              "location": "local"
+            }
+          }
         },
         "required": false,
         "optional": false,

package/dist/collection/components/ez-combo-box/ez-combo-box.js

@@ -897,6 +897,21 @@ export class EzComboBox {
             }
           }
         }
+      }, {
+        "method": "ezVisibilityChange",
+        "name": "ezVisibilityChange",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Emitido quando acontece a altera\u00E7\u00E3o de visibilidade do popover."
+        },
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        }
       }];
   }
   static get methods() {

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

@@ -16,6 +16,7 @@ export class EzList {
     this.itemLeftSlotBuilder = undefined;
     this.hoverFeedback = false;
     this.enableMultipleSelection = false;
+    this.enabled = true;
   }
   /**
    * Limpa o histórico da lista.
@@ -584,7 +585,7 @@ export class EzList {
           'hover-feedback': this.hoverFeedback,
         }, key: 'item_' + item.id }, {
         [ElementIDUtils.DATA_ELEMENT_ID_ATTRIBUTE_NAME]: ElementIDUtils.getInternalIDInfo(`ezListItem__${StringUtils.replaceAccentuatedChars(item.label)}`),
-      }), h("div", { class: 'draggable' + (item.selected == true ? ' selected-item ' : '') + (this.ezSelectable == true ? ' selectable ' : ''), onDblClick: () => this.doubleClickItem(item), onClick: () => this.setSelection(item), onDragLeave: () => group.sort ? undefined : this.removeOverClass(), onDragEnd: () => this.onDragEnd(), onDragStart: () => this.onDragStart(item, group, index), onDragOver: event => group.sort ? undefined : this.onDragOverItem(event), onDrop: event => this.onDrop(event, { groupName: group.group, item: item, index: index }), draggable: this.ezDraggable }, h("div", { class: 'item-content' }, this.ezDraggable ? h("span", { class: 'draggable-icon' }) : undefined, this.listMode === 'regular' ? (h(Fragment, null, !!this.itemLeftSlotBuilder && this.getContainerItemBuilder('left', item, group), h("p", { title: item.label, class: 'person-name text--ellipsis' }, item.label))) : (h("ez-check", { label: item.label, value: item.check, onEzChange: evt => this.ezCheckChange.emit(this.buildItem(item, evt)) }))), !!this.itemSlotBuilder && this.getContainerItemBuilder('right', item, group, 'slot-item')))))), h("div", { class: 'last-droppable-space', onDragLeave: () => this.removeOverClass(), onDragOver: event => this.onDragOverLastIndex(event), onDragEnd: () => this.onDragEnd(), onDrop: event => this.onDropLastIndex(event, group) })), group.sort ? (h("div", { id: this.getGroupOverlayId(group.group), class: 'group-overlay' }, this.i18n("ez-list.moveToGroup", { groupName: group.group }))) : undefined)));
+      }), h("div", { class: 'draggable' + (item.selected == true ? ' selected-item ' : '') + (this.ezSelectable == true ? ' selectable ' : ''), onDblClick: () => this.doubleClickItem(item), onClick: () => this.setSelection(item), onDragLeave: () => group.sort ? undefined : this.removeOverClass(), onDragEnd: () => this.onDragEnd(), onDragStart: () => this.onDragStart(item, group, index), onDragOver: event => group.sort ? undefined : this.onDragOverItem(event), onDrop: event => this.onDrop(event, { groupName: group.group, item: item, index: index }), draggable: this.ezDraggable }, h("div", { class: 'item-content' }, this.ezDraggable ? h("span", { class: 'draggable-icon' }) : undefined, this.listMode === 'regular' ? (h(Fragment, null, !!this.itemLeftSlotBuilder && this.getContainerItemBuilder('left', item, group), h("p", { title: item.label, class: 'person-name text--ellipsis' }, item.label))) : (h("ez-check", { enabled: this.enabled, label: item.label, value: item.check, onEzChange: evt => this.ezCheckChange.emit(this.buildItem(item, evt)) }))), !!this.itemSlotBuilder && this.getContainerItemBuilder('right', item, group, 'slot-item')))))), h("div", { class: 'last-droppable-space', onDragLeave: () => this.removeOverClass(), onDragOver: event => this.onDragOverLastIndex(event), onDragEnd: () => this.onDragEnd(), onDrop: event => this.onDropLastIndex(event, group) })), group.sort ? (h("div", { id: this.getGroupOverlayId(group.group), class: 'group-overlay' }, this.i18n("ez-list.moveToGroup", { groupName: group.group }))) : undefined)));
     }));
   }
   renderList() {
@@ -593,7 +594,7 @@ export class EzList {
       } }, h("div", { class: 'draggable-list' }, this._listItems.map((item, index) => (h("li", Object.assign({ id: 'item_' + item.id, class: {
         'selectable-container': this.ezSelectable,
         'hover-feedback': this.hoverFeedback,
-      }, key: 'item_' + item.id }, { [ElementIDUtils.DATA_ELEMENT_ID_ATTRIBUTE_NAME]: ElementIDUtils.getInternalIDInfo(`ezListItem__${StringUtils.replaceAccentuatedChars(item.label)}`) }), h("div", { class: 'draggable' + (item.selected == true ? ' selected-item ' : '') + (this.ezSelectable == true ? ' selectable ' : ''), onDblClick: () => this.doubleClickItem(item), onClick: (event) => this.setSelection(item, false, event.shiftKey, (event.altKey || event.metaKey)), onDragStart: () => this.onDragStart({ item: item, index: index }), onDragOver: event => this.onDragOverItem(event), onDragLeave: () => this.removeOverClass(), onDragEnd: () => this.onDragEnd(), onDrop: event => this.onDrop(event, { item: item, index: index }), draggable: this.ezDraggable }, h("div", { class: 'item-content' }, this.listMode === 'regular' ? (h(Fragment, null, this.ezDraggable ? h("span", { class: 'draggable-icon' }) : undefined, !!this.itemLeftSlotBuilder && this.getContainerItemBuilder('left', item), h("p", { title: item.label, class: 'person-name text--ellipsis' }, item.label))) : (h(Fragment, null, this.ezDraggable ? h("span", { class: 'draggable-icon' }) : undefined, h("ez-check", { label: item.label, value: item.check, onEzChange: evt => this.ezCheckChange.emit({ id: item.id, label: item.label, check: evt.detail }) })))), !!this.itemSlotBuilder && this.getContainerItemBuilder('right', item))))), h("div", { class: 'last-droppable-space', onDragLeave: () => this.removeOverClass(), onDragOver: event => this.onDragOverLastIndex(event), onDragEnd: () => this.onDragEnd(), onDrop: event => this.onDropLastIndex(event) })));
+      }, key: 'item_' + item.id }, { [ElementIDUtils.DATA_ELEMENT_ID_ATTRIBUTE_NAME]: ElementIDUtils.getInternalIDInfo(`ezListItem__${StringUtils.replaceAccentuatedChars(item.label)}`) }), h("div", { class: 'draggable' + (item.selected == true ? ' selected-item ' : '') + (this.ezSelectable == true ? ' selectable ' : ''), onDblClick: () => this.doubleClickItem(item), onClick: (event) => this.setSelection(item, false, event.shiftKey, (event.altKey || event.metaKey)), onDragStart: () => this.onDragStart({ item: item, index: index }), onDragOver: event => this.onDragOverItem(event), onDragLeave: () => this.removeOverClass(), onDragEnd: () => this.onDragEnd(), onDrop: event => this.onDrop(event, { item: item, index: index }), draggable: this.ezDraggable }, h("div", { class: 'item-content' }, this.listMode === 'regular' ? (h(Fragment, null, this.ezDraggable ? h("span", { class: 'draggable-icon' }) : undefined, !!this.itemLeftSlotBuilder && this.getContainerItemBuilder('left', item), h("p", { title: item.label, class: 'person-name text--ellipsis' }, item.label))) : (h(Fragment, null, this.ezDraggable ? h("span", { class: 'draggable-icon' }) : undefined, h("ez-check", { enabled: this.enabled, label: item.label, value: item.check, onEzChange: evt => this.ezCheckChange.emit({ id: item.id, label: item.label, check: evt.detail }) })))), !!this.itemSlotBuilder && this.getContainerItemBuilder('right', item))))), h("div", { class: 'last-droppable-space', onDragLeave: () => this.removeOverClass(), onDragOver: event => this.onDragOverLastIndex(event), onDragEnd: () => this.onDragEnd(), onDrop: event => this.onDropLastIndex(event) })));
   }
   render() {
     return (h(Host, { ref: el => (this._element = el) }, this.useGroups ? this.renderListWithGroups() : this.renderList()));
@@ -787,6 +788,24 @@ export class EzList {
         "attribute": "enable-multiple-selection",
         "reflect": false,
         "defaultValue": "false"
+      },
+      "enabled": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Habilita a sele\u00E7\u00E3o de checkbox."
+        },
+        "attribute": "enabled",
+        "reflect": false,
+        "defaultValue": "true"
       }
     };
   }

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

@@ -219,9 +219,9 @@ export class EzSearch {
   isOptionsVisible() {
     return this._ezPopOverPlusElement.opened;
   }
-  selectCurrentOption() {
+  selectCurrentOption(focusOnInput = true) {
     if (this._preSelection !== undefined) {
-      this.selectOption(this._visibleOptions[this._preSelection]);
+      this.selectOption(this._visibleOptions[this._preSelection], focusOnInput);
       this._preSelection = undefined;
     }
     else {
@@ -576,7 +576,7 @@ export class EzSearch {
         break;
       case "Tab":
         this._tabPressed = true;
-        this.controlListWithOnlyOne(false);
+        this.selectCurrentOption(false);
         break;
     }
     //ATENÇÃO: Existe a necessidade de propagar o evento de teclado.

package/dist/collection/components/ez-search/subcomponent/search-list/search-list.js

@@ -91,7 +91,7 @@ export class SearchList {
     return (h(Host, null, h("ul", { class: "list-options", ref: elem => this._optionsList = elem }, !this.showLoading
       && this.cleanEmptyObjectArray(this.visibleOptions).length === 0
       && h("div", { class: "message" }, h("span", { class: "message__no-result" }, this.textEmptyList)), this.showLoading
-      && h("div", { class: "message" }, h("div", { class: "message__loading" })), this.canShowListOptions && this.cleanEmptyObjectArray(this.visibleOptions).map((opt, index) => this.buildItem(opt, index)))));
+      && h("div", { class: "message" }, h("div", { class: "message__loading" })), this.canShowListOptions && this.visibleOptions.map((opt, index) => this.buildItem(opt, index)))));
   }
   static get is() { return "search-list"; }
   static get encapsulation() { return "shadow"; }

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'"
       }
     };
   }