@telesign/boreal-web-components 0.1.0-alpha.1 → 0.1.0-alpha.3

package/dist/esm/bds-dialog.entry.js

@@ -0,0 +1,370 @@
+import { M as Mixin, r as registerInstance, c as createEvent, h, g as getElement } from './index-D4EFsvs1.js';
+import { f as floatingMixin } from './floating.mixin-DCXSEEVH.js';
+import { a as inheritAriaAttributes } from './attributes-CaHOghy5.js';
+import { v as validatePropValue } from './validateProps-vfAIdwy0.js';
+import { S as STATUS_VARIANT } from './states-BhTPNsBb.js';
+
+const backdropMixin = (Base) => {
+    /**
+     * Backdrop mixin class that extends floatingMixin to provide backdrop functionality for dialogs.
+     * Handles showing/hiding dialogs, backdrop clicks, escape key handling, and scroll locking.
+     *
+     * @example
+     * ```typescript
+     * import { Component, Mixin, h } from '@stencil/core';
+     * import { backdropMixin } from './backdrop.mixin';
+     * import { BackdropHooks } from '@/services/floating/interfaces/Backdrop';
+     *
+     * @Component({ tag: 'my-dialog' })
+     * export class MyDialog extends Mixin(backdropMixin) {
+     *
+     *   // Optional: Override hooks for custom behavior
+     *   get hooks(): BackdropHooks {
+     *     return {
+     *       onAfterShow: () => console.log('Dialog shown'),
+     *       onBeforeClose: () => console.log('Dialog closing'),
+     *       onAfterHide: () => console.log('Dialog hidden'),
+     *     };
+     *   }
+     *
+     *   render() {
+     *     return (
+     *       <dialog
+     *         ref={(el) => (this.dialogElement = el)}
+     *         onClick={(e) => this.handleBackdropClick(e)}
+     *         onKeyDown={(e) => this.handleKeydown(e)}
+     *       >
+     *         <div>Dialog content</div>
+     *       </dialog>
+     *     );
+     *   }
+     * }
+     * ```
+     */
+    class Backdrop extends floatingMixin(Base) {
+        constructor() {
+            super(...arguments);
+            /**
+             * Indicates whether the dialog is currently in the process of closing.
+             */
+            this.isClosing = false;
+        }
+        /**
+         * Override in component to provide custom hooks.
+         * @returns {BackdropHooks} The custom hooks object.
+         */
+        get hooks() {
+            return {};
+        }
+        /**
+         * Shows the dialog element by calling showModal and setting isVisible to true.
+         * Overrides floating mixin showElement()
+         */
+        showElement() {
+            this.dialogElement.showModal();
+            this.isVisible = true;
+        }
+        /**
+         * Hides the dialog element by calling close and setting isVisible to false, and resets isClosing.
+         * Overrides floating mixin hideElement()
+         */
+        hideElement() {
+            this.dialogElement.close();
+            this.isVisible = false;
+            this.isClosing = false;
+        }
+        /**
+         * Closes the dialog element, preventing multiple close attempts and calling hooks if available.
+         * * If the onBEforeClose() hook is passed, the implementation SHOULD call the hide() function.
+         */
+        closeElement() {
+            if (this.preventClose)
+                return;
+            if (this.isClosing)
+                return;
+            this.isClosing = true;
+            if (this.hooks.onBeforeClose !== undefined)
+                this.onBeforeClose(this.dialogElement);
+            else
+                this.hide();
+        }
+        /**
+         * Toggles the visibility of the dialog: closes if visible, shows if hidden.
+         */
+        toggle() {
+            this.isVisible ? this.closeElement() : this.show();
+        }
+        /**
+         * Overrides the hooks inherited from floating mixin.
+         * Hook called after the dialog is shown. Locks the scroll and calls custom hooks.
+         * @param target The target HTMLElement
+         */
+        onAfterShow(target) {
+            this.previousOverflow = document.body.style.overflow;
+            document.body.style.overflow = 'hidden';
+            this.hooks.onAfterShow?.(target);
+        }
+        /**
+         * Hook called after the dialog is hidden. Restores the previous overflow style and calls custom hooks.
+         * @param target The target HTMLElement
+         */
+        onAfterHide(target) {
+            document.body.style.overflow = this.previousOverflow ?? '';
+            this.hooks.onAfterHide?.(target);
+        }
+        /**
+         * A lifecycle hook that is invoked just before the dialog begins to close.
+         * This provides an opportunity to perform custom actions, such as triggering closing animations,
+         * before the dialog is actually hidden from view.
+         * * If the onBeforeClose() hook is passed, the implementation SHOULD call the hide() function.
+         * @param target The target HTMLElement, typically the dialog element.
+         */
+        onBeforeClose(target) {
+            this.hooks.onBeforeClose?.(target);
+        }
+        /**
+         * Handle backdrop click to close the dialog.
+         * @param e Mouse Event at click
+         */
+        handleBackdropClick(e) {
+            if (!this.backdropClose)
+                return;
+            if (e.target === this.dialogElement) {
+                e.preventDefault();
+                e.stopImmediatePropagation();
+                this.closeElement();
+            }
+        }
+        /**
+         * Handle Escape keydown to close the dialog.
+         * @param ev KeyboardEvent
+         */
+        handleKeydown(ev) {
+            if (ev.key === 'Escape') {
+                ev.preventDefault();
+                ev.stopImmediatePropagation();
+            }
+            if (!this.escapeClose || ev.repeat || ev.key !== 'Escape')
+                return;
+            this.closeElement();
+        }
+        /**
+         * Adds a transition class to the dialog element.
+         * Cleanup and closing logic must be handled by the caller.
+         */
+        addTransitionAnimation(animationClassName) {
+            this.dialogElement.classList.add(animationClassName);
+        }
+        /**
+         * Removes a transition class to the dialog element.
+         * Calling must be handled by the caller.
+         */
+        removeTransitionAnimation(animationClassName) {
+            this.dialogElement.classList.remove(animationClassName);
+        }
+    }
+    return Backdrop;
+};
+
+const DIALOG_SIZES = {
+    SMALL: 'sm',
+    MEDIUM: 'md',
+    LARGE: 'lg',
+    FULL: 'full',
+};
+const DIALOG_VARIANT = {
+    ...STATUS_VARIANT,
+    DEFAULT: 'default',
+};
+const DIALOG_VARIANT_ICON = {
+    INFO: 'bds-icon-info-circle-fill',
+    SUCCESS: 'bds-icon-check-circle-fill',
+    WARNING: 'bds-icon-info-major-triangle-up-fill',
+    DANGER: 'bds-icon-alert-circle-fill',
+};
+const DIALOG_LAYOUT = {
+    DEFAULT: 'default',
+    HEADERLESS: 'headerless',
+    FOOTERLESS: 'footerless',
+};
+const DIALOG_CONTENT_PADDING = {
+    DEFAULT: 'default',
+    NONE: 'none',
+};
+
+const bdsDialogCss = () => `@charset "UTF-8";.bds-dialog{font-family:var(--boreal-typography-font-family-primary);display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}.bds-dialog__header{height:var(--boreal-spacing-4xl);display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;padding:var(--boreal-spacing-s) var(--boreal-spacing-s) var(--boreal-spacing-s) var(--boreal-spacing-l)}.bds-dialog__header:empty{display:none}.bds-dialog__header-right,.bds-dialog__header-left{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;gap:var(--boreal-spacing-2xs)}.bds-dialog__title{color:var(--boreal-text-default-light);font-size:var(--boreal-typography-font-size-md);font-weight:var(--boreal-typography-font-weight-semibold);line-height:var(--boreal-typography-line-height-md)}.bds-dialog__body{height:100%;overflow-y:auto;padding:var(--boreal-spacing-s) var(--boreal-spacing-l)}.bds-dialog__footer{padding:var(--boreal-spacing-s) var(--boreal-spacing-xs)}.bds-dialog__body,.bds-dialog__footer{-webkit-box-shadow:0 var(--boreal-spacing-4xs) var(--boreal-spacing-4xs) 0 var(--boreal-stroke-default-light) inset;box-shadow:0 var(--boreal-spacing-4xs) var(--boreal-spacing-4xs) 0 var(--boreal-stroke-default-light) inset}.bds-dialog__body:empty,.bds-dialog__footer:empty{display:none}.bds-dialog--sm{width:min(448px, 100vw - var(--boreal-spacing-m) * 2)}.bds-dialog--md{width:min(640px, 100vw - var(--boreal-spacing-m) * 2)}.bds-dialog--lg{width:min(960px, 100vw - var(--boreal-spacing-m) * 2)}.bds-dialog--full{width:min(1280px, 100vw - var(--boreal-spacing-m) * 2);height:calc(100vh - var(--boreal-spacing-4xl))}.bds-dialog--custom-size{width:var(--bds-dialog-width, auto);height:var(--bds-dialog-height, auto)}.bds-dialog--info .bds-dialog__variant-icon{color:var(--boreal-icon-info-base)}.bds-dialog--warning .bds-dialog__variant-icon{color:var(--boreal-icon-warning-base)}.bds-dialog--danger .bds-dialog__variant-icon{color:var(--boreal-icon-danger-base)}.bds-dialog--success .bds-dialog__variant-icon{color:var(--boreal-icon-success-base)}.bds-dialog--no-padding{padding:0}bds-dialog dialog{border:none;border-radius:var(--boreal-radius-xs);background-color:var(--boreal-white);-webkit-box-shadow:0 8px 12px 0 rgba(19, 19, 22, 0.15);box-shadow:0 8px 12px 0 rgba(19, 19, 22, 0.15);-ms-flex-item-align:center;align-self:center;justify-self:center}bds-dialog dialog::-webkit-backdrop{opacity:0;-webkit-transition:opacity 0.3s ease;transition:opacity 0.3s ease}bds-dialog dialog::-ms-backdrop{opacity:0;-ms-transition:opacity 0.3s ease;transition:opacity 0.3s ease}bds-dialog dialog,bds-dialog dialog::backdrop{opacity:0;-webkit-transition:opacity 0.3s ease;transition:opacity 0.3s ease}bds-dialog dialog[open].enter::-webkit-backdrop{opacity:1}bds-dialog dialog[open].enter::-ms-backdrop{opacity:1}bds-dialog dialog[open].enter,bds-dialog dialog[open].enter::backdrop{opacity:1}`;
+
+const BdsDialog = class extends Mixin(backdropMixin) {
+    constructor(hostRef) {
+        super();
+        registerInstance(this, hostRef);
+        this.bdsOpen = createEvent(this, "bdsOpen");
+        this.bdsClose = createEvent(this, "bdsClose");
+        this.bdsMaximize = createEvent(this, "bdsMaximize");
+        this.inheritedAttributes = {};
+        /** Controls whether the dialog is open. */
+        this.active = false;
+        /** Controls whether the dialog is closable. */
+        this.preventClose = false;
+        /** Dialog custom height */
+        this.height = '';
+        /** Dialog custom width */
+        this.width = '';
+        /** Layout type: 'default', 'headerless', or 'footerless'. */
+        this.layout = DIALOG_LAYOUT.DEFAULT;
+        /** Content padding: 'default' or 'none'. */
+        this.contentPadding = DIALOG_CONTENT_PADDING.DEFAULT;
+        /** Close dialog when clicking the backdrop. */
+        this.backdropClose = false;
+        /** Close dialog when pressing Escape. */
+        this.escapeClose = false;
+        /** Dialog size: 'small', 'medium', 'large', or 'full'. */
+        this.size = DIALOG_SIZES.MEDIUM;
+        /** Visual variant: 'default', 'info', 'success', 'warning', or 'danger'. */
+        this.variant = DIALOG_VARIANT.DEFAULT;
+        /** Title text displayed in the header. */
+        this.titleDialog = '';
+        /** Show maximize button to toggle full-screen. */
+        this.maximizable = false;
+        /** Hide the close button in the header. */
+        this.closable = false;
+        this.onDialogTransitionEnd = (ev) => {
+            if (ev.target !== this.dialogElement)
+                return;
+            if (ev.pseudoElement === '::backdrop')
+                return;
+            if (this.preventClose)
+                return;
+            if (!this.isClosing)
+                return;
+            this.hide();
+        };
+    }
+    handleIsOpenChange(active) {
+        if (this.dialogElement === undefined)
+            return;
+        if (active)
+            this.show();
+        else
+            this.closeElement();
+    }
+    componentWillLoad() {
+        this.checkPropValues();
+        this.inheritedAttributes = {
+            ...inheritAriaAttributes(this.el),
+        };
+    }
+    componentDidLoad() {
+        if (this.active)
+            this.handleIsOpenChange(this.active);
+    }
+    checkPropValues() {
+        validatePropValue(Object.values(DIALOG_LAYOUT), DIALOG_LAYOUT.DEFAULT, this.el, 'layout');
+        validatePropValue(Object.values(DIALOG_CONTENT_PADDING), DIALOG_CONTENT_PADDING.DEFAULT, this.el, 'contentPadding');
+        validatePropValue(Object.values(DIALOG_SIZES), DIALOG_SIZES.MEDIUM, this.el, 'size');
+        validatePropValue(Object.values(DIALOG_VARIANT), DIALOG_VARIANT.DEFAULT, this.el, 'variant');
+    }
+    handleMaximize() {
+        this.bdsMaximize.emit();
+    }
+    /**
+     * Opens the dialog programmatically.
+     * This method triggers the show functionality to display the dialog.
+     */
+    async open() {
+        this.show();
+    }
+    /**
+     * Closes the dialog programmatically.
+     * This method triggers the close functionality to hide the dialog.
+     */
+    async close() {
+        this.closeElement();
+    }
+    get isHeaderLeftVisible() {
+        return this.isHeaderRightVisible || this.titleDialog;
+    }
+    get isHeaderRightVisible() {
+        return this.maximizable || this.closable;
+    }
+    get hooks() {
+        return {
+            onAfterShow: () => this.onOpenDialog(),
+            onBeforeClose: () => this.transitionBeforeClose(),
+            onAfterHide: () => this.resetComponent(),
+        };
+    }
+    /**
+     * Handles the transition logic before closing the dialog.
+     * Sets the active prop to false, removes the enter transition animation,
+     * and checks if there's a transition duration. If no transition, hides immediately;
+     * otherwise, the hide will be triggered after the transition ends.
+     */
+    transitionBeforeClose() {
+        this.active = false;
+        this.removeTransitionAnimation('enter');
+        const { transitionDuration } = getComputedStyle(this.dialogElement);
+        const duration = parseFloat(transitionDuration);
+        const hasTransition = transitionDuration && !Number.isNaN(duration) && duration > 0;
+        if (!hasTransition) {
+            this.hide();
+            return;
+        }
+    }
+    onOpenDialog() {
+        this.addTransitionAnimation('enter');
+        this.bdsOpen.emit();
+    }
+    resetComponent() {
+        this.bdsClose.emit();
+    }
+    /** Render helper functions */
+    getVariantIcon() {
+        const iconMap = {
+            info: DIALOG_VARIANT_ICON.INFO,
+            success: DIALOG_VARIANT_ICON.SUCCESS,
+            warning: DIALOG_VARIANT_ICON.WARNING,
+            danger: DIALOG_VARIANT_ICON.DANGER,
+            default: '',
+        };
+        if (iconMap[this.variant] === undefined)
+            return iconMap['default'];
+        return iconMap[this.variant];
+    }
+    getStyles() {
+        return {
+            'bds-dialog': true,
+            [`bds-dialog--${this.variant}`]: true,
+            [`bds-dialog--${this.size}`]: true,
+            [`bds-dialog--custom-size`]: this.width.length > 0 || this.height.length > 0,
+        };
+    }
+    getFixedSize() {
+        return {
+            ...(this.width && { '--bds-dialog-width': `${this.width}px` }),
+            ...(this.height && { '--bds-dialog-height': `${this.height}px` }),
+        };
+    }
+    getHeaderLeftElement() {
+        return (this.isHeaderLeftVisible && (h("div", { class: "bds-dialog__header-left" }, this.getVariantIcon() && (h("em", { "aria-hidden": "true", class: `bds-dialog__variant-icon ${this.getVariantIcon()}` })), this.titleDialog && (h("span", { id: "bds-dialog-title", class: "bds-dialog__title" }, this.titleDialog)))));
+    }
+    getHeaderRightElement() {
+        return (this.isHeaderRightVisible && (h("div", { class: "bds-dialog__header-right" }, this.maximizable && (h("bds-button", { "aria-label": "maximize", type: "button", onBdsClick: () => this.handleMaximize() }, h("em", { class: "bds-icon-arrows-out" }))), this.closable && (h("bds-button", { "aria-label": "close", type: "button", onBdsClick: () => this.closeElement() }, h("em", { class: "bds-icon-close" }))))));
+    }
+    render() {
+        const inheritedAriaAttr = this.inheritedAttributes;
+        return (h("dialog", { key: '0cc772f12b48d93bf8304597580157400846eb3a', onClick: e => this.handleBackdropClick(e), onKeyDown: e => this.handleKeydown(e), onTransitionEnd: this.onDialogTransitionEnd, ref: el => {
+                if (el !== undefined)
+                    this.dialogElement = el;
+            }, style: { ...this.getFixedSize() }, ...(this.titleDialog.length > 0 && { 'aria-labelledby': 'bds-dialog-title' }), ...inheritedAriaAttr }, h("div", { key: '43fe62c1ddf4537008058d4e1e178a164db98d45', class: this.getStyles() }, this.layout !== DIALOG_LAYOUT.HEADERLESS && (h("div", { key: '2404606784ae0f915191d5994716eaef6682ba9f', class: "bds-dialog__header" }, this.getHeaderLeftElement(), this.getHeaderRightElement())), h("div", { key: 'fe00d0e4ebf041a2734d40245c098ecfd80deb0b', class: `bds-dialog__body ${this.contentPadding === 'none' ? 'bds-dialog--no-padding' : ''}` }, h("slot", { key: 'd00c4e8bd26f392003e0de17551177615d26b74a' })), this.layout !== DIALOG_LAYOUT.FOOTERLESS && (h("div", { key: 'ce63e120119b918e0ec1b1d55a71ce2ef11ed4d9', class: "bds-dialog__footer" }, h("slot", { key: 'ffd76edb35b7fcfd68861d0364e9f94059f5da92', name: "footer" }))))));
+    }
+    get el() { return getElement(this); }
+    static get watchers() { return {
+        "active": [{
+                "handleIsOpenChange": 0
+            }]
+    }; }
+};
+BdsDialog.style = bdsDialogCss();
+
+export { BdsDialog as bds_dialog };