@momentum-design/components 0.27.6 → 0.28.1

package/dist/components/popover/popover.constants.d.ts

@@ -0,0 +1,44 @@
+declare const TAG_NAME: "mdc-popover";
+declare const POPOVER_PLACEMENT: {
+    readonly LEFT_START: "left-start";
+    readonly LEFT: "left";
+    readonly LEFT_END: "left-end";
+    readonly RIGHT_START: "right-start";
+    readonly RIGHT: "right";
+    readonly RIGHT_END: "right-end";
+    readonly TOP_START: "top-start";
+    readonly TOP: "top";
+    readonly TOP_END: "top-end";
+    readonly BOTTOM_START: "bottom-start";
+    readonly BOTTOM: "bottom";
+    readonly BOTTOM_END: "bottom-end";
+};
+declare const TRIGGER: {
+    readonly CLICK: "click";
+    readonly MOUSEENTER: "mouseenter";
+    readonly FOCUSIN: "focusin";
+    readonly MANUAL: "manual";
+};
+declare const DEFAULTS: {
+    readonly PLACEMENT: "bottom";
+    readonly TRIGGER: "click";
+    readonly COLOR: "tonal";
+    readonly OFFSET: 4;
+    readonly VISIBLE: false;
+    readonly ARROW: false;
+    readonly CLOSE_BUTTON: false;
+    readonly FOCUS_TRAP: false;
+    readonly INTERACTIVE: false;
+    readonly PREVENT_SCROLL: false;
+    readonly HIDE_ON_ESCAPE: false;
+    readonly HIDE_ON_BLUR: false;
+    readonly HIDE_ON_CLICK_OUTSIDE: false;
+    readonly FOCUS_BACK: false;
+    readonly BACKDROP: false;
+    readonly FLIP: true;
+    readonly SIZE: false;
+    readonly DELAY: "0,0";
+    readonly ROLE: "dialog";
+    readonly Z_INDEX: 1000;
+};
+export { TAG_NAME, POPOVER_PLACEMENT, TRIGGER, DEFAULTS };

package/dist/components/popover/popover.constants.js

@@ -0,0 +1,46 @@
+import utils from '../../utils/tag-name';
+import { COLOR } from '../modalcontainer/modalcontainer.constants';
+const TAG_NAME = utils.constructTagName('popover');
+const POPOVER_PLACEMENT = {
+    LEFT_START: 'left-start',
+    LEFT: 'left',
+    LEFT_END: 'left-end',
+    RIGHT_START: 'right-start',
+    RIGHT: 'right',
+    RIGHT_END: 'right-end',
+    TOP_START: 'top-start',
+    TOP: 'top',
+    TOP_END: 'top-end',
+    BOTTOM_START: 'bottom-start',
+    BOTTOM: 'bottom',
+    BOTTOM_END: 'bottom-end',
+};
+const TRIGGER = {
+    CLICK: 'click',
+    MOUSEENTER: 'mouseenter',
+    FOCUSIN: 'focusin',
+    MANUAL: 'manual',
+};
+const DEFAULTS = {
+    PLACEMENT: POPOVER_PLACEMENT.BOTTOM,
+    TRIGGER: TRIGGER.CLICK,
+    COLOR: COLOR.TONAL,
+    OFFSET: 4,
+    VISIBLE: false,
+    ARROW: false,
+    CLOSE_BUTTON: false,
+    FOCUS_TRAP: false,
+    INTERACTIVE: false,
+    PREVENT_SCROLL: false,
+    HIDE_ON_ESCAPE: false,
+    HIDE_ON_BLUR: false,
+    HIDE_ON_CLICK_OUTSIDE: false,
+    FOCUS_BACK: false,
+    BACKDROP: false,
+    FLIP: true,
+    SIZE: false,
+    DELAY: '0,0',
+    ROLE: 'dialog',
+    Z_INDEX: 1000,
+};
+export { TAG_NAME, POPOVER_PLACEMENT, TRIGGER, DEFAULTS };

package/dist/components/popover/popover.events.d.ts

