@sankhyalabs/ezui 5.10.8 → 5.11.0-dev.10

package/dist/collection/collection-manifest.json

@@ -6,6 +6,8 @@
     "./components/ez-breadcrumb/ez-breadcrumb.js",
     "./components/ez-card-item/ez-card-item.js",
     "./components/ez-list/ez-list.js",
+    "./components/ez-text-input/ez-text-input.js",
+    "./components/ez-popover/ez-popover.js",
     "./components/ez-radio-button/ez-radio-button.js",
     "./components/ez-tabselector/ez-tabselector.js",
     "./components/ez-text-edit/ez-text-edit.js",
@@ -35,14 +37,12 @@
     "./components/ez-multi-selection-list/ez-multi-selection-list.js",
     "./components/ez-multi-selection-list/subcomponents/multi-selection-box-message.js",
     "./components/ez-number-input/ez-number-input.js",
-    "./components/ez-popover/ez-popover.js",
     "./components/ez-popup/ez-popup.js",
     "./components/ez-scroller/ez-scroller.js",
     "./components/ez-search/ez-search.js",
     "./components/ez-sidebar-button/ez-sidebar-button.js",
     "./components/ez-skeleton/ez-skeleton.js",
     "./components/ez-text-area/ez-text-area.js",
-    "./components/ez-text-input/ez-text-input.js",
     "./components/ez-time-input/ez-time-input.js",
     "./components/ez-toast/ez-toast.js",
     "./components/ez-tree/ez-tree.js",

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

@@ -19,15 +19,24 @@ export class EzCalendar {
    */
   async show(top, left, bottom, right) {
     if (this.floating) {
-      this._floatingID = FloatingManager.float(this._box, this._container, { autoClose: true, top, left, bottom, right });
-      window.requestAnimationFrame(() => {
-        this._box.scrollIntoView({ behavior: "smooth", block: "nearest", inline: "nearest" });
+      this._floatingID = FloatingManager.float(this._box, this._container, {
+        isFixed: this.isFixed(),
+        autoClose: true,
+        top,
+        left,
+        bottom,
+        right
       });
-      this.scroll();
+      if (!this.isFixed()) {
+        window.requestAnimationFrame(() => {
+          this._box.scrollIntoView({ behavior: "smooth", block: "nearest", inline: "nearest" });
+        });
+        this.scroll();
+      }
     }
   }
   /**
-   * Ajusta o posicionamento do ez-calendar conforme a disponibilidade de espaço.
+   * Ajusta o posicionamento vertical do ez-calendar conforme a disponibilidade de espaço.
    */
   async fitVertical(topOffset, bottomOffset) {
     const neededHeight = this._container.getBoundingClientRect().bottom + this._calendarHeight;
@@ -39,6 +48,16 @@ export class EzCalendar {
       this.show("unset", undefined, bottomOffset + "px");
     }
   }
+  /**
+   * Ajusta o posicionamento horizontal do ez-calendar conforme a disponibilidade de espaço.
+   */
+  async fitHorizontal(rightOffset) {
+    const neededWidth = this._container.getBoundingClientRect().right + this._calendarWidth;
+    const availableRight = (window.innerWidth || document.documentElement.clientWidth) > neededWidth;
+    if (!availableRight) {
+      this.show(undefined, "unset", undefined, rightOffset + "px");
+    }
+  }
   /**
    * Oculta o ez-calendar.
    */
@@ -54,6 +73,14 @@ export class EzCalendar {
       this._currentPosition.setDate(1);
     }
   }
+  scrollListener() {
+    if (this.floating && this.isFixed()) {
+      this.hide();
+    }
+  }
+  isFixed() {
+    return this._hostElem.dataset.isFixed === "true";
+  }
   getMonthLabel() {
     return this._monthLabels[this._currentPosition.getMonth()] + " " + this._currentPosition.getFullYear();
   }
@@ -118,6 +145,7 @@ export class EzCalendar {
   componentDidRender() {
     if (this.floating && this._firstRender) {
       this._calendarHeight = this._box.clientHeight;
+      this._calendarWidth = this._box.clientWidth;
       this._box.remove();
       this._firstRender = false;
     }
@@ -351,7 +379,26 @@ export class EzCalendar {
           "return": "Promise<void>"
         },
         "docs": {
-          "text": "Ajusta o posicionamento do ez-calendar conforme a disponibilidade de espa\u00E7o.",
+          "text": "Ajusta o posicionamento vertical do ez-calendar conforme a disponibilidade de espa\u00E7o.",
+          "tags": []
+        }
+      },
+      "fitHorizontal": {
+        "complexType": {
+          "signature": "(rightOffset: number) => Promise<void>",
+          "parameters": [{
+              "tags": [],
+              "text": ""
+            }],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "Ajusta o posicionamento horizontal do ez-calendar conforme a disponibilidade de espa\u00E7o.",
           "tags": []
         }
       },
@@ -373,10 +420,20 @@ export class EzCalendar {
       }
     };
   }
+  static get elementRef() { return "_hostElem"; }
   static get watchers() {
     return [{
         "propName": "value",
         "methodName": "observeValue"
       }];
   }
+  static get listeners() {
+    return [{
+        "name": "scroll",
+        "method": "scrollListener",
+        "target": "window",
+        "capture": true,
+        "passive": true
+      }];
+  }
 }

