@sankhyalabs/ezui 4.18.2 → 4.19.1

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

@@ -0,0 +1 @@
+import{r as t,c as i,h as s,F as e,H as h}from"./p-bfc7b8ca.js";import{ArrayUtils as l}from"@sankhyalabs/core";var o;!function(t){t.DATASOURCE_RESULTS="DATASOURCE_RESULTS",t.DATASOURCE_RESULTS_EMPTY="DATASOURCE_RESULTS_EMPTY",t.DATASOURCE_INIT="DATASOURCE_INIT",t.OPTIONS_EMPTY="OPTIONS_EMPTY",t.OPTIONS="OPTIONS"}(o||(o={}));const n=class{constructor(s){t(this,s),this.changeFilteredOptions=i(this,"changeFilteredOptions",7),this.columnName=void 0,this.dataSource=void 0,this.useOptions=!1,this.options=void 0,this.filteredOptions=void 0,this.displayOptions=void 0,this.viewScenario=void 0,this.displayOptionToCheckAllItems=!0}async clearFilteredOptions(){this.setInitialScenario(),this.filteredOptions=[],this.searchInput&&(this.searchInput.value=""),this.filterInput&&(this.filterInput.value="")}onChangeUseOptions(){this.setInitialScenario()}onChangeOptions(){this.options&&(this.filteredOptions=this.ordenationByCheckStateAndAlphabetically(this.options)),this.checkInput&&this.changeCheckAllValeuFromFilteredOptions(),this.setInitialScenario()}onChangeFilteredOptions(t){this.displayOptions=this.filteredOptions,this.displayOptionToCheckAllItems=this.filteredOptions.length>1,this.checkInput&&this.changeCheckAllValeuFromFilteredOptions(),this.changeFilteredOptions.emit(t)}componentDidRender(){this.changeCheckAllValeuFromFilteredOptions()}ordenationByCheckStateAndAlphabetically(t){const i=[],s=[];return t.forEach((t=>t.check?i.push(t):s.push(t))),[...l.sortAlphabetically(i),...l.sortAlphabetically(s)]}changeCheckAllValeuFromFilteredOptions(){var t,i,s,e;const h=null===(t=this.filteredOptions)||void 0===t?void 0:t.every((t=>!0===t.check)),l=null===(i=this.filteredOptions)||void 0===i?void 0:i.every((t=>!1===t.check)),o=(null===(s=this.filteredOptions)||void 0===s?void 0:s.some((t=>!1===t.check)))&&(null===(e=this.filteredOptions)||void 0===e?void 0:e.some((t=>!0===t.check)))&&(!h||!l);return this.checkInput&&h?(this.checkInput.indeterminate=!1,void(this.checkInput.value=!0)):this.checkInput&&o?(this.checkInput.indeterminate=!0,void(this.checkInput.value=!1)):this.checkInput&&l?(this.checkInput.indeterminate=!1,void(this.checkInput.value=!1)):void 0}setInitialScenario(){if(this.useOptions)return this.viewScenario=o.OPTIONS,void this.changeCheckAllValeuFromFilteredOptions();this.viewScenario=this.options&&this.options.length>0?o.DATASOURCE_RESULTS:o.DATASOURCE_INIT}async searchWithDataSource(t,i){const{argument:s,mode:e}=t;if("PRELOAD"!==e)return this.dataSource.fetchData(s,i)}handleSearchOnDataSource(t){var i;const s=null!==(i=this.filteredOptions)&&void 0!==i?i:[];t.detail&&!s.some((i=>i.value==t.detail.value))&&(this.filteredOptions=this.ordenationByCheckStateAndAlphabetically([...s,t.detail])),this.viewScenario=o.DATASOURCE_RESULTS}handleRemoveItemFromOptions(t){this.filteredOptions=this.ordenationByCheckStateAndAlphabetically(this.filteredOptions.filter((i=>i.value!==t.value))),0===this.filteredOptions.length&&(this.viewScenario=o.DATASOURCE_INIT),this.searchInput&&(this.searchInput.value="")}handleSearchOnOption(t){if(t.detail)return this.displayOptions=l.applyStringFilter(t.detail,this.filteredOptions,!0),void(this.viewScenario=0===this.displayOptions.length?o.OPTIONS_EMPTY:o.OPTIONS);this.displayOptions=this.filteredOptions,this.viewScenario=o.OPTIONS}handleChangeSelectAllItems(t){this.filteredOptions=this.ordenationByCheckStateAndAlphabetically([...this.filteredOptions.map((i=>(i.check=!!t.detail,i)))])}handleChangeSelectedItem(t){const{detail:i}=t;this.filteredOptions=this.filteredOptions.map((t=>t.label===i.label?Object.assign(Object.assign({},t),{check:i.check}):t)),this.clearInputs()}clearInputs(){this.filterInput?this.filterInput.value="":this.searchInput.value=""}buildViewList(t){return s(e,null,this.displayOptionToCheckAllItems&&s("ez-check",{ref:t=>this.checkInput=t,label:"Selecionar todos",class:"multi-selection__select-all",onEzChange:this.handleChangeSelectAllItems.bind(this)}),s("ez-list",{class:"multi-selection__list",dataSource:this.displayOptions,listMode:"check",hoverFeedback:!0,onEzCheckChange:this.handleChangeSelectedItem.bind(this),itemSlotBuilder:t?this.buildDeleteIconSlot.bind(this):null}))}buildDeleteIconSlot(t){return s("ez-icon",{style:{cursor:"pointer"},iconName:"delete",onClick:()=>this.handleRemoveItemFromOptions(t)})}buildInitViewWithDataSource(){return s("multi-selection-box-message",{message:"Selecione os valores a serem filtrados através do campo de busca."})}buildViewEmptyResults(){return s("multi-selection-box-message",{message:"Nenhum resultado encontrado."})}scenarioToDisplay(t){return{[o.DATASOURCE_INIT]:this.buildInitViewWithDataSource(),[o.DATASOURCE_RESULTS]:this.buildViewList(!0),[o.DATASOURCE_RESULTS_EMPTY]:this.buildViewEmptyResults(),[o.OPTIONS_EMPTY]:this.buildViewEmptyResults(),[o.OPTIONS]:this.buildViewList(!1)}[t]}render(){return s(h,null,s("div",{class:"multi-selection"},this.useOptions?s("ez-filter-input",{ref:t=>this.filterInput=t,label:"Buscar..",onEzChange:this.handleSearchOnOption.bind(this)}):s("ez-search",{class:"multi-selection__input",label:"Buscar...",ref:t=>this.searchInput=t,suppressEmptyOption:!0,showOptionValue:!1,showSelectedValue:!1,optionLoader:t=>this.searchWithDataSource(t,this.columnName),onEzChange:this.handleSearchOnDataSource.bind(this)}),s("ez-scroll",{class:"multi-selection__content-options"},this.scenarioToDisplay(this.viewScenario))))}static get watchers(){return{useOptions:["onChangeUseOptions"],options:["onChangeOptions"],filteredOptions:["onChangeFilteredOptions"]}}};n.style=".sc-ez-multi-selection-list-h{--ez-check--outter-gap:0px;display:block;width:304px;height:322px;max-height:calc(100vh - 350px)}.multi-selection__input.sc-ez-multi-selection-list{margin-bottom:var(--space--2xs, 8px)}.multi-selection__content-options.sc-ez-multi-selection-list{position:relative;top:-12px;left:-4px}.multi-selection__select-all.sc-ez-multi-selection-list{height:var(--space--xl);margin:0 var(--space--small, 6px)}.multi-selection__list.sc-ez-multi-selection-list{height:235px;max-height:calc(100vh - 435px);overflow-y:auto;overflow-x:clip}.multi-selection__list.sc-ez-multi-selection-list::-webkit-scrollbar{width:var(--space--small);min-width:var(--space--small);max-width:var(--space--small)}";export{n as ez_multi_selection_list}

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

