@refinitiv-ui/elements 5.5.0 → 5.8.1

package/lib/password-field/index.js

@@ -1,146 +1,56 @@
-var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-import { ControlElement, css, customElement, html, ifDefined, property, query } from '@refinitiv-ui/core';
-import { preload } from '../icon';
-import '../icon';
-import { VERSION } from '../';
-const hasChanged = (newVal, oldVal) => oldVal === undefined ? false : newVal !== oldVal;
-const isIE = (/Trident/g).test(navigator.userAgent);
+import { __decorate } from "tslib";
+import { html } from '@refinitiv-ui/core';
+import { customElement } from '@refinitiv-ui/core/lib/decorators/custom-element.js';
+import { state } from '@refinitiv-ui/core/lib/decorators/state.js';
+import { preload } from '../icon/index.js';
+import { TextField } from '../text-field/index.js';
+import '../icon/index.js';
+import '@refinitiv-ui/phrasebook/lib/locale/en/password-field.js';
+import { translate } from '@refinitiv-ui/translate';
 let isEyeOffPreloadRequested = false;
 /**
- * A form control element for password
+ * A form control element for password.
  *
  * @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 {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 PasswordField = class PasswordField extends ControlElement {
+let PasswordField = class PasswordField extends TextField {
     constructor() {
         super(...arguments);
-        /**
-         * Set regular expression for input validation
-         */
-        this.pattern = '';
-        /**
-         * Set placeholder 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 minimum limit
-         */
-        this.minLength = null;
-        /**
-         * Set character maximum limit
-         */
-        this.maxLength = null;
         /**
          * Defines whether password is visible or not
          */
         this.isPasswordVisible = false;
-        /**
-         * check if value is changed and fire event
-         * @return {void}
-         */
-        this.onPossibleValueChange = () => {
-            const value = this.inputElement.value;
-            this.setValueAndNotify(value);
-        };
-        /**
-         * validate input according `pattern`, `min` and `max` properties
-         * change state of `error` property according pattern validation
-         * @return void
-         */
-        this.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);
-            }
-        };
-        /**
-         * Detect `enter` and `space` keydown and fire
-         * @param event keydown event
-         * @returns {void}
-         */
-        this.handleKeyDown = (event) => {
-            if (event.key === 'Spacebar' || event.key === ' ' || event.key === 'Enter') {
-                this.togglePasswordVisibility();
-            }
-        };
-    }
-    /**
-     * Element version number
-     * @returns version number
-     */
-    static get version() {
-        return VERSION;
-    }
-    /**
-     * @return A `CSSResult` that will be used to style the host,
-     * slotted children and the internal template of the element.
-     */
-    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;
-      }
-    `;
-    }
-    /**
-     * Select the contents of input
-     * @return void
-     */
-    select() {
-        if (!this.disabled && !this.readonly) {
-            this.inputElement.select();
-        }
     }
     /**
      * Called when the element’s DOM has been updated and rendered for the first time
@@ -155,101 +65,45 @@ let PasswordField = class PasswordField extends ControlElement {
         }
     }
     /**
-     * Called when the element’s DOM has been updated and rendered
-     * @param changedProperties Properties that has changed
-     * @return shouldUpdate
+     * Decorate `<input>` element with common properties extended from text-field:
+     * type="text|password" - text if password is visible
+     * @returns template map
      */
-    updated(changedProperties) {
-        super.updated(changedProperties);
-        if (this.inputElement.value !== this.value) {
-            this.inputElement.value = this.value;
-        }
-        if (this.shouldValidateInput(changedProperties)) {
-            this.validateInput();
-        }
+    get decorateInputMap() {
+        return Object.assign(Object.assign({}, super.decorateInputMap), { 'type': this.isPasswordVisible ? 'text' : 'password' });
     }
     /**
-     * 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=${this.isPasswordVisible ? 'text' : 'password'}
-        part="input"
-        ?readonly="${this.readonly}"
-        ?disabled="${this.disabled}"
-        placeholder="${ifDefined(this.placeholder || undefined)}"
-        minlength="${ifDefined(this.minLength || undefined)}"
-        maxlength="${ifDefined(this.maxLength || undefined)}"
-        pattern="${ifDefined(this.pattern || undefined)}"
-        @input="${this.onPossibleValueChange}"
-        @change="${this.onPossibleValueChange}"
-        autocomplete="off"
-      />
       <ef-icon
+        part="icon"
+        role="button"
+        tabindex="0"
+        aria-label="${this.isPasswordVisible ? this.t('HIDE_PASSWORD') : this.t('SHOW_PASSWORD')}"
         icon=${this.isPasswordVisible ? 'eye-off' : 'eye'}
         ?readonly="${this.readonly}"
         ?disabled="${this.disabled}"
         @tap="${this.togglePasswordVisibility}"
-        @keydown="${this.handleKeyDown}"
-        part="icon"
-        tabindex="0"
       ></ef-icon>
     `;
     }
