@sankhyalabs/ezui 1.1.123 → 1.1.126

package/dist/collection/components/ez-collapsible-box/ez-collapsible-box.css

@@ -1,7 +1,4 @@
 :host {
-  /*@doc Define a altura do componente quando colapsado.*/
-  --ez-collapsible-box--height: 42px;
-
   /*@doc Define o tamanho da fonte do header.*/
   --ez-collapsible-box--font-size: var(--title--medium, 14px);
   /*@doc Define a família da fonte do header.*/
@@ -10,30 +7,16 @@
   --ez-collapsible-box--font-weight: var(--text-weight--large, 600);
   /*@doc Define a cor da fonte do header.*/
   --ez-collapsible-box--color: var(--title--primary);
-
-  /*@doc Contém a imagem do chevron no tamanho xsmall.*/
-  --ez-collapsible-box__btn--image--xsmall: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="12px" width="7.5px"><path d="M 0,10.56 4.5967752,6.0000006 0,1.3800006 1.4516132,0 7.5,6.0000006 1.4516132,12 Z"/></svg>');
-
-  /*@doc Contém a imagem do chevron no tamanho small.*/
-  --ez-collapsible-box__btn--image--small: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="14px" width="8.68px"><path d="M 0,12.32 5.3200012,7.0000007 0,1.6100007 1.6800004,0 8.68,7.0000007 1.6800004,14 Z"/></svg>');
-
-  /*@doc Contém a imagem do chevron no tamanho medium.*/
-  --ez-collapsible-box__btn--image--medium: 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>');
-
-  /*@doc Contém a imagem do chevron no tamanho large.*/
-  --ez-collapsible-box__btn--image--large: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="18px" width="11.25px"><path d="M 0,15.84 6.8951628,9.0000009 0,2.0700009 2.1774198,0 11.25,9.0000009 2.1774198,18 Z"/></svg>');
-
-  /*@doc Contém a imagem do chevron no tamanho xlarge.*/
-  --ez-collapsible-box__btn--image--xlarge: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="20px" width="12.5px"><path d="M 0,17.6 7.661292,10.000001 0,2.300001 2.4193553,0 12.5,10.000001 2.4193553,20 Z"/></svg>');
-
   /*@doc Define a cor do chevron.*/
-  --ez-collapsible-box__btn--fill: var(--ez-collapsible-box--color);
-
-  /*@doc Define a largura do botão que contém o chevron.*/
-  --ez-collapsible-box__btn--width: 10px;
-
-  /*@doc Define a altura do botão que contém o chevron.*/
-  --ez-collapsible-box__btn--height: 16px;
+  --ez-collapsible-box__icon--color: var(--ez-collapsible-box--color);
+  /*@doc Define o espaçamento superior ao header.*/
+  --ez-collapsible-box__header--padding-top: 0px;
+  /*@doc Define o espaçamento inferior ao header.*/
+  --ez-collapsible-box__header--padding-bottom: 0px;
+  /*@doc Define o espaçamento à direita do header.*/
+  --ez-collapsible-box__header--padding-right: 0px;
+  /*@doc Define o espaçamento à esquerda do header.*/
+  --ez-collapsible-box__header--padding-left: 0px;
 
   /***************
      host style  
@@ -44,33 +27,51 @@
   width: 100%;
 }
 
-.collapsible-box__title {
+.collapsible-box {
   /*private*/
+  display: flex;
+  flex-direction: column;
   width: 100%;
-  align-self: center;
+}
+
+.collapsible-box__header {
+  /*private*/
   display: flex;
   box-sizing: border-box;
+  
+  /*public*/
+  padding-top: var(--ez-collapsible-box__header--padding-top);
+  padding-bottom: var(--ez-collapsible-box__header--padding-bottom);
+  padding-right: var(--ez-collapsible-box__header--padding-right);
+  padding-left: var(--ez-collapsible-box__header--padding-left);
 }
 
