@nuraly/lumenui 0.1.0

package/dist/src/components/popconfirm/popconfirm-manager.component.js

@@ -0,0 +1,372 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var NrPopconfirmManagerElement_1;
+import { html, LitElement, nothing } from 'lit';
+import { customElement, state } from 'lit/decorators.js';
+import { styleMap } from 'lit/directives/style-map.js';
+import { popconfirmManagerStyles } from './popconfirm-manager.style.js';
+import { NuralyUIBaseMixin } from '@nuralyui/common/mixins';
+/**
+ * # PopconfirmManager Component
+ *
+ * A container component that manages popconfirm instances displayed at cursor position.
+ * Similar to toast notifications but for confirmation dialogs.
+ *
+ * ## Features
+ * - Show popconfirm at cursor/mouse position
+ * - Programmatic API for creating confirmations
+ * - Async confirmation support with loading state
+ * - Auto-dismiss on outside click or escape
+ * - Customizable appearance and callbacks
+ *
+ * ## Usage
+ * ```html
+ * <!-- Add once to your app -->
+ * <nr-popconfirm-manager></nr-popconfirm-manager>
+ *
+ * <!-- Programmatic usage -->
+ * <script>
+ *   const manager = document.querySelector('nr-popconfirm-manager');
+ *
+ *   // Show at cursor position (from click event)
+ *   element.addEventListener('click', (e) => {
+ *     manager.show({
+ *       title: 'Delete item?',
+ *       description: 'This action cannot be undone.',
+ *       okType: 'danger',
+ *       onConfirm: () => {
+ *         console.log('Deleted!');
+ *       }
+ *     }, { x: e.clientX, y: e.clientY });
+ *   });
+ *
+ *   // Or use the static confirm helper
+ *   const confirmed = await NrPopconfirmManager.confirm({
+ *     title: 'Are you sure?',
+ *   }, { x: event.clientX, y: event.clientY });
+ * </script>
+ * ```
+ *
+ * @element nr-popconfirm-manager
+ * @fires nr-popconfirm-confirm - Fired when user confirms
+ * @fires nr-popconfirm-cancel - Fired when user cancels
+ */
+let NrPopconfirmManagerElement = NrPopconfirmManagerElement_1 = class NrPopconfirmManagerElement extends NuralyUIBaseMixin(LitElement) {
+    constructor() {
+        super(...arguments);
+        this.requiredComponents = ['nr-icon', 'nr-button', 'nr-label'];
+        /** Active popconfirm items */
+        this.items = [];
+        /** Bound event handlers */
+        this._boundHandleOutsideClick = null;
+        this._boundHandleKeydown = null;
+        /** Timestamp when popconfirm was shown (to prevent immediate close from same click) */
+        this._showTimestamp = 0;
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        NrPopconfirmManagerElement_1._instance = this;
+        this._boundHandleOutsideClick = this.handleOutsideClick.bind(this);
+        this._boundHandleKeydown = this.handleKeydown.bind(this);
+        document.addEventListener('click', this._boundHandleOutsideClick, true);
+        document.addEventListener('keydown', this._boundHandleKeydown);
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        NrPopconfirmManagerElement_1._instance = null;
+        if (this._boundHandleOutsideClick) {
+            document.removeEventListener('click', this._boundHandleOutsideClick, true);
+        }
+        if (this._boundHandleKeydown) {
+            document.removeEventListener('keydown', this._boundHandleKeydown);
+        }
+    }
+    /**
+     * Get the global instance
+     */
+    static getInstance() {
+        return NrPopconfirmManagerElement_1._instance;
+    }
+    /**
+     * Static helper to show a confirmation dialog
+     * Returns a promise that resolves to true if confirmed, false if cancelled
+     */
+    static confirm(config, position) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const instance = NrPopconfirmManagerElement_1.getInstance();
+            if (!instance) {
+                console.warn('NrPopconfirmManager: No instance found. Add <nr-popconfirm-manager> to your app.');
+                return false;
+            }
+            return new Promise((resolve) => {
+                instance.show(Object.assign(Object.assign({}, config), { onConfirm: () => __awaiter(this, void 0, void 0, function* () {
+                        var _a;
+                        yield ((_a = config.onConfirm) === null || _a === void 0 ? void 0 : _a.call(config));
+                        resolve(true);
+                    }), onCancel: () => {
+                        var _a;
+                        (_a = config.onCancel) === null || _a === void 0 ? void 0 : _a.call(config);
+                        resolve(false);
+                    } }), position);
+            });
+        });
+    }
+    /**
+     * Show a popconfirm at the specified position
+     */
+    show(config, position) {
+        const id = this.generateId();
+        // Adjust position to keep popconfirm within viewport
+        const adjustedPosition = this.adjustPosition(position);
+        const item = {
+            id,
+            config,
+            position: adjustedPosition,
+            loading: false,
+        };
+        // Record timestamp to prevent immediate close from same click event
+        this._showTimestamp = Date.now();
+        // Only allow one popconfirm at a time
+        this.items = [item];
+        console.log('[nr-popconfirm-manager] show() called, items:', this.items);
+        this.requestUpdate();
+        return id;
+    }
+    /**
+     * Close a specific popconfirm
+     */
+    close(id) {
+        this.items = this.items.filter(item => item.id !== id);
+    }
+    /**
+     * Close all popconfirms
+     */
+    closeAll() {
+        this.items = [];
+    }
+    /**
+     * Handle confirm button click
+     */
+    handleConfirm(item, e) {
+        return __awaiter(this, void 0, void 0, function* () {
+            e.stopPropagation();
+            const confirmEvent = new CustomEvent('nr-popconfirm-confirm', {
+                bubbles: true,
+                composed: true,
+                detail: { id: item.id, config: item.config },
+            });
+            this.dispatchEvent(confirmEvent);
+            // Handle async onConfirm
+            if (item.config.onConfirm) {
+                const result = item.config.onConfirm();
+                if (result && typeof result.then === 'function') {
+                    // Show loading state
+                    item.loading = true;
+                    this.requestUpdate();
+                    try {
+                        yield result;
+                    }
+                    catch (error) {
+                        console.error('Popconfirm confirmation failed:', error);
+                    }
+                    finally {
+                        item.loading = false;
+                    }
+                }
+            }
+            this.close(item.id);
+        });
+    }
+    /**
+     * Handle cancel button click
+     */
+    handleCancel(item, e) {
+        var _a, _b;
+        e.stopPropagation();
+        const cancelEvent = new CustomEvent('nr-popconfirm-cancel', {
+            bubbles: true,
+            composed: true,
+            detail: { id: item.id, config: item.config },
+        });
+        this.dispatchEvent(cancelEvent);
+        (_b = (_a = item.config).onCancel) === null || _b === void 0 ? void 0 : _b.call(_a);
+        this.close(item.id);
+    }
+    /**
+     * Handle clicks outside the popconfirm
+     */
+    handleOutsideClick(e) {
+        var _a;
+        if (this.items.length === 0)
+            return;
+        // Prevent immediate close from the same click event that opened the popconfirm
+        // Allow at least 100ms before responding to outside clicks
+        if (Date.now() - this._showTimestamp < 100) {
+            return;
+        }
+        const path = e.composedPath();
+        const popconfirmContainer = (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.popconfirm-manager__item');
+        if (popconfirmContainer && !path.includes(popconfirmContainer)) {
+            // Cancel all open popconfirms
+            this.items.forEach(item => {
+                var _a, _b;
+                (_b = (_a = item.config).onCancel) === null || _b === void 0 ? void 0 : _b.call(_a);
+            });
+            this.closeAll();
+        }
+    }
+    /**
+     * Handle escape key
+     */
+    handleKeydown(e) {
+        if (e.key === 'Escape' && this.items.length > 0) {
+            this.items.forEach(item => {
+                var _a, _b;
+                (_b = (_a = item.config).onCancel) === null || _b === void 0 ? void 0 : _b.call(_a);
+            });
+            this.closeAll();
+        }
+    }
+    /**
+     * Adjust position to keep popconfirm within viewport
+     */
+    adjustPosition(position) {
+        const padding = 16;
+        const estimatedWidth = 280;
+        const estimatedHeight = 120;
+        const viewportWidth = window.innerWidth;
+        const viewportHeight = window.innerHeight;
+        let x = position.x;
+        let y = position.y;
+        // Adjust horizontal position
+        if (x + estimatedWidth > viewportWidth - padding) {
+            x = viewportWidth - estimatedWidth - padding;
+        }
+        if (x < padding) {
+            x = padding;
+        }
+        // Adjust vertical position
+        if (y + estimatedHeight > viewportHeight - padding) {
+            y = position.y - estimatedHeight - 8; // Show above cursor
+        }
+        if (y < padding) {
+            y = padding;
+        }
+        return { x, y };
+    }
+    /**
+     * Generate unique ID
+     */
+    generateId() {
+        return `popconfirm-${crypto.randomUUID()}`;
+    }
+    /**
+     * Get icon color based on icon type
+     */
+    getIconClass(icon) {
+        const iconColorMap = {
+            ["exclamation-circle" /* PopconfirmIcon.Warning */]: 'warning',
+            ["question-circle" /* PopconfirmIcon.Question */]: 'question',
+            ["info-circle" /* PopconfirmIcon.Info */]: 'info',
+            ["close-circle" /* PopconfirmIcon.Error */]: 'error',
+            ["check-circle" /* PopconfirmIcon.Success */]: 'success',
+        };
+        return iconColorMap[icon || ''] || 'warning';
+    }
+    /**
+     * Render a single popconfirm item
+     */
+    renderItem(item) {
+        const { config, position } = item;
+        const icon = config.icon || "exclamation-circle" /* PopconfirmIcon.Warning */;
+        const iconClass = config.iconColor ? 'custom' : this.getIconClass(icon);
+        const showCancel = config.showCancel !== false;
+        const positionStyles = {
+            left: `${position.x}px`,
+            top: `${position.y}px`,
+        };
+        const iconStyles = config.iconColor ? { color: config.iconColor } : {};
+        return html `
+      <div
+        class="popconfirm-manager__item"
+        style=${styleMap(positionStyles)}
+        @click=${(e) => e.stopPropagation()}
+      >
+        <div class="popconfirm-manager__content">
+          <div class="popconfirm-manager__message">
+            <div
+              class="popconfirm-manager__icon popconfirm-manager__icon--${iconClass}"
+              style=${styleMap(iconStyles)}
+            >
+              <nr-icon name=${icon}></nr-icon>
+            </div>
+            <div class="popconfirm-manager__text">
+              ${config.title ? html `<nr-label class="popconfirm-manager__title" size="medium">${config.title}</nr-label>` : nothing}
+              ${config.description ? html `<nr-label class="popconfirm-manager__description" size="small" variant="secondary">${config.description}</nr-label>` : nothing}
+            </div>
+          </div>
+          <div class="popconfirm-manager__buttons">
+            ${showCancel
+            ? html `
+                  <nr-button
+                    size="small"
+                    @click=${(e) => this.handleCancel(item, e)}
+                  >
+                    ${config.cancelText || 'Cancel'}
+                  </nr-button>
+                `
+            : nothing}
+            <nr-button
+              size="small"
+              type=${config.okType === 'danger' ? 'danger' : config.okType === 'primary' ? 'primary' : 'default'}
+              ?loading=${item.loading}
+              ?disabled=${item.loading}
+              @click=${(e) => this.handleConfirm(item, e)}
+            >
+              ${config.okText || 'OK'}
+            </nr-button>
+          </div>
+        </div>
+      </div>
+    `;
+    }
+    render() {
+        if (this.items.length === 0) {
+            return nothing;
+        }
+        return html `
+      <div class="popconfirm-manager">
+        ${this.items.map(item => this.renderItem(item))}
+      </div>
+    `;
+    }
+};
+NrPopconfirmManagerElement.styles = popconfirmManagerStyles;
+/** Static instance for global access */
+NrPopconfirmManagerElement._instance = null;
+__decorate([
+    state()
+], NrPopconfirmManagerElement.prototype, "items", void 0);
+NrPopconfirmManagerElement = NrPopconfirmManagerElement_1 = __decorate([
+    customElement('nr-popconfirm-manager')
+], NrPopconfirmManagerElement);
+export { NrPopconfirmManagerElement };
+//# sourceMappingURL=popconfirm-manager.component.js.map

