@refinitiv-ui/elements 5.12.2 → 6.0.0-next.2

package/lib/datetime-field/index.js

@@ -0,0 +1,660 @@
+import { __decorate } from "tslib";
+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 { 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 { 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';
+/**
+ * A form control element for datetime input.
+ *
+ * @fires value-changed - Dispatched when value changes
+ * @fires error-changed - Dispatched when error state changes
+ * @fires icon-click - Dispatched when icon is clicked
+ *
+ * @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 {string} icon - Specify icon to display in input. Value can be icon name
+ * @prop {string | null} [icon=null] - Specify icon to display in input. Value can be icon name
+ *
+ * @attr {boolean} icon-has-action - Specify when icon need to be clickable
+ * @prop {boolean} [iconHasAction=false] - Specify when icon need to be clickable
+ *
+ * @attr {number} maxlength - Set character max limit
+ * @prop {number | null} [maxLength=null] - Set character max limit
+ *
+ * @attr {number} minlength - Set character min limit
+ * @prop {number | null} [minLength=null] - Set character min limit
+ *
+ * @prop {string} [pattern=""] - Set regular expression for input validation
+ *
+ * @attr {string} placeholder - Set placeholder text
+ * @prop {string} [placeholder=""] - Set placeholder text
+ *
+ * @attr {boolean} readonly - Set readonly state
+ * @prop {boolean} [readonly=false] - Set readonly state
+ *
+ * @attr {boolean} transparent - Disables all other states and border/background styles.
+ * @prop {boolean} [transparent=false] - Disables all other states and border/background styles.
+ *
+ * @attr {boolean} warning - Set warning state
+ * @prop {boolean} [warning=false] - Set warning state
+ */
+let DatetimeField = class DatetimeField extends TextField {
+    constructor() {
+        super(...arguments);
+        /**
+         * Delay selecting a part to ensure
+         * that scroll can be updated
+         */
+        this.selectPartFrame = new AnimationTaskRunner();
+        /**
+         * Set minimum date.
+         * This value must follow the `format` and be less
+         * than or equal to the value of the `max` attribute
+         */
+        this.min = null;
+        /**
+         * Set maximum date.
+         * This value must follow the `format` and be greater
+         * 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
+         */
+        this._locale = null;
+        this.interimValueState = false; // make sure that internal input field value is updated only on external value change
+        /**
+         * Currently selected part
+         */
+        this.partLabel = '';
+    }
+    /**
+     * Element version number
+     * @returns version number
+     */
+    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
+     * @default -
+     */
+    set value(value) {
+        this.interimValueState = true;
+        super.value = value;
+        // Always call update cycle when value is set externally
+        // This is to ensure that value and inputValue never run out of sync
+        this.requestUpdate('interimValueState', false);
+    }
+    get value() {
+        return super.value;
+    }
+    /**
+     * Returns the value of the element, interpreted as double number
+     */
+    get valueAsNumber() {
+        const date = this.valueAsDate;
+        return date ? date.getTime() : Number.NaN;
+    }
+    /**
+     * Set the value of the element, interpreted as double number
+     * @param value number value
+     */
+    set valueAsNumber(value) {
+        const date = new Date(value);
+        this.valueAsDate = date;
+    }
+    /**
+     * Returns the value of the element, interpreted as Date
+     */
+    get valueAsDate() {
+        return this.value ? utcParse(this.value) : null;
+    }
+    /**
+     * Set the value of the element, interpreted as Date
+     * @param value date value
+     */
+    set valueAsDate(value) {
+        this.value = value ? this.dateToString(value) : '';
+    }
+    /**
+     * 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');
+    }
+    /**
+     * Get today's date noon as the start date when the value is not set
+     */
+    get startDate() {
+        // Noon in UTC
+        const today = new Date();
+        const date = new Date(0);
+        date.setUTCFullYear(today.getFullYear());
+        date.setUTCMonth(today.getMonth());
+        date.setUTCDate(today.getDate());
+        date.setUTCHours(12);
+        return this.dateToString(date);
+    }
+    /**
+     * Updates the element
+     * @param changedProperties Properties that has changed
+     * @returns {void}
+     */
+    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 = '';
+        }
+    }
+    /**
+     * Check if input value should be synchronised with component value
+     * @param changedProperties Properties that has changed
+     * @returns True if input should be synchronised
+     */
+    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);
+    }
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    syncInputValue(changedProperties) {
+        this.interimValueState = false;
+        const inputValue = this.toInputValue(this.value);
+        if (inputValue !== this.inputValue) {
+            this.inputValue = inputValue; // setting the value resets selection
+        }
+    }
+    /**
+     * Check if input should be re-validated
+     * @param changedProperties Properties that has changed
+     * @returns True if input should be re-validated
+     */
+    shouldValidateInput(changedProperties) {
+        // TODO: this needs refactoring with all other fields to support common validation patterns
+        return (changedProperties.has(FocusedPropertyKey) && !this.focused);
+    }
+    /**
+     * Validate input according `pattern`, `minLength` and `maxLength` properties
+     * change state of `error` property according pattern validation
+     * @returns {void}
+     */
+    validateInput() {
+        this.reportValidity();
+    }
+    /**
+     * Override validation method for value
+     * @param value value
+     * @returns value validity
+     */
+    isValidValue(value) {
+        if (value === '') {
+            return true;
+        }
+        // value format depends on locale.
+        return getFormat(value) === this.locale.isoFormat;
+    }
+    /**
+     * Used to show a warning when the value does not pass the validation
+     * @param value that is invalid
+     * @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)}`);
+    }
+    /**
+     * Get Intl.DateTimeFormat object from locale
+     */
+    get formatter() {
+        return this.locale.formatter;
+    }
+    /**
+     * Try to format ISO date/time/datetime string into datetime format parts
+     * Throw an error if value is invalid
+     * @param value ISO string date/time/datetime
+     * @returns parts
+     */
+    formatToParts(value) {
+        const date = utcParse(value);
+        return this.formatter.formatToParts(date);
+    }
+    /**
+     * Format value to inputValue
+     * @param value Date string
+     * @returns inputValue
+     */
+    toInputValue(value) {
+        return value ? this.formatter.format(utcParse(value)) : '';
+    }
+    /**
+     * Format inputValue to value
+     * @param inputValue Date string
+     * @returns value
+     */
+    toValue(inputValue) {
+        let value = '';
+        try {
+            value = inputValue ? this.locale.parse(inputValue, this.value || this.startDate) : '';
+        }
+        catch (error) {
+            // do nothing
+        }
+        return value;
+    }
+    /**
+     * On *user-interaction* set the value and notify.
+     * @param value New value
+     * @returns {void}
+     */
+    setValueAndNotify(value) {
+        // must be called on super to avoid re-rendering of actual value
+        if (super.value !== value) {
+            super.value = value;
+            this.notifyPropertyChange('value', value);
+        }
+    }
+    /**
+     * Reset error state on input
+     * @returns {void}
+     */
+    resetError() {
+        if (this.error && this.checkValidity()) {
+            this.reportValidity();
+        }
+    }
+    /**
+     * Returns true if an input element contains valid data.
+     * @returns true if input is valid
+     */
+    checkValidity() {
+        const inputValue = this.inputValue;
+        // Invalid input value
+        if (inputValue && !this.toValue(inputValue)) {
+            return false;
+        }
+        const value = this.value;
+        // No support for required
+        if (value === '') {
+            return true;
+        }
+        // Value before min
+        if (this.min && value !== this.min && isBefore(value, this.min)) {
+            return false;
+        }
+        // Value after max
+        if (this.max && value !== this.max && isAfter(value, this.max)) {
+            return false;
+        }
+        return true;
+    }
+    /**
+     * Validate input. Mark as error if input is invalid
+     * @returns false if there is an error
+     */
+    reportValidity() {
+        const hasError = !this.checkValidity();
+        this.notifyErrorChange(hasError);
+        return !hasError;
+    }
+    /**
+     * Select part
+     * @param index Part index
+     * @param parts The list of parts
+     * @returns {void}
+     */
+    selectPart(index = 0, parts) {
+        const { selectionStart, selectionEnd } = selectPart(index, parts);
+        this.partLabel = parts[index] ? parts[index].type : '';
+        this.setSelectionRange(selectionStart, selectionEnd);
+    }
+    /**
+     * Change value or selection based on keyboard navigation
+     * @param key Navigation key
+     * @param event Keyboard event
+     * @returns {void}
+     */
+    onNavigation(key, event) {
+        this.selectPartFrame.cancel();
+        this.partLabel = '';
+        // Invalid value
+        if (this.inputValue && !this.value) {
+            return;
+        }
+        // Empty value
+        if (!this.inputValue) {
+            this.setValueAndNotify(this.startDate);
+            this.syncInputValue();
+            this.select();
+            event.preventDefault();
+            return;
+        }
+        // Set selection into cursor mode with Escape key
+        if (key === 'Escape') {
+            if (this.selectionStart !== this.selectionEnd) {
+                this.selectionStart = this.selectionEnd;
+                event.preventDefault();
+            }
+            return;
+        }
+        // Because of weak formatting, the result of formatting to part might be
+        // different to actual input value
+        const selection = {
+            selectionStart: this.selectionStart,
+            selectionEnd: this.selectionEnd
+        };
+        this.syncInputValue();
+        const parts = this.formatToParts(this.value);
+        const selectedPartIndex = getSelectedPartIndex(selection, parts);
+        // If no segments selected, select the segment where the cursor is
+        if (this.selectionStart === this.selectionEnd) {
+            this.selectPart(selectedPartIndex, parts);
+            event.preventDefault();
+            return;
+        }
+        const selectedPart = parts[selectedPartIndex];
+        switch (key) {
+            case 'ArrowUp':
+            case 'ArrowDown':
+                if (selectedPart) {
+                    let newValue = '';
+                    const amount = key === 'ArrowDown' ? -1 : 1;
+                    switch (selectedPart.type) {
+                        case 'year':
+                        case 'month':
+                        case 'day':
+                        case 'hour':
+                        case 'minute':
+                        case 'second':
+                            newValue = iterateUnit(this.value, selectedPart.type, amount);
+                            break;
+                        case 'weekday':
+                            newValue = iterateUnit(this.value, 'day', amount);
+                            break;
+                        case 'dayPeriod':
+                            newValue = iterateUnit(this.value, 'hour', amount * 12);
+                            break;
+                        case 'fractionalSecond':
+                            newValue = iterateUnit(this.value, 'millisecond', amount * 100);
+                            break;
+                        // no default
+                    }
+                    this.setValueAndNotify(newValue);
+                    this.syncInputValue();
+                    this.selectPart(selectedPartIndex, this.formatToParts(newValue));
+                    this.resetError();
+                    event.preventDefault();
+                }
+                break;
+            case 'ArrowRight':
+            case 'ArrowLeft':
+                const nextPartIdx = getNextSelectedPartIndex(selection, parts, this.inputValue, key === 'ArrowLeft' ? Direction.Down : Direction.Up);
+                this.selectPartFrame.schedule(() => {
+                    this.selectPart(nextPartIdx, parts);
+                });
+                break;
+            // no default
+        }
+    }
+    /**
+     * Check if value is changed and fire event
+     * @returns {void}
+     */
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    onPossibleValueChange(event) {
+        // Nobody likes to see a red border
+        this.resetError();
+        this.selectPartFrame.cancel(); // ensure no pending selection
+        this.partLabel = '';
+        const inputValue = this.inputElement?.value || '';
+        const parsedValue = this.toValue(inputValue);
+        this.setValueAndNotify(parsedValue);
+    }
+    /**
+     * Handles key down input event
+     * @param event Key down event object
+     * @returns {void}
+     */
+    onInputKeyDown(event) {
+        if (this.readonly || this.disabled || event.defaultPrevented) {
+            return;
+        }
+        // Ignore special keys
+        if (event.shiftKey || event.ctrlKey || event.altKey || event.metaKey) {
+            return;
+        }
+        switch (event.key) {
+            case 'Up': // IE11
+            case 'ArrowUp':
+                this.onNavigation('ArrowUp', event);
+                break;
+            case 'Down':
+            case 'ArrowDown':
+                this.onNavigation('ArrowDown', event);
+                break;
+            case 'Left':
+            case 'ArrowLeft':
+                this.onNavigation('ArrowLeft', event);
+                break;
+            case 'Right':
+            case 'ArrowRight':
+                this.onNavigation('ArrowRight', event);
+                break;
+            case 'Esc':
+            case 'Escape':
+                this.onNavigation('Escape', event);
+                break;
+            default:
+                return;
+        }
+    }
+    /**
+     * Decorate `<input>` element with common properties.
+     * @returns template map
+     */
+    get decorateInputMap() {
+        return {
+            ...super.decorateInputMap,
+            '@keydown': this.onInputKeyDown
+        };
+    }
+    /**
+     * Used to announce part and value statuses
+     */
+    get screenReaderTemplate() {
+        if (!this.focused) {
+            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}
+      <div
+        aria-label="${this.value ? this.t('VALUE', { value: this.toInputValue(this.value) }) : this.t('NO_VALUE')}"
+        aria-live="polite"
+        role="status"></div>
+    `;
+    }
+    /**
+     * A `TemplateResult` that will be used
+     * to render the updated internal template.
+     * @return Render template
+     */
+    render() {
+        return html `
+      ${super.render()}
+      ${this.screenReaderTemplate}
+    `;
+    }
+};
+__decorate([
+    property({ type: String, reflect: true })
+], DatetimeField.prototype, "min", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], DatetimeField.prototype, "max", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], DatetimeField.prototype, "timepicker", null);
+__decorate([
+    property({ type: Boolean, attribute: 'show-seconds', reflect: true })
+], DatetimeField.prototype, "showSeconds", null);
+__decorate([
+    property({ type: Boolean, attribute: 'am-pm', reflect: true })
+], DatetimeField.prototype, "amPm", null);
+__decorate([
+    property({ attribute: false })
+], DatetimeField.prototype, "formatOptions", null);
+__decorate([
+    translate({ mode: 'directive', scope: 'ef-datetime-field' })
+], DatetimeField.prototype, "t", void 0);
+__decorate([
+    property({ type: String })
+], DatetimeField.prototype, "value", null);
+__decorate([
+    state()
+], DatetimeField.prototype, "partLabel", void 0);
+DatetimeField = __decorate([
+    customElement('ef-datetime-field')
+], DatetimeField);
+export { DatetimeField };

package/lib/datetime-field/themes/halo/dark/index.js

@@ -0,0 +1,3 @@
+import '@refinitiv-ui/elements/text-field/themes/halo/dark';
+
+elf.customStyles.define('ef-datetime-field', '');

package/lib/datetime-field/themes/halo/light/index.js

@@ -0,0 +1,3 @@
+import '@refinitiv-ui/elements/text-field/themes/halo/light';
+
+elf.customStyles.define('ef-datetime-field', '');

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

@@ -0,0 +1,3 @@
+import '@refinitiv-ui/elements/text-field/themes/solar/charcoal';
+
+elf.customStyles.define('ef-datetime-field', '');

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

@@ -0,0 +1,3 @@
+import '@refinitiv-ui/elements/text-field/themes/solar/pearl';
+
+elf.customStyles.define('ef-datetime-field', '');

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

@@ -0,0 +1,10 @@
+export declare type NavigationKeys = 'ArrowLeft' | 'ArrowRight' | 'ArrowUp' | 'ArrowDown' | 'Escape';
+export declare type DateTimeFormatPartTypes = Intl.DateTimeFormatPartTypes | 'fractionalSecond';
+export interface DateTimeFormatPart {
+    type: DateTimeFormatPartTypes;
+    value: string;
+}
+export declare type InputSelection = {
+    selectionStart: number | null;
+    selectionEnd: number | null;
+};

package/lib/datetime-field/types.js

@@ -0,0 +1 @@
+export {};