@sankhyalabs/ezui 5.22.0-dev.140 → 5.22.0-dev.142

package/dist/ezui/p-e4528470.entry.js

@@ -0,0 +1 @@
+import{r as t,c as e,h as i,H as s}from"./p-23a36bb6.js";import{ObjectUtils as o}from"@sankhyalabs/core";import{i as n}from"./p-80dfc50b.js";function h(t,e,i){if(!t.length)return[...e];if(!e.length)return[];const s=function(t,e){return t.map((t=>e.findIndex((e=>e.id===t))))}(t,e),o=0===(n=s).length?0:n.reduce(((t,e)=>e<t?e:t),n[0]);var n;const h=function(t){return 0===t.length?0:t.reduce(((t,e)=>e>t?e:t),t[0])}(s);return function(t,e,i,s){return t<0||e>=s.length||t>e?s:i?function(t,e,i){if(t===i.length-1)return i;const s=i.slice(0,e),o=i.slice(e,t+1),n=i.slice(t+1),h=n.shift();return h?[...s,h,...o,...n]:i}(e,t,s):function(t,e,i){if(0===t)return i;const s=i.slice(0,t-1),o=i.slice(t,e+1),n=i.slice(e+1);return[...s,...o,i[t-1],...n]}(t,e,s)}(o,h,i,e)}function l({from:t,to:e,selectedFrom:i,selectedTo:s}){return e=[...e.map((t=>a(t,!1))),...t.map((t=>a(t,!0)))],i=[],s=[...t.map((({id:t})=>t))],{from:t=[],to:e,selectedFrom:i,selectedTo:s}}function r({from:t,to:e,selectedFrom:i,selectedTo:s,insertIndex:o=e.length}){if(!t.length)return{from:t,to:e,selectedFrom:i,selectedTo:s};const n=function(t,e,i){const s=t.map((t=>t.id)),o=e.filter((t=>!s.includes(t)));return i.filter((({id:t})=>o.includes(t)))}(e,i,t);if(!n.length)return{from:t,to:e,selectedFrom:i,selectedTo:s};let h=e.map((t=>a(t,!1)));return h.splice(o,0,...n.map((t=>a(t,!0)))),{from:t.filter((t=>!i.includes(t.id))),to:h,selectedFrom:[],selectedTo:[...i]}}function a(t,e){return Object.assign(Object.assign({},t),{selected:e})}const d=class{constructor(i){t(this,i),this.ezLeftListChanged=e(this,"ezLeftListChanged",7),this.ezRightListChanged=e(this,"ezRightListChanged",7),this.LEFT_LIST_ID="LEFT-LIST-ID",this.RIGHT_LIST_ID="RIGHT-LIST-ID",this.leftList=[],this.leftTitle=void 0,this.rightList=[],this.entityLabel="item",this.entityLabelPlural="itens",this.leftListLabel="disponíveis",this.rightListLabel="selecionados",this.useOnlyRightList=!1,this.rightTitle=void 0,this.emptyMessage=void 0,this.slotsListBuilder=void 0,this.leftFilteredList=[],this.rightFilteredList=[],this.selectedLeftList=[],this.selectedRightList=[],this.isFilteringLeft=!1,this.isFilteringRight=!1}async resetSelectedLists(){this.selectedLeftList=[],this.selectedRightList=[]}observeLeftList(t,e){o.equals(t,e)||this.ezLeftListChanged.emit(t)}observeRightList(t,e){o.equals(t,e)||this.ezRightListChanged.emit(t)}async handleChangeLeft({detail:t}){t.to.getAttribute("id")&&t.to.getAttribute("id")===this.RIGHT_LIST_ID?(t.selectItens=t.selectItens.filter((t=>this.rightList.every((e=>e.id!==t)))),this.leftList=[...t.dataSource],this.selectedLeftList=[...t.selectItens],this.transferToRight(null==t?void 0:t.newIndex)):this.leftList=[...this.reorderArray(t.dataSource,t.selectItens,t.newIndex)]}async handleChangeRight({detail:t}){t.to.getAttribute("id")&&t.to.getAttribute("id")===this.LEFT_LIST_ID?(t.selectItens=t.selectItens.filter((t=>this.leftList.every((e=>e.id!==t)))),this.rightList=[...t.dataSource],this.selectedRightList=[...t.selectItens],this.transferToLeft(null==t?void 0:t.newIndex)):this.rightList=[...this.reorderArray(t.dataSource,t.selectItens,t.newIndex)]}reorderArray(t,e,i){const s=t.filter((t=>!e.includes(t.id))),o=t.filter((t=>e.includes(t.id)));return s.splice(i,0,...o),s}enableTransferAllToRight(){return this.leftList.length>0}enableTransferAllToLeft(){return this.rightList.length>0}enableTransferToRight(){return this.selectedLeftList.length>0}enableTransferToLeft(){return this.selectedRightList.length>0}enableMoveUp(t){if(this.isFilteringRight)return!1;const e=this.getRightSelectedItemsIndex();return this.selectedRightList.length>0&&!e.includes(0)&&(!!t||n(e))}enableMoveDown(t){if(this.isFilteringRight)return!1;const e=this.getRightSelectedItemsIndex();return this.selectedRightList.length>0&&!e.includes(this.rightList.length-1)&&(!!t||n(e))}getRightSelectedItemsIndex(){return this.selectedRightList.map((t=>this.rightList.findIndex((e=>e.id===t))))}transferToRight(t){const{from:e,to:i,selectedFrom:s,selectedTo:o}=r(Object.assign(Object.assign({},this.buildTransferToRightConfig()),{insertIndex:null!=t?t:0}));this.leftList=[],requestAnimationFrame((()=>this.leftList=[...e])),this.rightList=[...i],this.selectedLeftList=[...s],this.selectedRightList=[...o]}transferToLeft(t){const{from:e,to:i,selectedFrom:s,selectedTo:o}=r(Object.assign(Object.assign({},this.buildTransferToLeftConfig()),{insertIndex:null!=t?t:0}));this.rightList=[],requestAnimationFrame((()=>this.rightList=[...e])),this.leftList=[...i],this.selectedRightList=[...s],this.selectedLeftList=[...o]}async handleTransferAllToRight(){const{from:t,to:e,selectedFrom:i,selectedTo:s}=l(this.buildTransferToRightConfig());this.leftList=[...t],this.rightList=[...e],this.selectedLeftList=[...i],this.selectedRightList=[...s],requestAnimationFrame((async()=>{await this.clearSelectionAll()}))}async handleTransferAllToLeft(){const{from:t,to:e,selectedFrom:i,selectedTo:s}=l(this.buildTransferToLeftConfig());this.rightList=[...t],this.leftList=[...e],this.selectedRightList=[...i],this.selectedLeftList=[...s],requestAnimationFrame((async()=>{await this.clearSelectionAll()}))}buildTransferToRightConfig(){return{from:this.leftList,to:this.rightList,selectedFrom:this.selectedLeftList,selectedTo:this.selectedRightList}}buildTransferToLeftConfig(){return{from:this.rightList,to:this.leftList,selectedFrom:this.selectedRightList,selectedTo:this.selectedLeftList}}handleMoveUp(){this.rightList=[...h(this.selectedRightList,this.rightList,!1)]}handleMoveDown(){this.rightList=[...h(this.selectedRightList,this.rightList,!0)]}handleMoveToTop(){const{itemsToKeep:t,itemsToMove:e}=this.getItemsToKeepAndToMove();this.rightList=[...e,...t]}handleMoveToBottom(){const{itemsToKeep:t,itemsToMove:e}=this.getItemsToKeepAndToMove();this.rightList=[...t,...e]}handleSelectLeftItem({detail:t}){this.selectedLeftList=[...t.map((({id:t})=>t))]}handleSelectRightItem({detail:t}){this.selectedRightList=[...t.map((({id:t})=>t))]}getItemsToKeepAndToMove(){return{itemsToKeep:this.rightList.filter((t=>!this.selectedRightList.includes(t.id))),itemsToMove:this.rightList.filter((t=>this.selectedRightList.includes(t.id)))}}async handleTransferToRight(){this.transferToRight(),this.leftFilteredList=[],await this.leftEzListInstance.clearSelection()}async handleTransferToLeft(){this.transferToLeft(),this.rightFilteredList=[],await this.rightEzListInstance.clearSelection()}async clearSelectionAll(){await this.rightEzListInstance.clearSelection(),await this.leftEzListInstance.clearSelection()}handleChooseLeft(){requestAnimationFrame((async()=>{await this.rightEzListInstance.clearSelection()}))}handleChooseRight(){this.useOnlyRightList||requestAnimationFrame((async()=>{await this.leftEzListInstance.clearSelection()}))}renderList(t){const{idSortableList:e,list:s,isFiltering:o,filteredList:n,emptyMessage:h,slotConfig:l,callbacks:r,title:a}=t;return i("ez-sortable-list",{ref:null==r?void 0:r.setRef,title:a,idSortableList:e,emptyMessage:h,class:"ez-size-height--full",dataSource:o?n:s,hoverFeedback:!0,enableMultipleSelection:!0,removeItensMoved:!0,entityLabel:this.entityLabel,entityLabelPlural:this.entityLabelPlural,itemRightSlotBuilder:null==l?void 0:l.itemRightSlotBuilder,itemLeftSlotBuilder:null==l?void 0:l.itemLeftSlotBuilder,onItemsReordered:null==r?void 0:r.onChange.bind(this),onEzSelectItens:null==r?void 0:r.onSelect.bind(this),onEzDoubleClick:null==r?void 0:r.onDoubleClick.bind(this),onEzChoose:null==r?void 0:r.onChoose.bind(this)})}render(){var t,e,o,n,h,l,r,a,d,c;return i(s,null,!this.useOnlyRightList&&i("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:(null===(t=this.emptyMessage)||void 0===t?void 0:t.LEFT_LIST)?this.emptyMessage.LEFT_LIST:`Nenhum ${this.entityLabel} disponível`,slotConfig:{itemRightSlotBuilder:null===(o=null===(e=this.slotsListBuilder)||void 0===e?void 0:e.LEFT_LIST)||void 0===o?void 0:o.itemRightSlotBuilder,itemLeftSlotBuilder:null===(h=null===(n=this.slotsListBuilder)||void 0===n?void 0:n.LEFT_LIST)||void 0===h?void 0:h.itemLeftSlotBuilder},callbacks:{setRef:t=>this.leftEzListInstance=t,onChange:t=>this.handleChangeLeft(t),onSelect:this.handleSelectLeftItem.bind(this),onDoubleClick:this.handleTransferToRight.bind(this),onChoose:this.handleChooseLeft.bind(this)}})),!this.useOnlyRightList&&i("div",{class:"actions__column"},i("ez-button",{mode:"icon",iconName:"dual-chevron-right",enabled:this.enableTransferAllToRight(),title:`Mover todos para ${this.rightListLabel}`,size:"small",onClick:this.handleTransferAllToRight.bind(this)}),i("ez-button",{mode:"icon",iconName:"chevron-right",enabled:this.enableTransferToRight(),title:`Mover para ${this.rightListLabel}`,size:"small",onClick:this.handleTransferToRight.bind(this)}),i("ez-button",{mode:"icon",iconName:"chevron-left",enabled:this.enableTransferToLeft(),title:`Mover para ${this.leftListLabel}`,size:"small",onClick:this.handleTransferToLeft.bind(this)}),i("ez-button",{mode:"icon",iconName:"dual-chevron-left",enabled:this.enableTransferAllToLeft(),title:`Mover todos para ${this.leftListLabel}`,size:"small",onClick:this.handleTransferAllToLeft.bind(this)})),i("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:(null===(l=this.emptyMessage)||void 0===l?void 0:l.RIGHT_LIST)?this.emptyMessage.RIGHT_LIST:`Nenhum ${this.entityLabel} selecionado`,slotConfig:{itemRightSlotBuilder:null===(a=null===(r=this.slotsListBuilder)||void 0===r?void 0:r.RIGHT_LIST)||void 0===a?void 0:a.itemRightSlotBuilder,itemLeftSlotBuilder:null===(c=null===(d=this.slotsListBuilder)||void 0===d?void 0:d.RIGHT_LIST)||void 0===c?void 0:c.itemLeftSlotBuilder},callbacks:{setRef:t=>this.rightEzListInstance=t,onChange:t=>this.handleChangeRight(t),onSelect:this.handleSelectRightItem.bind(this),onDoubleClick:this.handleTransferToLeft.bind(this),onChoose:this.handleChooseRight.bind(this)}})),i("div",{class:"actions__column"},i("ez-button",{mode:"icon",iconName:"dual-chevron-up",enabled:this.enableMoveUp(!0),title:"Mover para primeira posição",size:"small",onClick:this.handleMoveToTop.bind(this)}),i("ez-button",{mode:"icon",iconName:"chevron-up",enabled:this.enableMoveUp(),title:"Mover para cima",size:"small",onClick:this.handleMoveUp.bind(this)}),i("ez-button",{mode:"icon",iconName:"chevron-down",enabled:this.enableMoveDown(),title:"Mover para baixo",size:"small",onClick:this.handleMoveDown.bind(this)}),i("ez-button",{mode:"icon",iconName:"dual-chevron-down",enabled:this.enableMoveDown(!0),title:"Mover para última posição",size:"small",onClick:this.handleMoveToBottom.bind(this)})))}static get watchers(){return{leftList:["observeLeftList"],rightList:["observeRightList"]}}};d.style='.sc-ez-double-list-h{display:flex;flex-direction:row;gap:8px;align-items:center;font-family:var(--font-pattern, "Roboto");width:100%}@media screen and (max-width: 1366px){.group.sc-ez-double-list{height:350px}}.list__container.sc-ez-double-list{height:100%;width:100%;min-height:150px;overflow:auto;display:flex}.actions__column.sc-ez-double-list{display:flex;flex-direction:column;gap:4px}';export{d as ez_double_list}

