q2-tecton-elements 1.21.1 → 1.22.0

package/dist/collection/components/q2-chart-bar/index.js

@@ -0,0 +1,466 @@
+import { h } from '@stencil/core';
+import * as echarts from 'echarts/core';
+import { TitleComponent, AriaComponent, GridComponent, } from 'echarts/components';
+import { BarChart } from 'echarts/charts';
+import { LabelLayout } from 'echarts/features';
+import { CanvasRenderer } from 'echarts/renderers';
+import { loc, overrideFocus } from 'src/utils';
+import { getCSSProperty, isValidColor, formatValue } from 'src/utils/charting';
+echarts.use([AriaComponent, BarChart, CanvasRenderer, LabelLayout, GridComponent, TitleComponent]);
+export class Q2ChartBar {
+  constructor() {
+    this.data = [];
+    this.alignChartName = undefined;
+    this.chartName = undefined;
+    this.color = undefined;
+    this.dataNamesOverflow = undefined;
+    this.dataNamesWidth = undefined;
+    this.format = undefined;
+    this.formatModifier = undefined;
+    this.hideBarLabels = false;
+    this.hideValueAxisLabels = false;
+    this.offsetDataNames = false;
+    this.offsetDataValues = false;
+    this.orientation = undefined;
+    this.showChartName = false;
+    this.sort = false;
+  }
+  componentDidLoad() {
+    const chart = echarts.init(this.chartContainer);
+    this.chart = chart;
+    this.resizeObserver = new ResizeObserver(() => this.resizeChart());
+    this.resizeObserver.observe(this.hostElement);
+    this.cacheComputedStyles();
+    this.updateChart(chart);
+    overrideFocus(this.hostElement);
+  }
+  willDestroyElement() {
+    this.resizeObserver = null;
+  }
+  cacheComputedStyles() {
+    this.chartContainerStyles = getComputedStyle(this.chartContainer);
+    this.hostElementStyles = getComputedStyle(this.hostElement);
+  }
+  getColor(color) {
+    const primaryColor = getCSSProperty('var(--t-primary)', this.chartContainerStyles, this.hostElementStyles);
+    const seriesColor = getCSSProperty(this.color, this.chartContainerStyles, this.hostElementStyles);
+    const cssColorProp = getCSSProperty(color, this.chartContainerStyles, this.hostElementStyles);
+    if (cssColorProp)
+      return cssColorProp;
+    if (isValidColor(color))
+      return color;
+    if (seriesColor)
+      return seriesColor;
+    if (isValidColor(this.color))
+      return this.color;
+    return primaryColor;
+  }
+  processData(data) {
+    return data.map(datum => {
+      return {
+        value: datum.value || 0,
+        itemStyle: {
+          color: this.getColor(datum.color),
+        },
+      };
+    });
+  }
+  updateChart(chart) {
+    var _a;
+    const decimals = ((_a = this.formatModifier) === null || _a === void 0 ? void 0 : _a.includes('dec')) ? this.formatModifier.replace('dec', '') : 0;
+    const valueAxis = {
+      type: 'value',
+      axisLabel: {
+        formatter: (value) => formatValue(value, {
+          type: this.format,
+          decimals,
+        }),
+        rotate: this.offsetDataValues ? 45 : 0,
+        margin: this.offsetDataValues ? 15 : 8,
+        show: !this.hideValueAxisLabels,
+      },
+    };
+    const categoryAxis = {
+      type: 'category',
+      data: this.data.map(datum => loc(datum.name) || ''),
+      axisLabel: {
+        rotate: this.offsetDataNames ? 45 : 0,
+        margin: this.offsetDataNames ? 15 : 8,
+        interval: 0,
+        width: this.dataNamesWidth || 50,
+        overflow: this.dataNamesOverflow || 'none',
+        truncate: 'ellipsis',
+      },
+      axisTick: {
+        alignWithLabel: this.offsetDataNames,
+      },
+    };
+    return chart.setOption({
+      aria: {
+        enabled: true,
+      },
+      title: {
+        text: this.chartName,
+        show: this.showChartName,
+        left: this.alignChartName,
+      },
+      grid: {
+        containLabel: true,
+      },
+      xAxis: this.orientation === 'horizontal' ? valueAxis : categoryAxis,
+      yAxis: this.orientation === 'horizontal' ? categoryAxis : valueAxis,
+      series: [
+        {
+          data: this.processData(this.data),
+          id: 'bar',
+          type: 'bar',
+          label: {
+            show: !this.hideBarLabels,
+            position: 'top',
+            fontWeight: 'bold',
+            formatter: (params) => {
+              return formatValue(params.value, {
+                type: this.format,
+                decimals,
+              });
+            },
+          },
+          realtimeSort: this.sort,
+        },
+      ],
+    });
+  }
+  resizeChart() {
+    this.chart.resize();
+  }
+  propsUpdates() {
+    this.updateChart(this.chart);
+  }
+  render() {
+    return (h("div", { class: "container" }, h("div", { ref: el => (this.chartContainer = el), class: "chart-container", "test-id": "barChartContainer" })));
+  }
+  static get is() { return "q2-chart-bar"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["styles.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["styles.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "data": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "IChartData[]",
+          "resolved": "IChartData[]",
+          "references": {
+            "IChartData": {
+              "location": "import",
+              "path": "src/utils/charting"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "defaultValue": "[]"
+      },
+      "alignChartName": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'left' | 'right' | 'center'",
+          "resolved": "\"center\" | \"left\" | \"right\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "align-chart-name",
+        "reflect": true
+      },
+      "chartName": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "chart-name",
+        "reflect": true
+      },
+      "color": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "color",
+        "reflect": true
+      },
+      "dataNamesOverflow": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'break' | 'truncate'",
+          "resolved": "\"break\" | \"truncate\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "data-names-overflow",
+        "reflect": true
+      },
+      "dataNamesWidth": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "data-names-width",
+        "reflect": true
+      },
+      "format": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'currency' | 'default'",
+          "resolved": "\"currency\" | \"default\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "format",
+        "reflect": true
+      },
+      "formatModifier": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "format-modifier",
+        "reflect": true
+      },
+      "hideBarLabels": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "hide-bar-labels",
+        "reflect": true,
+        "defaultValue": "false"
+      },
+      "hideValueAxisLabels": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "hide-value-axis-labels",
+        "reflect": true,
+        "defaultValue": "false"
+      },
+      "offsetDataNames": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "offset-data-names",
+        "reflect": true,
+        "defaultValue": "false"
+      },
+      "offsetDataValues": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "offset-data-values",
+        "reflect": true,
+        "defaultValue": "false"
+      },
+      "orientation": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'vertical' | 'horizontal'",
+          "resolved": "\"horizontal\" | \"vertical\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "orientation",
+        "reflect": true
+      },
+      "showChartName": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "show-chart-name",
+        "reflect": true,
+        "defaultValue": "false"
+      },
+      "sort": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "sort",
+        "reflect": true,
+        "defaultValue": "false"
+      }
+    };
+  }
+  static get elementRef() { return "hostElement"; }
+  static get watchers() {
+    return [{
+        "propName": "chartName",
+        "methodName": "propsUpdates"
+      }, {
+        "propName": "color",
+        "methodName": "propsUpdates"
+      }, {
+        "propName": "hideBarLabels",
+        "methodName": "propsUpdates"
+      }, {
+        "propName": "showChartName",
+        "methodName": "propsUpdates"
+      }, {
+        "propName": "alignChartName",
+        "methodName": "propsUpdates"
+      }, {
+        "propName": "orientation",
+        "methodName": "propsUpdates"
+      }, {
+        "propName": "format",
+        "methodName": "propsUpdates"
+      }, {
+        "propName": "sort",
+        "methodName": "propsUpdates"
+      }, {
+        "propName": "data",
+        "methodName": "propsUpdates"
+      }, {
+        "propName": "offsetDataNames",
+        "methodName": "propsUpdates"
+      }, {
+        "propName": "hideValueAxisLabels",
+        "methodName": "propsUpdates"
+      }, {
+        "propName": "formatModifier",
+        "methodName": "propsUpdates"
+      }, {
+        "propName": "dataNamesOverflow",
+        "methodName": "propsUpdates"
+      }];
+  }
+}

