@sankhyalabs/ezui 0.0.0-bugfix-dev-KB-08202.0

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

@@ -0,0 +1,407 @@
+import { ElementIDUtils } from "@sankhyalabs/core";
+import { h } from "@stencil/core";
+import CSSVarsUtils from "../../utils/CSSVarsUtils";
+export class EzFilterInput {
+  constructor() {
+    this._searchingText = "";
+    this.handleFocus = () => {
+      if (this._searchingText === "") {
+        this._textInput.value = "";
+      }
+      else {
+        this._textInput.value = this._searchingText;
+      }
+      this.ezFocusIn.emit();
+    };
+    this.label = undefined;
+    this.value = undefined;
+    this.enabled = true;
+    this.errorMessage = undefined;
+    this.restrict = undefined;
+    this.mode = "regular";
+    this.asyncSearch = false;
+    this.canShowError = true;
+  }
+  observeLabel() {
+    if (this._textInput) {
+      this._textInput.label = this.label;
+    }
+  }
+  observeErrorMessage() {
+    if (this._textInput) {
+      this._textInput.errorMessage = this.errorMessage;
+    }
+  }
+  observeValue(newValue, oldValue) {
+    if (this._textInput && newValue != oldValue) {
+      this._textInput.value = newValue;
+      this.ezChange.emit(newValue);
+    }
+  }
+  /**
+   * Aplica o foco no campo.
+   */
+  async setFocus() {
+    this._textInput.setFocus();
+  }
+  /**
+   * Remove o foco do campo.
+   */
+  async setBlur() {
+    this._textInput.setBlur();
+  }
+  /**
+   * Retorna se o conteúdo é inválido.
+   */
+  async isInvalid() {
+    return typeof this.errorMessage === "string" && this.errorMessage.trim() !== "";
+  }
+  /**
+   * Método responsável por setar um novo valor ao campo.
+   */
+  async setValue(newValue) {
+    if (!this.asyncSearch || this._textInput == undefined) {
+      return;
+    }
+    if (newValue !== this.value) {
+      this.value = newValue;
+      this._searchingText = "";
+    }
+    else {
+      this._textInput.value = newValue;
+    }
+  }
+  /**
+   * Método responsável por resetar o valor do campo para o ultimo valor inputado.
+   */
+  async endSearch() {
+    if (!this.asyncSearch || this._textInput == undefined) {
+      return;
+    }
+    if (this._textInput.value !== this.value) {
+      this._textInput.value = this.value;
+    }
+  }
+  handleChange(evt) {
+    const newValue = evt.detail;
+    this.errorMessage = "";
+    if (this.asyncSearch) {
+      this._searchingText = newValue;
+      this.ezSearching.emit(newValue);
+    }
+    else if (newValue !== this.value) {
+      this.value = newValue;
+    }
+  }
+  componentDidLoad() {
+    CSSVarsUtils.applyVarsTextInput(this._elem, this._textInput);
+  }
+  render() {
+    ElementIDUtils.addIDInfoIfNotExists(this._elem, 'input');
+    return (h("ez-text-input", { "data-element-id": ElementIDUtils.getInternalIDInfo("textInput"), ref: elem => this._textInput = elem, label: this.label, onEzChange: evt => this.handleChange(evt), value: this.value, enabled: this.enabled, errorMessage: this.errorMessage, restrict: this.restrict, mode: this.mode, onFocusin: this.handleFocus, canShowError: this.canShowError }, h("ez-icon", { slot: "leftIcon", iconName: "search" })));
+  }
+  static get is() { return "ez-filter-input"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["ez-filter-input.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["ez-filter-input.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "label": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Texto a ser apresentado como t\u00EDtulo do campo."
+        },
+        "attribute": "label",
+        "reflect": false
+      },
+      "value": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Define o valor do campo."
+        },
+        "attribute": "value",
+        "reflect": true
+      },
+      "enabled": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Se false o usu\u00E1rio n\u00E3o pode interagir com o campo."
+        },
+        "attribute": "enabled",
+        "reflect": false,
+        "defaultValue": "true"
+      },
+      "errorMessage": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Define uma mensagem de orienta\u00E7\u00E3o ao usu\u00E1rio, colocando o campo em modo inv\u00E1lido."
+        },
+        "attribute": "error-message",
+        "reflect": true
+      },
+      "restrict": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Restringe o que o usu\u00E1rio pode digitar."
+        },
+        "attribute": "restrict",
+        "reflect": false
+      },
+      "mode": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "\"slim\" | \"regular\"",
+          "resolved": "\"regular\" | \"slim\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Define o tamanho do campo."
+        },
+        "attribute": "mode",
+        "reflect": true,
+        "defaultValue": "\"regular\""
+      },
+      "asyncSearch": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Define se o campo ir\u00E1 funcionar de forma ass\u00EDncrona."
+        },
+        "attribute": "async-search",
+        "reflect": true,
+        "defaultValue": "false"
+      },
+      "canShowError": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Se false deixa de exibir a mensagem de erro dentro do campo."
+        },
+        "attribute": "can-show-error",
+        "reflect": true,
+        "defaultValue": "true"
+      }
+    };
+  }
+  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 valor do campo."
+        },
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        }
+      }, {
+        "method": "ezSearching",
+        "name": "ezSearching",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Emitido quando est\u00E1 sendo realizada uma pesquisa no modo asyncSearch."
+        },
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        }
+      }, {
+        "method": "ezFocusIn",
+        "name": "ezFocusIn",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Emitido quando acontece o foco no campo."
+        },
+        "complexType": {
+          "original": "void",
+          "resolved": "void",
+          "references": {}
+        }
+      }];
+  }
+  static get methods() {
+    return {
+      "setFocus": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "Aplica o foco no campo.",
+          "tags": []
+        }
+      },
+      "setBlur": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "Remove o foco do campo.",
+          "tags": []
+        }
+      },
+      "isInvalid": {
+        "complexType": {
+          "signature": "() => Promise<boolean>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<boolean>"
+        },
+        "docs": {
+          "text": "Retorna se o conte\u00FAdo \u00E9 inv\u00E1lido.",
+          "tags": []
+        }
+      },
+      "setValue": {
+        "complexType": {
+          "signature": "(newValue: string) => Promise<void>",
+          "parameters": [{
+              "tags": [],
+              "text": ""
+            }],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "M\u00E9todo respons\u00E1vel por setar um novo valor ao campo.",
+          "tags": []
+        }
+      },
+      "endSearch": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "M\u00E9todo respons\u00E1vel por resetar o valor do campo para o ultimo valor inputado.",
+          "tags": []
+        }
+      }
+    };
+  }
+  static get elementRef() { return "_elem"; }
+  static get watchers() {
+    return [{
+        "propName": "label",
+        "methodName": "observeLabel"
+      }, {
+        "propName": "errorMessage",
+        "methodName": "observeErrorMessage"
+      }, {
+        "propName": "value",
+        "methodName": "observeValue"
+      }];
+  }
+}

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

