@refinitiv-ui/elements 0.0.0-dev.2589386127.1 → 0.0.0-dev.3949727059.1

package/CHANGELOG.md

@@ -3,6 +3,59 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [6.1.0](https://github.com/Refinitiv/refinitiv-ui/compare/@refinitiv-ui/elements@6.0.4...@refinitiv-ui/elements@6.1.0) (2022-08-16)
+
+
+### Bug Fixes
+
+* **datetime-picker:** parse invalid value to date object ([#422](https://github.com/Refinitiv/refinitiv-ui/issues/422)) ([dd86b73](https://github.com/Refinitiv/refinitiv-ui/commit/dd86b73fecd03518d2dae78174b91b0ef50fc913))
+* **overlay:** Tab does not work with slotted elements ([16f4b60](https://github.com/Refinitiv/refinitiv-ui/commit/16f4b60e9b840d3b7d225f3d61f15e017dc17855))
+* **radio-button:** check-changed is not fired on arrow keys ([77d7407](https://github.com/Refinitiv/refinitiv-ui/commit/77d7407883ba77e7b07bdaa8483fc49d35c76c14))
+
+
+### Features
+
+* **interactive-chart:** add disabledLegend option to hide data legend ([#421](https://github.com/Refinitiv/refinitiv-ui/issues/421)) ([32a6d7b](https://github.com/Refinitiv/refinitiv-ui/commit/32a6d7b1889597a7ae804edbb08fc95fc5c5a04e))
+
+
+
+
+
+## [6.0.4](https://github.com/Refinitiv/refinitiv-ui/compare/@refinitiv-ui/elements@6.0.3...@refinitiv-ui/elements@6.0.4) (2022-08-02)
+
+
+### Bug Fixes
+
+* **calendar:** day cell selected style not work with disabled state ([#410](https://github.com/Refinitiv/refinitiv-ui/issues/410)) ([1d9c931](https://github.com/Refinitiv/refinitiv-ui/commit/1d9c931b4d625b93c6fd60b780060ff2f03d9fc9))
+* **interactive-chart:** show dash text when legend hided ([#402](https://github.com/Refinitiv/refinitiv-ui/issues/402)) ([93631ca](https://github.com/Refinitiv/refinitiv-ui/commit/93631cac4db0623f05c333b53f67728ace953039))
+* **tab-bar:** notify value change event on pressing an arrow key ([#398](https://github.com/Refinitiv/refinitiv-ui/issues/398)) ([e55d152](https://github.com/Refinitiv/refinitiv-ui/commit/e55d152491b97c8763dc628ef7d1c013e4c3f01a))
+
+
+
+
+
+## [6.0.3](https://github.com/Refinitiv/refinitiv-ui/compare/@refinitiv-ui/elements@6.0.2...@refinitiv-ui/elements@6.0.3) (2022-07-20)
+
+**Note:** Version bump only for package @refinitiv-ui/elements
+
+
+
+
+
+## [6.0.2](https://github.com/Refinitiv/refinitiv-ui/compare/@refinitiv-ui/elements@6.0.1...@refinitiv-ui/elements@6.0.2) (2022-07-19)
+
+
+### Bug Fixes
+
+* **accordion:** The element should interact only with its direct children ([#378](https://github.com/Refinitiv/refinitiv-ui/issues/378)) ([f8e11d3](https://github.com/Refinitiv/refinitiv-ui/commit/f8e11d391839cb1e53aad3ec2682a089766851ff))
+* **list:** item should not receive focus when click ([#272](https://github.com/Refinitiv/refinitiv-ui/issues/272)) ([e2293e3](https://github.com/Refinitiv/refinitiv-ui/commit/e2293e37126a446d5c1d16be1e5eb503425534f3))
+* **tab-bar:** resize callback is not fired when a new tab has been added ([#389](https://github.com/Refinitiv/refinitiv-ui/issues/389)) ([13408e1](https://github.com/Refinitiv/refinitiv-ui/commit/13408e15302a19cd614fdd5f1b4af9be5f1881bd))
+* use `setAttribute` instead of `AriaMixins`  for aria attributes ([#327](https://github.com/Refinitiv/refinitiv-ui/issues/327)) ([09f91fa](https://github.com/Refinitiv/refinitiv-ui/commit/09f91fafdef57fa26722ccf0e19f586833405cbb))
+
+
+
+
+
 ## [6.0.1](https://github.com/Refinitiv/refinitiv-ui/compare/@refinitiv-ui/elements@6.0.0...@refinitiv-ui/elements@6.0.1) (2022-06-20)
 
 

package/lib/calendar/index.js

@@ -156,7 +156,7 @@ let Calendar = class Calendar extends ControlElement {
       [part~=cell-content]:not([tabindex]) {
         pointer-events: none;
       }
-      [part~=selection] {
+      [part~=selectable] {
         cursor: pointer;
       }
     `;
@@ -307,7 +307,7 @@ let Calendar = class Calendar extends ControlElement {
      * @returns button HTML date button element or null
      */
     getDateButtonByIndex(index) {
-        const elements = Array.from(this.renderRoot.querySelectorAll('[part~=cell] > [part~=selection]'));
+        const elements = Array.from(this.renderRoot.querySelectorAll('[part~=cell] > [part~=selectable]'));
         return elements.find((element) => this.isDateButton(element) && String(element.index) === String(index));
     }
     /**
@@ -315,7 +315,7 @@ let Calendar = class Calendar extends ControlElement {
      * @returns button HTML date button element or null
      */
     get activeDateButton() {
-        return this.renderRoot.querySelector('[part~=cell][active] > [part~=selection]');
+        return this.renderRoot.querySelector('[part~=cell][active] > [part~=selectable]');
     }
     /**
      * Return true if passed target is HTML
@@ -1118,7 +1118,8 @@ let Calendar = class Calendar extends ControlElement {
      * @returns template result
      */
     renderCell(cell) {
-        const isSelectable = cell.value !== undefined && !cell.disabled;
+        const isSelection = cell.value !== undefined;
+        const isSelectable = isSelection && !cell.disabled;
         return html `<div
       role="gridcell"
       part="cell ${cell.view}"
@@ -1140,7 +1141,7 @@ let Calendar = class Calendar extends ControlElement {
             value: parse(cell.value),
             view: this.renderView
         }) : undefined)}"
-             part="cell-content${isSelectable ? ' selection' : ''}"
+             part="cell-content${isSelection ? ' selection' : ''}${isSelectable ? ' selectable' : ''}"
              .value=${cell.value}
              .index=${cell.index}>${cell.text}</div>
     </div>`;

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

@@ -1,3 +1,3 @@
 import '@refinitiv-ui/elements/button/themes/halo/dark';
 
-elf.customStyles.define('ef-calendar', ':host{font-style:normal;font-variant:normal;font-weight:400;line-height:normal;text-align:left;text-indent:0;text-shadow:none;text-transform:none;white-space:normal;word-break:normal;word-spacing:normal;word-wrap:normal;outline:0;font-size:12rem;color:#ccc;min-width:196px;-webkit-user-select:none;-moz-user-select:none;user-select:none;background:#262626;padding:4px 3px}:host [part=navigation]{padding-bottom:3px}:host [part=btn-next],:host [part=btn-prev],:host [part=btn-view]{margin:0}:host [part=btn-view]{background:0 0;margin-left:16px;border:none;color:inherit;padding:0}:host [part=btn-view]:hover,:host [part=btn-view][focused=visible]{opacity:.8}:host [part=table]{width:100%;background:#262626}:host [part~=row]:not(:first-of-type) [part~=cell] [part~=cell-content]{top:1px}:host [part~=day-name-row]{background-color:#333}:host [part~=cell][disabled]{opacity:.4}:host [part~=cell][today]{color:#fff}:host [part~=cell][today] [part~=selection]{background:#404040}:host [part~=cell]:not([selected]):not([range]):not([disabled])[idle] [part~=selection]{opacity:.6}:host [part~=cell]:not([today]):not([range]) [part~=selection]:hover{color:#fff}:host [part~=cell]:not(:active) [part~=selection]:hover{border-color:#1429bd}:host [part~=cell]:not([today]):not([range]):not(:active) [part~=selection]:hover,:host [part~=cell][today][selected] [part~=selection]:hover{background:#1429bd}:host [part~=cell]:not([selected]):not([range]):not([today]) [part~=selection]:hover{background:#1429bd}:host [part~=cell]:not([selected]):not([range]):not([today]):not(:active) [part~=selection]:hover{border-color:#1429bd}:host [part~=cell]:not([selected]):not([range]):not([today]):active [part~=selection]{color:#fff;background-color:#0f1e8a}:host [part~=cell][range]:not(:active) [part~=selection]:hover,:host [part~=cell][selected]:not(:active) [part~=selection]:hover,:host [part~=cell][today]:not(:active) [part~=selection]:hover{border-color:#1429bd}:host [part~=cell][range]:active [part~=selection],:host [part~=cell][selected]:active [part~=selection],:host [part~=cell][today]:active [part~=selection]{color:#fff;background-color:#0f1e8a}:host [part~=cell][range] [part~=selection]{background:rgba(51,75,255,.2)}:host [part~=cell][range][today]{color:#fff}:host [part~=cell][selected]{color:#fff}:host [part~=cell][selected] [part~=selection]{background:#334bff}:host [part~=cell]:not(:first-of-type) [part~=cell-content]{left:1px}:host [part~=day-name]{color:#999;font-weight:600}:host [part~=day-name] [part~=cell-content]{background-color:#1a1a1a}:host [part~=cell-content]{background:#0d0d0d;top:0;bottom:0;right:0;left:0}:host [part~=selection]{outline:0;border:1px solid #0d0d0d}:host([focused=visible]) [part~=cell] [part~=selection]:focus{outline:#1429bd solid 1px}:host([disabled]){opacity:.4}');
+elf.customStyles.define('ef-calendar', ':host{font-style:normal;font-variant:normal;font-weight:400;line-height:normal;text-align:left;text-indent:0;text-shadow:none;text-transform:none;white-space:normal;word-break:normal;word-spacing:normal;word-wrap:normal;outline:0;font-size:12rem;color:#ccc;min-width:196px;-webkit-user-select:none;-moz-user-select:none;user-select:none;background:#262626;padding:4px 3px}:host [part=navigation]{padding-bottom:3px}:host [part=btn-next],:host [part=btn-prev],:host [part=btn-view]{margin:0}:host [part=btn-view]{background:0 0;margin-left:16px;border:none;color:inherit;padding:0}:host [part=btn-view]:hover,:host [part=btn-view][focused=visible]{opacity:.8}:host [part=table]{width:100%;background:#262626}:host [part~=row]:not(:first-of-type) [part~=cell] [part~=cell-content]{top:1px}:host [part~=day-name-row]{background-color:#333}:host [part~=cell][disabled]{opacity:.4}:host [part~=cell][today]{color:#fff}:host [part~=cell][today] [part~=selection]{background:#404040}:host [part~=cell]:not([selected]):not([range]):not([disabled])[idle] [part~=selection]{opacity:.6}:host [part~=cell]:not([today]):not([range]) [part~=selection]:hover{color:#fff}:host [part~=cell]:not(:active) [part~=selection]:hover{border-color:#1429bd}:host [part~=cell]:not([today]):not([range]):not(:active) [part~=selection]:hover,:host [part~=cell][today][selected] [part~=selection]:hover{background:#1429bd}:host [part~=cell]:not([selected]):not([range]):not([today]) [part~=selection]:hover{background:#1429bd}:host [part~=cell]:not([selected]):not([range]):not([today]):not(:active) [part~=selection]:hover{border-color:#1429bd}:host [part~=cell]:not([selected]):not([range]):not([today]):not([disabled]):active [part~=selection]{color:#fff;background-color:#0f1e8a}:host [part~=cell][range]:not(:active) [part~=selection]:hover,:host [part~=cell][selected]:not(:active) [part~=selection]:hover,:host [part~=cell][today]:not(:active) [part~=selection]:hover{border-color:#1429bd}:host [part~=cell][range]:not([disabled]):active [part~=selection],:host [part~=cell][selected]:not([disabled]):active [part~=selection],:host [part~=cell][today]:not([disabled]):active [part~=selection]{color:#fff;background-color:#0f1e8a}:host [part~=cell][range] [part~=selection]{background:rgba(51,75,255,.2)}:host [part~=cell][range][today]{color:#fff}:host [part~=cell][selected]{color:#fff}:host [part~=cell][selected] [part~=selection]{background:#334bff}:host [part~=cell]:not(:first-of-type) [part~=cell-content]{left:1px}:host [part~=day-name]{color:#999;font-weight:600}:host [part~=day-name] [part~=cell-content]{background-color:#1a1a1a}:host [part~=cell-content]{background:#0d0d0d;top:0;bottom:0;right:0;left:0}:host [part~=selection]{outline:0;border:1px solid #0d0d0d}:host([focused=visible]) [part~=cell] [part~=selection]:focus{outline:#1429bd solid 1px}:host([disabled]){opacity:.4}');

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

@@ -1,3 +1,3 @@
 import '@refinitiv-ui/elements/button/themes/halo/light';
 
-elf.customStyles.define('ef-calendar', ':host{font-style:normal;font-variant:normal;font-weight:400;line-height:normal;text-align:left;text-indent:0;text-shadow:none;text-transform:none;white-space:normal;word-break:normal;word-spacing:normal;word-wrap:normal;outline:0;font-size:12rem;color:#0d0d0d;min-width:196px;-webkit-user-select:none;-moz-user-select:none;user-select:none;background:#f2f2f2;padding:4px 3px}:host [part=navigation]{padding-bottom:3px}:host [part=btn-next],:host [part=btn-prev],:host [part=btn-view]{margin:0}:host [part=btn-next]:not(:hover):not(:focus):not(:active),:host [part=btn-prev]:not(:hover):not(:focus):not(:active){color:#595959}:host [part=btn-view]{background:0 0;margin-left:16px;border:none;color:inherit;padding:0}:host [part=btn-view]:hover,:host [part=btn-view][focused=visible]{opacity:.8}:host [part=table]{width:100%;background:#e6e6e6}:host [part~=row]:not(:first-of-type) [part~=cell] [part~=cell-content]{top:1px}:host [part~=day-name-row]{background-color:#e6e6e6}:host [part~=cell][disabled]{opacity:.4}:host [part~=cell][today]{color:#0d0d0d}:host [part~=cell][today] [part~=selection]{background:#d9d9d9}:host [part~=cell]:not([selected]):not([range]):not([disabled])[idle] [part~=selection]{opacity:.6}:host [part~=cell]:not([today]):not([range]) [part~=selection]:hover{color:#fff}:host [part~=cell]:not(:active) [part~=selection]:hover{border-color:#1429bd}:host [part~=cell]:not([today]):not([range]):not(:active) [part~=selection]:hover,:host [part~=cell][today][selected] [part~=selection]:hover{background:#1429bd}:host [part~=cell]:not([selected]):not([range]):not([today]) [part~=selection]:hover{background:#1429bd}:host [part~=cell]:not([selected]):not([range]):not([today]):not(:active) [part~=selection]:hover{border-color:#1429bd}:host [part~=cell]:not([selected]):not([range]):not([today]):active [part~=selection]{color:#fff;background-color:#0f1e8a}:host [part~=cell][range]:not(:active) [part~=selection]:hover,:host [part~=cell][selected]:not(:active) [part~=selection]:hover,:host [part~=cell][today]:not(:active) [part~=selection]:hover{border-color:#1429bd}:host [part~=cell][range]:active [part~=selection],:host [part~=cell][selected]:active [part~=selection],:host [part~=cell][today]:active [part~=selection]{color:#fff;background-color:#0f1e8a}:host [part~=cell][range] [part~=selection]{background:rgba(51,75,255,.2)}:host [part~=cell][range][today]{color:#fff}:host [part~=cell][selected]{color:#fff}:host [part~=cell][selected] [part~=selection]{background:#334bff}:host [part~=cell]:not(:first-of-type) [part~=cell-content]{left:1px}:host [part~=day-name]{color:#737373;font-weight:600}:host [part~=day-name] [part~=cell-content]{background-color:#fafafa}:host [part~=cell-content]{background:#fff;top:0;bottom:0;right:0;left:0}:host [part~=selection]{outline:0;border:1px solid #fff}:host([focused=visible]) [part~=cell] [part~=selection]:focus{outline:#1429bd solid 1px}:host([disabled]){opacity:.4}');
+elf.customStyles.define('ef-calendar', ':host{font-style:normal;font-variant:normal;font-weight:400;line-height:normal;text-align:left;text-indent:0;text-shadow:none;text-transform:none;white-space:normal;word-break:normal;word-spacing:normal;word-wrap:normal;outline:0;font-size:12rem;color:#0d0d0d;min-width:196px;-webkit-user-select:none;-moz-user-select:none;user-select:none;background:#f2f2f2;padding:4px 3px}:host [part=navigation]{padding-bottom:3px}:host [part=btn-next],:host [part=btn-prev],:host [part=btn-view]{margin:0}:host [part=btn-next]:not(:hover):not(:focus):not(:active),:host [part=btn-prev]:not(:hover):not(:focus):not(:active){color:#595959}:host [part=btn-view]{background:0 0;margin-left:16px;border:none;color:inherit;padding:0}:host [part=btn-view]:hover,:host [part=btn-view][focused=visible]{opacity:.8}:host [part=table]{width:100%;background:#e6e6e6}:host [part~=row]:not(:first-of-type) [part~=cell] [part~=cell-content]{top:1px}:host [part~=day-name-row]{background-color:#e6e6e6}:host [part~=cell][disabled]{opacity:.4}:host [part~=cell][today]{color:#0d0d0d}:host [part~=cell][today] [part~=selection]{background:#d9d9d9}:host [part~=cell]:not([selected]):not([range]):not([disabled])[idle] [part~=selection]{opacity:.6}:host [part~=cell]:not([today]):not([range]) [part~=selection]:hover{color:#fff}:host [part~=cell]:not(:active) [part~=selection]:hover{border-color:#1429bd}:host [part~=cell]:not([today]):not([range]):not(:active) [part~=selection]:hover,:host [part~=cell][today][selected] [part~=selection]:hover{background:#1429bd}:host [part~=cell]:not([selected]):not([range]):not([today]) [part~=selection]:hover{background:#1429bd}:host [part~=cell]:not([selected]):not([range]):not([today]):not(:active) [part~=selection]:hover{border-color:#1429bd}:host [part~=cell]:not([selected]):not([range]):not([today]):not([disabled]):active [part~=selection]{color:#fff;background-color:#0f1e8a}:host [part~=cell][range]:not(:active) [part~=selection]:hover,:host [part~=cell][selected]:not(:active) [part~=selection]:hover,:host [part~=cell][today]:not(:active) [part~=selection]:hover{border-color:#1429bd}:host [part~=cell][range]:not([disabled]):active [part~=selection],:host [part~=cell][selected]:not([disabled]):active [part~=selection],:host [part~=cell][today]:not([disabled]):active [part~=selection]{color:#fff;background-color:#0f1e8a}:host [part~=cell][range] [part~=selection]{background:rgba(51,75,255,.2)}:host [part~=cell][range][today]{color:#fff}:host [part~=cell][selected]{color:#fff}:host [part~=cell][selected] [part~=selection]{background:#334bff}:host [part~=cell]:not(:first-of-type) [part~=cell-content]{left:1px}:host [part~=day-name]{color:#737373;font-weight:600}:host [part~=day-name] [part~=cell-content]{background-color:#fafafa}:host [part~=cell-content]{background:#fff;top:0;bottom:0;right:0;left:0}:host [part~=selection]{outline:0;border:1px solid #fff}:host([focused=visible]) [part~=cell] [part~=selection]:focus{outline:#1429bd solid 1px}:host([disabled]){opacity:.4}');

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

@@ -505,6 +505,7 @@ export declare class ComboBox<T extends DataItem = ItemData> extends FormFieldEl
     protected get selectionBadgeTemplate(): TemplateResult | undefined;
     /**
      * Returns a list template
+     * TODO: Remove empty `tabindex`. We need better flexibility on removing tabindex value from ControlElement
      */
     protected get listTemplate(): TemplateResult;
     /**

package/lib/combo-box/index.js

@@ -1044,12 +1044,13 @@ let ComboBox = class ComboBox extends FormFieldElement {
     }
     /**
      * Returns a list template
+     * TODO: Remove empty `tabindex`. We need better flexibility on removing tabindex value from ControlElement
      */
     get listTemplate() {
         return html `
       <ef-list
         id="internal-list"
-        tabindex="-1"
+        tabindex
         @value-changed="${this.onListValueChanged}"
         .data="${this.composer}"
         .multiple="${this.multiple}"
@@ -1063,7 +1064,7 @@ let ComboBox = class ComboBox extends FormFieldElement {
      */
     get noItemsTemplate() {
         if (!this.freeText) {
-            return html `<ef-item disabled>${this.t('NO_OPTIONS')}</ef-item>`;
+            return html `<ef-list-item disabled>${this.t('NO_OPTIONS')}</ef-list-item>`;
         }
     }
     /**
@@ -1187,7 +1188,7 @@ __decorate([
     query('#clears-button')
 ], ComboBox.prototype, "clearsButtonEl", void 0);
 __decorate([
-    property({ type: String, reflect: true })
+    property({ type: Boolean, reflect: true })
 ], ComboBox.prototype, "loading", void 0);
 __decorate([
     translate({ scope: 'ef-combo-box' })

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

@@ -140,6 +140,10 @@
           "name": "formatOptions",
           "description": "Set the datetime format options based on\nhttps://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/DateTimeFormat\n`formatOptions` overrides `timepicker` and `showSeconds` properties.\nNote: time-zone is not supported"
         },
+        {
+          "name": "locale",
+          "description": "Set the Locale object.\n`Locale` overrides `formatOptions`, `timepicker` and `showSeconds` properties."
+        },
         {
           "name": "value",
           "attribute": "value",

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

@@ -20,6 +20,7 @@ A form control element for datetime input.
 | `formatOptions` |                   |                  | null    | Set the datetime format options based on<br />https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/DateTimeFormat<br />`formatOptions` overrides `timepicker` and `showSeconds` properties.<br />Note: time-zone is not supported |
 | `icon`          | `icon`            | `string \| null` | null    | Specify icon to display in input. Value can be icon name |
 | `iconHasAction` | `icon-has-action` | `boolean`        | false   | Specify when icon need to be clickable           |
+| `locale`        |                   |                  | null    | Set the Locale object.<br />`Locale` overrides `formatOptions`, `timepicker` and `showSeconds` properties. |
 | `max`           | `max`             | `string \| null` | null    | Set maximum date.<br />This value must follow the `format` and be greater<br />than or equal to the value of the `min` attribute |
 | `maxLength`     |                   | `number \| null` | null    | Set character max limit                          |
 | `min`           | `min`             | `string \| null` | null    | Set minimum date.<br />This value must follow the `format` and be less<br />than or equal to the value of the `max` attribute |

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

@@ -68,50 +68,34 @@ export declare class DatetimeField extends TextField {
      * than or equal to the value of the `min` attribute
      */
     max: string | null;
-    private _timepicker;
     /**
      * Toggle to display the time picker
-     * @param timepicker true to set timepicker mode
-     * @default false
      */
-    set timepicker(timepicker: boolean);
-    get timepicker(): boolean;
-    private _showSeconds;
+    timepicker: boolean;
     /**
      * Toggle to display the seconds
-     * @param showSeconds true to show seconds
-     * @default false
      */
-    set showSeconds(showSeconds: boolean);
-    get showSeconds(): boolean;
-    private _amPm;
+    showSeconds: boolean;
     /**
      * Overrides 12hr time display format
-     * @param amPm true to show 12hr time format
-     * @default false
      */
-    set amPm(amPm: boolean);
-    get amPm(): boolean;
-    private _formatOptions;
+    amPm: boolean;
     /**
      * Set the datetime format options based on
      * https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/DateTimeFormat
      * `formatOptions` overrides `timepicker` and `showSeconds` properties.
      * Note: time-zone is not supported
-     * @param formatOptions Format options
-     * @default - null
      */
-    set formatOptions(formatOptions: Intl.DateTimeFormatOptions | null);
-    get formatOptions(): Intl.DateTimeFormatOptions | null;
+    formatOptions: Intl.DateTimeFormatOptions | null;
     /**
-     * Used for translations
+     * Set the Locale object.
+     * `Locale` overrides `formatOptions`, `timepicker` and `showSeconds` properties.
      */
-    protected t: TranslateDirective;
+    locale: Locale | null;
     /**
-     * Format, which is based on locale
+     * Used for translations
      */
-    private _locale;
-    protected get locale(): Locale;
+    protected t: TranslateDirective;
     private interimValueState;
     /**
      * Current date time value
@@ -142,27 +126,16 @@ export declare class DatetimeField extends TextField {
      * Currently selected part
      */
     protected partLabel: string;
+    /**
+     * Get resolved locale for current element
+     */
+    protected get resolvedLocale(): Locale;
     /**
      * Transform Date object to date string
      * @param value Date
      * @returns dateSting
      */
     protected dateToString(value: Date): string;
-    /**
-     * Returns true if the datetime field has timepicker
-     * @returns hasTimePicker
-     */
-    protected get hasTimePicker(): boolean;
-    /**
-     * Returns true if the datetime field has seconds
-     * @returns hasSeconds
-     */
-    protected get hasSeconds(): boolean;
-    /**
-     * Returns true if the datetime field has am-pm
-     * @returns hasAmPm
-     */
-    protected get hasAmPm(): boolean;
     /**
      * Get today's date noon as the start date when the value is not set
      */
@@ -211,11 +184,6 @@ export declare class DatetimeField extends TextField {
      * @returns {void}
      */
     protected warnInvalidValue(value: string): void;
-    /**
-     * Resolve locale based on element parameters
-     * @returns locale Resolved locale
-     */
-    protected resolveLocale(): Locale;
     /**
      * Get Intl.DateTimeFormat object from locale
      */

package/lib/datetime-field/index.js

@@ -4,9 +4,10 @@ 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 { AnimationTaskRunner } from '@refinitiv-ui/utils/async.js';
-import { utcParse, utcFormat, getFormat, isBefore, isAfter, iterateUnit, Locale } from '@refinitiv-ui/utils/date.js';
-import { translate, getLocale, TranslatePropertyKey } from '@refinitiv-ui/translate';
+import { utcParse, utcFormat, getFormat, isBefore, isAfter, iterateUnit } from '@refinitiv-ui/utils/date.js';
+import { translate, TranslatePropertyKey } from '@refinitiv-ui/translate';
 import { Direction } from './constants.js';
+import { resolvedLocale } from './resolvedLocale.js';
 import { TextField } from '../text-field/index.js';
 import { getSelectedPartIndex, getNextSelectedPartIndex, selectPart } from './utils.js';
 import { VERSION } from '../version.js';
@@ -70,14 +71,30 @@ let DatetimeField = class DatetimeField extends TextField {
          * than or equal to the value of the `min` attribute
          */
         this.max = null;
-        this._timepicker = false;
-        this._showSeconds = false;
-        this._amPm = false;
-        this._formatOptions = null;
         /**
-         * Format, which is based on locale
+         * Toggle to display the time picker
          */
-        this._locale = null;
+        this.timepicker = false;
+        /**
+         * Toggle to display the seconds
+         */
+        this.showSeconds = false;
+        /**
+         * Overrides 12hr time display format
+         */
+        this.amPm = false;
+        /**
+         * Set the datetime format options based on
+         * https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/DateTimeFormat
+         * `formatOptions` overrides `timepicker` and `showSeconds` properties.
+         * Note: time-zone is not supported
+         */
+        this.formatOptions = null;
+        /**
+         * Set the Locale object.
+         * `Locale` overrides `formatOptions`, `timepicker` and `showSeconds` properties.
+         */
+        this.locale = null;
         this.interimValueState = false; // make sure that internal input field value is updated only on external value change
         /**
          * Currently selected part
@@ -91,79 +108,6 @@ let DatetimeField = class DatetimeField extends TextField {
     static get version() {
         return VERSION;
     }
-    /**
-     * Toggle to display the time picker
-     * @param timepicker true to set timepicker mode
-     * @default false
-     */
-    set timepicker(timepicker) {
-        const oldTimepicker = this._timepicker;
-        if (timepicker !== oldTimepicker) {
-            this._timepicker = timepicker;
-            this._locale = null;
-            this.requestUpdate('timepicker', oldTimepicker);
-        }
-    }
-    get timepicker() {
-        return this._timepicker;
-    }
-    /**
-     * Toggle to display the seconds
-     * @param showSeconds true to show seconds
-     * @default false
-     */
-    set showSeconds(showSeconds) {
-        const oldShowSeconds = this._showSeconds;
-        if (oldShowSeconds !== showSeconds) {
-            this._showSeconds = showSeconds;
-            this._locale = null;
-            this.requestUpdate('showSeconds', oldShowSeconds);
-        }
-    }
-    get showSeconds() {
-        return this._showSeconds;
-    }
-    /**
-     * Overrides 12hr time display format
-     * @param amPm true to show 12hr time format
-     * @default false
-     */
-    set amPm(amPm) {
-        const oldAmPm = this._amPm;
-        if (oldAmPm !== amPm) {
-            this._amPm = amPm;
-            this._locale = null;
-            this.requestUpdate('amPm', oldAmPm);
-        }
-    }
-    get amPm() {
-        return this._amPm;
-    }
-    /**
-     * Set the datetime format options based on
-     * https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/DateTimeFormat
-     * `formatOptions` overrides `timepicker` and `showSeconds` properties.
-     * Note: time-zone is not supported
-     * @param formatOptions Format options
-     * @default - null
-     */
-    set formatOptions(formatOptions) {
-        const oldFormatOptions = this._formatOptions;
-        if (oldFormatOptions !== formatOptions) {
-            this._formatOptions = formatOptions;
-            this._locale = null;
-            this.requestUpdate('formatOptions', oldFormatOptions);
-        }
-    }
-    get formatOptions() {
-        return this._formatOptions;
-    }
-    get locale() {
-        if (!this._locale) {
-            this._locale = this.resolveLocale();
-        }
-        return this._locale;
-    }
     /**
      * Current date time value
      * @param value Calendar value
@@ -207,35 +151,19 @@ let DatetimeField = class DatetimeField extends TextField {
     set valueAsDate(value) {
         this.value = value ? this.dateToString(value) : '';
     }
+    /**
+     * Get resolved locale for current element
+     */
+    get resolvedLocale() {
+        return resolvedLocale(this);
+    }
     /**
      * Transform Date object to date string
      * @param value Date
      * @returns dateSting
      */
     dateToString(value) {
-        return isNaN(value.getTime()) ? '' : utcFormat(value, this.locale.isoFormat);
-    }
-    /**
-     * Returns true if the datetime field has timepicker
-     * @returns hasTimePicker
-     */
-    get hasTimePicker() {
-        // need to check for attribute to resolve the value correctly until the first lifecycle is run
-        return this.timepicker || this.hasAttribute('timepicker') || this.hasAmPm || this.hasSeconds;
-    }
-    /**
-     * Returns true if the datetime field has seconds
-     * @returns hasSeconds
-     */
-    get hasSeconds() {
-        return this.showSeconds || this.hasAttribute('show-seconds');
-    }
-    /**
-     * Returns true if the datetime field has am-pm
-     * @returns hasAmPm
-     */
-    get hasAmPm() {
-        return this.amPm || this.hasAttribute('am-pm');
+        return isNaN(value.getTime()) ? '' : utcFormat(value, this.resolvedLocale.isoFormat);
     }
     /**
      * Get today's date noon as the start date when the value is not set
@@ -257,9 +185,6 @@ let DatetimeField = class DatetimeField extends TextField {
      */
     willUpdate(changedProperties) {
         super.willUpdate(changedProperties);
-        if (changedProperties.has(TranslatePropertyKey)) {
-            this._locale = null; // Locale is updated on next call via getter
-        }
         if (changedProperties.has(FocusedPropertyKey) && !this.focused) {
             this.partLabel = '';
         }
@@ -278,6 +203,7 @@ let DatetimeField = class DatetimeField extends TextField {
             || changedProperties.has('timepicker')
             || changedProperties.has('showSeconds')
             || changedProperties.has('amPm')
+            || changedProperties.has('locale')
             || (changedProperties.has(FocusedPropertyKey) && this.value !== '' && !this.focused);
     }
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
@@ -315,7 +241,7 @@ let DatetimeField = class DatetimeField extends TextField {
             return true;
         }
         // value format depends on locale.
-        return getFormat(value) === this.locale.isoFormat;
+        return getFormat(value) === this.resolvedLocale.isoFormat;
     }
     /**
      * Used to show a warning when the value does not pass the validation
@@ -323,30 +249,13 @@ let DatetimeField = class DatetimeField extends TextField {
      * @returns {void}
      */
     warnInvalidValue(value) {
-        new WarningNotice(`${this.localName}: the specified value "${value}" does not conform to the required format. The format is '${this.locale.isoFormat}'.`).show();
-    }
-    /**
-     * Resolve locale based on element parameters
-     * @returns locale Resolved locale
-     */
-    resolveLocale() {
-        const hasTimePicker = this.hasTimePicker;
-        // TODO: Do not use dateStyle and timeStyle as these are supported only in modern browsers
-        return Locale.fromOptions(this.formatOptions || {
-            year: 'numeric',
-            month: 'short',
-            day: 'numeric',
-            hour: hasTimePicker ? 'numeric' : undefined,
-            minute: hasTimePicker ? 'numeric' : undefined,
-            second: this.hasSeconds ? 'numeric' : undefined,
-            hour12: this.hasAmPm ? true : undefined // force am-pm if provided, otherwise rely on locale
-        }, `${getLocale(this)}`);
+        new WarningNotice(`${this.localName}: the specified value "${value}" does not conform to the required format. The format is '${this.resolvedLocale.isoFormat}'.`).show();
     }
     /**
      * Get Intl.DateTimeFormat object from locale
      */
     get formatter() {
-        return this.locale.formatter;
+        return this.resolvedLocale.formatter;
     }
     /**
      * Try to format ISO date/time/datetime string into datetime format parts
@@ -374,7 +283,7 @@ let DatetimeField = class DatetimeField extends TextField {
     toValue(inputValue) {
         let value = '';
         try {
-            value = inputValue ? this.locale.parse(inputValue, this.value || this.startDate) : '';
+            value = inputValue ? this.resolvedLocale.parse(inputValue, this.value || this.startDate) : '';
         }
         catch (error) {
             // do nothing
@@ -635,16 +544,19 @@ __decorate([
 ], DatetimeField.prototype, "max", void 0);
 __decorate([
     property({ type: Boolean, reflect: true })
-], DatetimeField.prototype, "timepicker", null);
+], DatetimeField.prototype, "timepicker", void 0);
 __decorate([
     property({ type: Boolean, attribute: 'show-seconds', reflect: true })
-], DatetimeField.prototype, "showSeconds", null);
+], DatetimeField.prototype, "showSeconds", void 0);
 __decorate([
     property({ type: Boolean, attribute: 'am-pm', reflect: true })
-], DatetimeField.prototype, "amPm", null);
+], DatetimeField.prototype, "amPm", void 0);
+__decorate([
+    property({ attribute: false })
+], DatetimeField.prototype, "formatOptions", void 0);
 __decorate([
     property({ attribute: false })
-], DatetimeField.prototype, "formatOptions", null);
+], DatetimeField.prototype, "locale", void 0);
 __decorate([
     translate({ mode: 'directive', scope: 'ef-datetime-field' })
 ], DatetimeField.prototype, "t", void 0);

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

@@ -0,0 +1,19 @@
+import { Locale } from '@refinitiv-ui/utils/date.js';
+/**
+ * Used for date elements to construct Locale object
+ */
+declare type LocaleDateElement = HTMLElement & {
+    formatOptions?: Intl.DateTimeFormatOptions | null;
+    amPm?: boolean;
+    showSeconds?: boolean;
+    timepicker?: boolean;
+    locale?: Locale | null;
+};
+/**
+ * Resolve locale based on element parameters
+ * @param element Locale Date element
+ * @param [options] Override options if resolved from element
+ * @returns locale Resolved Locale object
+ */
+declare const resolvedLocale: (element: LocaleDateElement, options?: Intl.DateTimeFormatOptions) => Locale;
+export { LocaleDateElement, resolvedLocale };