@sankhyalabs/ezui 0.0.0-bugfix-dev-kb-74998.4 → 0.0.0-bugfix-dev-KB-75210.0

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

@@ -11,13 +11,19 @@
   /*@doc Define o z-index do componente selection counter.*/
   --ez-grid__selection-counter--z-index: var(--visible, 1);
   /*@doc Define o sombreamento usado como borda.*/
-  --ez-grid__container--shadow: 0 0 16px 0 rgb(0 38 111 / 12%);
+  --ez-grid__container--shadow: var(--shadow);
   /*@doc Define altura mínima da grid */
   --ez-grid--min-height: 300px;
   /*@doc Define o outline usado como borda.*/
-  --ez-grid__container--outline: 1px solid var(--color--strokes);
-  /*@doc Define o outline usado como borda.*/
-  --ez-grid__container--shadow-as-outline: 0px 0px 0px 1px var(--color--strokes);
+  --ez-grid__container--shadow--outline: var(--shadow--outline) var(--color--strokes);
+  /*@doc Define a sombra do header.*/
+  --ez-grid__header--shadow: var(--shadow--xsmall);
+  /*@doc Define o outline usado como borda do header.*/
+  --ez-grid__header--shadow--outline: var(--shadow--outline) var(--color--strokes);
+  /*@doc Define o outline do header.*/
+  --ez-grid__header--outline: none;
+  /*@doc Define a borda do header.*/
+  --ez-grid__header--border: none;
 
   min-height: var(--ez-grid--min-height);
 }
@@ -31,6 +37,18 @@
   background-color: var(--ez-grid__header--background-color, #FFF);
 }
 
+.grid-header.shadow-mode {
+  box-shadow: var(--ez-grid__header--shadow);
+  border: var(--ez-grid__header--border);
+  outline: var(--ez-grid__header--outline);
+}
+
+.grid-header.outline-mode {
+  box-shadow: var(--ez-grid__header--shadow--outline);
+  border: var(--ez-grid__header--border);
+  outline: var(--ez-grid__header--outline);
+}
+
 .grid__container {
   /*private*/
   padding-top: 15px;
@@ -42,9 +60,9 @@
   background-color: var(--ez-grid__header--background-color);
 }
 
