@refinitiv-ui/elements 5.3.3 → 5.7.0

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

@@ -0,0 +1,8 @@
+import type { Locale } from 'date-fns';
+/**
+ * Get date-fns locale or default locale
+ * @param [locale] BCP47 locale tag
+ * @returns DateFNS Locale object
+ */
+declare const getDateFNSLocale: (locale: string) => Locale;
+export { getDateFNSLocale };

package/lib/datetime-picker/locales.js

@@ -0,0 +1,57 @@
+import { Phrasebook } from '@refinitiv-ui/phrasebook';
+import { resolveLocale, DEFAULT_LOCALE } from '@refinitiv-ui/i18n';
+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.
+// match locales against date-fns
+// This will be used with resolveLocale function
+const globals = {};
+const scope = 'ef-datetime-picker';
+Phrasebook.define('en', scope, globals);
+Phrasebook.define('en-GB', scope, globals);
+Phrasebook.define('de', scope, globals);
+Phrasebook.define('es', scope, globals);
+Phrasebook.define('fr', scope, globals);
+Phrasebook.define('it', scope, globals);
+Phrasebook.define('ja', scope, globals);
+Phrasebook.define('ko', scope, globals);
+Phrasebook.define('pl', scope, globals);
+Phrasebook.define('ru', scope, globals);
+Phrasebook.define('th', scope, globals);
+Phrasebook.define('zh', scope, globals);
+const locales = {
+    'en': enUS,
+    'en-GB': enGB,
+    de,
+    es,
+    fr,
+    it,
+    ja,
+    ko,
+    pl,
+    ru,
+    th,
+    'zh': zhCN
+};
+/**
+ * Get date-fns locale or default locale
+ * @param [locale] BCP47 locale tag
+ * @returns DateFNS Locale object
+ */
+const getDateFNSLocale = (locale) => {
+    locale = resolveLocale(scope, locale) || DEFAULT_LOCALE;
+    return locales[locale] || enUS;
+};
+export { getDateFNSLocale };

package/lib/datetime-picker/themes/halo/dark/index.js

@@ -0,0 +1,7 @@
+import '@refinitiv-ui/elements/lib/calendar/themes/halo/dark';
+import '@refinitiv-ui/elements/lib/icon/themes/halo/dark';
+import '@refinitiv-ui/elements/lib/overlay/themes/halo/dark';
+import '@refinitiv-ui/elements/lib/time-picker/themes/halo/dark';
+import '@refinitiv-ui/elements/lib/text-field/themes/halo/dark';
+
+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:12rem;font-weight:400;height:24px;width:152px;max-width:100%;padding:0 8px;margin:1px 0;outline:0;box-sizing:border-box;display:inline-flex;align-items:center;position:relative;vertical-align:middle;color:#ccc;border-radius:0;background-color:#0d0d0d;text-overflow:ellipsis;border:1px solid #404040}:host([disabled]){color:rgba(204,204,204,.5);border:1px solid rgba(64,64,64,.5)}:host([warning]){border:1px solid #7f6400}:host([warning][disabled]){color:rgba(204,204,204,.5);border:1px solid rgba(127,100,0,.5)}:host([error]),:host([error][warning]){border:1px solid #a01c2b}:host([error][disabled]),:host([error][warning][disabled]){color:rgba(204,204,204,.5);border:1px solid rgba(160,28,43,.5)}:host([focused]){background-size:100% 2px,100% 1px!important;background-position:center bottom!important;border-color:#334bff}:host [part=time-picker]{margin:0}:host [part=timepicker-wrapper]{box-shadow:inset 0 1px 0 0 #404040;box-shadow:none;padding:0 3px 4px}:host([range]) ef-text-field{text-align:center}:host [part=input]{color:inherit}:host [part=icon]{color:#ccc;color:inherit}:host [part=input-separator]{line-height:24px;background:#ccc;width:.4em;margin:auto 0;height:1px}:host [part=calendar]{width:196px;padding:4px 3px}:host [part=list]{margin-top:2px;border:1px solid #334bff;background-color:#262626}:host([range]){width:304px}:host([disabled]) [part=icon]{color:rgba(204,204,204,.5)}:host(:not([disabled]):hover) [part=icon],:host([focused]) [part=icon],:host([focused][error][warning]) [part=icon]{color:#6678ff}:host(:not([readonly]):not([error]):not([warning]):not([focused]):hover){border-color:grey;color:#fff}');

