@sankhyalabs/sankhyablocks 1.4.0-beta.1 → 1.4.0-beta.10

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

@@ -1,6 +1,10 @@
 import { h, Host } from '@stencil/core';
+import { ApplicationUtils } from "@sankhyalabs/ezui/dist/collection/utils";
 import FilterItemType from './filter-item-type.enum';
 export class SnkFilterDetail {
+  async show() {
+    this._editor["show"]();
+  }
   changeConfig(newConfig) {
     this.filterChange.emit(newConfig);
   }
@@ -16,6 +20,8 @@ export class SnkFilterDetail {
         return "snk-filter-search";
       case FilterItemType.NUMBER:
         return "snk-filter-number";
+      case FilterItemType.PERSONALIZED:
+        return "snk-filter-personalized";
     }
     return "snk-filter-text";
   }
@@ -27,13 +33,64 @@ export class SnkFilterDetail {
       return undefined;
     }
     return ([
-      h("ez-icon", { title: this.getMessage("snkFilterBar.removeFilter"), class: "sc-snk-filter-bar snk-filter-item__editor-header-button", iconName: "delete", onClick: () => this.removeItem() }),
-      h("ez-icon", { title: this.getMessage(this.config.fixed ? "snkFilterBar.unpinFilter" : "snkFilterBar.pinFilter"), class: "ez-margin-left--small sc-snk-filter-bar snk-filter-item__editor-header-button", iconName: this.config.fixed ? "un-pin" : "push-pin", onClick: () => this.changeConfig(Object.assign(Object.assign({}, this.config), { fixed: !this.config.fixed })) })
+      this.buildIcon(this.getMessage("snkFilterBar.removeFilter"), "delete", () => this.removeItem()),
+      this.buildIcon(this.getMessage(this.config.fixed ? "snkFilterBar.unpinFilter" : "snkFilterBar.pinFilter"), this.config.fixed ? "un-pin" : "push-pin", () => this.changeConfig(Object.assign(Object.assign({}, this.config), { fixed: !this.config.fixed })))
     ]);
   }
+  buildIcon(title, iconName, action) {
+    return (h("button", { onClick: () => action(), class: "sc-snk-filter-bar snk-filter-item__editor-header-button" }, h("ez-icon", { title: title, iconName: iconName })));
+  }
+  apply() {
+    var _a;
+    let value = this._editor["value"];
+    let isValid = true;
+    if (this.config.type === FilterItemType.PERSONALIZED) {
+      const params = ((_a = this.config.props.personalizedFilter) === null || _a === void 0 ? void 0 : _a.parameters) || [];
+      const paramsCount = params.length;
+      if (paramsCount === 0) {
+        //Valor do filtro personalizado sem parametros deve ser um array vazio
+        value = [];
+      }
+      else {
+        isValid = this.validateAllFilled(paramsCount, value);
+      }
+    }
+    if (isValid) {
+      this.changeConfig(Object.assign(Object.assign({}, this.config), { value: value }));
+    }
+  }
+  /* WARNING: Temporário. Isso só está sendo feito até desconsiderar os parametros não informados para PersonalizedFilter*/
+  validateAllFilled(paramsCount, value) {
+    let isValid = true;
+    if (value != undefined && paramsCount > 1) {
+      if (paramsCount > value.length) {
+        isValid = false;
+      }
+      else {
+        value.forEach(item => {
+          if (item == undefined) {
+            isValid = false;
+          }
+        });
+      }
+    }
+    if (!isValid) {
+      ApplicationUtils.alert("Filtro parcialmente preenchido", "Favor completar todas as informações do filtro.");
+    }
+    return isValid;
+  }
+  /* WARNING: Temporário.*/
+  clear() {
+    this.changeConfig(Object.assign(Object.assign({}, this.config), { value: undefined }));
+  }
+  onKeyDonwListener(event) {
+    if (event.key === "Enter") {
+      this._applyButton.setFocus().then(() => this.apply());
+    }
+  }
   render() {
     const ContentEditor = this.getContentEditor();
-    return (h(Host, null, 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.config.detailTitle), this.getPopUpHeaderButtons()), h(ContentEditor, { ref: ref => this._editor = ref, value: this.config.value, config: this.config, fix: () => this.keepOpened = true, unfix: () => this.keepOpened = false }), h("hr", { class: "sc-snk-filter-bar snk-filter__popover-rule" }), h("div", { class: "ez-col ez-col--sd-12 ez-align--right" }, h("ez-button", { label: this.getMessage("snkFilterBar.cleanFilter"), onClick: () => this.changeConfig(Object.assign(Object.assign({}, this.config), { value: undefined })) }), h("ez-button", { label: this.getMessage("snkFilterBar.applyFilter"), onClick: () => this.changeConfig(Object.assign(Object.assign({}, this.config), { value: this._editor["value"] })), class: "ez-button--primary ez-padding-left--medium" }))));
+    return (h(Host, null, 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.config.detailTitle), this.getPopUpHeaderButtons()), h(ContentEditor, { ref: ref => this._editor = ref, value: this.config.value, config: this.config, onKeyDown: evt => this.onKeyDonwListener(evt) }), h("hr", { class: "sc-snk-filter-bar snk-filter__popover-rule" }), h("div", { class: "ez-col ez-col--sd-12 ez-align--right" }, h("ez-button", { label: this.getMessage("snkFilterBar.cleanFilter"), onClick: () => this.clear(), size: "small" }), h("ez-button", { ref: ref => this._applyButton = ref, label: this.getMessage("snkFilterBar.applyFilter"), onClick: () => this.apply(), size: "small", class: "ez-button--primary ez-padding-left--medium" }))));
   }
   static get is() { return "snk-filter-detail"; }
   static get properties() {
@@ -58,23 +115,6 @@ export class SnkFilterDetail {
           "text": ""
         }
       },
