@sankhyalabs/ezui 0.0.0-bugfix-dev-KB-6165.0 → 0.0.0-bugfix-dev-KB-17130.0

package/dist/collection/components/ez-split-panel/ez-split-panel.css

@@ -0,0 +1,8 @@
+  :host {
+
+  }
+
+  .ez-split-gutter {
+    cursor: grab;
+    background-color: transparent;
+  }

package/dist/collection/components/ez-split-panel/ez-split-panel.js

@@ -0,0 +1,122 @@
+import { h, Host } from "@stencil/core";
+import Split from 'split-grid';
+import { StringUtils } from "@sankhyalabs/core";
+export class SplitPanel {
+  constructor() {
+    this._items = [];
+    this.direction = 'column';
+  }
+  componentDidLoad() {
+    this._panelID = StringUtils.generateUUID();
+    this._element.dataset.panelId = this._panelID;
+    let itemsElements = Array.from(this._element.children);
+    this._items = itemsElements.filter(child => { var _a; return ((_a = child.tagName) === null || _a === void 0 ? void 0 : _a.toUpperCase()) === 'EZ-SPLIT-ITEM'; });
+    let trackCount = 1;
+    this._items.forEach((item, index) => {
+      item.dataset.trackNumber = trackCount.toString();
+      if (this._items.length > 1 && index != this._items.length - 1) {
+        this.addItemGutter(item);
+      }
+      trackCount += 2;
+    });
+    this.initSplit();
+  }
+  initSplit() {
+    if (!this._items.length) {
+      return;
+    }
+    this._element.style[this.direction == 'row' ? 'grid-template-rows' : 'grid-template-columns'] = this.getGridTemplate();
+    Split(this.getGutters());
+  }
+  getGutters() {
+    const gutters = {
+      columnGutters: [],
+      rowGutters: []
+    };
+    if (!this._items.length) {
+      return gutters;
+    }
+    const proToChange = this.direction == 'row' ? 'rowGutters' : 'columnGutters';
+    this._items.forEach((item, index) => {
+      if (index == this._items.length - 1)
+        return;
+      let gutterTrack = item.dataset.trackNumber;
+      if (index === (this._items.length - 1)) {
+        gutterTrack = this._items.length.toString();
+      }
+      gutters[proToChange].push({
+        track: Number(gutterTrack),
+        element: this._element.querySelector(`ez-split-panel[data-panel-id="${this._panelID}"] > [data-item-track="${item.dataset.trackNumber}"]`)
+      });
+    });
+    return gutters;
+  }
+  addItemGutter(item) {
+    const gutter = document.createElement('div');
+    gutter.classList.add("ez-split-gutter");
+    gutter.classList.add(this.direction);
+    gutter.dataset.itemTrack = `${item.dataset.trackNumber}`;
+    gutter.dataset.trackNumber = (Number(item.dataset.trackNumber) + 1).toString();
+    item.parentNode.insertBefore(gutter, item.nextSibling);
+  }
+  getElementStyle() {
+    const style = {
+      'display': "grid",
+      'height': '100%',
+      'width': '100%'
+    };
+    return style;
+  }
+  getGridTemplate() {
+    let template = '';
+    this._items.forEach((_col, index) => {
+      if (index === this._items.length - 1) {
+        template += ` 1fr`;
+        return;
+      }
+      if (index === 0) {
+        template += `1fr 5px`;
+        return;
+      }
+      template += ` 1fr 5px`;
+    });
+    return template;
+  }
+  render() {
+    return (h(Host, { style: this.getElementStyle() }));
+  }
+  static get is() { return "ez-split-panel"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["ez-split-panel.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["ez-split-panel.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "direction": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'row' | 'column'",
+          "resolved": "\"column\" | \"row\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "direction",
+        "reflect": false,
+        "defaultValue": "'column'"
+      }
+    };
+  }
+  static get elementRef() { return "_element"; }
+}

package/dist/collection/components/ez-split-panel/structure/item/ez-split-item.css

@@ -0,0 +1,12 @@
+  :host {
+
+  }
+
+  .box_split-item {
+    background-color: var(--background--xlight);
+    padding: var(--space--nano);
+    width: 100%;
+    height: 100%;
+    border-radius: var(--border--radius-medium);
+    box-shadow: var(--shadow);
+  }

package/dist/collection/components/ez-split-panel/structure/item/ez-split-item.js

