@refinitiv-ui/elements 7.0.0 → 7.0.1

package/lib/datetime-field/index.js

@@ -3,14 +3,14 @@ import { FocusedPropertyKey, WarningNotice, html } from '@refinitiv-ui/core';
 import { customElement } from '@refinitiv-ui/core/decorators/custom-element.js';
 import { property } from '@refinitiv-ui/core/decorators/property.js';
 import { state } from '@refinitiv-ui/core/decorators/state.js';
+import '@refinitiv-ui/phrasebook/locale/en/datetime-field.js';
+import { TranslatePropertyKey, getLocale, translate } from '@refinitiv-ui/translate';
 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 { Direction } from './constants.js';
+import { Locale, getFormat, isAfter, isBefore, iterateUnit, utcFormat, utcParse } from '@refinitiv-ui/utils/date.js';
 import { TextField } from '../text-field/index.js';
-import { getSelectedPartIndex, getNextSelectedPartIndex, selectPart } from './utils.js';
 import { VERSION } from '../version.js';
-import '@refinitiv-ui/phrasebook/locale/en/datetime-field.js';
+import { Direction } from './constants.js';
+import { getNextSelectedPartIndex, getSelectedPartIndex, selectPart } from './utils.js';
 /**
  * A form control element for datetime input.
  *
@@ -272,14 +272,20 @@ let DatetimeField = class DatetimeField extends TextField {
     shouldSyncInputValue(changedProperties) {
         // Note: changing any of these properties override the input value
         // On blur, if the value is correct makes sure strict format is used
-        return changedProperties.has('interimValueState')
-            || changedProperties.has(TranslatePropertyKey)
-            || changedProperties.has('formatOptions')
-            || changedProperties.has('timepicker')
-            || changedProperties.has('showSeconds')
-            || changedProperties.has('amPm')
-            || (changedProperties.has(FocusedPropertyKey) && this.value !== '' && !this.focused);
+        return (changedProperties.has('interimValueState') ||
+            changedProperties.has(TranslatePropertyKey) ||
+            changedProperties.has('formatOptions') ||
+            changedProperties.has('timepicker') ||
+            changedProperties.has('showSeconds') ||
+            changedProperties.has('amPm') ||
+            (changedProperties.has(FocusedPropertyKey) && this.value !== '' && !this.focused));
     }
+    /**
+     * Synchronise input value with value.
+     * Override the method if value and input value are not the same
+     * @param changedProperties Properties that has changed
+     * @returns {void}
+     */
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     syncInputValue(changedProperties) {
         this.interimValueState = false;
@@ -295,7 +301,7 @@ let DatetimeField = class DatetimeField extends TextField {
      */
     shouldValidateInput(changedProperties) {
         // TODO: this needs refactoring with all other fields to support common validation patterns
-        return (changedProperties.has(FocusedPropertyKey) && !this.focused);
+        return changedProperties.has(FocusedPropertyKey) && !this.focused;
     }
     /**
      * Validate input according `pattern`, `minLength` and `maxLength` properties
@@ -600,14 +606,20 @@ let DatetimeField = class DatetimeField extends TextField {
             return null;
         }
         return html `
-      ${this.partLabel && this.value ? html `<div
-        aria-label="${this.t(`PICK_${this.partLabel.toUpperCase()}`)}"
-        aria-live="polite"
-        role="status"></div>` : undefined}
+      ${this.partLabel && this.value
+            ? html `<div
+            aria-label="${this.t(`PICK_${this.partLabel.toUpperCase()}`)}"
+            aria-live="polite"
+            role="status"
+          ></div>`
+            : undefined}
       <div
-        aria-label="${this.value ? this.t('VALUE', { value: this.toInputValue(this.value) }) : this.t('NO_VALUE')}"
+        aria-label="${this.value
+            ? this.t('VALUE', { value: this.toInputValue(this.value) })
+            : this.t('NO_VALUE')}"
         aria-live="polite"
-        role="status"></div>
+        role="status"
+      ></div>
     `;
     }
     /**
@@ -616,10 +628,7 @@ let DatetimeField = class DatetimeField extends TextField {
      * @return Render template
      */
     render() {
-        return html `
-      ${super.render()}
-      ${this.screenReaderTemplate}
-    `;
+        return html ` ${super.render()} ${this.screenReaderTemplate} `;
     }
 };
 __decorate([

package/lib/datetime-field/utils.js

@@ -1,5 +1,15 @@
 import { Direction } from './constants.js';
-const IterablePartTypes = ['year', 'day', 'month', 'hour', 'minute', 'second', 'weekday', 'dayPeriod', 'fractionalSecond'];
+const IterablePartTypes = [
+    'year',
+    'day',
+    'month',
+    'hour',
+    'minute',
+    'second',
+    'weekday',
+    'dayPeriod',
+    'fractionalSecond'
+];
 const isAllowedPart = (part) => IterablePartTypes.includes(part.type);
 /**
  * Get a part index based on the selection

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

@@ -1,12 +1,12 @@
 import { JSXInterface } from '../jsx';
-import { ControlElement, TemplateResult, MultiValue, PropertyValues, CSSResultGroup } from '@refinitiv-ui/core';
-import type { DatetimePickerDuplex, DatetimePickerFilter } from './types';
+import { CSSResultGroup, ControlElement, MultiValue, PropertyValues, TemplateResult } from '@refinitiv-ui/core';
+import { TranslateDirective } 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 { TranslateDirective } from '@refinitiv-ui/translate';
+import type { DatetimePickerDuplex, DatetimePickerFilter } from './types';
 export type { DatetimePickerFilter, DatetimePickerDuplex };
 /**
  * Control to pick date and time
@@ -48,33 +48,33 @@ export declare class DatetimePicker extends ControlElement implements MultiValue
     private _min;
     private minDate;
     /**
-    * Set minimum date
-    * @param min date
-    * @default -
-    */
+     * Set minimum date
+     * @param min date
+     * @default -
+     */
     set min(min: string);
     get min(): string;
     private _max;
     private maxDate;
     /**
-    * Set maximum date
-    * @param max date
-    * @default -
-    */
+     * Set maximum date
+     * @param max date
+     * @default -
+     */
     set max(max: string);
     get max(): string;
     /**
-    * Only enable weekdays
-    */
+     * Only enable weekdays
+     */
     weekdaysOnly: boolean;
     /**
-    * Only enable weekends
-    */
+     * Only enable weekends
+     */
     weekendsOnly: boolean;
     /**
-    * Custom filter, used for enabling/disabling certain dates
-    * @type {DatetimePickerFilter | null}
-    */
+     * Custom filter, used for enabling/disabling certain dates
+     * @type {DatetimePickerFilter | null}
+     */
     filter: DatetimePickerFilter | null;
     /**
      * Set the first day of the week.
@@ -83,34 +83,34 @@ export declare class DatetimePicker extends ControlElement implements MultiValue
      */
     firstDayOfWeek?: number;
     /**
-    * Set to switch to range select mode
-    */
+     * Set to switch to range select mode
+     */
     range: boolean;
     /**
-    * Set to switch to multiple select mode
-    * @ignore
-    * @param multiple Multiple
-    */
+     * Set to switch to multiple select mode
+     * @ignore
+     * @param multiple Multiple
+     */
     set multiple(multiple: boolean);
     /**
-    * @ignore
-    */
+     * @ignore
+     */
     get multiple(): boolean;
     /**
-    * Current date time value
-    * @param value Calendar value
-    * @default -
-    */
+     * Current date time value
+     * @param value Calendar value
+     * @default -
+     */
     set value(value: string);
     get value(): string;
     private _values;
     private _segments;
     /**
-    * Set multiple selected values
-    * @param values Values to set
-    * @type {string[]}
-    * @default []
-    */
+     * Set multiple selected values
+     * @param values Values to set
+     * @type {string[]}
+     * @default []
+     */
     set values(values: string[]);
     get values(): string[];
     /**
@@ -124,15 +124,15 @@ export declare class DatetimePicker extends ControlElement implements MultiValue
     showSeconds: boolean;
     private _placeholder;
     /**
-    * Placeholder to display when no value is set
-    * @param placeholder Placeholder
-    * @default -
-    */
+     * 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
-    */
+     * Toggles the opened state of the list
+     */
     opened: boolean;
     /**
      * Set state to error
@@ -143,52 +143,52 @@ export declare class DatetimePicker extends ControlElement implements MultiValue
      */
     warning: boolean;
     /**
-    * Only open picker panel when calendar icon is clicked.
-    * Clicking on the input will no longer open the picker.
-    */
+     * Only open picker panel when calendar icon is clicked.
+     * Clicking on the input will no longer open the picker.
+     */
     inputTriggerDisabled: boolean;
     /**
-    * Disable input part of the picker
-    */
+     * Disable input part of the picker
+     */
     inputDisabled: boolean;
     /**
-    * Disable the popup
-    */
+     * Disable the popup
+     */
     popupDisabled: boolean;
     private _format;
     /**
-    * Set the datetime format
-    * Based on dane-fns datetime formats
-    * @param format Date format
-    * @default -
-    */
+     * Set the datetime format
+     * Based on dane-fns datetime formats
+     * @param format Date format
+     * @default -
+     */
     set format(format: string);
     get format(): string;
     /**
-    * Toggle to display the time picker
-    */
+     * Toggle to display the time picker
+     */
     timepicker: boolean;
     /**
-    * Display two calendar pickers.
-    * @type {"" | "consecutive" | "split"}
-    */
+     * Display two calendar pickers.
+     * @type {"" | "consecutive" | "split"}
+     */
     duplex: DatetimePickerDuplex | null;
     /**
-    * Set the current calendar view.
-    * Accepted format: 'yyyy-MM'
-    * @param view view date
-    * @default -
-    */
+     * Set the current calendar view.
+     * Accepted format: 'yyyy-MM'
+     * @param view view date
+     * @default -
+     */
     set view(view: string);
     get view(): string;
     private _views;
     /**
-    * Set the current calendar views for duplex mode
-    * Accepted format: 'yyyy-MM'
-    * @param views view dates
-    * @type {string[]}
-    * @default []
-    */
+     * Set the current calendar views for duplex mode
+     * Accepted format: 'yyyy-MM'
+     * @param views view dates
+     * @type {string[]}
+     * @default []
+     */
     set views(views: string[]);
     get views(): string[];
     /**
@@ -228,10 +228,10 @@ export declare class DatetimePicker extends ControlElement implements MultiValue
      */
     protected isValidValue(value: string): boolean;
     /**
-    * Used to show a warning when the value does not pass the validation
-    * @param value that is invalid
-    * @returns {void}
-    */
+     * Used to show a warning when the value does not pass the validation
+     * @param value that is invalid
+     * @returns {void}
+     */
     protected warnInvalidValue(value: string): void;
     /**
      * Show invalid view message
@@ -483,8 +483,8 @@ export declare class DatetimePicker extends ControlElement implements MultiValue
      */
     private get inputTemplates();
     /**
-    * Popup panel template
-    */
+     * Popup panel template
+     */
     private get popupTemplate();
     /**
      * A `TemplateResult` that will be used