@refinitiv-ui/elements 5.7.0 → 5.8.0

package/lib/email-field/index.js

@@ -1,283 +1,83 @@
 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 { 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';
 /**
- * A form control element for email
+ * A form control element for email.
  *
  * @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} icon - Specify icon to display in input. Value can be icon name
+ * @prop {string | null} [icon=null] - Specify icon to display in input. Value can be icon name
+ *
+ * @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 EmailField = class EmailField extends ControlElement {
+let EmailField = class EmailField 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 max limit
-         */
-        this.maxLength = null;
-        /**
-         * Set character min limit
-         */
-        this.minLength = null;
         /**
          * Set to multiple mode, allows multiple emails in a single input
          */
         this.multiple = false;
-        /**
-         * Specify icon to display in input. Value can be icon name
-         */
-        this.icon = '';
-        /**
-         * Specify when icon need to be clickable
-         */
-        this.iconHasAction = false;
-    }
-    /**
-     * Element version number
-     * @returns version number
-     */
-    static get version() {
-        return VERSION;
-    }
-    /**
-     * 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][icon-has-action]) [part=icon] {
-        cursor: pointer;
-      }
-    `;
-    }
-    /**
-     * Select the contents of input
-     * @returns {void}
-     */
-    /* istanbul ignore next */
-    select() {
-        if (!this.disabled && !this.readonly) {
-            this.inputElement.select();
-        }
     }
     /**
-     * Called when the element’s DOM has been updated and rendered
-     * @param changedProperties Properties that has changed
-     * @returns {void}
+     * Decorate `<input>` element with common properties extended from text-field:
+     * type="email" - always `email`
+     * multiple - defined if supports multiple emails
+     * @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': 'email', 'inputmode': 'email', 'multiple': this.multiple });
     }
     /**
      * Check if input should be re-validated
      * @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('value')
-            || changedProperties.has('pattern')
-            || changedProperties.has('minlength');
-    }
-    /**
-     * Check if value is changed and fire event
-     * @returns {void}
-     */
-    onPossibleValueChange() {
-        const value = this.inputElement.value;
-        this.setValueAndNotify(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);
-    }
-    /**
-     * 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();
-        }
-    }
-    /**
-     * Process internal icon click and fire `icon-click` event
-     * @returns {void}
-     */
-    iconClick() {
-        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 }));
-        }
-    }
-    /**
-     * Renders icon element if property present
-     * @returns {TemplateResult | null} Template result
-     */
-    renderIcon() {
-        return this.icon ? html `
-    <ef-icon
-        part="icon"
-        icon="${this.icon}"
-        ?readonly="${this.readonly}"
-        ?disabled="${this.disabled}"
-        @tap="${this.iconClick}"
-        @keydown="${this.handleKeyDown}"
-        tabindex="${ifDefined(this.iconHasAction ? '0' : undefined)}"
-      ></ef-icon>
-    ` : null;
-    }
-    /**
-     * A `TemplateResult` that will be used
-     * to render the updated internal template.
-     * @return {TemplateResult} Render template
-     */
-    render() {
-        return html `
-      <input
-        type="email"
-        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)}"
-        ?multiple="${this.multiple}"
-        autocomplete="off"
-      />
-      ${this.renderIcon()}
-    `;
+            || changedProperties.has('multiple')
+            || super.shouldValidateInput(changedProperties);
     }
 };
-__decorate([
-    property({ type: String, hasChanged })
-], EmailField.prototype, "pattern", void 0);
-__decorate([
-    property({ type: String })
-], EmailField.prototype, "placeholder", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true })
-], EmailField.prototype, "error", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true })
-], EmailField.prototype, "warning", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true })
-], EmailField.prototype, "transparent", 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);
 __decorate([
     property({ type: Boolean, reflect: true })
 ], EmailField.prototype, "multiple", void 0);
