@sankhyalabs/ezui 3.0.1 → 3.0.2

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

@@ -1,28 +1,17 @@
 import { ElementIDUtils } from "@sankhyalabs/core";
-import { Component, Event, h, Host, Method, Prop, State } from "@stencil/core";
+import { h, Host } from "@stencil/core";
 ;
 ;
 export class EzList {
   constructor() {
+    this._listItemsHistory = [];
     this._listItems = [];
     this._listGroupItems = [];
-    this._listItemsHistory = [];
-    /**
-     * Define a lista inicial do componente.
-     */
     this.dataSource = [];
-    /**
-     * Se true os grupos serão exibidos.
-     */
     this.useGroups = false;
-    /**
-     * Se true habilita `drag and drop` para os itens.
-     */
     this.ezDraggable = false;
-    /**
-     * Se true os itens serão selecionáveis.
-     */
     this.ezSelectable = false;
+    this.itemSlotBuilder = undefined;
   }
   /**
    * Limpa o histórico da lista.
@@ -527,284 +516,275 @@ export class EzList {
   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, 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: () => { 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 ? this.getContainerItemBuilder(item, group, "slot-item") : undefined));
-              })),
-              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));
+        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: () => { 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 ? this.getContainerItemBuilder(item, group, "slot-item") : undefined));
+        })), 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: () => 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 ? this.getContainerItemBuilder(item) : undefined));
-            }),
-            h("div", { class: "last-droppable-space", onDragLeave: () => this.removeOverClass(), onDragOver: (event) => { this.onDragOverLastIndex(event); }, onDragEnd: () => this.onDragEnd(), onDrop: (event) => this.onDropLastIndex(event) })))));
+        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: () => 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 ? this.getContainerItemBuilder(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"; }
-  static get originalStyleUrls() { return {
-    "$": ["ez-list.css"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["ez-list.css"]
-  }; }
-  static get properties() { return {
-    "dataSource": {
-      "type": "unknown",
-      "mutable": true,
-      "complexType": {
-        "original": "Array<ListGroup | ListItem>",
-        "resolved": "(ListGroup | ListItem)[]",
-        "references": {
-          "Array": {
-            "location": "global"
-          },
-          "ListGroup": {
-            "location": "local"
-          },
-          "ListItem": {
-            "location": "local"
+  static get originalStyleUrls() {
+    return {
+      "$": ["ez-list.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["ez-list.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "dataSource": {
+        "type": "unknown",
+        "mutable": true,
+        "complexType": {
+          "original": "Array<ListGroup | ListItem>",
+          "resolved": "(ListItem | ListGroup)[]",
+          "references": {
+            "Array": {
+              "location": "global"
+            },
+            "ListGroup": {
+              "location": "local"
+            },
+            "ListItem": {
+              "location": "local"
+            }
           }
-        }
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Define a lista inicial do componente."
-      },
-      "defaultValue": "[]"
-    },
-    "useGroups": {
-      "type": "boolean",
-      "mutable": true,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Se true os grupos ser\u00E3o exibidos."
-      },
-      "attribute": "use-groups",
-      "reflect": true,
-      "defaultValue": "false"
-    },
-    "ezDraggable": {
-      "type": "boolean",
-      "mutable": true,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Define a lista inicial do componente."
+        },
+        "defaultValue": "[]"
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Se true habilita `drag and drop` para os itens."
+      "useGroups": {
+        "type": "boolean",
+        "mutable": true,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Se true os grupos ser\u00E3o exibidos."
+        },
+        "attribute": "use-groups",
+        "reflect": true,
+        "defaultValue": "false"
       },
-      "attribute": "ez-draggable",
-      "reflect": false,
-      "defaultValue": "false"
-    },
-    "ezSelectable": {
-      "type": "boolean",
-      "mutable": true,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
+      "ezDraggable": {
+        "type": "boolean",
+        "mutable": true,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Se true habilita `drag and drop` para os itens."
+        },
+        "attribute": "ez-draggable",
+        "reflect": false,
+        "defaultValue": "false"
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Se true os itens ser\u00E3o selecion\u00E1veis."
+      "ezSelectable": {
+        "type": "boolean",
+        "mutable": true,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Se true os itens ser\u00E3o selecion\u00E1veis."
+        },
+        "attribute": "ez-selectable",
+        "reflect": false,
+        "defaultValue": "false"
       },
-      "attribute": "ez-selectable",
-      "reflect": false,
-      "defaultValue": "false"
-    },
-    "itemSlotBuilder": {
-      "type": "unknown",
-      "mutable": true,
-      "complexType": {
-        "original": "(item: ListItem, group?: ListGroup) => HTMLElement | string",
-        "resolved": "(item: ListItem, group?: ListGroup) => string | HTMLElement",
-        "references": {
-          "ListItem": {
-            "location": "local"
-          },
-          "ListGroup": {
-            "location": "local"
-          },
-          "HTMLElement": {
-            "location": "global"
+      "itemSlotBuilder": {
+        "type": "unknown",
+        "mutable": true,
+        "complexType": {
+          "original": "(item: ListItem, group?: ListGroup) => HTMLElement | string",
+          "resolved": "(item: ListItem, group?: ListGroup) => string | HTMLElement",
+          "references": {
+            "ListItem": {
+              "location": "local"
+            },
+            "ListGroup": {
+              "location": "local"
+            },
+            "HTMLElement": {
+              "location": "global"
+            }
           }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Fun\u00E7\u00E3o builder que possibilita alterar como o item da lista vai ser apresentado.\nObserva\u00E7\u00E3o: No react ele se transforma em VNode e n\u00E3o como HTMLElement."
         }
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Fun\u00E7\u00E3o builder que possibilita alterar como o item da lista vai ser apresentado.\nObserva\u00E7\u00E3o: No react ele se transforma em VNode e n\u00E3o como HTMLElement."
       }
-    }
-  }; }
-  static get states() { return {
-    "_listItems": {},
-    "_listGroupItems": {}
-  }; }
-  static get events() { return [{
-      "method": "ezChange",
-      "name": "ezChange",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": "Emitido quando acontece a altera\u00E7\u00E3o de estado da lista."
-      },
-      "complexType": {
-        "original": "Array<ListItem|ListGroup>",
-        "resolved": "(ListGroup | ListItem)[]",
-        "references": {
-          "Array": {
-            "location": "global"
-          },
-          "ListItem": {
-            "location": "local"
-          },
-          "ListGroup": {
-            "location": "local"
+    };
+  }
+  static get states() {
+    return {
+      "_listItems": {},
+      "_listGroupItems": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "ezChange",
+        "name": "ezChange",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Emitido quando acontece a altera\u00E7\u00E3o de estado da lista."
+        },
+        "complexType": {
+          "original": "Array<ListItem|ListGroup>",
+          "resolved": "(ListItem | ListGroup)[]",
+          "references": {
+            "Array": {
+              "location": "global"
+            },
+            "ListItem": {
+              "location": "local"
+            },
+            "ListGroup": {
+              "location": "local"
+            }
           }
         }
-      }
-    }]; }
-  static get methods() { return {
-    "clearHistory": {
-      "complexType": {
-        "signature": "() => Promise<void>",
-        "parameters": [],
-        "references": {
-          "Promise": {
-            "location": "global"
-          }
+      }];
+  }
+  static get methods() {
+    return {
+      "clearHistory": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
         },
-        "return": "Promise<void>"
+        "docs": {
+          "text": "Limpa o hist\u00F3rico da lista.",
+          "tags": []
+        }
       },
-      "docs": {
-        "text": "Limpa o hist\u00F3rico da lista.",
-        "tags": []
-      }
-    },
-    "scrollToTop": {
-      "complexType": {
-        "signature": "() => Promise<void>",
-        "parameters": [],
-        "references": {
-          "Promise": {
-            "location": "global"
-          }
+      "scrollToTop": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
         },
-        "return": "Promise<void>"
+        "docs": {
+          "text": "Traz o conte\u00FAdo da lista para a \u00E1rea vis\u00EDvel.",
+          "tags": []
+        }
       },
-      "docs": {
-        "text": "Traz o conte\u00FAdo da lista para a \u00E1rea vis\u00EDvel.",
-        "tags": []
-      }
-    },
-    "setSelection": {
-      "complexType": {
-        "signature": "(selectedItem: ListItem, scrollToOption?: boolean) => Promise<void>",
-        "parameters": [{
-            "tags": [],
-            "text": ""
-          }, {
-            "tags": [],
-            "text": ""
-          }],
-        "references": {
-          "Promise": {
-            "location": "global"
+      "setSelection": {
+        "complexType": {
+          "signature": "(selectedItem: ListItem, scrollToOption?: boolean) => Promise<void>",
+          "parameters": [{
+              "tags": [],
+              "text": ""
+            }, {
+              "tags": [],
+              "text": ""
+            }],
+          "references": {
+            "Promise": {
+              "location": "global"
+            },
+            "ListItem": {
+              "location": "local"
+            }
           },
-          "ListItem": {
-            "location": "local"
-          }
+          "return": "Promise<void>"
         },
-        "return": "Promise<void>"
+        "docs": {
+          "text": "Aplica sele\u00E7\u00E3o nas linhas da lista.",
+          "tags": []
+        }
       },
-      "docs": {
-        "text": "Aplica sele\u00E7\u00E3o nas linhas da lista.",
-        "tags": []
-      }
-    },
-    "getSelection": {
-      "complexType": {
-        "signature": "() => Promise<ListItem>",
-        "parameters": [],
-        "references": {
-          "Promise": {
-            "location": "global"
+      "getSelection": {
+        "complexType": {
+          "signature": "() => Promise<ListItem>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            },
+            "ListItem": {
+              "location": "local"
+            }
           },
-          "ListItem": {
-            "location": "local"
-          }
+          "return": "Promise<ListItem>"
         },
-        "return": "Promise<ListItem>"
+        "docs": {
+          "text": "Obt\u00E9m o item selecionado.",
+          "tags": []
+        }
       },
-      "docs": {
-        "text": "Obt\u00E9m o item selecionado.",
-        "tags": []
-      }
-    },
-    "getList": {
-      "complexType": {
-        "signature": "() => Promise<Array<ListItem | ListGroup>>",
-        "parameters": [],
-        "references": {
-          "Promise": {
-            "location": "global"
-          },
-          "ListGroup": {
-            "location": "local"
-          },
-          "ListItem": {
-            "location": "local"
+      "getList": {
+        "complexType": {
+          "signature": "() => Promise<Array<ListItem | ListGroup>>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            },
+            "ListItem": {
+              "location": "local"
+            },
+            "ListGroup": {
+              "location": "local"
+            },
+            "Array": {
+              "location": "global"
+            }
           },
-          "Array": {
-            "location": "global"
-          }
+          "return": "Promise<(ListItem | ListGroup)[]>"
         },
-        "return": "Promise<(ListGroup | ListItem)[]>"
-      },
-      "docs": {
-        "text": "Obt\u00E9m a lista de items ou grupos.",
-        "tags": []
+        "docs": {
+          "text": "Obt\u00E9m a lista de items ou grupos.",
+          "tags": []
+        }
       }
-    }
-  }; }
+    };
+  }
 }