@sankhyalabs/ezui 4.18.2 → 4.19.1

package/dist/custom-elements/index.js

@@ -1,6 +1,6 @@
 import { HTMLElement as HTMLElement$1, createEvent, h, Host, forceUpdate, Fragment, proxyCustomElement } from '@stencil/core/internal/client';
 export { setAssetPath, setPlatformOptions } from '@stencil/core/internal/client';
-import { UserInterface, DateUtils as DateUtils$1, Action, WaitingChangeException, ApplicationContext, DataUnitAction, FloatingManager, ElementIDUtils, ObjectUtils as ObjectUtils$1, JSUtils, StringUtils as StringUtils$1, TimeFormatter, DataUnit, NumberUtils as NumberUtils$1, DataType, SortMode, MaskFormatter } from '@sankhyalabs/core';
+import { UserInterface, DateUtils as DateUtils$1, Action, WaitingChangeException, ApplicationContext, DataUnitAction, FloatingManager, ElementIDUtils, ObjectUtils as ObjectUtils$1, JSUtils, StringUtils as StringUtils$1, TimeFormatter, DataUnit, NumberUtils as NumberUtils$1, DataType, SortMode, ArrayUtils as ArrayUtils$1, MaskFormatter } from '@sankhyalabs/core';
 import { SelectionMode } from '@sankhyalabs/core/dist/dataunit/DataUnit';
 
 // Unique ID creation requires a high quality random # generator. In the browser we therefore
@@ -1742,7 +1742,7 @@ const EzCardItem$1 = class extends HTMLElement$1 {
   static get style() { return ezCardItemCss; }
 };
 
