@refinitiv-ui/elements 5.12.0-alpha.0 → 5.12.0

package/lib/slider/themes/halo/dark/index.js

@@ -0,0 +1,3 @@
+import '@refinitiv-ui/elements/lib/number-field/themes/halo/dark';
+
+elf.customStyles.define('ef-slider', ':host{touch-action:manipulation;height:24px;margin:1px 0;opacity:.9;opacity:1}:host(:not([disabled]):hover){opacity:1}:host [part=track-wrapper]{height:4px;background:var(--track-color,#333);top:calc((100% - 4px)/ 2)}:host(:not([disabled])) [part=track-fill]{height:inherit;background:var(--thumb-color,#ccc);background-color:var(--thumb-color,#6678ff)}:host([disabled]) [part=thumb],:host([disabled]) [part=thumb]:hover,:host([disabled]) [part=track-fill],:host([disabled]) [part=track-wrapper]::after{background:#333;content:\'\'}:host [part=thumb-container]{height:100%;top:0;margin-left:-4px;width:8px}:host([show-steps]) [part=step-container]{height:inherit}:host([show-steps]:not([disabled])) [part=step]{height:inherit;background-image:linear-gradient(to right,var(--step-color,#6678ff),var(--step-color,#6678ff) 4px,transparent 0,transparent)}:host([show-steps]:not([disabled])) [part=track-wrapper]::after{height:inherit;width:4px;background-color:var(--step-color,#6678ff)}:host [part=pin]{width:26px;height:26px;margin-top:-6px;margin-left:-2px;transform:rotate(-45deg) scale(0) translate(0);transition:transform .1s ease-out;border-radius:50% 50% 50% 0;background-color:var(--pin-color,#ccc);display:none}:host [part=pin-value-marker]{font-family:inherit;font-size:.8em;color:var(--pin-text-color,#fff);line-height:1.25rem;font-weight:400;letter-spacing:.01786em;text-decoration:inherit;text-transform:inherit;transform:rotate(45deg);-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}:host([pin].grabbable) [part=pin]{transform:rotate(-45deg) scale(1) translate(19px,-20px)}:host([pin].grabbable) [part=thumb]{transform:scale(.7);transform:none}:host [part=input]{margin:0;padding:0;width:var(--input-field-width,40px);min-width:40px;text-align:center;height:100%}:host [part=input][name=to],:host [part=input][name=value]{margin-left:16px}:host [part=input][name=from]{margin-right:16px}:host(:not([disabled]):not([readonly]):hover){cursor:pointer}:host [part=thumb]{box-sizing:border-box;transform:scale(.7);background:var(--thumb-color,#ccc);top:calc(4px / 2);border-radius:0;width:8px;height:20px;transform:none;border:1px solid #0d0d0d}:host(:not([disabled]):not([readonly]):not(.grabbable)) [part=thumb]:hover{background-color:var(--thumb-color,#334bff);border-color:var(--thumb-color,#0d0d0d)}:host(.grabbable) [part=thumb]{border-width:2px;transform:scale(1);border:1px solid var(--thumb-color,#0d0d0d);background-color:var(--thumb-color,#0f1e8a);transform:none}');

package/lib/slider/themes/halo/light/index.js