@@ -0,0 +1,34 @@
+import type Popover from './popover.component';
+export declare class PopoverEventManager {
+    /**
+     * Dispatches a custom event for the popover.
+     *
+     * @param eventName - The name of the event.
+     * @param instance - The popover instance.
+     */
+    static dispatchPopoverEvent(eventName: string, instance: Popover): void;
+    /**
+     * Custom event that is fired when the popover is shown.
+     *
+     * @param instance - The popover instance.
+     */
+    static onShowPopover(instance: Popover): void;
+    /**
+     * Custom event that is fired when the popover is hidden.
+     *
+     * @param instance - The popover instance.
+     */
+    static onHidePopover(instance: Popover): void;
+    /**
+     * Custom event that is fired when the popover is created.
+     *
+     * @param instance - The popover instance.
+     */
+    static onCreatedPopover(instance: Popover): void;
+    /**
+     * Custom event that is fired when the popover is destroyed.
+     *
+     * @param instance - The popover instance.
+     */
+    static onDestroyedPopover(instance: Popover): void;
+}

package/dist/components/popover/popover.events.js

@@ -0,0 +1,47 @@
+export class PopoverEventManager {
+    /**
+     * Dispatches a custom event for the popover.
+     *
+     * @param eventName - The name of the event.
+     * @param instance - The popover instance.
+     */
+    static dispatchPopoverEvent(eventName, instance) {
+        instance.dispatchEvent(new CustomEvent(eventName, {
+            detail: { show: instance.visible },
+            composed: true,
+            bubbles: true,
+        }));
+    }
+    /**
+     * Custom event that is fired when the popover is shown.
+     *
+     * @param instance - The popover instance.
+     */
+    static onShowPopover(instance) {
+        this.dispatchPopoverEvent('popover-on-show', instance);
+    }
+    /**
+     * Custom event that is fired when the popover is hidden.
+     *
+     * @param instance - The popover instance.
+     */
+    static onHidePopover(instance) {
+        this.dispatchPopoverEvent('popover-on-hide', instance);
+    }
+    /**
+     * Custom event that is fired when the popover is created.
+     *
+     * @param instance - The popover instance.
+     */
+    static onCreatedPopover(instance) {
+        this.dispatchPopoverEvent('popover-on-created', instance);
+    }
+    /**
+     * Custom event that is fired when the popover is destroyed.
+     *
+     * @param instance - The popover instance.
+     */
+    static onDestroyedPopover(instance) {
+        this.dispatchPopoverEvent('popover-on-destroyed', instance);
+    }
+}

package/dist/components/popover/popover.stack.d.ts

@@ -0,0 +1,45 @@
+import type Popover from './popover.component';
+/**
+ * Manages a stack of popovers to control their order and lifecycle.
+ * This class allows adding, removing, and retrieving popovers
+ * while maintaining their stacking behavior.
+ *
+ */
+declare class PopoverStack {
+    /**
+     * Stack to maintain the order of popovers
+     * @internal
+     */
+    private stack;
+    /**
+     * Adds a popover to the stack
+     *
+     * @param popover - Popover instance
+     */
+    push(popover: Popover): void;
+    /**
+     * Removes the last popover from the stack
+     *
+     * @returns The last popover in the stack
+     */
+    pop(): Popover | undefined;
+    /**
+     * Returns the last popover in the stack
+     * without removing it
+     *
+     * @returns The last popover in the stack
+     */
+    peek(): Popover | undefined;
+    /**
+     * Removes a popover from the stack
+     *
+     * @param popover - Popover instance
+     */
+    remove(popover: Popover): void;
+    /**
+     * Clears the stack
+     */
+    clear(): void;
+}
+export declare const popoverStack: PopoverStack;
+export {};

package/dist/components/popover/popover.stack.js

