@sankhyalabs/ezui 0.0.0-bugfix-dev-KB-61161.0 → 0.0.0-bugfix-dev-KB-59008.0

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

@@ -0,0 +1,284 @@
+import { h } from '@stencil/core';
+import { ChartContext, ChartType } from './interfaces';
+import { ColumnChartStrategy, BarChartStrategy, LineChartStrategy, PieChartStrategy, DonutChartStrategy } from './components';
+export class EzChart {
+  constructor() {
+    this.STRATEGY_BY_CHART_TYPE = new Map();
+    this.type = ChartType.LINE;
+    this.xAxis = undefined;
+    this.yAxis = undefined;
+    this.chartTitle = "";
+    this.chartSubTitle = "";
+    this.legendEnabled = true;
+    this.series = undefined;
+    this.width = undefined;
+    this.height = undefined;
+    this.initializeStrategies();
+  }
+  initializeStrategies() {
+    this.STRATEGY_BY_CHART_TYPE.set(ChartType.COLUMN, new ColumnChartStrategy());
+    this.STRATEGY_BY_CHART_TYPE.set(ChartType.BAR, new BarChartStrategy());
+    this.STRATEGY_BY_CHART_TYPE.set(ChartType.LINE, new LineChartStrategy());
+    this.STRATEGY_BY_CHART_TYPE.set(ChartType.PIE, new PieChartStrategy());
+    this.STRATEGY_BY_CHART_TYPE.set(ChartType.DONUT, new DonutChartStrategy());
+  }
+  renderChart() {
+    this.chartContext.render(this._container, this.series, this.xAxis, this.yAxis, {
+      title: this.chartTitle,
+      subTitle: this.chartSubTitle,
+      legendEnabled: this.legendEnabled,
+      onClickSerie: this.ezSerieClick,
+    });
+  }
+  componentWillLoad() {
+    this.setChartStrategy();
+  }
+  componentWillUpdate() {
+    this.renderChart();
+  }
+  componentDidLoad() {
+    this.renderChart();
+  }
+  disconnectedCallback() {
+    this.chartContext.destroy();
+  }
+  handleTypeChange() {
+    this.setChartStrategy();
+  }
+  setChartStrategy() {
+    const strategy = this.STRATEGY_BY_CHART_TYPE.get(this.type);
+    if (strategy) {
+      this.chartContext = new ChartContext(strategy);
+      return;
+    }
+    this.chartContext = new ChartContext(new LineChartStrategy());
+  }
+  render() {
+    return (h("div", { ref: (el) => this._container = el }));
+  }
+  static get is() { return "ez-chart"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["ez-chart.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["ez-chart.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "type": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "ChartType",
+          "resolved": "ChartType.BAR | ChartType.COLUMN | ChartType.DONUT | ChartType.LINE | ChartType.PIE",
+          "references": {
+            "ChartType": {
+              "location": "import",
+              "path": "./interfaces"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Define o tipo de gr\u00E1fico apresentado pelo componente"
+        },
+        "attribute": "type",
+        "reflect": false,
+        "defaultValue": "ChartType.LINE"
+      },
+      "xAxis": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "ChartAxis | Array<ChartAxis>",
+          "resolved": "ChartAxis[] | ({ color?: string; categories?: string[]; formatter?: (value: string | number) => string; text?: string; invertedPosition?: boolean; })",
+          "references": {
+            "ChartAxis": {
+              "location": "import",
+              "path": "./interfaces"
+            },
+            "Array": {
+              "location": "global"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Defini\u00E7\u00F5es do eixo X do gr\u00E1fico"
+        }
+      },
+      "yAxis": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "ChartAxis | Array<ChartAxis>",
+          "resolved": "ChartAxis[] | ({ color?: string; categories?: string[]; formatter?: (value: string | number) => string; text?: string; invertedPosition?: boolean; })",
+          "references": {
+            "ChartAxis": {
+              "location": "import",
+              "path": "./interfaces"
+            },
+            "Array": {
+              "location": "global"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Defini\u00E7\u00F5es do eixo Y do gr\u00E1fico"
+        }
+      },
+      "chartTitle": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Define o titulo a ser apresentado no gr\u00E1fico"
+        },
+        "attribute": "chart-title",
+        "reflect": false,
+        "defaultValue": "\"\""
+      },
+      "chartSubTitle": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Define o sub titulo a ser apresentado no gr\u00E1fico"
+        },
+        "attribute": "chart-sub-title",
+        "reflect": false,
+        "defaultValue": "\"\""
+      },
+      "legendEnabled": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Define se a legenda do gr\u00E1fico deve ser apresentada ou n\u00E3o."
+        },
+        "attribute": "legend-enabled",
+        "reflect": false,
+        "defaultValue": "true"
+      },
+      "series": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "ChartSerie | Array<ChartSerie>",
+          "resolved": "ChartSerie[] | ({ data: (number | ChartSerieData)[]; name?: string; color?: string; type?: \"line\" | \"column\" | \"bar\"; yAxis?: number; toolTipFormatter?: (serieName: string, xAxis: string | number, yAxis: number, dataName: string, percentage: number) => string; showDataLabel?: boolean; })",
+          "references": {
+            "ChartSerie": {
+              "location": "import",
+              "path": "./interfaces/ChartSerie"
+            },
+            "Array": {
+              "location": "global"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Define as series a serem apresentadas no gr\u00E1fico"
+        }
+      },
+      "width": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Define uma largura do gr\u00E1fico"
+        },
+        "attribute": "width",
+        "reflect": false
+      },
+      "height": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Define a altura do gr\u00E1fico"
+        },
+        "attribute": "height",
+        "reflect": false
+      }
+    };
+  }
+  static get events() {
+    return [{
+        "method": "ezSerieClick",
+        "name": "ezSerieClick",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Evento emitido quando ocorre um click em uma serie do gr\u00E1fico"
+        },
+        "complexType": {
+          "original": "SerieClickEvent",
+          "resolved": "{ name: string; data: number[]; type: string; yAxis: number; }",
+          "references": {
+            "SerieClickEvent": {
+              "location": "import",
+              "path": "./interfaces/ChartSerie"
+            }
+          }
+        }
+      }];
+  }
+  static get watchers() {
+    return [{
+        "propName": "type",
+        "methodName": "handleTypeChange"
+      }];
+  }
+}

