@refinitiv-ui/elements 5.7.0 → 5.8.0

package/lib/dialog/index.js

@@ -26,17 +26,17 @@ import '@refinitiv-ui/phrasebook/lib/locale/en/dialog.js';
  * @attr {boolean} [no-cancel-on-esc-key=false] - Prevents dialog to close when user presses ESC key
  * @prop {boolean} [noCancelOnEscKey=false] - Prevents dialog to close when user presses ESC key
  *
- * @attr {string} x - Set a specific x coordinate of dialog
- * @prop {string} x - Set a specific x coordinate of dialog
+ * @attr {string | undefined} x - Set a specific x coordinate of dialog
+ * @prop {string | undefined} x - Set a specific x coordinate of dialog
  *
- * @attr {string} y - Set a specific y coordinate of dialog
- * @prop {string} y - Set a specific y coordinate of dialog
+ * @attr {string | undefined} y - Set a specific y coordinate of dialog
+ * @prop {string | undefined} y - Set a specific y coordinate of dialog
  *
  * @attr {boolean} full-screen - Set dialog to full screen
- * @prop {boolean} fullScreen - Set dialog to full screen
+ * @prop {boolean} [fullScreen=false] - Set dialog to full screen
  *
- * @attr {string} position-target - Set position of dialog i.e. `top`, `right`, `left`, `bottom`, `center` or combination of theme e.g. `top right`.
- * @prop {string} positionTarget - Set position of dialog i.e. `top`, `right`, `left`, `bottom`, `center` or combination of theme e.g. `top right`.
+ * @attr {string | undefined} position-target - Set position of dialog i.e. `top`, `right`, `left`, `bottom`, `center` or combination of theme e.g. `top right`.
+ * @prop {string | undefined} positionTarget - Set position of dialog i.e. `top`, `right`, `left`, `bottom`, `center` or combination of theme e.g. `top right`.
  *
  * @fires opened-changed - Fired when value of `opened` property is changed. Prevent default to stop default action
  * @fires confirm - Fired when dialog is closed by user clicked a default OK button. Prevent default to stop default action
