@refinitiv-ui/elements 7.4.0 → 7.6.0

package/CHANGELOG.md

@@ -3,6 +3,29 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [7.6.0](https://github.com/Refinitiv/refinitiv-ui/compare/@refinitiv-ui/elements@7.5.0...@refinitiv-ui/elements@7.6.0) (2023-09-25)
+
+### Bug Fixes
+
+- **interactive-chart:** invalid legend render when add new seriesList ([#954](https://github.com/Refinitiv/refinitiv-ui/issues/954)) ([f8706b6](https://github.com/Refinitiv/refinitiv-ui/commit/f8706b6da7ad5c49b6abbadce853c339bd5a77b8))
+- **tree-select:** show invalid values when click on cancel button on selected view ([#964](https://github.com/Refinitiv/refinitiv-ui/issues/964)) ([49302bc](https://github.com/Refinitiv/refinitiv-ui/commit/49302bc1af0edec984e77083cdcdb31ba068c0c8))
+
+### Features
+
+- **calendar:** introduce before-cell-render event ([#926](https://github.com/Refinitiv/refinitiv-ui/issues/926)) ([ff2164f](https://github.com/Refinitiv/refinitiv-ui/commit/ff2164f5794d874064f167c363a476fe7a3836e1))
+
+# [7.5.0](https://github.com/Refinitiv/refinitiv-ui/compare/@refinitiv-ui/elements@7.4.0...@refinitiv-ui/elements@7.5.0) (2023-09-18)
+
+### Bug Fixes
+
+- **slider:** incorrect updating `to` value ([#938](https://github.com/Refinitiv/refinitiv-ui/issues/938)) ([8479abc](https://github.com/Refinitiv/refinitiv-ui/commit/8479abc828571e06379b5f389058f60d5ba8443b))
+- **slider:** number field not revalidate when error state changes ([#942](https://github.com/Refinitiv/refinitiv-ui/issues/942)) ([5fc64a6](https://github.com/Refinitiv/refinitiv-ui/commit/5fc64a6ac21cdbbf820ae97de04ec19443755e50))
+
+### Features
+
+- **fields:** improve validation consistency for field elements ([#937](https://github.com/Refinitiv/refinitiv-ui/issues/937)) ([d58051c](https://github.com/Refinitiv/refinitiv-ui/commit/d58051c0b4d3508ac55d223299fd8bf267458ddf))
+- **utils:** add `selectedAt` property to `DataItem` interface ([4d69419](https://github.com/Refinitiv/refinitiv-ui/commit/4d69419107d8ed8dd554cb7cf0ecadd327d02f18))
+
 # [7.4.0](https://github.com/Refinitiv/refinitiv-ui/compare/@refinitiv-ui/elements@7.3.2...@refinitiv-ui/elements@7.4.0) (2023-09-11)
 
 ### Features

package/LICENSE

@@ -1,4 +1,4 @@
-Copyright © 2023, Refinitiv.
+Copyright © 2023, LSEG
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.

package/README.md

@@ -1,6 +1,6 @@
 # Element Framework
 
-Element Framework (EF) is a collection of elements that includes theming capability within the Refinitiv Workspace's design system. The elements are a set of web components which is a standard web technology and can be utilized across all browsers.
+Element Framework (EF) is a collection of elements that includes theming capability within the LSEG Workspace's design system. The elements are a set of web components which is a standard web technology and can be utilized across all browsers.
 
 ## Usage
 
@@ -10,17 +10,17 @@ EF elements are published under single package.
 npm install @refinitiv-ui/elements
 ```
 
-The elements are required theme to instantiate itself in the app. Refinitiv Workspace's design system is called Halo theme and you can install it from npm command.
+The elements are required theme to instantiate itself in the app. LSEG Workspace's design system is called Halo theme and you can install it from npm command.
 
 ```sh
 npm install @refinitiv-ui/halo-theme
 ```
 
-Finally, import both elements that you want to use and its themes into your application and it is ready to go. To follow Refinitiv Workspace's design system, it is required styles of some native elements e.g. typography.
+Finally, import both elements that you want to use and its themes into your application and it is ready to go. To follow LSEG Workspace's design system, it is required styles of some native elements e.g. typography.
 
 <br>
 
-> The font "Proxima Nova Fin" shall only be used within Refinitiv products or services. The copyright owner must approve any use of such font outside of Refinitiv products or services, which may be subject to a fee. Please see https://www.fontspring.com/lic/fontspring/webfont#license_text
+> The font "Proxima Nova Fin" shall only be used within LSEG products or services. The copyright owner must approve any use of such font outside of LSEG products or services, which may be subject to a fee. Please see https://www.fontspring.com/lic/fontspring/webfont#license_text
 
 <br>
 
@@ -57,4 +57,4 @@ See list of elements, demo and more tutorial by visiting [EF Documentation](http
 
 # License
 
-Apache License 2.0. However, Halo theme shall only be used within Refinitiv products or services due to license of the font "Proxima Nova Fin".
+Apache License 2.0. However, Halo theme shall only be used within LSEG products or services due to license of the font "Proxima Nova Fin".

package/lib/calendar/constants.d.ts

@@ -1,4 +1,4 @@
-export declare enum RenderView {
+export declare enum CalendarRenderView {
     DAY = "day",
     MONTH = "month",
     YEAR = "year"

package/lib/calendar/constants.js

@@ -1,10 +1,11 @@
 import { uuid } from '@refinitiv-ui/utils/uuid.js';
-export var RenderView;
-(function (RenderView) {
-    RenderView["DAY"] = "day";
-    RenderView["MONTH"] = "month";
-    RenderView["YEAR"] = "year";
-})(RenderView || (RenderView = {}));
+// public API
+export var CalendarRenderView;
+(function (CalendarRenderView) {
+    CalendarRenderView["DAY"] = "day";
+    CalendarRenderView["MONTH"] = "month";
+    CalendarRenderView["YEAR"] = "year";
+})(CalendarRenderView || (CalendarRenderView = {}));
 export const FIRST_DAY_OF_WEEK = 0; // 0 for Sunday
 export const YEARS_PER_YEAR_VIEW = 16; /* must be a square number */
 export const DAY_VIEW = {

package/lib/calendar/custom-elements.json

@@ -181,6 +181,10 @@
         }
       ],
       "events": [
+        {
+          "name": "before-cell-render",
+          "description": "Fired before calendar renders each cell along with `cell` model."
+        },
         {
           "name": "value-changed",
           "description": "Fired when the user commits a date change. The event is not triggered if `value` is changed programmatically."

package/lib/calendar/custom-elements.md

@@ -23,10 +23,11 @@ Standard calendar element
 
 ## Events
 
-| Event           | Description                                      |
-|-----------------|--------------------------------------------------|
-| `value-changed` | Fired when the user commits a date change. The event is not triggered if `value` is changed programmatically. |
-| `view-changed`  | Fired when the user changes a view of calendar e.g. changed to next month page. The event is not triggered if `view` property is changed programmatically. |
+| Event                | Description                                      |
+|----------------------|--------------------------------------------------|
+| `before-cell-render` | Fired before calendar renders each cell along with `cell` model. |
+| `value-changed`      | Fired when the user commits a date change. The event is not triggered if `value` is changed programmatically. |
+| `view-changed`       | Fired when the user changes a view of calendar e.g. changed to next month page. The event is not triggered if `view` property is changed programmatically. |
 
 ## Slots
 

package/lib/calendar/index.d.ts

@@ -3,12 +3,16 @@ import { CSSResultGroup, ControlElement, MultiValue, PropertyValues, TemplateRes
 import '@refinitiv-ui/phrasebook/locale/en/calendar.js';
 import { TranslateDirective, TranslatePromise } from '@refinitiv-ui/translate';
 import '../button/index.js';
+import { CalendarRenderView } from './constants.js';
 import './locales.js';
-import type { CalendarFilter } from './types';
-export { CalendarFilter };
+import type { BeforeCellRenderEvent, CalendarFilter } from './types';
+export { CalendarRenderView };
+export type { CalendarCell } from './types';
+export type { CalendarFilter, BeforeCellRenderEvent };
 /**
  * Standard calendar element
  *
+ * @fires before-cell-render - Fired before calendar renders each cell along with `cell` model.
  * @fires value-changed - Fired when the user commits a date change. The event is not triggered if `value` is changed programmatically.
  * @fires view-changed - Fired when the user changes a view of calendar e.g. changed to next month page. The event is not triggered if `view` property is changed programmatically.
  *
@@ -381,9 +385,15 @@ export declare class Calendar extends ControlElement implements MultiValue {
      * @returns key Translate label key
      */
     private getCellLabelKey;
+    /**
+     * fire 'before-cell-render' event
+     * @param cell Cell
+     * @returns {void}
+     */
+    private dispatchBeforeCellRender;
     /**
      * Render cell template. Cell can be a day, month or year
-     * @param cell Cell object
+     * @param cell Cell
      * @returns template result
      */
     private renderCell;

package/lib/calendar/index.js

@@ -12,12 +12,14 @@ import { DateFormat, addMonths, format, isAfter, isBefore, isSameDay, isSameMont
 import { down, first, last, left, right, up } from '@refinitiv-ui/utils/navigation.js';
 import '../button/index.js';
 import { VERSION } from '../version.js';
-import { CalendarLocaleScope, DAY_VIEW, FIRST_DAY_OF_WEEK, MONTH_VIEW, RenderView, YEARS_PER_YEAR_VIEW, YEAR_VIEW } from './constants.js';
+import { CalendarLocaleScope, CalendarRenderView, DAY_VIEW, FIRST_DAY_OF_WEEK, MONTH_VIEW, YEARS_PER_YEAR_VIEW, YEAR_VIEW } from './constants.js';
 import './locales.js';
-import { ViewFormatTranslateParams, monthInfo, monthsNames, weekdaysNames } from './utils.js';
+import { ViewFormatTranslateParams, monthInfo, monthsNames, toCalendarCell, weekdaysNames } from './utils.js';
+export { CalendarRenderView };
 /**
  * Standard calendar element
  *
+ * @fires before-cell-render - Fired before calendar renders each cell along with `cell` model.
  * @fires value-changed - Fired when the user commits a date change. The event is not triggered if `value` is changed programmatically.
  * @fires view-changed - Fired when the user changes a view of calendar e.g. changed to next month page. The event is not triggered if `view` property is changed programmatically.
  *
@@ -72,7 +74,7 @@ let Calendar = class Calendar extends ControlElement {
         /**
          * Used for internal navigation between render views
          */
-        this._renderView = RenderView.DAY;
+        this._renderView = CalendarRenderView.DAY;
         /**
          * Used for keyboard navigation when trying
          * to restore focus on re-render and control navigation
@@ -578,7 +580,8 @@ let Calendar = class Calendar extends ControlElement {
      */
     onRenderViewTap(event) {
         if (!event.defaultPrevented) {
-            this.renderView = this.renderView === RenderView.DAY ? RenderView.YEAR : RenderView.DAY;
+            this.renderView =
+                this.renderView === CalendarRenderView.DAY ? CalendarRenderView.YEAR : CalendarRenderView.DAY;
         }
     }
     /**
@@ -592,8 +595,8 @@ let Calendar = class Calendar extends ControlElement {
         }
         switch (event.key) {
             case 'Escape':
-                if (this.renderView === RenderView.YEAR || this.renderView === RenderView.MONTH) {
-                    this.renderView = RenderView.DAY;
+                if (this.renderView === CalendarRenderView.YEAR || this.renderView === CalendarRenderView.MONTH) {
+                    this.renderView = CalendarRenderView.DAY;
                     break;
                 }
                 return;
@@ -656,20 +659,20 @@ let Calendar = class Calendar extends ControlElement {
         this.activeCellIndex = cell.index;
         const cellSegment = toDateSegment(cell.value);
         const viewSegment = toDateSegment(this.view);
-        if (this.renderView === RenderView.YEAR) {
+        if (this.renderView === CalendarRenderView.YEAR) {
             /* YEAR -> MONTH */
             viewSegment.year = cellSegment.year;
             if (this.notifyViewChange(viewSegment)) {
-                this.renderView = RenderView.MONTH;
+                this.renderView = CalendarRenderView.MONTH;
             }
             return;
         }
-        if (this.renderView === RenderView.MONTH) {
+        if (this.renderView === CalendarRenderView.MONTH) {
             /* MONTH -> DAY */
             viewSegment.year = cellSegment.year;
             viewSegment.month = cellSegment.month;
             if (this.notifyViewChange(viewSegment)) {
-                this.renderView = RenderView.DAY;
+                this.renderView = CalendarRenderView.DAY;
             }
             return;
         }
@@ -753,13 +756,13 @@ let Calendar = class Calendar extends ControlElement {
     toNextView() {
         let viewSegment = toDateSegment(this.view);
         switch (this.renderView) {
-            case RenderView.DAY:
+            case CalendarRenderView.DAY:
                 viewSegment = toDateSegment(addMonths(this.view, 1));
                 break;
-            case RenderView.MONTH:
+            case CalendarRenderView.MONTH:
                 viewSegment.year += 1;
                 break;
-            case RenderView.YEAR:
+            case CalendarRenderView.YEAR:
                 viewSegment.year += YEARS_PER_YEAR_VIEW;
                 break;
             // no default
@@ -773,13 +776,13 @@ let Calendar = class Calendar extends ControlElement {
     toPreviousView() {
         let viewSegment = toDateSegment(this.view);
         switch (this.renderView) {
-            case RenderView.DAY:
+            case CalendarRenderView.DAY:
                 viewSegment = toDateSegment(subMonths(this.view, 1));
                 break;
-            case RenderView.MONTH:
+            case CalendarRenderView.MONTH:
                 viewSegment.year -= 1;
                 break;
-            case RenderView.YEAR:
+            case CalendarRenderView.YEAR:
                 viewSegment.year -= YEARS_PER_YEAR_VIEW;
                 break;
             // no default
@@ -874,9 +877,9 @@ let Calendar = class Calendar extends ControlElement {
     get formattedViewRender() {
         const segment = toDateSegment(this.view);
         switch (this.renderView) {
-            case RenderView.MONTH:
+            case CalendarRenderView.MONTH:
                 return this.viewFormattedDate(segment);
-            case RenderView.YEAR:
+            case CalendarRenderView.YEAR:
                 const month = segment.month;
                 const day = segment.day;
                 const fromYear = Math.floor(segment.year / YEARS_PER_YEAR_VIEW) * YEARS_PER_YEAR_VIEW;
@@ -884,7 +887,7 @@ let Calendar = class Calendar extends ControlElement {
                 const fromView = this.viewFormattedDate({ year: fromYear, month, day });
                 const toView = this.viewFormattedDate({ year: toYear, month, day });
                 return html `${fromView} - ${toView}`;
-            case RenderView.DAY:
+            case CalendarRenderView.DAY:
             default:
                 return this.viewFormattedDate(segment, true);
         }
@@ -938,7 +941,7 @@ let Calendar = class Calendar extends ControlElement {
      * Get year view template
      */
     get yearView() {
-        const view = RenderView.YEAR;
+        const view = CalendarRenderView.YEAR;
         const currentYear = toDateSegment(this.view).year;
         const startIdx = Math.floor(currentYear / YEARS_PER_YEAR_VIEW) * YEARS_PER_YEAR_VIEW;
         const years = [];
@@ -973,7 +976,7 @@ let Calendar = class Calendar extends ControlElement {
      * Get month view template
      */
     get monthView() {
-        const view = RenderView.MONTH;
+        const view = CalendarRenderView.MONTH;
         const currentYear = toDateSegment(this.view).year;
         const columnCount = MONTH_VIEW.columnCount;
         const monthCount = 12;
@@ -1018,7 +1021,7 @@ let Calendar = class Calendar extends ControlElement {
      * Get day view template
      */
     get dayView() {
-        const view = RenderView.DAY;
+        const view = CalendarRenderView.DAY;
         const firstDayOfWeek = this.firstDayOfWeek;
         const padding = (7 + utcParse(this.view).getUTCDay() - firstDayOfWeek) % 7;
         const viewMonth = monthInfo(this.view);
@@ -1111,13 +1114,13 @@ let Calendar = class Calendar extends ControlElement {
     get viewRender() {
         let renderView;
         switch (this.renderView) {
-            case RenderView.MONTH:
+            case CalendarRenderView.MONTH:
                 renderView = this.monthView;
                 break;
-            case RenderView.YEAR:
+            case CalendarRenderView.YEAR:
                 renderView = this.yearView;
                 break;
-            case RenderView.DAY:
+            case CalendarRenderView.DAY:
             default:
                 renderView = this.dayView;
         }
@@ -1140,12 +1143,32 @@ let Calendar = class Calendar extends ControlElement {
         }
         return 'CELL_LABEL';
     }
+    /**
+     * fire 'before-cell-render' event
+     * @param cell Cell
+     * @returns {void}
+     */
+    dispatchBeforeCellRender(cell) {
+        const calendarCell = toCalendarCell(cell);
+        const event = new CustomEvent('before-cell-render', {
+            cancelable: false,
+            composed: true,
+            detail: {
+                cell: calendarCell
+            }
+        });
+        this.dispatchEvent(event);
+    }
     /**
      * Render cell template. Cell can be a day, month or year
-     * @param cell Cell object
+     * @param cell Cell
      * @returns template result
      */
     renderCell(cell) {
+        // there is no slot for cells with falsy value
+        if (cell.value) {
+            this.dispatchBeforeCellRender(cell);
+        }
         const isSelection = cell.value !== undefined;
         const isSelectable = isSelection && !cell.disabled;
         const isSelected = cell.selected ? 'true' : 'false';
@@ -1201,12 +1224,12 @@ let Calendar = class Calendar extends ControlElement {
         let nextBtnAriaLabel = this.t('NEXT_MONTH');
         let viewBtnAriaLabel = this.t('YEAR_SELECTOR');
         switch (this.renderView) {
-            case RenderView.YEAR:
+            case CalendarRenderView.YEAR:
                 prevBtnAriaLabel = this.t('PREVIOUS_DECADE');
                 nextBtnAriaLabel = this.t('NEXT_DECADE');
                 viewBtnAriaLabel = this.t('DATE_SELECTOR');
                 break;
-            case RenderView.MONTH:
+            case CalendarRenderView.MONTH:
                 prevBtnAriaLabel = this.t('PREVIOUS_YEAR');
                 nextBtnAriaLabel = this.t('NEXT_YEAR');
                 viewBtnAriaLabel = this.t('DATE_SELECTOR');
@@ -1226,7 +1249,7 @@ let Calendar = class Calendar extends ControlElement {
         aria-description="${viewBtnAriaLabel}"
         part="btn-view"
         textpos="before"
-        .icon="${this.renderView === RenderView.DAY ? 'down' : 'up'}"
+        .icon="${this.renderView === CalendarRenderView.DAY ? 'down' : 'up'}"
         @tap="${this.onRenderViewTap}"
         >${this.formattedViewRender}</ef-button
       >

package/lib/calendar/types.d.ts

@@ -1,5 +1,5 @@
 import { CellIndex } from '@refinitiv-ui/utils/navigation.js';
-import { RenderView } from './constants.js';
+import { CalendarRenderView } from './constants.js';
 export interface CellSelectionModel {
     selected?: boolean;
     range?: boolean;
@@ -9,7 +9,7 @@ export interface CellSelectionModel {
     lastDate?: boolean;
 }
 export interface Cell extends CellSelectionModel {
-    view: RenderView;
+    view: CalendarRenderView;
     text?: string;
     active?: boolean;
     value?: string;
@@ -30,3 +30,22 @@ export type WeekdayName = {
     narrow: string;
     long: string;
 };
+export type CalendarCell = {
+    active: boolean;
+    disabled: boolean;
+    firstDate: boolean;
+    idle: boolean;
+    index: CellIndex;
+    lastDate: boolean;
+    now: boolean;
+    range: boolean;
+    rangeFrom: boolean;
+    rangeTo: boolean;
+    selected: boolean;
+    text: string;
+    value: string;
+    view: CalendarRenderView;
+};
+export type BeforeCellRenderEvent = CustomEvent<{
+    cell: CalendarCell;
+}>;

package/lib/calendar/utils.d.ts

@@ -1,4 +1,5 @@
 import { TranslateParams } from '@refinitiv-ui/i18n';
+import { CalendarCell, Cell } from './types.js';
 export type MonthInfo = {
     days: number;
     month: number;
@@ -28,4 +29,11 @@ declare const monthsNames: (locale: string, width?: Intl.DateTimeFormatOptions['
  * Used to format views
  */
 declare const ViewFormatTranslateParams: TranslateParams;
-export { monthInfo, weekdaysNames, monthsNames, ViewFormatTranslateParams };
+/**
+ * convert internal Cell to CalendarCell
+ * avoid introducing breaking changes to the API
+ * @param cell Cell
+ * @returns CalendarCell
+ */
+declare const toCalendarCell: (cell: Cell) => CalendarCell;
+export { monthInfo, weekdaysNames, monthsNames, toCalendarCell, ViewFormatTranslateParams };

package/lib/calendar/utils.js

@@ -99,4 +99,27 @@ const ViewFormatTranslateParams = {
     },
     formats: DateMessageFormats
 };
-export { monthInfo, weekdaysNames, monthsNames, ViewFormatTranslateParams };
+/**
+ * convert internal Cell to CalendarCell
+ * avoid introducing breaking changes to the API
+ * @param cell Cell
+ * @returns CalendarCell
+ */
+const toCalendarCell = (cell) => {
+    return {
+        ...cell,
+        active: cell.active || false,
+        disabled: cell.disabled || false,
+        firstDate: cell.firstDate || false,
+        idle: cell.idle || false,
+        lastDate: cell.lastDate || false,
+        now: cell.now || false,
+        range: cell.range || false,
+        rangeFrom: cell.rangeFrom || false,
+        rangeTo: cell.rangeTo || false,
+        selected: cell.selected || false,
+        text: cell.text ?? '',
+        value: cell.value ?? ''
+    };
+};
+export { monthInfo, weekdaysNames, monthsNames, toCalendarCell, ViewFormatTranslateParams };

package/lib/combo-box/index.js

@@ -288,9 +288,11 @@ let ComboBox = class ComboBox extends FormFieldElement {
      * @returns {void}
      */
     updateComposerValues(newValues) {
+        const selectedAt = Date.now();
         this.queryItems((item, composer) => {
             if (newValues.includes(composer.getItemPropertyValue(item, 'value'))) {
                 composer.setItemPropertyValue(item, 'selected', true);
+                composer.setItemPropertyValue(item, 'selectedAt', selectedAt + newValues.indexOf(item.value ?? '')); // Sequential selection
                 return true;
             }
             composer.setItemPropertyValue(item, 'selected', false);

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

@@ -258,11 +258,6 @@
           "name": "checkValidity",
           "description": "Returns true if an input element contains valid data.",
           "params": []
-        },
-        {
-          "name": "reportValidity",
-          "description": "Validate input. Mark as error if input is invalid",
-          "params": []
         }
       ]
     }

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

@@ -37,11 +37,10 @@ A form control element for datetime input.
 
 ## Methods
 
-| Method           | Type                             | Description                                      |
-|------------------|----------------------------------|--------------------------------------------------|
-| `checkValidity`  | `(): boolean`                    | Returns true if an input element contains valid data. |
-| `reportValidity` | `(): boolean`                    | Validate input. Mark as error if input is invalid |
-| `willUpdate`     | `(changedProperties: any): void` | Updates the element<br /><br />**changedProperties**: Properties that has changed |
+| Method          | Type                             | Description                                      |
+|-----------------|----------------------------------|--------------------------------------------------|
+| `checkValidity` | `(): boolean`                    | Returns true if an input element contains valid data. |
+| `willUpdate`    | `(changedProperties: any): void` | Updates the element<br /><br />**changedProperties**: Properties that has changed |
 
 ## Events
 

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

@@ -186,18 +186,6 @@ export declare class DatetimeField extends TextField {
      * @returns {void}
      */
     protected syncInputValue(changedProperties?: PropertyValues): void;
-    /**
-     * Check if input should be re-validated
-     * @param changedProperties Properties that has changed
-     * @returns True if input should be re-validated
-     */
-    protected shouldValidateInput(changedProperties: PropertyValues): boolean;
-    /**
-     * Validate input according `pattern`, `minLength` and `maxLength` properties
-     * change state of `error` property according pattern validation
-     * @returns {void}
-     */
-    protected validateInput(): void;
     /**
      * Override validation method for value
      * @param value value
@@ -244,21 +232,11 @@ export declare class DatetimeField extends TextField {
      * @returns {void}
      */
     protected setValueAndNotify(value: string): void;
-    /**
-     * Reset error state on input
-     * @returns {void}
-     */
-    protected resetError(): void;
     /**
      * Returns true if an input element contains valid data.
      * @returns true if input is valid
      */
     checkValidity(): boolean;
-    /**
-     * Validate input. Mark as error if input is invalid
-     * @returns false if there is an error
-     */
-    reportValidity(): boolean;
     /**
      * Select part
      * @param parts The list of parts

package/lib/datetime-field/index.js

@@ -294,23 +294,6 @@ let DatetimeField = class DatetimeField extends TextField {
             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
@@ -399,15 +382,6 @@ let DatetimeField = class DatetimeField extends TextField {
             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
@@ -433,15 +407,6 @@ let DatetimeField = class DatetimeField extends TextField {
         }
         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 parts The list of parts
@@ -527,7 +492,7 @@ let DatetimeField = class DatetimeField extends TextField {
                     this.setValueAndNotify(newValue);
                     this.syncInputValue();
                     this.selectPart(this.formatToParts(newValue), selectedPartIndex);
-                    this.resetError();
+                    this.reportValidity();
                     event.preventDefault();
                 }
                 break;
@@ -547,8 +512,7 @@ let DatetimeField = class DatetimeField extends TextField {
      */
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     onPossibleValueChange(event) {
-        // Nobody likes to see a red border
-        this.resetError();
+        this.reportValidity();
         this.selectPartFrame.cancel(); // ensure no pending selection
         this.partLabel = '';
         const inputValue = this.inputElement?.value || '';

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

@@ -180,6 +180,18 @@
           "name": "icon-click",
           "description": "Fired when the user taps on icon added into control's slot."
         }
+      ],
+      "methods": [
+        {
+          "name": "checkValidity",
+          "description": "Returns `true` if the element input is valid; otherwise, returns `false`.",
+          "params": []
+        },
+        {
+          "name": "reportValidity",
+          "description": "Validate the element input and mark it as error if its input is invalid.",
+          "params": []
+        }
       ]
     }
   ]