@sankhyalabs/ezui 6.0.1 → 6.1.0-dev.1

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-dropdown/ez-dropdown.js

@@ -129,7 +129,7 @@ export class EzDropdown {
           return (h("div", { class: "ez-dropdown__item" }, h("ez-skeleton", { width: '200px' })));
         case "divider":
           return (h("hr", Object.assign({ class: "ez-dropdown__divider" }, { [ElementIDUtils.DATA_ELEMENT_ID_ATTRIBUTE_NAME]: ElementIDUtils.getInternalIDInfo(`${item.id}_ezDropdownDivider`) })));
-        case "item":
+        default:
           return (h("div", Object.assign({ ref: (ref) => this._itemList[item.id] = ref, class: "ez-dropdown__item", "data-level": level }, { [ElementIDUtils.DATA_ELEMENT_ID_ATTRIBUTE_NAME]: ElementIDUtils.getInternalIDInfo(`${item.id}_ezDropdownItem`) }), h("div", { class: "ez-dropdown__item-content", onClick: (evt) => this.onItemClick(evt, item), onMouseOver: (evt) => this.onShowSubmenu(evt, item), onMouseEnter: () => this.ezHover.emit(item) }, this.itemBuilder
             ? this.getContainerItemBuilder(item, level, isLockedLevels, hasIcon, hasChildren)
             : this.defaultItemBuilder(item, isLockedLevels, hasIcon, hasChildren)), ((_a = item.children) === null || _a === void 0 ? void 0 : _a.length) > 0 &&

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

@@ -1,23 +1,30 @@
-import { Action, DataUnit, ElementIDUtils, StringUtils } from "@sankhyalabs/core";
+import { Action, DataUnit, ElementIDUtils, StringUtils, ApplicationContext, KeyboardManager } from "@sankhyalabs/core";
 import { Host, forceUpdate, h } from "@stencil/core";
 import { createStore } from "redux";
 import DataBinder from "../../utils/form/DataBinder";
 import { buildFormMetadata } from "../../utils/form/FormMetadata";
+import { FormLayout } from '../../utils/form/interfaces';
 import { changeTab, formReducer, loadMetadata, selectCurrentSheet, selectFormMetadata } from "./store/form.slice";
+import { buildFieldSearch } from "../../utils";
+import { focusOnFieldSerch, LABEL_SEARCH_FIELD, SEARCH_FIELD_FULL_WIDTH, SHORTCUT_SEARCH_FIELD } from "../../utils/searchColumn/search-column";
 export class EzForm {
   constructor() {
     this._customEditors = new Map();
+    this._application = ApplicationContext.getContextValue("__SNK__APPLICATION__");
     this.onDataUnitAction = (action) => {
       if (action.type === Action.METADATA_LOADED) {
         this.processMetadata();
       }
     };
     this._fieldsProps = new Map();
+    this._singleColumn = true;
     this.dataUnit = undefined;
     this.config = undefined;
     this.recordsValidator = undefined;
     this.fieldToFocus = undefined;
     this.onlyStaticFields = false;
+    this.useSearchField = true;
+    this.elementFocusSearchField = undefined;
   }
   /**
    * Realiza validação no conteúdo de todos os campos.
@@ -75,7 +82,56 @@ export class EzForm {
     }
     this.ezFormSetFields.emit(fields);
     const idFormSheet = `${StringUtils.replaceAccentuatedChars(StringUtils.toCamelCase(currentSheet === null || currentSheet === void 0 ? void 0 : currentSheet.label), false)}_selectorContainer`;
-    return (h("div", { class: "dynamic-content", "data-element-id": idFormSheet }, h("ez-form-view", { ref: (element) => (this._formView = element), class: "ez-row ez-padding-vertical--small", fields: fields, selectedRecord: this.dataUnit.getSelectedRecord() })));
+    return (h("div", { class: "dynamic-content ez-box--no-outline", "data-element-id": idFormSheet, ref: elem => (this._container = elem), tabindex: "0" }, h("ez-popover", { ref: elem => (this._ezPopoverSearchField = elem), overlayType: "none" }, this.renderFieldColumn()), h("ez-form-view", { ref: (element) => (this._formView = element), class: "ez-row ez-padding-vertical--small", fields: fields, singleColumn: this._singleColumn, selectedRecord: this.dataUnit.getSelectedRecord() })));
+  }
+  renderFieldColumn() {
+    if (this._fieldSearch != undefined) {
+      return this._fieldSearch;
+    }
+    this._fieldSearch = buildFieldSearch({
+      value: StringUtils.generateUUID(),
+      label: LABEL_SEARCH_FIELD,
+    }, ({ argument }) => this.fieldsOptionLoader(argument), (option) => this.onSelectField(option));
+    return this._fieldSearch;
+  }
+  getFormFields() {
+    var _a;
+    return (_a = this.config) === null || _a === void 0 ? void 0 : _a.fields;
+  }
+  fieldsOptionLoader(argument) {
+    const searchTerm = argument === null || argument === void 0 ? void 0 : argument.toLowerCase();
+    const allFields = this.getFormFields().map(field => { var _a; return (_a = this.dataUnit) === null || _a === void 0 ? void 0 : _a.getField(field.name); });
+    const filteredFields = allFields.filter(field => {
+      var _a, _b;
+      return ((_a = field.name) === null || _a === void 0 ? void 0 : _a.toLowerCase().includes(searchTerm)) ||
+        ((_b = field.label) === null || _b === void 0 ? void 0 : _b.toLowerCase().includes(searchTerm));
+    });
+    const options = filteredFields.map(field => ({ value: field.name, label: field.label }));
+    return Promise.resolve(options);
+  }
+  onSelectField(option) {
+    if (option == undefined || option.value == undefined) {
+      this.fieldToFocus = "";
+      return;
+    }
+    this.fieldToFocus = option.value;
+    this._ezPopoverSearchField.hide();
+  }
+  async initKeyboardManager() {
+    var _a, _b;
+    this._keyboardManager = new KeyboardManager({ propagate: false, element: (_a = this.elementFocusSearchField) !== null && _a !== void 0 ? _a : this._element });
+    if (this.useSearchField) {
+      this._keyboardManager.bind(SHORTCUT_SEARCH_FIELD, async () => {
+        if (!this._container || !this._ezPopoverSearchField)
+          return;
+        const container = this._container.getBoundingClientRect();
+        await focusOnFieldSerch(this._fieldSearch);
+        this._ezPopoverSearchField.showUnder(this._container, { horizontalGap: container.width - (SEARCH_FIELD_FULL_WIDTH), verticalGap: container.height * -1 });
+      }, { description: LABEL_SEARCH_FIELD, element: (_b = this.elementFocusSearchField) !== null && _b !== void 0 ? _b : this._element });
+    }
+  }
+  componentDidLoad() {
+    this.initKeyboardManager();
   }
   processMetadata() {
     if (this.bindFields() && this.dataUnit && this._store) {
@@ -90,7 +146,8 @@ export class EzForm {
   bindFields() {
     return !this.isStatic() || this.onlyStaticFields === false;
   }
-  componentWillLoad() {
+  async componentWillLoad() {
+    var _a;
     if (this.dataUnit === undefined) {
       this.dataUnit = new DataUnit("ez-form");
     }
@@ -103,6 +160,28 @@ export class EzForm {
     this.processMetadata();
     const dataInfo = { dataUnit: this.dataUnit };
     ElementIDUtils.addIDInfo(this._element, null, dataInfo);
+    const layoutFormConfig = await ((_a = this._application) === null || _a === void 0 ? void 0 : _a.getLayoutFormConfig());
+    this.setSingleColumn(layoutFormConfig);
+    this.registerNotifyListeners(layoutFormConfig);
+  }
+  async setSingleColumn(layoutFormConfig) {
+    if (!(layoutFormConfig === null || layoutFormConfig === void 0 ? void 0 : layoutFormConfig.config)) {
+      this._singleColumn = true;
+      return;
+    }
+    this._singleColumn = layoutFormConfig.config === FormLayout.CASCADE ? true : false;
+  }
+  async registerNotifyListeners(layoutFormConfig) {
+    if (!layoutFormConfig)
+      return;
+    layoutFormConfig.onConfigChange((config) => {
+      if (config === FormLayout.CASCADE) {
+        this._singleColumn = true;
+      }
+      else {
+        this._singleColumn = false;
+      }
+    });
   }
   componentDidRender() {
     const metadata = selectFormMetadata(this._store.getState());
@@ -135,6 +214,7 @@ export class EzForm {
     requestAnimationFrame(() => {
       this._dataBinder.setFocus(this.fieldToFocus);
       this.ezFormRequestClearFieldToFocus.emit();
+      this.fieldToFocus = null;
     });
   }
   setFieldsProps() {
@@ -149,8 +229,10 @@ export class EzForm {
     }
   }
   disconnectedCallback() {
+    var _a;
     this.dataUnit.unsubscribe(this.onDataUnitAction);
     this._dataBinder.onDisconnectedCallback();
+    (_a = this._keyboardManager) === null || _a === void 0 ? void 0 : _a.unbindAllShortcutKeys();
   }
   buildIdTabSelector(tabs) {
     if (tabs) {
@@ -269,12 +351,50 @@ export class EzForm {
         "attribute": "only-static-fields",
         "reflect": false,
         "defaultValue": "false"
+      },
+      "useSearchField": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Define se o formulario deve exibir um buscador de coluna com uso do Ctrl+F"
+        },
+        "attribute": "use-search-field",
+        "reflect": false,
+        "defaultValue": "true"
+      },
+      "elementFocusSearchField": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "HTMLElement",
+          "resolved": "HTMLElement",
+          "references": {
+            "HTMLElement": {
+              "location": "global"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Define uma ancoragem"
+        }
       }
     };
   }
   static get states() {
     return {
-      "_fieldsProps": {}
+      "_fieldsProps": {},
+      "_singleColumn": {}
     };
   }
   static get events() {

package/dist/collection/components/ez-form-view/ez-form-view.css

@@ -5,6 +5,10 @@
 
   /*@doc Define o tamanho mínimo dos itens do formulário.*/
   --ez-form-view__item--min-width: 220px;
+
+  /*@doc Define o tamanho máximo dos itens do formulário.*/
+  --ez-form-view__item--max-width: 440px;
+
   /*@doc Define o espaçamento entre itens do formulário.*/
   --ez-form-view__item--width: var(--space--small);
   /*@doc Define o padding do formulário.*/
@@ -19,6 +23,10 @@
   width: 100%;
 }
 
+.form-view__content--single-column {
+  grid-template-columns:repeat(1, minmax(var(--ez-form-view__item--min-width), var(--ez-form-view__item--max-width)));
+}
+
 .input-full_width {
   grid-column: 1 / -1;
   width: 100%;

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

@@ -7,6 +7,7 @@ export class EzFormView {
     this._customEditors = new Map();
     this.fields = undefined;
     this.selectedRecord = undefined;
+    this.singleColumn = true;
   }
   async showUp() {
     this._element.scrollIntoView({ behavior: "smooth", block: "start" });
@@ -82,7 +83,7 @@ export class EzFormView {
     let nonArrayGrup = [];
     let formContent = Array.from(this.groupFields(this.fields).entries()).map(([label, value]) => {
       if (Array.isArray(value)) {
-        return (h("ez-collapsible-box", { id: `group-${label}`, label: label, "header-size": "large", key: label }, h("div", { class: "form-view__content" }, value.map(fi => (this.buildFormItemElement(fi))))));
+        return (h("ez-collapsible-box", { id: `group-${label}`, label: label, "header-size": "large", key: label }, h("div", { class: `form-view__content ${this.singleColumn && "form-view__content--single-column"}` }, value.map(fi => (this.buildFormItemElement(fi))))));
       }
       else {
         nonArrayGrup.push(value);
@@ -90,7 +91,7 @@ export class EzFormView {
     });
     // Filtra os elementos que não são arrays e os coloca dentro de uma única div
     let nonArrayElements = nonArrayGrup.map((value) => this.buildFormItemElement(value));
-    let groupedNonArrayElements = h("div", { class: "form-view__content" }, nonArrayElements);
+    let groupedNonArrayElements = h("div", { class: `form-view__content ${this.singleColumn && "form-view__content--single-column"}` }, nonArrayElements);
     return (h(Host, null, groupedNonArrayElements, formContent));
   }
   static get is() { return "ez-form-view"; }
@@ -149,6 +150,24 @@ export class EzFormView {
           "tags": [],
           "text": "Define os registros da linha selecionada."
         }
+      },
+      "singleColumn": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Define se o formulario deve possuir apenas 1 coluna."
+        },
+        "attribute": "single-column",
+        "reflect": false,
+        "defaultValue": "true"
       }
     };
   }

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

@@ -5,9 +5,10 @@ import { buildComboBox } from "./templates/ComboBox.tpl";
 import { buildDate, buildTime, buildDateTime, buildTimeSeconds } from "./templates/DateInput.tpl";
 import { buildFile } from "./templates/FileInput.tpl";
 import { buildDecimal, buildInteger } from "./templates/NumberInput.tpl";
-import { buildSearch } from "./templates/SearchInput.tpl";
 import { buildTextArea } from "./templates/TextArea.tpl";
 import { buildTextInput } from "./templates/TextInput.tpl";
+import { buildSearchPlus } from "./templates/SearchInputPlus.tpl";
+import { buildSearch } from "./templates/SearchInput.tpl";
 const uiBuilders = new Map();
 uiBuilders.set(UserInterface.CHECKBOX, buildCheckBox);
 uiBuilders.set(UserInterface.SWITCH, buildSwitch);
@@ -20,6 +21,7 @@ uiBuilders.set(UserInterface.FILE, buildFile);
 uiBuilders.set(UserInterface.DECIMALNUMBER, buildDecimal);
 uiBuilders.set(UserInterface.INTEGERNUMBER, buildInteger);
 uiBuilders.set(UserInterface.SEARCH, buildSearch);
+uiBuilders.set(UserInterface.SEARCHPLUS, buildSearchPlus);
 uiBuilders.set(UserInterface.LONGTEXT, buildTextArea);
 export const fieldBuilder = (field) => {
   const builder = uiBuilders.get(field.userInterface) || buildTextInput;