@sankhyalabs/ezui 1.1.4 → 1.1.8

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

@@ -0,0 +1,39 @@
+:host {
+  display: block;
+  width: 100%;
+  --it__input--background-color: var(--background--medium, #e0e0e0);
+  --it__input--border-color: var(--it__input--background-color);
+}
+
+.text-input{
+  --it__input--background-color: inherit;
+  --it__input--border-color: inherit;
+}
+
+.btn-open-cal{
+  outline: none;
+  border: none;
+  background-color: unset;
+  cursor: pointer;
+}
+
+.btn-open-cal:disabled{
+  cursor: unset;
+}
+
+.btn-open-cal::after{
+  content: '';
+  display: flex;
+  background-color: var(--text--primary, #008561);
+  width: 15px;
+  height: 16px;
+  clip-path: path("M 3.171875,5.25 C 2.6485088,5.25 2.21875,5.6797588 2.21875,6.203125 2.21875,6.7264912 2.6485088,7.15625 3.171875,7.15625 3.6952412,7.15625 4.125,6.7264912 4.125,6.203125 4.125,5.6797588 3.6952412,5.25 3.171875,5.25 Z m 2.875,0 C 5.5235088,5.25 5.09375,5.6797588 5.09375,6.203125 5.09375,6.7264912 5.5235088,7.15625 6.046875,7.15625 6.5702412,7.15625 7,6.7264912 7,6.203125 7,5.6797588 6.5702412,5.25 6.046875,5.25 Z m 2.875,0 c -0.5233662,0 -0.953125,0.4297588 -0.953125,0.953125 0,0.5233662 0.4297588,0.953125 0.953125,0.953125 0.5233662,0 0.9511719,-0.4297588 0.9511719,-0.953125 C 9.8730469,5.6797588 9.4452412,5.25 8.921875,5.25 Z m 2.873047,0 c -0.523366,0 -0.953125,0.4297588 -0.953125,0.953125 0,0.5233662 0.429759,0.953125 0.953125,0.953125 0.523366,0 0.953125,-0.4297588 0.953125,-0.953125 C 12.748047,5.6797588 12.318288,5.25 11.794922,5.25 Z M 3.171875,8.1230469 c -0.5233662,0 -0.953125,0.4297588 -0.953125,0.953125 0,0.5233662 0.4297588,0.9531251 0.953125,0.9531251 0.5233662,0 0.953125,-0.4297589 0.953125,-0.9531251 0,-0.5233662 -0.4297588,-0.953125 -0.953125,-0.953125 z m 2.875,0 c -0.5233662,0 -0.953125,0.4297588 -0.953125,0.953125 0,0.5233662 0.4297588,0.9531251 0.953125,0.9531251 C 6.5702412,10.029297 7,9.5995381 7,9.0761719 7,8.5528057 6.5702412,8.1230469 6.046875,8.1230469 Z m 2.8554688,0 c -0.5233663,0 -0.953125,0.4297588 -0.953125,0.953125 0,0.5233662 0.4297587,0.9531251 0.953125,0.9531251 0.5233661,0 0.9531249,-0.4297589 0.953125,-0.9531251 0,-0.5233662 -0.4297588,-0.953125 -0.953125,-0.953125 z m 2.9003902,0 c -0.523366,0 -0.953125,0.4297588 -0.953125,0.953125 0,0.5233662 0.429759,0.9531251 0.953125,0.9531251 0.523367,0 0.953125,-0.4297589 0.953125,-0.9531251 0,-0.5233662 -0.429758,-0.953125 -0.953125,-0.953125 z M 3.171875,10.998047 c -0.5233662,0 -0.953125,0.429759 -0.953125,0.953125 0,0.523366 0.4297588,0.953125 0.953125,0.953125 0.5233662,0 0.953125,-0.429759 0.953125,-0.953125 0,-0.523366 -0.4297588,-0.953125 -0.953125,-0.953125 z m 2.875,0 c -0.5233662,0 -0.953125,0.429759 -0.953125,0.953125 0,0.523366 0.4297588,0.953125 0.953125,0.953125 C 6.5702412,12.904297 7,12.474538 7,11.951172 7,11.427806 6.5702412,10.998047 6.046875,10.998047 Z m 2.8554688,0 c -0.5233663,0 -0.953125,0.429759 -0.953125,0.953125 0,0.523366 0.4297587,0.953125 0.953125,0.953125 0.5233661,0 0.9531249,-0.429759 0.953125,-0.953125 0,-0.523366 -0.4297588,-0.953125 -0.953125,-0.953125 z m 2.9003902,0 c -0.523366,0 -0.953125,0.429759 -0.953125,0.953125 0,0.523366 0.429759,0.953125 0.953125,0.953125 0.523367,0 0.953125,-0.429759 0.953125,-0.953125 0,-0.523366 -0.429758,-0.953125 -0.953125,-0.953125 z M 3.5,0 c -0.554,0 -1,0.446 -1,1 v 0.050781 C 1.0853217,1.2909766 0,2.5186658 0,4 v 9 c 0,1.652487 1.3475134,3 3,3 h 9 c 1.652487,0 3,-1.347513 3,-3 V 4 C 15,2.5186658 13.914678,1.2909766 12.5,1.0507812 V 1 c 0,-0.554 -0.446,-1 -1,-1 -0.554,0 -1,0.446 -1,1 h -2 c 0,-0.554 -0.446,-1 -1,-1 -0.554,0 -1,0.446 -1,1 h -2 C 4.5,0.446 4.054,0 3.5,0 Z m 1,2.0996094 h 2 v 0.640625 c 0,0.554 0.446,1 1,1 0.554,0 1,-0.446 1,-1 v -0.640625 h 2 v 0.640625 c 0,0.554 0.446,1 1,1 0.554,0 1,-0.446 1,-1 V 2.1738281 C 13.311725,2.3905225 13.900391,3.11278 13.900391,4 v 9 c 0,1.062113 -0.838278,1.900391 -1.900391,1.900391 H 3 C 1.9378864,14.900391 1.0996094,14.062113 1.0996094,13 V 4 C 1.0996094,3.11278 1.6882747,2.3905225 2.5,2.1738281 v 0.5664063 c 0,0.554 0.446,1 1,1 0.554,0 1,-0.446 1,-1 z");
+}
+
+.btn-open-cal:disabled:after{
+  background-color: var(--text--disable, #AFB6C0);
+}
+
+.btn-open-cal:enabled:hover::after{
+  background-color: var(--color--primary, #4e4e4e);
+}

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

@@ -0,0 +1,172 @@
+import { Component, Host, h, Prop, Watch, Event } from '@stencil/core';
+import { DateUtils } from '@sankhyalabs/core';
+export class EzDateInput {
+  constructor() {
+    /**
+     * Deixa o campo disponível ou não para uso.
+     */
+    this.enabled = true;
+  }
+  setLabel() {
+    this._textInput.label = this.label;
+  }
+  setErrorMessage() {
+    this._textInput.errormessage = this.errormessage;
+  }
+  applyValueToInput() {
+    this._textInput.value = this.getTextValue(this.value);
+  }
+  changeValue(newValue) {
+    newValue = newValue == null ? null : DateUtils.clearTime(newValue);
+    this._textInput.errormessage = "";
+    if (this.getTextValue(newValue) !== this.getTextValue(this.value)) {
+      this.value = newValue;
+      this.ezChange.emit();
+    }
+  }
+  showCalendar() {
+    this.parseDate();
+    this._calendar.value = this.value;
+    //FIXME: Provavelmente isso fará com que o popup abra em uma 
+    //posição errada no futuro. Preferi fazer simples no começo,
+    //porque não quis onerar o text input com essa funcionalidade...
+    const top = this._textInput.errormessage ? '0px' : '-17px';
+    this._calendar.show(top);
+  }
+  hideCalendar() {
+    this.changeValue(this._calendar.value);
+    this._calendar.hide();
+  }
+  parseDate() {
+    const strValue = this._textInput.value;
+    const parsedDate = DateUtils.strToDate(strValue);
+    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) {
+    return d ? new Intl.DateTimeFormat('pt-BR').format(d) : null;
+  }
+  render() {
+    return (h(Host, null,
+      h("ez-text-input", { class: "text-input", ref: elem => this._textInput = elem, onBlur: () => this.parseDate(), onKeyDown: event => { if (event.key === 'H' || event.key === 'h')
+          this.changeValue(new Date()); }, label: this.label, onEzChange: event => event.stopPropagation(), value: this.getTextValue(this.value), restrict: "0123456789/", enabled: this.enabled, errormessage: this.errormessage },
+        h("button", { disabled: !this.enabled, tabindex: -1, class: "btn-open-cal", onClick: () => this.showCalendar(), slot: "leftIcon" })),
+      h("ez-calendar", { onEzChange: (event) => { this.hideCalendar(); event.stopPropagation(); }, floating: true, ref: elem => this._calendar = elem })));
+  }
+  static get is() { return "ez-date-input"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["ez-date-input.css"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["ez-date-input.css"]
+  }; }
+  static get properties() { return {
+    "label": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Label \u00E9 o 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": "errormessage",
+      "reflect": true
+    }
+  }; }
+  static get events() { return [{
+      "method": "ezChange",
+      "name": "ezChange",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      }
+    }]; }
+  static get watchers() { return [{
+      "propName": "label",
+      "methodName": "setLabel"
+    }, {
+      "propName": "errormessage",
+      "methodName": "setErrorMessage"
+    }, {
+      "propName": "value",
+      "methodName": "applyValueToInput"
+    }]; }
+}

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

@@ -0,0 +1,19 @@
+ez-form {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+}
+
+.form-sheet {
+  display: flex;
+  width: 100%;
+  flex-wrap: wrap;
+  position: relative;
+}
+
+.tab__container {
+  display: flex;
+  width: 100%;
+  flex-wrap: wrap;
+  position: relative;
+}

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

@@ -0,0 +1,368 @@
+import { Component, h, Element, forceUpdate, Prop, Method } 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._dataUnits = [];
+    this._requiredFieldsByDU = {};
+  }
+  async validate() {
+    for (let i = 0; i < this._dataUnits.length; i++) {
+      if (!this._dataUnits[i].validateRecords()) {
+        return false;
+      }
+    }
+  }
+  async getChanges() {
+    let allChanges = [];
+    for (let i = 0; i < this._dataUnits.length; i++) {
+      const duChanges = this._dataUnits[i].getChangesToSave();
+      if (duChanges) {
+        allChanges = allChanges.concat(duChanges);
+      }
+    }
+    return allChanges;
+  }
+  validateRecords(dataUnit, records) {
+    const result = { isValid: true, message: '' };
+    const reqFields = this._requiredFieldsByDU[dataUnit.name];
+    const recordValidator = record => {
+      reqFields.forEach(field => {
+        const recordIndex = record["record__index"];
+        const fieldName = field.name;
+        const fieldValue = record[fieldName];
+        if (fieldValue === null || fieldValue === undefined || fieldValue === '') {
+          this._store.dispatch(invalidField(field.tabControler, field.tabIndex, dataUnit.name, recordIndex, record.record__id, field.name, "Essa informação é obrigatória"));
+          result.isValid = false;
+          result.message = "Há pelo menos um campo obrigatório não preenchido.";
+        }
+      });
+    };
+    if (records.length == 0) {
+      recordValidator({});
+    }
+    else {
+      records.forEach(recordValidator);
+    }
+    return result;
+  }
+  componentWillRender() {
+    if (this._store === undefined) {
+      const rootReducer = combineReducers({
+        "hist": undoable(formReducer),
+        "nonhist": formNonHistoricReducer
+      });
+      this._store = createStore(rootReducer, applyMiddleware(thunk));
+      this._store.subscribe(() => { forceUpdate(this); });
+      if (this.slavemode) {
+        this._store.dispatch(showHideNavigationButtons("saveVisible", false));
+        this._store.dispatch(showHideNavigationButtons("cancelVisible", false));
+        this._store.dispatch(showHideNavigationButtons("reloadVisible", false));
+      }
+    }
+  }
+  loadMDFromExecutor(callBack) {
+    if (this._loadMetadataFunction) {
+      const result = this._loadMetadataFunction();
+      if (result) {
+        if (result instanceof Promise) {
+          result.then(md => {
+            callBack(md);
+          });
+        }
+        else {
+          callBack(result);
+        }
+      }
+    }
+  }
+  loadMDFromElement(callBack) {
+    const metadata = [];
+    Array.from(this._host.children).forEach(elem => {
+      if (elem.tagName === "FORM-METADATA") {
+        const formMetadata = elem;
+        metadata.push(formMetadata.metadata);
+      }
+    });
+    callBack(metadata.length > 0 ? metadata : null);
+  }
+  updateMetadata(metadata) {
+    if (metadata) {
+      const processFields = (duName, form, tabController, tabIndex) => {
+        var _a;
+        let requiredFields = this._requiredFieldsByDU[duName];
+        if (requiredFields === undefined) {
+          requiredFields = [];
+          this._requiredFieldsByDU[duName] = requiredFields;
+        }
+        form.items.forEach(item => {
+          if ("fields" in item) {
+            const fSet = item;
+            fSet.fields.forEach(f => {
+              f.tabControler = tabController;
+              f.tabIndex = tabIndex;
+              if (f.required) {
+                requiredFields.push(f);
+              }
+            });
+          }
+          else {
+            const f = item;
+            f.tabControler = tabController;
+            f.tabIndex = tabIndex;
+            if (f.required) {
+              requiredFields.push(f);
+            }
+          }
+        });
+        (_a = form.subForms) === null || _a === void 0 ? void 0 : _a.forEach((subForm, index) => {
+          const subDU = subForm.dataUnit ? subForm.dataUnit.name : duName;
+          processFields(subDU, subForm, form.name, index);
+        });
+      };
+      this.metadata = metadata;
+      metadata.map((form, index) => {
+        processFields(form.dataUnit.name, form, "__MAIN__FORM__", index);
+      });
+      this._store.dispatch(formLoad());
+    }
+  }
+  parseExecutor(executor) {
+    if (executor) {
+      return executor instanceof Function ? executor : eval(executor);
+    }
+    return null;
+  }
+  componentDidLoad() {
+    this._loadMetadataFunction = this.parseExecutor(this.metadataexecutor);
+    this._loadDataFunction = this.parseExecutor(this.loadexecutor);
+    this._saveFunction = this.parseExecutor(this.saveexecutor);
+    this._removeFunction = this.parseExecutor(this.removeexecutor);
+    this._fieldSearchFunction = this.parseExecutor(this.fieldsearchexecutor);
+    if (this.metadata) {
+      this.updateMetadata(this.metadata);
+    }
+    else {
+      this.loadMDFromElement((md) => this.updateMetadata(md));
+      if (!this.metadata) {
+        this.loadMDFromExecutor((md) => this.updateMetadata(md));
+      }
+    }
+  }
+  buildDataUnit(dataUnit) {
+    if (dataUnit) {
+      const { name, unitLabel, records, cardinality } = dataUnit;
+      if (!(dataUnit instanceof DataUnit)) {
+        dataUnit = new DataUnit(name, unitLabel, cardinality);
+        this._dataUnits.push(dataUnit);
+        if (records) {
+          dataUnit.records = records;
+        }
+        dataUnit.store = this._store;
+        dataUnit.loadExecutor = this._loadDataFunction;
+        dataUnit.saveExecutor = this._saveFunction;
+        dataUnit.removeExecutor = this._removeFunction;
+        dataUnit.recordsValidator = this;
+        dataUnit.fieldSearchExecutor = this._fieldSearchFunction;
+      }
+    }
+    return dataUnit;
+  }
+  render() {
+    return this.metadata ? h(FormSheet, { store: this._store, source: this.metadata, parentName: "__MAIN__FORM__", dataUnitBuilder: (du) => this.buildDataUnit(du) }) : null;
+  }
+  static get is() { return "ez-form"; }
+  static get originalStyleUrls() { return {
+    "$": ["ez-form.css"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["ez-form.css"]
+  }; }
+  static get properties() { return {
+    "metadataexecutor": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string | Function",
+        "resolved": "Function | string",
+        "references": {
+          "Function": {
+            "location": "global"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "metadataexecutor",
+      "reflect": false
+    },
+    "loadexecutor": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string | Function",
+        "resolved": "Function | string",
+        "references": {
+          "Function": {
+            "location": "global"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "loadexecutor",
+      "reflect": false
+    },
+    "saveexecutor": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string | Function",
+        "resolved": "Function | string",
+        "references": {
+          "Function": {
+            "location": "global"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "saveexecutor",
+      "reflect": false
+    },
+    "removeexecutor": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string | Function",
+        "resolved": "Function | string",
+        "references": {
+          "Function": {
+            "location": "global"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "removeexecutor",
+      "reflect": false
+    },
+    "fieldsearchexecutor": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string | Function",
+        "resolved": "Function | string",
+        "references": {
+          "Function": {
+            "location": "global"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "fieldsearchexecutor",
+      "reflect": false
+    },
+    "metadata": {
+      "type": "unknown",
+      "mutable": true,
+      "complexType": {
+        "original": "Array<Form>",
+        "resolved": "Form[]",
+        "references": {
+          "Array": {
+            "location": "global"
+          },
+          "Form": {
+            "location": "import",
+            "path": "./subcomponents/FormMetadata"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      }
+    },
+    "slavemode": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "slavemode",
+      "reflect": false
+    }
+  }; }
+  static get methods() { return {
+    "validate": {
+      "complexType": {
+        "signature": "() => Promise<boolean>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<boolean>"
+      },
+      "docs": {
+        "text": "",
+        "tags": []
+      }
+    },
+    "getChanges": {
+      "complexType": {
+        "signature": "() => Promise<any[]>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<any[]>"
+      },
+      "docs": {
+        "text": "",
+        "tags": []
+      }
+    }
+  }; }
+  static get elementRef() { return "_host"; }
+}