@sankhyalabs/ezui 5.22.0-dev.109 → 5.22.0-dev.110

package/dist/collection/components/ez-text-input/ez-text-input.js

@@ -1,12 +1,12 @@
 import { h, Host } from "@stencil/core";
 import { ElementIDUtils, MaskFormatter } from "@sankhyalabs/core";
-import { applyEllipsisToInput } from "../../utils/ResponsiveInputUtils";
 export class EzTextInput {
   constructor() {
     this.label = undefined;
     this.value = undefined;
     this.enabled = true;
     this.errorMessage = undefined;
+    this.hasInvalid = false;
     this.mask = undefined;
     this.cleanValueMask = false;
     this.canShowError = true;
@@ -17,17 +17,26 @@ export class EzTextInput {
     this.autoFocus = false;
     this.hasRightSlotContent = false;
   }
+  observeHasInvalid() {
+    if (!this._inputElem)
+      return;
+    if (this.hasInvalid) {
+      this._inputElem.classList.add("hasError");
+    }
+    else {
+      this._inputElem.classList.remove("hasError");
+    }
+  }
   observeErrorMessage() {
     if (this._inputElem) {
       this.isInvalid().then((hasError) => {
-        var _a;
         if (hasError) {
           this._inputElem.classList.add("hasError");
-          (_a = this._tooltipPositioningObserver) === null || _a === void 0 ? void 0 : _a.observe(this._inputElem);
+          // this._tooltipPositioningObserver?.observe(this._inputElem);
         }
         else {
           this._inputElem.classList.remove("hasError");
-          this.removeGlobalTooltip();
+          // this.removeGlobalTooltip();
         }
       });
     }
@@ -235,35 +244,8 @@ export class EzTextInput {
     }
     this.adjustColorContentSlot("var(--ez-text-input__input--focus--icon-color)");
   }
-  renderGlobalTooltip() {
-    const tooltip = document.createElement('ez-tooltip');
-    tooltip.errorMessage = this.errorMessage;
-    tooltip.anchoringElement = this._tooltipIconElem;
-    document.body.appendChild(tooltip);
-    this._tooltipElem = tooltip;
-  }
-  removeGlobalTooltip() {
-    var _a;
-    if (!this._tooltipElem)
-      return;
-    this._tooltipElem.remove();
-    this._tooltipElem = undefined;
-    (_a = this._tooltipPositioningObserver) === null || _a === void 0 ? void 0 : _a.unobserve(this._inputElem);
-  }
-  createTooltipPositioningObserver() {
-    const observer = new ResizeObserver(() => {
-      if (!this._tooltipElem)
-        return;
-      if (!this._tooltipIconElem)
-        return;
-      clearTimeout(this._observerDebounceTimeout);
-      this._observerDebounceTimeout = setTimeout(async () => {
-        if (this._tooltipElem) {
-          await this._tooltipElem.positionTooltip();
-        }
-      }, 200);
-    });
-    this._tooltipPositioningObserver = observer;
+  getValue() {
+    return this.mask && this.cleanValueMask ? this.applyMask(this.value) : this.value;
   }
   //---------------------------------------------
   // Lifecycle web component
@@ -291,7 +273,7 @@ export class EzTextInput {
     }
   }
   componentDidLoad() {
-    var _a, _b;
+    var _a;
     this.observeErrorMessage();
     this.observeMask();
     this.adjustFloatingLabel();
@@ -305,37 +287,13 @@ export class EzTextInput {
       var _a;
       this._inputElem.setSelectionRange(0, (_a = this._inputElem) === null || _a === void 0 ? void 0 : _a.value.length);
     });
-    this.createTooltipPositioningObserver();
-    if (this._inputElem) {
-      (_b = this._tooltipPositioningObserver) === null || _b === void 0 ? void 0 : _b.observe(this._inputElem);
-      applyEllipsisToInput(this._inputElem);
-    }
-  }
-  componentDidRender() {
-    if (this._tooltipIconElem && !this._tooltipElem) {
-      this.renderGlobalTooltip();
-    }
-  }
-  componentDidUpdate() {
-    if (this._tooltipIconElem && this._tooltipElem) {
-      this._tooltipElem.positionTooltip();
-    }
-  }
-  disconnectedCallback() {
-    if (this._tooltipPositioningObserver) {
-      this._tooltipPositioningObserver.disconnect();
-    }
-    if (this._observerDebounceTimeout) {
-      clearTimeout(this._observerDebounceTimeout);
-    }
-    this.removeGlobalTooltip();
   }
   render() {
     ElementIDUtils.addIDInfoIfNotExists(this._hostElement, 'input');
     return (h(Host, { style: this._hostElement.classList.contains("grid_editor") ? { "height": "100%" } : null }, h("slot", { name: "leftIcon", onSlotchange: (ev) => { this.handleSlotChange(ev); } }), this.label && this.mode != "slim" ?
       h("label", { ref: (el) => this._labelElem = el, class: `${this.enabled ? "input__label" : "input__label input__label--disabled"} ${this.errorMessage ? "hasError" : ""}`, onClick: () => this._inputElem.focus(), title: this.label }, this.label)
-      : null, h("input", { "data-element-id": ElementIDUtils.getInternalIDInfo("input"), onFocus: () => this.doFocus(), ref: (el) => this._inputElem = el, type: this.password ? "password" : "text", class: `${this.mode === "slim" ? "input--slim" : ""}`, placeholder: this.mode === "slim" && this.label ? this.label : "", value: this.mask && this.cleanValueMask ? this.applyMask(this.value) : this.value, disabled: !this.enabled, onInput: () => { this.handleChange(); }, onFocusout: () => { this.handleFocusout(); } }), this.canShowError && this.mode != "slim" && this.errorMessage &&
-      h("ez-icon", { class: `tooltip-icon ${this.errorMessage ? "hasError" : ""} ${this.hasRightSlotContent ? "rightIconSlot" : ""}`, "data-element-id": ElementIDUtils.getInternalIDInfo("tooltip-icon"), ref: (el) => this._tooltipIconElem = el, iconName: "alert-circle" }), h("slot", { name: "rightIcon", onSlotchange: (ev) => { this.handleSlotChange(ev); } }, " ")));
+      : null, h("input", { "data-element-id": ElementIDUtils.getInternalIDInfo("input"), onFocus: () => this.doFocus(), ref: (el) => this._inputElem = el, type: this.password ? "password" : "text", class: `${this.mode === "slim" ? "input--slim" : ""}`, placeholder: this.mode === "slim" && this.label ? this.label : "", value: this.getValue(), disabled: !this.enabled, onInput: () => { this.handleChange(); }, onFocusout: () => { this.handleFocusout(); } }), h("ez-tooltip", { anchoringElement: this._hostElement, message: this.getValue(), minWidth: 30 }), this.canShowError && this.mode != "slim" && this.errorMessage &&
+      h("ez-tooltip", { type: "error", message: this.errorMessage }, h("ez-icon", { class: `tooltip-icon ${this.errorMessage ? "hasError" : ""} ${this.hasRightSlotContent ? "rightIconSlot" : ""}`, "data-element-id": ElementIDUtils.getInternalIDInfo("tooltip-icon"), ref: (el) => this._tooltipIconElem = el, iconName: "alert-circle" })), h("slot", { name: "rightIcon", onSlotchange: (ev) => { this.handleSlotChange(ev); } }, " ")));
   }
   static get is() { return "ez-text-input"; }
   static get encapsulation() { return "shadow"; }