-const ezCheckCss = ":host{--ez-check--box--width:20px;--ez-check--box--height:20px;--ez-check--width:calc(var(--ez-check--box--width) + var(--ez-check--outter-gap, 14px));--ez-check--height:calc(var(--ez-check--box--width) + var(--ez-check--outter-gap, 14px));--ez-check--border-radius:var(--border--radius-small);--ez-check--checked--background-color:var(--color--primary-200);--ez-check--focus--background-color:var(--color--strokes, #FFFFFF);--ez-check--hover--background-color:var(--background--medium);--ez-check--checked--disabled--background-color:var(--color--disable-secondary);--ez-check--border:var(--border--medium) var(--title--primary);--ez-check--disabled--border:var(--border--medium) var(--color--strokes);--ez-check--checked--border:var(--border--medium) var(--color--primary);--ez-check--checked--hover--background-color:var(--color--primary-200);--ez-check--checked--focus--background-color:var(--color--primary-300, #FFFFFF);--ez-check--check--image:url('data:image/svg+xml;utf8,<svg width=\"8\" height=\"7\" viewBox=\"0 0 8 7\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M7.70002 0.398999L7.48502 0.207997C7.31524 0.0598858 7.09376 -0.0150438 6.86894 -0.000430025C6.64411 0.0141838 6.43419 0.117153 6.28502 0.285997L2.70002 4.332L1.61802 3.384C1.44837 3.23576 1.22697 3.16067 1.00214 3.17509C0.77732 3.18952 0.567332 3.2923 0.418019 3.461L0.229019 3.674C0.0752361 3.84797 -0.00437434 4.07521 0.00721192 4.30713C0.0187982 4.53904 0.120661 4.75722 0.291019 4.915L2.27402 6.762C2.35832 6.8432 2.45842 6.90618 2.56811 6.94702C2.67779 6.98787 2.79471 7.00571 2.91159 6.99942C3.02846 6.99314 3.14279 6.96287 3.24747 6.91049C3.35214 6.85812 3.44492 6.78477 3.52002 6.695L7.79102 1.638C7.94063 1.46048 8.01486 1.23149 7.99786 0.999963C7.98085 0.768436 7.87396 0.552749 7.70002 0.398999Z\"/></svg>');--ez-check--indeterminate--image:url('data:image/svg+xml;utf8,<svg width=\"10\" height=\"2\" viewBox=\"0 0 10 2\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"m 1,0 h 8 c 0.554,0 1,0.446 1,1 0,0.554 -0.446,1 -1,1 H 1 C 0.446,2 0,1.554 0,1 0,0.446 0.446,0 1,0 Z\" /></svg>');--ez-check--check--background-color:var(--color--primary);--ez-check--check--disabled--background-color:var(--color--strokes);--ez-switch--slider--width:34px;--ez-switch--slider--height:14px;--ez-switch--pin--width:19px;--ez-switch--pin--height:19px;--ez-switch--focus--width:32px;--ez-switch--focus--height:32px;--ez-switch--background-color:var(--color--strokes);--ez-switch--disabled--background-color:var(--color--disable-secondary);--ez-switch--disabled--checked--background-color:var(--color--primary-300);--ez-switch--checked--background-color:var(--color--primary);--ez-switch--pin--background-color:var(--background--xlight);--ez-switch--pin--disabled--background-color:var(--color--disable-primary);--ez-switch--pin--checked--background-color:var(--background--xlight);--ez-switch--pin--checked--disabled--background-color:#E8F7F4;--ez-switch--pin--focus--background-color:var(--text--disable);--ez-switch--pin--checked--focus--background-color:var(--color--primary);--ez-switch--pin--border-color:var(--text--primary);--ez-switch--pin--disabled--border-color:var(--text--secondary);--ez-check--label--font-size:var(--text--medium, 14px);--ez-check--label--font-family:var(--font-pattern, Arial);--ez-check--label--color:var(--title--primary, #000);--ez-check--label--disabled--color:var(--text--disable, #AFB6C0);display:flex;width:100%;align-items:center;margin:0}input.regular-mode{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;box-sizing:border-box;-webkit-appearance:none;appearance:none;cursor:pointer;border-radius:50%;position:relative;width:var(--ez-check--width);height:var(--ez-check--height)}input.compact{margin-right:0px}input.regular-mode:enabled:hover{background-color:var(--ez-check--hover--background-color)}input.regular-mode:enabled:focus{outline:none;background-color:var(--ez-check--focus--background-color)}input.regular-mode:disabled{cursor:auto;background:none}input.regular-mode::before{box-sizing:border-box;content:\"\";display:block;width:var(--ez-check--box--width);height:var(--ez-check--box--height);border-radius:var(--ez-check--border-radius);border:var(--ez-check--border)}input.regular-mode:disabled::before{border:var(--ez-check--disabled--border)}input.regular-mode:checked:enabled:hover,input.regular-mode:indeterminate:enabled:hover{background-color:var(--ez-check--checked--hover--background-color)}input.regular-mode:checked:enabled:focus,input.regular-mode:indeterminate:enabled:focus{background-color:var(--ez-check--checked--focus--background-color)}input.regular-mode:checked::before,input.regular-mode:indeterminate::before{border:var(--ez-check--checked--border);background-color:var(--ez-check--checked--background-color)}input.regular-mode:disabled:before{border:var(--ez-check--disabled--border);background-color:var(--ez-check--checked--disabled--background-color)}input.regular-mode:checked::after,input.regular-mode:indeterminate:after{display:flex;position:absolute;content:\"\";background-color:var(--ez-check--check--background-color);width:8px;height:7px;-webkit-mask-image:var(--ez-check--check--image);mask-image:var(--ez-check--check--image)}input.regular-mode:indeterminate:after{display:flex;position:absolute;content:\"\";background-color:var(--ez-check--check--background-color);width:10px;height:2px;-webkit-mask-image:var(--ez-check--indeterminate--image);mask-image:var(--ez-check--indeterminate--image)}input.regular-mode:checked:disabled::after,input.regular-mode:indeterminate:disabled::after{background-color:var(--ez-check--check--disabled--background-color)}input.switch-mode{flex-shrink:0;-webkit-appearance:none;appearance:none;position:relative;outline:none;cursor:pointer;border-radius:20px;border:var(--border--small, 1px solid) var(--ez-switch--pin--border-color, #626e82);transition:background-color var(--transition);width:var(--ez-switch--slider--width);height:var(--ez-switch--slider--height);background-color:var(--ez-switch--background-color)}input.switch-mode:disabled{background-color:var(--ez-switch--disabled--background-color);border:var(--border--small, 1px solid) var(--ez-switch--pin--disabled--border-color, #a2abb9)}input.switch-mode:checked:disabled{background-color:var(--ez-switch--disabled--checked--background-color)}input.switch-mode::after{content:\"\";display:block;position:absolute;box-shadow:var(--shadow);transition:transform var(--transition);transition:background-color var(--transition);transition:border-color var(--transition);transform:translateX(-2px) translateY(-4px);border-radius:50%;border:var(--border--small, 1px solid) var(--ez-switch--pin--border-color, #626e82);width:var(--ez-switch--pin--width);height:var(--ez-switch--pin--height);background-color:var(--ez-switch--pin--background-color)}input.switch-mode:disabled::after{background-color:var(--ez-switch--pin--disabled--background-color);border:var(--border--small, 1px solid) var(--ez-switch--pin--disabled--border-color, #a2abb9)}input.switch-mode:checked{transition:background-color var(--transition), border var(--transition);background-color:var(--ez-switch--checked--background-color);border:var(--border--small, 1px solid) var(--color--primary, #008561)}input.switch-mode::before{display:block;content:\"\";display:block;position:absolute;border-radius:50%;opacity:0;width:var(--ez-switch--focus--width);height:var(--ez-switch--focus--height);top:calc((var(--ez-switch--slider--height) - var(--ez-switch--focus--height)) / 2);left:calc((var(--ez-switch--pin--width) - var(--ez-switch--focus--width) - 2px) / 2);background-color:var(--ez-switch--pin--focus--background-color)}input.switch-mode:focus::before{opacity:0.24;transition:opacity var(--transition)}input.switch-mode:checked:focus::before{background-color:var(--ez-switch--pin--checked--focus--background-color);transform:translateX(calc(var(--ez-switch--slider--width) - var(--ez-switch--pin--width) + 2px))}input.switch-mode:checked::after{transition:transform var(--transition);transition:background-color var(--transition);transition:border-color var(--transition);transform:translateX(calc(var(--ez-switch--slider--width) - var(--ez-switch--pin--width))) translateY(-4px);box-shadow:var(--shadow);background-color:var(--ez-switch--pin--checked--background-color);border:var(--border--small, 1px solid) var(--color--primary, #008561)}input.switch-mode:checked:disabled::after{background-color:var(--ez-switch--pin--checked--disabled--background-color)}.label{flex-shrink:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--ez-check--label--color);font-size:var(--ez-check--label--font-size);font-family:var(--ez-check--label--font-family);cursor:default}.label--disabled{color:var(--ez-check--label--disabled--color)}.label--padding{padding-left:var(--space--small)}";
+const ezCheckCss = ":host{--ez-check--box--width:20px;--ez-check--box--height:20px;--ez-check--width:calc(var(--ez-check--box--width) + var(--ez-check--outter-gap, 14px));--ez-check--height:calc(var(--ez-check--box--width) + var(--ez-check--outter-gap, 14px));--ez-check--border-radius:var(--border--radius-small);--ez-check--checked--background-color:var(--color--primary-200);--ez-check--focus--background-color:var(--color--strokes, #FFFFFF);--ez-check--hover--background-color:var(--background--medium);--ez-check--checked--disabled--background-color:var(--color--disable-secondary);--ez-check--border:var(--border--medium) var(--title--primary);--ez-check--disabled--border:var(--border--medium) var(--color--strokes);--ez-check--checked--border:var(--border--medium) var(--color--primary);--ez-check--checked--hover--background-color:var(--color--primary-200);--ez-check--checked--focus--background-color:var(--color--primary-300, #FFFFFF);--ez-check--check--image:url('data:image/svg+xml;utf8,<svg width=\"8\" height=\"7\" viewBox=\"0 0 8 7\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M7.70002 0.398999L7.48502 0.207997C7.31524 0.0598858 7.09376 -0.0150438 6.86894 -0.000430025C6.64411 0.0141838 6.43419 0.117153 6.28502 0.285997L2.70002 4.332L1.61802 3.384C1.44837 3.23576 1.22697 3.16067 1.00214 3.17509C0.77732 3.18952 0.567332 3.2923 0.418019 3.461L0.229019 3.674C0.0752361 3.84797 -0.00437434 4.07521 0.00721192 4.30713C0.0187982 4.53904 0.120661 4.75722 0.291019 4.915L2.27402 6.762C2.35832 6.8432 2.45842 6.90618 2.56811 6.94702C2.67779 6.98787 2.79471 7.00571 2.91159 6.99942C3.02846 6.99314 3.14279 6.96287 3.24747 6.91049C3.35214 6.85812 3.44492 6.78477 3.52002 6.695L7.79102 1.638C7.94063 1.46048 8.01486 1.23149 7.99786 0.999963C7.98085 0.768436 7.87396 0.552749 7.70002 0.398999Z\"/></svg>');--ez-check--indeterminate--image:url('data:image/svg+xml;utf8,<svg width=\"10\" height=\"2\" viewBox=\"0 0 10 2\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"m 1,0 h 8 c 0.554,0 1,0.446 1,1 0,0.554 -0.446,1 -1,1 H 1 C 0.446,2 0,1.554 0,1 0,0.446 0.446,0 1,0 Z\" /></svg>');--ez-check--check--background-color:var(--color--primary);--ez-check--check--disabled--background-color:var(--color--strokes);--ez-switch--slider--width:34px;--ez-switch--slider--height:14px;--ez-switch--pin--width:19px;--ez-switch--pin--height:19px;--ez-switch--focus--width:32px;--ez-switch--focus--height:32px;--ez-switch--background-color:var(--color--strokes);--ez-switch--disabled--background-color:var(--color--disable-secondary);--ez-switch--disabled--checked--background-color:var(--color--primary-300);--ez-switch--checked--background-color:var(--color--primary);--ez-switch--pin--background-color:var(--background--xlight);--ez-switch--pin--disabled--background-color:var(--color--disable-primary);--ez-switch--pin--checked--background-color:var(--background--xlight);--ez-switch--pin--checked--disabled--background-color:#E8F7F4;--ez-switch--pin--focus--background-color:var(--text--disable);--ez-switch--pin--checked--focus--background-color:var(--color--primary);--ez-switch--pin--border-color:var(--text--primary);--ez-switch--pin--disabled--border-color:var(--text--secondary);--ez-check--label--font-size:var(--text--medium, 14px);--ez-check--label--font-family:var(--font-pattern, Arial);--ez-check--label--color:var(--title--primary, #000);--ez-check--label--disabled--color:var(--text--disable, #AFB6C0);display:flex;width:100%;align-items:center;margin:0}input.regular-mode{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;box-sizing:border-box;-webkit-appearance:none;appearance:none;cursor:pointer;border-radius:50%;position:relative;width:var(--ez-check--width);height:var(--ez-check--height)}input.compact{margin-right:0px}input.regular-mode:enabled:hover{background-color:var(--ez-check--hover--background-color)}input.regular-mode:enabled:focus{outline:none;background-color:var(--ez-check--focus--background-color)}input.regular-mode:disabled{cursor:auto;background:none}input.regular-mode::before{box-sizing:border-box;content:\"\";display:block;width:var(--ez-check--box--width);height:var(--ez-check--box--height);border-radius:var(--ez-check--border-radius);border:var(--ez-check--border)}input.regular-mode:disabled::before{border:var(--ez-check--disabled--border)}input.regular-mode:checked:enabled:hover,input.regular-mode:indeterminate:enabled:hover{background-color:var(--ez-check--checked--hover--background-color)}input.regular-mode:checked:enabled:focus,input.regular-mode:indeterminate:enabled:focus{background-color:var(--ez-check--checked--focus--background-color)}input.regular-mode:checked::before,input.regular-mode:indeterminate::before{border:var(--ez-check--checked--border);background-color:var(--ez-check--checked--background-color)}input.regular-mode:disabled:before{border:var(--ez-check--disabled--border);background-color:var(--ez-check--checked--disabled--background-color)}input.regular-mode:checked::after,input.regular-mode:indeterminate:after{display:flex;position:absolute;content:\"\";background-color:var(--ez-check--check--background-color);width:8px;height:7px;-webkit-mask-image:var(--ez-check--check--image);mask-image:var(--ez-check--check--image)}input.regular-mode:indeterminate:after{display:flex;position:absolute;content:\"\";background-color:var(--ez-check--check--background-color);width:10px;height:2px;-webkit-mask-image:var(--ez-check--indeterminate--image);mask-image:var(--ez-check--indeterminate--image)}input.regular-mode:checked:disabled::after,input.regular-mode:indeterminate:disabled::after{background-color:var(--ez-check--check--disabled--background-color)}input.switch-mode{flex-shrink:0;-webkit-appearance:none;appearance:none;position:relative;outline:none;cursor:pointer;border-radius:20px;border:var(--border--small, 1px solid) var(--ez-switch--pin--border-color, #626e82);transition:background-color var(--transition);width:var(--ez-switch--slider--width);height:var(--ez-switch--slider--height);background-color:var(--ez-switch--background-color)}input.switch-mode:disabled{background-color:var(--ez-switch--disabled--background-color);border:var(--border--small, 1px solid) var(--ez-switch--pin--disabled--border-color, #a2abb9)}input.switch-mode:checked:disabled{background-color:var(--ez-switch--disabled--checked--background-color)}input.switch-mode::after{content:\"\";display:block;position:absolute;box-shadow:var(--shadow);transition:transform var(--transition);transition:background-color var(--transition);transition:border-color var(--transition);transform:translateX(-2px) translateY(-4px);border-radius:50%;border:var(--border--small, 1px solid) var(--ez-switch--pin--border-color, #626e82);width:var(--ez-switch--pin--width);height:var(--ez-switch--pin--height);background-color:var(--ez-switch--pin--background-color)}input.switch-mode:disabled::after{background-color:var(--ez-switch--pin--disabled--background-color);border:var(--border--small, 1px solid) var(--ez-switch--pin--disabled--border-color, #a2abb9)}input.switch-mode:checked{transition:background-color var(--transition), border var(--transition);background-color:var(--ez-switch--checked--background-color);border:var(--border--small, 1px solid) var(--color--primary, #008561)}input.switch-mode::before{display:block;content:\"\";display:block;position:absolute;border-radius:50%;opacity:0;width:var(--ez-switch--focus--width);height:var(--ez-switch--focus--height);top:calc((var(--ez-switch--slider--height) - var(--ez-switch--focus--height)) / 2);left:calc((var(--ez-switch--pin--width) - var(--ez-switch--focus--width) - 2px) / 2);background-color:var(--ez-switch--pin--focus--background-color)}input.switch-mode:focus::before{opacity:0.24;transition:opacity var(--transition)}input.switch-mode:checked:focus::before{background-color:var(--ez-switch--pin--checked--focus--background-color);transform:translateX(calc(var(--ez-switch--slider--width) - var(--ez-switch--pin--width) + 2px))}input.switch-mode:checked::after{transition:transform var(--transition);transition:background-color var(--transition);transition:border-color var(--transition);transform:translateX(calc(var(--ez-switch--slider--width) - var(--ez-switch--pin--width))) translateY(-4px);box-shadow:var(--shadow);background-color:var(--ez-switch--pin--checked--background-color);border:var(--border--small, 1px solid) var(--color--primary, #008561)}input.switch-mode:checked:disabled::after{background-color:var(--ez-switch--pin--checked--disabled--background-color)}.label{flex-shrink:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--ez-check--label--color);font-size:var(--ez-check--label--font-size);font-family:var(--ez-check--label--font-family);cursor:default;width:inherit}.label--disabled{color:var(--ez-check--label--disabled--color)}.label--padding{padding-left:var(--space--small)}";
 
 const EzCheck$1 = class extends HTMLElement$1 {
   constructor() {
@@ -2063,6 +2063,7 @@ const EzCollapsibleBox$1 = class extends HTMLElement$1 {
 };
 
 const REQUIRED_INFO = " (obrigatório) *";
+const DISTINCT_FILTER_NAME_PREFIX = 'FILTRO_COLUNA_';
 
 const ezComboBoxCss = ":host{--ez-combo-box--height:42px;--ez-combo-box--width:100%;--ez-combo-box__icon--width:48px;--ez-combo-box--border-radius:var(--border--radius-medium, 12px);--ez-combo-box--border-radius-small:var(--border--radius-small, 6px);--ez-combo-box--font-size:var(--text--medium, 14px);--ez-combo-box--font-family:var(--font-pattern, Arial);--ez-combo-box--font-weight--large:var(--text-weight--large, 500);--ez-combo-box--font-weight--medium:var(--text-weight--medium, 400);--ez-combo-box--background-color--xlight:var(--background--xlight, #fff);--ez-combo-box--background-medium:var(--background--medium, #f0f3f7);--ez-combo-box--line-height:calc(var(--text--medium, 14px) + 4px);--ez-combo-box__input--background-color:var(--background--medium, #e0e0e0);--ez-combo-box__input--border:var(--border--medium, 2px solid);--ez-combo-box__input--border-color:var(--ez-combo-box__input--background-color);--ez-combo-box__input--focus--border-color:var(--color--primary, #008561);--ez-combo-box__input--disabled--background-color:var(--color--disable-secondary, #F2F5F8);--ez-combo-box__input--disabled--color:var(--text--disable, #AFB6C0);--ez-combo-box__input--error--border-color:#CC2936;--ez-combo-box__btn--color:var(--title--primary, #2B3A54);--ez-combo-box__btn-disabled--color:var(--text--disable, #AFB6C0);--ez-combo-box__btn-hover--color:var(--color--primary, #4e4e4e);--ez-combo-box__label--color:var(--title--primary, #2B3A54);--ez-combo-box__list-title--primary:var(--title--primary, #2B3A54);--ez-combo-box__list-text--primary:var(--text--primary, #626e82);--ez-combo-box__list-height:calc(var(--ez-combo-box--font-size) + var(--ez-combo-box--space--medium) + 4px);--ez-combo-box--space--medium:var(--space--medium, 12px);--ez-combo-box--space--small:var(--space--small, 6px);--ez-combo-box__scrollbar--color-default:var(--scrollbar--default, #626e82);--ez-combo-box__scrollbar--color-background:var(--scrollbar--background, #E5EAF0);--ez-combo-box__scrollbar--color-hover:var(--scrollbar--hover, #2B3A54);--ez-combo-box__scrollbar--color-clicked:var(--scrollbar--clicked, #a2abb9);--ez-combo-box__scrollbar--border-radius:var(--border--radius-small, 6px);--ez-combo-box__scrollbar--width:var(--space--medium, 12px);display:flex;flex-wrap:wrap;position:relative;width:var(--ez-combo-box--width)}ez-icon{--ez-icon--color:inherit;font-weight:var(--text-weight--large, 600)}.suppressed-search-input{--ez-text-input__input--border-color:var(--color--strokes, #dce0e8);--ez-text-input__input--disabled--background-color:var(--background--xlight, #fff);--ez-text-input__input--disabled--color:var(--title--primary, #2B3A54)}.list-container{position:relative;width:100%}.list-wrapper{display:flex;flex-direction:column;box-sizing:border-box;width:100%;z-index:var(--more-visible, 2);max-height:calc(4*var(--ez-combo-box__list-height) + 2*var(--ez-combo-box--space--small) + 9px);background-color:var(--ez-combo-box--background-color--xlight);border-radius:var(--ez-combo-box--border-radius);box-shadow:var(--shadow, 0px 0px 16px 0px #000);padding:var(--ez-combo-box--space--small)}.list-options{box-sizing:border-box;width:100%;height:100%;display:flex;flex-direction:column;scroll-behavior:smooth;overflow:auto;scrollbar-width:thin;gap:3px;scrollbar-color:var(--ez-combo-box__scrollbar--color-clicked) var(--ez-combo-box__scrollbar--color-background)}.list-options::-webkit-scrollbar{background-color:var(--ez-combo-box__scrollbar--color-background);width:var(--ez-combo-box__scrollbar--width);max-width:var(--ez-combo-box__scrollbar--width);min-width:var(--ez-combo-box__scrollbar--width)}.list-options::-webkit-scrollbar-track{background-color:var(--ez-combo-box__scrollbar--color-background);border-radius:var(--ez-combo-box__scrollbar--border-radius)}.list-options::-webkit-scrollbar-thumb{background-color:var(--ez-combo-box__scrollbar--color-default);border-radius:var(--ez-combo-box__scrollbar--border-radius)}.list-options::-webkit-scrollbar-thumb:vertical:hover,.list-options::-webkit-scrollbar-thumb:horizontal:hover{background-color:var(--ez-combo-box__scrollbar--color-hover)}.list-options::-webkit-scrollbar-thumb:vertical:active,.list-options::-webkit-scrollbar-thumb:horizontal:active{background-color:var(--ez-combo-box__scrollbar--color-clicked)}.item{display:flex;align-items:center;width:100%;box-sizing:border-box;list-style-type:none;cursor:pointer;border-radius:var(--ez-combo-box--border-radius-small);padding:var(--ez-combo-box--space--small);min-height:var(--ez-combo-box__list-height);gap:var(--space--small, 6px)}.item__value,.item__label{flex-basis:auto;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--ez-combo-box__list-title--primary);font-family:var(--ez-combo-box--font-family);font-size:var(--ez-combo-box--font-size);line-height:var(--ez-combo-box--line-height)}.item__label{font-weight:var(--ez-combo-box--font-weight--medium)}.item__label--bold{font-weight:var(--ez-combo-box--font-weight--large)}.item__value{text-align:center;color:var(--ez-combo-box__list-text--primary);font-weight:var(--ez-combo-box--font-weight--large)}.item__value--hidden{visibility:hidden;position:absolute;white-space:nowrap;z-index:-1;top:0;left:0}.item__label{text-align:left}.message{text-align:center;display:flex;justify-content:center;align-items:center;list-style-type:none;min-height:var(--ez-combo-box__list-height)}.message__no-result{color:var(--ez-combo-box__list-title--primary);font-family:var(--ez-combo-box--font-family);font-size:var(--ez-combo-box--font-size)}.message__loading{border-radius:50%;width:14px;height:14px;-webkit-animation:spin 1s linear infinite;animation:spin 1s linear infinite;border:3px solid var(--ez-combo-box__list-title--primary);border-top:3px solid transparent}li:hover{background-color:var(--ez-combo-box--background-medium)}.preselected{background-color:var(--background--medium)}.btn{outline:none;border:none;background:none;cursor:pointer;color:var(--ez-combo-box__btn--color)}.btn:disabled{cursor:unset;color:var(--ez-combo-box__btn-disabled--color)}.btn:disabled:hover{cursor:unset;color:var(--ez-combo-box__btn-disabled--color)}.btn:hover{color:var(--ez-combo-box__btn-hover--color)}.btn__close{visibility:hidden}ez-text-input:hover .btn__close,ez-text-input:focus .btn__close{visibility:visible}@-webkit-keyframes spin{0%{-webkit-transform:rotate(0deg)}100%{-webkit-transform:rotate(360deg)}}@keyframes spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}";
 
@@ -2279,7 +2280,7 @@ const EzComboBox$1 = class extends HTMLElement$1 {
   }
   scrollToOption(opt, down) {
     window.requestAnimationFrame(() => {
-      const liElem = (opt === null || opt === void 0 ? void 0 : opt.value) ? this._optionsList.querySelector(`li#item_${opt.value.replace(/[<>\[\]#=]/g, '\\$&')}`) : undefined;
+      const liElem = (opt === null || opt === void 0 ? void 0 : opt.value) ? this._optionsList.querySelector(`li#item_${opt.value.replace(/[<>\[\]#=]/g, '\\$&').replace(/:/g, '\\:')}`) : undefined;
       if (liElem) {
         const parent = liElem.parentElement;
         const parentRect = parent.getBoundingClientRect();
@@ -123296,81 +123297,6 @@ var AllEnterpriseModules = [
 
 ModuleRegistry.registerModules(AllEnterpriseModules);
 
-const gridTerms = {
-  // for filter panel
-  page: "Página",
-  more: "mais",
-  to: "para",
-  of: "de",
-  next: "Próximo",
-  last: "Último",
-  first: "Primeiro",
-  previous: "Anterior",
-  loadingOoo: "Carregar",
-  // for set filter
-  selectAll: "Selecionar tudo",
-  searchOoo: "Procurar",
-  blanks: "Vazio",
-  // for number filter and text filter
-  filterOoo: "Filtrar",
-  applyFilter: "Aplicar filtro",
-  // for number filter
-  equals: "Igual",
-  lessThan: "Menor que",
-  greaterThan: "Maior que",
-  // for text filter
-  contains: "Contém",
-  startsWith: "Começa com",
-  endsWith: "Termina com",
-  // the header of the default group column
-  group: "Grupo",
-  // tool panel
-  columns: "Colunas",
-  rowGroupColumns: "Colunas do grupo de linhas",
-  rowGroupColumnsEmptyMessage: "Colunas do grupo de linhas vazias",
-  valueColumns: "Valores das colunas",
-  pivotMode: "Modo pivô",
-  groups: "Grupos",
-  values: "Valores",
-  pivots: "Pivôs",
-  valueColumnsEmptyMessage: "Valores de colunas vazias",
-  pivotColumnsEmptyMessage: "Pivôs de colunas vazias",
-  toolPanelButton: "Botão de painel de ferramentas",
-  // other
-  noRowsToShow: "Não há registros para mostrar.",
-  // enterprise menu
-  pinColumn: "Fixar coluna",
-  valueAggregation: "Agregar valor",
-  autosizeThiscolumn: "Redimensionar esta coluna",
-  autosizeAllColumns: "Redimensionar todas colunas",
-  groupBy: "Agrupar por",
-  ungroupBy: "Desagrupar por",
-  resetColumns: "Resetar colunas",
-  expandAll: "Expandir tudo",
-  collapseAll: "Contrair tudo",
-  toolPanel: "Painel de ferramentas",
-  export: "Exportar",
-  csvExport: "Exportar para CSV",
-  excelExport: "Exportar para Excel",
-  // enterprise menu pinning
-  pinLeft: "Fixar coluna",
-  pinRight: "Fixar a direita",
-  noPin: "Desfixar coluna",
-  // enterprise menu aggregation and status panel
-  sum: "Soma",
-  min: "Mínimo",
-  max: "Máximo",
-  none: "Nenhum",
-  count: "Contagem",
-  average: "Média",
-  // standard menu
-  copy: "Copiar",
-  copyWithHeaders: "Copiar com cabeçalho",
-  ctrlC: "Ctrl+C",
-  paste: "Colar",
-  ctrlV: "Ctrl+V"
-};
-
 class DataSource {
   constructor(dataUnit, controller, options) {
     this.RECORD_ARCHIVE = "__RECORD_ARCHIVE__";
@@ -123471,6 +123397,103 @@ class DataSource {
   }
 }
 
+function calcFilterColumnLeftPosition(leftReference) {
+  const FIX_MARGIN = 60;
+  const FILTER_COLUMN_WIDTH = 330;
+  const screenWidth = window.innerWidth;
+  const maxLeft = screenWidth - (FILTER_COLUMN_WIDTH + FIX_MARGIN);
+  const leftInt = leftReference - FIX_MARGIN;
+  return leftInt > maxLeft ? maxLeft : leftInt;
+}
+
+class EzGridCustomHeader {
+  init(agParams) {
+    var _a;
+    this.params = agParams;
+    this.element = document.createElement('div');
+    this.element.classList.add('ag-cell-label-container');
+    this.element.setAttribute('title', (_a = this.params.tooltip) !== null && _a !== void 0 ? _a : '');
+    this.element.innerHTML = `
+          <div class='ez-flex ez-flex--justify-between'>
+            <i id='ez-grid-filter-icon' class='ez-icon-filter' style='color:#008561'></i>        
+            <i id='ez-grid-menu-icon' class='ez-icon-dots-vertical'></i>        
+          </div>
+          <div id='ez-header-container' class='ez-flex ez-flex--justify-between ag-header-cell-text'>
+            <span class='ag-header-cell-text'>${this.params.displayName}</span>
+            <i id='ez-grid-sort-icon-down' class='ez-icon-arrow_downward' style='display: none;margin-left: 4px;font-size: var(--text--medium, 14px);align-self: center;'></i>
+            <i id='ez-grid-sort-icon-up' class='ez-icon-arrow_downward' style='display: none; transform: rotate(180deg);margin-left: 4px;font-size: var(--text--medium, 14px);align-self: center;'></i>
+          </div>
+    `;
+    this.configMenuClick();
+    this.configSortClick();
+    this.configSortListener();
+    this.configFilterButton();
+  }
+  refresh(agParams) {
+    this.params = agParams;
+    this.configFilterButton();
+    this.configSortIcon();
+  }
+  configFilterButton() {
+    this.filterButton = this.element.querySelector('#ez-grid-filter-icon');
+    this.filterButton.style.display = this.params.hasFilter() ? 'flex' : 'none';
+    this.onFilterButtonClickListener = this.onClickFilter.bind(this);
+    this.filterButton.addEventListener('click', this.onFilterButtonClickListener);
+  }
+  onClickFilter() {
+    var _a;
+    const iconLeft = (_a = this.filterButton) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect().left;
+    this.params.showColumnFilter(`${calcFilterColumnLeftPosition(iconLeft)}px`);
+  }
+  configSortIcon() {
+    this.sortDownIcon.style.display = this.params.column.isSortDescending() ? 'flex' : 'none';
+    this.sortUpIcon.style.display = this.params.column.isSortAscending() ? 'flex' : 'none';
+  }
+  configSortListener() {
+    if (this.params.enableSorting) {
+      this.sortUpIcon = this.element.querySelector('#ez-grid-sort-icon-up');
+      this.sortDownIcon = this.element.querySelector('#ez-grid-sort-icon-down');
+      this.onSortChangedListener = this.configSortIcon.bind(this);
+      this.params.column.addEventListener('sortChanged', this.onSortChangedListener);
+      this.configSortIcon();
+    }
+  }
+  onSortClick(event) {
+    this.params.progressSort(event.shiftKey);
+  }
+  configSortClick() {
+    if (this.params.column.getColDef().sortable) {
+      this.headerContainer = this.element.querySelector('#ez-header-container');
+      this.onSortClickListener = this.onSortClick.bind(this);
+      this.headerContainer.addEventListener('click', this.onSortClickListener);
+    }
+  }
+  onMenuClick() {
+    this.params.showColumnMenu(this.menuButton);
+  }
+  configMenuClick() {
+    this.menuButton = this.element.querySelector('#ez-grid-menu-icon');
+    this.onMenuClickListener = this.onMenuClick.bind(this);
+    this.menuButton.addEventListener('click', this.onMenuClickListener);
+  }
+  getGui() {
+    return this.element;
+  }
+  destroy() {
+    if (this.onMenuClickListener) {
+      this.menuButton.removeEventListener('click', this.onMenuClickListener);
+    }
+    if (this.onSortClickListener) {
+      this.headerContainer.removeEventListener('click', this.onSortClickListener);
+    }
+    if (this.onFilterButtonClickListener) {
+      this.filterButton.removeEventListener('click', this.onFilterButtonClickListener);
+    }
+    this.params.column.removeEventListener('sortChanged', this.onSortChangedListener);
+    this.params.column.removeEventListener('applyFilterColumnOptions', this.onFilterAppliedListener);
+  }
+}
+
 class CellRendererStatus {
   constructor() {
     this.DEFAULT_COLOR = 'transparent';
@@ -123556,102 +123579,111 @@ class SelectionHeader {
   }
 }
 
-class EzGridCustomHeader {
-  init(agParams) {
-    var _a;
-    this.params = agParams;
-    this.element = document.createElement('div');
-    this.element.classList.add('ag-cell-label-container');
-    this.element.setAttribute('title', (_a = this.params.tooltip) !== null && _a !== void 0 ? _a : '');
-    this.element.innerHTML = `
-          <div class='ez-flex ez-flex--justify-between'>
-            <i id='ez-grid-filter-icon' class='ez-icon-filter' style='color:#008561'></i>        
-            <i id='ez-grid-menu-icon' class='ez-icon-dots-vertical'></i>        
-          </div>
-          <div id='ez-header-container' class='ez-flex ez-flex--justify-between ag-header-cell-text'>
-            <span class='ag-header-cell-text'>${this.params.displayName}</span>
-            <i id='ez-grid-sort-icon-down' class='ez-icon-arrow_downward' style='display: none;margin-left: 4px;font-size: var(--text--medium, 14px);align-self: center;'></i>
-            <i id='ez-grid-sort-icon-up' class='ez-icon-arrow_downward' style='display: none; transform: rotate(180deg);margin-left: 4px;font-size: var(--text--medium, 14px);align-self: center;'></i>
-          </div>
-    `;
-    this.configMenuClick();
-    this.configSortClick();
-    this.configSortListener();
-    this.configFilterButton();
-  }
-  refresh(agParams) {
-    this.params = agParams;
-    this.configFilterButton();
-    this.configSortIcon();
-  }
-  configFilterButton() {
-    this.filterButton = this.element.querySelector('#ez-grid-filter-icon');
-    this.filterButton.style.display = this.params.hasFilter() ? 'flex' : 'none';
-    this.onFilterButtonClickListener = this.params.showColumnFilter.bind(this);
-    this.filterButton.addEventListener('click', this.onFilterButtonClickListener);
-  }
-  configSortIcon() {
-    this.sortDownIcon.style.display = this.params.column.isSortDescending() ? 'flex' : 'none';
-    this.sortUpIcon.style.display = this.params.column.isSortAscending() ? 'flex' : 'none';
-  }
-  configSortListener() {
-    if (this.params.enableSorting) {
-      this.sortUpIcon = this.element.querySelector('#ez-grid-sort-icon-up');
-      this.sortDownIcon = this.element.querySelector('#ez-grid-sort-icon-down');
-      this.onSortChangedListener = this.configSortIcon.bind(this);
-      this.params.column.addEventListener('sortChanged', this.onSortChangedListener);
-      this.configSortIcon();
-    }
-  }
-  onSortClick(event) {
-    this.params.progressSort(event.shiftKey);
-  }
-  configSortClick() {
-    if (this.params.column.getColDef().sortable) {
-      this.headerContainer = this.element.querySelector('#ez-header-container');
-      this.onSortClickListener = this.onSortClick.bind(this);
-      this.headerContainer.addEventListener('click', this.onSortClickListener);
-    }
-  }
-  onMenuClick() {
-    this.params.showColumnMenu(this.menuButton);
-  }
-  configMenuClick() {
-    this.menuButton = this.element.querySelector('#ez-grid-menu-icon');
-    this.onMenuClickListener = this.onMenuClick.bind(this);
-    this.menuButton.addEventListener('click', this.onMenuClickListener);
+const gridTerms = {
+  // for filter panel
+  page: "Página",
+  more: "mais",
+  to: "para",
+  of: "de",
+  next: "Próximo",
+  last: "Último",
+  first: "Primeiro",
+  previous: "Anterior",
+  loadingOoo: "Carregar",
+  // for set filter
+  selectAll: "Selecionar tudo",
+  searchOoo: "Procurar",
+  blanks: "Vazio",
+  // for number filter and text filter
+  filterOoo: "Filtrar",
+  applyFilter: "Aplicar filtro",
+  // for number filter
+  equals: "Igual",
+  lessThan: "Menor que",
+  greaterThan: "Maior que",
+  // for text filter
+  contains: "Contém",
+  startsWith: "Começa com",
+  endsWith: "Termina com",
+  // the header of the default group column
+  group: "Grupo",
+  // tool panel
+  columns: "Colunas",
+  rowGroupColumns: "Colunas do grupo de linhas",
+  rowGroupColumnsEmptyMessage: "Colunas do grupo de linhas vazias",
+  valueColumns: "Valores das colunas",
+  pivotMode: "Modo pivô",
+  groups: "Grupos",
+  values: "Valores",
+  pivots: "Pivôs",
+  valueColumnsEmptyMessage: "Valores de colunas vazias",
+  pivotColumnsEmptyMessage: "Pivôs de colunas vazias",
+  toolPanelButton: "Botão de painel de ferramentas",
+  // other
+  noRowsToShow: "Não há registros para mostrar.",
+  // enterprise menu
+  pinColumn: "Fixar coluna",
+  valueAggregation: "Agregar valor",
+  autosizeThiscolumn: "Redimensionar esta coluna",
+  autosizeAllColumns: "Redimensionar todas colunas",
+  groupBy: "Agrupar por",
+  ungroupBy: "Desagrupar por",
+  resetColumns: "Resetar colunas",
+  expandAll: "Expandir tudo",
+  collapseAll: "Contrair tudo",
+  toolPanel: "Painel de ferramentas",
+  export: "Exportar",
+  csvExport: "Exportar para CSV",
+  excelExport: "Exportar para Excel",
+  // enterprise menu pinning
+  pinLeft: "Fixar coluna",
+  pinRight: "Fixar a direita",
+  noPin: "Desfixar coluna",
+  // enterprise menu aggregation and status panel
+  sum: "Soma",
+  min: "Mínimo",
+  max: "Máximo",
+  none: "Nenhum",
+  count: "Contagem",
+  average: "Média",
+  // standard menu
+  copy: "Copiar",
+  copyWithHeaders: "Copiar com cabeçalho",
+  ctrlC: "Ctrl+C",
+  paste: "Colar",
+  ctrlV: "Ctrl+V"
+};
+
+class AgGridController {
+  configFilterColumn(filterColumn) {
+    this._filterColumn = filterColumn;
+    this._filterColumn.addEventListener('applyFilterColumnOptions', this.handleFilteredColumnsChanged.bind(this));
   }
-  getGui() {
-    return this.element;
+  handleFilteredColumnsChanged(event) {
+    const applied = event.detail;
+    this._filteredColumns.set(applied.field, applied.values);
+    this._gridOptions.api.refreshHeader();
+    this._dataUnit.loadData();
   }
-  destroy() {
-    if (this.onMenuClickListener) {
-      this.menuButton.removeEventListener('click', this.onMenuClickListener);
-    }
-    if (this.onSortClickListener) {
-      this.headerContainer.removeEventListener('click', this.onSortClickListener);
-    }
-    if (this.onFilterButtonClickListener) {
-      this.filterButton.removeEventListener('click', this.onFilterButtonClickListener);
-    }
-    this.params.column.removeEventListener('sortChanged', this.onSortChangedListener);
+  showFilterColumn(configs) {
+    var _a;
+    (_a = this._filterColumn) === null || _a === void 0 ? void 0 : _a.show(configs);
   }
-}
-
-class AgGridController {
   constructor(enterprise) {
     this.DEFAULT_ROW_HEIGHT = 30;
     this.DEFAULT_HEADER_ROW_HEIGHT = 32;
-    this.CHECK_BOX_COL_ID = "checkBoxColumn";
-    this.STATUS_COL_ID = "statusColumn";
-    this.RECORD_ARCHIVE_COL_ID = "__RECORD_ARCHIVE__";
+    this.CHECK_BOX_COL_ID = 'checkBoxColumn';
+    this.STATUS_COL_ID = 'statusColumn';
+    this.RECORD_ARCHIVE_COL_ID = '__RECORD_ARCHIVE__';
     this.BLOCK_LOAD_DEBOUNCE = 400;
     this.DEFAULT_FONT_SIZE = 14;
     this.DEFAULT_ICON_SIZE = 12;
     this.DEFAULT_MAX_SIZE = 200;
     this._menuItems = [];
-    this._idAttribName = "__record__id__";
+    this._idAttribName = '__record__id__';
     this._gridConfig = [];
+    this._filteredColumns = new Map();
+    this._filterColumnleftPosition = '0px';
     this._enterprise = enterprise;
   }
   getGridConfig() {
@@ -123659,23 +123691,59 @@ class AgGridController {
   }
   getSort() {
     const sortedColumns = [];
-    this._gridOptions.columnApi.getColumnState()
+    this._gridOptions.columnApi
+      .getColumnState()
       .sort((colA, colB) => colA.sortIndex - colB.sortIndex)
       .forEach(({ colId, sort }) => {
       if (sort) {
         const field = this._dataUnit.getField(colId);
-        const mode = sort === "asc" ? SortMode.ASC : SortMode.DESC;
+        const mode = sort === 'asc' ? SortMode.ASC : SortMode.DESC;
         const sortField = field ? { field: field.name, dataType: field.dataType, mode } : { field: colId, dataType: DataType.TEXT, mode };
         sortedColumns.push(sortField);
       }
     });
     return sortedColumns;
   }
-  ;
+  getFilter() {
+    if (!this._filteredColumns || this._filteredColumns.size === 0) {
+      return;
+    }
+    return Array.from(this._filteredColumns.entries())
+      .map(([column, items]) => {
+      var _a;
+      const checkedOptions = items.filter(option => option.check);
+      if (checkedOptions.length > 0) {
+        const fieldDescriptor = this._dataUnit.getField(column);
+        const dataType = (_a = fieldDescriptor === null || fieldDescriptor === void 0 ? void 0 : fieldDescriptor.dataType) !== null && _a !== void 0 ? _a : DataType.TEXT;
+        let placeholders = '';
+        const params = [];
+        checkedOptions.forEach(option => {
+          if (placeholders.length > 0) {
+            placeholders = placeholders + ',';
+          }
+          const paramName = `PARAM_${column}_${params.length + 1}`;
+          placeholders = `${placeholders}:${paramName}`; //FIXME: trocar por ? quando o backend estiver funcionando
+          params.push({
+            dataType: dataType === DataType.OBJECT ? DataType.TEXT : dataType,
+            name: paramName,
+            value: option.value,
+          });
+        });
+        const columnExpression = dataType === DataType.DATE ? `onlydate(this.${column})` : `this.${column}`;
+        return {
+          name: `${DISTINCT_FILTER_NAME_PREFIX}${column}`,
+          expression: `${columnExpression} in (${placeholders})`,
+          params,
+        };
+      }
+      return undefined;
+    })
+      .filter(item => item != undefined);
+  }
   initDatagrid(container, options) {
     var _a;
     if (this._grid === undefined) {
-      LicenseManager.setLicenseKey(ApplicationContext.getContextValue("__EZUI__GRID_LICENSE__"));
+      LicenseManager.setLicenseKey(ApplicationContext.getContextValue('__EZUI__GRID_LICENSE__'));
       this._columnStateChangeCallback = options.onColumnStateChange;
       this._selectionChangeCallback = options.onSelectionChange;
       this._doubleClickCallBack = options.onDoubleClick;
@@ -123684,28 +123752,30 @@ class AgGridController {
       this._statusResolver = options.statusResolver;
       if (this._dataUnit) {
         this._dataUnit.sortingProvider = this;
+        this._dataUnit.addFilterProvider(this);
       }
       this._gridOptions = {
         localeText: gridTerms,
-        rowSelection: this._multipleSelection ? "multiple" : "single",
+        rowSelection: this._multipleSelection ? 'multiple' : 'single',
         sortingOrder: ['desc', 'asc', null],
         blockLoadDebounceMillis: this.BLOCK_LOAD_DEBOUNCE,
         navigateToNextCell: this.navigateToNextCell.bind(this),
-        getRowNodeId: this._dataUnit ? (params) => typeof params === "string" ? params : params[this._idAttribName] : undefined,
+        getRowNodeId: this._dataUnit ? params => (typeof params === 'string' ? params : params[this._idAttribName]) : undefined,
         getMainMenuItems: (params) => this.buildMenuItemOptions(params),
+        postProcessPopup: (params) => this.setFilterColumnLeftPosition(params),
         getRowHeight: this.getRowHeight.bind(this),
         defaultColDef: {
-          headerClass: "ez-grid__cell-header",
-          cellClass: "ez-grid__cell-body"
+          headerClass: 'ez-grid__cell-header',
+          cellClass: 'ez-grid__cell-body',
         },
         components: {
-          'ezGridHeaderComponent': SelectionHeader,
-          'ezGridCustomHeader': EzGridCustomHeader,
+          ezGridHeaderComponent: SelectionHeader,
+          ezGridCustomHeader: EzGridCustomHeader,
         },
         context: {
           headerCheckStatusGetter: () => this.getSelectionHeaderStatus(),
-          headerCheckStatusSetter: (selectAll) => this.updateSelectionForAll(selectAll)
-        }
+          headerCheckStatusSetter: (selectAll) => this.updateSelectionForAll(selectAll),
+        },
       };
       this.defineRowModelType(this._gridOptions, options);
       this.setOptionsEvents(this._gridOptions);
@@ -123726,17 +123796,22 @@ class AgGridController {
       this._gridOptions.api.setHeaderHeight(this.getHeaderRowHeight());
     }
   }
+  setFilterColumnLeftPosition(params) {
+    if (params.type === 'columnMenu') {
+      const ePopup = params.ePopup;
+      const leftString = ePopup.style.left.replace('px', '');
+      this._filterColumnleftPosition = `${calcFilterColumnLeftPosition(parseInt(leftString))}px`;
+      return;
+    }
+  }
   buildMenuItemOptions(params) {
     const col = params.column;
     const items = [];
     if (col.getColDef().sortable) {
       items.push(this.buildMenuItemOptionSort(params, 'asc'));
       items.push(this.buildMenuItemOptionSort(params, 'desc'));
+      items.push(this.buildMenuItemFilterColumn(params));
     }
-    /*
-        TODO: Adicionar quando filtro de colunar estiver finalizado.
-        items.push(this.buildMenuItemFilterColumn(params));
-    */
     this._menuItems.forEach(m => items.push({
       icon: m.icon,
       name: m.label,
@@ -123747,31 +123822,31 @@ class AgGridController {
   }
   buildMenuItemOptionSort(params, sortOrder) {
     return {
-      icon: `<div style="${sortOrder === "asc" ? 'transform: rotate(180deg); position: relative; top: -4px;' : ''}"><i class='ez-icon-arrow_downward'></i></div>`,
-      name: sortOrder === "asc" ? "Ordenar Ascendente" : "Ordenar Descendente",
-      action: () => this.sortDataByColumn(params, sortOrder)
-    };
-  }
-  /*
-  TODO: Voltar função quando for implementado o filtro de coluna
-  private buildMenuItemFilterColumn( _params: GetMainMenuItemsParams): MenuItemDef{
-      return {
-          icon: `<i class='ez-icon-filter'></i>`,
-          name: "Filtrar",
-          action: () => window.alert("Abrir popover de filtro")
-      }
-  }*/
+      icon: `<i class='ez-icon-arrow_downward'></i>`,
+      name: sortOrder === 'asc' ? 'Ordenar Ascendente' : 'Ordenar Descendente',
+      action: () => this.sortDataByColumn(params, sortOrder),
+    };
+  }
+  buildMenuItemFilterColumn(params) {
+    const columnName = params.column.getId();
+    const columnLabel = params.column.getColDef().headerName;
+    return {
+      icon: `<i class='ez-icon-filter'></i>`,
+      name: 'Filtrar',
+      action: () => this.showFilterColumn({ columnName, columnLabel, leftPosition: this._filterColumnleftPosition, filteredOptions: this._filteredColumns.get(columnName) }),
+    };
+  }
   buildMenuItemOptionPin(params) {
     const { column, columnApi } = params;
     const isPinned = params.column.isPinned();
     return {
       icon: `<i class='ez-icon-${isPinned ? 'un-pin' : 'push-pin'}'></i>`,
-      name: isPinned ? "Desafixar coluna" : "Fixar coluna",
+      name: isPinned ? 'Desafixar coluna' : 'Fixar coluna',
       action: () => {
         columnApi.applyColumnState({
           state: [{ colId: column.getColId(), pinned: column.isPinned() ? null : 'left' }],
         });
-      }
+      },
     };
   }
   sortDataByColumn(params, order) {
@@ -123823,9 +123898,9 @@ class AgGridController {
           (_h = this._dataUnit) === null || _h === void 0 ? void 0 : _h.nextRecord();
         }
         return params.nextCellPosition;
-      case "ArrowLeft":
-      case "ArrowRight":
-        if (((_j = params.nextCellPosition) === null || _j === void 0 ? void 0 : _j.column.colDef.headerName) !== "") {
+      case 'ArrowLeft':
+      case 'ArrowRight':
+        if (((_j = params.nextCellPosition) === null || _j === void 0 ? void 0 : _j.column.colDef.headerName) !== '') {
           return params.nextCellPosition;
         }
         else {
@@ -123836,21 +123911,21 @@ class AgGridController {
   }
   defineRowModelType(opt, sourceOptions) {
     if (this._dataUnit != undefined) {
-      opt.rowModelType = "serverSide";
+      opt.rowModelType = 'serverSide';
       opt.serverSideDatasource = new DataSource(this._dataUnit, this, sourceOptions);
       opt.serverSideSortOnServer = true;
       opt.columnDefs = this._colDefs;
     }
   }
   setOptionsEvents(opt) {
-    opt.onSortChanged = e => this.onCallStateChange("sort", e);
-    opt.onColumnResized = e => this.onCallStateChange("columnResize", e);
-    opt.onColumnPinned = e => this.onCallStateChange("columnPinned", e);
-    opt.onColumnMoved = e => this.onCallStateChange("columnMoved", e);
-    opt.onColumnVisible = e => this.onCallStateChange("visibleChange", e);
+    opt.onSortChanged = e => this.onCallStateChange('sort', e);
+    opt.onColumnResized = e => this.onCallStateChange('columnResize', e);
+    opt.onColumnPinned = e => this.onCallStateChange('columnPinned', e);
+    opt.onColumnMoved = e => this.onCallStateChange('columnMoved', e);
+    opt.onColumnVisible = e => this.onCallStateChange('visibleChange', e);
     opt.onSelectionChanged = e => this.onSelectionChange(e);
     opt.onRowDoubleClicked = evt => this.onRowDoubleClick(evt);
-    opt.onDragStopped = evt => this.onCallStateChange("columnMovedEnd", evt);
+    opt.onDragStopped = evt => this.onCallStateChange('columnMovedEnd', evt);
   }
   setOptionsSupress(opt) {
     opt.suppressDragLeaveHidesColumns = true;
@@ -123884,18 +123959,18 @@ class AgGridController {
   }
   setData(data) {
     if (this._grid === undefined) {
-      throw new Error("Erro interno: Grid ainda não inicializado.");
+      throw new Error('Erro interno: Grid ainda não inicializado.');
     }
     this._gridOptions.api.setRowData(data);
   }
   addRows() {
     if (this._grid === undefined) {
-      throw new Error("Erro interno: Grid ainda não inicializado.");
+      throw new Error('Erro interno: Grid ainda não inicializado.');
     }
   }
   updateRows() {
     if (this._grid === undefined) {
-      throw new Error("Erro interno: Grid ainda não inicializado.");
+      throw new Error('Erro interno: Grid ainda não inicializado.');
     }
   }
   selectAll(quietly = false) {
@@ -123918,7 +123993,7 @@ class AgGridController {
     try {
       this._gridOptions.context.selectionChangeQuietly = quietly;
       if (this._grid === undefined) {
-        throw new Error("Erro interno: Grid ainda não inicializado.");
+        throw new Error('Erro interno: Grid ainda não inicializado.');
       }
       let lastSelected;
       this._gridOptions.api.forEachNode(node => {
@@ -123950,13 +124025,13 @@ class AgGridController {
   }
   removeRows() {
     if (this._grid === undefined) {
-      throw new Error("Erro interno: Grid ainda não inicializado.");
+      throw new Error('Erro interno: Grid ainda não inicializado.');
     }
     this._gridOptions.api.refreshServerSide({ purge: true });
   }
   changeValues(changes, rowIds) {
     if (this._grid === undefined) {
-      throw new Error("Erro interno: Grid ainda não inicializado.");
+      throw new Error('Erro interno: Grid ainda não inicializado.');
     }
     if (changes) {
       let rowNodes;
@@ -123983,7 +124058,7 @@ class AgGridController {
   }
   refresh() {
     if (this._grid === undefined) {
-      throw new Error("Erro interno: Grid ainda não inicializado.");
+      throw new Error('Erro interno: Grid ainda não inicializado.');
     }
     this._gridOptions.api.refreshServerSide({ purge: false });
   }
@@ -124001,17 +124076,19 @@ class AgGridController {
   }
   setFocusOnRow(rowIndex) {
     let displayedColumns = this._gridOptions.columnApi.getAllDisplayedColumns();
-    let firstCell = displayedColumns.find((column) => column.getColDef().headerName !== "");
+    let firstCell = displayedColumns.find(column => column.getColDef().headerName !== '');
     this._gridOptions.api.ensureColumnVisible(firstCell);
     this._gridOptions.api.ensureIndexVisible(rowIndex);
     this._gridOptions.api.setFocusedCell(rowIndex, firstCell);
   }
   setColumnsDef(cols) {
-    const newColDefs = [Object.assign({ colId: this.CHECK_BOX_COL_ID, headerName: "", checkboxSelection: true, width: 29, suppressMovable: true, suppressAutoSize: true, suppressMenu: true, lockPosition: true, pinned: true }, this._multipleSelection && { headerComponent: "ezGridHeaderComponent", headerClass: "ag-column-select-header" })];
+    const newColDefs = [
+      Object.assign({ colId: this.CHECK_BOX_COL_ID, headerName: '', checkboxSelection: true, width: 29, suppressMovable: true, suppressAutoSize: true, suppressMenu: true, lockPosition: true, pinned: true }, (this._multipleSelection && { headerComponent: 'ezGridHeaderComponent', headerClass: 'ag-column-select-header' })),
+    ];
     if (this._statusResolver != undefined) {
       newColDefs.push({
         colId: this.STATUS_COL_ID,
-        headerName: "",
+        headerName: '',
         checkboxSelection: false,
         headerCheckboxSelection: false,
         width: 29,
@@ -124022,11 +124099,11 @@ class AgGridController {
         pinned: true,
         cellRenderer: CellRendererStatus,
         cellRendererParams: {
-          statusResolver: this._statusResolver
+          statusResolver: this._statusResolver,
         },
         cellStyle: {
-          "text-align": "center"
-        }
+          'text-align': 'center',
+        },
       });
     }
     cols.forEach(c => {
@@ -124039,25 +124116,27 @@ class AgGridController {
   }
   getColumnsDef() {
     if (this._grid === undefined) {
-      throw new Error("Erro interno: Grid ainda não inicializado.");
+      throw new Error('Erro interno: Grid ainda não inicializado.');
     }
     const colDef = this._gridOptions.columnApi.getColumns();
-    return colDef.filter(c => ![this.CHECK_BOX_COL_ID, this.STATUS_COL_ID].includes(c.getColId())).map(c => {
+    return colDef
+      .filter(c => ![this.CHECK_BOX_COL_ID, this.STATUS_COL_ID].includes(c.getColId()))
+      .map(c => {
       const def = c.getColDef();
       const colDef = { name: def.field, label: def.headerName };
-      this.conditionalSet(colDef, "sortable", def.sortable);
-      this.conditionalSet(colDef, "resizable", def.resizable);
-      this.conditionalSet(colDef, "sort", def.sort);
-      this.conditionalSet(colDef, "sortIndex", def.sortIndex);
-      this.conditionalSet(colDef, "width", def.width);
-      this.conditionalSet(colDef, "pinned", def.pinned !== null);
-      this.conditionalSet(colDef, "hidden", def.hide);
+      this.conditionalSet(colDef, 'sortable', def.sortable);
+      this.conditionalSet(colDef, 'resizable', def.resizable);
+      this.conditionalSet(colDef, 'sort', def.sort);
+      this.conditionalSet(colDef, 'sortIndex', def.sortIndex);
+      this.conditionalSet(colDef, 'width', def.width);
+      this.conditionalSet(colDef, 'pinned', def.pinned !== null);
+      this.conditionalSet(colDef, 'hidden', def.hide);
       return colDef;
     });
   }
   setColumnsState(state) {
     if (this._grid === undefined) {
-      throw new Error("Erro interno: Grid ainda não inicializado.");
+      throw new Error('Erro interno: Grid ainda não inicializado.');
     }
     const colDef = this._gridOptions.columnApi.getColumns();
     let columns = this.getColumnsDef();
@@ -124086,24 +124165,26 @@ class AgGridController {
   }
   getColumnsState() {
     if (this._grid === undefined) {
-      throw new Error("Erro interno: Grid ainda não inicializado.");
+      throw new Error('Erro interno: Grid ainda não inicializado.');
     }
     const colState = this._gridOptions.columnApi.getColumnState();
-    return colState.map(s => {
+    return colState
+      .map(s => {
       const def = this._gridOptions.columnApi.getColumn(s.colId).getColDef();
       const label = def.headerName;
-      const name = def.checkboxSelection ? "__SELECTION__" : s.colId;
+      const name = def.checkboxSelection ? '__SELECTION__' : s.colId;
       const colState = { label, name };
-      this.conditionalSet(colState, "sort", s.sort);
-      this.conditionalSet(colState, "sortIndex", s.sortIndex);
-      this.conditionalSet(colState, "width", s.width);
-      this.conditionalSet(colState, "pinned", s.pinned !== null);
-      this.conditionalSet(colState, "hidden", s.hide);
+      this.conditionalSet(colState, 'sort', s.sort);
+      this.conditionalSet(colState, 'sortIndex', s.sortIndex);
+      this.conditionalSet(colState, 'width', s.width);
+      this.conditionalSet(colState, 'pinned', s.pinned !== null);
+      this.conditionalSet(colState, 'hidden', s.hide);
       const props = new Map();
       props.set('sortable', def.sortable);
-      this.conditionalSet(colState, "props", props);
+      this.conditionalSet(colState, 'props', props);
       return colState;
-    }).filter(c => c.name !== "__SELECTION__" && c.name !== this.STATUS_COL_ID);
+    })
+      .filter(c => c.name !== '__SELECTION__' && c.name !== this.STATUS_COL_ID);
   }
   getSelection() {
     return this._gridOptions.api.getSelectedRows();
@@ -124121,7 +124202,7 @@ class AgGridController {
         fields: this._gridOptions.columnApi
           .getColumns()
           .filter(col => col.isVisible() && ![this.CHECK_BOX_COL_ID, this.STATUS_COL_ID, this.RECORD_ARCHIVE_COL_ID].includes(col.getColId()))
-          .map(col => col.getColId())
+          .map(col => col.getColId()),
       };
       this._dataSource.quickFilter = quickFilter;
     }
@@ -124133,23 +124214,20 @@ class AgGridController {
     var _a;
     (_a = this._gridOptions.api.getDisplayedRowAtIndex(index)) === null || _a === void 0 ? void 0 : _a.setSelected(true);
   }
-  hasFilterColumn(_columnName) {
-    return false; //TODO: substituir pelo state dos filtros de colunas
-  }
-  showColumnFilter() {
-    /*
-    TODO: Implementar chamada para apresentar filtro de coluna na grid
-    */
+  hasFilterColumn(columnName) {
+    var _a;
+    const filterOptions = (_a = this._filteredColumns.get(columnName)) !== null && _a !== void 0 ? _a : [];
+    return filterOptions.map(item => item.check).includes(true);
   }
   buildColDef(source) {
     var _a, _b, _c;
     let tooltip = undefined;
-    const propSortable = StringUtils$1.getBooleanValue((_a = source.props) === null || _a === void 0 ? void 0 : _a.get("gridSortable"), true);
-    if ((_b = source.props) === null || _b === void 0 ? void 0 : _b.get("gridHeaderTooltip")) {
-      tooltip = (_c = source.props) === null || _c === void 0 ? void 0 : _c.get("gridHeaderTooltip");
+    const propSortable = StringUtils$1.getBooleanValue((_a = source.props) === null || _a === void 0 ? void 0 : _a.get('gridSortable'), true);
+    if ((_b = source.props) === null || _b === void 0 ? void 0 : _b.get('gridHeaderTooltip')) {
+      tooltip = (_c = source.props) === null || _c === void 0 ? void 0 : _c.get('gridHeaderTooltip');
     }
     else if (propSortable === false) {
-      tooltip = "Coluna não pode ser ordenada";
+      tooltip = 'Coluna não pode ser ordenada';
     }
     return {
       headerName: source.label,
@@ -124159,18 +124237,19 @@ class AgGridController {
       headerComponent: 'ezGridCustomHeader',
       headerComponentParams: {
         tooltip: tooltip,
+        isSortable: propSortable,
         hasFilter: () => this.hasFilterColumn(source.name),
-        showColumnFilter: () => this.showColumnFilter()
+        showColumnFilter: (leftPosition) => this.showFilterColumn({ columnName: source.name, columnLabel: source.label, leftPosition, filteredOptions: this._filteredColumns.get(source.name) }),
       },
       valueFormatter: params => {
         return this.getFormatterByColumn(params, source);
       },
-      cellStyle: this.getStyleByColumn(source)
+      cellStyle: this.getStyleByColumn(source),
     };
   }
   getInitCellStyle() {
     return {
-      "line-height": (this.getRowHeight() - 1) + "px"
+      'line-height': this.getRowHeight() - 1 + 'px',
     };
   }
   getStyleByColumn(source) {
@@ -124178,32 +124257,34 @@ class AgGridController {
     switch (source === null || source === void 0 ? void 0 : source.userInterface) {
       case UserInterface.DECIMALNUMBER:
       case UserInterface.INTEGERNUMBER:
-        cellStyle["text-align"] = "right";
+        cellStyle['text-align'] = 'right';
         break;
       case UserInterface.DATE:
       case UserInterface.DATETIME:
       case UserInterface.TIME:
-        cellStyle["text-align"] = "center";
+        cellStyle['text-align'] = 'center';
         break;
       default:
-        cellStyle["text-align"] = "left";
+        cellStyle['text-align'] = 'left';
     }
     return cellStyle;
   }
   getFormatterByColumn(params, source) {
     var _a;
-    if ((source === null || source === void 0 ? void 0 : source.userInterface) === "OPTIONSELECTOR" && source.options) {
+    if ((source === null || source === void 0 ? void 0 : source.userInterface) === 'OPTIONSELECTOR' && source.options) {
       const prop = source === null || source === void 0 ? void 0 : source.options;
       let options;
-      if (typeof prop === "string") {
+      if (typeof prop === 'string') {
         const parsed = JSON.parse(prop);
-        options = Object.keys(parsed).map(key => { return { value: key, label: parsed[key] }; });
+        options = Object.keys(parsed).map(key => {
+          return { value: key, label: parsed[key] };
+        });
       }
       else {
         options = prop;
       }
       let optionSelected;
-      options.forEach((option) => {
+      options.forEach(option => {
         if (option.value == params.value) {
           optionSelected = option;
         }
@@ -124211,16 +124292,16 @@ class AgGridController {
       return optionSelected === null || optionSelected === void 0 ? void 0 : optionSelected.label;
     }
     if ((source === null || source === void 0 ? void 0 : source.userInterface) === UserInterface.SWITCH) {
-      if ((params === null || params === void 0 ? void 0 : params.value) === "S" || (params === null || params === void 0 ? void 0 : params.value) === true || (params === null || params === void 0 ? void 0 : params.value) === "true") {
-        return "Sim";
+      if ((params === null || params === void 0 ? void 0 : params.value) === 'S' || (params === null || params === void 0 ? void 0 : params.value) === true || (params === null || params === void 0 ? void 0 : params.value) === 'true') {
+        return 'Sim';
       }
-      else if ((params === null || params === void 0 ? void 0 : params.value) === "N" || (params === null || params === void 0 ? void 0 : params.value) === false || (params === null || params === void 0 ? void 0 : params.value) === "false") {
-        return "Não";
+      else if ((params === null || params === void 0 ? void 0 : params.value) === 'N' || (params === null || params === void 0 ? void 0 : params.value) === false || (params === null || params === void 0 ? void 0 : params.value) === 'false') {
+        return 'Não';
       }
     }
     if ((source === null || source === void 0 ? void 0 : source.userInterface) === UserInterface.SEARCH) {
       if (((_a = params === null || params === void 0 ? void 0 : params.value) === null || _a === void 0 ? void 0 : _a.value) != undefined) {
-        return params.value.value + " - " + params.value.label;
+        return params.value.value + ' - ' + params.value.label;
       }
       else {
         return params === null || params === void 0 ? void 0 : params.value;
@@ -124228,7 +124309,7 @@ class AgGridController {
     }
     if ((source === null || source === void 0 ? void 0 : source.userInterface) === UserInterface.DECIMALNUMBER) {
       if (params.value != undefined) {
-        const precision = Number(source.props.get("precision")) || 2;
+        const precision = Number(source.props.get('precision')) || 2;
         return NumberUtils$1.format(params.value.toString(), precision, precision);
       }
     }
@@ -124239,7 +124320,7 @@ class AgGridController {
     }
   }
   onCallStateChange(type, e) {
-    const finished = !("finished" in e) || e["finished"];
+    const finished = !('finished' in e) || e['finished'];
     if (finished && this._columnStateChangeCallback) {
       let info = {};
       let isUserChange = this.isUIEvent(e['source'], e['type']);
@@ -124252,10 +124333,10 @@ class AgGridController {
     }
   }
   isElementResize(e) {
-    return e["target"] && e["target"].getAttribute("ref") === "eResize";
+    return e['target'] && e['target'].getAttribute('ref') === 'eResize';
   }
   isUIEvent(source, type) {
-    let optionsArr = ["uiColumnMoved", "uiColumnResized", "uiColumnDragged", "uiColumnExpanded", "uiColumnSorted"];
+    let optionsArr = ['uiColumnMoved', 'uiColumnResized', 'uiColumnDragged', 'uiColumnExpanded', 'uiColumnSorted'];
     if (type === 'dragStopped') {
       return true;
     }
@@ -124273,14 +124354,14 @@ class AgGridController {
             const selectionInfo = this._dataUnit;
             this._selectionChangeCallback({
               selection: selectionInfo.records,
-              selectionHeaderStatus: this.getSelectionHeaderStatus()
+              selectionHeaderStatus: this.getSelectionHeaderStatus(),
             });
           }
           else {
             this._dataUnit.updatePageSelection(this._gridOptions.api.getSelectedRows().map((r) => r.__record__id__)).then(selectionInfo => {
               this._selectionChangeCallback({
                 selection: selectionInfo.records,
-                selectionHeaderStatus: this.getSelectionHeaderStatus()
+                selectionHeaderStatus: this.getSelectionHeaderStatus(),
               });
             });
           }
@@ -124288,7 +124369,7 @@ class AgGridController {
         else {
           this._selectionChangeCallback({
             selection: this._gridOptions.api.getSelectedRows(),
-            selectionHeaderStatus: this.getSelectionHeaderStatus()
+            selectionHeaderStatus: this.getSelectionHeaderStatus(),
           });
         }
       }, 0);
@@ -124316,7 +124397,7 @@ class AgGridController {
     if ((field === null || field === void 0 ? void 0 : field.userInterface) === UserInterface.SEARCH) {
       return this.DEFAULT_MAX_SIZE;
     }
-    const labelSize = ((((_b = field === null || field === void 0 ? void 0 : field.label) === null || _b === void 0 ? void 0 : _b.length) || 0) * this.DEFAULT_FONT_SIZE) + this.DEFAULT_ICON_SIZE;
+    const labelSize = (((_b = field === null || field === void 0 ? void 0 : field.label) === null || _b === void 0 ? void 0 : _b.length) || 0) * this.DEFAULT_FONT_SIZE + this.DEFAULT_ICON_SIZE;
     return labelSize > this.DEFAULT_MAX_SIZE ? this.DEFAULT_MAX_SIZE : labelSize;
   }
 }
@@ -124349,8 +124430,9 @@ function getElementID(sufix) {
   };
 }
 
-const ezGridCss = ".sc-ez-grid-h{display:grid;grid-template-rows:auto 1fr auto;height:100%;width:100%;--ez-grid__header--background-color:var(--background--xlight, #FFF);--ez-grid__selection-counter--z-index:var(--more-visible, 2);--ez-grid__container--shadow:0 0 16px 0 rgb(0 38 111 / 12%)}[no-header].sc-ez-grid-h{grid-template-rows:1fr auto}.grid-header.sc-ez-grid{display:flex;justify-content:space-between;align-items:center;background-color:var(--ez-grid__header--background-color, #FFF);z-index:var(--visible)}.grid__container.sc-ez-grid{padding-top:15px;margin-top:-12px;box-shadow:var(--ez-grid__container--shadow);background-color:var(--ez-grid__header--background-color)}.grid-header__container.sc-ez-grid{display:flex;align-items:center}.grid__selection-counter.sc-ez-grid{position:fixed;white-space:nowrap;transform:translate(-50%, 0px);left:50%;opacity:0;bottom:-100%;transition:opacity 0.1s, bottom 0.5s;z-index:var(--ez-grid__selection-counter--z-index)}.grid__selection-counter--opened.sc-ez-grid{opacity:1;bottom:0px}.grid__btn-close.sc-ez-grid{display:flex;align-items:center;justify-content:center;padding:0;outline:none;width:20px;height:20px;border:none;background-color:unset;cursor:pointer}.grid__btn-clear.sc-ez-grid{--ez-button--link-color:var(--color--alert-warning-900, #8C6B00);--ez-button--link--hover-color:var(--color--alert-warning-900, #8C6B00)}[no-header].sc-ez-grid-h .grid-header.sc-ez-grid{display:none}";
+const ezGridCss = ".sc-ez-grid-h{display:grid;grid-template-rows:auto 1fr auto;height:100%;width:100%;--ez-grid__header--background-color:var(--background--xlight, #FFF);--ez-grid__selection-counter--z-index:var(--more-visible, 2);--ez-grid__container--shadow:0 0 16px 0 rgb(0 38 111 / 12%)}[no-header].sc-ez-grid-h{grid-template-rows:1fr auto}.grid-header.sc-ez-grid{display:grid;justify-content:space-between;align-items:center;grid-template-columns:1fr;background-color:var(--ez-grid__header--background-color, #FFF);z-index:var(--visible)}.grid__container.sc-ez-grid{padding-top:15px;margin-top:-12px;box-shadow:var(--ez-grid__container--shadow);background-color:var(--ez-grid__header--background-color)}.grid-header__popover.sc-ez-grid{position:relative;top:var(--space--sm, 16px)}.grid-header__container.sc-ez-grid{display:flex;align-items:center}.grid-header__position.sc-ez-grid{display:flex;align-items:center;justify-content:space-between}.grid__selection-counter.sc-ez-grid{position:fixed;white-space:nowrap;transform:translate(-50%, 0px);left:50%;opacity:0;bottom:-100%;transition:opacity 0.1s, bottom 0.5s;z-index:var(--ez-grid__selection-counter--z-index)}.grid__selection-counter--opened.sc-ez-grid{opacity:1;bottom:0px}.grid__btn-close.sc-ez-grid{display:flex;align-items:center;justify-content:center;padding:0;outline:none;width:20px;height:20px;border:none;background-color:unset;cursor:pointer}.grid__btn-clear.sc-ez-grid{--ez-button--link-color:var(--color--alert-warning-900, #8C6B00);--ez-button--link--hover-color:var(--color--alert-warning-900, #8C6B00)}[no-header].sc-ez-grid-h .grid-header.sc-ez-grid{display:none}";
 
+const windowInstace$1 = window;
 const EzGrid$1 = class extends HTMLElement$1 {
   constructor() {
     super();
@@ -124361,6 +124443,8 @@ const EzGrid$1 = class extends HTMLElement$1 {
     this.configChange = createEvent(this, "configChange", 7);
     this.componentReady = createEvent(this, "componentReady", 7);
     this._gridController = new AgGridController(false);
+    this.timeFadeOutInMs = 3000;
+    this.toastMessageToUpdateFilterColumn = 'Filtro de coluna aplicado com sucesso!';
     this._paginationInfo = undefined;
     this._paginationChangedByKeyboard = true;
     this._showSelectionCounter = false;
@@ -124372,6 +124456,7 @@ const EzGrid$1 = class extends HTMLElement$1 {
     this.serverUrl = undefined;
     this.dataUnit = undefined;
     this.statusResolver = undefined;
+    this.columnfilterDataSource = undefined;
   }
   /**
    * Aplica a definição de colunas.
@@ -124458,7 +124543,7 @@ const EzGrid$1 = class extends HTMLElement$1 {
           newConfigColumn['width'] = columnState.width;
         }
         if (columnState.sort) {
-          newConfigColumn['ascending'] = (columnState.sort.toUpperCase() === 'ASC');
+          newConfigColumn['ascending'] = columnState.sort.toUpperCase() === 'ASC';
           newConfigColumn['orderIndex'] = columnState.sortIndex;
         }
         else {
@@ -124482,23 +124567,23 @@ const EzGrid$1 = class extends HTMLElement$1 {
         return;
       }
       const limitBottom = boundingContainer.bottom - 30;
-      this._gridSelectionCounter.style.bottom = (document.body.clientHeight - limitBottom) + 'px';
+      this._gridSelectionCounter.style.bottom = document.body.clientHeight - limitBottom + 'px';
     }
     else {
-      this._gridSelectionCounter.style.bottom = "";
+      this._gridSelectionCounter.style.bottom = '';
     }
   }
   setEvents() {
-    window.removeEventListener("scroll", this.positionSelectionCounter.bind(this));
-    window.addEventListener("scroll", this.positionSelectionCounter.bind(this));
+    window.removeEventListener('scroll', this.positionSelectionCounter.bind(this));
+    window.addEventListener('scroll', this.positionSelectionCounter.bind(this));
   }
   resizeSelectionCounter() {
     if (this._gridSelectionCounter == undefined) {
       return;
     }
-    this._gridSelectionCounter.style.width = "";
+    this._gridSelectionCounter.style.width = '';
     if (this._gridSelectionCounter.clientHeight > 42) {
-      this._gridSelectionCounter.style.width = "min-content";
+      this._gridSelectionCounter.style.width = 'min-content';
     }
     this.positionSelectionCounter();
   }
@@ -124557,8 +124642,8 @@ const EzGrid$1 = class extends HTMLElement$1 {
   buildDataElementId() {
     const dataInfo = { dataUnit: this.dataUnit };
     ElementIDUtils.addIDInfo(this._element, null, dataInfo);
-    const dtInfo = { id: "ezGrid" };
-    ElementIDUtils.addIDInfo(this._refPaginationControl, "pagination", dtInfo);
+    const dtInfo = { id: 'ezGrid' };
+    ElementIDUtils.addIDInfo(this._refPaginationControl, 'pagination', dtInfo);
   }
   previousPage() {
     if (this.dataUnit) {
@@ -124578,7 +124663,7 @@ const EzGrid$1 = class extends HTMLElement$1 {
       return [
         h("div", { class: "ez-text ez-text--primary ez-text--medium ez-margin-right--medium" }, h("strong", { class: "ez-text ez-text--primary ez-text--medium" }, `${firstRecord}-${lastRecord}`), ` de ${total}`),
         h("ez-button", { size: "small", iconName: "chevron-left", class: "ez-margin-right--medium", mode: "icon", enabled: currentPage > 0, onClick: () => this.previousPage(), label: "P\u00E1gina anterior" }),
-        h("ez-button", { size: "small", iconName: "chevron-right", class: "ez-margin-right--medium", mode: "icon", enabled: hasMore, onClick: () => this.nextPage(), label: "Pr\u00F3xima P\u00E1gina" })
+        h("ez-button", { size: "small", iconName: "chevron-right", class: "ez-margin-right--medium", mode: "icon", enabled: hasMore, onClick: () => this.nextPage(), label: "Pr\u00F3xima P\u00E1gina" }),
       ];
     }
     return null;
@@ -124604,7 +124689,7 @@ const EzGrid$1 = class extends HTMLElement$1 {
       allowMultipleSelection: this.multipleSelection,
       serverURL: this.serverUrl,
       dataUnit: this.dataUnit,
-      statusResolver: this.statusResolver
+      statusResolver: this.statusResolver,
     });
     if (this.config) {
       this.observeConfig(this.config);
@@ -124612,15 +124697,21 @@ const EzGrid$1 = class extends HTMLElement$1 {
     this.buildDataElementId();
     this.setEvents();
     this.componentReady.emit();
+    this._gridController.configFilterColumn(this._filterColumn);
   }
   componentWillRender() {
     this.configSelectionCounter();
   }
+  componentDidRender() {
+    windowInstace$1.addEventListener('onSubmitFilter', () => {
+      this.toastElementRef.show(this.toastMessageToUpdateFilterColumn, this.timeFadeOutInMs, true, true);
+    });
+  }
   render() {
     var _a;
-    return (h(Host, null, h("div", { class: "ez-box ez-box--shadow ez-padding--medium grid-header" }, h("div", { class: "grid-header__container" }, h("slot", { name: "leftButtons" })), h("div", { class: "grid-header__container", ref: ref => this._refPaginationControl = ref }, this.getPaginationControl())), h("div", { ref: (ref) => this._gridSelectionCounter = ref, class: `grid__selection-counter
-          ${this._showSelectionCounter ? "grid__selection-counter--opened" : ""}
-        ` }, h(SelectionCounter, { selectionCount: this._selectionCount, currentPageSelected: this._currentPageSelected, hasPagination: !!this._paginationInfo, total: (_a = this._paginationInfo) === null || _a === void 0 ? void 0 : _a.total, allRecordSelected: this._isAllSelection, onSelectAll: () => this.onSelectAllRecords(), onSelectPage: () => this.onSelectPageRecords(), onClearAll: () => this.onClearSelectedRecords(), onClose: () => this._showSelectionCounter = false })), h("div", { class: "grid__container ez-grid", ref: elem => this._container = elem }), h("div", { class: "grid__footer" }, h("slot", { name: "footer" }))));
+    return (h(Host, null, h("div", { class: "ez-box ez-box--shadow ez-padding--medium grid-header" }, h("filter-column", { class: "grid-header__popover", dataSource: this.columnfilterDataSource, dataUnit: this.dataUnit, ref: (element) => (this._filterColumn = element) }), h("div", { class: "grid-header__position" }, h("div", { class: "grid-header__container" }, h("slot", { name: "leftButtons" })), h("div", { class: "grid-header__container", ref: ref => (this._refPaginationControl = ref) }, this.getPaginationControl()))), h("div", { ref: (ref) => (this._gridSelectionCounter = ref), class: `grid__selection-counter
+          ${this._showSelectionCounter ? 'grid__selection-counter--opened' : ''}
+        ` }, h(SelectionCounter, { selectionCount: this._selectionCount, currentPageSelected: this._currentPageSelected, hasPagination: !!this._paginationInfo, total: (_a = this._paginationInfo) === null || _a === void 0 ? void 0 : _a.total, allRecordSelected: this._isAllSelection, onSelectAll: () => this.onSelectAllRecords(), onSelectPage: () => this.onSelectPageRecords(), onClearAll: () => this.onClearSelectedRecords(), onClose: () => (this._showSelectionCounter = false) })), h("div", { class: "grid__container ez-grid", ref: elem => (this._container = elem) }), h("div", { class: "grid__footer" }, h("slot", { name: "footer" })), h("ez-toast", { ref: (element) => (this.toastElementRef = element) }, h("ez-icon", { slot: "icon", iconName: "check" }))));
   }
   static get assetsDirs() { return ["../assets"]; }
   get _element() { return this; }
@@ -124764,7 +124855,7 @@ const EzIcon$1 = class extends HTMLElement$1 {
   static get style() { return ezIconCss; }
 };
 
-const ezListCss = ":host{--ez-list__host--z-index:var(--visible, 1);--ez-list__host--border-radius:var(--border--radius-medium, 12px);--ez-list__host--padding:var(--space--medium, 12px);--ez-list__icon--padding:var(--space--small, 6px);--ez-list__icon--color:#AFB6C0;--ez-list__item--margin:0 var(--space--small, 6px);--ez-list__item--color:var(--title--primary, #2b3a54);--ez-list__item--border-bottom:var(--border--small, 1px solid);--ez-list__item--border-color:var(--title--primary, #2b3a54);--ez-list__item--font-family:var(--font-pattern, \"Roboto\");--ez-list__item--font-size:var(--text--medium, 14px);--ez-list__selectable--padding-right:var(--space--small, 6px);--ez-list__selectable--padding-left:var(--space--small, 6px);--ez-list__selected-item--border-radius:var(--border--radius-small, 6px);--ez-list__selected-item--background-color:var(--color--primary-300, #E2F4EF);--ez-list__group--font-family:var(--font-pattern, \"Roboto\");--ez-list__group--font-size:var(--text--medium, 14px);--ez-list__group--font-weight:var(--text-weight--large, 600);--ez-list__group--padding-bottom:var(--space-small, 6px);--ez-list__group-overlay--font-family:var(--font-pattern, \"Roboto\");--ez-list__group-overlay--font-size:var(--text--medium, 14px);--ez-list__over--border--color:var(--color--primary, #008561);--ez-list__last-droppable-space--height:var(--space--small, 6px);--ez-list__draggable-list--padding-bottom:var(--space--small, 6px);--ez-list__draggable-icon--image:url('data:image/svg+xml;utf8,<svg width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"m 6.75,2.25 h 1.5 v 1.5 h -1.5 z m 3,0 h 1.5 v 1.5 h -1.5 z m -3,3 h 1.5 v 1.5 h -1.5 z m 3,0 h 1.5 v 1.5 h -1.5 z m -3,3 h 1.5 v 1.5 h -1.5 z m 3,0 h 1.5 v 1.5 h -1.5 z m -3,3 h 1.5 v 1.5 h -1.5 z m 3,0 h 1.5 v 1.5 h -1.5 z m -3,3 h 1.5 v 1.5 h -1.5 z m 3,0 h 1.5 v 1.5 h -1.5 z\"/></svg>');--ez-list__scrollbar--color-default:var(--scrollbar--default, #626e82);--ez-list__scrollbar--color-background:var(--scrollbar--background, #E5EAF0);--ez-list__scrollbar--color-hover:var(--scrollbar--hover, #2B3A54);--ez-list__scrollbar--color-clicked:var(--scrollbar--clicked, #a2abb9);--ez-list__scrollbar--border-radius:var(--border--radius-small, 6px);--ez-list__scrollbar--width:var(--space--medium, 12px);max-height:100%;width:100%;background-color:#fff;display:flex;z-index:var(--ez-list__host--z-index)}p{margin:0}.draggable{width:100%;display:grid;grid-template-columns:minmax(0px, auto) minmax(0px, auto);place-items:center;border-top:1px dashed #fff;justify-content:space-between;font-family:var(--ez-list__item--font-family);font-size:var(--ez-list__item--font-size)}.dragging{background:#FFFFFF;border:1px solid #008561;box-sizing:border-box;box-shadow:0px 0px 16px rgba(0, 38, 111, 0.122);border-radius:6px}.selectable{cursor:pointer;padding-right:var(--ez-list__selectable--padding-right);padding-left:var(--ez-list__selectable--padding-left)}.selectable-container{margin:0px !important}.hover-feedback:hover{background-color:var(--background--medium);border-radius:var(--border--radius-regular)}.item-content{display:flex;overflow:hidden;justify-content:flex-start;align-items:center;width:100%}.draggable-list{padding:0;margin:0;width:100%;max-height:100%;scrollbar-width:thin;color:var(--text-color);scrollbar-color:var(--ez-list__scrollbar--color-clicked) var(--ez-list__scrollbar--color-background)}.draggable-list li{display:flex;height:32px;margin:var(--ez-list__item--margin);font-family:var(--ez-list__item--font-family);font-size:var(--ez-list__item--font-size);color:var(--ez-list__item--color)}.over{border-top:1px dashed var(--ez-list__over--border--color)}.last-droppable-space{height:var(--ez-list__last-droppable-space--height)}.draggable-selected{background-color:var(--background--strong) !important}.draggable-selected div:hover{background-color:var(--background--strong) !important}.draggable-list::-webkit-scrollbar{background-color:var(--ez-list__scrollbar--color-background);width:var(--ez-list__scrollbar--width);max-width:var(--ez-list__scrollbar--width);min-width:var(--ez-list__scrollbar--width)}.draggable-list::-webkit-scrollbar-track{background-color:var(--ez-list__scrollbar--color-background);border-radius:var(--ez-list__scrollbar--border-radius)}.draggable-list::-webkit-scrollbar-thumb{background-color:var(--ez-list__scrollbar--color-default);border-radius:var(--ez-list__scrollbar--border-radius)}.draggable-list::-webkit-scrollbar-thumb:vertical:hover,.draggable-list::-webkit-scrollbar-thumb:horizontal:hover{background-color:var(--ez-list__scrollbar--color-hover)}.draggable-list::-webkit-scrollbar-thumb:vertical:active,.draggable-list::-webkit-scrollbar-thumb:horizontal:active{background-color:var(--ez-list__scrollbar--color-clicked)}.draggable-icon{align-items:flex-start;display:flex;outline:none;border:none;background-color:unset}.draggable-icon::after{content:'';display:flex;width:18px;height:18px;background-color:var(--ez-list__icon--color);-webkit-mask-image:var(--ez-list__draggable-icon--image);mask-image:var(--ez-list__draggable-icon--image)}*{box-sizing:border-box}.checkbox{width:fit-content}.text--ellipsis{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.group-container{display:flex;flex-direction:column;max-height:100%;overflow-y:auto;outline:none;width:100%;scrollbar-width:thin;scrollbar-color:var(--ez-list__scrollbar--color-clicked) var(--ez-list__scrollbar--color-background)}.group-name{-webkit-user-select:none;-moz-user-select:-moz-none;-ms-user-select:none;user-select:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--title--primary);font-family:var(--ez-list__group--font-family);font-size:var(--ez-list__group--font-size);font-weight:var(--ez-list__group--font-weight);padding-bottom:var(--ez-list__group--padding-bottom)}.group{display:flex;flex-direction:column}.group-container::-webkit-scrollbar{background-color:var(--ez-list__scrollbar--color-background);width:var(--ez-list__scrollbar--width);max-width:var(--ez-list__scrollbar--width);min-width:var(--ez-list__scrollbar--width)}.group-container::-webkit-scrollbar-track{background-color:var(--ez-list__scrollbar--color-background);border-radius:var(--ez-list__scrollbar--border-radius)}.group-container::-webkit-scrollbar-thumb{background-color:var(--ez-list__scrollbar--color-default);border-radius:var(--ez-list__scrollbar--border-radius)}.group-container::-webkit-scrollbar-thumb:vertical:hover,.group-container::-webkit-scrollbar-thumb:horizontal:hover{background-color:var(--ez-list__scrollbar--color-hover)}.group-container::-webkit-scrollbar-thumb:vertical:active,.group-container::-webkit-scrollbar-thumb:horizontal:active{background-color:var(--ez-list__scrollbar--color-clicked)}.section-container{display:flex;position:relative;height:100%}.items-container{width:100%;max-height:100%;overflow-y:auto;outline:none;scrollbar-width:thin;scrollbar-color:var(--ez-list__scrollbar--color-clicked) var(--ez-list__scrollbar--color-background)}.group-items-container{width:100%;max-height:100%;height:100%;outline:none}.items-container::-webkit-scrollbar{background-color:var(--ez-list__scrollbar--color-background);width:var(--ez-list__scrollbar--width);max-width:var(--ez-list__scrollbar--width);min-width:var(--ez-list__scrollbar--width)}.items-container::-webkit-scrollbar-track{background-color:var(--ez-list__scrollbar--color-background);border-radius:var(--ez-list__scrollbar--border-radius)}.items-container::-webkit-scrollbar-thumb{background-color:var(--ez-list__scrollbar--color-default);border-radius:var(--ez-list__scrollbar--border-radius)}.items-container::-webkit-scrollbar-thumb:vertical:hover,.items-container::-webkit-scrollbar-thumb:horizontal:hover{background-color:var(--ez-list__scrollbar--color-hover)}.items-container::-webkit-scrollbar-thumb:vertical:active,.items-container::-webkit-scrollbar-thumb:horizontal:active{background-color:var(--ez-list__scrollbar--color-clicked)}.group-overlay{background:rgba(226, 244, 239, 0.8);border:1px solid #008561;border-radius:8px;position:absolute;display:none;place-items:center;top:0;bottom:0;left:0;right:0;z-index:2;margin:0;cursor:pointer;font-family:var(--ez-list__group-overlay--font-family);font-size:var(--ez-list__group-overlay--font-size)}.presetedHeight{min-height:100px}.overlay-text{position:absolute;top:50%;left:50%;font-size:50px;color:white;transform:translate(-50%, -50%);-ms-transform:translate(-50%, -50%)}.selected-item{background:var(--ez-list__selected-item--background-color);border-radius:var(--ez-list__selected-item--border-radius)}.slot-item{align-items:flex-end}.overGroup{background:rgba(226, 244, 239, 0.8);border:1px solid #008561;box-sizing:border-box;border-radius:8px;padding-top:6px}";
+const ezListCss = ":host{--ez-list__host--z-index:var(--visible, 1);--ez-list__host--border-radius:var(--border--radius-medium, 12px);--ez-list__host--padding:var(--space--medium, 12px);--ez-list__icon--padding:var(--space--small, 6px);--ez-list__icon--color:#AFB6C0;--ez-list__item--margin:0 var(--space--small, 6px);--ez-list__item--color:var(--title--primary, #2b3a54);--ez-list__item--border-bottom:var(--border--small, 1px solid);--ez-list__item--border-color:var(--title--primary, #2b3a54);--ez-list__item--font-family:var(--font-pattern, \"Roboto\");--ez-list__item--font-size:var(--text--medium, 14px);--ez-list__selectable--padding-right:var(--space--small, 6px);--ez-list__selectable--padding-left:var(--space--small, 6px);--ez-list__selected-item--border-radius:var(--border--radius-small, 6px);--ez-list__selected-item--background-color:var(--color--primary-300, #E2F4EF);--ez-list__group--font-family:var(--font-pattern, \"Roboto\");--ez-list__group--font-size:var(--text--medium, 14px);--ez-list__group--font-weight:var(--text-weight--large, 600);--ez-list__group--padding-bottom:var(--space-small, 6px);--ez-list__group-overlay--font-family:var(--font-pattern, \"Roboto\");--ez-list__group-overlay--font-size:var(--text--medium, 14px);--ez-list__over--border--color:var(--color--primary, #008561);--ez-list__last-droppable-space--height:var(--space--small, 6px);--ez-list__draggable-list--padding-bottom:var(--space--small, 6px);--ez-list__draggable-icon--image:url('data:image/svg+xml;utf8,<svg width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"m 6.75,2.25 h 1.5 v 1.5 h -1.5 z m 3,0 h 1.5 v 1.5 h -1.5 z m -3,3 h 1.5 v 1.5 h -1.5 z m 3,0 h 1.5 v 1.5 h -1.5 z m -3,3 h 1.5 v 1.5 h -1.5 z m 3,0 h 1.5 v 1.5 h -1.5 z m -3,3 h 1.5 v 1.5 h -1.5 z m 3,0 h 1.5 v 1.5 h -1.5 z m -3,3 h 1.5 v 1.5 h -1.5 z m 3,0 h 1.5 v 1.5 h -1.5 z\"/></svg>');--ez-list__scrollbar--color-default:var(--scrollbar--default, #626e82);--ez-list__scrollbar--color-background:var(--scrollbar--background, #E5EAF0);--ez-list__scrollbar--color-hover:var(--scrollbar--hover, #2B3A54);--ez-list__scrollbar--color-clicked:var(--scrollbar--clicked, #a2abb9);--ez-list__scrollbar--border-radius:var(--border--radius-small, 6px);--ez-list__scrollbar--width:var(--space--medium, 12px);max-height:100%;width:100%;background-color:#fff;display:flex;z-index:var(--ez-list__host--z-index)}p{margin:0}.draggable{width:100%;display:grid;grid-template-columns:minmax(0px, auto) minmax(0px, auto);place-items:center;border-top:1px dashed #fff;justify-content:space-between;font-family:var(--ez-list__item--font-family);font-size:var(--ez-list__item--font-size)}.dragging{background:#FFFFFF;border:1px solid #008561;box-sizing:border-box;box-shadow:0px 0px 16px rgba(0, 38, 111, 0.122);border-radius:6px}.selectable{cursor:pointer;padding-right:var(--ez-list__selectable--padding-right);padding-left:var(--ez-list__selectable--padding-left)}.selectable-container{margin:0px !important}.hover-feedback:hover{background-color:var(--background--medium);border-radius:var(--border--radius-regular)}.item-content{display:flex;overflow:hidden;justify-content:flex-start;align-items:center;width:100%}.draggable-list{padding:0;margin:0;width:100%;max-height:100%;scrollbar-width:thin;color:var(--text-color);scrollbar-color:var(--ez-list__scrollbar--color-clicked) var(--ez-list__scrollbar--color-background)}.draggable-list li{display:flex;height:32px;margin:var(--ez-list__item--margin);font-family:var(--ez-list__item--font-family);font-size:var(--ez-list__item--font-size);color:var(--ez-list__item--color)}.over{border-top:1px dashed var(--ez-list__over--border--color)}.last-droppable-space{height:var(--ez-list__last-droppable-space--height)}.draggable-selected{background-color:var(--background--strong) !important}.draggable-selected div:hover{background-color:var(--background--strong) !important}.draggable-list::-webkit-scrollbar{background-color:var(--ez-list__scrollbar--color-background);width:var(--ez-list__scrollbar--width);max-width:var(--ez-list__scrollbar--width);min-width:var(--ez-list__scrollbar--width)}.draggable-list::-webkit-scrollbar-track{background-color:var(--ez-list__scrollbar--color-background);border-radius:var(--ez-list__scrollbar--border-radius)}.draggable-list::-webkit-scrollbar-thumb{background-color:var(--ez-list__scrollbar--color-default);border-radius:var(--ez-list__scrollbar--border-radius)}.draggable-list::-webkit-scrollbar-thumb:vertical:hover,.draggable-list::-webkit-scrollbar-thumb:horizontal:hover{background-color:var(--ez-list__scrollbar--color-hover)}.draggable-list::-webkit-scrollbar-thumb:vertical:active,.draggable-list::-webkit-scrollbar-thumb:horizontal:active{background-color:var(--ez-list__scrollbar--color-clicked)}.draggable-icon{align-items:flex-start;display:flex;outline:none;border:none;background-color:unset}.draggable-icon::after{content:'';display:flex;width:18px;height:18px;background-color:var(--ez-list__icon--color);-webkit-mask-image:var(--ez-list__draggable-icon--image);mask-image:var(--ez-list__draggable-icon--image)}*{box-sizing:border-box}.checkbox{width:fit-content}.text--ellipsis{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.group-container{display:flex;flex-direction:column;max-height:100%;overflow-y:auto;outline:none;width:100%;scrollbar-width:thin;scrollbar-color:var(--ez-list__scrollbar--color-clicked) var(--ez-list__scrollbar--color-background)}.group-name{-webkit-user-select:none;-moz-user-select:-moz-none;-ms-user-select:none;user-select:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--title--primary);font-family:var(--ez-list__group--font-family);font-size:var(--ez-list__group--font-size);font-weight:var(--ez-list__group--font-weight);padding-bottom:var(--ez-list__group--padding-bottom)}.group{display:flex;flex-direction:column}.group-container::-webkit-scrollbar{background-color:var(--ez-list__scrollbar--color-background);width:var(--ez-list__scrollbar--width);max-width:var(--ez-list__scrollbar--width);min-width:var(--ez-list__scrollbar--width)}.group-container::-webkit-scrollbar-track{background-color:var(--ez-list__scrollbar--color-background);border-radius:var(--ez-list__scrollbar--border-radius)}.group-container::-webkit-scrollbar-thumb{background-color:var(--ez-list__scrollbar--color-default);border-radius:var(--ez-list__scrollbar--border-radius)}.group-container::-webkit-scrollbar-thumb:vertical:hover,.group-container::-webkit-scrollbar-thumb:horizontal:hover{background-color:var(--ez-list__scrollbar--color-hover)}.group-container::-webkit-scrollbar-thumb:vertical:active,.group-container::-webkit-scrollbar-thumb:horizontal:active{background-color:var(--ez-list__scrollbar--color-clicked)}.section-container{display:flex;position:relative;height:100%}.items-container{width:100%;max-height:100%;outline:none;scrollbar-width:thin;scrollbar-color:var(--ez-list__scrollbar--color-clicked) var(--ez-list__scrollbar--color-background)}.group-items-container{width:100%;max-height:100%;height:100%;outline:none}.items-container::-webkit-scrollbar{background-color:var(--ez-list__scrollbar--color-background);width:var(--ez-list__scrollbar--width);max-width:var(--ez-list__scrollbar--width);min-width:var(--ez-list__scrollbar--width)}.items-container::-webkit-scrollbar-track{background-color:var(--ez-list__scrollbar--color-background);border-radius:var(--ez-list__scrollbar--border-radius)}.items-container::-webkit-scrollbar-thumb{background-color:var(--ez-list__scrollbar--color-default);border-radius:var(--ez-list__scrollbar--border-radius)}.items-container::-webkit-scrollbar-thumb:vertical:hover,.items-container::-webkit-scrollbar-thumb:horizontal:hover{background-color:var(--ez-list__scrollbar--color-hover)}.items-container::-webkit-scrollbar-thumb:vertical:active,.items-container::-webkit-scrollbar-thumb:horizontal:active{background-color:var(--ez-list__scrollbar--color-clicked)}.group-overlay{background:rgba(226, 244, 239, 0.8);border:1px solid #008561;border-radius:8px;position:absolute;display:none;place-items:center;top:0;bottom:0;left:0;right:0;z-index:2;margin:0;cursor:pointer;font-family:var(--ez-list__group-overlay--font-family);font-size:var(--ez-list__group-overlay--font-size)}.presetedHeight{min-height:100px}.overlay-text{position:absolute;top:50%;left:50%;font-size:50px;color:white;transform:translate(-50%, -50%);-ms-transform:translate(-50%, -50%)}.selected-item{background:var(--ez-list__selected-item--background-color);border-radius:var(--ez-list__selected-item--border-radius)}.slot-item{align-items:flex-end}.overGroup{background:rgba(226, 244, 239, 0.8);border:1px solid #008561;box-sizing:border-box;border-radius:8px;padding-top:6px}";
 
 const EzList$1 = class extends HTMLElement$1 {
   constructor() {
@@ -124778,7 +124869,7 @@ const EzList$1 = class extends HTMLElement$1 {
     this._listItems = [];
     this._listGroupItems = [];
     this.dataSource = [];
-    this.listMode = "regular";
+    this.listMode = 'regular';
     this.useGroups = false;
     this.ezDraggable = false;
     this.ezSelectable = false;
@@ -124796,10 +124887,10 @@ const EzList$1 = class extends HTMLElement$1 {
    */
   async scrollToTop() {
     if (this.useGroups) {
-      this._element.shadowRoot.querySelector(".group-container").scrollTop = 0;
+      this._element.shadowRoot.querySelector('.group-container').scrollTop = 0;
     }
     else {
-      this._element.shadowRoot.querySelector(".items-container").scrollTop = 0;
+      this._element.shadowRoot.querySelector('.items-container').scrollTop = 0;
     }
   }
   /**
@@ -124835,9 +124926,9 @@ const EzList$1 = class extends HTMLElement$1 {
         this._listItems = newList;
       }
       if (scrollToOption) {
-        let liElem = this.useGroups ?
-          this._groupContainer.querySelector("li#item_" + this.getItemId(selectedItem.label))
-          : this._itemContainer.querySelector("li#item_" + this.getItemId(selectedItem.label));
+        let liElem = this.useGroups
+          ? this._groupContainer.querySelector('li#item_' + this.getItemId(selectedItem.label))
+          : this._itemContainer.querySelector('li#item_' + this.getItemId(selectedItem.label));
         if (liElem) {
           liElem.scrollIntoView();
         }
@@ -124854,7 +124945,7 @@ const EzList$1 = class extends HTMLElement$1 {
     let selectedItem;
     if (this.useGroups) {
       this._listGroupItems.every(group => {
-        let item = group.items.find((item) => item.selected == true);
+        let item = group.items.find(item => item.selected == true);
         if (item) {
           selectedItem = item;
           return false;
@@ -124863,7 +124954,7 @@ const EzList$1 = class extends HTMLElement$1 {
       });
     }
     else {
-      selectedItem = this._listItems.find((item) => item.selected == true);
+      selectedItem = this._listItems.find(item => item.selected == true);
     }
     return selectedItem;
   }
@@ -124893,7 +124984,7 @@ const EzList$1 = class extends HTMLElement$1 {
       itemGroup.items.sort(function (a, b) {
         return a.label < b.label ? -1 : a.label > b.label ? 1 : 0;
       });
-      if (itemGroup.sort === "DSC") {
+      if (itemGroup.sort === 'DSC') {
         itemGroup.items.reverse();
       }
     }
@@ -124918,19 +125009,19 @@ const EzList$1 = class extends HTMLElement$1 {
   }
   buildIdDraggableListAndSelectable() {
     const shadow = this._element.shadowRoot;
-    const draggableList = shadow.querySelectorAll(".draggable-list");
+    const draggableList = shadow.querySelectorAll('.draggable-list');
     draggableList === null || draggableList === void 0 ? void 0 : draggableList.forEach((draggable, index) => {
       var _a, _b;
-      let suffix = "draggableList";
+      let suffix = 'draggableList';
       const group = (_b = (_a = this._listGroupItems) === null || _a === void 0 ? void 0 : _a[index]) === null || _b === void 0 ? void 0 : _b.group;
       if (this.useGroups && group) {
         suffix = suffix.concat('_', group);
       }
       ElementIDUtils.addIDInfoIfNotExists(draggable, suffix);
     });
-    const selectable = shadow.querySelectorAll(".selectable-container");
+    const selectable = shadow.querySelectorAll('.selectable-container');
     selectable === null || selectable === void 0 ? void 0 : selectable.forEach((item) => {
-      ElementIDUtils.addIDInfoIfNotExists(item, "selectable");
+      ElementIDUtils.addIDInfoIfNotExists(item, 'selectable');
     });
   }
   componentWillLoad() {
@@ -124957,15 +125048,17 @@ const EzList$1 = class extends HTMLElement$1 {
         //Adiciona item arrastado
         if (groupEnd.sort) {
           newList.find(group => group.group == dragEndItem.groupName).items.push(this._dragStartItem.item);
-          newList.find(group => group.group == dragEndItem.groupName).items.sort(function (a, b) {
+          newList
+            .find(group => group.group == dragEndItem.groupName)
+            .items.sort(function (a, b) {
             return a.label < b.label ? -1 : a.label > b.label ? 1 : 0;
           });
-          if (groupEnd.sort === "DSC") {
+          if (groupEnd.sort === 'DSC') {
             newList.find(group => group.group == dragEndItem.groupName).items.reverse();
           }
         }
         else {
-          let indexForAdd = (dragEndItem.index > this._dragStartItem.index) ? dragEndItem.index - 1 : dragEndItem.index;
+          let indexForAdd = dragEndItem.index > this._dragStartItem.index ? dragEndItem.index - 1 : dragEndItem.index;
           newList.find(group => group.group == dragEndItem.groupName).items.splice(indexForAdd, 0, this._dragStartItem.item);
         }
         this._listGroupItems = newList;
@@ -124994,10 +125087,12 @@ const EzList$1 = class extends HTMLElement$1 {
         //Adiciona item arrastado
         newList.find(group => group.group == groupDropped.group).items.push(this._dragStartItem.item);
         if (groupEnd.sort) {
-          newList.find(group => group.group == groupDropped.group).items.sort(function (a, b) {
+          newList
+            .find(group => group.group == groupDropped.group)
+            .items.sort(function (a, b) {
             return a.label < b.label ? -1 : a.label > b.label ? 1 : 0;
           });
-          if (groupEnd.sort === "DSC") {
+          if (groupEnd.sort === 'DSC') {
             newList.find(group => group.group == groupDropped.group).items.reverse();
           }
         }
@@ -125060,23 +125155,23 @@ const EzList$1 = class extends HTMLElement$1 {
     }
   }
   addOverClass(element) {
-    if ((element === null || element === void 0 ? void 0 : element.__proto__) == HTMLDivElement.prototype && element.classList.contains("draggable")) {
-      element.classList.add("over");
+    if ((element === null || element === void 0 ? void 0 : element.__proto__) == HTMLDivElement.prototype && element.classList.contains('draggable')) {
+      element.classList.add('over');
     }
-    else if ((element === null || element === void 0 ? void 0 : element.parentElement) && !element.parentElement.classList.contains("draggable-list")) {
+    else if ((element === null || element === void 0 ? void 0 : element.parentElement) && !element.parentElement.classList.contains('draggable-list')) {
       this.addOverClass(element.parentElement);
     }
   }
   addOverGroupClass(ev, group) {
     if (ev.target) {
-      let groupContainer = this._groupContainer.querySelector("div#" + this.getDivGroupId(group.group));
-      let groupOverlay = groupContainer.getElementsByClassName("group-overlay")[0];
+      let groupContainer = this._groupContainer.querySelector('div#' + this.getDivGroupId(group.group));
+      let groupOverlay = groupContainer.getElementsByClassName('group-overlay')[0];
       if (group.items.length > 0) {
-        groupOverlay.setAttribute("style", "display:grid");
+        groupOverlay.setAttribute('style', 'display:grid');
       }
       else {
-        groupOverlay.classList.add("presetedHeight");
-        groupOverlay.setAttribute("style", "display:grid");
+        groupOverlay.classList.add('presetedHeight');
+        groupOverlay.setAttribute('style', 'display:grid');
         groupOverlay.scrollIntoView(false);
       }
     }
@@ -125086,31 +125181,31 @@ const EzList$1 = class extends HTMLElement$1 {
     let overCollection;
     let overLastDroppableCollection;
     if (this.useGroups) {
-      overCollection = (_a = this._groupContainer) === null || _a === void 0 ? void 0 : _a.getElementsByClassName("over");
-      overLastDroppableCollection = this._groupContainer.getElementsByClassName("last-droppable-space");
+      overCollection = (_a = this._groupContainer) === null || _a === void 0 ? void 0 : _a.getElementsByClassName('over');
+      overLastDroppableCollection = this._groupContainer.getElementsByClassName('last-droppable-space');
     }
     else {
-      overCollection = (_b = this._itemContainer) === null || _b === void 0 ? void 0 : _b.getElementsByClassName("over");
-      overLastDroppableCollection = this._itemContainer.getElementsByClassName("last-droppable-space");
+      overCollection = (_b = this._itemContainer) === null || _b === void 0 ? void 0 : _b.getElementsByClassName('over');
+      overLastDroppableCollection = this._itemContainer.getElementsByClassName('last-droppable-space');
     }
     if (overCollection) {
       Array.from(overCollection).forEach(function (element) {
-        element.classList.remove("over");
+        element.classList.remove('over');
       });
     }
     if (overLastDroppableCollection) {
       Array.from(overLastDroppableCollection).forEach(function (element) {
-        element.classList.remove("over");
+        element.classList.remove('over');
       });
     }
   }
   removeOverGroupClass(ev, group) {
     if (ev.target) {
-      let groupContainer = this._groupContainer.querySelector("div#" + this.getDivGroupId(group.group));
-      let groupOverlay = groupContainer.getElementsByClassName("group-overlay")[0];
+      let groupContainer = this._groupContainer.querySelector('div#' + this.getDivGroupId(group.group));
+      let groupOverlay = groupContainer.getElementsByClassName('group-overlay')[0];
       if (groupOverlay) {
-        groupOverlay.classList.remove("presetedHeight");
-        groupOverlay.setAttribute("style", "display:none");
+        groupOverlay.classList.remove('presetedHeight');
+        groupOverlay.setAttribute('style', 'display:none');
       }
     }
   }
@@ -125175,7 +125270,7 @@ const EzList$1 = class extends HTMLElement$1 {
         let itemIndex = group.items.findIndex(item => item.label == selectedItem.label);
         if (itemIndex != undefined && itemIndex != -1) {
           if (itemIndex === 0) {
-            if ((groupIndex - 1 >= 0)) {
+            if (groupIndex - 1 >= 0) {
               item = { label: listGroupItems[groupIndex - 1].items[listGroupItems[groupIndex - 1].items.length - 1].label };
             }
           }
@@ -125203,10 +125298,10 @@ const EzList$1 = class extends HTMLElement$1 {
     this.getSelection().then(selectedItem => {
       if (selectedItem) {
         switch (event.key) {
-          case "ArrowDown":
+          case 'ArrowDown':
             this.nextOption(selectedItem);
             break;
-          case "ArrowUp":
+          case 'ArrowUp':
             this.previousOption(selectedItem);
             break;
         }
@@ -125219,19 +125314,19 @@ const EzList$1 = class extends HTMLElement$1 {
   }
   getItemId(itemLabel) {
     if (itemLabel) {
-      return itemLabel.replace(/[^a-z0-9_]/gi, "_");
+      return itemLabel.replace(/[^a-z0-9_]/gi, '_');
     }
     return undefined;
   }
   getDivGroupId(groupName) {
     if (groupName) {
-      return "group-" + groupName.replace(/[^a-z0-9_]/gi, "_");
+      return 'group-' + groupName.replace(/[^a-z0-9_]/gi, '_');
     }
     return undefined;
   }
   getGroupOverlayId(groupName) {
     if (groupName) {
-      return "group-overlay-" + groupName.replace(/[^a-z0-9_]/gi, "_");
+      return 'group-overlay-' + groupName.replace(/[^a-z0-9_]/gi, '_');
     }
     return undefined;
   }
@@ -125251,26 +125346,26 @@ const EzList$1 = class extends HTMLElement$1 {
   onDragOverLastIndex(ev) {
     ev.preventDefault();
     if (this._dragStartItem) {
-      ev.target.classList.add("over");
+      ev.target.classList.add('over');
       ev.stopPropagation();
     }
   }
   showOverlays(groupDragStart) {
-    let groupOverlayCollection = this._groupContainer.getElementsByClassName("group-overlay");
+    let groupOverlayCollection = this._groupContainer.getElementsByClassName('group-overlay');
     Array.from(groupOverlayCollection).forEach(groupOverlay => {
       let groupOverlayID = this.getGroupOverlayId(groupDragStart.group);
-      if (groupOverlayID && groupOverlay.getAttribute("id") && groupOverlayID != groupOverlay.getAttribute("id")) {
-        groupOverlay.classList.add("presetedHeight");
-        groupOverlay.setAttribute("style", "display:grid");
+      if (groupOverlayID && groupOverlay.getAttribute('id') && groupOverlayID != groupOverlay.getAttribute('id')) {
+        groupOverlay.classList.add('presetedHeight');
+        groupOverlay.setAttribute('style', 'display:grid');
       }
     });
   }
   hideOverlays() {
     var _a;
-    let groupOverlayCollection = (_a = this._groupContainer) === null || _a === void 0 ? void 0 : _a.getElementsByClassName("group-overlay");
+    let groupOverlayCollection = (_a = this._groupContainer) === null || _a === void 0 ? void 0 : _a.getElementsByClassName('group-overlay');
     Array.from(groupOverlayCollection).forEach(groupOverlay => {
-      groupOverlay.classList.remove("presetedHeight");
-      groupOverlay.setAttribute("style", "display:none");
+      groupOverlay.classList.remove('presetedHeight');
+      groupOverlay.setAttribute('style', 'display:none');
     });
   }
   getContainerItemBuilder(item, group, className) {
@@ -125281,30 +125376,39 @@ const EzList$1 = class extends HTMLElement$1 {
     if (customContent == undefined) {
       return;
     }
-    if (typeof customContent !== "string") {
-      return (h("div", { class: className }, customContent));
+    if (typeof customContent !== 'string') {
+      return h("div", { class: className }, customContent);
     }
-    return (h("div", { class: className, innerHTML: customContent }));
+    return h("div", { class: className, innerHTML: customContent });
   }
   render() {
-    return (h(Host, { ref: (el) => this._element = el }, this.useGroups ?
-      h("div", { class: "group-container", ref: (el) => this._groupContainer = el, tabIndex: 0, onKeyDown: (event) => { this.keyDownHandler(event); } }, this._listGroupItems.map(group => {
-        return h("div", { id: this.getDivGroupId(group.group), class: "group", key: group.group + group.items.length, onDrop: () => this.onDropGroup(group) }, h("label", { draggable: false, class: "group-name", title: group.group }, group.group), h("section", { class: "section-container", onDragOver: (ev) => ev.preventDefault() }, h("div", { class: "group-items-container" }, h("div", { class: "draggable-list" }, group.items.map((item, index) => (h("li", Object.assign({ id: "item_" + this.getItemId(item.label), class: {
-            "selectable-container": this.ezSelectable,
-            "hover-feedback": this.hoverFeedback
-          }, key: "item_" + this.getItemId(item.label) }, { [ElementIDUtils.DATA_ELEMENT_ID_ATTRIBUTE_NAME]: ElementIDUtils.getInternalIDInfo(`ezListItem__${StringUtils$1.replaceAccentuatedChars(item.label)}`) }), h("div", { class: "draggable" + (item.selected == true ? " selected-item " : "") + (this.ezSelectable == true ? " selectable " : ""), onClick: () => { this.setSelection(item); }, onDragLeave: () => { group.sort ? undefined : this.removeOverClass(); }, onDragEnd: () => this.onDragEnd(), onDragStart: () => this.onDragStart(item, group, index), onDragOver: (event) => { group.sort ? undefined : this.onDragOverItem(event); }, onDrop: (event) => this.onDrop(event, { groupName: group.group, item: item, index: index }), draggable: this.ezDraggable }, h("div", { class: "item-content" }, this.ezDraggable ? h("span", { class: "draggable-icon" }) : undefined, this.listMode === "regular" ?
-          h("p", { title: item.label, class: "person-name text--ellipsis" }, item.label) :
-          h("ez-check", { label: item.label, value: item.check, onEzChange: (evt) => this.ezCheckChange.emit({ id: item.id, label: item.label, check: evt.detail }) })), this.itemSlotBuilder ? this.getContainerItemBuilder(item, group, "slot-item") : undefined))))), h("div", { class: "last-droppable-space", onDragLeave: () => this.removeOverClass(), onDragOver: (event) => { this.onDragOverLastIndex(event); }, onDragEnd: () => this.onDragEnd(), onDrop: (event) => this.onDropLastIndex(event, group) })), group.sort ?
-          h("div", { id: this.getGroupOverlayId(group.group), class: "group-overlay" }, "Mover para ", group.group)
-          : undefined));
-      }))
-      :
-        h("div", { class: "items-container", ref: (el) => this._itemContainer = el, tabIndex: 0, onKeyDown: (event) => { this.keyDownHandler(event); } }, h("div", { class: "draggable-list" }, this._listItems.map((item, index) => (h("li", Object.assign({ id: "item_" + this.getItemId(item.label), class: {
-            "selectable-container": this.ezSelectable,
-            "hover-feedback": this.hoverFeedback
-          }, key: "item_" + this.getItemId(item.label) }, { [ElementIDUtils.DATA_ELEMENT_ID_ATTRIBUTE_NAME]: ElementIDUtils.getInternalIDInfo(`ezListItem__${StringUtils$1.replaceAccentuatedChars(item.label)}`) }), h("div", { class: "draggable" + (item.selected == true ? " selected-item " : "") + (this.ezSelectable == true ? " selectable " : ""), onDragStart: () => this.onDragStart({ item: item, index: index }), onClick: () => { this.setSelection(item); }, onDragLeave: () => this.removeOverClass(), onDragOver: (event) => this.onDragOverItem(event), onDragEnd: () => this.onDragEnd(), onDrop: (event) => this.onDrop(event, { item: item, index: index }), draggable: this.ezDraggable }, h("div", { class: "item-content" }, this.listMode === "regular" ?
-          h(Fragment, null, this.ezDraggable ? h("span", { class: "draggable-icon" }) : undefined, h("p", { title: item.label, class: "person-name text--ellipsis" }, item.label)) :
-          h(Fragment, null, this.ezDraggable ? h("span", { class: "draggable-icon" }) : undefined, h("ez-check", { label: item.label, value: item.check, onEzChange: (evt) => this.ezCheckChange.emit({ id: item.id, label: item.label, check: evt.detail }) }))), this.itemSlotBuilder ? this.getContainerItemBuilder(item) : undefined)))), h("div", { class: "last-droppable-space", onDragLeave: () => this.removeOverClass(), onDragOver: (event) => { this.onDragOverLastIndex(event); }, onDragEnd: () => this.onDragEnd(), onDrop: (event) => this.onDropLastIndex(event) })))));
+    return (h(Host, { ref: el => (this._element = el) }, this.useGroups ? (h("div", { class: "group-container", ref: el => (this._groupContainer = el), tabIndex: 0, onKeyDown: event => {
+        this.keyDownHandler(event);
+      } }, this._listGroupItems.map(group => {
+      return (h("div", { id: this.getDivGroupId(group.group), class: "group", key: group.group + group.items.length, onDrop: () => this.onDropGroup(group) }, h("label", { draggable: false, class: "group-name", title: group.group }, group.group), h("section", { class: "section-container", onDragOver: ev => ev.preventDefault() }, h("div", { class: "group-items-container" }, h("div", { class: "draggable-list" }, group.items.map((item, index) => (h("li", Object.assign({ id: 'item_' + this.getItemId(item.label), class: {
+          'selectable-container': this.ezSelectable,
+          'hover-feedback': this.hoverFeedback,
+        }, key: 'item_' + this.getItemId(item.label) }, {
+        [ElementIDUtils.DATA_ELEMENT_ID_ATTRIBUTE_NAME]: ElementIDUtils.getInternalIDInfo(`ezListItem__${StringUtils$1.replaceAccentuatedChars(item.label)}`),
+      }), h("div", { class: 'draggable' + (item.selected == true ? ' selected-item ' : '') + (this.ezSelectable == true ? ' selectable ' : ''), onClick: () => {
+          this.setSelection(item);
+        }, onDragLeave: () => {
+          group.sort ? undefined : this.removeOverClass();
+        }, onDragEnd: () => this.onDragEnd(), onDragStart: () => this.onDragStart(item, group, index), onDragOver: event => {
+          group.sort ? undefined : this.onDragOverItem(event);
+        }, onDrop: event => this.onDrop(event, { groupName: group.group, item: item, index: index }), draggable: this.ezDraggable }, h("div", { class: "item-content" }, this.ezDraggable ? h("span", { class: "draggable-icon" }) : undefined, this.listMode === 'regular' ? (h("p", { title: item.label, class: "person-name text--ellipsis" }, item.label)) : (h("ez-check", { label: item.label, value: item.check, onEzChange: evt => this.ezCheckChange.emit({ id: item.id, label: item.label, check: evt.detail }) }))), this.itemSlotBuilder ? this.getContainerItemBuilder(item, group, 'slot-item') : undefined))))), h("div", { class: "last-droppable-space", onDragLeave: () => this.removeOverClass(), onDragOver: event => {
+          this.onDragOverLastIndex(event);
+        }, onDragEnd: () => this.onDragEnd(), onDrop: event => this.onDropLastIndex(event, group) })), group.sort ? (h("div", { id: this.getGroupOverlayId(group.group), class: "group-overlay" }, "Mover para ", group.group)) : undefined)));
+    }))) : (h("div", { class: "items-container", ref: el => (this._itemContainer = el), tabIndex: 0, onKeyDown: event => {
+        this.keyDownHandler(event);
+      } }, h("div", { class: "draggable-list" }, this._listItems.map((item, index) => (h("li", Object.assign({ id: 'item_' + this.getItemId(item.label), class: {
+        'selectable-container': this.ezSelectable,
+        'hover-feedback': this.hoverFeedback,
+      }, key: 'item_' + this.getItemId(item.label) }, { [ElementIDUtils.DATA_ELEMENT_ID_ATTRIBUTE_NAME]: ElementIDUtils.getInternalIDInfo(`ezListItem__${StringUtils$1.replaceAccentuatedChars(item.label)}`) }), h("div", { class: 'draggable' + (item.selected == true ? ' selected-item ' : '') + (this.ezSelectable == true ? ' selectable ' : ''), onDragStart: () => this.onDragStart({ item: item, index: index }), onClick: () => {
+        this.setSelection(item);
+      }, onDragLeave: () => this.removeOverClass(), onDragOver: event => this.onDragOverItem(event), onDragEnd: () => this.onDragEnd(), onDrop: event => this.onDrop(event, { item: item, index: index }), draggable: this.ezDraggable }, h("div", { class: "item-content" }, this.listMode === 'regular' ? (h(Fragment, null, this.ezDraggable ? h("span", { class: "draggable-icon" }) : undefined, h("p", { title: item.label, class: "person-name text--ellipsis" }, item.label))) : (h(Fragment, null, this.ezDraggable ? h("span", { class: "draggable-icon" }) : undefined, h("ez-check", { label: item.label, value: item.check, onEzChange: evt => this.ezCheckChange.emit({ id: item.id, label: item.label, check: evt.detail }) })))), this.itemSlotBuilder ? this.getContainerItemBuilder(item) : undefined)))), h("div", { class: "last-droppable-space", onDragLeave: () => this.removeOverClass(), onDragOver: event => {
+        this.onDragOverLastIndex(event);
+      }, onDragEnd: () => this.onDragEnd(), onDrop: event => this.onDropLastIndex(event) }))))));
   }
   static get style() { return ezListCss; }
 };
@@ -125336,7 +125440,7 @@ const EzLoadingBar$1 = class extends HTMLElement$1 {
   static get style() { return ezLoadingBarCss; }
 };
 
-const ezModalCss = ":host{--ez-modal-z-index:var(--most-visible, 3);--ez-modal-vertical-padding:var(--space--large, 24px);--ez-modal-content-padding:24px;display:block}.modal{position:fixed;display:flex;top:0px;z-index:var(--ez-modal-z-index);left:0px;width:100%;box-sizing:border-box;height:100vh}.modal__screen-light{background:rgba(0, 4, 12, 0.1)}.modal__screen-medium{backdrop-filter:blur(4px);background:rgba(0, 4, 12, 0.4)}.modal__vertical-padding{padding:var(--ez-modal-vertical-padding) 0}@keyframes expand-modal--left{from{transform:translate(-100%)}}@keyframes expand-modal--right{from{transform:translate(100%)}}.modal__container{display:flex;flex-wrap:wrap;height:100%;box-sizing:border-box;width:100%;align-items:flex-start}.modal__container--right{animation:expand-modal--right .2s ease-in-out 1;justify-content:flex-end}.modal__container--left{animation:expand-modal--left .2s ease-in-out 1;justify-content:flex-start}.modal__content{display:flex;flex-wrap:wrap;box-sizing:border-box;max-height:100%;height:100%;overflow-y:auto;background-color:rgb(255, 255, 255);padding:var(--ez-modal-content-padding);box-shadow:rgb(0 38 111 / 12%) 0px 0px 16px 0px}.modal__content--right{border-radius:12px 0px 0px 12px}.modal__content--left{border-radius:0px 12px 12px 0px}.modal__box__container{display:flex;flex-wrap:wrap;background-color:#fff;width:100%;border-radius:12px}.row{width:100%;display:flex;flex-wrap:wrap}.col{display:flex;flex-wrap:wrap;align-self:flex-start;box-sizing:border-box}.col--stretch{align-self:stretch}.col--undefined{width:unset}.col--nowrap{flex-wrap:nowrap}@media screen and (min-width: 320px){.col--sd-1{width:8.33333%}.col--sd-2{width:16.66667%}.col--sd-3{width:25%}.col--sd-4{width:33.33333%}.col--sd-5{width:41.66667%}.col--sd-6{width:50%}.col--sd-7{width:58.33333%}.col--sd-8{width:66.66667%}.col--sd-9{width:75%}.col--sd-10{width:83.33333%}.col--sd-11{width:91.66667%}.col--sd-12{width:100%}}@media screen and (min-width: 480px){.col--pn-1{width:8.33333%}.col--pn-2{width:16.66667%}.col--pn-3{width:25%}.col--pn-4{width:33.33333%}.col--pn-5{width:41.66667%}.col--pn-6{width:50%}.col--pn-7{width:58.33333%}.col--pn-8{width:66.66667%}.col--pn-9{width:75%}.col--pn-10{width:83.33333%}.col--pn-11{width:91.66667%}.col--pn-12{width:100%}}@media screen and (min-width: 768px){.col--tb-1{width:8.33333%}.col--tb-2{width:16.66667%}.col--tb-3{width:25%}.col--tb-4{width:33.33333%}.col--tb-5{width:41.66667%}.col--tb-6{width:50%}.col--tb-7{width:58.33333%}.col--tb-8{width:66.66667%}.col--tb-9{width:75%}.col--tb-10{width:83.33333%}.col--tb-11{width:91.66667%}.col--tb-12{width:100%}}@media screen and (min-width: 992px){.col--md-1{width:8.33333%}.col--md-2{width:16.66667%}.col--md-3{width:25%}.col--md-4{width:33.33333%}.col--md-5{width:41.66667%}.col--md-6{width:50%}.col--md-7{width:58.33333%}.col--md-8{width:66.66667%}.col--md-9{width:75%}.col--md-10{width:83.33333%}.col--md-11{width:91.66667%}.col--md-12{width:100%}}@media screen and (min-width: 1200px){.col--ld-1{width:8.33333%}.col--ld-2{width:16.66667%}.col--ld-3{width:25%}.col--ld-4{width:33.33333%}.col--ld-5{width:41.66667%}.col--ld-6{width:50%}.col--ld-7{width:58.33333%}.col--ld-8{width:66.66667%}.col--ld-9{width:75%}.col--ld-10{width:83.33333%}.col--ld-11{width:91.66667%}.col--ld-12{width:100%}}";
+const ezModalCss = ":host{--ez-modal-z-index:var(--most-visible, 3);--ez-modal-vertical-padding:var(--space--large, 24px);--ez-modal-content-padding:24px;display:block}.modal{position:fixed;display:flex;top:0px;z-index:var(--ez-modal-z-index);left:0px;width:100%;box-sizing:border-box;height:100vh}.modal__screen-light{background:rgba(0, 4, 12, 0.1)}.modal__screen-medium{backdrop-filter:blur(4px);background:rgba(0, 4, 12, 0.4)}.modal__vertical-padding{padding:var(--ez-modal-vertical-padding) 0}@keyframes expand-modal--left{from{transform:translate(-100%)}}@keyframes expand-modal--right{from{transform:translate(100%)}}.modal__container{display:flex;flex-wrap:wrap;height:100%;box-sizing:border-box;width:100%;align-items:flex-start}.modal__container--right{animation:expand-modal--right .2s ease-in-out 1;justify-content:flex-end}.modal__container--left{animation:expand-modal--left .2s ease-in-out 1;justify-content:flex-start}.modal__content{display:flex;flex-wrap:wrap;box-sizing:border-box;max-height:100%;height:100%;background-color:rgb(255, 255, 255);padding:var(--ez-modal-content-padding);box-shadow:rgb(0 38 111 / 12%) 0px 0px 16px 0px}.modal__content--right{border-radius:12px 0px 0px 12px}.modal__content--left{border-radius:0px 12px 12px 0px}.modal__box__container{display:flex;flex-wrap:wrap;background-color:#fff;width:100%;border-radius:12px}.row{width:100%;display:flex;flex-wrap:wrap}.col{display:flex;flex-wrap:wrap;align-self:flex-start;box-sizing:border-box}.col--stretch{align-self:stretch}.col--undefined{width:unset}.col--nowrap{flex-wrap:nowrap}@media screen and (min-width: 320px){.col--sd-1{width:8.33333%}.col--sd-2{width:16.66667%}.col--sd-3{width:25%}.col--sd-4{width:33.33333%}.col--sd-5{width:41.66667%}.col--sd-6{width:50%}.col--sd-7{width:58.33333%}.col--sd-8{width:66.66667%}.col--sd-9{width:75%}.col--sd-10{width:83.33333%}.col--sd-11{width:91.66667%}.col--sd-12{width:100%}}@media screen and (min-width: 480px){.col--pn-1{width:8.33333%}.col--pn-2{width:16.66667%}.col--pn-3{width:25%}.col--pn-4{width:33.33333%}.col--pn-5{width:41.66667%}.col--pn-6{width:50%}.col--pn-7{width:58.33333%}.col--pn-8{width:66.66667%}.col--pn-9{width:75%}.col--pn-10{width:83.33333%}.col--pn-11{width:91.66667%}.col--pn-12{width:100%}}@media screen and (min-width: 768px){.col--tb-1{width:8.33333%}.col--tb-2{width:16.66667%}.col--tb-3{width:25%}.col--tb-4{width:33.33333%}.col--tb-5{width:41.66667%}.col--tb-6{width:50%}.col--tb-7{width:58.33333%}.col--tb-8{width:66.66667%}.col--tb-9{width:75%}.col--tb-10{width:83.33333%}.col--tb-11{width:91.66667%}.col--tb-12{width:100%}}@media screen and (min-width: 992px){.col--md-1{width:8.33333%}.col--md-2{width:16.66667%}.col--md-3{width:25%}.col--md-4{width:33.33333%}.col--md-5{width:41.66667%}.col--md-6{width:50%}.col--md-7{width:58.33333%}.col--md-8{width:66.66667%}.col--md-9{width:75%}.col--md-10{width:83.33333%}.col--md-11{width:91.66667%}.col--md-12{width:100%}}@media screen and (min-width: 1200px){.col--ld-1{width:8.33333%}.col--ld-2{width:16.66667%}.col--ld-3{width:25%}.col--ld-4{width:33.33333%}.col--ld-5{width:41.66667%}.col--ld-6{width:50%}.col--ld-7{width:58.33333%}.col--ld-8{width:66.66667%}.col--ld-9{width:75%}.col--ld-10{width:83.33333%}.col--ld-11{width:91.66667%}.col--ld-12{width:100%}}";
 
 const EzModal$1 = class extends HTMLElement$1 {
   constructor() {
@@ -125419,7 +125523,7 @@ var ModalButtonStatus;
 })(ModalButtonStatus || (ModalButtonStatus = {}));
 const ModalButtonStatus$1 = ModalButtonStatus;
 
-const ezModalContainerCss = ".sc-ez-modal-container-h{display:grid;grid-template-rows:0 auto 1fr auto;width:100%;height:100%}.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{overflow-y:auto;overflow-x:clip}.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;background-color:transparent;border:none}";
+const ezModalContainerCss = ".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)}";
 
 const EzModalContainer$1 = class extends HTMLElement$1 {
   constructor() {
@@ -125455,11 +125559,185 @@ const EzModalContainer$1 = class extends HTMLElement$1 {
     this._closeButton.focus();
   }
   render() {
-    return (h(Host, null, h("button", { class: "ez-modal-container__focus-ctrl", onFocusin: () => this.focusLast() }), this.showTitleBar && h("div", { class: "ez-modal-container__header ez-margin-bottom--large ez-align--middle" }, h("div", { class: "ez-col ez-align--middle ez-modal-container__title" }, h("h2", { class: "ez-text ez-title--large ez-title--primary ez-text--bold ez-margin-vertical--extra-small" }, this.modalTitle), this.modalSubTitle ? h("div", { class: "ez-text ez-text--medium ez-text--primary ez-margin-vertical--extra-small" }, this.modalSubTitle) : undefined), h("button", { ref: ref => this._closeButton = ref, class: "ez-modal-container__close-button", onClick: () => this.ezModalAction.emit(ModalAction$1.CLOSE) }, h("ez-icon", { class: "ez-modal-container__close-icon", size: "medium", iconName: "close" }))), h("div", { class: "ez-modal-container__content" }, h("slot", null)), h("div", { class: "ez-flex ez-flex--justify-end" }, this.cancelIsVisible() ? h("ez-button", { label: this.cancelButtonLabel, enabled: this.cancelButtonStatus !== ModalButtonStatus$1.DISABLED, onClick: () => this.ezModalAction.emit(ModalAction$1.CANCEL) }) : undefined, this.okIsVisible() ? h("ez-button", { ref: ref => this._okButton = ref, label: this.okButtonLabel, enabled: this.okButtonStatus !== ModalButtonStatus$1.DISABLED, class: "ez-button--primary ez-margin-left--medium", onClick: () => this.ezModalAction.emit(ModalAction$1.OK) }) : undefined), h("button", { class: "ez-modal-container__focus-ctrl", onFocusin: () => this.focusFirst() })));
+    return (h(Host, null, h("button", { class: "ez-modal-container__focus-ctrl", onFocusin: () => this.focusLast() }), this.showTitleBar && h("div", { class: "ez-modal-container__header ez-margin-bottom--large ez-align--middle" }, h("div", { class: "ez-col ez-align--middle ez-modal-container__title" }, h("h2", { class: "ez-text ez-title--large ez-title--primary ez-text--bold ez-margin-vertical--extra-small" }, this.modalTitle), this.modalSubTitle ? h("div", { class: "ez-text ez-text--medium ez-text--primary ez-margin-vertical--extra-small" }, this.modalSubTitle) : undefined), h("button", { ref: ref => this._closeButton = ref, class: "ez-modal-container__close-button", onClick: () => this.ezModalAction.emit(ModalAction$1.CLOSE) }, h("ez-icon", { class: "ez-modal-container__close-icon", size: "medium", iconName: "close" }))), h("div", { class: "ez-modal-container__content" }, h("slot", null)), h("div", { class: "ez-flex ez-flex--justify-end  ez-modal-container__footer" }, this.cancelIsVisible() ? h("ez-button", { label: this.cancelButtonLabel, enabled: this.cancelButtonStatus !== ModalButtonStatus$1.DISABLED, onClick: () => this.ezModalAction.emit(ModalAction$1.CANCEL) }) : undefined, this.okIsVisible() ? h("ez-button", { ref: ref => this._okButton = ref, label: this.okButtonLabel, enabled: this.okButtonStatus !== ModalButtonStatus$1.DISABLED, class: "ez-button--primary ez-margin-left--medium", onClick: () => this.ezModalAction.emit(ModalAction$1.OK) }) : undefined), h("button", { class: "ez-modal-container__focus-ctrl", onFocusin: () => this.focusFirst() })));
   }
   static get style() { return ezModalContainerCss; }
 };
 
+const ezMultiSelectionListCss = ".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)}";
+
+var ViewScenarios;
+(function (ViewScenarios) {
+  ViewScenarios["DATASOURCE_RESULTS"] = "DATASOURCE_RESULTS";
+  ViewScenarios["DATASOURCE_RESULTS_EMPTY"] = "DATASOURCE_RESULTS_EMPTY";
+  ViewScenarios["DATASOURCE_INIT"] = "DATASOURCE_INIT";
+  ViewScenarios["OPTIONS_EMPTY"] = "OPTIONS_EMPTY";
+  ViewScenarios["OPTIONS"] = "OPTIONS";
+})(ViewScenarios || (ViewScenarios = {}));
+const EzMuiltiSelectionList = class extends HTMLElement$1 {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.changeFilteredOptions = createEvent(this, "changeFilteredOptions", 7);
+    this.columnName = undefined;
+    this.dataSource = undefined;
+    this.useOptions = false;
+    this.options = undefined;
+    this.filteredOptions = undefined;
+    this.displayOptions = undefined;
+    this.viewScenario = undefined;
+    this.displayOptionToCheckAllItems = true;
+  }
+  async clearFilteredOptions() {
+    this.setInitialScenario();
+    this.filteredOptions = [];
+    if (this.searchInput) {
+      this.searchInput.value = '';
+    }
+    if (this.filterInput) {
+      this.filterInput.value = '';
+    }
+  }
+  onChangeUseOptions() {
+    this.setInitialScenario();
+  }
+  onChangeOptions() {
+    if (this.options) {
+      this.filteredOptions = this.ordenationByCheckStateAndAlphabetically(this.options);
+    }
+    this.checkInput && this.changeCheckAllValeuFromFilteredOptions();
+    this.setInitialScenario();
+  }
+  onChangeFilteredOptions(optionsListUpdated) {
+    this.displayOptions = this.filteredOptions;
+    this.displayOptionToCheckAllItems = this.filteredOptions.length > 1;
+    this.checkInput && this.changeCheckAllValeuFromFilteredOptions();
+    this.changeFilteredOptions.emit(optionsListUpdated);
+  }
+  componentDidRender() {
+    this.changeCheckAllValeuFromFilteredOptions();
+  }
+  ordenationByCheckStateAndAlphabetically(filteredOptions) {
+    const listWithSelectChecked = [];
+    const listWithNotSelectChecked = [];
+    filteredOptions.forEach(item => (item.check ? listWithSelectChecked.push(item) : listWithNotSelectChecked.push(item)));
+    return [...ArrayUtils$1.sortAlphabetically(listWithSelectChecked), ...ArrayUtils$1.sortAlphabetically(listWithNotSelectChecked)];
+  }
+  changeCheckAllValeuFromFilteredOptions() {
+    var _a, _b, _c, _d;
+    const selectAll = (_a = this.filteredOptions) === null || _a === void 0 ? void 0 : _a.every(item => item.check === true);
+    const notSelectAll = (_b = this.filteredOptions) === null || _b === void 0 ? void 0 : _b.every(item => item.check === false);
+    const selectIndeterminated = ((_c = this.filteredOptions) === null || _c === void 0 ? void 0 : _c.some(item => item.check === false)) && ((_d = this.filteredOptions) === null || _d === void 0 ? void 0 : _d.some(item => item.check === true)) && (!selectAll || !notSelectAll);
+    if (this.checkInput && selectAll) {
+      this.checkInput.indeterminate = false;
+      this.checkInput.value = true;
+      return;
+    }
+    if (this.checkInput && selectIndeterminated) {
+      this.checkInput.indeterminate = true;
+      this.checkInput.value = false;
+      return;
+    }
+    if (this.checkInput && notSelectAll) {
+      this.checkInput.indeterminate = false;
+      this.checkInput.value = false;
+      return;
+    }
+  }
+  setInitialScenario() {
+    if (this.useOptions) {
+      this.viewScenario = ViewScenarios.OPTIONS;
+      this.changeCheckAllValeuFromFilteredOptions();
+      return;
+    }
+    this.viewScenario = this.options && this.options.length > 0 ? ViewScenarios.DATASOURCE_RESULTS : ViewScenarios.DATASOURCE_INIT;
+  }
+  async searchWithDataSource(searchArgument, fieldName) {
+    const { argument, mode } = searchArgument;
+    if (mode !== 'PRELOAD') {
+      return this.dataSource.fetchData(argument, fieldName);
+    }
+  }
+  handleSearchOnDataSource(event) {
+    var _a;
+    const optionsToSort = (_a = this.filteredOptions) !== null && _a !== void 0 ? _a : [];
+    if (event.detail && !optionsToSort.some(item => item.value == event.detail.value)) {
+      this.filteredOptions = this.ordenationByCheckStateAndAlphabetically([...optionsToSort, event.detail]);
+    }
+    this.viewScenario = ViewScenarios.DATASOURCE_RESULTS;
+  }
+  handleRemoveItemFromOptions(item) {
+    this.filteredOptions = this.ordenationByCheckStateAndAlphabetically(this.filteredOptions.filter(i => i.value !== item.value));
+    if (this.filteredOptions.length === 0) {
+      this.viewScenario = ViewScenarios.DATASOURCE_INIT;
+    }
+    if (this.searchInput) {
+      this.searchInput.value = '';
+    }
+  }
+  handleSearchOnOption(event) {
+    if (event.detail) {
+      this.displayOptions = ArrayUtils$1.applyStringFilter(event.detail, this.filteredOptions, true);
+      this.viewScenario = this.displayOptions.length === 0 ? ViewScenarios.OPTIONS_EMPTY : ViewScenarios.OPTIONS;
+      return;
+    }
+    this.displayOptions = this.filteredOptions;
+    this.viewScenario = ViewScenarios.OPTIONS;
+  }
+  handleChangeSelectAllItems(event) {
+    this.filteredOptions = this.ordenationByCheckStateAndAlphabetically([
+      ...this.filteredOptions.map(item => {
+        item.check = !!event.detail;
+        return item;
+      }),
+    ]);
+  }
+  handleChangeSelectedItem(event) {
+    const { detail: itemCheckSelected } = event;
+    this.filteredOptions = this.filteredOptions.map(item => {
+      if (item.label === itemCheckSelected.label) {
+        return Object.assign(Object.assign({}, item), { check: itemCheckSelected.check });
+      }
+      return item;
+    });
+    this.clearInputs();
+  }
+  clearInputs() {
+    this.filterInput ? (this.filterInput.value = '') : (this.searchInput.value = '');
+  }
+  buildViewList(hasDelete) {
+    return (h(Fragment, null, this.displayOptionToCheckAllItems && (h("ez-check", { ref: (element) => (this.checkInput = element), label: "Selecionar todos", class: "multi-selection__select-all", onEzChange: this.handleChangeSelectAllItems.bind(this) })), h("ez-list", { class: "multi-selection__list", dataSource: this.displayOptions, listMode: "check", hoverFeedback: true, onEzCheckChange: this.handleChangeSelectedItem.bind(this), itemSlotBuilder: hasDelete ? this.buildDeleteIconSlot.bind(this) : null })));
+  }
+  buildDeleteIconSlot(item) {
+    return h("ez-icon", { style: { cursor: 'pointer' }, iconName: "delete", onClick: () => this.handleRemoveItemFromOptions(item) });
+  }
+  buildInitViewWithDataSource() {
+    return h("multi-selection-box-message", { message: "Selecione os valores a serem filtrados atrav\u00E9s do campo de busca." });
+  }
+  buildViewEmptyResults() {
+    return h("multi-selection-box-message", { message: "Nenhum resultado encontrado." });
+  }
+  scenarioToDisplay(view) {
+    const scenarios = {
+      [ViewScenarios.DATASOURCE_INIT]: this.buildInitViewWithDataSource(),
+      [ViewScenarios.DATASOURCE_RESULTS]: this.buildViewList(true),
+      [ViewScenarios.DATASOURCE_RESULTS_EMPTY]: this.buildViewEmptyResults(),
+      [ViewScenarios.OPTIONS_EMPTY]: this.buildViewEmptyResults(),
+      [ViewScenarios.OPTIONS]: this.buildViewList(false),
+    };
+    return scenarios[view];
+  }
+  render() {
+    return (h(Host, null, h("div", { class: "multi-selection" }, this.useOptions ? (h("ez-filter-input", { ref: (element) => (this.filterInput = element), label: `Buscar..`, onEzChange: this.handleSearchOnOption.bind(this) })) : (h("ez-search", { class: "multi-selection__input", label: `Buscar...`, ref: (element) => (this.searchInput = element), suppressEmptyOption: true, showOptionValue: false, showSelectedValue: false, optionLoader: (search) => this.searchWithDataSource(search, this.columnName), onEzChange: this.handleSearchOnDataSource.bind(this) })), h("ez-scroll", { class: "multi-selection__content-options" }, this.scenarioToDisplay(this.viewScenario)))));
+  }
+  static get watchers() { return {
+    "useOptions": ["onChangeUseOptions"],
+    "options": ["onChangeOptions"],
+    "filteredOptions": ["onChangeFilteredOptions"]
+  }; }
+  static get style() { return ezMultiSelectionListCss; }
+};
+
 const ezNumberInputCss = ":host{display:block;width:100%}";
 
 const EzNumberInput$1 = class extends HTMLElement$1 {
@@ -128191,6 +128469,121 @@ const EzViewStack$1 = class extends HTMLElement$1 {
   static get style() { return ezViewStackCss; }
 };
 
+const filterColumnCss = ".filter-column{padding:var(--space--2xs, 8px);position:relative}.filter-column__header{margin-bottom:var(--space--2xs, 8px);display:flex;flex-direction:row;align-items:center;justify-content:space-between;height:var(--space--xl, 32px)}.filter-column__footer{position:relative;display:flex;flex-direction:row;justify-content:flex-end;align-items:center;width:100%;bottom:0;left:0;padding-top:var(--space--2xs, 8px);border-top:var(--border--medium) var(--color--disable-secondary)}.filter-column__popover{position:absolute}.filter-column__header-title{margin-left:8px}";
+
+const windowInstace = window;
+const onSubmitFilter = new CustomEvent('onSubmitFilter', {
+  detail: {
+    showToast: true,
+  },
+});
+const FilterColumn$1 = class extends HTMLElement$1 {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.applyFilterColumnOptions = createEvent(this, "applyFilterColumnOptions", 7);
+    this.TOP_POSITION = '65px';
+    this.opened = true;
+    this.columnName = undefined;
+    this.columnLabel = undefined;
+    this.dataSource = undefined;
+    this.dataUnit = undefined;
+    this.options = undefined;
+    this.selectedItems = undefined;
+    this.fieldDescriptor = undefined;
+    this.useOptions = false;
+  }
+  async hide() {
+    await this.ezPopoverElement.hide();
+    await this.clearConfigs();
+  }
+  /**
+   * Abre o filtro de coluna.
+   * @Params IFilterColumnConfigs informações para configurar o filtro
+   */
+  async show(configs) {
+    if (this.canShow(configs)) {
+      await this.hide();
+      this.fieldDescriptor = this.dataUnit.getField(configs.columnName);
+      this.setOptions(configs.filteredOptions);
+      this.columnName = configs.columnName;
+      this.columnLabel = configs.columnLabel;
+      await this.ezPopoverElement.show(this.TOP_POSITION, configs.leftPosition);
+    }
+  }
+  async clearConfigs() {
+    var _a;
+    await ((_a = this.ezMultiSelectionList) === null || _a === void 0 ? void 0 : _a.clearFilteredOptions());
+    this.options = null;
+    this.columnName = null;
+  }
+  canShow(configs) {
+    return !this.ezPopoverElement.opened || configs.columnName !== this.columnName;
+  }
+  submit() {
+    this.applyFilterColumnOptions.emit({ field: this.columnName, values: this.selectedItems });
+    windowInstace.dispatchEvent(onSubmitFilter);
+    this.hide();
+  }
+  changeSelectedItems(items) {
+    this.selectedItems = items;
+  }
+  hasToUseOptions() {
+    return this.fieldDescriptor.userInterface === UserInterface.OPTIONSELECTOR
+      || this.fieldDescriptor.userInterface === UserInterface.SWITCH
+      || this.fieldDescriptor.userInterface === UserInterface.CHECKBOX;
+  }
+  isCheckBoxOrSwitch() {
+    return this.fieldDescriptor.userInterface === UserInterface.SWITCH
+      || this.fieldDescriptor.userInterface === UserInterface.CHECKBOX;
+  }
+  setOptions(selectedItems) {
+    const validateFieldUserInterfaceOptionSelector = this.hasToUseOptions();
+    this.useOptions = validateFieldUserInterfaceOptionSelector;
+    this.options = validateFieldUserInterfaceOptionSelector ? this.buildOptions(selectedItems) : (selectedItems !== null && selectedItems !== void 0 ? selectedItems : null);
+  }
+  buildOptions(selectedItems) {
+    var _a, _b;
+    if (selectedItems && selectedItems.length > 0) {
+      return selectedItems;
+    }
+    if (this.isCheckBoxOrSwitch()) {
+      return [
+        { label: "Sim", value: "true", check: true },
+        { label: "Não", value: "false", check: true }
+      ];
+    }
+    const optionsObject = JSON.parse((_b = (_a = this.fieldDescriptor) === null || _a === void 0 ? void 0 : _a.properties) === null || _b === void 0 ? void 0 : _b.options);
+    const objectKeys = Object.keys(optionsObject);
+    return objectKeys.map(key => {
+      return { label: optionsObject[key], value: key, check: true };
+    });
+  }
+  handleEzVisibilityChange(event) {
+    if (event.detail === false) {
+      this.clearConfigs();
+    }
+  }
+  render() {
+    return (h("ez-popover", { class: "filter-column__popover", "overlay-type": "none", ref: (element) => (this.ezPopoverElement = element), autoClose: true, onEzVisibilityChange: this.handleEzVisibilityChange.bind(this) }, h("section", { class: "filter-column" }, h("header", { class: "filter-column__header" }, h("span", { class: "ez-text ez-text--medium filter-column__header-title" }, "Filtro da coluna ", this.columnLabel), h("ez-button", { mode: "icon", "icon-name": "close", class: "ez-button--tertiary", onClick: () => this.hide() })), h("ez-multi-selection-list", { columnName: this.columnName, dataSource: this.dataSource, options: this.options, useOptions: this.useOptions, ref: (element) => (this.ezMultiSelectionList = element), onChangeFilteredOptions: (event) => this.changeSelectedItems(event.detail) }), h("footer", { class: "filter-column__footer" }, h("ez-button", { label: "Aplicar", class: "ez-button--primary", onClick: this.submit.bind(this) })))));
+  }
+  static get style() { return filterColumnCss; }
+};
+
+const multiSelectionBoxMessageCss = ".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)}";
+
+const MultiSelectionBoxMessage$1 = class extends HTMLElement$1 {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.message = undefined;
+  }
+  render() {
+    return (h("div", { class: "multi-selection__message" }, h("span", { class: "multi-selection__text-message" }, this.message)));
+  }
+  static get style() { return multiSelectionBoxMessageCss; }
+};
+
 const EzActionsButton = /*@__PURE__*/proxyCustomElement(EzActionsButton$1, [1,"ez-actions-button",{"enabled":[516],"actions":[1040],"size":[513],"showLabel":[516,"show-label"],"displayIcon":[513,"display-icon"],"checkOption":[516,"check-option"],"value":[513],"isTransparent":[516,"is-transparent"],"arrowActive":[516,"arrow-active"],"_selectedAction":[32]}]);
 const EzAlert = /*@__PURE__*/proxyCustomElement(EzAlert$1, [1,"ez-alert",{"alertType":[513,"alert-type"]}]);
 const EzApplication = /*@__PURE__*/proxyCustomElement(EzApplication$1, [0,"ez-application"]);
@@ -128211,13 +128604,14 @@ const EzFileItem = /*@__PURE__*/proxyCustomElement(EzFileItem$1, [1,"ez-file-ite
 const EzFilterInput = /*@__PURE__*/proxyCustomElement(EzFilterInput$1, [1,"ez-filter-input",{"label":[1],"value":[1537],"enabled":[4],"errorMessage":[1537,"error-message"],"restrict":[1],"mode":[513],"asyncSearch":[516,"async-search"],"canShowError":[516,"can-show-error"]}]);
 const EzForm = /*@__PURE__*/proxyCustomElement(EzForm$1, [2,"ez-form",{"dataUnit":[1040],"config":[16],"recordsValidator":[16]}]);
 const EzFormView = /*@__PURE__*/proxyCustomElement(EzFormView$1, [2,"ez-form-view",{"fields":[16]}]);
-const EzGrid = /*@__PURE__*/proxyCustomElement(EzGrid$1, [6,"ez-grid",{"multipleSelection":[4,"multiple-selection"],"config":[1040],"serverUrl":[1,"server-url"],"dataUnit":[16],"statusResolver":[16],"_paginationInfo":[32],"_paginationChangedByKeyboard":[32],"_showSelectionCounter":[32],"_isAllSelection":[32],"_currentPageSelected":[32],"_selectionCount":[32]},[[0,"ezSelectionChange","onSelectionChange"]]]);
+const EzGrid = /*@__PURE__*/proxyCustomElement(EzGrid$1, [6,"ez-grid",{"multipleSelection":[4,"multiple-selection"],"config":[1040],"serverUrl":[1,"server-url"],"dataUnit":[16],"statusResolver":[16],"columnfilterDataSource":[16],"_paginationInfo":[32],"_paginationChangedByKeyboard":[32],"_showSelectionCounter":[32],"_isAllSelection":[32],"_currentPageSelected":[32],"_selectionCount":[32]},[[0,"ezSelectionChange","onSelectionChange"]]]);
 const EzGuideNavigator = /*@__PURE__*/proxyCustomElement(EzGuideNavigator$1, [1,"ez-guide-navigator",{"open":[1540],"selectedId":[1537,"selected-id"],"items":[16],"tooltipResolver":[16],"filterText":[32]}]);
 const EzIcon = /*@__PURE__*/proxyCustomElement(EzIcon$1, [1,"ez-icon",{"size":[513],"href":[513],"iconName":[513,"icon-name"]}]);
 const EzList = /*@__PURE__*/proxyCustomElement(EzList$1, [1,"ez-list",{"dataSource":[1040],"listMode":[1,"list-mode"],"useGroups":[1540,"use-groups"],"ezDraggable":[1028,"ez-draggable"],"ezSelectable":[1028,"ez-selectable"],"itemSlotBuilder":[1040],"hoverFeedback":[1028,"hover-feedback"],"_listItems":[32],"_listGroupItems":[32]}]);
 const EzLoadingBar = /*@__PURE__*/proxyCustomElement(EzLoadingBar$1, [1,"ez-loading-bar",{"_showLoading":[32]}]);
 const EzModal = /*@__PURE__*/proxyCustomElement(EzModal$1, [1,"ez-modal",{"modalSize":[1,"modal-size"],"align":[1],"heightMode":[1,"height-mode"],"opened":[1028],"closeEsc":[4,"close-esc"],"closeOutsideClick":[4,"close-outside-click"],"scrim":[1]}]);
 const EzModalContainer = /*@__PURE__*/proxyCustomElement(EzModalContainer$1, [6,"ez-modal-container",{"modalTitle":[1,"modal-title"],"modalSubTitle":[1,"modal-sub-title"],"showTitleBar":[4,"show-title-bar"],"cancelButtonLabel":[1,"cancel-button-label"],"okButtonLabel":[1,"ok-button-label"],"cancelButtonStatus":[1,"cancel-button-status"],"okButtonStatus":[1,"ok-button-status"]}]);
+const EzMultiSelectionList = /*@__PURE__*/proxyCustomElement(EzMuiltiSelectionList, [2,"ez-multi-selection-list",{"columnName":[1,"column-name"],"dataSource":[16],"useOptions":[1028,"use-options"],"options":[16],"filteredOptions":[32],"displayOptions":[32],"viewScenario":[32],"displayOptionToCheckAllItems":[32]}]);
 const EzNumberInput = /*@__PURE__*/proxyCustomElement(EzNumberInput$1, [1,"ez-number-input",{"label":[1],"value":[1538],"enabled":[4],"canShowError":[516,"can-show-error"],"errorMessage":[1537,"error-message"],"precision":[2],"prettyPrecision":[2,"pretty-precision"],"mode":[513]}]);
 const EzPopover = /*@__PURE__*/proxyCustomElement(EzPopover$1, [1,"ez-popover",{"autoClose":[516,"auto-close"],"top":[1537],"left":[1537],"bottom":[1537],"right":[1537],"boxWidth":[513,"box-width"],"opened":[1540],"innerElement":[1537,"inner-element"],"overlayType":[513,"overlay-type"]}]);
 const EzPopup = /*@__PURE__*/proxyCustomElement(EzPopup$1, [1,"ez-popup",{"size":[1],"opened":[1540],"useHeader":[516,"use-header"],"heightMode":[513,"height-mode"],"ezTitle":[1,"ez-title"]}]);
@@ -128235,6 +128629,8 @@ const EzToast = /*@__PURE__*/proxyCustomElement(EzToast$1, [1,"ez-toast",{"messa
 const EzTree = /*@__PURE__*/proxyCustomElement(EzTree$1, [1,"ez-tree",{"items":[1040],"value":[1040],"selectedId":[1537,"selected-id"],"iconResolver":[16],"tooltipResolver":[16],"_tree":[32],"_waintingForLoad":[32]},[[2,"keydown","onKeyDownListener"]]]);
 const EzUpload = /*@__PURE__*/proxyCustomElement(EzUpload$1, [1,"ez-upload",{"label":[1],"subtitle":[1],"enabled":[4],"maxFileSize":[2,"max-file-size"],"maxFiles":[2,"max-files"],"requestHeaders":[8,"request-headers"],"urlUpload":[1,"url-upload"],"urlDelete":[1,"url-delete"],"value":[1040]}]);
 const EzViewStack = /*@__PURE__*/proxyCustomElement(EzViewStack$1, [0,"ez-view-stack"]);
+const FilterColumn = /*@__PURE__*/proxyCustomElement(FilterColumn$1, [0,"filter-column",{"opened":[4],"columnName":[1,"column-name"],"columnLabel":[1,"column-label"],"dataSource":[16],"dataUnit":[16],"options":[1040],"selectedItems":[32],"fieldDescriptor":[32],"useOptions":[32]}]);
+const MultiSelectionBoxMessage = /*@__PURE__*/proxyCustomElement(MultiSelectionBoxMessage$1, [0,"multi-selection-box-message",{"message":[1]}]);
 const defineCustomElements = (opts) => {
   if (typeof customElements !== 'undefined') {
     [
@@ -128265,6 +128661,7 @@ const defineCustomElements = (opts) => {
   EzLoadingBar,
   EzModal,
   EzModalContainer,
+  EzMultiSelectionList,
   EzNumberInput,
   EzPopover,
   EzPopup,
@@ -128281,7 +128678,9 @@ const defineCustomElements = (opts) => {
   EzToast,
   EzTree,
   EzUpload,
-  EzViewStack
+  EzViewStack,
+  FilterColumn,
+  MultiSelectionBoxMessage
     ].forEach(cmp => {
       if (!customElements.get(cmp.is)) {
         customElements.define(cmp.is, cmp, opts);
@@ -128290,4 +128689,4 @@ const defineCustomElements = (opts) => {
   }
 };
 
-export { EzActionsButton, EzAlert, EzApplication, EzBadge, EzBreadcrumb, EzButton, EzCalendar, EzCardItem, EzCheck, EzChip, EzCollapsibleBox, EzComboBox, EzDateInput, EzDateTimeInput, EzDialog, EzDropdown, EzFileItem, EzFilterInput, EzForm, EzFormView, EzGrid, EzGuideNavigator, EzIcon, EzList, EzLoadingBar, EzModal, EzModalContainer, EzNumberInput, EzPopover, EzPopup, EzRadioButton, EzScroller, EzSearch, EzSidebarButton, EzSkeleton, EzTabselector, EzTextArea, EzTextEdit, EzTextInput, EzTimeInput, EzToast, EzTree, EzUpload, EzViewStack, defineCustomElements };
+export { EzActionsButton, EzAlert, EzApplication, EzBadge, EzBreadcrumb, EzButton, EzCalendar, EzCardItem, EzCheck, EzChip, EzCollapsibleBox, EzComboBox, EzDateInput, EzDateTimeInput, EzDialog, EzDropdown, EzFileItem, EzFilterInput, EzForm, EzFormView, EzGrid, EzGuideNavigator, EzIcon, EzList, EzLoadingBar, EzModal, EzModalContainer, EzMultiSelectionList, EzNumberInput, EzPopover, EzPopup, EzRadioButton, EzScroller, EzSearch, EzSidebarButton, EzSkeleton, EzTabselector, EzTextArea, EzTextEdit, EzTextInput, EzTimeInput, EzToast, EzTree, EzUpload, EzViewStack, FilterColumn, MultiSelectionBoxMessage, defineCustomElements };