@@ -0,0 +1 @@
+import{r as t,c as s,h as e,g as i}from"./p-bfc7b8ca.js";import{ElementIDUtils as h}from"@sankhyalabs/core";import{C as r}from"./p-4a5e37a7.js";const a=class{constructor(e){t(this,e),this.ezChange=s(this,"ezChange",7),this.ezSearching=s(this,"ezSearching",7),this.ezFocusIn=s(this,"ezFocusIn",7),this._searchingText="",this.handleFocus=()=>{this._textInput.value=""===this._searchingText?"":this._searchingText,this.ezFocusIn.emit()},this.label=void 0,this.value=void 0,this.enabled=!0,this.errorMessage=void 0,this.restrict=void 0,this.mode="regular",this.asyncSearch=!1,this.canShowError=!0}observeLabel(){this._textInput&&(this._textInput.label=this.label)}observeErrorMessage(){this._textInput&&(this._textInput.errorMessage=this.errorMessage)}observeValue(t,s){this._textInput&&t!=s&&(this._textInput.value=t,this.ezChange.emit(t))}async setFocus(){this._textInput.setFocus()}async setBlur(){this._textInput.setBlur()}async isInvalid(){return"string"==typeof this.errorMessage&&""!==this.errorMessage.trim()}async setValue(t){this.asyncSearch&&null!=this._textInput&&(t!==this.value?(this.value=t,this._searchingText=""):this._textInput.value=t)}async endSearch(){this.asyncSearch&&null!=this._textInput&&this._textInput.value!==this.value&&(this._textInput.value=this.value)}handleChange(t){const s=t.detail;this.errorMessage="",this.asyncSearch?(this._searchingText=s,this.ezSearching.emit(s)):s!==this.value&&(this.value=s)}componentDidLoad(){r.applyVarsTextInput(this._elem,this._textInput)}render(){return h.addIDInfoIfNotExists(this._elem,"input"),e("ez-text-input",{"data-element-id":h.getInternalIDInfo("textInput"),ref:t=>this._textInput=t,label:this.label,onEzChange:t=>this.handleChange(t),value:this.value,enabled:this.enabled,errorMessage:this.errorMessage,restrict:this.restrict,mode:this.mode,onFocusin:this.handleFocus,canShowError:this.canShowError},e("ez-icon",{slot:"leftIcon",iconName:"search"}))}get _elem(){return i(this)}static get watchers(){return{label:["observeLabel"],errorMessage:["observeErrorMessage"],value:["observeValue"]}}};a.style=":host{display:block;width:100%}";const n=class{constructor(s){t(this,s),this.message=void 0}render(){return e("div",{class:"multi-selection__message"},e("span",{class:"multi-selection__text-message"},this.message))}};n.style=".multi-selection__message{display:flex;flex-direction:row;align-items:center;justify-content:center;width:100%;min-height:320px;text-align:center}.multi-selection__text-message{margin-top:-30px;font-family:var(--font-pattern);font-size:var(--text--meduim);padding:var(--space-xs);color:var(--text--primary)}";export{a as ez_filter_input,n as multi_selection_box_message}

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