@@ -420,6 +378,24 @@ export class EzTextInput {
         "attribute": "error-message",
         "reflect": true
       },
+      "hasInvalid": {
+        "type": "boolean",
+        "mutable": true,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Define se o campo est\u00E1 em estado inv\u00E1lido (bordas vermelhas)."
+        },
+        "attribute": "has-invalid",
+        "reflect": true,
+        "defaultValue": "false"
+      },
       "mask": {
         "type": "string",
         "mutable": false,
@@ -648,6 +624,9 @@ export class EzTextInput {
   static get elementRef() { return "_hostElement"; }
   static get watchers() {
     return [{
+        "propName": "hasInvalid",
+        "methodName": "observeHasInvalid"
+      }, {
         "propName": "errorMessage",
         "methodName": "observeErrorMessage"
       }, {

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

@@ -1,20 +1,60 @@
 :host {
+    --triangle-size: 8px;
+}
+
+.tooltip {
     position: absolute;
     z-index: var(--elevation--24);
-    background: var(--color-alert--error-800, #BD0025);
     padding: var(--space--extra-small, 3px) var(--space--small, 6px);
-    color: var(--color--inverted);
     border-radius: var(--border--radius-small);
-    display: none; /* Initially hide the tooltip */
-    transform: translateX(calc(-50% + 12px)) translateY(8px);
+    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);
+    text-align: center;
+    /* Initially hide the tooltip */
+    display: none;
 }
 
-.tooltip::after{
-    --triangle-size: 8px;
-    content: '';
-    right: 50%;
-    border: var(--triangle-size) solid transparent;
-    border-bottom-color: var(--color-alert--error-800, #BD0025);
+.arrow {
     position: absolute;
-    transform: translateX(calc(50%)) translateY(-100%);
-  }
+    width: var(--triangle-size);
+    height: var(--triangle-size);
+    transform: rotate(45deg);
+}
+
+.default-tooltip {
+    background: var(--title--primary, #2b3a54);
+    color: var(--color--inverted);
+}
+
+.default-tooltip .arrow {
+    background: var(--title--primary, #2b3a54);
+}
+
+.error-tooltip {
+    background: var(--color-alert--error-800, #BD0025);
+    color: var(--color--error-200, #F7E0E5);
+}
+
+.error-tooltip .arrow {
+    background: var(--color-alert--error-800, #BD0025);
+}
+
+.success-tooltip {
+    background: var(--color--success, #00cb94);
+    color: var(--color--success-200, #EBFFFA);
+}
+
+.success-tooltip .arrow {
+    background: var(--color--success, #00cb94);
+}
+
+.warning-tooltip {
+    background: var(--color--warning, #f2d410);
+    color: var(--color--warning-200, #FDF8D8);
+}
+
+.warning-tooltip .arrow {
+    background: var(--color--warning, #f2d410);
+}

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

@@ -1,44 +1,115 @@
+import { arrow, computePosition, flip, offset, shift } from "@floating-ui/dom";
 import { ElementIDUtils } from "@sankhyalabs/core";
-import { h } from "@stencil/core";
+import { Fragment, h } from "@stencil/core";
 export class EzTooltip {
   constructor() {
-    this.errorMessage = undefined;
+    this._opened = false;
+    this.message = undefined;
     this.anchoringElement = undefined;
+    this.placement = 'bottom';
+    this.gapOptions = { horizontalGap: 0, verticalGap: 0 };
+    this.type = 'default';
+    this.debouncingTime = 500;
+    this.active = true;
+    this.minWidth = 150;
   }
-  /**
-   * TODO: Implementar a possibilidade de definir a posição do tooltip.
-   */
-  // @Prop() tooltipSide: 'left' | 'right' | 'top' | 'bottom' = 'bottom';
-  /**
-   * Reposiciona o tooltip de acordo com a posição do elemento de ancoragem.
-   */
-  async positionTooltip() {
-    const anchorRect = this.anchoringElement.getBoundingClientRect();
-    const top = (anchorRect.bottom + window.scrollY);
-    const left = (anchorRect.left + window.scrollX);
-    this._element.style.top = `${top}px`;
-    this._element.style.left = `${left}px`;
+  watchAnchoringElement(newValue, oldValue) {
+    if (newValue) {
+      this.setEvents(newValue);
+      this.removeEvents(oldValue);
+    }
   }
-  setEvents() {
-    window.addEventListener('scroll', () => {
-      this.positionTooltip();
-    }, { capture: true });
-    window.addEventListener('resize', () => {
-      this.positionTooltip();
-    }, { capture: true });
-    this.anchoringElement.addEventListener('mouseover', () => {
-      this._element.style.display = 'block';
+  watchMessage(newValue) {
+    if (!newValue) {
+      this.closeTooltip();
+      return;
+    }
+    this.updatePosition();
+  }
+  openTooltip() {
+    if (this.message && this.active) {
+      if (this._debouncingTimeout) {
+        clearTimeout(this._debouncingTimeout);
+      }
+      this._debouncingTimeout = setTimeout(() => {
+        this._opened = true;
+        this._tooltipElement.style.display = 'block';
+        this.updatePosition();
+      }, this.debouncingTime);
+    }
+  }
+  closeTooltip() {
+    clearTimeout(this._debouncingTimeout);
+    this._tooltipElement.style.display = 'none';
+    this._opened = false;
+  }
+  async updatePosition(element = this.anchoringElement) {
+    if (!element || !this._opened) {
+      return;
+    }
+    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` : '',
+        });
+      }
+    });
+  }
+  handleSlotChange(ev) {
+    const slot = ev.target;
+    const content = slot.assignedElements()[0];
+    this.anchoringElement = content;
+  }
+  setEvents(element = this.anchoringElement) {
+    if (!element) {
+      return;
+    }
+    element.addEventListener('mouseenter', () => {
+      this.openTooltip();
+    });
+    element.addEventListener('mouseleave', () => {
+      this.closeTooltip();
+    });
+  }
+  removeEvents(element = this.anchoringElement) {
+    if (!element) {
+      return;
+    }
+    element.removeEventListener('mouseenter', () => {
+      this.openTooltip();
     });
-    this.anchoringElement.addEventListener('mouseout', () => {
-      this._element.style.display = 'none';
+    element.removeEventListener('mouseleave', () => {
+      this.closeTooltip();
     });
   }
   componentDidLoad() {
-    this.positionTooltip();
     this.setEvents();
   }
   render() {
-    return (h("div", { inert: true, class: "tooltip", role: "tooltip", "data-element-id": ElementIDUtils.getInternalIDInfo("tooltip") }, this.errorMessage));
+    return (h(Fragment, null, h("div", Object.assign({ ref: ref => this._tooltipElement = ref }, { inert: true }, { class: {
+        "tooltip": true,
+        [`${this.type}-tooltip`]: true,
+      }, style: {
+        minWidth: `${this.minWidth}px`
+      }, 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); } })));
   }
   static get is() { return "ez-tooltip"; }
   static get encapsulation() { return "shadow"; }
@@ -54,7 +125,7 @@ export class EzTooltip {
   }
   static get properties() {
     return {
-      "errorMessage": {
+      "message": {
         "type": "string",
         "mutable": false,
         "complexType": {
@@ -66,9 +137,9 @@ export class EzTooltip {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Mensagem de erro que ser\u00E1 apresentada no tooltip."
+          "text": "Mensagem que ser\u00E1 apresentada no tooltip."
         },
-        "attribute": "error-message",
+        "attribute": "message",
         "reflect": false
       },
       "anchoringElement": {
@@ -89,28 +160,128 @@ export class EzTooltip {
           "tags": [],
           "text": "Elemento HTML que ser\u00E1 utilizado como ancoragem do tooltip."
         }
-      }
-    };
-  }
-  static get methods() {
-    return {
-      "positionTooltip": {
+      },
+      "placement": {
+        "type": "string",
+        "mutable": false,
         "complexType": {
-          "signature": "() => Promise<void>",
-          "parameters": [],
+          "original": "Placement",
+          "resolved": "\"bottom\" | \"bottom-end\" | \"bottom-start\" | \"left\" | \"left-end\" | \"left-start\" | \"right\" | \"right-end\" | \"right-start\" | \"top\" | \"top-end\" | \"top-start\"",
           "references": {
-            "Promise": {
-              "location": "global"
+            "Placement": {
+              "location": "import",
+              "path": "@floating-ui/dom"
             }
-          },
-          "return": "Promise<void>"
+          }
         },
+        "required": false,
+        "optional": false,
         "docs": {
-          "text": "Reposiciona o tooltip de acordo com a posi\u00E7\u00E3o do elemento de ancoragem.",
-          "tags": []
-        }
+          "tags": [],
+          "text": "Define a posi\u00E7\u00E3o do tooltip em rela\u00E7\u00E3o ao elemento de ancoragem."
+        },
+        "attribute": "placement",
+        "reflect": false,
+        "defaultValue": "'bottom'"
+      },
+      "gapOptions": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "{ horizontalGap: number; verticalGap: number; }",
+          "resolved": "{ horizontalGap: number; verticalGap: number; }",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Define o espa\u00E7amento entre o tooltip e o elemento de ancoragem."
+        },
+        "defaultValue": "{ horizontalGap: 0, verticalGap: 0 }"
+      },
+      "type": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'default' | 'success' | 'error' | 'warning'",
+          "resolved": "\"default\" | \"error\" | \"success\" | \"warning\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Define o tipo de tooltip a ser exibido."
+        },
+        "attribute": "type",
+        "reflect": false,
+        "defaultValue": "'default'"
+      },
+      "debouncingTime": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Tempo de espera para exibir o tooltip ap\u00F3s o evento de mouseenter."
+        },
+        "attribute": "debouncing-time",
+        "reflect": false,
+        "defaultValue": "500"
+      },
+      "active": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Define se o tooltip est\u00E1 ativo."
+        },
+        "attribute": "active",
+        "reflect": false,
+        "defaultValue": "true"
+      },
+      "minWidth": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Define a largura m\u00EDnima do elemento."
+        },
+        "attribute": "min-width",
+        "reflect": false,
+        "defaultValue": "150"
       }
     };
   }
   static get elementRef() { return "_element"; }
+  static get watchers() {
+    return [{
+        "propName": "anchoringElement",
+        "methodName": "watchAnchoringElement"
+      }, {
+        "propName": "message",
+        "methodName": "watchMessage"
+      }];
+  }
 }

package/dist/collection/utils/constants.js

@@ -2,3 +2,5 @@ export const REQUIRED_INFO = " (obrigatório) *";
 export const ALL_RECORD = "ALL_RECORD";
 export const DISTINCT_FILTER_NAME_PREFIX = 'FILTRO_COLUNA_';
 export const EZ_GRID_LOADING_SOURCE = "EZ_GRID_LOADING_SOURCE";
+export const PRESENTATION_COL_ID_PROP_NAME = "gridDescriptionColID";
+export const PRESENTATION_FROM_COL_PROP_NAME = "presentationFieldFrom";

package/dist/collection/utils/form/DataBinder.js

@@ -228,8 +228,9 @@ export default class DataBinder {
     }
   }
   bindSearchOptionsLoader(fieldName, field) {
-    if (field.nodeName === "EZ-SEARCH" && field["optionLoader"] == undefined) {
-      const loader = ApplicationContext.getContextValue("__EZUI__SEARCH__OPTION__LOADER__");
+    if ((field.nodeName === "EZ-SEARCH" || field.nodeName === "EZ-SEARCH-PLUS") && field["optionLoader"] == undefined) {
+      const isSearchPlus = field.nodeName === "EZ-SEARCH-PLUS";
+      const loader = isSearchPlus ? ApplicationContext.getContextValue("__EZUI__SEARCH__PLUS__OPTION__LOADER__") : ApplicationContext.getContextValue("__EZUI__SEARCH__OPTION__LOADER__");
       if (loader) {
         field["optionLoader"] = (arg, ctxOptions) => {
           return loader(arg, fieldName, this._dataUnit, ctxOptions);

package/dist/collection/utils/index.js

@@ -6,4 +6,5 @@ export { FormMetadata } from './form/FormMetadata';
 export { default as DataBinder } from './form/DataBinder';
 export { CustomEditorSource } from './customEditor/interfaces/ICustomEditor';
 export { CustomRenderSource } from './customRender/interfaces/ICustomRender';
+export { SearchMode } from './search/types';
 export { FormLayout } from './form/interfaces';

package/dist/collection/utils/search/types.js

@@ -0,0 +1,7 @@
+export var SearchMode;
+(function (SearchMode) {
+  SearchMode["ADVANCED"] = "ADVANCED";
+  SearchMode["PREDICTIVE"] = "PREDICTIVE";
+  SearchMode["LOAD_DESCRIPTION"] = "LOAD_DESCRIPTION";
+  SearchMode["PRELOAD"] = "PRELOAD";
+})(SearchMode || (SearchMode = {}));

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

@@ -248,6 +248,18 @@ export const EzSearch: {
   new (): EzSearch;
 };
 
+interface EzSearchPlus extends Components.EzSearchPlus, HTMLElement {}
+export const EzSearchPlus: {
+  prototype: EzSearchPlus;
+  new (): EzSearchPlus;
+};
+
+interface EzSearchResultList extends Components.EzSearchResultList, HTMLElement {}
+export const EzSearchResultList: {
+  prototype: EzSearchResultList;
+  new (): EzSearchResultList;
+};
+
 interface EzSidebarButton extends Components.EzSidebarButton, HTMLElement {}
 export const EzSidebarButton: {
   prototype: EzSidebarButton;