@sankhyalabs/sankhyablocks 5.6.0 → 5.7.0

package/dist/collection/components/snk-filter-bar/filter-item/filter-item-type.enum.js

@@ -8,5 +8,6 @@ var FilterItemType;
   FilterItemType["NUMBER"] = "NUMBER";
   FilterItemType["DEFAULT_FILTER"] = "DEFAULT_FILTER";
   FilterItemType["PERSONALIZED"] = "PERSONALIZED";
+  FilterItemType["MULTI_LIST"] = "MULTI_LIST";
 })(FilterItemType || (FilterItemType = {}));
 export default FilterItemType;

package/dist/collection/components/snk-filter-bar/filter-modal/snk-filter-modal.css

@@ -1,5 +1,34 @@
 
+ez-modal {
+  --ez-modal-content-padding: 24px 12px;
+}
+
 .snk-filter__modal-container{
-  width: 359px;
-  max-width: 359px;
+  width: 344px;
+  max-width: 344px;
+  overflow: hidden;
+}
+
+.snk-filter__modal-content{
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  max-height: 760px;
+  overflow-x: clip;
+  overflow-y: auto;
+  padding-right: 4px;
+}
+
+.snk-filter__modal-content::-webkit-scrollbar {
+  width: var(--space--small);
+  min-width: var(--space--small);
+  max-width: var(--space--small);
 }
+
+
+.snk-filter__modal-collapsible-box{
+  border: 1px solid #DCE0E8;
+  border-radius: var(--border--radius-medium);
+}
+
+

package/dist/collection/components/snk-filter-bar/filter-modal/snk-filter-modal.js

@@ -1,66 +1,91 @@
 import { h } from '@stencil/core';
