@refinitiv-ui/elements 5.11.0 → 5.12.0-alpha.0

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

@@ -1,8 +0,0 @@
-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

@@ -1,57 +0,0 @@
-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

@@ -1,7 +0,0 @@
-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

@@ -1,7 +0,0 @@
-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

@@ -1,7 +0,0 @@
-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

@@ -1,7 +0,0 @@
-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

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

package/lib/datetime-picker/types.js

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

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

@@ -1,55 +0,0 @@
-/**
- * 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

@@ -1,92 +0,0 @@
-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/draggable-element.d.ts

@@ -1,14 +0,0 @@
-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

@@ -1,221 +0,0 @@
-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);
-};