-      "keepOpened": {
-        "type": "boolean",
-        "mutable": true,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "keep-opened",
-        "reflect": false
-      },
       "getMessage": {
         "type": "unknown",
         "mutable": false,
@@ -115,4 +155,24 @@ export class SnkFilterDetail {
         }
       }];
   }
+  static get methods() {
+    return {
+      "show": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "",
+          "tags": []
+        }
+      }
+    };
+  }
 }

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

@@ -3,46 +3,52 @@ import { h, Host } from '@stencil/core';
 import FilterItemType from './filter-item-type.enum';
 export class SnkFilterItem {
   constructor() {
-    this.innerClickCheck = (floatingContainer, node) => {
-      if (this._popover.keepOpened) {
+    this.innerClickCheck = (_floatingContainer, node) => {
+      if (node.id != FloatingManager.MODAL_ELEMENT_ID) {
         return true;
       }
-      if (node && floatingContainer) {
-        if (!node.offsetParent) {
-          return true;
-        }
-        let current = node;
-        do {
-          if (current === floatingContainer) {
-            return true;
-          }
-        } while ((current = current.offsetParent) != null);
-      }
       this.detailIsVisible = false;
       return false;
     };
   }
   async showUp(open = false) {
-    this._filterItemElement.scrollIntoView({ behavior: "auto", block: "nearest", inline: "nearest" });
-    if (open) {
-      window.requestAnimationFrame(() => {
-        this.showDetail();
-      });
-    }
-  }
-  showDetail() {
-    this._floatingID = FloatingManager.float(this._popover, this._popoverContainer, { autoClose: true, innerClickTest: this.innerClickCheck, left: this.getScrollOffset() });
-    this.detailIsVisible = true;
+    return new Promise(resolve => {
+      this._filterItemElement.scrollIntoView({ behavior: "auto", block: "nearest", inline: "nearest" });
+      if (open) {
+        this._closeCallback = resolve;
+        window.requestAnimationFrame(() => {
+          this._floatingID = FloatingManager.float(this._popover, this._popoverContainer, {
+            autoClose: true,
+            innerClickTest: this.innerClickCheck,
+            backClickListener: () => this.onDetailCloseCallback(),
+            left: this.getScrollOffset(),
+            useOverlay: true
+          });
+          this._popover.show();
+          this.detailIsVisible = true;
+        });
+      }
+    });
   }
   getScrollOffset() {
-    return `${this._filterItemElement.getBoundingClientRect().left + 12}px`;
+    const padding = getComputedStyle(this._filterItemElement).getPropertyValue("padding-left");
+    const rect = this._filterItemElement.getBoundingClientRect();
+    return `calc(${rect.left}px + ${padding})`;
   }
-  hideDetail() {
-    if (this._floatingID != undefined) {
-      FloatingManager.close(this._floatingID);
+  async hideDetail() {
+    if (this.detailIsVisible) {
+      if (this._floatingID != undefined) {
+        FloatingManager.close(this._floatingID);
+      }
     }
+  }
+  onDetailCloseCallback() {
     this._floatingID = undefined;
     this.detailIsVisible = false;
+    if (this._closeCallback) {
+      this._closeCallback();
+      this._closeCallback = undefined;
+    }
   }
   //---------------------------------------------
   // Event handlers
@@ -57,7 +63,7 @@ export class SnkFilterItem {
           this.hideDetail();
         }
         else {
-          this.showDetail();
+          this.showUp(true);
         }
       }
       evt.preventDefault();
@@ -117,6 +123,9 @@ export class SnkFilterItem {
       if (type === FilterItemType.SEARCH) {
         return `${label}: ${value.value} - ${value.label}`;
       }
+      if (type === FilterItemType.PERSONALIZED) {
+        return label;
+      }
       return `${label}: ${value}`;
     }
     return label;
@@ -131,15 +140,24 @@ export class SnkFilterItem {
   filterChangeListener() {
     this.hideDetail();
   }
-  getIconName() {
+  getRightIconName() {
     if (this.config.value != undefined) {
       return "close";
     }
     return this.detailIsVisible ? "chevron-up" : "chevron-down";
   }
+  getLeftIconName() {
+    switch (this.config.type) {
+      case FilterItemType.PERIOD:
+        return "calendar";
+      case FilterItemType.PERSONALIZED:
+        return "tune";
+    }
+    return undefined;
+  }
   render() {
-    const leftIcon = this.config.type === FilterItemType.PERIOD ? "calendar" : undefined;
-    return (h(Host, null, h("ez-chip", { ref: ref => this._chipElement = ref, label: this.getLabel(), value: this.config.value != undefined }, leftIcon ? h("ez-icon", { ref: ref => this._leftIconElement = ref, iconName: leftIcon, class: "ez-padding-right--small", slot: "leftIcon" }) : undefined, h("ez-icon", { ref: ref => this._rightIconElement = ref, iconName: this.getIconName(), class: "ez-padding-left--small", slot: "rightIcon" })), h("section", { class: "ez-margin-top--small sc-snk-filter-bar snk-filter__popover-container", ref: elem => this._popoverContainer = elem }, h("snk-filter-detail", { config: this.config, getMessage: this.getMessage, class: "sc-snk-filter-bar snk-filter__popover ez-padding--small", ref: elem => this._popover = elem, key: this.config.id }))));
+    const leftIcon = this.getLeftIconName();
+    return (h(Host, null, h("ez-chip", { ref: ref => this._chipElement = ref, label: this.getLabel(), value: this.config.value != undefined }, leftIcon ? h("ez-icon", { ref: ref => this._leftIconElement = ref, iconName: leftIcon, class: "ez-padding-right--small", slot: "leftIcon" }) : undefined, h("ez-icon", { ref: ref => this._rightIconElement = ref, iconName: this.getRightIconName(), class: "ez-padding-left--small", slot: "rightIcon" })), h("section", { class: "ez-margin-top--small sc-snk-filter-bar snk-filter__popover-container", ref: elem => this._popoverContainer = elem }, h("snk-filter-detail", { config: this.config, getMessage: this.getMessage, class: "sc-snk-filter-bar snk-filter__popover ez-padding--small", ref: elem => this._popover = elem, key: this.config.id }))));
   }
   static get is() { return "snk-filter-item"; }
   static get properties() {
@@ -227,6 +245,22 @@ export class SnkFilterItem {
           "text": "",
           "tags": []
         }
+      },
+      "hideDetail": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "",
+          "tags": []
+        }
       }
     };
   }

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

@@ -4,41 +4,43 @@ const SHOW_MORE_ITEM_NAME = "__SHOWMORE__";
 const MAX_FILTERS = 5;
 export class SnkFilterList {
   constructor() {
-    this.innerClickCheck = (floatingContainer, node) => {
-      if (node && floatingContainer) {
-        if (!node.offsetParent) {
-          return true;
-        }
-        let current = node;
-        do {
-          if (current === floatingContainer || current === this._element) {
-            return true;
-          }
-        } while ((current = current.offsetParent) != null);
+    this._preselection = -1;
+    this.innerClickCheck = (_floatingContainer, node) => {
+      if (node.id != FloatingManager.MODAL_ELEMENT_ID) {
+        return true;
       }
       this._detailIsVisible = false;
       return false;
     };
   }
-  showList() {
-    this._floatingID = FloatingManager.float(this._popover, this._popoverContainer, { autoClose: true, innerClickTest: this.innerClickCheck });
+  showDetail() {
+    this._preselection = -1;
+    this._floatingID = FloatingManager.float(this._popover, this._popoverContainer, {
+      autoClose: true,
+      innerClickTest: this.innerClickCheck,
+      backClickListener: () => this.onListCloseCallback(),
+      useOverlay: true
+    });
     this._detailIsVisible = true;
     this._showAll = false;
     this._filterArgument = "";
+    this._filterInput.setFocus();
   }
-  hideList() {
+  async hideDetail() {
     if (this._floatingID != undefined) {
       FloatingManager.close(this._floatingID);
     }
+  }
+  onListCloseCallback() {
     this._floatingID = undefined;
     this._detailIsVisible = false;
   }
   buttonClick() {
     if (this._detailIsVisible) {
-      this.hideList();
+      this.hideDetail();
     }
     else {
-      this.showList();
+      this.showDetail();
     }
   }
   componentDidRender() {
@@ -49,14 +51,15 @@ export class SnkFilterList {
     }
   }
   buildItemElement(item) {
-    return (h("div", { class: "ez-col ez-col--sd-12 ez-align--middle ez-padding--small sc-snk-filter-bar snk-filter-bar__filter-list-item", onClick: () => this.itemSelected(item.name) }, item.iconName ? h("ez-icon", { iconName: item.iconName, size: "small", class: `ez-padding-right--extra-small sc-snk-filter-bar snk-filter-bar__filter-list-item__icon ${item.iconClass || ""}` }) : undefined, h("div", { class: `ez-text ez-text--medium ez-text--primary ez-padding--extra-small sc-snk-filter-bar snk-filter-bar__filter-list-item__label ${item.labelClass || ""}` }, item.label)));
+    const itemId = ++this._selectableItemsCount;
+    return (h("button", { id: `filter-item${itemId}`, onFocusin: () => this._preselection = itemId, class: `ez-col ez-col--sd-12 ez-align--middle ez-padding--small sc-snk-filter-bar snk-filter-bar__filter-list-item`, onClick: () => this.itemSelected(item.name) }, item.iconName ? h("ez-icon", { iconName: item.iconName, size: "small", class: `ez-padding-right--extra-small sc-snk-filter-bar snk-filter-bar__filter-list-item__icon ${item.iconClass || ""}` }) : undefined, h("div", { class: `ez-text ez-text--medium ez-text--primary ez-padding--extra-small sc-snk-filter-bar snk-filter-bar__filter-list-item__label ${item.labelClass || ""}` }, item.label)));
   }
   itemSelected(itemName) {
     if (itemName === SHOW_MORE_ITEM_NAME) {
       this._showAll = true;
     }
     else {
-      this.hideList();
+      this.hideDetail();
       this.snkItemSelected.emit(itemName);
     }
   }
@@ -70,13 +73,47 @@ export class SnkFilterList {
       items.splice(MAX_FILTERS);
       items.push({ kind: "INTERNAL", label: "Mostrar mais", iconName: "dots-horizontal", name: SHOW_MORE_ITEM_NAME, iconClass: "snk-filter-bar__filter-list-item__icon--secondary", labelClass: "snk-filter-bar__filter-list-item__label--secondary" });
     }
+    this._selectableItemsCount = 0;
     return h("div", { class: "sc-snk-filter-bar snk-filter-bar__filter-list-items-container" }, items.map(item => this.buildItemElement(item)));
   }
   getFooterItems() {
     return this.items.filter(item => item.kind === "FOOTER");
   }
+  keyDownHandler(event) {
+    switch (event.key) {
+      case "ArrowDown":
+        this.changePreselection(this._preselection + 1);
+        //Paramos a propagação do evento para evitar scroll indesejado
+        event.stopImmediatePropagation();
+        event.stopPropagation();
+        event.preventDefault();
+        break;
+      case "ArrowUp":
+        this.changePreselection(this._preselection - 1);
+        //Paramos a propagação do evento para evitar scroll indesejado
+        event.stopImmediatePropagation();
+        event.stopPropagation();
+        event.preventDefault();
+        break;
+    }
+  }
+  changePreselection(newSelection) {
+    if (newSelection < 0) {
+      newSelection = this._selectableItemsCount;
+    }
+    this._preselection = newSelection > this._selectableItemsCount ? 0 : newSelection;
+    if (this._preselection === 0) {
+      this._filterInput.setFocus();
+    }
+    else {
+      const item = this._element.querySelector(`#filter-item${this._preselection}`);
+      if (item) {
+        item.focus();
+      }
+    }
+  }
   render() {
-    return (h(Host, { class: "ez-flex ez-flex--column" }, h("ez-button", { class: this.buttonClass, label: this.label, onClick: () => this.buttonClick(), mode: this.iconName ? "icon" : undefined, iconName: this.iconName, size: "small" }, h("slot", { name: "leftIcon" })), h("section", { class: "ez-margin-top--small sc-snk-filter-bar snk-filter__popover-container", ref: elem => this._popoverContainer = elem }, h("div", { class: "sc-snk-filter-bar snk-filter__popover ez-padding--small", ref: elem => this._popover = elem }, h("ez-filter-input", { ref: ref => this._filterInput = ref, mode: "slim", label: this.findFilterText, value: this._filterArgument, onEzChange: (evt) => this._filterArgument = evt.detail }), this.getFilterItems(), h("hr", { class: "sc-snk-filter-bar snk-filter__popover-rule" }), this.items ? this.getFooterItems().map(item => this.buildItemElement(item)) : undefined))));
+    return (h(Host, { class: "ez-flex ez-flex--column" }, h("ez-button", { class: this.buttonClass, label: this.label, onClick: () => this.buttonClick(), mode: this.iconName ? "icon" : undefined, iconName: this.iconName, size: "small" }, h("slot", { name: "leftIcon" })), h("section", { class: "ez-margin-top--small sc-snk-filter-bar snk-filter__popover-container", ref: elem => this._popoverContainer = elem }, h("div", { class: "sc-snk-filter-bar snk-filter__popover ez-padding--small", ref: elem => this._popover = elem }, h("ez-filter-input", { ref: ref => this._filterInput = ref, mode: "slim", label: this.findFilterText, value: this._filterArgument, onEzChange: (evt) => this._filterArgument = evt.detail, onFocus: () => this._preselection = 0 }), this.getFilterItems(), h("hr", { class: "sc-snk-filter-bar snk-filter__popover-rule" }), this.items ? this.getFooterItems().map(item => this.buildItemElement(item)) : undefined))));
   }
   static get is() { return "snk-filter-list"; }
   static get properties() {
@@ -229,5 +266,34 @@ export class SnkFilterList {
         }
       }];
   }
+  static get methods() {
+    return {
+      "hideDetail": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "",
+          "tags": []
+        }
+      }
+    };
+  }
   static get elementRef() { return "_element"; }
+  static get listeners() {
+    return [{
+        "name": "keydown",
+        "method": "keyDownHandler",
+        "target": undefined,
+        "capture": true,
+        "passive": false
+      }];
+  }
 }

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

@@ -0,0 +1,222 @@
+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";
+export class SnkFilterModal {
+  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;
+    });
+  }
+  getActiveFiltersMsg() {
+    const activeFilters = this.items.filter(item => item.active).length;
+    if (activeFilters === 0) {
+      return this.getMessage("snkFilterBar.noActiveFilters");
+    }
+    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)));
+    });
+  }
+  itemKeyBoardSelect(event, item) {
+    if (event.key === "Enter" || event.key === " ") {
+      this.updateValue(item.id);
+    }
+  }
+  modalActionListener(evt) {
+    const modalAction = evt.detail;
+    if (modalAction === ModalAction.LOAD) {
+      if (this._filterInput) {
+        this._filterInput.setFocus();
+      }
+    }
+    else {
+      this.processModalAction(modalAction);
+    }
+  }
+  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", { 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))));
+  }
+  static get is() { return "snk-filter-modal"; }
+  static get properties() {
+    return {
+      "getMessage": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "(key: string, props?: any) => string",
+          "resolved": "(key: string, props?: any) => string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        }
+      },
+      "items": {
+        "type": "unknown",
+        "mutable": true,
+        "complexType": {
+          "original": "Array<ModalItem>",
+          "resolved": "ModalItem[]",
+          "references": {
+            "Array": {
+              "location": "global"
+            },
+            "ModalItem": {
+              "location": "local"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        }
+      },
+      "modalTitle": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "modal-title",
+        "reflect": false
+      },
+      "modalSubTitle": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "modal-sub-title",
+        "reflect": false
+      },
+      "cancelButtonLabel": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "cancel-button-label",
+        "reflect": false
+      },
+      "okButtonLabel": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "ok-button-label",
+        "reflect": false
+      },
+      "infoText": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "info-text",
+        "reflect": false
+      },
+      "useSearch": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "use-search",
+        "reflect": false
+      },
+      "processModalAction": {
+        "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"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        }
+      }
+    };
+  }
+  static get states() {
+    return {
+      "_filterArgument": {}
+    };
+  }
+}