@refinitiv-ui/elements 6.9.0-next.0 → 6.9.0

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)}>
@@ -1108,10 +1116,21 @@ let Slider = class Slider extends ControlElement {
     thumbTemplate(value, thumbPosition, name) {
         const isActive = this.activeThumb?.getAttribute('name') === name;
         const isChanged = this.changedThumb?.getAttribute('name') === name;
-        const valueNow = this.range ? name === SliderDataName.from ? this.from : this.to : this.value;
-        const valueMin = this.range ? name === SliderDataName.from ? this.min : this.fromNumber + this.minRangeNumber : this.min;
-        const valueMax = this.range ? name === SliderDataName.from ? this.toNumber - this.minRangeNumber : this.max : this.max;
-        const thumbStyle = { left: `${thumbPosition}%`, zIndex: this.range ? isChanged ? '4' : '3' : null };
+        let valueNow = this.value;
+        let valueMin = this.min;
+        let valueMax = this.max;
+        if (this.range) {
+            if (name === SliderDataName.from) {
+                valueNow = this.from;
+                valueMax = String(this.toNumber - this.minRangeNumber);
+            }
+            else {
+                valueNow = this.to;
+                valueMin = String(this.fromNumber + this.minRangeNumber);
+            }
+        }
+        const thumbZIndex = this.range ? (isChanged ? '4' : '3') : null;
+        const thumbStyle = { left: `${thumbPosition}%`, zIndex: thumbZIndex };
         return html `
       <div
         ${ref(this[`${name}ThumbRef`])}
@@ -1186,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/themes/halo/dark/index.js

@@ -1,3 +1,2 @@
 import '@refinitiv-ui/elements/number-field/themes/halo/dark';
-
 dispatchEvent(new CustomEvent('ef.customStyles.define', { detail: { name: 'ef-slider', styles: ':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([focused=visible]) [part=thumb-container][active] [part=thumb]{outline:#334bff solid 1px;outline-offset:2px}: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,#1429bd);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 +1,2 @@
 import '@refinitiv-ui/elements/number-field/themes/halo/light';
-
 dispatchEvent(new CustomEvent('ef.customStyles.define', { detail: { name: 'ef-slider', styles: ':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([focused=visible]) [part=thumb-container][active] [part=thumb]{outline:#334bff solid 1px;outline-offset:2px}: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,#1429bd);border-color:var(--thumb-color,#1429bd)}: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 +1,2 @@
 import '@refinitiv-ui/elements/number-field/themes/solar/charcoal';
-
 dispatchEvent(new CustomEvent('ef.customStyles.define', { detail: { name: 'ef-slider', styles: ':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([focused=visible]) [part=thumb-container][active] [part=thumb]{outline:#f93 solid 1px;outline-offset:2px}: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 +1,2 @@
 import '@refinitiv-ui/elements/number-field/themes/solar/pearl';
-
 dispatchEvent(new CustomEvent('ef.customStyles.define', { detail: { name: 'ef-slider', styles: ':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([focused=visible]) [part=thumb-container][active] [part=thumb]{outline:#f93 solid 1px;outline-offset:2px}: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/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/sparkline/themes/halo/dark/index.js

@@ -1,2 +1 @@
-
 dispatchEvent(new CustomEvent('ef.customStyles.define', { detail: { name: 'ef-sparkline', styles: ':host{min-height:30px;--line-color:#6678FF;--line-width:3px;--reference-line-color:rgba(38, 38, 38, 0.5);--upper-line-color:#39C46E;--lower-line-color:#F5475B;--line-width:1px}' }}));

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

@@ -1,2 +1 @@
-
 dispatchEvent(new CustomEvent('ef.customStyles.define', { detail: { name: 'ef-sparkline', styles: ':host{min-height:30px;--line-color:#334BFF;--line-width:3px;--reference-line-color:rgba(242, 242, 242, 0.5);--upper-line-color:#246B3E;--lower-line-color:#B63243;--line-width:1px}' }}));

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

@@ -1,2 +1 @@
-
 dispatchEvent(new CustomEvent('ef.customStyles.define', { detail: { name: 'ef-sparkline', styles: ':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 +1 @@
-
 dispatchEvent(new CustomEvent('ef.customStyles.define', { detail: { name: 'ef-sparkline', styles: ':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/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