@refinitiv-ui/elements 7.8.0 → 7.9.1

package/CHANGELOG.md

@@ -3,6 +3,18 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [7.9.1](https://github.com/Refinitiv/refinitiv-ui/compare/@refinitiv-ui/elements@7.9.0...@refinitiv-ui/elements@7.9.1) (2023-11-13)
+
+### Bug Fixes
+
+- **time-picker:** remove pre-populate value ([#995](https://github.com/Refinitiv/refinitiv-ui/issues/995)) ([afe008c](https://github.com/Refinitiv/refinitiv-ui/commit/afe008c1059031d28f6a6c6cff79caf8f301acaa))
+
+# [7.9.0](https://github.com/Refinitiv/refinitiv-ui/compare/@refinitiv-ui/elements@7.8.0...@refinitiv-ui/elements@7.9.0) (2023-11-06)
+
+### Features
+
+- **core, elements:** custom validation for form fields ([#996](https://github.com/Refinitiv/refinitiv-ui/issues/996)) ([b8655a2](https://github.com/Refinitiv/refinitiv-ui/commit/b8655a2d2ea42aa16767ba1bd8b5ce9c67912f36))
+
 # [7.8.0](https://github.com/Refinitiv/refinitiv-ui/compare/@refinitiv-ui/elements@7.7.0...@refinitiv-ui/elements@7.8.0) (2023-10-31)
 
 ### Bug Fixes

package/lib/color-dialog/index.d.ts

@@ -138,7 +138,9 @@ export declare class ColorDialog extends Dialog {
      */
     protected update(changedProperties: PropertyValues): void;
     /**
-     * @inheritdoc
+     * Make sure that confirm/cancel events are fired appropriately
+     * All internal opened set events can be stoppable externally
+     * Use this instead of setting opened directly
      * Reset value model
      * @param opened True if opened
      * @returns {void}

package/lib/color-dialog/index.js

@@ -211,7 +211,9 @@ let ColorDialog = class ColorDialog extends Dialog {
         super.update(changedProperties);
     }
     /**
-     * @inheritdoc
+     * Make sure that confirm/cancel events are fired appropriately
+     * All internal opened set events can be stoppable externally
+     * Use this instead of setting opened directly
      * Reset value model
      * @param opened True if opened
      * @returns {void}

package/lib/combo-box/helpers/filter.js

@@ -1,3 +1,4 @@
+import escapeStringRegexp from 'escape-string-regexp';
 /**
  * Default filter used by combo box
  * @param el ComboBox instance to filter
@@ -13,8 +14,8 @@ export const defaultFilter = (el) => {
     // only created once per query
     const getRegularExpressionOfQuery = () => {
         if (el.query !== query || !queryRegExp) {
-            query = el.query || '';
-            queryRegExp = new RegExp(query.replace(/(\W)/g, '\\$1'), 'i');
+            query = el.query ?? '';
+            queryRegExp = new RegExp(escapeStringRegexp(query), 'i');
         }
         return queryRegExp;
     };

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

@@ -11,6 +11,21 @@
           "type": "boolean",
           "default": "false"
         },
+        {
+          "name": "pattern",
+          "description": "Set regular expression for input validation",
+          "type": "string | null"
+        },
+        {
+          "name": "maxlength",
+          "description": "Set character max limit",
+          "type": "number | null"
+        },
+        {
+          "name": "minlength",
+          "description": "Set character min limit",
+          "type": "number | null"
+        },
         {
           "name": "disabled",
           "description": "Set disabled state",
@@ -68,16 +83,6 @@
           "name": "icon-has-action",
           "description": "Specify when icon need to be clickable",
           "type": "boolean"
-        },
-        {
-          "name": "maxlength",
-          "description": "Set character max limit",
-          "type": "number"
-        },
-        {
-          "name": "minlength",
-          "description": "Set character min limit",
-          "type": "number"
         }
       ],
       "properties": [
@@ -88,6 +93,24 @@
           "type": "boolean",
           "default": "false"
         },
+        {
+          "name": "pattern",
+          "attribute": "pattern",
+          "description": "Set regular expression for input validation",
+          "type": "string | null"
+        },
+        {
+          "name": "maxLength",
+          "attribute": "maxlength",
+          "description": "Set character max limit",
+          "type": "number | null"
+        },
+        {
+          "name": "minLength",
+          "attribute": "minlength",
+          "description": "Set character min limit",
+          "type": "number | null"
+        },
         {
           "name": "disabled",
           "attribute": "disabled",
@@ -115,22 +138,6 @@
           "type": "boolean",
           "default": "false"
         },
-        {
-          "name": "maxLength",
-          "description": "Set character max limit",
-          "type": "number | null"
-        },
-        {
-          "name": "minLength",
-          "description": "Set character min limit",
-          "type": "number | null"
-        },
-        {
-          "name": "pattern",
-          "description": "Set regular expression for input validation",
-          "type": "string",
-          "default": "\"\""
-        },
         {
           "name": "placeholder",
           "attribute": "placeholder",

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

@@ -7,8 +7,6 @@ A form control element for email.
 | Attribute         | Type      | Description                            |
 |-------------------|-----------|----------------------------------------|
 | `icon-has-action` | `boolean` | Specify when icon need to be clickable |
-| `maxlength`       | `number`  | Set character max limit                |
-| `minlength`       | `number`  | Set character min limit                |
 
 ## Properties
 
@@ -18,10 +16,10 @@ A form control element for email.
 | `error`         | `error`           | `boolean`        | false   | Set error state                                  |
 | `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           |
-| `maxLength`     |                   | `number \| null` | null    | Set character max limit                          |
-| `minLength`     |                   | `number \| null` | null    | Set character min limit                          |
+| `maxLength`     | `maxlength`       | `number \| null` | null    | Set character max limit                          |
+| `minLength`     | `minlength`       | `number \| null` | null    | Set character min limit                          |
 | `multiple`      | `multiple`        | `boolean`        | false   | Set to multiple mode, allows multiple emails in a single input |
-| `pattern`       |                   | `string`         | ""      | Set regular expression for input validation      |
+| `pattern`       | `pattern`         | `string \| null` | null    | Set regular expression for input validation      |
 | `placeholder`   | `placeholder`     | `string`         | ""      | Set placeholder text                             |
 | `readonly`      | `readonly`        | `boolean`        | false   | Set readonly state                               |
 | `transparent`   | `transparent`     | `boolean`        | false   | Disables all other states and border/background styles. |

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

@@ -21,14 +21,6 @@ import { TextField } from '../text-field/index.js';
  * @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
  *
@@ -49,6 +41,18 @@ export declare class EmailField extends TextField {
      * Set to multiple mode, allows multiple emails in a single input
      */
     multiple: boolean;
+    /**
+     * Set regular expression for input validation
+     */
+    pattern: string | null;
+    /**
+     * Set character max limit
+     */
+    maxLength: number | null;
+    /**
+     * Set character min limit
+     */
+    minLength: number | null;
     /**
      * Returns `true` if the element input is valid; otherwise, returns `false`.
      * @returns element input validity
@@ -59,6 +63,11 @@ export declare class EmailField extends TextField {
      * @returns `true` if the element input is valid; otherwise, returns `false`.
      */
     reportValidity(): boolean;
+    /**
+     * Returns whether input of the element should be validated or not based on the existence of validation constraints
+     * @returns true if there is at least one validation constraint
+     */
+    protected shouldValidate(): boolean;
     /**
      * Decorate `<input>` element with common properties extended from text-field:
      * type="email" - always `email`

package/lib/email-field/index.js

@@ -22,14 +22,6 @@ import { TextField } from '../text-field/index.js';
  * @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
  *
@@ -52,6 +44,20 @@ let EmailField = class EmailField extends TextField {
          * Set to multiple mode, allows multiple emails in a single input
          */
         this.multiple = false;
+        /**
+         * Set regular expression for input validation
+         */
+        this.pattern = null;
+        /**
+         * Set character max limit
+         */
+        // override to merely fix missing attribute from component's doc
+        this.maxLength = null;
+        /**
+         * Set character min limit
+         */
+        // override to merely fix missing attribute from component's doc
+        this.minLength = null;
     }
     /**
      * Returns `true` if the element input is valid; otherwise, returns `false`.
@@ -67,6 +73,16 @@ let EmailField = class EmailField extends TextField {
     reportValidity() {
         return super.reportValidity();
     }
+    /**
+     * Returns whether input of the element should be validated or not based on the existence of validation constraints
+     * @returns true if there is at least one validation constraint
+     */
+    shouldValidate() {
+        const hasMaxLength = this.maxLength !== null;
+        const hasMinLength = this.minLength !== null;
+        const hasPattern = this.pattern !== '';
+        return hasMaxLength || hasMinLength || hasPattern;
+    }
     /**
      * Decorate `<input>` element with common properties extended from text-field:
      * type="email" - always `email`
@@ -78,13 +94,23 @@ let EmailField = class EmailField extends TextField {
             ...super.decorateInputMap,
             type: 'email',
             inputmode: 'email',
-            multiple: this.multiple
+            multiple: this.multiple,
+            pattern: this.pattern
         };
     }
 };
 __decorate([
     property({ type: Boolean, reflect: true })
 ], EmailField.prototype, "multiple", void 0);
+__decorate([
+    property({ type: String })
+], EmailField.prototype, "pattern", void 0);
+__decorate([
+    property({ type: Number, attribute: 'maxlength', reflect: true })
+], EmailField.prototype, "maxLength", void 0);
+__decorate([
+    property({ type: Number, attribute: 'minlength', reflect: true })
+], EmailField.prototype, "minLength", void 0);
 EmailField = __decorate([
     customElement('ef-email-field')
 ], EmailField);

package/lib/multi-input/index.js

@@ -7,7 +7,6 @@ import { CollectionComposer } from '@refinitiv-ui/utils/collection.js';
 import '../pill/index.js';
 import '../text-field/index.js';
 import { VERSION } from '../version.js';
-const hasChanged = (newVal, oldVal) => oldVal === undefined ? false : newVal !== oldVal;
 /**
  * An input control component to display a selection of pills
  *
@@ -551,7 +550,7 @@ __decorate([
     property({ type: Number, attribute: 'maxlength', reflect: true })
 ], MultiInput.prototype, "maxLength", void 0);
 __decorate([
-    property({ type: Number, attribute: 'minlength', reflect: true, hasChanged })
+    property({ type: Number, attribute: 'minlength', reflect: true })
 ], MultiInput.prototype, "minLength", void 0);
 __decorate([
     property({ type: Number, attribute: false })

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

@@ -288,6 +288,11 @@ export declare class NumberField extends FormFieldElement {
      * @returns {void}
      */
     stepDown(stepIncrement?: number): void;
+    /**
+     * Returns whether input of the element should be validated or not based on the existence of validation constraints
+     * @returns true if there is at least one validation constraint
+     */
+    private shouldValidate;
     /**
      * Validate the element input and mark it as error if its input is invalid.
      * @returns `true` if the element input is valid; otherwise, returns `false`.
@@ -300,37 +305,30 @@ export declare class NumberField extends FormFieldElement {
     checkValidity(): boolean;
     /**
      * @ignore
-     * @inheritDoc
      */
     get selectionStart(): number | null;
     /**
      * @ignore
-     * @inheritDoc
      */
     set selectionStart(index: number | null);
     /**
      * @ignore
-     * @inheritDoc
      */
     get selectionEnd(): number | null;
     /**
      * @ignore
-     * @inheritDoc
      */
     set selectionEnd(index: number | null);
     /**
      * @ignore
-     * @inheritDoc
      */
     get selectionDirection(): SelectionDirection | null;
     /**
      * @ignore
-     * @inheritDoc
      */
     set selectionDirection(direction: SelectionDirection | null);
     /**
      * @ignore
-     * @inheritDoc
      */
     setSelectionRange(startSelection: number | null, endSelection: number | null, selectionDirection?: SelectionDirection): void;
     /**

package/lib/number-field/index.js

@@ -166,7 +166,7 @@ let NumberField = class NumberField extends FormFieldElement {
      * @returns {void}
      */
     update(changedProperties) {
-        if (changedProperties.has(FocusedPropertyKey) && !this.focused) {
+        if (changedProperties.has(FocusedPropertyKey) && !this.focused && this.shouldValidate()) {
             this.reportValidity();
         }
         super.update(changedProperties);
@@ -447,8 +447,9 @@ let NumberField = class NumberField extends FormFieldElement {
      * @returns {void}
      */
     setSilentlyValueAndNotify() {
-        // Nobody likes to see a red border
-        this.reportValidity();
+        if (this.shouldValidate()) {
+            this.reportValidity();
+        }
         const value = this.valueAsNumberString(this.inputValue);
         if (super.value !== value) {
             // here we must set the value silently to avoid re-rendering of input
@@ -639,6 +640,16 @@ let NumberField = class NumberField extends FormFieldElement {
     stepDown(stepIncrement) {
         this.applyStepDirection(Direction.Down, stepIncrement);
     }
+    /**
+     * Returns whether input of the element should be validated or not based on the existence of validation constraints
+     * @returns true if there is at least one validation constraint
+     */
+    shouldValidate() {
+        const hasMax = this.max !== null;
+        const hasMin = this.min !== null;
+        const hasStep = this.step !== ANY_STEP;
+        return hasMax || hasMin || hasStep;
+    }
     /**
      * Validate the element input and mark it as error if its input is invalid.
      * @returns `true` if the element input is valid; otherwise, returns `false`.
@@ -675,7 +686,6 @@ let NumberField = class NumberField extends FormFieldElement {
     }
     /**
      * @ignore
-     * @inheritDoc
      */
     /* c8 ignore start */
     get selectionStart() {
@@ -684,7 +694,6 @@ let NumberField = class NumberField extends FormFieldElement {
     /* c8 ignore stop */
     /**
      * @ignore
-     * @inheritDoc
      */
     /* c8 ignore start */
     set selectionStart(index) {
@@ -693,7 +702,6 @@ let NumberField = class NumberField extends FormFieldElement {
     /* c8 ignore stop */
     /**
      * @ignore
-     * @inheritDoc
      */
     /* c8 ignore start */
     get selectionEnd() {
@@ -702,7 +710,6 @@ let NumberField = class NumberField extends FormFieldElement {
     /* c8 ignore stop */
     /**
      * @ignore
-     * @inheritDoc
      */
     /* c8 ignore start */
     set selectionEnd(index) {
@@ -711,7 +718,6 @@ let NumberField = class NumberField extends FormFieldElement {
     /* c8 ignore stop */
     /**
      * @ignore
-     * @inheritDoc
      */
     /* c8 ignore start */
     get selectionDirection() {
@@ -720,7 +726,6 @@ let NumberField = class NumberField extends FormFieldElement {
     /* c8 ignore stop */
     /**
      * @ignore
-     * @inheritDoc
      */
     /* c8 ignore start */
     set selectionDirection(direction) {
@@ -729,7 +734,6 @@ let NumberField = class NumberField extends FormFieldElement {
     /* c8 ignore stop */
     /**
      * @ignore
-     * @inheritDoc
      */
     /* c8 ignore start */
     // eslint-disable-next-line @typescript-eslint/no-unused-vars

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

@@ -5,6 +5,16 @@
       "name": "ef-password-field",
       "description": "A form control element for password.",
       "attributes": [
+        {
+          "name": "maxlength",
+          "description": "Set character max limit",
+          "type": "number | null"
+        },
+        {
+          "name": "minlength",
+          "description": "Set character min limit",
+          "type": "number | null"
+        },
         {
           "name": "disabled",
           "description": "Set disabled state",
@@ -17,6 +27,12 @@
           "type": "boolean",
           "default": "false"
         },
+        {
+          "name": "pattern",
+          "description": "Set regular expression for input validation",
+          "type": "string",
+          "default": "\"\""
+        },
         {
           "name": "placeholder",
           "description": "Set placeholder text",
@@ -46,19 +62,21 @@
           "description": "Input's value",
           "type": "string",
           "default": "\"\""
-        },
+        }
+      ],
+      "properties": [
         {
-          "name": "maxlength",
+          "name": "maxLength",
+          "attribute": "maxlength",
           "description": "Set character max limit",
-          "type": "number"
+          "type": "number | null"
         },
         {
-          "name": "minlength",
+          "name": "minLength",
+          "attribute": "minlength",
           "description": "Set character min limit",
-          "type": "number"
-        }
-      ],
-      "properties": [
+          "type": "number | null"
+        },
         {
           "name": "disabled",
           "attribute": "disabled",
@@ -73,18 +91,9 @@
           "type": "boolean",
           "default": "false"
         },
-        {
-          "name": "maxLength",
-          "description": "Set character max limit",
-          "type": "number | null"
-        },
-        {
-          "name": "minLength",
-          "description": "Set character min limit",
-          "type": "number | null"
-        },
         {
           "name": "pattern",
+          "attribute": "pattern",
           "description": "Set regular expression for input validation",
           "type": "string",
           "default": "\"\""

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

@@ -2,22 +2,15 @@
 
 A form control element for password.
 
-## Attributes
-
-| Attribute   | Type     | Description             |
-|-------------|----------|-------------------------|
-| `maxlength` | `number` | Set character max limit |
-| `minlength` | `number` | Set character min limit |
-
 ## Properties
 
 | Property      | Attribute     | Type             | Default | Description                                      |
 |---------------|---------------|------------------|---------|--------------------------------------------------|
 | `disabled`    | `disabled`    | `boolean`        | false   | Set disabled state                               |
 | `error`       | `error`       | `boolean`        | false   | Set error state                                  |
-| `maxLength`   |               | `number \| null` | null    | Set character max limit                          |
-| `minLength`   |               | `number \| null` | null    | Set character min limit                          |
-| `pattern`     |               | `string`         | ""      | Set regular expression for input validation      |
+| `maxLength`   | `maxlength`   | `number \| null` | null    | Set character max limit                          |
+| `minLength`   | `minlength`   | `number \| null` | null    | Set character min limit                          |
+| `pattern`     | `pattern`     | `string`         | ""      | Set regular expression for input validation      |
 | `placeholder` | `placeholder` | `string`         | ""      | Set placeholder text                             |
 | `readonly`    | `readonly`    | `boolean`        | false   | Set readonly state                               |
 | `transparent` | `transparent` | `boolean`        | false   | Disables all other states and border/background styles. |

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

@@ -17,12 +17,7 @@ import { TextField } from '../text-field/index.js';
  * @attr {boolean} error - Set error state
  * @prop {boolean} [error=false] - Set error state
  *
- * @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
- *
+ * @attr {string} pattern - Set regular expression for input validation
  * @prop {string} [pattern=""] - Set regular expression for input validation
  *
  * @attr {string} placeholder - Set placeholder text
@@ -41,6 +36,14 @@ import { TextField } from '../text-field/index.js';
  * @prop {string} [value=""] - Input's value
  */
 export declare class PasswordField extends TextField {
+    /**
+     * Set character max limit
+     */
+    maxLength: number | null;
+    /**
+     * Set character min limit
+     */
+    minLength: number | null;
     /**
      * Used for translations
      */

package/lib/password-field/index.js

@@ -1,6 +1,7 @@
 import { __decorate } from "tslib";
 import { html, unsafeCSS } 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/password-field.js';
 import { translate } from '@refinitiv-ui/translate';
@@ -20,12 +21,7 @@ import { deregisterOverflowTooltip } from '../tooltip/index.js';
  * @attr {boolean} error - Set error state
  * @prop {boolean} [error=false] - Set error state
  *
- * @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
- *
+ * @attr {string} pattern - Set regular expression for input validation
  * @prop {string} [pattern=""] - Set regular expression for input validation
  *
  * @attr {string} placeholder - Set placeholder text
@@ -46,6 +42,16 @@ import { deregisterOverflowTooltip } from '../tooltip/index.js';
 let PasswordField = class PasswordField extends TextField {
     constructor() {
         super(...arguments);
+        /**
+         * Set character max limit
+         */
+        // override to merely fix missing attribute from component's doc
+        this.maxLength = null;
+        /**
+         * Set character min limit
+         */
+        // override to merely fix missing attribute from component's doc
+        this.minLength = null;
         /**
          * Defines whether password is visible or not
          */
@@ -150,6 +156,12 @@ let PasswordField = class PasswordField extends TextField {
         this.isPasswordVisible = !this.isPasswordVisible;
     }
 };
+__decorate([
+    property({ type: Number, attribute: 'maxlength', reflect: true })
+], PasswordField.prototype, "maxLength", void 0);
+__decorate([
+    property({ type: Number, attribute: 'minlength', reflect: true })
+], PasswordField.prototype, "minLength", void 0);
 __decorate([
     translate({ scope: 'ef-password-field' })
 ], PasswordField.prototype, "t", void 0);

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

@@ -5,6 +5,16 @@
       "name": "ef-search-field",
       "description": "Form control to get a search input from users.",
       "attributes": [
+        {
+          "name": "maxlength",
+          "description": "Set character max limit",
+          "type": "number | null"
+        },
+        {
+          "name": "minlength",
+          "description": "Set character min limit",
+          "type": "number | null"
+        },
         {
           "name": "disabled",
           "description": "Set disabled state",
@@ -23,6 +33,12 @@
           "type": "boolean",
           "default": "false"
         },
+        {
+          "name": "pattern",
+          "description": "Set regular expression for input validation",
+          "type": "string",
+          "default": "\"\""
+        },
         {
           "name": "placeholder",
           "description": "Set placeholder text",
@@ -57,19 +73,21 @@
           "name": "icon-has-action",
           "description": "Specify when icon need to be clickable",
           "type": "boolean"
-        },
+        }
+      ],
+      "properties": [
         {
-          "name": "maxlength",
+          "name": "maxLength",
+          "attribute": "maxlength",
           "description": "Set character max limit",
-          "type": "number"
+          "type": "number | null"
         },
         {
-          "name": "minlength",
+          "name": "minLength",
+          "attribute": "minlength",
           "description": "Set character min limit",
-          "type": "number"
-        }
-      ],
-      "properties": [
+          "type": "number | null"
+        },
         {
           "name": "disabled",
           "attribute": "disabled",
@@ -91,18 +109,9 @@
           "type": "boolean",
           "default": "false"
         },
-        {
-          "name": "maxLength",
-          "description": "Set character max limit",
-          "type": "number | null"
-        },
-        {
-          "name": "minLength",
-          "description": "Set character min limit",
-          "type": "number | null"
-        },
         {
           "name": "pattern",
+          "attribute": "pattern",
           "description": "Set regular expression for input validation",
           "type": "string",
           "default": "\"\""

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

@@ -7,8 +7,6 @@ Form control to get a search input from users.
 | Attribute         | Type      | Description                            |
 |-------------------|-----------|----------------------------------------|
 | `icon-has-action` | `boolean` | Specify when icon need to be clickable |
-| `maxlength`       | `number`  | Set character max limit                |
-| `minlength`       | `number`  | Set character min limit                |
 
 ## Properties
 
@@ -17,9 +15,9 @@ Form control to get a search input from users.
 | `disabled`      | `disabled`        | `boolean`        | false   | Set disabled state                               |
 | `error`         | `error`           | `boolean`        | false   | Set error state                                  |
 | `iconHasAction` | `icon-has-action` | `boolean`        | false   | Specify when icon need to be clickable           |
-| `maxLength`     |                   | `number \| null` | null    | Set character max limit                          |
-| `minLength`     |                   | `number \| null` | null    | Set character min limit                          |
-| `pattern`       |                   | `string`         | ""      | Set regular expression for input validation      |
+| `maxLength`     | `maxlength`       | `number \| null` | null    | Set character max limit                          |
+| `minLength`     | `minlength`       | `number \| null` | null    | Set character min limit                          |
+| `pattern`       | `pattern`         | `string`         | ""      | Set regular expression for input validation      |
 | `placeholder`   | `placeholder`     | `string`         | ""      | Set placeholder text                             |
 | `readonly`      | `readonly`        | `boolean`        | false   | Set readonly state                               |
 | `transparent`   | `transparent`     | `boolean`        | false   | Disables all other states and border/background styles. |

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

@@ -21,12 +21,7 @@ import { TextField } from '../text-field/index.js';
  * @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
- *
+ * @attr {string} pattern - Set regular expression for input validation
  * @prop {string} [pattern=""] - Set regular expression for input validation
  *
  * @attr {string} placeholder - Set placeholder text
@@ -45,6 +40,14 @@ import { TextField } from '../text-field/index.js';
  * @prop {string} [value=""] - Input's value
  */
 export declare class SearchField extends TextField {
+    /**
+     * Set character max limit
+     */
+    maxLength: number | null;
+    /**
+     * Set character min limit
+     */
+    minLength: number | null;
     /**
      * Used for translations
      */

package/lib/search-field/index.js

@@ -1,6 +1,7 @@
 import { __decorate } from "tslib";
 import { html, nothing } from '@refinitiv-ui/core';
 import { customElement } from '@refinitiv-ui/core/decorators/custom-element.js';
+import { property } from '@refinitiv-ui/core/decorators/property.js';
 import '@refinitiv-ui/phrasebook/locale/en/search-field.js';
 import { translate } from '@refinitiv-ui/translate';
 import '../icon/index.js';
@@ -21,12 +22,7 @@ import { TextField } from '../text-field/index.js';
  * @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
- *
+ * @attr {string} pattern - Set regular expression for input validation
  * @prop {string} [pattern=""] - Set regular expression for input validation
  *
  * @attr {string} placeholder - Set placeholder text
@@ -45,6 +41,19 @@ import { TextField } from '../text-field/index.js';
  * @prop {string} [value=""] - Input's value
  */
 let SearchField = class SearchField extends TextField {
+    constructor() {
+        super(...arguments);
+        /**
+         * Set character max limit
+         */
+        // override to merely fix missing attribute from component's doc
+        this.maxLength = null;
+        /**
+         * Set character min limit
+         */
+        // override to merely fix missing attribute from component's doc
+        this.minLength = null;
+    }
     /**
      * Decorate `<input>` element with common properties extended from text-field:
      * type="search" - always `search`
@@ -90,6 +99,12 @@ let SearchField = class SearchField extends TextField {
     `;
     }
 };
+__decorate([
+    property({ type: Number, attribute: 'maxlength', reflect: true })
+], SearchField.prototype, "maxLength", void 0);
+__decorate([
+    property({ type: Number, attribute: 'minlength', reflect: true })
+], SearchField.prototype, "minLength", void 0);
 __decorate([
     translate({ scope: 'ef-search-field' })
 ], SearchField.prototype, "t", void 0);

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

@@ -8,7 +8,7 @@
         {
           "name": "pattern",
           "description": "Set regular expression for input validation",
-          "type": "string",
+          "type": "string | null",
           "default": "\"\""
         },
         {
@@ -80,7 +80,7 @@
           "name": "pattern",
           "attribute": "pattern",
           "description": "Set regular expression for input validation",
-          "type": "string",
+          "type": "string | null",
           "default": "\"\""
         },
         {

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

@@ -12,7 +12,7 @@ Form control element for text.
 | `iconHasAction` | `icon-has-action` | `boolean`        | false   | Specify when icon need to be clickable           |
 | `maxLength`     | `maxlength`       | `number \| null` | null    | Set character max limit                          |
 | `minLength`     | `minlength`       | `number \| null` | null    | Set character min limit                          |
-| `pattern`       | `pattern`         | `string`         | ""      | Set regular expression for input validation      |
+| `pattern`       | `pattern`         | `string \| null` | ""      | Set regular expression for input validation      |
 | `placeholder`   | `placeholder`     | `string`         | ""      | Set placeholder text                             |
 | `readonly`      | `readonly`        | `boolean`        | false   | Set readonly state                               |
 | `transparent`   | `transparent`     | `boolean`        | false   | Disables all other states and border/background styles. |

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

@@ -45,7 +45,7 @@ export declare class TextField extends FormFieldElement {
     /**
      * Set regular expression for input validation
      */
-    pattern: string;
+    pattern: string | null;
     /**
      * Specify icon to display in input. Value can be icon name
      */
@@ -80,6 +80,11 @@ export declare class TextField extends FormFieldElement {
      * @returns shouldUpdate
      */
     protected updated(changedProperties: PropertyValues): void;
+    /**
+     * Returns whether input of the element should be validated or not based on the existence of validation constraints
+     * @returns true if there is at least one validation constraint
+     */
+    protected shouldValidate(): boolean;
     /**
      * Returns `true` if the element input is valid; otherwise, returns `false`.
      * @returns element input validity

package/lib/text-field/index.js

@@ -6,7 +6,6 @@ import { isElementOverflown } from '@refinitiv-ui/utils/element.js';
 import '../icon/index.js';
 import { registerOverflowTooltip } from '../tooltip/index.js';
 import { VERSION } from '../version.js';
-const hasChanged = (newVal, oldVal) => oldVal === undefined ? false : newVal !== oldVal;
 /**
  * Form control element for text.
  *
@@ -114,7 +113,7 @@ let TextField = class TextField extends FormFieldElement {
      * @returns {void}
      */
     update(changedProperties) {
-        if (changedProperties.has(FocusedPropertyKey) && !this.focused) {
+        if (changedProperties.has(FocusedPropertyKey) && !this.focused && this.shouldValidate()) {
             this.reportValidity();
         }
         super.update(changedProperties);
@@ -130,6 +129,16 @@ let TextField = class TextField extends FormFieldElement {
             this.syncInputValue();
         }
     }
+    /**
+     * Returns whether input of the element should be validated or not based on the existence of validation constraints
+     * @returns true if there is at least one validation constraint
+     */
+    shouldValidate() {
+        const hasMaxLength = this.maxLength !== null;
+        const hasMinLength = this.minLength !== null;
+        const hasPattern = !!this.pattern;
+        return hasMaxLength || hasMinLength || hasPattern;
+    }
     /**
      * Returns `true` if the element input is valid; otherwise, returns `false`.
      * @returns element input validity
@@ -186,7 +195,9 @@ let TextField = class TextField extends FormFieldElement {
     onPossibleValueChange(event) {
         const value = this.inputElement?.value || '';
         this.setValueAndNotify(value);
-        this.reportValidity();
+        if (this.shouldValidate()) {
+            this.reportValidity();
+        }
     }
     /**
      * Fires event on `icon` click
@@ -246,7 +257,7 @@ let TextField = class TextField extends FormFieldElement {
     }
 };
 __decorate([
-    property({ type: String, hasChanged })
+    property({ type: String })
 ], TextField.prototype, "pattern", void 0);
 __decorate([
     property({ type: String, reflect: true })
@@ -258,7 +269,7 @@ __decorate([
     property({ type: Number, attribute: 'maxlength', reflect: true })
 ], TextField.prototype, "maxLength", void 0);
 __decorate([
-    property({ type: Number, attribute: 'minlength', reflect: true, hasChanged })
+    property({ type: Number, attribute: 'minlength', reflect: true })
 ], TextField.prototype, "minLength", void 0);
 TextField = __decorate([
     customElement('ef-text-field')

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

@@ -143,6 +143,10 @@ export declare class TimePicker extends ControlElement {
      * Seconds are automatically shown when `hh:mm:ss` time format is provided as a value.
      */
     private get isShowSeconds();
+    /**
+     * True if time value is complete, that is having all the required time segment
+     */
+    private get isCompleteValue();
     /**
      * Get hours taking into account AM/PM placeholder
      */
@@ -295,6 +299,7 @@ export declare class TimePicker extends ControlElement {
     /**
      * Changes a time segment value by a specified amount.
      * Also updates parent values when rolling through cycles.
+     * Incomplete value will update only segment without pre-populate value.
      * @param amount Amount to change by
      * @param segment Segment id
      * @returns {void}

package/lib/time-picker/index.js

@@ -8,7 +8,7 @@ import { state } from '@refinitiv-ui/core/decorators/state.js';
 import { guard } from '@refinitiv-ui/core/directives/guard.js';
 import '@refinitiv-ui/phrasebook/locale/en/time-picker.js';
 import { translate } from '@refinitiv-ui/translate';
-import { MILLISECONDS_IN_HOUR, MILLISECONDS_IN_MINUTE, MILLISECONDS_IN_SECOND, TimeFormat, addOffset, format, getFormat, isAM, isPM, isValidTime, padNumber, parse, toTimeSegment } from '@refinitiv-ui/utils/date.js';
+import { MILLISECONDS_IN_HOUR, MILLISECONDS_IN_MINUTE, MILLISECONDS_IN_SECOND, MINUTES_IN_HOUR, SECONDS_IN_MINUTE, TimeFormat, addOffset, format, getFormat, isAM, isPM, isValidTime, padNumber, parse, toTimeSegment } from '@refinitiv-ui/utils/date.js';
 import '../number-field/index.js';
 import { VERSION } from '../version.js';
 var Segment;
@@ -23,6 +23,20 @@ const MAX_MINUTES = 59;
 const MAX_SECONDS = 59;
 const HOURS_IN_DAY = 24;
 const HOURS_OF_NOON = 12;
+const SegmentMap = {
+    [Segment.HOURS]: {
+        milliseconds: MILLISECONDS_IN_HOUR,
+        cycle: HOURS_IN_DAY
+    },
+    [Segment.MINUTES]: {
+        milliseconds: MILLISECONDS_IN_MINUTE,
+        cycle: MINUTES_IN_HOUR
+    },
+    [Segment.SECONDS]: {
+        milliseconds: MILLISECONDS_IN_SECOND,
+        cycle: SECONDS_IN_MINUTE
+    }
+};
 const Placeholder = {
     HOURS: '--',
     MINUTES: '--',
@@ -194,7 +208,7 @@ let TimePicker = TimePicker_1 = class TimePicker extends ControlElement {
         }
     }
     get value() {
-        if (this.hours === null || this.minutes === null || (this.isShowSeconds && this.seconds === null)) {
+        if (!this.isCompleteValue) {
             return '';
         }
         return this.currentTimeString;
@@ -230,6 +244,12 @@ let TimePicker = TimePicker_1 = class TimePicker extends ControlElement {
     get isShowSeconds() {
         return this.showSeconds || this.valueWithSeconds;
     }
+    /**
+     * True if time value is complete, that is having all the required time segment
+     */
+    get isCompleteValue() {
+        return !(this.hours === null || this.minutes === null || (this.isShowSeconds && this.seconds === null));
+    }
     /**
      * Get hours taking into account AM/PM placeholder
      */
@@ -358,17 +378,6 @@ let TimePicker = TimePicker_1 = class TimePicker extends ControlElement {
                 break;
             // no default
         }
-        // Pre-populate empty segments
-        if (value !== null) {
-            if (segment === Segment.HOURS && this.minutes === null) {
-                this.minutes = 0;
-            }
-            if (this.isShowSeconds &&
-                this.seconds === null &&
-                (segment === Segment.HOURS || segment === Segment.MINUTES)) {
-                this.seconds = 0;
-            }
-        }
         // verify value again, as time segment validation
         // might fail in setter and previous value returned
         if (oldValue !== this.value) {
@@ -579,27 +588,24 @@ let TimePicker = TimePicker_1 = class TimePicker extends ControlElement {
     /**
      * Changes a time segment value by a specified amount.
      * Also updates parent values when rolling through cycles.
+     * Incomplete value will update only segment without pre-populate value.
      * @param amount Amount to change by
      * @param segment Segment id
      * @returns {void}
      */
     changeValueBy(amount, segment) {
-        let offset = 0;
-        switch (segment) {
-            case Segment.HOURS:
-                offset = this.hours === null ? 0 : amount * MILLISECONDS_IN_HOUR;
-                break;
-            case Segment.MINUTES:
-                offset = this.minutes === null ? 0 : amount * MILLISECONDS_IN_MINUTE;
-                break;
-            case Segment.SECONDS:
-                offset = this.seconds === null ? 0 : amount * MILLISECONDS_IN_SECOND;
-                break;
-            // no default
+        const segmentValue = this[segment];
+        const { milliseconds, cycle } = SegmentMap[segment];
+        if (this.isCompleteValue) {
+            const offset = segmentValue === null ? 0 : amount * milliseconds;
+            const value = addOffset(this.currentTimeString, offset);
+            this.setValueAndNotify(value);
+            this.selectedSegment = segment;
+        }
+        else {
+            // a segment cycle is added to support wrapping of amount with negative value
+            this[segment] = segmentValue === null ? 0 : (segmentValue + amount + cycle) % cycle;
         }
-        const value = addOffset(this.currentTimeString, offset);
-        this.setValueAndNotify(value);
-        this.selectedSegment = segment;
     }
     /**
      * Gets the hours segment of the provided value

package/lib/tree/helpers/filter.js

@@ -1,3 +1,4 @@
+import escapeStringRegexp from 'escape-string-regexp';
 /**
  * Default filter used by tree
  * @param el Tree instance to filter
@@ -14,7 +15,7 @@ export const defaultFilter = (el) => {
     const getRegularExpressionOfQuery = () => {
         if (el.query !== query || !queryRegExp) {
             query = el.query || '';
-            queryRegExp = new RegExp(query.replace(/(\W)/g, '\\$1'), 'i');
+            queryRegExp = new RegExp(escapeStringRegexp(query), 'i');
         }
         return queryRegExp;
     };

package/lib/version.js

@@ -1 +1 @@
-export const VERSION = '7.8.0';
+export const VERSION = '7.9.1';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@refinitiv-ui/elements",
-  "version": "7.8.0",
+  "version": "7.9.1",
   "description": "Element Framework Elements",
   "author": "LSEG",
   "license": "Apache-2.0",
@@ -348,29 +348,30 @@
     "chartjs-adapter-date-fns": "^3.0.0",
     "d3-interpolate": "^3.0.1",
     "date-fns": "^2.29.3",
+    "escape-string-regexp": "^5.0.0",
     "lightweight-charts": "^4.1.0",
     "tslib": "^2.3.1"
   },
   "devDependencies": {
-    "@refinitiv-ui/core": "^7.3.0",
-    "@refinitiv-ui/demo-block": "^7.1.0",
+    "@refinitiv-ui/core": "^7.4.0",
+    "@refinitiv-ui/demo-block": "^7.1.1",
     "@refinitiv-ui/i18n": "^7.1.0",
     "@refinitiv-ui/phrasebook": "^7.1.0",
     "@refinitiv-ui/test-helpers": "^7.1.0",
-    "@refinitiv-ui/translate": "^7.1.0",
+    "@refinitiv-ui/translate": "^7.1.1",
     "@refinitiv-ui/utils": "^7.2.0",
     "@types/d3-interpolate": "^3.0.1"
   },
   "peerDependencies": {
     "@refinitiv-ui/browser-sparkline": "^1.0.0 || ^2.0.0",
-    "@refinitiv-ui/core": "^7.3.0",
+    "@refinitiv-ui/core": "^7.4.0",
     "@refinitiv-ui/i18n": "^7.1.0",
     "@refinitiv-ui/phrasebook": "^7.1.0",
-    "@refinitiv-ui/translate": "^7.1.0",
+    "@refinitiv-ui/translate": "^7.1.1",
     "@refinitiv-ui/utils": "^7.2.0"
   },
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "f0019ccc2f241a998c5e455b433c0e36720d5fe6"
+  "gitHead": "78ca6b3e5c4b3347663dc2abc713fa150c9ee638"
 }