@@ -0,0 +1 @@
+import{r as t,c as e,h as o,H as i}from"./p-bfc7b8ca.js";var n;!function(t){t.CLOSE="CLOSE",t.OK="OK",t.CANCEL="CANCEL",t.LOAD="LOAD"}(n||(n={}));const a=n;var s;!function(t){t.ENABLED="ENABLED",t.DISABLED="DISABLED",t.HIDDEN="HIDDEN"}(s||(s={}));const l=s,c=class{constructor(o){t(this,o),this.ezModalAction=e(this,"ezModalAction",7),this.modalTitle=void 0,this.modalSubTitle=void 0,this.showTitleBar=!0,this.cancelButtonLabel=void 0,this.okButtonLabel=void 0,this.cancelButtonStatus=void 0,this.okButtonStatus=void 0}cancelIsVisible(){return this.cancelButtonStatus!==l.HIDDEN&&null!=this.cancelButtonLabel}okIsVisible(){return this.okButtonStatus!==l.HIDDEN&&null!=this.okButtonLabel}componentDidLoad(){window.requestAnimationFrame((()=>{this.ezModalAction.emit(a.LOAD)}))}focusLast(){null!=this._okButton&&this._okButton.setFocus()}focusFirst(){this._closeButton.focus()}render(){return o(i,null,o("button",{class:"ez-modal-container__focus-ctrl",onFocusin:()=>this.focusLast()}),this.showTitleBar&&o("div",{class:"ez-modal-container__header ez-margin-bottom--large ez-align--middle"},o("div",{class:"ez-col ez-align--middle ez-modal-container__title"},o("h2",{class:"ez-text ez-title--large ez-title--primary ez-text--bold ez-margin-vertical--extra-small"},this.modalTitle),this.modalSubTitle?o("div",{class:"ez-text ez-text--medium ez-text--primary ez-margin-vertical--extra-small"},this.modalSubTitle):void 0),o("button",{ref:t=>this._closeButton=t,class:"ez-modal-container__close-button",onClick:()=>this.ezModalAction.emit(a.CLOSE)},o("ez-icon",{class:"ez-modal-container__close-icon",size:"medium",iconName:"close"}))),o("div",{class:"ez-modal-container__content"},o("slot",null)),o("div",{class:"ez-flex ez-flex--justify-end  ez-modal-container__footer"},this.cancelIsVisible()?o("ez-button",{label:this.cancelButtonLabel,enabled:this.cancelButtonStatus!==l.DISABLED,onClick:()=>this.ezModalAction.emit(a.CANCEL)}):void 0,this.okIsVisible()?o("ez-button",{ref:t=>this._okButton=t,label:this.okButtonLabel,enabled:this.okButtonStatus!==l.DISABLED,class:"ez-button--primary ez-margin-left--medium",onClick:()=>this.ezModalAction.emit(a.OK)}):void 0),o("button",{class:"ez-modal-container__focus-ctrl",onFocusin:()=>this.focusFirst()}))}};c.style=".sc-ez-modal-container-h{display:grid;grid-template-rows:0 auto 1fr auto;width:100%;height:100%;--ez-modal-container__content--subtract-height:154px}.ez-modal-container__header.sc-ez-modal-container{display:flex;flex-wrap:nowrap;flex-direction:row;justify-content:space-between}.ez-modal-container__content.sc-ez-modal-container{display:flex;overflow-y:auto;overflow-x:clip;height:calc(100vh - var(--ez-modal-container__content--subtract-height))}.ez-modal-container__title.sc-ez-modal-container{display:grid}.ez-modal-container__close-button.sc-ez-modal-container{cursor:pointer;background-color:transparent;border:none}.ez-modal-container__close-icon.sc-ez-modal-container{--icon--color:var(--title--primary, #2B3A54)}.ez-modal-container__focus-ctrl.sc-ez-modal-container{height:0px;width:0px;background-color:transparent;border:none}.ez-modal-container__footer.sc-ez-modal-container{padding-top:var(--space--small, 6px)}";export{c as ez_modal_container}

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

@@ -1,4 +1,6 @@
-import { DataUnit } from "@sankhyalabs/core";
+import { DataUnit, Filter } from '@sankhyalabs/core';
+import { Components } from '../../../components';
+import FilterCollumn = Components.FilterColumn;
 /**
  * O intuito desta abstração, é isolar o componente EzGrid de uma implementação
  * específica, permitindo que usemos componentes de terceiros sem um acoplamento
@@ -100,6 +102,8 @@ export default interface EzGridController {
    * Método responsável por retornar a configuração da grade.
    */
   getGridConfig(): Array<EzGridColumnConfig>;
