@sankhyalabs/ezui 1.1.91 → 1.1.94

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

@@ -37,6 +37,9 @@
   /*@doc Define a cor do texto da mensagem.*/
   --dialog__body--color: var(--text--primary, #626e82);
   
+  /* Ícones */
+  /*@doc Define a cor dos ícones dos indicadores de modo.*/
+  --dialog__icon--color: var(--text--inverted, #fff);
   /*@doc Define a cor de fundo dos indicadores do modo crítico.*/
   --dialog__critical--background-color: var(--color--alert-error-800, #BD0025);
   /*@doc Define a cor de fundo da lista de opções.*/
@@ -130,8 +133,17 @@ h2 {
 }
 
 .changeable__icon {
-  width: 15px;
-  height: 15px;
+  background: var(--dialog__warning--background-color);
+  color: var(--dialog__icon--color);
+  display: grid;
+  place-items: center;
+  width: 26px;
+  height: 26px;
+  border-radius: 50%;
+}
+
+.changeable__icon.critical{
+  background: var(--dialog__critical--background-color);
 }
 
 .title {

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

@@ -69,14 +69,12 @@ export class EzDialog {
             h("div", { class: "title__container" },
               h("div", { class: "title__box" },
                 this._currentMessage.icon ?
-                  h("svg", { class: "changeable__icon", role: "img" },
-                    h("use", { xlinkHref: this._currentMessage.icon }))
+                  h("ez-icon", { class: this._currentMessage.critical ? "changeable__icon critical" : "changeable__icon", size: "small", iconName: this._currentMessage.icon })
                   :
                     h("div", { class: this._currentMessage.critical ? "title-icon title-icon--critical" : "title-icon" }),
-                h("div", { class: "title title--label" },
-                  h("h2", null, this._currentMessage.title))),
+                h("div", { class: "title title--label", innerHTML: this._currentMessage.title })),
               h("button", { class: "btn-close", onClick: () => this.handleButtonClick(false) })),
-            h("div", { class: "message" }, this._currentMessage.message),
+            h("div", { class: "message", innerHTML: this._currentMessage.message }),
             this._currentMessage.confirm ?
               h("div", { class: "button-yes-no__container" },
                 h("ez-button", { class: "button__no", mode: "link", label: "N\u00E3o", onClick: () => this.handleButtonClick(false) }),

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

@@ -3,11 +3,26 @@ import { Grid } from "ag-grid-community";
 import gridTerms from "./i18n/pt-BR.js";
 import HeaderColumnTemplate from "./template/HeaderColumnTemplate.js";
 import DataSource from "./DataSource";
+import { DataType } from "@sankhyalabs/core";
+import { SortMode } from "@sankhyalabs/core/dist/dataunit/metadata/UnitMetadata";
 export default class AgGridController {
   constructor(enterprise) {
     this._menuItems = [];
     this._enterprise = enterprise;
   }
+  getSort() {
+    const sortedColumns = [];
+    this._gridOptions.api.getSortModel().forEach(({ colId, sort }) => {
+      if (sort) {
+        const field = this._dataUnit.getField(colId);
+        const mode = sort === "asc" ? SortMode.ASC : SortMode.DESC;
+        const sortField = field ? { field: field.name, dataType: field.dataType, mode } : { field: colId, dataType: DataType.TEXT, mode };
+        sortedColumns.push(sortField);
+      }
+    });
+    return sortedColumns;
+  }
+  ;
   initDatagrid(container, options) {
     if (this._grid === undefined) {
       this._columnStateChangeCallback = options.onColumnStateChange;
@@ -18,6 +33,7 @@ export default class AgGridController {
       this._pageSize = options.pageSize;
       this._serverURL = options.serverURL;
       this._dataUnit = options.dataUnit;
+      this._dataUnit.sortingProvider = this;
       this._gridOptions = {
         localeText: gridTerms,
         rowModelType: "serverSide",

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

@@ -59,6 +59,12 @@
   /* @doc Define a cor da borda pontilhada sobre os elementos da lista. */
   --ez-list__over--border--color: var(--color--primary, #008561);
 
+  /*@doc Define o espaçamento do container de itens arrastáveis .*/
+  --ez-list__draggable__list--padding-bottom: var(--space--small, 6px);
+
+  /*@doc Define a altura do container para arrasto para última posição .*/
+  --ez-list__last-droppable-space--height: var(--space--small, 6px);
+
   /*@doc Define o raio da borda da barra de rolagem do componente.*/
   --ez-list__draggable__scrollbar--border-radius: var(--border--radius-large, 24px);
   /*@doc Define a largura da barra de rolagem do componente.*/
@@ -75,9 +81,14 @@
   z-index: var(--ez-list__host--z-index);
 }
 
+p {
+  margin: 0;
+}
+
 .draggable {
   display: flex;
   align-items: center;
+  border-top: 1px dashed #fff;
   justify-content: space-between;
   background-color: #fff;
   font-family: var(--ez-list__item--font-family);
@@ -117,8 +128,6 @@
   margin: 0;
   width: 100%;
   max-height: 100%;
-  /* height: 100%; */
-  padding-bottom: var(--space--small);
 }
 
 .draggable-list li {
@@ -135,6 +144,10 @@
   border-top: 1px dashed var(--ez-list__over--border--color);
 }
 
+.last-droppable-space {
+  height: var(--ez-list__last-droppable-space--height);
+}
+
 .draggable-selected {
   background-color: var(--background--strong) !important;
 }
@@ -207,6 +220,10 @@
   font-size: var(--ez-list__group--font-size);
   font-weight: var(--ez-list__group--font-weight);
   padding-bottom: var(--ez-list__group--padding-bottom);
+  -webkit-user-select: none;
+  -moz-user-select: -moz-none;
+  -ms-user-select: none;
+  user-select: none;
 }
 
 .group {
@@ -286,6 +303,10 @@
   cursor: pointer;
 }
 
+.presetedHeight {
+  min-height: 100px;
+}
+
 .overlay-text {
   position: absolute;
   top: 50%;

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

@@ -143,7 +143,7 @@ export class EzList {
     this.createList();
   }
   onDrop(ev, dragEndItem) {
-    this.removeOverClass(ev);
+    this.removeOverClass();
     this.setSelection(undefined);
     if (this._dragStartItem) {
       if (this.useGroups) {
@@ -179,6 +179,39 @@ export class EzList {
     }
     ev.stopPropagation();
   }
+  onDropLastIndex(ev, groupDropped) {
+    this.removeOverClass();
+    this.setSelection(undefined);
+    if (this._dragStartItem) {
+      if (this.useGroups) {
+        let newList = [...this._listGroupItems];
+        let groupEnd = this._listGroupItems.find(group => groupDropped.group == group.group);
+        //Remove item arrastado
+        newList.find(group => group.group == this._dragStartItem.groupName).items.splice(this._dragStartItem.index, 1);
+        //Adiciona item arrastado
+        newList.find(group => group.group == groupDropped.group).items.push(this._dragStartItem.item);
+        if (groupEnd.sort) {
+          newList.find(group => group.group == groupDropped.group).items.sort(function (a, b) {
+            return a.label < b.label ? -1 : a.label > b.label ? 1 : 0;
+          });
+          if (groupEnd.sort === "DSC") {
+            newList.find(group => group.group == groupDropped.group).items.reverse();
+          }
+        }
+        this._listGroupItems = newList;
+        this.ezChange.emit(this._listGroupItems);
+      }
+      else {
+        let newList = [...this._listItems];
+        newList.splice(this._dragStartItem.index, 1);
+        newList.push(this._dragStartItem.item);
+        this._listItems = newList;
+        this._listItemsHistory = newList;
+        this.ezChange.emit(this._listItems);
+      }
+    }
+    ev.stopPropagation();
+  }
   onDropGroup(groupSelected) {
     var _a;
     let newList = [...this._listGroupItems];
@@ -212,6 +245,9 @@ export class EzList {
   }
   onDragEnd() {
     this._dragStartItem = undefined;
+    if (this.useGroups) {
+      this.hideOverlays();
+    }
     if (this._draggingElement) {
       try {
         this._element.shadowRoot.removeChild(this._draggingElement);
@@ -220,65 +256,74 @@ export class EzList {
       this._draggingElement = undefined;
     }
   }
-  addOverClass(ev) {
-    if (ev.target.__proto__ == HTMLDivElement.prototype && ev.target.classList.contains("draggable")) {
-      ev.target.classList.add('over');
+  addOverClass(element) {
+    if ((element === null || element === void 0 ? void 0 : element.__proto__) == HTMLDivElement.prototype && element.classList.contains("draggable")) {
+      element.classList.add('over');
+    }
+    else if ((element === null || element === void 0 ? void 0 : element.parentElement) && !element.parentElement.classList.contains("draggable-list")) {
+      this.addOverClass(element.parentElement);
     }
   }
   addOverGroupClass(ev, group) {
     if (ev.target) {
       let groupContainer = this._groupContainer.querySelector("div#" + this.getDivGroupId(group.group));
+      let groupOverlay = groupContainer.getElementsByClassName("group-overlay")[0];
       if (group.items.length > 0) {
-        let groupOverlay = groupContainer.getElementsByClassName("group-overlay")[0];
         groupOverlay.setAttribute("style", "display:grid");
       }
       else {
-        groupContainer === null || groupContainer === void 0 ? void 0 : groupContainer.classList.add('overGroup');
+        groupOverlay.classList.add("presetedHeight");
+        groupOverlay.setAttribute("style", "display:grid");
+        groupOverlay.scrollIntoView(false);
       }
     }
   }
-  removeOverClass(ev) {
-    ev.target.classList.remove('over');
+  removeOverClass() {
+    var _a, _b;
+    let overCollection;
+    let overLastDroppableCollection;
+    if (this.useGroups) {
+      overCollection = (_a = this._groupContainer) === null || _a === void 0 ? void 0 : _a.getElementsByClassName('over');
+      overLastDroppableCollection = this._groupContainer.getElementsByClassName('last-droppable-space');
+    }
+    else {
+      overCollection = (_b = this._itemContainer) === null || _b === void 0 ? void 0 : _b.getElementsByClassName('over');
+      overLastDroppableCollection = this._itemContainer.getElementsByClassName('last-droppable-space');
+    }
+    if (overCollection) {
+      Array.from(overCollection).forEach(function (element) {
+        element.classList.remove('over');
+      });
+    }
+    if (overLastDroppableCollection) {
+      Array.from(overLastDroppableCollection).forEach(function (element) {
+        element.classList.remove('over');
+      });
+    }
   }
   removeOverGroupClass(ev, group) {
     if (ev.target) {
       let groupContainer = this._groupContainer.querySelector("div#" + this.getDivGroupId(group.group));
-      if (group.items.length > 0) {
-        let groupOverlay = groupContainer.getElementsByClassName("group-overlay")[0];
+      let groupOverlay = groupContainer.getElementsByClassName("group-overlay")[0];
+      if (groupOverlay) {
+        groupOverlay.classList.remove("presetedHeight");
         groupOverlay.setAttribute("style", "display:none");
       }
-      else {
-        groupContainer === null || groupContainer === void 0 ? void 0 : groupContainer.classList.remove('overGroup');
-      }
     }
   }
-  onDragStart(event, item, group, index) {
+  onDragStart(item, group, index) {
+    if (this._changeDeboucingTimeout) {
+      window.clearTimeout(this._changeDeboucingTimeout);
+    }
     if (this.useGroups) {
       this._dragStartItem = { groupName: group.group, item: item, index: index };
+      this._changeDeboucingTimeout = window.setTimeout(() => {
+        this.showOverlays(group);
+      }, 10);
     }
     else {
       this._dragStartItem = { item: item.item, index: item.index };
     }
-    let sourceElement = event.srcElement.cloneNode(true);
-    this._draggingElement = event.srcElement.cloneNode(true);
-    this._draggingElement.style.position = "absolute";
-    this._draggingElement.style.top = (event.clientY + 5) + 'px';
-    this._draggingElement.style.left = (event.clientX + 5) + 'px';
-    this._draggingElement.style.height = event.srcElement.clientHeight + 'px';
-    this._draggingElement.style.width = event.srcElement.clientWidth + 'px';
-    this._draggingElement.style.background = "#FFFFFF";
-    this._draggingElement.style.border = "1px solid #008561";
-    this._draggingElement.style["box-sizing"] = "border-box";
-    this._draggingElement.style["box-shadow"] = "0px 0px 16px rgba(0, 38, 111, 0.122)";
-    this._draggingElement.style["border-radius"] = "6px";
-    this._element.shadowRoot.appendChild(this._draggingElement);
-    event.dataTransfer.setDragImage(sourceElement, -10000, -10000);
-  }
-  onDrag(event) {
-    if (this._draggingElement) {
-      this._draggingElement.style.top = (event.clientY + 5) + 'px';
-      this._draggingElement.style.left = (event.clientX + 5) + 'px';
-    }
   }
   selectFirstItem() {
     if (this.useGroups) {
@@ -381,63 +426,88 @@ export class EzList {
     }
     return undefined;
   }
+  getGroupOverlayId(groupName) {
+    if (groupName) {
+      return "group-overlay-" + groupName.replace(/[^a-z0-9_]/gi, "_");
+    }
+    return undefined;
+  }
   onDragOverGroup(event, group) {
-    if (this._dragStartItem && this._dragStartItem.groupName !== group.group) {
+    if (this._dragStartItem && this._dragStartItem.groupName !== group.group && group.sort) {
       event.preventDefault();
       this.addOverGroupClass(event, group);
     }
   }
-  onDragOverItem(event, group) {
+  onDragOverItem(event) {
     if (this._dragStartItem) {
       event.preventDefault();
-      if (group) {
-        group.sort ?
-          () => {
-            this.addOverGroupClass(event, group);
-          }
-          : this.addOverClass(event);
-      }
-      else {
-        this.addOverClass(event);
-      }
+      this.addOverClass(event.target);
       event.stopPropagation();
     }
   }
+  onDragOverLastIndex(ev) {
+    ev.preventDefault();
+    if (this._dragStartItem) {
+      ev.target.classList.add('over');
+      ev.stopPropagation();
+    }
+  }
+  showOverlays(groupDragStart) {
+    let groupOverlayCollection = this._groupContainer.getElementsByClassName("group-overlay");
+    Array.from(groupOverlayCollection).forEach(groupOverlay => {
+      let groupOverlayID = this.getGroupOverlayId(groupDragStart.group);
+      if (groupOverlayID && groupOverlay.getAttribute("id") && groupOverlayID != groupOverlay.getAttribute("id")) {
+        groupOverlay.classList.add("presetedHeight");
+        groupOverlay.setAttribute("style", "display:grid");
+      }
+    });
+  }
+  hideOverlays() {
+    var _a;
+    let groupOverlayCollection = (_a = this._groupContainer) === null || _a === void 0 ? void 0 : _a.getElementsByClassName("group-overlay");
+    Array.from(groupOverlayCollection).forEach(groupOverlay => {
+      groupOverlay.classList.remove("presetedHeight");
+      groupOverlay.setAttribute("style", "display:none");
+    });
+  }
   render() {
     return (h(Host, { ref: (el) => this._element = el }, this.useGroups ?
       h("div", { class: "group-container", ref: (el) => this._groupContainer = el, tabIndex: 0, onKeyDown: (event) => { this.keyDownHandler(event); } }, this._listGroupItems.map(group => {
-        return h("div", { id: this.getDivGroupId(group.group), class: "group", key: group.group + group.items.length, onDragLeave: (event) => { this.removeOverGroupClass(event, group); }, onDragEnd: (event) => { this.onDragEnd(); this.removeOverGroupClass(event, group); }, onDragOver: (event) => { this.onDragOverGroup(event, group); }, onDrop: () => this.onDropGroup(group) },
-          h("label", { class: "group-name", onDragLeave: (event) => { this.removeOverGroupClass(event, group); }, onDragOver: (event) => { this.onDragOverGroup(event, group); }, onDragEnd: (event) => { this.onDragEnd(); this.removeOverGroupClass(event, group); }, onDrop: () => this.onDropGroup(group) }, group.group),
+        return h("div", { id: this.getDivGroupId(group.group), class: "group", key: group.group + group.items.length, onDrop: () => this.onDropGroup(group) },
+          h("label", { draggable: false, class: "group-name" }, group.group),
           h("section", { class: "section-container", onDragOver: (ev) => ev.preventDefault() },
             h("div", { class: "group-items-container" },
               h("div", { class: "draggable-list" }, group.items.map((item, index) => {
                 return h("li", { id: 'item_' + this.getItemId(item.label), class: this.ezSelectable ? "selectable-container" : "", key: 'item_' + this.getItemId(item.label) },
-                  h("div", { class: "draggable" + (item.selected == true ? " selected-item " : "") + (this.ezSelectable == true ? " selectable " : ""), onClick: () => { this.setSelection(item); }, onDragLeave: (event) => { group.sort ? undefined : this.removeOverClass(event); }, onDragEnd: () => this.onDragEnd(), onDragStart: (event) => this.onDragStart(event, item, group, index), onDragOver: (event) => this.onDragOverItem(event, group), onDrop: (event) => this.onDrop(event, { groupName: group.group, item: item, index: index }), onDrag: (event) => this.onDrag(event), draggable: this.ezDraggable },
+                  h("div", { class: "draggable" + (item.selected == true ? " selected-item " : "") + (this.ezSelectable == true ? " selectable " : ""), onClick: () => { this.setSelection(item); }, onDragLeave: () => { group.sort ? undefined : this.removeOverClass(); }, onDragEnd: () => this.onDragEnd(), onDragStart: () => this.onDragStart(item, group, index), onDragOver: (event) => { group.sort ? undefined : this.onDragOverItem(event); }, onDrop: (event) => this.onDrop(event, { groupName: group.group, item: item, index: index }), draggable: this.ezDraggable },
                     h("div", { class: "item-content" },
                       this.ezDraggable ? h("span", { class: "draggable-icon" }) : undefined,
                       h("p", { title: item.label, class: "person-name text--ellipsis" }, item.label)),
                     this.itemSlotBuilder ?
                       h("div", { class: "slot-item" }, this.itemSlotBuilder(item, group))
                       : undefined));
-              }))),
-            h("div", { class: "group-overlay" },
-              h("div", { id: "overlay-text" },
-                h("b", null, "Mover"),
-                " para ",
-                group.group))));
+              })),
+              h("div", { class: "last-droppable-space", onDragLeave: () => this.removeOverClass(), onDragOver: (event) => { this.onDragOverLastIndex(event); }, onDragEnd: () => this.onDragEnd(), onDrop: (event) => this.onDropLastIndex(event, group) })),
+            group.sort ?
+              h("div", { id: this.getGroupOverlayId(group.group), class: "group-overlay" },
+                "Mover para ",
+                group.group)
+              : undefined));
       }))
       :
         h("div", { class: "items-container", ref: (el) => this._itemContainer = el, tabIndex: 0, onKeyDown: (event) => { this.keyDownHandler(event); } },
-          h("div", { class: "draggable-list" }, this._listItems.map((item, index) => {
-            return h("li", { id: 'item_' + this.getItemId(item.label), class: this.ezSelectable ? "selectable-container" : "", key: 'item_' + this.getItemId(item.label) },
-              h("div", { class: "draggable" + (item.selected == true ? " selected-item " : "") + (this.ezSelectable == true ? " selectable " : ""), onDragStart: (event) => this.onDragStart(event, { item: item, index: index }), onClick: () => { this.setSelection(item); }, onDragLeave: event => this.removeOverClass(event), onDragOver: (event) => this.onDragOverItem(event), onDragEnd: () => this.onDragEnd(), onDrop: (event) => this.onDrop(event, { item: item, index: index }), onDrag: (event) => this.onDrag(event), draggable: this.ezDraggable },
-                h("div", { class: "item-content" },
-                  this.ezDraggable ? h("span", { class: "draggable-icon" }) : undefined,
-                  h("p", { title: item.label, class: "person-name text--ellipsis" }, item.label)),
-                this.itemSlotBuilder ?
-                  h("div", null, this.itemSlotBuilder(item))
-                  : undefined));
-          })))));
+          h("div", { class: "draggable-list" },
+            this._listItems.map((item, index) => {
+              return h("li", { id: 'item_' + this.getItemId(item.label), class: this.ezSelectable ? "selectable-container" : "", key: 'item_' + this.getItemId(item.label) },
+                h("div", { class: "draggable" + (item.selected == true ? " selected-item " : "") + (this.ezSelectable == true ? " selectable " : ""), onDragStart: () => this.onDragStart({ item: item, index: index }), onClick: () => { this.setSelection(item); }, onDragLeave: () => this.removeOverClass(), onDragOver: (event) => this.onDragOverItem(event), onDragEnd: () => this.onDragEnd(), onDrop: (event) => this.onDrop(event, { item: item, index: index }), draggable: this.ezDraggable },
+                  h("div", { class: "item-content" },
+                    this.ezDraggable ? h("span", { class: "draggable-icon" }) : undefined,
+                    h("p", { title: item.label, class: "person-name text--ellipsis" }, item.label)),
+                  this.itemSlotBuilder ?
+                    h("div", null, this.itemSlotBuilder(item))
+                    : undefined));
+            }),
+            h("div", { class: "last-droppable-space", onDragLeave: () => this.removeOverClass(), onDragOver: (event) => { this.onDragOverLastIndex(event); }, onDragEnd: () => this.onDragEnd(), onDrop: (event) => this.onDropLastIndex(event) })))));
   }
   static get is() { return "ez-list"; }
   static get encapsulation() { return "shadow"; }
@@ -534,7 +604,7 @@ export class EzList {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "Fun\u00E7\u00E3o respons\u00E1vel por renderizar um conte\u00FAdo dentro do item da lista."
+        "text": "Define se \u00E9 poss\u00EDvel selecionar mais de um registro.\n\n/**\nFun\u00E7\u00E3o respons\u00E1vel por renderizar um conte\u00FAdo dentro do item da lista."
       }
     }
   }; }

package/dist/collection/utils/index.js

@@ -0,0 +1,2 @@
+export { default as ApplicationUtils } from './ApplicationUtils';
+export { default as CSSVarsUtils } from './CSSVarsUtils';