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

package/lib/time-picker/index.js

@@ -1,17 +1,17 @@
 var TimePicker_1;
 import { __decorate } from "tslib";
-import { ControlElement, html, css, nothing } from '@refinitiv-ui/core';
-import { guard } from '@refinitiv-ui/core/directives/guard.js';
+import { ControlElement, 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 { state } from '@refinitiv-ui/core/decorators/state.js';
 import { query } from '@refinitiv-ui/core/decorators/query.js';
-import { VERSION } from '../version.js';
-import { isValidTime, toTimeSegment, TimeFormat, getFormat, format, isAM, isPM, MILLISECONDS_IN_SECOND, MILLISECONDS_IN_MINUTE, MILLISECONDS_IN_HOUR, addOffset, padNumber, parse } from '@refinitiv-ui/utils/date.js';
+import { state } from '@refinitiv-ui/core/decorators/state.js';
+import { guard } from '@refinitiv-ui/core/directives/guard.js';
+import '@refinitiv-ui/phrasebook/locale/en/time-picker.js';
+import { translate } from '@refinitiv-ui/translate';
 import { isIE } from '@refinitiv-ui/utils/browser.js';
+import { MILLISECONDS_IN_HOUR, MILLISECONDS_IN_MINUTE, MILLISECONDS_IN_SECOND, TimeFormat, addOffset, format, getFormat, isAM, isPM, isValidTime, padNumber, parse, toTimeSegment } from '@refinitiv-ui/utils/date.js';
 import '../number-field/index.js';
-import { translate } from '@refinitiv-ui/translate';
-import '@refinitiv-ui/phrasebook/locale/en/time-picker.js';
+import { VERSION } from '../version.js';
 var Segment;
 (function (Segment) {
     Segment["HOURS"] = "hours";
@@ -163,9 +163,9 @@ let TimePicker = TimePicker_1 = class TimePicker extends ControlElement {
         return this._seconds;
     }
     /**
-    * Value of the element
-    * @param value Element value
-    */
+     * Value of the element
+     * @param value Element value
+     */
     set value(value) {
         const oldValue = this.value;
         value = this.castValue(value);
@@ -181,7 +181,8 @@ let TimePicker = TimePicker_1 = class TimePicker extends ControlElement {
             this.seconds = null;
             return;
         }
-        if (oldValue !== value) { /** never store actual value, instead operate with hours/minutes/seconds */
+        if (oldValue !== value) {
+            /** never store actual value, instead operate with hours/minutes/seconds */
             const info = toTimeSegment(value);
             const format = getFormat(value);
             this.valueWithSeconds = format === TimeFormat.HHmmss || format === TimeFormat.HHmmssSSS;
@@ -234,8 +235,12 @@ let TimePicker = TimePicker_1 = class TimePicker extends ControlElement {
         const _hours = this.hours;
         let hours = _hours;
         if (_hours !== null) {
-            hours = this.amPm && _hours > HOURS_OF_NOON
-                ? _hours - HOURS_OF_NOON : this.amPm && !_hours ? HOURS_OF_NOON : _hours;
+            hours =
+                this.amPm && _hours > HOURS_OF_NOON
+                    ? _hours - HOURS_OF_NOON
+                    : this.amPm && !_hours
+                        ? HOURS_OF_NOON
+                        : _hours;
         }
         return hours;
     }
@@ -355,7 +360,9 @@ let TimePicker = TimePicker_1 = class TimePicker extends ControlElement {
             if (segment === Segment.HOURS && this.minutes === null) {
                 this.minutes = 0;
             }
-            if (this.isShowSeconds && this.seconds === null && (segment === Segment.HOURS || segment === Segment.MINUTES)) {
+            if (this.isShowSeconds &&
+                this.seconds === null &&
+                (segment === Segment.HOURS || segment === Segment.MINUTES)) {
                 this.seconds = 0;
             }
         }
@@ -371,9 +378,7 @@ let TimePicker = TimePicker_1 = class TimePicker extends ControlElement {
      * @returns True if changed
      */
     static hasTimeChanged(changedProperties) {
-        return changedProperties.has('hours')
-            || changedProperties.has('minutes')
-            || changedProperties.has('seconds');
+        return (changedProperties.has('hours') || changedProperties.has('minutes') || changedProperties.has('seconds'));
     }
     /**
      * Validates a given unit against a min and max value, returning a fallback if invalid.
@@ -683,7 +688,7 @@ let TimePicker = TimePicker_1 = class TimePicker extends ControlElement {
         flex-flow: row nowrap;
         align-items: center;
         justify-content: center;
-        user-select:none;
+        user-select: none;
         position: relative;
       }
       input {
@@ -703,19 +708,20 @@ let TimePicker = TimePicker_1 = class TimePicker extends ControlElement {
     get hoursTemplate() {
         const hours = this.formattedHours;
         return html `<ef-number-field
-        id="hours"
-        part="input"
-        aria-label="${!isIE ? this.t('SELECT_HOURS', { value: this.periodHours }) : nothing}"
-        no-spinner
-        transparent
-        min="${this.amPm ? 1 : MIN_UNIT}"
-        max="${this.amPm ? HOURS_OF_NOON : MAX_HOURS}"
-        .value="${hours}"
-        placeholder="${hours ? nothing : Placeholder.HOURS}"
-        ?disabled="${this.disabled}"
-        ?readonly="${this.readonly}"
-        @value-changed="${this.onInputValueChanged}"
-        @focused-changed=${this.onInputFocusedChanged}></ef-number-field>`;
+      id="hours"
+      part="input"
+      aria-label="${!isIE ? this.t('SELECT_HOURS', { value: this.periodHours }) : nothing}"
+      no-spinner
+      transparent
+      min="${this.amPm ? 1 : MIN_UNIT}"
+      max="${this.amPm ? HOURS_OF_NOON : MAX_HOURS}"
+      .value="${hours}"
+      placeholder="${hours ? nothing : Placeholder.HOURS}"
+      ?disabled="${this.disabled}"
+      ?readonly="${this.readonly}"
+      @value-changed="${this.onInputValueChanged}"
+      @focused-changed=${this.onInputFocusedChanged}
+    ></ef-number-field>`;
     }
     /**
      * Template for Minutes Segment
@@ -724,19 +730,20 @@ let TimePicker = TimePicker_1 = class TimePicker extends ControlElement {
     get minutesTemplate() {
         const minutes = this.formattedMinutes;
         return html `<ef-number-field
-        id="minutes"
-        aria-label="${!isIE ? this.t('SELECT_MINUTES', { value: this.minutes }) : nothing}"
-        part="input"
-        no-spinner
-        min="${MIN_UNIT}"
-        max="${MAX_MINUTES}"
-        .value="${minutes}"
-        placeholder="${minutes ? nothing : Placeholder.MINUTES}"
-        ?readonly="${this.readonly}"
-        ?disabled="${this.disabled}"
-        transparent
-        @value-changed="${this.onInputValueChanged}"
-        @focused-changed=${this.onInputFocusedChanged}></ef-number-field>`;
+      id="minutes"
+      aria-label="${!isIE ? this.t('SELECT_MINUTES', { value: this.minutes }) : nothing}"
+      part="input"
+      no-spinner
+      min="${MIN_UNIT}"
+      max="${MAX_MINUTES}"
+      .value="${minutes}"
+      placeholder="${minutes ? nothing : Placeholder.MINUTES}"
+      ?readonly="${this.readonly}"
+      ?disabled="${this.disabled}"
+      transparent
+      @value-changed="${this.onInputValueChanged}"
+      @focused-changed=${this.onInputFocusedChanged}
+    ></ef-number-field>`;
     }
     /**
      * Template for Seconds Segment
@@ -744,21 +751,21 @@ let TimePicker = TimePicker_1 = class TimePicker extends ControlElement {
      */
     get secondsTemplate() {
         const seconds = this.formattedSeconds;
-        return html `
-      <ef-number-field
-        id="seconds"
-        part="input"
-        aria-label="${!isIE ? this.t('SELECT_SECONDS', { value: this.seconds }) : nothing}"
-        no-spinner
-        min="${MIN_UNIT}"
-        max="${MAX_SECONDS}"
-        .value="${seconds}"
-        placeholder="${seconds ? nothing : Placeholder.SECONDS}"
-        ?readonly="${this.readonly}"
-        ?disabled="${this.disabled}"
-        transparent
-        @value-changed="${this.onInputValueChanged}"
-        @focused-changed=${this.onInputFocusedChanged}></ef-number-field>`;
+        return html ` <ef-number-field
+      id="seconds"
+      part="input"
+      aria-label="${!isIE ? this.t('SELECT_SECONDS', { value: this.seconds }) : nothing}"
+      no-spinner
+      min="${MIN_UNIT}"
+      max="${MAX_SECONDS}"
+      .value="${seconds}"
+      placeholder="${seconds ? nothing : Placeholder.SECONDS}"
+      ?readonly="${this.readonly}"
+      ?disabled="${this.disabled}"
+      transparent
+      @value-changed="${this.onInputValueChanged}"
+      @focused-changed=${this.onInputFocusedChanged}
+    ></ef-number-field>`;
     }
     /**
      * Template for AmPm Segment
@@ -766,35 +773,45 @@ let TimePicker = TimePicker_1 = class TimePicker extends ControlElement {
      */
     get getAmPmHtml() {
         const hasHours = this.hours !== null;
-        return this.amPm ? html `
-      <div role="listbox"
-           aria-label="${this.t('TOGGLE_TIME_PERIOD')}"
-           aria-activedescendant="${hasHours ? this.isAM() ? 'toggle-am' : 'toggle-pm' : nothing}"
-           id="toggle"
-           part="toggle"
-           @tap=${this.toggle}
-           tabindex="0">
-        <div
-          aria-label="${this.t('BEFORE_MIDDAY')}"
-          role="option"
-          id="toggle-am"
-          part="toggle-item"
-          ?active=${hasHours && this.isAM()}>AM</div>
-        <div
-          aria-label="${this.t('AFTER_MIDDAY')}"
-          role="option"
-          id="toggle-pm"
-          part="toggle-item"
-          ?active=${hasHours && this.isPM()}>PM</div>
-      </div>
-    ` : null;
+        return this.amPm
+            ? html `
+          <div
+            role="listbox"
+            aria-label="${this.t('TOGGLE_TIME_PERIOD')}"
+            aria-activedescendant="${hasHours ? (this.isAM() ? 'toggle-am' : 'toggle-pm') : nothing}"
+            id="toggle"
+            part="toggle"
+            @tap=${this.toggle}
+            tabindex="0"
+          >
+            <div
+              aria-label="${this.t('BEFORE_MIDDAY')}"
+              role="option"
+              id="toggle-am"
+              part="toggle-item"
+              ?active=${hasHours && this.isAM()}
+            >
+              AM
+            </div>
+            <div
+              aria-label="${this.t('AFTER_MIDDAY')}"
+              role="option"
+              id="toggle-pm"
+              part="toggle-item"
+              ?active=${hasHours && this.isPM()}
+            >
+              PM
+            </div>
+          </div>
+        `
+            : null;
     }
     /**
      * Native input's template for mobile
      * @returns input
      */
     get nativeInputForMobile() {
-        return this.isMobile ? html `<input id="mtp" type="time" @change=${this.onMobileTimeChange}>` : null;
+        return this.isMobile ? html `<input id="mtp" type="time" @change=${this.onMobileTimeChange} />` : null;
     }
     /**
      * A template used to notify currently selected value for screen readers
@@ -815,18 +832,16 @@ let TimePicker = TimePicker_1 = class TimePicker extends ControlElement {
             value: value ? parse(value) : null,
             showSeconds,
             amPm
-        })}"></div>`;
+        })}"
+    ></div>`;
     }
     /**
      * Get time input template
      * @returns template result
      */
     get inputTemplate() {
-        return html `
-      ${this.hoursTemplate}
-      ${TimePicker_1.dividerTemplate}
-      ${this.minutesTemplate}
-      ${this.isShowSeconds ? html `${TimePicker_1.dividerTemplate}${this.secondsTemplate}` : undefined}`;
+        return html ` ${this.hoursTemplate} ${TimePicker_1.dividerTemplate} ${this.minutesTemplate}
+    ${this.isShowSeconds ? html `${TimePicker_1.dividerTemplate}${this.secondsTemplate}` : undefined}`;
     }
     /**
      * A `TemplateResult` that will be used
@@ -835,8 +850,7 @@ let TimePicker = TimePicker_1 = class TimePicker extends ControlElement {
      */
     render() {
         return html `
-      ${this.inputTemplate}
-      ${guard([this.value, this.lang, this.amPm], () => this.getAmPmHtml)}
+      ${this.inputTemplate} ${guard([this.value, this.lang, this.amPm], () => this.getAmPmHtml)}
       ${guard([this.isMobile], () => this.nativeInputForMobile)}
       ${guard([this.value, this.lang, this.showSeconds, this.amPm, this.announceValues], () => this.selectionTemplate)}
     `;

package/lib/time-picker/themes/halo/dark/index.js

@@ -1,5 +1,4 @@
 import '@refinitiv-ui/elements/number-field/themes/halo/dark';
 import '@refinitiv-ui/elements/icon/themes/halo/dark';
 import '@refinitiv-ui/elements/tooltip/themes/halo/dark';
-
 dispatchEvent(new CustomEvent('ef.customStyles.define', { detail: { name: 'ef-time-picker', styles: ':host{display:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;text-align:left;font-family:inherit;font-size:12px;font-weight:400;height:24px;max-width:100%;margin:1px 0;outline:0;box-sizing:border-box;display:inline-flex;align-items:center;position:relative;vertical-align:middle;color:#ccc;border-radius:0;background-color:#0d0d0d;text-overflow:ellipsis;border:1px solid #404040;width:auto;min-width:-moz-max-content;min-width:max-content;padding:0}:host([disabled]){color:rgba(204,204,204,.5);border:1px solid rgba(64,64,64,.5)}:host([focused]){background-size:100% 2px,100% 1px!important;background-position:center bottom!important;border-color:#334bff}:host [part=input]{margin:0;text-align:center;padding:0;color:inherit;width:24px}:host [part=divider]::before{content:\':\'}:host [part=toggle]{width:20px;font-size:50%;display:flex;flex-flow:column nowrap;align-items:center;justify-content:center;line-height:1.2;outline:0;cursor:pointer;touch-action:manipulation}:host [part=input],:host [part=toggle]{height:100%;position:relative}:host [part=input]:focus::after,:host [part=input][focused]::after,:host [part=toggle]:focus::after,:host [part=toggle][focused]::after{content:\'\';border-right:8px solid transparent;border-left:8px solid transparent;position:absolute;left:calc(50% - 8px);bottom:0;border-bottom:4px solid transparent;display:none}:host [part=toggle-item]{opacity:.5}:host [part=toggle-item][active]{opacity:1}:host [part=divider]{width:2px}' }}));

package/lib/time-picker/themes/halo/light/index.js

@@ -1,5 +1,4 @@
 import '@refinitiv-ui/elements/number-field/themes/halo/light';
 import '@refinitiv-ui/elements/icon/themes/halo/light';
 import '@refinitiv-ui/elements/tooltip/themes/halo/light';
-
 dispatchEvent(new CustomEvent('ef.customStyles.define', { detail: { name: 'ef-time-picker', styles: ':host{display:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;text-align:left;font-family:inherit;font-size:12px;font-weight:400;height:24px;max-width:100%;margin:1px 0;outline:0;box-sizing:border-box;display:inline-flex;align-items:center;position:relative;vertical-align:middle;color:#404040;border-radius:0;background-color:#fff;text-overflow:ellipsis;border:1px solid #595959;width:auto;min-width:-moz-max-content;min-width:max-content;padding:0}:host([disabled]){color:rgba(64,64,64,.5);border:1px solid rgba(89,89,89,.5)}:host([focused]){background-size:100% 2px,100% 1px!important;background-position:center bottom!important;border-color:#334bff}:host [part=input]{margin:0;text-align:center;padding:0;color:inherit;width:24px}:host [part=divider]::before{content:\':\'}:host [part=toggle]{width:20px;font-size:50%;display:flex;flex-flow:column nowrap;align-items:center;justify-content:center;line-height:1.2;outline:0;cursor:pointer;touch-action:manipulation}:host [part=input],:host [part=toggle]{height:100%;position:relative}:host [part=input]:focus::after,:host [part=input][focused]::after,:host [part=toggle]:focus::after,:host [part=toggle][focused]::after{content:\'\';border-right:8px solid transparent;border-left:8px solid transparent;position:absolute;left:calc(50% - 8px);bottom:0;border-bottom:4px solid transparent;display:none}:host [part=toggle-item]{opacity:.5}:host [part=toggle-item][active]{opacity:1}:host [part=divider]{width:2px}' }}));

package/lib/time-picker/themes/solar/charcoal/index.js

@@ -1,5 +1,4 @@
 import '@refinitiv-ui/elements/number-field/themes/solar/charcoal';
 import '@refinitiv-ui/elements/icon/themes/solar/charcoal';
 import '@refinitiv-ui/elements/tooltip/themes/solar/charcoal';
-
 dispatchEvent(new CustomEvent('ef.customStyles.define', { detail: { name: 'ef-time-picker', styles: ':host{display:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;text-align:left;font-family:inherit;font-size:13px;font-weight:400;height:23px;max-width:100%;margin:1px 0;outline:0;box-sizing:border-box;display:inline-flex;align-items:center;position:relative;vertical-align:middle;color:#c2c2c2;border-radius:0;text-overflow:ellipsis;width:auto;min-width:-moz-max-content;min-width:max-content;background-color:#000;border:1px solid #4a4a52;padding:0}:host([focused]){background-size:100% 2px,100% 1px!important;background-position:center bottom!important;border-color:#f93;border-style:dotted}:host [part=input]{margin:0;text-align:center;padding:0;color:inherit;width:25px}:host [part=divider]::before{content:\':\'}:host [part=toggle]{width:20px;display:flex;flex-flow:column nowrap;align-items:center;justify-content:center;outline:0;cursor:pointer;touch-action:manipulation;font-size:70%;line-height:1}:host [part=input],:host [part=toggle]{height:100%;position:relative}:host [part=input]:focus::after,:host [part=input][focused]::after,:host [part=toggle]:focus::after,:host [part=toggle][focused]::after{content:\'\';border-right:8px solid transparent;border-bottom:4px solid #f93;border-left:8px solid transparent;position:absolute;content:\'\';border:none;left:calc(50% - 7px);bottom:-1px;width:14px;height:1px;background:#f93}:host [part=toggle-item]{opacity:.5}:host [part=toggle-item][active]{opacity:1}:host([disabled]){border:1px solid rgba(74,74,82,.6);color:rgba(194,194,194,.6)}:host([readonly]){border:1px solid rgba(74,74,82,.6)}:host(:not([focused]):not(:focus):not([disabled]):not([readonly]):hover){border:1px solid #77777d}:host([warning]){background-color:#000;border:1px solid #f93}:host([warning][disabled]){border:1px solid rgba(255,153,51,.6);color:rgba(194,194,194,.6)}:host([warning][readonly]){border:1px solid rgba(255,153,51,.6)}:host([warning]:not([focused]):not(:focus):not([disabled]):not([readonly]):hover){border:1px solid #ffb366}:host([error]),:host([error][warning]:not([focused])){background-color:#000;border:1px solid #f5475b}:host([error][disabled]),:host([error][warning]:not([focused])[disabled]){border:1px solid rgba(245,71,91,.6);color:rgba(194,194,194,.6)}:host([error][readonly]),:host([error][warning]:not([focused])[readonly]){border:1px solid rgba(245,71,91,.6)}:host([error]:not([focused]):not(:focus):not([disabled]):not([readonly]):hover),:host([error][warning]:not([focused]):not([focused]):not(:focus):not([disabled]):not([readonly]):hover){border:1px solid #f87584}:host([highlight]){background-color:#1b252f;border:1px solid #4a4a52}:host([highlight][disabled]){border:1px solid rgba(74,74,82,.6);color:rgba(194,194,194,.6);background-color:rgba(27,37,47,.6)}:host([highlight][readonly]){border:1px solid rgba(74,74,82,.6)}:host([highlight]:not([focused]):not(:focus):not([disabled]):not([readonly]):hover){border:1px solid #77777d}:host([indirect]){color:#0fd;background-color:#000;border:1px solid #898623}:host([indirect][disabled]){border:1px solid rgba(137,134,35,.6);color:rgba(0,255,221,.6)}:host([indirect][readonly]){border:1px solid rgba(137,134,35,.6)}:host([indirect]:not([focused]):not(:focus):not([disabled]):not([readonly]):hover){border:1px solid #a7a45a}' }}));

package/lib/time-picker/themes/solar/pearl/index.js

@@ -1,5 +1,4 @@
 import '@refinitiv-ui/elements/number-field/themes/solar/pearl';
 import '@refinitiv-ui/elements/icon/themes/solar/pearl';
 import '@refinitiv-ui/elements/tooltip/themes/solar/pearl';
-
 dispatchEvent(new CustomEvent('ef.customStyles.define', { detail: { name: 'ef-time-picker', styles: ':host{display:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;text-align:left;font-family:inherit;font-size:13px;font-weight:400;height:23px;max-width:100%;margin:1px 0;outline:0;box-sizing:border-box;display:inline-flex;align-items:center;position:relative;vertical-align:middle;color:#484848;border-radius:0;text-overflow:ellipsis;width:auto;min-width:-moz-max-content;min-width:max-content;background-color:#fff;border:1px solid #a9afba;padding:0}:host([focused]){background-size:100% 2px,100% 1px!important;background-position:center bottom!important;border-color:#ffb266;border-style:dotted}:host [part=input]{margin:0;text-align:center;padding:0;color:inherit;width:25px}:host [part=divider]::before{content:\':\'}:host [part=toggle]{width:20px;display:flex;flex-flow:column nowrap;align-items:center;justify-content:center;outline:0;cursor:pointer;touch-action:manipulation;font-size:70%;line-height:1}:host [part=input],:host [part=toggle]{height:100%;position:relative}:host [part=input]:focus::after,:host [part=input][focused]::after,:host [part=toggle]:focus::after,:host [part=toggle][focused]::after{content:\'\';border-right:8px solid transparent;border-bottom:4px solid #ffb266;border-left:8px solid transparent;position:absolute;content:\'\';border:none;left:calc(50% - 7px);bottom:-1px;width:14px;height:1px;background:#ffb266}:host [part=toggle-item]{opacity:.5}:host [part=toggle-item][active]{opacity:1}:host([disabled]){border:1px solid rgba(169,175,186,.6);color:rgba(72,72,72,.6)}:host([readonly]){border:1px solid rgba(169,175,186,.6)}:host(:not([focused]):not(:focus):not([disabled]):not([readonly]):hover){border:1px solid #bfc3cb}:host([warning]){background-color:#fff;border:1px solid #f93}:host([warning][disabled]){border:1px solid rgba(255,153,51,.6);color:rgba(72,72,72,.6)}:host([warning][readonly]){border:1px solid rgba(255,153,51,.6)}:host([warning]:not([focused]):not(:focus):not([disabled]):not([readonly]):hover){border:1px solid #ffb366}:host([error]),:host([error][warning]:not([focused])){background-color:#fff;border:1px solid #d94255}:host([error][disabled]),:host([error][warning]:not([focused])[disabled]){border:1px solid rgba(217,66,85,.6);color:rgba(72,72,72,.6)}:host([error][readonly]),:host([error][warning]:not([focused])[readonly]){border:1px solid rgba(217,66,85,.6)}:host([error]:not([focused]):not(:focus):not([disabled]):not([readonly]):hover),:host([error][warning]:not([focused]):not([focused]):not(:focus):not([disabled]):not([readonly]):hover){border:1px solid #e37180}:host([highlight]){background-color:#b0ffff;border:1px solid #a9afba}:host([highlight][disabled]){border:1px solid rgba(169,175,186,.6);color:rgba(72,72,72,.6);background-color:rgba(176,255,255,.6)}:host([highlight][readonly]){border:1px solid rgba(169,175,186,.6)}:host([highlight]:not([focused]):not(:focus):not([disabled]):not([readonly]):hover){border:1px solid #bfc3cb}:host([indirect]){color:#009494;background-color:#effefe;border:1px solid #898623}:host([indirect][disabled]){border:1px solid rgba(137,134,35,.6);color:rgba(0,148,148,.6)}:host([indirect][readonly]){border:1px solid rgba(137,134,35,.6)}:host([indirect]:not([focused]):not(:focus):not([disabled]):not([readonly]):hover){border:1px solid #a7a45a}' }}));

package/lib/toggle/index.d.ts

@@ -1,5 +1,5 @@
 import { JSXInterface } from '../jsx';
-import { ControlElement, TemplateResult, CSSResultGroup, PropertyValues } from '@refinitiv-ui/core';
+import { CSSResultGroup, ControlElement, PropertyValues, TemplateResult } from '@refinitiv-ui/core';
 /**
  * Form control that can toggle between 2 states
  *

package/lib/toggle/index.js

@@ -1,5 +1,5 @@
 import { __decorate } from "tslib";
-import { ControlElement, html, css } from '@refinitiv-ui/core';
+import { ControlElement, 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 { VERSION } from '../version.js';
@@ -110,8 +110,9 @@ let Toggle = class Toggle extends ControlElement {
      * @return Render template
      */
     render() {
-        return html `
-    <div part="toggle">${this.checked && this.checkedLabel ? this.checkedLabel : this.label}</div>`;
+        return html ` <div part="toggle">
+      ${this.checked && this.checkedLabel ? this.checkedLabel : this.label}
+    </div>`;
     }
 };
 __decorate([

package/lib/toggle/themes/halo/dark/index.js

@@ -1,2 +1 @@
-
-dispatchEvent(new CustomEvent('ef.customStyles.define', { detail: { name: 'ef-toggle', styles: ':host{touch-action:manipulation;font-size:12px;background-color:#0d0d0d;text-align:center;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;outline:0;border-radius:0;box-shadow:inset 0 0 0 rgba(0,0,0,.5);transition:box-shadow .1s,border-color .1s;width:44px;height:24px;font-weight:400;color:#ccc;line-height:18px;text-transform:uppercase}:host [part=toggle]{cursor:pointer;display:block;position:relative;width:100%;height:100%;box-sizing:border-box;border:1px solid #4d4d4d;border-radius:inherit;text-overflow:inherit;overflow:inherit;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}:host [part=toggle]::after{content:\'\';position:absolute;box-sizing:border-box;border-radius:inherit;top:1px;left:1px;width:calc(50% - 1px);height:calc(100% - (1px * 2));background-color:#ccc}:host([checked-label]),:host([label]){min-width:52px;width:54px;min-width:44px}:host([readonly]) [part=toggle]{cursor:default}:host([disabled]) [part=toggle]{opacity:.5}:host([checked]) [part=toggle]::after{left:auto;border-color:#334bff;background-color:#334bff;right:1px}:host([checked-label][checked]) [part=toggle],:host([label][checked]) [part=toggle]{padding-right:24px;padding-left:3px}:host([checked-label]) [part=toggle],:host([label]) [part=toggle]{padding:3px 3px 3px 24px}:host([checked-label]) [part=toggle]::after,:host([label]) [part=toggle]::after{width:20px}@media (-ms-high-contrast:none),(pointer:fine){:host(:hover:not([readonly])),:host([focused=visible]){box-shadow:0 0 0 #334bff}:host(:hover:not([readonly])) [part=toggle],:host([focused=visible]) [part=toggle]{border-color:#334bff}:host(:hover:not([readonly])){color:#fff}:host(:hover:not([readonly])) [part=toggle]{border-color:#1429bd}:host(:hover:not([readonly])) [part=toggle]::after{background-color:#1429bd;border-color:#1429bd}}:host([checked]){color:#fff}:host([disabled]) [part=toggle]::after{opacity:.2}:host [part=toggle]::after,:host([checked]) [part=toggle]::after{border:1px solid #0d0d0d}' }}));
+dispatchEvent(new CustomEvent('ef.customStyles.define', { detail: { name: 'ef-toggle', styles: ':host{touch-action:manipulation;font-size:12px;background-color:#0d0d0d;text-align:center;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;outline:0;border-radius:0;box-shadow:inset 0 0 0 rgba(0,0,0,.5);transition:box-shadow .1s,border-color .1s;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;width:44px;height:24px;font-weight:400;color:#ccc;line-height:18px;text-transform:uppercase}:host [part=toggle]{cursor:pointer;display:block;position:relative;width:100%;height:100%;box-sizing:border-box;border:1px solid #4d4d4d;border-radius:inherit;text-overflow:inherit;overflow:inherit}:host [part=toggle]::after{content:\'\';position:absolute;box-sizing:border-box;border-radius:inherit;top:1px;left:1px;width:calc(50% - 1px);height:calc(100% - (1px * 2));background-color:#ccc}:host([checked-label]),:host([label]){min-width:52px;width:54px;min-width:44px}:host([readonly]) [part=toggle]{cursor:default}:host([disabled]) [part=toggle]{opacity:.5}:host([checked]) [part=toggle]::after{left:auto;border-color:#334bff;background-color:#334bff;right:1px}:host([checked-label][checked]) [part=toggle],:host([label][checked]) [part=toggle]{padding-right:24px;padding-left:3px}:host([checked-label]) [part=toggle],:host([label]) [part=toggle]{padding:3px 3px 3px 24px}:host([checked-label]) [part=toggle]::after,:host([label]) [part=toggle]::after{width:20px}@media (-ms-high-contrast:none),(pointer:fine){:host(:hover:not([readonly])),:host([focused=visible]){box-shadow:0 0 0 #334bff}:host(:hover:not([readonly])) [part=toggle],:host([focused=visible]) [part=toggle]{border-color:#334bff}:host(:hover:not([readonly])){color:#fff}:host(:hover:not([readonly])) [part=toggle]{border-color:#1429bd}:host(:hover:not([readonly])) [part=toggle]::after{background-color:#1429bd;border-color:#1429bd}}:host([checked]){color:#fff}:host([disabled]) [part=toggle]::after{opacity:.2}:host [part=toggle]::after,:host([checked]) [part=toggle]::after{border:1px solid #0d0d0d}' }}));

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

@@ -1,2 +1 @@
-
-dispatchEvent(new CustomEvent('ef.customStyles.define', { detail: { name: 'ef-toggle', styles: ':host{touch-action:manipulation;font-size:12px;background-color:#fff;text-align:center;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;outline:0;border-radius:0;box-shadow:inset 0 0 0 rgba(0,0,0,.25);transition:box-shadow .1s,border-color .1s;width:44px;height:24px;font-weight:600;color:#0d0d0d;line-height:18px;text-transform:uppercase}:host [part=toggle]{cursor:pointer;display:block;position:relative;width:100%;height:100%;box-sizing:border-box;border:1px solid #ccc;border-radius:inherit;text-overflow:inherit;overflow:inherit;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}:host [part=toggle]::after{content:\'\';position:absolute;box-sizing:border-box;border-radius:inherit;top:1px;left:1px;width:calc(50% - 1px);height:calc(100% - (1px * 2));background-color:#0d0d0d}:host([checked-label]),:host([label]){min-width:52px;width:54px;min-width:44px}:host([readonly]) [part=toggle]{cursor:default}:host([disabled]) [part=toggle]{opacity:.5}:host([checked]) [part=toggle]::after{left:auto;border-color:#334bff;background-color:#334bff;right:1px}:host([checked-label][checked]) [part=toggle],:host([label][checked]) [part=toggle]{padding-right:24px;padding-left:3px}:host([checked-label]) [part=toggle],:host([label]) [part=toggle]{padding:3px 3px 3px 24px}:host([checked-label]) [part=toggle]::after,:host([label]) [part=toggle]::after{width:20px}@media (-ms-high-contrast:none),(pointer:fine){:host(:hover:not([readonly])),:host([focused=visible]){box-shadow:0 0 0 #334bff}:host(:hover:not([readonly])) [part=toggle],:host([focused=visible]) [part=toggle]{border-color:#334bff}:host(:hover:not([readonly])){color:#0d0d0d}:host(:hover:not([readonly])) [part=toggle]{border-color:#1429bd}:host(:hover:not([readonly])) [part=toggle]::after{background-color:#1429bd;border-color:#1429bd}}' }}));
+dispatchEvent(new CustomEvent('ef.customStyles.define', { detail: { name: 'ef-toggle', styles: ':host{touch-action:manipulation;font-size:12px;background-color:#fff;text-align:center;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;outline:0;border-radius:0;box-shadow:inset 0 0 0 rgba(0,0,0,.25);transition:box-shadow .1s,border-color .1s;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;width:44px;height:24px;font-weight:600;color:#0d0d0d;line-height:18px;text-transform:uppercase}:host [part=toggle]{cursor:pointer;display:block;position:relative;width:100%;height:100%;box-sizing:border-box;border:1px solid #ccc;border-radius:inherit;text-overflow:inherit;overflow:inherit}:host [part=toggle]::after{content:\'\';position:absolute;box-sizing:border-box;border-radius:inherit;top:1px;left:1px;width:calc(50% - 1px);height:calc(100% - (1px * 2));background-color:#0d0d0d}:host([checked-label]),:host([label]){min-width:52px;width:54px;min-width:44px}:host([readonly]) [part=toggle]{cursor:default}:host([disabled]) [part=toggle]{opacity:.5}:host([checked]) [part=toggle]::after{left:auto;border-color:#334bff;background-color:#334bff;right:1px}:host([checked-label][checked]) [part=toggle],:host([label][checked]) [part=toggle]{padding-right:24px;padding-left:3px}:host([checked-label]) [part=toggle],:host([label]) [part=toggle]{padding:3px 3px 3px 24px}:host([checked-label]) [part=toggle]::after,:host([label]) [part=toggle]::after{width:20px}@media (-ms-high-contrast:none),(pointer:fine){:host(:hover:not([readonly])),:host([focused=visible]){box-shadow:0 0 0 #334bff}:host(:hover:not([readonly])) [part=toggle],:host([focused=visible]) [part=toggle]{border-color:#334bff}:host(:hover:not([readonly])){color:#0d0d0d}:host(:hover:not([readonly])) [part=toggle]{border-color:#1429bd}:host(:hover:not([readonly])) [part=toggle]::after{background-color:#1429bd;border-color:#1429bd}}' }}));

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

@@ -1,2 +1 @@
-
-dispatchEvent(new CustomEvent('ef.customStyles.define', { detail: { name: 'ef-toggle', styles: ':host{touch-action:manipulation;font-size:13px;text-align:center;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;outline:0;border-radius:0;box-shadow:inset 0 0 0 rgba(0,0,0,.6);transition:box-shadow .2s,border-color .2s;width:44px;height:24px;color:#e2e2e2;background-color:#000;line-height:18px}:host [part=toggle]{cursor:pointer;display:block;position:relative;width:100%;height:100%;box-sizing:border-box;border:1px solid #4a4a52;border-radius:inherit;text-overflow:inherit;overflow:inherit;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}:host [part=toggle]::after{content:\'\';position:absolute;top:1px;left:1px;width:calc(50% - 1px);height:calc(100% - (1px * 2));background-color:#555d6c;box-sizing:border-box;border-radius:inherit}:host([checked-label]),:host([label]){width:67.6px;min-width:52px;min-width:44px}:host([readonly]) [part=toggle]{cursor:default}:host([disabled]) [part=toggle]{opacity:.5}:host([checked]) [part=toggle]::after{right:1px;left:auto;border-color:#f93;background-color:#f93}@media (-ms-high-contrast:none),(pointer:fine){:host(:hover:not([readonly])),:host([focused=visible]){box-shadow:0 0 0 #f93}:host(:hover:not([readonly])) [part=toggle],:host([focused=visible]) [part=toggle]{border-color:#f93}}:host [part=toggle] ::after{top:1px;left:1px;width:calc(50% - 1px);height:calc(100% - (1px * 2));background-image:linear-gradient(rgba(255,255,255,.1) 10%,rgba(255,255,255,0) 100%)}:host([checked-label][checked]) [part=toggle],:host([label][checked]) [part=toggle]{padding-right:24px;padding-left:3px}:host([checked-label]) [part=toggle],:host([label]) [part=toggle]{padding:3px 3px 3px 24px}:host([checked-label]) [part=toggle]::after,:host([label]) [part=toggle]::after{width:20px}:host([checked]) [part=toggle] ::after{right:1px}:host(:hover:not([readonly])) [part=toggle],:host([focused=visible]) [part=toggle]{border-style:dotted}' }}));
+dispatchEvent(new CustomEvent('ef.customStyles.define', { detail: { name: 'ef-toggle', styles: ':host{touch-action:manipulation;font-size:13px;text-align:center;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;outline:0;border-radius:0;box-shadow:inset 0 0 0 rgba(0,0,0,.6);transition:box-shadow .2s,border-color .2s;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;width:44px;height:24px;color:#e2e2e2;background-color:#000;line-height:18px}:host [part=toggle]{cursor:pointer;display:block;position:relative;width:100%;height:100%;box-sizing:border-box;border:1px solid #4a4a52;border-radius:inherit;text-overflow:inherit;overflow:inherit}:host [part=toggle]::after{content:\'\';position:absolute;top:1px;left:1px;width:calc(50% - 1px);height:calc(100% - (1px * 2));background-color:#555d6c;box-sizing:border-box;border-radius:inherit}:host([checked-label]),:host([label]){width:67.6px;min-width:52px;min-width:44px}:host([readonly]) [part=toggle]{cursor:default}:host([disabled]) [part=toggle]{opacity:.5}:host([checked]) [part=toggle]::after{right:1px;left:auto;border-color:#f93;background-color:#f93}@media (-ms-high-contrast:none),(pointer:fine){:host(:hover:not([readonly])),:host([focused=visible]){box-shadow:0 0 0 #f93}:host(:hover:not([readonly])) [part=toggle],:host([focused=visible]) [part=toggle]{border-color:#f93}}:host [part=toggle] ::after{top:1px;left:1px;width:calc(50% - 1px);height:calc(100% - (1px * 2));background-image:linear-gradient(rgba(255,255,255,.1) 10%,rgba(255,255,255,0) 100%)}:host([checked-label][checked]) [part=toggle],:host([label][checked]) [part=toggle]{padding-right:24px;padding-left:3px}:host([checked-label]) [part=toggle],:host([label]) [part=toggle]{padding:3px 3px 3px 24px}:host([checked-label]) [part=toggle]::after,:host([label]) [part=toggle]::after{width:20px}:host([checked]) [part=toggle] ::after{right:1px}:host(:hover:not([readonly])) [part=toggle],:host([focused=visible]) [part=toggle]{border-style:dotted}' }}));

package/lib/toggle/themes/solar/pearl/index.js

@@ -1,2 +1 @@
-
-dispatchEvent(new CustomEvent('ef.customStyles.define', { detail: { name: 'ef-toggle', styles: ':host{touch-action:manipulation;font-size:13px;text-align:center;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;outline:0;border-radius:0;box-shadow:inset 0 0 0 rgba(0,0,0,.3);transition:box-shadow .2s,border-color .2s;width:44px;height:24px;color:#484848;background-color:#fff;line-height:18px}:host [part=toggle]{cursor:pointer;display:block;position:relative;width:100%;height:100%;box-sizing:border-box;border:1px solid #a9afba;border-radius:inherit;text-overflow:inherit;overflow:inherit;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}:host [part=toggle]::after{content:\'\';position:absolute;top:1px;left:1px;width:calc(50% - 1px);height:calc(100% - (1px * 2));background-color:#d4d7dd;box-sizing:border-box;border-radius:inherit}:host([checked-label]),:host([label]){width:67.6px;min-width:52px;min-width:44px}:host([readonly]) [part=toggle]{cursor:default}:host([disabled]) [part=toggle]{opacity:.5}:host([checked]) [part=toggle]::after{right:1px;left:auto;border-color:#f93;background-color:#f93}@media (-ms-high-contrast:none),(pointer:fine){:host(:hover:not([readonly])),:host([focused=visible]){box-shadow:0 0 0 #ffb266}:host(:hover:not([readonly])) [part=toggle],:host([focused=visible]) [part=toggle]{border-color:#ffb266}}:host [part=toggle] ::after{top:1px;left:1px;width:calc(50% - 1px);height:calc(100% - (1px * 2));background-image:linear-gradient(rgba(0,0,0,0) 0,rgba(0,0,0,.1) 100%)}:host([checked-label][checked]) [part=toggle],:host([label][checked]) [part=toggle]{padding-right:24px;padding-left:3px}:host([checked-label]) [part=toggle],:host([label]) [part=toggle]{padding:3px 3px 3px 24px}:host([checked-label]) [part=toggle]::after,:host([label]) [part=toggle]::after{width:20px}:host([checked]) [part=toggle] ::after{right:1px}:host(:hover:not([readonly])) [part=toggle],:host([focused=visible]) [part=toggle]{border-style:dotted}' }}));
+dispatchEvent(new CustomEvent('ef.customStyles.define', { detail: { name: 'ef-toggle', styles: ':host{touch-action:manipulation;font-size:13px;text-align:center;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;outline:0;border-radius:0;box-shadow:inset 0 0 0 rgba(0,0,0,.3);transition:box-shadow .2s,border-color .2s;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;width:44px;height:24px;color:#484848;background-color:#fff;line-height:18px}:host [part=toggle]{cursor:pointer;display:block;position:relative;width:100%;height:100%;box-sizing:border-box;border:1px solid #a9afba;border-radius:inherit;text-overflow:inherit;overflow:inherit}:host [part=toggle]::after{content:\'\';position:absolute;top:1px;left:1px;width:calc(50% - 1px);height:calc(100% - (1px * 2));background-color:#d4d7dd;box-sizing:border-box;border-radius:inherit}:host([checked-label]),:host([label]){width:67.6px;min-width:52px;min-width:44px}:host([readonly]) [part=toggle]{cursor:default}:host([disabled]) [part=toggle]{opacity:.5}:host([checked]) [part=toggle]::after{right:1px;left:auto;border-color:#f93;background-color:#f93}@media (-ms-high-contrast:none),(pointer:fine){:host(:hover:not([readonly])),:host([focused=visible]){box-shadow:0 0 0 #ffb266}:host(:hover:not([readonly])) [part=toggle],:host([focused=visible]) [part=toggle]{border-color:#ffb266}}:host [part=toggle] ::after{top:1px;left:1px;width:calc(50% - 1px);height:calc(100% - (1px * 2));background-image:linear-gradient(rgba(0,0,0,0) 0,rgba(0,0,0,.1) 100%)}:host([checked-label][checked]) [part=toggle],:host([label][checked]) [part=toggle]{padding-right:24px;padding-left:3px}:host([checked-label]) [part=toggle],:host([label]) [part=toggle]{padding:3px 3px 3px 24px}:host([checked-label]) [part=toggle]::after,:host([label]) [part=toggle]::after{width:20px}:host([checked]) [part=toggle] ::after{right:1px}:host(:hover:not([readonly])) [part=toggle],:host([focused=visible]) [part=toggle]{border-style:dotted}' }}));

package/lib/tooltip/elements/title-tooltip.js

@@ -1,6 +1,6 @@
 import { matches } from '@refinitiv-ui/core';
-import { addTooltipCondition } from './tooltip-element.js';
 import { tooltipRenderer } from '../helpers/renderer.js';
+import { addTooltipCondition } from './tooltip-element.js';
 // Support title attribute
 Object.defineProperty(HTMLElement.prototype, 'title', {
     get: function () {
@@ -15,4 +15,4 @@ Object.defineProperty(HTMLElement.prototype, 'title', {
         this.setAttribute('tooltip', value);
     }
 });
-addTooltipCondition(element => matches(element, '[title]'), tooltipRenderer);
+addTooltipCondition((element) => matches(element, '[title]'), tooltipRenderer);

package/lib/tooltip/helpers/renderer.d.ts

@@ -1,6 +1,6 @@
 import type { TooltipRenderer } from './types';
 /**
- * A default renderer that renders `tooltip` attribute
+ * A default renderer that renders `tooltip` or `data-tooltip` attributes
  * @param target Target to check
  * @returns tooltip or null or undefined
  */

package/lib/tooltip/helpers/renderer.js

@@ -1,11 +1,11 @@
 /**
- * A default renderer that renders `tooltip` attribute
+ * A default renderer that renders `tooltip` or `data-tooltip` attributes
  * @param target Target to check
  * @returns tooltip or null or undefined
  */
 const tooltipRenderer = (target) => {
-    if (target.hasAttribute('tooltip')) {
-        return target.getAttribute('tooltip');
+    if (target.hasAttribute('tooltip') || target.hasAttribute('data-tooltip')) {
+        return target.getAttribute('tooltip') || target.getAttribute('data-tooltip');
     }
 };
 export { tooltipRenderer };

package/lib/tooltip/index.d.ts

@@ -1,10 +1,10 @@
 import { JSXInterface } from '../jsx';
-import { BasicElement, TemplateResult, CSSResultGroup, PropertyValues } from '@refinitiv-ui/core';
+import { BasicElement, CSSResultGroup, PropertyValues, TemplateResult } from '@refinitiv-ui/core';
 import '../overlay/index.js';
-import type { OverlayTransitionStyle as TooltipTransitionStyle } from '../overlay';
 import './elements/title-tooltip.js';
-import { TooltipCondition, TooltipRenderer, TooltipPosition } from './helpers/types.js';
-import { register as registerOverflowTooltip, deregister as deregisterOverflowTooltip } from './helpers/overflow-tooltip.js';
+import { deregister as deregisterOverflowTooltip, register as registerOverflowTooltip } from './helpers/overflow-tooltip.js';
+import { TooltipCondition, TooltipPosition, TooltipRenderer } from './helpers/types.js';
+import type { OverlayTransitionStyle as TooltipTransitionStyle } from '../overlay';
 /**
  * Tooltip displays extra information when the
  * user hovers the pointer over an item.
@@ -44,37 +44,37 @@ declare class Tooltip extends BasicElement {
      */
     private static elementHasMoved;
     /**
-    * CSS selector to match the tooltip
-    */
+     * CSS selector to match the tooltip
+     */
     selector: string;
     /**
-    * Provide a function to test against the target.
-    * Return `true` if the target matches
-    * @type {TooltipCondition}
-    */
+     * Provide a function to test against the target.
+     * Return `true` if the target matches
+     * @type {TooltipCondition}
+     */
     condition: TooltipCondition | undefined;
     /**
-    * A renderer to define tooltip internal content.
-    * Return undefined, `String`, `HTMLElement` or `DocumentFragment`.
-    * If the content is not present, tooltip will not be displayed
-    * @type {TooltipRenderer}
-    */
+     * A renderer to define tooltip internal content.
+     * Return undefined, `String`, `HTMLElement` or `DocumentFragment`.
+     * If the content is not present, tooltip will not be displayed
+     * @type {TooltipRenderer}
+     */
     renderer: TooltipRenderer | undefined;
     /**
-    * The position of the tooltip. Use the following values:
-    * `auto` (default) - display based on mouse enter coordinates
-    * `above` - display above the element
-    * `right` - display to the right of the element
-    * `below` - display beneath the element
-    * `left` - display to the left of the element
-    */
+     * The position of the tooltip. Use the following values:
+     * `auto` (default) - display based on mouse enter coordinates
+     * `above` - display above the element
+     * `right` - display to the right of the element
+     * `below` - display beneath the element
+     * `left` - display to the left of the element
+     */
     position: 'auto' | 'above' | 'right' | 'below' | 'left';
     /**
-    * Set the transition style.
-    * Value can be `fade`, `zoom`, `slide-down`, `slide-up`, `slide-right`,
-    * `slide-left`, `slide-right-down`, `slide-right-up`, `slide-left-down`, `slide-left-up`, or null in case of no transition
-    *  @type {TooltipTransitionStyle}
-    */
+     * Set the transition style.
+     * Value can be `fade`, `zoom`, `slide-down`, `slide-up`, `slide-right`,
+     * `slide-left`, `slide-right-down`, `slide-right-up`, `slide-left-down`, `slide-left-up`, or null in case of no transition
+     *  @type {TooltipTransitionStyle}
+     */
     transitionStyle: TooltipTransitionStyle | null;
     /**
      * Get tooltip popup window