-import { ModalAction, ModalButtonStatus } from "@sankhyalabs/ezui/dist/collection/components/ez-modal-container";
-import { ArrayUtils } from '@sankhyalabs/core';
-import { CheckMode } from "@sankhyalabs/ezui/dist/collection/utils";
+import { ModalAction } from "@sankhyalabs/ezui/dist/collection/components/ez-modal-container";
+import FilterType from '../types/filter-type.enum';
+import FilterItemType from '../filter-item/filter-item-type.enum';
 export class SnkFilterModal {
   constructor() {
-    this._filterArgument = undefined;
     this.getMessage = undefined;
-    this.items = undefined;
-    this.modalTitle = undefined;
-    this.modalSubTitle = undefined;
-    this.cancelButtonLabel = undefined;
-    this.okButtonLabel = undefined;
-    this.infoText = undefined;
-    this.useSearch = undefined;
-    this.processModalAction = undefined;
+    this.filters = undefined;
+    this.applyFilters = undefined;
+    this.clearAll = undefined;
+    this.closeModal = undefined;
   }
-  updateValue(id, value = undefined) {
-    this.items = this.items.map(item => {
-      if (item.id === id && item.enabled) {
-        if (value == undefined) {
-          value = !item.active;
-        }
-        return Object.assign(Object.assign({}, item), { active: value });
-      }
-      return item;
-    });
+  getCustomMessage(key, params) {
+    var _a;
+    return (_a = this.getMessage) === null || _a === void 0 ? void 0 : _a.call(this, `snkFilterBar.filterModal.${key}`, params);
+  }
+  handleClearAll() {
+    const cleanedFilters = this.clearAll(this.filters);
+    this.filters = cleanedFilters;
   }
-  getActiveFiltersMsg() {
-    const activeFilters = this.items.filter(item => item.active).length;
-    if (activeFilters === 0) {
-      return this.getMessage("snkFilterBar.noActiveFilters");
+  modalActionListener(evt) {
+    const modalAction = evt.detail;
+    switch (modalAction) {
+      case ModalAction.CANCEL:
+        this.handleClearAll();
+        break;
+      case ModalAction.OK:
+        this.applyFilters(this.filters);
+      case ModalAction.CLOSE:
+        this.closeModal();
+      default:
+        break;
     }
-    return this.getMessage(activeFilters > 1 ? "snkFilterBar.activeFilters" : "snkFilterBar.activeFilter", { ACTIVE_FILTERS: activeFilters });
   }
-  buildItems(list) {
-    return list.map(item => {
-      return (h("button", { onClick: () => this.updateValue(item.id), class: "ez-padding--medium sc-snk-filter-bar snk-filter-bar__filter-modal-item ez-align--middle ez-margin-bottom--small" }, h("ez-check", { id: `checkbox_${item.id}`, tabIndex: -1, class: "sc-snk-filter-bar snk-filter-bar__filter-modal-item__check", onEzChange: evt => this.updateValue(item.id, evt.detail), enabled: item.enabled, value: item.active, mode: CheckMode.SWITCH }), h("div", { class: "ez-text ez-title--primary ez-text--medium ez-margin-left--medium sc-snk-filter-bar snk-filter-bar__filter-modal-item__label" }, item.label)));
-    });
+  handleFilterChange(filterConfig) {
+    this.filters = this.filters.map(filter => filter.id === filterConfig.id ? filterConfig : filter);
   }
-  itemKeyBoardSelect(event, item) {
-    if (event.key === "Enter" || event.key === " ") {
-      this.updateValue(item.id);
-    }
+  handleClearFilters(filterList) {
+    this.filters = this.filters.map(filter => filterList.includes(filter) ? (Object.assign(Object.assign({}, filter), { value: undefined })) : filter);
   }
-  modalActionListener(evt) {
-    const modalAction = evt.detail;
-    if (modalAction === ModalAction.LOAD) {
-      if (this._filterInput) {
-        this._filterInput.setFocus();
+  renderFilterItem(filterItem, fullRow) {
+    return (h("snk-filter-modal-item", { class: fullRow ? 'ez-col ez-col--sd-12' : 'ez-col ez-col--sd-6 ez-padding--small', filterItem: filterItem, onFilterChange: (event) => this.handleFilterChange(event.detail) }));
+  }
+  mountFiltersLines(filters) {
+    const MAX_LINE_LENGTH = 2;
+    let currentLine = 0;
+    let forceAddCurrent = false;
+    const filtersLines = {};
+    for (let curr = 0; curr < filters.length; curr++) {
+      filtersLines[currentLine] = filtersLines[currentLine] || [];
+      const item = filters[curr];
+      const isLast = curr === filters.length - 1;
+      const currentItemMatch = [FilterItemType.TEXT, FilterItemType.NUMBER].includes(item.type);
+      const nextItemMatch = isLast ? false : [FilterItemType.TEXT, FilterItemType.NUMBER].includes(filters[curr + 1].type);
+      if ((currentItemMatch && nextItemMatch) || forceAddCurrent) {
+        filtersLines[currentLine].push(item);
+        forceAddCurrent = filtersLines[currentLine].length < MAX_LINE_LENGTH;
+        if (filtersLines[currentLine].length === MAX_LINE_LENGTH)
+          ++currentLine;
+        continue;
       }
+      filtersLines[currentLine] = filtersLines[currentLine] || [];
+      filtersLines[currentLine].push(item);
+      ++currentLine;
     }
-    else {
-      this.processModalAction(modalAction);
-    }
+    return Object.values(filtersLines);
+  }
+  renderFilterLine(filters) {
+    const fullLine = filters.length === 1;
+    return (h("div", { class: "ez-row" }, filters.map((filter) => this.renderFilterItem(filter, fullLine))));
+  }
+  renderCollapsibleFilterBox(label, listItems) {
+    if (!listItems.length)
+      return null;
+    const appliedFilters = listItems.filter(filterItem => !!filterItem.value).length;
+    const lines = this.mountFiltersLines(listItems);
+    return (h("ez-collapsible-box", { className: "snk-filter__modal-collapsible-box ez-padding--medium", headerSize: "medium", value: true, label: label }, !!appliedFilters && (h("ez-badge", { className: "ez-badge--primary-subtle", slot: "rightSlot", label: appliedFilters })), lines.map(this.renderFilterLine.bind(this)), h("div", { class: "ez-flex ez-flex--justify-end grow" }, h("ez-button", { className: "ez-button--tertiary", size: "medium", label: "Limpar", onClick: () => this.handleClearFilters(listItems) }))));
+  }
+  componentWillRender() {
+    this._modalTitle = this.getCustomMessage('title');
+    this._okButtonLabel = this.getCustomMessage('okButtonLabel');
+    this._cancelButtonLabel = this.getCustomMessage('cancelButtonLabel');
   }
   render() {
-    const allowCancel = this.items.filter(item => item.active).length > 0;
-    const items = (this.items ? ArrayUtils.applyStringFilter(this._filterArgument, this.items) : []);
-    return (h("ez-modal-container", { class: "snk-filter__modal-container", modalTitle: this.modalTitle, modalSubTitle: this.modalSubTitle, cancelButtonLabel: this.cancelButtonLabel, okButtonLabel: this.okButtonLabel, onEzModalAction: evt => this.modalActionListener(evt), cancelButtonStatus: allowCancel ? ModalButtonStatus.ENABLED : ModalButtonStatus.DISABLED }, h("div", { class: "sc-snk-filter-bar snk-filter-bar__filter-modal-content" }, h("div", null, this.useSearch ?
-      h("ez-filter-input", { ref: ref => this._filterInput = ref, label: this.getMessage("snkFilterBar.modalFindFilter"), onEzChange: (evt) => this._filterArgument = evt.detail })
-      :
-        undefined), items.length > 0 ? h("div", { class: "ez-text ez-text--medium ez-text--primary ez-padding-bottom--small" }, this.getActiveFiltersMsg()) : undefined, h("div", null, this.buildItems(items)), h("div", { class: "ez-text ez-text--large ez-align--middle ez-text--secondary ez-text--center ez-padding-bottom--large" }, this.infoText))));
+    const customFilters = this.filters.filter(filter => filter.filterType === FilterType.CUSTOM_FILTER);
+    const quickFilters = this.filters.filter(filter => filter.filterType === FilterType.QUICK_FILTER);
+    const otherFilters = this.filters.filter(filter => filter.filterType === FilterType.OTHER_FILTERS);
+    return (h("ez-modal-container", { class: "snk-filter__modal-container", modalTitle: this._modalTitle, cancelButtonLabel: this._cancelButtonLabel, okButtonLabel: this._okButtonLabel, onEzModalAction: this.modalActionListener.bind(this) }, h("div", { class: "snk-filter__modal-content" }, this.renderCollapsibleFilterBox(this.getCustomMessage('customFilters'), customFilters), this.renderCollapsibleFilterBox(this.getCustomMessage('quickFilters'), quickFilters), otherFilters.map(filter => this.renderCollapsibleFilterBox(filter.label, [filter])))));
   }
   static get is() { return "snk-filter-modal"; }
   static get originalStyleUrls() {
@@ -90,18 +115,19 @@ export class SnkFilterModal {
           "text": "Usado pra flexibilizar os verbetes e mensagens de acordo com o SnkMessageBuilder."
         }
       },
-      "items": {
+      "filters": {
         "type": "unknown",
         "mutable": true,
         "complexType": {
-          "original": "Array<ModalItem>",
-          "resolved": "ModalItem[]",
+          "original": "Array<SnkFilterItemConfig>",
+          "resolved": "SnkFilterItemConfig[]",
           "references": {
             "Array": {
               "location": "global"
             },
-            "ModalItem": {
-              "location": "local"
+            "SnkFilterItemConfig": {
+              "location": "import",
+              "path": "../filter-item/snk-filter-item"
             }
           }
         },
@@ -109,136 +135,70 @@ export class SnkFilterModal {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Guarda a lista de filtros."
+          "text": "Filtros a serem apresentados"
         }
       },
-      "modalTitle": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Define o t\u00EDtulo do filtro."
-        },
-        "attribute": "modal-title",
-        "reflect": false
-      },
-      "modalSubTitle": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Define o subt\u00EDtulo do filtro."
-        },
-        "attribute": "modal-sub-title",
-        "reflect": false
-      },
-      "cancelButtonLabel": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Define o label do bot\u00E3o de cancelar."
-        },
-        "attribute": "cancel-button-label",
-        "reflect": false
-      },
-      "okButtonLabel": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Define o label do bot\u00E3o de confirmar."
-        },
-        "attribute": "ok-button-label",
-        "reflect": false
-      },
-      "infoText": {
-        "type": "string",
+      "applyFilters": {
+        "type": "unknown",
         "mutable": false,
         "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
+          "original": "(updatedFilterConfig: Array<SnkFilterItemConfig>) => void",
+          "resolved": "(updatedFilterConfig: SnkFilterItemConfig[]) => void",
+          "references": {
+            "Array": {
+              "location": "global"
+            },
+            "SnkFilterItemConfig": {
+              "location": "import",
+              "path": "../filter-item/snk-filter-item"
+            }
+          }
         },
         "required": false,
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Define a descri\u00E7\u00E3o do filtro."
-        },
-        "attribute": "info-text",
-        "reflect": false
+          "text": "A\u00E7\u00E3o executada ao aplicar os filtros"
+        }
       },
-      "useSearch": {
-        "type": "boolean",
+      "clearAll": {
+        "type": "unknown",
         "mutable": false,
         "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
+          "original": "(configSnapshot: SnkFilterItemConfig[]) => Array<SnkFilterItemConfig>",
+          "resolved": "(configSnapshot: SnkFilterItemConfig[]) => SnkFilterItemConfig[]",
+          "references": {
+            "SnkFilterItemConfig": {
+              "location": "import",
+              "path": "../filter-item/snk-filter-item"
+            },
+            "Array": {
+              "location": "global"
+            }
+          }
         },
         "required": false,
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Se `true`, exibe a barra de pesquisa do filtro."
-        },
-        "attribute": "use-search",
-        "reflect": false
+          "text": "A\u00E7\u00E3o executada ao limpar os filtros"
+        }
       },
