@sankhyalabs/ezui 1.2.0-beta.19 → 1.2.0-beta.20

package/dist/collection/components/ez-collapsible-box/ez-collapsible-box.js

@@ -1,6 +1,8 @@
-import { Component, h, Prop, Event, Watch, Method } from "@stencil/core";
+import { Component, h, Prop, Event, Watch, Method, Element, State } from "@stencil/core";
+import { ApplicationUtils } from "../../utils";
 export class EzCollapsibleBox {
   constructor() {
+    this._activeEditText = false;
     /**
      * Valor externalizado que garante a exibição ou não do componente.
      */
@@ -17,9 +19,14 @@ export class EzCollapsibleBox {
     * Define se o titulo irá ocupar toda a largura do componente.
     */
     this.stretchTitle = false;
-  }
-  observeCollapsedValue() {
-    this.ezChange.emit(this.value);
+    /**
+    * Ativa o ícone para remoção do componente.
+    */
+    this.removable = false;
+    /**
+    * Ativa o ícone para edição do componente.
+    */
+    this.editable = false;
   }
   /**
    * Esconde ou revela o conteúdo do componente.
@@ -27,6 +34,23 @@ export class EzCollapsibleBox {
   async showHide() {
     this.value = !this.value;
   }
+  /**
+   * Aplica focus no campo de edição de título.
+   */
+  async applyFocusTextEdit() {
+    var _a;
+    (_a = this._refTextEdit) === null || _a === void 0 ? void 0 : _a.applyFocusSelect();
+  }
+  /**
+   * Fecha a edição de título.
+   */
+  async cancelEdition() {
+    this._activeEditText = false;
+    this.ezEditLabelMode.emit(this._activeEditText);
+  }
+  observeCollapsedValue() {
+    this.ezChange.emit(this.value);
+  }
   /**
    * Retorna o tamanho configurado do texto e do ícone.
    */
@@ -37,15 +61,66 @@ export class EzCollapsibleBox {
     const sizeCustom = sizeAlias.includes(sizeLowerCase) ? sizeLowerCase.replace('x', 'x-') : sizeLowerCase;
     return sizeList.includes(sizeCustom) ? sizeCustom : "small";
   }
+  removeElement() {
+    this._hostElement && this._hostElement.remove();
+    this.ezRemove.emit(this);
+  }
+  editLabel(evt) {
+    evt.preventDefault();
+    evt.stopPropagation();
+    this._activeEditText = true;
+    this.ezEditLabelMode.emit(this._activeEditText);
+  }
+  confirmRemove(evt) {
+    evt.preventDefault();
+    evt.stopPropagation();
+    ApplicationUtils.confirm("Aviso", `Deseja realmente remover o grupo <b>${this.label}</b>?`)
+      .then((canRemove) => {
+      if (canRemove) {
+        this.removeElement();
+      }
+    });
+  }
+  saveEditionText(editDetails) {
+    const { newValue } = editDetails.detail;
+    let canSave = true;
+    if (this.conditionalSave) {
+      canSave = this.conditionalSave(newValue);
+    }
+    if (this.label !== newValue && canSave) {
+      this.label = newValue;
+      this._activeEditText = false;
+      this.ezSaveEditLabel.emit(editDetails.detail);
+      this.ezEditLabelMode.emit(this._activeEditText);
+    }
+  }
+  getStyledLabel() {
+    if (this._refLabel == undefined) {
+      return;
+    }
+    let styledLabel = {
+      fontSize: window.getComputedStyle(this._refLabel).getPropertyValue('font-size'),
+      fontWeight: window.getComputedStyle(this._refLabel).getPropertyValue('font-weight'),
+      fontFamily: window.getComputedStyle(this._refLabel).getPropertyValue('font-family')
+    };
+    return styledLabel;
+  }
   render() {
     return (h("div", { class: "collapsible-box" },
       h("div", { class: "collapsible-box__header" },
-        h("button", { onClick: () => this.showHide(), class: "collapsible-box__title" +
+        h("button", Object.assign({}, (!this._activeEditText ? { onClick: () => { this.showHide(); } } : null), { class: "collapsible-box__title" +
             (this.iconPlacement === "right" ? " collapsible-box__title--icon-right" : "") +
             (this.stretchTitle ? " collapsible-box__title--stretched" : "") +
-            (this.value ? " collapsible-box__title--no-margin" : "") },
+            (this.value ? " collapsible-box__title--no-margin" : "") }),
           h("ez-icon", { slot: "icon", "icon-name": "chevron-right", size: this.getHeaderSize(), class: "collapsible-box__icon collapsible-box__icon--" + this.getHeaderSize() + (this.value ? " collapsible-box__icon--collapsed" : "") }),
-          h("label", { class: "collapsible-box__label font--" + this.getHeaderSize(), title: this.label }, this.label))),
+          !this._activeEditText ?
+            h("label", { class: "collapsible-box__label font--" + this.getHeaderSize(), title: this.label, ref: elem => this._refLabel = elem },
+              h("span", null, this.label),
+              this.editable &&
+                h("ez-icon", { slot: "icon", "icon-name": "edit", onClick: (evt) => this.editLabel(evt), title: "Editar" }),
+              this.removable &&
+                h("ez-icon", { slot: "icon", "icon-name": "delete", onClick: (evt) => this.confirmRemove(evt), title: "Remover" })) :
+            h("ez-text-edit", { class: "collapsible-box__text-edit", ref: ref => this._refTextEdit = ref, value: this.label, styled: this.getStyledLabel(), onSaveEdition: (ev) => this.saveEditionText(ev), onCancelEdition: () => this.cancelEdition() }))),
       h("div", { class: "collapsible-box__content" + (this.value ? "" : " collapsible-box__content--show") },
         h("slot", null))));
   }
@@ -146,8 +221,66 @@ export class EzCollapsibleBox {
       "attribute": "stretch-title",
       "reflect": true,
       "defaultValue": "false"
+    },
+    "removable": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Ativa o \u00EDcone para remo\u00E7\u00E3o do componente."
+      },
+      "attribute": "removable",
+      "reflect": true,
+      "defaultValue": "false"
+    },
+    "editable": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Ativa o \u00EDcone para edi\u00E7\u00E3o do componente."
+      },
+      "attribute": "editable",
+      "reflect": true,
+      "defaultValue": "false"
+    },
+    "conditionalSave": {
+      "type": "unknown",
+      "mutable": false,
+      "complexType": {
+        "original": "Function",
+        "resolved": "Function",
+        "references": {
+          "Function": {
+            "location": "global"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Define uma condi\u00E7\u00E3o para salvar ou n\u00E3o uma altera\u00E7\u00E3o."
+      }
     }
   }; }
