@refinitiv-ui/elements 5.3.4 → 5.8.0

package/lib/datetime-picker/custom-elements.json

@@ -8,12 +8,14 @@
         {
           "name": "min",
           "description": "Set minimum date",
-          "type": "string"
+          "type": "string",
+          "default": "\"\""
         },
         {
           "name": "max",
           "description": "Set maximum date",
-          "type": "string"
+          "type": "string",
+          "default": "\"\""
         },
         {
           "name": "weekdays-only",
@@ -41,12 +43,14 @@
         {
           "name": "value",
           "description": "Current date time value",
-          "type": "string"
+          "type": "string",
+          "default": "\"\""
         },
         {
           "name": "values",
           "description": "Set multiple selected values",
-          "type": "string[]"
+          "type": "string[]",
+          "default": "[]"
         },
         {
           "name": "am-pm",
@@ -63,7 +67,8 @@
         {
           "name": "placeholder",
           "description": "Placeholder to display when no value is set",
-          "type": "string"
+          "type": "string",
+          "default": "\"\""
         },
         {
           "name": "opened",
@@ -104,7 +109,8 @@
         {
           "name": "format",
           "description": "Set the datetime format\nBased on dane-fns datetime formats",
-          "type": "string"
+          "type": "string",
+          "default": "\"\""
         },
         {
           "name": "timepicker",
@@ -120,19 +126,20 @@
         {
           "name": "view",
           "description": "Set the current calendar view.\nAccepted format: 'yyyy-MM'",
-          "type": "string"
+          "type": "string",
+          "default": "\"\""
         },
         {
           "name": "readonly",
           "description": "Set readonly state",
           "type": "boolean",
-          "default": "\"false\""
+          "default": "false"
         },
         {
           "name": "disabled",
           "description": "Set disabled state",
           "type": "boolean",
-          "default": "\"false\""
+          "default": "false"
         }
       ],
       "properties": [
@@ -140,13 +147,15 @@
           "name": "min",
           "attribute": "min",
           "description": "Set minimum date",
-          "type": "string"
+          "type": "string",
+          "default": "\"\""
         },
         {
           "name": "max",
           "attribute": "max",
           "description": "Set maximum date",
-          "type": "string"
+          "type": "string",
+          "default": "\"\""
         },
         {
           "name": "weekdaysOnly",
@@ -180,21 +189,19 @@
           "type": "boolean",
           "default": "false"
         },
-        {
-          "name": "multiple",
-          "type": "boolean"
-        },
         {
           "name": "value",
           "attribute": "value",
           "description": "Current date time value",
-          "type": "string"
+          "type": "string",
+          "default": "\"\""
         },
         {
           "name": "values",
           "attribute": "values",
           "description": "Set multiple selected values",
-          "type": "string[]"
+          "type": "string[]",
+          "default": "[]"
         },
         {
           "name": "amPm",
@@ -214,7 +221,8 @@
           "name": "placeholder",
           "attribute": "placeholder",
           "description": "Placeholder to display when no value is set",
-          "type": "string"
+          "type": "string",
+          "default": "\"\""
         },
         {
           "name": "opened",
@@ -262,7 +270,8 @@
           "name": "format",
           "attribute": "format",
           "description": "Set the datetime format\nBased on dane-fns datetime formats",
-          "type": "string"
+          "type": "string",
+          "default": "\"\""
         },
         {
           "name": "timepicker",
@@ -281,26 +290,28 @@
           "name": "view",
           "attribute": "view",
           "description": "Set the current calendar view.\nAccepted format: 'yyyy-MM'",
-          "type": "string"
+          "type": "string",
+          "default": "\"\""
         },
         {
           "name": "views",
           "description": "Set the current calendar views for duplex mode\nAccepted format: 'yyyy-MM'",
-          "type": "string[]"
+          "type": "string[]",
+          "default": "[]"
         },
         {
           "name": "readonly",
           "attribute": "readonly",
           "description": "Set readonly state",
           "type": "boolean",
-          "default": "\"false\""
+          "default": "false"
         },
         {
           "name": "disabled",
           "attribute": "disabled",
           "description": "Set disabled state",
           "type": "boolean",
-          "default": "\"false\""
+          "default": "false"
         }
       ],
       "events": [
@@ -321,6 +332,24 @@
           "description": "Dispatched when internal view changes"
         }
       ],
+      "slots": [
+        {
+          "name": "header",
+          "description": "Slot to add custom contents at the top of popup"
+        },
+        {
+          "name": "right",
+          "description": "Slot to add custom contents at the right of popup"
+        },
+        {
+          "name": "footer",
+          "description": "Slot to add custom contents at the bottom of popup"
+        },
+        {
+          "name": "left",
+          "description": "Slot to add custom contents at the left of popup"
+        }
+      ],
       "methods": [
         {
           "name": "validateInput",

package/lib/datetime-picker/custom-elements.md

@@ -0,0 +1,57 @@
+# ef-datetime-picker
+
+Control to pick date and time
+
+## Properties
+
+| Property               | Attribute                | Type                             | Default | Description                                      |
+|------------------------|--------------------------|----------------------------------|---------|--------------------------------------------------|
+| `amPm`                 | `am-pm`                  | `boolean`                        | false   | Toggles 12hr time display                        |
+| `disabled`             | `disabled`               | `boolean`                        | false   | Set disabled state                               |
+| `duplex`               | `duplex`                 | `"" \| "consecutive" \| "split"` | null    | Display two calendar pickers.                    |
+| `error`                | `error`                  | `boolean`                        | false   | Set state to error                               |
+| `filter`               |                          | `DatetimePickerFilter \| null`   | null    | Custom filter, used for enabling/disabling certain dates |
+| `firstDayOfWeek`       | `first-day-of-week`      | `number \| undefined`            |         | Set the first day of the week.<br />0 - for Sunday, 6 - for Saturday |
+| `format`               | `format`                 | `string`                         | ""      | Set the datetime format<br />Based on dane-fns datetime formats |
+| `inputDisabled`        | `input-disabled`         | `boolean`                        | false   | Disable input part of the picker                 |
+| `inputTriggerDisabled` | `input-trigger-disabled` | `boolean`                        | false   | Only open picker panel when calendar icon is clicked.<br />Clicking on the input will no longer open the picker. |
+| `max`                  | `max`                    | `string`                         | ""      | Set maximum date                                 |
+| `min`                  | `min`                    | `string`                         | ""      | Set minimum date                                 |
+| `opened`               | `opened`                 | `boolean`                        | false   | Toggles the opened state of the list             |
+| `placeholder`          | `placeholder`            | `string`                         | ""      | Placeholder to display when no value is set      |
+| `popupDisabled`        | `popup-disabled`         | `boolean`                        | false   | Disable the popup                                |
+| `range`                | `range`                  | `boolean`                        | false   | Set to switch to range select mode               |
+| `readonly`             | `readonly`               | `boolean`                        | false   | Set readonly state                               |
+| `showSeconds`          | `show-seconds`           | `boolean`                        | false   | Flag to show seconds time segment in display.<br />Seconds are automatically shown when `hh:mm:ss` time format is provided as a value. |
+| `timepicker`           | `timepicker`             | `boolean`                        | false   | Toggle to display the time picker                |
+| `value`                | `value`                  | `string`                         | ""      | Current date time value                          |
+| `values`               | `values`                 | `string[]`                       | []      | Set multiple selected values                     |
+| `view`                 | `view`                   | `string`                         | ""      | Set the current calendar view.<br />Accepted format: 'yyyy-MM' |
+| `views`                |                          | `string[]`                       | []      | Set the current calendar views for duplex mode<br />Accepted format: 'yyyy-MM' |
+| `warning`              | `warning`                | `boolean`                        | false   | Set state to warning                             |
+| `weekdaysOnly`         | `weekdays-only`          | `boolean`                        | false   | Only enable weekdays                             |
+| `weekendsOnly`         | `weekends-only`          | `boolean`                        | false   | Only enable weekends                             |
+
+## Methods
+
+| Method          | Type       | Description                                      |
+|-----------------|------------|--------------------------------------------------|
+| `validateInput` | `(): void` | Validates the input, marking the element as invalid if its value does not meet the validation criteria. |
+
+## Events
+
+| Event            | Description                                      |
+|------------------|--------------------------------------------------|
+| `error-changed`  | Dispatched when error state changes              |
+| `opened-changed` | Dispatched when when opened attribute changes internally |
+| `value-changed`  | Dispatched when value changes                    |
+| `view-changed`   | Dispatched when internal view changes            |
+
+## Slots
+
+| Name     | Description                                      |
+|----------|--------------------------------------------------|
+| `footer` | Slot to add custom contents at the bottom of popup |
+| `header` | Slot to add custom contents at the top of popup  |
+| `left`   | Slot to add custom contents at the left of popup |
+| `right`  | Slot to add custom contents at the right of popup |

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

@@ -1,13 +1,13 @@
 import { JSXInterface } from '../jsx';
-import { ControlElement, TemplateResult, MultiValue, PropertyValues, CSSResult } from '@refinitiv-ui/core';
-import '../calendar';
-import '../icon';
-import '../overlay';
-import '../text-field';
-import '../time-picker';
-import { DatetimePickerDuplex, DatetimePickerFilter } from './types';
+import { ControlElement, TemplateResult, MultiValue, PropertyValues, CSSResultGroup } from '@refinitiv-ui/core';
+import type { DatetimePickerDuplex, DatetimePickerFilter } from './types';
+import '../calendar/index.js';
+import '../icon/index.js';
+import '../overlay/index.js';
+import '../text-field/index.js';
+import '../time-picker/index.js';
 import { TranslateDirective } from '@refinitiv-ui/translate';
-export { DatetimePickerFilter, DatetimePickerDuplex };
+export type { DatetimePickerFilter, DatetimePickerDuplex };
 /**
  * Control to pick date and time
  *
@@ -22,10 +22,10 @@ export { DatetimePickerFilter, DatetimePickerDuplex };
  * @attr {boolean} disabled - Set disabled state
  * @prop {boolean} [disabled=false] - Set disabled state
  *
- * @slots header - Header slot
- * @slots right - Right slot
- * @slots footer - Footer slot
- * @slots left - Left slot
+ * @slot header - Slot to add custom contents at the top of popup
+ * @slot right - Slot to add custom contents at the right of popup
+ * @slot footer - Slot to add custom contents at the bottom of popup
+ * @slot left - Slot to add custom contents at the left of popup
  */
 export declare class DatetimePicker extends ControlElement implements MultiValue {
     /**
@@ -34,12 +34,12 @@ export declare class DatetimePicker extends ControlElement implements MultiValue
      */
     static get version(): string;
     /**
-     * A `CSSResult` that will be used
+     * A `CSSResultGroup` that will be used
      * to style the host, slotted children
      * and the internal template of the element.
      * @return CSS template
      */
-    static get styles(): CSSResult | CSSResult[];
+    static get styles(): CSSResultGroup;
     private lazyRendered;
     private calendarValues;
     private timepickerValues;
@@ -50,6 +50,7 @@ export declare class DatetimePicker extends ControlElement implements MultiValue
     /**
     * Set minimum date
     * @param min date
+    * @default -
     */
     set min(min: string);
     get min(): string;
@@ -58,6 +59,7 @@ export declare class DatetimePicker extends ControlElement implements MultiValue
     /**
     * Set maximum date
     * @param max date
+    * @default -
     */
     set max(max: string);
     get max(): string;
@@ -90,10 +92,14 @@ export declare class DatetimePicker extends ControlElement implements MultiValue
     * @param multiple Multiple
     */
     set multiple(multiple: boolean);
+    /**
+    * @ignore
+    */
     get multiple(): boolean;
     /**
     * Current date time value
     * @param value Calendar value
+    * @default -
     */
     set value(value: string);
     get value(): string;
@@ -103,6 +109,7 @@ export declare class DatetimePicker extends ControlElement implements MultiValue
     * Set multiple selected values
     * @param values Values to set
     * @type {string[]}
+    * @default []
     */
     set values(values: string[]);
     get values(): string[];
@@ -119,6 +126,7 @@ export declare class DatetimePicker extends ControlElement implements MultiValue
     /**
     * Placeholder to display when no value is set
     * @param placeholder Placeholder
+    * @default -
     */
     set placeholder(placeholder: string);
     get placeholder(): string;
@@ -152,6 +160,7 @@ export declare class DatetimePicker extends ControlElement implements MultiValue
     * Set the datetime format
     * Based on dane-fns datetime formats
     * @param format Date format
+    * @default -
     */
     set format(format: string);
     get format(): string;
@@ -168,6 +177,7 @@ export declare class DatetimePicker extends ControlElement implements MultiValue
     * Set the current calendar view.
     * Accepted format: 'yyyy-MM'
     * @param view view date
+    * @default -
     */
     set view(view: string);
     get view(): string;
@@ -177,6 +187,7 @@ export declare class DatetimePicker extends ControlElement implements MultiValue
     * Accepted format: 'yyyy-MM'
     * @param views view dates
     * @type {string[]}
+    * @default []
     */
     set views(views: string[]);
     get views(): string[];

package/lib/datetime-picker/index.js

@@ -1,22 +1,23 @@
-var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-import { ControlElement, html, css, customElement, property, query, ifDefined, WarningNotice } from '@refinitiv-ui/core';
-import '../calendar';
-import '../icon';
-import '../overlay';
-import '../text-field';
-import '../time-picker';
-import { getDateFNSLocale } from './locales';
+import { __decorate } from "tslib";
+import { ControlElement, html, css, WarningNotice } from '@refinitiv-ui/core';
+import { customElement } from '@refinitiv-ui/core/lib/decorators/custom-element.js';
+import { property } from '@refinitiv-ui/core/lib/decorators/property.js';
+import { query } from '@refinitiv-ui/core/lib/decorators/query.js';
+import { ifDefined } from '@refinitiv-ui/core/lib/directives/if-defined.js';
+import { VERSION } from '../version.js';
+import '../calendar/index.js';
+import '../icon/index.js';
+import '../overlay/index.js';
+import '../text-field/index.js';
+import '../time-picker/index.js';
 import { translate, getLocale, TranslatePropertyKey } from '@refinitiv-ui/translate';
-import { format as inputFormat, parse as inputParse, isValid } from 'date-fns';
-import { addMonths, subMonths, isAfter, isBefore, isValidDate, isValidDateTime, DateFormat, DateTimeFormat, parse, format } from '@refinitiv-ui/utils';
-import { DateTimeSegment, formatToView, getCurrentTime } from './utils';
-import { preload } from '../icon';
-import { VERSION } from '../';
+import { getDateFNSLocale } from './locales.js';
+import inputFormat from 'date-fns/esm/format/index.js';
+import inputParse from 'date-fns/esm/parse/index.js';
+import isValid from 'date-fns/esm/isValid/index.js';
+import { addMonths, subMonths, isAfter, isBefore, isValidDate, isValidDateTime, DateFormat, DateTimeFormat, parse, format } from '@refinitiv-ui/utils/lib/date.js';
+import { DateTimeSegment, formatToView, getCurrentTime } from './utils.js';
+import { preload } from '../icon/index.js';
 preload('calendar', 'down', 'left', 'right'); /* preload calendar icons for faster loading */
 const POPUP_POSITION = ['bottom-start', 'top-start', 'bottom-end', 'top-end', 'bottom-middle', 'top-middle'];
 const INPUT_FORMAT = {
@@ -40,10 +41,10 @@ const INPUT_FORMAT = {
  * @attr {boolean} disabled - Set disabled state
  * @prop {boolean} [disabled=false] - Set disabled state
  *
- * @slots header - Header slot
- * @slots right - Right slot
- * @slots footer - Footer slot
- * @slots left - Left slot
+ * @slot header - Slot to add custom contents at the top of popup
+ * @slot right - Slot to add custom contents at the right of popup
+ * @slot footer - Slot to add custom contents at the bottom of popup
+ * @slot left - Slot to add custom contents at the left of popup
  */
 let DatetimePicker = class DatetimePicker extends ControlElement {
     constructor() {
@@ -132,7 +133,7 @@ let DatetimePicker = class DatetimePicker extends ControlElement {
         return VERSION;
     }
     /**
-     * A `CSSResult` that will be used
+     * A `CSSResultGroup` that will be used
      * to style the host, slotted children
      * and the internal template of the element.
      * @return CSS template
@@ -181,6 +182,7 @@ let DatetimePicker = class DatetimePicker extends ControlElement {
     /**
     * Set minimum date
     * @param min date
+    * @default -
     */
     set min(min) {
         if (!this.isValidValue(min)) {
@@ -191,7 +193,7 @@ let DatetimePicker = class DatetimePicker extends ControlElement {
         if (oldMin !== min) {
             this._min = min;
             this.minDate = min ? format(parse(min), DateFormat.yyyyMMdd) : '';
-            void this.requestUpdate('min', oldMin);
+            this.requestUpdate('min', oldMin);
         }
     }
     get min() {
@@ -200,6 +202,7 @@ let DatetimePicker = class DatetimePicker extends ControlElement {
     /**
     * Set maximum date
     * @param max date
+    * @default -
     */
     set max(max) {
         if (!this.isValidValue(max)) {
@@ -210,7 +213,7 @@ let DatetimePicker = class DatetimePicker extends ControlElement {
         if (oldMax !== max) {
             this._max = max;
             this.maxDate = max ? format(parse(max), DateFormat.yyyyMMdd) : '';
-            void this.requestUpdate('max', oldMax);
+            this.requestUpdate('max', oldMax);
         }
     }
     get max() {
@@ -225,12 +228,16 @@ let DatetimePicker = class DatetimePicker extends ControlElement {
     set multiple(multiple) {
         new WarningNotice('multiple is not currently supported').show();
     }
+    /**
+    * @ignore
+    */
     get multiple() {
         return false;
     }
     /**
     * Current date time value
     * @param value Calendar value
+    * @default -
     */
     set value(value) {
         this.values = value ? [value] : [];
@@ -242,12 +249,14 @@ let DatetimePicker = class DatetimePicker extends ControlElement {
     * Set multiple selected values
     * @param values Values to set
     * @type {string[]}
+    * @default []
     */
     set values(values) {
         const oldValues = this._values;
         if (String(oldValues) !== String(values)) {
             this._values = values;
-            void this.requestUpdate('_values', oldValues); /* segments are populated in update */
+            this.valuesToSegments();
+            this.requestUpdate('_values', oldValues); /* segments are populated in update */
         }
     }
     get values() {
@@ -256,12 +265,13 @@ let DatetimePicker = class DatetimePicker extends ControlElement {
     /**
     * Placeholder to display when no value is set
     * @param placeholder Placeholder
+    * @default -
     */
     set placeholder(placeholder) {
         const oldPlaceholder = this._placeholder;
         if (oldPlaceholder !== placeholder) {
             this._placeholder = placeholder;
-            void this.requestUpdate('placeholder', oldPlaceholder);
+            this.requestUpdate('placeholder', oldPlaceholder);
         }
     }
     get placeholder() {
@@ -271,12 +281,13 @@ let DatetimePicker = class DatetimePicker extends ControlElement {
     * Set the datetime format
     * Based on dane-fns datetime formats
     * @param format Date format
+    * @default -
     */
     set format(format) {
         const oldFormat = this._format;
         if (oldFormat !== format) {
             this._format = format;
-            void this.requestUpdate('format', oldFormat);
+            this.requestUpdate('format', oldFormat);
         }
     }
     get format() {
@@ -290,6 +301,7 @@ let DatetimePicker = class DatetimePicker extends ControlElement {
     * Set the current calendar view.
     * Accepted format: 'yyyy-MM'
     * @param view view date
+    * @default -
     */
     set view(view) {
         this.views = view ? [view] : [];
@@ -302,13 +314,14 @@ let DatetimePicker = class DatetimePicker extends ControlElement {
     * Accepted format: 'yyyy-MM'
     * @param views view dates
     * @type {string[]}
+    * @default []
     */
     set views(views) {
         const oldViews = this._views;
         views = this.filterAndWarnInvalidViews(views);
         if (oldViews.toString() !== views.toString()) {
             this._views = views;
-            void this.requestUpdate('views', oldViews);
+            this.requestUpdate('views', oldViews);
         }
     }
     get views() {
@@ -345,9 +358,6 @@ let DatetimePicker = class DatetimePicker extends ControlElement {
      * @returns {void}
      */
     update(changedProperties) {
-        if (changedProperties.has('_values')) {
-            this.valuesToSegments();
-        }
         if (changedProperties.has('opened') && this.opened) {
             this.lazyRendered = true;
         }
@@ -383,7 +393,9 @@ let DatetimePicker = class DatetimePicker extends ControlElement {
         if (value === '') {
             return true;
         }
-        return this.timepicker
+        // Need to check for the attribute to cover the case when
+        // timepicker and value attributes are set
+        return (this.timepicker || this.hasAttribute('timepicker'))
             ? isValidDateTime(value)
             : isValidDate(value, DateFormat.yyyyMMdd);
     }
@@ -602,7 +614,6 @@ let DatetimePicker = class DatetimePicker extends ControlElement {
     notifyValuesChange(values) {
         if (this.values.toString() !== values.toString()) {
             this.values = values;
-            this.valuesToSegments(); /* need to be here to get correct value synchronously */
             this.notifyPropertyChange('value', this.value);
         }
     }
@@ -776,7 +787,7 @@ let DatetimePicker = class DatetimePicker extends ControlElement {
             const inputValues = [...this.inputValues];
             inputValues[index] = formattedValue;
             this.inputValues = inputValues;
-            void this.requestUpdate();
+            this.requestUpdate();
         }
     }
     /**

package/lib/datetime-picker/locales.d.ts

@@ -1,4 +1,4 @@
-import { Locale } from 'date-fns';
+import type { Locale } from 'date-fns';
 /**
  * Get date-fns locale or default locale
  * @param [locale] BCP47 locale tag

package/lib/datetime-picker/locales.js

@@ -1,6 +1,17 @@
 import { Phrasebook } from '@refinitiv-ui/phrasebook';
 import { resolveLocale, DEFAULT_LOCALE } from '@refinitiv-ui/i18n';
-import { enGB, enUS, de, es, fr, it, ja, ko, pl, ru, th, zhCN } from 'date-fns/esm/locale';
+import enGB from 'date-fns/esm/locale/en-GB/index.js';
+import enUS from 'date-fns/esm/locale/en-US/index.js';
+import de from 'date-fns/esm/locale/de/index.js';
+import es from 'date-fns/esm/locale/es/index.js';
+import fr from 'date-fns/esm/locale/fr/index.js';
+import it from 'date-fns/esm/locale/it/index.js';
+import ja from 'date-fns/esm/locale/ja/index.js';
+import ko from 'date-fns/esm/locale/ko/index.js';
+import pl from 'date-fns/esm/locale/pl/index.js';
+import ru from 'date-fns/esm/locale/ru/index.js';
+import th from 'date-fns/esm/locale/th/index.js';
+import zhCN from 'date-fns/esm/locale/zh-CN/index.js';
 // This file is a transition between using date-fns and Intl object to format dates
 // As of now, use Phraseboook to just resolve languages and locales
 // and match against the date-fns locales.

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

@@ -4,4 +4,4 @@ import '@refinitiv-ui/elements/lib/overlay/themes/solar/charcoal';
 import '@refinitiv-ui/elements/lib/time-picker/themes/solar/charcoal';
 import '@refinitiv-ui/elements/lib/text-field/themes/solar/charcoal';
 
-elf.customStyles.define('ef-datetime-picker', ':host{display:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;text-align:left;font-family:inherit;font-size:13rem;font-weight:400;height:23px;width:140px;max-width:100%;padding:0 5px;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;background-color:#000;border:1px solid #4a4a52}:host([error]),:host([error][warning]){border:1px solid #f5475b}:host([error][disabled]),:host([error][warning][disabled]){color:rgba(194,194,194,.6);border:1px solid rgba(245,71,91,.6)}:host([focused]){background-size:100% 2px,100% 1px!important;background-position:center bottom!important;border-color:#f93;border-style:dotted}:host [part=time-picker]{margin:0}:host [part=timepicker-wrapper]{box-shadow:inset 0 1px 0 0 #0a0a0a;box-shadow:none;padding:0 3px 3px}:host([range]) ef-text-field{text-align:center}:host [part=input]{color:inherit}:host [part=icon]{color:#e2e2e2}:host [part=input-separator]{line-height:23px;background:#c2c2c2;width:.4em;margin:auto 0;height:1px}: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):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):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):hover),:host([error][warning]:not([focused]):not([focused]):not(:focus):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):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):hover){border:1px solid #a7a45a}:host [part=calendar]{width:224px;padding:4px}:host [part=list]{margin-top:1px}:host([range]){width:280px}');
+elf.customStyles.define('ef-datetime-picker', ':host{display:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;text-align:left;font-family:inherit;font-size:13rem;font-weight:400;height:23px;width:140px;max-width:100%;padding:0 5px;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;background-color:#000;border:1px solid #4a4a52}:host([error]),:host([error][warning]){border:1px solid #f5475b}:host([error][disabled]),:host([error][warning][disabled]){color:rgba(194,194,194,.6);border:1px solid rgba(245,71,91,.6)}:host([focused]){background-size:100% 2px,100% 1px!important;background-position:center bottom!important;border-color:#f93;border-style:dotted}:host [part=time-picker]{margin:0}:host [part=timepicker-wrapper]{box-shadow:inset 0 1px 0 0 #0a0a0a;box-shadow:none;padding:0 3px 3px}:host([range]) ef-text-field{text-align:center}:host [part=input]{color:inherit}:host [part=icon]{color:#e2e2e2}:host [part=input-separator]{line-height:23px;background:#c2c2c2;width:.4em;margin:auto 0;height:1px}: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}:host [part=calendar]{width:224px;padding:4px}:host [part=list]{margin-top:1px}:host([range]){width:280px}');

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

@@ -4,4 +4,4 @@ import '@refinitiv-ui/elements/lib/overlay/themes/solar/pearl';
 import '@refinitiv-ui/elements/lib/time-picker/themes/solar/pearl';
 import '@refinitiv-ui/elements/lib/text-field/themes/solar/pearl';
 
-elf.customStyles.define('ef-datetime-picker', ':host{display:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;text-align:left;font-family:inherit;font-size:13rem;font-weight:400;height:23px;width:140px;max-width:100%;padding:0 5px;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;background-color:#fff;border:1px solid #a9afba}:host([error]),:host([error][warning]){border:1px solid #d94255}:host([error][disabled]),:host([error][warning][disabled]){color:rgba(72,72,72,.6);border:1px solid rgba(217,66,85,.6)}:host([focused]){background-size:100% 2px,100% 1px!important;background-position:center bottom!important;border-color:#ffb266;border-style:dotted}:host [part=time-picker]{margin:0}:host [part=timepicker-wrapper]{box-shadow:inset 0 1px 0 0 #d5d8db;box-shadow:none;padding:0 3px 3px}:host([range]) ef-text-field{text-align:center}:host [part=input]{color:inherit}:host [part=icon]{color:#acafb5}:host [part=input-separator]{line-height:23px;background:#484848;width:.4em;margin:auto 0;height:1px}: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):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):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):hover),:host([error][warning]:not([focused]):not([focused]):not(:focus):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):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):hover){border:1px solid #a7a45a}:host [part=calendar]{width:224px;padding:4px}:host [part=list]{margin-top:1px}:host([range]){width:280px}');
+elf.customStyles.define('ef-datetime-picker', ':host{display:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;text-align:left;font-family:inherit;font-size:13rem;font-weight:400;height:23px;width:140px;max-width:100%;padding:0 5px;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;background-color:#fff;border:1px solid #a9afba}:host([error]),:host([error][warning]){border:1px solid #d94255}:host([error][disabled]),:host([error][warning][disabled]){color:rgba(72,72,72,.6);border:1px solid rgba(217,66,85,.6)}:host([focused]){background-size:100% 2px,100% 1px!important;background-position:center bottom!important;border-color:#ffb266;border-style:dotted}:host [part=time-picker]{margin:0}:host [part=timepicker-wrapper]{box-shadow:inset 0 1px 0 0 #d5d8db;box-shadow:none;padding:0 3px 3px}:host([range]) ef-text-field{text-align:center}:host [part=input]{color:inherit}:host [part=icon]{color:#acafb5}:host [part=input-separator]{line-height:23px;background:#484848;width:.4em;margin:auto 0;height:1px}: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}:host [part=calendar]{width:224px;padding:4px}:host [part=list]{margin-top:1px}:host([range]){width:280px}');