package/lib/datetime-picker/themes/halo/light/index.js

@@ -0,0 +1,7 @@
+import '@refinitiv-ui/elements/lib/calendar/themes/halo/light';
+import '@refinitiv-ui/elements/lib/icon/themes/halo/light';
+import '@refinitiv-ui/elements/lib/overlay/themes/halo/light';
+import '@refinitiv-ui/elements/lib/time-picker/themes/halo/light';
+import '@refinitiv-ui/elements/lib/text-field/themes/halo/light';
+
+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:12rem;font-weight:400;height:24px;width:152px;max-width:100%;padding:0 8px;margin:1px 0;outline:0;box-sizing:border-box;display:inline-flex;align-items:center;position:relative;vertical-align:middle;color:#404040;border-radius:0;background-color:#fff;text-overflow:ellipsis;border:1px solid #595959}:host([disabled]){color:rgba(64,64,64,.5);border:1px solid rgba(89,89,89,.5)}:host([warning]){border:1px solid #cca000}:host([warning][disabled]){color:rgba(64,64,64,.5);border:1px solid rgba(204,160,0,.5)}:host([error]),:host([error][warning]){border:1px solid #b63243}:host([error][disabled]),:host([error][warning][disabled]){color:rgba(64,64,64,.5);border:1px solid rgba(182,50,67,.5)}:host([focused]){background-size:100% 2px,100% 1px!important;background-position:center bottom!important;border-color:#334bff}:host [part=time-picker]{margin:0}:host [part=timepicker-wrapper]{box-shadow:inset 0 1px 0 0 #d9d9d9;box-shadow:none;padding:0 3px 4px}:host([range]) ef-text-field{text-align:center}:host [part=input]{color:inherit}:host [part=input-separator]{line-height:24px;background:#0d0d0d;width:.4em;margin:auto 0;height:1px}:host [part=calendar]{width:196px;padding:4px 3px}:host [part=list]{margin-top:2px;border:1px solid #334bff;background-color:#f2f2f2}:host([range]){width:304px}:host [part=icon]{color:#595959}:host([disabled]) [part=icon]{color:rgba(64,64,64,.5)}:host(:not([disabled]):hover) [part=icon],:host([focused]) [part=icon],:host([focused][error][warning]) [part=icon]{color:#334bff}:host(:not([readonly]):not([error]):not([warning]):not([focused]):hover){border-color:#0d0d0d;color:#0d0d0d}');

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

@@ -0,0 +1,7 @@
+import '@refinitiv-ui/elements/lib/calendar/themes/solar/charcoal';
+import '@refinitiv-ui/elements/lib/icon/themes/solar/charcoal';
+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):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

@@ -0,0 +1,7 @@
+import '@refinitiv-ui/elements/lib/calendar/themes/solar/pearl';
+import '@refinitiv-ui/elements/lib/icon/themes/solar/pearl';
+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):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

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

