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

package/dist/collection/components/overlays/bds-dialog/bds-dialog.js

@@ -0,0 +1,667 @@
+import { Mixin, h } from "@stencil/core";
+import { backdropMixin } from "../../../mixins/index";
+import { inheritAriaAttributes, validatePropValue } from "../../../utils/index";
+import { DIALOG_CONTENT_PADDING, DIALOG_LAYOUT, DIALOG_SIZES, DIALOG_VARIANT, DIALOG_VARIANT_ICON, } from "./types";
+/**
+ * Modal dialog component for displaying content in an overlay.
+ *
+ * @summary Modal overlay for alerts, forms, and confirmations with customizable layout and behavior.
+ *
+ * @slot - Main content of the dialog body.
+ * @slot footer - Content for the dialog footer (e.g. action buttons).
+ *
+ * @attr {boolean} active - Controls dialog visibility.
+ * @attr {boolean} prevent-close - Disables closing the dialog.
+ * @attr {string} layout - Layout type: 'default', 'headerless', or 'footerless'.
+ * @attr {string} content-padding - Content padding: 'default' or 'none'.
+ * @attr {boolean} backdrop-close - Close on backdrop click.
+ * @attr {boolean} escape-close - Close on Escape key.
+ * @attr {string} size - Dialog size: 'sm', 'md', 'lg', or 'full'.
+ * @attr {string} variant - Visual variant: 'default', 'info', 'success', 'warning', or 'danger'.
+ * @attr {string} title-dialog - Dialog title text.
+ * @attr {boolean} maximizable - Show maximize button.
+ * @attr {boolean} closable - Show close button.
+ * @attr {string} width - Custom width for the dialog.
+ * @attr {string} height - Custom height for the dialog.
+ *
+ * @property {boolean} active - Controls whether the dialog is open.
+ * @property {boolean} preventClose - Disables closing the dialog.
+ * @property {string} height - Custom height for the dialog.
+ * @property {string} width - Custom width for the dialog.
+ * @property {string} layout - Layout type: 'default', 'headerless', or 'footerless'.
+ * @property {string} contentPadding - Content padding: 'default' or 'none'.
+ * @property {boolean} backdropClose - Close dialog when clicking the backdrop.
+ * @property {boolean} escapeClose - Close dialog when pressing Escape.
+ * @property {string} size - Dialog size: 'sm', 'md', 'lg', or 'full'.
+ * @property {string} variant - Visual variant: 'default', 'info', 'success', 'warning', or 'danger'.
+ * @property {string} titleDialog - Title text displayed in the header.
+ * @property {boolean} maximizable - Show maximize button.
+ * @property {boolean} closable - Hide the close button in the header.
+ *
+ * @fires bdsOpen - Emitted when the dialog opens.
+ * @fires bdsClose - Emitted when the dialog closes.
+ * @fires bdsMaximize - Emitted when the maximize button is clicked.
+ *
+ * @cssprop --bds-dialog-width - Custom width for the dialog.
+ * @cssprop --bds-dialog-height - Custom height for the dialog.
+ */
+export class BdsDialog extends Mixin(backdropMixin) {
+    constructor() {
+        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();
+        };
+        super();
+    }
+    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" }))))));
+    }
+    static get is() { return "bds-dialog"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["bds-dialog.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["bds-dialog.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "active": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "IDialog['active']",
+                    "resolved": "boolean",
+                    "references": {
+                        "IDialog": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/overlays/bds-dialog/types/index.ts::IDialog",
+                            "referenceLocation": "IDialog"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Controls whether the dialog is open."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "active",
+                "defaultValue": "false"
+            },
+            "preventClose": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "IDialog['preventClose']",
+                    "resolved": "boolean",
+                    "references": {
+                        "IDialog": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/overlays/bds-dialog/types/index.ts::IDialog",
+                            "referenceLocation": "IDialog"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Controls whether the dialog is closable."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "prevent-close",
+                "defaultValue": "false"
+            },
+            "height": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "IDialog['height']",
+                    "resolved": "string",
+                    "references": {
+                        "IDialog": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/overlays/bds-dialog/types/index.ts::IDialog",
+                            "referenceLocation": "IDialog"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Dialog custom height"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "height",
+                "defaultValue": "''"
+            },
+            "width": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "IDialog['width']",
+                    "resolved": "string",
+                    "references": {
+                        "IDialog": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/overlays/bds-dialog/types/index.ts::IDialog",
+                            "referenceLocation": "IDialog"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Dialog custom width"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "width",
+                "defaultValue": "''"
+            },
+            "layout": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "IDialog['layout']",
+                    "resolved": "\"default\" | \"footerless\" | \"headerless\"",
+                    "references": {
+                        "IDialog": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/overlays/bds-dialog/types/index.ts::IDialog",
+                            "referenceLocation": "IDialog"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Layout type: 'default', 'headerless', or 'footerless'."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "layout",
+                "defaultValue": "DIALOG_LAYOUT.DEFAULT"
+            },
+            "contentPadding": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "IDialog['contentPadding']",
+                    "resolved": "\"default\" | \"none\"",
+                    "references": {
+                        "IDialog": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/overlays/bds-dialog/types/index.ts::IDialog",
+                            "referenceLocation": "IDialog"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Content padding: 'default' or 'none'."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "content-padding",
+                "defaultValue": "DIALOG_CONTENT_PADDING.DEFAULT"
+            },
+            "backdropClose": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "IDialog['backdropClose']",
+                    "resolved": "boolean",
+                    "references": {
+                        "IDialog": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/overlays/bds-dialog/types/index.ts::IDialog",
+                            "referenceLocation": "IDialog"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Close dialog when clicking the backdrop."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "backdrop-close",
+                "defaultValue": "false"
+            },
+            "escapeClose": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "IDialog['escapeClose']",
+                    "resolved": "boolean",
+                    "references": {
+                        "IDialog": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/overlays/bds-dialog/types/index.ts::IDialog",
+                            "referenceLocation": "IDialog"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Close dialog when pressing Escape."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "escape-close",
+                "defaultValue": "false"
+            },
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "IDialog['size']",
+                    "resolved": "\"full\" | \"lg\" | \"md\" | \"sm\"",
+                    "references": {
+                        "IDialog": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/overlays/bds-dialog/types/index.ts::IDialog",
+                            "referenceLocation": "IDialog"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Dialog size: 'small', 'medium', 'large', or 'full'."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "size",
+                "defaultValue": "DIALOG_SIZES.MEDIUM"
+            },
+            "variant": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "IDialog['variant']",
+                    "resolved": "\"danger\" | \"default\" | \"info\" | \"success\" | \"warning\"",
+                    "references": {
+                        "IDialog": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/overlays/bds-dialog/types/index.ts::IDialog",
+                            "referenceLocation": "IDialog"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Visual variant: 'default', 'info', 'success', 'warning', or 'danger'."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "variant",
+                "defaultValue": "DIALOG_VARIANT.DEFAULT"
+            },
+            "titleDialog": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "IDialog['titleDialog']",
+                    "resolved": "string",
+                    "references": {
+                        "IDialog": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/overlays/bds-dialog/types/index.ts::IDialog",
+                            "referenceLocation": "IDialog"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Title text displayed in the header."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "title-dialog",
+                "defaultValue": "''"
+            },
+            "maximizable": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "IDialog['maximizable']",
+                    "resolved": "boolean",
+                    "references": {
+                        "IDialog": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/overlays/bds-dialog/types/index.ts::IDialog",
+                            "referenceLocation": "IDialog"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Show maximize button to toggle full-screen."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "maximizable",
+                "defaultValue": "false"
+            },
+            "closable": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "IDialog['closable']",
+                    "resolved": "boolean",
+                    "references": {
+                        "IDialog": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/overlays/bds-dialog/types/index.ts::IDialog",
+                            "referenceLocation": "IDialog"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Hide the close button in the header."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "closable",
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "bdsOpen",
+                "name": "bdsOpen",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the dialog opens."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "bdsClose",
+                "name": "bdsClose",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the dialog closes."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "bdsMaximize",
+                "name": "bdsMaximize",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the dialog maximize button is clicked."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "open": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Opens the dialog programmatically.\nThis method triggers the show functionality to display the dialog.",
+                    "tags": []
+                }
+            },
+            "close": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Closes the dialog programmatically.\nThis method triggers the close functionality to hide the dialog.",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "active",
+                "methodName": "handleIsOpenChange"
+            }];
+    }
+}

package/dist/collection/components/overlays/bds-dialog/types/IDialog.js

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