@refinitiv-ui/elements 7.0.0 → 7.0.1

package/lib/color-picker/index.d.ts

@@ -1,8 +1,8 @@
 import { JSXInterface } from '../jsx';
-import { ControlElement, PropertyValues, TemplateResult, CSSResult } from '@refinitiv-ui/core';
-import '../color-dialog/index.js';
+import { CSSResult, ControlElement, PropertyValues, TemplateResult } from '@refinitiv-ui/core';
 import '@refinitiv-ui/phrasebook/locale/en/color-picker.js';
 import { TranslatePromise } from '@refinitiv-ui/translate';
+import '../color-dialog/index.js';
 /**
  *
  * Color picker control

package/lib/color-picker/index.js

@@ -1,15 +1,15 @@
 import { __decorate } from "tslib";
-import { ControlElement, html, css, WarningNotice, nothing } 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 { 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 { VERSION } from '../version.js';
+import '@refinitiv-ui/phrasebook/locale/en/color-picker.js';
+import { TranslatePropertyKey, translate } from '@refinitiv-ui/translate';
 import { isHex, readableColor } from '@refinitiv-ui/utils/color.js';
-import { ref, createRef } from '@refinitiv-ui/core/directives/ref.js';
 import '../color-dialog/index.js';
-import '@refinitiv-ui/phrasebook/locale/en/color-picker.js';
-import { state } from '@refinitiv-ui/core/decorators/state.js';
-import { translate, TranslatePropertyKey } from '@refinitiv-ui/translate';
+import { VERSION } from '../version.js';
 const DIALOG_POSITION = ['right-start', 'right-end', 'right-middle', 'left-start', 'left-end', 'left-middle'];
 /**
  *
@@ -67,11 +67,14 @@ let ColorPicker = class ColorPicker extends ControlElement {
       :host {
         display: inline-block;
       }
-      [part=color-item][no-color] {
-        background: linear-gradient(to bottom right, transparent calc(50% - 1px),
-        var(--no-color-line-color, #ff0000) calc(50% - 1px),
-        var(--no-color-line-color, #ff0000) calc(50% + 1px),
-        transparent calc(50% + 1px));
+      [part='color-item'][no-color] {
+        background: linear-gradient(
+          to bottom right,
+          transparent calc(50% - 1px),
+          var(--no-color-line-color, #ff0000) calc(50% - 1px),
+          var(--no-color-line-color, #ff0000) calc(50% + 1px),
+          transparent calc(50% + 1px)
+        );
       }
     `;
     }
@@ -172,7 +175,8 @@ let ColorPicker = class ColorPicker extends ControlElement {
      * @returns {void}
      */
     setOpened(opened) {
-        if (opened && !this.canOpenPopup) { /* never allow to open popup if cannot do so */
+        if (opened && !this.canOpenPopup) {
+            /* never allow to open popup if cannot do so */
             return;
         }
         if (this.opened !== opened) {
@@ -208,10 +212,11 @@ let ColorPicker = class ColorPicker extends ControlElement {
             return null;
         }
         return html `<div
-    part="aria-selection"
-    role="status"
-    aria-live="polite"
-    aria-label="${this.colorAriaLabel}"></div>`;
+      part="aria-selection"
+      role="status"
+      aria-live="polite"
+      aria-label="${this.colorAriaLabel}"
+    ></div>`;
     }
     /**
      * Helper method, used to set the color description.
@@ -243,25 +248,30 @@ let ColorPicker = class ColorPicker extends ControlElement {
     get dialogTemplate() {
         if (this.lazyRendered) {
             return html `<ef-color-dialog
-      offset="4"
-      ${ref(this.dialogRef)}
-      .lang=${this.lang || nothing}
-      .value=${this.value}
-      .focusBoundary=${this}
-      .positionTarget=${this}
-      .position=${DIALOG_POSITION}
-      .withBackdrop=${false}
-      ?opened=${this.opened}
-      ?allow-nocolor=${this.allowNocolor}
-      @opened-changed=${this.onColorDialogOpenedChanged}
-      @value-changed=${this.onColorDialogValueChanged}></ef-color-dialog>`;
+        offset="4"
+        ${ref(this.dialogRef)}
+        .lang=${this.lang || nothing}
+        .value=${this.value}
+        .focusBoundary=${this}
+        .positionTarget=${this}
+        .position=${DIALOG_POSITION}
+        .withBackdrop=${false}
+        ?opened=${this.opened}
+        ?allow-nocolor=${this.allowNocolor}
+        @opened-changed=${this.onColorDialogOpenedChanged}
+        @value-changed=${this.onColorDialogValueChanged}
+      ></ef-color-dialog>`;
         }
     }
     /**
      * Color item template
      */
     get colorItemTemplate() {
-        return html `<div part="color-item" ?no-color=${!this.value} style=${styleMap({ backgroundColor: this.value })}></div>`;
+        return html `<div
+      part="color-item"
+      ?no-color=${!this.value}
+      style=${styleMap({ backgroundColor: this.value })}
+    ></div>`;
     }
     /**
      * A `TemplateResult` that will be used
@@ -269,11 +279,7 @@ let ColorPicker = class ColorPicker extends ControlElement {
      * @return Render template
      */
     render() {
-        return html `
-      ${this.selectionTemplate}
-      ${this.colorItemTemplate}
-      ${this.dialogTemplate}
-      `;
+        return html ` ${this.selectionTemplate} ${this.colorItemTemplate} ${this.dialogTemplate} `;
     }
 };
 __decorate([

package/lib/combo-box/helpers/filter.d.ts

@@ -1,7 +1,7 @@
-import type { DataItem } from '@refinitiv-ui/utils/collection.js';
+import type { ItemData } from '../../item';
 import type { ComboBox } from '../index';
 import type { ComboBoxFilter } from './types';
-import type { ItemData } from '../../item';
+import type { DataItem } from '@refinitiv-ui/utils/collection.js';
 /**
  * Default filter used by combo box
  * @param el ComboBox instance to filter

package/lib/combo-box/helpers/types.d.ts

@@ -1,5 +1,5 @@
-import type { DataItem } from '@refinitiv-ui/utils/collection.js';
 import type { ItemData } from '../../item';
+import type { DataItem } from '@refinitiv-ui/utils/collection.js';
 /**
  * Predicate callback
  * Matches item against filter function

package/lib/combo-box/index.d.ts

@@ -1,19 +1,19 @@
 import { JSXInterface } from '../jsx';
-import { FormFieldElement, CSSResultGroup, PropertyValues, TapEvent, TemplateResult, StyleMap } from '@refinitiv-ui/core';
+import { CSSResultGroup, FormFieldElement, PropertyValues, StyleMap, TapEvent, TemplateResult } from '@refinitiv-ui/core';
 import { TemplateMap } from '@refinitiv-ui/core/directives/template-map.js';
-import { CollectionComposer, DataItem } from '@refinitiv-ui/utils/collection.js';
+import '@refinitiv-ui/phrasebook/locale/en/combo-box.js';
+import { TranslateDirective } from '@refinitiv-ui/translate';
 import { AnimationTaskRunner } from '@refinitiv-ui/utils/async.js';
-import { ComboBoxRenderer } from './helpers/renderer.js';
-import { CustomKeyboardEvent } from './helpers/keyboard-event.js';
+import { CollectionComposer, DataItem } from '@refinitiv-ui/utils/collection.js';
+import '../counter/index.js';
 import '../icon/index.js';
-import '../overlay/index.js';
 import '../list/index.js';
-import '../counter/index.js';
+import '../overlay/index.js';
+import { CustomKeyboardEvent } from './helpers/keyboard-event.js';
+import { ComboBoxRenderer } from './helpers/renderer.js';
 import type { ItemData } from '../item';
-import type { ComboBoxData, ComboBoxFilter } from './helpers/types';
 import type { List } from '../list';
-import { TranslateDirective } from '@refinitiv-ui/translate';
-import '@refinitiv-ui/phrasebook/locale/en/combo-box.js';
+import type { ComboBoxData, ComboBoxFilter } from './helpers/types';
 export type { ComboBoxFilter, ComboBoxData };
 export { ComboBoxRenderer };
 /**

package/lib/combo-box/index.js

@@ -1,24 +1,24 @@
 import { __decorate } from "tslib";
-import { FormFieldElement, css, html, WarningNotice, FocusedPropertyKey, triggerResize, nothing } from '@refinitiv-ui/core';
+import { FocusedPropertyKey, FormFieldElement, WarningNotice, css, html, nothing, triggerResize } from '@refinitiv-ui/core';
 import { customElement } from '@refinitiv-ui/core/decorators/custom-element.js';
+import { eventOptions } from '@refinitiv-ui/core/decorators/event-options.js';
 import { property } from '@refinitiv-ui/core/decorators/property.js';
 import { query } from '@refinitiv-ui/core/decorators/query.js';
-import { eventOptions } from '@refinitiv-ui/core/decorators/event-options.js';
 import { styleMap } from '@refinitiv-ui/core/directives/style-map.js';
-import { VERSION } from '../version.js';
-import { CollectionComposer } from '@refinitiv-ui/utils/collection.js';
+import '@refinitiv-ui/phrasebook/locale/en/combo-box.js';
+import { translate } from '@refinitiv-ui/translate';
 import { AnimationTaskRunner, TimeoutTaskRunner } from '@refinitiv-ui/utils/async.js';
-import { registerOverflowTooltip } from '../tooltip/index.js';
+import { CollectionComposer } from '@refinitiv-ui/utils/collection.js';
 import { isElementOverflown } from '@refinitiv-ui/utils/element.js';
-import { ComboBoxRenderer } from './helpers/renderer.js';
-import { defaultFilter } from './helpers/filter.js';
-import { CustomKeyboardEvent } from './helpers/keyboard-event.js';
+import '../counter/index.js';
 import '../icon/index.js';
-import '../overlay/index.js';
 import '../list/index.js';
-import '../counter/index.js';
-import { translate } from '@refinitiv-ui/translate';
-import '@refinitiv-ui/phrasebook/locale/en/combo-box.js';
+import '../overlay/index.js';
+import { registerOverflowTooltip } from '../tooltip/index.js';
+import { VERSION } from '../version.js';
+import { defaultFilter } from './helpers/filter.js';
+import { CustomKeyboardEvent } from './helpers/keyboard-event.js';
+import { ComboBoxRenderer } from './helpers/renderer.js';
 export { ComboBoxRenderer };
 const QUERY_DEBOUNCE_RATE = 0;
 // Maximum number of characters to display in multiple mode
@@ -27,7 +27,7 @@ const MULTIPLE_LABEL_MAX_SIZE = 250;
 // Double space is expected
 const MULTIPLE_LABEL_SEPARATOR = ';  ';
 const POPUP_POSITION = ['bottom-start', 'top-start'];
-const valueFormatWarning = new WarningNotice('The specified \'values\' format does not conform to the required format.');
+const valueFormatWarning = new WarningNotice("The specified 'values' format does not conform to the required format.");
 const freeTextMultipleWarning = new WarningNotice('"free-text" mode is not compatible with "multiple" mode');
 /**
  * Combines a popup with a filterable selection list
@@ -153,13 +153,13 @@ let ComboBox = class ComboBox extends FormFieldElement {
         user-select: none;
         outline: none;
       }
-      [part~=input-wrapper] {
+      [part~='input-wrapper'] {
         cursor: pointer;
       }
-      [part~=input] {
+      [part~='input'] {
         cursor: text;
       }
-      [part~=input]::-ms-clear {
+      [part~='input']::-ms-clear {
         display: none;
       }
     `;
@@ -329,7 +329,9 @@ let ComboBox = class ComboBox extends FormFieldElement {
         }
         // multiple mode, do according to UX specs
         const output = labels.join(MULTIPLE_LABEL_SEPARATOR);
-        return output.length > MULTIPLE_LABEL_MAX_SIZE ? `${output.slice(0, MULTIPLE_LABEL_MAX_SIZE - 3)}...` : output;
+        return output.length > MULTIPLE_LABEL_MAX_SIZE
+            ? `${output.slice(0, MULTIPLE_LABEL_MAX_SIZE - 3)}...`
+            : output;
     }
     /**
      * Get resolved data (if possible)
@@ -369,7 +371,7 @@ let ComboBox = class ComboBox extends FormFieldElement {
      * @returns Promise<void>
      */
     async resolveDataPromise(data) {
-        const dataPromiseCounter = this.dataPromiseCounter += 1;
+        const dataPromiseCounter = (this.dataPromiseCounter += 1);
         let resolvedData;
         if (data instanceof Promise) {
             this.loading = true;
@@ -392,8 +394,7 @@ let ComboBox = class ComboBox extends FormFieldElement {
      * The the values from composer ignoring freeTextValue
      */
     get composerValues() {
-        return this.queryItemsByPropertyValue('selected', true)
-            .map(item => this.getItemPropertyValue(item, 'value'));
+        return this.queryItemsByPropertyValue('selected', true).map((item) => this.getItemPropertyValue(item, 'value'));
     }
     /**
      * Get the first value of highlighted item
@@ -402,7 +403,7 @@ let ComboBox = class ComboBox extends FormFieldElement {
         if (!this.opened) {
             return null;
         }
-        return this.highlightedItems.map(item => this.getItemPropertyValue(item, 'value'))[0] || '';
+        return this.highlightedItems.map((item) => this.getItemPropertyValue(item, 'value'))[0] || '';
     }
     /**
      * Return currently selected items
@@ -425,7 +426,7 @@ let ComboBox = class ComboBox extends FormFieldElement {
      * @returns List has visible items or not
      */
     get listHasVisibleItems() {
-        return this.resolvedData.some(item => !this.getItemPropertyValue(item, 'hidden'));
+        return this.resolvedData.some((item) => !this.getItemPropertyValue(item, 'hidden'));
     }
     /**
      * Selected item
@@ -439,7 +440,7 @@ let ComboBox = class ComboBox extends FormFieldElement {
      * @returns Has selection
      */
     get selectedLabels() {
-        return this.selection.map(selected => this.getItemPropertyValue(selected, 'label') || '');
+        return this.selection.map((selected) => this.getItemPropertyValue(selected, 'label') || '');
     }
     /**
      * Utility method  - ensures correct composer is being listened to
@@ -469,10 +470,10 @@ let ComboBox = class ComboBox extends FormFieldElement {
             this.shouldOpenOnFocus = false;
         }
         /*
-        * data can be visible and opened changed = open
-        * or, opened is true and data; and contains visible data = open
-        * queries local properties first to short circuit querying map iteration
-        */
+         * data can be visible and opened changed = open
+         * or, opened is true and data; and contains visible data = open
+         * queries local properties first to short circuit querying map iteration
+         */
         if (changedProperties.has('opened')) {
             if (this.opened) {
                 // fulfil any queries if opened is changed
@@ -496,7 +497,8 @@ let ComboBox = class ComboBox extends FormFieldElement {
             this.inputElement.select();
         }
         // Make sure that the first item is always highlighted
-        if (this.opened && (changedProperties.has('opened') || changedProperties.has('data') || changedProperties.has('query'))) {
+        if (this.opened &&
+            (changedProperties.has('opened') || changedProperties.has('data') || changedProperties.has('query'))) {
             this.highlightFirstItem();
         }
         // If data is set asynchronously while popup is opened
@@ -515,7 +517,7 @@ let ComboBox = class ComboBox extends FormFieldElement {
         super.firstUpdated(changedProperties);
         this.addEventListener('keydown', this.onKeyDown);
         this.addEventListener('tapstart', this.onTapStart);
-        registerOverflowTooltip(this, () => this.inputValue, () => this.inputElement ? isElementOverflown(this.inputElement) : false);
+        registerOverflowTooltip(this, () => this.inputValue, () => (this.inputElement ? isElementOverflown(this.inputElement) : false));
     }
     /**
      * Sets opened state and fires event
@@ -610,7 +612,7 @@ let ComboBox = class ComboBox extends FormFieldElement {
      * @returns {void}
      */
     clearHighlighted() {
-        this.highlightedItems.forEach(item => this.setItemPropertyValue(item, 'highlighted', false));
+        this.highlightedItems.forEach((item) => this.setItemPropertyValue(item, 'highlighted', false));
     }
     /**
      * Popup has to use max width if --list-max-width specified
@@ -623,7 +625,8 @@ let ComboBox = class ComboBox extends FormFieldElement {
             // 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();
                 }
@@ -657,7 +660,7 @@ let ComboBox = class ComboBox extends FormFieldElement {
      */
     resetInput() {
         this.setQuery('');
-        this.inputText = this.multiple ? '' : (this.freeTextValue || this.label);
+        this.inputText = this.multiple ? '' : this.freeTextValue || this.label;
     }
     /**
      * Filter the internal items by query
@@ -689,7 +692,9 @@ let ComboBox = class ComboBox extends FormFieldElement {
                 }
                 composer.setItemPropertyValue(item, 'hidden', !result);
                 composer.updateItemTimestamp(item);
-                if (result && groupHeaderItem && composer.getItemParent(groupHeaderItem) === composer.getItemParent(item)) {
+                if (result &&
+                    groupHeaderItem &&
+                    composer.getItemParent(groupHeaderItem) === composer.getItemParent(item)) {
                     composer.setItemPropertyValue(groupHeaderItem, 'hidden', false);
                     composer.updateItemTimestamp(groupHeaderItem);
                     groupHeaderItem = null;
@@ -723,10 +728,10 @@ let ComboBox = class ComboBox extends FormFieldElement {
      * @returns can highlight
      */
     canHighlightItem(item, composer) {
-        let canHighlight = !(composer.getItemPropertyValue(item, 'hidden') === true
-            || (composer.getItemPropertyValue(item, 'type') || 'text') !== 'text'
-            || composer.getItemPropertyValue(item, 'disabled') === true
-            || composer.isItemLocked(item) === true);
+        let canHighlight = !(composer.getItemPropertyValue(item, 'hidden') === true ||
+            (composer.getItemPropertyValue(item, 'type') || 'text') !== 'text' ||
+            composer.getItemPropertyValue(item, 'disabled') === true ||
+            composer.isItemLocked(item) === true);
         // check ancestors
         if (canHighlight) {
             const parent = composer.getItemParent(item);
@@ -1004,12 +1009,11 @@ let ComboBox = class ComboBox extends FormFieldElement {
      * @returns Popup template or undefined
      */
     get clearButtonTemplate() {
-        const hasText = (this.label || this.query || this.freeTextValue || this.inputText);
+        const hasText = this.label || this.query || this.freeTextValue || this.inputText;
         if (this.clears && hasText) {
             return html `
-        <div
-          id="clears-button"
-          part="button button-clear"><ef-icon part="icon icon-clear" icon="cross"></ef-icon>
+        <div id="clears-button" part="button button-clear">
+          <ef-icon part="icon icon-clear" icon="cross"></ef-icon>
         </div>
       `;
         }
@@ -1025,8 +1029,14 @@ let ComboBox = class ComboBox extends FormFieldElement {
             // benefit of being localised too
             if (this.focused || selectionLength > 1) {
                 return html `
-        <ef-counter part="selection-badge" tabindex="-1" .value=${selectionLength} title=${selectionLength > 999 ? selectionLength.toLocaleString() : nothing} max="999"></ef-counter>
-      `;
+          <ef-counter
+            part="selection-badge"
+            tabindex="-1"
+            .value=${selectionLength}
+            title=${selectionLength > 999 ? selectionLength.toLocaleString() : nothing}
+            max="999"
+          ></ef-counter>
+        `;
             }
         }
     }
@@ -1043,7 +1053,7 @@ let ComboBox = class ComboBox extends FormFieldElement {
         .data="${this.composer}"
         .multiple="${this.multiple}"
         .renderer="${this.renderer}"
-        ></ef-list>
+      ></ef-list>
     `;
     }
     /**
@@ -1077,7 +1087,8 @@ let ComboBox = class ComboBox extends FormFieldElement {
         no-focus-management
         no-autofocus
         @focusin="${this.shiftFocus}"
-      >${hasVisibleItems ? this.listTemplate : this.noItemsTemplate}</ef-overlay>`;
+        >${hasVisibleItems ? this.listTemplate : this.noItemsTemplate}</ef-overlay
+      >`;
         }
     }
     /**
@@ -1087,9 +1098,9 @@ let ComboBox = class ComboBox extends FormFieldElement {
     get decorateInputMap() {
         return {
             ...super.decorateInputMap,
-            'part': 'input',
-            'type': 'text',
-            'role': 'combobox',
+            part: 'input',
+            type: 'text',
+            role: 'combobox',
             '.value': this.focused ? this.inputText : this.freeTextValue || this.label,
             'aria-expanded': this.opened ? 'true' : 'false',
             'aria-haspopup': 'listbox',
@@ -1104,9 +1115,7 @@ let ComboBox = class ComboBox extends FormFieldElement {
      */
     get inputTemplate() {
         return html `<div part="input-wrapper">
-      ${this.renderInput()}
-      ${this.selectionBadgeTemplate}
-      ${this.clearButtonTemplate}
+      ${this.renderInput()} ${this.selectionBadgeTemplate} ${this.clearButtonTemplate}
       <div id="toggle-button" part="button button-toggle">
         <ef-icon part="icon icon-toggle" icon="down"></ef-icon>
       </div>
@@ -1118,10 +1127,7 @@ let ComboBox = class ComboBox extends FormFieldElement {
      * @returns Render template
      */
     render() {
-        return html `
-      ${this.inputTemplate}
-      ${this.popupTemplate}
-    `;
+        return html ` ${this.inputTemplate} ${this.popupTemplate} `;
     }
 };
 __decorate([

package/lib/configuration/elements/configuration.js

@@ -1,10 +1,10 @@
 import { __decorate } from "tslib";
+import { provide } from '@lit-labs/context';
 import { BasicElement, html } from '@refinitiv-ui/core';
 import { customElement } from '@refinitiv-ui/core/decorators/custom-element.js';
 import { state } from '@refinitiv-ui/core/decorators/state.js';
 import { VERSION } from '../../version.js';
-import { efConfig, DEFAULT_CONFIG } from '../helpers/context.js';
-import { provide } from '@lit-labs/context';
+import { DEFAULT_CONFIG, efConfig } from '../helpers/context.js';
 let Configuration = class Configuration extends BasicElement {
     constructor() {
         super(...arguments);

package/lib/counter/index.d.ts

@@ -1,5 +1,5 @@
 import { JSXInterface } from '../jsx';
-import { BasicElement, TemplateResult, CSSResultGroup } from '@refinitiv-ui/core';
+import { BasicElement, CSSResultGroup, TemplateResult } from '@refinitiv-ui/core';
 /**
  * Counter is an item count badge,
  * support maximun display number and notation of large numbers.
@@ -25,9 +25,9 @@ export declare class Counter extends BasicElement {
      */
     set value(value: string);
     /**
-    * The value of counter as string number
-    * @returns {string} counter value
-    */
+     * The value of counter as string number
+     * @returns {string} counter value
+     */
     get value(): string;
     /**
      * Set maximum counter value.

package/lib/counter/index.js

@@ -1,9 +1,9 @@
 import { __decorate } from "tslib";
-import { BasicElement, html, css, WarningNotice } from '@refinitiv-ui/core';
+import { BasicElement, WarningNotice, 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';
-import { truncateDecimal, convertToCompactNotation } from './utils.js';
+import { convertToCompactNotation, truncateDecimal } from './utils.js';
 /**
  * Counter is an item count badge,
  * support maximun display number and notation of large numbers.
@@ -41,9 +41,9 @@ let Counter = class Counter extends BasicElement {
         }
     }
     /**
-    * The value of counter as string number
-    * @returns {string} counter value
-    */
+     * The value of counter as string number
+     * @returns {string} counter value
+     */
     get value() {
         return this._value;
     }
@@ -110,7 +110,9 @@ let Counter = class Counter extends BasicElement {
         const maxValue = this.max ? truncateDecimal(this.max) : Infinity;
         // Format value if value greater than max
         // If max is null, it will show the value
-        return countValue > maxValue ? `${convertToCompactNotation(maxValue)}+` : convertToCompactNotation(countValue);
+        return countValue > maxValue
+            ? `${convertToCompactNotation(maxValue)}+`
+            : convertToCompactNotation(countValue);
     }
     /**
      * A `CSSResultGroup` that will be used
@@ -124,7 +126,7 @@ let Counter = class Counter extends BasicElement {
         display: inline-block;
         position: relative;
       }
-      [part="number"] {
+      [part='number'] {
         text-overflow: ellipsis;
         white-space: nowrap;
         overflow: hidden;

package/lib/datetime-field/index.d.ts

@@ -1,11 +1,11 @@
 import { JSXInterface } from '../jsx';
 import { PropertyValues, TemplateResult } from '@refinitiv-ui/core';
 import { TemplateMap } from '@refinitiv-ui/core/directives/template-map.js';
-import { Locale } from '@refinitiv-ui/utils/date.js';
+import '@refinitiv-ui/phrasebook/locale/en/datetime-field.js';
 import { TranslateDirective } from '@refinitiv-ui/translate';
-import type { NavigationKeys, DateTimeFormatPart } from './types';
+import { Locale } from '@refinitiv-ui/utils/date.js';
 import { TextField } from '../text-field/index.js';
-import '@refinitiv-ui/phrasebook/locale/en/datetime-field.js';
+import type { DateTimeFormatPart, NavigationKeys } from './types';
 /**
  * A form control element for datetime input.
  *
@@ -185,8 +185,7 @@ export declare class DatetimeField extends TextField {
      * @param changedProperties Properties that has changed
      * @returns {void}
      */
-    protected syncInputValue(changedProperties: PropertyValues): void;
-    protected syncInputValue(): void;
+    protected syncInputValue(changedProperties?: PropertyValues): void;
     /**
      * Check if input should be re-validated
      * @param changedProperties Properties that has changed