-      "processModalAction": {
+      "closeModal": {
         "type": "unknown",
         "mutable": false,
         "complexType": {
-          "original": "(action: ModalAction) => void",
-          "resolved": "(action: ModalAction) => void",
-          "references": {
-            "ModalAction": {
-              "location": "import",
-              "path": "@sankhyalabs/ezui/dist/collection/components/ez-modal-container"
-            }
-          }
+          "original": "() => void",
+          "resolved": "() => void",
+          "references": {}
         },
         "required": false,
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "\u00C9 disparado em qualquer intera\u00E7\u00E3o com o filtro."
+          "text": "A\u00E7\u00E3o disparada ao fechar o modal"
         }
       }
     };
   }
-  static get states() {
-    return {
-      "_filterArgument": {}
-    };
-  }
 }

package/dist/collection/components/snk-filter-bar/filter-modal/subcomponents/snk-filter-modal-item.css

@@ -0,0 +1,4 @@
+
+.grow{
+    flex-grow: 1;
+  }

package/dist/collection/components/snk-filter-bar/filter-modal/subcomponents/snk-filter-modal-item.js

@@ -0,0 +1,115 @@
+import { h, Host } from '@stencil/core';
+import { ElementIDUtils } from '@sankhyalabs/core';
+import FilterItemType from "../../filter-item/filter-item-type.enum";
+import FilterType from '../../types/filter-type.enum';
+import { EPresentationMode } from '../../filter-item/editors/enum/presentationMode';
+export class SnkFilterModalItem {
+  constructor() {
+    this.filterItem = undefined;
+  }
+  observeFilterItem(newValue) {
+    this.filterChange.emit(newValue);
+  }
+  getContentEditorConfig() {
+    const variations = { presentationMode: EPresentationMode.MODAL };
+    switch (this.filterItem.type) {
+      case FilterItemType.BINARY_SELECT:
+        return { tag: "snk-filter-binary-select", variations };
+      case FilterItemType.MULTI_SELECT:
+        return { tag: "snk-filter-multi-select" };
+      case FilterItemType.PERIOD:
+        return { tag: "snk-filter-period", variations };
+      case FilterItemType.SEARCH:
+        return { tag: "snk-filter-search" };
+      case FilterItemType.NUMBER:
+        return { tag: "snk-filter-number" };
+      case FilterItemType.PERSONALIZED:
+        return { tag: "snk-filter-personalized" };
+      case FilterItemType.MULTI_LIST:
+        return { tag: "snk-entity-list" };
+    }
+    return { tag: "snk-filter-text" };
+  }
+  updateFilterValue(newValue) {
+    this.filterItem = Object.assign(Object.assign({}, this.filterItem), { value: newValue });
+  }
+  canShowDetailModal() {
+    return this.filterItem.filterType !== FilterType.OTHER_FILTERS && this.filterItem.type !== FilterItemType.BINARY_SELECT;
+  }
+  componentDidLoad() {
+    if (this._element) {
+      ElementIDUtils.addIDInfo(this._element);
+      const dataElementIdDoFilterItem = this._element.getAttribute(ElementIDUtils.DATA_ELEMENT_ID_ATTRIBUTE_NAME);
+      this._idContentEditor = `${dataElementIdDoFilterItem}_${this.filterItem.id}`;
+    }
+  }
+  render() {
+    const { tag: ContentEditor, variations } = this.getContentEditorConfig();
+    return (h(Host, null, h("div", { class: "ez-flex ez-flex--column grow" }, this.canShowDetailModal() && (h("div", { class: "col ez-col--sd-12 ez-align--right ez-padding-medium ez-flex--align-items-center" }, h("div", { class: "ez-text ez-title ez-title--small ez-padding--small sc-snk-filter-bar snk-filter-item__editor-header" }, this.filterItem.detailModal))), h(ContentEditor, Object.assign({ config: this.filterItem, value: this.filterItem.value, onValueChanged: (event) => this.updateFilterValue(event.detail), "data-element-id": this._idContentEditor }, variations)))));
+  }
+  static get is() { return "snk-filter-modal-item"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["snk-filter-modal-item.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["snk-filter-modal-item.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "filterItem": {
+        "type": "unknown",
+        "mutable": true,
+        "complexType": {
+          "original": "SnkFilterItemConfig",
+          "resolved": "SnkFilterItemConfig",
+          "references": {
+            "SnkFilterItemConfig": {
+              "location": "import",
+              "path": "../../filter-item/snk-filter-item"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        }
+      }
+    };
+  }
+  static get events() {
+    return [{
+        "method": "filterChange",
+        "name": "filterChange",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "SnkFilterItemConfig",
+          "resolved": "SnkFilterItemConfig",
+          "references": {
+            "SnkFilterItemConfig": {
+              "location": "import",
+              "path": "../../filter-item/snk-filter-item"
+            }
+          }
+        }
+      }];
+  }
+  static get elementRef() { return "_element"; }
+  static get watchers() {
+    return [{
+        "propName": "filterItem",
+        "methodName": "observeFilterItem"
+      }];
+  }
+}