@refinitiv-ui/elements 5.0.0-beta.3 → 5.0.0-dev.204

package/lib/datetime-picker/locales.js

@@ -1,6 +1,17 @@
 import { Phrasebook } from '@refinitiv-ui/phrasebook';
 import { resolveLocale, DEFAULT_LOCALE } from '@refinitiv-ui/i18n';
-import { enGB, enUS, de, es, fr, it, ja, ko, pl, ru, th, zhCN } from 'date-fns/esm/locale';
+import enGB from 'date-fns/esm/locale/en-GB/index.js';
+import enUS from 'date-fns/esm/locale/en-US/index.js';
+import de from 'date-fns/esm/locale/de/index.js';
+import es from 'date-fns/esm/locale/es/index.js';
+import fr from 'date-fns/esm/locale/fr/index.js';
+import it from 'date-fns/esm/locale/it/index.js';
+import ja from 'date-fns/esm/locale/ja/index.js';
+import ko from 'date-fns/esm/locale/ko/index.js';
+import pl from 'date-fns/esm/locale/pl/index.js';
+import ru from 'date-fns/esm/locale/ru/index.js';
+import th from 'date-fns/esm/locale/th/index.js';
+import zhCN from 'date-fns/esm/locale/zh-CN/index.js';
 // This file is a transition between using date-fns and Intl object to format dates
 // As of now, use Phraseboook to just resolve languages and locales
 // and match against the date-fns locales.
@@ -44,4 +55,3 @@ const getDateFNSLocale = (locale) => {
     return locales[locale] || enUS;
 };
 export { getDateFNSLocale };
-//# sourceMappingURL=locales.js.map

package/lib/datetime-picker/themes/solar/charcoal/index.js

@@ -4,4 +4,4 @@ import '@refinitiv-ui/elements/lib/overlay/themes/solar/charcoal';
 import '@refinitiv-ui/elements/lib/time-picker/themes/solar/charcoal';
 import '@refinitiv-ui/elements/lib/text-field/themes/solar/charcoal';
 