package/dist/collection/components/ez-card-item/ez-card-item.css

@@ -105,6 +105,7 @@
 
 .card-item__detail-value {
   cursor: pointer;
+  line-break: anywhere;
 
   /*public*/
   font-size: var(--ez-card-item--font-size);

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

@@ -64,6 +64,8 @@
   --ez-combo-box__list-text--primary: var(--text--primary, #626e82);
   /*@doc Define a altura do box da lista de opções.*/
   --ez-combo-box__list-height: calc(var(--ez-combo-box--font-size) + var(--ez-combo-box--space--medium) + 4px);
+  /*@doc Define a largura mínima da lista de opções.*/
+  --ez-combo-box__list-min-width: 64px;
 
   /* espaçamento */
   /*@doc Define um espaçamento mediano entre elementos do componente.*/
@@ -112,6 +114,10 @@ ez-icon {
 }
 
 .list-container {
+  /*public*/
+  min-width: var(--ez-combo-box__list-min-width);
+
+  /*private*/
   position: relative;
   width: 100%;
 }

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

@@ -30,6 +30,9 @@ export class EzComboBox {
     this.suppressEmptyOption = false;
     this.canShowError = true;
     this.mode = "regular";
+    this.hideErrorOnFocusOut = true;
+    this.listOptionsPosition = undefined;
+    this.isTextSearch = false;
   }
   observeErrorMessage() {
     var _a;
@@ -72,17 +75,38 @@ export class EzComboBox {
       return;
     this.loadOptions(SearchMode.PRELOAD);
   }
+  /*
+  * Retorna uma promise com o valor da opção selecionada,
+  * que será resolvida quando o backend devolver este dado.
+  */
+  async getValueAsync() {
+    if (!this._showLoading) {
+      return new Promise(resolve => resolve(this.value));
+    }
+    return new Promise(resolve => {
+      let id = setInterval(() => {
+        if (!this._showLoading) {
+          clearInterval(id);
+          resolve(this.value);
+        }
+      }, 100);
+    });
+  }
   /**
    * Aplica o foco no campo.
    */
   async setFocus() {
-    this._textInput.setFocus();
+    if (this._textInput) {
+      this._textInput.setFocus();
+    }
   }
   /**
    * Remove o foco do campo.
    */
   async setBlur() {
-    this._textInput.setBlur();
+    if (this._textInput) {
+      this._textInput.setBlur();
+    }
   }
   /**
    * Retorna se o conteúdo é inválido.
@@ -97,16 +121,61 @@ export class EzComboBox {
     this.clearSearch();
   }
   scrollListener() {
-    if (!this._floatingID)
+    var _a;
+    if (this._floatingID == undefined) {
       return;
-    window.requestAnimationFrame(() => {
-      this.updateListPosition();
-    });
+    }
+    if ((_a = this.listOptionsPosition) === null || _a === void 0 ? void 0 : _a.hardPosition) {
+      this.hideOptions();
+    }
+    else {
+      window.requestAnimationFrame(() => {
+        this.updateListPosition();
+      });
+    }
   }
   updateListPosition() {
-    const { top } = this._listContainer.getBoundingClientRect();
-    const margin = (this.errorMessage || !this.canShowError || this.mode === "slim") ? 6 : -13;
-    this._listWrapper.style.top = `${(top + margin)}px`;
+    let { verticalPosition, horizontalPosition, fromBottom, fromRight, bottomLimit, hardPosition } = this.getListPosition();
+    const elementRect = this._listWrapper.getBoundingClientRect();
+    const containerRect = this._listContainer.getBoundingClientRect();
+    const textInputRect = this._textInput.getBoundingClientRect();
+    const limitHeight = bottomLimit || window.innerHeight;
+    const neededHeight = containerRect.bottom + elementRect.height;
+    if (!fromBottom && (elementRect.top < 0 || neededHeight > limitHeight)) {
+      fromBottom = true;
+    }
+    if (!hardPosition) {
+      verticalPosition = verticalPosition || 0;
+      horizontalPosition = horizontalPosition || 0;
+      if (fromBottom) {
+        verticalPosition = window.innerHeight - textInputRect.top + verticalPosition;
+      }
+      else {
+        verticalPosition += containerRect.top;
+      }
+      if (fromRight) {
+        horizontalPosition = window.innerWidth - textInputRect.right + horizontalPosition;
+      }
+      else {
+        horizontalPosition += containerRect.left;
+      }
+    }
+    if (verticalPosition != undefined) {
+      this._listWrapper.style[fromBottom ? "bottom" : "top"] = `${verticalPosition}px`;
+      this._listWrapper.style[fromBottom ? "top" : "bottom"] = "";
+    }
+    if (horizontalPosition != undefined) {
+      this._listWrapper.style[fromRight ? "right" : "left"] = `${horizontalPosition}px`;
+      this._listWrapper.style[fromRight ? "left" : "right"] = "";
+    }
+  }
+  getListPosition() {
+    if (this.listOptionsPosition) {
+      return this.listOptionsPosition;
+    }
+    return {
+      verticalPosition: (this.errorMessage || !this.canShowError || this.mode === "slim") ? 6 : -13
+    };
   }
   isDifferentValues(firstValue, secondValue) {
     return ObjectUtils.objectToString(firstValue || {}) !== ObjectUtils.objectToString(secondValue || {});
@@ -189,13 +258,18 @@ export class EzComboBox {
   showOptions() {
     if (!this.enabled)
       return;
+    if (this.isOptionsVisible()) {
+      return;
+    }
     if (!!this._resizeObserver)
       this._resizeObserver.observe(this._textInput);
-    this._floatingID = FloatingManager.float(this._listWrapper, this._listContainer, { autoClose: true, isFixed: true });
+    this._floatingID = FloatingManager.float(this._listWrapper, this._listContainer, { autoClose: true, isFixed: true, backClickListener: () => this.hideOptions() });
     this.setFocus();
     window.requestAnimationFrame(() => {
       this.updateListPosition();
-      this._listWrapper.scrollIntoView({ behavior: "smooth", block: "nearest", inline: "nearest" });
+      if (!this.listOptionsPosition) {
+        this._listWrapper.scrollIntoView({ behavior: "smooth", block: "nearest", inline: "nearest" });
+      }
     });
   }
   hideOptions() {
@@ -225,7 +299,7 @@ export class EzComboBox {
     window.requestAnimationFrame(() => {
       const liElem = (opt === null || opt === void 0 ? void 0 : opt.value) ? this._optionsList.querySelector(`li#item_${opt.value.replace(/[<>\[\]#=]/g, '\\$&').replace(/:/g, '\\:')}`) : undefined;
       if (liElem)
-        liElem.scrollIntoView({ behavior: "smooth", block: "nearest", inline: "start" });
+        liElem.scrollIntoView({ behavior: "smooth", block: "nearest" });
     });
   }
   selectCurrentOption() {
@@ -465,6 +539,12 @@ export class EzComboBox {
   handlerIconClick() {
     this.searchMode ? this.loadOptions(SearchMode.ADVANCED) : this.showOptions();
   }
+  buildNumberArgument(argument) {
+    if (this.isTextSearch) {
+      return NaN;
+    }
+    return Number(argument || undefined);
+  }
   onTextInputChangeHandler(event) {
     var _a;
     this.clearDeboucingTimeout();
@@ -475,7 +555,7 @@ export class EzComboBox {
       return;
     }
     const argument = (_a = event.target.value) === null || _a === void 0 ? void 0 : _a.trim();
-    const argumentNumber = Number(argument || undefined);
+    const argumentNumber = this.buildNumberArgument(argument);
     if (!this._criteria) {
       this._textInput.value = event.data || argument;
     }
@@ -538,9 +618,11 @@ export class EzComboBox {
     switch (event.key) {
       case "ArrowDown":
         this.nextOption();
+        event.stopPropagation();
         break;
       case "ArrowUp":
         this.previousOption();
+        event.stopPropagation();
         break;
       case "Enter":
         this.selectCurrentOption();
@@ -560,7 +642,8 @@ export class EzComboBox {
     //event.stopPropagation();
   }
   onTextInputFocusOutHandler() {
-    this.cancelPreselection();
+    if (this.hideErrorOnFocusOut)
+      this.cancelPreselection();
   }
   canShowListOptions() {
     return !this._showLoading && this._visibleOptions.length > 0;
@@ -838,6 +921,61 @@ export class EzComboBox {
         "attribute": "mode",
         "reflect": true,
         "defaultValue": "\"regular\""
+      },
+      "hideErrorOnFocusOut": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Quando verdadeiro deixa de exibir a mensagem de erro (se existente) quando focar em um elemento diferente."
+        },
+        "attribute": "hide-error-on-focus-out",
+        "reflect": false,
+        "defaultValue": "true"
+      },
+      "listOptionsPosition": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "IEzCheckBoxListPosition",
+          "resolved": "IEzCheckBoxListPosition",
+          "references": {
+            "IEzCheckBoxListPosition": {
+              "location": "local"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Define um posicionamento fixo para a lista de op\u00E7\u00F5es do CheckBox."
+        }
+      },
+      "isTextSearch": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Informa se a pesquisa \u00E9 do tipo texto."
+        },
+        "attribute": "is-text-search",
+        "reflect": false,
+        "defaultValue": "false"
       }
     };
   }
@@ -874,6 +1012,22 @@ export class EzComboBox {
   }
   static get methods() {
     return {
+      "getValueAsync": {
+        "complexType": {
+          "signature": "() => Promise<unknown>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<unknown>"
+        },
+        "docs": {
+          "text": "",
+          "tags": []
+        }
+      },
       "setFocus": {
         "complexType": {
           "signature": "() => Promise<void>",

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

@@ -3,7 +3,9 @@ import { DateUtils, ElementIDUtils } from '@sankhyalabs/core';
 import CSSVarsUtils from '../../utils/CSSVarsUtils';
 export class EzDateInput {
   constructor() {
+    this._changePending = false;
     this._focused = false;
+    this._valuePromiseCallbacks = [];
     this.label = undefined;
     this.value = undefined;
     this.enabled = true;
@@ -41,6 +43,7 @@ export class EzDateInput {
         this.ezChange.emit(valueEmitted);
       }
     }
+    this._changePending = false;
   }
   /**
    * Aplica o foco no campo.
@@ -60,6 +63,18 @@ export class EzDateInput {
   async isInvalid() {
     return typeof this.errorMessage === "string" && this.errorMessage.trim() !== "";
   }
+  /*
+  * Retorna uma promise com o valor da opção selecionada,
+  * que será resolvida quando o backend devolver este dado.
+  */
+  async getValueAsync() {
+    if (this._changePending) {
+      return new Promise(accept => {
+        this._valuePromiseCallbacks.push(accept);
+      });
+    }
+    return Promise.resolve(this.value);
+  }
   changeValue(newValue) {
     const currentValue = DateUtils.validateDate(this.value);
     const newValueValidated = DateUtils.validateDate(newValue);
@@ -70,10 +85,14 @@ export class EzDateInput {
   showCalendar() {
     this.handleBlur();
     this._calendar.value = this.value;
-    //FIXME: Provavelmente isso fará com que o popup abra em uma 
-    //posição errada no futuro. Preferi fazer simples no começo,
-    //porque não quis onerar o text input com essa funcionalidade...
-    const top = this.errorMessage || this.mode === "slim" ? 6 : -13;
+    let top;
+    if (this.isFixed()) {
+      top = 29;
+      this._calendar.fitHorizontal(0);
+    }
+    else {
+      top = this.errorMessage || this.mode === "slim" ? 6 : -13;
+    }
     this._calendar.fitVertical(top, this._elem.clientHeight);
   }
   hideCalendar() {
@@ -81,27 +100,35 @@ export class EzDateInput {
     this._calendar.hide();
   }
   handleBlur() {
-    const strValue = this._textInput.value;
-    const newValue = DateUtils.strToDate(strValue);
-    if (newValue || !strValue) {
-      this.errorMessage = "";
-      const currentValue = DateUtils.validateDate(this.value);
-      const newValueValidated = DateUtils.validateDate(newValue);
-      if ((currentValue === null || currentValue === void 0 ? void 0 : currentValue.getTime()) === (newValueValidated === null || newValueValidated === void 0 ? void 0 : newValueValidated.getTime())) {
-        if (newValueValidated) {
-          this._textInput.value = this.getTextValue(newValueValidated) || '';
-          this._focused = false;
+    try {
+      const strValue = this._textInput.value;
+      const newValue = DateUtils.strToDate(strValue);
+      if (newValue || !strValue) {
+        this.errorMessage = "";
+        const currentValue = DateUtils.validateDate(this.value);
+        const newValueValidated = DateUtils.validateDate(newValue);
+        if ((currentValue === null || currentValue === void 0 ? void 0 : currentValue.getTime()) === (newValueValidated === null || newValueValidated === void 0 ? void 0 : newValueValidated.getTime())) {
+          if (newValueValidated) {
+            this._textInput.value = this.getTextValue(newValueValidated) || '';
+            this._focused = false;
+          }
+          this.ezCancelWaitingChange.emit();
+        }
+        else {
+          this.changeValue(newValueValidated);
         }
-        this.ezCancelWaitingChange.emit();
       }
       else {
-        this.changeValue(newValueValidated);
+        this.changeValue(undefined);
+        this.ezCancelWaitingChange.emit();
+        this.errorMessage = "O valor digitado não é uma data válida";
       }
     }
-    else {
-      this.changeValue(undefined);
-      this.ezCancelWaitingChange.emit();
-      this.errorMessage = "O valor digitado não é uma data válida";
+    finally {
+      for (const callback of this._valuePromiseCallbacks) {
+        callback(this.value);
+      }
+      this._valuePromiseCallbacks = [];
     }
   }
   getTextValue(d) {
@@ -113,6 +140,7 @@ export class EzDateInput {
     const currentValue = DateUtils.validateDate(this.value);
     const newValueValidated = DateUtils.validateDate(newValue);
     if ((currentValue === null || currentValue === void 0 ? void 0 : currentValue.getTime()) !== (newValueValidated === null || newValueValidated === void 0 ? void 0 : newValueValidated.getTime())) {
+      this._changePending = true;
       this._focused = true;
       this.ezStartChange.emit({ waitmessage: "", blocking: false });
     }
@@ -126,13 +154,16 @@ export class EzDateInput {
       this._textInput.value = textValue;
     }
   }
+  isFixed() {
+    return this._elem.dataset.isFixed === "true";
+  }
   componentDidLoad() {
     CSSVarsUtils.applyVarsTextInput(this._elem, this._textInput);
     this.setInputValue();
   }
   render() {
     ElementIDUtils.addIDInfoIfNotExists(this._elem, 'input');
-    return (h(Host, null, h("ez-text-input", { "data-element-id": ElementIDUtils.getInternalIDInfo("textInput"), ref: elem => this._textInput = elem, "data-slave-mode": "true", label: this.label, onBlur: () => this.handleBlur(), onInput: (evt) => this.handleInput(evt), restrict: "0123456789/", enabled: this.enabled, errorMessage: this.errorMessage, mode: this.mode, canShowError: this.canShowError }, h("button", { disabled: !this.enabled, tabindex: -1, class: "btn-open-cal", onClick: () => this.showCalendar(), slot: "leftIcon" })), h("ez-calendar", { "data-element-id": ElementIDUtils.getInternalIDInfo("calendar"), onEzChange: (event) => { this.hideCalendar(); event.stopPropagation(); }, floating: true, ref: elem => this._calendar = elem })));
+    return (h(Host, null, h("ez-text-input", { "data-element-id": ElementIDUtils.getInternalIDInfo("textInput"), ref: elem => this._textInput = elem, "data-slave-mode": "true", label: this.label, onBlur: () => this.handleBlur(), onInput: (evt) => this.handleInput(evt), restrict: "0123456789/", enabled: this.enabled, errorMessage: this.errorMessage, mode: this.mode, canShowError: this.canShowError }, h("button", { disabled: !this.enabled, tabindex: -1, class: "btn-open-cal", onClick: () => this.showCalendar(), slot: "leftIcon" })), h("ez-calendar", { ref: elem => this._calendar = elem, "data-element-id": ElementIDUtils.getInternalIDInfo("calendar"), onEzChange: (event) => { this.hideCalendar(); event.stopPropagation(); }, floating: true, "data-is-fixed": this._elem.dataset.isFixed })));
   }
   static get is() { return "ez-date-input"; }
   static get encapsulation() { return "shadow"; }
@@ -363,6 +394,25 @@ export class EzDateInput {
           "text": "Retorna se o conte\u00FAdo \u00E9 inv\u00E1lido.",
           "tags": []
         }
+      },
+      "getValueAsync": {
+        "complexType": {
+          "signature": "() => Promise<Date>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            },
+            "Date": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<Date>"
+        },
+        "docs": {
+          "text": "",
+          "tags": []
+        }
       }
     };
   }