@@ -0,0 +1,17 @@
+import { h, Host } from "@stencil/core";
+export class SplitItem {
+  render() {
+    return (h(Host, { class: 'box_split-item' }));
+  }
+  static get is() { return "ez-split-item"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["ez-split-item.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["ez-split-item.css"]
+    };
+  }
+}

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

@@ -11,6 +11,7 @@ export class EzTextInput {
     this.restrict = undefined;
     this.mode = "regular";
     this.noBorder = false;
+    this.password = false;
   }
   observeErrorMessage() {
     if (this._inputElem) {
@@ -223,7 +224,7 @@ export class EzTextInput {
     ElementIDUtils.addIDInfoIfNotExists(this._hostElement, 'input');
     return (h(Host, { style: this._hostElement.classList.contains("grid_editor") ? { "height": "100%" } : null }, h("slot", { name: "leftIcon", onSlotchange: (ev) => { this.handleSlotChange(ev); } }), this.label && this.mode != "slim" ?
       h("label", { ref: (el) => this._labelElem = el, class: this.enabled ? "input__label" : "input__label input__label--disabled", onClick: () => this._inputElem.focus(), title: this.label }, this.label)
-      : null, h("input", { "data-element-id": ElementIDUtils.getInternalIDInfo("input"), onFocus: () => this.doFocus(), ref: (el) => this._inputElem = el, type: "text", class: this.mode === "slim" ? "input--slim" : "", placeholder: this.mode === "slim" && this.label ? this.label : "", value: this.value, disabled: !this.enabled, onInput: () => { this.handleChange(); }, onFocusout: () => { this.handleFocusout(); } }), h("slot", { name: "rightIcon", onSlotchange: (ev) => { this.handleSlotChange(ev); } }), this.canShowError && this.mode != "slim" &&
+      : null, h("input", { "data-element-id": ElementIDUtils.getInternalIDInfo("input"), onFocus: () => this.doFocus(), ref: (el) => this._inputElem = el, type: this.password ? "password" : "text", class: this.mode === "slim" ? "input--slim" : "", placeholder: this.mode === "slim" && this.label ? this.label : "", value: this.value, disabled: !this.enabled, onInput: () => { this.handleChange(); }, onFocusout: () => { this.handleFocusout(); } }), h("slot", { name: "rightIcon", onSlotchange: (ev) => { this.handleSlotChange(ev); } }), this.canShowError && this.mode != "slim" &&
       h("span", { class: "message-box", ref: (el) => this._messageBoxElem = el, title: this.errorMessage, "data-element-id": ElementIDUtils.getInternalIDInfo("message_box") }, this.errorMessage)));
   }
   static get is() { return "ez-text-input"; }
@@ -396,6 +397,24 @@ export class EzTextInput {
         "attribute": "no-border",
         "reflect": true,
         "defaultValue": "false"
+      },
+      "password": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Se true o campo n\u00E3o ter\u00E1 bordas."
+        },
+        "attribute": "password",
+        "reflect": false,
+        "defaultValue": "false"
       }
     };
   }

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

@@ -70,6 +70,38 @@ ul.first-level {
   padding-inline-start: 0;
 }
 