package/lib/datetime-picker/types.js

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,55 @@
+/**
+ * A helper class to split date time string into date and time segments
+ */
+declare class DateTimeSegment {
+    /**
+     * Create DateTimeSegment from value string
+     * @param value Date time value
+     * @returns date time segment
+     */
+    static fromString: (value: string) => DateTimeSegment;
+    /**
+     * Create DateTimeSegment from another DateTimeSegment
+     * @param segment DateTimeSegment
+     * @returns cloned date time segment
+     */
+    static fromDateTimeSegment: (segment: DateTimeSegment) => DateTimeSegment;
+    /**
+     * Create new date time segment
+     * @param dateSegment Date segment
+     * @param timeSegment Time segment
+     */
+    constructor(dateSegment?: string, timeSegment?: string);
+    /**
+     * Date segment in a format '2020-12-31'
+     */
+    dateSegment: string;
+    /**
+     * Time segment in a format '14:59' or '14:59:59'
+     */
+    timeSegment: string;
+    /**
+     * Get string value
+     */
+    get value(): string;
+    /**
+     * Get time
+     * @returns {number} time
+     */
+    getTime(): number;
+    toString(): string;
+}
+/**
+ * Format Date object to local date string.
+ * Output format: "yyyy-MM".
+ * @param date A Date object
+ * @returns A formatted date or empty string if invalid
+ */
+declare const formatToView: (date: Date | number | string) => string;
+/**
+ * Get current time string, e.g. "15:36" or "15:36:04"
+ * @param [includeSeconds=false] true to include seconds
+ * @returns A formatted time string
+ */
+declare const getCurrentTime: (includeSeconds?: boolean) => string;
+export { DateTimeSegment, getCurrentTime, formatToView };

package/lib/datetime-picker/utils.js

@@ -0,0 +1,92 @@
+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
+ */
+class DateTimeSegment {
+    /**
+     * Create new date time segment
+     * @param dateSegment Date segment
+     * @param timeSegment Time segment
+     */
+    constructor(dateSegment = '', timeSegment = '') {
+        this.dateSegment = dateSegment;
+        this.timeSegment = timeSegment;
+    }
+    /**
+     * Get string value
+     */
+    get value() {
+        const timeSegment = this.timeSegment;
+        return `${this.dateSegment}${timeSegment ? `T${timeSegment}` : ''}`;
+    }
+    /**
+     * Get time
+     * @returns {number} time
+     */
+    getTime() {
+        const date = this.dateSegment ? parse(this.dateSegment) : new Date(0);
+        const timeSegment = toTimeSegment(this.timeSegment);
+        date.setHours(timeSegment.hours);
+        date.setMinutes(timeSegment.minutes);
+        date.setSeconds(timeSegment.seconds);
+        return date.getTime();
+    }
+    toString() {
+        return this.value;
+    }
+}
+/**
+ * Create DateTimeSegment from value string
+ * @param value Date time value
+ * @returns date time segment
+ */
+DateTimeSegment.fromString = (value) => {
+    const valueSplit = value.split('T');
+    return new DateTimeSegment(valueSplit[0], valueSplit[1]);
+};
+/**
+ * Create DateTimeSegment from another DateTimeSegment
+ * @param segment DateTimeSegment
+ * @returns cloned date time segment
+ */
+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
+*/
+const isValid = (date) => {
+    return !isNaN(date.getTime());
+};
+/**
+* Convert date to Date object
+* @param date Date to convert
+* @returns Date object
+*/
+const toDate = (date) => {
+    if (typeof date === 'string') {
+        return parse(date);
+    }
+    return typeof date === 'number' ? new Date(date) : date;
+};
+/**
+ * Format Date object to local date string.
+ * Output format: "yyyy-MM".
+ * @param date A Date object
+ * @returns A formatted date or empty string if invalid
+ */
+const formatToView = (date) => {
+    date = toDate(date);
+    return isValid(date) ? format(date, DateFormat.yyyyMM) : '';
+};
+/**
+ * Get current time string, e.g. "15:36" or "15:36:04"
+ * @param [includeSeconds=false] true to include seconds
+ * @returns A formatted time string
+ */
+const getCurrentTime = (includeSeconds = false) => {
+    return format(new Date(), includeSeconds ? TimeFormat.HHmmss : TimeFormat.HHmm);
+};
+export { DateTimeSegment, getCurrentTime, formatToView };

package/lib/dialog/custom-elements.json