@@ -0,0 +1,3 @@
+import '@refinitiv-ui/elements/lib/number-field/themes/halo/light';
+
+elf.customStyles.define('ef-slider', ':host{touch-action:manipulation;height:24px;margin:1px 0;opacity:.9;opacity:1}:host(:not([disabled]):hover){opacity:1}:host [part=track-wrapper]{height:4px;background:var(--track-color,#d9d9d9);top:calc((100% - 4px)/ 2)}:host(:not([disabled])) [part=track-fill]{height:inherit;background:var(--thumb-color,#fafafa);background-color:var(--thumb-color,#334bff)}:host([disabled]) [part=thumb],:host([disabled]) [part=thumb]:hover,:host([disabled]) [part=track-fill],:host([disabled]) [part=track-wrapper]::after{background:#d9d9d9;content:\'\'}:host [part=thumb-container]{height:100%;top:0;margin-left:-4px;width:8px}:host([show-steps]) [part=step-container]{height:inherit}:host([show-steps]:not([disabled])) [part=step]{height:inherit;background-image:linear-gradient(to right,var(--step-color,#334bff),var(--step-color,#334bff) 4px,transparent 0,transparent)}:host([show-steps]:not([disabled])) [part=track-wrapper]::after{height:inherit;width:4px;background-color:var(--step-color,#334bff)}:host [part=pin]{width:26px;height:26px;margin-top:-6px;margin-left:-2px;transform:rotate(-45deg) scale(0) translate(0);transition:transform .1s ease-out;border-radius:50% 50% 50% 0;background-color:var(--pin-color,#fafafa);display:none}:host [part=pin-value-marker]{font-family:inherit;font-size:.8em;color:var(--pin-text-color,#fff);line-height:1.25rem;font-weight:400;letter-spacing:.01786em;text-decoration:inherit;text-transform:inherit;transform:rotate(45deg);-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}:host([pin].grabbable) [part=pin]{transform:rotate(-45deg) scale(1) translate(19px,-20px)}:host([pin].grabbable) [part=thumb]{transform:scale(.7);transform:none}:host [part=input]{margin:0;padding:0;width:var(--input-field-width,40px);min-width:40px;text-align:center;height:100%}:host [part=input][name=to],:host [part=input][name=value]{margin-left:16px}:host [part=input][name=from]{margin-right:16px}:host(:not([disabled]):not([readonly]):hover){cursor:pointer}:host [part=thumb]{box-sizing:border-box;transform:scale(.7);background:var(--thumb-color,#fafafa);top:calc(4px / 2);border-radius:0;width:8px;height:20px;transform:none;border:1px solid #404040}:host([disabled]) [part=thumb]{border-color:#ccc}:host(:not([disabled]):not([readonly]):not(.grabbable)) [part=thumb]:hover{background-color:var(--thumb-color,#334bff);border-color:var(--thumb-color,#334bff)}:host(.grabbable) [part=thumb]{border-width:2px;transform:scale(1);border:1px solid var(--thumb-color,#0f1e8a);background-color:var(--thumb-color,#0f1e8a);transform:none}');

package/lib/slider/themes/solar/charcoal/index.js

@@ -0,0 +1,3 @@
+import '@refinitiv-ui/elements/lib/number-field/themes/solar/charcoal';
+
+elf.customStyles.define('ef-slider', ':host{touch-action:manipulation;height:23px;margin:1px 0;opacity:.9}:host(:not([disabled]):hover){opacity:1}:host [part=track-wrapper]{height:3px;background:var(--track-color,#666570)}:host(:not([disabled])) [part=track-fill]{height:inherit;background:var(--thumb-color,#f93)}:host([disabled]) [part=thumb],:host([disabled]) [part=thumb]:hover,:host([disabled]) [part=track-fill],:host([disabled]) [part=track-wrapper]::after{background:#666570;content:\'\'}:host [part=thumb-container]{width:22px;height:100%;margin-left:-9.5px}:host [part=thumb]{top:calc((100% - 20px + 3px)/ 2);height:20px;width:20px;box-sizing:border-box;border:3px solid transparent;border-radius:100%;transform:scale(.7);background:var(--thumb-color,#f93)}:host(.grabbable) [part=thumb]{border-width:2px;transform:scale(1)}:host([show-steps]) [part=step-container]{height:inherit}:host([show-steps]:not([disabled])) [part=step]{height:inherit;background-image:linear-gradient(to right,var(--step-color,#f93),var(--step-color,#f93) 3px,transparent 0,transparent)}:host([show-steps]:not([disabled])) [part=track-wrapper]::after{height:inherit;width:3px;background-color:var(--step-color,#f93)}:host [part=pin]{width:26px;height:26px;margin-top:-6px;margin-left:-2px;transform:rotate(-45deg) scale(0) translate(0);transition:transform .1s ease-out;border-radius:50% 50% 50% 0;background-color:var(--pin-color,#f93)}:host [part=pin-value-marker]{font-family:inherit;font-size:.8em;color:var(--pin-text-color,#fff);line-height:1.25rem;font-weight:400;letter-spacing:.01786em;text-decoration:inherit;text-transform:inherit;transform:rotate(45deg);-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}:host([pin].grabbable) [part=pin]{transform:rotate(-45deg) scale(1) translate(19px,-20px)}:host([pin].grabbable) [part=thumb]{transform:scale(.7)}:host [part=input]{margin:0;padding:0;width:var(--input-field-width,40px);min-width:40px;text-align:center;height:100%}:host [part=input][name=to],:host [part=input][name=value]{margin-left:16px}:host [part=input][name=from]{margin-right:16px}');

