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

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

@@ -1,3 +0,0 @@
-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

@@ -1,3 +0,0 @@
-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

@@ -1,3 +0,0 @@
-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

@@ -1,3 +0,0 @@
-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

@@ -1,109 +0,0 @@
-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

@@ -1,188 +0,0 @@
-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

@@ -1,2 +0,0 @@
-
-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

@@ -1,2 +0,0 @@
-
-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

@@ -1,2 +0,0 @@
-
-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

@@ -1,2 +0,0 @@
-
-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

@@ -1,22 +0,0 @@
-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

@@ -1,26 +0,0 @@
-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

@@ -1,8 +0,0 @@
-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

@@ -1,105 +0,0 @@
-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 };