package/dist/collection/components/q2-chart-bar/styles.css

@@ -0,0 +1,85 @@
+* {
+  box-sizing: border-box;
+}
+
+*:active {
+  outline: none;
+}
+
+*:focus {
+  outline: none;
+  box-shadow: var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #33b4ff #06C);
+}
+
+:host {
+  box-shadow: none !important;
+}
+
+::-moz-focus-inner {
+  border: none;
+}
+
+input,
+textarea,
+button {
+  font-family: inherit;
+  font-size: inherit;
+  font-stretch: inherit;
+}
+
+:host(.sr),
+:host(.sr) button {
+  border: 0;
+  clip: rect(0 0 0 0);
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  width: 1px;
+  white-space: nowrap;
+}
+
+.sr,
+.sr button {
+  border: 0;
+  clip: rect(0 0 0 0);
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  width: 1px;
+  white-space: nowrap;
+}
+
+.hidden {
+  display: none;
+}
+
+:host([hidden]) {
+  display: none;
+}
+
+.invisible {
+  visibility: hidden;
+}
+
+:host {
+  position: relative;
+  width: 100%;
+  display: block;
+}
+
+.container {
+  aspect-ratio: 1/1;
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.chart-container {
+  width: 100%;
+  height: 100%;
+}

package/dist/collection/components/q2-chart-donut/index.js

@@ -532,10 +532,10 @@ export class Q2ChartDonut {
         "type": "unknown",
         "mutable": false,
         "complexType": {
-          "original": "IChartData[]",
-          "resolved": "IChartData[]",
+          "original": "IDonutChartData[]",
+          "resolved": "IDonutChartData[]",
           "references": {
-            "IChartData": {
+            "IDonutChartData": {
               "location": "local"
             }
           }

package/dist/collection/components/q2-checkbox/styles.css

@@ -125,10 +125,14 @@ label {
   cursor: pointer;
 }
 
-:host([disabled]),
+:host([disabled]:not([disabled=false])),
 :host([group-disabled]) {
   opacity: var(--tct-checkbox-disabled-opacity, var(--t-checkbox-disabled-opacity, var(--tct-disabled-opacity, var(--app-disabled-opacity, 0.4))));
 }
+:host([disabled]:not([disabled=false])) label,
+:host([group-disabled]) label {
+  cursor: not-allowed;
+}
 
 .checkbox-icon {
   --t-icon-stroke-primary: var(--comp-checkbox-outer-stroke-color);

package/dist/collection/components/q2-editable-field/styles.css

@@ -84,7 +84,7 @@ q2-input,
 }
 
 q2-input {
-  flex: 1 0 auto;
+  flex: 1 1 auto;
   min-width: 170px;
 }
 

package/dist/collection/components/q2-input/formatting/phone.js

@@ -424,7 +424,7 @@ export const phoneNumberFormats = {
       prefix: ''
   }, */
   ID: {
-    mask: '##########',
+    mask: '#######??????',
     prefix: '+62 ',
   },
   IR: {
@@ -633,7 +633,7 @@ export const phoneNumberFormats = {
     prefix: '+1 ',
   },
   MA: {
-    mask: '##-###-####',
+    mask: '#########?',
     prefix: '+212 ',
   },
   /* MZ: {
@@ -967,7 +967,7 @@ export const phoneNumberFormats = {
       prefix: '+44 '
   }, */
   GB: {
-    mask: '#############',
+    mask: '#########????',
     prefix: '+44 ',
   },
   UY: {

package/dist/collection/components/q2-input/index.js

@@ -60,6 +60,7 @@ export class Q2Input {
       };
       this.input.emit(eventDetail);
       this.change.emit(eventDetail);
+      this.clear.emit();
       this.inputField.focus();
     };
     this.value = undefined;
@@ -1055,6 +1056,26 @@ export class Q2Input {
             }
           }
         }
+      }, {
+        "method": "clear",
+        "name": "clear",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "IEventDetail",
+          "resolved": "IEventDetail",
+          "references": {
+            "IEventDetail": {
+              "location": "import",
+              "path": "./types"
+            }
+          }
+        }
       }];
   }
   static get elementRef() { return "hostElement"; }

