@sankhyalabs/ezui 1.1.75 → 1.1.78

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

@@ -0,0 +1,243 @@
+import { Component, Element, Host, h, Prop, Watch, Event } from '@stencil/core';
+import { DateUtils, TimeFormatter } from '@sankhyalabs/core';
+import CSSVarsUtils from '../../utils/CSSVarsUtils';
+export class EzDateTimeInput {
+  constructor() {
+    /**
+     * Deixa o campo disponível ou não para uso.
+     */
+    this.enabled = true;
+    /**
+  * Exibe ou não os segundos no input
+  */
+    this.showSeconds = false;
+  }
+  setLabel() {
+    this._textInput.label = this.label;
+  }
+  setErrorMessage() {
+    this._textInput.errorMessage = this.errorMessage;
+  }
+  applyValueToInput() {
+    if (this._textInput) {
+      this._textInput.value = this.getTextValue(this.value);
+    }
+  }
+  onChangeKeyDown(ev) {
+    const input = this._textInput.shadowRoot.querySelector('input');
+    if (ev.key === "H" || ev.key === "h") {
+      this.changeValue(new Date());
+    }
+    else if (ev.shiftKey && ev.key === "Tab") {
+      if (input.selectionStart > 0) {
+        let selectIni = input.value.lastIndexOf(" ", input.selectionStart);
+        if (selectIni !== -1) {
+          input.setSelectionRange(0, selectIni);
+          ev.preventDefault();
+        }
+      }
+    }
+    else if (ev.key === "Tab") {
+      if (input.value.length !== input.selectionEnd) {
+        let selectIni = input.value.indexOf(" ", input.selectionEnd);
+        selectIni = selectIni === -1 ? input.selectionEnd : selectIni + 1;
+        input.setSelectionRange(selectIni, input.value.length);
+        ev.preventDefault();
+      }
+    }
+  }
+  onFocused() {
+    const input = this._textInput.shadowRoot.querySelector('input');
+    if (input.selectionStart !== input.selectionEnd) {
+      let selectIni = input.value.indexOf(" ", input.selectionStart);
+      selectIni = selectIni === -1 ? input.value.length : selectIni;
+      input.setSelectionRange(0, selectIni);
+    }
+  }
+  onClicked() {
+    const input = this._textInput.shadowRoot.querySelector('input');
+    let selectIni = input.value.lastIndexOf(" ", input.selectionEnd);
+    selectIni = selectIni === -1 ? 0 : selectIni + 1;
+    selectIni = selectIni > input.selectionEnd ? 0 : selectIni;
+    let selectFin = selectIni === 0 ? input.value.indexOf(" ") : input.value.length;
+    input.setSelectionRange(selectIni, selectFin);
+  }
+  changeValue(newValue) {
+    this._textInput.errorMessage = "";
+    if (newValue !== this.value) {
+      this.value = newValue;
+      this.ezChange.emit();
+    }
+  }
+  showCalendar() {
+    const top = this._textInput.errorMessage ? 0 : -17;
+    this._calendar.fitVertical(top, this._elem.clientHeight);
+    this._calendar.style.visibility = 'inherit';
+  }
+  parseDate() {
+    const strValue = this._textInput.value;
+    const partsDateTime = (strValue && strValue.length > 0) ? strValue.split(" ") : [];
+    const onlyDate = partsDateTime.length > 0 ? partsDateTime[0] : strValue;
+    const onlyTime = partsDateTime[1] ? partsDateTime[1] : "";
+    const parsedTime = TimeFormatter.prepareValue(onlyTime, this.showSeconds);
+    const strDateTime = onlyDate + (parsedTime && " " + parsedTime);
+    const parsedDate = DateUtils.strToDate(strDateTime);
+    if (parsedDate || !strValue) {
+      if (this.value === parsedDate) {
+        this.changeValue(this.value);
+      }
+      else {
+        this.changeValue(parsedDate);
+      }
+    }
+    else {
+      this._textInput.errorMessage = "O valor digitado não é uma data válida";
+    }
+  }
+  getTextValue(d) {
+    const options = {
+      year: 'numeric', month: 'numeric', day: 'numeric',
+      hour: 'numeric', minute: 'numeric'
+    };
+    const optionsSecond = {
+      year: 'numeric', month: 'numeric', day: 'numeric',
+      hour: 'numeric', minute: 'numeric', second: 'numeric'
+    };
+    return d ? (new Intl.DateTimeFormat('pt-BR', this.showSeconds ? optionsSecond : options).format(d)) : null;
+  }
+  componentDidLoad() {
+    CSSVarsUtils.applyVarsTextInput(this._elem, this._textInput);
+  }
+  render() {
+    return (h(Host, null,
+      h("ez-text-input", { ref: elem => this._textInput = elem, onBlur: () => this.parseDate(), onKeyDown: event => { this.onChangeKeyDown(event); }, label: this.label, onEzChange: event => event.stopPropagation(), value: this.getTextValue(this.value), restrict: "0123456789/: ", enabled: this.enabled, errorMessage: this.errorMessage, onFocus: () => this.onFocused(), onClick: () => this.onClicked() },
+        h("button", { disabled: !this.enabled, tabindex: -1, class: "btn-open-cal", onClick: () => this.showCalendar(), slot: "leftIcon" })),
+      h("ez-calendar", { onEzChange: (event) => { this.changeValue(this._calendar.value); event.stopPropagation(); }, floating: true, ref: elem => this._calendar = elem, time: true, showSeconds: this.showSeconds })));
+  }
+  static get is() { return "ez-date-time-input"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["ez-date-time-input.css"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["ez-date-time-input.css"]
+  }; }
+  static get properties() { return {
+    "label": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "T\u00EDtulo do campo"
+      },
+      "attribute": "label",
+      "reflect": true
+    },
+    "value": {
+      "type": "unknown",
+      "mutable": true,
+      "complexType": {
+        "original": "Date",
+        "resolved": "Date",
+        "references": {
+          "Date": {
+            "location": "global"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "A data informada pelo usu\u00E1rio"
+      }
+    },
+    "enabled": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Deixa o campo dispon\u00EDvel ou n\u00E3o para uso."
+      },
+      "attribute": "enabled",
+      "reflect": true,
+      "defaultValue": "true"
+    },
+    "errorMessage": {
+      "type": "string",
+      "mutable": true,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Quando h\u00E1 um problema de valida\u00E7\u00E3o, serve como orienta\u00E7\u00E3o ao usu\u00E1rio"
+      },
+      "attribute": "error-message",
+      "reflect": true
+    },
+    "showSeconds": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Exibe ou n\u00E3o os segundos no input"
+      },
+      "attribute": "show-seconds",
+      "reflect": true,
+      "defaultValue": "false"
+    }
+  }; }
+  static get events() { return [{
+      "method": "ezChange",
+      "name": "ezChange",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Evento disparado ao mudar o estado do componente(onEzChange)."
+      },
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      }
+    }]; }
+  static get elementRef() { return "_elem"; }
+  static get watchers() { return [{
+      "propName": "label",
+      "methodName": "setLabel"
+    }, {
+      "propName": "errorMessage",
+      "methodName": "setErrorMessage"
+    }, {
+      "propName": "value",
+      "methodName": "applyValueToInput"
+    }]; }
+}

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