@@ -0,0 +1,55 @@
+/**
+ * Manages a stack of popovers to control their order and lifecycle.
+ * This class allows adding, removing, and retrieving popovers
+ * while maintaining their stacking behavior.
+ *
+ */
+class PopoverStack {
+    constructor() {
+        /**
+         * Stack to maintain the order of popovers
+         * @internal
+         */
+        this.stack = [];
+    }
+    /**
+     * Adds a popover to the stack
+     *
+     * @param popover - Popover instance
+     */
+    push(popover) {
+        this.stack.push(popover);
+    }
+    /**
+     * Removes the last popover from the stack
+     *
+     * @returns The last popover in the stack
+     */
+    pop() {
+        return this.stack.pop();
+    }
+    /**
+     * Returns the last popover in the stack
+     * without removing it
+     *
+     * @returns The last popover in the stack
+     */
+    peek() {
+        return this.stack[this.stack.length - 1];
+    }
+    /**
+     * Removes a popover from the stack
+     *
+     * @param popover - Popover instance
+     */
+    remove(popover) {
+        this.stack = this.stack.filter((item) => item !== popover);
+    }
+    /**
+     * Clears the stack
+     */
+    clear() {
+        this.stack = [];
+    }
+}
+export const popoverStack = new PopoverStack();

package/dist/components/popover/popover.styles.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("lit").CSSResult[];
+export default _default;

package/dist/components/popover/popover.styles.js

@@ -0,0 +1,109 @@
+import { css } from 'lit';
+const styles = css `
+  :host {
+    --mdc-popover-arrow-border-radius: 0.1875rem;
+    --mdc-popover-arrow-border: 0.0625rem solid var(--mds-color-theme-outline-secondary-normal);
+
+    --mdc-popover-primary-background-color: var(--mds-color-theme-background-solid-primary-normal);
+    --mdc-popover-inverted-background-color: var(--mds-color-theme-inverted-background-normal);
+    --mdc-popover-inverted-border-color: var(--mds-color-theme-inverted-outline-primary-normal);
+    --mdc-popover-inverted-text-color: var(--mds-color-theme-inverted-text-primary-normal);
+  }
+
+  :host([color='contrast']) .popover-container {
+    .popover-arrow {
+      background-color: var(--mdc-popover-inverted-background-color);
+      border-color: var(--mdc-popover-inverted-border-color);
+    }
+
+    .popover-close {
+      color: var(--mdc-popover-inverted-text-color);
+    }
+  }
+
+  .popover-container {
+    display: none;
+    position: absolute;
+    box-sizing: content-box;
+  }
+
+  :host([visible]) .popover-container {
+    display: block;
+  }
+
+  .popover-container::part(container) {
+    padding: 0;
+  }
+
+  :host::part(popover-content) {
+    position: relative;
+    padding: 0.75rem;
+    overflow-y: auto;
+    min-width: max-content;
+    z-index: 9998;
+  }
+
+  .popover-backdrop {
+    z-index: 999;
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: transparent;
+  }
+
+  .popover-hover-bridge {
+    position: absolute;
+    transform: translateX(-50%);
+    background: transparent;
+    pointer-events: auto;
+  }
+
+  .popover-arrow {
+    position: absolute;
+    width: 1rem;
+    height: 1rem;
+    background-color: var(--mdc-popover-primary-background-color);
+    transform: rotate(45deg);
+    pointer-events: none;
+    border: var(--mdc-popover-arrow-border);
+  }
+
+  .popover-close {
+    position: absolute;
+    right: 0.75rem;
+    top: 0.75rem;
+    cursor: pointer;
+    z-index: 9999;
+  }
+
+  .popover-arrow[data-side='top'] {
+    border-top: none;
+    border-left: none;
+    border-bottom-right-radius: var(--mdc-popover-arrow-border-radius);
+    border-top-left-radius: 100%;
+  }
+
+  .popover-arrow[data-side='bottom'] {
+    border-bottom: none;
+    border-right: none;
+    border-top-left-radius: var(--mdc-popover-arrow-border-radius);
+    border-bottom-right-radius: 100%;
+  }
+
+  .popover-arrow[data-side='right'] {
+    border-top: none;
+    border-right: none;
+    border-bottom-left-radius: var(--mdc-popover-arrow-border-radius);
+    border-top-right-radius: 100%;
+  }
+
+  .popover-arrow[data-side='left'] {
+    border-bottom: none;
+    border-left: none;
+    border-top-right-radius: var(--mdc-popover-arrow-border-radius);
+    border-bottom-left-radius: 100%;
+  }
+`;
+export default [styles];

package/dist/components/popover/popover.types.d.ts