package/dist/collection/components/q2-input/styles.css

@@ -133,7 +133,7 @@ label {
   box-shadow: var(--tct-input-box-shadow, var(--t-input-box-shadow, none));
   transition: border-width var(--comp-input-tween), border-color var(--comp-input-tween), box-shadow var(--comp-input-tween);
 }
-:host([disabled]) .input-container {
+:host([disabled]:not([disabled=false])) .input-container {
   cursor: not-allowed;
   opacity: var(--tct-input-disabled-opacity, var(--t-input-disabled-opacity, var(--tct-disabled-opacity, var(--app-disabled-opacity, 0.4))));
 }
@@ -175,7 +175,7 @@ label {
 .input-field[type=search]::-webkit-search-decoration, .input-field[type=search]::-webkit-search-cancel-button, .input-field[type=search]::-webkit-search-results-button, .input-field[type=search]::-webkit-search-results-decoration {
   display: none;
 }
-.input-field[disabled] {
+.input-field[disabled]:not([disabled=false]) {
   cursor: not-allowed;
 }
 .right-aligned .input-field {

package/dist/collection/components/q2-radio/styles.css

@@ -152,7 +152,7 @@ button {
   width: 0;
 }
 
-input:disabled + label {
+input:disabled + label[for] {
   cursor: not-allowed;
   opacity: var(--tct-disabled-opacity, var(--app-disabled-opacity, 0.4));
 }