@@ -1,11 +1,11 @@
-import { Component, h, Element, forceUpdate, Prop, Method, Watch } from '@stencil/core';
-import { createStore, applyMiddleware, combineReducers } from 'redux';
-import thunk from 'redux-thunk';
-import { formLoad, invalidField, showHideNavigationButtons } from './store/Form.actions';
-import undoable from 'redux-undo';
-import formReducer, { formNonHistoricReducer } from './store/Form.reducer';
-import { FormSheet } from './subcomponents/structure/FormSheet';
-import DataUnit from './subcomponents/DataUnit';
+import { Component, h, Element, forceUpdate, Prop, Method, Watch } from "@stencil/core";
+import { createStore, applyMiddleware, combineReducers } from "redux";
+import thunk from "redux-thunk";
+import { formLoad, invalidField, showHideNavigationButtons } from "./store/Form.actions";
+import undoable from "redux-undo";
+import formReducer, { formNonHistoricReducer } from "./store/Form.reducer";
+import { FormSheet } from "./subcomponents/structure/FormSheet";
+import DataUnit from "./subcomponents/DataUnit";
 export class EzForm {
   constructor() {
     this.enabled = true;
@@ -19,8 +19,9 @@ export class EzForm {
     this._preparedMetadata = undefined;
   }
   async validate() {
+    const duSourcesNames = Array.from(this._duSources.keys());
     for (let i = 0; i < this._duSources.size; i++) {
-      const duName = Array.from(this._duSources.keys())[i];
+      const duName = duSourcesNames[i];
       let du = this._dataUnits.get(duName);
       if (du === undefined) {
         const source = this._duSources.get(duName);
@@ -34,8 +35,9 @@ export class EzForm {
   }
   async getChanges() {
     let allChanges = [];
+    const dataUnits = Array.from(this._dataUnits.values());
     for (let i = 0; i < this._dataUnits.size; i++) {
-      const du = Array.from(this._dataUnits.values())[i];
+      const du = dataUnits[i];
       //Só devemos buscar as alterações de DU raiz, pois os sub DUs serão enviados junto.
       if (!du.parentDU) {
         const duChanges = du.getChangesToSave();
@@ -53,15 +55,15 @@ export class EzForm {
     }
   }
   validateRecords(dataUnit, records, triggedBy) {
-    const result = { isValid: true, message: '' };
-    if (this.ignoresavevalidation && triggedBy === "SAVE") {
+    const result = { isValid: true, message: "" };
+    if (this.ignoreSaveValidation && triggedBy === "SAVE") {
       return result;
     }
     const validateField = (field) => {
       if (field.readOnly) {
         return false;
       }
-      if (field.userInterface === 'SWITCH' || field.userInterface === 'CHECKBOX') {
+      if (field.userInterface === "SWITCH" || field.userInterface === "CHECKBOX") {
         return false;
       }
       return true;
@@ -72,7 +74,7 @@ export class EzForm {
           const recordIndex = record["record__index"];
           const fieldName = field.name;
           const fieldValue = record[fieldName];
-          if (fieldValue === null || fieldValue === undefined || fieldValue === '') {
+          if (fieldValue === null || fieldValue === undefined || fieldValue === "") {
             const tabPosition = this._tabPositionByField.get(dataUnit.name + field.name);
             this._store.dispatch(invalidField(tabPosition.tabName, tabPosition.index, dataUnit.name, recordIndex, record.record__id, field.name, "Essa informação é obrigatória"));
             result.isValid = false;
@@ -99,7 +101,7 @@ export class EzForm {
     return result;
   }
   loadMDFromExecutor(callBack) {
-    const loadMetadataFunction = this.parseExecutor(this.metadataexecutor);
+    const loadMetadataFunction = this.parseExecutor(this.metadataExecutor);
     if (loadMetadataFunction) {
       const result = loadMetadataFunction();
       if (result) {
@@ -179,7 +181,7 @@ export class EzForm {
       });
       this._store = createStore(rootReducer, applyMiddleware(thunk));
       this._store.subscribe(() => { forceUpdate(this); });
-      if (this.slavemode) {
+      if (this.slaveMode) {
         this._store.dispatch(showHideNavigationButtons("saveVisible", false));
         this._store.dispatch(showHideNavigationButtons("cancelVisible", false));
         this._store.dispatch(showHideNavigationButtons("reloadVisible", false));
@@ -202,12 +204,12 @@ export class EzForm {
     this._duToLoad = [];
   }
   loadSearch(argument, context) {
-    const fieldSearchExecutor = this.parseExecutor(this.fieldsearchexecutor);
+    const fieldSearchExecutor = this.parseExecutor(this.fieldSearchExecutor);
     if (fieldSearchExecutor) {
       return fieldSearchExecutor(argument, context);
     }
     else {
-      return [{ value: 0, label: 'Sem resultados' }];
+      return [{ value: 0, label: "Sem resultados" }];
     }
   }
   buildDataUnit(dataUnit, parentDataUnit) {
@@ -234,9 +236,9 @@ export class EzForm {
   }
   decorateDU(dataUnit) {
     dataUnit.store = this._store;
-    dataUnit.loadExecutor = this.parseExecutor(this.loadexecutor);
-    dataUnit.saveExecutor = this.parseExecutor(this.saveexecutor);
-    dataUnit.removeExecutor = this.parseExecutor(this.removeexecutor);
+    dataUnit.loadExecutor = this.parseExecutor(this.loadExecutor);
+    dataUnit.saveExecutor = this.parseExecutor(this.saveExecutor);
+    dataUnit.removeExecutor = this.parseExecutor(this.removeExecutor);
     dataUnit.recordsValidator = this;
   }
   render() {
@@ -256,7 +258,7 @@ export class EzForm {
   }; }
   static get assetsDirs() { return ["assets"]; }
   static get properties() { return {
-    "metadataexecutor": {
+    "metadataExecutor": {
       "type": "string",
       "mutable": false,
       "complexType": {
@@ -274,10 +276,10 @@ export class EzForm {
         "tags": [],
         "text": ""
       },
-      "attribute": "metadataexecutor",
+      "attribute": "metadata-executor",
       "reflect": false
     },
-    "loadexecutor": {
+    "loadExecutor": {
       "type": "string",
       "mutable": false,
       "complexType": {
@@ -295,10 +297,10 @@ export class EzForm {
         "tags": [],
         "text": ""
       },
-      "attribute": "loadexecutor",
+      "attribute": "load-executor",
       "reflect": false
     },
-    "saveexecutor": {
+    "saveExecutor": {
       "type": "string",
       "mutable": false,
       "complexType": {
@@ -316,10 +318,10 @@ export class EzForm {
         "tags": [],
         "text": ""
       },
-      "attribute": "saveexecutor",
+      "attribute": "save-executor",
       "reflect": false
     },
-    "removeexecutor": {
+    "removeExecutor": {
       "type": "string",
       "mutable": false,
       "complexType": {
@@ -337,10 +339,10 @@ export class EzForm {
         "tags": [],
         "text": ""
       },
-      "attribute": "removeexecutor",
+      "attribute": "remove-executor",
       "reflect": false
     },
-    "fieldsearchexecutor": {
+    "fieldSearchExecutor": {
       "type": "string",
       "mutable": false,
       "complexType": {
@@ -358,10 +360,10 @@ export class EzForm {
         "tags": [],
         "text": ""
       },
-      "attribute": "fieldsearchexecutor",
+      "attribute": "field-search-executor",
       "reflect": false
     },
-    "ignoresavevalidation": {
+    "ignoreSaveValidation": {
       "type": "boolean",
       "mutable": false,
       "complexType": {
@@ -375,7 +377,7 @@ export class EzForm {
         "tags": [],
         "text": ""
       },
-      "attribute": "ignoresavevalidation",
+      "attribute": "ignore-save-validation",
       "reflect": false
     },
     "metadata": {
@@ -401,7 +403,7 @@ export class EzForm {
         "text": ""
       }
     },
-    "slavemode": {
+    "slaveMode": {
       "type": "boolean",
       "mutable": false,
       "complexType": {
@@ -415,7 +417,7 @@ export class EzForm {
         "tags": [],
         "text": ""
       },
-      "attribute": "slavemode",
+      "attribute": "slave-mode",
       "reflect": false
     },
     "enabled": {

package/dist/collection/components/ez-form/store/Form.actions.js

@@ -1,18 +1,18 @@
 export function changeFieldValue(dataUnit, recordId, fieldName, value) {
   return {
-    type: 'FORM/CHANGEFIELD',
+    type: "FORM/CHANGEFIELD",
     payload: { dataUnit, recordId, fieldName, value }
   };
 }
 export function changeTab(formId, index) {
   return {
-    type: 'FORM/CHANGETAB',
+    type: "FORM/CHANGETAB",
     payload: { formId, index }
   };
 }
 export function clearEdition(dataUnit, recordsLimit) {
   return {
-    type: 'FORM/CLEAREDITION',
+    type: "FORM/CLEAREDITION",
     payload: {
       dataUnit,
       recordsLimit
@@ -21,13 +21,13 @@ export function clearEdition(dataUnit, recordsLimit) {
 }
 export function collapseExpandGroup(collapseId, collapsed) {
   return {
-    type: 'FORM/COLLAPSEGROUP',
+    type: "FORM/COLLAPSEGROUP",
     payload: { collapseId, collapsed }
   };
 }
 export function previousRecord(dataUnit) {
   return {
-    type: 'FORM/NAVIGATE',
+    type: "FORM/NAVIGATE",
     payload: {
       dataUnit,
       limit: 0,
@@ -37,7 +37,7 @@ export function previousRecord(dataUnit) {
 }
 export function nextRecord(dataUnit, limit) {
   return {
-    type: 'FORM/NAVIGATE',
+    type: "FORM/NAVIGATE",
     payload: {
       dataUnit,
       limit,
@@ -47,7 +47,7 @@ export function nextRecord(dataUnit, limit) {
 }
 export function insertRecord(dataUnit, insertionIndex) {
   return {
-    type: 'FORM/INSERT',
+    type: "FORM/INSERT",
     payload: {
       dataUnit,
       insertionIndex
@@ -56,12 +56,12 @@ export function insertRecord(dataUnit, insertionIndex) {
 }
 export function formLoad() {
   return {
-    type: 'FORM/LOAD'
+    type: "FORM/LOAD"
   };
 }
 export function dataLoading(dataUnit) {
   return {
-    type: 'FORM/DATALOADING',
+    type: "FORM/DATALOADING",
     payload: {
       dataUnit
     }
@@ -69,7 +69,7 @@ export function dataLoading(dataUnit) {
 }
 export function savingChanges(dataUnit) {
   return {
-    type: 'FORM/SAVINGCHANGES',
+    type: "FORM/SAVINGCHANGES",
     payload: {
       dataUnit
     }
@@ -77,7 +77,7 @@ export function savingChanges(dataUnit) {
 }
 export function dataLoaded(dataUnit) {
   return {
-    type: 'FORM/DATALOADED',
+    type: "FORM/DATALOADED",
     payload: {
       dataUnit
     }
@@ -85,7 +85,7 @@ export function dataLoaded(dataUnit) {
 }
 export function changesSaved(dataUnit) {
   return {
-    type: 'FORM/CHANGESSAVED',
+    type: "FORM/CHANGESSAVED",
     payload: {
       dataUnit
     }
@@ -93,7 +93,7 @@ export function changesSaved(dataUnit) {
 }
 export function removingRecord(dataUnit) {
   return {
-    type: 'FORM/REMOVINGRECORD',
+    type: "FORM/REMOVINGRECORD",
     payload: {
       dataUnit
     }
@@ -101,7 +101,7 @@ export function removingRecord(dataUnit) {
 }
 export function recordRemoved(dataUnit) {
   return {
-    type: 'FORM/RECORDREMOVED',
+    type: "FORM/RECORDREMOVED",
     payload: {
       dataUnit
     }
@@ -109,7 +109,7 @@ export function recordRemoved(dataUnit) {
 }
 export function invalidField(tabController, tabIndex, dataUnit, recordIndex, recordId, fieldName, errorMessage) {
   return {
-    type: 'FORM/INVALIDFIELD',
+    type: "FORM/INVALIDFIELD",
     payload: {
       tabController,
       tabIndex,
@@ -123,7 +123,7 @@ export function invalidField(tabController, tabIndex, dataUnit, recordIndex, rec
 }
 export function showHideNavigationButtons(buttonName, status) {
   return {
-    type: 'FORM/SHOWHIDENAVBTN',
+    type: "FORM/SHOWHIDENAVBTN",
     payload: {
       buttonName,
       status

package/dist/collection/components/ez-form/store/Form.reducer.js

@@ -20,19 +20,19 @@ const inicialNonHistState = {
 };
 export default function formReducer(state = inicialHistState, action) {
   switch (action.type) {
-    case 'FORM/COLLAPSEGROUP':
+    case "FORM/COLLAPSEGROUP":
       return collapseGroup(state, action.payload);
-    case 'FORM/CHANGETAB':
+    case "FORM/CHANGETAB":
       return changeTab(state, action.payload.formId, action.payload.index);
-    case 'FORM/NAVIGATE':
+    case "FORM/NAVIGATE":
       return navigate(state, action.payload);
-    case 'FORM/INSERT':
+    case "FORM/INSERT":
       return insertRecord(state, action.payload);
-    case 'FORM/CHANGEFIELD':
+    case "FORM/CHANGEFIELD":
       return changeFieldValue(state, action.payload);
-    case 'FORM/CLEAREDITION':
+    case "FORM/CLEAREDITION":
       return clearEdition(state, action.payload);
-    case 'FORM/INVALIDFIELD':
+    case "FORM/INVALIDFIELD":
       return navigateToInvalid(state, action.payload);
     default:
       return state;
@@ -40,25 +40,25 @@ export default function formReducer(state = inicialHistState, action) {
 }
 export function formNonHistoricReducer(state = inicialNonHistState, action) {
   switch (action.type) {
-    case 'FORM/DATALOADING':
+    case "FORM/DATALOADING":
       return dataLoading(state, action.payload);
-    case 'FORM/DATALOADED':
+    case "FORM/DATALOADED":
       return dataLoaded(state, action.payload);
-    case 'FORM/SAVINGCHANGES':
+    case "FORM/SAVINGCHANGES":
       return savingChanges(state, action.payload);
-    case 'FORM/CHANGESSAVED':
+    case "FORM/CHANGESSAVED":
       return changesSaved(state, action.payload);
-    case 'FORM/REMOVINGRECORD':
+    case "FORM/REMOVINGRECORD":
       return removingRecord(state, action.payload);
-    case 'FORM/RECORDREMOVED':
+    case "FORM/RECORDREMOVED":
       return recordRemoved(state, action.payload);
-    case 'FORM/INVALIDFIELD':
+    case "FORM/INVALIDFIELD":
       return invalidField(state, action.payload);
-    case 'FORM/CLEAREDITION':
+    case "FORM/CLEAREDITION":
       return clearAllInvalidFields(state, action.payload);
-    case 'FORM/CHANGEFIELD':
+    case "FORM/CHANGEFIELD":
       return clearInvalidField(state, action.payload);
-    case 'FORM/SHOWHIDENAVBTN':
+    case "FORM/SHOWHIDENAVBTN":
       return showHideNavBtn(state, action.payload);
     default:
       return state;