@sankhyalabs/ezui 5.20.0-dev.10 → 5.20.0-dev.12

package/dist/collection/components/ez-grid/controller/ag-grid/DataSource.js

@@ -31,6 +31,9 @@ export default class DataSource {
           break;
         case Action.LOADING_DATA:
           this._waitingForLoad = true;
+          if (EZ_GRID_LOADING_SOURCE !== action.payload.source) {
+            this._controller.clearFilter();
+          }
           this._controller.refresh();
           break;
         case Action.DATA_LOADED:

package/dist/collection/components/ez-multi-selection-list/ez-multi-selection-list.js

@@ -137,16 +137,8 @@ export class EzMuiltiSelectionList {
   }
   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 = '');
+    const itemSelected = this.filteredOptions.find(item => item.label === itemCheckSelected.label);
+    itemSelected.check = itemCheckSelected.check;
   }
   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 })));

package/dist/collection/components/ez-number-input/ez-number-input.js

@@ -107,6 +107,9 @@ export class EzNumberInput {
     this.ezCancelWaitingChange.emit();
   }
   handleBlur() {
+    if (!this._changePending) {
+      return;
+    }
     try {
       const parsedNumber = this.getParsedNumber();
       if (parsedNumber !== undefined && isNaN(parsedNumber)) {

package/dist/collection/components/ez-popup/ez-popup.css

@@ -77,16 +77,14 @@
 
 .popup__content {
   box-sizing: border-box;
-  max-height: 100%;
+  height: 100%;
   width: 100%;
-  display: grid;
-  grid-template-rows: auto 1fr;
 }
 
 .popup__expandable-content {
   box-sizing: border-box;
   width: 100%;
-  height: 100%;
+  height: calc(100% - 44px);
 }
 
 .popup__header {

package/dist/collection/components/ez-split-button/ez-split-button.css

@@ -0,0 +1,229 @@
+:host {
+
+    /* dimensions */
+    /*@doc Define a largura mínima do componente.*/
+    --ez-split-button--min-width: 24;
+    /*@doc Define a largura do componente.*/
+    --ez-split-button--width: 'auto';
+    /*@doc Define a altura do componente.*/
+    --ez-split-button__medium--height: 32px;
+    --ez-split-button__large--height: 42px;
+    /*@doc Define a largura do slot que contém o ícone.*/
+    --ez-split-button__medium-icon--width: 40px;
+    --ez-split-button__large-icon--width: 44px;
+    /*@doc Define o espaçamento entre o ícone e o label.*/
+    --ez-split-button__inline__icon--gap: 6px;
+    /*@doc Define o espaçamento superior ao label.*/
+    --ez-split-button__label--padding-top: 0px;
+    /*@doc Define o espaçamento inferior ao label.*/
+    --ez-split-button__label--padding-bottom: 0px;
+    /*@doc Define o espaçamento esquerdo ao ícone.*/
+    --ez-split-button__right-button--padding-left: 8px;
+    /* general */
+    /*@doc Define a cor do label.*/
+    --ez-split-button--color: var(--title--primary, #FFF);
+    /*@doc Define o tamanho do label.*/
+    --ez-split-button--font-size: var(--text--medium, 14px);
+    /*@doc Define a família da fonte do label.*/
+    --ez-split-button--font-family: var(--font-pattern, Arial);
+    /*@doc Define o peso da fonte do label.*/
+    --ez-split-button--font-weight: var(--text-weight--large);
+    /*@doc Define a cor de fundo do botão.*/
+    --ez-split-button--background-color: var(--background--medium, #008561);
+    /*@doc Define o raio da borda do botão.*/
+    --ez-split-button--border-radius: var(--border--radius-large, 12px);
+    /*@doc Define o estilo da borda do botão.*/
+    --ez-split-button--border: none;
+    /*@doc Define o alinhamento horizontal do conteúdo do botão.*/
+    --ez-split-button--justify-content: center;
+    /*@doc Define a cor do texto e do ícone quando o cursor está sobre o botão.*/
+    --ez-split-button--hover-color: var(--color--primary-600);
+    /*@doc Define a cor de fundo quando o cursor está sobre o botão.*/
+    --ez-split-button--hover--background-color: var(--background--medium, var(--ez-split-button--background-color));
+    /*@doc Define a cor do texto quando o botão está desabilitado.*/
+    --ez-split-button--disabled-color: var(--text--disable);
+    /*@doc Define a cor de fundo quando o botão está desabilitado.*/
+    --ez-split-button--disabled--background-color: var(--color--disable-secondary);
+    /*@doc Define o estido da borda quando o botão está selecionado.*/
+    --ez-split-button--focus--border: var(--border--medium, 2px) var(--color--primary-300);
+    /*@doc Define a sombra do botão quando selecionado.*/
+    --ez-split-button--focus--box-shadow: none;
+    /*@doc Define a cor do texto e do ícone ao ativar o botão.*/
+    --ez-split-button--active-color: var(--color--primary-700);
+     /*@doc Define a cor do fundo ao ativar o botão.*/
+    --ez-split-button--active--background-color: var(--background--strong);
+  }
+  
+  ez-icon {
+    --ez-icon--color: inherit;
+  }
+  
+  button {
+    /*private*/
+    position: relative;
+    display: flex;
+    align-items: center;
+    margin: 0;
+    cursor: pointer;
+    transition: background-color 0.2s linear;
+    white-space: nowrap;
+  
+    /*public*/
+    min-width: var(--ez-split-button--min-width);
+    width: var(--ez-split-button--width);
+    height: var(--ez-split-button__medium--height);
+    font-family: var(--ez-split-button--font-family);
+    font-size: var(--ez-split-button--font-size);
+    font-weight: var(--ez-split-button--font-weight);
+    padding: var(--ez-split-button__label--padding-top) 0 var(--ez-split-button__label--padding-bottom) 0;
+    border-top-left-radius: var(--ez-split-button--border-radius);
+    border-bottom-left-radius: var(--ez-split-button--border-radius);
+    background-color: var(--ez-split-button--background-color);
+    color: var(--ez-split-button--color);
+    fill: var(--ez-split-button--color);
+    border: var(--ez-split-button--border);
+    justify-content: var(--ez-split-button--justify-content);
+  }
+
+  label {
+    cursor: pointer;
+  }
+
+  button:active {
+    outline: none;
+    box-shadow: none;
+    background-color: var(--ez-split-button--active--background-color);
+    color: var(--ez-split-button--active-color);
+    fill: var(--ez-split-button--active-color);
+    --ez-icon--color: var(--ez-split-button--active-color);
+  }
+
+  .ez-split-button__left-button:focus,
+  .ez-split-button__right-button:focus {
+    outline: var(--ez-split-button--focus--border);
+    box-shadow: var(--ez-split-button--focus--box-shadow);
+  }
+
+  .ez-split-button__left-button:hover,
+  .ez-split-button__right-button:hover {
+    outline: none;
+    background-color: var(--ez-split-button--hover--background-color);
+    color: var(--ez-split-button--hover-color);
+    fill: var(--ez-split-button--hover-color);
+    --ez-icon--color: var(--ez-split-button--hover-color);
+  }
+
+  .ez-split-button__left-button:disabled,
+  .ez-split-button__left-button:disabled label,
+  .ez-split-button__right-button:disabled{
+    background-color: var(--ez-split-button--disabled--background-color);
+    color: var(--ez-split-button--disabled-color);
+    fill: var(--ez-split-button--disabled-color);
+    border: none;
+    --ez-icon--color: var(--ez-split-button--disabled-color);
+    cursor: not-allowed;
+  }
+
+  button.large {
+    height: var(--ez-split-button__large--height);
+  }
+
+  button.medium {
+    height: var(--ez-split-button__medium--height);
+  }
+
+  /*default*/
+  .default label {
+    padding: var(--ez-split-button__label--padding-top) 12px var(--ez-split-button__label--padding-bottom) 20px;
+  }
+
+  /*icon-left*/
+  .icon-left {
+    gap: var(--ez-split-button__inline__icon--gap);
+  }
+  
+  .icon-left label {
+    padding-right: 12px;
+  }
+
+  .icon-left ez-icon {
+    padding-left: 20px;
+  }
+
+  /*icon-only*/
+  .icon-only {
+    padding-left: 12px;
+    padding-right: 12px;
+  }
+
+  .ez-split-button__right-button {
+    border-top-right-radius: var(--ez-split-button--border-radius);
+    border-bottom-right-radius: var(--ez-split-button--border-radius);
+    border-top-left-radius: 0;
+    border-bottom-left-radius:0;
+  }
+  
+  .ez-split-button__right-button--medium {
+    min-width: var(--ez-split-button__medium-icon--width);
+  }
+
+  .ez-split-button__right-button--large {
+    min-width: var(--ez-split-button__large-icon--width);
+  }
+
+  .ez-split-button__right-button--divider {
+    top: 10%;
+    bottom: 10%;
+  }
+  .ez-split-button__right-button--divider:before {
+    content: "";
+    position: absolute;
+    left: 0;
+    border-left: 1px solid rgba(0, 0, 0, 20%);
+    border-radius: 2px;
+    height: 75%;
+  }
+  
+  .btn-icon--medium {
+    min-width: --ez-split-button__medium-icon--width;
+  }
+  
+  .btn-icon--large {
+    min-width: --ez-split-button__large-icon--width;
+  }
+
+  .ez-split-button__right-button-container {
+    position: absolute;
+    left: 0;
+    padding-left: var(--ez-split-button__right-button--padding-left);
+  }
+  
+  .label-icon {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    color: var(--ez-split-button--color);
+  }
+  
+  .label-icon:active {
+    color: var(--ez-split-button--active-color);
+    fill: var(--ez-split-button--active-color);
+    --ez-icon--color: var(--ez-split-button--active-color);
+  }
+
+  .dropdown {
+    display: flex;
+  }
+  
+  .dropdown-content {
+    display: block;
+    position: absolute;
+    background-color: #f1f1f1;
+    min-width: 160px;
+    z-index: --ez-elevation--8;
+    border-radius: var(--ez-split-button--border-radius);
+  }
+
+  .dropdown-content > ez-dropdown {
+    position: relative;
+}