+  static get states() { return {
+    "_activeEditText": {}
+  }; }
   static get events() { return [{
       "method": "ezChange",
       "name": "ezChange",
@@ -163,6 +296,59 @@ export class EzCollapsibleBox {
         "resolved": "boolean",
         "references": {}
       }
+    }, {
+      "method": "ezRemove",
+      "name": "ezRemove",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Evento disparado ao remover o componente (onEzRemove)."
+      },
+      "complexType": {
+        "original": "EzCollapsibleBox",
+        "resolved": "EzCollapsibleBox",
+        "references": {
+          "EzCollapsibleBox": {
+            "location": "global"
+          }
+        }
+      }
+    }, {
+      "method": "ezSaveEditLabel",
+      "name": "ezSaveEditLabel",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Evento disparado ao concluir edi\u00E7\u00E3o da label (onEzSaveEditLabel)."
+      },
+      "complexType": {
+        "original": "CustomEvent",
+        "resolved": "CustomEvent<any>",
+        "references": {
+          "CustomEvent": {
+            "location": "global"
+          }
+        }
+      }
+    }, {
+      "method": "ezEditLabelMode",
+      "name": "ezEditLabelMode",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Evento disparado quando o modo de edi\u00E7\u00E3o da label for aberto e fechado (onEzEditLabelMode)."
+      },
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      }
     }]; }
   static get methods() { return {
     "showHide": {
@@ -180,8 +366,41 @@ export class EzCollapsibleBox {
         "text": "Esconde ou revela o conte\u00FAdo do componente.",
         "tags": []
       }
+    },
+    "applyFocusTextEdit": {
+      "complexType": {
+        "signature": "() => Promise<void>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<void>"
+      },
+      "docs": {
+        "text": "Aplica focus no campo de edi\u00E7\u00E3o de t\u00EDtulo.",
+        "tags": []
+      }
+    },
+    "cancelEdition": {
+      "complexType": {
+        "signature": "() => Promise<void>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<void>"
+      },
+      "docs": {
+        "text": "Fecha a edi\u00E7\u00E3o de t\u00EDtulo.",
+        "tags": []
+      }
     }
   }; }
