@refinitiv-ui/elements 6.8.8 → 6.8.9

package/lib/select/index.js

@@ -1,31 +1,25 @@
 import { __decorate } from "tslib";
-import { ControlElement, html, css, FocusedPropertyKey } from '@refinitiv-ui/core';
+import { ControlElement, FocusedPropertyKey, 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 { styleMap } from '@refinitiv-ui/core/directives/style-map.js';
 import { createRef, ref } from '@refinitiv-ui/core/directives/ref.js';
-import { VERSION } from '../version.js';
-import '../overlay/index.js';
-import '../item/index.js';
-import '../icon/index.js';
-import { Item } from '../item/index.js';
+import { styleMap } from '@refinitiv-ui/core/directives/style-map.js';
+import { AnimationTaskRunner, TimeoutTaskRunner } from '@refinitiv-ui/utils/async.js';
 import { CollectionComposer } from '@refinitiv-ui/utils/collection.js';
-import { TimeoutTaskRunner, AnimationTaskRunner } from '@refinitiv-ui/utils/async.js';
 import { isElementOverflown } from '@refinitiv-ui/utils/element.js';
+import '../icon/index.js';
+import '../item/index.js';
+import { Item } from '../item/index.js';
+import '../overlay/index.js';
 import { registerOverflowTooltip } from '../tooltip/index.js';
+import { VERSION } from '../version.js';
 // Observer config for items
 const observerOptions = {
     subtree: true,
     childList: true,
     attributes: true,
     characterData: true,
-    attributeFilter: [
-        'label',
-        'value',
-        'selected',
-        'disabled',
-        'readonly'
-    ]
+    attributeFilter: ['label', 'value', 'selected', 'disabled', 'readonly']
 };
 const LABEL_SEPARATOR = ', '; // TODO: for multiselect
 const POPUP_POSITION = ['bottom-start', 'top-start'];
@@ -61,20 +55,20 @@ let Select = class Select extends ControlElement {
         this.keySearchThrottler = new TimeoutTaskRunner(KEY_SEARCH_DEBOUNCER);
         this.resizeThrottler = new AnimationTaskRunner();
         /**
-        * Placeholder to display when no value is set
-        */
+         * Placeholder to display when no value is set
+         */
         this.placeholder = '';
         /**
-        * Toggles the opened state of the list
-        */
+         * Toggles the opened state of the list
+         */
         this.opened = false;
         /**
-        * Set state to error
-        */
+         * Set state to error
+         */
         this.error = false;
         /**
-        * Set state to warning
-        */
+         * Set state to warning
+         */
         this.warning = false;
         /**
          * This variable is here to ensure that the value and data are in sync when data is set after the value.
@@ -98,8 +92,7 @@ let Select = class Select extends ControlElement {
          * @returns {void}
          */
         this.handleMutations = (mutations) => {
-            const hasLightDomMutations = mutations
-                .some(m => m.target.getRootNode() !== this.shadowRoot);
+            const hasLightDomMutations = mutations.some((m) => m.target.getRootNode() !== this.shadowRoot);
             if (hasLightDomMutations) {
                 this.requestUpdate();
             }
@@ -136,19 +129,19 @@ let Select = class Select extends ControlElement {
         display: inline-block;
       }
 
-      [part=label],
-      [part=placeholder] {
+      [part='label'],
+      [part='placeholder'] {
         white-space: nowrap;
         overflow: hidden;
         text-overflow: ellipsis;
       }
-      [part=icon] {
+      [part='icon'] {
         flex: none;
       }
-      :host [part=list] {
+      :host [part='list'] {
         overflow-y: auto;
       }
-      :host [part="list"] ::slotted(:not(ef-item)) {
+      :host [part='list'] ::slotted(:not(ef-item)) {
         display: none;
       }
       #box {
@@ -190,42 +183,42 @@ let Select = class Select extends ControlElement {
     `;
     }
     /**
-    * Current text content of the selected value
-    * @readonly
-    */
+     * Current text content of the selected value
+     * @readonly
+     */
     get label() {
         return this.labels[0];
     }
     /**
-    * Current text content of the selected values
-    * @ignore
-    * @readonly
-    */
+     * Current text content of the selected values
+     * @ignore
+     * @readonly
+     */
     get labels() {
         if (this.hasDataItems()) {
-            return this.selectedDataItems.map(item => this.composer.getItemPropertyValue(item, 'label'));
+            return this.selectedDataItems.map((item) => this.composer.getItemPropertyValue(item, 'label'));
         }
-        return this.selectedSlotItems.map(item => this.getItemLabel(item));
+        return this.selectedSlotItems.map((item) => this.getItemLabel(item));
     }
     /**
-    * Switch to multiple select input
-    * @ignore
-    * @param multiple True if element needs to support multi selection
-    */
+     * Switch to multiple select input
+     * @ignore
+     * @param multiple True if element needs to support multi selection
+     */
     set multiple(multiple) {
         // TODO: not implemented
     }
     /**
-    * @ignore
-    */
+     * @ignore
+     */
     get multiple() {
         return false;
     }
     /**
-    * Construct the menu from data object. Cannot be used with slotted content
-    * @type {SelectData | null}
-    * @default null
-    */
+     * Construct the menu from data object. Cannot be used with slotted content
+     * @type {SelectData | null}
+     * @default null
+     */
     get data() {
         return this._data;
     }
@@ -249,10 +242,10 @@ let Select = class Select extends ControlElement {
         this.requestUpdate('data', oldValue);
     }
     /**
-    * Value of the element
-    * @param value Element value
-    * @default -
-    */
+     * Value of the element
+     * @param value Element value
+     * @default -
+     */
     set value(value) {
         value = this.castValue(value);
         this.cachedValue = value;
@@ -276,9 +269,9 @@ let Select = class Select extends ControlElement {
      */
     get values() {
         if (this.hasDataItems()) {
-            return this.selectedDataItems.map(item => this.composer.getItemPropertyValue(item, 'value'));
+            return this.selectedDataItems.map((item) => this.composer.getItemPropertyValue(item, 'value'));
         }
-        return this.selectedSlotItems.map(item => this.getItemValue(item));
+        return this.selectedSlotItems.map((item) => this.getItemValue(item));
     }
     /**
      * Called when connected to DOM
@@ -295,7 +288,8 @@ let Select = class Select extends ControlElement {
      * @returns {void}
      */
     update(changedProperties) {
-        this.cachedValue = ''; /* reset cached value as it is only valid when value and data are set the same time */
+        this.cachedValue =
+            ''; /* reset cached value as it is only valid when value and data are set the same time */
         const focusedChanged = changedProperties.has(FocusedPropertyKey);
         // the opened logic is bound to focus state
         if (focusedChanged) {
@@ -327,7 +321,7 @@ let Select = class Select extends ControlElement {
     firstUpdated(changedProperties) {
         super.firstUpdated(changedProperties);
         this.addEventListener('keydown', this.onKeyDown); /* keydown when select is closed */
-        registerOverflowTooltip(this, () => this.labelText, () => this.labelRef.value ? isElementOverflown(this.labelRef.value) : false);
+        registerOverflowTooltip(this, () => this.labelText, () => (this.labelRef.value ? isElementOverflown(this.labelRef.value) : false));
     }
     /**
      * Called when element finished updating
@@ -397,7 +391,8 @@ let Select = class Select extends ControlElement {
             // this code might happen only when opened has been set during initialisation
             // or when display is set to none
             this.resizeThrottler.schedule(() => {
-                if (this.offsetWidth) { /* must be here to avoid infinitive loop */
+                if (this.offsetWidth) {
+                    /* must be here to avoid infinitive loop */
                     this.restrictPopupWidth();
                     this.requestUpdate();
                 }
@@ -500,7 +495,7 @@ let Select = class Select extends ControlElement {
      */
     onPopupClosed({ target }) {
         const eventOptions = {
-            capture: true,
+            /* need this for IE11, otherwise the event is not removed */ capture: true,
             passive: true
         };
         target?.removeEventListener('scroll', this.onPopupScroll, eventOptions);
@@ -601,10 +596,7 @@ let Select = class Select extends ControlElement {
      */
     isValidFilterKey(event) {
         // all printable keys have length of 1. This is better than regexp as we cover all non latin characters
-        return event.key.length === 1
-            && !event.ctrlKey
-            && !event.altKey
-            && !event.metaKey;
+        return event.key.length === 1 && !event.ctrlKey && !event.altKey && !event.metaKey;
     }
     /**
      * Focus and highlight element according to specified direction
@@ -676,7 +668,7 @@ let Select = class Select extends ControlElement {
         let selectableElements = this.getSelectableElements();
         const highlightedIdx = this.highlightedItem ? selectableElements.indexOf(this.highlightedItem) : -1;
         selectableElements = selectableElements.concat(selectableElements.splice(0, highlightedIdx));
-        const focusElement = selectableElements.find(item => {
+        const focusElement = selectableElements.find((item) => {
             const label = this.getItemLabel(item).toLowerCase();
             return label.startsWith(this.keySearchTerm) && item !== this.highlightedItem;
         });
@@ -738,7 +730,7 @@ let Select = class Select extends ControlElement {
      * @returns A list of selected elements
      */
     getSelectedElements() {
-        return this.getSelectableElements().filter(item => item.selected);
+        return this.getSelectableElements().filter((item) => item.selected);
     }
     /**
      * Clears the current selected items
@@ -749,7 +741,7 @@ let Select = class Select extends ControlElement {
             this.selectedDataItems.forEach((item) => this.composer.setItemPropertyValue(item, 'selected', false));
         }
         else {
-            this.selectedSlotItems.forEach(item => {
+            this.selectedSlotItems.forEach((item) => {
                 item.selected = false;
             });
         }
@@ -861,11 +853,7 @@ let Select = class Select extends ControlElement {
             case 'divider':
                 return html `<ef-item role="presentation" part="item" type="divider"></ef-item>`;
             case 'header':
-                return html `<ef-item
-          role="presentation"
-          part="item"
-          type="header"
-          .label=${item.label}></ef-item>`;
+                return html `<ef-item role="presentation" part="item" type="header" .label=${item.label}></ef-item>`;
             // no default
         }
         return html `<ef-item
@@ -910,11 +898,11 @@ let Select = class Select extends ControlElement {
      * Get data iterator template
      */
     get dataContent() {
-        return html `${this.composer.queryItems(() => true).map(item => this.toItem(item))}`;
+        return html `${this.composer.queryItems(() => true).map((item) => this.toItem(item))}`;
     }
     /**
-    * Edit template when select is not readonly or disabled
-    */
+     * Edit template when select is not readonly or disabled
+     */
     get popupTemplate() {
         if (this.lazyRendered) {
             return html `<ef-overlay
@@ -935,7 +923,9 @@ let Select = class Select extends ControlElement {
         @opened-changed="${this.onPopupOpenedChanged}"
         @opened="${this.onPopupOpened}"
         @refit=${this.onPopupRefit}
-        @closed="${this.onPopupClosed}">${this.hasDataItems() ? this.dataContent : this.slottedContent}</ef-overlay>`;
+        @closed="${this.onPopupClosed}"
+        >${this.hasDataItems() ? this.dataContent : this.slottedContent}</ef-overlay
+      >`;
         }
         else {
             // This code is required because IE11 polyfill need items to be within a slot
@@ -949,14 +939,11 @@ let Select = class Select extends ControlElement {
      * @return Render template
      */
     render() {
-        return html `
-    <div id="box">
-      <div id="text">
-        ${this.placeholderHidden() ? this.labelTemplate : this.placeholderTemplate}
+        return html ` <div id="box">
+        <div id="text">${this.placeholderHidden() ? this.labelTemplate : this.placeholderTemplate}</div>
+        <ef-icon icon="down" part="icon"></ef-icon>
       </div>
-      <ef-icon icon="down" part="icon"></ef-icon>
-    </div>
-    ${this.editTemplate}`;
+      ${this.editTemplate}`;
     }
 };
 __decorate([

package/lib/sidebar-layout/index.d.ts

@@ -1,7 +1,7 @@
 import { JSXInterface } from '../jsx';
-import { BasicElement, TemplateResult, CSSResultGroup, PropertyValues } from '@refinitiv-ui/core';
-import type { Layout } from '../layout';
+import { BasicElement, CSSResultGroup, PropertyValues, TemplateResult } from '@refinitiv-ui/core';
 import '../layout/index.js';
+import type { Layout } from '../layout';
 /**
  * Provides an app layout with sidebar.
  * There are 4 sections that can be slotted a component in.

package/lib/sidebar-layout/index.js

@@ -1,10 +1,10 @@
 import { __decorate } from "tslib";
-import { BasicElement, html, css, nothing } from '@refinitiv-ui/core';
+import { BasicElement, 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 { VERSION } from '../version.js';
 import '../layout/index.js';
+import { VERSION } from '../version.js';
 /**
  * Provides an app layout with sidebar.
  * There are 4 sections that can be slotted a component in.
@@ -45,7 +45,7 @@ let SidebarLayout = class SidebarLayout extends BasicElement {
         display: block;
       }
 
-      [part=container] {
+      [part='container'] {
         height: 100%;
       }
 
@@ -58,16 +58,16 @@ let SidebarLayout = class SidebarLayout extends BasicElement {
         height: 100%;
       }
 
-      [part=sidebar] {
+      [part='sidebar'] {
         width: var(--sidebar-width);
       }
 
-      :host([collapsed]:not([sidebar-position])) [part=sidebar],
-      :host([collapsed][sidebar-position=left]) [part=sidebar] {
+      :host([collapsed]:not([sidebar-position])) [part='sidebar'],
+      :host([collapsed][sidebar-position='left']) [part='sidebar'] {
         margin-left: calc(var(--sidebar-width) * -1);
       }
 
-      :host([collapsed][sidebar-position=right]) [part=sidebar] {
+      :host([collapsed][sidebar-position='right']) [part='sidebar'] {
         margin-right: calc(var(--sidebar-width) * -1);
       }
     `;
@@ -80,7 +80,6 @@ let SidebarLayout = class SidebarLayout extends BasicElement {
     render() {
         return html `
       <ef-layout flex nowrap part="container">
-
         <ef-layout flex container part="sidebar" size="${this.sidebarWidth || nothing}">
           <ef-layout size="auto">
             <slot name="sidebar-header"></slot>
@@ -98,7 +97,6 @@ let SidebarLayout = class SidebarLayout extends BasicElement {
             <slot name="main-content"></slot>
           </ef-layout>
         </ef-layout>
-
       </ef-layout>
     `;
     }

package/lib/slider/index.d.ts

@@ -1,7 +1,7 @@
 import { JSXInterface } from '../jsx';
-import { ControlElement, TemplateResult, CSSResultGroup, PropertyValues } from '@refinitiv-ui/core';
-import { TranslateDirective } from '@refinitiv-ui/translate';
+import { CSSResultGroup, ControlElement, PropertyValues, TemplateResult } from '@refinitiv-ui/core';
 import '@refinitiv-ui/phrasebook/locale/en/slider.js';
+import { TranslateDirective } from '@refinitiv-ui/translate';
 import '../number-field/index.js';
 /**
  * Allows users to make selections from a range of values

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