-    /**
-     * Check if input should be re-validated
-     * True if value changed and pattern or minlength is present
-     * True if pattern or minlength changed
-     * @param changedProperties Properties that has changed
-     * @return 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')));
-    }
-    /**
-     * @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);
-    }
     /**
      * Toggles password visibility state
      * @return void
      */
     togglePasswordVisibility() {
         this.isPasswordVisible = !this.isPasswordVisible;
-        void this.requestUpdate();
     }
 };
 __decorate([
-    property({ type: String, hasChanged })
-], PasswordField.prototype, "pattern", void 0);
-__decorate([
-    property({ type: String })
-], PasswordField.prototype, "placeholder", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true })
-], PasswordField.prototype, "error", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true })
-], PasswordField.prototype, "warning", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true })
-], PasswordField.prototype, "transparent", void 0);
-__decorate([
-    property({ type: Number, attribute: 'minlength', reflect: true, hasChanged })
-], PasswordField.prototype, "minLength", void 0);
-__decorate([
-    property({ type: Number, attribute: 'maxlength', reflect: true })
-], PasswordField.prototype, "maxLength", void 0);
+    translate({ scope: 'ef-password-field' })
+], PasswordField.prototype, "t", void 0);
 __decorate([
-    query('[part="input"]')
-], PasswordField.prototype, "inputElement", void 0);
+    state()
+], PasswordField.prototype, "isPasswordVisible", void 0);
 PasswordField = __decorate([
     customElement('ef-password-field', {
         alias: 'coral-password-field'

package/lib/pill/custom-elements.json

@@ -26,19 +26,20 @@
         {
           "name": "value",
           "description": "Value of pill",
-          "type": "string"
+          "type": "string",
+          "default": "\"\""
         },
         {
           "name": "readonly",
           "description": "Set readonly state",
           "type": "boolean",
-          "default": "\"false\""
+          "default": "false"
         },
         {
           "name": "disabled",
           "description": "Set disabled state",
           "type": "boolean",
-          "default": "\"false\""
+          "default": "false"
         }
       ],
       "properties": [
@@ -67,21 +68,22 @@
           "name": "value",
           "attribute": "value",
           "description": "Value of pill",
-          "type": "string"
+          "type": "string",
+          "default": "\"\""
         },
         {
           "name": "readonly",
           "attribute": "readonly",
           "description": "Set readonly state",
           "type": "boolean",
-          "default": "\"false\""
+          "default": "false"
         },
         {
           "name": "disabled",
           "attribute": "disabled",
           "description": "Set disabled state",
           "type": "boolean",
-          "default": "\"false\""
+          "default": "false"
         }
       ],
       "events": [

package/lib/pill/custom-elements.md

@@ -0,0 +1,22 @@
+# ef-pill
+
+A small button style component
+which is used to show one or multiple selected item.
+It is rarely used in the UI but inside other components to visualize multiple item selection item.
+
+## Properties
+
+| Property   | Attribute  | Type      | Default | Description                  |
+|------------|------------|-----------|---------|------------------------------|
+| `active`   | `active`   | `boolean` | false   | Add to pill for active state |
+| `clears`   | `clears`   | `boolean` | false   | Set pill to clearable        |
+| `disabled` | `disabled` | `boolean` | false   | Set disabled state           |
+| `readonly` | `readonly` | `boolean` | false   | Set readonly state           |
+| `toggles`  | `toggles`  | `boolean` | false   | Set pill to toggle mode      |
+| `value`    | `value`    | `string`  | ""      | Value of pill                |
+
+## Events
+
+| Event   | Description                                  |
+|---------|----------------------------------------------|
+| `clear` | Dispatched when click on cross button occurs |

package/lib/pill/index.d.ts

@@ -1,12 +1,12 @@
 import { JSXInterface } from '../jsx';
-import { ControlElement, CSSResult, PropertyValues, TemplateResult } from '@refinitiv-ui/core';
-import '../icon';
+import { ControlElement, CSSResultGroup, PropertyValues, TemplateResult } from '@refinitiv-ui/core';
+import '../icon/index.js';
 /**
  * A small button style component
  * which is used to show one or multiple selected item.
  * It is rarely used in the UI but inside other components to visualize multiple item selection item.
  * @attr {string} value - Value of pill
- * @prop {string} value - Value of pill
+ * @prop {string} [value=""] - Value of pill
  *
  * @attr {boolean} readonly - Set readonly state
  * @prop {boolean} [readonly=false] - Set readonly state
@@ -23,12 +23,12 @@ export declare class Pill extends ControlElement {
      */
     static get version(): string;
     /**
-     * A `CSSResult` that will be used
+     * 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(): CSSResult;
+    static get styles(): CSSResultGroup;
     /**
      * Set pill to clearable
      */

package/lib/pill/index.js

@@ -1,18 +1,16 @@
-var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-import { ControlElement, css, customElement, html, property, query } from '@refinitiv-ui/core';
-import { VERSION } from '../';
-import '../icon';
+import { __decorate } from "tslib";
+import { ControlElement, 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 { VERSION } from '../version.js';
+import '../icon/index.js';
 /**
  * A small button style component
  * which is used to show one or multiple selected item.
  * It is rarely used in the UI but inside other components to visualize multiple item selection item.
  * @attr {string} value - Value of pill
- * @prop {string} value - Value of pill
+ * @prop {string} [value=""] - Value of pill
  *
  * @attr {boolean} readonly - Set readonly state
  * @prop {boolean} [readonly=false] - Set readonly state
@@ -50,7 +48,7 @@ let Pill = class Pill extends ControlElement {
         return VERSION;
     }
     /**
-     * A `CSSResult` that will be used
+     * A `CSSResultGroup` that will be used
      * to style the host, slotted children
      * and the internal template of the element.
      * @return CSS template

package/lib/progress-bar/custom-elements.md

@@ -0,0 +1,18 @@
+# ef-progress-bar
+
+Data visualisation component,
+showing a simple percentage bar.
+
+## Properties
+
+| Property    | Attribute   | Type     | Default | Description                                      |
+|-------------|-------------|----------|---------|--------------------------------------------------|
+| `alignment` | `alignment` | `string` | "left"  | The alignment of the bar.<br />The bar can either start from the `left` or `right`. |
+| `label`     | `label`     | `string` | ""      | The current label to be displayed next to the bar.<br />This is affixed to the end of the bar, so make sure to cater for this. |
+| `value`     | `value`     | `string` | "100"   | The current value of the bar.<br />This can range from `0-100` and<br />will be represented as a percentage bar |
+
+## Slots
+
+| Name    | Description                                      |
+|---------|--------------------------------------------------|
+| `label` | Overrides the label property and places custom content. Useful for modifying the color, or, adding icons. |

package/lib/progress-bar/index.d.ts

@@ -1,5 +1,5 @@
 import { JSXInterface } from '../jsx';
-import { CSSResult, TemplateResult, BasicElement, PropertyValues } from '@refinitiv-ui/core';
+import { CSSResultGroup, TemplateResult, BasicElement, PropertyValues } from '@refinitiv-ui/core';
 /**
  * Data visualisation component,
  * showing a simple percentage bar.
@@ -13,12 +13,12 @@ export declare class ProgressBar extends BasicElement {
     static get version(): string;
     private valuePrevious;
     /**
-     * A `CSSResult` that will be used
+     * 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(): CSSResult;
+    static get styles(): CSSResultGroup;
     /**
      * The current value of the bar.
      * This can range from `0-100` and

package/lib/progress-bar/index.js

@@ -1,11 +1,9 @@
-var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-import { css, html, property, customElement, styleMap, BasicElement } from '@refinitiv-ui/core';
-import { VERSION } from '../';
+import { __decorate } from "tslib";
+import { css, html, BasicElement } 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 { styleMap } from '@refinitiv-ui/core/lib/directives/style-map.js';
+import { VERSION } from '../version.js';
 /**
  * Data visualisation component,
  * showing a simple percentage bar.
@@ -40,7 +38,7 @@ let ProgressBar = class ProgressBar extends BasicElement {
         return VERSION;
     }
     /**
-     * A `CSSResult` that will be used
+     * A `CSSResultGroup` that will be used
      * to style the host, slotted children
      * and the internal template of the element.
      * @return CSS template

package/lib/radio-button/custom-elements.json

@@ -27,13 +27,13 @@
           "name": "readonly",
           "description": "Set readonly state",
           "type": "boolean",
-          "default": "\"false\""
+          "default": "false"
         },
         {
           "name": "disabled",
           "description": "Set disabled state",
           "type": "boolean",
-          "default": "\"false\""
+          "default": "false"
         }
       ],
       "properties": [
@@ -63,14 +63,14 @@
           "attribute": "readonly",
           "description": "Set readonly state",
           "type": "boolean",
-          "default": "\"false\""
+          "default": "false"
         },
         {
           "name": "disabled",
           "attribute": "disabled",
           "description": "Set disabled state",
           "type": "boolean",
-          "default": "\"false\""
+          "default": "false"
         }
       ],
       "events": [

package/lib/radio-button/custom-elements.md

@@ -0,0 +1,19 @@
+# ef-radio-button
+
+Basic radio button
+
+## Properties
+
+| Property   | Attribute  | Type      | Default | Description                                      |
+|------------|------------|-----------|---------|--------------------------------------------------|
+| `checked`  | `checked`  | `boolean` | false   | Radio button checked state                       |
+| `disabled` | `disabled` | `boolean` | false   | Set disabled state                               |
+| `name`     | `name`     | `string`  | ""      | Group multiple radio buttons by assigning the same name |
+| `readonly` | `readonly` | `boolean` | false   | Set readonly state                               |
+| `value`    | `value`    | `string`  | ""      | Value of the radio button                        |
+
+## Events
+
+| Event             | Description                                |
+|-------------------|--------------------------------------------|
+| `checked-changed` | Fired when the `checked` property changes. |

package/lib/radio-button/index.d.ts

@@ -1,15 +1,15 @@
 import { JSXInterface } from '../jsx';
-import { CSSResult, ControlElement, TemplateResult, PropertyValues } from '@refinitiv-ui/core';
+import { CSSResultGroup, ControlElement, TemplateResult, PropertyValues } from '@refinitiv-ui/core';
 /**
  * Basic radio button
  *
  * @fires checked-changed - Fired when the `checked` property changes.
  *
- * @attr {string} [value=] - Value of the radio button
- * @prop {string} [value=] - Value of the radio button
+ * @attr {string} value - Value of the radio button
+ * @prop {string} [value=""] - Value of the radio button
 *
- * @attr {string} [name=] - Group multiple radio buttons by assigning the same name
- * @prop {string} [name=] - Group multiple radio buttons by assigning the same name
+ * @attr {string} name - Group multiple radio buttons by assigning the same name
+ * @prop {string} [name=""] - Group multiple radio buttons by assigning the same name
  *
  * @attr {boolean} readonly - Set readonly state
  * @prop {boolean} [readonly=false] - Set readonly state
@@ -23,17 +23,28 @@ export declare class RadioButton extends ControlElement {
      * @returns version number
      */
     static get version(): string;
+    protected readonly defaultRole: string | null;
     /**
-     * A `CSSResult` that will be used
+     * 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(): CSSResult | CSSResult[];
+    static get styles(): CSSResultGroup;
+    private _checked;
     /**
      * Radio button checked state
+     * @param value checked state
+     * @default false
+     * @returns {void}
+     */
+    set checked(value: boolean);
+    get checked(): boolean;
+    /**
+     * Aria indicating checked state
+     * @ignore
      */
-    checked: boolean;
+    ariaChecked: string;
     /**
      * Getter for label
      */
@@ -83,6 +94,12 @@ export declare class RadioButton extends ControlElement {
      * @return {void}
      */
     private handleChangeChecked;
+    /**
+     * Navigate to next or previous checkable sibling in the same group if present
+     * @param direction up/next; down/previous
+     * @returns {void}
+     */
+    private navigateToSibling;
     /**
      * A `TemplateResult` that will be used
      * to render the updated internal template.