@sankhyalabs/ezui 3.0.3 → 3.1.0

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

@@ -1,6 +1,7 @@
 import { ElementIDUtils, FloatingManager } from "@sankhyalabs/core";
 import { h, Host } from "@stencil/core";
 import { ApplicationUtils, CSSVarsUtils } from "../../utils";
+import { REQUIRED_INFO } from "../../utils/constants";
 export class EzComboBox {
   constructor() {
     this._changeDeboucingTimeout = null;
@@ -9,6 +10,7 @@ export class EzComboBox {
     this._maxWidthValue = 0;
     this._tabPressed = false;
     this._textEmptyList = "Nenhum resultado encontrado";
+    this._textEmptySearch = "Nenhum resultado de {0} encontrado";
     this._preSelection = undefined;
     this._visibleOptions = undefined;
     this._startLoading = false;
@@ -38,15 +40,14 @@ export class EzComboBox {
     }
   }
   observeValue(newValue, oldValue) {
-    var _a, _b, _c, _d;
     if (this._textInput && newValue != oldValue) {
       const newValueSelected = this.getSelectedOption(newValue);
       const oldValueSelected = this.getSelectedOption(oldValue);
       const currentValue = this.getSelectedOption(this.value);
-      if (((_a = currentValue === null || currentValue === void 0 ? void 0 : currentValue.value) === null || _a === void 0 ? void 0 : _a.toString()) != ((_b = newValueSelected === null || newValueSelected === void 0 ? void 0 : newValueSelected.value) === null || _b === void 0 ? void 0 : _b.toString())) {
+      if (this.isDifferentValues(currentValue, newValueSelected)) {
         this.value = newValueSelected;
       }
-      if (((_c = newValueSelected === null || newValueSelected === void 0 ? void 0 : newValueSelected.value) === null || _c === void 0 ? void 0 : _c.toString()) !== ((_d = oldValueSelected === null || oldValueSelected === void 0 ? void 0 : oldValueSelected.value) === null || _d === void 0 ? void 0 : _d.toString())) {
+      if (this.isDifferentValues(newValueSelected, oldValueSelected)) {
         this.setInputValue();
         const valueEmitted = newValueSelected === null ? undefined : newValueSelected;
         this.ezChange.emit(valueEmitted);
@@ -75,12 +76,24 @@ export class EzComboBox {
   async isInvalid() {
     return typeof this.errorMessage === "string" && this.errorMessage.trim() !== "";
   }
+  isDifferentValues(firstValue, secondValue) {
+    return JSON.stringify(firstValue || {}) !== JSON.stringify(secondValue || {});
+  }
+  getFormattedText(currentValue) {
+    if (currentValue == undefined) {
+      return;
+    }
+    if (!this.showSelectedValue || currentValue.value == undefined) {
+      return currentValue.label;
+    }
+    if (!currentValue.label) {
+      return;
+    }
+    return `${currentValue.value} - ${currentValue.label}`;
+  }
   getText() {
-    let text = "";
     const currentValue = this.getSelectedOption(this.value);
-    if (currentValue) {
-      text = this.showSelectedValue ? `${currentValue.value} - ${currentValue.label}` : currentValue.label;
-    }
+    const text = this.getFormattedText(currentValue);
     if (text == undefined) {
       return;
     }
@@ -139,6 +152,7 @@ export class EzComboBox {
   }
   buildItem(opt, index) {
     const widthValue = this.showOptionValue && this._maxWidthValue > 0 ? `${this._maxWidthValue}px` : '';
+    opt.label = opt.label || (opt.value ? `<SEM ${this.getFieldLabel()}>` : "");
     return h("li", { class: index === this._preSelection ? "item preselected" : "item", id: `item_${opt.value}`, onMouseDown: () => this.selectOption(opt), onMouseOver: () => this._preSelection = index }, this.showOptionValue
       ? h("span", { class: "item__value", title: opt.value, style: { width: widthValue, minWidth: widthValue, maxWidth: widthValue } }, opt.value)
       : undefined, h("span", { class: "item__label " + (this.showOptionValue ? "item__label--bold" : ""), title: opt.label }, opt.label));
@@ -274,7 +288,7 @@ export class EzComboBox {
     if ((this._textInput.value || '') !== textValue) {
       this._textInput.value = textValue;
       if (clearError) {
-        this.errorMessage = "";
+        this.errorMessage = null;
       }
     }
   }
@@ -301,6 +315,71 @@ export class EzComboBox {
       }
     }
   }
+  validateDescriptionValue() {
+    if (!this.searchMode || typeof this.value !== "object") {
+      return;
+    }
+    const { label, value } = this.value || {};
+    if (label || value == undefined) {
+      return;
+    }
+    this.loadDescriptionValue(value);
+  }
+  async loadDescriptionValue(argument) {
+    var _a, _b;
+    if (argument == undefined) {
+      return;
+    }
+    if (((_a = this.options) === null || _a === void 0 ? void 0 : _a.length) > 0) {
+      this.loadOptionValue(argument);
+      return;
+    }
+    const searchArgument = {
+      mode: SearchMode.PREDICTIVE,
+      argument
+    };
+    const source = await ((_b = this.optionLoader) === null || _b === void 0 ? void 0 : _b.call(this, searchArgument));
+    if (source == undefined) {
+      return;
+    }
+    if (source instanceof Promise) {
+      source.then((result) => {
+        this.setDescriptionValue(result);
+      });
+    }
+    else {
+      this.setDescriptionValue(source);
+    }
+  }
+  setDescriptionValue(source) {
+    const value = (source === null || source === void 0 ? void 0 : source[0]) || source;
+    if (value == undefined || !Object.keys(value).length) {
+      this.showNoResultMessage();
+      return;
+    }
+    if (!value.label) {
+      value.label = `<SEM ${this.getFieldLabel()}>`;
+    }
+    this.value = value;
+  }
+  loadOptionValue(argument) {
+    var _a;
+    const source = (_a = this.options) === null || _a === void 0 ? void 0 : _a.find((opt) => opt.value === argument);
+    if (source != undefined) {
+      this.selectOption(source);
+    }
+    else {
+      this.showNoResultMessage();
+    }
+  }
+  async showNoResultMessage() {
+    this.clearSearch();
+    ApplicationUtils.info(this._textEmptySearch.replace("{0}", this.getFieldLabel()));
+  }
+  getFieldLabel() {
+    var _a;
+    return (_a = this.label) === null || _a === void 0 ? void 0 : _a.replace(REQUIRED_INFO, "").toUpperCase();
+  }
   //---------------------------------------------
   // Lifecycle web component
   //---------------------------------------------
@@ -340,6 +419,11 @@ export class EzComboBox {
     CSSVarsUtils.applyVarsTextInput(this.el, this._textInput);
     this.setInputValue(false);
   }
+  componentShouldUpdate(newValue, oldValue) {
+    if (this.isDifferentValues(newValue, oldValue)) {
+      this.validateDescriptionValue();
+    }
+  }
   //---------------------------------------------
   // Event handlers
   //---------------------------------------------
@@ -381,7 +465,7 @@ export class EzComboBox {
   clearDeboucingTimeout() {
     if (this._changeDeboucingTimeout) {
       window.clearTimeout(this._changeDeboucingTimeout);
-      this._changeDeboucingTimeout = undefined;
+      this._changeDeboucingTimeout = null;
     }
   }
   onTextInputClickHandler() {

package/dist/collection/components/ez-form-view/fieldbuilder/FieldBuilder.js

@@ -1,4 +1,5 @@
 import { UserInterface } from "@sankhyalabs/core";
+import { REQUIRED_INFO } from "../../../utils/constants";
 import { buildCheckBox, buildSwitch } from "./templates/CheckBox.tpl";
 import { buildComboBox } from "./templates/ComboBox.tpl";
 import { buildDate, buildTime, buildDateTime } from "./templates/DateInput.tpl";
@@ -21,6 +22,6 @@ uiBuilders.set(UserInterface.SEARCH, buildSearch);
 uiBuilders.set(UserInterface.LONGTEXT, buildTextArea);
 export const fieldBuilder = (field) => {
   const builder = uiBuilders.get(field.userInterface) || buildTextInput;
-  const label = field.required ? `${field.label} (obrigatório) *` : field.label;
+  const label = field.required ? `${field.label}${REQUIRED_INFO}` : field.label;
   return builder(Object.assign(Object.assign({}, field), { label }));
 };

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

@@ -57,7 +57,7 @@
   font-family: var(--font-pattern, "Roboto");
 }
 
-.message__conteiner--icon {
+.message__container--icon {
   /*private*/
   width: 80%;
 

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

@@ -19,6 +19,9 @@ export class EzToast {
     return new Promise(resolve => {
       var _a;
       if ((_a = this.container) === null || _a === void 0 ? void 0 : _a.classList.contains(this._toastOpenedClass)) {
+        if (this.isRepeatedMessage(message)) {
+          return;
+        }
         this._nextMessages.push({ message, fadeTime, useIcon, canClose, callBack: resolve });
       }
       else {
@@ -52,6 +55,11 @@ export class EzToast {
       this._currentMessageInfo.callBack(true);
     }
   }
+  isRepeatedMessage(message) {
+    var _a, _b;
+    return ((_a = this._nextMessages) === null || _a === void 0 ? void 0 : _a.some((info) => info.message === message))
+      || ((_b = this._currentMessageInfo) === null || _b === void 0 ? void 0 : _b.message) === message;
+  }
   makeToastInvisible() {
     this.container.classList.remove(this._toastOpenedClass);
     this.container.style.animation = `none`;
@@ -74,7 +82,7 @@ export class EzToast {
   }
   render() {
     return (h(Host, null, h("div", { ref: (el) => this.container = el, class: "toast__container" }, this._currentMessageInfo.useIcon &&
-      h("slot", { name: "icon" }), h("div", { lang: this._lang, ref: (el) => this._elemText = el, class: this._currentMessageInfo.useIcon ? "message__container message__conteiner--icon" : "message__container", title: this._currentMessageInfo.message, innerHTML: this._currentMessageInfo.message }), this._currentMessageInfo.canClose &&
+      h("slot", { name: "icon" }), h("div", { lang: this._lang, ref: (el) => this._elemText = el, class: this._currentMessageInfo.useIcon ? "message__container message__container--icon" : "message__container", title: this._currentMessageInfo.message, innerHTML: this._currentMessageInfo.message }), this._currentMessageInfo.canClose &&
       h("button", { class: "btn-close", onClick: () => { this.hideToast(); }, ref: (el) => this._elemBtnClose = el }))));
   }
   static get is() { return "ez-toast"; }

package/dist/collection/utils/ApplicationUtils.js

@@ -29,13 +29,17 @@ export default class ApplicationUtils {
     return ApplicationUtils.showDialog(title, message, icon, false, DialogType.DEFAULT, options);
   }
   static async info(message, options = ApplicationUtils.defaultMessageOptions) {
+    if (options !== ApplicationUtils.defaultMessageOptions) {
+      options = Object.assign(Object.assign({}, ApplicationUtils.defaultMessageOptions), options);
+    }
+    let useIcon = false;
     let toast = document.querySelector("ez-toast");
     if (!toast) {
       toast = document.createElement("ez-toast");
       const icon = document.createElement("ez-icon");
       icon.className = "ez-margin-right--small";
       icon.slot = "icon";
-      icon.style.setProperty('--ez-icon--color', 'var(--color--success)');
+      icon.style.setProperty("--ez-icon--color", "var(--color--success)");
       toast.appendChild(icon);
       window.document.body.appendChild(toast);
     }
@@ -43,13 +47,13 @@ export default class ApplicationUtils {
       const iconElem = toast.querySelector("ez-icon");
       if (iconElem) {
         iconElem.iconName = options.iconName;
-        toast.useIcon = true;
+        useIcon = true;
       }
     }
     else {
-      toast.useIcon = false;
+      useIcon = false;
     }
-    toast.show(message, 5000, false, options.canClose);
+    toast.show(message, 5000, useIcon, options.canClose);
   }
 }
 ApplicationUtils.defaultMessageOptions = {

package/dist/collection/utils/constants.js

@@ -0,0 +1 @@
+export const REQUIRED_INFO = " (obrigatório) *";