@@ -0,0 +1,10 @@
+:host {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+}
+
+.dynamic-content ez-collapsible-box {
+  --ez-collapsible-box__header--padding-right: var(--space-small, 6px);
+  --ez-collapsible-box__header--padding-left: var(--space-small, 6px);
+}

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

@@ -0,0 +1,237 @@
+import { Action, DataUnit, ElementIDUtils, StringUtils } from "@sankhyalabs/core";
+import { Host, forceUpdate, h } from "@stencil/core";
+import { createStore } from "redux";
+import { changeTab, formReducer, loadMetadata, selectCurrentSheet, selectFormMetadata } from "./store/form.slice";
+import { buildFormMetadata } from "../../utils/form/FormMetadata";
+import DataBinder from "../../utils/form/DataBinder";
+export class EzForm {
+  constructor() {
+    this.onDataUnitAction = (action) => {
+      if (action.type === Action.METADATA_LOADED) {
+        this.processMetadata();
+      }
+    };
+    this.dataUnit = undefined;
+    this.config = undefined;
+    this.recordsValidator = undefined;
+  }
+  /**
+   * Realiza validação no conteúdo de todos os campos.
+   */
+  validate() {
+    return this._dataBinder.validate();
+  }
+  observeConfig() {
+    this.processMetadata();
+  }
+  getDynamicContent() {
+    var _a;
+    const formMD = selectFormMetadata(this._store.getState());
+    if (!formMD) {
+      return null;
+    }
+    const allSheets = Array.from(formMD.getAllSheets().values());
+    const currentSheet = selectCurrentSheet((_a = this._store) === null || _a === void 0 ? void 0 : _a.getState());
+    let result = [];
+    if (allSheets.length > 1) {
+      const tabs = allSheets.map((sheet, index) => {
+        return { tabKey: sheet.name, label: sheet.label, index };
+      });
+      const idTabSelector = `selector`;
+      result.push(h("ez-tabselector", { tabs: this.buildIdTabSelector(tabs), onEzChange: (evt) => this._store.dispatch(changeTab(evt.detail)), selectedTab: currentSheet.name, "data-element-id": idTabSelector }));
+    }
+    result = result.concat(this.buildFormContent(currentSheet));
+    return result;
+  }
+  buildFormContent(currentSheet) {
+    const fields = currentSheet === null || currentSheet === void 0 ? void 0 : currentSheet.fields;
+    if (currentSheet == undefined) {
+      return;
+    }
+    const idFormSheet = `${StringUtils.replaceAccentuatedChars(StringUtils.toCamelCase(currentSheet === null || currentSheet === void 0 ? void 0 : currentSheet.label), false)}_selectorContainer`;
+    return (h("div", { class: "dynamic-content", "data-element-id": idFormSheet }, h("ez-form-view", { class: "ez-row ez-padding-vertical--small", fields: fields })));
+  }
+  processMetadata() {
+    if (!this.isStatic() && this.dataUnit && this._store) {
+      const metadata = buildFormMetadata(this.config, this.dataUnit);
+      this._store.dispatch(loadMetadata(metadata));
+    }
+  }
+  isStatic() {
+    var _a;
+    return ((_a = this._staticFields) === null || _a === void 0 ? void 0 : _a.length) > 0;
+  }
+  componentWillLoad() {
+    if (this.dataUnit === undefined) {
+      this.dataUnit = new DataUnit("ez-form");
+    }
+    this.dataUnit.subscribe(this.onDataUnitAction);
+    this._dataBinder = new DataBinder(this.dataUnit);
+    this._store = createStore(formReducer);
+    this._store.subscribe(() => forceUpdate(this));
+    this._staticFields = Array.from(this._element.querySelectorAll("[data-field-name]"));
+    this.processMetadata();
+    const dataInfo = { dataUnit: this.dataUnit };
+    ElementIDUtils.addIDInfo(this._element, null, dataInfo);
+  }
+  componentDidRender() {
+    const metadata = selectFormMetadata(this._store.getState());
+    metadata.addRequiredFields(this._staticFields.filter(f => f.dataset.required).map(f => f.dataset.fieldName));
+    this._dataBinder.bind(Array.from(this._element.querySelectorAll("[data-field-name]")), this.dataUnit.dataUnitId, metadata, this.recordsValidator);
+    this.ezReady.emit();
+  }
+  disconnectedCallback() {
+    this.dataUnit.unsubscribe(this.onDataUnitAction);
+    this._dataBinder.onDisconnectedCallback();
+  }
+  buildIdTabSelector(tabs) {
+    if (tabs) {
+      tabs.forEach(tab => tab[ElementIDUtils.DATA_ELEMENT_ID_ATTRIBUTE_NAME] = StringUtils.toCamelCase(tab.label));
+    }
+    return tabs;
+  }
+  render() {
+    return (h(Host, null, this.isStatic() ? null : this.getDynamicContent()));
+  }
+  static get is() { return "ez-form"; }
+  static get encapsulation() { return "scoped"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["ez-form.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["ez-form.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "dataUnit": {
+        "type": "unknown",
+        "mutable": true,
+        "complexType": {
+          "original": "DataUnit",
+          "resolved": "DataUnit",
+          "references": {
+            "DataUnit": {
+              "location": "import",
+              "path": "@sankhyalabs/core"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Unidade de dados. Respons\u00E1vel pelo controle de edi\u00E7\u00E3o de registros e \ninforma\u00E7\u00F5es pertinentes aos campos."
+        }
+      },
+      "config": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "IFormConfig",
+          "resolved": "IFormConfig",
+          "references": {
+            "IFormConfig": {
+              "location": "import",
+              "path": "../../utils/form/interfaces"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Configura\u00E7\u00E3o do formul\u00E1rio."
+        }
+      },
+      "recordsValidator": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "IRecordValidator",
+          "resolved": "IRecordValidator",
+          "references": {
+            "IRecordValidator": {
+              "location": "import",
+              "path": "../../utils/form/interfaces"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Define um validador respons\u00E1vel pela integridade dos registros."
+        }
+      }
+    };
+  }
+  static get events() {
+    return [{
+        "method": "ezReady",
+        "name": "ezReady",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Evento disparado quando o formul\u00E1rio est\u00E1 dispon\u00EDvel na DOM."
+        },
+        "complexType": {
+          "original": "void",
+          "resolved": "void",
+          "references": {}
+        }
+      }, {
+        "method": "formItemsReady",
+        "name": "formItemsReady",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Respons\u00E1vel por notificar quando ocorrer a renderiza\u00E7\u00E3o de itens do formul\u00E1rio."
+        },
+        "complexType": {
+          "original": "FormItems",
+          "resolved": "FormItems",
+          "references": {
+            "FormItems": {
+              "location": "import",
+              "path": "../ez-form-view/structure"
+            }
+          }
+        }
+      }];
+  }
+  static get methods() {
+    return {
+      "validate": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "Realiza valida\u00E7\u00E3o no conte\u00FAdo de todos os campos.",
+          "tags": []
+        }
+      }
+    };
+  }
+  static get elementRef() { return "_element"; }
+  static get watchers() {
+    return [{
+        "propName": "config",
+        "methodName": "observeConfig"
+      }];
+  }
+}

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

