@sankhyalabs/ezui 1.1.71 → 1.1.74

package/dist/collection/components/ez-label-chip/ez-label-chip.js

@@ -1,4 +1,4 @@
-import { Component, Prop, h, Method, Watch, Event } from '@stencil/core';
+import { Component, Prop, h, Method, Watch, Event } from "@stencil/core";
 export class EzLabelChip {
   constructor() {
     /**
@@ -34,7 +34,7 @@ export class EzLabelChip {
   //---------------------------------------------
   handleClick(ev) {
     const target = ev.target;
-    if (target.assignedSlot === null && !target.classList.contains('label__icon')) {
+    if (target.assignedSlot === null && !target.classList.contains("label__icon")) {
       this.valueChange.emit(this.value);
       this.swichState();
     }
@@ -46,13 +46,13 @@ export class EzLabelChip {
   }
   reflectChange() {
     if (this._divElem) {
-      this._divElem.classList.remove('label__container--active');
-      this._divElem.classList.remove('label__container');
+      this._divElem.classList.remove("label__container--active");
+      this._divElem.classList.remove("label__container");
       if (this.value) {
-        this._divElem.classList.add('label__container--active');
+        this._divElem.classList.add("label__container--active");
       }
       else {
-        this._divElem.classList.add('label__container');
+        this._divElem.classList.add("label__container");
       }
     }
   }
@@ -62,7 +62,7 @@ export class EzLabelChip {
   componentDidLoad() {
     if (this._divElem) {
       if (this.value) {
-        this._divElem.classList.add('label__container--active');
+        this._divElem.classList.add("label__container--active");
       }
       else {
         this.handleEnabledState();
@@ -70,12 +70,12 @@ export class EzLabelChip {
     }
   }
   handleEnabledState() {
-    this._divElem.classList.remove('label__container--disabled');
+    this._divElem.classList.remove("label__container--disabled");
     if (!this.enabled) {
-      this._divElem.classList.remove('label__container');
-      this._divElem.classList.add('label__container--disabled');
+      this._divElem.classList.remove("label__container");
+      this._divElem.classList.add("label__container--disabled");
       if (this._labelElem) {
-        this._labelElem.style.cursor = 'default';
+        this._labelElem.style.cursor = "default";
       }
     }
   }

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

@@ -0,0 +1,131 @@
+:host {
+
+  /* @doc Define o raio da borda do componente. */
+  --list__host--border-radius: var(--border--radius-medium, 12px);
+  /* @doc Define o espaçamento entre a lista e o componente. */
+  --list__host--padding: var(--space--medium, 12px);
+  /* @doc Define o espaçamento interno do ícone. */
+  --list__icon__padding: var(--space--small, 6px);
+  /* --list__item__padding: var(--space--small, 6px); */
+  /* @doc Define o espaçamento externo do item da lista. */
+  --list__item__margin: 0 var(--space--small, 6px);
+  /* @doc Define a cor do texto do item da lista. */
+  --list__item--color: var(--title--primary, #2b3a54);
+  /* @doc Define o estilo borda inferior do item da lista. */
+  --list__item--border-bottom: var(--border--small, 1px solid);
+  /* @doc Define a cor da borda inferior do item da lista. */
+  --list__item--border-color: var(--title--primary, #2b3a54);
+  /* @doc Define o estilo do texto do item da lista. */
+  --list__item--font-family: var(--font-pattern, #2b3a54);
+  /* @doc Define o tamanho do texto do item da lista. */
+  --list__item--font-size: var(--text--medium, 14px);
+  /* @doc Define a imagem do ícone de drag. */
+  --list__draggable__icon--image: url('data:image/svg+xml;utf8,<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="m 12,16 a 2,2 0 0 1 2,2 2,2 0 0 1 -2,2 2,2 0 0 1 -2,-2 2,2 0 0 1 2,-2 m 0,-6 a 2,2 0 0 1 2,2 2,2 0 0 1 -2,2 2,2 0 0 1 -2,-2 2,2 0 0 1 2,-2 m 0,-6 a 2,2 0 0 1 2,2 2,2 0 0 1 -2,2 2,2 0 0 1 -2,-2 2,2 0 0 1 2,-2 z"/></svg>');
+
+  border-radius: var(--list__host--border-radius);
+  padding: var(--list__host--padding);
+  max-height: 100%;
+  width: 100%;
+  background-color: #fff;
+  display: flex;
+}
+
+.draggable {
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  /* padding: 0 var(--list__item__padding); */
+  flex: 1;
+}
+
+.draggable-list {
+  color: var(--text-color);
+  padding: 0;
+  margin: 0;
+  width: 100%;
+  max-height: 100%;
+  overflow-y: auto;
+}
+
+.draggable-list li {
+  background-color: #fff;
+  display: flex;
+  margin: var(--list__item__margin);
+  font-family: var(--list__item--font-family);
+  font-size: var(--list__item--font-size);
+  color: var(--list__item--color);
+}
+
+.draggable-list li:not(:last-of-type) {
+  border-bottom: var(--list__item--border-bottom);
+}
+
+.draggable-list li.over .draggable {
+  background-color: var(--background--strong);
+}
+
+.draggable:hover {
+  background-color: var(--background--medium);
+}
+
+.draggable-selected {
+  background-color: var(--background--strong) !important;
+}
+
+.draggable-selected div:hover {
+  background-color: var(--background--strong) !important;
+}
+
+
+/* Precisamos dos tokens do scrollbar */
+.draggable-list::-webkit-scrollbar-track {
+  background-color: #f0f2f5;
+}
+
+.draggable-list::-webkit-scrollbar-thumb {
+  background-color: var(--title--primary);
+  border-radius: var(--space--extra-small);
+}
+
+.draggable-list::-webkit-scrollbar {
+  background-color: #f0f2f5;
+  height: 6px;
+  max-height: 6px;
+  min-height: 6px;
+  width: 6px;
+  max-width: 6px;
+  min-width: 6px;
+}
+
+.draggable-icon {
+  align-items: flex-start;
+  display: flex;
+  outline: none;
+  border: none;
+  background-color: unset;
+}
+
+.draggable-icon::after {
+  content: '';
+  display: flex;
+  background-color: var(--list__item--color);
+  width: 24px;
+  height: 24px;
+  -webkit-mask-image: var(--list__draggable__icon--image);
+  mask-image: var(--list__draggable__icon--image);
+}
+
+* {
+  box-sizing: border-box;
+}
+
+.checkbox {
+  width: fit-content;
+}
+
+.text--ellipsis {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}

package/dist/collection/components/ez-list/ez-list.js

@@ -0,0 +1,252 @@
+import { Component, Host, h, Prop, Method } from '@stencil/core';
+;
+export class EzList {
+  constructor() {
+    this._listItems = [];
+    /**
+    * Define a lista inicial do componente.
+    */
+    this.initialList = [];
+    /**
+    * Define se o componente terá o comportamento de arrasto de linhas.
+    */
+    this.draggable = true;
+    /**
+    * Define se é possível selecionar mais de um registro.
+    */
+    this.isMultipleSelection = true;
+  }
+  createList() {
+    [...this.initialList]
+      .forEach((item, index) => {
+      const listItem = document.createElement('li');
+      listItem.setAttribute('data-index', index.toString());
+      if (!this.isMultipleSelection)
+        listItem.onclick = this.selectLine.bind(this);
+      listItem.innerHTML = `
+          <div class="draggable" ${this.draggable ? "draggable=true" : ""}>
+
+            ${this.draggable ? '<span class="draggable-icon"></span>' : ""}
+            
+            ${this.isMultipleSelection ? `<ez-check class='checkbox' value=${item.checked}></ez-check>` : ''}
+            <p title="${item.value}" class="person-name text--ellipsis">${item.value}</p>
+            
+          </div>
+        `;
+      this._listItems.push(listItem);
+      this._draggableList.appendChild(listItem);
+    });
+    if (this.draggable) {
+      this.handleEventListeners(this._listItems, this._draggableList, this._hostElement, false);
+    }
+  }
+  selectLine(e) {
+    var _a, _b, _c;
+    this._listItems.forEach(item => { item.classList.remove('draggable-selected'); });
+    if (((_a = e.target) === null || _a === void 0 ? void 0 : _a.tagName) === 'SPAN') {
+      const span = e.target;
+      this._selectedItem = { value: span.parentElement.getElementsByTagName('p')[0].textContent };
+      span.parentElement.parentElement.classList.add('draggable-selected');
+    }
+    else if (((_b = e.target) === null || _b === void 0 ? void 0 : _b.tagName) === 'P') {
+      const paragraph = e.target;
+      this._selectedItem = { value: paragraph.textContent };
+      paragraph.parentElement.parentElement.classList.add('draggable-selected');
+    }
+    else if (((_c = e.target) === null || _c === void 0 ? void 0 : _c.tagName) === 'DIV') {
+      const draggable = e.target;
+      this._selectedItem = { value: draggable.getElementsByTagName('p')[0].textContent };
+      draggable.parentElement.classList.add('draggable-selected');
+    }
+  }
+  handleEventListeners(listItems, dragableList, hostElement, removeEvents) {
+    let _dragStartIndex;
+    let _isItemOut = false;
+    function dragStart(item) {
+      _dragStartIndex = item.parentElement.getAttribute('data-index');
+    }
+    function dragEnter(item) {
+      item.classList.add('over');
+    }
+    function dragLeave(item) {
+      item.classList.remove('over');
+    }
+    function dragOver(e) {
+      e.preventDefault();
+    }
+    function dragDrop(item) {
+      if (_isItemOut) {
+        let index = +item.getAttribute('data-index');
+        const itemRemoved = listItems[index].querySelector('.draggable');
+        listItems[index].removeChild(itemRemoved);
+      }
+      const dragEndIndex = +item.getAttribute('data-index');
+      swapItems(+_dragStartIndex, dragEndIndex);
+      item.classList.remove('over');
+    }
+    function swapItems(fromIndex, toIndex) {
+      const itemOne = listItems[fromIndex].querySelector('.draggable');
+      const itemTwo = listItems[toIndex].querySelector('.draggable');
+      listItems[fromIndex].appendChild(itemTwo);
+      listItems[toIndex].appendChild(itemOne);
+      return listItems;
+    }
+    if (!removeEvents) {
+      hostElement.addEventListener('dragenter', function () { _isItemOut = false; });
+      hostElement.addEventListener('dragleave', function () { _isItemOut = true; });
+      const draggables = dragableList.querySelectorAll("div.draggable");
+      draggables.forEach(draggable => {
+        draggable.addEventListener('dragstart', function () { dragStart(draggable); });
+      });
+      listItems.forEach(item => {
+        item.addEventListener('dragover', function (event) { dragOver(event); });
+        item.addEventListener('drop', function () { dragDrop(item); });
+        item.addEventListener('dragenter', function () { dragEnter(item); });
+        item.addEventListener('dragleave', function () { dragLeave(item); });
+      });
+    }
+    else {
+      hostElement.removeEventListener('dragenter', function () { _isItemOut = false; });
+      hostElement.removeEventListener('dragleave', function () { _isItemOut = true; });
+      const draggables = dragableList.querySelectorAll("div.draggable");
+      draggables.forEach(draggable => {
+        draggable.removeEventListener('dragstart', function () { dragStart(draggable); });
+      });
+      listItems.forEach(item => {
+        item.removeEventListener('dragover', function (event) { dragOver(event); });
+        item.removeEventListener('drop', function () { dragDrop(item); });
+        item.removeEventListener('dragenter', function () { dragEnter(item); });
+        item.removeEventListener('dragleave', function () { dragLeave(item); });
+      });
+    }
+  }
+  /**
+  *  Retorna      uma promessa com o estado da atual lista composta por objetos do tipo {value: string, checked: boolean}.
+  */
+  async getState() {
+    let emitionList = [];
+    this._listItems.forEach(item => {
+      let emitionItem = {
+        value: this.getValueItem(item),
+        checked: this.getChecked(item)
+      };
+      emitionList.push(emitionItem);
+    });
+    return emitionList;
+  }
+  getChecked(item) {
+    if (this.isMultipleSelection) {
+      return item.children[0].children[1].value;
+    }
+    else {
+      if (!this._selectedItem)
+        return false;
+      return (item.children[0].children[1].textContent === this._selectedItem.value);
+    }
+  }
+  getValueItem(item) {
+    if (this.isMultipleSelection) {
+      return item.children[0].children[2].textContent;
+    }
+    return item.children[0].children[1].textContent;
+  }
+  componentDidLoad() {
+    this.createList();
+  }
+  disconnectedCallback() {
+    if (this.draggable) {
+      this.handleEventListeners(this._listItems, this._draggableList, this._hostElement, true);
+    }
+  }
+  render() {
+    return (h(Host, { ref: (el) => this._hostElement = el },
+      h("ul", { ref: (el) => this._draggableList = el, class: "draggable-list", id: "draggable-list" })));
+  }
+  static get is() { return "ez-list"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["ez-list.css"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["ez-list.css"]
+  }; }
+  static get properties() { return {
+    "initialList": {
+      "type": "unknown",
+      "mutable": true,
+      "complexType": {
+        "original": "ListItem[]",
+        "resolved": "ListItem[]",
+        "references": {
+          "ListItem": {
+            "location": "local"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Define a lista inicial do componente."
+      },
+      "defaultValue": "[]"
+    },
+    "draggable": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Define se o componente ter\u00E1 o comportamento de arrasto de linhas."
+      },
+      "attribute": "draggable",
+      "reflect": false,
+      "defaultValue": "true"
+    },
+    "isMultipleSelection": {
+      "type": "boolean",
+      "mutable": true,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Define se \u00E9 poss\u00EDvel selecionar mais de um registro."
+      },
+      "attribute": "is-multiple-selection",
+      "reflect": true,
+      "defaultValue": "true"
+    }
+  }; }
+  static get methods() { return {
+    "getState": {
+      "complexType": {
+        "signature": "() => Promise<ListItem[]>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global"
+          },
+          "ListItem": {
+            "location": "local"
+          }
+        },
+        "return": "Promise<ListItem[]>"
+      },
+      "docs": {
+        "text": "Retorna      uma promessa com o estado da atual lista composta por objetos do tipo {value: string, checked: boolean}.",
+        "tags": []
+      }
+    }
+  }; }
+}

package/dist/collection/components/ez-search/ez-search.js

@@ -1,4 +1,4 @@
-import { Component, Event, h, Prop, Watch } from '@stencil/core';
+import { Component, Event, h, Prop, Watch } from "@stencil/core";
 export class EzSearch {
   constructor() {
     /**
@@ -8,11 +8,11 @@ export class EzSearch {
     /**
    * Ajusta a opção de mostrar o "value" ao selecionar uma opção.
    */
-    this.showselectedvalue = true;
+    this.showSelectedValue = true;
     /**
      * Ajusta a opção de mostrar o "value" para cada opção.
      */
-    this.showoptionvalue = true;
+    this.showOptionValue = true;
   }
   updateValue() {
     if (this._comboElement) {
@@ -25,7 +25,7 @@ export class EzSearch {
     this.ezChange.emit(evt.detail);
   }
   render() {
-    return (h("ez-combo-box", { ref: elem => this._comboElement = elem, value: this.value, label: this.label, enabled: this.enabled, errorMessage: this.errorMessage, optionLoader: this.optionloader, searchMode: true, onEzChange: evt => this.onComboChange(evt), showSelectedValue: this.showselectedvalue, showOptionValue: this.showoptionvalue }));
+    return (h("ez-combo-box", { ref: elem => this._comboElement = elem, value: this.value, label: this.label, enabled: this.enabled, errorMessage: this.errorMessage, optionLoader: this.optionLoader, searchMode: true, onEzChange: evt => this.onComboChange(evt), showSelectedValue: this.showSelectedValue, showOptionValue: this.showOptionValue }));
   }
   ;
   static get is() { return "ez-search"; }
@@ -111,7 +111,7 @@ export class EzSearch {
       "attribute": "error-message",
       "reflect": true
     },
-    "optionloader": {
+    "optionLoader": {
       "type": "unknown",
       "mutable": false,
       "complexType": {
@@ -130,7 +130,7 @@ export class EzSearch {
         "text": "Fun\u00E7\u00E3o respons\u00E1vel por carregar as op\u00E7\u00F5es dinamicamente"
       }
     },
-    "showselectedvalue": {
+    "showSelectedValue": {
       "type": "boolean",
       "mutable": false,
       "complexType": {
@@ -144,11 +144,11 @@ export class EzSearch {
         "tags": [],
         "text": "Ajusta a op\u00E7\u00E3o de mostrar o \"value\" ao selecionar uma op\u00E7\u00E3o."
       },
-      "attribute": "showselectedvalue",
+      "attribute": "show-selected-value",
       "reflect": false,
       "defaultValue": "true"
     },
-    "showoptionvalue": {
+    "showOptionValue": {
       "type": "boolean",
       "mutable": false,
       "complexType": {
@@ -162,7 +162,7 @@ export class EzSearch {
         "tags": [],
         "text": "Ajusta a op\u00E7\u00E3o de mostrar o \"value\" para cada op\u00E7\u00E3o."
       },
-      "attribute": "showoptionvalue",
+      "attribute": "show-option-value",
       "reflect": false,
       "defaultValue": "true"
     }