@refinitiv-ui/elements 6.15.3 → 6.15.4

package/CHANGELOG.md

@@ -3,6 +3,13 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [6.15.4](https://github.com/Refinitiv/refinitiv-ui/compare/@refinitiv-ui/elements@6.15.3...@refinitiv-ui/elements@6.15.4) (2024-02-12)
+
+### Bug Fixes
+
+- **collapse:** update focus style to align with halo design ([#1095](https://github.com/Refinitiv/refinitiv-ui/issues/1095)) ([447dd18](https://github.com/Refinitiv/refinitiv-ui/commit/447dd18ae69ace17762d6d8a861bc061ef272278))
+- **datetime-picker:** cannot be used with label with aria-label, aria-labelledby and label ([#1088](https://github.com/Refinitiv/refinitiv-ui/issues/1088)) ([294ee72](https://github.com/Refinitiv/refinitiv-ui/commit/294ee72c34abeb3febe69d2453fa94260221134a))
+
 ## [6.15.3](https://github.com/Refinitiv/refinitiv-ui/compare/@refinitiv-ui/elements@6.15.2...@refinitiv-ui/elements@6.15.3) (2024-01-22)
 
 ### Bug Fixes

package/lib/collapse/index.js

@@ -183,6 +183,7 @@ let Collapse = class Collapse extends BasicElement {
       >
         <div
           id="header-label"
+          part="header-label"
           role="button"
           tabindex="0"
           aria-expanded="${this.expanded}"

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

@@ -1,4 +1,4 @@
 import '@refinitiv-ui/elements/panel/themes/halo/dark';
 import '@refinitiv-ui/elements/header/themes/halo/dark';
 import '@refinitiv-ui/elements/icon/themes/halo/dark';
-dispatchEvent(new CustomEvent('ef.customStyles.define', { detail: { name: 'ef-collapse', styles: ':host [part=toggle]{transition:.1s;opacity:.5;margin-right:.25em;margin-left:8px;flex-shrink:0;pointer-events:none;opacity:1}:host([expanded]) [part=toggle]{transform:rotate(90deg)}:host [part~=header]{touch-action:manipulation;cursor:pointer;padding:0}:host [part~=header][focused=visible]{background-color:#1429bd}:host [part=header-label]{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;outline:0}@keyframes expand{from{height:0}to{height:var(--target-height)}}@keyframes collapse{from{height:var(--target-height)}to{height:0}}:host [part=content]{animation-duration:.1s;animation-timing-function:ease;text-transform:none}:host(:not([expanded])) [part=content]{height:0;animation-name:collapse}:host(:not([expanded])) [part=toggle]{transform:rotate(0)}:host([expanded]) [part=content]{animation-name:expand}:host [part=content] ef-panel{overflow:auto}:host [part=content] ef-panel:not([spacing]){padding:var(--panel-padding)}:host{text-transform:uppercase}:host [part=header]{text-transform:inherit}:host [part=header]:hover,:host [part~=header][focused=visible],:host([expanded]) [part=header]{color:#fff;background-color:#404040}:host [part=header]:hover[level=\'1\'],:host [part~=header][focused=visible][level=\'1\'],:host([expanded]) [part=header][level=\'1\']{background-color:#5a5a5a}:host [part=header]:hover[level=\'2\'],:host [part~=header][focused=visible][level=\'2\'],:host([expanded]) [part=header][level=\'2\']{background-color:#4d4d4d}:host [part=header]:hover[level=\'4\'],:host [part~=header][focused=visible][level=\'4\'],:host([expanded]) [part=header][level=\'4\']{background-color:#343434}' }}));
+dispatchEvent(new CustomEvent('ef.customStyles.define', { detail: { name: 'ef-collapse', styles: ':host [part=toggle]{transition:.1s;opacity:.5;margin-right:.25em;margin-left:8px;flex-shrink:0;pointer-events:none;opacity:1}:host([expanded]) [part=toggle]{transform:rotate(90deg)}:host [part~=header]{touch-action:manipulation;cursor:pointer;padding:0}:host [part~=header][focused=visible]{background-color:#1429bd;outline:#334bff solid 1px;outline-offset:-1px}:host [part=header-label]{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;outline:0}@keyframes expand{from{height:0}to{height:var(--target-height)}}@keyframes collapse{from{height:var(--target-height)}to{height:0}}:host [part=content]{animation-duration:.1s;animation-timing-function:ease;text-transform:none}:host(:not([expanded])) [part=content]{height:0;animation-name:collapse}:host(:not([expanded])) [part=toggle]{transform:rotate(0)}:host([expanded]) [part=content]{animation-name:expand}:host [part=content] ef-panel{overflow:auto}:host [part=content] ef-panel:not([spacing]){padding:var(--panel-padding)}:host{text-transform:uppercase}:host [part=header]{text-transform:inherit}:host [part=header]:hover,:host [part~=header][focused=visible],:host([expanded]) [part=header]{color:#fff;background-color:#404040}:host [part=header]:hover[level=\'1\'],:host [part~=header][focused=visible][level=\'1\'],:host([expanded]) [part=header][level=\'1\']{background-color:#5a5a5a}:host [part=header]:hover[level=\'2\'],:host [part~=header][focused=visible][level=\'2\'],:host([expanded]) [part=header][level=\'2\']{background-color:#4d4d4d}:host [part=header]:hover[level=\'4\'],:host [part~=header][focused=visible][level=\'4\'],:host([expanded]) [part=header][level=\'4\']{background-color:#343434}' }}));

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

@@ -1,4 +1,4 @@
 import '@refinitiv-ui/elements/panel/themes/halo/light';
 import '@refinitiv-ui/elements/header/themes/halo/light';
 import '@refinitiv-ui/elements/icon/themes/halo/light';
-dispatchEvent(new CustomEvent('ef.customStyles.define', { detail: { name: 'ef-collapse', styles: ':host [part=toggle]{transition:.1s;opacity:.5;margin-right:.25em;margin-left:8px;flex-shrink:0;pointer-events:none;opacity:1}:host([expanded]) [part=toggle]{transform:rotate(90deg)}:host [part~=header]{touch-action:manipulation;cursor:pointer;padding:0}:host [part~=header][focused=visible]{background-color:#1429bd}:host [part=header-label]{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;outline:0}@keyframes expand{from{height:0}to{height:var(--target-height)}}@keyframes collapse{from{height:var(--target-height)}to{height:0}}:host [part=content]{animation-duration:.1s;animation-timing-function:ease;text-transform:none}:host(:not([expanded])) [part=content]{height:0;animation-name:collapse}:host(:not([expanded])) [part=toggle]{transform:rotate(0)}:host([expanded]) [part=content]{animation-name:expand}:host [part=content] ef-panel{overflow:auto}:host [part=content] ef-panel:not([spacing]){padding:var(--panel-padding)}:host{text-transform:uppercase}:host [part=header]{text-transform:inherit}:host [part=header]:hover,:host [part~=header][focused=visible],:host([expanded]) [part=header]{color:#0d0d0d;background-color:#eaeaea}:host [part=header]:hover[level=\'1\'],:host [part~=header][focused=visible][level=\'1\'],:host([expanded]) [part=header][level=\'1\']{background-color:#d1d1d1}:host [part=header]:hover[level=\'2\'],:host [part~=header][focused=visible][level=\'2\'],:host([expanded]) [part=header][level=\'2\']{background-color:#dedede}:host [part=header]:hover[level=\'4\'],:host [part~=header][focused=visible][level=\'4\'],:host([expanded]) [part=header][level=\'4\']{background-color:#f2f2f2}' }}));
+dispatchEvent(new CustomEvent('ef.customStyles.define', { detail: { name: 'ef-collapse', styles: ':host [part=toggle]{transition:.1s;opacity:.5;margin-right:.25em;margin-left:8px;flex-shrink:0;pointer-events:none;opacity:1}:host([expanded]) [part=toggle]{transform:rotate(90deg)}:host [part~=header]{touch-action:manipulation;cursor:pointer;padding:0}:host [part~=header][focused=visible]{background-color:#1429bd;outline:#334bff solid 1px;outline-offset:-1px}:host [part=header-label]{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;outline:0}@keyframes expand{from{height:0}to{height:var(--target-height)}}@keyframes collapse{from{height:var(--target-height)}to{height:0}}:host [part=content]{animation-duration:.1s;animation-timing-function:ease;text-transform:none}:host(:not([expanded])) [part=content]{height:0;animation-name:collapse}:host(:not([expanded])) [part=toggle]{transform:rotate(0)}:host([expanded]) [part=content]{animation-name:expand}:host [part=content] ef-panel{overflow:auto}:host [part=content] ef-panel:not([spacing]){padding:var(--panel-padding)}:host{text-transform:uppercase}:host [part=header]{text-transform:inherit}:host [part=header]:hover,:host [part~=header][focused=visible],:host([expanded]) [part=header]{color:#0d0d0d;background-color:#eaeaea}:host [part=header]:hover[level=\'1\'],:host [part~=header][focused=visible][level=\'1\'],:host([expanded]) [part=header][level=\'1\']{background-color:#d1d1d1}:host [part=header]:hover[level=\'2\'],:host [part~=header][focused=visible][level=\'2\'],:host([expanded]) [part=header][level=\'2\']{background-color:#dedede}:host [part=header]:hover[level=\'4\'],:host [part~=header][focused=visible][level=\'4\'],:host([expanded]) [part=header][level=\'4\']{background-color:#f2f2f2}' }}));

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

@@ -1,4 +1,4 @@
 import '@refinitiv-ui/elements/panel/themes/solar/charcoal';
 import '@refinitiv-ui/elements/header/themes/solar/charcoal';
 import '@refinitiv-ui/elements/icon/themes/solar/charcoal';
-dispatchEvent(new CustomEvent('ef.customStyles.define', { detail: { name: 'ef-collapse', styles: ':host [part=toggle]{transition:.2s;opacity:.5;margin-right:.25em;margin-left:10px;flex-shrink:0;pointer-events:none}:host([expanded]) [part=toggle]{transform:rotate(90deg)}:host [part~=header]{touch-action:manipulation;cursor:pointer;padding:0}:host [part~=header][focused=visible]{background-color:#4d4d55}:host [part=header-label]{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;outline:0}@keyframes expand{from{height:0}to{height:var(--target-height)}}@keyframes collapse{from{height:var(--target-height)}to{height:0}}:host [part=content]{animation-duration:.2s;animation-timing-function:ease}:host(:not([expanded])) [part=content]{height:0;animation-name:collapse}:host(:not([expanded])) [part=toggle]{transform:rotate(0)}:host([expanded]) [part=content]{animation-name:expand}:host [part=content] ef-panel{overflow:auto}:host [part=content] ef-panel:not([spacing]){padding:var(--panel-padding)}' }}));
+dispatchEvent(new CustomEvent('ef.customStyles.define', { detail: { name: 'ef-collapse', styles: ':host [part=toggle]{transition:.2s;opacity:.5;margin-right:.25em;margin-left:10px;flex-shrink:0;pointer-events:none}:host([expanded]) [part=toggle]{transform:rotate(90deg)}:host [part~=header]{touch-action:manipulation;cursor:pointer;padding:0}:host [part~=header][focused=visible]{background-color:#4d4d55;outline:#f93 solid 1px;outline-offset:-1px}:host [part=header-label]{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;outline:0}@keyframes expand{from{height:0}to{height:var(--target-height)}}@keyframes collapse{from{height:var(--target-height)}to{height:0}}:host [part=content]{animation-duration:.2s;animation-timing-function:ease}:host(:not([expanded])) [part=content]{height:0;animation-name:collapse}:host(:not([expanded])) [part=toggle]{transform:rotate(0)}:host([expanded]) [part=content]{animation-name:expand}:host [part=content] ef-panel{overflow:auto}:host [part=content] ef-panel:not([spacing]){padding:var(--panel-padding)}' }}));

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

@@ -1,4 +1,4 @@
 import '@refinitiv-ui/elements/panel/themes/solar/pearl';
 import '@refinitiv-ui/elements/header/themes/solar/pearl';
 import '@refinitiv-ui/elements/icon/themes/solar/pearl';
-dispatchEvent(new CustomEvent('ef.customStyles.define', { detail: { name: 'ef-collapse', styles: ':host [part=toggle]{transition:.2s;opacity:.5;margin-right:.25em;margin-left:10px;flex-shrink:0;pointer-events:none}:host([expanded]) [part=toggle]{transform:rotate(90deg)}:host [part~=header]{touch-action:manipulation;cursor:pointer;padding:0}:host [part~=header][focused=visible]{background-color:#fff}:host [part=header-label]{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;outline:0}@keyframes expand{from{height:0}to{height:var(--target-height)}}@keyframes collapse{from{height:var(--target-height)}to{height:0}}:host [part=content]{animation-duration:.2s;animation-timing-function:ease}:host(:not([expanded])) [part=content]{height:0;animation-name:collapse}:host(:not([expanded])) [part=toggle]{transform:rotate(0)}:host([expanded]) [part=content]{animation-name:expand}:host [part=content] ef-panel{overflow:auto}:host [part=content] ef-panel:not([spacing]){padding:var(--panel-padding)}' }}));
+dispatchEvent(new CustomEvent('ef.customStyles.define', { detail: { name: 'ef-collapse', styles: ':host [part=toggle]{transition:.2s;opacity:.5;margin-right:.25em;margin-left:10px;flex-shrink:0;pointer-events:none}:host([expanded]) [part=toggle]{transform:rotate(90deg)}:host [part~=header]{touch-action:manipulation;cursor:pointer;padding:0}:host [part~=header][focused=visible]{background-color:#fff;outline:#ffb266 solid 1px;outline-offset:-1px}:host [part=header-label]{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;outline:0}@keyframes expand{from{height:0}to{height:var(--target-height)}}@keyframes collapse{from{height:var(--target-height)}to{height:0}}:host [part=content]{animation-duration:.2s;animation-timing-function:ease}:host(:not([expanded])) [part=content]{height:0;animation-name:collapse}:host(:not([expanded])) [part=toggle]{transform:rotate(0)}:host([expanded]) [part=content]{animation-name:expand}:host [part=content] ef-panel{overflow:auto}:host [part=content] ef-panel:not([spacing]){padding:var(--panel-padding)}' }}));

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

@@ -0,0 +1,21 @@
+export declare const TRANSLATION_KEYS: {
+    FROM: string;
+    TO: string;
+};
+export declare const POPUP_POSITION: string[];
+export declare const INPUT_FORMAT: {
+    DATE: string;
+    DATETIME: string;
+    DATETIME_AM_PM: string;
+    DATETIME_SECONDS: string;
+    DATETIME_SECONDS_AM_PM: string;
+};
+export declare const CALENDAR_ID = "calendar";
+export declare const CALENDAR_FROM_ID = "calendar-from";
+export declare const CALENDAR_TO_ID = "calendar-to";
+export declare const TIMEPICKER_ID = "timepicker";
+export declare const TIMEPICKER_FROM_ID = "timepicker-from";
+export declare const TIMEPICKER_TO_ID = "timepicker-to";
+export declare const INPUT_ID = "input";
+export declare const INPUT_FROM_ID = "input-from";
+export declare const INPUT_TO_ID = "input-to";

package/lib/datetime-picker/constants.js

@@ -0,0 +1,28 @@
+export const TRANSLATION_KEYS = {
+    FROM: 'FROM',
+    TO: 'TO'
+};
+export const POPUP_POSITION = [
+    'bottom-start',
+    'top-start',
+    'bottom-end',
+    'top-end',
+    'bottom-middle',
+    'top-middle'
+];
+export const INPUT_FORMAT = {
+    DATE: 'dd-MMM-yyyy',
+    DATETIME: 'dd-MMM-yyyy HH:mm',
+    DATETIME_AM_PM: 'dd-MMM-yyyy hh:mm aaa',
+    DATETIME_SECONDS: 'dd-MMM-yyyy HH:mm:ss',
+    DATETIME_SECONDS_AM_PM: 'dd-MMM-yyyy hh:mm:ss aaa'
+};
+export const CALENDAR_ID = 'calendar';
+export const CALENDAR_FROM_ID = 'calendar-from';
+export const CALENDAR_TO_ID = 'calendar-to';
+export const TIMEPICKER_ID = 'timepicker';
+export const TIMEPICKER_FROM_ID = 'timepicker-from';
+export const TIMEPICKER_TO_ID = 'timepicker-to';
+export const INPUT_ID = 'input';
+export const INPUT_FROM_ID = 'input-from';
+export const INPUT_TO_ID = 'input-to';

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

@@ -64,30 +64,12 @@
           "type": "boolean",
           "default": "false"
         },
-        {
-          "name": "placeholder",
-          "description": "Placeholder to display when no value is set",
-          "type": "string",
-          "default": "\"\""
-        },
         {
           "name": "opened",
           "description": "Toggles the opened state of the list",
           "type": "boolean",
           "default": "false"
         },
-        {
-          "name": "error",
-          "description": "Set error state",
-          "type": "boolean",
-          "default": "false"
-        },
-        {
-          "name": "warning",
-          "description": "Set warning state",
-          "type": "boolean",
-          "default": "false"
-        },
         {
           "name": "input-trigger-disabled",
           "description": "Only open picker panel when calendar icon is clicked.\nClicking on the input will no longer open the picker.",
@@ -110,7 +92,7 @@
           "name": "format",
           "description": "Set the datetime format\nBased on dane-fns datetime formats",
           "type": "string",
-          "default": "\"\""
+          "default": "\"dd-MMM-yyyy\""
         },
         {
           "name": "timepicker",
@@ -140,6 +122,24 @@
           "description": "Set disabled state",
           "type": "boolean",
           "default": "false"
+        },
+        {
+          "name": "error",
+          "description": "Set error state",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "warning",
+          "description": "Set warning state",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "placeholder",
+          "description": "Set placeholder text default depends on format",
+          "type": "string",
+          "default": "\"dd-MMM-yyyy\""
         }
       ],
       "properties": [
@@ -217,13 +217,6 @@
           "type": "boolean",
           "default": "false"
         },
-        {
-          "name": "placeholder",
-          "attribute": "placeholder",
-          "description": "Placeholder to display when no value is set",
-          "type": "string",
-          "default": "\"\""
-        },
         {
           "name": "opened",
           "attribute": "opened",
@@ -231,20 +224,6 @@
           "type": "boolean",
           "default": "false"
         },
-        {
-          "name": "error",
-          "attribute": "error",
-          "description": "Set error state",
-          "type": "boolean",
-          "default": "false"
-        },
-        {
-          "name": "warning",
-          "attribute": "warning",
-          "description": "Set warning state",
-          "type": "boolean",
-          "default": "false"
-        },
         {
           "name": "inputTriggerDisabled",
           "attribute": "input-trigger-disabled",
@@ -271,7 +250,7 @@
           "attribute": "format",
           "description": "Set the datetime format\nBased on dane-fns datetime formats",
           "type": "string",
-          "default": "\"\""
+          "default": "\"dd-MMM-yyyy\""
         },
         {
           "name": "timepicker",
@@ -312,6 +291,27 @@
           "description": "Set disabled state",
           "type": "boolean",
           "default": "false"
+        },
+        {
+          "name": "error",
+          "attribute": "error",
+          "description": "Set error state",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "warning",
+          "attribute": "warning",
+          "description": "Set warning state",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "placeholder",
+          "attribute": "placeholder",
+          "description": "Set placeholder text default depends on format",
+          "type": "string",
+          "default": "\"dd-MMM-yyyy\""
         }
       ],
       "events": [

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

@@ -4,33 +4,33 @@ 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 error state                                  |
-| `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 warning state                                |
-| `weekdaysOnly`         | `weekdays-only`          | `boolean`                        | false   | Only enable weekdays                             |
-| `weekendsOnly`         | `weekends-only`          | `boolean`                        | false   | Only enable weekends                             |
+| 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 error state                                  |
+| `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`                         | "dd-MMM-yyyy" | 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`                         | "dd-MMM-yyyy" | Set placeholder text default depends on format   |
+| `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 warning state                                |
+| `weekdaysOnly`         | `weekdays-only`          | `boolean`                        | false         | Only enable weekdays                             |
+| `weekendsOnly`         | `weekends-only`          | `boolean`                        | false         | Only enable weekends                             |
 
 ## Methods
 

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

@@ -1,13 +1,14 @@
 import { JSXInterface } from '../jsx';
-import { CSSResultGroup, ControlElement, MultiValue, PropertyValues, TemplateResult } from '@refinitiv-ui/core';
-import { TranslateDirective } from '@refinitiv-ui/translate';
+import { CSSResultGroup, FormFieldElement, MultiValue, PropertyValues, TemplateResult } from '@refinitiv-ui/core';
+import '@refinitiv-ui/phrasebook/locale/en/datetime-picker.js';
+import { TranslatePromise } from '@refinitiv-ui/translate';
 import '../calendar/index.js';
 import '../icon/index.js';
 import '../overlay/index.js';
 import '../text-field/index.js';
 import '../time-picker/index.js';
 import type { DatetimePickerDuplex, DatetimePickerFilter } from './types';
-export type { DatetimePickerFilter, DatetimePickerDuplex };
+export type { DatetimePickerDuplex, DatetimePickerFilter };
 /**
  * Control to pick date and time
  *
@@ -22,6 +23,15 @@ export type { DatetimePickerFilter, DatetimePickerDuplex };
  * @attr {boolean} disabled - Set disabled state
  * @prop {boolean} [disabled=false] - Set disabled state
  *
+ * @attr {boolean} error - Set error state
+ * @prop {boolean} [error=false] - Set error state
+ *
+ * @attr {boolean} warning - Set warning state
+ * @prop {boolean} [warning=false] - Set warning state
+ *
+ * @attr {string} placeholder - Set placeholder text default depends on format
+ * @prop {string} [placeholder="dd-MMM-yyyy"] - Set placeholder text default depends on format
+ *
  * @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
@@ -30,7 +40,7 @@ export type { DatetimePickerFilter, DatetimePickerDuplex };
  * @slot from-yyyy-MM-dd - Slot to add custom contents on any date cells of left calendar in `duplex` mode e.g. `from-2023-01-01`. Use `from-yyyy` or `from-yyyy-MM` if the cell is year or month
  * @slot to-yyyy-MM-dd - Slot to add custom contents on any date cells of right calendar in `duplex` mode e.g. `to-2023-01-01`. Use `to-yyyy` or `to-yyyy-MM` if the cell is year or month
  */
-export declare class DatetimePicker extends ControlElement implements MultiValue {
+export declare class DatetimePicker extends FormFieldElement implements MultiValue {
     /**
      * Element version number
      * @returns version number
@@ -50,6 +60,13 @@ export declare class DatetimePicker extends ControlElement implements MultiValue
     private inputSyncing;
     private _min;
     private minDate;
+    /** Aria label for 'to' and 'from' value, resolved based on locale. */
+    private toAriaLabel;
+    private fromAriaLabel;
+    /**
+     * Datetime picker internal translation strings
+     */
+    protected labelTPromise: TranslatePromise;
     /**
      * Set minimum date
      * @param min date
@@ -125,26 +142,10 @@ export declare class DatetimePicker extends ControlElement implements MultiValue
      * Seconds are automatically shown when `hh:mm:ss` time format is provided as a value.
      */
     showSeconds: boolean;
-    private _placeholder;
-    /**
-     * Placeholder to display when no value is set
-     * @param placeholder Placeholder
-     * @default -
-     */
-    set placeholder(placeholder: string);
-    get placeholder(): string;
     /**
      * Toggles the opened state of the list
      */
     opened: boolean;
-    /**
-     * Set error state
-     */
-    error: boolean;
-    /**
-     * Set warning state
-     */
-    warning: boolean;
     /**
      * Only open picker panel when calendar icon is clicked.
      * Clicking on the input will no longer open the picker.
@@ -163,7 +164,7 @@ export declare class DatetimePicker extends ControlElement implements MultiValue
      * Set the datetime format
      * Based on dane-fns datetime formats
      * @param format Date format
-     * @default -
+     * @default dd-MMM-yyyy
      */
     set format(format: string);
     get format(): string;
@@ -199,10 +200,6 @@ export declare class DatetimePicker extends ControlElement implements MultiValue
      * @returns {void}
      */
     validateInput(): void;
-    /**
-     * Used for translations
-     */
-    protected t: TranslateDirective;
     private iconEl;
     private popupEl?;
     private timepickerEl?;
@@ -226,6 +223,11 @@ export declare class DatetimePicker extends ControlElement implements MultiValue
      * @returns {void}
      */
     protected firstUpdated(changedProperties: PropertyValues): void;
+    /**
+     * Perform asynchronous update
+     * @returns promise
+     */
+    protected performUpdate(): Promise<void>;
     /**
      * Overwrite validation method for value
      *
@@ -523,7 +525,7 @@ declare global {
 
   namespace JSX {
     interface IntrinsicElements {
-      'ef-datetime-picker': Partial<DatetimePicker> | JSXInterface.ControlHTMLAttributes<DatetimePicker>;
+      'ef-datetime-picker': Partial<DatetimePicker> | JSXInterface.HTMLAttributes<DatetimePicker>;
     }
   }
 }

package/lib/datetime-picker/index.js

@@ -2,10 +2,11 @@ import { __decorate } from "tslib";
 import inputFormat from 'date-fns/esm/format/index.js';
 import isValid from 'date-fns/esm/isValid/index.js';
 import inputParse from 'date-fns/esm/parse/index.js';
-import { ControlElement, WarningNotice, css, html, nothing } from '@refinitiv-ui/core';
+import { FormFieldElement, WarningNotice, css, html, nothing } from '@refinitiv-ui/core';
 import { customElement } from '@refinitiv-ui/core/decorators/custom-element.js';
 import { property } from '@refinitiv-ui/core/decorators/property.js';
 import { query } from '@refinitiv-ui/core/decorators/query.js';
+import '@refinitiv-ui/phrasebook/locale/en/datetime-picker.js';
 import { TranslatePropertyKey, getLocale, translate } from '@refinitiv-ui/translate';
 import { DateFormat, DateTimeFormat, addMonths, format, isAfter, isBefore, isValidDate, isValidDateTime, parse, subMonths } from '@refinitiv-ui/utils/date.js';
 import '../calendar/index.js';
@@ -15,27 +16,10 @@ import '../overlay/index.js';
 import '../text-field/index.js';
 import '../time-picker/index.js';
 import { VERSION } from '../version.js';
+import { CALENDAR_FROM_ID, CALENDAR_ID, CALENDAR_TO_ID, INPUT_FORMAT, INPUT_FROM_ID, INPUT_ID, INPUT_TO_ID, POPUP_POSITION, TIMEPICKER_FROM_ID, TIMEPICKER_ID, TIMEPICKER_TO_ID, TRANSLATION_KEYS } from './constants.js';
 import { getDateFNSLocale } from './locales.js';
 import { DateTimeSegment, formatToView, getCurrentTime } from './utils.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 = {
-    DATE: 'dd-MMM-yyyy',
-    DATETIME: 'dd-MMM-yyyy HH:mm',
-    DATETIME_AM_PM: 'dd-MMM-yyyy hh:mm aaa',
-    DATETIME_SECONDS: 'dd-MMM-yyyy HH:mm:ss',
-    DATETIME_SECONDS_AM_PM: 'dd-MMM-yyyy hh:mm:ss aaa'
-};
-// public API
-const CALENDAR_ID = 'calendar';
-const CALENDAR_FROM_ID = 'calendar-from';
-const CALENDAR_TO_ID = 'calendar-to';
-const TIMEPICKER_ID = 'timepicker';
-const TIMEPICKER_FROM_ID = 'timepicker-from';
-const TIMEPICKER_TO_ID = 'timepicker-to';
-const INPUT_ID = 'input';
-const INPUT_FROM_ID = 'input-from';
-const INPUT_TO_ID = 'input-to';
 /**
  * Control to pick date and time
  *
@@ -50,6 +34,15 @@ const INPUT_TO_ID = 'input-to';
  * @attr {boolean} disabled - Set disabled state
  * @prop {boolean} [disabled=false] - Set disabled state
  *
+ * @attr {boolean} error - Set error state
+ * @prop {boolean} [error=false] - Set error state
+ *
+ * @attr {boolean} warning - Set warning state
+ * @prop {boolean} [warning=false] - Set warning state
+ *
+ * @attr {string} placeholder - Set placeholder text default depends on format
+ * @prop {string} [placeholder="dd-MMM-yyyy"] - Set placeholder text default depends on format
+ *
  * @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
@@ -58,7 +51,7 @@ const INPUT_TO_ID = 'input-to';
  * @slot from-yyyy-MM-dd - Slot to add custom contents on any date cells of left calendar in `duplex` mode e.g. `from-2023-01-01`. Use `from-yyyy` or `from-yyyy-MM` if the cell is year or month
  * @slot to-yyyy-MM-dd - Slot to add custom contents on any date cells of right calendar in `duplex` mode e.g. `to-2023-01-01`. Use `to-yyyy` or `to-yyyy-MM` if the cell is year or month
  */
-let DatetimePicker = class DatetimePicker extends ControlElement {
+let DatetimePicker = class DatetimePicker extends FormFieldElement {
     constructor() {
         super(...arguments);
         this.lazyRendered = false; /* speed up rendering by not populating popup window on first load */
@@ -68,6 +61,9 @@ let DatetimePicker = class DatetimePicker extends ControlElement {
         this.inputSyncing = true; /* true when inputs and pickers are in sync. False while user types in input */
         this._min = '';
         this.minDate = '';
+        /** Aria label for 'to' and 'from' value, resolved based on locale. */
+        this.toAriaLabel = TRANSLATION_KEYS.TO;
+        this.fromAriaLabel = TRANSLATION_KEYS.FROM;
         this._max = '';
         this.maxDate = '';
         /**
@@ -98,19 +94,10 @@ let DatetimePicker = class DatetimePicker extends ControlElement {
          * Seconds are automatically shown when `hh:mm:ss` time format is provided as a value.
          */
         this.showSeconds = false;
-        this._placeholder = '';
         /**
          * Toggles the opened state of the list
          */
         this.opened = false;
-        /**
-         * Set error state
-         */
-        this.error = false;
-        /**
-         * Set warning state
-         */
-        this.warning = false;
         /**
          * Only open picker panel when calendar icon is clicked.
          * Clicking on the input will no longer open the picker.
@@ -275,26 +262,11 @@ let DatetimePicker = class DatetimePicker extends ControlElement {
     get values() {
         return this._segments.map((segment) => segment.value);
     }
-    /**
-     * 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;
-            this.requestUpdate('placeholder', oldPlaceholder);
-        }
-    }
-    get placeholder() {
-        return this._placeholder || this.format;
-    }
     /**
      * Set the datetime format
      * Based on dane-fns datetime formats
      * @param format Date format
-     * @default -
+     * @default dd-MMM-yyyy
      */
     set format(format) {
         const oldFormat = this._format;
@@ -390,6 +362,9 @@ let DatetimePicker = class DatetimePicker extends ControlElement {
         if (changedProperties.has('_values') || changedProperties.has(TranslatePropertyKey)) {
             this.syncInputValues();
         }
+        if (changedProperties.has('placeholder')) {
+            this.placeholder = this.placeholder || this.format; /* `format` is the default value of `placeholder` */
+        }
         if (this.shouldValidateValue(changedProperties)) {
             this.validateInput();
         }
@@ -405,6 +380,17 @@ let DatetimePicker = class DatetimePicker extends ControlElement {
         this.addEventListener('keydown', this.onKeyDown);
         this.addEventListener('tap', this.onTap);
     }
+    /**
+     * Perform asynchronous update
+     * @returns promise
+     */
+    async performUpdate() {
+        [this.toAriaLabel, this.fromAriaLabel] = await Promise.all([
+            this.labelTPromise(TRANSLATION_KEYS.TO),
+            this.labelTPromise(TRANSLATION_KEYS.FROM)
+        ]);
+        void super.performUpdate();
+    }
     /**
      * Overwrite validation method for value
      *
@@ -1062,9 +1048,17 @@ let DatetimePicker = class DatetimePicker extends ControlElement {
      * @returns template result
      */
     getInputTemplate(id, value = '') {
+        let label = this.inputAriaLabel || undefined;
+        if (id === INPUT_FROM_ID) {
+            label = label ? `${label} ${this.fromAriaLabel}` : this.fromAriaLabel;
+        }
+        else if (id === INPUT_TO_ID) {
+            label = label ? `${label} ${this.toAriaLabel}` : this.toAriaLabel;
+        }
         return html `
       <ef-text-field
         id=${id}
+        aria-label=${label || nothing}
         part="input"
         transparent
         ?disabled="${this.disabled}"
@@ -1141,6 +1135,9 @@ let DatetimePicker = class DatetimePicker extends ControlElement {
         return html ` ${this.inputTemplates} ${this.iconTemplate} ${this.popupTemplate} `;
     }
 };
+__decorate([
+    translate({ mode: 'promise', scope: 'ef-datetime-picker' })
+], DatetimePicker.prototype, "labelTPromise", void 0);
 __decorate([
     property({ type: String })
 ], DatetimePicker.prototype, "min", null);
@@ -1183,18 +1180,9 @@ __decorate([
 __decorate([
     property({ type: Boolean, attribute: 'show-seconds', reflect: true })
 ], DatetimePicker.prototype, "showSeconds", void 0);
-__decorate([
-    property({ type: String })
-], DatetimePicker.prototype, "placeholder", null);
 __decorate([
     property({ type: Boolean, reflect: true })
 ], DatetimePicker.prototype, "opened", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true })
-], DatetimePicker.prototype, "error", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true })
-], DatetimePicker.prototype, "warning", void 0);
 __decorate([
     property({ type: Boolean, attribute: 'input-trigger-disabled' })
 ], DatetimePicker.prototype, "inputTriggerDisabled", void 0);