-__decorate([
-    property({ type: String, reflect: true })
-], EmailField.prototype, "icon", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true, attribute: 'icon-has-action' })
-], EmailField.prototype, "iconHasAction", void 0);
-__decorate([
-    query('[part="input"]', true)
-], EmailField.prototype, "inputElement", void 0);
 EmailField = __decorate([
     customElement('ef-email-field', {
         alias: 'coral-email-field'

package/lib/flag/custom-elements.md

@@ -4,7 +4,7 @@ Provides a collection of flags.
 
 ## Properties
 
-| Property | Attribute | Type             | Description                     |
-|----------|-----------|------------------|---------------------------------|
-| `flag`   | `flag`    | `string \| null` | Name of a known flag to render. |
-| `src`    | `src`     | `string \| null` | Src location of an svg flag.    |
+| Property | Attribute | Type             | Default | Description                     |
+|----------|-----------|------------------|---------|---------------------------------|
+| `flag`   | `flag`    | `string \| null` | null    | Name of a known flag to render. |
+| `src`    | `src`     | `string \| null` | null    | Src location of an svg flag.    |

package/lib/flag/index.d.ts

@@ -25,6 +25,7 @@ export declare class Flag extends BasicElement {
     /**
      * Name of a known flag to render.
      * @example gb
+     * @default null
      */
     get flag(): string | null;
     set flag(value: string | null);
@@ -32,6 +33,7 @@ export declare class Flag extends BasicElement {
     /**
      * Src location of an svg flag.
      * @example https://cdn.io/flags/gb.svg
+     * @default null
      */
     get src(): string | null;
     set src(value: string | null);

package/lib/flag/index.js

@@ -53,6 +53,7 @@ let Flag = class Flag extends BasicElement {
     /**
      * Name of a known flag to render.
      * @example gb
+     * @default null
      */
     get flag() {
         return this._flag;
@@ -66,6 +67,7 @@ let Flag = class Flag extends BasicElement {
     /**
      * Src location of an svg flag.
      * @example https://cdn.io/flags/gb.svg
+     * @default null
      */
     get src() {
         return this._src;

package/lib/icon/custom-elements.md

@@ -2,7 +2,7 @@
 
 ## Properties
 
-| Property | Attribute | Type             | Description                                      |
-|----------|-----------|------------------|--------------------------------------------------|
-| `icon`   | `icon`    | `string \| null` | Name of a known icon to render or URL of SVG icon. |
-| `src`    | `src`     | `string \| null` | Src location of an svg icon.                     |
+| Property | Attribute | Type             | Default | Description                                      |
+|----------|-----------|------------------|---------|--------------------------------------------------|
+| `icon`   | `icon`    | `string \| null` | null    | Name of a known icon to render or URL of SVG icon. |
+| `src`    | `src`     | `string \| null` | null    | Src location of an svg icon.                     |

package/lib/icon/index.d.ts

@@ -18,6 +18,7 @@ export declare class Icon extends BasicElement {
     /**
      * Name of a known icon to render or URL of SVG icon.
      * @example heart | https://cdn.io/icons/heart.svg
+     * @default null
      */
     get icon(): string | null;
     set icon(value: string | null);
@@ -26,6 +27,7 @@ export declare class Icon extends BasicElement {
      * Src location of an svg icon.
      * @example https://cdn.io/icons/heart.svg
      * @deprecated Use `icon` instead
+     * @default null
      */
     get src(): string | null;
     set src(value: string | null);

package/lib/icon/index.js

@@ -50,6 +50,7 @@ let Icon = class Icon extends BasicElement {
     /**
      * Name of a known icon to render or URL of SVG icon.
      * @example heart | https://cdn.io/icons/heart.svg
+     * @default null
      */
     get icon() {
         return this._icon;
@@ -66,6 +67,7 @@ let Icon = class Icon extends BasicElement {
      * Src location of an svg icon.
      * @example https://cdn.io/icons/heart.svg
      * @deprecated Use `icon` instead
+     * @default null
      */
     get src() {
         return this._src;

package/lib/interactive-chart/custom-elements.json

@@ -24,8 +24,9 @@
         },
         {
           "name": "legend-style",
-          "description": "Set legend style i.e. `horizontal`, `vertical`.\nDefault is `vertical`.",
-          "type": "\"vertical\" | \"horizontal\""
+          "description": "Set legend style i.e. `horizontal`, `vertical`.",
+          "type": "\"vertical\" | \"horizontal\"",
+          "default": "\"vertical\""
         }
       ],
       "properties": [
@@ -52,14 +53,9 @@
         {
           "name": "legendStyle",
           "attribute": "legend-style",
-          "description": "Set legend style i.e. `horizontal`, `vertical`.\nDefault is `vertical`.",
-          "type": "\"vertical\" | \"horizontal\""
-        },
-        {
-          "name": "seriesList",
-          "description": "Array of series instances in chart",
-          "type": "object",
-          "default": "[]"
+          "description": "Set legend style i.e. `horizontal`, `vertical`.",
+          "type": "\"vertical\" | \"horizontal\"",
+          "default": "\"vertical\""
         }
       ],
       "events": [

package/lib/interactive-chart/custom-elements.md

@@ -5,13 +5,12 @@ By lightweight-charts library.
 
 ## Properties
 
-| Property             | Attribute              | Type                         | Default | Description                                      |
-|----------------------|------------------------|------------------------------|---------|--------------------------------------------------|
-| `config`             | `config`               | `InteractiveChartConfig`     | null    | Chart configurations for init chart              |
-| `disabledJumpButton` | `disabled-jump-button` | `boolean`                    | false   | Hide jump to latest data button                  |
-| `disabledLegend`     | `disabled-legend`      | `boolean`                    | false   | Hide legend                                      |
-| `legendStyle`        | `legend-style`         | `"vertical" \| "horizontal"` |         | Set legend style i.e. `horizontal`, `vertical`.<br />Default is `vertical`. |
-| `seriesList`         |                        | `object`                     | []      | Array of series instances in chart               |
+| Property             | Attribute              | Type                         | Default    | Description                                     |
+|----------------------|------------------------|------------------------------|------------|-------------------------------------------------|
+| `config`             | `config`               | `InteractiveChartConfig`     | null       | Chart configurations for init chart             |
+| `disabledJumpButton` | `disabled-jump-button` | `boolean`                    | false      | Hide jump to latest data button                 |
+| `disabledLegend`     | `disabled-legend`      | `boolean`                    | false      | Hide legend                                     |
+| `legendStyle`        | `legend-style`         | `"vertical" \| "horizontal"` | "vertical" | Set legend style i.e. `horizontal`, `vertical`. |
 
 ## Methods
 

package/lib/interactive-chart/index.d.ts

@@ -43,9 +43,9 @@ export declare class InteractiveChart extends ResponsiveElement {
     deprecatedLegendStyle: LegendStyle | undefined;
     /**
      * Set legend style i.e. `horizontal`, `vertical`.
-     * Default is `vertical`.
      * @param {LegendStyle} value legend style value
      * @type {"vertical" | "horizontal"} type of legend style
+     * @default vertical
      **/
     set legendStyle(value: LegendStyle);
     get legendStyle(): LegendStyle;
@@ -54,7 +54,10 @@ export declare class InteractiveChart extends ResponsiveElement {
      * when deprecated features are used.
     */
     private deprecationNotice;
-    /** Array of series instances in chart */
+    /**
+     * @ignore
+     * Array of series instances in chart
+     */
     seriesList: SeriesList[];
     private jumpButtonInitialized;
     private legendInitialized;

package/lib/interactive-chart/index.js

@@ -39,7 +39,10 @@ let InteractiveChart = InteractiveChart_1 = class InteractiveChart extends Respo
          * when deprecated features are used.
         */
         this.deprecationNotice = new DeprecationNotice('`legendstyle` attribute and property are deprecated. Use `legend-style` for attribute and `legendStyle` property instead.');
-        /** Array of series instances in chart */
+        /**
+         * @ignore
+         * Array of series instances in chart
+         */
         this.seriesList = [];
         this.jumpButtonInitialized = false;
         this.legendInitialized = false;
@@ -116,9 +119,9 @@ let InteractiveChart = InteractiveChart_1 = class InteractiveChart extends Respo
     }
     /**
      * Set legend style i.e. `horizontal`, `vertical`.
-     * Default is `vertical`.
      * @param {LegendStyle} value legend style value
      * @type {"vertical" | "horizontal"} type of legend style
+     * @default vertical
      **/
     set legendStyle(value) {
         const oldValue = this.legendStyle;

package/lib/item/custom-elements.json

@@ -23,7 +23,8 @@
         {
           "name": "selected",
           "description": "Indicates that the item is selected",
-          "type": "boolean"
+          "type": "boolean",
+          "default": "false"
         },
         {
           "name": "multiple",
@@ -51,7 +52,7 @@
           "name": "value",
           "description": "The content of this attribute represents the value of the item.",
           "type": "string",
-          "default": "0"
+          "default": "\"\""
         },
         {
           "name": "disabled",
@@ -83,7 +84,8 @@
           "name": "selected",
           "attribute": "selected",
           "description": "Indicates that the item is selected",
-          "type": "boolean"
+          "type": "boolean",
+          "default": "false"
         },
         {
           "name": "multiple",
@@ -112,12 +114,12 @@
           "type": "string | null"
         },
         {
-          "name": "highlightable",
+          "name": "highlightable (readonly)",
           "description": "Return true if the item can be highlighted. True if not disabled and type is Text",
           "type": "boolean"
         },
         {
-          "name": "isTruncated",
+          "name": "isTruncated (readonly)",
           "description": "Getter returning if the label is truncated",
           "type": "boolean"
         },
@@ -126,7 +128,7 @@
           "attribute": "value",
           "description": "The content of this attribute represents the value of the item.",
           "type": "string",
-          "default": "0"
+          "default": "\"\""
         },
         {
           "name": "disabled",

package/lib/item/custom-elements.md

@@ -6,20 +6,20 @@ to create simple menus or navigation panels.
 
 ## Properties
 
-| Property        | Attribute     | Modifiers | Type               | Default | Description                                      |
-|-----------------|---------------|-----------|--------------------|---------|--------------------------------------------------|
-| `disabled`      | `disabled`    |           | `boolean`          | false   | Set disabled state.                              |
-| `for`           | `for`         |           | `string \| null`   | null    | Specifies which element an item is bound to      |
-| `highlightable` |               | readonly  | `boolean`          |         | Return true if the item can be highlighted. True if not disabled and type is Text |
-| `highlighted`   | `highlighted` |           | `boolean`          | false   | Highlight the item                               |
-| `icon`          | `icon`        |           | `string \| null`   | null    | Set the icon name from the ef-icon list          |
-| `isTruncated`   |               | readonly  | `boolean`          |         | Getter returning if the label is truncated       |
-| `label`         | `label`       |           | `string \| null`   | null    | The text for the label indicating the meaning of the item.<br />By having both `label` and content, `label` always takes priority |
-| `multiple`      | `multiple`    |           | `boolean`          | false   | Is the item part of a multiple selection         |
-| `selected`      | `selected`    |           | `boolean`          |         | Indicates that the item is selected              |
-| `subLabel`      | `sub-label`   |           | `string \| null`   | null    | The`subLabel` property represents the text beneath the label. |
-| `type`          | `type`        |           | `ItemType \| null` | null    | If defined value can be `text`, `header` or `divider` |
-| `value`         | `value`       |           | `string`           | 0       | The content of this attribute represents the value of the item. |
+| Property                   | Attribute     | Type               | Default | Description                                      |
+|----------------------------|---------------|--------------------|---------|--------------------------------------------------|
+| `disabled`                 | `disabled`    | `boolean`          | false   | Set disabled state.                              |
+| `for`                      | `for`         | `string \| null`   | null    | Specifies which element an item is bound to      |
+| `highlightable (readonly)` |               | `boolean`          |         | Return true if the item can be highlighted. True if not disabled and type is Text |
+| `highlighted`              | `highlighted` | `boolean`          | false   | Highlight the item                               |
+| `icon`                     | `icon`        | `string \| null`   | null    | Set the icon name from the ef-icon list          |
+| `isTruncated (readonly)`   |               | `boolean`          |         | Getter returning if the label is truncated       |
+| `label`                    | `label`       | `string \| null`   | null    | The text for the label indicating the meaning of the item.<br />By having both `label` and content, `label` always takes priority |
+| `multiple`                 | `multiple`    | `boolean`          | false   | Is the item part of a multiple selection         |
+| `selected`                 | `selected`    | `boolean`          | false   | Indicates that the item is selected              |
+| `subLabel`                 | `sub-label`   | `string \| null`   | null    | The`subLabel` property represents the text beneath the label. |
+| `type`                     | `type`        | `ItemType \| null` | null    | If defined value can be `text`, `header` or `divider` |
+| `value`                    | `value`       | `string`           | ""      | The content of this attribute represents the value of the item. |
 
 ## Slots
 

package/lib/item/index.d.ts

@@ -10,7 +10,7 @@ export * from './helpers/types';
  * to create simple menus or navigation panels.
  *
  * @attr {string} value - The content of this attribute represents the value of the item.
- * @prop {string} [value=] - The content of this attribute represents the value of the item.
+ * @prop {string} [value=""] - The content of this attribute represents the value of the item.
  *
  * @attr {boolean} disabled - Set disabled state.
  * @prop {boolean} [disabled=false] - Set disabled state.
@@ -48,6 +48,7 @@ export declare class Item extends ControlElement {
     /**
      * Indicates that the item is selected
      * @param value selected value
+     * @default false
      */
     set selected(value: boolean);
     get selected(): boolean;

package/lib/item/index.js

@@ -18,7 +18,7 @@ const isAllWhitespaceTextNode = (node) => {
  * to create simple menus or navigation panels.
  *
  * @attr {string} value - The content of this attribute represents the value of the item.
- * @prop {string} [value=] - The content of this attribute represents the value of the item.
+ * @prop {string} [value=""] - The content of this attribute represents the value of the item.
  *
  * @attr {boolean} disabled - Set disabled state.
  * @prop {boolean} [disabled=false] - Set disabled state.
@@ -117,6 +117,7 @@ let Item = class Item extends ControlElement {
     /**
      * Indicates that the item is selected
      * @param value selected value
+     * @default false
      */
     set selected(value) {
         const oldValue = this._selected;