@sankhyalabs/ezui 0.0.0-bugfix-dev-KB-86904.0 → 0.0.0-bugfix-dev-KB-92929.0

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

@@ -33,7 +33,9 @@ export class EzComboBox {
     this.listOptionsPosition = undefined;
     this.isTextSearch = false;
     this.autoFocus = false;
+    this.preventAutoFocus = false;
     this.alternativePlaceholder = undefined;
+    this.textEmptyOption = "Selecione um item";
   }
   observeErrorMessage() {
     var _a;
@@ -158,7 +160,7 @@ export class EzComboBox {
       opts = opts.filter(opt => opt.label.toLocaleUpperCase().indexOf(upperCriteria) > -1);
     }
     if (this.hasToAddEmptyoption(opts)) {
-      opts = [{ value: undefined, label: "" }].concat(opts);
+      opts = [{ value: undefined, label: this.textEmptyOption }].concat(opts);
     }
     this._visibleOptions = opts;
     this._maxWidthValue = this.getMaxWidthValue();
@@ -203,7 +205,8 @@ export class EzComboBox {
     this._preSelection = indexValue === -1 ? 0 : indexValue;
     if (!!this._resizeObserver)
       this._resizeObserver.observe(this._textInput);
-    await this.setFocus();
+    if (!this.preventAutoFocus)
+      await this.setFocus();
   }
   hideOptions() {
     var _a;
@@ -794,6 +797,24 @@ export class EzComboBox {
         "reflect": false,
         "defaultValue": "false"
       },
+      "preventAutoFocus": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Se true, impede que o campo de texto receba foco automaticamente ao abrir as op\u00E7\u00F5es."
+        },
+        "attribute": "prevent-auto-focus",
+        "reflect": false,
+        "defaultValue": "false"
+      },
       "alternativePlaceholder": {
         "type": "string",
         "mutable": false,
@@ -810,6 +831,24 @@ export class EzComboBox {
         },
         "attribute": "alternative-placeholder",
         "reflect": true
+      },
+      "textEmptyOption": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Texto a ser apresentado na op\u00E7\u00E3o de valor nulo."
+        },
+        "attribute": "text-empty-option",
+        "reflect": false,
+        "defaultValue": "\"Selecione um item\""
       }
     };
   }

package/dist/collection/components/ez-double-list/doubleListHelper.js

@@ -55,21 +55,20 @@ export function transferAll({ from, to, selectedFrom, selectedTo }) {
   from = [];
   return { from, to, selectedFrom, selectedTo };
 }
