@sankhyalabs/sankhyablocks 1.3.34 → 1.4.0-beta.10

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

@@ -0,0 +1,299 @@
+import { ArrayUtils, FloatingManager } from '@sankhyalabs/core';
+import { h, Host } from '@stencil/core';
+const SHOW_MORE_ITEM_NAME = "__SHOWMORE__";
+const MAX_FILTERS = 5;
+export class SnkFilterList {
+  constructor() {
+    this._preselection = -1;
+    this.innerClickCheck = (_floatingContainer, node) => {
+      if (node.id != FloatingManager.MODAL_ELEMENT_ID) {
+        return true;
+      }
+      this._detailIsVisible = false;
+      return false;
+    };
+  }
+  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();
+  }
+  async hideDetail() {
+    if (this._floatingID != undefined) {
+      FloatingManager.close(this._floatingID);
+    }
+  }
+  onListCloseCallback() {
+    this._floatingID = undefined;
+    this._detailIsVisible = false;
+  }
+  buttonClick() {
+    if (this._detailIsVisible) {
+      this.hideDetail();
+    }
+    else {
+      this.showDetail();
+    }
+  }
+  componentDidRender() {
+    if (this._floatingID == undefined) {
+      if (this._popover) {
+        this._popover.remove();
+      }
+    }
+  }
+  buildItemElement(item) {
+    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.hideDetail();
+      this.snkItemSelected.emit(itemName);
+    }
+  }
+  getFilterItems() {
+    const items = this.items ? ArrayUtils.applyStringFilter(this._filterArgument, this.items.filter(item => item.kind === "FILTER")) : [];
+    if (items.length === 0) {
+      return h("div", { class: "ez-text ez-text--medium ez-text--primary ez-padding--extra-small sc-snk-filter-bar snk-filter-bar__filter-list-items-container--empty" }, this.emptyText);
+    }
+    const hideItems = !this._filterArgument && !this._showAll && (items.length > MAX_FILTERS + 1);
+    if (hideItems) {
+      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, 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() {
+    return {
+      "label": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "label",
+        "reflect": false
+      },
+      "iconName": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "icon-name",
+        "reflect": false
+      },
+      "items": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "Array<ListItem>",
+          "resolved": "ListItem[]",
+          "references": {
+            "Array": {
+              "location": "global"
+            },
+            "ListItem": {
+              "location": "local"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        }
+      },
+      "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": ""
+        }
+      },
+      "emptyText": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "empty-text",
+        "reflect": false
+      },
+      "findFilterText": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "find-filter-text",
+        "reflect": false
+      },
+      "buttonClass": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "button-class",
+        "reflect": false
+      }
+    };
+  }
+  static get states() {
+    return {
+      "_filterArgument": {},
+      "_showAll": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "snkItemSelected",
+        "name": "snkItemSelected",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        }
+      }];
+  }
+  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": {}
+    };
+  }
+}

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

@@ -0,0 +1,149 @@
+:host {
+  display: grid;
+  grid-template-columns: minmax(100px, 100%) 1fr 1fr;
+}
+
+.snk-filter__popover-container{
+  /*private*/
+  display: flex;
+  cursor: auto;
+}
+
+.snk-filter__popover{
+  /*private*/
+  display: flex;
+  flex-direction: column;
+  position: absolute;
+  width: fit-content;
+  height: fit-content;
+  min-width: 265px;
+  
+  /*public*/
+  z-index: var(--more-visible, 2);
+  background-color: var(--background--xlight, #fff);
+  border-radius: var(--border--radius-medium, 12px);
+  box-shadow: var(--shadow, 0px 0px 16px 0px #000);
+
+}
+
+.snk-filter-item__editor-header{
+  flex-grow: 1;
+  font-weight: var(--text-weight--medium, 400);
+  color: var(--color--title-primary, #2B3A54);
+}
+
+.snk-filter__popover-rule{
+  border-style: solid;
+  border-color: var(--color--disable-secondary, #F2F5F8);
+  border-radius: 1px;
+  border-width: 1px;
+  width: 100%;
+}
+
+.editor__ez-check{
+  --ez-check__label--padding-left: 0;
+}
+
+.snk-filter-item__editor-header-button{
+  cursor: pointer;
+  background-color: transparent;
+  border: none;
+  padding: 3px;
+  outline-color: var(--color--primary);
+}
+
+.snk-filter-bar__divider{
+  margin-bottom: var(--space--small);
+}
+
+.snk-filter-bar__filter-list-items-container{
+  overflow-y: auto;
+  max-height: 360px;
+  margin-top: var(--space--small, 6px);
+}
+
+.snk-filter-bar__filter-list-item{
+  cursor: pointer;
+  border-radius: var(--border--radius-small, 6px);
+  border: none;
+  background-color: transparent;
+}
+
+.snk-filter-bar__filter-list-item__label{
+  color: var(--title--primary);
+}
+
+.snk-filter-bar__filter-list-item__label--secondary{
+  color: var(--text--primary);
+}
+
+.snk-filter-bar__filter-list-item__icon{
+  --ez-icon--color: var(--title--primary);
+}
+
+.snk-filter-bar__filter-list-item__icon--secondary{
+  --ez-icon--color: var(--text--secondary);
+}
+
+.snk-filter-bar__filter-list-item:focus-visible {
+  outline: none;
+  background-color: var(--background--medium);
+}
+
+.snk-filter-bar__filter-list-item:hover{
+  background-color: var(--background--medium);
+}
+
+.snk-filter-bar__filter-list-items-container--empty{
+  width: 100%;
+  height: 100px;
+  display: flex;
+  justify-content: center;
+  align-self: center;
+  align-items: center;
+}
+
+.snk-filter-bar__filter-list-items-button--active{
+  position: relative;
+}
+.snk-filter-bar__filter-list-items-button--active::after{
+  display: flex;
+  position: absolute;
+  content: "";
+  width: 8px;
+  height: 8px;
+  top: 7px;
+  left: 17px;
+  background-color: var(--icon--alert--color, #008561);
+  border-radius: 50%;
+}
+
+.snk-filter-bar__filter-modal-item{
+  --modal-item-border-width: 2px;
+  display: flex;
+  flex-direction: row;
+  margin-left: var(--modal-item-border-width);
+  border-radius: var(--border--radius-medium, 12px);
+  background-color: var(--background--medium, #f0f3f7);
+  border: none;
+  width: 100%;
+  
+}
+
+.snk-filter-bar__filter-modal-item:focus-visible{
+  outline: var(--color--primary) solid var(--modal-item-border-width);
+}
+
+.snk-filter-bar__filter-modal-item__check{
+  width: auto;
+}
+.snk-filter-bar__filter-modal-item__label{
+  font-weight: var(--text-weight--medium);
+}
+
+.snk-filter-bar__filter-modal-content{
+  display: grid;
+  grid-template-rows: auto auto 1fr auto;
+  width: 100%;
+  height: 100%;
+}