@refinitiv-ui/elements 5.7.0 → 5.8.0

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

@@ -1,23 +1,36 @@
 import { JSXInterface } from '../jsx';
-import { ControlElement, CSSResultGroup, PropertyValues, TemplateResult } from '@refinitiv-ui/core';
+import { FormFieldElement, CSSResultGroup, PropertyValues, TemplateResult } from '@refinitiv-ui/core';
+import { TemplateMap } from '@refinitiv-ui/core/lib/directives/template-map.js';
 import '../icon/index.js';
-declare type SelectionIndex = number | null;
 /**
- * Form control element for text
+ * Form control element for text.
  *
  * @fires value-changed - Dispatched when value changes
  * @fires error-changed - Dispatched when error state changes
+ * @fires icon-click - Dispatched when icon is clicked
  *
- * @attr {string} value - Input's value
- * @prop {string} [value=] - Input's value
+ * @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} 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} disabled - Set disabled state
- * @prop {boolean} [disabled=false] - Set disabled 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
+ *
+ * @attr {string} value - Input's value
+ * @prop {string} [value=""] - Input's value
  */
-export declare class TextField extends ControlElement {
+export declare class TextField extends FormFieldElement {
     /**
      * Element version number
      * @returns version number
@@ -33,47 +46,14 @@ export declare class TextField extends ControlElement {
      * Set regular expression for input validation
      */
     pattern: string;
-    /**
-     * Set place holder text
-     */
-    placeholder: string;
-    /**
-     * Set state to error
-     */
-    error: boolean;
-    /**
-     * Aria indicating if the field is required
-     * @ignore
-     */
-    ariaRequired: string;
-    /**
-     * Aria description used to describe input or error to screen reader
-     * @ignore
-     */
-    ariaDescription: string;
-    /**
-     * Aria label used to label input to screen reader
-     * @ignore
-     */
-    ariaLabel: string;
-    /**
-     * Set state to warning
-     */
-    warning: boolean;
     /**
      * Specify icon to display in input. Value can be icon name
      */
-    icon: string;
+    icon: string | null;
     /**
      * Specify when icon need to be clickable
      */
     iconHasAction: boolean;
-    /**
-     * Disables all other states and border/background styles.
-     * Use with advanced composite elements requiring e.g. multi selection in
-     * combo-box when parent container handles element states.
-     */
-    transparent: boolean;
     /**
      * Set character max limit
      */
@@ -82,32 +62,6 @@ export declare class TextField extends ControlElement {
      * Set character min limit
      */
     minLength: number | null;
-    /**
-     * Get native input element from shadow roots
-     */
-    private inputElement;
-    /**
-     * Selection start index
-     */
-    get selectionStart(): number | null;
-    set selectionStart(index: SelectionIndex);
-    /**
-     * Selection end index
-     */
-    get selectionEnd(): number | null;
-    set selectionEnd(index: SelectionIndex);
-    /**
-     * Select the contents of input
-     * @returns void
-     */
-    select(): void;
-    /**
-     * Set the selection range
-     * @param startSelection Start of selection
-     * @param endSelection End of the selection
-     * @returns {void}
-     */
-    setSelectionRange(startSelection: number, endSelection: number): void;
     /**
      * Called after the component is first rendered
      * @param changedProperties Properties which have changed
@@ -125,58 +79,62 @@ export declare class TextField extends ControlElement {
      * @param changedProperties Properties that has changed
      * @returns True if input should be re-validated
      */
-    private shouldValidateInput;
+    protected shouldValidateInput(changedProperties: PropertyValues): boolean;
     /**
-     * Renders icon element if property present
+     * Runs on input element `input` event
+     * @param event `input` event
      * @returns {void}
      */
-    private renderIcon;
+    protected onInputInput(event: InputEvent): void;
     /**
-     * A `TemplateResult` that will be used
-     * to render the updated internal template.
-     * @return Render template
+     * Runs on input element `change` event
+     * @param event `change` event
+     * @returns {void}
      */
-    protected render(): TemplateResult;
+    protected onInputChange(event: InputEvent): void;
     /**
      * Check if value is changed and fire event
      * @returns {void}
      */
-    private onPossibleValueChange;
+    protected onPossibleValueChange(event: InputEvent): void;
     /**
      * Validate input according `pattern`, `minLength` and `maxLength` properties
      * change state of `error` property according pattern validation
-     * @returns void
+     * @returns {void}
      */
-    private validateInput;
+    protected validateInput(): void;
     /**
      * @param error existing state of error
      * @returns true if there is no error and browser is IE11 and minLength more than 0 and value exists
      */
-    private shouldValidateForMinLength;
+    protected shouldValidateForMinLength(error: boolean): boolean;
     /**
      * Fires event on `icon` click
      * @returns {void}
      */
-    private iconClick;
+    protected iconClick(): void;
     /**
-     * Handles the focus event
-     * @returns {void}
+     * Decorate `<input>` element with common properties extended from form field element:
+     * type="text" - always `text`
+     * part="input" - always "input", used for styling
+     * maxlength - calculated from `this.maxLength`
+     * minlength - calculated from `this.minLength`
+     * pattern - calculated from `this.pattern`
+     * @returns template map
      */
-    private onFocus;
+    protected get decorateInputMap(): TemplateMap;
     /**
-     * Query field's label from host to native input
-     * to support aria label when using screen reader
+     * Renders icon element if property present
      * @returns {void}
      */
-    private queryFieldLabel;
+    protected renderIcon(): TemplateResult | null;
     /**
-     * Query field's description from host to native input
-     * to support aria description when using screen reader
-     * @returns {void}
+     * A `TemplateResult` that will be used
+     * to render the updated internal template.
+     * @return Render template
      */
-    private queryFieldDescription;
+    protected render(): TemplateResult;
 }
-export {};
 
 declare global {
   interface HTMLElementTagNameMap {
@@ -185,7 +143,7 @@ declare global {
 
   namespace JSX {
     interface IntrinsicElements {
-      'ef-text-field': Partial<TextField> | JSXInterface.ControlHTMLAttributes<TextField>;
+      'ef-text-field': Partial<TextField> | JSXInterface.HTMLAttributes<TextField>;
     }
   }
 }

package/lib/text-field/index.js

@@ -1,8 +1,7 @@
 import { __decorate } from "tslib";
-import { ControlElement, css, html } from '@refinitiv-ui/core';
+import { FormFieldElement, css, html } from '@refinitiv-ui/core';
 import { customElement } from '@refinitiv-ui/core/lib/decorators/custom-element.js';
 import { property } from '@refinitiv-ui/core/lib/decorators/property.js';
-import { query } from '@refinitiv-ui/core/lib/decorators/query.js';
 import { ifDefined } from '@refinitiv-ui/core/lib/directives/if-defined.js';
 import { VERSION } from '../version.js';
 import { isIE } from '@refinitiv-ui/utils/lib/browser.js';
@@ -10,68 +9,48 @@ import '../icon/index.js';
 import { registerOverflowTooltip } from '../tooltip/index.js';
 const hasChanged = (newVal, oldVal) => oldVal === undefined ? false : newVal !== oldVal;
 /**
- * Form control element for text
+ * Form control element for text.
  *
  * @fires value-changed - Dispatched when value changes
  * @fires error-changed - Dispatched when error state changes
+ * @fires icon-click - Dispatched when icon is clicked
  *
- * @attr {string} value - Input's value
- * @prop {string} [value=] - Input's value
+ * @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} 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} disabled - Set disabled state
- * @prop {boolean} [disabled=false] - Set disabled 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
+ *
+ * @attr {string} value - Input's value
+ * @prop {string} [value=""] - Input's value
  */
-let TextField = class TextField extends ControlElement {
+let TextField = class TextField extends FormFieldElement {
     constructor() {
         super(...arguments);
         /**
          * Set regular expression for input validation
          */
         this.pattern = '';
-        /**
-         * Set place holder text
-         */
-        this.placeholder = '';
-        /**
-         * Set state to error
-         */
-        this.error = false;
-        /**
-         * Aria indicating if the field is required
-         * @ignore
-         */
-        this.ariaRequired = 'false';
-        /**
-         * Aria description used to describe input or error to screen reader
-         * @ignore
-         */
-        this.ariaDescription = '';
-        /**
-         * Aria label used to label input to screen reader
-         * @ignore
-         */
-        this.ariaLabel = '';
-        /**
-         * Set state to warning
-         */
-        this.warning = false;
         /**
          * Specify icon to display in input. Value can be icon name
          */
-        this.icon = '';
+        this.icon = null;
         /**
          * Specify when icon need to be clickable
          */
         this.iconHasAction = false;
-        /**
-         * Disables all other states and border/background styles.
-         * Use with advanced composite elements requiring e.g. multi selection in
-         * combo-box when parent container handles element states.
-         */
-        this.transparent = false;
         /**
          * Set character max limit
          */
@@ -122,42 +101,6 @@ let TextField = class TextField extends ControlElement {
       }
     `;
     }
-    /**
-     * Selection start index
-     */
-    get selectionStart() {
-        return this.inputElement.selectionStart;
-    }
-    set selectionStart(index) {
-        this.inputElement.selectionStart = index;
-    }
-    /**
-     * Selection end index
-     */
-    get selectionEnd() {
-        return this.inputElement.selectionEnd;
-    }
-    set selectionEnd(index) {
-        this.inputElement.selectionEnd = index;
-    }
-    /**
-     * Select the contents of input
-     * @returns void
-     */
-    select() {
-        if (!this.disabled && !this.readonly) {
-            this.inputElement.select();
-        }
-    }
-    /**
-     * Set the selection range
-     * @param startSelection Start of selection
-     * @param endSelection End of the selection
-     * @returns {void}
-     */
-    setSelectionRange(startSelection, endSelection) {
-        this.inputElement.setSelectionRange(startSelection, endSelection);
-    }
     /**
      * Called after the component is first rendered
      * @param changedProperties Properties which have changed
@@ -165,8 +108,9 @@ let TextField = class TextField extends ControlElement {
      */
     firstUpdated(changedProperties) {
         super.firstUpdated(changedProperties);
-        registerOverflowTooltip(this.inputElement, () => this.value);
-        this.addEventListener('focus', this.onFocus);
+        if (this.inputElement) {
+            registerOverflowTooltip(this.inputElement, () => this.value);
+        }
     }
     /**
      * Called when the element’s DOM has been updated and rendered
@@ -175,8 +119,8 @@ let TextField = class TextField extends ControlElement {
      */
     updated(changedProperties) {
         super.updated(changedProperties);
-        if (this.inputElement.value !== this.value) {
-            this.inputElement.value = this.value;
+        if (this.inputValue !== this.value) {
+            this.inputValue = this.value;
         }
         if (this.shouldValidateInput(changedProperties)) {
             this.validateInput();
@@ -187,83 +131,58 @@ let TextField = class TextField extends ControlElement {
      * @param changedProperties Properties that has changed
      * @returns True if input should be re-validated
      */
+    /* istanbul ignore next */
     shouldValidateInput(changedProperties) {
+        // TODO: This validation should be refactored
         return (changedProperties.has('pattern') || !!(this.pattern && changedProperties.has('value')))
-            || (changedProperties.has('minLength') || !!(this.minLength && changedProperties.has('value')));
+            || (changedProperties.has('minLength') || !!(this.minLength && changedProperties.has('value')))
+            || (changedProperties.has('maxLength') || !!(this.maxLength && changedProperties.has('value')));
     }
     /**
-     * Renders icon element if property present
+     * Runs on input element `input` event
+     * @param event `input` event
      * @returns {void}
      */
-    renderIcon() {
-        return this.icon ? html `
-    <ef-icon
-        role="${ifDefined(this.iconHasAction ? 'button' : undefined)}"
-        part="icon"
-        icon="${this.icon}"
-        aria-label="${ifDefined(this.iconHasAction ? this.icon : undefined)}"
-        ?readonly="${this.readonly}"
-        ?disabled="${this.disabled}"
-        @tap="${this.iconClick}"
-        tabindex="${ifDefined(this.iconHasAction ? '0' : undefined)}"
-      ></ef-icon>
-    ` : null;
+    onInputInput(event) {
+        this.onPossibleValueChange(event);
     }
     /**
-     * A `TemplateResult` that will be used
-     * to render the updated internal template.
-     * @return Render template
+     * Runs on input element `change` event
+     * @param event `change` event
+     * @returns {void}
      */
-    render() {
-        return html `
-      <input
-        type="text"
-        part="input"
-        aria-required="${this.ariaRequired}"
-        aria-label="${ifDefined(this.ariaLabel || undefined)}"
-        aria-invalid="${ifDefined(this.error || undefined)}"
-        aria-description="${ifDefined(this.ariaDescription || undefined)}"
-        ?readonly="${this.readonly}"
-        ?disabled="${this.disabled}"
-        placeholder="${ifDefined(this.placeholder || undefined)}"
-        maxlength="${ifDefined(this.maxLength || undefined)}"
-        minlength="${ifDefined(this.minLength || undefined)}"
-        @input="${this.onPossibleValueChange}"
-        @change="${this.onPossibleValueChange}"
-        pattern="${ifDefined(this.pattern || undefined)}"
-        autocomplete="off"
-      />
-      ${this.renderIcon()}
-    `;
+    onInputChange(event) {
+        this.onPossibleValueChange(event);
     }
     /**
      * Check if value is changed and fire event
      * @returns {void}
      */
-    onPossibleValueChange() {
-        const value = this.inputElement.value;
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    onPossibleValueChange(event) {
+        var _a;
+        const value = ((_a = this.inputElement) === null || _a === void 0 ? void 0 : _a.value) || '';
         this.setValueAndNotify(value);
     }
     /**
      * Validate input according `pattern`, `minLength` and `maxLength` properties
      * change state of `error` property according pattern validation
-     * @returns void
+     * @returns {void}
      */
     validateInput() {
-        let error = !this.inputElement.checkValidity();
+        var _a;
+        let error = !((_a = this.inputElement) === null || _a === void 0 ? void 0 : _a.checkValidity());
+        /* istanbul ignore next */
         if (this.shouldValidateForMinLength(error)) {
             error = !!this.minLength && (this.minLength > this.value.length);
         }
-        if (this.error !== error) {
-            this.error = error;
-            this.notifyPropertyChange('error', this.error);
-            this.queryFieldDescription();
-        }
+        this.notifyErrorChange(error);
     }
     /**
      * @param error existing state of error
      * @returns true if there is no error and browser is IE11 and minLength more than 0 and value exists
      */
+    /* istanbul ignore next */
     shouldValidateForMinLength(error) {
         return !!(!error && isIE && this.minLength && !!this.value);
     }
@@ -272,135 +191,67 @@ let TextField = class TextField extends ControlElement {
      * @returns {void}
      */
     iconClick() {
-        if (this.iconHasAction) {
-            /**
-             * Dispatched only when element has icon-has-action attribute and icon is clicked
-             */
+        if (this.iconHasAction && !this.disabled) {
             this.dispatchEvent(new CustomEvent('icon-click', { bubbles: false }));
         }
     }
     /**
-     * Handles the focus event
-     * @returns {void}
+     * Decorate `<input>` element with common properties extended from form field element:
+     * type="text" - always `text`
+     * part="input" - always "input", used for styling
+     * maxlength - calculated from `this.maxLength`
+     * minlength - calculated from `this.minLength`
+     * pattern - calculated from `this.pattern`
+     * @returns template map
      */
-    onFocus() {
-        this.queryFieldLabel();
-        this.queryFieldDescription();
+    get decorateInputMap() {
+        return Object.assign(Object.assign({}, super.decorateInputMap), { 'type': 'text', 'part': 'input', 'maxlength': this.maxLength, 'minlength': this.minLength, 'pattern': this.pattern || null });
     }
     /**
-     * Query field's label from host to native input
-     * to support aria label when using screen reader
+     * Renders icon element if property present
      * @returns {void}
      */
-    queryFieldLabel() {
-        if (this.hasAttribute('aria-labelledby')) {
-            const ids = this.getAttribute('aria-labelledby');
-            if (!ids) {
-                return;
-            }
-            const elementIds = ids.split(' ');
-            elementIds.forEach(id => {
-                const element = document.getElementById(id);
-                if (!element) {
-                    return;
-                }
-                const label = element.textContent || '';
-                if (this.ariaLabel && label) {
-                    this.ariaLabel += ' ';
-                }
-                this.ariaLabel += label;
-            });
-        }
-        else if (this.hasAttribute('aria-label')) {
-            this.ariaLabel = this.getAttribute('aria-label') || '';
-        }
-        else if (this.id) {
-            const labelForElement = document.querySelector(`label[for="${this.id}"]`);
-            if (!labelForElement) {
-                return;
-            }
-            this.ariaLabel = labelForElement.textContent || '';
-        }
+    renderIcon() {
+        return this.icon ? html `
+    <ef-icon
+        role="${ifDefined(this.iconHasAction ? 'button' : undefined)}"
+        part="icon"
+        icon="${this.icon}"
+        aria-label="${ifDefined(this.iconHasAction ? this.icon : undefined)}"
+        ?readonly="${this.readonly}"
+        ?disabled="${this.disabled}"
+        @tap="${this.iconClick}"
+        tabindex="${ifDefined(this.iconHasAction ? '0' : undefined)}"
+      ></ef-icon>
+    ` : null;
     }
     /**
-     * Query field's description from host to native input
-     * to support aria description when using screen reader
-     * @returns {void}
+     * A `TemplateResult` that will be used
+     * to render the updated internal template.
+     * @return Render template
      */
-    queryFieldDescription() {
-        if (!this.hasAttribute('aria-describedby')) {
-            // Support `aria-description` only if `aria-describedby` is not in use.
-            if (!this.hasAttribute('aria-description')) {
-                return;
-            }
-            this.ariaDescription = this.getAttribute('aria-description') || '';
-            return;
-        }
-        this.ariaDescription = '';
-        const ids = this.getAttribute('aria-describedby');
-        if (!ids) {
-            return;
-        }
-        // In scenarios where there is multiple ids
-        const elementIds = ids.split(' ');
-        elementIds.forEach(id => {
-            const element = document.getElementById(id);
-            if (!element) {
-                return;
-            }
-            const text = element.textContent || '';
-            if (this.ariaDescription && text) {
-                this.ariaDescription += ' ';
-            }
-            this.ariaDescription += text;
-        });
+    render() {
+        return html `
+      ${super.render()}
+      ${this.renderIcon()}
+    `;
     }
 };
 __decorate([
     property({ type: String, hasChanged })
 ], TextField.prototype, "pattern", void 0);
-__decorate([
-    property({ type: String })
-], TextField.prototype, "placeholder", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true })
-], TextField.prototype, "error", void 0);
-__decorate([
-    property({ type: String, attribute: 'aria-required' })
-], TextField.prototype, "ariaRequired", void 0);
-__decorate([
-    property({ type: String })
-], TextField.prototype, "ariaDescription", void 0);
-__decorate([
-    property({ type: String })
-], TextField.prototype, "ariaLabel", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true })
-], TextField.prototype, "warning", void 0);
 __decorate([
     property({ type: String, reflect: true })
 ], TextField.prototype, "icon", void 0);
 __decorate([
     property({ type: Boolean, reflect: true, attribute: 'icon-has-action' })
 ], TextField.prototype, "iconHasAction", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true })
-], TextField.prototype, "transparent", void 0);
 __decorate([
     property({ type: Number, attribute: 'maxlength', reflect: true })
 ], TextField.prototype, "maxLength", void 0);
 __decorate([
     property({ type: Number, attribute: 'minlength', reflect: true, hasChanged })
 ], TextField.prototype, "minLength", void 0);
-__decorate([
-    query('[part="input"]')
-], TextField.prototype, "inputElement", void 0);
-__decorate([
-    property({ type: Number, attribute: false })
-], TextField.prototype, "selectionStart", null);
-__decorate([
-    property({ type: Number, attribute: false })
-], TextField.prototype, "selectionEnd", null);
 TextField = __decorate([
     customElement('ef-text-field', {
         alias: 'coral-text-field'

package/lib/time-picker/custom-elements.md

@@ -8,10 +8,10 @@ Control the time input
 |---------------|----------------|------------------|---------|--------------------------------------------------|
 | `amPm`        | `am-pm`        | `boolean`        | false   | Toggles 12hr time display                        |
 | `disabled`    | `disabled`     | `boolean`        | false   | Set disabled state                               |
-| `hours`       | `hours`        | `number \| null` |         | Hours time segment in 24hr format                |
-| `minutes`     | `minutes`      | `number \| null` |         | Minutes time segment                             |
+| `hours`       | `hours`        | `number \| null` | null    | Hours time segment in 24hr format                |
+| `minutes`     | `minutes`      | `number \| null` | null    | Minutes time segment                             |
 | `readonly`    | `readonly`     | `boolean`        | false   | Set readonly state                               |
-| `seconds`     | `seconds`      | `number \| null` |         | Seconds time segment                             |
+| `seconds`     | `seconds`      | `number \| null` | null    | Seconds time segment                             |
 | `showSeconds` | `show-seconds` | `boolean`        | false   | Flag to show seconds time segment in display.<br />Seconds are automatically shown when `hh:mm:ss` time format is provided as a value. |
 | `value`       | `value`        | `string`         | ""      | Value of the element                             |