package/lib/slider/themes/solar/pearl/index.js

@@ -0,0 +1,3 @@
+import '@refinitiv-ui/elements/lib/number-field/themes/solar/pearl';
+
+elf.customStyles.define('ef-slider', ':host{touch-action:manipulation;height:23px;margin:1px 0;opacity:.9}:host(:not([disabled]):hover){opacity:1}:host [part=track-wrapper]{height:3px;background:var(--track-color,#d5d8db)}:host(:not([disabled])) [part=track-fill]{height:inherit;background:var(--thumb-color,#f93)}:host([disabled]) [part=thumb],:host([disabled]) [part=thumb]:hover,:host([disabled]) [part=track-fill],:host([disabled]) [part=track-wrapper]::after{background:#d5d8db;content:\'\'}:host [part=thumb-container]{width:22px;height:100%;margin-left:-9.5px}:host [part=thumb]{top:calc((100% - 20px + 3px)/ 2);height:20px;width:20px;box-sizing:border-box;border:3px solid transparent;border-radius:100%;transform:scale(.7);background:var(--thumb-color,#f93)}:host(.grabbable) [part=thumb]{border-width:2px;transform:scale(1)}:host([show-steps]) [part=step-container]{height:inherit}:host([show-steps]:not([disabled])) [part=step]{height:inherit;background-image:linear-gradient(to right,var(--step-color,#f93),var(--step-color,#f93) 3px,transparent 0,transparent)}:host([show-steps]:not([disabled])) [part=track-wrapper]::after{height:inherit;width:3px;background-color:var(--step-color,#f93)}:host [part=pin]{width:26px;height:26px;margin-top:-6px;margin-left:-2px;transform:rotate(-45deg) scale(0) translate(0);transition:transform .1s ease-out;border-radius:50% 50% 50% 0;background-color:var(--pin-color,#f93)}:host [part=pin-value-marker]{font-family:inherit;font-size:.8em;color:var(--pin-text-color,#fff);line-height:1.25rem;font-weight:400;letter-spacing:.01786em;text-decoration:inherit;text-transform:inherit;transform:rotate(45deg);-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}:host([pin].grabbable) [part=pin]{transform:rotate(-45deg) scale(1) translate(19px,-20px)}:host([pin].grabbable) [part=thumb]{transform:scale(.7)}:host [part=input]{margin:0;padding:0;width:var(--input-field-width,40px);min-width:40px;text-align:center;height:100%}:host [part=input][name=to],:host [part=input][name=value]{margin-left:16px}:host [part=input][name=from]{margin-right:16px}');

package/lib/sparkline/index.d.ts