-.grid__container.box-outline {
+.grid__container.outline-mode {
   /*public*/
-  box-shadow: var(--ez-grid__container--shadow-as-outline);
+  box-shadow: var(--ez-grid__container--shadow--outline);
   border: none;
   outline: none;
 }

package/dist/collection/components/ez-grid/ez-grid.js

@@ -40,7 +40,8 @@ export class EzGrid {
     this.enableGridInsert = false;
     this.enableContinuousInsert = true;
     this.enableLockManger = true;
-    this.boxShadow = true;
+    this.outlineMode = false;
+    this.enableRowTableStriped = true;
   }
   /**
    * Aplica a definição de colunas.
@@ -402,7 +403,8 @@ export class EzGrid {
           this.setSelection(this.dataUnit.getSelectionInfo());
         }
       },
-      enableLockManger: this.enableLockManger
+      enableLockManger: this.enableLockManger,
+      enableRowTableStriped: this.enableRowTableStriped,
     });
     if (this.config) {
       this.observeConfig(this.config);
@@ -517,7 +519,7 @@ export class EzGrid {
   }
   render() {
     var _a;
-    return (h(Host, { "no-header": this.hideHeader() }, h("div", { class: `grid__container ${this.boxShadow ? '' : 'box-outline'} ez-grid`, ref: elem => (this._container = elem) }), h("div", { class: `ez-box ${this.boxShadow ? 'ez-box--shadow-xsmall' : 'ez-box--outline'} ez-padding--small grid-header` }, h("filter-column", { class: "grid-header__popover", noHeaderTaskBar: !this._hasLeftButtons, dataSource: this.getDataSource(), dataUnit: this.dataUnit, gridHeaderHidden: this.hideHeader(), ref: (element) => (this._filterColumn = element) }), h("div", { class: "grid-header__position" }, h("div", { class: `grid-header__container grid-header__left-container ${this.resolveLeftHeaderClass()}` }, h("slot", { name: "leftButtons" })), this.getPaginationControl())), h("div", { ref: (ref) => (this._gridSelectionCounter = ref), class: `grid__selection-counter  ez-elevation--4
+    return (h(Host, { "no-header": this.hideHeader() }, h("div", { class: `grid__container ${this.outlineMode ? 'outline-mode' : 'shadow-mode'} ez-grid`, ref: elem => (this._container = elem) }), h("div", { class: `ez-box ${this.outlineMode ? 'outline-mode' : 'shadow-mode'} ez-padding--small grid-header` }, h("filter-column", { class: "grid-header__popover", noHeaderTaskBar: !this._hasLeftButtons, dataSource: this.getDataSource(), dataUnit: this.dataUnit, gridHeaderHidden: this.hideHeader(), ref: (element) => (this._filterColumn = element) }), h("div", { class: "grid-header__position" }, h("div", { class: `grid-header__container grid-header__left-container ${this.resolveLeftHeaderClass()}` }, h("slot", { name: "leftButtons" })), this.getPaginationControl())), h("div", { ref: (ref) => (this._gridSelectionCounter = ref), class: `grid__selection-counter  ez-elevation--4
           ${this._showSelectionCounter ? 'grid__selection-counter--opened' : ''}
         ` }, h(SelectionCounter, { selectionCount: this._selectionCount, currentPageSelected: this._currentPageSelected, paginationInfo: this._paginationInfo, canSelectAll: (_a = this.selectionToastConfig) === null || _a === void 0 ? void 0 : _a.canSelectAll, allRecordSelected: this._isAllSelection, onSelectAll: () => this.onSelectAllRecords(), onSelectPage: () => this.onSelectPageRecords(), onClearAll: () => this.onClearSelectedRecords(), onClose: () => (this._showSelectionCounter = false) })), h("div", { class: "grid__footer" }, h("slot", { name: "footer" }))));
   }
@@ -820,7 +822,7 @@ export class EzGrid {
         "reflect": false,
         "defaultValue": "true"
       },
-      "boxShadow": {
+      "outlineMode": {
         "type": "boolean",
         "mutable": false,
         "complexType": {
@@ -834,7 +836,25 @@ export class EzGrid {
           "tags": [],
           "text": "Altera visualmente as sombras e bordas do componente\nQuando true, aplica o padr\u00E3o de sombras ao componente (Utilizar quando for o elemento principal do layout)\nQuando false, aplica o padr\u00E3o de outline ao componente (Utilizar quando estiver contido em outro elemento como um painel ou pop-up)"
         },
-        "attribute": "box-shadow",
+        "attribute": "outline-mode",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "enableRowTableStriped": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Ativa modo de linhas com cores alternadas."
+        },
+        "attribute": "enable-row-table-striped",
         "reflect": false,
         "defaultValue": "true"
       }

package/dist/collection/components/ez-grid/subcomponents/filter-column.css

@@ -31,4 +31,8 @@
 
 .filter-column__header-title {
   margin-left: 8px;
+}
+
+#filter-column-selection-list {
+  --ez-multi-selection-default-height: unset;
 }

package/dist/collection/components/ez-grid/subcomponents/filter-column.js

@@ -157,7 +157,7 @@ export class FilterColumn {
     }
   }
   render() {
-    return (h("ez-popover", { class: 'filter-column__popover', "overlay-type": 'none', ref: (element) => (this.ezPopoverElement = element), autoClose: true, onEzVisibilityChange: this.handleEzVisibilityChange.bind(this) }, h("section", { class: 'filter-column' }, h("header", { class: 'filter-column__header' }, h("span", { class: 'ez-text ez-text--medium filter-column__header-title' }, "Filtro da coluna ", this.columnLabel), h("ez-button", { mode: 'icon', "icon-name": 'close', class: 'ez-button--tertiary', onClick: () => this.hide() })), h("ez-multi-selection-list", { columnName: this.columnName, dataSource: this.dataSource, options: this.options, useOptions: this.useOptions, ref: (element) => (this.ezMultiSelectionList = element), onChangeFilteredOptions: (event) => this.changeSelectedItems(event.detail), isTextSearch: this.isTextSearch }), h("footer", { class: 'filter-column__footer' }, h("ez-button", { label: 'Aplicar', class: 'ez-button--primary', onClick: this.submit.bind(this) })))));
+    return (h("ez-popover", { class: 'filter-column__popover', "overlay-type": 'none', ref: (element) => (this.ezPopoverElement = element), autoClose: true, onEzVisibilityChange: this.handleEzVisibilityChange.bind(this) }, h("section", { class: 'filter-column' }, h("header", { class: 'filter-column__header' }, h("span", { class: 'ez-text ez-text--medium filter-column__header-title' }, "Filtro da coluna ", this.columnLabel), h("ez-button", { mode: 'icon', "icon-name": 'close', class: 'ez-button--tertiary', onClick: () => this.hide() })), h("ez-multi-selection-list", { id: 'filter-column-selection-list', columnName: this.columnName, dataSource: this.dataSource, options: this.options, useOptions: this.useOptions, ref: (element) => (this.ezMultiSelectionList = element), onChangeFilteredOptions: (event) => this.changeSelectedItems(event.detail), isTextSearch: this.isTextSearch }), h("footer", { class: 'filter-column__footer' }, h("ez-button", { label: 'Aplicar', class: 'ez-button--primary', onClick: this.submit.bind(this) })))));
   }
   static get is() { return "filter-column"; }
   static get originalStyleUrls() {