@refinitiv-ui/elements 5.0.0-beta.3 → 5.0.0-dev.204

package/lib/slider/index.d.ts

@@ -1,11 +1,11 @@
 import { JSXInterface } from '../jsx';
-import { ControlElement, TemplateResult, CSSResult, PropertyValues } from '@refinitiv-ui/core';
-import '../number-field';
+import { ControlElement, TemplateResult, CSSResultGroup, PropertyValues } from '@refinitiv-ui/core';
+import '../number-field/index.js';
 /**
  * Allows users to make selections from a range of values
  *
  * @attr {string} value - Value of slider. Not applicable in range mode.
- * @prop {string} [value=0] - Value of slider. Not applicable in range mode.
+ * @prop {string} [value="0"] - Value of slider. Not applicable in range mode.
  *
  * @attr {boolean} readonly - Set readonly state
  * @prop {boolean} [readonly=false] - Set readonly state
@@ -18,6 +18,11 @@ import '../number-field';
  * @fires to-changed - Fired when the `to` changes.
  */
 export declare class Slider extends ControlElement {
+    /**
+     * Element version number
+     * @returns version number
+     */
+    static get version(): string;
     private activeThumb;
     private dragging;
     private stepUse;
@@ -150,6 +155,12 @@ export declare class Slider extends ControlElement {
      * @returns {void}
      */
     protected updated(changedProperties: PropertyValues): void;
+    /**
+     * Show Warning a warning message invalid property
+     * @param propName value for checking
+     * @returns {void}
+     */
+    private showWarningInvalidProperty;
     /**
      * Initialise class properties
      * @returns {void}
@@ -375,7 +386,7 @@ export declare class Slider extends ControlElement {
      * Define styles in a tagged template literal, using the css tag function.
      * @returns CSS template
      */
-    static get styles(): CSSResult | CSSResult[];
+    static get styles(): CSSResultGroup;
     /**
      * Implement `render` slider template.
      * @returns Slider template
@@ -393,4 +404,6 @@ declare global {
       'ef-slider': Partial<Slider> | JSXInterface.ControlHTMLAttributes<Slider>;
     }
   }
-}
+}
+
+export {};

package/lib/slider/index.js

@@ -1,11 +1,11 @@
-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 { html, css, ControlElement, customElement, property, styleMap, query } from '@refinitiv-ui/core';
-import '../number-field';
+import { __decorate } from "tslib";
+import { html, css, ControlElement, WarningNotice } 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 { styleMap } from '@refinitiv-ui/core/lib/directives/style-map.js';
+import { VERSION } from '../version.js';
+import '../number-field/index.js';
 var SliderNameType;
 (function (SliderNameType) {
     SliderNameType["value"] = "value";
@@ -49,7 +49,7 @@ const clamp = function (value, min, max) {
  * Allows users to make selections from a range of values
  *
  * @attr {string} value - Value of slider. Not applicable in range mode.
- * @prop {string} [value=0] - Value of slider. Not applicable in range mode.
+ * @prop {string} [value="0"] - Value of slider. Not applicable in range mode.
  *
  * @attr {boolean} readonly - Set readonly state
  * @prop {boolean} [readonly=false] - Set readonly state
@@ -244,6 +244,13 @@ let Slider = class Slider extends ControlElement {
             }
         };
     }
+    /**
+     * Element version number
+     * @returns version number
+     */
+    static get version() {
+        return VERSION;
+    }
     /**
      * Converts value from string to number for calculations
      * @returns value of input as a number
@@ -336,7 +343,7 @@ let Slider = class Slider extends ControlElement {
     firstUpdated(changedProperties) {
         super.firstUpdated(changedProperties);
         // initialize slider
-        this.updateComplete.then(() => {
+        void this.updateComplete.then(() => {
             this.initializeProperty();
             this.initSlider();
             this.updateEventListeners();
@@ -352,6 +359,11 @@ let Slider = class Slider extends ControlElement {
         if (changedProperties.has('disabled') || changedProperties.has('readonly')) {
             this.updateEventListeners();
         }
+        changedProperties.forEach((oldValue, propName) => {
+            if (['value', 'min', 'max', 'from', 'to', 'step', 'minRange'].includes(propName)) {
+                this.showWarningInvalidProperty(propName);
+            }
+        });
     }
     /**
      * @param changedProperties changed properties
@@ -387,6 +399,48 @@ let Slider = class Slider extends ControlElement {
             }
         });
     }
+    /**
+     * Show Warning a warning message invalid property
+     * @param propName value for checking
+     * @returns {void}
+     */
+    showWarningInvalidProperty(propName) {
+        let isValid = true;
+        let message = '';
+        if (propName === 'value') {
+            isValid = this.isValueInBoundary(this.valueNumber, '');
+            message = 'value should be between min and max.';
+        }
+        else if (propName === 'min') {
+            isValid = this.minNumber <= this.maxNumber;
+            message = 'value should be less than max.';
+        }
+        else if (propName === 'max') {
+            isValid = this.maxNumber >= this.minNumber;
+            message = 'value should be more than min.';
+        }
+        else if (propName === 'from' && this.range) {
+            isValid = (this.fromNumber >= this.minNumber && this.fromNumber <= this.toNumber);
+            message = 'value should be more than min and less than to.';
+        }
+        else if (propName === 'to' && this.range) {
+            isValid = (this.toNumber <= this.maxNumber && this.toNumber >= this.fromNumber);
+            message = 'value should be less than max and more than from.';
+        }
+        else if (propName === 'step') {
+            isValid = ((this.maxNumber - this.minNumber) >= this.stepNumber);
+            message = 'value should be between min and max.';
+        }
+        else if (propName === 'minRange' && this.minRangeNumber > 0) {
+            const distanceFromTo = Math.abs(this.toNumber - this.fromNumber);
+            const distanceMinMax = Math.abs(this.maxNumber - this.minNumber);
+            isValid = (distanceMinMax >= this.minRangeNumber && distanceFromTo >= this.minRangeNumber);
+            message = 'value should be less than distance from and to, min and max.';
+        }
+        if (!isValid) {
+            new WarningNotice(`${this.localName}: Invalid ${propName} provided, The correct ${propName} ${message}`).show();
+        }
+    }
     /**
      * Initialise class properties
      * @returns {void}
@@ -918,11 +972,11 @@ let Slider = class Slider extends ControlElement {
     renderTrackWrapper(range) {
         const stepContainerSize = this.calculatePercentage(this.minNumber + this.stepNumber);
         const translateX = (stepContainerSize / 2);
-        const stepsStyle = { transform: 'translateX(' + translateX + '%)', backgroundSize: stepContainerSize + '% 100%' };
-        const stepContainerStyle = { transform: 'translateX(-' + translateX + '%)' };
+        const stepsStyle = { transform: `translateX(${translateX}%)`, backgroundSize: `${stepContainerSize}% 100%` };
+        const stepContainerStyle = { transform: `translateX(-${translateX}%)` };
         const trackFillStyle = range
-            ? { width: this.calculatePercentage(this.toNumber) - this.calculatePercentage(this.fromNumber) + '%', left: this.calculatePercentage(this.fromNumber) + '%' }
-            : { width: this.calculatePercentage(Number(this.value)) + '%' };
+            ? { width: `${this.calculatePercentage(this.toNumber) - this.calculatePercentage(this.fromNumber)}%`, left: `${this.calculatePercentage(this.fromNumber)}%` }
+            : { width: `${this.calculatePercentage(Number(this.value))}%` };
         return html `
     <div part="track-wrapper" id="trackWrapper">
       <div part="track-fill" id="trackFill" style=${styleMap(trackFillStyle)}></div>
@@ -940,7 +994,7 @@ let Slider = class Slider extends ControlElement {
      * @returns Track template
      */
     renderThumb(value, percentageValue, name) {
-        const thumbStyle = { left: percentageValue + '%' };
+        const thumbStyle = { left: `${percentageValue}%` };
         return html `
     <div part="thumb-container" name=${name} id="thumbContainer" style=${styleMap(thumbStyle)}>
       <div part="pin">
@@ -1131,4 +1185,3 @@ Slider = __decorate([
     })
 ], Slider);
 export { Slider };
-//# sourceMappingURL=index.js.map

package/lib/sparkline/custom-elements.json

@@ -7,13 +7,13 @@
         {
           "name": "data",
           "description": "Chart data as an array of number.",
-          "type": "object",
+          "type": "number[]",
           "default": "[]"
         },
         {
           "name": "previous-data",
           "description": "Chart previous data as an array of number.",
-          "type": "object",
+          "type": "number[]",
           "default": "[]"
         },
         {
@@ -27,14 +27,14 @@
           "name": "data",
           "attribute": "data",
           "description": "Chart data as an array of number.",
-          "type": "object",
+          "type": "number[]",
           "default": "[]"
         },
         {
           "name": "previousData",
           "attribute": "previous-data",
           "description": "Chart previous data as an array of number.",
-          "type": "object",
+          "type": "number[]",
           "default": "[]"
         },
         {

package/lib/sparkline/custom-elements.md

@@ -0,0 +1,16 @@
+# ef-sparkline
+
+## Properties
+
+| Property         | Attribute         | Type                  | Default | Description                                      |
+|------------------|-------------------|-----------------------|---------|--------------------------------------------------|
+| `data`           | `data`            | `number[]`            | []      | Chart data as an array of number.                |
+| `previousData`   | `previous-data`   | `number[]`            | []      | Chart previous data as an array of number.       |
+| `referenceValue` | `reference-value` | `number \| undefined` |         | Baseline value to show horizontal line (optional) |
+
+## Events
+
+| Event          | Description                                      |
+|----------------|--------------------------------------------------|
+| `data-changed` | Fired when data is changed                       |
+| `data-error`   | Fired when data has error and chart cannot be updated |

package/lib/sparkline/index.d.ts

@@ -1,17 +1,24 @@
 import { JSXInterface } from '../jsx';
-import { CSSResult, PropertyValues, ResponsiveElement, TemplateResult, ElementSize } from '@refinitiv-ui/core';
+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: never[];
+    previousData: number[];
     /**
      * Baseline value to show horizontal line (optional)
      */
@@ -73,12 +80,12 @@ export declare class Sparkline extends ResponsiveElement {
      */
     protected createChart(): void;
     /**
-     * A `CSSResult` that will be used
+     * 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(): CSSResult;
+    static get styles(): CSSResultGroup;
     /**
      * A `TemplateResult` that will be used
      * to render the updated internal template.
@@ -97,4 +104,6 @@ declare global {
       'ef-sparkline': Partial<Sparkline> | JSXInterface.HTMLAttributes<Sparkline>;
     }
   }
-}
+}
+
+export {};

package/lib/sparkline/index.js

@@ -1,21 +1,22 @@
-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 { __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 = [];
         /**
@@ -23,6 +24,13 @@ let Sparkline = class Sparkline extends ResponsiveElement {
          */
         this.initialized = false;
     }
+    /**
+     * Element version number
+     * @returns version number
+     */
+    static get version() {
+        return VERSION;
+    }
     /**
      * Get configuration for theme
      */
@@ -125,7 +133,7 @@ let Sparkline = class Sparkline extends ResponsiveElement {
         };
     }
     /**
-     * A `CSSResult` that will be used
+     * A `CSSResultGroup` that will be used
      * to style the host, slotted children
      * and the internal template of the element.
      * @return CSS template
@@ -178,4 +186,3 @@ Sparkline = __decorate([
     })
 ], Sparkline);
 export { Sparkline };
-//# sourceMappingURL=index.js.map

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

@@ -7,74 +7,103 @@
       "attributes": [
         {
           "name": "primary-value",
-          "description": "Set the primary value",
-          "type": "number",
-          "default": "\"50\""
+          "description": "Primary value",
+          "type": "number"
         },
         {
           "name": "primary-label",
-          "description": "Set the primary label",
+          "description": "Primary label",
           "type": "string",
           "default": "\"\""
         },
         {
           "name": "secondary-value",
-          "description": "Set the secondary value",
-          "type": "number",
-          "default": "\"50\""
+          "description": "Secondary value",
+          "type": "number"
         },
         {
           "name": "secondary-label",
-          "description": "Set the secondary label",
+          "description": "Secondary label",
           "type": "string",
           "default": "\"\""
         },
         {
           "name": "duration",
-          "description": "Sets the animation duration in milliseconds",
+          "description": "Animation duration in milliseconds",
           "type": "number",
-          "default": "\"1000\""
+          "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": "Set the primary value",
-          "type": "number",
-          "default": "\"50\""
+          "description": "Primary value",
+          "type": "number"
         },
         {
           "name": "primaryLabel",
           "attribute": "primary-label",
-          "description": "Set the primary label",
+          "description": "Primary label",
           "type": "string",
           "default": "\"\""
         },
         {
           "name": "secondaryValue",
           "attribute": "secondary-value",
-          "description": "Set the secondary value",
-          "type": "number",
-          "default": "\"50\""
+          "description": "Secondary value",
+          "type": "number"
         },
         {
           "name": "secondaryLabel",
           "attribute": "secondary-label",
-          "description": "Set the secondary label",
+          "description": "Secondary label",
           "type": "string",
           "default": "\"\""
         },
         {
           "name": "duration",
           "attribute": "duration",
-          "description": "Sets the animation duration in milliseconds",
+          "description": "Animation duration in milliseconds",
           "type": "number",
-          "default": "\"1000\""
+          "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": "Custom value formatter",
+          "type": "SwingGaugeValueFormatter",
+          "default": "\"defaultValueFormatter\""
         },
         {
-          "name": "canvasSize",
-          "description": "Getter size of component"
+          "name": "canvasSize (readonly)",
+          "description": "Getter size of component",
+          "type": "SwingGaugeCanvasSize"
         }
       ]
     }

package/lib/swing-gauge/custom-elements.md

@@ -0,0 +1,17 @@
+# ef-swing-gauge
+
+Data visualisation showing the percentage between two values
+
+## Properties
+
+| Property                | Attribute          | Type                       | Default                 | Description                        |
+|-------------------------|--------------------|----------------------------|-------------------------|------------------------------------|
+| `canvasSize (readonly)` |                    | `SwingGaugeCanvasSize`     |                         | Getter size of component           |
+| `duration`              | `duration`         | `number`                   | 1000                    | Animation duration in milliseconds |
+| `primaryLabel`          | `primary-label`    | `string`                   | ""                      | Primary label                      |
+| `primaryLegend`         | `primary-legend`   | `string`                   | ""                      | Primary value legend               |
+| `primaryValue`          | `primary-value`    | `number`                   |                         | Primary value                      |
+| `secondaryLabel`        | `secondary-label`  | `string`                   | ""                      | Secondary label                    |
+| `secondaryLegend`       | `secondary-legend` | `string`                   | ""                      | Secondary value legend             |
+| `secondaryValue`        | `secondary-value`  | `number`                   |                         | Secondary value                    |
+| `valueFormatter`        |                    | `SwingGaugeValueFormatter` | "defaultValueFormatter" | Custom value formatter             |

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 };