package/dist/src/components/popconfirm/popconfirm-manager.style.d.ts

@@ -0,0 +1,2 @@
+export declare const popconfirmManagerStyles: import("lit").CSSResult;
+//# sourceMappingURL=popconfirm-manager.style.d.ts.map

package/dist/src/components/popconfirm/popconfirm-manager.style.js

@@ -0,0 +1,137 @@
+import { css } from 'lit';
+export const popconfirmManagerStyles = css `
+  :host {
+    display: block;
+  }
+
+  .popconfirm-manager {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    pointer-events: none;
+    z-index: var(--nuraly-z-index-popconfirm, 10000);
+  }
+
+  .popconfirm-manager__item {
+    position: fixed;
+    pointer-events: auto;
+    background: var(--nuraly-color-dropdown-background, #ffffff);
+    border: 1px solid var(--nuraly-color-dropdown-border, #e0e0e0);
+    border-radius: var(--nuraly-border-radius-lg, 8px);
+    box-shadow: var(--nuraly-shadow-lg, 0 4px 16px rgba(0, 0, 0, 0.15));
+    min-width: 240px;
+    max-width: 320px;
+    animation: popconfirm-manager-fade-in 0.15s ease-out;
+  }
+
+  @keyframes popconfirm-manager-fade-in {
+    from {
+      opacity: 0;
+      transform: scale(0.95) translateY(-4px);
+    }
+    to {
+      opacity: 1;
+      transform: scale(1) translateY(0);
+    }
+  }
+
+  .popconfirm-manager__content {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+    padding: 12px 16px;
+  }
+
+  .popconfirm-manager__message {
+    display: flex;
+    gap: 8px;
+    align-items: flex-start;
+  }
+
+  .popconfirm-manager__icon {
+    flex-shrink: 0;
+    font-size: 16px;
+    line-height: 1.5;
+    margin-top: 2px;
+  }
+
+  .popconfirm-manager__icon--warning {
+    color: var(--nuraly-color-warning, #faad14);
+  }
+
+  .popconfirm-manager__icon--question {
+    color: var(--nuraly-color-info, #1890ff);
+  }
+
+  .popconfirm-manager__icon--info {
+    color: var(--nuraly-color-info, #1890ff);
+  }
+
+  .popconfirm-manager__icon--error {
+    color: var(--nuraly-color-error, #ff4d4f);
+  }
+
+  .popconfirm-manager__icon--success {
+    color: var(--nuraly-color-success, #52c41a);
+  }
+
+  .popconfirm-manager__icon--custom {
+    color: inherit;
+  }
+
+  .popconfirm-manager__text {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+  }
+
+  .popconfirm-manager__title {
+    color: var(--nuraly-color-text, #262626);
+    font-size: var(--nuraly-font-size-base, 14px);
+    font-weight: 600;
+    line-height: 1.5;
+    margin: 0;
+  }
+
+  .popconfirm-manager__description {
+    color: var(--nuraly-color-text-secondary, #666666);
+    font-size: var(--nuraly-font-size-sm, 12px);
+    line-height: 1.5;
+    margin: 0;
+  }
+
+  .popconfirm-manager__buttons {
+    display: flex;
+    gap: 8px;
+    justify-content: flex-end;
+    align-items: center;
+  }
+
+  /* Arrow pointer towards cursor */
+  .popconfirm-manager__item::before {
+    content: '';
+    position: absolute;
+    left: 16px;
+    top: -6px;
+    width: 12px;
+    height: 12px;
+    background: var(--nuraly-color-dropdown-background, #ffffff);
+    border: 1px solid var(--nuraly-color-dropdown-border, #e0e0e0);
+    border-right: none;
+    border-bottom: none;
+    transform: rotate(45deg);
+  }
+
+  /* RTL Support */
+  :host([dir='rtl']) .popconfirm-manager__message {
+    direction: rtl;
+  }
+
+  :host([dir='rtl']) .popconfirm-manager__buttons {
+    flex-direction: row-reverse;
+  }
+`;
+//# sourceMappingURL=popconfirm-manager.style.js.map