package/dist/types/components/ez-double-list/doubleListHelper.d.ts

@@ -1,7 +1,9 @@
-import { ListItem } from '../ez-list/ez-list';
+import { ListItem } from "../ez-sortable-list/ez-sortable-list";
 export declare function moveItems(selectedItemsList: string[], itemsList: ListItem[], foward: boolean): ListItem[];
 export declare function transferAll({ from, to, selectedFrom, selectedTo }: TransferConfig): TransferConfig;
-export declare function transferItems({ from, to, selectedFrom, selectedTo }: TransferConfig): TransferConfig;
+export declare function transferItems({ from, to, selectedFrom, selectedTo, insertIndex, }: TransferConfig & {
+  insertIndex?: number;
+}): TransferConfig;
 export interface TransferConfig {
   from: ListItem[];
   to: ListItem[];

package/dist/types/components/ez-double-list/ez-double-list.d.ts

@@ -1,10 +1,20 @@
 import { EventEmitter } from '../../stencil-public-runtime';
-import { ListItem } from '../ez-list/ez-list';
+import { ListItem } from '../ez-sortable-list/ez-sortable-list';
+export interface DoubleListSlotConfig {
+  itemLeftSlotBuilder?: (item: any) => HTMLElement | string;
+  itemRightSlotBuilder?: (item: any) => HTMLElement | string;
+}
+export interface DoubleListSlots {
+  LEFT_LIST?: DoubleListSlotConfig;
+  RIGHT_LIST?: DoubleListSlotConfig;
+}
+export interface EmptyMessage {
+  LEFT_LIST?: string;
+  RIGHT_LIST?: string;
+}
 export declare class EzDoubleList {
   readonly LEFT_LIST_ID = "LEFT-LIST-ID";
   readonly RIGHT_LIST_ID = "RIGHT-LIST-ID";
-  readonly LEFT_FILTER_ID = "LEFT-FILTER-ID";
-  readonly RIGHT_FILTER_ID = "RIGHT-FILTER-ID";
   /**
    * Define a lista origem.
    */
@@ -23,7 +33,7 @@ export declare class EzDoubleList {
    */
   entityLabel: string;
   /**
-   * Variação plura do nome da entidade listada.
+   * Variação plural do nome da entidade listada.
    * Exemplo: "Campos", "Itens", "Empresas".
    */
   entityLabelPlural: string;
@@ -35,29 +45,51 @@ export declare class EzDoubleList {
    * Rótulo da lista direita.
    */
   rightListLabel: string;
+  /**
+   * Define se irá exibir apenas a lista da direita.
+   */
+  useOnlyRightList: boolean;
   /**
    * Define o título da lista destino.
    */
   rightTitle: string;
+  /** Objeto que define as mensagens a serem exibidas quando a lista está vazia
+   * Exemplo:
+   * {
+   *  LEFT_LIST?: "Lista lado esquerdo vazia.",
+   *  RIGHT_LIST?: "Lista lado direito vazia.";
+   * }
+   */
+  emptyMessage: EmptyMessage;
+  /**
+   * Objeto que define os métodos de construção dos elementos visuais para os itens de cada lista.
+   *
+   * Este objeto permite configurar dinamicamente os elementos HTML que serão exibidos ao lado
+   * esquerdo e direito dos itens em ambas as listas (`LEFT_LIST` e `RIGHT_LIST`).
+   */
+  slotsListBuilder: DoubleListSlots;
   leftFilteredList: ListItem[];
   rightFilteredList: ListItem[];
   selectedLeftList: string[];
   selectedRightList: string[];
   isFilteringLeft: boolean;
   isFilteringRight: boolean;
+  /**
+   * Emitido ao realizar uma alteração na lista esquerda do componente.
+   */
   ezLeftListChanged: EventEmitter<Array<ListItem>>;
+  /**
+   * Emitido ao realizar uma alteração na lista direita do componente.
+   */
   ezRightListChanged: EventEmitter<Array<ListItem>>;
   resetSelectedLists(): Promise<void>;
   observeLeftList(newValue: any, oldValue: any): void;
   observeRightList(newValue: any, oldValue: any): void;
   private leftEzListInstance;
   private rightEzListInstance;
-  private leftEzFilterInput;
-  private rightEzFilterInput;
-  private handleFilterChangeLeft;
-  private handleFilterChangeRight;
-  private handleChangeLeft;
-  private handleChangeRight;
+  handleChangeLeft({ detail }: CustomEvent): Promise<void>;
+  handleChangeRight({ detail }: CustomEvent): Promise<void>;
+  private reorderArray;
   private enableTransferAllToRight;
   private enableTransferAllToLeft;
   private enableTransferToRight;
@@ -67,21 +99,25 @@ export declare class EzDoubleList {
   private getRightSelectedItemsIndex;
   private transferToRight;
   private transferToLeft;
-  private handleTransferAllToRight;
-  private handleTransferAllToLeft;
+  handleTransferAllToRight(): Promise<void>;
+  handleTransferAllToLeft(): Promise<void>;
   private buildTransferToRightConfig;
   private buildTransferToLeftConfig;
-  private handleMoveUp;
-  private handleMoveDown;
-  private handleMoveToTop;
-  private handleMoveToBottom;
-  private handleSelectLeftItem;
-  private handleSelectRightItem;
-  private getItemsToKeepAndToMove;
-  private handleTransferToRight;
-  private handleTransferToLeft;
-  private buildTotalizer;
-  private renderLeftList;
-  private renderRightList;
+  handleMoveUp(): void;
+  handleMoveDown(): void;
+  handleMoveToTop(): void;
+  handleMoveToBottom(): void;
+  handleSelectLeftItem({ detail }: CustomEvent): void;
+  handleSelectRightItem({ detail }: CustomEvent): void;
+  getItemsToKeepAndToMove(): {
+    itemsToKeep: ListItem[];
+    itemsToMove: ListItem[];
+  };
+  handleTransferToRight(): Promise<void>;
+  handleTransferToLeft(): Promise<void>;
+  clearSelectionAll(): Promise<void>;
+  handleChooseLeft(): void;
+  handleChooseRight(): void;
+  private renderList;
   render(): any;
 }

package/dist/types/components/ez-grid/ez-grid.d.ts

@@ -3,7 +3,7 @@ import { EventEmitter } from '../../stencil-public-runtime';
 import { IRecordValidator } from '../../utils/form/interfaces';
 import { IMultiSelectionListDataSource } from '../ez-multi-selection-list/interfaces/IMultiSelectionListDataSource';
 import { EzGridColumStateEvent, EzGridColumn, EzGridColumnConfig, IGridConfig, IStatusResolver, StatusResolverFunction } from './controller/EzGridController';
-import { ICustomFormatter, ISelection, ISelectionToastConfig } from './interfaces';
+import { ICustomFormatter, IGridMode, ISelection, ISelectionToastConfig } from './interfaces';
 import { ICustomEditor } from '../../utils/customEditor/interfaces/ICustomEditor';
 import { ICustomRender } from '../../utils/customRender/interfaces/ICustomRender';
 export declare class EzGrid {
@@ -144,6 +144,10 @@ export declare class EzGrid {
    * Define se a grade deve suprimir o scroll horizontal.
    */
   suppressHorizontalScroll: boolean;
+  /**
+   * Define o modo de uso da grade
+   */
+  mode: IGridMode;
   /**
    * Aplica a definição de colunas.
    */
@@ -220,6 +224,7 @@ export declare class EzGrid {
   observeConfig(config: IGridConfig): void;
   updatePaginationTooltip(): void;
   observePaginationCounterMode(newValue: any): void;
+  observeModeChange(newMode?: IGridMode): Promise<void>;
   onSelectionChange(evt: CustomEvent): void;
   handleClick(event: MouseEvent): Promise<void>;
   private setSelection;

package/dist/types/components/ez-grid/interfaces/IGridMode.d.ts

@@ -0,0 +1 @@
+export type IGridMode = "simple" | "complete";

package/dist/types/components/ez-grid/interfaces/index.d.ts

@@ -2,3 +2,4 @@ export * from './ISelection';
 export * from './ISelectionToastConfig';
 export * from './IColumnFilter';
 export * from './ICustomFormatter';
+export * from './IGridMode';

package/dist/types/components/ez-sortable-list/ez-sortable-list.d.ts

@@ -0,0 +1,91 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+import Sortable from 'sortablejs';
+import { SlotBuilder } from '../ez-list/ez-list';
+export interface ListItem {
+  label: string;
+  id: string;
+  selected?: boolean;
+  sort?: string;
+}
+export declare class EzSortableList {
+  el: HTMLElement;
+  _sortableInstance: Sortable;
+  filterTerm: string;
+  /**
+   * Define o título da lista.
+   */
+  title: string;
+  /**
+   * Define se o cabeçalho deve ficar oculto.
+   */
+  hideHeader: boolean;
+  /**
+   * Define se o totalizador deve ser escondido.
+   */
+  hideTotalizer: boolean;
+  /** Grupo ao qual o ez-sortable-list pertence */
+  group: string;
+  /** Lista de itens para serem renderizados */
+  dataSource: Array<ListItem>;
+  /** ID do sortable list */
+  idSortableList: string;
+  /**
+   * Nome da entidade listada.
+   * Exemplo: "Campo", "Item", "Empresa".
+   */
+  entityLabel: string;
+  /**
+   * Variação plural do nome da entidade listada.
+   * Exemplo: "Campos", "Itens", "Empresas".
+   */
+  entityLabelPlural: string;
+  /** Mensagem exibida quando a lista está vazia */
+  emptyMessage: string;
+  /** Quando verdadeiro, ativa o feedback visual ao efetuar hover nos itens da lista */
+  hoverFeedback: boolean;
+  /** Habilita seleção de múltiplos itens utilizando as teclas 'Ctrl/Command' ou 'Shift' */
+  enableMultipleSelection: boolean;
+  /** Remove itens arrastados de uma lista para outra */
+  removeItensMoved: boolean;
+  /**
+   * Função builder que possibilita alterar como o item da lista vai ser apresentado.
+   * Observação: No react ele se transforma em VNode e não como HTMLElement.
+   */
+  itemRightSlotBuilder: SlotBuilder;
+  /**
+   * Função builder que possibilita gerar conteúdo dinâmico à esquerda do item da lista.
+   * * Observação: No react ele se transforma em VNode e não como HTMLElement.
+   */
+  itemLeftSlotBuilder: SlotBuilder;
+  /** Evento emitido quando a ordem dos itens muda */
+  itemsReordered: EventEmitter<any>;
+  /** Emitido sempre que um ou vários itens da lista forem selecionados */
+  ezSelectItens: EventEmitter<ListItem[] | ListItem>;
+  /** Emitido quando ocorre um duplo clique em um item da lista */
+  ezDoubleClick?: EventEmitter<ListItem>;
+  /** Emitido quando ocorre a escolha de um item da lista */
+  ezChoose?: EventEmitter<ListItem[] | ListItem>;
+  /** Remove a seleção de todos os itens da lista */
+  clearSelection(): Promise<void>;
+  selectedItems: Set<string>;
+  componentDidLoad(): void;
+  componentDidRender(): void;
+  private initSortable;
+  private selectPredefinedItens;
+  private handleSortItem;
+  private removeDuplicateElements;
+  private handleSelect;
+  private handleDeselect;
+  private updateSelection;
+  private emitSelectedItems;
+  private handleReorderEvent;
+  private handleDoubleClick;
+  getContainerItemBuilder(slotPosition: 'left' | 'right', item: ListItem, className?: string): HTMLElement;
+  disconnectedCallback(): void;
+  private buildTotalizer;
+  private renderItems;
+  private handleFilterChanged;
+  private renderTotalizer;
+  private renderHeader;
+  render(): any;
+}

package/dist/types/components.d.ts

@@ -7,7 +7,7 @@
 import { HTMLStencilElement, JSXBase } from "./stencil-public-runtime";
 import { IAction } from "./utils";
 import { AlertItem } from "./components/ez-alert-list/ez-alert-list";
-import { ListItem, SlotBuilder } from "./components/ez-list/ez-list";
+import { SlotBuilder } from "./components/ez-list/ez-list";
 import { IPosition } from "./components/ez-badge/interfaces/IPosition";
 import { IBreadcrumbItem } from "./components/ez-breadcrumb/ez-breadcrumb";
 import { CardItem } from "./components/ez-card-item/ez-card-item";
@@ -21,12 +21,14 @@ import { ICustomEditor } from "./utils/customEditor/interfaces/ICustomEditor";
 import { IFormViewField } from "./components/ez-form-view/interfaces";
 import { DataUnit, Record, WaitingChange } from "@sankhyalabs/core";
 import { DialogType } from "./components/ez-dialog/DialogType";
+import { ListItem } from "./components/ez-sortable-list/ez-sortable-list";
+import { DoubleListSlots, EmptyMessage } from "./components/ez-double-list/ez-double-list";
 import { IDropdownItem, IDropdownSubAction } from "./components/ez-dropdown/structure/DropdownItem";
 import { IFieldConfig, IFormConfig, IRecordValidator } from "./utils/form/interfaces";
 import { FormItems } from "./components/ez-form-view/structure";
 import { IFormViewField as IFormViewField1 } from "./components/ez-form-view/interfaces/IFormViewField";
 import { EzGridColumn, EzGridColumnConfig, EzGridColumStateEvent, IGridConfig, IStatusResolver, StatusResolverFunction } from "./components/ez-grid/controller/EzGridController";
-import { ICustomFormatter, ISelection, ISelectionToastConfig } from "./components/ez-grid/interfaces";
+import { ICustomFormatter, IGridMode, ISelection, ISelectionToastConfig } from "./components/ez-grid/interfaces";
 import { IMultiSelectionListDataSource } from "./components/ez-multi-selection-list/interfaces/IMultiSelectionListDataSource";
 import { ICustomRender } from "./utils/customRender/interfaces/ICustomRender";
 import { IGuideItem } from "./components/ez-guide-navigator/interfaces";
@@ -43,6 +45,7 @@ import { IOption as IOption3, OptionLoaderFunction } from "./components/ez-searc
 import { IOption as IOption4 } from "./components/ez-search-plus/ez-search-plus";
 import { ModeMenuEnum, SizeMenuEnum, TypeMenuEnum } from "./components/ez-sidebar-navigator/interfaces";
 import { SkeletonAnimation, SkeletonVariant } from "./components/ez-skeleton/ez-skeleton.constants";
+import { ListItem as ListItem2 } from "./components/ez-sortable-list/ez-sortable-list";
 import { Tab } from "./components/ez-tabselector/ez-tabselector";
 import { IStyled } from "./components/ez-text-edit/ez-text-edit";
 import { TFocusOptions as TFocusOptions1 } from "./components/ez-text-input/ez-text-input";
@@ -777,12 +780,16 @@ export namespace Components {
         "show": (title: string, message: string, dialogType: DialogType, confirm: boolean, icon: string, labelCancel: string, labelConfirm: string, btnConfirmDanger: boolean, beforeClose: Function) => Promise<boolean>;
     }
     interface EzDoubleList {
+        /**
+          * Objeto que define as mensagens a serem exibidas quando a lista está vazia Exemplo: { LEFT_LIST?: "Lista lado esquerdo vazia.", RIGHT_LIST?: "Lista lado direito vazia."; }
+         */
+        "emptyMessage": EmptyMessage;
         /**
           * Nome da entidade listada. Exemplo: "Campo", "Item", "Empresa".
          */
         "entityLabel": string;
         /**
-          * Variação plura do nome da entidade listada. Exemplo: "Campos", "Itens", "Empresas".
+          * Variação plural do nome da entidade listada. Exemplo: "Campos", "Itens", "Empresas".
          */
         "entityLabelPlural": string;
         /**
@@ -810,6 +817,14 @@ export namespace Components {
           * Define o título da lista destino.
          */
         "rightTitle": string;
+        /**
+          * Objeto que define os métodos de construção dos elementos visuais para os itens de cada lista.  Este objeto permite configurar dinamicamente os elementos HTML que serão exibidos ao lado esquerdo e direito dos itens em ambas as listas (`LEFT_LIST` e `RIGHT_LIST`).
+         */
+        "slotsListBuilder": DoubleListSlots;
+        /**
+          * Define se irá exibir apenas a lista da direita.
+         */
+        "useOnlyRightList": boolean;
     }
     interface EzDropdown {
         /**
@@ -1056,6 +1071,10 @@ export namespace Components {
           * Localiza determinada coluna tornando-a visível.
          */
         "locateColumn": (columnName: string) => Promise<void>;
+        /**
+          * Define o modo de uso da grade
+         */
+        "mode": IGridMode;
         /**
           * Habilita a seleção de várias linhas.
          */
@@ -1980,6 +1999,68 @@ export namespace Components {
          */
         "width": string;
     }
+    interface EzSortableList {
+        /**
+          * Remove a seleção de todos os itens da lista
+         */
+        "clearSelection": () => Promise<void>;
+        /**
+          * Lista de itens para serem renderizados
+         */
+        "dataSource": Array<ListItem>;
+        /**
+          * Mensagem exibida quando a lista está vazia
+         */
+        "emptyMessage": string;
+        /**
+          * Habilita seleção de múltiplos itens utilizando as teclas 'Ctrl/Command' ou 'Shift'
+         */
+        "enableMultipleSelection": boolean;
+        /**
+          * Nome da entidade listada. Exemplo: "Campo", "Item", "Empresa".
+         */
+        "entityLabel": string;
+        /**
+          * Variação plural do nome da entidade listada. Exemplo: "Campos", "Itens", "Empresas".
+         */
+        "entityLabelPlural": string;
+        /**
+          * Grupo ao qual o ez-sortable-list pertence
+         */
+        "group": string;
+        /**
+          * Define se o cabeçalho deve ficar oculto.
+         */
+        "hideHeader": boolean;
+        /**
+          * Define se o totalizador deve ser escondido.
+         */
+        "hideTotalizer": boolean;
+        /**
+          * Quando verdadeiro, ativa o feedback visual ao efetuar hover nos itens da lista
+         */
+        "hoverFeedback": boolean;
+        /**
+          * ID do sortable list
+         */
+        "idSortableList": string;
+        /**
+          * Função builder que possibilita gerar conteúdo dinâmico à esquerda do item da lista. * Observação: No react ele se transforma em VNode e não como HTMLElement.
+         */
+        "itemLeftSlotBuilder": SlotBuilder;
+        /**
+          * Função builder que possibilita alterar como o item da lista vai ser apresentado. Observação: No react ele se transforma em VNode e não como HTMLElement.
+         */
+        "itemRightSlotBuilder": SlotBuilder;
+        /**
+          * Remove itens arrastados de uma lista para outra
+         */
+        "removeItensMoved": boolean;
+        /**
+          * Define o título da lista.
+         */
+        "title": string;
+    }
     interface EzSplitButton {
         /**
           * Se false o usuário não pode interagir com o botão.
@@ -2644,6 +2725,10 @@ export interface EzSidebarNavigatorCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLEzSidebarNavigatorElement;
 }
+export interface EzSortableListCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLEzSortableListElement;
+}
 export interface EzSplitButtonCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLEzSplitButtonElement;
@@ -2971,6 +3056,12 @@ declare global {
         prototype: HTMLEzSkeletonElement;
         new (): HTMLEzSkeletonElement;
     };
+    interface HTMLEzSortableListElement extends Components.EzSortableList, HTMLStencilElement {
+    }
+    var HTMLEzSortableListElement: {
+        prototype: HTMLEzSortableListElement;
+        new (): HTMLEzSortableListElement;
+    };
     interface HTMLEzSplitButtonElement extends Components.EzSplitButton, HTMLStencilElement {
     }
     var HTMLEzSplitButtonElement: {
@@ -3115,6 +3206,7 @@ declare global {
         "ez-sidebar-button": HTMLEzSidebarButtonElement;
         "ez-sidebar-navigator": HTMLEzSidebarNavigatorElement;
         "ez-skeleton": HTMLEzSkeletonElement;
+        "ez-sortable-list": HTMLEzSortableListElement;
         "ez-split-button": HTMLEzSplitButtonElement;
         "ez-split-item": HTMLEzSplitItemElement;
         "ez-split-panel": HTMLEzSplitPanelElement;
@@ -3823,12 +3915,16 @@ declare namespace LocalJSX {
         "personalizedIconPath"?: string;
     }
     interface EzDoubleList {
+        /**
+          * Objeto que define as mensagens a serem exibidas quando a lista está vazia Exemplo: { LEFT_LIST?: "Lista lado esquerdo vazia.", RIGHT_LIST?: "Lista lado direito vazia."; }
+         */
+        "emptyMessage"?: EmptyMessage;
         /**
           * Nome da entidade listada. Exemplo: "Campo", "Item", "Empresa".
          */
         "entityLabel"?: string;
         /**
-          * Variação plura do nome da entidade listada. Exemplo: "Campos", "Itens", "Empresas".
+          * Variação plural do nome da entidade listada. Exemplo: "Campos", "Itens", "Empresas".
          */
         "entityLabelPlural"?: string;
         /**
@@ -3843,7 +3939,13 @@ declare namespace LocalJSX {
           * Define o título da lista origem.
          */
         "leftTitle"?: string;
+        /**
+          * Emitido ao realizar uma alteração na lista esquerda do componente.
+         */
         "onEzLeftListChanged"?: (event: EzDoubleListCustomEvent<Array<ListItem>>) => void;
+        /**
+          * Emitido ao realizar uma alteração na lista direita do componente.
+         */
         "onEzRightListChanged"?: (event: EzDoubleListCustomEvent<Array<ListItem>>) => void;
         /**
           * Define a lista destino.
@@ -3857,6 +3959,14 @@ declare namespace LocalJSX {
           * Define o título da lista destino.
          */
         "rightTitle"?: string;
+        /**
+          * Objeto que define os métodos de construção dos elementos visuais para os itens de cada lista.  Este objeto permite configurar dinamicamente os elementos HTML que serão exibidos ao lado esquerdo e direito dos itens em ambas as listas (`LEFT_LIST` e `RIGHT_LIST`).
+         */
+        "slotsListBuilder"?: DoubleListSlots;
+        /**
+          * Define se irá exibir apenas a lista da direita.
+         */
+        "useOnlyRightList"?: boolean;
     }
     interface EzDropdown {
         /**
@@ -4081,6 +4191,10 @@ declare namespace LocalJSX {
           * Ativa modo de linhas com cores alternadas.
          */
         "enableRowTableStriped"?: boolean;
+        /**
+          * Define o modo de uso da grade
+         */
+        "mode"?: IGridMode;
         /**
           * Habilita a seleção de várias linhas.
          */
@@ -4893,6 +5007,80 @@ declare namespace LocalJSX {
          */
         "width"?: string;
     }
+    interface EzSortableList {
+        /**
+          * Lista de itens para serem renderizados
+         */
+        "dataSource"?: Array<ListItem>;
+        /**
+          * Mensagem exibida quando a lista está vazia
+         */
+        "emptyMessage"?: string;
+        /**
+          * Habilita seleção de múltiplos itens utilizando as teclas 'Ctrl/Command' ou 'Shift'
+         */
+        "enableMultipleSelection"?: boolean;
+        /**
+          * Nome da entidade listada. Exemplo: "Campo", "Item", "Empresa".
+         */
+        "entityLabel"?: string;
+        /**
+          * Variação plural do nome da entidade listada. Exemplo: "Campos", "Itens", "Empresas".
+         */
+        "entityLabelPlural"?: string;
+        /**
+          * Grupo ao qual o ez-sortable-list pertence
+         */
+        "group"?: string;
+        /**
+          * Define se o cabeçalho deve ficar oculto.
+         */
+        "hideHeader"?: boolean;
+        /**
+          * Define se o totalizador deve ser escondido.
+         */
+        "hideTotalizer"?: boolean;
+        /**
+          * Quando verdadeiro, ativa o feedback visual ao efetuar hover nos itens da lista
+         */
+        "hoverFeedback"?: boolean;
+        /**
+          * ID do sortable list
+         */
+        "idSortableList"?: string;
+        /**
+          * Função builder que possibilita gerar conteúdo dinâmico à esquerda do item da lista. * Observação: No react ele se transforma em VNode e não como HTMLElement.
+         */
+        "itemLeftSlotBuilder"?: SlotBuilder;
+        /**
+          * Função builder que possibilita alterar como o item da lista vai ser apresentado. Observação: No react ele se transforma em VNode e não como HTMLElement.
+         */
+        "itemRightSlotBuilder"?: SlotBuilder;
+        /**
+          * Emitido quando ocorre a escolha de um item da lista
+         */
+        "onEzChoose"?: (event: EzSortableListCustomEvent<ListItem[] | ListItem>) => void;
+        /**
+          * Emitido quando ocorre um duplo clique em um item da lista
+         */
+        "onEzDoubleClick"?: (event: EzSortableListCustomEvent<ListItem>) => void;
+        /**
+          * Emitido sempre que um ou vários itens da lista forem selecionados
+         */
+        "onEzSelectItens"?: (event: EzSortableListCustomEvent<ListItem[] | ListItem>) => void;
+        /**
+          * Evento emitido quando a ordem dos itens muda
+         */
+        "onItemsReordered"?: (event: EzSortableListCustomEvent<any>) => void;
+        /**
+          * Remove itens arrastados de uma lista para outra
+         */
+        "removeItensMoved"?: boolean;
+        /**
+          * Define o título da lista.
+         */
+        "title"?: string;
+    }
     interface EzSplitButton {
         /**
           * Se false o usuário não pode interagir com o botão.
@@ -5392,6 +5580,7 @@ declare namespace LocalJSX {
         "ez-sidebar-button": EzSidebarButton;
         "ez-sidebar-navigator": EzSidebarNavigator;
         "ez-skeleton": EzSkeleton;
+        "ez-sortable-list": EzSortableList;
         "ez-split-button": EzSplitButton;
         "ez-split-item": EzSplitItem;
         "ez-split-panel": EzSplitPanel;
@@ -5461,6 +5650,7 @@ declare module "@stencil/core" {
             "ez-sidebar-button": LocalJSX.EzSidebarButton & JSXBase.HTMLAttributes<HTMLEzSidebarButtonElement>;
             "ez-sidebar-navigator": LocalJSX.EzSidebarNavigator & JSXBase.HTMLAttributes<HTMLEzSidebarNavigatorElement>;
             "ez-skeleton": LocalJSX.EzSkeleton & JSXBase.HTMLAttributes<HTMLEzSkeletonElement>;
+            "ez-sortable-list": LocalJSX.EzSortableList & JSXBase.HTMLAttributes<HTMLEzSortableListElement>;
             "ez-split-button": LocalJSX.EzSplitButton & JSXBase.HTMLAttributes<HTMLEzSplitButtonElement>;
             "ez-split-item": LocalJSX.EzSplitItem & JSXBase.HTMLAttributes<HTMLEzSplitItemElement>;
             "ez-split-panel": LocalJSX.EzSplitPanel & JSXBase.HTMLAttributes<HTMLEzSplitPanelElement>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sankhyalabs/ezui",
-  "version": "5.22.0-dev.140",
+  "version": "5.22.0-dev.142",
   "description": "Biblioteca de componentes Sankhya.",
   "main": "dist/index.cjs.js",
   "module": "dist/custom-elements/index.js",
@@ -24,6 +24,7 @@
     "start": "stencil build --dev --watch --serve --force-peer-deps",
     "test": "stencil test --spec --e2e --logHeapUsage --runInBand --coverage --silent --testResultsProcessor jest-sonar-reporter",
     "test.watch": "stencil test --spec --e2e --watchAll",
+    "test.dev": "stencil test --spec --e2e",
     "generate": "stencil generate",
     "storybook": "npm run start.storybook",
     "build.watch": "stencil build --dev --watch --force-peer-deps",
@@ -108,5 +109,8 @@
   },
   "resolutions": {
     "postcss": "8.1.7"
+  },
+  "dependencies": {
+    "sortablejs": "^1.15.6"
   }
 }

package/react/components.d.ts

@@ -46,6 +46,7 @@ export declare const EzSearchResultList: import("react").ForwardRefExoticCompone
 export declare const EzSidebarButton: import("react").ForwardRefExoticComponent<JSX.EzSidebarButton & Omit<import("react").HTMLAttributes<HTMLEzSidebarButtonElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLEzSidebarButtonElement>>;
 export declare const EzSidebarNavigator: import("react").ForwardRefExoticComponent<JSX.EzSidebarNavigator & Omit<import("react").HTMLAttributes<HTMLEzSidebarNavigatorElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLEzSidebarNavigatorElement>>;
 export declare const EzSkeleton: import("react").ForwardRefExoticComponent<JSX.EzSkeleton & Omit<import("react").HTMLAttributes<HTMLEzSkeletonElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLEzSkeletonElement>>;
+export declare const EzSortableList: import("react").ForwardRefExoticComponent<JSX.EzSortableList & Omit<import("react").HTMLAttributes<HTMLEzSortableListElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLEzSortableListElement>>;
 export declare const EzSplitButton: import("react").ForwardRefExoticComponent<JSX.EzSplitButton & Omit<import("react").HTMLAttributes<HTMLEzSplitButtonElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLEzSplitButtonElement>>;
 export declare const EzSplitItem: import("react").ForwardRefExoticComponent<JSX.EzSplitItem & Omit<import("react").HTMLAttributes<HTMLEzSplitItemElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLEzSplitItemElement>>;
 export declare const EzSplitPanel: import("react").ForwardRefExoticComponent<JSX.EzSplitPanel & Omit<import("react").HTMLAttributes<HTMLEzSplitPanelElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLEzSplitPanelElement>>;