@sankhyalabs/ezui 5.21.0-dev.4 → 5.21.0-dev.41

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

@@ -1,4 +1,4 @@
-import { ElementIDUtils, NumberUtils } from "@sankhyalabs/core";
+import { ElementIDUtils, NumberUtils, StringUtils } from "@sankhyalabs/core";
 import { h } from "@stencil/core";
 import CSSVarsUtils from "../../utils/CSSVarsUtils";
 export class EzNumberInput {
@@ -6,6 +6,7 @@ export class EzNumberInput {
     this._focused = false;
     this._changePending = false;
     this._valuePromiseCallbacks = [];
+    this._value = undefined;
     this.label = undefined;
     this.value = undefined;
     this.enabled = true;
@@ -61,35 +62,42 @@ export class EzNumberInput {
   }
   observeValue(newValue, oldValue) {
     if (this._textInput && newValue != oldValue) {
-      const newValueValidated = this.validateValue(newValue);
-      const oldValueValidated = this.validateValue(oldValue);
-      if (newValueValidated === null) {
-        this._textInput.value = '';
-      }
-      if (newValueValidated != oldValueValidated) {
-        const textValue = this.getTextValue(newValueValidated) || '';
-        if ((this._textInput.value || '') !== textValue) {
-          const parsedNumber = this.getParsedNumber(textValue);
-          if (parsedNumber !== undefined || !this._focused) {
-            this._textInput.value = textValue;
-            this._focused = false;
-            this.errorMessage = "";
-          }
-        }
-        const valueEmitted = newValueValidated === null ? undefined : newValueValidated;
-        this.ezChange.emit(valueEmitted);
-      }
+      this.handleNewValue(newValue, oldValue);
     }
     this._changePending = false;
   }
+  observePrecision() {
+    if (this._textInput) {
+      this.setInputValue();
+    }
+  }
+  handleNewValue(newValue, oldValue) {
+    const newValueValidated = this.validateValue(newValue);
+    const oldValueValidated = this.validateValue(oldValue);
+    if (newValueValidated === null) {
+      this._value = '';
+    }
+    if (newValueValidated === oldValueValidated) {
+      return;
+    }
+    const textValue = this.getTextValue(newValueValidated) || '';
+    const parsedNumber = this.getParsedNumber(textValue);
+    if ((this._value || '') !== textValue && (parsedNumber !== undefined || !this._focused)) {
+      this._value = textValue;
+      this._focused = false;
+      this.errorMessage = "";
+    }
+    const valueEmitted = newValueValidated === null ? undefined : newValueValidated;
+    this.ezChange.emit(valueEmitted);
+  }
   validateValue(value) {
     return isNaN(value) || value === undefined ? null : value;
   }
   getTextValue(value) {
-    if (value != undefined) {
-      return this.precision > 0 ? NumberUtils.format(value.toString(), Number(this.precision), Number(this.prettyPrecision)) : value.toString();
-    }
-    return undefined;
+    if (value == undefined)
+      return undefined;
+    let textValue = this.precision >= 0 ? NumberUtils.format(value.toString(), Number(this.precision), Number(this.prettyPrecision)) : value.toString();
+    return (this.precision === 0) ? StringUtils.replaceAll(textValue, ".", "") : textValue;
   }
   changeValue(newValue) {
     this.errorMessage = "";
@@ -140,17 +148,13 @@ export class EzNumberInput {
       this.ezStartChange.emit({ waitmessage: "", blocking: false });
     }
   }
-  getParsedNumber(value) {
-    var _a;
-    if (value === void 0) {
-      value = (_a = this._textInput) === null || _a === void 0 ? void 0 : _a.value;
-    }
+  getParsedNumber(value = this._textInput.value) {
     return (value === null || value === void 0 ? void 0 : value.trim()) ? NumberUtils.stringToNumber(value) : undefined;
   }
   setInputValue() {
     const textValue = this.getTextValue(this.value) || '';
-    if ((this._textInput.value || '') !== textValue) {
-      this._textInput.value = textValue;
+    if ((this._value || '') !== textValue) {
+      this._value = textValue;
     }
   }
   componentDidLoad() {
@@ -159,7 +163,7 @@ export class EzNumberInput {
   }
   render() {
     ElementIDUtils.addIDInfoIfNotExists(this._elem, 'input');
-    return (h("ez-text-input", { class: "number__input", "data-element-id": ElementIDUtils.getInternalIDInfo("textInput"), ref: elem => this._textInput = elem, "data-slave-mode": "true", label: this.label, onBlur: () => this.handleBlur(), onInput: () => this.handleInput(), restrict: this.precision > 0 ? "0123456789-,." : "0123456789-", enabled: this.enabled, errorMessage: this.errorMessage, mode: this.mode, canShowError: this.canShowError }));
+    return (h("ez-text-input", { class: "number__input", "data-element-id": ElementIDUtils.getInternalIDInfo("textInput"), ref: elem => this._textInput = elem, "data-slave-mode": "true", label: this.label, onBlur: () => this.handleBlur(), onInput: () => this.handleInput(), restrict: this.precision > 0 ? "0123456789-,." : "0123456789-", enabled: this.enabled, errorMessage: this.errorMessage, mode: this.mode, canShowError: this.canShowError, value: this._value }));
   }
   static get is() { return "ez-number-input"; }
   static get encapsulation() { return "shadow"; }
@@ -316,6 +320,11 @@ export class EzNumberInput {
       }
     };
   }
+  static get states() {
+    return {
+      "_value": {}
+    };
+  }
   static get events() {
     return [{
         "method": "ezChange",
@@ -455,6 +464,12 @@ export class EzNumberInput {
       }, {
         "propName": "value",
         "methodName": "observeValue"
+      }, {
+        "propName": "precision",
+        "methodName": "observePrecision"
+      }, {
+        "propName": "prettyPrecision",
+        "methodName": "observePrecision"
       }];
   }
 }

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

@@ -12,7 +12,6 @@ export class EzSearch {
     this._tabPressed = false;
     this._textEmptyList = "Nenhum resultado encontrado";
     this._textEmptySearch = "Nenhum resultado de {0} encontrado";
-    this._lookupMode = false;
     this._startHighlightTag = "<span class='card-item__highlight'>";
     this._endHighlightTag = "</span>";
     this._preSelection = undefined;
@@ -41,36 +40,30 @@ export class EzSearch {
     var _a;
     if (this._textInput) {
       this._textInput.errorMessage = this.errorMessage;
-      if (!((_a = this.errorMessage) === null || _a === void 0 ? void 0 : _a.trim())) {
+      if (!((_a = this.errorMessage) === null || _a === void 0 ? void 0 : _a.trim()) && this.errorMessage) {
         this.setInputValue();
       }
     }
   }
-  observeValue(newValue, oldValue) {
-    if (this._textInput && newValue != oldValue) {
-      try {
-        if (newValue === "string") {
-          this.setInputValue();
-          return;
-        }
-        const newValueSelected = this.getSelectedOption(newValue);
-        const oldValueSelected = this.getSelectedOption(oldValue);
-        const currentValue = this.getSelectedOption(this.value);
-        if (this.isDifferentValues(currentValue, newValueSelected)) {
-          this.value = newValueSelected;
-        }
-        if (this.isDifferentValues(newValueSelected, oldValueSelected)) {
-          this.setInputValue();
-          const valueEmitted = newValueSelected === null ? undefined : newValueSelected;
-          if (!this._lookupMode) {
-            this.ezChange.emit(valueEmitted);
-          }
-        }
-        this.resetOptions();
+  validateNewValue(newValue, oldValue) {
+    const getValue = (val) => typeof val === 'object' ? val === null || val === void 0 ? void 0 : val.value : val;
+    return (getValue(newValue) !== getValue(oldValue));
+  }
+  async observeValue(newValue, oldValue) {
+    if (this._textInput && newValue !== oldValue && this.validateNewValue(newValue, oldValue)) {
+      if (typeof newValue === "string") {
+        await this.handleValueAsString(newValue);
+        return;
       }
-      finally {
-        this._lookupMode = false;
+      const newValueSelected = this.getSelectedOption(newValue);
+      const currentValue = this.getSelectedOption(this._currentValue);
+      if (this.isDifferentValues(currentValue, newValueSelected)) {
+        this._currentValue = newValueSelected;
+        this.setInputValue();
+        const valueEmitted = newValueSelected !== null && newValueSelected !== void 0 ? newValueSelected : undefined;
+        this.ezChange.emit(valueEmitted);
       }
+      this.resetOptions();
     }
   }
   observeOptions(newOptions, oldOptions) {
@@ -137,6 +130,16 @@ export class EzSearch {
       });
     }
   }
+  async handleValueAsString(value) {
+    if (this.getSelectedOption(value)) {
+      this.setInputValue();
+      return;
+    }
+    await this.loadDescriptionValue(value);
+    this.setInputValue();
+    this.ezChange.emit(this.value);
+    this._currentValue = this.value;
+  }
   updateListPosition() {
     let { verticalPosition, horizontalPosition, fromBottom, fromRight, bottomLimit, hardPosition } = this.getListPosition();
     const elementRect = this._listWrapper.getBoundingClientRect();
@@ -192,7 +195,7 @@ export class EzSearch {
     return text;
   }
   getText() {
-    const currentValue = this.getSelectedOption(this.value);
+    const currentValue = this.getSelectedOption(this._currentValue);
     const text = this.getFormattedText(currentValue);
     if (text == undefined) {
       return;
@@ -308,9 +311,12 @@ export class EzSearch {
   }
   scrollToOption(opt) {
     window.requestAnimationFrame(() => {
-      const liElem = (opt === null || opt === void 0 ? void 0 : opt.value) ? this._optionsList.querySelector(`div#item_${this.replaceHighlight(opt.value).replace(/[<>\[\]#=]/g, '\\$&').replace(/:/g, '\\:')}`) : undefined;
-      if (liElem)
+      const liElem = (opt === null || opt === void 0 ? void 0 : opt.value)
+        ? this._optionsList.querySelector(`div#item_${opt.value.replace(/([ #;&,.+*~':"!^$[\]()=<>|/\\])/g, '\\$1')}`)
+        : undefined;
+      if (liElem) {
         liElem.scrollIntoView({ behavior: "smooth", block: "nearest" });
+      }
     });
   }
   selectCurrentOption() {
@@ -364,6 +370,7 @@ export class EzSearch {
       || (currentValue == undefined && newOptionsReplaced != undefined && "value" in newOptionsReplaced)) {
       const adjustedOpt = !(newOptionsReplaced === null || newOptionsReplaced === void 0 ? void 0 : newOptionsReplaced.value) ? undefined : newOptionsReplaced;
       this.value = adjustedOpt;
+      this._currentValue = adjustedOpt;
     }
     else {
       this.setInputValue();
@@ -384,7 +391,7 @@ export class EzSearch {
     }
   }
   cancelPreselection() {
-    if (!this._textInput.value && this.value) {
+    if (!this._textInput.value && this._currentValue) {
       this.selectOption(undefined);
     }
     else {
@@ -405,6 +412,7 @@ export class EzSearch {
   }
   clearSearch() {
     this.value = null;
+    this._currentValue = null;
   }
   controlListWithOnlyOne() {
     var _a, _b;
@@ -434,11 +442,11 @@ export class EzSearch {
     if (StringUtils.isEmpty(this.value)) {
       return;
     }
-    let value = this.value;
-    if (typeof value === "object") {
+    if (!this.validateNewValue(this.value, this._currentValue)) {
       return;
     }
-    if (StringUtils.isEmpty(value)) {
+    let value = this.value;
+    if (typeof value === "object") {
       return;
     }
     this.loadDescriptionValue(value);
@@ -475,8 +483,8 @@ export class EzSearch {
       this.showNoResultMessage();
       return;
     }
-    this._lookupMode = true;
-    this.value = value ? Object.assign(Object.assign({}, value), { value: this.replaceHighlight(value.value), label: this.replaceHighlight(value.label) }) : value;
+    this._currentValue = value ? Object.assign(Object.assign({}, value), { value: this.replaceHighlight(value.value), label: this.replaceHighlight(value.label) }) : value;
+    this.value = this._currentValue;
   }
   loadOptionValue(argument) {
     var _a;
@@ -535,6 +543,7 @@ export class EzSearch {
     this.validateDescriptionValue();
   }
   componentDidLoad() {
+    this._currentValue = this.value;
     CSSVarsUtils.applyVarsTextInput(this.el, this._textInput);
     this.setInputValue(false);
     this._resizeObserver = new ResizeObserver((entries) => {

package/dist/collection/components/ez-split-panel/ez-split-panel.css

@@ -4,4 +4,5 @@
 .ez-split-gutter {
   cursor: grab;
   background-color: transparent;
+  max-width: 100%;
 }

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

@@ -58,9 +58,13 @@ export class EzTabselector {
     this.selectedTab = undefined;
     this.tabs = undefined;
   }
-  observeTabs(newValue) {
+  observeTabs(newValue, oldValue) {
     if (newValue && typeof newValue !== "string") {
       this._processedTabs = newValue;
+      return;
+    }
+    if (newValue !== oldValue) {
+      this.processesTabs();
     }
   }
   handleTabClick(tab) {
@@ -70,36 +74,37 @@ export class EzTabselector {
     this.ezChange.emit(tab);
     this.setFocusedBtn(false, tab.index);
   }
-  componentWillRender() {
-    if (!this._processedTabs) {
-      if (this.tabs) {
-        if (Array.isArray(this.tabs)) {
-          this._processedTabs = [...this.tabs];
-        }
-        else {
-          this._processedTabs = [];
-          this.tabs.split(",").forEach((label) => {
-            label = label.trim();
-            this._processedTabs.push({ label, tabKey: label, index: this._processedTabs.length });
-            this.buildElementIdTab(this._processedTabs);
-          });
-        }
+  componentWillLoad() {
+    this.processesTabs();
+  }
+  processesTabs() {
+    if (this.tabs) {
+      if (Array.isArray(this.tabs)) {
+        this._processedTabs = [...this.tabs];
+      }
+      else {
+        this._processedTabs = [];
+        this.tabs.split(",").forEach((label) => {
+          label = label.trim();
+          this._processedTabs.push({ label, tabKey: label, index: this._processedTabs.length });
+          this.buildElementIdTab(this._processedTabs);
+        });
       }
-      this._hostElem.querySelectorAll("ez-tab").forEach((elem) => {
-        const tabKey = elem.getAttribute("tabKey");
-        const label = elem.getAttribute("label");
-        const leftIcon = elem.getAttribute("leftIcon");
-        const rightIcon = elem.getAttribute("rightIcon");
-        const tab = { label, tabKey, leftIcon, rightIcon, index: this._processedTabs.length };
-        const content = elem.firstChild;
-        if (content) {
-          content.setAttribute("slot", "tab" + tab.index);
-          this._hostElem.appendChild(content);
-        }
-        this._processedTabs.push(tab);
-        this.buildElementIdTab(this._processedTabs);
-      });
     }
+    this._hostElem.querySelectorAll("ez-tab").forEach((elem) => {
+      const tabKey = elem.getAttribute("tabKey");
+      const label = elem.getAttribute("label");
+      const leftIcon = elem.getAttribute("leftIcon");
+      const rightIcon = elem.getAttribute("rightIcon");
+      const tab = { label, tabKey, leftIcon, rightIcon, index: this._processedTabs.length };
+      const content = elem.firstChild;
+      if (content) {
+        content.setAttribute("slot", "tab" + tab.index);
+        this._hostElem.appendChild(content);
+      }
+      this._processedTabs.push(tab);
+      this.buildElementIdTab(this._processedTabs);
+    });
   }
   componentDidRender() {
     this.updateScroll();

package/dist/collection/utils/customEditor/interfaces/ICustomEditor.js

@@ -0,0 +1,5 @@
+export var CustomEditorSource;
+(function (CustomEditorSource) {
+  CustomEditorSource["GRID"] = "GRID";
+  CustomEditorSource["FORM"] = "FORM";
+})(CustomEditorSource || (CustomEditorSource = {}));

package/dist/collection/utils/customEditor/interfaces/ICustomEditorInfo.js

@@ -0,0 +1 @@
+export {};

package/dist/collection/utils/customRender/interfaces/ICustomRender.js

@@ -0,0 +1,5 @@
+export var CustomRenderSource;
+(function (CustomRenderSource) {
+  CustomRenderSource["GRID"] = "GRID";
+  CustomRenderSource["FORM"] = "FORM";
+})(CustomRenderSource || (CustomRenderSource = {}));

package/dist/collection/utils/customRender/interfaces/ICustomRenderInfo.js

@@ -0,0 +1 @@
+export {};

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

@@ -35,6 +35,13 @@ export default class DataBinder {
     this.applyDefaultValues();
     this._dataUnit.subscribe(this.onDataUnitEvent);
     this._dataUnit.addInterceptor(this);
+    this.setContextDataBinder(dataUnit);
+  }
+  setContextDataBinder(dataUnit) {
+    const dataBindersByDataUnit = ApplicationContext.getContextValue("__DATABINDER_BY_DATAUNIT__") || new Map();
+    const dataBinders = [...(dataBindersByDataUnit.get(dataUnit.dataUnitId) || []), this];
+    dataBindersByDataUnit.set(dataUnit.dataUnitId, dataBinders);
+    ApplicationContext.setContextValue("__DATABINDER_BY_DATAUNIT__", dataBindersByDataUnit);
   }
   applyDefaultValues() {
     const recordIds = (this._dataUnit.getAddedRecords() || []).map(r => r.__record__id__);
@@ -61,9 +68,17 @@ export default class DataBinder {
       getMessageForField: field => this.getErrorMessage(field)
     }, recordsValidator);
   }
+  disconnectDataUnit() {
+    const dataBindersByDataUnit = ApplicationContext.getContextValue("__DATABINDER_BY_DATAUNIT__") || new Map();
+    const dataBinders = dataBindersByDataUnit.get(this._dataUnit.dataUnitId);
+    const dataBindersFiltered = dataBinders.filter((dataBinder) => JSON.stringify(dataBinder) !== JSON.stringify(this));
+    dataBindersByDataUnit.set(this._dataUnit.dataUnitId, dataBindersFiltered);
+    ApplicationContext.setContextValue("__DATABINDER_BY_DATAUNIT__", dataBindersByDataUnit);
+  }
   onDisconnectedCallback() {
     this._dataUnit.unsubscribe(this.onDataUnitEvent);
     this._dataUnit.removeInterceptor(this);
+    this.disconnectDataUnit();
   }
   getCurrentRecordId() {
     const record = this._dataUnit.getSelectedRecord();
@@ -110,6 +125,17 @@ export default class DataBinder {
   validate() {
     return this._recordValidatorProcessor.validate();
   }
+  static async validateByDataunit(dataUnit) {
+    try {
+      const dataBindersByDataUnit = ApplicationContext.getContextValue("__DATABINDER_BY_DATAUNIT__");
+      const dataBinders = dataBindersByDataUnit.get(dataUnit.dataUnitId) || [];
+      await Promise.all(dataBinders.map((dataBinder) => dataBinder.validate()));
+      return true;
+    }
+    catch (_a) {
+      return false;
+    }
+  }
   updateErrorMessage(fieldName, field, message) {
     if (message == undefined) {
       message = this._dataUnit.getInvalidMessage(this.getCurrentRecordId(), fieldName);

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

@@ -1,9 +1,46 @@
-import { DataUnit } from "@sankhyalabs/core";
+import { ApplicationContext, DataUnit } from "@sankhyalabs/core";
 import DataBinder from "../DataBinder";
+import { metadataTest } from "./resources/metadataTest";
 describe('DataBinder', () => {
+  let dataBinder;
+  let dataUnit;
+  beforeEach(() => {
+    dataUnit = new DataUnit();
+    dataUnit.metadata = metadataTest;
+    dataUnit.addRecord();
+    dataUnit.selectFirst();
+    dataBinder = new DataBinder(dataUnit);
+  });
   it('constructor', async () => {
-    const du = new DataUnit();
-    const db = new DataBinder(du);
-    expect(db).toBeTruthy();
+    expect(dataBinder).toBeTruthy();
+  });
+  it('ApplicationContext should be filled', () => {
+    const dataBindersByDataUnit = ApplicationContext.getContextValue("__DATABINDER_BY_DATAUNIT__") || new Map();
+    expect(dataBindersByDataUnit.get(dataUnit.dataUnitId).length).toBeGreaterThan(0);
+  });
+  it('ApplicationContext should be filled with two binders', () => {
+    new DataBinder(dataUnit);
+    const dataBindersByDataUnit = ApplicationContext.getContextValue("__DATABINDER_BY_DATAUNIT__") || new Map();
+    expect(dataBindersByDataUnit.get(dataUnit.dataUnitId).length).toBe(2);
+  });
+  it('should be invalid for empty fields', async () => {
+    const isValid = await DataBinder.validateByDataunit(dataUnit);
+    dataBinder['_recordValidatorProcessor'] = {
+      validate: () => Promise.reject(),
+    };
+    expect(isValid).toBe(false);
+  });
+  it('should be valid for filled fields', async () => {
+    await dataUnit.setFieldValue('NAME', 'João');
+    dataBinder['_recordValidatorProcessor'] = {
+      validate: () => Promise.resolve(),
+    };
+    const isValid = await DataBinder.validateByDataunit(dataUnit);
+    expect(isValid).toBe(true);
+  });
+  it('should be remove dataBinder on disconnected', async () => {
+    dataBinder.onDisconnectedCallback();
+    const dataBindersByDataUnit = ApplicationContext.getContextValue("__DATABINDER_BY_DATAUNIT__") || new Map();
+    expect(dataBindersByDataUnit.get(dataUnit.dataUnitId).length).toBe(0);
   });
 });

package/dist/collection/utils/form/test/resources/metadataTest.js

@@ -0,0 +1,15 @@
+import { DataType, UserInterface } from "@sankhyalabs/core";
+export const metadataTest = {
+  "name": "clients",
+  "label": "clients",
+  "fields": [
+    {
+      "name": "NAME",
+      "label": "Nome",
+      "dataType": DataType.TEXT,
+      "userInterface": UserInterface.SHORTTEXT,
+      "readOnly": false,
+      "required": true
+    },
+  ]
+};

package/dist/collection/utils/index.js

@@ -4,3 +4,5 @@ export { DialogType } from '../components/ez-dialog/DialogType';
 export { CheckMode } from '../components/ez-check/CheckMode';
 export { FormMetadata } from './form/FormMetadata';
 export { default as DataBinder } from './form/DataBinder';
+export { CustomEditorSource } from './customEditor/interfaces/ICustomEditor';
+export { CustomRenderSource } from './customRender/interfaces/ICustomRender';

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

@@ -56,6 +56,12 @@ export const EzCardItem: {
   new (): EzCardItem;
 };
 
+interface EzChart extends Components.EzChart, HTMLElement {}
+export const EzChart: {
+  prototype: EzChart;
+  new (): EzChart;
+};
+
 interface EzCheck extends Components.EzCheck, HTMLElement {}
 export const EzCheck: {
   prototype: EzCheck;
@@ -80,6 +86,12 @@ export const EzComboBox: {
   new (): EzComboBox;
 };
 
+interface EzCustomFormInput extends Components.EzCustomFormInput, HTMLElement {}
+export const EzCustomFormInput: {
+  prototype: EzCustomFormInput;
+  new (): EzCustomFormInput;
+};
+
 interface EzDateInput extends Components.EzDateInput, HTMLElement {}
 export const EzDateInput: {
   prototype: EzDateInput;