@refinitiv-ui/elements 5.3.4 → 5.8.0

package/lib/datetime-picker/types.d.ts

@@ -1,3 +1,3 @@
-import { CalendarFilter as DatetimePickerFilter } from '../calendar';
+import type { CalendarFilter as DatetimePickerFilter } from '../calendar';
 declare type DatetimePickerDuplex = '' | 'consecutive' | 'split';
 export { DatetimePickerDuplex, DatetimePickerFilter };

package/lib/datetime-picker/utils.js

@@ -1,4 +1,4 @@
-import { format, DateFormat, parse, TimeFormat, toTimeSegment } from '@refinitiv-ui/utils';
+import { format, DateFormat, parse, TimeFormat, toTimeSegment } from '@refinitiv-ui/utils/lib/date.js';
 /**
  * A helper class to split date time string into date and time segments
  */

package/lib/dialog/custom-elements.json

@@ -20,23 +20,40 @@
           "name": "opened",
           "description": "Set dialog to open",
           "type": "boolean",
-          "default": "\"false\""
+          "default": "false"
+        },
+        {
+          "name": "no-cancel-on-esc-key",
+          "description": "Prevents dialog to close when user presses ESC key",
+          "type": "boolean",
+          "default": "false"
         },
         {
           "name": "x",
           "description": "Set a specific x coordinate of dialog",
-          "type": "string"
+          "type": "string | undefined"
         },
         {
           "name": "y",
           "description": "Set a specific y coordinate of dialog",
-          "type": "string"
+          "type": "string | undefined"
+        },
+        {
+          "name": "full-screen",
+          "description": "Set dialog to full screen",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "position-target",
+          "description": "Set position of dialog i.e. `top`, `right`, `left`, `bottom`, `center` or combination of theme e.g. `top right`.",
+          "type": "string | undefined"
         },
         {
           "name": "no-cancel-on-esc-key",
           "description": "Prevents dialog to close when user presses ESC key",
           "type": "boolean",
-          "default": "\"false\""
+          "default": "false"
         },
         {
           "name": "full-screen",
@@ -46,7 +63,7 @@
         {
           "name": "position-target",
           "description": "Set position of dialog i.e. `top`, `right`, `left`, `bottom`, `center` or combination of theme e.g. `top right`.",
-          "type": "string"
+          "type": "string | undefined"
         }
       ],
       "properties": [
@@ -66,42 +83,47 @@
         {
           "name": "noCancelOnOutsideClick",
           "description": "Prevents dialog to close when user clicks outside the dialog.",
-          "type": "boolean"
+          "type": "boolean",
+          "default": "true"
         },
         {
           "name": "opened",
           "attribute": "opened",
           "description": "Set dialog to open",
           "type": "boolean",
-          "default": "\"false\""
+          "default": "false"
         },
         {
           "name": "noCancelOnEscKey",
+          "attribute": "no-cancel-on-esc-key",
           "description": "Prevents dialog to close when user presses ESC key",
           "type": "boolean",
-          "default": "\"false\""
+          "default": "false"
         },
         {
           "name": "x",
           "attribute": "x",
           "description": "Set a specific x coordinate of dialog",
-          "type": "string"
+          "type": "string | undefined"
         },
         {
           "name": "y",
           "attribute": "y",
           "description": "Set a specific y coordinate of dialog",
-          "type": "string"
+          "type": "string | undefined"
         },
         {
           "name": "fullScreen",
+          "attribute": "full-screen",
           "description": "Set dialog to full screen",
-          "type": "boolean"
+          "type": "boolean",
+          "default": "false"
         },
         {
           "name": "positionTarget",
+          "attribute": "position-target",
           "description": "Set position of dialog i.e. `top`, `right`, `left`, `bottom`, `center` or combination of theme e.g. `top right`.",
-          "type": "string"
+          "type": "string | undefined"
         }
       ],
       "events": [

package/lib/dialog/custom-elements.md

@@ -0,0 +1,47 @@
+# ef-dialog
+
+Popup window, designed to contain and show any HTML content.
+It provides modal and dragging functionality,
+and also allows custom footers and control buttons to be used.
+
+## Attributes
+
+| Attribute              | Type                  | Default | Description                                      |
+|------------------------|-----------------------|---------|--------------------------------------------------|
+| `full-screen`          | `boolean`             |         | Set dialog to full screen                        |
+| `no-cancel-on-esc-key` | `boolean`             | false   | Prevents dialog to close when user presses ESC key |
+| `position-target`      | `string \| undefined` |         | Set position of dialog i.e. `top`, `right`, `left`, `bottom`, `center` or combination of theme e.g. `top right`. |
+
+## Properties
+
+| Property                 | Attribute              | Type                  | Default | Description                                      |
+|--------------------------|------------------------|-----------------------|---------|--------------------------------------------------|
+| `draggable`              | `draggable`            | `boolean`             | false   | Should the dialog be draggable                   |
+| `fullScreen`             | `full-screen`          | `boolean`             | false   | Set dialog to full screen                        |
+| `header`                 | `header`               | `string \| null`      | null    | Set Header/Title of the dialog                   |
+| `noCancelOnEscKey`       | `no-cancel-on-esc-key` | `boolean`             | false   | Prevents dialog to close when user presses ESC key |
+| `noCancelOnOutsideClick` |                        | `boolean`             | true    | Prevents dialog to close when user clicks outside the dialog. |
+| `opened`                 | `opened`               | `boolean`             | false   | Set dialog to open                               |
+| `positionTarget`         | `position-target`      | `string \| undefined` |         | Set position of dialog i.e. `top`, `right`, `left`, `bottom`, `center` or combination of theme e.g. `top right`. |
+| `x`                      | `x`                    | `string \| undefined` |         | Set a specific x coordinate of dialog            |
+| `y`                      | `y`                    | `string \| undefined` |         | Set a specific y coordinate of dialog            |
+
+## Methods
+
+| Method  | Type       | Description                                      |
+|---------|------------|--------------------------------------------------|
+| `refit` | `(): void` | Clear all cached values and fit the popup.<br />Use this function only if maxWidth, maxHeight, minWidth, minHeight, height, width are changed |
+
+## Events
+
+| Event            | Description                                      |
+|------------------|--------------------------------------------------|
+| `cancel`         | Fired when dialog is closed by user clicked a default Cancel button, clicked outside to close dialog or press ESC to close the dialog. Prevent default to stop default action |
+| `confirm`        | Fired when dialog is closed by user clicked a default OK button. Prevent default to stop default action |
+| `opened-changed` | Fired when value of `opened` property is changed. Prevent default to stop default action |
+
+## Slots
+
+| Name     | Description                                      |
+|----------|--------------------------------------------------|
+| `footer` | Hide default OK and Cancel button and replace dialog's footer with your custom content. |

package/lib/dialog/index.d.ts

@@ -1,12 +1,12 @@
 import { JSXInterface } from '../jsx';
-import { CSSResult, TemplateResult, ElementSize, PropertyValues } from '@refinitiv-ui/core';
-import { Overlay } from '../overlay';
-import '../icon';
-import '../panel';
-import '../header';
-import '../button';
+import { CSSResultGroup, TemplateResult, ElementSize, PropertyValues } from '@refinitiv-ui/core';
+import { Overlay } from '../overlay/index.js';
+import '../icon/index.js';
+import '../panel/index.js';
+import '../header/index.js';
+import '../button/index.js';
 import { Translate } from '@refinitiv-ui/translate';
-import '@refinitiv-ui/phrasebook/lib/locale/en/dialog';
+import '@refinitiv-ui/phrasebook/lib/locale/en/dialog.js';
 /**
  * Popup window, designed to contain and show any HTML content.
  * It provides modal and dragging functionality,
@@ -20,17 +20,17 @@ import '@refinitiv-ui/phrasebook/lib/locale/en/dialog';
  * @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
@@ -45,12 +45,12 @@ export declare class Dialog extends Overlay {
      */
     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 {CSSResult | CSSResult[]} CSS template
+     * @returns CSS template
      */
-    static get styles(): CSSResult | CSSResult[];
+    static get styles(): CSSResultGroup;
     /**
      * Set Header/Title of the dialog
      */
@@ -79,9 +79,6 @@ export declare class Dialog extends Overlay {
      * Footer Element
      */
     private footerElement;
-    /**
-    * @ignore
-    */
     noCancelOnOutsideClick: boolean;
     /**
     * @ignore

package/lib/dialog/index.js

@@ -1,21 +1,18 @@
-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, customElement, html, property, query } from '@refinitiv-ui/core';
-import { Overlay } from '../overlay';
-import '../icon';
-import '../panel';
-import '../header';
-import '../button';
-import { deregister as draggableDeregister, register as draggableRegister } from './draggable-element';
+import { __decorate } from "tslib";
+import { 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 { isIE } from '@refinitiv-ui/utils/lib/browser.js';
+import { deregister as draggableDeregister, register as draggableRegister } from './draggable-element.js';
+import { Overlay } from '../overlay/index.js';
+import '../icon/index.js';
+import '../panel/index.js';
+import '../header/index.js';
+import '../button/index.js';
 import { translate, TranslatePropertyKey } from '@refinitiv-ui/translate';
-import '@refinitiv-ui/phrasebook/lib/locale/en/dialog';
-import { VERSION } from '../';
-// TODO: use metrics once available
-const isIE = (/Trident/g).test(navigator.userAgent) || (/MSIE/g).test(navigator.userAgent);
+import '@refinitiv-ui/phrasebook/lib/locale/en/dialog.js';
 /**
  * Popup window, designed to contain and show any HTML content.
  * It provides modal and dragging functionality,
@@ -29,17 +26,17 @@ const isIE = (/Trident/g).test(navigator.userAgent) || (/MSIE/g).test(navigator.
  * @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
@@ -58,9 +55,6 @@ let Dialog = class Dialog extends Overlay {
          * Should the dialog be draggable
          */
         this.draggable = false;
-        /**
-        * @ignore
-        */
         this.noCancelOnOutsideClick = true;
         /**
         * @ignore
@@ -79,13 +73,15 @@ let Dialog = class Dialog extends Overlay {
         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 {CSSResult | CSSResult[]} CSS template
+     * @returns CSS template
      */
     static get styles() {
-        return [...Overlay.styles, css `
+        return [
+            super.styles,
+            css `
       :host {
         width: 400px;
         display: flex;
@@ -117,7 +113,8 @@ let Dialog = class Dialog extends Overlay {
         flex: none;
         cursor: pointer;
       }
-    `];
+    `
+        ];
     }
     disconnectedCallback() {
         super.disconnectedCallback();

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

@@ -3,63 +3,58 @@
   "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": "minlength",
-          "description": "Set character min limit",
-          "type": "number | null"
+          "name": "placeholder",
+          "description": "Set placeholder text",
+          "type": "string",
+          "default": "\"\""
         },
         {
-          "name": "multiple",
-          "description": "Set to multiple mode, allows multiple emails in a single input",
+          "name": "readonly",
+          "description": "Set readonly state",
           "type": "boolean",
           "default": "false"
         },
         {
-          "name": "icon",
-          "description": "Specify icon to display in input. Value can be icon name",
-          "type": "string",
-          "default": "\"\""
+          "name": "transparent",
+          "description": "Disables all other states and border/background styles.",
+          "type": "boolean",
+          "default": "false"
         },
         {
-          "name": "icon-has-action",
-          "description": "Specify when icon need to be clickable",
+          "name": "warning",
+          "description": "Set warning state",
           "type": "boolean",
           "default": "false"
         },
@@ -70,91 +65,76 @@
           "default": "\"\""
         },
         {
-          "name": "readonly",
-          "description": "Set readonly state",
-          "type": "boolean",
-          "default": "\"false\""
+          "name": "icon-has-action",
+          "description": "Specify when icon need to be clickable",
+          "type": "boolean"
         },
         {
-          "name": "disabled",
-          "description": "Set disabled state",
-          "type": "boolean",
-          "default": "\"false\""
+          "name": "maxlength",
+          "description": "Set character max limit",
+          "type": "number"
+        },
+        {
+          "name": "minlength",
+          "description": "Set character min limit",
+          "type": "number"
         }
       ],
       "properties": [
         {
-          "name": "pattern",
-          "attribute": "pattern",
-          "description": "Set regular expression for input validation",
-          "type": "string",
-          "default": "\"\""
+          "name": "multiple",
+          "attribute": "multiple",
+          "description": "Set to multiple mode, allows multiple emails in a single input",
+          "type": "boolean",
+          "default": "false"
         },
         {
-          "name": "placeholder",
-          "attribute": "placeholder",
-          "description": "Set placeholder text",
-          "type": "string",
-          "default": "\"\""
+          "name": "disabled",
+          "attribute": "disabled",
+          "description": "Set disabled state",
+          "type": "boolean",
+          "default": "false"
         },
         {
           "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": "\"\""
         },
@@ -163,14 +143,28 @@
           "attribute": "readonly",
           "description": "Set readonly state",
           "type": "boolean",
-          "default": "\"false\""
+          "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\""
+          "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

@@ -0,0 +1,37 @@
+# ef-email-field
+
+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 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`     |                   | `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`       |                   | `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. |
+| `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 when icon is clicked     |
+| `value-changed` | Dispatched when value changes       |