@refinitiv-ui/elements 5.3.3 → 5.3.4

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/custom-elements.json

@@ -0,0 +1,59 @@
+{
+  "version": "experimental",
+  "tags": [
+    {
+      "name": "ef-sparkline",
+      "attributes": [
+        {
+          "name": "data",
+          "description": "Chart data as an array of number.",
+          "type": "object",
+          "default": "[]"
+        },
+        {
+          "name": "previous-data",
+          "description": "Chart previous data as an array of number.",
+          "type": "object",
+          "default": "[]"
+        },
+        {
+          "name": "reference-value",
+          "description": "Baseline value to show horizontal line (optional)",
+          "type": "number | undefined"
+        }
+      ],
+      "properties": [
+        {
+          "name": "data",
+          "attribute": "data",
+          "description": "Chart data as an array of number.",
+          "type": "object",
+          "default": "[]"
+        },
+        {
+          "name": "previousData",
+          "attribute": "previous-data",
+          "description": "Chart previous data as an array of number.",
+          "type": "object",
+          "default": "[]"
+        },
+        {
+          "name": "referenceValue",
+          "attribute": "reference-value",
+          "description": "Baseline value to show horizontal line (optional)",
+          "type": "number | undefined"
+        }
+      ],
+      "events": [
+        {
+          "name": "data-error",
+          "description": "Fired when data has error and chart cannot be updated"
+        },
+        {
+          "name": "data-changed",
+          "description": "Fired when data is changed"
+        }
+      ]
+    }
+  ]
+}

package/lib/sparkline/index.d.ts

@@ -0,0 +1,107 @@
+import { JSXInterface } from '../jsx';
+import { CSSResult, 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.
+     */
+    data: number[];
+    /**
+     * Chart previous data as an array of number.
+     */
+    previousData: never[];
+    /**
+     * 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 `CSSResult` that will be used
+     * to style the host, slotted children
+     * and the internal template of the element.
+     * @return CSS template
+     */
+    static get styles(): CSSResult;
+    /**
+     * 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 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { css, customElement, property, ResponsiveElement, html, query } from '@refinitiv-ui/core';
+import { color } from '@refinitiv-ui/utils';
+import '@refinitiv-ui/browser-sparkline';
+import { VERSION } from '../';
+let Sparkline = class Sparkline extends ResponsiveElement {
+    constructor() {
+        super(...arguments);
+        /**
+         * Chart data as an array of number.
+         */
+        this.data = [];
+        /**
+         * Chart previous data as an array of 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 `CSSResult` 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/custom-elements.json

@@ -0,0 +1,109 @@
+{
+  "version": "experimental",
+  "tags": [
+    {
+      "name": "ef-swing-gauge",
+      "description": "Data visualisation showing the percentage between two values",
+      "attributes": [
+        {
+          "name": "primary-value",
+          "description": "Primary value",
+          "type": "number"
+        },
+        {
+          "name": "primary-label",
+          "description": "Primary label",
+          "type": "string",
+          "default": "\"\""
+        },
+        {
+          "name": "secondary-value",
+          "description": "Secondary value",
+          "type": "number"
+        },
+        {
+          "name": "secondary-label",
+          "description": "Secondary label",
+          "type": "string",
+          "default": "\"\""
+        },
+        {
+          "name": "duration",
+          "description": "Animation duration in milliseconds",
+          "type": "number",
+          "default": "1000"
+        },
+        {
+          "name": "primary-legend",
+          "description": "Primary value legend",
+          "type": "string",
+          "default": "\"\""
+        },
+        {
+          "name": "secondary-legend",
+          "description": "Secondary value legend",
+          "type": "string",
+          "default": "\"\""
+        }
+      ],
+      "properties": [
+        {
+          "name": "primaryValue",
+          "attribute": "primary-value",
+          "description": "Primary value",
+          "type": "number"
+        },
+        {
+          "name": "primaryLabel",
+          "attribute": "primary-label",
+          "description": "Primary label",
+          "type": "string",
+          "default": "\"\""
+        },
+        {
+          "name": "secondaryValue",
+          "attribute": "secondary-value",
+          "description": "Secondary value",
+          "type": "number"
+        },
+        {
+          "name": "secondaryLabel",
+          "attribute": "secondary-label",
+          "description": "Secondary label",
+          "type": "string",
+          "default": "\"\""
+        },
+        {
+          "name": "duration",
+          "attribute": "duration",
+          "description": "Animation duration in milliseconds",
+          "type": "number",
+          "default": "1000"
+        },
+        {
+          "name": "primaryLegend",
+          "attribute": "primary-legend",
+          "description": "Primary value legend",
+          "type": "string",
+          "default": "\"\""
+        },
+        {
+          "name": "secondaryLegend",
+          "attribute": "secondary-legend",
+          "description": "Secondary value legend",
+          "type": "string",
+          "default": "\"\""
+        },
+        {
+          "name": "valueFormatter",
+          "description": "Custome value formatter",
+          "default": "\"defaultValueFormatter\""
+        },
+        {
+          "name": "canvasSize",
+          "description": "Getter size of component"
+        }
+      ]
+    }
+  ]
+}

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

@@ -0,0 +1,8 @@
+import { 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 };