@refinitiv-ui/elements 5.3.3 → 5.3.4

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

@@ -0,0 +1,8 @@
+import { 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,46 @@
+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';
+// 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):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}');

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):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}');

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

@@ -0,0 +1,3 @@
+import { 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';
+/**
+ * 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/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;

package/lib/dialog/draggable-element.js

@@ -0,0 +1,221 @@
+export const MAIN_MOUSE_BUTTON = 0;
+class DraggableManager {
+    constructor() {
+        this.lastX = 0;
+        this.lastY = 0;
+        this.deltaX = 0;
+        this.deltaY = 0;
+        this.xOffset = 0;
+        this.yOffset = 0;
+        this.draggableElements = new Map();
+        this.draggableElement = null;
+        /**
+         * @param draggableElement element that will be dragged
+         * @param handle element that will be touched for dragging
+         * @returns {void}
+         */
+        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(event.pageX, event.pageY);
+            }
+        };
+        /**
+         * remove event listeners for dragging from document
+         * @returns {void}
+         */
+        this.release = () => {
+            document.removeEventListener('mouseup', this.onRelease);
+            document.removeEventListener('mousemove', this.onMove);
+            this.draggableElement = null;
+        };
+        this.getDeltaAndShift = (x, y) => {
+            if (this.draggableElement) {
+                this.deltaX = x - this.lastX;
+                this.deltaY = y - this.lastY;
+                this.lastX = x;
+                this.lastY = y;
+                this.shift(this.deltaX, this.deltaY);
+            }
+        };
+        /**
+         * provides functionality needs for release draggable element
+         * @param event mouse up event
+         * @returns {void}
+         */
+        this.onRelease = (event) => {
+            if (this.draggableElement) {
+                this.setSelectingOfText(true);
+                this.release();
+                event.preventDefault();
+                event.stopPropagation();
+            }
+        };
+        this.onMove = (event) => {
+            if (this.draggableElement && event.button === MAIN_MOUSE_BUTTON) {
+                this.getDeltaAndShift(event.pageX, event.pageY);
+            }
+            else {
+                this.release();
+            }
+        };
+    }
+    /**
+     * register element for dragging
+     * @param draggableElement element that will be dragged
+     * @param handle element that will be captured for dragging
+     * @returns {void}
+     */
+    register(draggableElement, handle) {
+        if (!this.draggableElements.has(draggableElement)) {
+            this.draggableElements.set(draggableElement, {
+                mouseDownListener: this.mouseDownListener(draggableElement, handle),
+                handle
+            });
+            this.setHandleListeners(draggableElement);
+        }
+        DraggableManager.setHandleCursor(handle);
+    }
+    /**
+     * remove element from list of draggable
+     * @param draggableElement element for dragging
+     * @returns {void}
+     */
+    deregister(draggableElement) {
+        var _a;
+        if (this.draggableElements.has(draggableElement)) {
+            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) {
+                this.release();
+            }
+        }
+    }
+    /**
+     * Shifts the drag container by the specified x/y values
+     * @param x Amount to shift the x-axis
+     * @param y Amount to shift the y-axis
+     * @returns {void}
+     */
+    shift(x, y) {
+        if (this.draggableElement) {
+            // Shift the offsets
+            this.xOffset += x;
+            this.yOffset += y;
+            // Get the current container box rect.
+            const box = this.draggableElement.getBoundingClientRect();
+            const scrollingElement = document.documentElement;
+            // Don't allow the box to move outside the bounds of the viewport
+            x = Math.min(Math.max(this.xOffset, 0), scrollingElement.clientWidth - box.width);
+            y = Math.min(Math.max(this.yOffset, 0), scrollingElement.clientHeight - box.height);
+            // Update the container position
+            this.draggableElement.style.left = `${x}px`;
+            this.draggableElement.style.top = `${y}px`;
+        }
+    }
+    /**
+     * Styles the handle and listens for mouse events.
+     * @param draggableElement element that will be dragged
+     * @returns {void}
+     */
+    setHandleListeners(draggableElement) {
+        const element = this.draggableElements.get(draggableElement);
+        if (element) {
+            element.handle
+                .addEventListener('mousedown', element.mouseDownListener);
+        }
+    }
+    /**
+     * Styles the handle and listens for mouse events.
+     * @param draggableElement element that will be dragged
+     * @returns {void}
+     */
+    removeHandleListeners(draggableElement) {
+        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.
+     * @param handle element that will be touched for dragging
+     * @returns {void}
+     */
+    static setHandleCursor(handle) {
+        handle.style.cursor = 'move';
+    }
+    /**
+     * Sets the cursor of the drag handle, based on its draggable state.
+     * @param handle element that will be touched for dragging
+     * @returns {void}
+     */
+    static removeHandleCursor(handle) {
+        handle.style.removeProperty('cursor');
+    }
+    /**
+     * Get the current offset as it may have been changed.
+     * @returns {void}
+     */
+    updateOffset() {
+        if (this.draggableElement) {
+            const style = getComputedStyle(this.draggableElement);
+            this.xOffset = parseFloat(style.left.replace(/\D[~.]/g, ''));
+            this.yOffset = parseFloat(style.top.replace(/\D[~.]/g, ''));
+        }
+    }
+    /**
+     * Set the global dragging values
+     * @param x Starting mouse x position
+     * @param y Starting mouse y position
+     * @returns {void}
+     */
+    drag(x, y) {
+        this.lastX = x;
+        this.lastY = y;
+    }
+    /**
+     * switch user-select if the dtaggableElement exists
+     * @param enable the condition of the user-select state
+     * @returns {void}
+     */
+    setSelectingOfText(enable) {
+        if (!this.draggableElement) {
+            return;
+        }
+        if (enable) {
+            this.draggableElement.style.userSelect = 'auto';
+        }
+        else {
+            this.draggableElement.style.userSelect = 'none';
+        }
+    }
+}
+/**
+ * creating singleton instance of DraggableManager
+ */
+const draggableManager = new DraggableManager();
+/**
+ * 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 const register = (draggableElement, handle) => {
+    draggableManager.register(draggableElement, handle);
+};
+/**
+ * provide public function for registering element for dragging
+ * @param draggableElement draggable element
+ * @returns {void}
+ */
+export const deregister = (draggableElement) => {
+    draggableManager.deregister(draggableElement);
+};