@sankhyalabs/ezui 0.0.0-feat-dev-KB-63193.2 → 0.0.0-feat-dev-KB-63197.2

package/dist/cjs/{RecordValidationProcessor-4c893e04.js → RecordValidationProcessor-d9af86d4.js}

@@ -78,7 +78,9 @@ class RecordValidationProcessor {
   processValidationResult(validationResult, recordId) {
     validationResult.forEach(invalidResult => {
       const invalidFields = invalidResult.invalidFields;
+      this._dataUnit.savingCanceled(invalidFields, recordId);
       if (invalidFields) {
+        this._validationSource.getInvalidFields(invalidFields, recordId);
         invalidFields.forEach(field => {
           this.markAsInvalid(field, recordId);
         });
@@ -96,6 +98,41 @@ class RecordValidationProcessor {
     this._dataUnit.setInvalidField(field.name, field.message, recordId);
     this._validationSource.markAsInvalid(field, recordId);
   }
+  validateNewRecord() {
+    return new Promise((accept, reject) => {
+      const records = this._dataUnit.getModifiedRecords();
+      for (let i = 0; i < records.length; i++) {
+        const record = records[i];
+        if (this._dataUnit.isNewRecord(record.__record__id__)) {
+          const invalidResults = [];
+          let validationResult = this.validateRequired(record);
+          if (validationResult && !validationResult.isValid) {
+            invalidResults.push(validationResult);
+          }
+          if (this._validator) {
+            validationResult = this._validator.validateRecord(record);
+            if (validationResult && !validationResult.isValid) {
+              invalidResults.push(validationResult);
+            }
+          }
+          if (invalidResults.length > 0) {
+            invalidResults.forEach(invalidResult => {
+              const invalidFields = invalidResult.invalidFields;
+              if (invalidFields) {
+                this._validationSource.getInvalidFields(invalidFields, record.__record__id__);
+              }
+            });
+            reject();
+            break;
+          }
+          else {
+            this._validationSource.getInvalidFields(undefined, record.__record__id__);
+          }
+        }
+      }
+      return accept();
+    });
+  }
 }
 
 exports.RecordValidationProcessor = RecordValidationProcessor;

package/dist/cjs/ez-custom-form-input_2.cjs.entry.js

@@ -80,7 +80,9 @@ const EzCustomFormInput = class {
     if (typeof gui === 'string') {
       gui = core.HTMLBuilder.parseElement(gui);
     }
-    gui.setAttribute('value', this.value);
+    if (this.value) {
+      gui.setAttribute('value', typeof this.value === 'object' ? this.value.value : this.value);
+    }
     this.gui = index.h("div", { key: core.StringUtils.generateUUID(), ref: el => el && el.appendChild(gui) });
   }
   setValue(value) {
@@ -90,8 +92,9 @@ const EzCustomFormInput = class {
     return this.value;
   }
   handleValue(gui) {
+    var _a;
     //@ts-ignore
-    gui.$children$.forEach((child) => {
+    (_a = gui.$children$) === null || _a === void 0 ? void 0 : _a.forEach((child) => {
       child.$attrs$.value = this.value;
     });
   }

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

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-a7b0c73d.js');
 const core = require('@sankhyalabs/core');
-const RecordValidationProcessor = require('./RecordValidationProcessor-4c893e04.js');
+const RecordValidationProcessor = require('./RecordValidationProcessor-d9af86d4.js');
 require('./ApplicationUtils-c9d1205c.js');
 require('./DialogType-2114c337.js');
 
@@ -248,7 +248,8 @@ class DataBinder {
     this._recordValidatorProcessor = new RecordValidationProcessor.RecordValidationProcessor(this._dataUnit, {
       getRequiredFields: () => this._formMetadata.getRequiredFields(),
       markAsInvalid: field => this.markInvalid(field),
-      getMessageForField: field => this.getErrorMessage(field)
+      getMessageForField: field => this.getErrorMessage(field),
+      getInvalidFields: () => { },
     }, recordsValidator);
   }
   disconnectDataUnit() {

package/dist/cjs/ez-grid.cjs.entry.js

@@ -10,7 +10,7 @@ require('./DialogType-2114c337.js');
 require('./CheckMode-ecb90b87.js');
 const ICustomRender = require('./ICustomRender-6fafffce.js');
 const constants = require('./constants-2714478b.js');
-const RecordValidationProcessor = require('./RecordValidationProcessor-4c893e04.js');
+const RecordValidationProcessor = require('./RecordValidationProcessor-d9af86d4.js');
 
 /**
           * @ag-grid-community/all-modules - Advanced Data Grid / Data Table supporting Javascript / Typescript / React / Angular / Vue * @version v28.2.1
@@ -118853,6 +118853,12 @@ class DataSourceInterceptor {
 }
 
 class DataSource {
+  handleSavingCanceled(action) {
+    var _a, _b, _c, _d;
+    if (((_a = action.payload) === null || _a === void 0 ? void 0 : _a.fields) && ((_b = action.payload) === null || _b === void 0 ? void 0 : _b.recordId)) {
+      this._controller.savingCanceled((_c = action.payload) === null || _c === void 0 ? void 0 : _c.fields, (_d = action.payload) === null || _d === void 0 ? void 0 : _d.recordId);
+    }
+  }
   handleDataChanged(action) {
     var _a, _b;
     if (!this._options.enableGridInsert) {
@@ -118970,13 +118976,14 @@ class DataSource {
           break;
         case core.Action.DATA_SAVED:
         case core.Action.EDITION_CANCELED:
+          this._controller.clearInvalidCells();
           this.handleRefreshOrReload(action);
           break;
         case core.Action.DATA_CHANGED:
+        case core.Action.DATA_RESOLVED:
           this.handleDataChanged(action);
           break;
         case core.Action.RECORDS_REMOVED:
-        case core.Action.DATA_RESOLVED:
           this.handleRefresh(action);
           break;
         case core.Action.SELECTION_CHANGED:
@@ -118987,6 +118994,9 @@ class DataSource {
         case core.Action.RECORD_LOADED:
           this.updateLoadedRecords(action);
           break;
+        case core.Action.SAVING_CANCELED:
+          this.handleSavingCanceled(action);
+          break;
       }
     };
     this._dataUnit = dataUnit;
@@ -119669,7 +119679,8 @@ class GridEditionManager {
     this._recordValidationProcessor = new RecordValidationProcessor.RecordValidationProcessor(this._dataUnit, {
       getRequiredFields: () => this.getRequiredFields(),
       markAsInvalid: () => { },
-      getMessageForField: () => null
+      getMessageForField: () => null,
+      getInvalidFields: (fields, recordId) => this.setInvalidCells(fields, recordId),
     }, recordsValidator);
     this._useEnterLikeTab = useEnterLikeTab;
     this._editionIsDisabled = editionIsDisabled;
@@ -119708,6 +119719,15 @@ class GridEditionManager {
     })
       .catch(reason => this.saveFail(reason));
   }
+  async recordValidate() {
+    if (this._dataUnit.isDirty()) {
+      try {
+        await this._recordValidationProcessor.validateNewRecord();
+      }
+      catch (error) { }
+      this._gridOptions.api.refreshCells({ force: true });
+    }
+  }
   navigateByEnterKey(keyboardEvent) {
     const backwards = keyboardEvent.shiftKey;
     if (this._useEnterLikeTab) {
@@ -119912,6 +119932,15 @@ class GridEditionManager {
   setCellRenders(customRenders) {
     this._customRenders = customRenders;
   }
+  setInvalidCells(invalidCells, recordId) {
+    this._invalidCells = { fields: invalidCells, recordId };
+  }
+  getInvalidCells() {
+    return this._invalidCells;
+  }
+  clearInvalidCells() {
+    this._invalidCells = undefined;
+  }
 }
 class TargetEdition {
   constructor(rowIndex, column, backwards) {
@@ -120060,6 +120089,15 @@ class AgGridController {
         defaultColDef: {
           headerClass: 'ez-grid__cell-header',
           cellClass: 'ez-grid__cell-body',
+          cellClassRules: {
+            'grid-body__invalidValue sc-ez-grid': (params) => {
+              var _a, _b, _c;
+              if (this._editionManager.getInvalidCells()) {
+                return params.data["__record__id__"] === ((_a = this._editionManager.getInvalidCells()) === null || _a === void 0 ? void 0 : _a.recordId) && ((_c = (_b = this._editionManager.getInvalidCells()) === null || _b === void 0 ? void 0 : _b.fields) === null || _c === void 0 ? void 0 : _c.map(field => field.name).includes(params.colDef.field));
+              }
+              return false;
+            },
+          },
           cellStyle: {
             height: '100%'
           }
@@ -120302,6 +120340,7 @@ class AgGridController {
   updateRowData(row) {
     const node = this._gridOptions.api.getRowNode(row[this._idAttribName]);
     node.setData(Object.assign({}, row));
+    this._editionManager.recordValidate();
   }
   selectAll(quietly = false) {
     try {
@@ -120384,8 +120423,21 @@ class AgGridController {
         });
         r.setData(data);
       });
+      this._gridOptions.api.refreshCells({ force: true });
+      if (this._editionManager.getInvalidCells()) {
+        const rowNode = this._gridOptions.api.getRowNode(this._editionManager.getInvalidCells().recordId);
+        if (rowNode && this._editionManager.getInvalidCells().fields.length > 0) {
+          this.startEdition(rowNode.rowIndex, this._gridOptions.columnApi.getColumn(this._editionManager.getInvalidCells().fields[0].name));
+        }
+      }
     }
   }
+  savingCanceled(fields, recordId) {
+    const displayedColumns = this._gridOptions.columnApi.getAllDisplayedColumns();
+    const rowIndex = this._gridOptions.api.getRowNode(recordId).rowIndex;
+    const columnFocus = displayedColumns.find(column => this.isColumnEditable(rowIndex, column) && fields.find(field => field.name === column.getColId()));
+    this.startEdition(rowIndex, columnFocus);
+  }
   refresh() {
     if (this._grid === undefined) {
       throw new Error('Erro interno: Grid ainda não inicializado.');
@@ -120528,9 +120580,11 @@ class AgGridController {
     //Existem colunas implícitas que não tem estado, essas colunas são sempre as primeiras.
     //Como vamos reordenar, precisamos considerar o deslocamento provocado por elas.
     const columnsOffset = colDef.length - columns.length;
+    this._gridConfig = state;
     let sort = [];
     state === null || state === void 0 ? void 0 : state.forEach((cfgColumn, index) => {
-      const colWidth = this._gridOptions.columnApi.getColumn(cfgColumn.name).getActualWidth();
+      var _a;
+      const colWidth = (_a = this._gridOptions.columnApi.getColumn(cfgColumn.name)) === null || _a === void 0 ? void 0 : _a.getActualWidth();
       this._gridOptions.columnApi.moveColumn(cfgColumn.name, index + columnsOffset);
       this._gridOptions.columnApi.setColumnWidth(cfgColumn.name, colWidth);
       visibleColumns.push(cfgColumn.name);
@@ -120545,7 +120599,6 @@ class AgGridController {
       state: sort,
       defaultState: { sort: null },
     });
-    this._gridConfig = state;
   }
   getAdaptiveWidth(width) {
     const widthGrid = this._container.clientWidth;
@@ -120839,6 +120892,12 @@ class AgGridController {
     this._editionManager.setCellRenders(customRenders);
     (_a = this._gridOptions) === null || _a === void 0 ? void 0 : _a.api.redrawRows();
   }
+  clearInvalidCells() {
+    if (this._editionManager) {
+      this._editionManager.clearInvalidCells();
+      this._gridOptions.api.refreshCells({ force: true });
+    }
+  }
 }
 
 function enableSelectAll(total) {
@@ -121046,7 +121105,7 @@ class InMemoryFilterColumnDataSource {
   }
 }
 
-const ezGridCss = ".sc-ez-grid-h{display:grid;grid-template-rows:auto 1fr auto;height:100%;width:100%;--ez-grid__header--background-color:var(--background--xlight, #FFF);--ez-grid__selection-counter--z-index:var(--visible, 1);--ez-grid__container--shadow:0 0 16px 0 rgb(0 38 111 / 12%);--ez-grid--min-height:300px;min-height:var(--ez-grid--min-height)}.grid-header.sc-ez-grid{display:grid;justify-content:space-between;align-items:center;grid-row-start:1;grid-template-columns:1fr;background-color:var(--ez-grid__header--background-color, #FFF)}.grid__container.sc-ez-grid{padding-top:15px;margin-top:-12px;outline:none;box-shadow:var(--ez-grid__container--shadow);background-color:var(--ez-grid__header--background-color)}.grid-header__popover.sc-ez-grid{position:relative;top:var(--space--sm, 16px)}.grid-header__container.sc-ez-grid{display:flex;align-items:center}.grid-header__position.sc-ez-grid{display:flex;align-items:center;justify-content:space-between}.grid__selection-counter.sc-ez-grid{position:fixed;white-space:nowrap;transform:translate(-50%, 0px);left:50%;opacity:0;bottom:-100%;transition:opacity 0.1s, bottom 0.5s}.grid__selection-counter--opened.sc-ez-grid{opacity:1;bottom:0px}.grid__btn-close.sc-ez-grid{display:flex;align-items:center;justify-content:center;padding:0;outline:none;width:20px;height:20px;border:none;background-color:unset;cursor:pointer}.grid__btn-clear.sc-ez-grid{--ez-button--link-color:var(--color--alert-warning-900, #8C6B00);--ez-button--link--hover-color:var(--color--alert-warning-900, #8C6B00)}[no-header].sc-ez-grid-h .grid-header.sc-ez-grid{height:0;padding:0}.grid-header__pagination.sc-ez-grid{width:30%;min-width:100px;justify-content:flex-end;flex-wrap:wrap}.grid-header__left-container.sc-ez-grid{width:70%}.grid-header__pagination-label.sc-ez-grid{width:100%;white-space:nowrap}.overflowed.sc-ez-grid{display:none}";
+const ezGridCss = ".sc-ez-grid-h{display:grid;grid-template-rows:auto 1fr auto;height:100%;width:100%;--ez-grid__header--background-color:var(--background--xlight, #FFF);--ez-grid__selection-counter--z-index:var(--visible, 1);--ez-grid__container--shadow:0 0 16px 0 rgb(0 38 111 / 12%);--ez-grid--min-height:300px;min-height:var(--ez-grid--min-height)}.grid-header.sc-ez-grid{display:grid;justify-content:space-between;align-items:center;grid-row-start:1;grid-template-columns:1fr;background-color:var(--ez-grid__header--background-color, #FFF)}.grid__container.sc-ez-grid{padding-top:15px;margin-top:-12px;outline:none;box-shadow:var(--ez-grid__container--shadow);background-color:var(--ez-grid__header--background-color)}.grid-header__popover.sc-ez-grid{position:relative;top:var(--space--sm, 16px)}.grid-header__container.sc-ez-grid{display:flex;align-items:center}.grid-header__position.sc-ez-grid{display:flex;align-items:center;justify-content:space-between}.grid__selection-counter.sc-ez-grid{position:fixed;white-space:nowrap;transform:translate(-50%, 0px);left:50%;opacity:0;bottom:-100%;transition:opacity 0.1s, bottom 0.5s}.grid__selection-counter--opened.sc-ez-grid{opacity:1;bottom:0px}.grid__btn-close.sc-ez-grid{display:flex;align-items:center;justify-content:center;padding:0;outline:none;width:20px;height:20px;border:none;background-color:unset;cursor:pointer}.grid__btn-clear.sc-ez-grid{--ez-button--link-color:var(--color--alert-warning-900, #8C6B00);--ez-button--link--hover-color:var(--color--alert-warning-900, #8C6B00)}[no-header].sc-ez-grid-h .grid-header.sc-ez-grid{height:0;padding:0}.grid-header__pagination.sc-ez-grid{width:30%;min-width:100px;justify-content:flex-end;flex-wrap:wrap}.grid-header__left-container.sc-ez-grid{width:70%}.grid-header__pagination-label.sc-ez-grid{width:100%;white-space:nowrap}.overflowed.sc-ez-grid{display:none}.grid-body__invalidValue.sc-ez-grid{border:2px var(--color-alert--error-800) solid !important}";
 
 const windowInstace = window;
 const matches = (text, filter) => {

package/dist/cjs/ez-scroller_2.cjs.entry.js

@@ -0,0 +1,222 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-a7b0c73d.js');
+const core = require('@sankhyalabs/core');
+const EzScrollDirection = require('./EzScrollDirection-b2c99895.js');
+
+const ezScrollerCss = ":host{--ez-scroller--box-shadow-color:var(--background--body, #fafcff);--ez-scroller__scrollbar--color-default:var(--scrollbar--default, #626e82);--ez-scroller__scrollbar--color-background:var(--scrollbar--background, #E5EAF0);--ez-scroller__scrollbar--color-hover:var(--scrollbar--hover, #2B3A54);--ez-scroller__scrollbar--color-clicked:var(--scrollbar--clicked, #a2abb9);--ez-scroller__scrollbar--border-radius:var(--border--radius-small, 6px);--ez-scroller__scrollbar--width:var(--space--small, 6px);--ez-scroller__max-height:unset;display:flex;cursor:grab;width:100%;overflow:hidden}.dragging{cursor:grabbing}.ez-scroller__container{display:flex;overflow-y:hidden;overflow-x:hidden;scrollbar-width:thin;scrollbar-color:transparent transparent}.ez-scroller__container--both:not(.ez-scroller__container--locked),.ez-scroller__container:not(.ez-scroller__container--locked):hover{scrollbar-color:var(--ez-scroller__scrollbar--color-clicked) var(--ez-scroller__scrollbar--color-background)}.ez-scroller__container--both{overflow-y:scroll;overflow-x:scroll;flex-wrap:wrap}.ez-scroller__container--horizontal{overflow-x:scroll;flex-direction:row}.ez-scroller__container--vertical{overflow-y:scroll;flex-direction:column;max-height:var(--ez-scroller__max-height)}.ez-scroller__container::-webkit-scrollbar{background-color:transparent;width:var(--ez-scroller__scrollbar--width);height:var(--ez-scroller__scrollbar--width);max-width:var(--ez-scroller__scrollbar--width);min-width:var(--ez-scroller__scrollbar--width)}.ez-scroller__container--both:not(.ez-scroller__container--locked)::-webkit-scrollbar,.ez-scroller__container:not(.ez-scroller__container--locked):hover::-webkit-scrollbar{background-color:var(--ez-scroller__scrollbar--color-background)}.ez-scroller__container::-webkit-scrollbar-track{visibility:hidden;background-color:transparent;border-radius:var(--ez-scroller__scrollbar--border-radius)}.ez-scroller__container--both:not(.ez-scroller__container--locked)::-webkit-scrollbar-track,.ez-scroller__container:not(.ez-scroller__container--locked):hover::-webkit-scrollbar-track{background-color:var(--ez-scroller__scrollbar--color-background)}.ez-scroller__container::-webkit-scrollbar-thumb{background-color:transparent;border-radius:var(--ez-scroller__scrollbar--border-radius)}.ez-scroller__container--both:not(.ez-scroller__container--locked)::-webkit-scrollbar-thumb,.ez-scroller__container:not(.ez-scroller__container--locked):hover::-webkit-scrollbar-thumb{background-color:var(--ez-scroller__scrollbar--color-default)}.ez-scroller__container::-webkit-scrollbar-thumb:vertical:hover,.ez-scroller__container::-webkit-scrollbar-thumb:horizontal:hover{background-color:transparent}.ez-scroller__container--both:not(.ez-scroller__container--locked)::-webkit-scrollbar-thumb:vertical:hover,.ez-scroller__container--both:not(.ez-scroller__container--locked)::-webkit-scrollbar-thumb:horizontal:hover,.ez-scroller__container:not(.ez-scroller__container--locked):hover::-webkit-scrollbar-thumb:vertical:hover,.ez-scroller__container:not(.ez-scroller__container--locked):hover::-webkit-scrollbar-thumb:horizontal:hover{background-color:var(--ez-scroller__scrollbar--color-hover)}.ez-scroller__container::-webkit-scrollbar-thumb:vertical:active,.ez-scroller__container::-webkit-scrollbar-thumb:horizontal:active{background-color:transparent}.ez-scroller__container--both:not(.ez-scroller__container--locked)::-webkit-scrollbar-thumb:vertical:active,.ez-scroller__container--both:not(.ez-scroller__container--locked)::-webkit-scrollbar-thumb:horizontal:active,.ez-scroller__container:not(.ez-scroller__container--locked):hover::-webkit-scrollbar-thumb:vertical:active,.ez-scroller__container:not(.ez-scroller__container--locked):hover::-webkit-scrollbar-thumb:horizontal:active{background-color:var(--ez-scroller__scrollbar--color-clicked)}.ez-scroller__wrapper{display:flex;position:relative;width:100%;height:auto}.ez-scroller__wrapper--horizontal{flex-direction:row}.ez-scroller__wrapper--vertical{flex-direction:column}.ez-scroller__wrapper--shadow-start::before,.ez-scroller__wrapper--shadow-end::after{content:\"\";display:flex;position:absolute;z-index:1}.ez-scroller__wrapper--horizontal.ez-scroller__wrapper--shadow-start::before,.ez-scroller__wrapper--horizontal.ez-scroller__wrapper--shadow-end::after{width:24px;min-height:calc(100% - 10px)}.ez-scroller__wrapper--horizontal.ez-scroller__wrapper--shadow-start::before{left:0;background:linear-gradient(to right, var(--ez-scroller--box-shadow-color) 20%, transparent 80%)}.ez-scroller__wrapper--horizontal.ez-scroller__wrapper--shadow-end::after{right:0;background:linear-gradient(to left, var(--ez-scroller--box-shadow-color) 20%, transparent 80%)}.ez-scroller__wrapper--vertical.ez-scroller__wrapper--shadow-start::before,.ez-scroller__wrapper--vertical.ez-scroller__wrapper--shadow-end::after{min-width:calc(100% - 10px);height:24px}.ez-scroller__wrapper--vertical.ez-scroller__wrapper--shadow-start::before{top:0;background:linear-gradient(to bottom, var(--ez-scroller--box-shadow-color) 20%, transparent 80%)}.ez-scroller__wrapper--vertical.ez-scroller__wrapper--shadow-end::after{bottom:0;background:linear-gradient(to top, var(--ez-scroller--box-shadow-color) 20%, transparent 80%)}";
+
+const EzScroller = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this._shadowStart = "ez-scroller__wrapper--shadow-start";
+    this._shadowEnd = "ez-scroller__wrapper--shadow-end";
+    this.isActive = false;
+    this.direction = undefined;
+    this.locked = false;
+    this.activeShadow = false;
+  }
+  //---------------------------------------------
+  // Private methods
+  //---------------------------------------------
+  getContainerClass() {
+    return `ez-scroller__container ez-scroller__container--${this.direction}
+      ${this.locked || !this.isActive ? " ez-scroller__container--locked" : ""}
+    `;
+  }
+  getWrapperClass() {
+    return `ez-scroller__wrapper ez-scroller__wrapper--${this.direction}`;
+  }
+  finishDrag() {
+    if (this._controller) {
+      this._container.classList.remove("dragging");
+    }
+  }
+  updateScroller() {
+    const container = this._container;
+    if (container == undefined) {
+      return;
+    }
+    let remainingScroll;
+    if (this.direction === EzScrollDirection.EzScrollDirection.HORIZONTAL) {
+      const { scrollWidth, clientWidth, scrollLeft } = container;
+      remainingScroll = scrollWidth - clientWidth - Math.ceil(scrollLeft);
+      this._startHidden = container.scrollLeft > 0;
+    }
+    else if (this.direction === EzScrollDirection.EzScrollDirection.VERTICAL) {
+      const { scrollHeight, clientHeight, scrollTop } = container;
+      remainingScroll = scrollHeight - clientHeight - Math.ceil(scrollTop);
+      this._startHidden = container.scrollTop > 0;
+    }
+    this._endHidden = remainingScroll > 0;
+    this.isActive = this._startHidden || this._endHidden || this.isActiveScroller();
+    this.updateShadow();
+  }
+  updateShadow() {
+    const wrapper = this._wrapper;
+    if (!this.activeShadow || wrapper == undefined) {
+      return;
+    }
+    const shadowPositions = ["", "start", "end", "middle"];
+    const currentPosition = shadowPositions[Number(this._startHidden) | Number(this._endHidden) << 1];
+    if (currentPosition === "start") {
+      wrapper.classList.add(this._shadowStart);
+      wrapper.classList.remove(this._shadowEnd);
+    }
+    else if (currentPosition === "end") {
+      wrapper.classList.remove(this._shadowStart);
+      wrapper.classList.add(this._shadowEnd);
+    }
+    else if (currentPosition === "middle") {
+      wrapper.classList.add(this._shadowStart);
+      wrapper.classList.add(this._shadowEnd);
+    }
+    else {
+      wrapper.classList.remove(this._shadowStart);
+      wrapper.classList.remove(this._shadowEnd);
+    }
+  }
+  configResize() {
+    const container = this._container;
+    if (container == undefined) {
+      return;
+    }
+    if (this._resizeObserver != undefined) {
+      this._resizeObserver.unobserve(container);
+    }
+    this._resizeObserver = new ResizeObserver(core.JSUtils.debounce(this.updateScroller.bind(this), 200));
+    this._resizeObserver.observe(container);
+  }
+  getContainerElement() {
+    return index.h("div", { ref: ref => this._container = ref, class: this.getContainerClass() }, index.h("slot", null));
+  }
+  isActiveScroller() {
+    if (this._container == undefined) {
+      return false;
+    }
+    return this._container.scrollWidth > this._container.clientWidth
+      || this._container.scrollHeight > this._container.clientHeight;
+  }
+  //---------------------------------------------
+  // Event handlers
+  //---------------------------------------------
+  clickListener(evt) {
+    if (this._controller && this._controller.didScroll()) {
+      evt.preventDefault();
+      evt.stopPropagation();
+      evt.stopImmediatePropagation();
+    }
+  }
+  mouseDownHandler(evt) {
+    if (this.locked) {
+      this.finishDrag();
+      return;
+    }
+    if (!this._controller) {
+      this._controller = new ScrollCtrl(this._container);
+    }
+    this._controller.startDragg(evt);
+    this._container.classList.add("dragging");
+  }
+  mouseUpHandler() {
+    this.finishDrag();
+  }
+  mouseMoveHandler(evt) {
+    if (this.locked) {
+      this.finishDrag();
+      return;
+    }
+    if (this._controller) {
+      if (evt.buttons === 0) {
+        this.finishDrag();
+      }
+      else {
+        this._controller.doScroll(evt);
+      }
+    }
+  }
+  componentDidRender() {
+    var _a, _b;
+    if (this._container == undefined) {
+      return;
+    }
+    if (this.direction === EzScrollDirection.EzScrollDirection.BOTH) {
+      (_a = this._wrapper) === null || _a === void 0 ? void 0 : _a.classList.remove(this._shadowStart);
+      (_b = this._wrapper) === null || _b === void 0 ? void 0 : _b.classList.remove(this._shadowEnd);
+      this.isActive = this.isActiveScroller();
+      return;
+    }
+    this._container.onscroll = this.updateScroller.bind(this);
+    this.configResize();
+    this.updateScroller();
+  }
+  render() {
+    return (index.h(index.Host, null, this.activeShadow
+      ? index.h("div", { ref: ref => this._wrapper = ref, class: this.getWrapperClass() }, this.getContainerElement())
+      : this.getContainerElement()));
+  }
+};
+class ScrollCtrl {
+  constructor(scrollablePanel) {
+    this.scrollablePanel = scrollablePanel;
+  }
+  startDragg(evt) {
+    this.startX = this.measureX(evt);
+    this.startY = this.measureY(evt);
+    this.scrollWidth = 0;
+    this.scrollHeight = 0;
+  }
+  measureX(e) {
+    return e.pageX - this.scrollablePanel.offsetLeft;
+  }
+  measureY(e) {
+    return e.pageY - this.scrollablePanel.offsetTop;
+  }
+  doScroll(e) {
+    const x = this.measureX(e);
+    const y = this.measureY(e);
+    if (x != this.startX || y != this.startY) {
+      const scrollX = x - this.startX;
+      const scrollY = y - this.startY;
+      this.startX += scrollX;
+      this.startY += scrollY;
+      this.scrollWidth += Math.abs(scrollX);
+      this.scrollHeight += Math.abs(scrollY);
+      this.scrollablePanel.scrollLeft = Math.max(0, this.scrollablePanel.scrollLeft - scrollX);
+      this.scrollablePanel.scrollTop = Math.max(0, this.scrollablePanel.scrollTop - scrollY);
+    }
+  }
+  didScroll() {
+    const tollerance = 5;
+    return this.scrollHeight > tollerance || this.scrollWidth > tollerance;
+  }
+}
+EzScroller.style = ezScrollerCss;
+
+const ezSidebarButtonCss = ":host{position:relative;--ez-sidebar-button--width:6px;--ez-sidebar-button--hover--width:12px;--ez-sidebar-button--height:96px;--ez-sidebar-button--background-color--xlight:var(--background--xlight, #fff);--ez-sidebar-button--background-color--primary:var(--color--primary);--ez-sidebar-button--space--small:var(--space--small, 6px);--ez-sidebar-button--space--medium:var(--space--medium, 12px);--ez-sidebar-button--box-shadow:var(--shadow--small, 0px 0px 16px rgba(0, 38, 111, 0.07));--ez-sidebar-button--hover--box-shadow:var(--shadow--hard, 0px 0px 16px rgba(43, 58, 84, 0.24));--ez-sidebar-button--border--radius-small:var(--border--radius-small);--ez-sidebar-button--border--radius-medium:var(--border--radius-medium)}button{position:absolute;display:flex;background:var(--ez-sidebar-button--background-color--xlight);border:0;border-radius:0 var(--ez-sidebar-button--border--radius-medium) var(--ez-sidebar-button--border--radius-medium) 0;box-shadow:var(--ez-sidebar-button--box-shadow);padding:0;cursor:pointer;align-items:center}span{width:var(--ez-sidebar-button--width);height:var(--ez-sidebar-button--height);margin:var(--ez-sidebar-button--space--medium) 0 var(--ez-sidebar-button--space--medium) 0;background:var(--ez-sidebar-button--background-color--primary);border-radius:0 var(--ez-sidebar-button--border--radius-small) var(--ez-sidebar-button--border--radius-small) 0}ez-icon{--ez-icon--color:var(--ez-sidebar-button--background-color--primary)}button:hover{box-shadow:var(--ez-sidebar-button--hover--box-shadow)}button:hover span{width:var(--ez-sidebar-button--hover--width);margin:var(--ez-sidebar-button--space--medium) 0 var(--ez-sidebar-button--space--medium) 0}";
+
+const EzSidebarButton = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.ezClick = index.createEvent(this, "ezClick", 7);
+  }
+  componentDidLoad() {
+    if (this._element) {
+      core.ElementIDUtils.addIDInfo(this._element);
+    }
+    if (this._button) {
+      const dataInfo = { id: 'embedded' };
+      core.ElementIDUtils.addIDInfo(this._button, 'button', dataInfo);
+    }
+  }
+  render() {
+    return (index.h("button", { type: "button", onClick: () => { this.ezClick.emit(); }, ref: (el) => this._button = el }, index.h("span", null), index.h("ez-icon", { iconName: "chevron-right" })));
+  }
+  get _element() { return index.getElement(this); }
+};
+EzSidebarButton.style = ezSidebarButtonCss;
+
+exports.ez_scroller = EzScroller;
+exports.ez_sidebar_button = EzSidebarButton;

package/dist/cjs/ez-search.cjs.entry.js

@@ -24,7 +24,6 @@ const EzSearch = class {
     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;
@@ -53,36 +52,30 @@ const EzSearch = class {
     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();
       }
     }
   }
+  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) {
-      try {
-        if (typeof newValue === "string") {
-          await this.handleValueAsString(newValue);
-          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();
+    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) {
@@ -155,7 +148,9 @@ const EzSearch = class {
       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();
@@ -212,7 +207,7 @@ const EzSearch = class {
     return text;
   }
   getText() {
-    const currentValue = this.getSelectedOption(this.value);
+    const currentValue = this.getSelectedOption(this._currentValue);
     const text = this.getFormattedText(currentValue);
     if (text == undefined) {
       return;
@@ -387,6 +382,7 @@ const EzSearch = class {
       || (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();
@@ -407,7 +403,7 @@ const EzSearch = class {
     }
   }
   cancelPreselection() {
-    if (!this._textInput.value && this.value) {
+    if (!this._textInput.value && this._currentValue) {
       this.selectOption(undefined);
     }
     else {
@@ -428,6 +424,7 @@ const EzSearch = class {
   }
   clearSearch() {
     this.value = null;
+    this._currentValue = null;
   }
   controlListWithOnlyOne() {
     var _a, _b;
@@ -457,11 +454,11 @@ const EzSearch = class {
     if (core.StringUtils.isEmpty(this.value)) {
       return;
     }
-    let value = this.value;
-    if (typeof value === "object") {
+    if (!this.validateNewValue(this.value, this._currentValue)) {
       return;
     }
-    if (core.StringUtils.isEmpty(value)) {
+    let value = this.value;
+    if (typeof value === "object") {
       return;
     }
     this.loadDescriptionValue(value);
@@ -498,8 +495,8 @@ const EzSearch = class {
       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;
@@ -558,6 +555,7 @@ const EzSearch = class {
     this.validateDescriptionValue();
   }
   componentDidLoad() {
+    this._currentValue = this.value;
     CSSVarsUtils.CSSVarsUtils.applyVarsTextInput(this.el, this._textInput);
     this.setInputValue(false);
     this._resizeObserver = new ResizeObserver((entries) => {