@sankhyalabs/ezui 2.0.7 → 2.0.9

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

@@ -1,4 +1,7 @@
 :host {
+  /*@doc Define a cor de efeito de sombreado com componente.*/
+  --ez-scroller--box-shadow-color: var(--background--body, #fafcff);
+
   display: flex;
   cursor: grab;
   width: 100%;
@@ -11,49 +14,119 @@
 .ez-scroller__container{
   display: flex;
   flex-direction: column;
-  overflow: hidden;
+  overflow-y: hidden;
+  overflow-x: hidden;
   scrollbar-width: thin;
+
+  /*public*/
+  scrollbar-color: var(--scrollbar--primary) var(--scrollbar--secondary);
 }
 
 .ez-scroller__container--horizontal{
   flex-direction: row;
   overflow-y: hidden;
+  overflow-x: hidden;
+  padding-bottom: var(--space--small);
+  margin-bottom: calc(var(--space--small) * -1);
+}
+
+.ez-scroller__container--horizontal:not(.ez-scroller__container--no-overlay):not(.ez-scroller__container--locked):hover {
+  overflow-x: overlay;
+}
+
+.ez-scroller__container--horizontal.ez-scroller__container--no-overlay {
+  padding-bottom: 8px;
+  margin-bottom: -8px;
+}
+
+.ez-scroller__container--horizontal.ez-scroller__container--no-overlay:not(.ez-scroller__container--locked):hover {
   overflow-x: auto;
+  padding-bottom: 0px;
 }
 
 .ez-scroller__container--vertical{
-  overflow-y: auto;
+  overflow-y: hidden;
   overflow-x: hidden;
+  padding-right: var(--space--small);
+  margin-right: calc(var(--space--small) * -1);
+}
+
+.ez-scroller__container--vertical:not(.ez-scroller__container--no-overlay):not(.ez-scroller__container--locked):hover {
+  overflow-y: overlay;
+}
+
+.ez-scroller__container--vertical.ez-scroller__container--no-overlay {
+  padding-right: 8px;
+  margin-right: -8px;
+}
+
+.ez-scroller__container--vertical.ez-scroller__container--no-overlay:not(.ez-scroller__container--locked):hover {
+  overflow-y: auto;
+  padding-right: 0px;
 }
 
 .ez-scroller__container--both{
   overflow: auto;
 }
 
-::-webkit-scrollbar-track {
+.ez-scroller__container::-webkit-scrollbar-track {
   background-color: var(--scrollbar--secondary);
   border-radius: var(--border--radius-small);
   visibility: hidden;
 }
 
-::-webkit-scrollbar-thumb {
-  background-color: transparent;
-  border-radius: var(--border--radius-small);
-  /*provisório*/
-  background-color: var(--scrollbar--primary);
-}
-:hover::-webkit-scrollbar-thumb {
+.ez-scroller__container::-webkit-scrollbar-thumb {
   background-color: var(--scrollbar--primary);
+  border-radius: var(--border--radius-small);
 }
 
-::-webkit-scrollbar {
-  background-color: transparent;
+.ez-scroller__container::-webkit-scrollbar {
+  background-color: var(--scrollbar--secondary);
   width: var(--space--small);
   height: var(--space--small);
   max-width: var(--space--small);
   min-width: var(--space--small);
 }
 
-:hover::-webkit-scrollbar {
-  background-color: var(--scrollbar--secondary);
+.ez-scroller__shadow-start,
+.ez-scroller__shadow-end {
+  display: flex;
+  z-index: 1;
+  background: var(--ez-scroller--box-shadow-color);
+}
+
+.ez-scroller__shadow-start--horizontal,
+.ez-scroller__shadow-end--horizontal {
+  min-height: 100%;
+  width: 10px;
+}
+
+.ez-scroller__shadow-start--horizontal {
+  box-shadow: var(--ez-scroller--box-shadow-color) 6px 0px 10px 8px;
+  margin-right: -6px;
+}
+
+.ez-scroller__shadow-end--horizontal {
+  box-shadow: var(--ez-scroller--box-shadow-color) -6px 0px 10px 8px;
+  margin-left: -6px;
+}
+
+.ez-scroller__shadow-start--vertical,
+.ez-scroller__shadow-end--vertical {
+  min-width: 100%;
+  height: 10px;
+}
+
+.ez-scroller__shadow-start--vertical {
+  box-shadow: var(--ez-scroller--box-shadow-color) 0px 6px 10px 8px;
+  margin-bottom: -6px;
+}
+
+.ez-scroller__shadow-end--vertical {
+  box-shadow: var(--ez-scroller--box-shadow-color) 0px -6px 10px 8px;
+  margin-top: -6px;
+}
+
+.ez-scroller__shadow--hidden {
+  display: none;
 }

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

@@ -1,21 +1,74 @@
-import { Component, h, Listen, Prop } from '@stencil/core';
+import { UserAgentUtils } from '@sankhyalabs/core';
+import { Component, h, Host, Listen, Prop, State } from '@stencil/core';
 import { EzScrollDirection } from './EzScrollDirection';
 export class EzScroller {
   constructor() {
+    this._classHidden = "ez-scroller__shadow--hidden";
+    this.isFirefox = false;
     /**
      * Determina se haverá scroll na direção Vertical, Horizontal ou Ambos.
      * Por padrão, a direção é "Ambos".
      */
     this.direction = EzScrollDirection.BOTH;
+    /**
+     * Determina se o scroll estará bloqueado quando necessário.
+     */
+    this.locked = false;
+    /**
+     * Determina de o efeito de sombreado está ativo.
+     */
+    this.activeShadow = false;
   }
   //---------------------------------------------
   // Private methods
   //---------------------------------------------
   getContainerClass() {
-    return `ez-scroller__container ez-scroller__container--${this.direction}`;
+    return `ez-scroller__container ez-scroller__container--${this.direction}
+      ${this.locked ? " ez-scroller__container--locked" : ""}
+      ${this.isFirefox ? " ez-scroller__container--no-overlay" : ""}
+    `;
+  }
+  getShadowStartClass() {
+    return `ez-scroller__shadow-start ez-scroller__shadow-start--${this.direction}`;
+  }
+  getShadowEndClass() {
+    return `ez-scroller__shadow-end ez-scroller__shadow-end--${this.direction}`;
   }
   finishDrag() {
-    this._container.classList.remove("dragging");
+    if (this._controller) {
+      this._container.classList.remove("dragging");
+    }
+  }
+  updateShadow() {
+    const container = this._container;
+    if (container) {
+      let remainingScroll;
+      if (this.direction === EzScrollDirection.HORIZONTAL) {
+        const { scrollWidth, clientWidth, scrollLeft } = container;
+        remainingScroll = scrollWidth - clientWidth - Math.ceil(scrollLeft);
+        this._startHidden = container.scrollLeft > 0;
+      }
+      else if (this.direction === EzScrollDirection.VERTICAL) {
+        const { scrollHeight, clientHeight, scrollTop } = container;
+        remainingScroll = scrollHeight - clientHeight - Math.ceil(scrollTop);
+        this._startHidden = container.scrollTop > 0;
+      }
+      this._endHidden = remainingScroll > 0;
+      const shadowPositions = ["", "start", "end", "middle"];
+      const currentPosition = shadowPositions[Number(this._startHidden) | Number(this._endHidden) << 1];
+      if (currentPosition === "start") {
+        this._shadowStart.classList.remove(this._classHidden);
+        this._shadowEnd.classList.add(this._classHidden);
+      }
+      else if (currentPosition === "end") {
+        this._shadowStart.classList.add(this._classHidden);
+        this._shadowEnd.classList.remove(this._classHidden);
+      }
+      else {
+        this._shadowStart.classList.remove(this._classHidden);
+        this._shadowEnd.classList.remove(this._classHidden);
+      }
+    }
   }
   //---------------------------------------------
   // Event handlers
@@ -28,6 +81,10 @@ export class EzScroller {
     }
   }
   mouseDownHandler(evt) {
+    if (this.locked) {
+      this.finishDrag();
+      return;
+    }
     if (!this._controller) {
       this._controller = new ScrollCtrl(this._container);
     }
@@ -38,6 +95,10 @@ export class EzScroller {
     this.finishDrag();
   }
   mouseMoveHandler(evt) {
+    if (this.locked) {
+      this.finishDrag();
+      return;
+    }
     if (this._controller) {
       if (evt.buttons === 0) {
         this.finishDrag();
@@ -47,9 +108,29 @@ export class EzScroller {
       }
     }
   }
+  componentDidLoad() {
+    this.isFirefox = UserAgentUtils.isFirefox();
+  }
+  componentDidRender() {
+    var _a, _b;
+    if (this.direction === EzScrollDirection.BOTH) {
+      (_a = this._shadowStart) === null || _a === void 0 ? void 0 : _a.classList.add(this._classHidden);
+      (_b = this._shadowEnd) === null || _b === void 0 ? void 0 : _b.classList.add(this._classHidden);
+      return;
+    }
+    if (this._container && this.activeShadow) {
+      this._container.onscroll = this.updateShadow.bind(this);
+      this.updateShadow();
+    }
+  }
   render() {
-    return (h("div", { ref: ref => this._container = ref, class: this.getContainerClass() },
-      h("slot", null)));
+    return (h(Host, null,
+      this.activeShadow &&
+        h("span", { ref: ref => this._shadowStart = ref, class: this.getShadowStartClass() }),
+      h("div", { ref: ref => this._container = ref, class: this.getContainerClass() },
+        h("slot", null)),
+      this.activeShadow &&
+        h("span", { ref: ref => this._shadowEnd = ref, class: this.getShadowEndClass() })));
   }
   static get is() { return "ez-scroller"; }
   static get encapsulation() { return "shadow"; }
@@ -82,8 +163,47 @@ export class EzScroller {
       "attribute": "direction",
       "reflect": false,
       "defaultValue": "EzScrollDirection.BOTH"
+    },
+    "locked": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Determina se o scroll estar\u00E1 bloqueado quando necess\u00E1rio."
+      },
+      "attribute": "locked",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "activeShadow": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Determina de o efeito de sombreado est\u00E1 ativo."
+      },
+      "attribute": "active-shadow",
+      "reflect": false,
+      "defaultValue": "false"
     }
   }; }
+  static get states() { return {
+    "isFirefox": {}
+  }; }
   static get listeners() { return [{
       "name": "click",
       "method": "clickListener",

package/dist/custom-elements/index.js

@@ -1,6 +1,6 @@
 import { HTMLElement as HTMLElement$1, createEvent, h, Host, forceUpdate, proxyCustomElement } from '@stencil/core/internal/client';
 export { setAssetPath, setPlatformOptions } from '@stencil/core/internal/client';
-import { FloatingManager, DateUtils as DateUtils$1, TimeFormatter, UserInterface, Action, WaitingChangeException, ApplicationContext, DataUnitAction, DataUnit, ObjectUtils as ObjectUtils$1, StringUtils as StringUtils$1, NumberUtils as NumberUtils$1, DataType, SortMode, MaskFormatter } from '@sankhyalabs/core';
+import { FloatingManager, DateUtils as DateUtils$1, TimeFormatter, UserInterface, Action, WaitingChangeException, ApplicationContext, DataUnitAction, DataUnit, ObjectUtils as ObjectUtils$1, StringUtils as StringUtils$1, NumberUtils as NumberUtils$1, DataType, SortMode, UserAgentUtils, MaskFormatter } from '@sankhyalabs/core';
 
 var DialogType;
 (function (DialogType) {
@@ -2652,7 +2652,10 @@ class DataBinder {
   markInvalid(field) {
     this._invalidFields.set(field.name, field);
     if (this._fields.has(field.name)) {
-      this.updateErrorMessage(field.name, this._fields.get(field.name).field);
+      const fieldElement = this._fields.get(field.name).field;
+      if (!fieldElement["errorMessage"]) {
+        this.updateErrorMessage(field.name, fieldElement);
+      }
     }
   }
   clearInvalid() {
@@ -2679,7 +2682,16 @@ class DataBinder {
   }
   updateErrorMessage(fieldName, field) {
     const invalidField = this._invalidFields.get(fieldName);
-    field["errorMessage"] = invalidField ? invalidField.message : "";
+    if (invalidField) {
+      field["errorMessage"] = invalidField.message;
+    }
+  }
+  getErrorMessage(fieldName) {
+    if (this._fields.has(fieldName)) {
+      const fieldElement = this._fields.get(fieldName).field;
+      return fieldElement["errorMessage"] || null;
+    }
+    return undefined;
   }
   updateBind(fieldName, field) {
     const oldBind = this._fields.get(fieldName);
@@ -2857,10 +2869,16 @@ let EzForm$1 = class extends HTMLElement$1 {
       .map(f => f.dataset.fieldName)
       .concat(metadata.getRequiredFields());
     const invalidFields = [];
-    requiredFields.forEach(field => {
+    new Set(requiredFields).forEach(field => {
       const value = record[field];
       if (value == undefined || value === "") {
-        invalidFields.push({ name: field, message: "Essa informação é obrigatória" });
+        const errorMessage = this._dataBinder.getErrorMessage(field);
+        if (errorMessage) {
+          invalidFields.push({ name: field, message: errorMessage });
+        }
+        else {
+          invalidFields.push({ name: field, message: "Essa informação é obrigatória" });
+        }
       }
     });
     if (invalidFields.length > 0) {
@@ -117574,7 +117592,7 @@ class DataSource {
     this.duObserver = (action) => {
       switch (action.type) {
         case Action.METADATA_LOADED:
-          this._controller.setColumnsDef(this.buildColumnDefs(), true);
+          this._controller.setColumnsDef(this.buildColumnDefs());
           break;
         case Action.LOADING_DATA:
           this._waitingForLoad = true;
@@ -117602,7 +117620,7 @@ class DataSource {
     };
     this._dataUnit = dataUnit;
     this._controller = controller;
-    this._controller.setColumnsDef(this.buildColumnDefs(), true);
+    this._controller.setColumnsDef(this.buildColumnDefs());
     this._options = options;
     this._dataUnit.subscribe(this.duObserver);
   }
@@ -117921,23 +117939,8 @@ class AgGridController {
     }
     this._gridOptions.api.refreshServerSide({ purge: false });
   }
-  setColumnsDef(cols, showCheckSelection) {
-    const newColDefs = [];
-    if (showCheckSelection) {
-      newColDefs.push({
-        colId: this.CHECK_BOX_COL_ID,
-        headerName: "",
-        checkboxSelection: true,
-        headerComponent: "ezGridHeaderComponent",
-        headerClass: "ag-column-select-header",
-        width: 28,
-        suppressMovable: true,
-        suppressAutoSize: true,
-        suppressMenu: true,
-        lockPosition: true,
-        pinned: true
-      });
-    }
+  setColumnsDef(cols) {
+    const newColDefs = [Object.assign({ colId: this.CHECK_BOX_COL_ID, headerName: "", checkboxSelection: true, width: 28, suppressMovable: true, suppressAutoSize: true, suppressMenu: true, lockPosition: true, pinned: true }, this._multipleSelection && { headerComponent: "ezGridHeaderComponent", headerClass: "ag-column-select-header" })];
     if (this._statusResolver != undefined) {
       newColDefs.push({
         colId: this.STATUS_COL_ID,
@@ -118155,9 +118158,13 @@ class AgGridController {
         info['column'] = { colId: e['column'].colId, actualWidth: e['column'].actualWidth };
       }
       info['isUserChange'] = isUserChange;
+      info['isElementResize'] = this.isElementResize(e);
       this._columnStateChangeCallback(type, this.getColumnsState(), info);
     }
   }
+  isElementResize(e) {
+    return e["target"] && e["target"].getAttribute("ref") === "eResize";
+  }
   isUIEvent(source, type) {
     let optionsArr = ["uiColumnMoved", "uiColumnResized", "uiColumnDragged", "uiColumnExpanded", "uiColumnSorted"];
     if (type === 'dragStopped') {
@@ -118206,7 +118213,7 @@ let EzGrid$1 = class extends HTMLElement$1 {
   * Método responsável por receber a definição das colunas
   */
   async setColumnsDef(cols) {
-    this._gridController.setColumnsDef(cols, this.multipleSelection);
+    this._gridController.setColumnsDef(cols);
   }
   /**
   * Adiciona item de menu nas colunas.
@@ -118262,7 +118269,7 @@ let EzGrid$1 = class extends HTMLElement$1 {
     var _a;
     this.ezColumnStateChange.emit({ type, state, isUserChange: info.isUserChange });
     if (info.isUserChange) {
-      if (type === 'columnMovedEnd') {
+      if (type === 'columnMovedEnd' && !info.isElementResize) {
         let newConfig;
         if (this.config) {
           newConfig = { columns: [] };
@@ -119449,27 +119456,79 @@ var EzScrollDirection;
   EzScrollDirection["BOTH"] = "both";
 })(EzScrollDirection || (EzScrollDirection = {}));
 
-const ezScrollerCss = ":host{display:flex;cursor:grab;width:100%}.dragging{cursor:grabbing}.ez-scroller__container{display:flex;flex-direction:column;overflow:hidden;scrollbar-width:thin}.ez-scroller__container--horizontal{flex-direction:row;overflow-y:hidden;overflow-x:auto}.ez-scroller__container--vertical{overflow-y:auto;overflow-x:hidden}.ez-scroller__container--both{overflow:auto}::-webkit-scrollbar-track{background-color:var(--scrollbar--secondary);border-radius:var(--border--radius-small);visibility:hidden}::-webkit-scrollbar-thumb{background-color:transparent;border-radius:var(--border--radius-small);background-color:var(--scrollbar--primary)}:hover::-webkit-scrollbar-thumb{background-color:var(--scrollbar--primary)}::-webkit-scrollbar{background-color:transparent;width:var(--space--small);height:var(--space--small);max-width:var(--space--small);min-width:var(--space--small)}:hover::-webkit-scrollbar{background-color:var(--scrollbar--secondary)}";
+const ezScrollerCss = ":host{--ez-scroller--box-shadow-color:var(--background--body, #fafcff);display:flex;cursor:grab;width:100%}.dragging{cursor:grabbing}.ez-scroller__container{display:flex;flex-direction:column;overflow-y:hidden;overflow-x:hidden;scrollbar-width:thin;scrollbar-color:var(--scrollbar--primary) var(--scrollbar--secondary)}.ez-scroller__container--horizontal{flex-direction:row;overflow-y:hidden;overflow-x:hidden;padding-bottom:var(--space--small);margin-bottom:calc(var(--space--small) * -1)}.ez-scroller__container--horizontal:not(.ez-scroller__container--no-overlay):not(.ez-scroller__container--locked):hover{overflow-x:overlay}.ez-scroller__container--horizontal.ez-scroller__container--no-overlay{padding-bottom:8px;margin-bottom:-8px}.ez-scroller__container--horizontal.ez-scroller__container--no-overlay:not(.ez-scroller__container--locked):hover{overflow-x:auto;padding-bottom:0px}.ez-scroller__container--vertical{overflow-y:hidden;overflow-x:hidden;padding-right:var(--space--small);margin-right:calc(var(--space--small) * -1)}.ez-scroller__container--vertical:not(.ez-scroller__container--no-overlay):not(.ez-scroller__container--locked):hover{overflow-y:overlay}.ez-scroller__container--vertical.ez-scroller__container--no-overlay{padding-right:8px;margin-right:-8px}.ez-scroller__container--vertical.ez-scroller__container--no-overlay:not(.ez-scroller__container--locked):hover{overflow-y:auto;padding-right:0px}.ez-scroller__container--both{overflow:auto}.ez-scroller__container::-webkit-scrollbar-track{background-color:var(--scrollbar--secondary);border-radius:var(--border--radius-small);visibility:hidden}.ez-scroller__container::-webkit-scrollbar-thumb{background-color:var(--scrollbar--primary);border-radius:var(--border--radius-small)}.ez-scroller__container::-webkit-scrollbar{background-color:var(--scrollbar--secondary);width:var(--space--small);height:var(--space--small);max-width:var(--space--small);min-width:var(--space--small)}.ez-scroller__shadow-start,.ez-scroller__shadow-end{display:flex;z-index:1;background:var(--ez-scroller--box-shadow-color)}.ez-scroller__shadow-start--horizontal,.ez-scroller__shadow-end--horizontal{min-height:100%;width:10px}.ez-scroller__shadow-start--horizontal{box-shadow:var(--ez-scroller--box-shadow-color) 6px 0px 10px 8px;margin-right:-6px}.ez-scroller__shadow-end--horizontal{box-shadow:var(--ez-scroller--box-shadow-color) -6px 0px 10px 8px;margin-left:-6px}.ez-scroller__shadow-start--vertical,.ez-scroller__shadow-end--vertical{min-width:100%;height:10px}.ez-scroller__shadow-start--vertical{box-shadow:var(--ez-scroller--box-shadow-color) 0px 6px 10px 8px;margin-bottom:-6px}.ez-scroller__shadow-end--vertical{box-shadow:var(--ez-scroller--box-shadow-color) 0px -6px 10px 8px;margin-top:-6px}.ez-scroller__shadow--hidden{display:none}";
 
 let EzScroller$1 = class extends HTMLElement$1 {
   constructor() {
     super();
     this.__registerHost();
     this.__attachShadow();
+    this._classHidden = "ez-scroller__shadow--hidden";
+    this.isFirefox = false;
     /**
      * Determina se haverá scroll na direção Vertical, Horizontal ou Ambos.
      * Por padrão, a direção é "Ambos".
      */
     this.direction = EzScrollDirection.BOTH;
+    /**
+     * Determina se o scroll estará bloqueado quando necessário.
+     */
+    this.locked = false;
+    /**
+     * Determina de o efeito de sombreado está ativo.
+     */
+    this.activeShadow = false;
   }
   //---------------------------------------------
   // Private methods
   //---------------------------------------------
   getContainerClass() {
-    return `ez-scroller__container ez-scroller__container--${this.direction}`;
+    return `ez-scroller__container ez-scroller__container--${this.direction}
+      ${this.locked ? " ez-scroller__container--locked" : ""}
+      ${this.isFirefox ? " ez-scroller__container--no-overlay" : ""}
+    `;
+  }
+  getShadowStartClass() {
+    return `ez-scroller__shadow-start ez-scroller__shadow-start--${this.direction}`;
+  }
+  getShadowEndClass() {
+    return `ez-scroller__shadow-end ez-scroller__shadow-end--${this.direction}`;
   }
   finishDrag() {
-    this._container.classList.remove("dragging");
+    if (this._controller) {
+      this._container.classList.remove("dragging");
+    }
+  }
+  updateShadow() {
+    const container = this._container;
+    if (container) {
+      let remainingScroll;
+      if (this.direction === EzScrollDirection.HORIZONTAL) {
+        const { scrollWidth, clientWidth, scrollLeft } = container;
+        remainingScroll = scrollWidth - clientWidth - Math.ceil(scrollLeft);
+        this._startHidden = container.scrollLeft > 0;
+      }
+      else if (this.direction === EzScrollDirection.VERTICAL) {
+        const { scrollHeight, clientHeight, scrollTop } = container;
+        remainingScroll = scrollHeight - clientHeight - Math.ceil(scrollTop);
+        this._startHidden = container.scrollTop > 0;
+      }
+      this._endHidden = remainingScroll > 0;
+      const shadowPositions = ["", "start", "end", "middle"];
+      const currentPosition = shadowPositions[Number(this._startHidden) | Number(this._endHidden) << 1];
+      if (currentPosition === "start") {
+        this._shadowStart.classList.remove(this._classHidden);
+        this._shadowEnd.classList.add(this._classHidden);
+      }
+      else if (currentPosition === "end") {
+        this._shadowStart.classList.add(this._classHidden);
+        this._shadowEnd.classList.remove(this._classHidden);
+      }
+      else {
+        this._shadowStart.classList.remove(this._classHidden);
+        this._shadowEnd.classList.remove(this._classHidden);
+      }
+    }
   }
   //---------------------------------------------
   // Event handlers
@@ -119482,6 +119541,10 @@ let EzScroller$1 = class extends HTMLElement$1 {
     }
   }
   mouseDownHandler(evt) {
+    if (this.locked) {
+      this.finishDrag();
+      return;
+    }
     if (!this._controller) {
       this._controller = new ScrollCtrl(this._container);
     }
@@ -119492,6 +119555,10 @@ let EzScroller$1 = class extends HTMLElement$1 {
     this.finishDrag();
   }
   mouseMoveHandler(evt) {
+    if (this.locked) {
+      this.finishDrag();
+      return;
+    }
     if (this._controller) {
       if (evt.buttons === 0) {
         this.finishDrag();
@@ -119501,8 +119568,25 @@ let EzScroller$1 = class extends HTMLElement$1 {
       }
     }
   }
+  componentDidLoad() {
+    this.isFirefox = UserAgentUtils.isFirefox();
+  }
+  componentDidRender() {
+    var _a, _b;
+    if (this.direction === EzScrollDirection.BOTH) {
+      (_a = this._shadowStart) === null || _a === void 0 ? void 0 : _a.classList.add(this._classHidden);
+      (_b = this._shadowEnd) === null || _b === void 0 ? void 0 : _b.classList.add(this._classHidden);
+      return;
+    }
+    if (this._container && this.activeShadow) {
+      this._container.onscroll = this.updateShadow.bind(this);
+      this.updateShadow();
+    }
+  }
   render() {
-    return (h("div", { ref: ref => this._container = ref, class: this.getContainerClass() }, h("slot", null)));
+    return (h(Host, null, this.activeShadow &&
+      h("span", { ref: ref => this._shadowStart = ref, class: this.getShadowStartClass() }), h("div", { ref: ref => this._container = ref, class: this.getContainerClass() }, h("slot", null)), this.activeShadow &&
+      h("span", { ref: ref => this._shadowEnd = ref, class: this.getShadowEndClass() })));
   }
   static get style() { return ezScrollerCss; }
 };
@@ -121041,7 +121125,7 @@ const EzNumberInput = /*@__PURE__*/proxyCustomElement(EzNumberInput$1, [1,"ez-nu
 const EzPopover = /*@__PURE__*/proxyCustomElement(EzPopover$1, [1,"ez-popover",{"autoClose":[516,"auto-close"],"top":[1537],"left":[1537],"bottom":[1537],"right":[1537],"boxWidth":[513,"box-width"],"opened":[1540],"innerElement":[1537,"inner-element"]}]);
 const EzPopup = /*@__PURE__*/proxyCustomElement(EzPopup$1, [1,"ez-popup",{"size":[1],"opened":[1540],"useHeader":[1540,"use-header"],"heightMode":[1537,"height-mode"],"ezTitle":[1,"ez-title"]}]);
 const EzRadioButton = /*@__PURE__*/proxyCustomElement(EzRadioButton$1, [1,"ez-radio-button",{"value":[1544],"options":[1040],"enabled":[516],"label":[513],"direction":[1537]}]);
-const EzScroller = /*@__PURE__*/proxyCustomElement(EzScroller$1, [1,"ez-scroller",{"direction":[1]},[[2,"click","clickListener"],[1,"mousedown","mouseDownHandler"],[1,"mouseup","mouseUpHandler"],[1,"mousemove","mouseMoveHandler"]]]);
+const EzScroller = /*@__PURE__*/proxyCustomElement(EzScroller$1, [1,"ez-scroller",{"direction":[1],"locked":[4],"activeShadow":[4,"active-shadow"],"isFirefox":[32]},[[2,"click","clickListener"],[1,"mousedown","mouseDownHandler"],[1,"mouseup","mouseUpHandler"],[1,"mousemove","mouseMoveHandler"]]]);
 const EzSearch = /*@__PURE__*/proxyCustomElement(EzSearch$1, [1,"ez-search",{"value":[1537],"label":[1537],"enabled":[1540],"errorMessage":[1537,"error-message"],"optionLoader":[16],"showSelectedValue":[4,"show-selected-value"],"showOptionValue":[4,"show-option-value"],"suppressEmptyOption":[4,"suppress-empty-option"],"mode":[513]}]);
 const EzTabselector = /*@__PURE__*/proxyCustomElement(EzTabselector$1, [1,"ez-tabselector",{"selectedIndex":[1538,"selected-index"],"selectedTab":[1537,"selected-tab"],"tabs":[1],"_processedTabs":[32]}]);
 const EzTextArea = /*@__PURE__*/proxyCustomElement(EzTextArea$1, [1,"ez-text-area",{"label":[513],"value":[1537],"enabled":[516],"loading":[516],"errorMessage":[1537,"error-message"],"rows":[1538],"canShowError":[516,"can-show-error"],"mode":[513]}]);

package/dist/esm/ez-form.entry.js

@@ -676,7 +676,10 @@ class DataBinder {
   markInvalid(field) {
     this._invalidFields.set(field.name, field);
     if (this._fields.has(field.name)) {
-      this.updateErrorMessage(field.name, this._fields.get(field.name).field);
+      const fieldElement = this._fields.get(field.name).field;
+      if (!fieldElement["errorMessage"]) {
+        this.updateErrorMessage(field.name, fieldElement);
+      }
     }
   }
   clearInvalid() {
@@ -703,7 +706,16 @@ class DataBinder {
   }
   updateErrorMessage(fieldName, field) {
     const invalidField = this._invalidFields.get(fieldName);
-    field["errorMessage"] = invalidField ? invalidField.message : "";
+    if (invalidField) {
+      field["errorMessage"] = invalidField.message;
+    }
+  }
+  getErrorMessage(fieldName) {
+    if (this._fields.has(fieldName)) {
+      const fieldElement = this._fields.get(fieldName).field;
+      return fieldElement["errorMessage"] || null;
+    }
+    return undefined;
   }
   updateBind(fieldName, field) {
     const oldBind = this._fields.get(fieldName);
@@ -880,10 +892,16 @@ let EzForm = class {
       .map(f => f.dataset.fieldName)
       .concat(metadata.getRequiredFields());
     const invalidFields = [];
-    requiredFields.forEach(field => {
+    new Set(requiredFields).forEach(field => {
       const value = record[field];
       if (value == undefined || value === "") {
-        invalidFields.push({ name: field, message: "Essa informação é obrigatória" });
+        const errorMessage = this._dataBinder.getErrorMessage(field);
+        if (errorMessage) {
+          invalidFields.push({ name: field, message: errorMessage });
+        }
+        else {
+          invalidFields.push({ name: field, message: "Essa informação é obrigatória" });
+        }
       }
     });
     if (invalidFields.length > 0) {