@@ -0,0 +1,136 @@
+{
+  "version": "experimental",
+  "tags": [
+    {
+      "name": "ef-dialog",
+      "description": "Popup window, designed to contain and show any HTML content.\nIt provides modal and dragging functionality,\nand also allows custom footers and control buttons to be used.",
+      "attributes": [
+        {
+          "name": "header",
+          "description": "Set Header/Title of the dialog",
+          "type": "string | null"
+        },
+        {
+          "name": "draggable",
+          "description": "Should the dialog be draggable",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "opened",
+          "description": "Set dialog to open",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "x",
+          "description": "Set a specific x coordinate of dialog",
+          "type": "string"
+        },
+        {
+          "name": "y",
+          "description": "Set a specific y coordinate of dialog",
+          "type": "string"
+        },
+        {
+          "name": "no-cancel-on-esc-key",
+          "description": "Prevents dialog to close when user presses ESC key",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "full-screen",
+          "description": "Set dialog to full screen",
+          "type": "boolean"
+        },
+        {
+          "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"
+        }
+      ],
+      "properties": [
+        {
+          "name": "header",
+          "attribute": "header",
+          "description": "Set Header/Title of the dialog",
+          "type": "string | null"
+        },
+        {
+          "name": "draggable",
+          "attribute": "draggable",
+          "description": "Should the dialog be draggable",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "noCancelOnOutsideClick",
+          "description": "Prevents dialog to close when user clicks outside the dialog.",
+          "type": "boolean"
+        },
+        {
+          "name": "opened",
+          "attribute": "opened",
+          "description": "Set dialog to open",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "noCancelOnEscKey",
+          "description": "Prevents dialog to close when user presses ESC key",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "x",
+          "attribute": "x",
+          "description": "Set a specific x coordinate of dialog",
+          "type": "string"
+        },
+        {
+          "name": "y",
+          "attribute": "y",
+          "description": "Set a specific y coordinate of dialog",
+          "type": "string"
+        },
+        {
+          "name": "fullScreen",
+          "description": "Set dialog to full screen",
+          "type": "boolean"
+        },
+        {
+          "name": "positionTarget",
+          "description": "Set position of dialog i.e. `top`, `right`, `left`, `bottom`, `center` or combination of theme e.g. `top right`.",
+          "type": "string"
+        }
+      ],
+      "events": [
+        {
+          "name": "opened-changed",
+          "description": "Fired when value of `opened` property is changed. Prevent default to stop default action"
+        },
+        {
+          "name": "confirm",
+          "description": "Fired when dialog is closed by user clicked a default OK button. Prevent default to stop default action"
+        },
+        {
+          "name": "cancel",
+          "description": "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"
+        }
+      ],
+      "slots": [
+        {
+          "name": "footer",
+          "description": "Hide default OK and Cancel button and replace dialog's footer with your custom content."
+        }
+      ],
+      "methods": [
+        {
+          "name": "refit",
+          "description": "Clear all cached values and fit the popup.\nUse this function only if maxWidth, maxHeight, minWidth, minHeight, height, width are changed",
+          "params": []
+        }
+      ]
+    }
+  ]
+}

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`  |         | 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`             |             | `boolean`        |         | Set dialog to full screen                        |
+| `header`                 | `header`    | `string \| null` | null    | Set Header/Title of the dialog                   |
+| `noCancelOnEscKey`       |             | `boolean`        | false   | Prevents dialog to close when user presses ESC key |
+| `noCancelOnOutsideClick` |             | `boolean`        |         | Prevents dialog to close when user clicks outside the dialog. |
+| `opened`                 | `opened`    | `boolean`        | false   | Set dialog to open                               |
+| `positionTarget`         |             | `string`         |         | Set position of dialog i.e. `top`, `right`, `left`, `bottom`, `center` or combination of theme e.g. `top right`. |
+| `x`                      | `x`         | `string`         |         | Set a specific x coordinate of dialog            |
+| `y`                      | `y`         | `string`         |         | 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.d.ts

@@ -0,0 +1,14 @@
+export declare const MAIN_MOUSE_BUTTON = 0;
+/**
+ * provide public function for registering element for dragging
+ * @param draggableElement element that will be moved
+ * @param handle element that will be captured for movement
+ * @returns {void}
+ */
+export declare const register: (draggableElement: HTMLElement, handle: HTMLElement) => void;
+/**
+ * provide public function for registering element for dragging
+ * @param draggableElement draggable element
+ * @returns {void}
+ */
+export declare const deregister: (draggableElement: HTMLElement) => void;