package/dist/src/components/popconfirm/popconfirm.component.d.ts

@@ -0,0 +1,179 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+import { LitElement } from 'lit';
+import { PopconfirmPlacement, PopconfirmTrigger, PopconfirmButtonType, PopconfirmIcon } from './popconfirm.types.js';
+declare const NrPopconfirmElement_base: (new (...args: any[]) => import("@nuralyui/common/mixins").DependencyAware) & (new (...args: any[]) => import("@nuralyui/common/mixins").ThemeAware) & (new (...args: any[]) => import("@nuralyui/common/mixins").EventHandlerCapable) & typeof LitElement;
+/**
+ * # Popconfirm Component
+ *
+ * A pop-up confirmation dialog triggered by user interaction. It provides a simple and
+ * compact way to ask for user confirmation before performing an action.
+ *
+ * ## Features
+ * - Customizable title and description
+ * - Configurable OK and Cancel buttons
+ * - Multiple placement options (12 positions)
+ * - Custom icons with predefined options
+ * - Async confirmation support
+ * - Multiple trigger modes (click, hover, focus)
+ * - Theme-aware styling
+ * - Keyboard accessibility
+ *
+ * ## Usage
+ * ```html
+ * <!-- Basic popconfirm -->
+ * <nr-popconfirm
+ *   title="Are you sure delete this task?"
+ *   ok-text="Yes"
+ *   cancel-text="No">
+ *   <button slot="trigger">Delete</button>
+ * </nr-popconfirm>
+ *
+ * <!-- With description -->
+ * <nr-popconfirm
+ *   title="Delete the task"
+ *   description="Are you sure you want to delete this task? This action cannot be undone."
+ *   ok-type="danger">
+ *   <button slot="trigger">Delete</button>
+ * </nr-popconfirm>
+ *
+ * <!-- Custom icon -->
+ * <nr-popconfirm
+ *   title="Change status?"
+ *   icon="question-circle"
+ *   icon-color="#1890ff">
+ *   <button slot="trigger">Change Status</button>
+ * </nr-popconfirm>
+ * ```
+ *
+ * @element nr-popconfirm
+ * @fires nr-confirm - Fired when user confirms the action
+ * @fires nr-cancel - Fired when user cancels the action
+ * @fires nr-open-change - Fired when popconfirm visibility changes
+ *
+ * @slot trigger - Element that triggers the popconfirm
+ *
+ * @cssproperty --nuraly-popconfirm-icon-color - Custom icon color
+ */
+export declare class NrPopconfirmElement extends NrPopconfirmElement_base {
+    static styles: import("lit").CSSResult;
+    requiredComponents: string[];
+    /**
+     * Title of the confirmation box
+     */
+    title: string;
+    /**
+     * Description of the confirmation box (optional)
+     */
+    description: string;
+    /**
+     * Text of the OK button
+     */
+    okText: string;
+    /**
+     * Text of the Cancel button
+     */
+    cancelText: string;
+    /**
+     * Button type of the OK button
+     */
+    okType: PopconfirmButtonType;
+    /**
+     * Show cancel button
+     */
+    showCancel: boolean;
+    /**
+     * Icon name for the confirmation box
+     */
+    icon: PopconfirmIcon;
+    /**
+     * Custom icon color
+     */
+    iconColor: string;
+    /**
+     * Placement of the popconfirm
+     */
+    placement: PopconfirmPlacement;
+    /**
+     * Trigger mode
+     */
+    trigger: PopconfirmTrigger;
+    /**
+     * Whether the popconfirm is disabled
+     */
+    disabled: boolean;
+    /**
+     * Whether to show arrow
+     */
+    arrow: boolean;
+    /**
+     * Whether the popconfirm is open
+     */
+    open: boolean;
+    /**
+     * Loading state for OK button (for async operations)
+     */
+    private okLoading;
+    /**
+     * Bound event handlers for cleanup
+     */
+    private _boundHandleOutsideClick;
+    private _boundHandleKeydown;
+    /**
+     * Reference to the dropdown element
+     */
+    private get dropdownElement();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    /**
+     * Handle trigger click to toggle popconfirm
+     */
+    private handleTriggerClick;
+    /**
+     * Open the popconfirm
+     */
+    private openPopconfirm;
+    /**
+     * Handle clicks outside the popconfirm to close it
+     */
+    private handleOutsideClick;
+    /**
+     * Handle escape key to close popconfirm
+     */
+    private handleKeydown;
+    /**
+     * Handle confirm button click
+     */
+    private handleConfirm;
+    /**
+     * Handle cancel button click
+     */
+    private handleCancel;
+    /**
+     * Close the popconfirm
+     */
+    private closePopconfirm;
+    /**
+     * Get icon color based on icon type
+     */
+    private getIconColor;
+    /**
+     * Get icon class based on icon type
+     */
+    private getIconClass;
+    /**
+     * Render the popconfirm content
+     */
+    private renderContent;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'nr-popconfirm': NrPopconfirmElement;
+    }
+}
+export {};
+//# sourceMappingURL=popconfirm.component.d.ts.map