@@ -0,0 +1,4 @@
+import type { ValueOf } from '../../utils/types';
+import { POPOVER_PLACEMENT, TRIGGER } from './popover.constants';
+export type PopoverPlacement = ValueOf<typeof POPOVER_PLACEMENT>;
+export type PopoverTrigger = ValueOf<typeof TRIGGER> | `${ValueOf<typeof TRIGGER>} ${ValueOf<typeof TRIGGER>}`;

package/dist/components/popover/popover.types.js

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

package/dist/components/popover/popover.utils.d.ts

@@ -0,0 +1,48 @@
+import type Popover from './popover.component';
+export declare class PopoverUtils {
+    /** @internal */
+    private popover;
+    /** @internal */
+    private arrowPixelChange;
+    constructor(popover: Popover);
+    /**
+     * Parses the delay string and sets the open and close delay values.
+     * If the delay string is invalid, the delay is set to 0.
+     * @returns An array containing the open and close delay values.
+     * @throws An error if the delay value is invalid.
+     */
+    setupDelay(): number[];
+    /**
+     * Sets up the hover bridge for the popover.
+     * The hover bridge is used to prevent the popover from closing when the mouse is over the popover.
+     *
+     * @param placement - The placement of the popover.
+     */
+    setupHoverBridge(placement: string): void;
+    /**
+     * If the `appendTo` property is set, finds the corresponding
+     * DOM element by its ID, and appends this popover as a child of that element.
+     */
+    setupAppendTo(): void;
+    /**
+     * Sets up the accessibility attributes for the popover.
+     */
+    setupAccessibility(): void;
+    /**
+     * Updates the arrow style based on the arrow data and placement.
+     *
+     * @param arrowData - The arrow data x and y.
+     * @param placement - The placement of the popover.
+     */
+    updateArrowStyle(arrowData: {
+        x?: number;
+        y?: number;
+    }, placement: string): void;
+    /**
+     * Updates the popover style based on the x and y position.
+     *
+     * @param x - The x position.
+     * @param y - The y position.
+     */
+    updatePopoverStyle(x: number, y: number): void;
+}

package/dist/components/popover/popover.utils.js