-elf.customStyles.define('ef-datetime-picker', ':host{display:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;text-align:left;font-family:inherit;font-size:13rem;font-weight:400;height:23px;width:140px;max-width:100%;padding:0 5px;margin:1px 0;outline:0;box-sizing:border-box;display:inline-flex;align-items:center;position:relative;vertical-align:middle;color:#c2c2c2;border-radius:0;text-overflow:ellipsis;background-color:#000;border:1px solid #4a4a52}:host([error]),:host([error][warning]){border:1px solid #f5475b}:host([error][disabled]),:host([error][warning][disabled]){color:rgba(194,194,194,.6);border:1px solid rgba(245,71,91,.6)}:host([focused]){background-size:100% 2px,100% 1px!important;background-position:center bottom!important;border-color:#f93;border-style:dotted}:host [part=time-picker]{margin:0}:host [part=timepicker-wrapper]{box-shadow:inset 0 1px 0 0 #0a0a0a;box-shadow:none;padding:0 3px 3px}:host([range]) ef-text-field{text-align:center}:host [part=input]{color:inherit}:host [part=icon]{color:#e2e2e2}:host [part=input-separator]{line-height:23px;background:#c2c2c2;width:.4em;margin:auto 0;height:1px}:host([disabled]){border:1px solid rgba(74,74,82,.6);color:rgba(194,194,194,.6)}:host([readonly]){border:1px solid rgba(74,74,82,.6)}:host(:not([focused]):not(:focus):hover){border:1px solid #77777d}:host([warning]){background-color:#000;border:1px solid #f93}:host([warning][disabled]){border:1px solid rgba(255,153,51,.6);color:rgba(194,194,194,.6)}:host([warning][readonly]){border:1px solid rgba(255,153,51,.6)}:host([warning]:not([focused]):not(:focus):hover){border:1px solid #ffb366}:host([error]),:host([error][warning]:not([focused])){background-color:#000;border:1px solid #f5475b}:host([error][disabled]),:host([error][warning]:not([focused])[disabled]){border:1px solid rgba(245,71,91,.6);color:rgba(194,194,194,.6)}:host([error][readonly]),:host([error][warning]:not([focused])[readonly]){border:1px solid rgba(245,71,91,.6)}:host([error]:not([focused]):not(:focus):hover),:host([error][warning]:not([focused]):not([focused]):not(:focus):hover){border:1px solid #f87584}:host([highlight]){background-color:#1b252f;border:1px solid #4a4a52}:host([highlight][disabled]){border:1px solid rgba(74,74,82,.6);color:rgba(194,194,194,.6);background-color:rgba(27,37,47,.6)}:host([highlight][readonly]){border:1px solid rgba(74,74,82,.6)}:host([highlight]:not([focused]):not(:focus):hover){border:1px solid #77777d}:host([indirect]){color:#0fd;background-color:#000;border:1px solid #898623}:host([indirect][disabled]){border:1px solid rgba(137,134,35,.6);color:rgba(0,255,221,.6)}:host([indirect][readonly]){border:1px solid rgba(137,134,35,.6)}:host([indirect]:not([focused]):not(:focus):hover){border:1px solid #a7a45a}:host [part=calendar]{width:224px;padding:4px}:host [part=list]{margin-top:1px}:host([range]){width:280px}');
+elf.customStyles.define('ef-datetime-picker', ':host{display:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;text-align:left;font-family:inherit;font-size:13rem;font-weight:400;height:23px;width:140px;max-width:100%;padding:0 5px;margin:1px 0;outline:0;box-sizing:border-box;display:inline-flex;align-items:center;position:relative;vertical-align:middle;color:#c2c2c2;border-radius:0;text-overflow:ellipsis;background-color:#000;border:1px solid #4a4a52}:host([error]),:host([error][warning]){border:1px solid #f5475b}:host([error][disabled]),:host([error][warning][disabled]){color:rgba(194,194,194,.6);border:1px solid rgba(245,71,91,.6)}:host([focused]){background-size:100% 2px,100% 1px!important;background-position:center bottom!important;border-color:#f93;border-style:dotted}:host [part=time-picker]{margin:0}:host [part=timepicker-wrapper]{box-shadow:inset 0 1px 0 0 #0a0a0a;box-shadow:none;padding:0 3px 3px}:host([range]) ef-text-field{text-align:center}:host [part=input]{color:inherit}:host [part=icon]{color:#e2e2e2}:host [part=input-separator]{line-height:23px;background:#c2c2c2;width:.4em;margin:auto 0;height:1px}:host([disabled]){border:1px solid rgba(74,74,82,.6);color:rgba(194,194,194,.6)}:host([readonly]){border:1px solid rgba(74,74,82,.6)}:host(:not([focused]):not(:focus):not([disabled]):not([readonly]):hover){border:1px solid #77777d}:host([warning]){background-color:#000;border:1px solid #f93}:host([warning][disabled]){border:1px solid rgba(255,153,51,.6);color:rgba(194,194,194,.6)}:host([warning][readonly]){border:1px solid rgba(255,153,51,.6)}:host([warning]:not([focused]):not(:focus):not([disabled]):not([readonly]):hover){border:1px solid #ffb366}:host([error]),:host([error][warning]:not([focused])){background-color:#000;border:1px solid #f5475b}:host([error][disabled]),:host([error][warning]:not([focused])[disabled]){border:1px solid rgba(245,71,91,.6);color:rgba(194,194,194,.6)}:host([error][readonly]),:host([error][warning]:not([focused])[readonly]){border:1px solid rgba(245,71,91,.6)}:host([error]:not([focused]):not(:focus):not([disabled]):not([readonly]):hover),:host([error][warning]:not([focused]):not([focused]):not(:focus):not([disabled]):not([readonly]):hover){border:1px solid #f87584}:host([highlight]){background-color:#1b252f;border:1px solid #4a4a52}:host([highlight][disabled]){border:1px solid rgba(74,74,82,.6);color:rgba(194,194,194,.6);background-color:rgba(27,37,47,.6)}:host([highlight][readonly]){border:1px solid rgba(74,74,82,.6)}:host([highlight]:not([focused]):not(:focus):not([disabled]):not([readonly]):hover){border:1px solid #77777d}:host([indirect]){color:#0fd;background-color:#000;border:1px solid #898623}:host([indirect][disabled]){border:1px solid rgba(137,134,35,.6);color:rgba(0,255,221,.6)}:host([indirect][readonly]){border:1px solid rgba(137,134,35,.6)}:host([indirect]:not([focused]):not(:focus):not([disabled]):not([readonly]):hover){border:1px solid #a7a45a}:host [part=calendar]{width:224px;padding:4px}:host [part=list]{margin-top:1px}:host([range]){width:280px}');

package/lib/datetime-picker/themes/solar/pearl/index.js

@@ -4,4 +4,4 @@ import '@refinitiv-ui/elements/lib/overlay/themes/solar/pearl';
 import '@refinitiv-ui/elements/lib/time-picker/themes/solar/pearl';
 import '@refinitiv-ui/elements/lib/text-field/themes/solar/pearl';
 
