@xlabs-store/core 0.0.1

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

@@ -0,0 +1,683 @@
+import { Host, h } from "@stencil/core";
+import { PortalController } from "../x-portal/portal-controller";
+import { translate } from "../../locales/locale.service";
+/**
+ * @component x-modal
+ * @description Modal dialog component using PortalController for rendering
+ */
+/**
+ * Modal dialog component using PortalController for rendering.
+ */
+export class XModal {
+    /**
+     * Host element reference for slot extraction.
+     */
+    el;
+    /**
+     * Whether the modal is visible.
+     * @example
+     * <x-modal visible></x-modal>
+     */
+    visible = false;
+    /**
+     * Modal title.
+     * @example
+     * <x-modal modalTitle="Confirm"></x-modal>
+     */
+    modalTitle;
+    /**
+     * Width of the modal.
+     * @example
+     * <x-modal width={600}></x-modal>
+     */
+    width = 520;
+    /**
+     * Whether to show footer.
+     * @example
+     * <x-modal footer={false}></x-modal>
+     */
+    footer = true;
+    /**
+     * Whether to show close button.
+     * @example
+     * <x-modal closable={false}></x-modal>
+     */
+    closable = true;
+    /**
+     * Whether to show mask.
+     * @example
+     * <x-modal mask={false}></x-modal>
+     */
+    mask = true;
+    /**
+     * Whether clicking mask closes modal.
+     * @example
+     * <x-modal maskClosable={false}></x-modal>
+     */
+    maskClosable = true;
+    /**
+     * Whether to center the modal.
+     * @example
+     * <x-modal centered></x-modal>
+     */
+    centered = false;
+    /**
+     * OK button text.
+     * @example
+     * <x-modal okText="OK"></x-modal>
+     */
+    okText = translate('Modal.okText', {}, 'OK');
+    /**
+     * Cancel button text.
+     * @example
+     * <x-modal cancelText="Cancel"></x-modal>
+     */
+    cancelText = translate('Modal.cancelText', {}, 'Cancel');
+    /**
+     * OK button loading state.
+     * @example
+     * <x-modal okLoading></x-modal>
+     */
+    okLoading = false;
+    /**
+     * Cancel button loading state.
+     * @example
+     * <x-modal cancelLoading></x-modal>
+     */
+    cancelLoading = false;
+    /**
+     * OK button type.
+     * @example
+     * <x-modal okType="primary"></x-modal>
+     */
+    okType = 'primary';
+    /**
+     * Modal type (info, success, error, warning, confirm).
+     * @example
+     * <x-modal type="info"></x-modal>
+     */
+    type;
+    /**
+     * Event emitted when OK button is clicked.
+     * @example
+     * <x-modal onXOk={() => {}}></x-modal>
+     */
+    xOk;
+    /**
+     * Event emitted when Cancel button or modal is closed.
+     * @example
+     * <x-modal onXCancel={() => {}}></x-modal>
+     */
+    xCancel;
+    /**
+     * Portal instance for modal content.
+     */
+    portalInstance = null;
+    /**
+     * Create portal on initial visible state.
+     * @returns void
+     */
+    componentDidLoad() {
+        if (this.visible) {
+            this.updatePortal();
+        }
+    }
+    /**
+     * Cleanup portal on disconnect.
+     * @returns void
+     */
+    disconnectedCallback() {
+        this.destroyPortal();
+    }
+    handleVisibleChange() {
+        this.updatePortal();
+    }
+    handlePropsChange() {
+        if (this.visible) {
+            this.updatePortal();
+        }
+    }
+    /**
+     * Get body content from slot.
+     * @returns string
+     */
+    getBodyContent() {
+        const slot = this.el.shadowRoot?.querySelector('slot:not([name])');
+        if (slot) {
+            const nodes = slot.assignedNodes({ flatten: true });
+            return nodes.map(node => {
+                if (node.nodeType === Node.ELEMENT_NODE) {
+                    return node.outerHTML;
+                }
+                return node.textContent || '';
+            }).join('');
+        }
+        return '';
+    }
+    /**
+     * Get footer content from slot.
+     * @returns string
+     */
+    getFooterContent() {
+        const slot = this.el.shadowRoot?.querySelector('slot[name="footer"]');
+        if (slot) {
+            const nodes = slot.assignedNodes({ flatten: true });
+            if (nodes.length > 0) {
+                return nodes.map(node => {
+                    if (node.nodeType === Node.ELEMENT_NODE) {
+                        return node.outerHTML;
+                    }
+                    return node.textContent || '';
+                }).join('');
+            }
+        }
+        return '';
+    }
+    /**
+     * Build modal content element for portal.
+     *
+     * Flow:
+     * 1. Creates `x-modal-content` element.
+     * 2. Assigns all visual props (title, width, footer, etc.).
+     * 3. Injects body and footer content extracted from slots.
+     * 4. Attaches `xOk` and `xCancel` event listeners to forward events.
+     *
+     * @returns HTMLElement
+     */
+    buildModalElement() {
+        const modalEl = document.createElement('x-modal-content');
+        // Set properties
+        modalEl.modalTitle = this.modalTitle;
+        modalEl.width = this.width;
+        modalEl.footer = this.footer;
+        modalEl.closable = this.closable;
+        modalEl.mask = this.mask;
+        modalEl.maskClosable = this.maskClosable;
+        modalEl.centered = this.centered;
+        modalEl.okText = this.okText;
+        modalEl.cancelText = this.cancelText;
+        modalEl.okLoading = this.okLoading;
+        modalEl.cancelLoading = this.cancelLoading;
+        modalEl.okType = this.okType;
+        modalEl.type = this.type;
+        // Get slot content
+        modalEl.bodyContent = this.getBodyContent();
+        modalEl.footerContent = this.getFooterContent();
+        // Attach event listeners
+        modalEl.addEventListener('xOk', () => {
+            this.xOk.emit();
+        });
+        modalEl.addEventListener('xCancel', () => {
+            this.xCancel.emit();
+        });
+        return modalEl;
+    }
+    /**
+     * Update portal with modal content.
+     * @returns void
+     */
+    updatePortal() {
+        if (!this.visible) {
+            this.destroyPortal();
+            return;
+        }
+        // Build modal element
+        const modalElement = this.buildModalElement();
+        if (!this.portalInstance) {
+            // Create new portal instance
+            this.portalInstance = PortalController.create({
+                open: true,
+                zIndex: 1000,
+                content: modalElement,
+            });
+        }
+        else {
+            // Update existing portal
+            this.portalInstance.update({
+                open: true,
+                content: modalElement,
+            });
+        }
+    }
+    /**
+     * Destroy portal instance.
+     * @returns void
+     */
+    destroyPortal() {
+        if (this.portalInstance) {
+            this.portalInstance.destroy();
+            this.portalInstance = null;
+        }
+    }
+    /**
+     * Render hidden slots to capture content for portal.
+     * @returns JSX.Element
+     */
+    render() {
+        return (h(Host, { key: 'c3e46fc9b067f8d4700762b5bb0d284dc190c1e8', class: {
+                'x-modal': true,
+                'x-modal-open': this.visible,
+            } }, h("div", { key: 'd620493f845e4b86b29fa46b868dbab2d632908a', style: { display: 'none' } }, h("slot", { key: '202a7875383dfb9f3c6b5fc9a5183a916d0b9563' }), h("slot", { key: '10e85c6d0994bf249c3974bdb881efda16385702', name: "footer" }))));
+    }
+    static get is() { return "x-modal"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["x-modal.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["x-modal.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "visible": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-modal visible></x-modal>"
+                        }],
+                    "text": "Whether the modal is visible."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "visible",
+                "defaultValue": "false"
+            },
+            "modalTitle": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-modal modalTitle=\"Confirm\"></x-modal>"
+                        }],
+                    "text": "Modal title."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "modal-title"
+            },
+            "width": {
+                "type": "any",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | number",
+                    "resolved": "number | string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-modal width={600}></x-modal>"
+                        }],
+                    "text": "Width of the modal."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "width",
+                "defaultValue": "520"
+            },
+            "footer": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-modal footer={false}></x-modal>"
+                        }],
+                    "text": "Whether to show footer."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "footer",
+                "defaultValue": "true"
+            },
+            "closable": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-modal closable={false}></x-modal>"
+                        }],
+                    "text": "Whether to show close button."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "closable",
+                "defaultValue": "true"
+            },
+            "mask": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-modal mask={false}></x-modal>"
+                        }],
+                    "text": "Whether to show mask."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "mask",
+                "defaultValue": "true"
+            },
+            "maskClosable": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-modal maskClosable={false}></x-modal>"
+                        }],
+                    "text": "Whether clicking mask closes modal."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "mask-closable",
+                "defaultValue": "true"
+            },
+            "centered": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-modal centered></x-modal>"
+                        }],
+                    "text": "Whether to center the modal."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "centered",
+                "defaultValue": "false"
+            },
+            "okText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-modal okText=\"OK\"></x-modal>"
+                        }],
+                    "text": "OK button text."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "ok-text",
+                "defaultValue": "translate('Modal.okText', {}, 'OK')"
+            },
+            "cancelText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-modal cancelText=\"Cancel\"></x-modal>"
+                        }],
+                    "text": "Cancel button text."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "cancel-text",
+                "defaultValue": "translate('Modal.cancelText', {}, 'Cancel')"
+            },
+            "okLoading": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-modal okLoading></x-modal>"
+                        }],
+                    "text": "OK button loading state."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "ok-loading",
+                "defaultValue": "false"
+            },
+            "cancelLoading": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-modal cancelLoading></x-modal>"
+                        }],
+                    "text": "Cancel button loading state."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "cancel-loading",
+                "defaultValue": "false"
+            },
+            "okType": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'primary' | 'default' | 'dashed' | 'text' | 'link'",
+                    "resolved": "\"dashed\" | \"default\" | \"link\" | \"primary\" | \"text\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-modal okType=\"primary\"></x-modal>"
+                        }],
+                    "text": "OK button type."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "ok-type",
+                "defaultValue": "'primary'"
+            },
+            "type": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'info' | 'success' | 'error' | 'warning' | 'confirm'",
+                    "resolved": "\"confirm\" | \"error\" | \"info\" | \"success\" | \"warning\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-modal type=\"info\"></x-modal>"
+                        }],
+                    "text": "Modal type (info, success, error, warning, confirm)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "type"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "xOk",
+                "name": "xOk",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-modal onXOk={() => {}}></x-modal>"
+                        }],
+                    "text": "Event emitted when OK 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-modal onXCancel={() => {}}></x-modal>"
+                        }],
+                    "text": "Event emitted when Cancel button or modal is closed."
+                },
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "visible",
+                "methodName": "handleVisibleChange"
+            }, {
+                "propName": "modalTitle",
+                "methodName": "handlePropsChange"
+            }, {
+                "propName": "width",
+                "methodName": "handlePropsChange"
+            }, {
+                "propName": "footer",
+                "methodName": "handlePropsChange"
+            }, {
+                "propName": "closable",
+                "methodName": "handlePropsChange"
+            }, {
+                "propName": "mask",
+                "methodName": "handlePropsChange"
+            }, {
+                "propName": "maskClosable",
+                "methodName": "handlePropsChange"
+            }, {
+                "propName": "centered",
+                "methodName": "handlePropsChange"
+            }, {
+                "propName": "okText",
+                "methodName": "handlePropsChange"
+            }, {
+                "propName": "cancelText",
+                "methodName": "handlePropsChange"
+            }, {
+                "propName": "okLoading",
+                "methodName": "handlePropsChange"
+            }, {
+                "propName": "cancelLoading",
+                "methodName": "handlePropsChange"
+            }, {
+                "propName": "okType",
+                "methodName": "handlePropsChange"
+            }, {
+                "propName": "type",
+                "methodName": "handlePropsChange"
+            }];
+    }
+}

package/dist/collection/components/x-modal-content/index.js

@@ -0,0 +1 @@
+export * from './types';

package/dist/collection/components/x-modal-content/types.js

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