+  static get elementRef() { return "_hostElement"; }
   static get watchers() { return [{
       "propName": "value",
       "methodName": "observeCollapsedValue"

package/dist/collection/components/ez-combo-box/ez-combo-box.css

@@ -161,28 +161,6 @@ ez-icon {
   min-width: var(--ez-combo-box__list-scrollbar--width);
 }
 
-.list-options::-webkit-scrollbar-track {
-  background-color: #f0f2f5;
-
-  /*public*/
-  border-radius: var(--ez-combo-box__list-scrollbar--border-radius);
-}
-
-.list-options::-webkit-scrollbar-thumb {
-  /*public*/
-  background-color: var(--ez-combo-box__list-scrollbar--background-color);
-  border-radius: var(--ez-combo-box__list-scrollbar--border-radius);
-}
-
-.list-options::-webkit-scrollbar {
-  background-color: #f0f2f5;
-
-  /*public*/
-  width: var(--ez-combo-box__list-scrollbar--width);
-  max-width: var(--ez-combo-box__list-scrollbar--width);
-  min-width: var(--ez-combo-box__list-scrollbar--width);
-}
-
 .item {
   display: flex;
   align-items: center;
@@ -222,6 +200,7 @@ ez-icon {
 .item__value--hidden {
   visibility: hidden;
   position: absolute;
+  white-space: nowrap;
   z-index: -1;
   top: 0;
   left: 0;

package/dist/collection/components/ez-combo-box/ez-combo-box.js

@@ -130,11 +130,11 @@ export class EzComboBox {
     return 0;
   }
   getWidthValue(value) {
-    if (this._itemValueBasis) {
+    if (this._itemValueBasis != undefined) {
       const span = this._itemValueBasis;
-      if (value) {
+      if (value != undefined) {
         span.innerHTML = value;
-        return span.clientWidth > 0 ? (span.clientWidth + 1) : 0;
+        return span.clientWidth > 0 ? (span.clientWidth + 2) : 0;
       }
       else {
         span.innerHTML = "";
@@ -143,9 +143,10 @@ export class EzComboBox {
     return 0;
   }
   buildItem(opt, index) {
+    const widthValue = this.showOptionValue && this._maxWidthValue > 0 ? `${this._maxWidthValue}px` : '';
     return h("li", { class: index === this._preSelection ? "item preselected" : "item", id: `item_${opt.value}`, onMouseDown: () => this.selectOption(opt), onMouseOver: () => this._preSelection = undefined },
       this.showOptionValue
-        ? h("span", { class: "item__value", title: opt.value, style: { width: this.showOptionValue && this._maxWidthValue > 0 ? `${this._maxWidthValue}px` : '' } }, opt.value)
+        ? h("span", { class: "item__value", title: opt.value, style: { width: widthValue, minWidth: widthValue, maxWidth: widthValue } }, opt.value)
         : undefined,
       h("span", { class: "item__label", title: opt.label }, opt.label));
   }
@@ -246,6 +247,7 @@ export class EzComboBox {
     }
     else {
       this.setInputValue();
+      this.hideOptions();
     }
     if (this.searchMode) {
       this._visibleOptions = [];
@@ -258,7 +260,8 @@ export class EzComboBox {
     this._criteria = argument;
     this._startLoading = true;
     if (this.optionLoader) {
-      this.updateSource(this.optionLoader({ mode, argument }));
+      const searchArgument = { mode, argument };
+      this.updateSource(this.optionLoader(searchArgument));
     }
     else {
       this.updateSource(this.options);
@@ -463,10 +466,10 @@ export class EzComboBox {
       "type": "string",
       "mutable": true,
       "complexType": {
-        "original": "Option | string",
-        "resolved": "Option | string",
+        "original": "IOption | string",
+        "resolved": "IOption | string",
         "references": {
-          "Option": {
+          "IOption": {
             "location": "local"
           }
         }
@@ -519,13 +522,13 @@ export class EzComboBox {
       "type": "unknown",
       "mutable": true,
       "complexType": {
-        "original": "Array<Option>",
-        "resolved": "Option[]",
+        "original": "Array<IOption>",
+        "resolved": "IOption[]",
         "references": {
           "Array": {
             "location": "global"
           },
-          "Option": {
+          "IOption": {
             "location": "local"
           }
         }
@@ -717,10 +720,10 @@ export class EzComboBox {
         "text": "Evento que \u00E9 disparado ao alterar o valor do componente"
       },
       "complexType": {
-        "original": "Option",
-        "resolved": "Option",
+        "original": "IOption",
+        "resolved": "IOption",
         "references": {
-          "Option": {
+          "IOption": {
             "location": "local"
           }
         }

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

@@ -29,8 +29,8 @@ export class EzDateInput {
   }
   observeValue(newValue, oldValue) {
     if (this._textInput && newValue != oldValue) {
-      const newValueValidated = this.validateValue(newValue);
-      const oldValueValidated = this.validateValue(oldValue);
+      const newValueValidated = DateUtils.validateDate(newValue);
+      const oldValueValidated = DateUtils.validateDate(oldValue);
       if ((newValueValidated === null || newValueValidated === void 0 ? void 0 : newValueValidated.getTime()) !== (oldValueValidated === null || oldValueValidated === void 0 ? void 0 : oldValueValidated.getTime())) {
         const textValue = this.getTextValue(newValueValidated) || '';
         const parsedDate = DateUtils.strToDate(textValue);
@@ -63,8 +63,8 @@ export class EzDateInput {
     return typeof this.errorMessage === "string" && this.errorMessage.trim() !== "";
   }
   changeValue(newValue) {
-    const currentValue = this.validateValue(this.value);
-    const newValueValidated = this.validateValue(newValue);
+    const currentValue = DateUtils.validateDate(this.value);
+    const newValueValidated = DateUtils.validateDate(newValue);
     if ((currentValue === null || currentValue === void 0 ? void 0 : currentValue.getTime()) !== (newValueValidated === null || newValueValidated === void 0 ? void 0 : newValueValidated.getTime())) {
       this.value = newValueValidated;
     }
@@ -87,8 +87,8 @@ export class EzDateInput {
     const newValue = DateUtils.strToDate(strValue);
     if (newValue || !strValue) {
       this.errorMessage = "";
-      const currentValue = this.validateValue(this.value);
-      const newValueValidated = this.validateValue(newValue);
+      const currentValue = DateUtils.validateDate(this.value);
+      const newValueValidated = DateUtils.validateDate(newValue);
       if ((currentValue === null || currentValue === void 0 ? void 0 : currentValue.getTime()) === (newValueValidated === null || newValueValidated === void 0 ? void 0 : newValueValidated.getTime())) {
         if (newValueValidated) {
           this._textInput.value = this.getTextValue(newValueValidated) || '';
@@ -112,8 +112,8 @@ export class EzDateInput {
   handleInput(event) {
     const strValue = this._textInput.value;
     const newValue = DateUtils.strToDate(strValue);
-    const currentValue = this.validateValue(this.value);
-    const newValueValidated = this.validateValue(newValue);
+    const currentValue = DateUtils.validateDate(this.value);
+    const newValueValidated = DateUtils.validateDate(newValue);
     if ((currentValue === null || currentValue === void 0 ? void 0 : currentValue.getTime()) !== (newValueValidated === null || newValueValidated === void 0 ? void 0 : newValueValidated.getTime())) {
       this._focused = true;
       this.ezStartChange.emit({ waitmessage: "", blocking: false });
@@ -122,11 +122,6 @@ export class EzDateInput {
       this.changeValue(new Date());
     }
   }
-  validateValue(value) {
-    return value instanceof Date && !isNaN(value.valueOf())
-      ? DateUtils.clearTime(value)
-      : undefined;
-  }
   setInputValue() {
     const textValue = this.getTextValue(this.value) || '';
     if ((this._textInput.value || '') !== textValue) {

package/dist/collection/components/ez-date-time-input/ez-date-time-input.js

@@ -33,8 +33,8 @@ export class EzDateTimeInput {
   }
   observeValue(newValue, oldValue) {
     if (this._textInput && newValue != oldValue) {
-      const newValueValidated = this.validateValue(newValue);
-      const oldValueValidated = this.validateValue(oldValue);
+      const newValueValidated = DateUtils.validateDate(newValue, true);
+      const oldValueValidated = DateUtils.validateDate(oldValue, true);
       if ((newValueValidated === null || newValueValidated === void 0 ? void 0 : newValueValidated.getTime()) !== (oldValueValidated === null || oldValueValidated === void 0 ? void 0 : oldValueValidated.getTime())) {
         const textValue = this.getTextValue(newValueValidated) || '';
         const parsedDate = this.getParsedDateTime(textValue);
@@ -103,8 +103,8 @@ export class EzDateTimeInput {
     input.setSelectionRange(selectIni, selectFin);
   }
   changeValue(newValue) {
-    const currentValue = this.validateValue(this.value);
-    const newValueValidated = this.validateValue(newValue);
+    const currentValue = DateUtils.validateDate(this.value, true);
+    const newValueValidated = DateUtils.validateDate(newValue, true);
     if ((currentValue === null || currentValue === void 0 ? void 0 : currentValue.getTime()) !== (newValueValidated === null || newValueValidated === void 0 ? void 0 : newValueValidated.getTime())) {
       this.value = newValueValidated;
     }
@@ -133,8 +133,8 @@ export class EzDateTimeInput {
     const newValue = this.getParsedDateTime();
     if (newValue || !strValue) {
       this.errorMessage = "";
-      const currentValue = this.validateValue(this.value);
-      const newValueValidated = this.validateValue(newValue);
+      const currentValue = DateUtils.validateDate(this.value, true);
+      const newValueValidated = DateUtils.validateDate(newValue, true);
       if ((currentValue === null || currentValue === void 0 ? void 0 : currentValue.getTime()) === (newValueValidated === null || newValueValidated === void 0 ? void 0 : newValueValidated.getTime())) {
         if (newValueValidated) {
           this._textInput.value = this.getTextValue(newValueValidated) || '';
@@ -163,15 +163,10 @@ export class EzDateTimeInput {
     };
     return d ? (new Intl.DateTimeFormat('pt-BR', this.showSeconds ? optionsSecond : options).format(d)) : undefined;
   }
-  validateValue(value) {
-    return value instanceof Date && !isNaN(value.valueOf())
-      ? value
-      : undefined;
-  }
   handleInput(event) {
     const newValue = this.getParsedDateTime();
-    const currentValue = this.validateValue(this.value);
-    const newValueValidated = this.validateValue(newValue);
+    const currentValue = DateUtils.validateDate(this.value, true);
+    const newValueValidated = DateUtils.validateDate(newValue, true);
     if ((currentValue === null || currentValue === void 0 ? void 0 : currentValue.getTime()) !== (newValueValidated === null || newValueValidated === void 0 ? void 0 : newValueValidated.getTime())) {
       this._focused = true;
       this.ezStartChange.emit({ waitmessage: "", blocking: false });

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

@@ -1,5 +1,5 @@
 import { Component, h, Host, Prop, Element, forceUpdate, Method, Watch, Event } from "@stencil/core";
-import { DataUnit, Action, DataUnitAction } from "@sankhyalabs/core";
+import { DataUnit, Action, DataUnitAction, DateUtils } from "@sankhyalabs/core";
 import { FormSheet } from "./structure/FormSheet";
 import { buildFromConfig, buildFromDataUnit } from "./structure/FormSheetMetadata";
 import { createStore } from "redux";
@@ -101,7 +101,7 @@ export class EzForm {
   }
   processMetadata() {
     if (!this.isStatic() && this.dataUnit) {
-      const metadata = this.config && this.config.length > 0 ? buildFromConfig(this.config, this.dataUnit) : buildFromDataUnit(this.dataUnit);
+      const metadata = this.config != undefined ? buildFromConfig(this.config, this.dataUnit) : buildFromDataUnit(this.dataUnit);
       this._store.dispatch(loadMetadata(metadata));
     }
   }
@@ -109,6 +109,16 @@ export class EzForm {
     var _a;
     return ((_a = this._staticFields) === null || _a === void 0 ? void 0 : _a.length) > 0;
   }
+  getValidatedValue(value) {
+    switch (value) {
+      case "${data}":
+        return DateUtils.getToday();
+      case "${datahora}":
+        return DateUtils.getToday(true);
+      default:
+        return value;
+    }
+  }
   interceptAction(action) {
     if (action.type === Action.RECORDS_COPIED) {
       const metadata = selectFormMetadata(this._store.getState());
@@ -137,7 +147,9 @@ export class EzForm {
         return new DataUnitAction(Action.RECORDS_ADDED, records.map(record => {
           const newRecord = Object.assign({}, record);
           for (const field in defaultValues) {
-            newRecord[field] = this.dataUnit.valueFromString(field, defaultValues[field]);
+            const defaultValue = defaultValues[field].value;
+            const fieldValue = defaultValue != undefined ? defaultValue : defaultValues[field];
+            newRecord[field] = this.dataUnit.valueFromString(field, this.getValidatedValue(fieldValue));
           }
           return newRecord;
         }));
@@ -201,13 +213,10 @@ export class EzForm {
       "type": "unknown",
       "mutable": false,
       "complexType": {
-        "original": "Array<FieldConfig>",
-        "resolved": "FieldConfig[]",
+        "original": "IFormConfig",
+        "resolved": "IFormConfig",
         "references": {
-          "Array": {
-            "location": "global"
-          },
-          "FieldConfig": {
+          "IFormConfig": {
             "location": "local"
           }
         }
@@ -223,10 +232,10 @@ export class EzForm {
       "type": "unknown",
       "mutable": false,
       "complexType": {
-        "original": "RecordValidator",
-        "resolved": "RecordValidator",
+        "original": "IRecordValidator",
+        "resolved": "IRecordValidator",
         "references": {
-          "RecordValidator": {
+          "IRecordValidator": {
             "location": "local"
           }
         }
@@ -303,7 +312,7 @@ export class EzForm {
             "location": "import",
             "path": "@sankhyalabs/core"
           },
-          "ValidationResult": {
+          "IValidationResult": {
             "location": "local"
           }
         },

package/dist/collection/components/ez-form/fieldbuilder/FieldBuilder.js

@@ -41,7 +41,7 @@ export const buildField = (field) => {
     builder = uiBuilders.get(descriptor.userInterface);
   }
   if (config.required) {
-    config.label = `* ${config.label} (obrigatório)`;
+    config.label = `${config.label} (obrigatório) *`;
   }
   if (!builder) {
     builder = buildTextInput;