@@ -0,0 +1,109 @@
+import { JSXInterface } from '../jsx';
+import { CSSResultGroup, PropertyValues, ResponsiveElement, TemplateResult, ElementSize } from '@refinitiv-ui/core';
+import '@refinitiv-ui/browser-sparkline';
+import type { BrowserSparklineChart } from '@refinitiv-ui/browser-sparkline';
+import type { ThemeConfig } from '@refinitiv-ui/browser-sparkline/lib/browserSparklineCanvas';
+export declare class Sparkline extends ResponsiveElement {
+    /**
+     * Element version number
+     * @returns version number
+     */
+    static get version(): string;
+    /**
+     * Chart data as an array of number.
+     * @type {number[]}
+     */
+    data: number[];
+    /**
+     * Chart previous data as an array of number.
+     * @type {number[]}
+     */
+    previousData: number[];
+    /**
+     * Baseline value to show horizontal line (optional)
+     */
+    referenceValue?: number;
+    /**
+     * Chart width
+     */
+    protected width?: number;
+    /**
+     * Chart height
+     */
+    protected height?: number;
+    /**
+     * Chart initialize status
+     */
+    protected initialized: boolean;
+    /**
+     * Get canvas element from shadow roots
+     */
+    protected chart: BrowserSparklineChart;
+    /**
+     * Get configuration for theme
+     */
+    protected get defaultThemeConfig(): Partial<ThemeConfig>;
+    /**
+     * Get configuration for static data
+     */
+    private get staticDataConfig();
+    /**
+     * On Connected Callback Lifecycle
+     * @ignore
+     * @return {void}
+     */
+    connectedCallback(): void;
+    /**
+     * On Updated Lifecycle
+     * @ignore
+     * @param changedProperties changed properties
+     * @return {void}
+     */
+    protected updated(changedProperties: PropertyValues): void;
+    /**
+     * Handles when data was changed.
+     * Fires event `data-changed` by default but will fires event `data-error` if giving data a wrong format
+     * @returns {void}
+     */
+    private dataChanged;
+    /**
+     * Re-draw canvas when the size of component changed
+     * @ignore
+     * @param size element dimensions
+     * @returns {void}
+     */
+    resizedCallback(size: ElementSize): void;
+    /**
+     * Create chart
+     * @protected
+     * @returns {void}
+     */
+    protected createChart(): void;
+    /**
+     * A `CSSResultGroup` that will be used
+     * to style the host, slotted children
+     * and the internal template of the element.
+     * @return CSS template
+     */
+    static get styles(): CSSResultGroup;
+    /**
+     * A `TemplateResult` that will be used
+     * to render the updated internal template.
+     * @return Render template
+     */
+    protected render(): TemplateResult;
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'ef-sparkline': Sparkline;
+  }
+
+  namespace JSX {
+    interface IntrinsicElements {
+      'ef-sparkline': Partial<Sparkline> | JSXInterface.HTMLAttributes<Sparkline>;
+    }
+  }
+}
+
+export {};

package/lib/sparkline/index.js