+  configFilterColumn(filterColumn: FilterCollumn): any;
+  getFilter(): Array<Filter> | undefined;
 }
 /**
  * Carrega as informações necessárias para contextualizar corretamente a instância.

package/dist/types/components/ez-grid/controller/ag-grid/AgGridController.d.ts

@@ -1,6 +1,7 @@
-import { Sort, SortingProvider } from "@sankhyalabs/core";
-import EzGridController, { EzGridColumn, EzGridColumnConfig, EzGridColumnMenuItemDef, EzGridOptions } from "../EzGridController";
-export default class AgGridController implements EzGridController, SortingProvider {
+import { Sort, SortingProvider } from '@sankhyalabs/core';
+import { Filter, FilterProvider } from '@sankhyalabs/core/dist/dataunit/metadata/UnitMetadata';
+import EzGridController, { EzGridColumn, EzGridColumnConfig, EzGridColumnMenuItemDef, EzGridOptions } from '../EzGridController';
+export default class AgGridController implements EzGridController, SortingProvider, FilterProvider {
   private readonly DEFAULT_ROW_HEIGHT;
   private readonly DEFAULT_HEADER_ROW_HEIGHT;
   private readonly CHECK_BOX_COL_ID;
@@ -25,12 +26,21 @@ export default class AgGridController implements EzGridController, SortingProvid
   private _statusResolver;
   private _selectionChangeDeboucing;
   private _gridConfig;
+  private _filteredColumns;
+  private _filterColumn;
+  private _filterColumnleftPosition;
+  configFilterColumn(filterColumn: HTMLFilterColumnElement): void;
+  private handleFilteredColumnsChanged;
+  private showFilterColumn;
   constructor(enterprise: boolean);
   getGridConfig(): Array<EzGridColumnConfig>;
   getSort(): Array<Sort>;
+  getFilter(): Array<Filter> | undefined;
   initDatagrid(container: HTMLElement, options: EzGridOptions): void;
+  private setFilterColumnLeftPosition;
   private buildMenuItemOptions;
   private buildMenuItemOptionSort;
+  private buildMenuItemFilterColumn;
   private buildMenuItemOptionPin;
   private sortDataByColumn;
   private getRowHeight;
@@ -60,8 +70,7 @@ export default class AgGridController implements EzGridController, SortingProvid
   addColumnMenuItem(item: EzGridColumnMenuItemDef): void;
   quickFilter(term: string): void;
   setSelectedIndex(index: number): void;
-  hasFilterColumn(_columnName: string): boolean;
-  private showColumnFilter;
+  hasFilterColumn(columnName: string): boolean;
   private buildColDef;
   private getInitCellStyle;
   private getStyleByColumn;

package/dist/types/components/ez-grid/controller/ag-grid/AgGridUtils.d.ts

@@ -0,0 +1 @@
+export declare function calcFilterColumnLeftPosition(leftReference: number): number;

package/dist/types/components/ez-grid/controller/ag-grid/components/EzGridCustomHeader.d.ts

@@ -2,7 +2,7 @@ import { IHeaderParams } from 'ag-grid-community';
 export interface IEzGridCustomHeaderParams {
   tooltip?: string;
   hasFilter?: () => boolean;
-  showColumnFilter?: () => void;
+  showColumnFilter?: (leftPosition: string) => void;
 }
 export declare class EzGridCustomHeader {
   private params;
@@ -16,15 +16,17 @@ export declare class EzGridCustomHeader {
   private onMenuClickListener;
   private onSortClickListener;
   private onSortChangedListener;
+  private onFilterAppliedListener;
   init(agParams: IEzGridCustomHeaderParams & IHeaderParams): void;
   refresh(agParams: IEzGridCustomHeaderParams & IHeaderParams): void;
-  configFilterButton(): void;
-  configSortIcon(): void;
-  configSortListener(): void;
-  onSortClick(event: any): void;
-  configSortClick(): void;
+  private configFilterButton;
+  private onClickFilter;
+  private configSortIcon;
+  private configSortListener;
+  private onSortClick;
+  private configSortClick;
   private onMenuClick;
-  configMenuClick(): void;
+  private configMenuClick;
   getGui(): HTMLDivElement;
   destroy(): void;
 }

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

@@ -1,13 +1,18 @@
-import { DataUnit } from "@sankhyalabs/core";
-import { EventEmitter } from "../../stencil-public-runtime";
-import { EzGridColumn, EzGridColumnConfig, EzGridColumStateEvent, IGridConfig, IStatusResolver, StatusResolverFunction } from "./controller/EzGridController";
-import { ISelection } from "./interfaces/ISelection";
+import { DataUnit } from '@sankhyalabs/core';
+import { EventEmitter } from '../../stencil-public-runtime';
+import { IMultiSelectionListDataSource } from '../ez-multi-selection-list/interfaces/IMultiSelectionListDataSource';
+import { EzGridColumStateEvent, EzGridColumn, EzGridColumnConfig, IGridConfig, IStatusResolver, StatusResolverFunction } from './controller/EzGridController';
+import { ISelection } from './interfaces/ISelection';
 export declare class EzGrid {
   private _container;
   private _refPaginationControl;
   private _gridController;
   private _gridSelectionCounter;
   private _resizeObserver;
+  private toastElementRef;
+  private timeFadeOutInMs;
+  private toastMessageToUpdateFilterColumn;
+  private _filterColumn;
   _element: HTMLElement;
   private _paginationInfo;
   private _paginationChangedByKeyboard;
@@ -56,6 +61,10 @@ export declare class EzGrid {
    * Define um `IStatusResolver` responsável pelo estado da coluna de status.
    */
   statusResolver: IStatusResolver | StatusResolverFunction;