-export function transferItems({ from, to, selectedFrom, selectedTo }) {
+export function transferItems({ from, to, selectedFrom, selectedTo, insertIndex = to.length, }) {
   if (!from.length)
     return { from, to, selectedFrom, selectedTo };
   const itemsToTransfer = getItemsToTransfer(to, selectedFrom, from);
   if (!itemsToTransfer.length)
     return { from, to, selectedFrom, selectedTo };
-  to = [
-    ...to.map(i => setItemSelection(i, false)),
-    ...itemsToTransfer.map(i => setItemSelection(i, true))
-  ];
-  const selectedFromIds = selectedFrom.map(id => id);
-  from = [...from.filter(item => !selectedFromIds.includes(item.id))];
-  selectedTo = [...selectedFrom];
-  selectedFrom = [];
-  return { from, to, selectedFrom, selectedTo };
+  let updatedTo = to.map(i => setItemSelection(i, false));
+  updatedTo.splice(insertIndex, 0, ...itemsToTransfer.map(i => setItemSelection(i, true)));
+  return {
+    from: from.filter(item => !selectedFrom.includes(item.id)),
+    to: updatedTo,
+    selectedFrom: [],
+    selectedTo: [...selectedFrom],
+  };
 }
 function getItemsToTransfer(to, selectedFrom, from) {
   const toListIds = to.map(item => item.id);

package/dist/collection/components/ez-double-list/ez-double-list.css

@@ -4,52 +4,20 @@
   gap: 8px;
   align-items: center;
   font-family: var(--font-pattern, "Roboto");
+  width: 100%;
 }
 
-.group {
-  display: flex;
-  justify-content: space-between;
-  gap: 10px;
-  flex-direction: column;
-  border: var(--border--small) var(--color--strokes);
-  border-radius: var(--border--radius-medium);
-  width: 350px;
-  height: 400px;
-}
-
-.group__header {
-  background: var(--background--body);
-  padding: 10px;
-  border-radius: var(--border--radius-medium) var(--border--radius-medium) 0 0;
-}
-
-.group__label {
-  font-weight: var(--text-weight--large);
-  font-size: var(--text--medium);
-  color: var(--title--primary);
-  margin-bottom: 10px;
-  display: block;
-}
 
-.group__totalizer {
-  padding: 5px 10px;
-  background: var(--background--body);
-  font-weight: var(--text-weight--medium);
-  font-size: var(--text--medium);
-  color: var(--text--secondary);
-  border-radius: 0 0 var(--border--radius-medium) var(--border--radius-medium);
+@media screen and (max-width: 1366px){
+  .group {
+    height: 350px;
+  }
 }
 
-.empty-message{
-  font-weight: var(--text-weight--medium);
-  font-size: var(--text--medium);
-  color: var(--text--secondary);
-  text-align: center;
-  margin: auto;
-}
 
 .list__container {
   height: 100%;
+  width: 100%;
   min-height: 150px;
   overflow: auto;
   display: flex;

package/dist/collection/components/ez-double-list/ez-double-list.js

@@ -1,14 +1,11 @@
 import { h, Host } from '@stencil/core';
 import { moveItems, transferAll, transferItems } from './doubleListHelper';
-import { ArrayUtils, ObjectUtils } from '@sankhyalabs/core';
+import { ObjectUtils } from '@sankhyalabs/core';
 import { isContinuousSequence } from '../ez-list/ezListHelper';
-import { EzScrollDirection } from '../ez-scroller/EzScrollDirection';
 export class EzDoubleList {
   constructor() {
     this.LEFT_LIST_ID = 'LEFT-LIST-ID';
     this.RIGHT_LIST_ID = 'RIGHT-LIST-ID';
-    this.LEFT_FILTER_ID = 'LEFT-FILTER-ID';
-    this.RIGHT_FILTER_ID = 'RIGHT-FILTER-ID';
     this.leftList = [];
     this.leftTitle = undefined;
     this.rightList = [];
@@ -16,7 +13,10 @@ export class EzDoubleList {
     this.entityLabelPlural = 'itens';
     this.leftListLabel = 'disponíveis';
     this.rightListLabel = 'selecionados';
+    this.useOnlyRightList = false;
     this.rightTitle = undefined;
+    this.emptyMessage = undefined;
+    this.slotsListBuilder = undefined;
     this.leftFilteredList = [];
     this.rightFilteredList = [];
     this.selectedLeftList = [];
@@ -38,23 +38,31 @@ export class EzDoubleList {
       return;
     this.ezRightListChanged.emit(newValue);
   }
-  handleFilterChangeLeft(value) {
-    this.leftFilteredList = ArrayUtils.applyStringFilter(value, this.leftList, true, 'label');
-    this.isFilteringLeft = this.leftFilteredList.length !== this.leftList.length;
-  }
-  handleFilterChangeRight(value) {
-    this.rightFilteredList = ArrayUtils.applyStringFilter(value, this.rightList, true, 'label');
-    this.isFilteringRight = this.rightFilteredList.length !== this.rightList.length;
-  }
   async handleChangeLeft({ detail }) {
-    this.leftList = [...detail];
-    this.selectedLeftList = [...detail.filter(item => item.selected)];
-    await this.leftEzListInstance.clearHistory();
+    if (!detail.to.getAttribute('id') || detail.to.getAttribute('id') !== this.RIGHT_LIST_ID) {
+      this.leftList = [...this.reorderArray(detail.dataSource, detail.selectItens, detail.newIndex)];
+      return;
+    }
+    detail.selectItens = detail.selectItens.filter(id => this.rightList.every(item => item.id !== id));
+    this.leftList = [...detail.dataSource];
+    this.selectedLeftList = [...detail.selectItens];
+    this.transferToRight(detail === null || detail === void 0 ? void 0 : detail.newIndex);
   }
   async handleChangeRight({ detail }) {
-    this.rightList = [...detail];
-    this.selectedRightList = [...detail.filter(item => item.selected)];
-    await this.rightEzListInstance.clearHistory();
+    if (!detail.to.getAttribute('id') || detail.to.getAttribute('id') !== this.LEFT_LIST_ID) {
+      this.rightList = [...this.reorderArray(detail.dataSource, detail.selectItens, detail.newIndex)];
+      return;
+    }
+    detail.selectItens = detail.selectItens.filter(id => this.leftList.every(item => item.id !== id));
+    this.rightList = [...detail.dataSource];
+    this.selectedRightList = [...detail.selectItens];
+    this.transferToLeft(detail === null || detail === void 0 ? void 0 : detail.newIndex);
+  }
+  reorderArray(allItems, itemIdsToMove, insertIndex) {
+    const filteredItems = allItems.filter(i => !itemIdsToMove.includes(i.id));
+    const itemsToMove = allItems.filter(i => itemIdsToMove.includes(i.id));
+    filteredItems.splice(insertIndex, 0, ...itemsToMove);
+    return filteredItems;
   }
   enableTransferAllToRight() {
     return this.leftList.length > 0;
@@ -88,33 +96,43 @@ export class EzDoubleList {
   getRightSelectedItemsIndex() {
     return this.selectedRightList.map(id => this.rightList.findIndex(original => original.id === id));
   }
-  transferToRight() {
-    const { from, to, selectedFrom, selectedTo } = transferItems(this.buildTransferToRightConfig());
-    this.leftList = [...from];
+  transferToRight(insertIndex) {
+    const { from, to, selectedFrom, selectedTo } = transferItems(Object.assign(Object.assign({}, this.buildTransferToRightConfig()), { insertIndex: insertIndex !== null && insertIndex !== void 0 ? insertIndex : 0 }));
+    //Eh preciso limpar a lista antes de atualiza-la por conta de um bug no ciclo de vida do sortable.js
+    this.leftList = [];
+    requestAnimationFrame(() => this.leftList = [...from]);
     this.rightList = [...to];
     this.selectedLeftList = [...selectedFrom];
     this.selectedRightList = [...selectedTo];
   }
-  transferToLeft() {
-    const { from, to, selectedFrom, selectedTo } = transferItems(this.buildTransferToLeftConfig());
-    this.rightList = [...from];
+  transferToLeft(insertIndex) {
+    const { from, to, selectedFrom, selectedTo } = transferItems(Object.assign(Object.assign({}, this.buildTransferToLeftConfig()), { insertIndex: insertIndex !== null && insertIndex !== void 0 ? insertIndex : 0 }));
+    //Eh preciso limpar a lista antes de atualiza-la por conta de um bug no ciclo de vida do sortable.js
+    this.rightList = [];
+    requestAnimationFrame(() => this.rightList = [...from]);
     this.leftList = [...to];
     this.selectedRightList = [...selectedFrom];
     this.selectedLeftList = [...selectedTo];
   }
-  handleTransferAllToRight() {
+  async handleTransferAllToRight() {
     const { from, to, selectedFrom, selectedTo } = transferAll(this.buildTransferToRightConfig());
     this.leftList = [...from];
     this.rightList = [...to];
     this.selectedLeftList = [...selectedFrom];
     this.selectedRightList = [...selectedTo];
+    requestAnimationFrame(async () => {
+      await this.clearSelectionAll();
+    });
   }
-  handleTransferAllToLeft() {
+  async handleTransferAllToLeft() {
     const { from, to, selectedFrom, selectedTo } = transferAll(this.buildTransferToLeftConfig());
     this.rightList = [...from];
     this.leftList = [...to];
     this.selectedRightList = [...selectedFrom];
     this.selectedLeftList = [...selectedTo];
+    requestAnimationFrame(async () => {
+      await this.clearSelectionAll();
+    });
   }
   buildTransferToRightConfig() {
     return {
@@ -157,33 +175,77 @@ export class EzDoubleList {
     const itemsToMove = this.rightList.filter(item => this.selectedRightList.includes(item.id));
     return { itemsToKeep, itemsToMove };
   }
-  handleTransferToRight() {
+  async handleTransferToRight() {
     this.transferToRight();
     this.leftFilteredList = [];
-    this.leftEzFilterInput.value = '';
+    await this.leftEzListInstance.clearSelection();
   }
-  handleTransferToLeft() {
+  async handleTransferToLeft() {
     this.transferToLeft();
     this.rightFilteredList = [];
-    this.rightEzFilterInput.value = '';
+    await this.rightEzListInstance.clearSelection();
   }
-  buildTotalizer(list) {
-    return `Total de ${list.length} ${list.length === 1 ? this.entityLabel : this.entityLabelPlural}`;
+  async clearSelectionAll() {
+    await this.rightEzListInstance.clearSelection();
+    await this.leftEzListInstance.clearSelection();
   }
-  renderLeftList() {
-    if (!this.leftList.length) {
-      return h("span", { class: 'empty-message' }, "Nenhum ", this.entityLabel, " dispon\u00EDvel");
-    }
-    return (h("ez-scroller", { direction: EzScrollDirection.VERTICAL, activeShadow: true }, h("ez-list", { ref: (ref) => this.leftEzListInstance = ref, id: this.LEFT_LIST_ID, hoverFeedback: true, dataSource: this.isFilteringLeft ? this.leftFilteredList : this.leftList, ezDraggable: !this.isFilteringLeft, enableMultipleSelection: true, onEzChange: this.handleChangeLeft.bind(this), ezSelectable: true, onEzSelectMultipleItems: this.handleSelectLeftItem.bind(this), onEzDoubleClick: this.handleTransferToRight.bind(this) })));
+  handleChooseLeft() {
+    requestAnimationFrame(async () => {
+      await this.rightEzListInstance.clearSelection();
+    });
   }
-  renderRightList() {
-    if (!this.rightList.length) {
-      return h("span", { class: 'empty-message' }, "Nenhum ", this.entityLabel, " selecionado");
-    }
-    return (h("ez-scroller", { direction: EzScrollDirection.VERTICAL, activeShadow: true }, h("ez-list", { ref: (ref) => this.rightEzListInstance = ref, id: this.RIGHT_LIST_ID, hoverFeedback: true, dataSource: this.isFilteringRight ? this.rightFilteredList : this.rightList, ezDraggable: !this.isFilteringRight, enableMultipleSelection: true, onEzChange: this.handleChangeRight.bind(this), ezSelectable: true, onEzSelectMultipleItems: this.handleSelectRightItem.bind(this), onEzDoubleClick: this.handleTransferToLeft.bind(this) })));
+  handleChooseRight() {
+    if (this.useOnlyRightList)
+      return;
+    requestAnimationFrame(async () => {
+      await this.leftEzListInstance.clearSelection();
+    });
+  }
+  renderList(props) {
+    const { idSortableList, list, isFiltering, filteredList, emptyMessage, slotConfig, callbacks, title } = props;
+    return (h("ez-sortable-list", { ref: callbacks === null || callbacks === void 0 ? void 0 : callbacks.setRef, title: title, idSortableList: idSortableList, emptyMessage: emptyMessage, class: "ez-size-height--full", dataSource: isFiltering ? filteredList : list, hoverFeedback: true, enableMultipleSelection: true, removeItensMoved: true, entityLabel: this.entityLabel, entityLabelPlural: this.entityLabelPlural, itemRightSlotBuilder: slotConfig === null || slotConfig === void 0 ? void 0 : slotConfig.itemRightSlotBuilder, itemLeftSlotBuilder: slotConfig === null || slotConfig === void 0 ? void 0 : slotConfig.itemLeftSlotBuilder, onItemsReordered: callbacks === null || callbacks === void 0 ? void 0 : callbacks.onChange.bind(this), onEzSelectItens: callbacks === null || callbacks === void 0 ? void 0 : callbacks.onSelect.bind(this), onEzDoubleClick: callbacks === null || callbacks === void 0 ? void 0 : callbacks.onDoubleClick.bind(this), onEzChoose: callbacks === null || callbacks === void 0 ? void 0 : callbacks.onChoose.bind(this) }));
   }
   render() {
-    return (h(Host, null, h("div", { class: 'group' }, h("div", { class: 'group__header' }, h("span", { class: 'group__label' }, this.leftTitle), h("ez-filter-input", { ref: (ref) => this.leftEzFilterInput = ref, id: this.LEFT_FILTER_ID, label: `Buscar ${this.entityLabel}`, mode: 'slim', onEzChange: evt => this.handleFilterChangeLeft(evt.detail) })), h("div", { class: 'list__container' }, this.renderLeftList()), h("div", { class: 'group__totalizer' }, this.buildTotalizer(this.leftList))), h("div", { class: 'actions__column' }, h("ez-button", { mode: 'icon', iconName: 'dual-chevron-right', enabled: this.enableTransferAllToRight(), title: `Mover todos para ${this.leftListLabel}`, size: 'small', onClick: this.handleTransferAllToRight.bind(this) }), h("ez-button", { mode: 'icon', iconName: 'chevron-right', enabled: this.enableTransferToRight(), title: `Mover para ${this.leftListLabel}`, size: 'small', onClick: this.handleTransferToRight.bind(this) }), h("ez-button", { mode: 'icon', iconName: 'chevron-left', enabled: this.enableTransferToLeft(), title: `Mover para ${this.rightListLabel}`, size: 'small', onClick: this.handleTransferToLeft.bind(this) }), h("ez-button", { mode: 'icon', iconName: 'dual-chevron-left', enabled: this.enableTransferAllToLeft(), title: `Mover todos para ${this.rightListLabel}`, size: 'small', onClick: this.handleTransferAllToLeft.bind(this) })), h("div", { class: 'group' }, h("div", { class: 'group__header' }, h("span", { class: 'group__label' }, this.rightTitle), h("ez-filter-input", { ref: (ref) => this.rightEzFilterInput = ref, id: this.RIGHT_FILTER_ID, label: `Buscar ${this.entityLabel}`, mode: 'slim', onEzChange: evt => this.handleFilterChangeRight(evt.detail) })), h("div", { class: 'list__container' }, this.renderRightList()), h("div", { class: 'group__totalizer' }, this.buildTotalizer(this.rightList))), h("div", { class: 'actions__column' }, h("ez-button", { mode: 'icon', iconName: 'dual-chevron-up', enabled: this.enableMoveUp(true), title: 'Mover para primeira posi\u00E7\u00E3o', size: 'small', onClick: this.handleMoveToTop.bind(this) }), h("ez-button", { mode: 'icon', iconName: 'chevron-up', enabled: this.enableMoveUp(), title: 'Mover para cima', size: 'small', onClick: this.handleMoveUp.bind(this) }), h("ez-button", { mode: 'icon', iconName: 'chevron-down', enabled: this.enableMoveDown(), title: 'Mover para baixo', size: 'small', onClick: this.handleMoveDown.bind(this) }), h("ez-button", { mode: 'icon', iconName: 'dual-chevron-down', enabled: this.enableMoveDown(true), title: 'Mover para \u00FAltima posi\u00E7\u00E3o', size: 'small', onClick: this.handleMoveToBottom.bind(this) }))));
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
+    return (h(Host, null, !this.useOnlyRightList &&
+      h("div", { class: "list__container" }, this.leftList && this.renderList({
+        idSortableList: this.LEFT_LIST_ID,
+        list: this.leftList,
+        title: this.leftTitle,
+        isFiltering: this.isFilteringLeft,
+        filteredList: this.leftFilteredList,
+        emptyMessage: !!((_a = this.emptyMessage) === null || _a === void 0 ? void 0 : _a.LEFT_LIST) ? this.emptyMessage.LEFT_LIST : `Nenhum ${this.entityLabel} disponível`,
+        slotConfig: {
+          itemRightSlotBuilder: (_c = (_b = this.slotsListBuilder) === null || _b === void 0 ? void 0 : _b.LEFT_LIST) === null || _c === void 0 ? void 0 : _c.itemRightSlotBuilder,
+          itemLeftSlotBuilder: (_e = (_d = this.slotsListBuilder) === null || _d === void 0 ? void 0 : _d.LEFT_LIST) === null || _e === void 0 ? void 0 : _e.itemLeftSlotBuilder,
+        },
+        callbacks: {
+          setRef: (ref) => this.leftEzListInstance = ref,
+          onChange: (evt) => this.handleChangeLeft(evt),
+          onSelect: this.handleSelectLeftItem.bind(this),
+          onDoubleClick: this.handleTransferToRight.bind(this),
+          onChoose: this.handleChooseLeft.bind(this),
+        },
+      })), !this.useOnlyRightList &&
+      h("div", { class: 'actions__column' }, h("ez-button", { mode: "icon", iconName: "dual-chevron-right", enabled: this.enableTransferAllToRight(), title: `Mover todos para ${this.rightListLabel}`, size: "small", onClick: this.handleTransferAllToRight.bind(this) }), h("ez-button", { mode: "icon", iconName: "chevron-right", enabled: this.enableTransferToRight(), title: `Mover para ${this.rightListLabel}`, size: "small", onClick: this.handleTransferToRight.bind(this) }), h("ez-button", { mode: "icon", iconName: "chevron-left", enabled: this.enableTransferToLeft(), title: `Mover para ${this.leftListLabel}`, size: "small", onClick: this.handleTransferToLeft.bind(this) }), h("ez-button", { mode: "icon", iconName: "dual-chevron-left", enabled: this.enableTransferAllToLeft(), title: `Mover todos para ${this.leftListLabel}`, size: "small", onClick: this.handleTransferAllToLeft.bind(this) })), h("div", { class: "list__container" }, this.rightList && this.renderList({
+      idSortableList: this.RIGHT_LIST_ID,
+      list: this.rightList,
+      title: this.rightTitle,
+      isFiltering: this.isFilteringRight,
+      filteredList: this.rightFilteredList,
+      emptyMessage: !!((_f = this.emptyMessage) === null || _f === void 0 ? void 0 : _f.RIGHT_LIST) ? this.emptyMessage.RIGHT_LIST : `Nenhum ${this.entityLabel} selecionado`,
+      slotConfig: {
+        itemRightSlotBuilder: (_h = (_g = this.slotsListBuilder) === null || _g === void 0 ? void 0 : _g.RIGHT_LIST) === null || _h === void 0 ? void 0 : _h.itemRightSlotBuilder,
+        itemLeftSlotBuilder: (_k = (_j = this.slotsListBuilder) === null || _j === void 0 ? void 0 : _j.RIGHT_LIST) === null || _k === void 0 ? void 0 : _k.itemLeftSlotBuilder,
+      },
+      callbacks: {
+        setRef: (ref) => this.rightEzListInstance = ref,
+        onChange: (evt) => this.handleChangeRight(evt),
+        onSelect: this.handleSelectRightItem.bind(this),
+        onDoubleClick: this.handleTransferToLeft.bind(this),
+        onChoose: this.handleChooseRight.bind(this),
+      },
+    })), h("div", { class: 'actions__column' }, h("ez-button", { mode: "icon", iconName: "dual-chevron-up", enabled: this.enableMoveUp(true), title: "Mover para primeira posi\u00E7\u00E3o", size: "small", onClick: this.handleMoveToTop.bind(this) }), h("ez-button", { mode: "icon", iconName: "chevron-up", enabled: this.enableMoveUp(), title: "Mover para cima", size: "small", onClick: this.handleMoveUp.bind(this) }), h("ez-button", { mode: "icon", iconName: "chevron-down", enabled: this.enableMoveDown(), title: "Mover para baixo", size: "small", onClick: this.handleMoveDown.bind(this) }), h("ez-button", { mode: "icon", iconName: "dual-chevron-down", enabled: this.enableMoveDown(true), title: "Mover para \u00FAltima posi\u00E7\u00E3o", size: "small", onClick: this.handleMoveToBottom.bind(this) }))));
   }
   static get is() { return "ez-double-list"; }
   static get encapsulation() { return "scoped"; }
@@ -208,7 +270,7 @@ export class EzDoubleList {
           "references": {
             "ListItem": {
               "location": "import",
-              "path": "../ez-list/ez-list"
+              "path": "../ez-sortable-list/ez-sortable-list"
             }
           }
         },
@@ -246,7 +308,7 @@ export class EzDoubleList {
           "references": {
             "ListItem": {
               "location": "import",
-              "path": "../ez-list/ez-list"
+              "path": "../ez-sortable-list/ez-sortable-list"
             }
           }
         },
@@ -288,7 +350,7 @@ export class EzDoubleList {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Varia\u00E7\u00E3o plura do nome da entidade listada.\nExemplo: \"Campos\", \"Itens\", \"Empresas\"."
+          "text": "Varia\u00E7\u00E3o plural do nome da entidade listada.\nExemplo: \"Campos\", \"Itens\", \"Empresas\"."
         },
         "attribute": "entity-label-plural",
         "reflect": false,
@@ -330,6 +392,24 @@ export class EzDoubleList {
         "reflect": false,
         "defaultValue": "'selecionados'"
       },
+      "useOnlyRightList": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Define se ir\u00E1 exibir apenas a lista da direita."
+        },
+        "attribute": "use-only-right-list",
+        "reflect": false,
+        "defaultValue": "false"
+      },
       "rightTitle": {
         "type": "string",
         "mutable": false,
@@ -346,6 +426,44 @@ export class EzDoubleList {
         },
         "attribute": "right-title",
         "reflect": false
+      },
+      "emptyMessage": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "EmptyMessage",
+          "resolved": "EmptyMessage",
+          "references": {
+            "EmptyMessage": {
+              "location": "local"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Objeto que define as mensagens a serem exibidas quando a lista est\u00E1 vazia\nExemplo:\n{\nLEFT_LIST?: \"Lista lado esquerdo vazia.\",\nRIGHT_LIST?: \"Lista lado direito vazia.\";\n}"
+        }
+      },
+      "slotsListBuilder": {
+        "type": "unknown",
+        "mutable": true,
+        "complexType": {
+          "original": "DoubleListSlots",
+          "resolved": "DoubleListSlots",
+          "references": {
+            "DoubleListSlots": {
+              "location": "local"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Objeto que define os m\u00E9todos de constru\u00E7\u00E3o dos elementos visuais para os itens de cada lista.\n\nEste objeto permite configurar dinamicamente os elementos HTML que ser\u00E3o exibidos ao lado\nesquerdo e direito dos itens em ambas as listas (`LEFT_LIST` e `RIGHT_LIST`)."
+        }
       }
     };
   }
@@ -368,7 +486,7 @@ export class EzDoubleList {
         "composed": true,
         "docs": {
           "tags": [],
-          "text": ""
+          "text": "Emitido ao realizar uma altera\u00E7\u00E3o na lista esquerda do componente."
         },
         "complexType": {
           "original": "Array<ListItem>",
@@ -379,7 +497,7 @@ export class EzDoubleList {
             },
             "ListItem": {
               "location": "import",
-              "path": "../ez-list/ez-list"
+              "path": "../ez-sortable-list/ez-sortable-list"
             }
           }
         }
@@ -391,7 +509,7 @@ export class EzDoubleList {
         "composed": true,
         "docs": {
           "tags": [],
-          "text": ""
+          "text": "Emitido ao realizar uma altera\u00E7\u00E3o na lista direita do componente."
         },
         "complexType": {
           "original": "Array<ListItem>",
@@ -402,7 +520,7 @@ export class EzDoubleList {
             },
             "ListItem": {
               "location": "import",
-              "path": "../ez-list/ez-list"
+              "path": "../ez-sortable-list/ez-sortable-list"
             }
           }
         }

package/dist/collection/components/ez-grid/controller/ag-grid/AgGridController.js

@@ -1,5 +1,5 @@
 import { ApplicationContext, DataType, LockManager, LockManagerOperation, MaskFormatter, NumberUtils, SortMode, StringUtils, UserInterface, } from '@sankhyalabs/core';
-import { Grid } from "@ag-grid-community/core";
+import { Grid, } from "@ag-grid-community/core";
 import { LicenseManager } from '@ag-grid-enterprise/core';
 import DataSource from './DataSource';
 import { EzGridCustomHeader } from './components/EzGridCustomHeader';
@@ -14,6 +14,7 @@ import { RangeSelectionModule } from '@ag-grid-enterprise/range-selection';
 import { ServerSideRowModelModule } from '@ag-grid-enterprise/server-side-row-model';
 import { ClipboardModule } from '@ag-grid-enterprise/clipboard';
 import { MenuModule } from '@ag-grid-enterprise/menu';
+import DOMPurify from 'dompurify';
 export default class AgGridController {
   configFilterColumn(filterColumn) {
     this._filterColumn = filterColumn;
@@ -959,6 +960,10 @@ export default class AgGridController {
         if (params.value instanceof Promise) {
           return "Carregando...";
         }
+        if (source.userInterface === UserInterface.HTML) {
+          this.setHTMLRender(params, source);
+          return "";
+        }
         const customFormatter = this._customFormatters.get(source.name);
         if (customFormatter) {
           const formattedValue = customFormatter.format(params.value, source, params.data.__record__id__);
@@ -975,6 +980,24 @@ export default class AgGridController {
       editable: !((_e = source.props) === null || _e === void 0 ? void 0 : _e.has(PRESENTATION_FROM_COL_PROP_NAME))
     });
   }
+  setHTMLRender(params, source) {
+    const htmlSanitized = DOMPurify.sanitize(params.value);
+    params.colDef.cellRenderer = (cellParams) => {
+      if (cellParams.node.rowIndex === params.node.rowIndex) {
+        const element = document.createElement('span');
+        element.innerHTML = htmlSanitized;
+        return element.firstChild;
+      }
+      return cellParams.value;
+    };
+    params.colDef.cellStyle = (cellParams) => {
+      const defaultStyle = this.getStyleByColumn(source);
+      if (cellParams.node.rowIndex === params.node.rowIndex) {
+        return Object.assign(defaultStyle, { padding: 0 });
+      }
+      return defaultStyle;
+    };
+  }
   setCustomFormatters(customFormatters) {
     this._customFormatters = customFormatters;
   }

package/dist/collection/components/ez-grid/controller/ag-grid/GridEditionManager.js

@@ -345,11 +345,14 @@ export default class GridEditionManager {
   }
   isColEditable(fieldName) {
     const fieldDefinition = this._dataUnit.getField(fieldName);
-    if (fieldDefinition) {
+    if (fieldDefinition && !this.isTypeFile(fieldDefinition)) {
       return !fieldDefinition.readOnly;
     }
     return false;
   }
+  isTypeFile(file) {
+    return file.userInterface === UserInterface.FILE;
+  }
   isSecondClick(cellClicked) {
     if (!this._lastCellClicked) {
       return false;