@@ -0,0 +1,188 @@
+import { __decorate } from "tslib";
+import { css, ResponsiveElement, html } from '@refinitiv-ui/core';
+import { customElement } from '@refinitiv-ui/core/lib/decorators/custom-element.js';
+import { property } from '@refinitiv-ui/core/lib/decorators/property.js';
+import { query } from '@refinitiv-ui/core/lib/decorators/query.js';
+import { VERSION } from '../version.js';
+import { color } from '@refinitiv-ui/utils/lib/color.js';
+import '@refinitiv-ui/browser-sparkline';
+let Sparkline = class Sparkline extends ResponsiveElement {
+    constructor() {
+        super(...arguments);
+        /**
+         * Chart data as an array of number.
+         * @type {number[]}
+         */
+        this.data = [];
+        /**
+         * Chart previous data as an array of number.
+         * @type {number[]}
+         */
+        this.previousData = [];
+        /**
+         * Chart initialize status
+         */
+        this.initialized = false;
+    }
+    /**
+     * Element version number
+     * @returns version number
+     */
+    static get version() {
+        return VERSION;
+    }
+    /**
+     * Get configuration for theme
+     */
+    get defaultThemeConfig() {
+        var _a, _b, _c, _d, _e;
+        return {
+            width: this.width,
+            height: this.height,
+            lineColor: (_a = color(this.getComputedVariable('--line-color', '#ff9933'))) === null || _a === void 0 ? void 0 : _a.formatHex(),
+            lineWidth: parseInt(this.getComputedVariable('--line-width', '2px'), 10),
+            referenceLineColor: (_b = color(this.getComputedVariable('--reference-line-color', 'rgba(120, 120, 130, 0.5)'))) === null || _b === void 0 ? void 0 : _b.formatHex(),
+            previousLineColor: (_c = color(this.getComputedVariable('--previous-line-color', '#bfbfbf'))) === null || _c === void 0 ? void 0 : _c.formatHex(),
+            upperLineColor: (_d = color(this.getComputedVariable('--upper-line-color', '#309054'))) === null || _d === void 0 ? void 0 : _d.formatHex(),
+            lowerLineColor: (_e = color(this.getComputedVariable('--lower-line-color', '#d94255'))) === null || _e === void 0 ? void 0 : _e.formatHex(),
+            fillColorStyle: this.getComputedVariable('--fill-color-style', 'gradient')
+        };
+    }
+    /**
+     * Get configuration for static data
+     */
+    get staticDataConfig() {
+        return {
+            previousData: this.previousData,
+            data: this.data,
+            referenceValue: this.referenceValue
+        };
+    }
+    /**
+     * On Connected Callback Lifecycle
+     * @ignore
+     * @return {void}
+     */
+    connectedCallback() {
+        super.connectedCallback();
+        this.createChart();
+    }
+    /**
+     * On Updated Lifecycle
+     * @ignore
+     * @param changedProperties changed properties
+     * @return {void}
+     */
+    updated(changedProperties) {
+        super.updated(changedProperties);
+        if (changedProperties.get('data')) {
+            this.dataChanged();
+        }
+        this.createChart();
+    }
+    /**
+     * Handles when data was changed.
+     * Fires event `data-changed` by default but will fires event `data-error` if giving data a wrong format
+     * @returns {void}
+     */
+    dataChanged() {
+        if (!this.data || this.data.length < 2) {
+            /* @fires data-error
+             * Fired when data has error and chart cannot be updated
+             */
+            this.dispatchEvent(new CustomEvent('data-error'));
+            return;
+        }
+        /**
+         * Fired when data is changed
+         * @fires data-changed
+         */
+        this.dispatchEvent(new CustomEvent('data-changed'));
+    }
+    /**
+     * Re-draw canvas when the size of component changed
+     * @ignore
+     * @param size element dimensions
+     * @returns {void}
+     */
+    resizedCallback(size) {
+        this.width = size.width;
+        this.height = size.height;
+        if (this.initialized) {
+            this.chart.style.width = `${this.width}px`;
+            this.chart.style.height = `${this.height}px`;
+            this.chart.updateCanvasSize(this.width, this.height);
+        }
+        else {
+            this.initialized = true;
+            this.createChart();
+        }
+    }
+    /**
+     * Create chart
+     * @protected
+     * @returns {void}
+     */
+    createChart() {
+        if (!this.isConnected || !this.initialized || !this.data || this.data.length < 2) {
+            return;
+        }
+        this.chart.config = {
+            themeConfig: this.defaultThemeConfig,
+            staticData: this.staticDataConfig
+        };
+    }
+    /**
+     * A `CSSResultGroup` that will be used
+     * to style the host, slotted children
+     * and the internal template of the element.
+     * @return CSS template
+     */
+    static get styles() {
+        return css `
+      :host {
+        width: 100px;
+        height: 50px;
+        display: block;
+      }
+
+      browser-sparkline-chart, browser-sparkline-canvas {
+        width: 100%;
+        height: 100%;
+        display: block;
+      }
+
+      [part=chart] {
+        height: 100%;
+      }
+    `;
+    }
+    /**
+     * A `TemplateResult` that will be used
+     * to render the updated internal template.
+     * @return Render template
+     */
+    render() {
+        return html `
+      <browser-sparkline-chart part="chart" id="sparkline"></browser-sparkline-chart>
+    `;
+    }
+};
+__decorate([
+    property({ type: Array })
+], Sparkline.prototype, "data", void 0);
+__decorate([
+    property({ attribute: 'previous-data', type: Array })
+], Sparkline.prototype, "previousData", void 0);
+__decorate([
+    property({ attribute: 'reference-value', type: Number })
+], Sparkline.prototype, "referenceValue", void 0);
+__decorate([
+    query('browser-sparkline-chart')
+], Sparkline.prototype, "chart", void 0);
+Sparkline = __decorate([
+    customElement('ef-sparkline', {
+        alias: 'sapphire-sparkline'
+    })
+], Sparkline);
+export { Sparkline };

package/lib/sparkline/themes/halo/dark/index.js

@@ -0,0 +1,2 @@
+
+elf.customStyles.define('ef-sparkline', ':host{min-height:30px;--line-color:#6678FF;--line-width:3px;--reference-line-color:rgba(51, 51, 51, 0.5);--upper-line-color:#39C46E;--lower-line-color:#F5475B;--line-width:1px}');

package/lib/sparkline/themes/halo/light/index.js

@@ -0,0 +1,2 @@
+
+elf.customStyles.define('ef-sparkline', ':host{min-height:30px;--line-color:#334BFF;--line-width:3px;--reference-line-color:rgba(224, 224, 224, 0.5);--upper-line-color:#246B3E;--lower-line-color:#B63243;--line-width:1px}');

package/lib/sparkline/themes/solar/charcoal/index.js

@@ -0,0 +1,2 @@
+
+elf.customStyles.define('ef-sparkline', ':host{min-height:30px;--line-color:#FF9933;--line-width:3px;--reference-line-color:rgba(10, 10, 10, 0.5);--upper-line-color:#39C46E;--lower-line-color:#F5475B;--line-width:2px}');

