@sme.up/ketchup 9.1.0 → 9.3.0

package/dist/collection/components/kup-gauge/kup-gauge.js

@@ -7,763 +7,763 @@ import { arc } from "d3-shape";
 import { KupThemeColorValues } from "../../managers/kup-theme/kup-theme-declarations";
 import { componentWrapperId } from "../../variables/GenericVariables";
 export class KupGauge {
-  constructor() {
+    constructor() {
+        /*-------------------------------------------------*/
+        /*       I n t e r n a l   V a r i a b l e s       */
+        /*-------------------------------------------------*/
+        /**
+         * Instance of the KupManager class.
+         */
+        this.kupManager = kupManagerInstance();
+        // Arcs generator
+        this.arcGenerator = arc();
+        /**
+         * Holds the maximum positive interval.
+         * Percentages are calculated as it follows:
+         * MIN = 0 = the value the prop minValue gets transformed to\
+         * MAX = ABSOLUTE(minValue - maxValue) = the maxValuePositive holds this value
+         * TVALUE = value - minValue = any value, which needs to be represented on the chart
+         * @namespace kup-gauge.maxValuePositive
+         */
+        this.maxValuePositive = 0;
+        this.arcThickness = 30;
+        this.colors = [
+            `var(${KupThemeColorValues.SUCCESS})`,
+            `var(${KupThemeColorValues.WARNING})`,
+            `var(${KupThemeColorValues.DANGER})`,
+        ];
+        this.customStyle = '';
+        this.firstThreshold = undefined;
+        this.labelDistance = 20;
+        this.maxValue = 100;
+        this.measurementUnit = '';
+        this.minValue = -100;
+        this.needleCircle = false;
+        this.onlyValue = false;
+        this.reverseColors = false;
+        this.secondThreshold = undefined;
+        this.showLabels = true;
+        this.showMaxmin = true;
+        this.showValue = true;
+        this.size = 300;
+        this.value = 0;
+        this.valueSize = 0;
+        this.widthComponent = '100%';
+    }
     /*-------------------------------------------------*/
-    /*       I n t e r n a l   V a r i a b l e s       */
+    /*           P u b l i c   M e t h o d s           */
     /*-------------------------------------------------*/
     /**
-     * Instance of the KupManager class.
+     * Used to retrieve component's props values.
+     * @param {boolean} descriptions - When provided and true, the result will be the list of props with their description.
+     * @returns {Promise<GenericObject>} List of props as object, each key will be a prop.
      */
-    this.kupManager = kupManagerInstance();
-    // Arcs generator
-    this.arcGenerator = arc();
+    async getProps(descriptions) {
+        return getProps(this, KupGaugeProps, descriptions);
+    }
     /**
-     * Holds the maximum positive interval.
-     * Percentages are calculated as it follows:
-     * MIN = 0 = the value the prop minValue gets transformed to\
-     * MAX = ABSOLUTE(minValue - maxValue) = the maxValuePositive holds this value
-     * TVALUE = value - minValue = any value, which needs to be represented on the chart
-     * @namespace kup-gauge.maxValuePositive
+     * This method is used to trigger a new render of the component.
      */
-    this.maxValuePositive = 0;
-    this.arcThickness = 30;
-    this.colors = [
-      `var(${KupThemeColorValues.SUCCESS})`,
-      `var(${KupThemeColorValues.WARNING})`,
-      `var(${KupThemeColorValues.DANGER})`,
-    ];
-    this.customStyle = '';
-    this.firstThreshold = undefined;
-    this.labelDistance = 20;
-    this.maxValue = 100;
-    this.measurementUnit = '';
-    this.minValue = -100;
-    this.needleCircle = false;
-    this.onlyValue = false;
-    this.reverseColors = false;
-    this.secondThreshold = undefined;
-    this.showLabels = true;
-    this.showMaxmin = true;
-    this.showValue = true;
-    this.size = 300;
-    this.value = 0;
-    this.valueSize = 0;
-    this.widthComponent = '100%';
-  }
-  /*-------------------------------------------------*/
-  /*           P u b l i c   M e t h o d s           */
-  /*-------------------------------------------------*/
-  /**
-   * Used to retrieve component's props values.
-   * @param {boolean} descriptions - When provided and true, the result will be the list of props with their description.
-   * @returns {Promise<GenericObject>} List of props as object, each key will be a prop.
-   */
-  async getProps(descriptions) {
-    return getProps(this, KupGaugeProps, descriptions);
-  }
-  /**
-   * This method is used to trigger a new render of the component.
-   */
-  async refresh() {
-    forceUpdate(this);
-  }
-  /**
-   * Sets the props to the component.
-   * @param {GenericObject} props - Object containing props that will be set to the component.
-   */
-  async setProps(props) {
-    setProps(this, KupGaugeProps, props);
-  }
-  /*-------------------------------------------------*/
-  /*           P r i v a t e   M e t h o d s         */
-  /*-------------------------------------------------*/
-  percToDeg(perc) {
-    return perc * 360;
-  }
-  degToRad(deg) {
-    return (deg * Math.PI) / 180;
-  }
-  percToRad(perc) {
-    return this.degToRad(this.percToDeg(perc));
-  }
-  /**
-   * Given a valid value, minValue <= value <= maxValue, calculates this value as a percentage of the interval [minValue, maxValue]
-   * @param {number} valueToPercentage - The value to be calculated as a percentage
-   * @see kup-gauge.maxValuePositive
-   */
-  calculateValuePercentage(valueToPercentage = 0) {
-    return (valueToPercentage - this.minValue) / this.maxValuePositive;
-  }
-  calculateValueFontSize() {
-    switch (this.valueSize) {
-      case 3:
-        return '350%';
-      case 2:
-        return '325%';
-      case 1:
-        return '300%';
-      default:
-      case 0:
-        return '275%';
+    async refresh() {
+        forceUpdate(this);
     }
-  }
-  //---- Rendering functions ----
-  /**
-   * Provided all the necessary data, returns the string necessary for a <path/> element to build the gauge needle.
-   * @param needleLength - A pure number of viewbox units indicating the needle lenght.
-   * @param needleBaseRadius - Sets the needle radius in viewbox units.
-   * @param centerX - X coordinate of the center of the base needle.
-   * @param centerY - Y coordinate of the center of the base needle.
-   * @param rotationPercentage {number} - A percentage number setting the current rotation of the needle. (0 < rotationPercentage < 1)
-   * @returns {string}
-   */
-  paintNeedle(needleLength, needleBaseRadius, centerX, centerY, rotationPercentage = 0) {
-    let leftX, leftY, rightX, rightY, thetaRad, topX, topY;
-    thetaRad = this.percToRad(rotationPercentage / 2); // Since the gauge is a semicircle, we must divide the percentage in half to have the correct angle
-    topX = centerX - needleLength * Math.cos(thetaRad);
-    topY = centerY - needleLength * Math.sin(thetaRad);
-    leftX = centerX - needleBaseRadius * Math.cos(thetaRad - Math.PI / 2);
-    leftY = centerY - needleBaseRadius * Math.sin(thetaRad - Math.PI / 2);
-    rightX = centerX - needleBaseRadius * Math.cos(thetaRad + Math.PI / 2);
-    rightY = centerY - needleBaseRadius * Math.sin(thetaRad + Math.PI / 2);
-    return ('M ' +
-      leftX +
-      ' ' +
-      leftY +
-      ' L ' +
-      topX +
-      ' ' +
-      topY +
-      ' L ' +
-      rightX +
-      ' ' +
-      rightY);
-  }
-  /*-------------------------------------------------*/
-  /*          L i f e c y c l e   H o o k s          */
-  /*-------------------------------------------------*/
-  componentWillLoad() {
-    this.kupManager.debug.logLoad(this, false);
-    this.kupManager.theme.register(this);
-  }
-  componentDidLoad() {
-    this.kupManager.debug.logLoad(this, true);
-  }
-  componentWillRender() {
-    this.kupManager.debug.logRender(this, false);
-    if (!this.labelDistance) {
-      this.labelDistance = 20;
-    }
-    if (this.maxValue === undefined || this.maxValue === null) {
-      this.maxValue = 100;
+    /**
+     * Sets the props to the component.
+     * @param {GenericObject} props - Object containing props that will be set to the component.
+     */
+    async setProps(props) {
+        setProps(this, KupGaugeProps, props);
     }
-    if (this.minValue === undefined || this.minValue === null) {
-      this.minValue = -100;
+    /*-------------------------------------------------*/
+    /*           P r i v a t e   M e t h o d s         */
+    /*-------------------------------------------------*/
+    percToDeg(perc) {
+        return perc * 360;
     }
-  }
-  componentDidRender() {
-    this.kupManager.debug.logRender(this, true);
-  }
-  render() {
-    if (isNaN(this.value)) {
-      this.kupManager.debug.logMessage(this, 'Invalid value, not rendering!', KupDebugCategory.WARNING);
-      return;
+    degToRad(deg) {
+        return (deg * Math.PI) / 180;
     }
-    // mathematical operations
-    this.maxValuePositive = Math.abs(this.minValue - this.maxValue);
-    let tempValue = this.value;
-    if (this.value > this.maxValue) {
-      this.value = this.maxValue;
+    percToRad(perc) {
+        return this.degToRad(this.percToDeg(perc));
     }
-    if (this.value < this.minValue) {
-      this.value = this.minValue;
+    /**
+     * Given a valid value, minValue <= value <= maxValue, calculates this value as a percentage of the interval [minValue, maxValue]
+     * @param {number} valueToPercentage - The value to be calculated as a percentage
+     * @see kup-gauge.maxValuePositive
+     */
+    calculateValuePercentage(valueToPercentage = 0) {
+        return (valueToPercentage - this.minValue) / this.maxValuePositive;
     }
-    // Svg constants
-    let yValueMultiplier = 1;
-    switch (this.valueSize) {
-      case 3:
-        yValueMultiplier = 3;
-        break;
-      case 2:
-        yValueMultiplier = 2.75;
-        break;
-      case 1:
-        yValueMultiplier = 2.5;
-        break;
-      default:
-      case 0:
-        yValueMultiplier = 2.25;
-        break;
+    calculateValueFontSize() {
+        switch (this.valueSize) {
+            case 3:
+                return '350%';
+            case 2:
+                return '325%';
+            case 1:
+                return '300%';
+            default:
+            case 0:
+                return '275%';
+        }
     }
-    const halvedSize = this.size / 2; // The svg size ratio w : w / 2
-    const needleCircleRadius = this.size / 20; // Arbitrary size of the base of the needle
-    const needleLength = halvedSize - 2 * this.arcThickness; // Calculates the length of the needle in pure units
-    const valueLabelYPosition = halvedSize +
-      needleCircleRadius +
-      this.labelDistance * yValueMultiplier;
-    // User provided thresholds
-    // TODO these thresholds will be given to the component by a user prop
-    const givenThresholds = [];
-    if (!this.onlyValue) {
-      if (this.firstThreshold || 0 === this.firstThreshold) {
-        givenThresholds.push(this.firstThreshold);
-      }
-      if (this.secondThreshold || 0 === this.secondThreshold) {
-        givenThresholds.push(this.secondThreshold);
-      }
+    //---- Rendering functions ----
+    /**
+     * Provided all the necessary data, returns the string necessary for a <path/> element to build the gauge needle.
+     * @param needleLength - A pure number of viewbox units indicating the needle lenght.
+     * @param needleBaseRadius - Sets the needle radius in viewbox units.
+     * @param centerX - X coordinate of the center of the base needle.
+     * @param centerY - Y coordinate of the center of the base needle.
+     * @param rotationPercentage {number} - A percentage number setting the current rotation of the needle. (0 < rotationPercentage < 1)
+     * @returns {string}
+     */
+    paintNeedle(needleLength, needleBaseRadius, centerX, centerY, rotationPercentage = 0) {
+        let leftX, leftY, rightX, rightY, thetaRad, topX, topY;
+        thetaRad = this.percToRad(rotationPercentage / 2); // Since the gauge is a semicircle, we must divide the percentage in half to have the correct angle
+        topX = centerX - needleLength * Math.cos(thetaRad);
+        topY = centerY - needleLength * Math.sin(thetaRad);
+        leftX = centerX - needleBaseRadius * Math.cos(thetaRad - Math.PI / 2);
+        leftY = centerY - needleBaseRadius * Math.sin(thetaRad - Math.PI / 2);
+        rightX = centerX - needleBaseRadius * Math.cos(thetaRad + Math.PI / 2);
+        rightY = centerY - needleBaseRadius * Math.sin(thetaRad + Math.PI / 2);
+        return ('M ' +
+            leftX +
+            ' ' +
+            leftY +
+            ' L ' +
+            topX +
+            ' ' +
+            topY +
+            ' L ' +
+            rightX +
+            ' ' +
+            rightY);
     }
-    else {
-      givenThresholds.push(this.value);
+    /*-------------------------------------------------*/
+    /*          L i f e c y c l e   H o o k s          */
+    /*-------------------------------------------------*/
+    componentWillLoad() {
+        this.kupManager.debug.logLoad(this, false);
+        this.kupManager.theme.register(this);
     }
-    // This creates the various point from which the arcs are generated
-    const arcsThresholds = [
-      this.minValue,
-      ...givenThresholds,
-      this.maxValue,
-    ];
-    // Creates arc elements and chooses their color orders
-    const arcsElements = [];
-    let arcsColors;
-    if (!this.onlyValue) {
-      arcsColors = !this.reverseColors
-        ? this.colors
-        : this.colors.slice().reverse();
+    componentDidLoad() {
+        this.kupManager.debug.logLoad(this, true);
     }
-    else {
-      let computedcolors = !this.reverseColors
-        ? this.colors
-        : this.colors.slice().reverse();
-      let valuecolor = this.value < this.firstThreshold
-        ? computedcolors[0]
-        : this.value < this.secondThreshold
-          ? computedcolors[1]
-          : computedcolors[2];
-      arcsColors = [
-        valuecolor,
-        `rgba(var(${KupThemeColorValues.TEXT}-rgb), .1)`,
-      ];
+    componentWillRender() {
+        this.kupManager.debug.logRender(this, false);
+        if (!this.labelDistance) {
+            this.labelDistance = 20;
+        }
+        if (this.maxValue === undefined || this.maxValue === null) {
+            this.maxValue = 100;
+        }
+        if (this.minValue === undefined || this.minValue === null) {
+            this.minValue = -100;
+        }
     }
-    for (let i = 0; i < arcsThresholds.length - 1; i++) {
-      const currentArcPath = this.arcGenerator({
-        innerRadius: halvedSize - this.arcThickness,
-        outerRadius: halvedSize,
-        startAngle: this.calculateValuePercentage(arcsThresholds[i]) * Math.PI,
-        endAngle: this.calculateValuePercentage(arcsThresholds[i + 1]) *
-          Math.PI,
-      });
-      // If there is no color specified for that arc, we provide a black fallback
-      arcsElements.push(h("path", { d: currentArcPath, style: { fill: arcsColors[i] ? arcsColors[i] : '#000000' } }));
+    componentDidRender() {
+        this.kupManager.debug.logRender(this, true);
     }
-    // Composes the threshold label elements, if labels must be displayed
-    const textElements = this.showLabels || this.showMaxmin
-      ? arcsThresholds.map((threshold) => {
-        // Given the
-        const thresholdPercentage = this.calculateValuePercentage(threshold);
-        // Decides the position of the text
-        // @see https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/text-anchor
-        let textPosition = 'end';
-        if (thresholdPercentage > 0.5) {
-          textPosition = 'start';
+    render() {
+        if (isNaN(this.value)) {
+            this.kupManager.debug.logMessage(this, 'Invalid value, not rendering!', KupDebugCategory.WARNING);
+            return;
         }
-        else if (thresholdPercentage === 0.5) {
-          textPosition = 'middle';
+        // mathematical operations
+        this.maxValuePositive = Math.abs(this.minValue - this.maxValue);
+        let tempValue = this.value;
+        if (this.value > this.maxValue) {
+            this.value = this.maxValue;
         }
-        // Since the gauge is a semicircle, we must divide the percentage in half to have the correct angle
-        const thetaRad = this.percToRad(thresholdPercentage / 2);
-        let topX = halvedSize - (needleLength + 2) * Math.cos(thetaRad);
-        let topY = halvedSize - (needleLength + 2) * Math.sin(thetaRad);
-        let retValue = '';
-        if (thresholdPercentage > 0 && thresholdPercentage < 1) {
-          if (this.showLabels && !this.onlyValue) {
-            retValue = (h("text", { class: "gauge__label-text", "text-anchor": textPosition, x: topX, y: topY }, this.kupManager.math.numberStringToFormattedString(String(threshold), -1, '')));
-          }
+        if (this.value < this.minValue) {
+            this.value = this.minValue;
         }
-        else {
-          if (this.showMaxmin) {
-            if (thresholdPercentage === 0) {
-              topX = this.arcThickness;
-              topY = halvedSize + this.labelDistance;
+        // Svg constants
+        let yValueMultiplier = 1;
+        switch (this.valueSize) {
+            case 3:
+                yValueMultiplier = 3;
+                break;
+            case 2:
+                yValueMultiplier = 2.75;
+                break;
+            case 1:
+                yValueMultiplier = 2.5;
+                break;
+            default:
+            case 0:
+                yValueMultiplier = 2.25;
+                break;
+        }
+        const halvedSize = this.size / 2; // The svg size ratio w : w / 2
+        const needleCircleRadius = this.size / 20; // Arbitrary size of the base of the needle
+        const needleLength = halvedSize - 2 * this.arcThickness; // Calculates the length of the needle in pure units
+        const valueLabelYPosition = halvedSize +
+            needleCircleRadius +
+            this.labelDistance * yValueMultiplier;
+        // User provided thresholds
+        // TODO these thresholds will be given to the component by a user prop
+        const givenThresholds = [];
+        if (!this.onlyValue) {
+            if (this.firstThreshold || 0 === this.firstThreshold) {
+                givenThresholds.push(this.firstThreshold);
             }
-            else {
-              topX = this.size - this.arcThickness;
-              topY = halvedSize + this.labelDistance;
+            if (this.secondThreshold || 0 === this.secondThreshold) {
+                givenThresholds.push(this.secondThreshold);
             }
-            retValue = (h("text", { class: "gauge__label-text", "text-anchor": textPosition, x: topX, y: topY }, this.kupManager.math.numberStringToFormattedString(String(threshold), -1, '')));
-          }
         }
-        return retValue;
-      })
-      : [];
-    const style = { fontSize: this.calculateValueFontSize() };
-    let valueText = undefined;
-    if (this.showValue) {
-      valueText = (h("text", { class: "gauge__label-text value", "text-anchor": "middle", x: halvedSize, y: valueLabelYPosition, style: style }, this.kupManager.math.numberStringToFormattedString(String(tempValue), -1, '') +
-        ' ' +
-        this.measurementUnit));
+        else {
+            givenThresholds.push(this.value);
+        }
+        // This creates the various point from which the arcs are generated
+        const arcsThresholds = [
+            this.minValue,
+            ...givenThresholds,
+            this.maxValue,
+        ];
+        // Creates arc elements and chooses their color orders
+        const arcsElements = [];
+        let arcsColors;
+        if (!this.onlyValue) {
+            arcsColors = !this.reverseColors
+                ? this.colors
+                : this.colors.slice().reverse();
+        }
+        else {
+            let computedcolors = !this.reverseColors
+                ? this.colors
+                : this.colors.slice().reverse();
+            let valuecolor = this.value < this.firstThreshold
+                ? computedcolors[0]
+                : this.value < this.secondThreshold
+                    ? computedcolors[1]
+                    : computedcolors[2];
+            arcsColors = [
+                valuecolor,
+                `rgba(var(${KupThemeColorValues.TEXT}-rgb), .1)`,
+            ];
+        }
+        for (let i = 0; i < arcsThresholds.length - 1; i++) {
+            const currentArcPath = this.arcGenerator({
+                innerRadius: halvedSize - this.arcThickness,
+                outerRadius: halvedSize,
+                startAngle: this.calculateValuePercentage(arcsThresholds[i]) * Math.PI,
+                endAngle: this.calculateValuePercentage(arcsThresholds[i + 1]) *
+                    Math.PI,
+            });
+            // If there is no color specified for that arc, we provide a black fallback
+            arcsElements.push(h("path", { d: currentArcPath, style: { fill: arcsColors[i] ? arcsColors[i] : '#000000' } }));
+        }
+        // Composes the threshold label elements, if labels must be displayed
+        const textElements = this.showLabels || this.showMaxmin
+            ? arcsThresholds.map((threshold) => {
+                // Given the
+                const thresholdPercentage = this.calculateValuePercentage(threshold);
+                // Decides the position of the text
+                // @see https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/text-anchor
+                let textPosition = 'end';
+                if (thresholdPercentage > 0.5) {
+                    textPosition = 'start';
+                }
+                else if (thresholdPercentage === 0.5) {
+                    textPosition = 'middle';
+                }
+                // Since the gauge is a semicircle, we must divide the percentage in half to have the correct angle
+                const thetaRad = this.percToRad(thresholdPercentage / 2);
+                let topX = halvedSize - (needleLength + 2) * Math.cos(thetaRad);
+                let topY = halvedSize - (needleLength + 2) * Math.sin(thetaRad);
+                let retValue = '';
+                if (thresholdPercentage > 0 && thresholdPercentage < 1) {
+                    if (this.showLabels && !this.onlyValue) {
+                        retValue = (h("text", { class: "gauge__label-text", "text-anchor": textPosition, x: topX, y: topY }, this.kupManager.math.numberStringToFormattedString(String(threshold), -1, '')));
+                    }
+                }
+                else {
+                    if (this.showMaxmin) {
+                        if (thresholdPercentage === 0) {
+                            topX = this.arcThickness;
+                            topY = halvedSize + this.labelDistance;
+                        }
+                        else {
+                            topX = this.size - this.arcThickness;
+                            topY = halvedSize + this.labelDistance;
+                        }
+                        retValue = (h("text", { class: "gauge__label-text", "text-anchor": textPosition, x: topX, y: topY }, this.kupManager.math.numberStringToFormattedString(String(threshold), -1, '')));
+                    }
+                }
+                return retValue;
+            })
+            : [];
+        const style = { fontSize: this.calculateValueFontSize() };
+        let valueText = undefined;
+        if (this.showValue) {
+            valueText = (h("text", { class: "gauge__label-text value", "text-anchor": "middle", x: halvedSize, y: valueLabelYPosition, style: style }, this.kupManager.math.numberStringToFormattedString(String(tempValue), -1, '') +
+                ' ' +
+                this.measurementUnit));
+        }
+        const width = { width: this.widthComponent };
+        return (h(Host, null, h("style", null, this.kupManager.theme.setKupStyle(this.rootElement)), h("div", { id: componentWrapperId, class: "gauge__container" }, h("svg", { class: "gauge", style: width, viewBox: `0 0 ${this.size} ${valueLabelYPosition}` }, h("g", { transform: `rotate(-90) translate(-${halvedSize}, ${halvedSize})` }, arcsElements), this.needleCircle ? (h("circle", { class: "gauge__needle-base", cx: halvedSize, cy: halvedSize, r: needleCircleRadius })) : null, h("path", { class: "gauge__needle", d: this.paintNeedle(needleLength, needleCircleRadius, halvedSize, halvedSize, this.calculateValuePercentage(this.value)) }), textElements, valueText))));
+    }
+    disconnectedCallback() {
+        this.kupManager.theme.unregister(this);
     }
-    const width = { width: this.widthComponent };
-    return (h(Host, null, h("style", null, this.kupManager.theme.setKupStyle(this.rootElement)), h("div", { id: componentWrapperId, class: "gauge__container" }, h("svg", { class: "gauge", style: width, viewBox: `0 0 ${this.size} ${valueLabelYPosition}` }, h("g", { transform: `rotate(-90) translate(-${halvedSize}, ${halvedSize})` }, arcsElements), this.needleCircle ? (h("circle", { class: "gauge__needle-base", cx: halvedSize, cy: halvedSize, r: needleCircleRadius })) : null, h("path", { class: "gauge__needle", d: this.paintNeedle(needleLength, needleCircleRadius, halvedSize, halvedSize, this.calculateValuePercentage(this.value)) }), textElements, valueText))));
-  }
-  disconnectedCallback() {
-    this.kupManager.theme.unregister(this);
-  }
-  static get is() { return "kup-gauge"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["kup-gauge.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["kup-gauge.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "arcThickness": {
-        "type": "number",
-        "mutable": false,
-        "complexType": {
-          "original": "number",
-          "resolved": "number",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [{
-              "name": "namespace",
-              "text": "kup-gauge.arcThickness"
-            }, {
-              "name": "see",
-              "text": "kup-gauge.size"
-            }],
-          "text": "Sets how much the arc of the gauge should be thick."
-        },
-        "attribute": "arc-thickness",
-        "reflect": false,
-        "defaultValue": "30"
-      },
-      "colors": {
-        "type": "unknown",
-        "mutable": false,
-        "complexType": {
-          "original": "string[]",
-          "resolved": "string[]",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Array of three elements to specify the color of the arcs."
-        },
-        "defaultValue": "[\r\n        `var(${KupThemeColorValues.SUCCESS})`,\r\n        `var(${KupThemeColorValues.WARNING})`,\r\n        `var(${KupThemeColorValues.DANGER})`,\r\n    ]"
-      },
-      "customStyle": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [{
-              "name": "default",
-              "text": "\"\""
-            }, {
-              "name": "see",
-              "text": "https://ketchup.smeup.com/ketchup-showcase/#/customization"
-            }],
-          "text": "Custom style of the component."
-        },
-        "attribute": "custom-style",
-        "reflect": false,
-        "defaultValue": "''"
-      },
-      "firstThreshold": {
-        "type": "number",
-        "mutable": false,
-        "complexType": {
-          "original": "number",
-          "resolved": "number",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "The first threshold, establishing the length of the first and second arc."
-        },
-        "attribute": "first-threshold",
-        "reflect": false
-      },
-      "labelDistance": {
-        "type": "number",
-        "mutable": true,
-        "complexType": {
-          "original": "number",
-          "resolved": "number",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "The distance the label and the value has from the gauge graph."
-        },
-        "attribute": "label-distance",
-        "reflect": false,
-        "defaultValue": "20"
-      },
-      "maxValue": {
-        "type": "number",
-        "mutable": true,
-        "complexType": {
-          "original": "number",
-          "resolved": "number",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "The maximum value reachable in the current graph."
-        },
-        "attribute": "max-value",
-        "reflect": false,
-        "defaultValue": "100"
-      },
-      "measurementUnit": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "A string which will be appended to the displayed values of the component."
-        },
-        "attribute": "measurement-unit",
-        "reflect": false,
-        "defaultValue": "''"
-      },
-      "minValue": {
-        "type": "number",
-        "mutable": true,
-        "complexType": {
-          "original": "number",
-          "resolved": "number",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "The minimum value reachable in the current graph."
-        },
-        "attribute": "min-value",
-        "reflect": false,
-        "defaultValue": "-100"
-      },
-      "needleCircle": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "When true, shows a rounded needle."
-        },
-        "attribute": "needle-circle",
-        "reflect": false,
-        "defaultValue": "false"
-      },
-      "onlyValue": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "When true, ignore thresholds in gauge and show colored value's arc."
-        },
-        "attribute": "only-value",
-        "reflect": false,
-        "defaultValue": "false"
-      },
-      "reverseColors": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "When true, the colors inside the colors array are used in the reversed order."
-        },
-        "attribute": "reverse-colors",
-        "reflect": false,
-        "defaultValue": "false"
-      },
-      "secondThreshold": {
-        "type": "number",
-        "mutable": false,
-        "complexType": {
-          "original": "number",
-          "resolved": "number",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "The second threshold, establishing the length of the second and third arc."
-        },
-        "attribute": "second-threshold",
-        "reflect": false
-      },
-      "showLabels": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "If set to false, threshold values of the gauge are not displayed."
-        },
-        "attribute": "show-labels",
-        "reflect": false,
-        "defaultValue": "true"
-      },
-      "showMaxmin": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "If set to false, the maximum and minimum values of the gauge are not displayed."
-        },
-        "attribute": "show-maxmin",
-        "reflect": false,
-        "defaultValue": "true"
-      },
-      "showValue": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "If set to false, the current value of the gauge is not displayed."
-        },
-        "attribute": "show-value",
-        "reflect": false,
-        "defaultValue": "true"
-      },
-      "size": {
-        "type": "number",
-        "mutable": false,
-        "complexType": {
-          "original": "number",
-          "resolved": "number",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [{
-              "name": "namespace",
-              "text": "kup-gauge.size"
-            }, {
-              "name": "see",
-              "text": "kup-gauge.arcThickness"
-            }],
-          "text": "Con be used change the viewbox of the SVG.\r\nBy manipulating this value, some customizations of the aspect of the gauge is achievable."
-        },
-        "attribute": "size",
-        "reflect": false,
-        "defaultValue": "300"
-      },
-      "value": {
-        "type": "number",
-        "mutable": true,
-        "complexType": {
-          "original": "number",
-          "resolved": "number",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "The current value of the gauge.\r\nThe gauge's needle points to the percentage based on this prop."
-        },
-        "attribute": "value",
-        "reflect": false,
-        "defaultValue": "0"
-      },
-      "valueSize": {
-        "type": "number",
-        "mutable": false,
-        "complexType": {
-          "original": "number",
-          "resolved": "number",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "The current size of gauge's value.\r\nCorrect values are: 0,1,2 or 3."
-        },
-        "attribute": "value-size",
-        "reflect": false,
-        "defaultValue": "0"
-      },
-      "widthComponent": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Set Width gauge."
-        },
-        "attribute": "width-component",
-        "reflect": false,
-        "defaultValue": "'100%'"
-      }
-    };
-  }
-  static get methods() {
-    return {
-      "getProps": {
-        "complexType": {
-          "signature": "(descriptions?: boolean) => Promise<GenericObject>",
-          "parameters": [{
-              "tags": [{
-                  "name": "param",
-                  "text": "descriptions - When provided and true, the result will be the list of props with their description."
-                }],
-              "text": "- When provided and true, the result will be the list of props with their description."
-            }],
-          "references": {
-            "Promise": {
-              "location": "global",
-              "id": "global::Promise"
+    static get is() { return "kup-gauge"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["kup-gauge.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["kup-gauge.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "arcThickness": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "namespace",
+                            "text": "kup-gauge.arcThickness"
+                        }, {
+                            "name": "see",
+                            "text": "kup-gauge.size"
+                        }],
+                    "text": "Sets how much the arc of the gauge should be thick."
+                },
+                "attribute": "arc-thickness",
+                "reflect": false,
+                "defaultValue": "30"
             },
-            "GenericObject": {
-              "location": "import",
-              "path": "../../types/GenericTypes",
-              "id": "src/types/GenericTypes.ts::GenericObject"
-            }
-          },
-          "return": "Promise<GenericObject>"
-        },
-        "docs": {
-          "text": "Used to retrieve component's props values.",
-          "tags": [{
-              "name": "param",
-              "text": "descriptions - When provided and true, the result will be the list of props with their description."
-            }, {
-              "name": "returns",
-              "text": "List of props as object, each key will be a prop."
-            }]
-        }
-      },
-      "refresh": {
-        "complexType": {
-          "signature": "() => Promise<void>",
-          "parameters": [],
-          "references": {
-            "Promise": {
-              "location": "global",
-              "id": "global::Promise"
+            "colors": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "string[]",
+                    "resolved": "string[]",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Array of three elements to specify the color of the arcs."
+                },
+                "defaultValue": "[\r\n        `var(${KupThemeColorValues.SUCCESS})`,\r\n        `var(${KupThemeColorValues.WARNING})`,\r\n        `var(${KupThemeColorValues.DANGER})`,\r\n    ]"
+            },
+            "customStyle": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "\"\""
+                        }, {
+                            "name": "see",
+                            "text": "https://ketchup.smeup.com/ketchup-showcase/#/customization"
+                        }],
+                    "text": "Custom style of the component."
+                },
+                "attribute": "custom-style",
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "firstThreshold": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The first threshold, establishing the length of the first and second arc."
+                },
+                "attribute": "first-threshold",
+                "reflect": false
+            },
+            "labelDistance": {
+                "type": "number",
+                "mutable": true,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The distance the label and the value has from the gauge graph."
+                },
+                "attribute": "label-distance",
+                "reflect": false,
+                "defaultValue": "20"
+            },
+            "maxValue": {
+                "type": "number",
+                "mutable": true,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The maximum value reachable in the current graph."
+                },
+                "attribute": "max-value",
+                "reflect": false,
+                "defaultValue": "100"
+            },
+            "measurementUnit": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "A string which will be appended to the displayed values of the component."
+                },
+                "attribute": "measurement-unit",
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "minValue": {
+                "type": "number",
+                "mutable": true,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The minimum value reachable in the current graph."
+                },
+                "attribute": "min-value",
+                "reflect": false,
+                "defaultValue": "-100"
+            },
+            "needleCircle": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "When true, shows a rounded needle."
+                },
+                "attribute": "needle-circle",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "onlyValue": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "When true, ignore thresholds in gauge and show colored value's arc."
+                },
+                "attribute": "only-value",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "reverseColors": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "When true, the colors inside the colors array are used in the reversed order."
+                },
+                "attribute": "reverse-colors",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "secondThreshold": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The second threshold, establishing the length of the second and third arc."
+                },
+                "attribute": "second-threshold",
+                "reflect": false
+            },
+            "showLabels": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "If set to false, threshold values of the gauge are not displayed."
+                },
+                "attribute": "show-labels",
+                "reflect": false,
+                "defaultValue": "true"
+            },
+            "showMaxmin": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "If set to false, the maximum and minimum values of the gauge are not displayed."
+                },
+                "attribute": "show-maxmin",
+                "reflect": false,
+                "defaultValue": "true"
+            },
+            "showValue": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "If set to false, the current value of the gauge is not displayed."
+                },
+                "attribute": "show-value",
+                "reflect": false,
+                "defaultValue": "true"
+            },
+            "size": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "namespace",
+                            "text": "kup-gauge.size"
+                        }, {
+                            "name": "see",
+                            "text": "kup-gauge.arcThickness"
+                        }],
+                    "text": "Con be used change the viewbox of the SVG.\r\nBy manipulating this value, some customizations of the aspect of the gauge is achievable."
+                },
+                "attribute": "size",
+                "reflect": false,
+                "defaultValue": "300"
+            },
+            "value": {
+                "type": "number",
+                "mutable": true,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The current value of the gauge.\r\nThe gauge's needle points to the percentage based on this prop."
+                },
+                "attribute": "value",
+                "reflect": false,
+                "defaultValue": "0"
+            },
+            "valueSize": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The current size of gauge's value.\r\nCorrect values are: 0,1,2 or 3."
+                },
+                "attribute": "value-size",
+                "reflect": false,
+                "defaultValue": "0"
+            },
+            "widthComponent": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Set Width gauge."
+                },
+                "attribute": "width-component",
+                "reflect": false,
+                "defaultValue": "'100%'"
             }
