@sankhyalabs/ezui 1.1.87 → 1.1.90

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

@@ -12,7 +12,7 @@
   /*@doc Define a cor de fundo do corpo da hora do calendário.*/
   --ez-calendar__Time--background-color: var(--background--xlight, #FAFAFA);
   /*@doc Define o espaçamento do corpo do calendário.*/
-  --ez-calendar__body--padding: var(--space--medium, 12px);
+  --ez-calendar__body--padding: var(--space--medium, 12px) var(--space--small, 6px) ;
   /*@doc Define o raio da borda do corpo do calendário.*/
   --ez-calendar__body--border-radius: var(--border--radius-medium, 12px);
   /*@doc Define a sombra do corpo do calendário.*/
@@ -20,7 +20,7 @@
 
   /* cal__header */
   /*@doc Define a espessura da borda inferior do header.*/
-  --ez-calendar__header-line--stroke: 2px;
+  --ez-calendar__header-line--stroke: 1px;
   /*@doc Define a cor da borda inferior do header.*/
   --ez-calendar__header-line--color: var(--color--strokes, #C0C0C0);
 
@@ -40,17 +40,19 @@
 
   /* cell */
   /*@doc Define o espaçamento vertical entre as células.*/
-  --ez-calendar__cell--margin: 0px var(--space--small, 12px);
+  --ez-calendar__cell--margin: 0px 1.5px;
   /*@doc Define a largura das células.*/
   --ez-calendar__cell--width: var(--space--large, 24px);
   /*@doc Define o espaçamento horizontal entre as células.*/
-  --ez-calendar__cell--padding: var(--space--extra-small, 3px) 0px;
+  --ez-calendar__cell--padding: 1.5px 0px;
   /*@doc Define o raio da borda das células.*/
   --ez-calendar__cell--border-radius: var(--border--radius-small, 6px);
   /*@doc Define a cor de fundo das células.*/
-  --ez-calendar__cell--over--background-color: var(--color--strokes, #E2F4EF);
+  --ez-calendar__cell--over--background-color: var(--color--primary, #E2F4EF);
+  /*@doc Define a cor de do texto das células.*/
+  --ez-calendar__cell--over--color: var(--color--primary-300, #008561);
   /*@doc Define a cor do texto para células secundárias (fora do mês selecionado).*/
-  --ez-calendar__cell--outset--color: var(--color--strokes, #C0C0C0);
+  --ez-calendar__cell--outset--color: var(--color--disable-primary, #E5EAF0);
   /*@doc Define a cor de fundo das células selecionadas.*/
   --ez-calendar__cell--selected--background-color: var(--color--primary, #008561);
   /*@doc Define a cor do texto da célula selecionada.*/
@@ -60,7 +62,7 @@
   /*@doc Define a cor do texto do botão "Hoje".*/
   --ez-calendar__btn-today--color: var(--color--primary);
   /*@doc Define a cor de fundo do botão "Hoje" quando o cursor está sobre ele.*/
-  --ez-calendar__btn-today--hover--background-color: var(--color--strokes, #E2F4EF);
+  --ez-calendar__btn-today--hover--background-color: var(--color--primary-300, #E2F4EF);
   /*@doc Define o raio da borda do botão "Hoje".*/
   --ez-calendar__btn-today--border-radius: var(--border--radius-small, 6px);
 
@@ -90,8 +92,8 @@
   /*private*/
   display: flex;
   justify-content: space-between;
-  padding-bottom: var(--space--medium, 12px);
-  margin: var(--space--small, 6px) var(--space--, 12px);
+  padding-bottom: var(--space--small, 6px);
+  margin: 0px var(--space--, 12px) var(--space--small, 6px) var(--space--, 12px);
 
   /*public*/
   font-family: var(--ez-calendar--font-family);
@@ -140,8 +142,8 @@
 
 .calendar__lbl-month {
   /*private*/
-  font-weight: var(--text-weight--large, 600);
-  font-size: var(--title--medium, 16px);
+  font-weight: var(--text-weight--extra-large, 700);
+  font-size: var(--title--small, 14px);
 
   /*public*/
   font-family: var(--ez-calendar--font-family);
@@ -162,7 +164,7 @@
   justify-content: center;
   align-content: center;
   cursor: pointer;
-  font-size: var(--text--small, 12px);
+  font-size: var(--text--extra-small, 10px);
 
   /*public*/
   font-family: var(--ez-calendar--font-family);
@@ -178,6 +180,7 @@
 .calendar__cell:hover {
   /*public*/
   background-color: var(--ez-calendar__cell--over--background-color);
+  color: var(--ez-calendar__cell--over--color);
 }
 
 .calendar__cell--secondary {
@@ -208,11 +211,6 @@
   color: var(--ez-calendar__cell--selected--color);
 }
 
-.calendar__body {
-  /*private*/
-  padding: var(--space--small, 6px) 0px;
-}
-
 .calendar__footer {
   /*private*/
   display: flex;
@@ -225,8 +223,8 @@
   background-color: unset;
   cursor: pointer;
   font-weight: var(--text-weight--large, 600);
-  font-size: var(--title--small);
-  padding: var(--space--extra-small, 6px);
+  font-size: var(--title--extra-small, 12px);
+  padding: 0px;
 
   /*public*/
   font-family: var(--ez-calendar--font-family);
@@ -249,9 +247,7 @@ section{
   margin-left: -10px;
   display: flex;
   flex-direction: column;
-  padding: 12px 6px;
-  padding-left: 16px;
-  padding-bottom: 0px;
+  padding: 12px 0px 0px 10px;
 
   /*public*/
   /*TODO Criar variavel para color o calendar_time var(--ez-calendar__body-time--background-color)*/
@@ -261,7 +257,7 @@ section{
   box-shadow: var(--ez-calendar__body--shadow);
 }
 .calendar__column {
-  height: 180px;
+  height: 136px;
   padding: 0px;
   margin: 0px;
   overflow: auto;
@@ -276,14 +272,14 @@ section{
 
 .calendarTime__header{
   /*private*/
-  padding-left: 6px;
-  padding-right: 6px;
+  padding-left: var(--space--small, 6px);
+  padding-right: var(--space--small, 6px);
   display: flex;
   justify-content: space-between;
-  padding-bottom: var(--space--medium, 12px);
-  margin: var(--space--small, 6px) var(--space--, 12px);
-  font-weight: var(--text-weight--large, 600);
-  font-size: var(--title--medium, 16px);
+  padding-bottom: var(--space--small, 6px);
+  margin: 0px var(--space--, 12px) var(--space--small, 6px) var(--space--, 12px);
+  font-weight: var(--text-weight--extra-large, 700);
+  font-size: var(--title--small, 14px);
 
   
   /*public*/
@@ -298,9 +294,17 @@ section{
 
 .separatorTime{
   color: #A2ABB9;
+  padding: 0px 1px;
+  line-height: 16px;
+  font-size: 17px;
+  font-weight: normal;
 }
 
 .endHidden {
   -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 48px), transparent 100%);
 }
 
+.calendar__column .calendar__cell{
+  margin: 0px;
+  padding: 1.5px 1.5px;
+}

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

@@ -7,7 +7,7 @@ export class EzCalendar {
     this._weekDayLabels = ["D", "S", "T", "Q", "Q", "S", "S"];
     this._monthLabels = ["Janeiro", "Fevereiro", "Março", "Abril", "Maio", "Junho", "Julho", "Agosto", "Setembro", "Outubro", "Novembro", "Dezembro"];
     this._hoursLabel = ["00", "01", "02", "03", "04", "05", "06", "07", "08", "09", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "20", "21", "22", "23"];
-    this._minutosLabel = ["00", "01", "02", "03", "04", "05", "06", "07", "08", "09", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "20", "21", "22", "23", "25", "26", "27", "28", "29", "30", "31", "32", "33", "34", "35", "36", "37", "38", "39", "40", "41", "42", "43", "44", "45", "46", "47", "48", "49", "50", "51", "52", "53", "54", "55", "56", "57", "58", "59"];
+    this._minutosLabel = ["00", "01", "02", "03", "04", "05", "06", "07", "08", "09", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "20", "21", "22", "23", "24", "25", "26", "27", "28", "29", "30", "31", "32", "33", "34", "35", "36", "37", "38", "39", "40", "41", "42", "43", "44", "45", "46", "47", "48", "49", "50", "51", "52", "53", "54", "55", "56", "57", "58", "59"];
     /**
      * A data selecionada no calendário
      */
@@ -38,6 +38,7 @@ export class EzCalendar {
       window.requestAnimationFrame(() => {
         this._box.scrollIntoView({ behavior: "smooth", block: "nearest", inline: "nearest" });
       });
+      this.scroll();
     }
   }
   /**
@@ -140,11 +141,17 @@ export class EzCalendar {
     this.updateScroll(this._secondsScroll);
   }
   componentDidLoad() {
+    this.scroll();
+  }
+  scroll() {
     if (this.time || this.showSeconds) {
       this._hoursScroll.scrollTop = this._hoursSelect.offsetTop - 64;
       this._minutesScroll.scrollTop = this._minutesSelect.offsetTop - 64;
+      this.updateScroll(this._hoursScroll);
+      this.updateScroll(this._minutesScroll);
       if (this.showSeconds) {
         this._secondsScroll.scrollTop = this._secondsSelect.offsetTop - 64;
+        this.updateScroll(this._secondsScroll);
       }
     }
   }
@@ -193,7 +200,7 @@ export class EzCalendar {
                 h("div", { class: "separatorTime" }, ":"),
               this.showSeconds &&
                 h("div", null, "S")),
-            h("div", { class: "calendar__body ", style: { display: 'flex', paddingLeft: '6px', paddingRight: '6px' } },
+            h("div", { class: "calendar__body ", style: { display: 'flex', paddingLeft: '12px', paddingRight: '12px' } },
               h("div", { class: "calendar__column", ref: elem => this._hoursScroll = elem, onScroll: () => this.updateScroll(this._hoursScroll) }, this._hoursLabel.map((offset, index) => {
                 if (index === this.value.getHours()) {
                   return (h("div", { style: { display: 'flex' }, ref: elem => this._hoursSelect = elem },

package/dist/collection/components/ez-grid/controller/DataUnitBridge.js

@@ -14,11 +14,13 @@ export default class DataUnitBridge {
   }
   buildColumnDefs() {
     const columnDefs = [];
-    this._dataUnit.metadata.fields.forEach(f => {
-      if (f.visible !== false) {
-        columnDefs.push({ label: f.label, name: f.name });
-      }
-    });
+    if (this._dataUnit.metadata) {
+      this._dataUnit.metadata.fields.forEach(f => {
+        if (f.visible !== false) {
+          columnDefs.push({ label: f.label, name: f.name, userInterface: f.userInterface, options: this._dataUnit.getField(f.name).properties.options });
+        }
+      });
+    }
     return columnDefs;
   }
 }

package/dist/collection/components/ez-grid/controller/ag-grid/AgGridController.js

@@ -13,6 +13,7 @@ export default class AgGridController {
       this._columnStateChangeCallback = options.onColumnStateChange;
       this._selectionChangeCallback = options.onSelectionChange;
       this._paginationChangeCallback = options.onPaginationChange;
+      this._doubleClickCallBack = options.onDoubleClick;
       this._multipleSelection = options.allowMultipleSelection;
       this._pageSize = options.pageSize;
       this._serverURL = options.serverURL;
@@ -52,6 +53,7 @@ export default class AgGridController {
     opt.onColumnVisible = e => this.onCallStateChange("visibleChange", e);
     opt.onSelectionChanged = e => this.onSelectionChange(e);
     opt.onPaginationChanged = () => this.onPaginationChange();
+    opt.onRowDoubleClicked = evt => this.onRowDoubleClick(evt);
   }
   setOptionsPagination(opt) {
     opt.pagination = (this._pageSize > -1);
@@ -110,7 +112,13 @@ export default class AgGridController {
     if (this._grid === undefined) {
       throw new Error("Erro interno: Grid ainda não inicializado.");
     }
-    this._gridOptions.columnApi.applyColumnState({ state: state.map(s => this.buildColState(s)) });
+    //TODO neste ponto estamos utilizando um método descontinuado, 
+    //pelo fato de que o applyColumnState não reordena as colunas conforme 
+    //o estado passado.
+    //https://stackoverflow.com/questions/51488241/ag-grid-how-to-save-and-reload-column-order
+    //Assim que for corrigido o applyColumnState devemos substituir o setColumnState por ele.
+    // this._gridOptions.columnApi.applyColumnState({ state: state.map(s => this.buildColState(s)) });
+    this._gridOptions.columnApi.setColumnState(state.map(s => this.buildColState(s)));
   }
   getColumnsState() {
     if (this._grid === undefined) {
@@ -150,9 +158,44 @@ export default class AgGridController {
       resizable: true,
       headerComponentParams: {
         template: HeaderColumnTemplate
+      },
+      valueFormatter: params => {
+        return this.getFormatterByColumn(params, source);
       }
     };
   }
+  getFormatterByColumn(params, source) {
+    var _a, _b;
+    if ((source === null || source === void 0 ? void 0 : source.userInterface) === "OPTIONSELECTOR" && source.options) {
+      const prop = source === null || source === void 0 ? void 0 : source.options;
+      let options;
+      if (typeof prop === "string") {
+        const parsed = JSON.parse(prop);
+        options = Object.keys(parsed).map(key => { return { value: key, label: parsed[key] }; });
+      }
+      else {
+        options = prop;
+      }
+      let optionSelected;
+      options.forEach((option) => {
+        if (option.value == params.value) {
+          optionSelected = option;
+        }
+      });
+      return optionSelected === null || optionSelected === void 0 ? void 0 : optionSelected.label;
+    }
+    if ((source === null || source === void 0 ? void 0 : source.userInterface) === "SWITCH") {
+      if ((params === null || params === void 0 ? void 0 : params.value) === "S" || (params === null || params === void 0 ? void 0 : params.value) === true) {
+        return "Sim";
+      }
+      else if ((params === null || params === void 0 ? void 0 : params.value) === "N" || (params === null || params === void 0 ? void 0 : params.value) === false) {
+        return "Não";
+      }
+    }
+    if ((source === null || source === void 0 ? void 0 : source.userInterface) === "SEARCH") {
+      return ((_a = params === null || params === void 0 ? void 0 : params.value) === null || _a === void 0 ? void 0 : _a.value) + " - " + ((_b = params === null || params === void 0 ? void 0 : params.value) === null || _b === void 0 ? void 0 : _b.label);
+    }
+  }
   buildColState(source) {
     return {
       colId: source.name,
@@ -195,6 +238,11 @@ export default class AgGridController {
       }
     }
   }
+  onRowDoubleClick(evt) {
+    if (this._doubleClickCallBack) {
+      this._doubleClickCallBack(evt.data);
+    }
+  }
   conditionalSet(host, attribute, value) {
     if (value !== null && value !== undefined && value !== false) {
       host[attribute] = value;

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

@@ -7,12 +7,17 @@
   --ezgrid__header--background-color: var(--background--xlight, #FFF)
 }
 
-.grid__header {
+.grid-header {
   /*private*/
   display: flex;
-  justify-content: flex-end;
+  justify-content: space-between;
   align-items: center;
 
   /*public*/
   background-color: var(--ezgrid__header--background-color);
+}
+
+.grid-header__container{
+  display: flex;
+  align-items: center;
 }

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

@@ -1,6 +1,5 @@
 import { Component, h, Host, Prop, Method, Event, State } from "@stencil/core";
 import AgGridController from "./controller/ag-grid/AgGridController";
-import { getSpritePath } from "../../utils/AssetsUtils";
 import DataUnitBridge from "./controller/DataUnitBridge";
 export class EzGrid {
   constructor() {
@@ -72,6 +71,9 @@ export class EzGrid {
         this._navigationLastRow = status.pageEnd;
         this._navigationTotalRows = status.totalRows;
       },
+      onDoubleClick: (row) => {
+        this.ezDoubleClick.emit(row);
+      },
       allowMultipleSelection: this.multipleSelection,
       pageSize: this.pageSize,
       serverURL: this.serverUrl,
@@ -89,8 +91,8 @@ export class EzGrid {
       h("div", { class: "text text--primary text--medium margin-right--medium" },
         h("strong", { class: "text text--primary text--medium" }, `${this._navigationFirstRow}-${this._navigationLastRow}`),
         ` de ${this._navigationTotalRows}`),
-      h("ez-button", { size: "small", image: getSpritePath("chevron-left"), class: "button--secondary margin-right--medium", mode: "icon", enabled: this._navigationHasPrevious, onClick: () => this._gridController.previousPage(), label: "P\u00E1gina anterior" }),
-      h("ez-button", { size: "small", image: getSpritePath("chevron-right"), class: "button--secondary margin-right--medium", mode: "icon", enabled: this._navigationHasNext, onClick: () => this._gridController.nextPage(), label: "Pr\u00F3xima P\u00E1gina" })
+      h("ez-button", { size: "small", iconName: "chevron-left", class: "button--secondary margin-right--medium", mode: "icon", enabled: this._navigationHasPrevious, onClick: () => this._gridController.previousPage(), label: "P\u00E1gina anterior" }),
+      h("ez-button", { size: "small", iconName: "chevron-right", class: "button--secondary margin-right--medium", mode: "icon", enabled: this._navigationHasNext, onClick: () => this._gridController.nextPage(), label: "Pr\u00F3xima P\u00E1gina" })
     ];
   }
   applyConfig(cols) {
@@ -107,9 +109,12 @@ export class EzGrid {
   }
   render() {
     return (h(Host, null,
-      h("div", { class: "box box--shadow padding--medium grid__header margin-bottom--small" },
-        this.getPaginationControl(),
-        h("ez-button", { size: "small", image: getSpritePath("settings"), class: "button--secondary", mode: "icon", onClick: () => { this.openConfig(); } })),
+      h("div", { class: "box box--shadow padding--medium grid-header margin-bottom--small" },
+        h("div", { class: "grid-header__container" },
+          h("slot", { name: "leftButtons" })),
+        h("div", { class: "grid-header__container" },
+          this.getPaginationControl(),
+          h("ez-button", { size: "small", iconName: "settings", class: "button--secondary", mode: "icon", onClick: () => { this.openConfig(); } }))),
       h("div", { class: "grid__container ag-sankhya-theme", ref: elem => this._container = elem }),
       h("div", { class: "grid__footer" }),
       h("ez-modal", { modalSize: "small", closeEsc: true, closeOutsideClick: true, opened: this._popUpVisible, onEzCloseModal: () => this._popUpVisible = false },
@@ -245,6 +250,21 @@ export class EzGrid {
           }
         }
       }
+    }, {
+      "method": "ezDoubleClick",
+      "name": "ezDoubleClick",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Evento disparado com o duplo clique de uma linha"
+      },
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      }
     }]; }
   static get methods() { return {
     "setColumnsDef": {

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

@@ -36,4 +36,136 @@ svg {
 .x-large {
   width: 30px;
   height: 30px;
-}
+}
+/*
+  START CSS GENERATED BY EZ-DESIGN ICONS, SEE MORE AT ez-design\scripts\fontsGenerator.js.
+  WHEN ADD NEW ICONS THIS CSS NEED TO BE UPDATED
+*/
+[class^="ez-icon-"], [class*=" ez-icon-"] {
+  font-family: 'ez-icons' !important;
+  font-size: 16px;
+  font-style:normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.ez-icon-account-outline:before { content: "\ea01"; }
+.ez-icon-account:before { content: "\ea02"; }
+.ez-icon-alert-circle-inverted:before { content: "\ea03"; }
+.ez-icon-alert-circle:before { content: "\ea04"; }
+.ez-icon-alert-mail:before { content: "\ea05"; }
+.ez-icon-alert-outline:before { content: "\ea06"; }
+.ez-icon-alert-popup:before { content: "\ea07"; }
+.ez-icon-apps:before { content: "\ea08"; }
+.ez-icon-arrow_back:before { content: "\ea09"; }
+.ez-icon-bell-inverted:before { content: "\ea0a"; }
+.ez-icon-bell:before { content: "\ea0b"; }
+.ez-icon-business-center:before { content: "\ea0c"; }
+.ez-icon-calendar-text:before { content: "\ea0d"; }
+.ez-icon-calendar:before { content: "\ea0e"; }
+.ez-icon-check-circle-inverted:before { content: "\ea0f"; }
+.ez-icon-check-circle:before { content: "\ea10"; }
+.ez-icon-check:before { content: "\ea11"; }
+.ez-icon-chevron-down:before { content: "\ea12"; }
+.ez-icon-chevron-left:before { content: "\ea13"; }
+.ez-icon-chevron-right:before { content: "\ea14"; }
+.ez-icon-chevron-up:before { content: "\ea15"; }
+.ez-icon-circle--medium:before { content: "\ea16"; }
+.ez-icon-circle:before { content: "\ea17"; }
+.ez-icon-clipboard:before { content: "\ea18"; }
+.ez-icon-close-circle-inverted:before { content: "\ea19"; }
+.ez-icon-close-circle:before { content: "\ea1a"; }
+.ez-icon-close:before { content: "\ea1b"; }
+.ez-icon-comment-inverted:before { content: "\ea1c"; }
+.ez-icon-comment:before { content: "\ea1d"; }
+.ez-icon-configuration:before { content: "\ea1e"; }
+.ez-icon-copy:before { content: "\ea1f"; }
+.ez-icon-crop:before { content: "\ea20"; }
+.ez-icon-delete:before { content: "\ea21"; }
+.ez-icon-description:before { content: "\ea22"; }
+.ez-icon-dot-notification:before { content: "\ea23"; }
+.ez-icon-dots-horizontal:before { content: "\ea24"; }
+.ez-icon-dots-vertical:before { content: "\ea25"; }
+.ez-icon-drag-indicator:before { content: "\ea26"; }
+.ez-icon-edit-file:before { content: "\ea27"; }
+.ez-icon-edit-table:before { content: "\ea28"; }
+.ez-icon-edit-time:before { content: "\ea29"; }
+.ez-icon-edit:before { content: "\ea2a"; }
+.ez-icon-email-inverted:before { content: "\ea2b"; }
+.ez-icon-email:before { content: "\ea2c"; }
+.ez-icon-error-octagon:before { content: "\ea2d"; }
+.ez-icon-expand:before { content: "\ea2e"; }
+.ez-icon-eye-off:before { content: "\ea2f"; }
+.ez-icon-eye:before { content: "\ea30"; }
+.ez-icon-favorite:before { content: "\ea31"; }
+.ez-icon-file-download:before { content: "\ea32"; }
+.ez-icon-file-upload:before { content: "\ea33"; }
+.ez-icon-filter:before { content: "\ea34"; }
+.ez-icon-find-file:before { content: "\ea35"; }
+.ez-icon-find-page:before { content: "\ea36"; }
+.ez-icon-format-color-fill:before { content: "\ea37"; }
+.ez-icon-help-circle-outline:before { content: "\ea38"; }
+.ez-icon-help-inverted:before { content: "\ea39"; }
+.ez-icon-help:before { content: "\ea3a"; }
+.ez-icon-home:before { content: "\ea3b"; }
+.ez-icon-language:before { content: "\ea3c"; }
+.ez-icon-launch:before { content: "\ea3d"; }
+.ez-icon-lightbulb:before { content: "\ea3e"; }
+.ez-icon-list:before { content: "\ea3f"; }
+.ez-icon-loading:before { content: "\ea40"; }
+.ez-icon-lock-outline:before { content: "\ea41"; }
+.ez-icon-lock:before { content: "\ea42"; }
+.ez-icon-menu:before { content: "\ea43"; }
+.ez-icon-minus-circle-inverted:before { content: "\ea44"; }
+.ez-icon-minus:before { content: "\ea45"; }
+.ez-icon-money-off:before { content: "\ea46"; }
+.ez-icon-money:before { content: "\ea47"; }
+.ez-icon-north-west:before { content: "\ea48"; }
+.ez-icon-pause:before { content: "\ea49"; }
+.ez-icon-payments:before { content: "\ea4a"; }
+.ez-icon-play:before { content: "\ea4b"; }
+.ez-icon-plus-circle-inverted:before { content: "\ea4c"; }
+.ez-icon-plus-circle:before { content: "\ea4d"; }
+.ez-icon-plus:before { content: "\ea4e"; }
+.ez-icon-power:before { content: "\ea4f"; }
+.ez-icon-push-pin:before { content: "\ea50"; }
+.ez-icon-restore:before { content: "\ea51"; }
+.ez-icon-return:before { content: "\ea52"; }
+.ez-icon-rotate:before { content: "\ea53"; }
+.ez-icon-save:before { content: "\ea54"; }
+.ez-icon-search:before { content: "\ea55"; }
+.ez-icon-settings-inverted:before { content: "\ea56"; }
+.ez-icon-settings:before { content: "\ea57"; }
+.ez-icon-share:before { content: "\ea58"; }
+.ez-icon-shield:before { content: "\ea59"; }
+.ez-icon-south-east:before { content: "\ea5a"; }
+.ez-icon-success-circle:before { content: "\ea5b"; }
+.ez-icon-sync:before { content: "\ea5c"; }
+.ez-icon-table:before { content: "\ea5d"; }
+.ez-icon-timer-outline:before { content: "\ea5e"; }
+.ez-icon-user-circle:before { content: "\ea5f"; }
+.ez-icon-warning-minus:before { content: "\ea60"; }
+.ez-icon-warning-triangle:before { content: "\ea61"; }
+/*
+  END CSS GENERATED BY EZ-DESIGN ICONS
+*/
+
+.x-small--font {
+  font-size: 12px;
+}
+
+.small--font {
+  font-size: 16px;
+}
+
+.medium--font {
+  font-size: 20px;
+}
+
+.large--font {
+  font-size: 24px;
+}
+
+.x-large--font {
+  font-size: 30px;
+}

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

@@ -1,3 +1,4 @@
+import { StringUtils } from '@sankhyalabs/core';
 import { Component, h, Host, Prop } from '@stencil/core';
 export class EzIcon {
   constructor() {
@@ -9,13 +10,23 @@ export class EzIcon {
   isSprite() {
     return this.href && this.href.indexOf('#') > -1;
   }
+  getIconClassName() {
+    return `ez-icon-${this.iconName}`;
+  }
+  getIconContent() {
+    if (this.isSprite()) {
+      return h("svg", { class: this.size, role: "img" },
+        h("use", { xlinkHref: this.href }));
+    }
+    else if (!StringUtils.isEmpty(this.iconName)) {
+      return h("span", { class: `icon-content ${this.getIconClassName()}  ${this.size}--font` });
+    }
+    else {
+      return h("img", { class: this.size, src: this.href });
+    }
+  }
   render() {
-    return (h(Host, null, this.isSprite()
-      ?
-        h("svg", { class: this.size, role: "img" },
-          h("use", { xlinkHref: this.href }))
-      :
-        h("img", { class: this.size, src: this.href })));
+    return (h(Host, null, this.getIconContent()));
   }
   static get is() { return "ez-icon"; }
   static get encapsulation() { return "shadow"; }
@@ -60,6 +71,23 @@ export class EzIcon {
       },
       "attribute": "href",
       "reflect": true
+    },
+    "iconName": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Nome do icone dispon\u00EDvel no pacote de fontes [ez-icons](https://sankhyalabs-storybook.herokuapp.com/themes/default/icons/fonts/index.html)"
+      },
+      "attribute": "icon-name",
+      "reflect": true
     }
   }; }
 }

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

@@ -162,7 +162,8 @@ export class EzList {
           }
         }
         else {
-          newList.find(group => group.group == dragEndItem.groupName).items.splice(dragEndItem.index, 0, this._dragStartItem.item);
+          let indexForAdd = (dragEndItem.index > this._dragStartItem.index) ? dragEndItem.index - 1 : dragEndItem.index;
+          newList.find(group => group.group == dragEndItem.groupName).items.splice(indexForAdd, 0, this._dragStartItem.item);
         }
         this._listGroupItems = newList;
         this.ezChange.emit(this._listGroupItems);