bromcom-ui-next 0.1.5 → 0.1.7

package/dist/collection/components/pop-confirm/pop-confirm.component.js

@@ -0,0 +1,629 @@
+import { h, Fragment } from "@stencil/core";
+import { computePosition, flip, shift, offset, arrow } from "@floating-ui/dom";
+import { tv } from "tailwind-variants";
+// Status icons for different states
+const statusIcons = {
+    info: 'fa-solid fa-circle-info',
+    success: 'fa-solid fa-circle-check',
+    warning: 'fa-solid fa-triangle-exclamation',
+    error: 'fa-solid fa-circle-x',
+};
+/**
+ * @component BcmPopConfirm
+ * @description A floating confirmation pop-up component that prompts users for action confirmation, triggered by click or hover events.
+ * Offers customizable header, body content, and footer areas through slots, with accessibility and positioning features.
+ *
+ * @example Basic usage
+ * <bcm-pop-confirm target-id="trigger-btn" placement="right" header-text="Confirm Action" description="Are you sure?" confirm-text="Yes" cancel-text="No" status="warning"></bcm-pop-confirm>
+ *
+ * @example With all slots and custom styling
+ * <bcm-pop-confirm target-id="trigger-btn" placement="left" header-text="Delete Item" description="Are you sure you want to delete this item?" confirm-text="Delete" cancel-text="Cancel" status="error" arrow-color="#ffffff">
+ *   <span slot="header">Custom Header Text</span>
+ *   <span slot="body">Additional details here</span>
+ *   <span slot="footer">Custom Footer Action</span>
+ * </bcm-pop-confirm>
+ *
+ * @example Event handling
+ * // Listen to confirmation events
+ * const popConfirm = document.querySelector('bcm-pop-confirm');
+ * popConfirm.addEventListener('bcmConfirm', () => {
+ *   console.log('User confirmed the action!');
+ * });
+ * popConfirm.addEventListener('bcmCancel', () => {
+ *   console.log('User canceled the action!');
+ * });
+ *
+ * // Programmatically control pop-up
+ * await popConfirm.show(); // Show the pop-up
+ * await popConfirm.hide(); // Hide the pop-up
+ *
+ * @prop {string} arrowColor - The color of the arrow pointing to the trigger element (default: 'var(--bcm-ui-color-background-basic-panel)')
+ * @prop {string} cancelText - Text displayed on the cancel button (default: 'Cancel')
+ * @prop {string} confirmText - Text displayed on the confirm button (default: 'Yes')
+ * @prop {string} description - The description or body content of the pop-up (default: '')
+ * @prop {string} headerText - The header text displayed at the top of the pop-up (default: '')
+ * @prop {Placement} placement - The placement position of the pop-up relative to the trigger (default: 'right')
+ * @prop {('small' | 'medium' | 'large')} size - The size of the pop-up, determining its dimensions (default: 'medium')
+ * @prop {('info' | 'error' | 'warning' | 'success' | 'default')} status - The status of the pop-up, affecting its icon and color (default: 'info')
+ * @prop {boolean} statusIcon - Whether to display a status icon based on the `status` prop (default: true)
+ * @prop {string} targetId - The ID of the trigger element (e.g., a button) that opens the pop-up
+ *
+ * @slot header - Custom content for the header area (optional)
+ * @slot body - Custom content for the main body area (optional, falls back to `description`)
+ * @slot footer - Custom content for the footer area (optional)
+ *
+ * @event {EventEmitter<void>} bcmConfirm - Emitted when the user confirms the action in the pop-up
+ * @event {EventEmitter<void>} bcmCancel - Emitted when the user cancels the action in the pop-up
+ *
+ * @csspart container - The root container element of the pop-up
+ * @csspart header - The header section with title and close icon
+ * @csspart content - The main content section of the pop-up
+ * @csspart footer - The footer section with confirm/cancel buttons
+ * @csspart arrow - The positioning arrow pointing to the trigger
+ *
+ * @css {string} --popover-radius - Border radius of the pop-up (default: defined in CSS)
+ * @css {string} --popover-bg - Background color of the pop-up
+ * @css {string} --text-color - Text color of the pop-up based on status
+ *
+ * @methods
+ * show() - Programmatically shows the pop-up
+ * hide() - Programmatically hides the pop-up
+ */
+export class PopConfirm {
+    constructor() {
+        /**
+         * The color of the arrow pointing to the trigger element.
+         * Can be a CSS custom property or a specific color value.
+         * @default 'var(--bcm-ui-color-background-basic-panel)'
+         */
+        this.arrowColor = 'var(--bcm-ui-color-background-basic-panel)'; // Default color
+        /**
+         * The text displayed on the cancel button.
+         * @default 'Cancel'
+         */
+        this.cancelText = 'Cancel';
+        /**
+         * The text displayed on the confirm button.
+         * @default 'Yes'
+         */
+        this.confirmText = 'Yes';
+        /**
+         * The description or body content of the pop-up.
+         * @default ''
+         */
+        this.description = '';
+        /**
+         * The header text displayed at the top of the pop-up.
+         * @default ''
+         */
+        this.headerText = '';
+        /**
+         * The placement position of the pop-up relative to the trigger element.
+         * @default 'bottom'
+         */
+        this.placement = 'bottom';
+        /**
+         * The size of the pop-up, determining its dimensions and padding.
+         * @default 'medium'
+         */
+        this.size = 'medium';
+        /**
+         * The status of the pop-up, affecting its icon and color scheme.
+         * @default 'info'
+         */
+        this.status = 'info';
+        /**
+         * Whether to display a status icon based on the `status` prop.
+         * @default true
+         */
+        this.statusIcon = true;
+        // State variables
+        /**
+         * Indicates whether the pop-up is currently open or closed.
+         * @default false
+         */
+        this.isOpen = false;
+        /**
+         * Handles the click event on the trigger element to open the pop-up.
+         * Prevents default behavior and propagation, then opens the pop-up if it's closed.
+         * @param event The mouse event triggering the action.
+         */
+        this.handleTriggerClick = (event) => {
+            event.preventDefault();
+            event.stopPropagation();
+            if (!this.isOpen) {
+                this.isOpen = true;
+                requestAnimationFrame(() => {
+                    this.updatePosition();
+                });
+            }
+        };
+        /**
+         * Handles the confirm button click, closing the pop-up and emitting the confirm event.
+         * Prevents default behavior and propagation.
+         * @param event The mouse event triggering the action.
+         */
+        this.handleConfirm = (event) => {
+            event.preventDefault();
+            event.stopPropagation();
+            this.isOpen = false;
+            this.bcmConfirm.emit();
+        };
+        /**
+         * Handles the cancel button click, closing the pop-up and emitting the cancel event.
+         * Prevents default behavior and propagation.
+         * @param event The mouse event triggering the action.
+         */
+        this.handleCancel = (event) => {
+            event.preventDefault();
+            event.stopPropagation();
+            this.isOpen = false;
+            this.bcmCancel.emit();
+        };
+        /**
+         * Updates the position of the pop-up relative to the trigger element using Floating UI.
+         * Ensures the pop-up stays within viewport bounds and positions the arrow correctly.
+         */
+        this.updatePosition = async () => {
+            if (!this.triggerElement || !this.popoverElement || !this.arrowElement)
+                return;
+            const { x, y, placement, middlewareData } = await computePosition(this.triggerElement, this.popoverElement, {
+                placement: this.placement,
+                middleware: [offset(12), flip({ fallbackPlacements: ['top', 'left', 'bottom', 'right'] }), shift({ padding: 8 }), arrow({ element: this.arrowElement })],
+            });
+            this.currentPlacement = placement;
+            Object.assign(this.popoverElement.style, {
+                left: `${x}px`,
+                top: `${y}px`,
+            });
+            const { x: arrowX, y: arrowY } = middlewareData.arrow || { x: 0, y: 0 };
+            const basePlacement = placement.split('-')[0];
+            const staticSide = {
+                top: 'bottom',
+                right: 'left',
+                bottom: 'top',
+                left: 'right',
+            }[basePlacement];
+            Object.assign(this.arrowElement.style, {
+                left: arrowX != null ? `${arrowX}px` : '',
+                top: arrowY != null ? `${arrowY}px` : '',
+                [staticSide]: ['top', 'bottom'].includes(basePlacement) ? '-8px' : '-12px',
+            });
+        };
+        /**
+         * Defines Tailwind Variants classes for the pop-up's structure and styling.
+         * Supports different sizes and generates dynamic class names.
+         */
+        this.classes = tv({
+            slots: {
+                container: 'absolute bcm-ui-element flex flex-col shadow-2 rounded-[--popover-radius] bg-[--popover-bg] z-[9999] w-full',
+                header: 'flex justify-between items-center',
+                headerLeftContent: 'flex items-center gap-2 text-size-inherit text-[--text-color]',
+                closeIconArea: 'flex flex-row gap-2 size-6 items-center justify-center hover:bg-gray-100 rounded-full cursor-pointer text-size-inherit',
+                titleContainer: '!text-color-header font-semibold',
+                footer: 'flex flex-row justify-end gap-2',
+            },
+            variants: {
+                size: {
+                    small: {
+                        container: 'text-size-4 max-w-64 p-4 gap-4',
+                        header: 'text-size-4',
+                        footer: 'text-size-4',
+                        titleContainer: 'text-size-5',
+                        headerLeftContent: 'gap-2',
+                    },
+                    medium: {
+                        container: 'text-size-5 max-w-80 gap-6 p-6',
+                        header: 'text-size-5',
+                        footer: 'text-size-5',
+                        titleContainer: 'text-size-6',
+                        headerLeftContent: 'gap-2.5',
+                    },
+                    large: {
+                        container: 'text-size-6 max-w-96 p-8 gap-8',
+                        header: 'text-size-6',
+                        footer: 'text-size-6',
+                        titleContainer: 'text-size-7',
+                        headerLeftContent: 'gap-3',
+                    },
+                },
+            },
+            defaultVariants: {
+                size: 'medium',
+            },
+        });
+    }
+    /**
+     * Lifecycle method called when the component is loaded.
+     * Initializes the trigger element and attaches a click event listener.
+     */
+    componentDidLoad() {
+        this.triggerElement = document.getElementById(this.targetId);
+        if (!this.triggerElement) {
+            console.warn(`Target element with ID '${this.targetId}' not found.`);
+            return;
+        }
+        this.triggerElement.addEventListener('click', this.handleTriggerClick);
+    }
+    /**
+     * Programmatically shows the pop-up by setting `isOpen` to true and updating its position.
+     * @returns A promise that resolves when the pop-up is shown.
+     */
+    async show() {
+        this.isOpen = true;
+        requestAnimationFrame(() => {
+            this.updatePosition();
+        });
+    }
+    /**
+     * Programmatically hides the pop-up by setting `isOpen` to false.
+     * @returns A promise that resolves when the pop-up is hidden.
+     */
+    async hide() {
+        this.isOpen = false;
+    }
+    /**
+     * Returns the dynamic styles for the pop-up, including text and arrow colors.
+     * @returns An object containing CSS custom properties.
+     */
+    get popoverStyle() {
+        return {
+            '--text-color': `var(--bcm-ui-color-text-${this.status})`,
+            '--arrow-color': this.arrowColor,
+        };
+    }
+    /**
+     * Lifecycle method called when the component is removed from the DOM.
+     * Cleans up the event listener to prevent memory leaks.
+     */
+    disconnectedCallback() {
+        if (this.triggerElement) {
+            this.triggerElement.removeEventListener('click', this.handleTriggerClick);
+        }
+    }
+    /**
+     * Renders the pop-up component, showing it only when `isOpen` is true.
+     * Includes header, main content, and footer sections with dynamic styling and slots for customization.
+     * @returns JSX.Element representing the pop-up or an empty fragment if closed.
+     */
+    render() {
+        var _a;
+        const { container, header, footer, headerLeftContent, closeIconArea, titleContainer } = this.classes({
+            size: this.size,
+        });
+        return (h(Fragment, { key: '9c275c728ff7cabce1a564cf1f062b65c732c2f7' }, this.isOpen && (h("div", { key: '04b20e5773d7c2ce6a2bb4fbe2801bb0d775a425', role: "dialog", "aria-labelledby": "pop-confirm-title", style: this.popoverStyle, class: container(), ref: el => (this.popoverElement = el) }, h("div", { key: 'bff8a3617e2615efdfe24ff9e73bcad4b55e54ea', ref: el => (this.arrowElement = el), class: `arrow w-4 h-2 ${(_a = this.currentPlacement) !== null && _a !== void 0 ? _a : 'top'}` }), h("header", { key: 'fb7c440f138f4950dbfd0c6e473ab769d37e5e20', class: header() }, h("div", { key: 'ed166db8cf2ced87a0442af476037f0706ad5f67', class: headerLeftContent() }, this.statusIcon && h("bcm-icon", { key: '077dd2de165608062c49ad831c0d67488e5270de', "icon-name": statusIcons[this.status] }), h("span", { key: '4be735274dad1742b9cd956da5520eb922a9a817', class: titleContainer() }, this.headerText), h("slot", { key: '59cec868d0e73e3d8f0577fc7528a6332998b93a', name: "header" })), h("div", { key: '225623a00d44c07bfdd6611b7ee98a7fb49ba008', class: closeIconArea(), onClick: this.handleCancel }, h("bcm-icon", { key: '6b096f888794673d678d8edae338edc50485df57', "icon-name": "far fa-times" }))), h("main", { key: '4ff8930d218641bb7f3a722ca5a065f7df73a40e', class: "flex-1 mx-auto font-sans text-pretty" }, h("slot", { key: '0058d440b9e703ff30d2c41aee14d4122d82aeaa', name: "body" }, this.description)), h("footer", { key: '6ffcd9df426bf280b77d2cfb39552647115253ec', class: footer() }, h("bcm-button", { key: '997610d1ca83cf3357d0a8d3f1102e25d2966240', kind: "outline", size: this.size, onClick: this.handleCancel }, this.cancelText), h("bcm-button", { key: 'c1f633f3e8837b724dd9e26580a3c7260543e8b4', size: this.size, status: this.status, kind: "primary", onClick: this.handleConfirm }, this.confirmText), h("slot", { key: '2f9d5ab32c2e62bcdad247ab4ce93df53358f843', name: "footer" }))))));
+    }
+    static get is() { return "bcm-pop-confirm"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["pop-confirm.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["pop-confirm.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "arrowColor": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "'var(--bcm-ui-color-background-basic-panel)'"
+                        }],
+                    "text": "The color of the arrow pointing to the trigger element.\nCan be a CSS custom property or a specific color value."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "arrow-color",
+                "reflect": false,
+                "defaultValue": "'var(--bcm-ui-color-background-basic-panel)'"
+            },
+            "cancelText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "'Cancel'"
+                        }],
+                    "text": "The text displayed on the cancel button."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "cancel-text",
+                "reflect": false,
+                "defaultValue": "'Cancel'"
+            },
+            "confirmText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "'Yes'"
+                        }],
+                    "text": "The text displayed on the confirm button."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "confirm-text",
+                "reflect": false,
+                "defaultValue": "'Yes'"
+            },
+            "description": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "''"
+                        }],
+                    "text": "The description or body content of the pop-up."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "description",
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "headerText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "''"
+                        }],
+                    "text": "The header text displayed at the top of the pop-up."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "header-text",
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "placement": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "Placement",
+                    "resolved": "\"bottom\" | \"bottom-end\" | \"bottom-start\" | \"left\" | \"left-end\" | \"left-start\" | \"right\" | \"right-end\" | \"right-start\" | \"top\" | \"top-end\" | \"top-start\"",
+                    "references": {
+                        "Placement": {
+                            "location": "import",
+                            "path": "@floating-ui/dom",
+                            "id": "node_modules::Placement"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "'bottom'"
+                        }],
+                    "text": "The placement position of the pop-up relative to the trigger element."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "placement",
+                "reflect": false,
+                "defaultValue": "'bottom'"
+            },
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'small' | 'medium' | 'large'",
+                    "resolved": "\"large\" | \"medium\" | \"small\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "'medium'"
+                        }],
+                    "text": "The size of the pop-up, determining its dimensions and padding."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "size",
+                "reflect": false,
+                "defaultValue": "'medium'"
+            },
+            "status": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'info' | 'error' | 'warning' | 'success'",
+                    "resolved": "\"error\" | \"info\" | \"success\" | \"warning\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "'info'"
+                        }],
+                    "text": "The status of the pop-up, affecting its icon and color scheme."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "status",
+                "reflect": false,
+                "defaultValue": "'info'"
+            },
+            "statusIcon": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "true"
+                        }],
+                    "text": "Whether to display a status icon based on the `status` prop."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "status-icon",
+                "reflect": false,
+                "defaultValue": "true"
+            },
+            "targetId": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The ID of the trigger element (e.g., a button) that opens the pop-up."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "target-id",
+                "reflect": false
+            }
+        };
+    }
+    static get states() {
+        return {
+            "isOpen": {},
+            "currentPlacement": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "bcmConfirm",
+                "name": "bcmConfirm",
+                "bubbles": false,
+                "cancelable": true,
+                "composed": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Emits an event when the user confirms the action in the pop-up."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "bcmCancel",
+                "name": "bcmCancel",
+                "bubbles": false,
+                "cancelable": true,
+                "composed": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Emits an event when the user cancels the action in the pop-up."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "show": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Programmatically shows the pop-up by setting `isOpen` to true and updating its position.",
+                    "tags": [{
+                            "name": "returns",
+                            "text": "A promise that resolves when the pop-up is shown."
+                        }]
+                }
+            },
+            "hide": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Programmatically hides the pop-up by setting `isOpen` to false.",
+                    "tags": [{
+                            "name": "returns",
+                            "text": "A promise that resolves when the pop-up is hidden."
+                        }]
+                }
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+}
+//# sourceMappingURL=pop-confirm.component.js.map