@sankhyalabs/ezui 1.1.89 → 1.1.92

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-form/store/form.slice.js

@@ -20,7 +20,7 @@ export function loadMetadata(formMetadata) {
 export function changeTab(currentSheet) {
   return {
     type: FormActions.CHANGE_TAB,
-    payload: currentSheet
+    payload: currentSheet.tabKey
   };
 }
 ///////////////////////////////    SELECTORS    ///////////////////////////////

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

@@ -112,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) {
@@ -152,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,

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

@@ -109,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", iconName: "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 },

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

@@ -249,7 +249,7 @@ export class GridConfig {
           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("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") })))),

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);

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

@@ -3,12 +3,10 @@ export class EzTabselector {
   constructor() {
     this.setFocusedParam = (ev) => {
       if (ev.key === "Enter") {
-        this.selectedIndex = this.focusedIndex;
-        this.focusedIndex = undefined;
-        this.selectedTab = this._processedTabs[this.selectedIndex]["tabKey"];
-        this.handleTabClick(this.selectedTab, parseInt(this.selectedIndex));
+        const selectedTab = this._processedTabs[this._focusedIndex];
+        this.handleTabClick(selectedTab);
         ev.preventDefault();
-        this.setFocusedTab(this.selectedIndex);
+        this.setFocusedTab(selectedTab.index);
       }
       else if (ev.key === "ArrowLeft" || ev.key === "ArrowRight") {
         let operator = undefined;
@@ -21,48 +19,46 @@ export class EzTabselector {
         else {
           return;
         }
-        if (this.focusedIndex === undefined) {
+        if (this._focusedIndex === undefined) {
           if (operator === false) {
-            this.focusedIndex = this.selectedIndex !== undefined ? (parseInt(this.selectedIndex) - 1).toString() : undefined;
+            this._focusedIndex = this.selectedIndex !== undefined ? this.selectedIndex - 1 : undefined;
           }
           else {
-            this.focusedIndex = this.selectedIndex !== undefined ? (parseInt(this.selectedIndex) + 1).toString() : undefined;
+            this._focusedIndex = this.selectedIndex !== undefined ? this.selectedIndex + 1 : undefined;
           }
         }
         else {
           if (operator === false) {
-            this.focusedIndex = (parseInt(this.focusedIndex) - 1).toString();
+            this._focusedIndex = this._focusedIndex - 1;
           }
           else {
-            this.focusedIndex = (parseInt(this.focusedIndex) + 1).toString();
+            this._focusedIndex = this._focusedIndex + 1;
           }
         }
-        if (parseInt(this.focusedIndex) < 0) {
-          this.focusedIndex = "0";
+        if (this._focusedIndex < 0) {
+          this._focusedIndex = 0;
         }
-        else if (parseInt(this.focusedIndex) > this._processedTabs.length - 1) {
-          this.focusedIndex = (this._processedTabs.length - 1).toString();
+        else if (this._focusedIndex > this._processedTabs.length - 1) {
+          this._focusedIndex = this._processedTabs.length - 1;
         }
-        this.setFocusedBtn(true, this.focusedIndex);
-        this.setFocusedTab(this.focusedIndex);
-        this.ezChange.emit(this.selectedTab);
+        this.setFocusedBtn(true, this._focusedIndex);
+        this.setFocusedTab(this._focusedIndex);
       }
       else if (ev.key === "Tab" || ev.key === "Escape") {
-        this.focusedIndex = undefined;
-        this.selectedTab = this._processedTabs[this.selectedIndex]["tabKey"];
-        this.handleTabClick(this.selectedTab, parseInt(this.selectedIndex));
+        const currentTab = this._processedTabs[this.selectedIndex];
+        this._focusedIndex = undefined;
+        this.handleTabClick(currentTab);
         ev.preventDefault();
         this.setFocusedTab(this.selectedIndex);
       }
-      // this.setFocusedTab();
     };
   }
-  handleTabClick(tab, index) {
-    this.selectedIndex = index.toString();
-    this.focusedIndex = undefined;
-    this.selectedTab = tab;
-    this.ezChange.emit(this.selectedTab);
-    this.setFocusedBtn(false, this.selectedIndex);
+  handleTabClick(tab) {
+    this.selectedIndex = tab.index;
+    this._focusedIndex = undefined;
+    this.selectedTab = tab.tabKey;
+    this.ezChange.emit(tab);
+    this.setFocusedBtn(false, tab.index);
   }
   componentWillRender() {
     if (!this._processedTabs) {
@@ -70,16 +66,16 @@ export class EzTabselector {
       if (this.tabs) {
         this.tabs.split(",").forEach((label) => {
           label = label.trim();
-          this._processedTabs.push(new Tab(label, label));
+          this._processedTabs.push({ label, tabKey: label, index: this._processedTabs.length });
         });
       }
       this._hostElem.querySelectorAll("ez-tab").forEach((elem) => {
         const tabKey = elem.getAttribute("tabKey");
         const label = elem.getAttribute("label");
-        const t = new Tab(label, tabKey);
+        const t = { label, tabKey, index: this._processedTabs.length };
         const content = elem.firstChild;
         if (content) {
-          content.setAttribute("slot", "tab" + this._processedTabs.length);
+          content.setAttribute("slot", "tab" + t.index);
           this._hostElem.appendChild(content);
         }
         this._processedTabs.push(t);
@@ -181,12 +177,12 @@ export class EzTabselector {
       h("div", { class: "scroll", ref: (el) => this._scrollContainer = el, onScroll: () => this.domScrollHandler(), onKeyDown: (ev) => this.setFocusedParam(ev) }, this._processedTabs.map((tab, index) => {
         const labelStyle = { "min-width": this.getTextWidth(tab.label) };
         const tabId = "tab" + index;
-        const isSelected = index === parseInt(this.selectedIndex) || (this.selectedTab && tab.tabKey === this.selectedTab);
+        const isSelected = index === this.selectedIndex || (this.selectedTab && tab.tabKey === this.selectedTab);
         if (isSelected) {
           this.selectedTab = tab.tabKey;
-          this.selectedIndex = index.toString();
+          this.selectedIndex = index;
         }
-        return h("button", { id: tabId, class: `tab${isSelected ? " is-active" : ""}`, onClick: () => this.handleTabClick(tab.tabKey, index), style: labelStyle },
+        return h("button", { id: tabId, class: `tab${isSelected ? " is-active" : ""}`, onClick: () => this.handleTabClick(tab), style: labelStyle },
           h("span", { class: "tab-label", title: tab.label }, tab.label),
           h("slot", { name: tabId, onSlotchange: (ev) => { this.handleSlotChange(ev); } }));
       })),
@@ -202,11 +198,11 @@ export class EzTabselector {
   }; }
   static get properties() { return {
     "selectedIndex": {
-      "type": "string",
+      "type": "number",
       "mutable": true,
       "complexType": {
-        "original": "string",
-        "resolved": "string",
+        "original": "number",
+        "resolved": "number",
         "references": {}
       },
       "required": false,
@@ -261,19 +257,17 @@ export class EzTabselector {
       "composed": true,
       "docs": {
         "tags": [],
-        "text": "Evento emitido ao clicar para abrir o popup (ezChange)."
+        "text": "Evento emitido ao clicar para abrir o popup (ezChange).\nO detail desse evento carrega tanto o tabKey quanto o index da aba\nselecionada."
       },
       "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
+        "original": "Tab",
+        "resolved": "Tab",
+        "references": {
+          "Tab": {
+            "location": "local"
+          }
+        }
       }
     }]; }
   static get elementRef() { return "_hostElem"; }
 }
-class Tab {
-  constructor(label, tabKey) {
-    this.label = label;
-    this.tabKey = tabKey;
-  }
-}