@xlabs-store/core 0.0.1

package/dist/esm/modal-service-C_e0SaFZ.js

@@ -0,0 +1,397 @@
+import { P as PortalController } from './portal-controller-COpzIi1n.js';
+import { t as translate } from './locale.service-D66tF8_2.js';
+
+const activeModals = new Map();
+/** Generate unique ID */
+let modalId = 0;
+const generateId = () => `modal-service-${++modalId}`;
+/**
+ * Create a simple event emitter
+ */
+const createEventEmitter = () => {
+    const subscribers = [];
+    return {
+        subscribe: (callback) => {
+            subscribers.push(callback);
+            return {
+                unsubscribe: () => {
+                    const index = subscribers.indexOf(callback);
+                    if (index > -1)
+                        subscribers.splice(index, 1);
+                },
+            };
+        },
+        emit: (value) => {
+            subscribers.forEach(callback => callback(value));
+        },
+    };
+};
+/**
+ * Render content to a container element
+ */
+const renderContentToElement = (container, content, data) => {
+    if (!content)
+        return null;
+    // Clear container
+    container.innerHTML = '';
+    let contentComponent = null;
+    if (typeof content === 'string') {
+        // Check if it's a component tag name (e.g., 'my-component')
+        if (content.includes('-') && !content.includes('<')) {
+            contentComponent = document.createElement(content);
+            if (data !== undefined) {
+                contentComponent.data = data;
+            }
+            container.appendChild(contentComponent);
+        }
+        else {
+            container.innerHTML = content;
+        }
+    }
+    else if (content instanceof HTMLTemplateElement) {
+        const clone = content.content.cloneNode(true);
+        container.appendChild(clone);
+    }
+    else if (content instanceof HTMLElement) {
+        contentComponent = content;
+        if (data !== undefined) {
+            contentComponent.data = data;
+        }
+        container.appendChild(content);
+    }
+    return contentComponent;
+};
+/**
+ * Build modal content
+ */
+const buildModalContent = (config) => {
+    return config.content || '';
+};
+/**
+ * Create a modal instance
+ */
+const createModal = (config, type) => {
+    const id = generateId();
+    // Create modal content element
+    const modalEl = document.createElement('x-modal-content');
+    // Apply configuration
+    const applyConfig = (cfg) => {
+        // For method modals, don't show the header title (we show it in body)
+        modalEl.modalTitle = cfg.title || '';
+        modalEl.type = type;
+        modalEl.setAttribute('type', type);
+        modalEl.width = cfg.width || 416;
+        modalEl.footer = true;
+        modalEl.closable = cfg.closable !== undefined ? cfg.closable : true;
+        modalEl.mask = cfg.mask !== undefined ? cfg.mask : true;
+        modalEl.maskClosable = cfg.maskClosable !== undefined ? cfg.maskClosable : false;
+        modalEl.centered = cfg.centered !== undefined ? cfg.centered : true;
+        modalEl.okText = cfg.okText || translate('Modal.okText', {}, 'OK');
+        modalEl.cancelText = cfg.cancelText || translate('Modal.cancelText', {}, 'Cancel');
+        modalEl.okLoading = false;
+        modalEl.cancelLoading = false;
+        // Set okType
+        modalEl.okType = cfg.okType || 'primary';
+        modalEl.okDanger = cfg.okDanger || type === 'error';
+        // Handle okDanger - we'll set attribute on element after creation
+        if (cfg.okDanger) {
+            modalEl.classList.add('x-modal-method-danger');
+        }
+        // Build body content with icon
+        modalEl.bodyContent = buildModalContent({ ...cfg});
+        // For non-confirm types, only show OK button
+        if (type !== 'confirm') {
+            modalEl.cancelText = null;
+        }
+        // Add custom class if provided
+        if (cfg.className) {
+            modalEl.classList.add(cfg.className);
+        }
+        // Add type class
+        modalEl.classList.add(`x-modal-method`, `x-modal-method-${type}`, 'x-modal-create-wrapper');
+    };
+    applyConfig(config);
+    // Destroy function
+    const destroy = () => {
+        const modalData = activeModals.get(id);
+        if (modalData) {
+            modalData.portal.destroy();
+            activeModals.delete(id);
+        }
+    };
+    // Handle OK click
+    const handleOk = async () => {
+        if (config.onOk) {
+            const result = await Promise.resolve(config.onOk());
+            if (result === false)
+                return; // Prevent close
+        }
+        destroy();
+    };
+    // Handle Cancel click
+    const handleCancel = async () => {
+        if (config.onCancel) {
+            const result = await Promise.resolve(config.onCancel());
+            if (result === false)
+                return; // Prevent close
+        }
+        destroy();
+    };
+    // Attach event listeners
+    modalEl.addEventListener('xOk', handleOk);
+    modalEl.addEventListener('xCancel', handleCancel);
+    // Create portal
+    const portal = PortalController.create({
+        open: true,
+        zIndex: config.zIndex || 1000,
+        content: modalEl,
+    });
+    // Store instance
+    activeModals.set(id, { portal, element: modalEl });
+    // Auto close if specified
+    if (config.autoClose && config.autoClose > 0) {
+        setTimeout(() => {
+            destroy();
+        }, config.autoClose * 1000);
+    }
+    // Return instance
+    const instance = {
+        destroy,
+        close: destroy,
+        triggerOk: handleOk,
+        triggerCancel: handleCancel,
+        update: (newConfig) => {
+            const mergedConfig = { ...config, ...newConfig };
+            applyConfig(mergedConfig);
+            config = mergedConfig;
+            // Update portal content
+            const modalData = activeModals.get(id);
+            if (modalData) {
+                modalData.portal.update({ content: modalEl });
+            }
+        },
+    };
+    return instance;
+};
+/**
+ * Create a custom modal with flexible content (string, HTMLElement, or HTMLTemplateElement)
+ * Returns ModalRef for controlling the modal
+ */
+const createCustomModal = (config) => {
+    const id = generateId();
+    // Create event emitters
+    const afterOpenEmitter = createEventEmitter();
+    const afterCloseEmitter = createEventEmitter();
+    // Create modal content element
+    const modalEl = document.createElement('x-modal-content');
+    // Setup cleanup function array
+    const cleanupFunctions = [];
+    // Function to apply configuration
+    const applyConfig = (cfg) => {
+        modalEl.modalTitle = (typeof cfg.title === 'string' ? cfg.title : '');
+        modalEl.showHeader = cfg.showHeader !== false;
+        modalEl.width = cfg.width || 520;
+        modalEl.footer = cfg.footer !== false && cfg.footer !== null;
+        modalEl.closable = cfg.closable !== false;
+        modalEl.mask = cfg.mask !== false;
+        modalEl.maskClosable = cfg.maskClosable !== undefined ? cfg.maskClosable : true;
+        modalEl.centered = cfg.centered !== false;
+        modalEl.okText = cfg.okText || translate('Modal.okText', {}, 'OK');
+        modalEl.cancelText = cfg.cancelText || translate('Modal.cancelText', {}, 'Cancel');
+        modalEl.okLoading = !!cfg.okLoading;
+        modalEl.cancelLoading = !!cfg.cancelLoading;
+        modalEl.okType = cfg.okType || 'primary';
+        modalEl.okDanger = !!cfg.okDanger;
+        modalEl.bodyContent = typeof cfg.content === 'string' && cfg.content.includes('<') ? cfg.content : '';
+        modalEl.footerContent = typeof cfg.footer === 'string' ? cfg.footer : '';
+        // Custom styles
+        modalEl.bodyStyle = cfg.bodyStyle;
+        modalEl.maskStyle = cfg.maskStyle;
+        modalEl.wrapStyle = cfg.wrapStyle || cfg.style;
+        // Add classes
+        modalEl.className = 'x-modal-create-wrapper';
+        if (cfg.className)
+            modalEl.classList.add(cfg.className);
+        if (cfg.wrapClassName)
+            modalEl.classList.add(cfg.wrapClassName);
+        // Handle content injection if it's not a string
+        if (typeof cfg.content !== 'string' || (!cfg.content.includes('<') && cfg.content.includes('-'))) {
+            renderContentToElement(modalEl, cfg.content, cfg.data);
+        }
+    };
+    applyConfig(config);
+    const doDestroy = (result) => {
+        const modalData = activeModals.get(id);
+        if (modalData) {
+            cleanupFunctions.forEach(fn => fn());
+            modalData.portal.destroy();
+            activeModals.delete(id);
+            afterCloseEmitter.emit(result);
+            if (config.afterClose) {
+                config.afterClose(result);
+            }
+        }
+    };
+    const handleOk = async () => {
+        if (config.onOk) {
+            const result = await Promise.resolve(config.onOk());
+            if (result === false)
+                return;
+        }
+        doDestroy();
+    };
+    const handleCancel = async () => {
+        if (config.onCancel) {
+            const result = await Promise.resolve(config.onCancel());
+            if (result === false)
+                return;
+        }
+        doDestroy();
+    };
+    modalEl.addEventListener('xOk', handleOk);
+    modalEl.addEventListener('xCancel', handleCancel);
+    // Handle keyboard events
+    if (config.keyboard !== false) {
+        const handleKeydown = (e) => {
+            if (e.key === 'Escape')
+                handleCancel();
+        };
+        document.addEventListener('keydown', handleKeydown);
+        cleanupFunctions.push(() => document.removeEventListener('keydown', handleKeydown));
+    }
+    const portal = PortalController.create({
+        open: true,
+        zIndex: config.zIndex || 1000,
+        content: modalEl,
+    });
+    const modalRef = {
+        afterOpen: afterOpenEmitter,
+        afterClose: afterCloseEmitter,
+        close: (result) => doDestroy(result),
+        destroy: (result) => doDestroy(result),
+        getContentComponent: () => modalEl.querySelector('*'),
+        getContentElement: () => modalEl,
+        getBodyElement: () => modalEl.shadowRoot?.querySelector('.x-modal-body') || modalEl,
+        triggerOk: handleOk,
+        triggerCancel: handleCancel,
+        updateConfig: (newConfig) => {
+            Object.assign(config, newConfig);
+            applyConfig(config);
+        },
+        update: (newConfig) => {
+            Object.assign(config, newConfig);
+            applyConfig(config);
+        }
+    };
+    activeModals.set(id, { portal, element: modalEl, ref: modalRef });
+    requestAnimationFrame(() => {
+        afterOpenEmitter.emit();
+        if (config.afterOpen) {
+            config.afterOpen();
+        }
+    });
+    return modalRef;
+};
+/**
+ * Modal Service implementation (following NzModalService pattern)
+ */
+const Modal = {
+    get openModals() {
+        return Array.from(activeModals.values())
+            .filter(data => data.ref !== undefined)
+            .map(data => data.ref);
+    },
+    create: (config) => {
+        return createCustomModal(config);
+    },
+    info: (config) => {
+        const instance = createModal(config, 'info');
+        return {
+            ...instance,
+            close: instance.destroy,
+            triggerOk: () => { instance.destroy(); },
+            triggerCancel: () => { instance.destroy(); },
+        };
+    },
+    success: (config) => {
+        const instance = createModal(config, 'success');
+        return {
+            ...instance,
+            close: instance.destroy,
+            triggerOk: () => { instance.destroy(); },
+            triggerCancel: () => { instance.destroy(); },
+        };
+    },
+    error: (config) => {
+        const instance = createModal(config, 'error');
+        return {
+            ...instance,
+            close: instance.destroy,
+            triggerOk: () => { instance.destroy(); },
+            triggerCancel: () => { instance.destroy(); },
+        };
+    },
+    warning: (config) => {
+        const instance = createModal(config, 'warning');
+        return {
+            ...instance,
+            close: instance.destroy,
+            triggerOk: () => { instance.destroy(); },
+            triggerCancel: () => { instance.destroy(); },
+        };
+    },
+    confirm: (config) => {
+        const instance = createModal(config, 'confirm');
+        return {
+            ...instance,
+            close: instance.destroy,
+            triggerOk: () => { instance.destroy(); },
+            triggerCancel: () => { instance.destroy(); },
+        };
+    },
+    finder: (config) => {
+        const modalConfig = {
+            title: translate('Finder.title', {}, 'File Browser'),
+            width: '80%',
+            bodyStyle: { 'padding': '0', ...(config.bodyStyle || {}) },
+            centered: true,
+            showHeader: false,
+            footer: null, // Hide default footer
+            maskClosable: true,
+            className: 'x-modal-finder',
+            ...config,
+            content: 'x-finder',
+            data: config?.finderConfig,
+        };
+        const modalRef = createCustomModal(modalConfig);
+        // Get the finder element and configure it
+        const finderEl = modalRef.getContentComponent();
+        if (finderEl) {
+            finderEl.displayMode = 'page';
+            if (config?.finderConfig) {
+                finderEl.config = config.finderConfig;
+            }
+            // Listen for selection event
+            const handleSelect = (ev) => {
+                modalRef.close(ev.detail);
+            };
+            finderEl.addEventListener('xSelect', handleSelect);
+            // Also close on cancel/close from finder internal
+            finderEl.addEventListener('xClose', () => {
+                modalRef.close();
+            });
+        }
+        return modalRef;
+    },
+    closeAll: () => {
+        activeModals.forEach(({ portal }) => {
+            portal.destroy();
+        });
+        activeModals.clear();
+    },
+    destroyAll: () => {
+        Modal.closeAll();
+    },
+};
+
+export { Modal as M };