@sankhyalabs/ezui 5.21.2 → 5.22.0-dev.1

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

@@ -1,20 +1,23 @@
 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";
+import { buildFormMetadata } from "../../utils/form/FormMetadata";
+import { changeTab, formReducer, loadMetadata, selectCurrentSheet, selectFormMetadata } from "./store/form.slice";
 export class EzForm {
   constructor() {
+    this._customEditors = new Map();
     this.onDataUnitAction = (action) => {
       if (action.type === Action.METADATA_LOADED) {
         this.processMetadata();
       }
     };
+    this._fieldsProps = new Map();
     this.dataUnit = undefined;
     this.config = undefined;
     this.recordsValidator = undefined;
     this.fieldToFocus = undefined;
+    this.onlyStaticFields = false;
   }
   /**
    * Realiza validação no conteúdo de todos os campos.
@@ -22,9 +25,30 @@ export class EzForm {
   validate() {
     return this._dataBinder.validate();
   }
+  /**
+   * Registra um editor customizado para campos da grade e formulário.
+   */
+  async addCustomEditor(fieldName, customEditor, detailContext) {
+    if (this._formView) {
+      this._formView.addCustomEditor(fieldName, customEditor, detailContext);
+      return;
+    }
+    const newCustomEditors = new Map(this._customEditors);
+    newCustomEditors.set(fieldName, { customEditor, detailContext });
+    this._customEditors = newCustomEditors;
+  }
   observeConfig() {
     this.processMetadata();
   }
+  /**
+   * Altera/adiciona uma propriedade nos metadados do campo.
+   */
+  async setFieldProp(fieldName, propName, value) {
+    const newCustomFieldProps = new Map(this._fieldsProps);
+    const currentProps = this._fieldsProps.get(fieldName);
+    newCustomFieldProps.set(fieldName, Object.assign(Object.assign({}, currentProps), { [propName]: value }));
+    this._fieldsProps = newCustomFieldProps;
+  }
   getDynamicContent() {
     var _a;
     const formMD = selectFormMetadata(this._store.getState());
@@ -51,10 +75,10 @@ export class EzForm {
     }
     this.ezFormSetFields.emit(fields);
     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 })));
+    return (h("div", { class: "dynamic-content", "data-element-id": idFormSheet }, h("ez-form-view", { ref: (element) => (this._formView = element), class: "ez-row ez-padding-vertical--small", fields: fields, selectedRecord: this.dataUnit.getSelectedRecord() })));
   }
   processMetadata() {
-    if (!this.isStatic() && this.dataUnit && this._store) {
+    if (this.bindFields() && this.dataUnit && this._store) {
       const metadata = buildFormMetadata(this.config, this.dataUnit);
       this._store.dispatch(loadMetadata(metadata));
     }
@@ -63,6 +87,9 @@ export class EzForm {
     var _a;
     return ((_a = this._staticFields) === null || _a === void 0 ? void 0 : _a.length) > 0;
   }
+  bindFields() {
+    return !this.isStatic() || this.onlyStaticFields === false;
+  }
   componentWillLoad() {
     if (this.dataUnit === undefined) {
       this.dataUnit = new DataUnit("ez-form");
@@ -82,6 +109,17 @@ export class EzForm {
     this._dataBinder.bind(Array.from(this._element.querySelectorAll("[data-field-name]")), this.dataUnit.dataUnitId, metadata, this.recordsValidator);
     this.ezReady.emit();
     this.handleFieldToFocus();
+    this.setCustomEditors();
+    this.setFieldsProps();
+  }
+  setCustomEditors() {
+    if (!this._formView) {
+      return;
+    }
+    for (const [fieldName, customEditorProps] of this._customEditors) {
+      this._formView.addCustomEditor(fieldName, customEditorProps.customEditor, customEditorProps.detailContext);
+      this._customEditors.delete(fieldName);
+    }
   }
   handleFieldToFocus() {
     var _a;
@@ -98,6 +136,17 @@ export class EzForm {
       this.ezFormRequestClearFieldToFocus.emit();
     });
   }
+  setFieldsProps() {
+    if (!this._formView) {
+      return;
+    }
+    for (const [fieldName, props] of this._fieldsProps) {
+      for (const prop in props) {
+        this._formView.setFieldProp(fieldName, prop, props[prop]);
+      }
+      this._fieldsProps.delete(fieldName);
+    }
+  }
   disconnectedCallback() {
     this.dataUnit.unsubscribe(this.onDataUnitAction);
     this._dataBinder.onDisconnectedCallback();
@@ -201,9 +250,32 @@ export class EzForm {
         },
         "attribute": "field-to-focus",
         "reflect": false
+      },
+      "onlyStaticFields": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Define se os campos que ser\u00E3o apresentados s\u00E3o todos est\u00E1ticos. Quando verdadeira, ocorrer\u00E1 no DataBinder o bind dos campos com o DataUnit."
+        },
+        "attribute": "only-static-fields",
+        "reflect": false,
+        "defaultValue": "false"
       }
     };
   }
