npm - @sme.up/ketchup - Versions diffs - 8.0.2 → 8.2.0 - Mend

@sme.up/ketchup 8.0.2 → 8.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (558) hide show

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

@@ -1,764 +1,764 @@
-import { forceUpdate, h, Host, } from '@stencil/core';
-import { KupDebugCategory } from '../../managers/kup-debug/kup-debug-declarations';
-import { kupManagerInstance, } from '../../managers/kup-manager/kup-manager';
-import { getProps, setProps } from '../../utils/utils';
-import { KupGaugeProps } from './kup-gauge-declarations';
-import { arc } from 'd3-shape';
-import { KupThemeColorValues } from '../../managers/kup-theme/kup-theme-declarations';
-import { componentWrapperId } from '../../variables/GenericVariables';
-export class KupGauge {
-  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%';
-  }
-  /*-------------------------------------------------*/
-  /*           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%';
-    }
-  }
-  //---- 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;
-    }
-    if (this.minValue === undefined || this.minValue === null) {
-      this.minValue = -100;
-    }
-  }
-  componentDidRender() {
-    this.kupManager.debug.logRender(this, true);
-  }
-  render() {
-    if (isNaN(this.value)) {
-      this.kupManager.debug.logMessage(this, 'Invalid value, not rendering!', KupDebugCategory.WARNING);
-      return;
-    }
-    // mathematical operations
-    this.maxValuePositive = Math.abs(this.minValue - this.maxValue);
-    let tempValue = this.value;
-    if (this.value > this.maxValue) {
-      this.value = this.maxValue;
-    }
-    if (this.value < this.minValue) {
-      this.value = this.minValue;
-    }
-    // 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);
-      }
-      if (this.secondThreshold || 0 === this.secondThreshold) {
-        givenThresholds.push(this.secondThreshold);
-      }
-    }
-    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);
-  }
-  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"
-            },
-            "GenericObject": {
-              "location": "import",
-              "path": "../../types/GenericTypes"
-            }
-          },
-          "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"
-            }
-          },
-          "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"
-            },
-            "GenericObject": {
-              "location": "import",
-              "path": "../../types/GenericTypes"
-            }
-          },
-          "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"; }
-}
+import { forceUpdate, h, Host, } from '@stencil/core';
+import { KupDebugCategory } from '../../managers/kup-debug/kup-debug-declarations';
+import { kupManagerInstance, } from '../../managers/kup-manager/kup-manager';
+import { getProps, setProps } from '../../utils/utils';
+import { KupGaugeProps } from './kup-gauge-declarations';
+import { arc } from 'd3-shape';
+import { KupThemeColorValues } from '../../managers/kup-theme/kup-theme-declarations';
+import { componentWrapperId } from '../../variables/GenericVariables';
+export class KupGauge {
+  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%';
+  }
+  /*-------------------------------------------------*/
+  /*           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%';
+    }
+  }
+  //---- 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;
+    }
+    if (this.minValue === undefined || this.minValue === null) {
+      this.minValue = -100;
+    }
+  }
+  componentDidRender() {
+    this.kupManager.debug.logRender(this, true);
+  }
+  render() {
+    if (isNaN(this.value)) {
+      this.kupManager.debug.logMessage(this, 'Invalid value, not rendering!', KupDebugCategory.WARNING);
+      return;
+    }
+    // mathematical operations
+    this.maxValuePositive = Math.abs(this.minValue - this.maxValue);
+    let tempValue = this.value;
+    if (this.value > this.maxValue) {
+      this.value = this.maxValue;
+    }
+    if (this.value < this.minValue) {
+      this.value = this.minValue;
+    }
+    // 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);
+      }
+      if (this.secondThreshold || 0 === this.secondThreshold) {
+        givenThresholds.push(this.secondThreshold);
+      }
+    }
+    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);
+  }
+  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"
+            },
+            "GenericObject": {
+              "location": "import",
+              "path": "../../types/GenericTypes"
+            }
+          },
+          "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"
+            }
+          },
+          "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"
+            },
+            "GenericObject": {
+              "location": "import",
+              "path": "../../types/GenericTypes"
+            }
+          },
+          "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"; }
+}