package/lib/sparkline/themes/solar/pearl/index.js

@@ -0,0 +1,2 @@
+
+elf.customStyles.define('ef-sparkline', ':host{min-height:30px;--line-color:#EE7600;--line-width:3px;--reference-line-color:rgba(213, 216, 219, 0.5);--upper-line-color:#309054;--lower-line-color:#D94255;--line-width:2px}');

package/lib/swing-gauge/const.d.ts

@@ -0,0 +1,22 @@
+declare enum Segment {
+    PRIMARY = "primary",
+    SECONDARY = "secondary"
+}
+declare enum TextType {
+    LABEL = "label",
+    VALUE = "value"
+}
+declare enum CenterLineStyle {
+    SOLID = "solid",
+    DOTTED = "dotted",
+    DASHED = "dashed"
+}
+declare enum DefaultStyle {
+    PRIMARY_GAUGE_COLOR = "#2EB4C9",
+    SECONDARY_GAUGE_COLOR = "#C93C4B",
+    BOREDER_COLOR = "#000",
+    CENTER_LINE_COLOR = "#949494",
+    CENTER_LINE_STYLE = "solid",
+    CENTER_LINE_OPACITY = "0.6"
+}
+export { Segment, DefaultStyle, CenterLineStyle, TextType };

package/lib/swing-gauge/const.js

@@ -0,0 +1,26 @@
+var Segment;
+(function (Segment) {
+    Segment["PRIMARY"] = "primary";
+    Segment["SECONDARY"] = "secondary";
+})(Segment || (Segment = {}));
+var TextType;
+(function (TextType) {
+    TextType["LABEL"] = "label";
+    TextType["VALUE"] = "value";
+})(TextType || (TextType = {}));
+var CenterLineStyle;
+(function (CenterLineStyle) {
+    CenterLineStyle["SOLID"] = "solid";
+    CenterLineStyle["DOTTED"] = "dotted";
+    CenterLineStyle["DASHED"] = "dashed";
+})(CenterLineStyle || (CenterLineStyle = {}));
+var DefaultStyle;
+(function (DefaultStyle) {
+    DefaultStyle["PRIMARY_GAUGE_COLOR"] = "#2EB4C9";
+    DefaultStyle["SECONDARY_GAUGE_COLOR"] = "#C93C4B";
+    DefaultStyle["BOREDER_COLOR"] = "#000";
+    DefaultStyle["CENTER_LINE_COLOR"] = "#949494";
+    DefaultStyle["CENTER_LINE_STYLE"] = "solid";
+    DefaultStyle["CENTER_LINE_OPACITY"] = "0.6";
+})(DefaultStyle || (DefaultStyle = {}));
+export { Segment, DefaultStyle, CenterLineStyle, TextType };

package/lib/swing-gauge/helpers.d.ts

@@ -0,0 +1,8 @@
+import type { SwingGaugeCanvasSize, SwingGaugeData, SwingGaugeStyle } from './types';
+declare const helpers: {
+    draw: (drawData: SwingGaugeData, drawCtx: CanvasRenderingContext2D, drawParams: SwingGaugeStyle) => void;
+    clear: (canvasSize: SwingGaugeCanvasSize, drawCtx: CanvasRenderingContext2D) => void;
+    elasticOut: (time: number) => number;
+    textWidth: (drawCtx: CanvasRenderingContext2D, text: string, fontSize: number, fontFamily: string) => number;
+};
+export { helpers };

package/lib/swing-gauge/helpers.js