+  static get states() {
+    return {
+      "_fieldsProps": {}
+    };
+  }
   static get events() {
     return [{
         "method": "ezFormRequestClearFieldToFocus",
@@ -297,6 +369,60 @@ export class EzForm {
           "text": "Realiza valida\u00E7\u00E3o no conte\u00FAdo de todos os campos.",
           "tags": []
         }
+      },
+      "addCustomEditor": {
+        "complexType": {
+          "signature": "(fieldName: string, customEditor: ICustomEditor, detailContext?: string) => Promise<void>",
+          "parameters": [{
+              "tags": [],
+              "text": ""
+            }, {
+              "tags": [],
+              "text": ""
+            }, {
+              "tags": [],
+              "text": ""
+            }],
+          "references": {
+            "Promise": {
+              "location": "global"
+            },
+            "ICustomEditor": {
+              "location": "import",
+              "path": "../../utils/customEditor/interfaces/ICustomEditor"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "Registra um editor customizado para campos da grade e formul\u00E1rio.",
+          "tags": []
+        }
+      },
+      "setFieldProp": {
+        "complexType": {
+          "signature": "(fieldName: string, propName: string, value: any) => Promise<void>",
+          "parameters": [{
+              "tags": [],
+              "text": ""
+            }, {
+              "tags": [],
+              "text": ""
+            }, {
+              "tags": [],
+              "text": ""
+            }],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "Altera/adiciona uma propriedade nos metadados do campo.",
+          "tags": []
+        }
       }
     };
   }

package/dist/collection/components/ez-form-view/custom-input/ez-custom-form-input.js

@@ -0,0 +1,278 @@
+import { h, Host } from '@stencil/core';
+import { CustomEditorSource } from '../../../utils/customEditor/interfaces/ICustomEditor';
+import { HTMLBuilder, StringUtils } from '@sankhyalabs/core';
+export class EzCustomFormInput {
+  constructor() {
+    this.gui = undefined;
+    this.customEditor = undefined;
+    this.formViewField = undefined;
+    this.value = undefined;
+    this.detailContext = undefined;
+    this.builderFallback = undefined;
+    this.selectedRecord = undefined;
+  }
+  /**
+   * Aplica foco no campo.
+   */
+  async setFocus() {
+    var _a, _b;
+    (_b = (_a = this.gui) === null || _a === void 0 ? void 0 : _a["setFocus"]) === null || _b === void 0 ? void 0 : _b.call(_a);
+  }
+  /**
+   * Remove o foco do campo.
+   */
+  async setBlur() {
+    var _a, _b;
+    (_b = (_a = this.gui) === null || _a === void 0 ? void 0 : _a["setBlur"]) === null || _b === void 0 ? void 0 : _b.call(_a);
+  }
+  /**
+   * Retorna se o conteúdo é inválido.
+   */
+  async isInvalid() {
+    var _a, _b;
+    return ((_b = (_a = this.gui) === null || _a === void 0 ? void 0 : _a["isInvalid"]) === null || _b === void 0 ? void 0 : _b.call(_a)) || false;
+  }
+  getContent() {
+    var _a, _b;
+    const fieldProps = new Map();
+    for (const prop in this.formViewField.props) {
+      fieldProps.set(prop, this.formViewField.props[prop]);
+    }
+    const params = {
+      value: this.value,
+      name: this.formViewField.name,
+      currentEditor: this.builderFallback(this.formViewField),
+      setValue: (value) => this.setValue(value),
+      getValue: this.getValue,
+      record: this.selectedRecord,
+      editorMetadata: {
+        label: this.formViewField.label,
+        hidden: ((_a = this.formViewField.props) === null || _a === void 0 ? void 0 : _a.visible) === false,
+        userInterface: this.formViewField.userInterface,
+        options: (_b = this.formViewField.props) === null || _b === void 0 ? void 0 : _b.options,
+        props: this.formViewField.props ? fieldProps : undefined,
+        optionLoader: this.formViewField.optionLoader
+      },
+      source: CustomEditorSource.FORM,
+      detailContext: this.detailContext
+    };
+    let gui = this.customEditor.getEditorElement(params);
+    if (!gui) {
+      gui = this.builderFallback(this.formViewField);
+      this.handleValue(gui);
+      this.gui = gui;
+      return;
+    }
+    if (!(gui instanceof HTMLElement) && typeof gui !== 'string') {
+      this.handleValue(gui);
+      this.gui = gui;
+      return;
+    }
+    if (typeof gui === 'string') {
+      gui = HTMLBuilder.parseElement(gui);
+    }
+    if (this.value) {
+      gui.setAttribute('value', typeof this.value === 'object' ? this.value.value : this.value);
+    }
+    this.gui = h("div", { key: StringUtils.generateUUID(), ref: el => el && el.appendChild(gui) });
+  }
+  setValue(value) {
+    this.value = value;
+  }
+  getValue() {
+    return this.value;
+  }
+  handleValue(gui) {
+    var _a;
+    //@ts-ignore
+    (_a = gui.$children$) === null || _a === void 0 ? void 0 : _a.forEach((child) => {
+      child.$attrs$.value = this.value;
+    });
+  }
+  componentWillRender() {
+    this.getContent();
+  }
+  render() {
+    return (h(Host, null, this.gui));
+  }
+  static get is() { return "ez-custom-form-input"; }
+  static get encapsulation() { return "scoped"; }
+  static get properties() {
+    return {
+      "customEditor": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "ICustomEditor",
+          "resolved": "ICustomEditor",
+          "references": {
+            "ICustomEditor": {
+              "location": "import",
+              "path": "../../../utils/customEditor/interfaces/ICustomEditor"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Inst\u00E2ncia do editor customizado."
+        }
+      },
+      "formViewField": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "IFormViewField",
+          "resolved": "IFormViewField",
+          "references": {
+            "IFormViewField": {
+              "location": "import",
+              "path": "../interfaces"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Campo que o elemento customizado representa."
+        }
+      },
+      "value": {
+        "type": "any",
+        "mutable": true,
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Valores dos campos do formul\u00E1rio."
+        },
+        "attribute": "value",
+        "reflect": false
+      },
+      "detailContext": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Define de qual contexto o editor est\u00E1 sendo acionado."
+        },
+        "attribute": "detail-context",
+        "reflect": false
+      },
+      "builderFallback": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "(field: IFormViewField) => HTMLElement",
+          "resolved": "(field: IFormViewField) => HTMLElement",
+          "references": {
+            "IFormViewField": {
+              "location": "import",
+              "path": "../interfaces"
+            },
+            "HTMLElement": {
+              "location": "global"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Builder original do FormView que ser\u00E1 chamado caso o custom n\u00E3o retorne nenhum valor."
+        }
+      },
+      "selectedRecord": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "Record",
+          "resolved": "Record",
+          "references": {
+            "Record": {
+              "location": "import",
+              "path": "@sankhyalabs/core"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Define os registros da linha selecionada."
+        }
+      }
+    };
+  }
+  static get states() {
+    return {
+      "gui": {}
+    };
+  }
+  static get methods() {
+    return {
+      "setFocus": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "Aplica 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": []
+        }
+      }
+    };
+  }
+}

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