-elf.customStyles.define('ef-datetime-picker', ':host{display:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;text-align:left;font-family:inherit;font-size:13rem;font-weight:400;height:23px;width:140px;max-width:100%;padding:0 5px;margin:1px 0;outline:0;box-sizing:border-box;display:inline-flex;align-items:center;position:relative;vertical-align:middle;color:#484848;border-radius:0;text-overflow:ellipsis;background-color:#fff;border:1px solid #a9afba}:host([error]),:host([error][warning]){border:1px solid #d94255}:host([error][disabled]),:host([error][warning][disabled]){color:rgba(72,72,72,.6);border:1px solid rgba(217,66,85,.6)}:host([focused]){background-size:100% 2px,100% 1px!important;background-position:center bottom!important;border-color:#ffb266;border-style:dotted}:host [part=time-picker]{margin:0}:host [part=timepicker-wrapper]{box-shadow:inset 0 1px 0 0 #d5d8db;box-shadow:none;padding:0 3px 3px}:host([range]) ef-text-field{text-align:center}:host [part=input]{color:inherit}:host [part=icon]{color:#acafb5}:host [part=input-separator]{line-height:23px;background:#484848;width:.4em;margin:auto 0;height:1px}:host([disabled]){border:1px solid rgba(169,175,186,.6);color:rgba(72,72,72,.6)}:host([readonly]){border:1px solid rgba(169,175,186,.6)}:host(:not([focused]):not(:focus):hover){border:1px solid #bfc3cb}:host([warning]){background-color:#fff;border:1px solid #f93}:host([warning][disabled]){border:1px solid rgba(255,153,51,.6);color:rgba(72,72,72,.6)}:host([warning][readonly]){border:1px solid rgba(255,153,51,.6)}:host([warning]:not([focused]):not(:focus):hover){border:1px solid #ffb366}:host([error]),:host([error][warning]:not([focused])){background-color:#fff;border:1px solid #d94255}:host([error][disabled]),:host([error][warning]:not([focused])[disabled]){border:1px solid rgba(217,66,85,.6);color:rgba(72,72,72,.6)}:host([error][readonly]),:host([error][warning]:not([focused])[readonly]){border:1px solid rgba(217,66,85,.6)}:host([error]:not([focused]):not(:focus):hover),:host([error][warning]:not([focused]):not([focused]):not(:focus):hover){border:1px solid #e37180}:host([highlight]){background-color:#b0ffff;border:1px solid #a9afba}:host([highlight][disabled]){border:1px solid rgba(169,175,186,.6);color:rgba(72,72,72,.6);background-color:rgba(176,255,255,.6)}:host([highlight][readonly]){border:1px solid rgba(169,175,186,.6)}:host([highlight]:not([focused]):not(:focus):hover){border:1px solid #bfc3cb}:host([indirect]){color:#009494;background-color:#effefe;border:1px solid #898623}:host([indirect][disabled]){border:1px solid rgba(137,134,35,.6);color:rgba(0,148,148,.6)}:host([indirect][readonly]){border:1px solid rgba(137,134,35,.6)}:host([indirect]:not([focused]):not(:focus):hover){border:1px solid #a7a45a}:host [part=calendar]{width:224px;padding:4px}:host [part=list]{margin-top:1px}:host([range]){width:280px}');
+elf.customStyles.define('ef-datetime-picker', ':host{display:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;text-align:left;font-family:inherit;font-size:13rem;font-weight:400;height:23px;width:140px;max-width:100%;padding:0 5px;margin:1px 0;outline:0;box-sizing:border-box;display:inline-flex;align-items:center;position:relative;vertical-align:middle;color:#484848;border-radius:0;text-overflow:ellipsis;background-color:#fff;border:1px solid #a9afba}:host([error]),:host([error][warning]){border:1px solid #d94255}:host([error][disabled]),:host([error][warning][disabled]){color:rgba(72,72,72,.6);border:1px solid rgba(217,66,85,.6)}:host([focused]){background-size:100% 2px,100% 1px!important;background-position:center bottom!important;border-color:#ffb266;border-style:dotted}:host [part=time-picker]{margin:0}:host [part=timepicker-wrapper]{box-shadow:inset 0 1px 0 0 #d5d8db;box-shadow:none;padding:0 3px 3px}:host([range]) ef-text-field{text-align:center}:host [part=input]{color:inherit}:host [part=icon]{color:#acafb5}:host [part=input-separator]{line-height:23px;background:#484848;width:.4em;margin:auto 0;height:1px}:host([disabled]){border:1px solid rgba(169,175,186,.6);color:rgba(72,72,72,.6)}:host([readonly]){border:1px solid rgba(169,175,186,.6)}:host(:not([focused]):not(:focus):not([disabled]):not([readonly]):hover){border:1px solid #bfc3cb}:host([warning]){background-color:#fff;border:1px solid #f93}:host([warning][disabled]){border:1px solid rgba(255,153,51,.6);color:rgba(72,72,72,.6)}:host([warning][readonly]){border:1px solid rgba(255,153,51,.6)}:host([warning]:not([focused]):not(:focus):not([disabled]):not([readonly]):hover){border:1px solid #ffb366}:host([error]),:host([error][warning]:not([focused])){background-color:#fff;border:1px solid #d94255}:host([error][disabled]),:host([error][warning]:not([focused])[disabled]){border:1px solid rgba(217,66,85,.6);color:rgba(72,72,72,.6)}:host([error][readonly]),:host([error][warning]:not([focused])[readonly]){border:1px solid rgba(217,66,85,.6)}:host([error]:not([focused]):not(:focus):not([disabled]):not([readonly]):hover),:host([error][warning]:not([focused]):not([focused]):not(:focus):not([disabled]):not([readonly]):hover){border:1px solid #e37180}:host([highlight]){background-color:#b0ffff;border:1px solid #a9afba}:host([highlight][disabled]){border:1px solid rgba(169,175,186,.6);color:rgba(72,72,72,.6);background-color:rgba(176,255,255,.6)}:host([highlight][readonly]){border:1px solid rgba(169,175,186,.6)}:host([highlight]:not([focused]):not(:focus):not([disabled]):not([readonly]):hover){border:1px solid #bfc3cb}:host([indirect]){color:#009494;background-color:#effefe;border:1px solid #898623}:host([indirect][disabled]){border:1px solid rgba(137,134,35,.6);color:rgba(0,148,148,.6)}:host([indirect][readonly]){border:1px solid rgba(137,134,35,.6)}:host([indirect]:not([focused]):not(:focus):not([disabled]):not([readonly]):hover){border:1px solid #a7a45a}:host [part=calendar]{width:224px;padding:4px}:host [part=list]{margin-top:1px}:host([range]){width:280px}');

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/types.js