@@ -0,0 +1,42 @@
+const inicialState = {};
+///////////////////////////////     REDUCERS     ///////////////////////////////
+export function formReducer(state = inicialState, action) {
+  switch (action.type) {
+    case FormActions.METADATA_LOADED:
+      return Object.assign(Object.assign({}, state), { formMetadata: action.payload, currentSheet: undefined });
+    case FormActions.CHANGE_TAB:
+      return Object.assign(Object.assign({}, state), { currentSheet: action.payload });
+    default:
+      return state;
+  }
+}
+/////////////////////////////// ACTION CREATORS ///////////////////////////////
+export function loadMetadata(formMetadata) {
+  return {
+    type: FormActions.METADATA_LOADED,
+    payload: formMetadata
+  };
+}
+export function changeTab(currentSheet) {
+  return {
+    type: FormActions.CHANGE_TAB,
+    payload: typeof currentSheet === "string" ? currentSheet : currentSheet.tabKey
+  };
+}
+///////////////////////////////    SELECTORS    ///////////////////////////////
+export function selectFormMetadata(state) {
+  return state.formMetadata;
+}
+export function selectCurrentSheetId(state) {
+  return state.currentSheet;
+}
+export function selectCurrentSheet(state) {
+  const currentSheetId = selectCurrentSheetId(state);
+  return currentSheetId ? state.formMetadata.getSheet(currentSheetId) : Array.from(state.formMetadata.getAllSheets().values())[0];
+}
+///////////////////////////////      TYPES      ///////////////////////////////
+var FormActions;
+(function (FormActions) {
+  FormActions["METADATA_LOADED"] = "FORM/METADATA_LOADED";
+  FormActions["CHANGE_TAB"] = "FORM/CHANGE_TAB";
+})(FormActions || (FormActions = {}));

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

@@ -0,0 +1,6 @@
+:host {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  width: 100%;
+}