@@ -4,11 +4,34 @@ import { ElementIDUtils, UserInterface } from '@sankhyalabs/core';
 import { FormItems } from './structure';
 export class EzFormView {
   constructor() {
+    this._customEditors = new Map();
     this.fields = undefined;
+    this.selectedRecord = undefined;
   }
   async showUp() {
     this._element.scrollIntoView({ behavior: "smooth", block: "start" });
   }
+  /**
+   * Registra um editor customizado para campos da grade e formulário.
+   */
+  async addCustomEditor(fieldName, customEditor, detailContext) {
+    const newCustomEditors = new Map(this._customEditors);
+    newCustomEditors.set(fieldName, { customEditor, detailContext });
+    this._customEditors = newCustomEditors;
+  }
+  /**
+   * Altera/adiciona uma propriedade nos metados do campo.
+   */
+  async setFieldProp(fieldName, propName, value) {
+    const fields = this.fields.map(field => {
+      if (field.name === fieldName && (value || value === 0)) {
+        field.props = field.props || {};
+        field.props[propName] = value;
+      }
+      return field;
+    });
+    this.fields = [...fields];
+  }
   groupFields(fields) {
     const result = new Map();
     fields.forEach(item => {
@@ -28,7 +51,8 @@ export class EzFormView {
     return result;
   }
   componentDidRender() {
-    this.ezContentReady.emit(Array.from(this._element.querySelectorAll("[data-field-name]")));
+    this._formElements = Array.from(this._element.querySelectorAll("[data-field-name]"));
+    this.ezContentReady.emit(this._formElements);
     const formItems = new FormItems(Array.from(this._element.querySelectorAll("[data-form-item]")));
     this.formItemsReady.emit(formItems);
   }
@@ -39,9 +63,15 @@ export class EzFormView {
     ].includes(userInterface);
   }
   buildFormItemElement(item, classItem = "") {
+    var _a;
     if (this.isItemFullWidth(item.userInterface)) {
       classItem += " input-full_width";
     }
+    if (this._customEditors.has(item.name)) {
+      const value = (_a = this._formElements.map(el => ({ name: el.dataset.fieldName, value: el['value'] })).find(field => field.name === item.name)) === null || _a === void 0 ? void 0 : _a.value;
+      const customEditor = this._customEditors.get(item.name).customEditor;
+      return h("div", { class: classItem }, h("ez-custom-form-input", { "data-field-name": item.name, customEditor: customEditor, formViewField: item, builderFallback: fieldBuilder, value: value, selectedRecord: this.selectedRecord }));
+    }
     return h("div", { class: classItem }, fieldBuilder(item));
   }
   render() {
@@ -99,9 +129,34 @@ export class EzFormView {
           "tags": [],
           "text": "Define a lista de metadados usada para criar os campos de user interface."
         }
+      },
+      "selectedRecord": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "Record",
+          "resolved": "Record",
+          "references": {
+            "Record": {
+              "location": "import",
+              "path": "@sankhyalabs/core"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Define os registros da linha selecionada."
+        }
       }
     };
   }
+  static get states() {
+    return {
+      "_customEditors": {}
+    };
+  }
   static get events() {
     return [{
         "method": "ezContentReady",
@@ -164,6 +219,60 @@ export class EzFormView {
           "text": "",
           "tags": []
         }
+      },
+      "addCustomEditor": {
+        "complexType": {
+          "signature": "(fieldName: string, customEditor: ICustomEditor, detailContext?: string) => Promise<void>",
+          "parameters": [{
+              "tags": [],
+              "text": ""
+            }, {
+              "tags": [],
+              "text": ""
+            }, {
+              "tags": [],
+              "text": ""
+            }],
+          "references": {
+            "Promise": {
+              "location": "global"
+            },
+            "ICustomEditor": {
+              "location": "import",
+              "path": "../../utils/customEditor/interfaces/ICustomEditor"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "Registra um editor customizado para campos da grade e formul\u00E1rio.",
+          "tags": []
+        }
+      },
+      "setFieldProp": {
+        "complexType": {
+          "signature": "(fieldName: string, propName: string, value: any) => Promise<void>",
+          "parameters": [{
+              "tags": [],
+              "text": ""
+            }, {
+              "tags": [],
+              "text": ""
+            }, {
+              "tags": [],
+              "text": ""
+            }],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "Altera/adiciona uma propriedade nos metados do campo.",
+          "tags": []
+        }
       }
     };
   }

package/dist/collection/components/ez-form-view/fieldbuilder/templates/NumberInput.tpl.js

@@ -1,7 +1,8 @@
 import { h } from "@stencil/core";
 export const buildDecimal = ({ name, label, readOnly, props, contextName, canShowError }) => {
-  const precision = Number((props === null || props === void 0 ? void 0 : props.precision) || 2);
-  const prettyPrecision = Number((props === null || props === void 0 ? void 0 : props.prettyPrecision) || precision);
+  var _a, _b;
+  const precision = Number((_a = props === null || props === void 0 ? void 0 : props.precision) !== null && _a !== void 0 ? _a : 2);
+  const prettyPrecision = Number((_b = props === null || props === void 0 ? void 0 : props.prettyPrecision) !== null && _b !== void 0 ? _b : precision);
   return buildNumeric(name, label, readOnly, precision, prettyPrecision, contextName, canShowError);
 };
 export const buildInteger = ({ name, label, readOnly, contextName, canShowError }) => {