@sankhyalabs/ezui 5.21.0-dev.2 → 5.21.0-dev.20

package/dist/collection/components/ez-chart/test/mock-chart.js

@@ -0,0 +1,137 @@
+export const mockChartProp = {
+    chartTitle: "Titulo do gráfico",
+    chartSubTitle: "Sub-titulo do gráfico",
+    series: [{
+        name: 'Qtd. Vendas',
+        data: [23, 20, 22, 26, 24, 28],
+        yAxis: 1,
+        showDataLabel: true,
+    }, {
+        name: 'Vlr. Vendas',
+        data: [25600, 21600, 24500, 26890, 20560, 22508],
+        yAxis: 0,
+        toolTipFormatter: jest.fn(),
+    }],
+    yAxis: [{
+        text: 'Valor das vendas no semestre',
+    },
+    {
+        text: 'Quantidade de itens vendidos',
+        invertedPosition: true,
+    }],
+    xAxis: {
+        text: 'Defina uma descrição para o eixo',
+        formatter: jest.fn(),
+        color: '#008561',
+        categories: ['Jan', 'Feb', 'Mar', 'Abr', 'Mai', 'Jun']
+    },
+}
+
+export const expectChart = {
+    title: { text: "Titulo do gráfico" },
+    subtitle: { text: "Sub-titulo do gráfico" },
+    tooltip: { formatter: function () { return jest.fn(); } },
+    yAxis: [
+        {
+            title: { text: "Valor das vendas no semestre" }
+        },
+        {
+            title: { text: "Quantidade de itens vendidos" },
+            opposite: true,
+        },
+    ],
+    xAxis: {
+        categories: ["Jan", "Feb", "Mar", "Abr", "Mai", "Jun"],
+        title: {
+            text: "Defina uma descrição para o eixo",
+            style: { color: "#008561" }
+        }
+    },
+    series: [{
+        name: "Qtd. Vendas",
+        data: [23, 20, 22, 26, 24, 28],
+        dataLabels: { enabled: true },
+        yAxis: 1,
+    }, {
+        name: "Vlr. Vendas",
+        data: [25600, 21600, 24500, 26890, 20560, 22508],
+        yAxis: 0,
+    }],
+    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 },
+            },
+        },
+    ],
+    credits: { enabled: false },
+}
+
+
+export const mockChartPieProp = {
+    chartTitle: "Titulo do gráfico",
+    chartSubTitle: "Sub-titulo do gráfico",
+    series: {
+        name: 'venda',
+        data: [
+            { name: 'Chrome', y: 74.03 },
+            { name: 'Edge', y: 12.66 },
+            { name: 'Firefox', y: 4 },
+            { name: 'Internet Explorer', y: 2 },
+            { name: 'Other', y: 3 }
+        ],
+        showDataLabel: true,
+    }
+}
+
+export const expectPieChart = {
+    series: [{
+        name: "venda",
+        data: [
+            { name: 'Chrome', y: 74.03 },
+            { name: 'Edge', y: 12.66 },
+            { name: 'Firefox', y: 4 },
+            { name: 'Internet Explorer', y: 2 },
+            { name: 'Other', y: 3 }
+        ],
+        dataLabels: { enabled: true },
+    }],
+}

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