@@ -1,2 +1 @@
 export {};
-//# sourceMappingURL=types.js.map

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
  */
@@ -90,4 +90,3 @@ const getCurrentTime = (includeSeconds = false) => {
     return format(new Date(), includeSeconds ? TimeFormat.HHmmss : TimeFormat.HHmm);
 };
 export { DateTimeSegment, getCurrentTime, formatToView };
-//# sourceMappingURL=utils.js.map

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/draggable-element.js

@@ -14,14 +14,14 @@ class DraggableManager {
          * @param handle element that will be touched for dragging
          * @returns {void}
          */
-        this.mouseDownListener = (draggableElement, handle) => (e) => {
-            if (e.button === MAIN_MOUSE_BUTTON && e.target === handle) {
+        this.mouseDownListener = (draggableElement, handle) => (event) => {
+            if (event.button === MAIN_MOUSE_BUTTON && event.target === handle) {
                 this.draggableElement = draggableElement;
                 this.setSelectingOfText(false);
                 document.addEventListener('mouseup', this.onRelease);
                 document.addEventListener('mousemove', this.onMove);
                 this.updateOffset();
-                this.drag(e.pageX, e.pageY);
+                this.drag(event.pageX, event.pageY);
             }
         };
         /**
@@ -44,20 +44,20 @@ class DraggableManager {
         };
         /**
          * provides functionality needs for release draggable element
-         * @param e mouse up event
+         * @param event mouse up event
          * @returns {void}
          */
-        this.onRelease = (e) => {
+        this.onRelease = (event) => {
             if (this.draggableElement) {
                 this.setSelectingOfText(true);
                 this.release();
-                e.preventDefault();
-                e.stopPropagation();
+                event.preventDefault();
+                event.stopPropagation();
             }
         };
-        this.onMove = (e) => {
-            if (this.draggableElement && e.button === MAIN_MOUSE_BUTTON) {
-                this.getDeltaAndShift(e.pageX, e.pageY);
+        this.onMove = (event) => {
+            if (this.draggableElement && event.button === MAIN_MOUSE_BUTTON) {
+                this.getDeltaAndShift(event.pageX, event.pageY);
             }
             else {
                 this.release();
@@ -86,8 +86,12 @@ class DraggableManager {
      * @returns {void}
      */
     deregister(draggableElement) {
+        var _a;
         if (this.draggableElements.has(draggableElement)) {
-            DraggableManager.removeHandleCursor(this.draggableElements.get(draggableElement).handle);
+            const handle = (_a = this.draggableElements.get(draggableElement)) === null || _a === void 0 ? void 0 : _a.handle;
+            if (handle) {
+                DraggableManager.removeHandleCursor(handle);
+            }
             this.removeHandleListeners(draggableElement);
             this.draggableElements.delete(draggableElement);
             if (this.draggableElement === draggableElement) {
@@ -98,7 +102,7 @@ class DraggableManager {
     /**
      * Shifts the drag container by the specified x/y values
      * @param x Amount to shift the x-axis
-     * @param y Amaount to shift the y-axis
+     * @param y Amount to shift the y-axis
      * @returns {void}
      */
     shift(x, y) {
@@ -123,8 +127,11 @@ class DraggableManager {
      * @returns {void}
      */
     setHandleListeners(draggableElement) {
-        this.draggableElements.get(draggableElement).handle
-            .addEventListener('mousedown', this.draggableElements.get(draggableElement).mouseDownListener);
+        const element = this.draggableElements.get(draggableElement);
+        if (element) {
+            element.handle
+                .addEventListener('mousedown', element.mouseDownListener);
+        }
     }
     /**
      * Styles the handle and listens for mouse events.
@@ -132,7 +139,10 @@ class DraggableManager {
      * @returns {void}
      */
     removeHandleListeners(draggableElement) {
-        this.draggableElements.get(draggableElement).handle.removeEventListener('mousedown', this.draggableElements.get(draggableElement).mouseDownListener);
+        const element = this.draggableElements.get(draggableElement);
+        if (element) {
+            element.handle.removeEventListener('mousedown', element.mouseDownListener);
+        }
     }
     /**
      * Sets the cursor of the drag handle, based on its draggable state.
@@ -209,4 +219,3 @@ export const register = (draggableElement, handle) => {
 export const deregister = (draggableElement) => {
     draggableManager.deregister(draggableElement);
 };
-//# sourceMappingURL=draggable-element.js.map

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
@@ -40,12 +40,17 @@ import '@refinitiv-ui/phrasebook/lib/locale/en/dialog';
  */
 export declare class Dialog extends Overlay {
     /**
-     * A `CSSResult` that will be used
+     * 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 {CSSResult | CSSResult[]} CSS template
+     * @returns CSS template
      */
-    static get styles(): CSSResult | CSSResult[];
+    static get styles(): CSSResultGroup;
     /**
      * Set Header/Title of the dialog
      */
@@ -74,9 +79,6 @@ export declare class Dialog extends Overlay {
      * Footer Element
      */
     private footerElement;
-    /**
-    * @ignore
-    */
     noCancelOnOutsideClick: boolean;
     /**
     * @ignore
@@ -189,4 +191,6 @@ declare global {
       'ef-dialog': Partial<Dialog> | JSXInterface.HTMLAttributes<Dialog>;
     }
   }
-}
+}
+
+export {};

package/lib/dialog/index.js

@@ -1,20 +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';
-// 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,
@@ -28,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
@@ -57,9 +55,6 @@ let Dialog = class Dialog extends Overlay {
          * Should the dialog be draggable
          */
         this.draggable = false;
-        /**
-        * @ignore
-        */
         this.noCancelOnOutsideClick = true;
         /**
         * @ignore
@@ -71,13 +66,22 @@ let Dialog = class Dialog extends Overlay {
         this.withShadow = true;
     }
     /**
-     * A `CSSResult` that will be used
+     * 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 {CSSResult | CSSResult[]} CSS template
+     * @returns CSS template
      */
     static get styles() {
-        return [...Overlay.styles, css `
+        return [
+            super.styles,
+            css `
       :host {
         width: 400px;
         display: flex;
@@ -109,7 +113,8 @@ let Dialog = class Dialog extends Overlay {
         flex: none;
         cursor: pointer;
       }
-    `];
+    `
+        ];
     }
     disconnectedCallback() {
         super.disconnectedCallback();
@@ -266,7 +271,7 @@ let Dialog = class Dialog extends Overlay {
     get footerRegion() {
         return html `<slot name="footer">
       <div part="default-buttons">
-        <ef-button part="default-button" cta @tap=${this.defaultConfirm}">${this.t('OK')}</ef-button>
+        <ef-button part="default-button" cta @tap="${this.defaultConfirm}">${this.t('OK')}</ef-button>
         <ef-button part="default-button" @tap="${this.defaultCancel}">${this.t('CANCEL')}</ef-button>
       </div>
     </slot>`;
@@ -321,4 +326,3 @@ Dialog = __decorate([
     })
 ], Dialog);
 export { Dialog };
-//# sourceMappingURL=index.js.map