@sankhyalabs/ezui 5.21.4 → 5.22.0-dev.10

package/dist/collection/components/ez-chart/types/BaseHighChartsRender.js

@@ -0,0 +1,146 @@
+export class BaseHighChartsRender {
+  parseSerie(series) {
+    if (Array.isArray(series)) {
+      const seriesOptions = series.map(serie => this.chartSerieToSeriesOptions(serie));
+      return seriesOptions;
+    }
+    const seriesOptions = this.chartSerieToSeriesOptions(series);
+    return [seriesOptions];
+  }
+  parseAxis(axis) {
+    if (Array.isArray(axis)) {
+      const axisOptions = axis.map(value => this.chartAxisToAxisOptions(value));
+      return axisOptions;
+    }
+    const axisOptions = this.chartAxisToAxisOptions(axis);
+    return axisOptions;
+  }
+  parseTitle(title) {
+    return {
+      text: title,
+    };
+  }
+  parseSubTitle(subTtile) {
+    return {
+      text: subTtile,
+    };
+  }
+  buildFormatterTooltip(series) {
+    const seriesArray = Array.isArray(series) ? series : [series];
+    return {
+      formatter: function (tooltip) {
+        const indexSerie = seriesArray.findIndex(serie => serie.name === this.series.name && serie.toolTipFormatter);
+        if (indexSerie !== -1) {
+          return seriesArray[indexSerie].toolTipFormatter(this.series.name, this.x, this.y, this.point.name, this.point.percentage);
+        }
+        return tooltip.defaultFormatter.call(this, tooltip);
+      }
+    };
+  }
+  buildOnClickCallBack(evt) {
+    return function (_e) {
+      evt.emit({
+        name: this.series.name,
+        data: this.series.data,
+        type: this.series.type,
+        yAxis: this.x,
+      });
+    };
+  }
+  buildResposiveConfig() {
+    return {
+      rules: [
+        {
+          condition: {
+            maxWidth: 500
+          },
+          chartOptions: {
+            legend: {
+              enabled: false
+            },
+            xAxis: {
+              labels: {
+                enabled: false
+              },
+              gridLineWidth: 0
+            },
+            yAxis: {
+              labels: {
+                enabled: false
+              },
+              gridLineWidth: 0
+            }
+          }
+        },
+        {
+          condition: {
+            maxWidth: 600
+          },
+          chartOptions: {
+            xAxis: {
+              labels: {
+                style: {
+                  fontSize: '10px'
+                }
+              }
+            },
+            yAxis: {
+              labels: {
+                style: {
+                  fontSize: '10px'
+                },
+              }
+            },
+            title: {
+              style: {
+                fontSize: '14px'
+              }
+            },
+            subtitle: {
+              style: {
+                fontSize: '12px'
+              }
+            }
+          }
+        },
+        {
+          condition: {
+            maxWidth: 400
+          },
+          chartOptions: {
+            chart: {
+              margin: [10, 10, 15, 10],
+            },
+            subtitle: {
+              text: null
+            },
+            title: {
+              text: null
+            }
+          }
+        }
+      ]
+    };
+  }
+  buildDefaultChartOptions() {
+    return {
+      credits: {
+        enabled: false
+      }
+    };
+  }
+  chartSerieToSeriesOptions(serie) {
+    const { name, data, color, showDataLabel, type, yAxis } = serie;
+    return Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, (name && { name })), (type && { type })), (data && { data })), (color && { color })), (showDataLabel && { dataLabels: { enabled: showDataLabel } })), (yAxis !== undefined && { yAxis }));
+  }
+  chartAxisToAxisOptions(axis) {
+    const { categories, color, text, invertedPosition, formatter } = axis;
+    return Object.assign(Object.assign(Object.assign(Object.assign({}, (categories && { categories })), (text && {
+      title: Object.assign({ text }, (color && { style: { color } }))
+    })), (formatter && {
+      labels: {
+        formatter: function () { return formatter(this.value); },
+      }
+    })), (invertedPosition && { opposite: invertedPosition }));
+  }
+}

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": []
+        }
+      }
+    };
+  }
+}