@sankhyalabs/ezui 1.1.72 → 1.1.75

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"
     }

package/dist/collection/components/ez-text-area/ez-text-area.css

@@ -1,54 +1,54 @@
 :host {
   /* dimensions */
   /*@doc Define a largura do componente.*/
-  --ta--width: 100%;
+  --text-area--width: 100%;
 
   /* general */
   /*@doc Define o raio da borda do input do componente.*/
-  --ta--border-radius: var(--border--radius-medium, 12px);
+  --text-area--border-radius: var(--border--radius-medium, 12px);
   /*@doc Define o tamanho da fonte do input e label do componente.*/
-  --ta--font-size: var(--text--medium, 14px);
+  --text-area--font-size: var(--text--medium, 14px);
   /*@doc Define a família da fonte do input, label e caixa de mensagem do componente.*/
-  --ta--font-family: var(--font-pattern, Arial);
+  --text-area--font-family: var(--font-pattern, Arial);
   /*@doc Define o peso da fonte do label do componente.*/
-  --ta--font-weight: var(--text-weight--large, 500);
+  --text-area--font-weight: var(--text-weight--large, 500);
   /*@doc Define a cor da fonte do input e label do componente.*/
-  --ta--color: var(--title--primary, #000);
+  --text-area--color: var(--title--primary, #000);
 
   /* input */
   /*@doc Define a cor de fundo do input.*/
-  --ta__input--background-color: var(--background--medium, #e0e0e0);
+  --text-area__input--background-color: var(--background--medium, #e0e0e0);
   /*@doc Define o estilo da borda do input.*/
-  --ta__input--border: var(--border--medium, 2px solid);
+  --text-area__input--border: var(--border--medium, 2px solid);
   /*@doc Define a cor da borda do input.*/
-  --ta__input--border-color: var(--ta__input--background-color);
+  --text-area__input--border-color: var(--text-area__input--background-color);
   /*no modo normal usamos a borda com a mesma cor do bg*/
   /*@doc Define a cor da borda do input quando focado.*/
-  --ta__input--focus--border-color: var(--color--primary, #008561);
+  --text-area__input--focus--border-color: var(--color--primary, #008561);
   /*@doc Define a cor de fundo do input quando desabilitado.*/
-  --ta__input--disabled--background-color: var(--color--disable-secondary, #F2F5F8);
+  --text-area__input--disabled--background-color: var(--color--disable-secondary, #F2F5F8);
   /*@doc Define a cor do texto do input.*/
-  --ta__input--disabled--color: var(--text--disable, #AFB6C0);
+  --text-area__input--disabled--color: var(--text--disable, #AFB6C0);
   /*@doc Define a cor da borda do input quando com erro.*/
-  --ta__input--error--border-color: #CC2936;
+  --text-area__input--error--border-color: #CC2936;
 
   /* message box */
   /*@doc Define o tamanho da fonte da mensagem abaixo do input.*/
-  --ta__message_box--font-size: var(--text--small, 12px);
+  --text-area__message_box--font-size: var(--text--small, 12px);
   /*@doc Define a cor da fonte da mensagem quando info.*/
-  --ta__message_box--info--color: var(--color--success, #22085d);
+  --text-area__message_box--info--color: var(--color--success, #22085d);
   /*@doc Define a cor da fonte da mensagem quando erro.*/
-  --ta__message_box--error--color: var(--color--error, #FF0000);
+  --text-area__message_box--error--color: var(--color--error, #FF0000);
 
   /* label */
   /*@doc Define o posicionamento do label.*/
-  --ta__label--floating--top: 6px;
+  --text-area__label--floating--top: 6px;
   /*@doc Define o espaçamento superior do label.*/
-  --ta__label--padding-top: 12px;
+  --text-area__label--padding-top: 12px;
   /*@doc Define o espaçamento esquerdo do label.*/
-  --ta__label--padding-left: 14px;
+  --text-area__label--padding-left: 14px;
   /*@doc Define o espaçamento direito do label.*/
-  --ta__label--padding-right: 12px;
+  --text-area__label--padding-right: 12px;
 
   /***************
   host style  
@@ -58,7 +58,7 @@
   flex-wrap: wrap;
   position: relative;
   /*public*/
-  width: var(--ta--width);
+  width: var(--text-area--width);
 }
 
 textarea {
@@ -68,9 +68,9 @@ textarea {
   margin-top: calc(var(--space--medium, 12px) + 4px);
   width: 100%;
   font-weight: var(--text-weight--large, 600);
-  font-family: var(--ta--font-family);
-  font-size: var(--ta--font-size);
-  color: var(--ta--color);
+  font-family: var(--text-area--font-family);
+  font-size: var(--text-area--font-size);
+  color: var(--text-area--color);
   padding: 0;
   background: none;
 }
@@ -83,7 +83,7 @@ textarea:focus {
 textarea:disabled {
   /*public*/
   background-color: transparent;
-  color: var(--ta__input--disabled--color);
+  color: var(--text-area__input--disabled--color);
 }
 
 .textarea {
@@ -94,19 +94,19 @@ textarea:disabled {
   padding-right: var(--space--extra-small);
 
   /*public*/
-  border-radius: var(--ta--border-radius);
-  border: var(--ta__input--border);
-  border-color: var(--ta__input--border-color);
-  background-color: var(--ta__input--background-color);
+  border-radius: var(--text-area--border-radius);
+  border: var(--text-area__input--border);
+  border-color: var(--text-area__input--border-color);
+  background-color: var(--text-area__input--background-color);
 }
 
 .textarea--focus {
-  border-color: var(--ta__input--focus--border-color);
+  border-color: var(--text-area__input--focus--border-color);
 }
 
 .textarea.hasError {
-  color: var(--ta--color);
-  border-color: var(--ta__input--error--border-color);
+  color: var(--text-area--color);
+  border-color: var(--text-area__input--error--border-color);
 }
 
 .message-box {
@@ -120,14 +120,14 @@ textarea:disabled {
   white-space: nowrap;
 
   /*public*/
-  font-family: var(--ta--font-family);
-  font-size: var(--ta__message_box--font-size);
-  color: var(--ta__message_box--info--color);
+  font-family: var(--text-area--font-family);
+  font-size: var(--text-area__message_box--font-size);
+  color: var(--text-area__message_box--info--color);
 }
 
 .hasError {
   /*public*/
-  color: var(--ta__message_box--error--color);
+  color: var(--text-area__message_box--error--color);
 }
 
 .textarea__label {
@@ -140,26 +140,26 @@ textarea:disabled {
   white-space: nowrap;
   -webkit-transition: font-size .05s, top .05s;
   transition: font-size .05s, top .05s;
-  width: calc(100% - var(--ta__label--padding-right));
-  left: var(--ta--space--medium);
+  width: calc(100% - var(--text-area__label--padding-right));
+  left: var(--text-area--space--medium);
 
   /*public*/
-  font-family: var(--ta--font-family);
-  font-size: var(--ta--font-size);
-  font-weight: var(--ta--font-weight);
-  color: var(--ta--color);
-  top: var(--ta__label--padding-top);
-  left: var(--ta__label--padding-left);
-  padding-right: var(--ta__label--padding-right);
+  font-family: var(--text-area--font-family);
+  font-size: var(--text-area--font-size);
+  font-weight: var(--text-area--font-weight);
+  color: var(--text-area--color);
+  top: var(--text-area__label--padding-top);
+  left: var(--text-area__label--padding-left);
+  padding-right: var(--text-area__label--padding-right);
 }
 
 .textarea__label--floated {
-  font-family: var(--ta--font-family);
+  font-family: var(--text-area--font-family);
   font-size: var(--text--extra-small);
   color: var(--text--primary);
-  top: var(--ta__label--floating--top);
+  top: var(--text-area__label--floating--top);
 }
 
 .textarea__label--disabled {
-  color: var(--ta__input--disabled--color);
+  color: var(--text-area__input--disabled--color);
 }

package/dist/collection/components/ez-time-input/ez-time-input.js

@@ -97,7 +97,7 @@ export class EzTimeInput {
   render() {
     return (h(Host, null,
       h("ez-text-input", { ref: (el) => this._inputElem = el, value: this.viewValue, enabled: this.enabled, label: this.label, onInput: () => { this.handleChange(); }, onFocusout: () => { this.handleFocusout(); }, errorMessage: this.errorMessage },
-        h("ez-icon", { slot: "leftIcon", href: getAssetPath("./assets/actions-sprite.svg") + "#timer-outline" }))));
+        h("ez-icon", { slot: "leftIcon", href: getAssetPath("../assets/actions-sprite.svg") + "#timer-outline" }))));
   }
   static get is() { return "ez-time-input"; }
   static get encapsulation() { return "shadow"; }