@@ -0,0 +1,156 @@
+export class PopoverUtils {
+    constructor(popover) {
+        /** @internal */
+        this.arrowPixelChange = false;
+        this.popover = popover;
+    }
+    /**
+     * Parses the delay string and sets the open and close delay values.
+     * If the delay string is invalid, the delay is set to 0.
+     * @returns An array containing the open and close delay values.
+     * @throws An error if the delay value is invalid.
+     */
+    setupDelay() {
+        try {
+            const [openDelay, closeDelay] = this.popover.delay.split(',').map((delay) => {
+                const parsed = parseInt(delay, 10);
+                if (Number.isNaN(parsed) || parsed < 0) {
+                    throw new Error(`Invalid delay value: ${delay}`);
+                }
+                return parsed;
+            });
+            return [openDelay, closeDelay];
+        }
+        catch (error) {
+            this.popover.delay = '0,0';
+            return [0, 0];
+        }
+    }
+    /**
+     * Sets up the hover bridge for the popover.
+     * The hover bridge is used to prevent the popover from closing when the mouse is over the popover.
+     *
+     * @param placement - The placement of the popover.
+     */
+    setupHoverBridge(placement) {
+        var _a;
+        const hoverBridge = this.popover.renderRoot.querySelector('.popover-hover-bridge');
+        Object.assign(hoverBridge.style, {
+            top: '',
+            left: '',
+            right: '',
+            bottom: '',
+        });
+        const bridgeSize = `calc(${this.popover.showArrow ? '0.75rem + ' : ''}${this.popover.offset}px)`;
+        const modalContainer = (_a = this.popover.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('mdc-modalcontainer');
+        const popoverHeight = modalContainer.offsetHeight || 0;
+        const popoverWidth = modalContainer.offsetWidth || 0;
+        if (hoverBridge) {
+            const side = placement.split('-')[0];
+            switch (side) {
+                case 'top':
+                    hoverBridge.style.height = bridgeSize;
+                    hoverBridge.style.bottom = `calc(-1 * (${bridgeSize}))`;
+                    hoverBridge.style.left = '50%';
+                    hoverBridge.style.width = `${popoverWidth}px`;
+                    break;
+                case 'left':
+                    hoverBridge.style.height = `${popoverHeight}px`;
+                    hoverBridge.style.width = bridgeSize;
+                    hoverBridge.style.right = `calc(-1.5 * (${bridgeSize}))`;
+                    break;
+                case 'right':
+                    hoverBridge.style.height = `${popoverHeight}px`;
+                    hoverBridge.style.width = bridgeSize;
+                    hoverBridge.style.left = `calc(-0.5 * (${bridgeSize}))`;
+                    break;
+                case 'bottom':
+                default:
+                    hoverBridge.style.height = bridgeSize;
+                    hoverBridge.style.top = `calc(-1 * (${bridgeSize}))`;
+                    hoverBridge.style.left = '50%';
+                    hoverBridge.style.width = `${popoverWidth}px`;
+                    break;
+            }
+        }
+    }
+    /**
+     * If the `appendTo` property is set, finds the corresponding
+     * DOM element by its ID, and appends this popover as a child of that element.
+     */
+    setupAppendTo() {
+        if (this.popover.appendTo) {
+            const appendToElement = document.getElementById(this.popover.appendTo);
+            if (appendToElement) {
+                appendToElement.appendChild(this.popover);
+            }
+        }
+    }
+    /**
+     * Sets up the accessibility attributes for the popover.
+     */
+    setupAccessibility() {
+        var _a, _b, _c;
+        if (this.popover.interactive) {
+            if (!this.popover.dataAriaLabel) {
+                this.popover.dataAriaLabel = ((_a = this.popover.triggerElement) === null || _a === void 0 ? void 0 : _a.ariaLabel)
+                    || ((_b = this.popover.triggerElement) === null || _b === void 0 ? void 0 : _b.textContent)
+                    || '';
+            }
+            if (!this.popover.dataAriaLabelledby) {
+                this.popover.dataAriaLabelledby = ((_c = this.popover.triggerElement) === null || _c === void 0 ? void 0 : _c.id) || '';
+            }
+        }
+    }
+    /**
+     * Updates the arrow style based on the arrow data and placement.
+     *
+     * @param arrowData - The arrow data x and y.
+     * @param placement - The placement of the popover.
+     */
+    updateArrowStyle(arrowData, placement) {
+        var _a;
+        if (!this.popover.arrowElement)
+            return;
+        const side = placement.split('-')[0];
+        const staticSide = {
+            top: 'bottom',
+            right: 'left',
+            bottom: 'top',
+            left: 'right',
+        }[side];
+        const { x: arrowX, y: arrowY } = arrowData;
+        const rect = this.popover.arrowElement.getBoundingClientRect();
+        const parent = (_a = this.popover.arrowElement.offsetParent) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
+        if (!this.arrowPixelChange) {
+            const pixelDiff = (parent === null || parent === void 0 ? void 0 : parent[staticSide]) ? 12 - Math.abs(rect[staticSide] - parent[staticSide]) : 0;
+            if (Math.round(pixelDiff) === 1) {
+                this.arrowPixelChange = true;
+            }
+            else {
+                this.arrowPixelChange = false;
+            }
+        }
+        const arrowPixelDiff = this.arrowPixelChange ? 0.5 : 0;
+        this.popover.arrowElement.setAttribute('data-side', side);
+        Object.assign(this.popover.arrowElement.style, {
+            left: arrowX != null ? `${arrowX}px` : '',
+            top: arrowY != null ? `${arrowY}px` : '',
+            [staticSide]: `${-this.popover.arrowElement.offsetHeight / 2 - arrowPixelDiff}px`,
+        });
+    }
+    /**
+     * Updates the popover style based on the x and y position.
+     *
+     * @param x - The x position.
+     * @param y - The y position.
+     */
+    updatePopoverStyle(x, y) {
+        if (!this.popover.containerElement)
+            return;
+        Object.assign(this.popover.containerElement.style, {
+            left: `${x}px`,
+            top: `${y}px`,
+        });
+    }
+}