@refinitiv-ui/elements 6.8.7 → 6.8.9

package/lib/datetime-picker/index.js

@@ -1,22 +1,22 @@
 import { __decorate } from "tslib";
-import { ControlElement, html, css, WarningNotice, nothing } from '@refinitiv-ui/core';
+import inputFormat from 'date-fns/esm/format/index.js';
+import isValid from 'date-fns/esm/isValid/index.js';
+import inputParse from 'date-fns/esm/parse/index.js';
+import { ControlElement, WarningNotice, css, html, nothing } from '@refinitiv-ui/core';
 import { customElement } from '@refinitiv-ui/core/decorators/custom-element.js';
 import { property } from '@refinitiv-ui/core/decorators/property.js';
 import { query } from '@refinitiv-ui/core/decorators/query.js';
-import { VERSION } from '../version.js';
+import { TranslatePropertyKey, getLocale, translate } from '@refinitiv-ui/translate';
+import { DateFormat, DateTimeFormat, addMonths, format, isAfter, isBefore, isValidDate, isValidDateTime, parse, subMonths } from '@refinitiv-ui/utils/date.js';
 import '../calendar/index.js';
 import '../icon/index.js';
+import { preload } from '../icon/index.js';
 import '../overlay/index.js';
 import '../text-field/index.js';
 import '../time-picker/index.js';
-import { translate, getLocale, TranslatePropertyKey } from '@refinitiv-ui/translate';
+import { VERSION } from '../version.js';
 import { getDateFNSLocale } from './locales.js';
-import inputFormat from 'date-fns/esm/format/index.js';
-import inputParse from 'date-fns/esm/parse/index.js';
-import isValid from 'date-fns/esm/isValid/index.js';
-import { addMonths, subMonths, isAfter, isBefore, isValidDate, isValidDateTime, DateFormat, DateTimeFormat, parse, format } from '@refinitiv-ui/utils/date.js';
 import { DateTimeSegment, formatToView, getCurrentTime } from './utils.js';