@@ -55,9 +55,6 @@ let Dialog = class Dialog extends Overlay {
          * Should the dialog be draggable
          */
         this.draggable = false;
-        /**
-        * @ignore
-        */
         this.noCancelOnOutsideClick = true;
         /**
         * @ignore

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

@@ -3,160 +3,140 @@
   "tags": [
     {
       "name": "ef-email-field",
-      "description": "A form control element for email",
+      "description": "A form control element for email.",
       "attributes": [
         {
-          "name": "pattern",
-          "description": "Set regular expression for input validation",
-          "type": "string",
-          "default": "\"\""
+          "name": "multiple",
+          "description": "Set to multiple mode, allows multiple emails in a single input",
+          "type": "boolean",
+          "default": "false"
         },
         {
-          "name": "placeholder",
-          "description": "Set placeholder text",
-          "type": "string",
-          "default": "\"\""
+          "name": "disabled",
+          "description": "Set disabled state",
+          "type": "boolean",
+          "default": "false"
         },
         {
           "name": "error",
-          "description": "Set state to error",
+          "description": "Set error state",
           "type": "boolean",
           "default": "false"
         },
         {
-          "name": "warning",
-          "description": "Set state to warning",
-          "type": "boolean",
-          "default": "false"
+          "name": "icon",
+          "description": "Specify icon to display in input. Value can be icon name",
+          "type": "string | null"
         },
         {
-          "name": "transparent",
-          "description": "Disables all other states and border/background styles.\nUse with advanced composite elements requiring e.g. multi selection in\ncombo-box when parent container handles element states.",
+          "name": "icon-has-action",
+          "description": "Specify when icon need to be clickable",
           "type": "boolean",
           "default": "false"
         },
         {
-          "name": "maxlength",
-          "description": "Set character max limit",
-          "type": "number | null"
+          "name": "placeholder",
+          "description": "Set placeholder text",
+          "type": "string",
+          "default": "\"\""
         },
         {
-          "name": "minlength",
-          "description": "Set character min limit",
-          "type": "number | null"
+          "name": "readonly",
+          "description": "Set readonly state",
+          "type": "boolean",
+          "default": "false"
         },
         {
-          "name": "multiple",
-          "description": "Set to multiple mode, allows multiple emails in a single input",
+          "name": "transparent",
+          "description": "Disables all other states and border/background styles.",
           "type": "boolean",
           "default": "false"
         },
         {
-          "name": "icon",
-          "description": "Specify icon to display in input. Value can be icon name",
+          "name": "warning",
+          "description": "Set warning state",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "value",
+          "description": "Input's value",
           "type": "string",
           "default": "\"\""
         },
         {
           "name": "icon-has-action",
           "description": "Specify when icon need to be clickable",
-          "type": "boolean",
-          "default": "false"
+          "type": "boolean"
         },
         {
-          "name": "value",
-          "description": "Input's value",
-          "type": "string",
-          "default": "0"
+          "name": "maxlength",
+          "description": "Set character max limit",
+          "type": "number"
         },
         {
-          "name": "readonly",
-          "description": "Set readonly state",
+          "name": "minlength",
+          "description": "Set character min limit",
+          "type": "number"
+        }
+      ],
+      "properties": [
+        {
+          "name": "multiple",
+          "attribute": "multiple",
+          "description": "Set to multiple mode, allows multiple emails in a single input",
           "type": "boolean",
           "default": "false"
         },
         {
           "name": "disabled",
+          "attribute": "disabled",
           "description": "Set disabled state",
           "type": "boolean",
           "default": "false"
-        }
-      ],
-      "properties": [
-        {
-          "name": "pattern",
-          "attribute": "pattern",
-          "description": "Set regular expression for input validation",
-          "type": "string",
-          "default": "\"\""
-        },
-        {
-          "name": "placeholder",
-          "attribute": "placeholder",
-          "description": "Set placeholder text",
-          "type": "string",
-          "default": "\"\""
         },
         {
           "name": "error",
           "attribute": "error",
-          "description": "Set state to error",
+          "description": "Set error state",
           "type": "boolean",
           "default": "false"
         },
         {
-          "name": "warning",
-          "attribute": "warning",
-          "description": "Set state to warning",
-          "type": "boolean",
-          "default": "false"
+          "name": "icon",
+          "attribute": "icon",
+          "description": "Specify icon to display in input. Value can be icon name",
+          "type": "string | null"
         },
         {
-          "name": "transparent",
-          "attribute": "transparent",
-          "description": "Disables all other states and border/background styles.\nUse with advanced composite elements requiring e.g. multi selection in\ncombo-box when parent container handles element states.",
+          "name": "iconHasAction",
+          "attribute": "icon-has-action",
+          "description": "Specify when icon need to be clickable",
           "type": "boolean",
           "default": "false"
         },
         {
           "name": "maxLength",
-          "attribute": "maxlength",
           "description": "Set character max limit",
           "type": "number | null"
         },
         {
           "name": "minLength",
-          "attribute": "minlength",
           "description": "Set character min limit",
           "type": "number | null"
         },
         {
-          "name": "multiple",
-          "attribute": "multiple",
-          "description": "Set to multiple mode, allows multiple emails in a single input",
-          "type": "boolean",
-          "default": "false"
-        },
-        {
-          "name": "icon",
-          "attribute": "icon",
-          "description": "Specify icon to display in input. Value can be icon name",
+          "name": "pattern",
+          "description": "Set regular expression for input validation",
           "type": "string",
           "default": "\"\""
         },
         {
-          "name": "iconHasAction",
-          "attribute": "icon-has-action",
-          "description": "Specify when icon need to be clickable",
-          "type": "boolean",
-          "default": "false"
-        },
-        {
-          "name": "value",
-          "attribute": "value",
-          "description": "Input's value",
+          "name": "placeholder",
+          "attribute": "placeholder",
+          "description": "Set placeholder text",
           "type": "string",
-          "default": "0"
+          "default": "\"\""
         },
         {
           "name": "readonly",
@@ -166,11 +146,25 @@
           "default": "false"
         },
         {
-          "name": "disabled",
-          "attribute": "disabled",
-          "description": "Set disabled state",
+          "name": "transparent",
+          "attribute": "transparent",
+          "description": "Disables all other states and border/background styles.",
           "type": "boolean",
           "default": "false"
+        },
+        {
+          "name": "warning",
+          "attribute": "warning",
+          "description": "Set warning state",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "value",
+          "attribute": "value",
+          "description": "Input's value",
+          "type": "string",
+          "default": "\"\""
         }
       ],
       "events": [
@@ -184,14 +178,7 @@
         },
         {
           "name": "icon-click",
-          "description": "Dispatched only when element has icon-has-action attribute and icon is clicked"
-        }
-      ],
-      "methods": [
-        {
-          "name": "select",
-          "description": "Select the contents of input",
-          "params": []
+          "description": "Dispatched when icon is clicked"
         }
       ]
     }

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

@@ -1,35 +1,37 @@
 # ef-email-field
 
-A form control element for email
+A form control element for email.
+
+## Attributes
+
+| Attribute         | Type      | Description                            |
+|-------------------|-----------|----------------------------------------|
+| `icon-has-action` | `boolean` | Specify when icon need to be clickable |
+| `maxlength`       | `number`  | Set character max limit                |
+| `minlength`       | `number`  | Set character min limit                |
 
 ## Properties
 
 | Property        | Attribute         | Type             | Default | Description                                      |
 |-----------------|-------------------|------------------|---------|--------------------------------------------------|
 | `disabled`      | `disabled`        | `boolean`        | false   | Set disabled state                               |
-| `error`         | `error`           | `boolean`        | false   | Set state to error                               |
-| `icon`          | `icon`            | `string`         | ""      | Specify icon to display in input. Value can be icon name |
+| `error`         | `error`           | `boolean`        | false   | Set error state                                  |
+| `icon`          | `icon`            | `string \| null` | null    | Specify icon to display in input. Value can be icon name |
 | `iconHasAction` | `icon-has-action` | `boolean`        | false   | Specify when icon need to be clickable           |
-| `maxLength`     | `maxlength`       | `number \| null` | null    | Set character max limit                          |
-| `minLength`     | `minlength`       | `number \| null` | null    | Set character min limit                          |
+| `maxLength`     |                   | `number \| null` | null    | Set character max limit                          |
+| `minLength`     |                   | `number \| null` | null    | Set character min limit                          |
 | `multiple`      | `multiple`        | `boolean`        | false   | Set to multiple mode, allows multiple emails in a single input |
-| `pattern`       | `pattern`         | `string`         | ""      | Set regular expression for input validation      |
+| `pattern`       |                   | `string`         | ""      | Set regular expression for input validation      |
 | `placeholder`   | `placeholder`     | `string`         | ""      | Set placeholder text                             |
 | `readonly`      | `readonly`        | `boolean`        | false   | Set readonly state                               |
-| `transparent`   | `transparent`     | `boolean`        | false   | Disables all other states and border/background styles.<br />Use with advanced composite elements requiring e.g. multi selection in<br />combo-box when parent container handles element states. |
-| `value`         | `value`           | `string`         | 0       | Input's value                                    |
-| `warning`       | `warning`         | `boolean`        | false   | Set state to warning                             |
-
-## Methods
-
-| Method   | Type       | Description                  |
-|----------|------------|------------------------------|
-| `select` | `(): void` | Select the contents of input |
+| `transparent`   | `transparent`     | `boolean`        | false   | Disables all other states and border/background styles. |
+| `value`         | `value`           | `string`         | ""      | Input's value                                    |
+| `warning`       | `warning`         | `boolean`        | false   | Set warning state                                |
 
 ## Events
 
-| Event           | Description                                      |
-|-----------------|--------------------------------------------------|
-| `error-changed` | Dispatched when error state changes              |
-| `icon-click`    | Dispatched only when element has icon-has-action attribute and icon is clicked |
-| `value-changed` | Dispatched when value changes                    |
+| Event           | Description                         |
+|-----------------|-------------------------------------|
+| `error-changed` | Dispatched when error state changes |
+| `icon-click`    | Dispatched when icon is clicked     |
+| `value-changed` | Dispatched when value changes       |

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

@@ -1,140 +1,68 @@
 import { JSXInterface } from '../jsx';
-import { ControlElement, CSSResultGroup, PropertyValues, TemplateResult } from '@refinitiv-ui/core';
+import { PropertyValues } from '@refinitiv-ui/core';
 import '../icon/index.js';
+import { TextField } from '../text-field/index.js';
+import { TemplateMap } from '@refinitiv-ui/core/lib/directives/template-map.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
  */
-export declare class EmailField extends ControlElement {
-    /**
-     * Element version number
-     * @returns version number
-     */
-    static get version(): string;
-    /**
-     * 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(): CSSResultGroup;
-    /**
-     * Set regular expression for input validation
-     */
-    pattern: string;
-    /**
-     * Set placeholder text
-     */
-    placeholder: string;
-    /**
-     * Set state to error
-     */
-    error: boolean;
-    /**
-     * Set state to warning
-     */
-    warning: 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
-     */
-    maxLength: number | null;
-    /**
-     * Set character min limit
-     */
-    minLength: number | null;
+export declare class EmailField extends TextField {
     /**
      * Set to multiple mode, allows multiple emails in a single input
      */
     multiple: boolean;
     /**
-     * Specify icon to display in input. Value can be icon name
-     */
-    icon: string;
-    /**
-     * Specify when icon need to be clickable
-     */
-    iconHasAction: boolean;
-    /**
-     * Get native input element from shadow roots
+     * Decorate `<input>` element with common properties extended from text-field:
+     * type="email" - always `email`
+     * multiple - defined if supports multiple emails
+     * @returns template map
      */
-    private inputElement;
-    /**
-     * Select the contents of input
-     * @returns {void}
-     */
-    select(): void;
-    /**
-     * Called when the element’s DOM has been updated and rendered
-     * @param changedProperties Properties that has changed
-     * @returns {void}
-     */
-    protected updated(changedProperties: PropertyValues): void;
+    protected get decorateInputMap(): TemplateMap;
     /**
      * Check if input should be re-validated
      * @param changedProperties Properties that has changed
      * @returns True if input should be re-validated
      */
-    private shouldValidateInput;
-    /**
-     * Check if value is changed and fire event
-     * @returns {void}
-     */
-    private onPossibleValueChange;
-    /**
-     * Validate input according `pattern`, `minLength` and `maxLength` properties
-     * change state of `error` property according pattern validation
-     * @returns {void}
-     */
-    private validateInput;
-    /**
-     * @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;
-    /**
-     * Detect `enter` and `space` keydown and fire
-     * @param event keydown event
-     * @returns {void}
-     */
-    private handleKeyDown;
-    /**
-     * Process internal icon click and fire `icon-click` event
-     * @returns {void}
-     */
-    private iconClick;
-    /**
-     * Fire event on `icon` click
-     * @returns {void}
-     */
-    private notifyIcon;
-    /**
-     * Renders icon element if property present
-     * @returns {TemplateResult | null} Template result
-     */
-    private renderIcon;
-    /**
-     * A `TemplateResult` that will be used
-     * to render the updated internal template.
-     * @return {TemplateResult} Render template
-     */
-    protected render(): TemplateResult;
+    protected shouldValidateInput(changedProperties: PropertyValues): boolean;
 }
 
 declare global {
@@ -144,7 +72,7 @@ declare global {
 
   namespace JSX {
     interface IntrinsicElements {
-      'ef-email-field': Partial<EmailField> | JSXInterface.ControlHTMLAttributes<EmailField>;
+      'ef-email-field': Partial<EmailField> | JSXInterface.HTMLAttributes<EmailField>;
     }
   }
 }