@refinitiv-ui/elements 5.3.3 → 5.7.0

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);
+};

package/lib/dialog/index.d.ts

@@ -0,0 +1,199 @@
+import { JSXInterface } from '../jsx';
+import { CSSResultGroup, TemplateResult, ElementSize, PropertyValues } from '@refinitiv-ui/core';
+import { Overlay } from '../overlay/index.js';
+import '../icon/index.js';
+import '../panel/index.js';
+import '../header/index.js';
+import '../button/index.js';
+import { Translate } from '@refinitiv-ui/translate';
+import '@refinitiv-ui/phrasebook/lib/locale/en/dialog.js';
+/**
+ * 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.
+ *
+ * @prop {boolean} noCancelOnOutsideClick - Prevents dialog to close when user clicks outside the dialog.
+ *
+ * @attr {boolean} [opened=false] - Set dialog to open
+ * @prop {boolean} [opened=false] - Set dialog to open
+ *
+ * @attr {boolean} [no-cancel-on-esc-key=false] - Prevents dialog to close when user presses ESC key
+ * @prop {boolean} [noCancelOnEscKey=false] - Prevents dialog to close when user presses ESC key
+ *
+ * @attr {string} x - Set a specific x coordinate of dialog
+ * @prop {string} x - Set a specific x coordinate of dialog
+ *
+ * @attr {string} y - Set a specific y coordinate of dialog
+ * @prop {string} y - Set a specific y coordinate of dialog
+ *
+ * @attr {boolean} full-screen - Set dialog to full screen
+ * @prop {boolean} fullScreen - Set dialog to full screen
+ *
+ * @attr {string} position-target - Set position of dialog i.e. `top`, `right`, `left`, `bottom`, `center` or combination of theme e.g. `top right`.
+ * @prop {string} positionTarget - Set position of dialog i.e. `top`, `right`, `left`, `bottom`, `center` or combination of theme e.g. `top right`.
+ *
+ * @fires opened-changed - Fired when value of `opened` property is changed. Prevent default to stop default action
+ * @fires confirm - Fired when dialog is closed by user clicked a default OK button. Prevent default to stop default action
+ * @fires 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
+ *
+ * @slot footer - Hide default OK and Cancel button and replace dialog's footer with your custom content.
+ */
+export declare class Dialog extends Overlay {
+    /**
+     * Element version number
+     * @returns version number
+     */
+    static get version(): string;
+    /**
+     * A `CSSResultGroup` that will be used
+     * to style the host, slotted children
+     * and the internal template of the element.
+     * @returns CSS template
+     */
+    static get styles(): CSSResultGroup;
+    /**
+     * Set Header/Title of the dialog
+     */
+    header: string | null;
+    /**
+     * Should the dialog be draggable
+     */
+    draggable: boolean;
+    /**
+     * Used for translations
+     */
+    protected t: Translate;
+    /**
+     * Element for capture dragging
+     */
+    private handle;
+    /**
+     * Content element
+     */
+    private contentElement;
+    /**
+     * Header element
+     */
+    private headerElement;
+    /**
+     * Footer Element
+     */
+    private footerElement;
+    /**
+    * @ignore
+    */
+    noCancelOnOutsideClick: boolean;
+    /**
+    * @ignore
+    */
+    withBackdrop: boolean;
+    /**
+    * @ignore
+    */
+    withShadow: boolean;
+    disconnectedCallback(): void;
+    /**
+     * Clear all cached values and fit the popup.
+     * Use this function only if maxWidth, maxHeight, minWidth, minHeight, height, width are changed
+     * @returns {void}
+     */
+    refit(): void;
+    /**
+     * Called when the element's dimensions have changed
+     * @ignore
+     * @param size dimension details
+     * @returns {void}
+     */
+    resizedCallback(size: ElementSize): void;
+    /**
+     * Check if component should be updated
+     * @param changedProperties properties changed on shouldUpdate lifecycle callback
+     * @returns boolean should component update
+     */
+    protected shouldUpdate(changedProperties: PropertyValues): boolean;
+    /**
+     * Called after the element’s properties has been updated
+     * @param changedProperties Properties that has changed
+     * @returns {void}
+     */
+    protected updated(changedProperties: PropertyValues): void;
+    /**
+     * Run when the popup has closed, managers are de-registered
+     * and closing transition has finished
+     * @returns {void}
+     */
+    protected onClosed(): void;
+    /**
+     * IE11 only: Restrict maximum height of content element
+     * @param [maxHeight] Maximum height of content element
+     * @returns {void}
+     */
+    private restrictContentMaxHeight;
+    /**
+     * IE11 only: Calculate the maxHeight of content element
+     * @param size Size of the dialog
+     * @returns {void}
+     */
+    private calculateContentMaxHeight;
+    /**
+     * Default handler for confirm click
+     * @returns {void}
+     */
+    protected defaultConfirm(): void;
+    /**
+     * Default handler for cancel click
+     * @returns {void}
+     */
+    protected defaultCancel(): void;
+    /**
+     * Update draggable behavior looking to properties draggable and opened
+     * @returns {void}
+     */
+    private updateDraggableBehavior;
+    /**
+     * @param changedProperties - updated properties map
+     * @returns true if needs to update draggable behavior
+     */
+    private isDraggableBehaviourNeedToBeChanged;
+    /**
+     * fire `cancel` or `confirm` event looking to `confirm` property
+     * @param isConfirm true to fire `confirm` event. false to fire `cancel` event
+     * @returns true if event is successful, false if event is prevented
+     */
+    private fireCancelOrConfirmEvent;
+    /**
+     * Get the default content region
+     * @return {TemplateResult} Render template
+     */
+    protected get contentRegion(): TemplateResult;
+    /**
+     * Get the default footer region
+     * @return {TemplateResult} Render template
+     */
+    protected get footerRegion(): TemplateResult;
+    /**
+     * Get the default header region
+     * @return {TemplateResult} Render template
+     */
+    protected get headerRegion(): TemplateResult;
+    /**
+     * A `TemplateResult` that will be used
+     * to render the updated internal template.
+     * @return {TemplateResult} Render template
+     */
+    protected render(): TemplateResult;
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'ef-dialog': Dialog;
+  }
+
+  namespace JSX {
+    interface IntrinsicElements {
+      'ef-dialog': Partial<Dialog> | JSXInterface.HTMLAttributes<Dialog>;
+    }
+  }
+}
+
+export {};