-import { preload } from '../icon/index.js';
 preload('calendar', 'down', 'left', 'right'); /* preload calendar icons for faster loading */
 const POPUP_POSITION = ['bottom-start', 'top-start', 'bottom-end', 'top-end', 'bottom-middle', 'top-middle'];
 const INPUT_FORMAT = {
@@ -58,21 +58,21 @@ let DatetimePicker = class DatetimePicker extends ControlElement {
         this._max = '';
         this.maxDate = '';
         /**
-        * Only enable weekdays
-        */
+         * Only enable weekdays
+         */
         this.weekdaysOnly = false;
         /**
-        * Only enable weekends
-        */
+         * Only enable weekends
+         */
         this.weekendsOnly = false;
         /**
-        * Custom filter, used for enabling/disabling certain dates
-        * @type {DatetimePickerFilter | null}
-        */
+         * Custom filter, used for enabling/disabling certain dates
+         * @type {DatetimePickerFilter | null}
+         */
         this.filter = null;
         /**
-        * Set to switch to range select mode
-        */
+         * Set to switch to range select mode
+         */
         this.range = false;
         this._values = []; /* list of values as passed by the user */
         this._segments = []; /* filtered and processed list of values */
@@ -87,8 +87,8 @@ let DatetimePicker = class DatetimePicker extends ControlElement {
         this.showSeconds = false;
         this._placeholder = '';
         /**
-        * Toggles the opened state of the list
-        */
+         * Toggles the opened state of the list
+         */
         this.opened = false;
         /**
          * Set state to error
@@ -99,27 +99,27 @@ let DatetimePicker = class DatetimePicker extends ControlElement {
          */
         this.warning = false;
         /**
-        * Only open picker panel when calendar icon is clicked.
-        * Clicking on the input will no longer open the picker.
-        */
+         * Only open picker panel when calendar icon is clicked.
+         * Clicking on the input will no longer open the picker.
+         */
         this.inputTriggerDisabled = false;
         /**
-        * Disable input part of the picker
-        */
+         * Disable input part of the picker
+         */
         this.inputDisabled = false;
         /**
-        * Disable the popup
-        */
+         * Disable the popup
+         */
         this.popupDisabled = false;
         this._format = '';
         /**
-        * Toggle to display the time picker
-        */
+         * Toggle to display the time picker
+         */
         this.timepicker = false;
         /**
-        * Display two calendar pickers.
-        * @type {"" | "consecutive" | "split"}
-        */
+         * Display two calendar pickers.
+         * @type {"" | "consecutive" | "split"}
+         */
         this.duplex = null;
         this._views = [];
         this._interimSegments = [];
@@ -145,44 +145,45 @@ let DatetimePicker = class DatetimePicker extends ControlElement {
         outline: none;
         cursor: text;
       }
-      [part=input-wrapper] {
+      [part='input-wrapper'] {
         display: flex;
         flex: 1;
       }
-      [part=body] {
+      [part='body'] {
         display: flex;
       }
-      [part=timepicker-wrapper] {
+      [part='timepicker-wrapper'] {
         display: flex;
         justify-content: space-between;
       }
-      [part=timepicker-wrapper]:before,
-      [part=timepicker-wrapper]:after {
+      [part='timepicker-wrapper']:before,
+      [part='timepicker-wrapper']:after {
         content: '';
       }
-      [part=input] {
+      [part='input'] {
         flex: 1;
         width: auto;
         height: auto;
         padding: 0;
         margin: 0;
       }
-      [part=calendar-wrapper] {
+      [part='calendar-wrapper'] {
         display: inline-flex;
       }
-      [part=icon] {
+      [part='icon'] {
         cursor: pointer;
       }
-      :host([popup-disabled]) [part=icon], :host([readonly]) [part=icon] {
+      :host([popup-disabled]) [part='icon'],
+      :host([readonly]) [part='icon'] {
         pointer-events: none;
       }
     `;
     }
     /**
-    * Set minimum date
-    * @param min date
-    * @default -
-    */
+     * Set minimum date
+     * @param min date
+     * @default -
+     */
     set min(min) {
         if (!this.isValidValue(min)) {
             this.warnInvalidValue(min);
@@ -199,10 +200,10 @@ let DatetimePicker = class DatetimePicker extends ControlElement {
         return this._min;
     }
     /**
-    * Set maximum date
-    * @param max date
-    * @default -
-    */
+     * Set maximum date
+     * @param max date
+     * @default -
+     */
     set max(max) {
         if (!this.isValidValue(max)) {
             this.warnInvalidValue(max);
@@ -219,25 +220,25 @@ let DatetimePicker = class DatetimePicker extends ControlElement {
         return this._max;
     }
     /**
-    * Set to switch to multiple select mode
-    * @ignore
-    * @param multiple Multiple
-    */
+     * Set to switch to multiple select mode
+     * @ignore
+     * @param multiple Multiple
+     */
     /* istanbul ignore next */
     set multiple(multiple) {
         new WarningNotice('multiple is not currently supported').show();
     }
     /**
-    * @ignore
-    */
+     * @ignore
+     */
     get multiple() {
         return false;
     }
     /**
-    * Current date time value
-    * @param value Calendar value
-    * @default -
-    */
+     * Current date time value
+     * @param value Calendar value
+     * @default -
+     */
     set value(value) {
         this.values = value ? [value] : [];
     }
@@ -245,11 +246,11 @@ let DatetimePicker = class DatetimePicker extends ControlElement {
         return this.values[0] || '';
     }
     /**
-    * Set multiple selected values
-    * @param values Values to set
-    * @type {string[]}
-    * @default []
-    */
+     * Set multiple selected values
+     * @param values Values to set
+     * @type {string[]}
+     * @default []
+     */
     set values(values) {
         const oldValues = this._values;
         if (String(oldValues) !== String(values)) {
@@ -259,13 +260,13 @@ let DatetimePicker = class DatetimePicker extends ControlElement {
         }
     }
     get values() {
-        return this._segments.map(segment => segment.value);
+        return this._segments.map((segment) => segment.value);
     }
     /**
-    * Placeholder to display when no value is set
-    * @param placeholder Placeholder
-    * @default -
-    */
+     * Placeholder to display when no value is set
+     * @param placeholder Placeholder
+     * @default -
+     */
     set placeholder(placeholder) {
         const oldPlaceholder = this._placeholder;
         if (oldPlaceholder !== placeholder) {
@@ -277,11 +278,11 @@ let DatetimePicker = class DatetimePicker extends ControlElement {
         return this._placeholder || this.format;
     }
     /**
-    * Set the datetime format
-    * Based on dane-fns datetime formats
-    * @param format Date format
-    * @default -
-    */
+     * Set the datetime format
+     * Based on dane-fns datetime formats
+     * @param format Date format
+     * @default -
+     */
     set format(format) {
         const oldFormat = this._format;
         if (oldFormat !== format) {
@@ -290,18 +291,23 @@ let DatetimePicker = class DatetimePicker extends ControlElement {
         }
     }
     get format() {
-        return this._format || (this.timepicker
-            ? (this.showSeconds
-                ? (this.amPm ? INPUT_FORMAT.DATETIME_SECONDS_AM_PM : INPUT_FORMAT.DATETIME_SECONDS)
-                : (this.amPm ? INPUT_FORMAT.DATETIME_AM_PM : INPUT_FORMAT.DATETIME))
-            : INPUT_FORMAT.DATE);
+        return (this._format ||
+            (this.timepicker
+                ? this.showSeconds
+                    ? this.amPm
+                        ? INPUT_FORMAT.DATETIME_SECONDS_AM_PM
+                        : INPUT_FORMAT.DATETIME_SECONDS
+                    : this.amPm
+                        ? INPUT_FORMAT.DATETIME_AM_PM
+                        : INPUT_FORMAT.DATETIME
+                : INPUT_FORMAT.DATE));
     }
     /**
-    * Set the current calendar view.
-    * Accepted format: 'yyyy-MM'
-    * @param view view date
-    * @default -
-    */
+     * Set the current calendar view.
+     * Accepted format: 'yyyy-MM'
+     * @param view view date
+     * @default -
+     */
     set view(view) {
         this.views = view ? [view] : [];
     }
@@ -309,12 +315,12 @@ let DatetimePicker = class DatetimePicker extends ControlElement {
         return this.views[0] || '';
     }
     /**
-    * Set the current calendar views for duplex mode
-    * Accepted format: 'yyyy-MM'
-    * @param views view dates
-    * @type {string[]}
-    * @default []
-    */
+     * Set the current calendar views for duplex mode
+     * Accepted format: 'yyyy-MM'
+     * @param views view dates
+     * @type {string[]}
+     * @default []
+     */
     set views(views) {
         const oldViews = this._views;
         views = this.filterAndWarnInvalidViews(views);
@@ -334,7 +340,11 @@ let DatetimePicker = class DatetimePicker extends ControlElement {
         }
         const to = this.values[1];
         // default duplex mode
-        if (this.isDuplexConsecutive() || !from || !to || formatToView(from) === formatToView(to) || isBefore(to, from)) {
+        if (this.isDuplexConsecutive() ||
+            !from ||
+            !to ||
+            formatToView(from) === formatToView(to) ||
+            isBefore(to, from)) {
             return this.composeViews(formatToView(from || to || now), !from && to ? 1 : 0, []);
         }
         // duplex split if as from and to
@@ -394,15 +404,15 @@ let DatetimePicker = class DatetimePicker extends ControlElement {
         }
         // Need to check for the attribute to cover the case when
         // timepicker and value attributes are set
-        return (this.timepicker || this.hasAttribute('timepicker'))
+        return this.timepicker || this.hasAttribute('timepicker')
             ? isValidDateTime(value)
             : isValidDate(value, DateFormat.yyyyMMdd);
     }
     /**
-    * Used to show a warning when the value does not pass the validation
-    * @param value that is invalid
-    * @returns {void}
-    */
+     * Used to show a warning when the value does not pass the validation
+     * @param value that is invalid
+     * @returns {void}
+     */
     warnInvalidValue(value) {
         new WarningNotice(`The specified value "${value}" does not conform to the required format. The format is ${this.timepicker ? '"yyyy-MM-ddThh:mm" followed by optional ":ss" or ":ss.SSS"' : '"yyyy-MM-dd"'}.`).show();
     }
@@ -420,7 +430,7 @@ let DatetimePicker = class DatetimePicker extends ControlElement {
      * @returns {void}
      */
     valuesToSegments() {
-        const newSegments = this.filterAndWarnInvalidValues(this._values).map(value => DateTimeSegment.fromString(value));
+        const newSegments = this.filterAndWarnInvalidValues(this._values).map((value) => DateTimeSegment.fromString(value));
         this._segments = newSegments;
         this.interimSegments = newSegments;
     }
@@ -431,10 +441,10 @@ let DatetimePicker = class DatetimePicker extends ControlElement {
      */
     shouldValidateValue(changedProperties) {
         // do not validate default value
-        if (changedProperties.has('_values') && changedProperties.get('_values') !== undefined
-            || changedProperties.has('min') && changedProperties.get('min') !== undefined
-            || changedProperties.has('max') && changedProperties.get('max') !== undefined
-            || changedProperties.has('showSeconds') && changedProperties.get('showSeconds') !== undefined) {
+        if ((changedProperties.has('_values') && changedProperties.get('_values') !== undefined) ||
+            (changedProperties.has('min') && changedProperties.get('min') !== undefined) ||
+            (changedProperties.has('max') && changedProperties.get('max') !== undefined) ||
+            (changedProperties.has('showSeconds') && changedProperties.get('showSeconds') !== undefined)) {
             return true;
         }
         return false;
@@ -446,7 +456,7 @@ let DatetimePicker = class DatetimePicker extends ControlElement {
      * @returns Filtered collection of values
      */
     filterAndWarnInvalidValues(values) {
-        return values.map(value => {
+        return values.map((value) => {
             if (this.isValidValue(value)) {
                 return value;
             }
@@ -515,7 +525,7 @@ let DatetimePicker = class DatetimePicker extends ControlElement {
         }
         // input values cannot be populated off interim segments as require a valid date
         // date-fns formats to local if there is time info
-        this.inputValues = this._segments.map(segment => this.formatSegment(segment));
+        this.inputValues = this._segments.map((segment) => this.formatSegment(segment));
     }
     /**
      * Format date segment according to format and locale
@@ -523,9 +533,11 @@ let DatetimePicker = class DatetimePicker extends ControlElement {
      * @returns formatted string
      */
     formatSegment(segment) {
-        return segment.value ? inputFormat(segment.getTime(), this.format, {
-            locale: getDateFNSLocale(getLocale(this))
-        }) : '';
+        return segment.value
+            ? inputFormat(segment.getTime(), this.format, {
+                locale: getDateFNSLocale(getLocale(this))
+            })
+            : '';
     }
     /**
      * Construct view collection
@@ -540,22 +552,26 @@ let DatetimePicker = class DatetimePicker extends ControlElement {
             return [view];
         }
         if (this.isDuplexConsecutive()) {
-            if (index === 0) { /* from */
+            if (index === 0) {
+                /* from */
                 return [view, formatToView(addMonths(view, 1))];
             }
-            else { /* to */
+            else {
+                /* to */
                 return [formatToView(subMonths(view, 1)), view];
             }
         }
         // duplex split
-        if (index === 0) { /* from. to must be after or the same */
+        if (index === 0) {
+            /* from. to must be after or the same */
             let after = views[1] || addMonths(view, 1);
             if (isBefore(after, view)) {
                 after = view;
             }
             return [view, formatToView(after)];
         }
-        if (index === 1) { /* to. from must be before or the same */
+        if (index === 1) {
+            /* to. from must be before or the same */
             let before = views[0] || subMonths(view, 1);
             if (isAfter(before, view)) {
                 before = view;
@@ -570,11 +586,11 @@ let DatetimePicker = class DatetimePicker extends ControlElement {
      * @param segments Segments
      */
     set interimSegments(segments) {
-        const interimSegments = segments.map(segment => DateTimeSegment.fromDateTimeSegment(segment));
+        const interimSegments = segments.map((segment) => DateTimeSegment.fromDateTimeSegment(segment));
         this._interimSegments = interimSegments;
         // cannot populate calendar if from is after to, it looks broken
-        this.calendarValues = this.isFromBeforeTo() ? interimSegments.map(segment => segment.dateSegment) : [];
-        this.timepickerValues = interimSegments.map(segment => segment.timeSegment);
+        this.calendarValues = this.isFromBeforeTo() ? interimSegments.map((segment) => segment.dateSegment) : [];
+        this.timepickerValues = interimSegments.map((segment) => segment.timeSegment);
     }
     /**
      * Get interim segments. These are free to modify
@@ -595,9 +611,10 @@ let DatetimePicker = class DatetimePicker extends ControlElement {
         if (oldSegments.toString() === newSegments.toString()) {
             return false;
         }
-        const newValues = newSegments.map(segment => segment.value);
+        const newValues = newSegments.map((segment) => segment.value);
         // validate
-        for (let i = 0; i < newValues.length; i += 1) { /* need this step in case timepicker is not populated */
+        for (let i = 0; i < newValues.length; i += 1) {
+            /* need this step in case timepicker is not populated */
             if (!this.isValidValue(newValues[i])) {
                 return false;
             }
@@ -807,7 +824,11 @@ let DatetimePicker = class DatetimePicker extends ControlElement {
                 locale: getDateFNSLocale(getLocale(this))
             });
             if (isValid(date)) {
-                dateString = inputFormat(date, this.timepicker ? this.showSeconds ? DateTimeFormat.yyyMMddTHHmmss : DateTimeFormat.yyyMMddTHHmm : DateFormat.yyyyMMdd);
+                dateString = inputFormat(date, this.timepicker
+                    ? this.showSeconds
+                        ? DateTimeFormat.yyyMMddTHHmmss
+                        : DateTimeFormat.yyyMMddTHHmm
+                    : DateFormat.yyyyMMdd);
                 this.resetViews(); /* user input should be treated similar to manually switching the views */
             }
         }
@@ -898,7 +919,8 @@ let DatetimePicker = class DatetimePicker extends ControlElement {
      * @returns {void}
      */
     setOpened(opened) {
-        if (opened && !this.canOpenPopup) { /* never allow to open popup if cannot do so */
+        if (opened && !this.canOpenPopup) {
+            /* never allow to open popup if cannot do so */
             return;
         }
         if (this.opened !== opened && this.notifyPropertyChange('opened', opened, true)) {
@@ -925,7 +947,8 @@ let DatetimePicker = class DatetimePicker extends ControlElement {
       .showSeconds=${this.showSeconds}
       .amPm=${this.amPm}
       .value=${value}
-      @value-changed=${this.onTimePickerValueChanged}></ef-time-picker>`;
+      @value-changed=${this.onTimePickerValueChanged}
+    ></ef-time-picker>`;
     }
     /**
      * Get calendar template
@@ -951,7 +974,8 @@ let DatetimePicker = class DatetimePicker extends ControlElement {
       .view=${view}
       @keydown=${this.onCalendarKeyDown}
       @view-changed=${this.onCalendarViewChanged}
-      @value-changed=${this.onCalendarValueChanged}></ef-calendar>`;
+      @value-changed=${this.onCalendarValueChanged}
+    ></ef-calendar>`;
     }
     /**
      * Get calendar templates
@@ -993,18 +1017,15 @@ let DatetimePicker = class DatetimePicker extends ControlElement {
         @focus=${this.onInputFocus}
         @blur=${this.onInputBlur}
         @keydown=${this.onInputKeyDown}
-        @value-changed=${this.onInputValueChanged}></ef-text-field>
+        @value-changed=${this.onInputValueChanged}
+      ></ef-text-field>
     `;
     }
     /**
      * Template for rendering an icon
      */
     get iconTemplate() {
-        return html `
-      <ef-icon
-        part="icon"
-        icon="calendar"></ef-icon>
-    `;
+        return html ` <ef-icon part="icon" icon="calendar"></ef-icon> `;
     }
     /**
      * Template for inputs
@@ -1021,8 +1042,8 @@ let DatetimePicker = class DatetimePicker extends ControlElement {
     `;
     }
     /**
-    * Popup panel template
-    */
+     * Popup panel template
+     */
     get popupTemplate() {
         if (this.lazyRendered) {
             return html `<ef-overlay
@@ -1044,7 +1065,9 @@ let DatetimePicker = class DatetimePicker extends ControlElement {
               <div part="calendar-wrapper">
                 ${this.calendarsTemplate}
               </div>
-              ${this.timepicker ? html `<div part="timepicker-wrapper">${this.timepickersTemplate}</div>` : undefined}
+              ${this.timepicker
+                ? html `<div part="timepicker-wrapper">${this.timepickersTemplate}</div>`
+                : undefined}
             </div>
             <div><slot name="right"></div>
           </div>
@@ -1058,11 +1081,7 @@ let DatetimePicker = class DatetimePicker extends ControlElement {
      * @return Render template
      */
     render() {
-        return html `
-      ${this.inputTemplates}
-      ${this.iconTemplate}
-      ${this.popupTemplate}
-    `;
+        return html ` ${this.inputTemplates} ${this.iconTemplate} ${this.popupTemplate} `;
     }
 };
 __decorate([

package/lib/datetime-picker/locales.js

@@ -1,8 +1,6 @@
-import { Phrasebook } from '@refinitiv-ui/phrasebook';
-import { resolveLocale, DEFAULT_LOCALE } from '@refinitiv-ui/i18n';
+import de from 'date-fns/esm/locale/de/index.js';
 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';
@@ -12,6 +10,8 @@ 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';
+import { DEFAULT_LOCALE, resolveLocale } from '@refinitiv-ui/i18n';
+import { Phrasebook } from '@refinitiv-ui/phrasebook';
 // 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.
@@ -32,7 +32,7 @@ Phrasebook.define('ru', scope, globals);
 Phrasebook.define('th', scope, globals);
 Phrasebook.define('zh', scope, globals);
 const locales = {
-    'en': enUS,
+    en: enUS,
     'en-GB': enGB,
     de,
     es,
@@ -43,7 +43,7 @@ const locales = {
     pl,
     ru,
     th,
-    'zh': zhCN
+    zh: zhCN
 };
 /**
  * Get date-fns locale or default locale

package/lib/datetime-picker/utils.js

@@ -1,4 +1,4 @@
-import { format, DateFormat, parse, TimeFormat, toTimeSegment } from '@refinitiv-ui/utils/date.js';
+import { DateFormat, TimeFormat, format, parse, toTimeSegment } from '@refinitiv-ui/utils/date.js';
 /**
  * A helper class to split date time string into date and time segments
  */
@@ -53,18 +53,18 @@ DateTimeSegment.fromDateTimeSegment = (segment) => {
     return new DateTimeSegment(segment.dateSegment, segment.timeSegment);
 };
 /**
-* Check if passed Date object is valid
-* @param date Date to check
-* @returns is valid
-*/
+ * Check if passed Date object is valid
+ * @param date Date to check
+ * @returns is valid
+ */
 const isValid = (date) => {
     return !isNaN(date.getTime());
 };
 /**
-* Convert date to Date object
-* @param date Date to convert
-* @returns Date object
-*/
+ * Convert date to Date object
+ * @param date Date to convert
+ * @returns Date object
+ */
 const toDate = (date) => {
     if (typeof date === 'string') {
         return parse(date);

package/lib/dialog/draggable-element.js

@@ -128,8 +128,7 @@ class DraggableManager {
     setHandleListeners(draggableElement) {
         const element = this.draggableElements.get(draggableElement);
         if (element) {
-            element.handle
-                .addEventListener('mousedown', element.mouseDownListener);
+            element.handle.addEventListener('mousedown', element.mouseDownListener);
         }
     }
     /**

package/lib/dialog/index.d.ts

@@ -1,12 +1,12 @@
 import { JSXInterface } from '../jsx';
-import { CSSResultGroup, TemplateResult, ElementSize, PropertyValues } from '@refinitiv-ui/core';
-import { Overlay } from '../overlay/index.js';
+import { CSSResultGroup, ElementSize, PropertyValues, TemplateResult } from '@refinitiv-ui/core';
+import '@refinitiv-ui/phrasebook/locale/en/dialog.js';
+import { Translate } from '@refinitiv-ui/translate';
+import '../button/index.js';
+import '../header/index.js';
 import '../icon/index.js';
+import { Overlay } from '../overlay/index.js';
 import '../panel/index.js';
-import '../header/index.js';
-import '../button/index.js';
-import { Translate } from '@refinitiv-ui/translate';
-import '@refinitiv-ui/phrasebook/locale/en/dialog.js';
 /**
  * Popup window, designed to contain and show any HTML content.
  * It provides modal and dragging functionality,