@refinitiv-ui/elements 6.8.7 → 6.8.9

package/lib/slider/index.js

@@ -1,17 +1,17 @@
 import { __decorate } from "tslib";
-import { html, css, nothing, ControlElement, WarningNotice } from '@refinitiv-ui/core';
+import { ControlElement, WarningNotice, css, html, nothing } from '@refinitiv-ui/core';
 import { customElement } from '@refinitiv-ui/core/decorators/custom-element.js';
 import { property } from '@refinitiv-ui/core/decorators/property.js';
 import { query } from '@refinitiv-ui/core/decorators/query.js';
 import { state } from '@refinitiv-ui/core/decorators/state.js';
 import { createRef, ref } from '@refinitiv-ui/core/directives/ref.js';
 import { styleMap } from '@refinitiv-ui/core/directives/style-map.js';
-import { translate } from '@refinitiv-ui/translate';
 import '@refinitiv-ui/phrasebook/locale/en/slider.js';
-import { VERSION } from '../version.js';
+import { translate } from '@refinitiv-ui/translate';
 import '../number-field/index.js';
-import { SliderDataName, Direction } from './constants.js';
-import { clamp, preventDefault, isDecimalNumber, countDecimalPlace } from './utils.js';
+import { VERSION } from '../version.js';
+import { Direction, SliderDataName } from './constants.js';
+import { clamp, countDecimalPlace, isDecimalNumber, preventDefault } from './utils.js';
 /**
  * Allows users to make selections from a range of values
  *
@@ -45,67 +45,67 @@ let Slider = class Slider extends ControlElement {
       :host {
         display: flex;
       }
-      [part=slider-wrapper] {
+      [part='slider-wrapper'] {
         position: relative;
         width: 100%;
       }
-      [part=slider] {
+      [part='slider'] {
         width: 100%;
         height: 100%;
         display: inline-block;
       }
-      :host(:not([disabled]):focus){
-        outline:none;
+      :host(:not([disabled]):focus) {
+        outline: none;
       }
-      :host([show-steps]) [part=track-wrapper]::after {
-        display:block;
+      :host([show-steps]) [part='track-wrapper']::after {
+        display: block;
         position: absolute;
-        content: "";
+        content: '';
         right: 0;
       }
-      [part=track-wrapper]{
-        content: "";
+      [part='track-wrapper'] {
+        content: '';
         position: absolute;
         width: 100%;
         top: 50%;
         left: 0;
         pointer-events: none;
       }
-      [part=thumb-container]{
+      [part='thumb-container'] {
         outline: none;
         position: absolute;
         top: 0;
         width: 100%;
         z-index: 3;
       }
-      [part=thumb]{
+      [part='thumb'] {
         position: absolute;
         margin: 0 auto;
       }
-      [part=pin]{
+      [part='pin'] {
         display: flex;
         position: absolute;
         align-items: center;
         justify-content: center;
         z-index: 1;
       }
-      :host([show-steps]) [part=step-container]{
+      :host([show-steps]) [part='step-container'] {
         position: absolute;
         left: 0;
         width: 100%;
       }
-      :host([show-steps]) [part=step]{
+      :host([show-steps]) [part='step'] {
         width: 100%;
         position: absolute;
         left: 0;
       }
-      [part=track-fill]{
+      [part='track-fill'] {
         z-index: 2;
-        content: "";
+        content: '';
         position: absolute;
         left: 0;
       }
-      :host([show-steps][step="0"]) [part=track-wrapper]::after{
+      :host([show-steps][step='0']) [part='track-wrapper']::after {
         width: 0;
       }
     `;
@@ -299,19 +299,19 @@ let Slider = class Slider extends ControlElement {
         this.changedThumb = null;
         /**
          * @ignore
-        */
+         */
         this.onDrag = this.onDrag.bind(this);
         /**
          * @ignore
-        */
+         */
         this.onDragStart = this.onDragStart.bind(this);
         /**
          * @ignore
-        */
+         */
         this.onDragEnd = this.onDragEnd.bind(this);
         /**
          * @ignore
-        */
+         */
         this.onKeyDown = this.onKeyDown.bind(this);
     }
     /**
@@ -332,8 +332,8 @@ let Slider = class Slider extends ControlElement {
      */
     willUpdate(changedProperties) {
         super.willUpdate(changedProperties);
-        if ((changedProperties.has('disabled') && changedProperties.get('disabled') !== undefined)
-            || (changedProperties.has('readonly') && changedProperties.get('readonly') !== undefined)) {
+        if ((changedProperties.has('disabled') && changedProperties.get('disabled') !== undefined) ||
+            (changedProperties.has('readonly') && changedProperties.get('readonly') !== undefined)) {
             this.prepareSliderTrack();
         }
         changedProperties.forEach((_, changedProperty) => {
@@ -398,21 +398,21 @@ let Slider = class Slider extends ControlElement {
             message = 'value should be more than min.';
         }
         else if (propName === 'from' && this.range) {
-            isValid = (this.fromNumber >= this.minNumber && this.fromNumber <= this.toNumber);
+            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);
+            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);
+            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);
+            isValid = distanceMinMax >= this.minRangeNumber && distanceFromTo >= this.minRangeNumber;
             message = 'value should be less than distance from and to, min and max.';
         }
         if (!isValid) {
@@ -439,8 +439,8 @@ let Slider = class Slider extends ControlElement {
                     }
                 }
                 else {
-                    this.from = clamp((this.fromNumber || this.minNumber), this.minNumber, this.toNumber);
-                    this.to = clamp((this.toNumber || this.maxNumber), this.fromNumber, this.maxNumber);
+                    this.from = clamp(this.fromNumber || this.minNumber, this.minNumber, this.toNumber);
+                    this.to = clamp(this.toNumber || this.maxNumber, this.fromNumber, this.maxNumber);
                 }
             }
             else {
@@ -681,7 +681,7 @@ let Slider = class Slider extends ControlElement {
             shouldUpdate = this.isValueInBoundary(Number(value), '');
         }
         if (shouldUpdate) {
-            (this[name]) = value;
+            this[name] = value;
             this.notifyPropertyChange(name, value);
         }
         else {
@@ -713,7 +713,7 @@ let Slider = class Slider extends ControlElement {
         this.classList.add('grabbable');
         if (this.range) {
             const mousePosition = this.getMousePosition(event);
-            const relativeMousePosition = ((this.maxNumber - this.minNumber) * mousePosition) + this.minNumber;
+            const relativeMousePosition = (this.maxNumber - this.minNumber) * mousePosition + this.minNumber;
             const distanceFrom = Math.abs(relativeMousePosition - this.fromNumber);
             const distanceTo = Math.abs(relativeMousePosition - this.toNumber);
             if (distanceFrom < distanceTo) {
@@ -748,7 +748,9 @@ let Slider = class Slider extends ControlElement {
             return 1;
         }
         // check drag desktop or mobile
-        const pageX = event.changedTouches ? event.changedTouches[0].pageX : event.pageX;
+        const pageX = event.changedTouches
+            ? event.changedTouches[0].pageX
+            : event.pageX;
         const positionSize = pageX - sliderRect.left;
         if (positionSize <= sliderRect.width) {
             return Math.min(Math.max((pageX - sliderRect.left) / sliderRect.width, 0), 1);
@@ -826,7 +828,7 @@ let Slider = class Slider extends ControlElement {
     getNearestPossibleValue(thumbPosition) {
         const stepSize = this.calculatePosition(this.minNumber + this.stepRange, 1);
         const nearestValue = Math.round(thumbPosition / stepSize) * stepSize;
-        if (thumbPosition <= nearestValue + (stepSize / 2)) {
+        if (thumbPosition <= nearestValue + stepSize / 2) {
             if (nearestValue <= 1) {
                 return nearestValue;
             }
@@ -954,11 +956,11 @@ let Slider = class Slider extends ControlElement {
             // Check if value is in range
             if (this.range) {
                 if (valueFor === SliderDataName.to) {
-                    if (value < (this.fromNumber + this.minRangeNumber) || value > this.maxNumber) {
+                    if (value < this.fromNumber + this.minRangeNumber || value > this.maxNumber) {
                         return false;
                     }
                 }
-                else if (value < this.minNumber || value > (this.toNumber - this.minRangeNumber)) {
+                else if (value < this.minNumber || value > this.toNumber - this.minRangeNumber) {
                     return false;
                 }
             }
@@ -1083,11 +1085,17 @@ let Slider = class Slider extends ControlElement {
      */
     renderTrack(range) {
         const stepContainerSize = this.calculatePosition(this.minNumber + this.stepNumber);
-        const translateX = (stepContainerSize / 2);
-        const stepsStyle = { transform: `translateX(${translateX}%)`, backgroundSize: `${stepContainerSize}% 100%` };
+        const translateX = stepContainerSize / 2;
+        const stepsStyle = {
+            transform: `translateX(${translateX}%)`,
+            backgroundSize: `${stepContainerSize}% 100%`
+        };
         const stepContainerStyle = { transform: `translateX(-${translateX}%)` };
         const trackFillStyle = range
-            ? { width: `${this.calculatePosition(this.toNumber) - this.calculatePosition(this.fromNumber)}%`, left: `${this.calculatePosition(this.fromNumber)}%` }
+            ? {
+                width: `${this.calculatePosition(this.toNumber) - this.calculatePosition(this.fromNumber)}%`,
+                left: `${this.calculatePosition(this.fromNumber)}%`
+            }
             : { width: `${this.calculatePosition(Number(this.value))}%` };
         return html `
       <div part="track-wrapper" ${ref(this.trackRef)}>
@@ -1197,11 +1205,15 @@ let Slider = class Slider extends ControlElement {
       <div part="slider-wrapper">
         <div part="slider" ${ref(this.sliderRef)}>
           ${this.renderTrack(this.range)}
-          ${this.range ? this.renderThumb(this.fromNumber, this.toNumber) : this.renderThumb(this.valueNumber)}
+          ${this.range
+            ? this.renderThumb(this.fromNumber, this.toNumber)
+            : this.renderThumb(this.valueNumber)}
         </div>
       </div>
       ${this.range && this.isShowInputField ? this.renderNumberField(this.to, SliderDataName.to) : null}
-      ${!this.range && this.isShowInputField ? this.renderNumberField(this.value, SliderDataName.value) : null}
+      ${!this.range && this.isShowInputField
+            ? this.renderNumberField(this.value, SliderDataName.value)
+            : null}
     `;
     }
 };

package/lib/slider/utils.d.ts

@@ -1,16 +1,16 @@
 /**
-  * Set prevent default action and stop bubbles event
-  * @param event event mouse or touch
-  * @returns {void}
-  */
+ * Set prevent default action and stop bubbles event
+ * @param event event mouse or touch
+ * @returns {void}
+ */
 declare const preventDefault: (event: Event) => Event;
 /**
-   * Return value that never exceed the maximum boundary
-   * @param value value for check clamp
-   * @param min max value
-   * @param max min value
-   * @returns number between two numbers
-   */
+ * Return value that never exceed the maximum boundary
+ * @param value value for check clamp
+ * @param min max value
+ * @param max min value
+ * @returns number between two numbers
+ */
 declare const clamp: (value: number, min: number, max: number) => string;
 /**
  * Check if number is a decimal number

package/lib/slider/utils.js

@@ -1,20 +1,20 @@
 /**
-  * Set prevent default action and stop bubbles event
-  * @param event event mouse or touch
-  * @returns {void}
-  */
+ * Set prevent default action and stop bubbles event
+ * @param event event mouse or touch
+ * @returns {void}
+ */
 const preventDefault = (event) => {
     event.preventDefault();
     event.stopPropagation();
     return event;
 };
 /**
-   * Return value that never exceed the maximum boundary
-   * @param value value for check clamp
-   * @param min max value
-   * @param max min value
-   * @returns number between two numbers
-   */
+ * Return value that never exceed the maximum boundary
+ * @param value value for check clamp
+ * @param min max value
+ * @param max min value
+ * @returns number between two numbers
+ */
 const clamp = function (value, min, max) {
     return Math.max(min, Math.min(value, max)).toString();
 };

package/lib/sparkline/index.d.ts

@@ -1,5 +1,5 @@
 import { JSXInterface } from '../jsx';
-import { CSSResultGroup, PropertyValues, ResponsiveElement, TemplateResult, ElementSize } from '@refinitiv-ui/core';
+import { CSSResultGroup, ElementSize, PropertyValues, ResponsiveElement, TemplateResult } 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';

package/lib/sparkline/index.js

@@ -1,11 +1,11 @@
 import { __decorate } from "tslib";
-import { css, ResponsiveElement, html } from '@refinitiv-ui/core';
+import { ResponsiveElement, css, html } from '@refinitiv-ui/core';
 import { customElement } from '@refinitiv-ui/core/decorators/custom-element.js';
 import { property } from '@refinitiv-ui/core/decorators/property.js';
 import { query } from '@refinitiv-ui/core/decorators/query.js';
-import { VERSION } from '../version.js';
-import { color } from '@refinitiv-ui/utils/color.js';
 import '@refinitiv-ui/browser-sparkline';
+import { color } from '@refinitiv-ui/utils/color.js';
+import { VERSION } from '../version.js';
 let Sparkline = class Sparkline extends ResponsiveElement {
     constructor() {
         super(...arguments);
@@ -145,13 +145,14 @@ let Sparkline = class Sparkline extends ResponsiveElement {
         display: block;
       }
 
-      browser-sparkline-chart, browser-sparkline-canvas {
+      browser-sparkline-chart,
+      browser-sparkline-canvas {
         width: 100%;
         height: 100%;
         display: block;
       }
 
-      [part=chart] {
+      [part='chart'] {
         height: 100%;
       }
     `;
@@ -162,9 +163,7 @@ let Sparkline = class Sparkline extends ResponsiveElement {
      * @return Render template
      */
     render() {
-        return html `
-      <browser-sparkline-chart part="chart" id="sparkline"></browser-sparkline-chart>
-    `;
+        return html ` <browser-sparkline-chart part="chart" id="sparkline"></browser-sparkline-chart> `;
     }
 };
 __decorate([

package/lib/swing-gauge/helpers.js

@@ -75,7 +75,7 @@ const draw = (drawData, drawCtx, drawParams) => {
             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.lineTo(data.width / 2, data.height - data.size * data.gaugeUpperBound + style.strokeWidth);
         ctx.strokeStyle = style.centerlineColor;
         ctx.stroke();
         ctx.restore();
@@ -89,7 +89,7 @@ const elasticOut = ((amplitude, period) => {
             return time;
         }
         const s = (period / pi2) * Math.asin(1 / amplitude);
-        return (amplitude * Math.pow(2, -10 * time) * Math.sin(((time - s) * pi2) / period) + 1);
+        return amplitude * Math.pow(2, -10 * time) * Math.sin(((time - s) * pi2) / period) + 1;
     };
 })(1.2, 0.5);
 const textWidth = (drawCtx, text, fontSize, fontFamily) => {

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

@@ -1,5 +1,5 @@
 import { JSXInterface } from '../jsx';
-import { ResponsiveElement, CSSResultGroup, PropertyValues, TemplateResult } from '@refinitiv-ui/core';
+import { CSSResultGroup, PropertyValues, ResponsiveElement, TemplateResult } from '@refinitiv-ui/core';
 import '../canvas/index.js';
 import '../label/index.js';
 import type { SwingGaugeCanvasSize, SwingGaugeValueFormatter } from './types';
@@ -47,12 +47,12 @@ export declare class SwingGauge extends ResponsiveElement {
      */
     duration: number;
     /**
-    * Primary value legend
-    */
+     * Primary value legend
+     */
     primaryLegend: string;
     /**
-    * Secondary value legend
-    */
+     * Secondary value legend
+     */
     secondaryLegend: string;
     /**
      * Custom value formatter
@@ -74,36 +74,36 @@ export declare class SwingGauge extends ResponsiveElement {
     private primaryLineRadian;
     private secondaryLineRadian;
     /**
-    * Data requires to draw swing gauge
-    */
+     * Data requires to draw swing gauge
+     */
     private data;
     /**
-    * Internal sizes and scales
-    */
+     * Internal sizes and scales
+     */
     private width;
     private height;
     private size;
     private lineLength;
     private scale;
     /**
-    * Current fill percentage
-    */
+     * Current fill percentage
+     */
     private fillPercentage;
     /**
-    * Keeps previous percentage calculation to avoid re-rendering the same value
-    */
+     * Keeps previous percentage calculation to avoid re-rendering the same value
+     */
     private previousFillPercentage;
     /**
-    * This for keep line number of label for calculate new radius
-    */
+     * This for keep line number of label for calculate new radius
+     */
     private labelLineNumber;
     /**
-    * Get primary percentage
-    */
+     * Get primary percentage
+     */
     private get primaryPercentage();
     /**
-    * Get secondary percentage
-    */
+     * Get secondary percentage
+     */
     private get secondaryPercentage();
     /**
      * Check width and height are valid