-          },
-          "return": "Promise<void>"
-        },
-        "docs": {
-          "text": "This method is used to trigger a new render of the component.",
-          "tags": []
-        }
-      },
-      "setProps": {
-        "complexType": {
-          "signature": "(props: GenericObject) => Promise<void>",
-          "parameters": [{
-              "tags": [{
-                  "name": "param",
-                  "text": "props - Object containing props that will be set to the component."
-                }],
-              "text": "- Object containing props that will be set to the component."
-            }],
-          "references": {
-            "Promise": {
-              "location": "global",
-              "id": "global::Promise"
+        };
+    }
+    static get methods() {
+        return {
+            "getProps": {
+                "complexType": {
+                    "signature": "(descriptions?: boolean) => Promise<GenericObject>",
+                    "parameters": [{
+                            "tags": [{
+                                    "name": "param",
+                                    "text": "descriptions - When provided and true, the result will be the list of props with their description."
+                                }],
+                            "text": "- When provided and true, the result will be the list of props with their description."
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "GenericObject": {
+                            "location": "import",
+                            "path": "../../types/GenericTypes",
+                            "id": "src/types/GenericTypes.ts::GenericObject"
+                        }
+                    },
+                    "return": "Promise<GenericObject>"
+                },
+                "docs": {
+                    "text": "Used to retrieve component's props values.",
+                    "tags": [{
+                            "name": "param",
+                            "text": "descriptions - When provided and true, the result will be the list of props with their description."
+                        }, {
+                            "name": "returns",
+                            "text": "List of props as object, each key will be a prop."
+                        }]
+                }
             },
-            "GenericObject": {
-              "location": "import",
-              "path": "../../types/GenericTypes",
-              "id": "src/types/GenericTypes.ts::GenericObject"
+            "refresh": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "This method is used to trigger a new render of the component.",
+                    "tags": []
+                }
+            },
+            "setProps": {
+                "complexType": {
+                    "signature": "(props: GenericObject) => Promise<void>",
+                    "parameters": [{
+                            "tags": [{
+                                    "name": "param",
+                                    "text": "props - Object containing props that will be set to the component."
+                                }],
+                            "text": "- Object containing props that will be set to the component."
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "GenericObject": {
+                            "location": "import",
+                            "path": "../../types/GenericTypes",
+                            "id": "src/types/GenericTypes.ts::GenericObject"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Sets the props to the component.",
+                    "tags": [{
+                            "name": "param",
+                            "text": "props - Object containing props that will be set to the component."
+                        }]
+                }
             }
-          },
-          "return": "Promise<void>"
-        },
-        "docs": {
-          "text": "Sets the props to the component.",
-          "tags": [{
-              "name": "param",
-              "text": "props - Object containing props that will be set to the component."
-            }]
-        }
-      }
-    };
-  }
-  static get elementRef() { return "rootElement"; }
+        };
+    }
+    static get elementRef() { return "rootElement"; }
 }