+  /**
+   * Define um `IMultiSelectionListDataSource` responsável por alimentar o filtro de colunas.
+   */
+  columnfilterDataSource: IMultiSelectionListDataSource;
   /**
    * Aplica a definição de colunas.
    */
@@ -106,5 +115,6 @@ export declare class EzGrid {
   private getPaginationControl;
   componentDidLoad(): void;
   componentWillRender(): void;
+  componentDidRender(): void;
   render(): any;
 }

package/dist/types/components/ez-grid/subcomponents/filter-column.d.ts

@@ -0,0 +1,45 @@
+import { DataUnit, FieldDescriptor } from '@sankhyalabs/core';
+import { EventEmitter } from '../../../stencil-public-runtime';
+import { IMultiSelectionListDataSource } from '../../ez-multi-selection-list/interfaces/IMultiSelectionListDataSource';
+import { IMultiSelectionOption } from '../../ez-multi-selection-list/interfaces/IMultiSelectionOption';
+export declare class FilterColumn {
+  private readonly TOP_POSITION;
+  private ezPopoverElement;
+  private ezMultiSelectionList;
+  applyFilterColumnOptions: EventEmitter<IAppliedFilterColumnOptions>;
+  opened: boolean;
+  columnName: string;
+  columnLabel: string;
+  dataSource: IMultiSelectionListDataSource;
+  dataUnit: DataUnit;
+  options: IMultiSelectionOption[];
+  selectedItems: IMultiSelectionOption[];
+  fieldDescriptor: FieldDescriptor;
+  useOptions: boolean;
+  hide(): Promise<void>;
+  /**
+   * Abre o filtro de coluna.
+   * @Params IFilterColumnConfigs informações para configurar o filtro
+   */
+  show(configs: IFilterColumnConfigs): Promise<void>;
+  private clearConfigs;
+  private canShow;
+  private submit;
+  private changeSelectedItems;
+  private hasToUseOptions;
+  private isCheckBoxOrSwitch;
+  private setOptions;
+  private buildOptions;
+  private handleEzVisibilityChange;
+  render(): any;
+}
+export interface IFilterColumnConfigs {
+  columnName: string;
+  columnLabel: string;
+  leftPosition: string;
+  filteredOptions?: IMultiSelectionOption[];
+}
+export interface IAppliedFilterColumnOptions {
+  field: string;
+  values: IMultiSelectionOption[];
+}

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

