@sankhyalabs/ezui 1.1.80 → 1.1.83

package/dist/esm/{ez-grid.entry.js → ez-button_11.entry.js}

@@ -1,6 +1,132 @@
-import { r as registerInstance, c as createEvent, h, H as Host } from './index-077c7fcf.js';
-import { c as createCommonjsModule, b as commonjsGlobal, A as Action } from './index-afe19542.js';
-import { g as getSpritePath } from './AssetsUtils-76ca41e1.js';
+import { r as registerInstance, h, c as createEvent, H as Host, g as getElement } from './index-d80a8d1f.js';
+import { c as createCommonjsModule, a as commonjsGlobal, A as Action, M as MaskFormatter, D as DataUnit, b as DataType, U as UserInterface } from './index-015d8d70.js';
+import { g as getSpritePath } from './AssetsUtils-9b1d9c38.js';
+
+const ezButtonCss = ":host{--ez-button--min-width:100px;--ez-button--height:42px;--ez-button__icon--width:18px;--ez-button__inline__icon--padding:12px;--ez-button--padding-top:var(--space--medium, 12px);--ez-button--padding-bottom:var(--space--medium, 12px);--ez-button--padding-right:var(--space--large, 24px);--ez-button--padding-left:var(--space--large, 24px);--ez-button--color:var(--text--primary, #FFF);--ez-button--font-size:var(--text--medium, 14px);--ez-button--font-family:var(--font-pattern, Arial);--ez-button--font-weight:var(--text-weight--large);--ez-button--background-color:var(--background--medium, #c0c0c0);--ez-button--border-radius:var(--border--radius-large, 12px);--ez-button--border:none;--ez-button--hover--background-color:var(--background--strong, var(--ez-button--background-color));--ez-button--disabled-color:var(--text--disable);--ez-button--disabled--background-color:var(--color--disable-secondary);--ez-button--focus--border:var(--ez-button--border);--ez-button--focus--box-shadow:none;--ez-button--link-color:var(--title--primary, '#C0C0C0')}ez-icon{--ez-icon--color:inherit}button{display:flex;align-items:center;justify-content:center;margin:0;cursor:pointer;transition:background-color 0.2s linear;min-width:var(--ez-button--min-width);height:var(--ez-button--height);font-family:var(--ez-button--font-family);font-size:var(--ez-button--font-size);font-weight:var(--ez-button--font-weight);padding:var(--ez-button--padding-top) var(--ez-button--padding-right) var(--ez-button--padding-bottom) var(--ez-button--padding-left);border-radius:var(--ez-button--border-radius);background-color:var(--ez-button--background-color);color:var(--ez-button--color);fill:var(--ez-button--color);border:var(--ez-button--border)}button:hover{background-color:var(--ez-button--hover--background-color)}button:focus{outline:none;border:var(--ez-button--focus--border);box-shadow:var(--ez-button--focus--box-shadow)}button:disabled{background-color:var(--ez-button--disabled--background-color);color:var(--ez-button--disabled-color);fill:var(--ez-button--disabled-color);border:none;cursor:no-drop}button.icon{padding:0px}button.small{width:32px;min-width:32px;height:32px}button.medium{width:42px;min-width:42px;height:42px}button.large{width:52px;min-width:52px;height:52px}.label-icon{display:flex;flex-direction:column;align-items:center;color:var(--ez-button--color)}.label-icon label{max-width:150px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer;font-family:var(--ez-button--font-family);font-size:var(--ez-button--font-size);font-weight:var(--ez-button--font-weight)}a{font-family:var(--ez-button--font-family);font-size:var(--ez-button--font-size);font-weight:var(--ez-button--font-weight);color:var(--ez-button--link-color);cursor:pointer;display:flex;align-items:center;justify-content:center;}";
+
+let EzButton = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    /**
+     * Deixa o botão disponível ou não para interação com o usuário.
+     */
+    this.enabled = true;
+    /**
+       * Define o modo de uso do botão; opções: icon, link e regular
+       */
+    this.mode = "regular";
+    /**
+     * Quando em modo "icon" pode-se escolher entre [small,medium,large] (somente para o modo "icon")
+     */
+    this.size = "medium";
+  }
+  getIconSize() {
+    return this.size;
+  }
+  handleSlotChange(ev) {
+    const slot = ev.target;
+    const content = slot.assignedElements()[0];
+    if (this.mode == "link") {
+      content.style.display = "inline";
+      if (slot.name == "leftIcon") {
+        content.style.paddingRight = "var(--ez-button__inline__icon--padding)";
+      }
+      else if (slot.name == "rightIcon") {
+        content.style.paddingLeft = "var(--ez-button__inline__icon--padding)";
+      }
+    }
+    else {
+      content.style.setProperty('--ez-icon--color', 'var(--ez-icon--color)');
+    }
+  }
+  render() {
+    if (this.mode == "icon") {
+      return (h("button", { class: "icon " + this.size, type: "button", disabled: !this.enabled }, h("ez-icon", { class: "icon", href: this.image, size: this.getIconSize(), onClick: evt => {
+          if (!this.enabled)
+            evt.stopPropagation();
+        } })));
+    }
+    else if (this.mode == "label-icon") {
+      return (h("div", { class: "label-icon" }, h("button", { class: "icon", type: "button", disabled: !this.enabled }, h("ez-icon", { class: "icon", href: this.image, size: "large", onClick: evt => {
+          if (!this.enabled)
+            evt.stopPropagation();
+        } })), h("label", { title: this.label }, this.label)));
+    }
+    else if (this.mode == "link") {
+      return (h("a", null, h("slot", { name: "leftIcon", onSlotchange: (ev) => { this.handleSlotChange(ev); } }), this.label, h("slot", { name: "rightIcon", onSlotchange: (ev) => { this.handleSlotChange(ev); } })));
+    }
+    else {
+      return (h("button", { type: "button", disabled: !this.enabled }, h("slot", { name: "leftIcon", onSlotchange: (ev) => { this.handleSlotChange(ev); } }), this.label, h("slot", { name: "rightIcon", onSlotchange: (ev) => { this.handleSlotChange(ev); } })));
+    }
+  }
+};
+EzButton.style = ezButtonCss;
+
+const ezCheckCss = ":host{--ez-check--box--width:18px;--ez-check--box--height:18px;--ez-check--width:calc(var(--ez-check--box--width) + 14px);--ez-check--height:calc(var(--ez-check--box--width) + 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--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:20px;--ez-switch--pin--height:20px;--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--checked--background-color:var(--color--primary-300);--ez-switch--pin--background-color:var(--background--xlight);--ez-switch--pin--disabled--background-color:var(--color--disable-secondary);--ez-switch--pin--checked--background-color:var(--color--primary);--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-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.regularMode{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.regularMode:enabled:hover{background-color:var(--ez-check--hover--background-color)}input.regularMode:enabled:focus{outline:none;background-color:var(--ez-check--focus--background-color)}input.regularMode:disabled{cursor:auto;background:none}input.regularMode::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.regularMode:disabled::before{border:var(--ez-check--disabled--border)}input.regularMode:checked:enabled:hover{background-color:var(--ez-check--checked--hover--background-color)}input.regularMode:checked:enabled:focus{background-color:var(--ez-check--checked--focus--background-color)}input.regularMode:checked::before{border:var(--ez-check--checked--border);background-color:var(--ez-check--checked--background-color)}input.regularMode:checked:disabled:before{border:var(--ez-check--disabled--border);background-color:var(--ez-check--checked--disabled--background-color)}input.regularMode:checked::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.regularMode:checked:disabled::after{background-color:var(--ez-check--check--disabled--background-color)}input.switchMode{flex-shrink:0;-webkit-appearance:none;appearance:none;position:relative;outline:none;cursor:pointer;border-radius:20px;border:none;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.switchMode:disabled{background-color:var(--ez-switch--disabled--background-color)}input.switchMode::after{content:\"\";display:block;position:absolute;box-shadow:var(--shadow);transition:transform var(--transition);transition:background-color var(--transition);transform:translateY(-3px);border-radius:50%;width:var(--ez-switch--pin--width);height:var(--ez-switch--pin--height);background-color:var(--ez-switch--pin--background-color)}input.switchMode:disabled::after{background-color:var(--ez-switch--pin--disabled--background-color)}input.switchMode:checked{transition:background-color var(--transition);background-color:var(--ez-switch--checked--background-color)}input.switchMode::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))/2);background-color:var(--ez-switch--pin--focus--background-color)}input.switchMode:focus::before{opacity:0.24;transition:opacity var(--transition)}input.switchMode: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)))}input.switchMode:checked::after{transition:transform var(--transition);transition:background-color var(--transition);transform:translateX(calc(var(--ez-switch--slider--width) - var(--ez-switch--pin--width))) translateY(-3px);box-shadow:var(--shadow);background-color:var(--ez-switch--pin--checked--background-color)}input.switchMode: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);text-shadow:var(--text-shadow);font-size:var(--ez-check--label--font-size);font-family:var(--ez-check--label--font-family);cursor:default;padding-left:var(--space--small)}.label--disabled{color:var(--ez-check--label--disabled--color)}";
+
+let EzCheck = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.ezChange = createEvent(this, "ezChange", 7);
+    /**
+     * Deixa o campo disponível ou não para interação com o usuário.
+     */
+    this.enabled = true;
+    /**
+     * Existem dois modos de visualização: regular e switch.
+     * Se esta propriedade for omitida, o componete assume o formato "regular".
+     * No modo "regular" a visualização é a tradicional de uma caixinha marcada/desmarcada.
+     * No modo "switch" o campo tem uma interface em formato de um pino liga/desliga.
+     */
+    this.mode = "regular";
+  }
+  adjustMode() {
+    if (this.mode === "switch") {
+      this._inputElem.classList.remove("regularMode");
+      this._inputElem.classList.add("switchMode");
+    }
+    else {
+      this._inputElem.classList.remove("switchMode");
+      this._inputElem.classList.add("regularMode");
+    }
+  }
+  //---------------------------------------------
+  // Public methods
+  //---------------------------------------------
+  /**
+   * Devolve o modo escolhido para o componente
+   */
+  async getMode() {
+    return this.mode;
+  }
+  /**
+   * Faz o foco no componente de input
+   */
+  async setFocus() {
+    this._inputElem.focus();
+  }
+  componentDidLoad() {
+    this.adjustMode();
+  }
+  changeValue() {
+    this.value = !this.value;
+    this.ezChange.emit(this.value);
+  }
+  getLabelClasses() {
+    let classes = "label";
+    if (!this.enabled) {
+      classes += " label--disabled";
+    }
+    return classes;
+  }
+  render() {
+    return (h(Host, null, h("input", { type: "checkbox", class: "regularMode", checked: this.value === true, onChange: () => { this.changeValue(); }, disabled: !this.enabled, ref: (el) => this._inputElem = el }), this.label ? h("label", { class: this.getLabelClasses(), onClick: () => { this.changeValue(); }, title: this.label }, this.label) : undefined));
+  }
+  static get watchers() { return {
+    "mode": ["adjustMode"]
+  }; }
+};
+EzCheck.style = ezCheckCss;
 
 var agGridCommunity_cjs = createCommonjsModule(function (module, exports) {
 
@@ -110237,6 +110363,60 @@ class AgGridController {
   }
 }
 
+/**
+ * Classe com utiliários comuns para Strings.
+ */
+class StringUtils {
+    /**
+     * Verifica se a string está vazia.
+     * Valores null e undefined são considerados como vazio.
+     *
+     * @param value  String para ser validada.
+    */
+    static isEmpty(value) {
+        if (value == undefined || value === null) {
+            return true;
+        }
+        value = value.toString();
+        value = value.trim();
+        if (value.length === 0) {
+            return true;
+        }
+        return false;
+    }
+    /**
+     * Remove acentos de vogais, substitui Ç por c e retorna a string em caixa alta.
+     *
+     * @param value  String para ser transformada.
+    */
+    static replaceAccentuatedChars(text) {
+        text = text.toUpperCase();
+        text = text.replace(/[À]/, "A");
+        text = text.replace(/[Á]/, "A");
+        text = text.replace(/[Â]/, "A");
+        text = text.replace(/[Ã]/, "A");
+        text = text.replace(/[Ä]/, "A");
+        text = text.replace(/[È]/, "E");
+        text = text.replace(/[É]/, "E");
+        text = text.replace(/[Ê]/, "E");
+        text = text.replace(/[Ë]/, "E");
+        text = text.replace(/[Ì]/, "I");
+        text = text.replace(/[Í]/, "I");
+        text = text.replace(/[Î]/, "I");
+        text = text.replace(/[Ï]/, "I");
+        text = text.replace(/[Ò]/, "O");
+        text = text.replace(/[Ó]/, "O");
+        text = text.replace(/[Ô]/, "O");
+        text = text.replace(/[Ö]/, "O");
+        text = text.replace(/[Ù]/, "U");
+        text = text.replace(/[Ú]/, "U");
+        text = text.replace(/[Û]/, "U");
+        text = text.replace(/[Ü]/, "U");
+        text = text.replace(/[Ç]/, "C");
+        return text.replace(/[^a-z0-9]/gi, '');
+    }
+}
+
 class DataUnitBridge {
   constructor(gridController, dataUnit) {
     this._gridController = gridController;
@@ -110246,19 +110426,22 @@ class DataUnitBridge {
   processAction(action) {
     switch (action.type) {
       case Action.METADATA_LOADED:
-        const columnDefs = [];
-        this._dataUnit.metadata.fields.forEach(f => {
-          if (f.visible !== false) {
-            columnDefs.push({ label: f.label, name: f.name });
-          }
-        });
-        this._gridController.setColumnsDef(columnDefs, true);
+        this._gridController.setColumnsDef(this.buildColumnDefs(), true);
         break;
     }
   }
+  buildColumnDefs() {
+    const columnDefs = [];
+    this._dataUnit.metadata.fields.forEach(f => {
+      if (f.visible !== false) {
+        columnDefs.push({ label: f.label, name: f.name });
+      }
+    });
+    return columnDefs;
+  }
 }
 
-const ezGridCss = ":host{--ezgrid__header--background-color:var(--background--xlight, #FFF)}.grid__header{display:flex;justify-content:flex-end;align-items:center;background-color:var(--ezgrid__header--background-color)}";
+const ezGridCss = ".sc-ez-grid-h{display:grid;grid-template-rows:auto 1fr auto;height:100%;width:100%;--ezgrid__header--background-color:var(--background--xlight, #FFF)}.grid__header.sc-ez-grid{display:flex;justify-content:flex-end;align-items:center;background-color:var(--ezgrid__header--background-color)}";
 
 let EzGrid = class {
   constructor(hostRef) {
@@ -110338,6 +110521,9 @@ let EzGrid = class {
       serverURL: this.serverUrl,
       dataUnit: this.dataUnit
     });
+    if (this._dataUnitBridge) {
+      this._gridController.setColumnsDef(this._dataUnitBridge.buildColumnDefs(), true);
+    }
   }
   getPaginationControl() {
     if (this.pageSize === -1) {
@@ -110368,4 +110554,1234 @@ let EzGrid = class {
 };
 EzGrid.style = ezGridCss;
 
-export { EzGrid as ez_grid };
+const ezIconCss = ":host{display:flex;overflow:hidden;position:relative;--ez-icon--color:var(--icon--color, #ffffff)}svg{display:flex;justify-content:center;align-items:center;fill:var(--ez-icon--color)}.x-small{width:12px;height:12px}.small{width:16px;height:16px}.medium{width:20px;height:20px}.large{width:24px;height:24px}.x-large{width:30px;height:30px}";
+
+let EzIcon = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    /**
+     * Tamanho do ícone
+     */
+    this.size = 'medium';
+  }
+  isSprite() {
+    return this.href && this.href.indexOf('#') > -1;
+  }
+  render() {
+    return (h(Host, null, this.isSprite()
+      ?
+        h("svg", { class: this.size, role: "img" }, h("use", { xlinkHref: this.href }))
+      :
+        h("img", { class: this.size, src: this.href })));
+  }
+};
+EzIcon.style = 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, \"Sora\");--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:var(--color--primary-300, #E2F4EF);--ez-list__group--font-family:var(--font-pattern, \"Sora\");--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, \"Sora\");--ez-list__group__overlay--font-size:var(--text--medium, 14px);--ez-list__group-container__scrollbar--border-radius:var(--border--radius-large, 24px);--ez-list__group-container__scrollbar--width:var(--space--medium, 12px);--ez-list__group-container__scrollbar--background-color:var(--text--primary, #626e82);--ez-list__over--border--color:var(--color--primary, #008561);--ez-list__draggable__scrollbar--border-radius:var(--border--radius-large, 24px);--ez-list__draggable__scrollbar--width:var(--space--medium, 12px);--ez-list__draggable__scrollbar--background-color:var(--text--primary, #626e82);--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>');max-height:100%;width:100%;background-color:#fff;display:flex;z-index:var(--ez-list__host--z-index)}.draggable{display:flex;align-items:center;justify-content:space-between;background-color:#fff;font-family:var(--ez-list__item--font-family);font-size:var(--ez-list__item--font-size);flex:1}.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}.item-content{display:flex;justify-content:center;align-items:center}.draggable-list{color:var(--text-color);padding:0;margin:0;width:100%;max-height:100%;padding-bottom:var(--space--small)}.draggable-list li{background-color:#fff;display:flex;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);height:32px}.over{border-top:1px dashed var(--ez-list__over--border--color)}.draggable-selected{background-color:var(--background--strong) !important}.draggable-selected div:hover{background-color:var(--background--strong) !important}.draggable-list::-webkit-scrollbar-track{background-color:#f0f2f5}.draggable-list::-webkit-scrollbar-thumb{background-color:var(--ez-list__draggable__scrollbar--background-color);border-radius:var(--ez-list__draggable__scrollbar--border-radius)}.draggable-list::-webkit-scrollbar{background-color:#f0f2f5;width:var(--ez-list__draggable__scrollbar--width);max-width:var(--ez-list__draggable__scrollbar--width);min-width:var(--ez-list__draggable__scrollbar--width)}.draggable-icon{align-items:flex-start;display:flex;outline:none;border:none;background-color:unset}.draggable-icon::after{content:'';display:flex;background-color:var(--ez-list__icon--color);width:18px;height:18px;-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%}.group-name{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-track{background-color:#f0f2f5}.group-container::-webkit-scrollbar-thumb{background-color:var(--ez-list__group-container__scrollbar--background-color);border-radius:var(--ez-list__group-container__scrollbar--border-radius)}.group-container::-webkit-scrollbar{background-color:#f0f2f5;width:var(--ez-list__group-container__scrollbar--width);max-width:var(--ez-list__group-container__scrollbar--width);min-width:var(--ez-list__group-container__scrollbar--width)}.section-container{display:flex;position:relative;height:100%}.items-container{width:100%;max-height:100%;overflow-y:auto;outline:none}.group-items-container{width:100%;max-height:100%;height:100%;outline:none}.items-container::-webkit-scrollbar-track{background-color:#f0f2f5}.items-container::-webkit-scrollbar-thumb{background-color:var(--ez-list__draggable__scrollbar--background-color);border-radius:var(--ez-list__draggable__scrollbar--border-radius)}.items-container::-webkit-scrollbar{background-color:#f0f2f5;width:var(--ez-list__draggable__scrollbar--width);max-width:var(--ez-list__draggable__scrollbar--width);min-width:var(--ez-list__draggable__scrollbar--width)}.group-overlay{font-family:var(--ez-list__group__overlay--font-family);font-size:var(--ez-list__group__overlay--font-size);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}.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);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}";
+
+let EzList = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.ezChange = createEvent(this, "ezChange", 7);
+    this._listItems = [];
+    this._listGroupItems = [];
+    this._listItemsHistory = [];
+    /**
+    * Define a lista inicial do componente.
+    */
+    this.dataSource = [];
+    /**
+    * Define se o componente renderizará os itens separados em grupos..
+    */
+    this.useGroups = false;
+    /**
+    * Define se o componente terá o comportamento de arrasto de linhas.
+    */
+    this.ezDraggable = false;
+    /**
+    * Define se os items da lista serão selecionáveis.
+    */
+    this.ezSelectable = false;
+  }
+  createList() {
+    if (this.useGroups) {
+      let list = [...this.dataSource];
+      list.forEach(itemGroup => {
+        this.sortGroup(itemGroup);
+      });
+      this._listGroupItems = list;
+    }
+    else {
+      this._listItems = this._listItemsHistory.length > 0 ? this._listItemsHistory : [...this.dataSource];
+    }
+  }
+  sortGroup(itemGroup) {
+    if (itemGroup.sort) {
+      itemGroup.items.sort(function (a, b) {
+        return a.label < b.label ? -1 : a.label > b.label ? 1 : 0;
+      });
+      if (itemGroup.sort === "DSC") {
+        itemGroup.items.reverse();
+      }
+    }
+  }
+  /**
+  * Recebe   como argumento um ListItem {label: string} e um booleano que define se o componente deve fazer scroll para exibir o item específico (opcional).
+  */
+  async setSelection(selectedItem, scrollToOption) {
+    if (selectedItem && this.ezSelectable) {
+      if (this.useGroups) {
+        let newList = [...this._listGroupItems];
+        newList.forEach(groupItem => {
+          groupItem.items.forEach(item => {
+            if (item.label == selectedItem.label) {
+              item.selected = !item.selected;
+            }
+            else {
+              item.selected = false;
+            }
+          });
+        });
+        this._listGroupItems = newList;
+      }
+      else {
+        let newList = [...this._listItems];
+        newList.forEach(item => {
+          if (item.label === selectedItem.label) {
+            item.selected = !item.selected;
+          }
+          else {
+            item.selected = false;
+          }
+        });
+        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));
+        if (liElem) {
+          liElem.scrollIntoView();
+        }
+      }
+    }
+    else {
+      this.removeSelection();
+    }
+  }
+  removeSelection() {
+    if (this.useGroups) {
+      let newList = [...this._listGroupItems];
+      newList.forEach(groupItem => {
+        groupItem.items.forEach(item => {
+          item.selected = false;
+        });
+      });
+      this._listGroupItems = newList;
+    }
+    else {
+      let newList = [...this._listItems];
+      newList.forEach(item => {
+        item.selected = false;
+      });
+      this._listItems = newList;
+    }
+  }
+  /**
+   * Retorna   o item selecionado.
+  */
+  async getSelection() {
+    let selectedItem;
+    if (this.useGroups) {
+      this._listGroupItems.every(group => {
+        let item = group.items.find((item) => item.selected == true);
+        if (item) {
+          selectedItem = item;
+          return false;
+        }
+        return true;
+      });
+    }
+    else {
+      selectedItem = this._listItems.find((item) => item.selected == true);
+    }
+    return selectedItem;
+  }
+  /**
+   * Retorna   a lista de items conforme o modo de uso.
+   */
+  async getList() {
+    if (this.useGroups) {
+      return this._listGroupItems;
+    }
+    return this._listItems;
+  }
+  componentWillLoad() {
+    this._listItemsHistory = [];
+  }
+  componentWillRender() {
+    this.createList();
+  }
+  onDrop(ev, dragEndItem) {
+    this.removeOverClass(ev);
+    this.setSelection(undefined);
+    if (this._dragStartItem) {
+      if (this.useGroups) {
+        let newList = [...this._listGroupItems];
+        let groupEnd = this._listGroupItems.find(group => dragEndItem.groupName == group.group);
+        //Remove item arrastado
+        newList.find(group => group.group == this._dragStartItem.groupName).items.splice(this._dragStartItem.index, 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) {
+            return a.label < b.label ? -1 : a.label > b.label ? 1 : 0;
+          });
+          if (groupEnd.sort === "DSC") {
+            newList.find(group => group.group == dragEndItem.groupName).items.reverse();
+          }
+        }
+        else {
+          newList.find(group => group.group == dragEndItem.groupName).items.splice(dragEndItem.index, 0, this._dragStartItem.item);
+        }
+        this._listGroupItems = newList;
+        this.ezChange.emit(this._listGroupItems);
+      }
+      else {
+        let newList = [...this._listItems];
+        newList.splice(this._dragStartItem.index, 1);
+        newList.splice(dragEndItem.index, 0, this._dragStartItem.item);
+        this._listItems = newList;
+        this._listItemsHistory = newList;
+        this.ezChange.emit(this._listItems);
+      }
+    }
+    ev.stopPropagation();
+  }
+  onDropGroup(groupSelected) {
+    var _a;
+    let newList = [...this._listGroupItems];
+    this.setSelection(undefined);
+    let newGroup = newList.find(group => group.group === groupSelected.group);
+    if (newGroup) {
+      if (((_a = newGroup.items) === null || _a === void 0 ? void 0 : _a.length) > 0) {
+        let newItem;
+        newGroup.items.forEach((item, index) => {
+          if (item.label === this._dragStartItem.item.label) {
+            newItem = { item: item, index: index };
+          }
+        });
+        if (newItem) {
+          newGroup.items.splice(newItem.index, 1);
+          newGroup.items.unshift(newItem.item);
+          this.sortGroup(newGroup);
+        }
+        else {
+          newGroup.items.unshift(this._dragStartItem.item);
+          this.sortGroup(newGroup);
+          newList.find(group => group.group === this._dragStartItem.groupName).items.splice(this._dragStartItem.index, 1);
+        }
+      }
+      else {
+        newList.find(group => group.group === this._dragStartItem.groupName).items.splice(this._dragStartItem.index, 1);
+        newGroup.items = [this._dragStartItem.item];
+      }
+      this._listGroupItems = newList;
+    }
+  }
+  onDragEnd() {
+    this._dragStartItem = undefined;
+    if (this._draggingElement) {
+      try {
+        this._element.shadowRoot.removeChild(this._draggingElement);
+      }
+      catch (err) { }
+      this._draggingElement = undefined;
+    }
+  }
+  addOverClass(ev) {
+    if (ev.target.__proto__ == HTMLDivElement.prototype && ev.target.classList.contains("draggable")) {
+      ev.target.classList.add('over');
+    }
+  }
+  addOverGroupClass(ev, group) {
+    if (ev.target) {
+      let groupContainer = this._groupContainer.querySelector("div#" + this.getDivGroupId(group.group));
+      if (group.items.length > 0) {
+        let groupOverlay = groupContainer.getElementsByClassName("group-overlay")[0];
+        groupOverlay.setAttribute("style", "display:grid");
+      }
+      else {
+        groupContainer === null || groupContainer === void 0 ? void 0 : groupContainer.classList.add('overGroup');
+      }
+    }
+  }
+  removeOverClass(ev) {
+    ev.target.classList.remove('over');
+  }
+  removeOverGroupClass(ev, group) {
+    if (ev.target) {
+      let groupContainer = this._groupContainer.querySelector("div#" + this.getDivGroupId(group.group));
+      if (group.items.length > 0) {
+        let groupOverlay = groupContainer.getElementsByClassName("group-overlay")[0];
+        groupOverlay.setAttribute("style", "display:none");
+      }
+      else {
+        groupContainer === null || groupContainer === void 0 ? void 0 : groupContainer.classList.remove('overGroup');
+      }
+    }
+  }
+  onDragStart(event, item, group, index) {
+    if (this.useGroups) {
+      this._dragStartItem = { groupName: group.group, item: item, index: index };
+    }
+    else {
+      this._dragStartItem = { item: item.item, index: item.index };
+    }
+    let sourceElement = event.srcElement.cloneNode(true);
+    this._draggingElement = event.srcElement.cloneNode(true);
+    this._draggingElement.style.position = "absolute";
+    this._draggingElement.style.top = (event.clientY + 5) + 'px';
+    this._draggingElement.style.left = (event.clientX + 5) + 'px';
+    this._draggingElement.style.height = event.srcElement.clientHeight + 'px';
+    this._draggingElement.style.width = event.srcElement.clientWidth + 'px';
+    this._draggingElement.style.background = "#FFFFFF";
+    this._draggingElement.style.border = "1px solid #008561";
+    this._draggingElement.style["box-sizing"] = "border-box";
+    this._draggingElement.style["box-shadow"] = "0px 0px 16px rgba(0, 38, 111, 0.122)";
+    this._draggingElement.style["border-radius"] = "6px";
+    this._element.shadowRoot.appendChild(this._draggingElement);
+    event.dataTransfer.setDragImage(sourceElement, -10000, -10000);
+  }
+  onDrag(event) {
+    if (this._draggingElement) {
+      this._draggingElement.style.top = (event.clientY + 5) + 'px';
+      this._draggingElement.style.left = (event.clientX + 5) + 'px';
+    }
+  }
+  selectFirstItem() {
+    if (this.useGroups) {
+      this.setSelection(this._listGroupItems[0].items[0]);
+    }
+    {
+      this.setSelection(this._listItems[0]);
+    }
+  }
+  nextOption(selectedItem) {
+    let nextItem = undefined;
+    if (this.useGroups) {
+      this._listGroupItems.every((group, groupIndex, listGroupItems) => {
+        let item = undefined;
+        let itemIndex = group.items.findIndex(item => item.label == selectedItem.label);
+        if (itemIndex != undefined && itemIndex != -1) {
+          if (itemIndex === group.items.length - 1) {
+            if (groupIndex + 1 <= listGroupItems.length - 1) {
+              item = { label: listGroupItems[groupIndex + 1].items[0].label };
+            }
+          }
+          else {
+            item = { label: group.items[itemIndex + 1].label };
+          }
+        }
+        if (item != undefined) {
+          nextItem = item;
+          return false;
+        }
+        return true;
+      });
+    }
+    else {
+      let itemIndex = this._listItems.findIndex(item => item.label === selectedItem.label);
+      if (itemIndex >= 0 && itemIndex < this._listItems.length) {
+        nextItem = this._listItems[itemIndex + 1];
+      }
+    }
+    this.setSelection(nextItem, true);
+  }
+  previousOption(selectedItem) {
+    let previousItem = undefined;
+    if (this.useGroups) {
+      this._listGroupItems.every((group, groupIndex, listGroupItems) => {
+        let item = undefined;
+        let itemIndex = group.items.findIndex(item => item.label == selectedItem.label);
+        if (itemIndex != undefined && itemIndex != -1) {
+          if (itemIndex === 0) {
+            if ((groupIndex - 1 >= 0)) {
+              item = { label: listGroupItems[groupIndex - 1].items[listGroupItems[groupIndex - 1].items.length - 1].label };
+            }
+          }
+          else {
+            item = { label: group.items[itemIndex - 1].label };
+          }
+        }
+        if (item != undefined) {
+          previousItem = item;
+          return false;
+        }
+        return true;
+      });
+    }
+    else {
+      let itemIndex = this._listItems.findIndex(item => item.label === selectedItem.label);
+      if (itemIndex > 0 && itemIndex < this._listItems.length) {
+        previousItem = this._listItems[itemIndex - 1];
+      }
+    }
+    this.setSelection(previousItem, true);
+  }
+  keyDownHandler(event) {
+    event.preventDefault();
+    this.getSelection().then(selectedItem => {
+      if (selectedItem) {
+        switch (event.key) {
+          case "ArrowDown":
+            this.nextOption(selectedItem);
+            break;
+          case "ArrowUp":
+            this.previousOption(selectedItem);
+            break;
+        }
+      }
+      else {
+        this.selectFirstItem();
+      }
+    });
+    event.stopPropagation();
+  }
+  getItemId(itemLabel) {
+    if (itemLabel) {
+      return itemLabel.replace(/[^a-z0-9_]/gi, "_");
+    }
+    return undefined;
+  }
+  getDivGroupId(groupName) {
+    if (groupName) {
+      return "group-" + groupName.replace(/[^a-z0-9_]/gi, "_");
+    }
+    return undefined;
+  }
+  onDragOverGroup(event, group) {
+    if (this._dragStartItem && this._dragStartItem.groupName !== group.group) {
+      event.preventDefault();
+      this.addOverGroupClass(event, group);
+    }
+  }
+  onDragOverItem(event, group) {
+    if (this._dragStartItem) {
+      event.preventDefault();
+      if (group) {
+        group.sort ?
+          () => {
+            this.addOverGroupClass(event, group);
+          }
+          : this.addOverClass(event);
+      }
+      else {
+        this.addOverClass(event);
+      }
+      event.stopPropagation();
+    }
+  }
+  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, onDragLeave: (event) => { this.removeOverGroupClass(event, group); }, onDragEnd: (event) => { this.onDragEnd(); this.removeOverGroupClass(event, group); }, onDragOver: (event) => { this.onDragOverGroup(event, group); }, onDrop: () => this.onDropGroup(group) }, h("label", { class: "group-name", onDragLeave: (event) => { this.removeOverGroupClass(event, group); }, onDragOver: (event) => { this.onDragOverGroup(event, group); }, onDragEnd: (event) => { this.onDragEnd(); this.removeOverGroupClass(event, group); }, onDrop: () => this.onDropGroup(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) => {
+          return h("li", { id: 'item_' + this.getItemId(item.label), class: this.ezSelectable ? "selectable-container" : "", key: 'item_' + this.getItemId(item.label) }, h("div", { class: "draggable" + (item.selected == true ? " selected-item " : "") + (this.ezSelectable == true ? " selectable " : ""), onClick: () => { this.setSelection(item); }, onDragLeave: (event) => { group.sort ? undefined : this.removeOverClass(event); }, onDragEnd: () => this.onDragEnd(), onDragStart: (event) => this.onDragStart(event, item, group, index), onDragOver: (event) => this.onDragOverItem(event, group), onDrop: (event) => this.onDrop(event, { groupName: group.group, item: item, index: index }), onDrag: (event) => this.onDrag(event), draggable: this.ezDraggable }, h("div", { class: "item-content" }, this.ezDraggable ? h("span", { class: "draggable-icon" }) : undefined, h("p", { title: item.label, class: "person-name text--ellipsis" }, item.label)), this.itemSlotBuilder ?
+            h("div", { class: "slot-item" }, this.itemSlotBuilder(item, group))
+            : undefined));
+        }))), h("div", { class: "group-overlay" }, h("div", { id: "overlay-text" }, h("b", null, "Mover"), " para ", group.group))));
+      }))
+      :
+        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) => {
+          return h("li", { id: 'item_' + this.getItemId(item.label), class: this.ezSelectable ? "selectable-container" : "", key: 'item_' + this.getItemId(item.label) }, h("div", { class: "draggable" + (item.selected == true ? " selected-item " : "") + (this.ezSelectable == true ? " selectable " : ""), onDragStart: (event) => this.onDragStart(event, { item: item, index: index }), onClick: () => { this.setSelection(item); }, onDragLeave: event => this.removeOverClass(event), onDragOver: (event) => this.onDragOverItem(event), onDragEnd: () => this.onDragEnd(), onDrop: (event) => this.onDrop(event, { item: item, index: index }), onDrag: (event) => this.onDrag(event), draggable: this.ezDraggable }, h("div", { class: "item-content" }, this.ezDraggable ? h("span", { class: "draggable-icon" }) : undefined, h("p", { title: item.label, class: "person-name text--ellipsis" }, item.label)), this.itemSlotBuilder ?
+            h("div", null, this.itemSlotBuilder(item))
+            : undefined));
+        })))));
+  }
+};
+EzList.style = ezListCss;
+
+const ezModalCss = ":host{--ez-modal-z-index:var(--most-visible, 3);--ez-modal-vertical-padding:var(--space--large, 24px);display:block}.modal{position:fixed;padding:var(--ez-modal-vertical-padding) 0;display:flex;top:0px;z-index:var(--ez-modal-z-index);left:0px;width:100%;box-sizing:border-box;height:100vh;backdrop-filter:blur(4px);background:rgba(0, 4, 12, 0.4)}@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;max-height:calc(100% - 48px);height:100%;overflow-y:auto;background-color:rgb(255, 255, 255);padding:24px;border-radius:12px 0px 0px 12px;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%}}";
+
+let EzModal = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.ezCloseModal = createEvent(this, "ezCloseModal", 7);
+    /**
+    * Controle de exibição do Modal
+    */
+    this.opened = true;
+    /**
+    * Define se o modal será fechado ao clicar ESC
+    */
+    this.closeEsc = false;
+    /**
+    * Define se o modal será fechado ao clicar fora do conteúdo.
+    */
+    this.closeOutsideClick = false;
+    this.handleKeyboardEvent = (ev) => {
+      if ((ev === null || ev === void 0 ? void 0 : ev.key) === "Escape" && this.closeEsc) {
+        this.closeModal();
+      }
+    };
+  }
+  handleopenedChange() {
+    if (this.opened) {
+      document.addEventListener("keydown", this.handleKeyboardEvent);
+    }
+    else {
+      document.removeEventListener("keydown", this.handleKeyboardEvent);
+    }
+  }
+  closeModal() {
+    this.opened = false;
+    this.ezCloseModal.emit(this.opened);
+  }
+  componentDidLoad() {
+    this.handleopenedChange();
+  }
+  onMouseDownHandler(event) {
+    if (this.closeOutsideClick && event.target === this._overlay) {
+      this.closeModal();
+    }
+  }
+  render() {
+    const positionSufix = this.align === "left" ? "left" : "right";
+    return (h(Host, null, this.opened
+      ?
+        h("div", { class: "modal", onMouseDown: evt => this.onMouseDownHandler(evt) }, h("div", { class: `modal__container modal__container--${positionSufix}`, ref: ref => this._overlay = ref }, h("div", { class: `modal__content modal__content--${positionSufix} ${this.modalSize}` }, h("slot", null))))
+      :
+        undefined));
+  }
+  static get watchers() { return {
+    "opened": ["handleopenedChange"]
+  }; }
+};
+EzModal.style = ezModalCss;
+
+const ezTabselectorCss = "@keyframes activate{0%{clip-path:inset(calc(100% - 3px) 50% 0px 50%)}100%{clip-path:inset(calc(100% - 3px) 0px 0px 0px)}}:host{display:flex;position:relative;width:100%;overflow:hidden;--tabselector--backward-icon:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" version=\"1.1\" height=\"16px\" width=\"10px\"><path d=\"M 9.7808475,13.860393 3.9204526,8.0000004 9.7808475,2.0624965 7.9301965,0.28895552 0.21915255,8.0000004 7.9301965,15.711044 Z\"/></svg>');--tabselector--forward-icon:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" version=\"1.1\" height=\"16px\" width=\"10px\"><path d=\"M 0.21915251,13.860393 6.0795475,8.0000007 0.21915251,2.0624968 2.0698036,0.28895588 9.7808475,8.0000007 2.0698036,15.711044 Z\"/></svg>')}.scroll{display:flex;width:100%;scroll-behavior:smooth;overflow-x:auto;scrollbar-width:none}.scroll.startHidden{-webkit-mask-image:linear-gradient(90deg, transparent 20px, #000 48px)}.scroll.midle{-webkit-mask-image:linear-gradient(90deg, transparent 20px, #000 48px, #000 calc(100% - 48px), transparent calc(100% - 20px))}.scroll.endHidden{-webkit-mask-image:linear-gradient(90deg, #000 calc(100% - 48px), transparent calc(100% - 20px))}.tab{display:flex;border:none;min-width:100px;background-color:unset;cursor:pointer;padding:6px 12px;align-items:center;justify-content:center;color:var(--text--primary, #626e82);font-family:var(--font-pattern, \"Sora, Algerian\");font-size:var(--title--small, 14px)}.tab:focus,.forward-button,.backward-button{outline:none}.is-active{position:relative;color:var(--color--primary, #008561)}.is-active::after{content:\"\";position:absolute;width:100%;height:100%;background-color:var(--color--primary, #008561);clip-path:inset(calc(100% - 3px) 0px 0px 0px);animation:activate 0.25s ease-in-out}.is-focused{border:1px dashed var(--color--primary, #000000c5)}.tab-label{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;text-shadow:var(--text-shadow);margin-bottom:var(--space--extra-small, 3px)}.forward-button,.backward-button{position:absolute;z-index:1;display:flex;box-sizing:border-box;padding:0px;top:0px;right:0px;width:16px;height:100%;border:none;background-color:unset;cursor:pointer;justify-content:center;align-items:center}.backward-button{left:0px}.forward-button::after,.backward-button::after{content:'';display:flex;background-color:var(--text--primary, #008561);width:10px;height:16px}.forward-button::after{-webkit-mask-image:var(--tabselector--forward-icon);mask-image:var(--tabselector--forward-icon)}.backward-button::after{-webkit-mask-image:var(--tabselector--backward-icon);mask-image:var(--tabselector--backward-icon)}.forward-button:hover::after,.backward-button:hover::after{background-color:var(--color--primary, #4e4e4e)}.hidden{display:none}.scroll::-webkit-scrollbar{display:none}";
+
+let EzTabselector = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.ezChange = createEvent(this, "ezChange", 7);
+    this.setFocusedParam = (ev) => {
+      if (ev.key === "Enter") {
+        this.selectedIndex = this.focusedIndex;
+        this.focusedIndex = undefined;
+        this.selectedTab = this._processedTabs[this.selectedIndex]["tabKey"];
+        this.handleTabClick(this.selectedTab, parseInt(this.selectedIndex));
+        ev.preventDefault();
+        this.setFocusedTab(this.selectedIndex);
+      }
+      else if (ev.key === "ArrowLeft" || ev.key === "ArrowRight") {
+        let operator = undefined;
+        if (ev.key === "ArrowLeft") {
+          operator = false;
+        }
+        else if (ev.key === "ArrowRight") {
+          operator = true;
+        }
+        else {
+          return;
+        }
+        if (this.focusedIndex === undefined) {
+          if (operator === false) {
+            this.focusedIndex = this.selectedIndex !== undefined ? (parseInt(this.selectedIndex) - 1).toString() : undefined;
+          }
+          else {
+            this.focusedIndex = this.selectedIndex !== undefined ? (parseInt(this.selectedIndex) + 1).toString() : undefined;
+          }
+        }
+        else {
+          if (operator === false) {
+            this.focusedIndex = (parseInt(this.focusedIndex) - 1).toString();
+          }
+          else {
+            this.focusedIndex = (parseInt(this.focusedIndex) + 1).toString();
+          }
+        }
+        if (parseInt(this.focusedIndex) < 0) {
+          this.focusedIndex = "0";
+        }
+        else if (parseInt(this.focusedIndex) > this._processedTabs.length - 1) {
+          this.focusedIndex = (this._processedTabs.length - 1).toString();
+        }
+        this.setFocusedBtn(true, this.focusedIndex);
+        this.setFocusedTab(this.focusedIndex);
+        this.ezChange.emit(this.selectedTab);
+      }
+      else if (ev.key === "Tab" || ev.key === "Escape") {
+        this.focusedIndex = undefined;
+        this.selectedTab = this._processedTabs[this.selectedIndex]["tabKey"];
+        this.handleTabClick(this.selectedTab, parseInt(this.selectedIndex));
+        ev.preventDefault();
+        this.setFocusedTab(this.selectedIndex);
+      }
+      // this.setFocusedTab();
+    };
+  }
+  handleTabClick(tab, index) {
+    this.selectedIndex = index.toString();
+    this.focusedIndex = undefined;
+    this.selectedTab = tab;
+    this.ezChange.emit(this.selectedTab);
+    this.setFocusedBtn(false, this.selectedIndex);
+  }
+  componentWillRender() {
+    if (!this._processedTabs) {
+      this._processedTabs = [];
+      if (this.tabs) {
+        this.tabs.split(",").forEach((label) => {
+          label = label.trim();
+          this._processedTabs.push(new Tab(label, label));
+        });
+      }
+      this._hostElem.querySelectorAll("ez-tab").forEach((elem) => {
+        const tabKey = elem.getAttribute("tabKey");
+        const label = elem.getAttribute("label");
+        const t = new Tab(label, tabKey);
+        const content = elem.firstChild;
+        if (content) {
+          content.setAttribute("slot", "tab" + this._processedTabs.length);
+          this._hostElem.appendChild(content);
+        }
+        this._processedTabs.push(t);
+      });
+    }
+  }
+  handleSlotChange(ev) {
+    const slot = ev.target;
+    const content = slot.assignedElements()[0];
+    if (content) {
+      content.style.marginLeft = "6px";
+    }
+  }
+  scrollBackward() {
+    const container = this._scrollContainer;
+    if (container) {
+      container.scrollLeft -= container.clientWidth;
+    }
+  }
+  scrollFoward() {
+    const container = this._scrollContainer;
+    if (container) {
+      let lastTab = null;
+      container.querySelectorAll(".tab").forEach((tab) => {
+        if (tab.getBoundingClientRect().right < container.clientWidth) {
+          lastTab = tab;
+        }
+      });
+      container.scrollLeft = lastTab.offsetLeft + lastTab.offsetWidth;
+    }
+  }
+  componentDidRender() {
+    this.updateScroll();
+  }
+  updateScroll() {
+    const container = this._scrollContainer;
+    if (container) {
+      const { scrollWidth, clientWidth, scrollLeft } = container;
+      const remainingScroll = scrollWidth - clientWidth - Math.ceil(scrollLeft);
+      this._startHidden = container.scrollLeft > 0;
+      this._endHidden = remainingScroll > 0;
+      if (this._startHidden) {
+        this._backwardButton.classList.remove("hidden");
+      }
+      else {
+        this._backwardButton.classList.add("hidden");
+      }
+      if (this._endHidden) {
+        this._forwardButton.classList.remove("hidden");
+      }
+      else {
+        this._forwardButton.classList.add("hidden");
+      }
+      const classNames = ["", "startHidden", "endHidden", "midle"];
+      const currentClass = classNames[Number(this._startHidden) | Number(this._endHidden) << 1];
+      classNames.forEach((name) => {
+        if (name !== currentClass && container.classList.contains(name)) {
+          container.classList.remove(name);
+        }
+      });
+      if (currentClass && !container.classList.contains(currentClass)) {
+        container.classList.add(currentClass);
+      }
+    }
+  }
+  domScrollHandler() {
+    window.clearTimeout(this._scrollCallBack);
+    this._scrollCallBack = window.setTimeout(() => { this.updateScroll(); }, 200);
+  }
+  setFocusedTab(index) {
+    window.clearTimeout(this._scrollCallBackTest);
+    this._scrollCallBackTest = window.setTimeout(() => {
+      const tabtoscroll = this._scrollContainer.querySelector(`#tab${index}`);
+      tabtoscroll.scrollIntoView();
+    }, 200);
+  }
+  getTextWidth(text) {
+    if (this._textMesurement === undefined) {
+      this._textMesurement = this._hostElem.shadowRoot.ownerDocument.createElement("canvas");
+    }
+    const context = this._textMesurement.getContext("2d");
+    context.font = "14px Sora, Algerian";
+    return Math.min(220, 24 + context.measureText(text).width) + "px";
+  }
+  ;
+  setFocusedBtn(visible, parameter) {
+    const tabsButtons = this._scrollContainer.querySelectorAll(".tab");
+    tabsButtons.forEach((el) => {
+      el.classList.remove("is-focused");
+      if (el.id === "tab" + parameter && visible) {
+        el.classList.add("is-focused");
+      }
+    });
+  }
+  render() {
+    return (h(Host, null, h("button", { class: "backward-button", ref: (el) => this._backwardButton = el, onClick: () => this.scrollBackward() }), h("div", { class: "scroll", ref: (el) => this._scrollContainer = el, onScroll: () => this.domScrollHandler(), onKeyDown: (ev) => this.setFocusedParam(ev) }, this._processedTabs.map((tab, index) => {
+      const labelStyle = { "min-width": this.getTextWidth(tab.label) };
+      const tabId = "tab" + index;
+      const isSelected = index === parseInt(this.selectedIndex) || (this.selectedTab && tab.tabKey === this.selectedTab);
+      if (isSelected) {
+        this.selectedTab = tab.tabKey;
+        this.selectedIndex = index.toString();
+      }
+      return h("button", { id: tabId, class: `tab${isSelected ? " is-active" : ""}`, onClick: () => this.handleTabClick(tab.tabKey, index), style: labelStyle }, h("span", { class: "tab-label", title: tab.label }, tab.label), h("slot", { name: tabId, onSlotchange: (ev) => { this.handleSlotChange(ev); } }));
+    })), h("button", { class: "forward-button", ref: (el) => this._forwardButton = el, onClick: () => this.scrollFoward() })));
+  }
+  get _hostElem() { return getElement(this); }
+};
+class Tab {
+  constructor(label, tabKey) {
+    this.label = label;
+    this.tabKey = tabKey;
+  }
+}
+EzTabselector.style = ezTabselectorCss;
+
+const ezTextInputCss = ":host{--ez-text-input--height:42px;--ez-text-input--width:100%;--ez-text-input__icon--width:48px;--ez-text-input--border-radius:var(--border--radius-medium, 12px);--ez-text-input--font-size:var(--text--medium, 14px);--ez-text-input--font-family:var(--font-pattern, Arial);--ez-text-input--font-weight:var(--text-weight--large, 500);--ez-text-input--color:var(--title--primary, #000);--ez-text-input__input--background-color:var(--background--medium, #e0e0e0);--ez-text-input__input--border:var(--border--medium, 2px solid);--ez-text-input__input--border-color:var(--ez-text-input__input--background-color);--ez-text-input__input--focus--border-color:var(--color--alert-cold-800, #042EFF);--ez-text-input__input--disabled--background-color:var(--color--disable-secondary, #F2F5F8);--ez-text-input__input--disabled--color:var(--text--disable, #AFB6C0);--ez-text-input__input--error--border-color:#CC2936;--ez-text-input__message_box--font-size:var(--text--small, 12px);--ez-text-input__message_box--info--color:var(--color--success, #22085d);--ez-text-input__message_box--error--color:var(--color--error, #FF0000);--ez-text-input__label--floating--top:6px;--ez-text-input__label--padding-top:12px;--ez-text-input__label--padding-left:14px;--ez-text-input__label--padding-right:12px;display:flex;flex-wrap:wrap;position:relative;width:var(--ez-text-input--width)}input{width:100%;box-sizing:border-box;padding:var(--space--medium, 6px);font-weight:var(--text-weight--large, 600);height:var(--ez-text-input--height);border-radius:var(--ez-text-input--border-radius);font-family:var(--ez-text-input--font-family);font-size:var(--ez-text-input--font-size);border:var(--ez-text-input__input--border);border-color:var(--ez-text-input__input--border-color);background-color:var(--ez-text-input__input--background-color);color:var(--ez-text-input--color)}input:disabled{background-color:var(--ez-text-input__input--disabled--background-color);color:var(--ez-text-input__input--disabled--color)}input:focus{outline:none;border-color:var(--ez-text-input__input--focus--border-color)}input.icon--left{padding-left:var(--ez-text-input__icon--width)}input.icon--right{padding-right:var(--ez-text-input__icon--width)}input.hasError{color:var(--ez-text-input--color);border-color:var(--ez-text-input__input--error--border-color)}input.text--right{text-align:right}.message-box{display:flex;min-height:16px;min-width:100%;margin-top:2px;line-height:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:var(--ez-text-input--font-family);font-size:var(--ez-text-input__message_box--font-size);color:var(--ez-text-input__message_box--info--color)}.hasError{color:var(--ez-text-input__message_box--error--color)}.input__label{box-sizing:border-box;position:absolute;z-index:var(--visible);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;-webkit-transition:font-size .05s, top .05s;transition:font-size .05s, top .05s;width:calc(100% - var(--ez-text-input__label--padding-right));left:var(--ez-text-input--space--medium);font-family:var(--ez-text-input--font-family);font-size:var(--ez-text-input--font-size);font-weight:var(--ez-text-input--font-weight);color:var(--ez-text-input--color);top:var(--ez-text-input__label--padding-top);left:var(--ez-text-input__label--padding-left);padding-right:var(--ez-text-input__label--padding-right)}.input__label--floated{font-family:var(--ez-text-input--font-family);font-size:var(--text--extra-small);color:var(--text--primary);top:var(--ez-text-input__label--floating--top)}.input__label--disabled{color:var(--ez-text-input__input--disabled--color)}.input__label--left{text-align:left;left:calc(var(--ez-text-input__icon--width) + 2px);width:calc(100% - var(--ez-text-input__icon--width))}.input__label--right{right:var(--ez-text-input__icon--width);width:calc(100% - var(--ez-text-input__icon--width))}.input__label--left.input__label--right{left:calc(var(--ez-text-input__icon--width) + 2px);width:calc(100% - var(--ez-text-input__icon--width) * 2)}.input--with--label{padding-bottom:0}";
+
+let EzTextInput = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.ezChange = createEvent(this, "ezChange", 7);
+    /**
+     * Deixa o campo disponível ou não para digitação.
+     */
+    this.enabled = true;
+  }
+  showError() {
+    const hasError = typeof this.errorMessage === "string" && this.errorMessage !== "";
+    if (hasError) {
+      this._inputElem.classList.add("hasError");
+      this._messageBoxElem.classList.add("hasError");
+    }
+    else {
+      this._inputElem.classList.remove("hasError");
+      this._messageBoxElem.classList.remove("hasError");
+    }
+  }
+  prepareMask() {
+    if (this.mask) {
+      if (this._maskFormatter == undefined) {
+        this._maskFormatter = new MaskFormatter(this.mask);
+      }
+      else {
+        this._maskFormatter.mask = this.mask;
+      }
+    }
+  }
+  updateInputValue() {
+    if (this._inputElem) {
+      this._inputElem.value = this.value;
+    }
+    this.handleChange();
+    this.errorMessage = "";
+    this.ezChange.emit(this.value);
+    this.adjustFloatingLabel();
+  }
+  adjustFloatingLabel() {
+    if (this.label && this._labelElem) {
+      if (this._inputElem && !this._inputElem.classList.contains("input--with--label")) {
+        this._inputElem.classList.add("input--with--label");
+      }
+      const hasValue = this.value && this.value.toString().length > 0;
+      const containsFloatedClass = this._labelElem.classList.contains("input__label--floated");
+      if (hasValue || this.isFocused()) {
+        if (!containsFloatedClass) {
+          this._labelElem.classList.add("input__label--floated");
+        }
+      }
+      else {
+        if (containsFloatedClass) {
+          this._labelElem.classList.remove("input__label--floated");
+        }
+      }
+    }
+  }
+  isFocused() {
+    return this._hostElement.shadowRoot.activeElement !== null;
+  }
+  //---------------------------------------------
+  // Public methods
+  //---------------------------------------------
+  /**
+   * Faz o foco no componente de input
+   */
+  async setFocus() {
+    this._inputElem.focus();
+  }
+  /**
+   * Remove o foco no componente de input
+   */
+  async setBlur() {
+    this._inputElem.blur();
+  }
+  //---------------------------------------------
+  // Event handlers
+  //---------------------------------------------
+  handleFocusout() {
+    const value = this._inputElem.value;
+    if (value && this._maskFormatter) {
+      try {
+        this._inputElem.value = this._maskFormatter.format(value);
+      }
+      catch (e) {
+        this.errorMessage = e.message;
+      }
+    }
+    this.value = this._inputElem.value;
+    this.adjustFloatingLabel();
+  }
+  isValidValue(value) {
+    if (this.restrict) {
+      return Array.from(value).reduce((valid, c) => valid && this.restrict.indexOf(c) > -1, true);
+    }
+    return true;
+  }
+  handleChange() {
+    if (!this._inputElem) {
+      return;
+    }
+    const value = this._inputElem.value;
+    if (this.isValidValue(value)) {
+      this._lastValidValue = value;
+    }
+    else {
+      this._inputElem.value = this._lastValidValue === undefined ? "" : this._lastValidValue;
+    }
+    this.value = this._inputElem.value;
+  }
+  handleSlotChange(ev) {
+    const slot = ev.target;
+    const content = slot.assignedElements()[0];
+    if (content) {
+      content.style.position = "absolute";
+      content.style.display = "flex";
+      content.style.alignItems = "center";
+      content.style.justifyContent = "center";
+      content.style.overflow = "hidden";
+      content.style.top = "0px";
+      content.style.width = "var(--ez-text-input__icon--width)";
+      content.style.height = "var(--ez-text-input--height)";
+      if (slot.name == "leftIcon") {
+        content.style.left = "0px";
+        content.style.borderRadius = "var(--ez-text-input--border-radius) 0 0 var(--ez-text-input--border-radius)";
+        this._inputElem.classList.add("icon--left");
+        if (this._labelElem) {
+          this._labelElem.classList.add("input__label--left");
+        }
+      }
+      else if (slot.name == "rightIcon") {
+        content.style.right = "0px";
+        content.style.borderRadius = "0 var(--ez-text-input--border-radius) var(--ez-text-input--border-radius) 0";
+        this._inputElem.classList.add("icon--right");
+        if (this._labelElem) {
+          this._labelElem.classList.add("input__label--right");
+        }
+      }
+    }
+    this.showError();
+  }
+  doFocus() {
+    if (this.label && this._labelElem && !this._labelElem.classList.contains("input__label--floated")) {
+      this._labelElem.classList.add("input__label--floated");
+    }
+  }
+  //---------------------------------------------
+  // Lifecycle web component
+  //---------------------------------------------
+  componentDidLoad() {
+    this.showError();
+    this.prepareMask();
+    this.adjustFloatingLabel();
+  }
+  componentWillLoad() {
+    this.prepareMask();
+    if (this.value) {
+      if (this._maskFormatter) {
+        try {
+          this.value = this._maskFormatter.format(this.value);
+        }
+        catch (e) {
+          this.errorMessage = e.message;
+        }
+      }
+      if (!this.isValidValue(this.value)) {
+        this._lastValidValue = "";
+        this.value = "";
+      }
+    }
+  }
+  render() {
+    return (h(Host, null, h("slot", { name: "leftIcon", onSlotchange: (ev) => { this.handleSlotChange(ev); } }), this.label ?
+      h("label", { ref: (el) => this._labelElem = el, class: this.enabled ? "input__label" : "input__label input__label--disabled", onClick: () => this._inputElem.focus(), title: this.label }, this.label)
+      : null, h("input", { onFocus: () => this.doFocus(), ref: (el) => this._inputElem = el, type: "text", value: this.value, disabled: !this.enabled, onInput: () => { this.handleChange(); }, onFocusout: () => { this.handleFocusout(); } }), h("slot", { name: "rightIcon", onSlotchange: (ev) => { this.handleSlotChange(ev); } }), h("span", { class: "message-box", ref: (el) => this._messageBoxElem = el, title: this.errorMessage }, this.errorMessage)));
+  }
+  get _hostElement() { return getElement(this); }
+  static get watchers() { return {
+    "errorMessage": ["showError"],
+    "mask": ["prepareMask"],
+    "value": ["updateInputValue"]
+  }; }
+};
+EzTextInput.style = ezTextInputCss;
+
+const gridConfigCss = ".sc-grid-config-h{--ez-grid-config__footer--padding-top:var(--space--medium, 12px);--ez-grid-config__main--padding-right:var(--space--medium, 12px);--ez-grid-config__tabselector-container--padding:var(--space--medium, 12px);--ez-grid-config__button-close--padding-left:var(--space--medium, 12px);--ez-grid-config__subtitle--font-family:var(--font-pattern, \"Sora\");--ez-grid-config__title--font-family:var(--font-pattern, \"Sora\");--ez-grid-config__title--font-weight:var(--text-weight--large, 14px);--ez-grid-config__subtitle--font-size:var(--text--medium, 14px);--ez-grid-config__scrollbar--width:var(--space--medium, 12px);--ez-grid-config__main__scrollbar--background-color:var(--text--primary, #626e82);--ez-grid-config__main__scrollbar--border-radius:var(--border--radius-medium, 12px);display:grid;grid-template-rows:auto 1fr auto;max-height:100%;width:100%}.padding-right--medium.sc-grid-config{padding-right:var(--space--medium)}ez-list.sc-grid-config{height:100%}.grid-config__footer.sc-grid-config{padding-top:var(--ez-grid-config__footer--padding-top);display:flex;justify-content:flex-end;width:100%}.hidden.sc-grid-config{display:none}.grid-config__main.sc-grid-config{padding-right:var(--ez-grid-config__main--padding-right);overflow-y:auto}.tabselector-container.sc-grid-config{padding:var(--ez-grid-config__tabselector-container--padding) 0}.button-close.sc-grid-config{padding-left:var(--ez-grid-config__button-close--padding-left)}.title-container.sc-grid-config{display:flex;justify-content:center;align-items:center}.subtitle.sc-grid-config{font-family:var(--ez-grid-config__subtitle--font-family);font-size:var(--ez-grid-config__subtitle--font-size)}.title.sc-grid-config{display:flex;font-family:var(--ez-grid-config__title--font-family);margin:0;font-weight:var(--ez-grid-config__title--font-weight);line-height:1.3}.grid-config__main.sc-grid-config::-webkit-scrollbar-track{background-color:#f0f2f5}.grid-config__main.sc-grid-config::-webkit-scrollbar-thumb{background-color:var(--ez-grid-config__main__scrollbar--background-color);border-radius:var(--ez-grid-config__main__scrollbar--border-radius)}.grid-config__main.sc-grid-config::-webkit-scrollbar{background-color:#f0f2f5;width:var(--ez-grid-config__scrollbar--width);max-width:var(--ez-grid-config__scrollbar--width);min-width:var(--ez-grid-config__scrollbar--width)}";
+
+let GridConfig = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.configFinish = createEvent(this, "configFinish", 7);
+    this.configCancel = createEvent(this, "configCancel", 7);
+    this._columnListHistory = [];
+    this._orderListItems = [];
+    this._columListItems = [];
+    this.selectedTab = "Colunas";
+    this._selectedIndex = -1;
+  }
+  /* Creation Methods */
+  createOrderList() {
+    var _a;
+    let newList = [];
+    if (((_a = this._columnListHistory) === null || _a === void 0 ? void 0 : _a.length) > 0) {
+      this._columnListHistory.find(group => group.group === "Visíveis").items.forEach(column => {
+        let item = { label: column.label };
+        newList.push(item);
+      });
+    }
+    else {
+      this.columns.forEach(column => {
+        let item = { name: column.name, label: column.label };
+        if (!column.hidden) {
+          newList.push(item);
+        }
+      });
+    }
+    this._orderListItems = newList;
+  }
+  createColumnList() {
+    let visibleGroup = {
+      group: 'Visíveis',
+      items: [],
+    };
+    let hiddenGroup = {
+      group: 'Ocultas',
+      items: [],
+      sort: 'ASC'
+    };
+    this.columns.forEach(column => {
+      let item = { label: column.label };
+      if (column.hidden) {
+        hiddenGroup.items.push(item);
+      }
+      else {
+        visibleGroup.items.push(item);
+      }
+    });
+    if (this._columnListHistory.length <= 0) {
+      this._columListItems = [visibleGroup, hiddenGroup];
+    }
+  }
+  buildColumnListSlot(item, group) {
+    return (h("div", null, h("ez-check", { mode: 'switch', id: 'switch' + item + group, value: group.group === "Visíveis", onEzChange: (ev) => { this.switchColumnGroup(ev, item); } })));
+  }
+  buildOrderListSlot(item) {
+    let existingItem = this.columns.find(columnItem => columnItem.label === item.label);
+    return (h("div", null, h("select-box", { selectedOption: existingItem === null || existingItem === void 0 ? void 0 : existingItem.sort, key: 'select-box' + item, onEzChange: (ev) => { ev.stopPropagation(); this.updateOrder(ev.detail, item); } })));
+  }
+  updateOrder(sortOrder, updatedItem) {
+    let newList = [...this.columns];
+    let newItem = newList.find(item => item.label === updatedItem.label);
+    if (newItem) {
+      newItem.sort = sortOrder;
+    }
+    this.columns = newList;
+  }
+  /* Actions Methods */
+  switchColumnGroup(ev, switchedItem) {
+    ev.stopPropagation();
+    let newList = [...this._columListItems];
+    if (ev.detail === true) {
+      let hiddenGroup = newList.find(group => group.group === "Ocultas");
+      let index = hiddenGroup.items.findIndex(item => item.label === switchedItem.label);
+      if (index >= 0) {
+        hiddenGroup.items.splice(index, 1);
+      }
+      let visibleGroup = newList.find(group => group.group === "Visíveis");
+      visibleGroup.items.push(switchedItem);
+      this._columListItems = newList;
+      this.createOrderList();
+    }
+    else if (ev.detail === false) {
+      let visibleGroup = newList.find(group => group.group === "Visíveis");
+      let index = visibleGroup.items.findIndex(item => item.label === switchedItem.label);
+      if (index >= 0) {
+        visibleGroup.items.splice(index, 1);
+      }
+      let hiddenGroup = newList.find(group => group.group === "Ocultas");
+      hiddenGroup.items.push(switchedItem);
+      this._columListItems = newList;
+      this.createOrderList();
+    }
+  }
+  finish() {
+    let newColumnList = [];
+    this._columListItems.forEach(group => {
+      group.items.forEach(item => {
+        const baseColumn = this.columns.find(column => column.label === item.label);
+        let newColumnItem = Object.assign({}, baseColumn);
+        if (group.group === "Ocultas") {
+          newColumnItem.hidden = true;
+        }
+        else {
+          newColumnItem.hidden = false;
+        }
+        newColumnList.push(newColumnItem);
+      });
+    });
+    this._columnListHistory = [];
+    this.columns = newColumnList;
+    this.configFinish.emit(this.columns);
+  }
+  async locateColumn(evt, searchingText) {
+    var _a;
+    const hitEnter = evt.key === "Enter";
+    if (!searchingText) {
+      searchingText = (_a = evt.currentTarget) === null || _a === void 0 ? void 0 : _a.value;
+    }
+    let newSelected = -1;
+    if (this.selectedTab === "Ordenação") {
+      if (searchingText) {
+        const matchedIndexes = [];
+        let orderListDatasource;
+        await this._orderList.getList().then(listGroup => {
+          orderListDatasource = listGroup;
+          orderListDatasource.forEach((column, index) => {
+            if (this.compareWords(column, searchingText)) {
+              matchedIndexes.push(index);
+            }
+          });
+        });
+        if (matchedIndexes.length > 0) {
+          if (hitEnter) {
+            for (let j = 0; j < matchedIndexes.length; j++) {
+              if (matchedIndexes[j] > this._selectedIndex) {
+                newSelected = matchedIndexes[j];
+                break;
+              }
+            }
+          }
+          if (newSelected === -1) {
+            newSelected = matchedIndexes[0];
+          }
+        }
+        this._selectedIndex = newSelected;
+        let selectedColumn;
+        selectedColumn = orderListDatasource[newSelected];
+        if (selectedColumn) {
+          this._orderList.setSelection({ label: selectedColumn.label }, true);
+        }
+        else {
+          this._orderList.setSelection(undefined);
+        }
+      }
+      else {
+        this._orderList.setSelection(undefined);
+      }
+    }
+    else {
+      if (searchingText) {
+        const matchedIndexes = [];
+        this.columns.forEach((column, index) => {
+          if (this.compareWords(column, searchingText)) {
+            matchedIndexes.push(index);
+          }
+        });
+        if (matchedIndexes.length > 0) {
+          if (hitEnter) {
+            for (let j = 0; j < matchedIndexes.length; j++) {
+              if (matchedIndexes[j] > this._selectedIndex) {
+                newSelected = matchedIndexes[j];
+                break;
+              }
+            }
+          }
+          if (newSelected === -1) {
+            newSelected = matchedIndexes[0];
+          }
+        }
+        this._selectedIndex = newSelected;
+        let selectedColumn = this.columns[newSelected];
+        if (selectedColumn) {
+          this._columnList.setSelection({ label: selectedColumn.label }, true);
+        }
+        else {
+          this._columnList.setSelection(undefined);
+        }
+      }
+      else {
+        this._columnList.setSelection(undefined);
+      }
+    }
+  }
+  compareWords(column, searchingText) {
+    if (StringUtils.replaceAccentuatedChars(column.label).indexOf(StringUtils.replaceAccentuatedChars(searchingText)) > -1) {
+      return true;
+    }
+    return false;
+  }
+  closeConfig() {
+    this._columnListHistory = [];
+    this.configCancel.emit();
+  }
+  /* Handlers */
+  handleTabChange(ev) {
+    var _a;
+    if ((_a = ev === null || ev === void 0 ? void 0 : ev.target) === null || _a === void 0 ? void 0 : _a.selectedTab) {
+      if (ev.target.selectedTab === "Ordenação") {
+        this._columnListHistory = this._columnList.dataSource;
+        this.createOrderList();
+      }
+      this.selectedTab = ev.target.selectedTab;
+    }
+  }
+  handleColumnListChange(ev) {
+    var _a;
+    if (ev.detail) {
+      let visibleItems = (_a = ev.detail.find(group => group.group === "Visíveis")) === null || _a === void 0 ? void 0 : _a.items;
+      if (visibleItems) {
+        this._orderListItems = visibleItems;
+      }
+    }
+  }
+  componentWillRender() {
+    var _a;
+    if (((_a = this.columns) === null || _a === void 0 ? void 0 : _a.length) > 0) {
+      this.createColumnList();
+      this.createOrderList();
+    }
+  }
+  componentDidRender() {
+    var _a;
+    if (((_a = this.columns) === null || _a === void 0 ? void 0 : _a.length) > 0) {
+      this.locateColumn(new KeyboardEvent("arrow-right", { key: "ArrowRight" }), this._searchElement.value);
+    }
+  }
+  render() {
+    return (h(Host, null, h("div", { class: "grid-config__header" }, h("div", { class: "title-container" }, h("div", { class: "" }, h("label", { class: "title" }, "Configura\u00E7\u00E3o da Grade"), h("label", { class: "subtitle" }, "Defina visibilidade e ordem das colunas.")), h("div", { class: "button-close" }, h("ez-button", { mode: 'icon', image: getSpritePath("close"), size: 'medium', onClick: () => this.closeConfig() }))), h("div", { class: "tabselector-container" }, h("ez-tabselector", { selectedTab: this.selectedTab, selectedIndex: '0', onEzChange: (ev) => { this.handleTabChange(ev); }, tabs: 'Colunas, Ordena\u00E7\u00E3o' })), h("div", null, h("ez-text-input", { ref: (el) => this._searchElement = el, label: "Localizar coluna", onKeyUp: evt => this.locateColumn(evt) }, h("ez-icon", { slot: "leftIcon", size: "medium", href: getSpritePath("search") })))), h("div", { class: "grid-config__main" }, h("ez-list", { ref: (el) => this._columnList = el, class: this.selectedTab === "Colunas" ? "" : "hidden", dataSource: this._columListItems, onEzChange: ev => this.handleColumnListChange(ev), ezDraggable: true, ezSelectable: true, itemSlotBuilder: (item, group) => this.buildColumnListSlot(item, group), useGroups: true }), h("ez-list", { ref: (el) => this._orderList = el, class: this.selectedTab === "Ordenação" ? "" : "hidden", dataSource: this._orderListItems, ezSelectable: true, itemSlotBuilder: (item) => this.buildOrderListSlot(item) })), h("div", { class: "grid-config__footer" }, h("ez-button", { class: "padding-right--medium", label: "Cancelar", onClick: () => this.closeConfig() }), h("ez-button", { label: "Concluir", class: "button--primary", onClick: () => this.finish() }))));
+  }
+  static get assetsDirs() { return ["../assets"]; }
+};
+GridConfig.style = gridConfigCss;
+
+const selectBoxCss = "select{border:1px solid #DCE0E8;font-family:'Sora';border-radius:3px;outline:none;cursor:pointer}";
+
+let SelectBox = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.ezChange = createEvent(this, "ezChange", 7);
+  }
+  changeSelection() {
+    this.ezChange.emit(this._selectElem.value);
+  }
+  componentDidRender() {
+    if (this._selectElem) {
+      if (this.selectedOption) {
+        this._selectElem.value = this.selectedOption;
+      }
+      else {
+        this._selectElem.value = "na";
+      }
+    }
+  }
+  render() {
+    return (h("select", { ref: (el) => this._selectElem = el, onChange: () => { this.changeSelection(); } }, h("option", { value: "na" }, "N/A"), h("option", { value: "asc" }, "A-Z"), h("option", { value: "desc" }, "Z-A")));
+  }
+  static get assetsDirs() { return ["../assets"]; }
+};
+SelectBox.style = selectBoxCss;
+
+const testDuCss = ":host{display:block}";
+
+let TestDu = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+  }
+  componentWillLoad() {
+    this.dataUnit = new DataUnit("testes_com_formulario");
+    this.dataUnit.metadata = {
+      name: "dd://br.com.sankhya.fin.cad.movimentacaoFinanceira/Financeiro",
+      label: "Parceiro",
+      fields: [
+        {
+          name: "CODPARC",
+          label: "Parceiro",
+          dataType: DataType.NUMBER,
+          userInterface: UserInterface.SEARCH,
+          required: true,
+          properties: {}
+        },
+        {
+          name: "RECDESP",
+          label: "Receita/Despesa",
+          dataType: DataType.TEXT,
+          userInterface: UserInterface.OPTIONSELECTOR,
+          required: true,
+          properties: { options: `{"-1": "Despesa", "1": "Receita"}` }
+        },
+        {
+          name: "P",
+          label: "pera",
+          dataType: DataType.TEXT,
+          userInterface: UserInterface.OPTIONSELECTOR,
+          properties: { options: `{"M": "Madura", "V": "Verde", "P": "Passada"}` }
+        },
+        {
+          name: "ME",
+          label: "ME",
+          dataType: DataType.NUMBER,
+          userInterface: UserInterface.DECIMALNUMBER,
+          properties: { precision: 4, prettyPrecision: 1 }
+        }
+      ]
+    };
+    this.dataUnit.dataLoader = () => new Promise(accept => accept([
+      {
+        __record__id__: "1321321321321321",
+        CODPARC: 10,
+        NOMEPARC: "Parceiro 10",
+        P: "M",
+        L: "Bagaço",
+        LI: "Azedo"
+      }
+    ]));
+  }
+  render() {
+    return (h("ez-grid", { dataUnit: this.dataUnit }));
+  }
+};
+TestDu.style = testDuCss;
+
+export { EzButton as ez_button, EzCheck as ez_check, EzGrid as ez_grid, EzIcon as ez_icon, EzList as ez_list, EzModal as ez_modal, EzTabselector as ez_tabselector, EzTextInput as ez_text_input, GridConfig as grid_config, SelectBox as select_box, TestDu as test_du };