@@ -0,0 +1,105 @@
+import { CenterLineStyle, DefaultStyle } from './const.js';
+let ctx;
+let data;
+let style;
+const clear = (canvasSize, drawCtx) => {
+    drawCtx.clearRect(0, 0, canvasSize.width, canvasSize.height);
+};
+const drawSegment = (start, end, color) => {
+    ctx.strokeStyle = color;
+    ctx.lineWidth = data.size * data.gaugeWidthScale;
+    ctx.beginPath();
+    ctx.arc(data.width / 2, data.height, data.size * data.gaugeHeightScale, (start + 1) * Math.PI, (end + 1) * Math.PI);
+    ctx.stroke();
+};
+const drawDot = (x, y) => {
+    ctx.fillStyle = DefaultStyle.CENTER_LINE_COLOR;
+    ctx.lineWidth = 1;
+    ctx.beginPath();
+    ctx.arc(x, y - 5, 4, 0, 2 * Math.PI);
+    ctx.fill();
+};
+const drawLine = (startX, startY, endX, endY, offset) => {
+    ctx.strokeStyle = DefaultStyle.CENTER_LINE_COLOR;
+    ctx.lineWidth = 2;
+    ctx.setLineDash([5, 3]);
+    ctx.beginPath();
+    ctx.moveTo(startX, startY - 5);
+    ctx.lineTo(endX, endY - 5);
+    ctx.lineTo(endX + offset, endY - 5);
+    ctx.stroke();
+    ctx.setLineDash([]);
+};
+const drawLinePointer = (startX, startY, endX, endY, offset) => {
+    drawDot(startX, startY);
+    drawLine(startX, startY, endX, endY, offset);
+};
+const draw = (drawData, drawCtx, drawParams) => {
+    data = drawData;
+    ctx = drawCtx;
+    style = drawParams;
+    const primaryStart = 0;
+    let secondaryStart = data.fillPercentage;
+    const primaryEnd = 1;
+    const secondaryEnd = 1;
+    secondaryStart = secondaryStart < 0.01 ? 0.01 : secondaryStart;
+    secondaryStart = secondaryStart > 0.99 ? 0.99 : secondaryStart;
+    // Draw segments
+    drawSegment(primaryStart, primaryEnd, style.primaryColor);
+    drawSegment(secondaryStart, secondaryEnd, style.secondaryColor);
+    // Draw Line pointer
+    drawLinePointer(data.offsetLeftPrimaryPoint, data.offsetTopPrimaryPoint, data.offsetLeftPrimaryLine, data.offsetTopPrimaryLine, -data.lineLength);
+    drawLinePointer(data.offsetLeftSecondaryPoint, data.offsetTopSecondaryPoint, data.offsetLeftSecondaryLine, data.offsetTopSecondaryLine, data.lineLength);
+    // Draw inner circle and lines
+    ctx.lineWidth = style.strokeWidth;
+    ctx.strokeStyle = style.borderColor;
+    ctx.beginPath();
+    ctx.arc(data.width / 2, data.height, data.size * data.gaugeUpperBound, 0, 2 * Math.PI);
+    ctx.strokeStyle = style.borderColor;
+    ctx.stroke();
+    ctx.beginPath();
+    ctx.arc(data.width / 2, data.height, data.size * data.gaugeLowerBound, 0, 2 * Math.PI);
+    ctx.strokeStyle = style.borderColor;
+    ctx.stroke();
+    // Should we draw a center line?
+    if (Object.values(CenterLineStyle).includes(style.centerline)) {
+        ctx.save();
+        ctx.beginPath();
+        if (style.centerline === CenterLineStyle.SOLID) {
+            ctx.globalAlpha = Number(style.centerlineOpacity);
+        }
+        else if (style.centerline === CenterLineStyle.DOTTED) {
+            ctx.setLineDash([2, 2]);
+        }
+        else {
+            ctx.setLineDash([5, 3]);
+        }
+        ctx.moveTo(data.width / 2, data.height - data.size * data.gaugeLowerBound);
+        ctx.lineTo(data.width / 2, data.height - (data.size * data.gaugeUpperBound) + style.strokeWidth);
+        ctx.strokeStyle = style.centerlineColor;
+        ctx.stroke();
+        ctx.restore();
+    }
+};
+// Helper function for elastic easing
+const elasticOut = ((amplitude, period) => {
+    const pi2 = Math.PI * 2;
+    return function (time) {
+        if (time === 0 || time === 1) {
+            return time;
+        }
+        const s = (period / pi2) * Math.asin(1 / amplitude);
+        return (amplitude * Math.pow(2, -10 * time) * Math.sin(((time - s) * pi2) / period) + 1);
+    };
+})(1.2, 0.5);
+const textWidth = (drawCtx, text, fontSize, fontFamily) => {
+    drawCtx.font = `${fontSize}px ${fontFamily}`;
+    return drawCtx.measureText(text).width;
+};
+const helpers = {
+    draw,
+    clear,
+    elasticOut,
+    textWidth
+};
+export { helpers };