@@ -1,4 +1,4 @@
-import { EventEmitter } from "../../stencil-public-runtime";
+import { EventEmitter } from '../../stencil-public-runtime';
 export interface ListItem {
   label: string;
   selected?: boolean;
@@ -35,8 +35,8 @@ export declare class EzList {
    */
   dataSource: Array<ListGroup | ListItem>;
   /**
-  * Define o modo de apresentação da lista.
-  */
+   * Define o modo de apresentação da lista.
+   */
   listMode?: keyof TListMode;
   /**
    * Se true os grupos serão exibidos.
@@ -68,8 +68,8 @@ export declare class EzList {
    */
   ezSelectItem: EventEmitter<ListItem>;
   /**
-  * Emitido quando acontece a alteração de um item do checkbox.
-  */
+   * Emitido quando acontece a alteração de um item do checkbox.
+   */
   ezCheckChange?: EventEmitter<ListItem>;
   /**
    * Limpa o histórico da lista.

package/dist/types/components/ez-multi-selection-list/ez-multi-selection-list.d.ts

@@ -0,0 +1,64 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+import { IMultiSelectionListDataSource } from './interfaces/IMultiSelectionListDataSource';
+import { IMultiSelectionOption } from './interfaces/IMultiSelectionOption';
+export declare class EzMuiltiSelectionList {
+  private filterInput;
+  private searchInput;
+  private checkInput;
+  /**
+   * Evento que informa que a lista de opções selecionadas sofreu alteração.
+   */
+  changeFilteredOptions: EventEmitter<IMultiSelectionOption[]>;
+  /**
+   * Nome da coluna onde serão aplicadas as opções selecionadas.
+   */
+  columnName: string;
+  /**
+   * Classe que implementa o método fetchData, responsável por realizar a pesquisa dos dados,
+   * com base no termo informado pelo usuário.
+   */
+  dataSource: IMultiSelectionListDataSource;
+  /**
+   * Indica se deve ser exibida lista de opções do atributo options (true),
+   * ou se deve utilizar o datasource (false)
+   */
+  useOptions: boolean;
+  /**
+   * Opções de filtros a serem exibidas na listagem.
+   */
+  options: IMultiSelectionOption[];
+  /**
+   * Guarda o estado das opções de filtragem (check = true ou false).
+   * @private
+   */
+  private filteredOptions;
+  /**
+   * Lista de opções que devem ser exibidas na listagem.
+   * Sofre alteração quando há filtragem.
+   * @private
+   */
+  private displayOptions;
+  private viewScenario;
+  private displayOptionToCheckAllItems;
+  clearFilteredOptions(): Promise<void>;
+  onChangeUseOptions(): void;
+  onChangeOptions(): void;
+  onChangeFilteredOptions(optionsListUpdated: IMultiSelectionOption[]): void;
+  componentDidRender(): void;
+  private ordenationByCheckStateAndAlphabetically;
+  private changeCheckAllValeuFromFilteredOptions;
+  private setInitialScenario;
+  private searchWithDataSource;
+  private handleSearchOnDataSource;
+  private handleRemoveItemFromOptions;
+  private handleSearchOnOption;
+  private handleChangeSelectAllItems;
+  private handleChangeSelectedItem;
+  private clearInputs;
+  private buildViewList;
+  private buildDeleteIconSlot;
+  private buildInitViewWithDataSource;
+  private buildViewEmptyResults;
+  private scenarioToDisplay;
+  render(): any;
+}

package/dist/types/components/ez-multi-selection-list/interfaces/IMultiSelectionListDataSource.d.ts

@@ -0,0 +1,4 @@
+import { IMultiSelectionOption } from './IMultiSelectionOption';
+export interface IMultiSelectionListDataSource {
+  fetchData: (filterTerm: string, fieldName: string) => Promise<IMultiSelectionOption[]>;
+}

package/dist/types/components/ez-multi-selection-list/interfaces/IMultiSelectionOption.d.ts

@@ -0,0 +1,4 @@
+import { IOption } from '../../ez-combo-box/ez-combo-box';
+export interface IMultiSelectionOption extends IOption {
+  check: boolean;
+}

package/dist/types/components/ez-multi-selection-list/subcomponents/multi-selection-box-message.d.ts

@@ -0,0 +1,4 @@
+export declare class MultiSelectionBoxMessage {
+  message: string;
+  render(): any;
+}

package/dist/types/components.d.ts

@@ -17,10 +17,12 @@ import { IDropdownItem, IDropdownSubAction } from "./components/ez-dropdown/stru
 import { IFormConfig, IRecordValidator } from "./utils/form/interfaces";
 import { IFormViewField } from "./components/ez-form-view/interfaces/IFormViewField";
 import { EzGridColumn, EzGridColumnConfig, EzGridColumStateEvent, IGridConfig, IStatusResolver, StatusResolverFunction } from "./components/ez-grid/controller/EzGridController";
+import { IMultiSelectionListDataSource } from "./components/ez-multi-selection-list/interfaces/IMultiSelectionListDataSource";
 import { ISelection } from "./components/ez-grid/interfaces/ISelection";
 import { IGuideItem } from "./components/ez-guide-navigator/interfaces";
 import { ListGroup, ListItem, TListMode } from "./components/ez-list/ez-list";
 import { THeightMode } from "./components/ez-modal/ez-modal";
+import { IMultiSelectionOption } from "./components/ez-multi-selection-list/interfaces/IMultiSelectionOption";
 import { Radio } from "./components/ez-radio-button/ez-radio-button";
 import { EzScrollDirection } from "./components/ez-scroller/EzScrollDirection";
 import { IOption as IOption1, ISearchArgument as ISearchArgument1 } from "./components/ez-combo-box/ez-combo-box";
@@ -29,6 +31,7 @@ import { IStyled } from "./components/ez-text-edit/ez-text-edit";
 import { ITreeItem } from "./components/ez-tree/interfaces/ITreeItem";
 import { Node } from "./components/ez-tree/types/Node";
 import { EzFile } from "./components/ez-upload/ez-upload";
+import { IAppliedFilterColumnOptions, IFilterColumnConfigs } from "./components/ez-grid/subcomponents/filter-column";
 export namespace Components {
     interface EzActionsButton {
         /**
@@ -616,6 +619,10 @@ export namespace Components {
           * Adiciona item de menu nas colunas.
          */
         "addColumnMenuItem": (label: string, name: string, action: Function, icon: HTMLElement | string) => Promise<void>;
+        /**
+          * Define um `IMultiSelectionListDataSource` responsável por alimentar o filtro de colunas.
+         */
+        "columnfilterDataSource": IMultiSelectionListDataSource;
         /**
           * Configuração de exibição da grade.
          */
@@ -847,6 +854,25 @@ export namespace Components {
          */
         "showTitleBar": boolean;
     }
+    interface EzMultiSelectionList {
+        "clearFilteredOptions": () => Promise<void>;
+        /**
+          * Nome da coluna onde serão aplicadas as opções selecionadas.
+         */
+        "columnName": string;
+        /**
+          * Classe que implementa o método fetchData, responsável por realizar a pesquisa dos dados, com base no termo informado pelo usuário.
+         */
+        "dataSource": IMultiSelectionListDataSource;
+        /**
+          * Opções de filtros a serem exibidas na listagem.
+         */
+        "options": IMultiSelectionOption[];
+        /**
+          * Indica se deve ser exibida lista de opções do atributo options (true), ou se deve utilizar o datasource (false)
+         */
+        "useOptions": boolean;
+    }
     interface EzNumberInput {
         /**
           * Se false deixa de exibir a mensagem de erro dentro do campo.
@@ -1405,6 +1431,23 @@ export namespace Components {
          */
         "show": (index: number) => Promise<void>;
     }
+    interface FilterColumn {
+        "columnLabel": string;
+        "columnName": string;
+        "dataSource": IMultiSelectionListDataSource;
+        "dataUnit": DataUnit;
+        "hide": () => Promise<void>;
+        "opened": boolean;
+        "options": IMultiSelectionOption[];
+        /**
+          * Abre o filtro de coluna.
+          * @Params IFilterColumnConfigs informações para configurar o filtro
+         */
+        "show": (configs: IFilterColumnConfigs) => Promise<void>;
+    }
+    interface MultiSelectionBoxMessage {
+        "message": string;
+    }
 }
 export interface EzActionsButtonCustomEvent<T> extends CustomEvent<T> {
     detail: T;
@@ -1494,6 +1537,10 @@ export interface EzModalContainerCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLEzModalContainerElement;
 }
+export interface EzMultiSelectionListCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLEzMultiSelectionListElement;
+}
 export interface EzNumberInputCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLEzNumberInputElement;
@@ -1546,6 +1593,10 @@ export interface EzUploadCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLEzUploadElement;
 }
