@sankhyalabs/ezui 1.1.76 → 1.1.77

package/dist/collection/components/ez-grid/subcomponents/gridconfig/grid-config.js

@@ -0,0 +1,354 @@
+import { Component, Event, h, Host, Prop } from '@stencil/core';
+import { getSpritePath } from '../../../../utils/AssetsUtils';
+import { StringUtils } from '@sankhyalabs/core';
+export class GridConfig {
+  constructor() {
+    this._columnListHistory = [];
+    this._orderListItems = [];
+    this._columListItems = [];
+    this.selectedTab = "Colunas";
+    this._selectedIndex = -1;
+  }
+  /* Creation Methods */
+  createOrderList() {
+    var _a;
+    let newList = [];
+    if (((_a = this._columnListHistory) === null || _a === void 0 ? void 0 : _a.length) > 0) {
+      this._columnListHistory.find(group => group.group === "Visíveis").items.forEach(column => {
+        let item = { label: column.label };
+        newList.push(item);
+      });
+    }
+    else {
+      this.columns.forEach(column => {
+        let item = { name: column.name, label: column.label };
+        if (!column.hidden) {
+          newList.push(item);
+        }
+      });
+    }
+    this._orderListItems = newList;
+  }
+  createColumnList() {
+    let visibleGroup = {
+      group: 'Visíveis',
+      items: [],
+    };
+    let hiddenGroup = {
+      group: 'Ocultas',
+      items: [],
+      sort: 'ASC'
+    };
+    this.columns.forEach(column => {
+      let item = { label: column.label };
+      if (column.hidden) {
+        hiddenGroup.items.push(item);
+      }
+      else {
+        visibleGroup.items.push(item);
+      }
+    });
+    if (this._columnListHistory.length <= 0) {
+      this._columListItems = [visibleGroup, hiddenGroup];
+    }
+  }
+  buildColumnListSlot(item, group) {
+    return (h("div", null,
+      h("ez-check", { mode: 'switch', id: 'switch' + item + group, value: group.group === "Visíveis", onEzChange: (ev) => { this.switchColumnGroup(ev, item); } })));
+  }
+  buildOrderListSlot(item) {
+    let existingItem = this.columns.find(columnItem => columnItem.label === item.label);
+    return (h("div", null,
+      h("select-box", { selectedOption: existingItem === null || existingItem === void 0 ? void 0 : existingItem.sort, key: 'select-box' + item, onEzChange: (ev) => { ev.stopPropagation(); this.updateOrder(ev.detail, item); } })));
+  }
+  updateOrder(sortOrder, updatedItem) {
+    let newList = [...this.columns];
+    let newItem = newList.find(item => item.label === updatedItem.label);
+    if (newItem) {
+      newItem.sort = sortOrder;
+    }
+    this.columns = newList;
+  }
+  /* Actions Methods */
+  switchColumnGroup(ev, switchedItem) {
+    ev.stopPropagation();
+    let newList = [...this._columListItems];
+    if (ev.detail === true) {
+      let hiddenGroup = newList.find(group => group.group === "Ocultas");
+      let index = hiddenGroup.items.findIndex(item => item.label === switchedItem.label);
+      if (index >= 0) {
+        hiddenGroup.items.splice(index, 1);
+      }
+      let visibleGroup = newList.find(group => group.group === "Visíveis");
+      visibleGroup.items.push(switchedItem);
+      this._columListItems = newList;
+      this.createOrderList();
+    }
+    else if (ev.detail === false) {
+      let visibleGroup = newList.find(group => group.group === "Visíveis");
+      let index = visibleGroup.items.findIndex(item => item.label === switchedItem.label);
+      if (index >= 0) {
+        visibleGroup.items.splice(index, 1);
+      }
+      let hiddenGroup = newList.find(group => group.group === "Ocultas");
+      hiddenGroup.items.push(switchedItem);
+      this._columListItems = newList;
+      this.createOrderList();
+    }
+  }
+  finish() {
+    let newColumnList = [];
+    this._columListItems.forEach(group => {
+      group.items.forEach(item => {
+        const baseColumn = this.columns.find(column => column.label === item.label);
+        let newColumnItem = Object.assign({}, baseColumn);
+        if (group.group === "Ocultas") {
+          newColumnItem.hidden = true;
+        }
+        else {
+          newColumnItem.hidden = false;
+        }
+        newColumnList.push(newColumnItem);
+      });
+    });
+    this._columnListHistory = [];
+    this.columns = newColumnList;
+    this.configFinish.emit(this.columns);
+  }
+  async locateColumn(evt, searchingText) {
+    var _a;
+    const hitEnter = evt.key === "Enter";
+    if (!searchingText) {
+      searchingText = (_a = evt.currentTarget) === null || _a === void 0 ? void 0 : _a.value;
+    }
+    let newSelected = -1;
+    if (this.selectedTab === "Ordenação") {
+      if (searchingText) {
+        const matchedIndexes = [];
+        let orderListDatasource;
+        await this._orderList.getList().then(listGroup => {
+          orderListDatasource = listGroup;
+          orderListDatasource.forEach((column, index) => {
+            if (this.compareWords(column, searchingText)) {
+              matchedIndexes.push(index);
+            }
+          });
+        });
+        if (matchedIndexes.length > 0) {
+          if (hitEnter) {
+            for (let j = 0; j < matchedIndexes.length; j++) {
+              if (matchedIndexes[j] > this._selectedIndex) {
+                newSelected = matchedIndexes[j];
+                break;
+              }
+            }
+          }
+          if (newSelected === -1) {
+            newSelected = matchedIndexes[0];
+          }
+        }
+        this._selectedIndex = newSelected;
+        let selectedColumn;
+        selectedColumn = orderListDatasource[newSelected];
+        if (selectedColumn) {
+          this._orderList.setSelection({ label: selectedColumn.label }, true);
+        }
+        else {
+          this._orderList.setSelection(undefined);
+        }
+      }
+      else {
+        this._orderList.setSelection(undefined);
+      }
+    }
+    else {
+      if (searchingText) {
+        const matchedIndexes = [];
+        this.columns.forEach((column, index) => {
+          if (this.compareWords(column, searchingText)) {
+            matchedIndexes.push(index);
+          }
+        });
+        if (matchedIndexes.length > 0) {
+          if (hitEnter) {
+            for (let j = 0; j < matchedIndexes.length; j++) {
+              if (matchedIndexes[j] > this._selectedIndex) {
+                newSelected = matchedIndexes[j];
+                break;
+              }
+            }
+          }
+          if (newSelected === -1) {
+            newSelected = matchedIndexes[0];
+          }
+        }
+        this._selectedIndex = newSelected;
+        let selectedColumn = this.columns[newSelected];
+        if (selectedColumn) {
+          this._columnList.setSelection({ label: selectedColumn.label }, true);
+        }
+        else {
+          this._columnList.setSelection(undefined);
+        }
+      }
+      else {
+        this._columnList.setSelection(undefined);
+      }
+    }
+  }
+  compareWords(column, searchingText) {
+    if (StringUtils.replaceAccentuatedChars(column.label).indexOf(StringUtils.replaceAccentuatedChars(searchingText)) > -1) {
+      return true;
+    }
+    return false;
+  }
+  closeConfig() {
+    this._columnListHistory = [];
+    this.configCancel.emit();
+  }
+  /* Handlers */
+  handleTabChange(ev) {
+    var _a;
+    if ((_a = ev === null || ev === void 0 ? void 0 : ev.target) === null || _a === void 0 ? void 0 : _a.selectedTab) {
+      if (ev.target.selectedTab === "Ordenação") {
+        this._columnListHistory = this._columnList.dataSource;
+        this.createOrderList();
+      }
+      this.selectedTab = ev.target.selectedTab;
+    }
+  }
+  handleColumnListChange(ev) {
+    var _a;
+    if (ev.detail) {
+      let visibleItems = (_a = ev.detail.find(group => group.group === "Visíveis")) === null || _a === void 0 ? void 0 : _a.items;
+      if (visibleItems) {
+        this._orderListItems = visibleItems;
+      }
+    }
+  }
+  componentWillRender() {
+    var _a;
+    if (((_a = this.columns) === null || _a === void 0 ? void 0 : _a.length) > 0) {
+      this.createColumnList();
+      this.createOrderList();
+    }
+  }
+  componentDidRender() {
+    var _a;
+    if (((_a = this.columns) === null || _a === void 0 ? void 0 : _a.length) > 0) {
+      this.locateColumn(new KeyboardEvent("arrow-right", { key: "ArrowRight" }), this._searchElement.value);
+    }
+  }
+  render() {
+    return (h(Host, null,
+      h("div", { class: "grid-config__header" },
+        h("div", { class: "title-container" },
+          h("div", { class: "" },
+            h("label", { class: "title" }, "Configura\u00E7\u00E3o da Grade"),
+            h("label", { class: "subtitle" }, "Defina visibilidade e ordem das colunas.")),
+          h("div", { class: "button-close" },
+            h("ez-button", { mode: 'icon', image: getSpritePath("close"), size: 'medium', onClick: () => this.closeConfig() }))),
+        h("div", { class: "tabselector-container" },
+          h("ez-tabselector", { selectedTab: this.selectedTab, selectedIndex: '0', onEzChange: (ev) => { this.handleTabChange(ev); }, tabs: 'Colunas, Ordena\u00E7\u00E3o' })),
+        h("div", null,
+          h("ez-text-input", { ref: (el) => this._searchElement = el, label: "Localizar coluna", onKeyUp: evt => this.locateColumn(evt) },
+            h("ez-icon", { slot: "leftIcon", size: "medium", href: getSpritePath("search") })))),
+      h("div", { class: "grid-config__main" },
+        h("ez-list", { ref: (el) => this._columnList = el, class: this.selectedTab === "Colunas" ? "" : "hidden", dataSource: this._columListItems, onEzChange: ev => this.handleColumnListChange(ev), ezDraggable: true, ezSelectable: true, itemSlotBuilder: (item, group) => this.buildColumnListSlot(item, group), useGroups: true }),
+        h("ez-list", { ref: (el) => this._orderList = el, class: this.selectedTab === "Ordenação" ? "" : "hidden", dataSource: this._orderListItems, ezSelectable: true, itemSlotBuilder: (item) => this.buildOrderListSlot(item) })),
+      h("div", { class: "grid-config__footer" },
+        h("ez-button", { class: "padding-right--medium", label: "Cancelar", onClick: () => this.closeConfig() }),
+        h("ez-button", { label: "Concluir", class: "button--primary", onClick: () => this.finish() }))));
+  }
+  static get is() { return "grid-config"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["grid-config.css"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["grid-config.css"]
+  }; }
+  static get assetsDirs() { return ["../assets"]; }
+  static get properties() { return {
+    "selectedTab": {
+      "type": "string",
+      "mutable": true,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "selected-tab",
+      "reflect": false,
+      "defaultValue": "\"Colunas\""
+    },
+    "columns": {
+      "type": "unknown",
+      "mutable": true,
+      "complexType": {
+        "original": "Array<EzGridColumn>",
+        "resolved": "EzGridColumn[]",
+        "references": {
+          "Array": {
+            "location": "global"
+          },
+          "EzGridColumn": {
+            "location": "import",
+            "path": "../../controller/EzGridController"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      }
+    }
+  }; }
+  static get events() { return [{
+      "method": "configFinish",
+      "name": "configFinish",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "complexType": {
+        "original": "Array<EzGridColumn>",
+        "resolved": "EzGridColumn[]",
+        "references": {
+          "Array": {
+            "location": "global"
+          },
+          "EzGridColumn": {
+            "location": "import",
+            "path": "../../controller/EzGridController"
+          }
+        }
+      }
+    }, {
+      "method": "configCancel",
+      "name": "configCancel",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "complexType": {
+        "original": "void",
+        "resolved": "void",
+        "references": {}
+      }
+    }]; }
+}

package/dist/collection/components/ez-grid/subcomponents/select-box/select-box.css

@@ -0,0 +1,7 @@
+select {
+    border: 1px solid #DCE0E8;
+    font-family: 'Sora';
+    border-radius: 3px;
+    outline: none;
+    cursor: pointer;
+}

package/dist/collection/components/ez-grid/subcomponents/select-box/select-box.js

@@ -0,0 +1,66 @@
+import { Component, Event, h, Prop } from '@stencil/core';
+export class SelectBox {
+  changeSelection() {
+    this.ezChange.emit(this._selectElem.value);
+  }
+  componentDidRender() {
+    if (this._selectElem) {
+      if (this.selectedOption) {
+        this._selectElem.value = this.selectedOption;
+      }
+      else {
+        this._selectElem.value = "na";
+      }
+    }
+  }
+  render() {
+    return (h("select", { ref: (el) => this._selectElem = el, onChange: () => { this.changeSelection(); } },
+      h("option", { value: "na" }, "N/A"),
+      h("option", { value: "asc" }, "A-Z"),
+      h("option", { value: "desc" }, "Z-A")));
+  }
+  static get is() { return "select-box"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["select-box.css"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["select-box.css"]
+  }; }
+  static get assetsDirs() { return ["../assets"]; }
+  static get properties() { return {
+    "selectedOption": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "selected-option",
+      "reflect": false
+    }
+  }; }
+  static get events() { return [{
+      "method": "ezChange",
+      "name": "ezChange",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      }
+    }]; }
+}

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

@@ -1,5 +1,5 @@
 :host {
-  display: block;
+  display: flex;
   overflow: hidden;
   position: relative;
   /* @doc Define a cor do ícone. */