@@ -1219,9 +1207,6 @@ __decorate([
 __decorate([
     property({ attribute: false })
 ], DatetimePicker.prototype, "views", null);
-__decorate([
-    translate({ mode: 'directive', scope: 'ef-datetime-picker' })
-], DatetimePicker.prototype, "t", void 0);
 __decorate([
     query('[part=icon]', true)
 ], DatetimePicker.prototype, "iconEl", void 0);

package/lib/datetime-picker/locales.js

@@ -12,25 +12,22 @@ import th from 'date-fns/esm/locale/th/index.js';
 import zhCN from 'date-fns/esm/locale/zh-CN/index.js';
 import { DEFAULT_LOCALE, resolveLocale } from '@refinitiv-ui/i18n';
 import { Phrasebook } from '@refinitiv-ui/phrasebook';
+import translations from '@refinitiv-ui/phrasebook/locale/en/datetime-picker.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.
 // match locales against date-fns
 // This will be used with resolveLocale function
-const globals = {};
+// de, en, ja, zh & zh-hant have been defined in Phrasebook already.
 const scope = 'ef-datetime-picker';
-Phrasebook.define('en', scope, globals);
-Phrasebook.define('en-GB', scope, globals);
-Phrasebook.define('de', scope, globals);
-Phrasebook.define('es', scope, globals);
-Phrasebook.define('fr', scope, globals);
-Phrasebook.define('it', scope, globals);
-Phrasebook.define('ja', scope, globals);
-Phrasebook.define('ko', scope, globals);
-Phrasebook.define('pl', scope, globals);
-Phrasebook.define('ru', scope, globals);
-Phrasebook.define('th', scope, globals);
-Phrasebook.define('zh', scope, globals);
+Phrasebook.define('en-GB', scope, translations);
+Phrasebook.define('es', scope, translations);
+Phrasebook.define('fr', scope, translations);
+Phrasebook.define('it', scope, translations);
+Phrasebook.define('ko', scope, translations);
+Phrasebook.define('pl', scope, translations);
+Phrasebook.define('ru', scope, translations);
+Phrasebook.define('th', scope, translations);
 const locales = {
     en: enUS,
     'en-GB': enGB,

package/lib/version.js

@@ -1 +1 @@
-export const VERSION = '6.15.3';
+export const VERSION = '6.15.4';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@refinitiv-ui/elements",
-  "version": "6.15.3",
+  "version": "6.15.4",
   "description": "Element Framework Elements",
   "author": "LSEG",
   "license": "Apache-2.0",
@@ -339,8 +339,8 @@
   },
   "dependencies": {
     "@lit-labs/context": "^0.3.1",
-    "@refinitiv-ui/halo-theme": "^6.7.3",
-    "@refinitiv-ui/solar-theme": "^6.4.6",
+    "@refinitiv-ui/halo-theme": "^6.7.4",
+    "@refinitiv-ui/solar-theme": "^6.4.7",
     "@types/chart.js": "^2.9.31",
     "chart.js": "~2.9.4",
     "d3-interpolate": "^3.0.1",
@@ -351,24 +351,24 @@
   },
   "devDependencies": {
     "@refinitiv-ui/core": "^6.5.5",
-    "@refinitiv-ui/demo-block": "^6.1.20",
-    "@refinitiv-ui/i18n": "^6.0.20",
-    "@refinitiv-ui/phrasebook": "^6.3.8",
+    "@refinitiv-ui/demo-block": "^6.1.21",
+    "@refinitiv-ui/i18n": "^6.0.21",
+    "@refinitiv-ui/phrasebook": "^6.3.9",
     "@refinitiv-ui/test-helpers": "^6.0.15",
-    "@refinitiv-ui/translate": "^6.0.31",
+    "@refinitiv-ui/translate": "^6.0.32",
     "@refinitiv-ui/utils": "^6.3.2",
     "@types/d3-interpolate": "^3.0.1"
   },
   "peerDependencies": {
     "@refinitiv-ui/browser-sparkline": "^1.0.0 || ^2.0.0",
     "@refinitiv-ui/core": "^6.5.5",
-    "@refinitiv-ui/i18n": "^6.0.20",
-    "@refinitiv-ui/phrasebook": "^6.3.8",
-    "@refinitiv-ui/translate": "^6.0.31",
+    "@refinitiv-ui/i18n": "^6.0.21",
+    "@refinitiv-ui/phrasebook": "^6.3.9",
+    "@refinitiv-ui/translate": "^6.0.32",
     "@refinitiv-ui/utils": "^6.3.2"
   },
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "333c86d5797db9ec83f8c77a6dc7314e650a143e"
+  "gitHead": "df44042e5b13d8a38f5626e5d0b30750fd1ec861"
 }