+export interface FilterColumnCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLFilterColumnElement;
+}
 declare global {
     interface HTMLEzActionsButtonElement extends Components.EzActionsButton, HTMLStencilElement {
     }
@@ -1709,6 +1760,12 @@ declare global {
         prototype: HTMLEzModalContainerElement;
         new (): HTMLEzModalContainerElement;
     };
+    interface HTMLEzMultiSelectionListElement extends Components.EzMultiSelectionList, HTMLStencilElement {
+    }
+    var HTMLEzMultiSelectionListElement: {
+        prototype: HTMLEzMultiSelectionListElement;
+        new (): HTMLEzMultiSelectionListElement;
+    };
     interface HTMLEzNumberInputElement extends Components.EzNumberInput, HTMLStencilElement {
     }
     var HTMLEzNumberInputElement: {
@@ -1811,6 +1868,18 @@ declare global {
         prototype: HTMLEzViewStackElement;
         new (): HTMLEzViewStackElement;
     };
+    interface HTMLFilterColumnElement extends Components.FilterColumn, HTMLStencilElement {
+    }
+    var HTMLFilterColumnElement: {
+        prototype: HTMLFilterColumnElement;
+        new (): HTMLFilterColumnElement;
+    };
+    interface HTMLMultiSelectionBoxMessageElement extends Components.MultiSelectionBoxMessage, HTMLStencilElement {
+    }
+    var HTMLMultiSelectionBoxMessageElement: {
+        prototype: HTMLMultiSelectionBoxMessageElement;
+        new (): HTMLMultiSelectionBoxMessageElement;
+    };
     interface HTMLElementTagNameMap {
         "ez-actions-button": HTMLEzActionsButtonElement;
         "ez-alert": HTMLEzAlertElement;
@@ -1839,6 +1908,7 @@ declare global {
         "ez-loading-bar": HTMLEzLoadingBarElement;
         "ez-modal": HTMLEzModalElement;
         "ez-modal-container": HTMLEzModalContainerElement;
+        "ez-multi-selection-list": HTMLEzMultiSelectionListElement;
         "ez-number-input": HTMLEzNumberInputElement;
         "ez-popover": HTMLEzPopoverElement;
         "ez-popup": HTMLEzPopupElement;
@@ -1856,6 +1926,8 @@ declare global {
         "ez-tree": HTMLEzTreeElement;
         "ez-upload": HTMLEzUploadElement;
         "ez-view-stack": HTMLEzViewStackElement;
+        "filter-column": HTMLFilterColumnElement;
+        "multi-selection-box-message": HTMLMultiSelectionBoxMessageElement;
     }
 }
 declare namespace LocalJSX {
@@ -2440,6 +2512,10 @@ declare namespace LocalJSX {
         "onEzContentReady"?: (event: EzFormViewCustomEvent<Array<HTMLElement>>) => void;
     }
     interface EzGrid {
+        /**
+          * Define um `IMultiSelectionListDataSource` responsável por alimentar o filtro de colunas.
+         */
+        "columnfilterDataSource"?: IMultiSelectionListDataSource;
         /**
           * Configuração de exibição da grade.
          */
@@ -2545,7 +2621,7 @@ declare namespace LocalJSX {
         /**
           * Emitido quando acontece a alteração de estado da lista.
          */
-        "onEzChange"?: (event: EzListCustomEvent<Array<ListItem|ListGroup>>) => void;
+        "onEzChange"?: (event: EzListCustomEvent<Array<ListItem | ListGroup>>) => void;
         /**
           * Emitido quando acontece a alteração de um item do checkbox.
          */
@@ -2633,6 +2709,28 @@ declare namespace LocalJSX {
          */
         "showTitleBar"?: boolean;
     }
+    interface EzMultiSelectionList {
+        /**
+          * Nome da coluna onde serão aplicadas as opções selecionadas.
+         */
+        "columnName"?: string;
+        /**
+          * Classe que implementa o método fetchData, responsável por realizar a pesquisa dos dados, com base no termo informado pelo usuário.
+         */
+        "dataSource"?: IMultiSelectionListDataSource;
+        /**
+          * Evento que informa que a lista de opções selecionadas sofreu alteração.
+         */
+        "onChangeFilteredOptions"?: (event: EzMultiSelectionListCustomEvent<IMultiSelectionOption[]>) => void;
+        /**
+          * Opções de filtros a serem exibidas na listagem.
+         */
+        "options"?: IMultiSelectionOption[];
+        /**
+          * Indica se deve ser exibida lista de opções do atributo options (true), ou se deve utilizar o datasource (false)
+         */
+        "useOptions"?: boolean;
+    }
     interface EzNumberInput {
         /**
           * Se false deixa de exibir a mensagem de erro dentro do campo.
@@ -3130,6 +3228,18 @@ declare namespace LocalJSX {
     }
     interface EzViewStack {
     }
+    interface FilterColumn {
+        "columnLabel"?: string;
+        "columnName"?: string;
+        "dataSource"?: IMultiSelectionListDataSource;
+        "dataUnit"?: DataUnit;
+        "onApplyFilterColumnOptions"?: (event: FilterColumnCustomEvent<IAppliedFilterColumnOptions>) => void;
+        "opened"?: boolean;
+        "options"?: IMultiSelectionOption[];
+    }
+    interface MultiSelectionBoxMessage {
+        "message"?: string;
+    }
     interface IntrinsicElements {
         "ez-actions-button": EzActionsButton;
         "ez-alert": EzAlert;
@@ -3158,6 +3268,7 @@ declare namespace LocalJSX {
         "ez-loading-bar": EzLoadingBar;
         "ez-modal": EzModal;
         "ez-modal-container": EzModalContainer;
+        "ez-multi-selection-list": EzMultiSelectionList;
         "ez-number-input": EzNumberInput;
         "ez-popover": EzPopover;
         "ez-popup": EzPopup;
@@ -3175,6 +3286,8 @@ declare namespace LocalJSX {
         "ez-tree": EzTree;
         "ez-upload": EzUpload;
         "ez-view-stack": EzViewStack;
+        "filter-column": FilterColumn;
+        "multi-selection-box-message": MultiSelectionBoxMessage;
     }
 }
 export { LocalJSX as JSX };
@@ -3208,6 +3321,7 @@ declare module "@stencil/core" {
             "ez-loading-bar": LocalJSX.EzLoadingBar & JSXBase.HTMLAttributes<HTMLEzLoadingBarElement>;
             "ez-modal": LocalJSX.EzModal & JSXBase.HTMLAttributes<HTMLEzModalElement>;
             "ez-modal-container": LocalJSX.EzModalContainer & JSXBase.HTMLAttributes<HTMLEzModalContainerElement>;
+            "ez-multi-selection-list": LocalJSX.EzMultiSelectionList & JSXBase.HTMLAttributes<HTMLEzMultiSelectionListElement>;
             "ez-number-input": LocalJSX.EzNumberInput & JSXBase.HTMLAttributes<HTMLEzNumberInputElement>;
             "ez-popover": LocalJSX.EzPopover & JSXBase.HTMLAttributes<HTMLEzPopoverElement>;
             "ez-popup": LocalJSX.EzPopup & JSXBase.HTMLAttributes<HTMLEzPopupElement>;
@@ -3225,6 +3339,8 @@ declare module "@stencil/core" {
             "ez-tree": LocalJSX.EzTree & JSXBase.HTMLAttributes<HTMLEzTreeElement>;
             "ez-upload": LocalJSX.EzUpload & JSXBase.HTMLAttributes<HTMLEzUploadElement>;
             "ez-view-stack": LocalJSX.EzViewStack & JSXBase.HTMLAttributes<HTMLEzViewStackElement>;
+            "filter-column": LocalJSX.FilterColumn & JSXBase.HTMLAttributes<HTMLFilterColumnElement>;
+            "multi-selection-box-message": LocalJSX.MultiSelectionBoxMessage & JSXBase.HTMLAttributes<HTMLMultiSelectionBoxMessageElement>;
         }
     }
 }

package/dist/types/utils/constants.d.ts

@@ -1,2 +1,3 @@
 export declare const REQUIRED_INFO = " (obrigat\u00F3rio) *";
 export declare const ALL_RECORD = "ALL_RECORD";
+export declare const DISTINCT_FILTER_NAME_PREFIX = "FILTRO_COLUNA_";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sankhyalabs/ezui",
-  "version": "4.18.2",
+  "version": "4.19.1",
   "description": "Biblioteca de componentes Sankhya.",
   "main": "dist/index.cjs.js",
   "module": "dist/custom-elements/index.js",