@sankhyalabs/sankhyablocks 1.3.34 → 1.4.0-beta.2

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

@@ -0,0 +1,196 @@
+import { h } from '@stencil/core';
+import { ModalButtonStatus } from "@sankhyalabs/ezui/dist/collection/components/ez-modal-container";
+import { ArrayUtils } from '@sankhyalabs/core';
+export class SnkFilterModal {
+  updateValue(id, value) {
+    this.items = this.items.map(item => {
+      if (item.id === id) {
+        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 });
+  }
+  getFilteredItems() {
+    return this.items ? ArrayUtils.applyStringFilter(this._filterArgument, this.items) : [];
+  }
+  render() {
+    const allowCancel = this.items.filter(item => item.active).length > 0;
+    return (h("ez-modal-container", { modalTitle: this.modalTitle, modalSubTitle: this.modalSubTitle, cancelButtonLabel: this.cancelButtonLabel, okButtonLabel: this.okButtonLabel, onEzModalAction: evt => this.processModalAction(evt.detail), 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", { label: this.getMessage("snkFilterBar.modalFindFilter"), onEzChange: (evt) => this._filterArgument = evt.detail }) : undefined), this.getFilteredItems().length > 0 ? h("div", { class: "ez-text ez-text--medium ez-text--primary ez-padding-bottom--small" }, this.getActiveFiltersMsg()) : undefined, h("div", null, this.getFilteredItems().map(item => h("div", { class: "ez-padding--medium sc-snk-filter-bar snk-filter-bar__filter-modal-item ez-align--middle ez-margin-bottom--small" }, h("ez-check", { 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: "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)))), 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,136 @@
+: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, 1);
+  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;
+  flex-grow: 0;
+}
+
+.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);
+}
+
+.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.preselected {
+ 
+  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{
+  display: flex;
+  flex-direction: row;
+  border-radius: var(--border--radius-medium, 12px);
+  background-color: var(--background--medium, #f0f3f7);
+}
+
+.snk-filter-bar__filter-modal-item__check{
+  width: auto;
+}
+.snk-filter-bar__filter-modal-item__label{
+  font-weight: var(--text-weight--medium);
+  width: 100%;
+}
+
+.snk-filter-bar__filter-modal-content{
+  display: grid;
+  grid-template-rows: auto auto 1fr auto;
+  width: 100%;
+  height: 100%;
+}