package/dist/collection/components/ez-chart/interfaces/ChartAxis.js

@@ -0,0 +1 @@
+export {};

package/dist/collection/components/ez-chart/interfaces/ChartContext.js

@@ -0,0 +1,14 @@
+export class ChartContext {
+  constructor(strategy) {
+    this.strategy = strategy;
+  }
+  setStrategy(strategy) {
+    this.strategy = strategy;
+  }
+  render(container, series, xAxis, yAxis, options) {
+    return this.strategy.render(container, series, xAxis, yAxis, options);
+  }
+  destroy() {
+    return this.strategy.destroy();
+  }
+}

package/dist/collection/components/ez-chart/interfaces/ChartOptions.js

@@ -0,0 +1 @@
+export {};

package/dist/collection/components/ez-chart/interfaces/ChartSerie.js

@@ -0,0 +1 @@
+export {};

package/dist/collection/components/ez-chart/interfaces/ChartStrategies.js

@@ -0,0 +1 @@
+export {};

package/dist/collection/components/ez-chart/interfaces/ChartType.js

@@ -0,0 +1,8 @@
+export var ChartType;
+(function (ChartType) {
+  ChartType["COLUMN"] = "column";
+  ChartType["BAR"] = "bar";
+  ChartType["LINE"] = "line";
+  ChartType["PIE"] = "pie";
+  ChartType["DONUT"] = "donut";
+})(ChartType || (ChartType = {}));

package/dist/collection/components/ez-chart/interfaces/index.js

@@ -0,0 +1,5 @@
+export * from './ChartContext';
+export * from './ChartStrategies';
+export * from './ChartType';
+export * from './ChartAxis';
+export * from './ChartSerie';

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-view/custom-input/ez-custom-form-input.js

@@ -41,8 +41,6 @@ export class EzCustomFormInput {
       value: this.value,
       name: this.formViewField.name,
       currentEditor: this.builderFallback(this.formViewField),
-      setValue: (value) => this.setValue(value),
-      getValue: this.getValue,
       editorMetadata: {
         label: this.formViewField.label,
         hidden: ((_a = this.formViewField.props) === null || _a === void 0 ? void 0 : _a.visible) === false,
@@ -72,12 +70,6 @@ export class EzCustomFormInput {
     gui.setAttribute('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) {
     //@ts-ignore
     gui.$children$.forEach((child) => {
@@ -136,7 +128,7 @@ export class EzCustomFormInput {
       },
       "value": {
         "type": "any",
-        "mutable": true,
+        "mutable": false,
         "complexType": {
           "original": "any",
           "resolved": "any",

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

@@ -23,7 +23,7 @@ export class EzFormView {
    */
   async setFieldProp(fieldName, propName, value) {
     const fields = this.fields.map(field => {
-      if (field.name === fieldName) {
+      if (field.name === fieldName && (value || value === 0)) {
         field.props = field.props || {};
         field.props[propName] = value;
       }

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 }) => {

package/dist/collection/components/ez-grid/controller/ag-grid/AgGridController.js

@@ -670,7 +670,7 @@ export default class AgGridController {
         showColumnFilter: (leftPosition) => this.showFilterColumn({ columnName: source.name, columnLabel: source.label, leftPosition, filteredOptions: this._filteredColumns.get(source.name), fromIcon: true }),
       },
       valueFormatter: params => {
-        if (params.value === undefined) {
+        if (params.value === undefined || params.value === null) {
           return "";
         }
         if (params.value instanceof Promise) {

package/dist/collection/components/ez-grid/controller/ag-grid/editor/templates/NumberInput.tpl.js

@@ -1,7 +1,8 @@
 import { HTMLBuilder } from "@sankhyalabs/core";
 export const buildDecimal = ({ readOnly, props }) => {
-  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(readOnly, precision, prettyPrecision);
 };
 export const buildInteger = ({ readOnly }) => {