-.collapsible-box__label {
-  white-space: nowrap;
-  overflow: hidden;
+.collapsible-box__title {
+  /*private*/
+  position: relative;
+  width: auto;
+  display: flex;
+  box-sizing: border-box;
+  align-items: center;
+  outline: none;
+  border: none;
+  background-color: unset;
   cursor: pointer;
-  text-overflow: ellipsis;
-  width: 100%;
+  padding: 0px;
+  text-align: left;
 
   /*public*/
-  font-family: var(--ez-collapsible-box--font-family);
-  font-size: var(--ez-collapsible-box--font-size);
-  font-weight: var(--ez-collapsible-box--font-weight);
-  color: var(--ez-collapsible-box--color);
+  margin-bottom: var(--space--medium, 12px);
 }
 
-.collapsible-box__label--icon-right {
+.collapsible-box__label {
+  /*private*/
   white-space: nowrap;
   overflow: hidden;
   cursor: pointer;
   text-overflow: ellipsis;
+  box-sizing: border-box;
+  margin-left: 6px;
 
   /*public*/
   font-family: var(--ez-collapsible-box--font-family);
@@ -79,84 +80,91 @@
   color: var(--ez-collapsible-box--color);
 }
 
-.collapsible-box__btn {
+.collapsible-box__icon {
   /*private*/
-  outline: none;
-  border: none;
-  background-color: unset;
-  cursor: pointer;
-  padding: 1px 6px;
+  transform: rotate(90deg) translate(0px, 14%);
+
+  /*public*/
+  transition: transform var(--transition);
+  --ez-icon--color: var(--ez-collapsible-box__icon--color, --ez-collapsible-box--color);
 }
 
-.collapsible-box__btn::after {
+.collapsible-box__icon--collapsed {
   /*private*/
-  content: '';
-  display: flex;
+  transform: rotate(0deg) translate(-14%, 0px);
+}
 
-  /*public*/
-  background-color: var(--ez-collapsible-box__btn--fill);
-  /*parece estranho, mas o bg funciona como fill pq aplicaremos mascara.*/
-  width: var(--ez-collapsible-box__btn--width);
-  height: var(--ez-collapsible-box__btn--height);
-  transition: transform var(--transition);
-  transform: rotate(90deg);
+.collapsible-box__title--icon-right {
+  /*private*/
+  flex-direction: row-reverse;
 }
 
-.collapsible-box__btn--xsmall::after {
-  width: 7.5px;
-  height: 12px;
-  -webkit-mask-image: var(--ez-collapsible-box__btn--image--xsmall);
-  mask-image: var(--ez-collapsible-box__btn--image--xsmall);
+.collapsible-box__title--icon-right .collapsible-box__icon {
+  /*private*/
+  transform: rotate(90deg) translate(0px, -14%);
 }
 
-.collapsible-box__btn--small::after {
-  width: 8.68px;
-  height: 14px;
-  -webkit-mask-image: var(--ez-collapsible-box__btn--image--small);
-  mask-image: var(--ez-collapsible-box__btn--image--small);
+.collapsible-box__title--icon-right .collapsible-box__icon--collapsed {
+  /*private*/
+  transform: rotate(0deg) translate(14%, 0px);
 }
 
-.collapsible-box__btn--medium::after {
-  width: 10px;
-  height: 16px;
-  -webkit-mask-image: var(--ez-collapsible-box__btn--image--medium);
-  mask-image: var(--ez-collapsible-box__btn--image--medium);
+.collapsible-box__title--icon-right .collapsible-box__label {
+  /*private*/
+  margin-left: 0px;
+  margin-right: 6px;
 }
 
-.collapsible-box__btn--large::after {
-  width: 11.25px;
-  height: 18px;
-  -webkit-mask-image: var(--ez-collapsible-box__btn--image--large);
-  mask-image: var(--ez-collapsible-box__btn--image--large);
+.collapsible-box__title--stretched {
+  width: 100%;
+  justify-content: space-between;
 }
 
-.collapsible-box__btn--xlarge::after {
-  width: 12.5px;
-  height: 20px;
-  -webkit-mask-image: var(--ez-collapsible-box__btn--image--xlarge);
-  mask-image: var(--ez-collapsible-box__btn--image--xlarge);
+.collapsible-box__content {
+  /*private*/
+  display: flex;
+  flex-wrap: wrap;
+  overflow: hidden;
+  width: 100%;
+  height: 0px;
+  max-height: 0px;
+  opacity: 0;
+
+  /*public*/
+  transition: all var(--transition, 0.5s);
 }
 
-.collapsible-box__btn--collapsed::after {
-  transform: rotate(0deg);
+.collapsible-box__content--show {
+  /*private*/
+  height: 100%;
+  max-height: none;
+  opacity: 1;
+
+  /*public*/
+  transition: all var(--transition, 0.5s);
 }
 
-.font--xsmall {
+.font--x-small {
+  /*private*/
   font-size: 10px;
 }
 
 .font--small {
+  /*private*/
   font-size: 12px;
 }
 
 .font--medium {
+  /*private*/
   font-size: 14px;
 }
 
 .font--large {
+  /*private*/
   font-size: 16px;
 }
 
-.font--xlarge {
+.font--x-large {
+  /*private*/
   font-size: 20px;
 }

package/dist/collection/components/ez-collapsible-box/ez-collapsible-box.js

@@ -1,39 +1,52 @@
-import { Component, h, Host, Prop, Event, Watch, Method } from "@stencil/core";
+import { Component, h, Prop, Event, Watch, Method } from "@stencil/core";
 export class EzCollapsibleBox {
   constructor() {
     /**
-     * Valor externalizado que garante a exibição ou não do componente
+     * Valor externalizado que garante a exibição ou não do componente.
      */
     this.value = false;
     /**
     * Define o tamanho do texto e do ícone do componente.
+    * Tamanhos suportados: "x-small", "small", "medium", "large" e "x-large".
     */
     this.headerSize = "small";
     /**
     * Define o local onde o ícone será renderizado.
     */
     this.iconPlacement = "left";
+    /**
+    * Define se o titulo irá ocupar toda a largura do componente.
+    */
+    this.stretchTitle = false;
   }
-  observeValue() {
+  observeCollapsedValue() {
     this.ezChange.emit(this.value);
   }
   /**
-   * Esconde ou revela o conteúdo do componente
+   * Esconde ou revela o conteúdo do componente.
    */
   async showHide() {
     this.value = !this.value;
   }
+  /**
+   * Retorna o tamanho configurado do texto e do ícone.
+   */
+  getHeaderSize() {
+    const sizeAlias = ["xsmall", "xlarge"];
+    const sizeList = ["x-small", "small", "medium", "large", "x-large"];
+    const headerSize = sizeAlias.includes(this.headerSize) ? this.headerSize.replace('x', 'x-') : this.headerSize;
+    return sizeList.includes(headerSize) ? headerSize : "small";
+  }
   render() {
-    return (h(Host, null,
-      this.iconPlacement == "right" ?
-        h("div", { class: "collapsible-box__title" },
-          h("label", { class: (this.iconPlacement == "right" ? "collapsible-box__label--icon-right " : "collapsible-box__label ") + (this.headerSize ? "font--" + this.headerSize : ""), onClick: () => this.showHide(), title: this.label }, this.label),
-          h("button", { class: this.value ? "collapsible-box__btn collapsible-box__btn--collapsed " + "collapsible-box__btn--" + this.headerSize : "collapsible-box__btn " + "collapsible-box__btn--" + this.headerSize, onClick: () => this.showHide() }))
-        :
-          h("div", { class: "collapsible-box__title" },
-            h("button", { class: this.value ? "collapsible-box__btn collapsible-box__btn--collapsed " + "collapsible-box__btn--" + this.headerSize : "collapsible-box__btn " + "collapsible-box__btn--" + this.headerSize, onClick: () => this.showHide() }),
-            h("label", { class: (this.iconPlacement == "right" ? "collapsible-box__label--icon-right " : "collapsible-box__label ") + (this.headerSize ? "font--" + this.headerSize : ""), onClick: () => this.showHide(), title: this.label }, this.label)),
-      !this.value ? h("slot", null) : null));
+    return (h("div", { class: "collapsible-box" },
+      h("div", { class: "collapsible-box__header" },
+        h("button", { onClick: () => this.showHide(), class: "collapsible-box__title" +
+            (this.iconPlacement === "right" ? " collapsible-box__title--icon-right" : "") +
+            (this.stretchTitle ? " collapsible-box__title--stretched" : "") },
+          h("ez-icon", { slot: "icon", "icon-name": "chevron-right", size: this.getHeaderSize(), class: "collapsible-box__icon collapsible-box__icon--" + this.getHeaderSize() + (this.value ? " collapsible-box__icon--collapsed" : "") }),
+          h("label", { class: "collapsible-box__label font--" + this.getHeaderSize(), title: this.label }, this.label))),
+      h("div", { class: "collapsible-box__content" + (this.value ? "" : " collapsible-box__content--show") },
+        h("slot", null))));
   }
   static get is() { return "ez-collapsible-box"; }
   static get encapsulation() { return "shadow"; }
@@ -56,7 +69,7 @@ export class EzCollapsibleBox {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "Valor externalizado que garante a exibi\u00E7\u00E3o ou n\u00E3o do componente"
+        "text": "Valor externalizado que garante a exibi\u00E7\u00E3o ou n\u00E3o do componente."
       },
       "attribute": "value",
       "reflect": true,
@@ -91,7 +104,7 @@ export class EzCollapsibleBox {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "Define o tamanho do texto e do \u00EDcone do componente."
+        "text": "Define o tamanho do texto e do \u00EDcone do componente.\nTamanhos suportados: \"x-small\", \"small\", \"medium\", \"large\" e \"x-large\"."
       },
       "attribute": "header-size",
       "reflect": true,
@@ -114,6 +127,24 @@ export class EzCollapsibleBox {
       "attribute": "icon-placement",
       "reflect": true,
       "defaultValue": "\"left\""
+    },
+    "stretchTitle": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Define se o titulo ir\u00E1 ocupar toda a largura do componente."
+      },
+      "attribute": "stretch-title",
+      "reflect": true,
+      "defaultValue": "false"
     }
   }; }
   static get events() { return [{
@@ -145,13 +176,13 @@ export class EzCollapsibleBox {
         "return": "Promise<void>"
       },
       "docs": {
-        "text": "Esconde ou revela o conte\u00FAdo do componente",
+        "text": "Esconde ou revela o conte\u00FAdo do componente.",
         "tags": []
       }
     }
   }; }
   static get watchers() { return [{
       "propName": "value",
-      "methodName": "observeValue"
+      "methodName": "observeCollapsedValue"
     }]; }
 }

package/dist/collection/components/ez-combo-box/ez-combo-box.css

@@ -89,6 +89,12 @@
   width: var(--ez-combo-box--width);
 }
 
+.suppressed-search-input{
+  --ez-text-input__input--border-color: var(--color--strokes, #dce0e8);
+  --ez-text-input__input--disabled--background-color: var(--background--xlight, #fff);
+  --ez-text-input__input--disabled--color: var(--title--primary, #000);
+}
+
 .list-container {
   position: relative;
   width: 100%;

package/dist/collection/components/ez-combo-box/ez-combo-box.js

@@ -15,6 +15,10 @@ export class EzComboBox {
      * Ajusta a opção de mostrar o "value" para cada opção. Por padrão não mostra
      */
     this.showOptionValue = false;
+    /**
+    * Desabilita a digitação dentro do componente.
+    */
+    this.suppressSearch = false;
     /**
      * Remove a opção vazia da lista de opções
      */
@@ -266,7 +270,7 @@ export class EzComboBox {
   }
   render() {
     return (h(Host, null,
-      h("ez-text-input", { ref: elem => this._inputElement = elem, enabled: this.enabled, onInput: evt => this.onTextInputChangeHandler(evt), onClick: () => this.onTextInputClickHandler(), onFocusout: () => this.onTextInputFocusOutHandler(), onEzChange: event => event.stopPropagation(), onKeyDown: event => this.keyDownHandler(event), label: this.label, value: this.getText(), canShowError: this.canShowError, errorMessage: this.errorMessage, mode: this.mode }, this.searchMode ?
+      h("ez-text-input", { class: this.suppressSearch ? "suppressed-search-input" : "", ref: elem => this._inputElement = elem, enabled: this.enabled && !this.suppressSearch, onInput: evt => this.onTextInputChangeHandler(evt), onClick: () => this.onTextInputClickHandler(), onFocusout: () => this.onTextInputFocusOutHandler(), onEzChange: event => event.stopPropagation(), onKeyDown: event => this.keyDownHandler(event), label: this.label, value: this.getText(), canShowError: this.canShowError, errorMessage: this.errorMessage, mode: this.mode }, this.searchMode ?
         h("button", { disabled: !this.enabled, tabindex: -1, class: "btn-open-search", onClick: () => { this.loadOptions("ADVANCED"); }, slot: "leftIcon" })
         :
           h("button", { disabled: !this.enabled, tabindex: -1, class: "btn-open-options", slot: "rightIcon", onClick: () => this.showOptions() })),
@@ -430,6 +434,24 @@ export class EzComboBox {
       "reflect": false,
       "defaultValue": "false"
     },
+    "suppressSearch": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Desabilita a digita\u00E7\u00E3o dentro do componente."
+      },
+      "attribute": "suppress-search",
+      "reflect": false,
+      "defaultValue": "false"
+    },
     "optionLoader": {
       "type": "unknown",
       "mutable": false,

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

@@ -2,4 +2,9 @@ ez-form {
   display: flex;
   flex-direction: column;
   width: 100%;
+}
+
+.dynamic-content ez-collapsible-box {
+  --ez-collapsible-box__header--padding-right: var(--space-small, 6px);
+  --ez-collapsible-box__header--padding-left: var(--space-small, 6px);
 }

package/dist/collection/components/ez-form/structure/FormItem.js

@@ -3,7 +3,7 @@ import { buildField } from "../fieldbuilder/FieldBuilder";
 export const FormItem = ({ source }) => {
   if ("items" in source) {
     const fieldSet = source;
-    return h("ez-collapsible-box", { label: source.label }, fieldSet.items.map(fi => buildField(fi)));
+    return h("ez-collapsible-box", { label: source.label, "header-size": "large" }, fieldSet.items.map(fi => buildField(fi)));
   }
   else {
     return buildField(source);

package/dist/collection/components/ez-form/structure/FormSheet.js

@@ -1,6 +1,6 @@
 import { h } from "@stencil/core";
 import { FormItem } from "./FormItem";
 export const FormSheet = ({ store, source }) => {
-  return (h("div", { class: "box__container" },
+  return (h("div", { class: "dynamic-content box__container" },
     h("div", { class: "row padding-vertical--small" }, source.items.map(item => h(FormItem, { store: store, source: item })))));
 };

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

@@ -44,6 +44,7 @@ export default class AgGridController {
         serverSideStoreType: "partial",
         rowSelection: this._multipleSelection ? "multiple" : "single",
         serverSideDatasource: this._dataSource,
+        sortingOrder: ['desc', 'asc', null],
         getRowNodeId: (params) => typeof params === "string" ? params : params[this._idAttribName],
         getMainMenuItems: (params) => {
           const column = params.column;
@@ -83,6 +84,7 @@ export default class AgGridController {
     opt.onSelectionChanged = e => this.onSelectionChange(e);
     opt.onPaginationChanged = () => this.onPaginationChange();
     opt.onRowDoubleClicked = evt => this.onRowDoubleClick(evt);
+    opt.onDragStopped = evt => this.onCallStateChange("columnMovedEnd", evt);
     opt.onViewportChanged = () => {
       if (this._dataUnit) {
         this.selectRows(this._dataUnit.getSelection());
@@ -170,6 +172,7 @@ export default class AgGridController {
     const colDefs = [];
     if (showCheckSelection) {
       colDefs.push({
+        colId: "checkBoxColumn",
         headerName: "",
         checkboxSelection: true,
         headerCheckboxSelection: false,
@@ -207,13 +210,24 @@ export default class AgGridController {
     if (this._grid === undefined) {
       throw new Error("Erro interno: Grid ainda não inicializado.");
     }
-    //TODO neste ponto estamos utilizando um método descontinuado, 
-    //pelo fato de que o applyColumnState não reordena as colunas conforme 
-    //o estado passado.
-    //https://stackoverflow.com/questions/51488241/ag-grid-how-to-save-and-reload-column-order
-    //Assim que for corrigido o applyColumnState devemos substituir o setColumnState por ele.
-    // this._gridOptions.columnApi.applyColumnState({ state: state.map(s => this.buildColState(s)) });
-    this._gridOptions.columnApi.setColumnState(state.map(s => this.buildColState(s)));
+    let columns = this.getColumnsDef();
+    let visibleColumns = [];
+    let sort = [];
+    state.forEach((cfgColumn, index) => {
+      this._gridOptions.columnApi.moveColumn(cfgColumn.name, index + 1);
+      this._gridOptions.columnApi.setColumnWidth(cfgColumn.name, cfgColumn.width);
+      visibleColumns.push(cfgColumn.name);
+      if (cfgColumn.ascending !== undefined) {
+        sort.push({ colId: cfgColumn.name, sort: cfgColumn.ascending !== true ? 'desc' : 'asc', sortIndex: cfgColumn.orderIndex });
+      }
+    });
+    let invisibleColumns = columns.filter(column => !visibleColumns.includes(column.name)).map(column => column.name);
+    this._gridOptions.columnApi.setColumnsVisible(visibleColumns, true);
+    this._gridOptions.columnApi.setColumnsVisible(invisibleColumns, false);
+    this._gridOptions.columnApi.applyColumnState({
+      state: sort,
+      defaultState: { sort: null },
+    });
   }
   getColumnsState() {
     if (this._grid === undefined) {
@@ -306,21 +320,27 @@ export default class AgGridController {
       }
     }
   }
-  buildColState(source) {
-    return {
-      colId: source.name,
-      sort: source.sort,
-      sortIndex: source.sortIndex,
-      width: source.width,
-      pinned: source.pinned ? "left" : null,
-      hide: source.hidden
-    };
-  }
   onCallStateChange(type, e) {
     const finished = !("finished" in e) || e["finished"];
     if (finished && this._columnStateChangeCallback) {
-      this._columnStateChangeCallback(type, this.getColumnsState());
+      let info = {};
+      let isUserChange = this.isUIEvent(e['source'], e['type']);
+      if (type === 'columnResize') {
+        info['column'] = { colId: e['column'].colId, actualWidth: e['column'].actualWidth };
+      }
+      info['isUserChange'] = isUserChange;
+      this._columnStateChangeCallback(type, this.getColumnsState(), info);
+    }
+  }
+  isUIEvent(source, type) {
+    let optionsArr = ["uiColumnMoved", "uiColumnResized", "uiColumnDragged", "uiColumnExpanded", "uiColumnSorted"];
+    if (type === 'dragStopped') {
+      return true;
+    }
+    if (source) {
+      return optionsArr.includes(source);
     }
+    return false;
   }
   onSelectionChange(e) {
     if (this._selectionChangeCallback) {