@refinitiv-ui/elements 5.7.0 → 5.8.0

package/lib/search-field/index.js

@@ -1,250 +1,81 @@
 import { __decorate } from "tslib";
-import { ControlElement, css, html } from '@refinitiv-ui/core';
+import { 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';
 import '../icon/index.js';
-const hasChanged = (newVal, oldVal) => oldVal === undefined ? false : newVal !== oldVal;
+import { TextField } from '../text-field/index.js';
+import { translate } from '@refinitiv-ui/translate';
+import '@refinitiv-ui/phrasebook/lib/locale/en/search-field.js';
 /**
  * Form control to get a search input from users.
  *
  * @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 {boolean} icon-has-action - Specify when icon need to be clickable
+ * @prop {boolean} [iconHasAction=false] - Specify when icon need to be clickable
+ *
+ * @attr {number} maxlength - Set character max limit
+ * @prop {number | null} [maxLength=null] - Set character max limit
+ *
+ * @attr {number} minlength - Set character min limit
+ * @prop {number | null} [minLength=null] - Set character min limit
+ *
+ * @prop {string} [pattern=""] - Set regular expression for input validation
+ *
+ * @attr {string} placeholder - Set placeholder text
+ * @prop {string} [placeholder=""] - Set placeholder text
  *
  * @attr {boolean} readonly - Set readonly state
  * @prop {boolean} [readonly=false] - Set readonly state
  *
- * @attr {boolean} 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 SearchField = class SearchField extends ControlElement {
-    constructor() {
-        super(...arguments);
-        /**
-         * Set regular expression for input validation
-         */
-        this.pattern = '';
-        /**
-         * Set place holder text
-         */
-        this.placeholder = '';
-        /**
-         * Set state to error
-         */
-        this.error = false;
-        /**
-         * Set state to warning
-         */
-        this.warning = 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
-         */
-        this.maxLength = null;
-        /**
-         * Set character min limit
-         */
-        this.minLength = null;
-        /**
-         * Specify when icon need to be clickable
-         */
-        this.iconHasAction = false;
-    }
+let SearchField = class SearchField extends TextField {
     /**
-     * Element version number
-     * @returns version number
+     * Decorate `<input>` element with common properties extended from text-field:
+     * type="search" - always `search`
+     * @returns template map
      */
-    static get version() {
-        return VERSION;
+    get decorateInputMap() {
+        return Object.assign(Object.assign({}, super.decorateInputMap), { 'type': 'search', 'inputmode': 'search' });
     }
     /**
-     * A `CSSResultGroup` that will be used
-     * to style the host, slotted children
-     * and the internal template of the element.
-     * @return CSS template
-     */
-    static get styles() {
-        return css `
-      :host {
-        display: inline-block;
-      }
-      :host(:focus), :host input:focus {
-        outline: none;
-      }
-      [part=input] {
-        font: inherit;
-        background: none;
-        color: currentColor;
-        border: none;
-        text-align: inherit;
-      }
-      :host [part=icon]{
-        display: flex;
-        outline: none;
-      }
-      :host([transparent]) {
-        background: none !important;
-        border: none !important;
-      }
-      :host([icon-has-action]) [part=icon] {
-        cursor: pointer;
-      }
-    `;
-    }
-    /**
-     * Select the contents of input
-     * @returns void
-     */
-    select() {
-        if (!this.disabled && !this.readonly) {
-            this.inputElement.select();
-        }
-    }
-    /**
-     * A `TemplateResult` that will be used
-     * to render the updated internal template.
-     * @return Render template
+     * Renders icon element
+     * @returns {void}
      */
-    render() {
+    renderIcon() {
         return html `
-      <input
-        type="search"
-        part="input"
-        ?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"
-      />
       <ef-icon
         part="icon"
+        role="${ifDefined(this.iconHasAction ? 'button' : undefined)}"
         icon="search"
+        aria-label="${this.t('SEARCH')}"
         ?readonly="${this.readonly}"
         ?disabled="${this.disabled}"
-        @tap="${this.notifyIcon}"
-        @keydown="${this.handleKeyDown}"
+        @tap="${this.iconClick}"
         tabindex="${ifDefined(this.iconHasAction ? '0' : undefined)}"
       ></ef-icon>
     `;
     }
-    /**
-     * Called when the element’s DOM has been updated and rendered
-     * @param changedProperties Properties that has changed
-     * @returns {void}
-     */
-    updated(changedProperties) {
-        super.updated(changedProperties);
-        if (this.inputElement.value !== this.value) {
-            this.inputElement.value = this.value;
-        }
-        if (this.shouldValidateInput(changedProperties)) {
-            this.validateInput();
-        }
-    }
-    /**
-     * Check if input should be re-validated
-     * @param changedProperties Properties that has changed
-     * @returns True if input should be re-validated
-     */
-    shouldValidateInput(changedProperties) {
-        return (changedProperties.has('pattern') || !!(this.pattern && changedProperties.has('value')))
-            || (changedProperties.has('minLength') || !!(this.minLength && changedProperties.has('value')));
-    }
-    /**
-     * validate input according `pattern`, `minLength` and `maxLength` properties
-     * change state of `error` property according pattern validation
-     * @returns {void}
-     */
-    validateInput() {
-        let error = !this.inputElement.checkValidity();
-        if (this.shouldValidateForMinLength(error)) {
-            error = !!this.minLength && (this.minLength > this.value.length);
-        }
-        if (this.error !== error) {
-            this.error = error;
-            this.notifyPropertyChange('error', this.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
-     */
-    shouldValidateForMinLength(error) {
-        return !!(!error && isIE && this.minLength && !!this.value);
-    }
-    /**
-     * Check if value is changed
-     * @returns {void}
-     */
-    onPossibleValueChange() {
-        const value = this.inputElement.value;
-        this.setValueAndNotify(value);
-    }
-    /**
-     * Detect `enter` and `space` keydown and fire
-     * @param event keydown event
-     * @returns {void}
-     */
-    handleKeyDown(event) {
-        if (event.key === 'Spacebar' || event.key === ' ' || event.key === 'Enter') {
-            this.notifyIcon();
-        }
-    }
-    /**
-     * Fire event on icon click
-     * @returns {void}
-     */
-    notifyIcon() {
-        if (this.iconHasAction) {
-            /**
-             * Dispatched only when element has icon-has-action attribute and icon is clicked
-             */
-            this.dispatchEvent(new CustomEvent('icon-click', { bubbles: false }));
-        }
-    }
 };
 __decorate([
-    property({ type: String, hasChanged })
-], SearchField.prototype, "pattern", void 0);
-__decorate([
-    property({ type: String })
-], SearchField.prototype, "placeholder", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true })
-], SearchField.prototype, "error", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true })
-], SearchField.prototype, "warning", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true })
-], SearchField.prototype, "transparent", void 0);
-__decorate([
-    property({ type: Number, attribute: 'maxlength', reflect: true })
-], SearchField.prototype, "maxLength", void 0);
-__decorate([
-    property({ type: Number, attribute: 'minlength', reflect: true, hasChanged })
-], SearchField.prototype, "minLength", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true, attribute: 'icon-has-action' })
-], SearchField.prototype, "iconHasAction", void 0);
-__decorate([
-    query('[part="input"]')
-], SearchField.prototype, "inputElement", void 0);
+    translate({ scope: 'ef-search-field' })
+], SearchField.prototype, "t", void 0);
 SearchField = __decorate([
     customElement('ef-search-field', {
         alias: 'coral-search-field'

package/lib/select/custom-elements.json

@@ -38,7 +38,7 @@
       ],
       "properties": [
         {
-          "name": "label",
+          "name": "label (readonly)",
           "description": "Current text content of the selected value",
           "type": "string"
         },
@@ -78,7 +78,8 @@
         {
           "name": "value",
           "description": "Value of the element",
-          "type": "string"
+          "type": "string",
+          "default": "\"\""
         },
         {
           "name": "disabled",

package/lib/select/custom-elements.md

@@ -5,16 +5,16 @@ providing a fully themeable dropdown element.
 
 ## Properties
 
-| Property      | Attribute     | Modifiers | Type                 | Default | Description                                      |
-|---------------|---------------|-----------|----------------------|---------|--------------------------------------------------|
-| `data`        |               |           | `SelectData \| null` |         | Construct the menu from data object. Cannot be used with slotted content |
-| `disabled`    | `disabled`    |           | `boolean`            | false   | Set disabled state                               |
-| `error`       | `error`       |           | `boolean`            | false   | Set state to error                               |
-| `label`       |               | readonly  | `string`             |         | Current text content of the selected value       |
-| `opened`      | `opened`      |           | `boolean`            | false   | Toggles the opened state of the list             |
-| `placeholder` | `placeholder` |           | `string`             | ""      | Placeholder to display when no value is set      |
-| `value`       |               |           | `string`             |         | Value of the element                             |
-| `warning`     | `warning`     |           | `boolean`            | false   | Set state to warning                             |
+| Property           | Attribute     | Type                 | Default | Description                                      |
+|--------------------|---------------|----------------------|---------|--------------------------------------------------|
+| `data`             |               | `SelectData \| null` | null    | Construct the menu from data object. Cannot be used with slotted content |
+| `disabled`         | `disabled`    | `boolean`            | false   | Set disabled state                               |
+| `error`            | `error`       | `boolean`            | false   | Set state to error                               |
+| `label (readonly)` |               | `string`             |         | Current text content of the selected value       |
+| `opened`           | `opened`      | `boolean`            | false   | Toggles the opened state of the list             |
+| `placeholder`      | `placeholder` | `string`             | ""      | Placeholder to display when no value is set      |
+| `value`            |               | `string`             | ""      | Value of the element                             |
+| `warning`          | `warning`     | `boolean`            | false   | Set state to warning                             |
 
 ## Events
 

package/lib/select/index.d.ts

@@ -4,7 +4,7 @@ import '../overlay/index.js';
 import '../item/index.js';
 import '../icon/index.js';
 import type { SelectData, SelectDataItem } from './helpers/types';
-export { SelectData, SelectDataItem };
+export type { SelectData, SelectDataItem };
 /**
  * Expands upon the native select element,
  * providing a fully themeable dropdown element.
@@ -21,6 +21,7 @@ export declare class Select extends ControlElement implements MultiValue {
      * @returns version number
      */
     static get version(): string;
+    protected readonly defaultRole: string | null;
     /**
      * A `CSSResultGroup` that will be used
      * to style the host, slotted children
@@ -79,6 +80,7 @@ export declare class Select extends ControlElement implements MultiValue {
     /**
     * Construct the menu from data object. Cannot be used with slotted content
     * @type {SelectData | null}
+    * @default null
     */
     get data(): SelectData | null;
     set data(value: SelectData | null);
@@ -91,6 +93,7 @@ export declare class Select extends ControlElement implements MultiValue {
     /**
     * Value of the element
     * @param value Element value
+    * @default -
     */
     set value(value: string);
     get value(): string;
@@ -101,6 +104,11 @@ export declare class Select extends ControlElement implements MultiValue {
      */
     get values(): string[];
     private menuEl?;
+    /**
+     * Called when connected to DOM
+     * @returns {void}
+     */
+    connectedCallback(): void;
     /**
      * Updates the element
      * @param changedProperties Properties that has changed
@@ -239,8 +247,8 @@ export declare class Select extends ControlElement implements MultiValue {
      */
     private isValidFilterKey;
     /**
-     * Focus and highlight the next/previous element
-     * @param direction Focus next or previous element
+     * Focus and highlight element according to specified direction
+     * @param direction previous, next, first or last focusable element
      * @returns {void}
      */
     private focusElement;

package/lib/select/index.js

@@ -11,14 +11,6 @@ import '../icon/index.js';
 import { Item } from '../item/index.js';
 import { CollectionComposer } from '@refinitiv-ui/utils/lib/collection.js';
 import { TimeoutTaskRunner, AnimationTaskRunner } from '@refinitiv-ui/utils/lib/async.js';
-/**
- * Key direction
- */
-var Direction;
-(function (Direction) {
-    Direction[Direction["Up"] = -1] = "Up";
-    Direction[Direction["Down"] = 1] = "Down";
-})(Direction || (Direction = {}));
 // Observer config for items
 const observerOptions = {
     subtree: true,
@@ -36,6 +28,13 @@ const observerOptions = {
 const LABEL_SEPARATOR = ', '; // TODO: for multiselect
 const POPUP_POSITION = ['bottom-start', 'top-start'];
 const KEY_SEARCH_DEBOUNCER = 300;
+var Navigation;
+(function (Navigation) {
+    Navigation["FIRST"] = "First";
+    Navigation["LAST"] = "Last";
+    Navigation["NEXT"] = "Next";
+    Navigation["PREVIOUS"] = "Previous";
+})(Navigation || (Navigation = {}));
 /**
  * Expands upon the native select element,
  * providing a fully themeable dropdown element.
@@ -49,6 +48,7 @@ const KEY_SEARCH_DEBOUNCER = 300;
 let Select = class Select extends ControlElement {
     constructor() {
         super(...arguments);
+        this.defaultRole = 'button';
         this.composer = new CollectionComposer([]);
         this._data = null;
         this.popupDynamicStyles = {}; /* set popup min-width based on select width or CSS vars */
@@ -213,6 +213,7 @@ let Select = class Select extends ControlElement {
     /**
     * Construct the menu from data object. Cannot be used with slotted content
     * @type {SelectData | null}
+    * @default null
     */
     get data() {
         return this._data;
@@ -239,6 +240,7 @@ let Select = class Select extends ControlElement {
     /**
     * Value of the element
     * @param value Element value
+    * @default -
     */
     set value(value) {
         value = this.castValue(value);
@@ -267,6 +269,15 @@ let Select = class Select extends ControlElement {
         }
         return this.selectedSlotItems.map(item => this.getItemValue(item));
     }
+    /**
+     * Called when connected to DOM
+     * @returns {void}
+     */
+    connectedCallback() {
+        super.connectedCallback();
+        // Indicating that this select has a popup of type listbox
+        this.setAttribute('aria-haspopup', 'listbox');
+    }
     /**
      * Updates the element
      * @param changedProperties Properties that has changed
@@ -290,6 +301,10 @@ let Select = class Select extends ControlElement {
             else {
                 this.closing();
             }
+            this.setAttribute('aria-expanded', this.opened ? 'true' : 'false');
+        }
+        if (changedProperties.has('error')) {
+            this.setAttribute('aria-invalid', this.error ? 'true' : 'false');
         }
         super.update(changedProperties);
     }
@@ -541,14 +556,20 @@ let Select = class Select extends ControlElement {
                 break;
             case 'Up':
             case 'ArrowUp':
-                this.focusElement(Direction.Up);
+                this.focusElement(Navigation.PREVIOUS);
                 break;
             case 'Down':
             case 'ArrowDown':
-                this.focusElement(Direction.Down);
+                this.focusElement(Navigation.NEXT);
                 break;
             case 'Tab':
-                this.focusElement(event.shiftKey ? Direction.Up : Direction.Down);
+                this.focusElement(event.shiftKey ? Navigation.PREVIOUS : Navigation.NEXT);
+                break;
+            case 'Home':
+                this.focusElement(Navigation.FIRST);
+                break;
+            case 'End':
+                this.focusElement(Navigation.LAST);
                 break;
             default:
                 if (this.isValidFilterKey(event)) {
@@ -574,27 +595,42 @@ let Select = class Select extends ControlElement {
             && !event.metaKey;
     }
     /**
-     * Focus and highlight the next/previous element
-     * @param direction Focus next or previous element
+     * Focus and highlight element according to specified direction
+     * @param direction previous, next, first or last focusable element
      * @returns {void}
      */
     focusElement(direction) {
         const highlightedItem = this.highlightedItem || this.getSelectedElements()[0];
-        const children = this.getSelectableElements();
-        const idx = highlightedItem ? children.indexOf(highlightedItem) : -1;
-        let focusElement;
-        if (direction === 1) {
-            focusElement = idx === -1 ? children[0] : children[idx + 1];
+        const selectableElements = this.getSelectableElements();
+        if (selectableElements.length === 0) {
+            return;
         }
-        else {
-            focusElement = idx === -1 ? children[children.length - 1] : children[idx - 1];
+        const index = highlightedItem ? selectableElements.indexOf(highlightedItem) : -1;
+        const firstElement = selectableElements[0];
+        const lastElement = selectableElements[selectableElements.length - 1];
+        let element;
+        switch (direction) {
+            case Navigation.PREVIOUS:
+                element = index === -1 ? lastElement : selectableElements[index - 1];
+                break;
+            case Navigation.NEXT:
+                element = index === -1 ? firstElement : selectableElements[index + 1];
+                break;
+            case Navigation.FIRST:
+                element = firstElement;
+                break;
+            case Navigation.LAST:
+                element = lastElement;
+                break;
+            default:
+                break;
         }
-        if (!focusElement) {
-            focusElement = direction === 1 ? children[0] : children[children.length - 1];
+        if (!element) {
+            element = direction === Navigation.NEXT ? firstElement : lastElement;
         }
-        if (focusElement) {
-            focusElement.focus();
-            this.setItemHighlight(focusElement);
+        if (element) {
+            element.focus();
+            this.setItemHighlight(element);
         }
     }
     /**
@@ -805,15 +841,17 @@ let Select = class Select extends ControlElement {
     toItem(item) {
         switch (item.type) {
             case 'divider':
-                return html `<ef-item part="item" type="divider"></ef-item>`;
+                return html `<ef-item role="presentation" part="item" type="divider"></ef-item>`;
             case 'header':
                 return html `<ef-item
+          role="presentation"
           part="item"
           type="header"
           .label=${item.label}></ef-item>`;
             // no default
         }
         return html `<ef-item
+      role="option"
       part="item"
       .value=${item.value}
       .label=${item.label}
@@ -865,6 +903,7 @@ let Select = class Select extends ControlElement {
         tabindex="-1"
         id="menu"
         part="list"
+        role="listbox"
         style=${styleMap(this.popupDynamicStyles)}
         with-shadow
         lock-position-target

package/lib/sidebar-layout/custom-elements.json

@@ -8,7 +8,7 @@
         {
           "name": "sidebar-width",
           "description": "Set the width of the sidebar. The value could be in both px or %, e.g. 300px, 30%",
-          "type": "string"
+          "type": "string | undefined"
         },
         {
           "name": "collapsed",
@@ -28,7 +28,7 @@
           "name": "sidebarWidth",
           "attribute": "sidebar-width",
           "description": "Set the width of the sidebar. The value could be in both px or %, e.g. 300px, 30%",
-          "type": "string"
+          "type": "string | undefined"
         },
         {
           "name": "collapsed",
@@ -43,10 +43,6 @@
           "description": "Set sidebar position to left or right",
           "type": "\"left\" | \"right\"",
           "default": "\"left\""
-        },
-        {
-          "name": "sidebar",
-          "description": "Property to get sidebar"
         }
       ],
       "slots": [

package/lib/sidebar-layout/custom-elements.md

@@ -5,12 +5,11 @@ There are 4 sections that can be slotted a component in.
 
 ## Properties
 
-| Property          | Attribute          | Type                | Default | Description                                      |
-|-------------------|--------------------|---------------------|---------|--------------------------------------------------|
-| `collapsed`       | `collapsed`        | `boolean`           | false   | Set to hide sidebar                              |
-| `sidebar`         |                    |                     |         | Property to get sidebar                          |
-| `sidebarPosition` | `sidebar-position` | `"left" \| "right"` | "left"  | Set sidebar position to left or right            |
-| `sidebarWidth`    | `sidebar-width`    | `string`            |         | Set the width of the sidebar. The value could be in both px or %, e.g. 300px, 30% |
+| Property          | Attribute          | Type                  | Default | Description                                      |
+|-------------------|--------------------|-----------------------|---------|--------------------------------------------------|
+| `collapsed`       | `collapsed`        | `boolean`             | false   | Set to hide sidebar                              |
+| `sidebarPosition` | `sidebar-position` | `"left" \| "right"`   | "left"  | Set sidebar position to left or right            |
+| `sidebarWidth`    | `sidebar-width`    | `string \| undefined` |         | Set the width of the sidebar. The value could be in both px or %, e.g. 300px, 30% |
 
 ## Slots
 

package/lib/sidebar-layout/index.d.ts

@@ -26,7 +26,7 @@ export declare class SidebarLayout extends BasicElement {
     static get styles(): CSSResultGroup;
     /**
      * Set the width of the sidebar. The value could be in both px or %, e.g. 300px, 30%
-     * @type {string}
+     * @type {string | undefined}
      */
     sidebarWidth?: string;
     /**
@@ -39,6 +39,7 @@ export declare class SidebarLayout extends BasicElement {
     sidebarPosition: 'left' | 'right';
     /**
      * Property to get sidebar
+     * @ignore
      */
     sidebar: Layout;
     /**

package/lib/slider/custom-elements.json

@@ -62,7 +62,7 @@
           "name": "value",
           "description": "Value of slider. Not applicable in range mode.",
           "type": "string",
-          "default": "0"
+          "default": "\"0\""
         },
         {
           "name": "readonly",
@@ -145,7 +145,7 @@
           "attribute": "value",
           "description": "Value of slider. Not applicable in range mode.",
           "type": "string",
-          "default": "0"
+          "default": "\"0\""
         },
         {
           "name": "readonly",