@xlabs-store/core 0.0.1

package/dist/collection/components/x-popconfirm/x-popconfirm.js

@@ -0,0 +1,355 @@
+import { Host, h } from "@stencil/core";
+import { PortalController } from "../x-portal";
+import { translate } from "../../locales/locale.service";
+export class XPopconfirm {
+    /**
+     * Host element reference.
+     */
+    el;
+    /**
+     * Title of the confirmation.
+     * @example
+     * <x-popconfirm confirmTitle="Delete?"></x-popconfirm>
+     */
+    confirmTitle;
+    /**
+     * OK button text.
+     * @example
+     * <x-popconfirm okText="OK"></x-popconfirm>
+     */
+    okText = translate('Popconfirm.okText', {}, 'OK');
+    /**
+     * Cancel button text.
+     * @example
+     * <x-popconfirm cancelText="Cancel"></x-popconfirm>
+     */
+    cancelText = translate('Popconfirm.cancelText', {}, 'Cancel');
+    /**
+     * Placement of the popconfirm.
+     * @example
+     * <x-popconfirm placement="bottom"></x-popconfirm>
+     */
+    placement = 'top';
+    /**
+     * Disable popconfirm trigger.
+     * @example
+     * <x-popconfirm disabled></x-popconfirm>
+     */
+    disabled = false;
+    /**
+     * Visible state of popconfirm.
+     */
+    visible = false;
+    /**
+     * Emitted when confirm button is clicked.
+     * @example
+     * <x-popconfirm onXConfirm={() => {}}></x-popconfirm>
+     */
+    xConfirm;
+    /**
+     * Emitted when cancel button is clicked.
+     * @example
+     * <x-popconfirm onXCancel={() => {}}></x-popconfirm>
+     */
+    xCancel;
+    portalInstance = null;
+    triggerEl = null;
+    handleWindowClick(ev) {
+        if (!this.el.contains(ev.target) && !this.isClickInPortal(ev.target)) {
+            this.visible = false;
+            this.updatePortal();
+        }
+    }
+    isClickInPortal(target) {
+        const portalEl = this.portalInstance?.getElement();
+        return portalEl ? portalEl.contains(target) : false;
+    }
+    /**
+     * Toggle popconfirm visibility.
+     * @returns void
+     * @example
+     * <x-popconfirm></x-popconfirm>
+     */
+    toggle() {
+        if (this.disabled)
+            return;
+        this.visible = !this.visible;
+        this.updatePortal();
+    }
+    /**
+     * Emit confirm and close.
+     *
+     * Flow:
+     * 1. Emits `xConfirm` event.
+     * 2. Sets `visible` to false.
+     * 3. Updates portal (closes it).
+     *
+     * @returns void
+     * @example
+     * <x-popconfirm onXConfirm={() => {}}></x-popconfirm>
+     */
+    handleConfirm() {
+        this.xConfirm.emit();
+        this.visible = false;
+        this.updatePortal();
+    }
+    /**
+     * Emit cancel and close.
+     * @returns void
+     * @example
+     * <x-popconfirm onXCancel={() => {}}></x-popconfirm>
+     */
+    handleCancel() {
+        this.xCancel.emit();
+        this.visible = false;
+        this.updatePortal();
+    }
+    getTriggerEl() {
+        if (!this.triggerEl) {
+            this.triggerEl = this.el.shadowRoot?.querySelector('.x-popconfirm-trigger');
+        }
+        return this.triggerEl;
+    }
+    buildPopconfirmContent() {
+        const popconfirmContent = document.createElement('x-popconfirm-content');
+        // Set properties
+        popconfirmContent.confirmTitle = this.confirmTitle;
+        popconfirmContent.okText = this.okText;
+        popconfirmContent.cancelText = this.cancelText;
+        popconfirmContent.placement = this.placement;
+        popconfirmContent.hidden = !this.visible;
+        popconfirmContent.confirmCallback = () => this.handleConfirm();
+        popconfirmContent.cancelCallback = () => this.handleCancel();
+        return popconfirmContent;
+    }
+    updatePortal() {
+        if (!this.visible) {
+            if (this.portalInstance) {
+                this.portalInstance.destroy();
+                this.portalInstance = null;
+            }
+            return;
+        }
+        const contentElement = this.buildPopconfirmContent();
+        if (!this.portalInstance) {
+            this.portalInstance = PortalController.create({
+                open: this.visible,
+                target: this.getTriggerEl(),
+                placement: this.placement,
+                zIndex: 1060,
+                offset: 8, // arrow size + gap
+                content: contentElement,
+            });
+        }
+        else {
+            this.portalInstance.update({
+                open: this.visible,
+                target: this.getTriggerEl(),
+                placement: this.placement,
+                offset: 8,
+                content: contentElement,
+            });
+        }
+    }
+    disconnectedCallback() {
+        if (this.portalInstance) {
+            this.portalInstance.destroy();
+            this.portalInstance = null;
+        }
+    }
+    /**
+     * Render trigger wrapper for popconfirm.
+     * @returns JSX.Element
+     * @example
+     * <x-popconfirm confirmTitle="Confirm?">
+     *   <x-button>Delete</x-button>
+     * </x-popconfirm>
+     */
+    render() {
+        return (h(Host, { key: 'c4909ed4a24ea4389cd762f70a827b88bb248520', class: "x-popconfirm" }, h("div", { key: 'c01729db23741adf1932b85263f25ce0b99dd1fe', class: "x-popconfirm-trigger", onClick: () => this.toggle() }, h("slot", { key: '2720dfa117d98f4229dcf163c903bc21a71c9c8f' }))));
+    }
+    static get is() { return "x-popconfirm"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["x-popconfirm.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["x-popconfirm.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "confirmTitle": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-popconfirm confirmTitle=\"Delete?\"></x-popconfirm>"
+                        }],
+                    "text": "Title of the confirmation."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "confirm-title"
+            },
+            "okText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-popconfirm okText=\"OK\"></x-popconfirm>"
+                        }],
+                    "text": "OK button text."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "ok-text",
+                "defaultValue": "translate('Popconfirm.okText', {}, 'OK')"
+            },
+            "cancelText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-popconfirm cancelText=\"Cancel\"></x-popconfirm>"
+                        }],
+                    "text": "Cancel button text."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "cancel-text",
+                "defaultValue": "translate('Popconfirm.cancelText', {}, 'Cancel')"
+            },
+            "placement": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'top' | 'topLeft' | 'topRight' | 'bottom' | 'bottomLeft' | 'bottomRight' | 'left' | 'leftTop' | 'leftBottom' | 'right' | 'rightTop' | 'rightBottom'",
+                    "resolved": "\"bottom\" | \"bottomLeft\" | \"bottomRight\" | \"left\" | \"leftBottom\" | \"leftTop\" | \"right\" | \"rightBottom\" | \"rightTop\" | \"top\" | \"topLeft\" | \"topRight\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-popconfirm placement=\"bottom\"></x-popconfirm>"
+                        }],
+                    "text": "Placement of the popconfirm."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "placement",
+                "defaultValue": "'top'"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-popconfirm disabled></x-popconfirm>"
+                        }],
+                    "text": "Disable popconfirm trigger."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "visible": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "xConfirm",
+                "name": "xConfirm",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-popconfirm onXConfirm={() => {}}></x-popconfirm>"
+                        }],
+                    "text": "Emitted when confirm button is clicked."
+                },
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                }
+            }, {
+                "method": "xCancel",
+                "name": "xCancel",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-popconfirm onXCancel={() => {}}></x-popconfirm>"
+                        }],
+                    "text": "Emitted when cancel button is clicked."
+                },
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "el"; }
+    static get listeners() {
+        return [{
+                "name": "click",
+                "method": "handleWindowClick",
+                "target": "window",
+                "capture": false,
+                "passive": false
+            }];
+    }
+}