+.tree-item-badge {
+  width: 16px;
+  height: 16px;
+  background: transparent;
+  border-radius: 50%;
+  transition: all 300ms ease-in-out;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.tree-item-badge-error-icon{
+  --ez-icon--color: white;
+}
+
+.tree-item-badge.error{
+  background: var(--color--error);
+}
+
+.tree-item-badge.warning{
+  background: var(--color--warning);
+}
+
+.tree-item-badge.success{
+  background: var(--color--success);
+}
+
+.item-label-container {
+  display: flex;
+  align-items: center;
+}
+
 .tree-item {
   /*private*/
   display: flex;
@@ -81,6 +113,7 @@ ul.first-level {
   border-radius: var(--ez-tree--border-radius);
   height: var(--ez-tree__tree-item--height);
   padding: var(--ez-tree__tree-item--padding);
+  justify-content: space-between;
 }
 
 .tree-item[selected] {

package/dist/collection/components/ez-tree/subcomponents/TreeItem.js

@@ -14,11 +14,11 @@ export const TreeItem = (props) => {
   if (available) {
     itemsList.push(treeItem);
   }
-  return (h("ul", { class: level === 1 ? "first-level" : undefined }, h("li", Object.assign({ title: tooltipResolver(treeItem, !disabled, level), class: "tree-item", onClick: () => available && itemClick(treeItem) }, {
+  return (h("ul", { class: level === 1 ? "first-level" : undefined }, h("li", Object.assign({ title: tooltipResolver(treeItem, !disabled, level), class: `tree-item ${treeItem.id !== selectedId ? 'tree-item-error' : ""}`, onClick: () => available && itemClick(treeItem) }, {
     disabled,
     selected: treeItem.id === selectedId,
     [ElementIDUtils.DATA_ELEMENT_ID_ATTRIBUTE_NAME]: ElementIDUtils.getInternalIDInfo(`ezTreeItem_${treeItem.id}`)
-  }), h("div", { class: "item-icon-box" }, expandable &&
-    h("ez-icon", { id: treeItem.id, class: "item-icon", size: "small", iconName: iconResolver(treeItem, expanded, level), onClick: () => available && iconClick(treeItem) })), h("label", { class: "item-label" }, treeItem.label)), expanded
+  }), h("div", { class: "item-label-container" }, h("div", { class: "item-icon-box" }, expandable &&
+    h("ez-icon", { id: treeItem.id, class: "item-icon", size: "small", iconName: iconResolver(treeItem, expanded, level), onClick: () => available && iconClick(treeItem) })), h("label", { class: "item-label" }, treeItem.label)), h("div", { class: `tree-item-badge ${(treeItem.id !== selectedId) ? treeItem.badge : null}` }, treeItem.badge === 'error' ? (h("ez-icon", { id: `${treeItem.id}-badge-error`, class: "tree-item-badge-error-icon", size: "x-small", style: { color: 'white' }, iconName: "alert-circle" })) : null)), expanded
     && node.getChildren().map(child => h(TreeItem, { selectedId: selectedId, node: child, itemClick: itemClick, iconClick: iconClick, level: level + 1, iconResolver: iconResolver, tooltipResolver: tooltipResolver, itemsList: itemsList }))));
 };

package/dist/collection/utils/ApplicationUtils.js

@@ -6,12 +6,13 @@ export default class ApplicationUtils {
       options = Object.assign(Object.assign({}, ApplicationUtils.defaultMessageOptions), options);
     }
     return new Promise(resolve => {
-      let dialog = document.querySelector("ez-dialog");
-      if (!dialog) {
-        dialog = document.createElement("ez-dialog");
-        window.document.body.appendChild(dialog);
-      }
-      dialog.show(title, message, dialogType, confirm, icon, options.labelCancel, options.labelConfirm, options.btnConfirmDanger, options.beforeClose).then(ok => resolve(ok));
+      let dialog = document.createElement("ez-dialog");
+      window.document.body.appendChild(dialog);
+      dialog.show(title, message, dialogType, confirm, icon, options.labelCancel, options.labelConfirm, options.btnConfirmDanger, options.beforeClose)
+        .then(ok => {
+        dialog.remove();
+        return resolve(ok);
+      });
     });
   }
   static async alert(title, message, icon = null, options = ApplicationUtils.defaultMessageOptions) {
@@ -56,6 +57,33 @@ export default class ApplicationUtils {
     }
     toast.show(message, 5000, useIcon, options.canClose);
   }
+  static isModalContent(content) {
+    return content instanceof HTMLElement && content.tagName === 'EZ-MODAL-CONTAINER';
+  }
+  /**
+   * Exibe um popup configurado com os parâmetros informados e retorna um callBack
+   * para removêlo da DOM quando necessário.
+   *
+   * @param popupProps
+   */
+  static async showPopup(popupProps) {
+    var _a, _b;
+    const popup = document.createElement("ez-popup");
+    window.document.body.appendChild(popup);
+    const { content } = popupProps;
+    popup.setAttribute('id', uuid());
+    popup.heightMode = (_a = popupProps.size) !== null && _a !== void 0 ? _a : "auto";
+    popup.opened = true;
+    if (ApplicationUtils.isModalContent(content)) {
+      popup.appendChild(content);
+      popup.useHeader = false;
+    }
+    else {
+      popup.ezTitle = (_b = popupProps.title) !== null && _b !== void 0 ? _b : "";
+      popup.innerHTML = content;
+    }
+    return () => popup.remove();
+  }
   static async showModal(modalProps) {
     modalProps = Object.assign(Object.assign({}, ApplicationUtils.defaultModalProps), modalProps);
     const modal = document.createElement("ez-modal");
@@ -76,6 +104,21 @@ export default class ApplicationUtils {
     modal.opened = true;
     return () => modal.remove();
   }
+  static showAlerts(props) {
+    const alertListId = 'EzAlertList';
+    let alertList = document.getElementById(alertListId);
+    if (!alertList) {
+      alertList = document.createElement('ez-alert-list');
+      alertList.setAttribute("id", alertListId);
+      window.document.body.appendChild(alertList);
+    }
+    props = Object.assign(Object.assign({}, ApplicationUtils.defaultAlertListProps), props);
+    alertList.itemRightSlotBuilder = props.itemRightSlotBuilder;
+    alertList.enableDragAndDrop = props.enableDragAndDrop;
+    alertList.enableExpand = props.enableExpand;
+    alertList.opened = props.opened;
+    alertList.alerts = props.alerts;
+  }
 }
 ApplicationUtils.defaultMessageOptions = {
   canClose: true,
@@ -91,4 +134,11 @@ ApplicationUtils.defaultModalProps = {
   closeOutsideClick: true,
   closeEsc: true
 };
+ApplicationUtils.defaultAlertListProps = {
+  alerts: [],
+  enableDragAndDrop: true,
+  enableExpand: true,
+  itemRightSlotBuilder: null,
+  opened: true
+};
 ;

package/dist/collection/utils/constants.js

@@ -1,3 +1,4 @@
 export const REQUIRED_INFO = " (obrigatório) *";
 export const ALL_RECORD = "ALL_RECORD";
 export const DISTINCT_FILTER_NAME_PREFIX = 'FILTRO_COLUNA_';
+export const EZ_GRID_LOADING_SOURCE = "EZ_GRID_LOADING_SOURCE";

package/dist/collection/utils/form/DataBinder.js

@@ -75,6 +75,16 @@ export default class DataBinder {
       this.updateErrorMessage(field.name, fieldElement, field.message);
     }
   }
+  setFocus(fieldName) {
+    if (!this._fields.has(fieldName)) {
+      return;
+    }
+    const fieldElement = this._fields.get(fieldName).field;
+    if (typeof fieldElement["setFocus"] != "function") {
+      return;
+    }
+    fieldElement["setFocus"]();
+  }
   clearInvalid(recordId) {
     this._dataUnit.clearInvalid(recordId);
     this._fields.forEach(fieldBinder => {
@@ -163,7 +173,8 @@ export default class DataBinder {
       this._dataUnit.addRecord();
     }
     this._dataUnit.clearInvalid(this.getCurrentRecordId(), fieldName);
-    this._dataUnit.setFieldValue(fieldName, newValue, [this.getCurrentRecordId()]);
+    const record = this._dataUnit.getSelectedRecord();
+    this._dataUnit.setFieldValue(fieldName, newValue, record ? [record.__record__id__] : undefined);
     if (this._dataUnit.waitingForChange(fieldName)) {
       const bind = this._fields.get(fieldName);
       if (bind) {

package/dist/collection/utils/interfaces/IAction.js

@@ -0,0 +1 @@
+export {};

package/dist/custom-elements/index.d.ts

@@ -14,6 +14,12 @@ export const EzAlert: {
   new (): EzAlert;
 };
 
+interface EzAlertList extends Components.EzAlertList, HTMLElement {}
+export const EzAlertList: {
+  prototype: EzAlertList;
+  new (): EzAlertList;
+};
+
 interface EzApplication extends Components.EzApplication, HTMLElement {}
 export const EzApplication: {
   prototype: EzApplication;
@@ -218,6 +224,18 @@ export const EzSkeleton: {
   new (): EzSkeleton;
 };
 
+interface EzSplitItem extends Components.EzSplitItem, HTMLElement {}
+export const EzSplitItem: {
+  prototype: EzSplitItem;
+  new (): EzSplitItem;
+};
+
+interface EzSplitPanel extends Components.EzSplitPanel, HTMLElement {}
+export const EzSplitPanel: {
+  prototype: EzSplitPanel;
+  new (): EzSplitPanel;
+};
+
 interface EzTabselector extends Components.EzTabselector, HTMLElement {}
 export const EzTabselector: {
   prototype: EzTabselector;