@nuraly/lumenui 0.1.0

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

@@ -0,0 +1,409 @@
+/**
+ * @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());
+    });
+};
+import { html, LitElement } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+import { styles } from './popconfirm.style.js';
+import { NuralyUIBaseMixin } from '@nuralyui/common/mixins';
+/**
+ * # 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
+ */
+let NrPopconfirmElement = class NrPopconfirmElement extends NuralyUIBaseMixin(LitElement) {
+    constructor() {
+        super(...arguments);
+        this.requiredComponents = ['nr-dropdown', 'nr-icon', 'nr-button', 'nr-label'];
+        /**
+         * Title of the confirmation box
+         */
+        this.title = '';
+        /**
+         * Description of the confirmation box (optional)
+         */
+        this.description = '';
+        /**
+         * Text of the OK button
+         */
+        this.okText = 'OK';
+        /**
+         * Text of the Cancel button
+         */
+        this.cancelText = 'Cancel';
+        /**
+         * Button type of the OK button
+         */
+        this.okType = "primary" /* PopconfirmButtonType.Primary */;
+        /**
+         * Show cancel button
+         */
+        this.showCancel = true;
+        /**
+         * Icon name for the confirmation box
+         */
+        this.icon = "exclamation-circle" /* PopconfirmIcon.Warning */;
+        /**
+         * Custom icon color
+         */
+        this.iconColor = '';
+        /**
+         * Placement of the popconfirm
+         */
+        this.placement = "top" /* PopconfirmPlacement.Top */;
+        /**
+         * Trigger mode
+         */
+        this.trigger = "click" /* PopconfirmTrigger.Click */;
+        /**
+         * Whether the popconfirm is disabled
+         */
+        this.disabled = false;
+        /**
+         * Whether to show arrow
+         */
+        this.arrow = true;
+        /**
+         * Whether the popconfirm is open
+         */
+        this.open = false;
+        /**
+         * Loading state for OK button (for async operations)
+         */
+        this.okLoading = false;
+        /**
+         * Bound event handlers for cleanup
+         */
+        this._boundHandleOutsideClick = null;
+        this._boundHandleKeydown = null;
+        /**
+         * Handle trigger click to toggle popconfirm
+         */
+        this.handleTriggerClick = (e) => {
+            if (this.disabled)
+                return;
+            e.stopPropagation();
+            if (this.open) {
+                this.closePopconfirm();
+            }
+            else {
+                this.openPopconfirm();
+            }
+        };
+        /**
+         * Handle confirm button click
+         */
+        this.handleConfirm = (e) => __awaiter(this, void 0, void 0, function* () {
+            e.stopPropagation();
+            const confirmEvent = new CustomEvent('nr-confirm', {
+                bubbles: true,
+                composed: true,
+                cancelable: true,
+                detail: { originalEvent: e },
+            });
+            const dispatched = this.dispatchEvent(confirmEvent);
+            // If event is not prevented, close the popconfirm
+            if (dispatched && !confirmEvent.defaultPrevented) {
+                // Check if the event handler returns a promise
+                const handler = this.onConfirm;
+                if (handler && typeof handler === 'function') {
+                    const result = handler(e);
+                    if (result && typeof result.then === 'function') {
+                        this.okLoading = true;
+                        try {
+                            yield result;
+                            this.closePopconfirm();
+                        }
+                        catch (error) {
+                            console.error('Confirmation failed:', error);
+                        }
+                        finally {
+                            this.okLoading = false;
+                        }
+                        return;
+                    }
+                }
+                this.closePopconfirm();
+            }
+        });
+        /**
+         * Handle cancel button click
+         */
+        this.handleCancel = (e) => {
+            e.stopPropagation();
+            this.dispatchEvent(new CustomEvent('nr-cancel', {
+                bubbles: true,
+                composed: true,
+                detail: { originalEvent: e },
+            }));
+            this.closePopconfirm();
+        };
+    }
+    /**
+     * Reference to the dropdown element
+     */
+    get dropdownElement() {
+        var _a;
+        return (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('nr-dropdown');
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        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();
+        if (this._boundHandleOutsideClick) {
+            document.removeEventListener('click', this._boundHandleOutsideClick, true);
+        }
+        if (this._boundHandleKeydown) {
+            document.removeEventListener('keydown', this._boundHandleKeydown);
+        }
+    }
+    /**
+     * Open the popconfirm
+     */
+    openPopconfirm() {
+        this.open = true;
+        if (this.dropdownElement) {
+            this.dropdownElement.show();
+        }
+        this.dispatchEvent(new CustomEvent('nr-open-change', {
+            bubbles: true,
+            composed: true,
+            detail: { open: true },
+        }));
+    }
+    /**
+     * Handle clicks outside the popconfirm to close it
+     */
+    handleOutsideClick(e) {
+        if (!this.open)
+            return;
+        const path = e.composedPath();
+        if (!path.includes(this)) {
+            this.closePopconfirm();
+        }
+    }
+    /**
+     * Handle escape key to close popconfirm
+     */
+    handleKeydown(e) {
+        if (e.key === 'Escape' && this.open) {
+            this.closePopconfirm();
+        }
+    }
+    /**
+     * Close the popconfirm
+     */
+    closePopconfirm() {
+        this.open = false;
+        if (this.dropdownElement) {
+            this.dropdownElement.hide();
+        }
+        this.dispatchEvent(new CustomEvent('nr-open-change', {
+            bubbles: true,
+            composed: true,
+            detail: { open: false },
+        }));
+    }
+    /**
+     * Get icon color based on icon type
+     */
+    getIconColor() {
+        if (this.iconColor) {
+            return this.iconColor;
+        }
+        // Return empty string to use CSS class colors
+        return '';
+    }
+    /**
+     * Get icon class based on icon type
+     */
+    getIconClass() {
+        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',
+        };
+        if (this.iconColor) {
+            return 'custom';
+        }
+        return iconColorMap[this.icon] || 'warning';
+    }
+    /**
+     * Render the popconfirm content
+     */
+    renderContent() {
+        const iconClass = this.getIconClass();
+        const iconColor = this.getIconColor();
+        return html `
+      <div class="popconfirm-content">
+        <div class="popconfirm-message">
+          <div
+            class="popconfirm-icon popconfirm-icon--${iconClass}"
+            style=${iconColor ? `color: ${iconColor}` : ''}>
+            <nr-icon name=${this.icon}></nr-icon>
+          </div>
+          <div class="popconfirm-text">
+            ${this.title ? html `<nr-label class="popconfirm-title" size="medium">${this.title}</nr-label>` : ''}
+            ${this.description
+            ? html `<nr-label class="popconfirm-description" size="small" variant="secondary">${this.description}</nr-label>`
+            : ''}
+          </div>
+        </div>
+        <div class="popconfirm-buttons">
+          ${this.showCancel
+            ? html `
+                <nr-button
+                  size="small"
+                  @click=${this.handleCancel}>
+                  ${this.cancelText}
+                </nr-button>
+              `
+            : ''}
+          <nr-button
+            size="small"
+            type=${this.okType === 'danger' ? 'danger' : this.okType === 'primary' ? 'primary' : 'default'}
+            ?loading=${this.okLoading}
+            ?disabled=${this.okLoading}
+            @click=${this.handleConfirm}>
+            ${this.okText}
+          </nr-button>
+        </div>
+      </div>
+    `;
+    }
+    render() {
+        return html `
+      <nr-dropdown
+        .open=${this.open}
+        .placement=${this.placement}
+        trigger="manual"
+        ?disabled=${this.disabled}
+        ?arrow=${this.arrow}
+        .closeOnOutsideClick=${false}
+        .closeOnEscape=${false}>
+        <div slot="trigger" @click=${this.handleTriggerClick}>
+          <slot name="trigger"></slot>
+        </div>
+        <div slot="content">${this.renderContent()}</div>
+      </nr-dropdown>
+    `;
+    }
+};
+NrPopconfirmElement.styles = styles;
+__decorate([
+    property({ type: String })
+], NrPopconfirmElement.prototype, "title", void 0);
+__decorate([
+    property({ type: String })
+], NrPopconfirmElement.prototype, "description", void 0);
+__decorate([
+    property({ type: String, attribute: 'ok-text' })
+], NrPopconfirmElement.prototype, "okText", void 0);
+__decorate([
+    property({ type: String, attribute: 'cancel-text' })
+], NrPopconfirmElement.prototype, "cancelText", void 0);
+__decorate([
+    property({ type: String, attribute: 'ok-type' })
+], NrPopconfirmElement.prototype, "okType", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'show-cancel' })
+], NrPopconfirmElement.prototype, "showCancel", void 0);
+__decorate([
+    property({ type: String })
+], NrPopconfirmElement.prototype, "icon", void 0);
+__decorate([
+    property({ type: String, attribute: 'icon-color' })
+], NrPopconfirmElement.prototype, "iconColor", void 0);
+__decorate([
+    property({ type: String })
+], NrPopconfirmElement.prototype, "placement", void 0);
+__decorate([
+    property({ type: String })
+], NrPopconfirmElement.prototype, "trigger", void 0);
+__decorate([
+    property({ type: Boolean })
+], NrPopconfirmElement.prototype, "disabled", void 0);
+__decorate([
+    property({ type: Boolean })
+], NrPopconfirmElement.prototype, "arrow", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], NrPopconfirmElement.prototype, "open", void 0);
+__decorate([
+    state()
+], NrPopconfirmElement.prototype, "okLoading", void 0);
+NrPopconfirmElement = __decorate([
+    customElement('nr-popconfirm')
+], NrPopconfirmElement);
+export { NrPopconfirmElement };
+//# sourceMappingURL=popconfirm.component.js.map

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

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

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

@@ -0,0 +1,207 @@
+import { css } from 'lit';
+export const styles = css `
+  :host {
+    display: inline-block;
+  }
+
+  .popconfirm-content {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+    padding: 12px 16px;
+    min-width: 200px;
+    max-width: 400px;
+  }
+
+  .popconfirm-message {
+    display: flex;
+    gap: 8px;
+    align-items: flex-start;
+  }
+
+  .popconfirm-icon {
+    flex-shrink: 0;
+    font-size: 16px;
+    line-height: 1.5;
+    margin-top: 2px;
+  }
+
+  .popconfirm-icon--warning {
+    color: var(--nuraly-color-warning);
+  }
+
+  .popconfirm-icon--question {
+    color: var(--nuraly-color-info);
+  }
+
+  .popconfirm-icon--info {
+    color: var(--nuraly-color-info);
+  }
+
+  .popconfirm-icon--error {
+    color: var(--nuraly-color-error);
+  }
+
+  .popconfirm-icon--success {
+    color: var(--nuraly-color-success);
+  }
+
+  .popconfirm-icon--custom {
+    color: var(--nuraly-popconfirm-icon-color, var(--nuraly-color-text));
+  }
+
+  .popconfirm-text {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+  }
+
+  .popconfirm-title {
+    color: var(--nuraly-color-text);
+    font-size: var(--nuraly-font-size-base);
+    font-weight: 600;
+    line-height: 1.5;
+    margin: 0;
+  }
+
+  .popconfirm-description {
+    color: var(--nuraly-color-text-secondary);
+    font-size: var(--nuraly-font-size-sm);
+    line-height: 1.5;
+    margin: 0;
+  }
+
+  .popconfirm-buttons {
+    display: flex;
+    gap: 8px;
+    justify-content: flex-end;
+    align-items: center;
+  }
+
+  .popconfirm-button {
+    padding: 4px 15px;
+    font-size: var(--nuraly-font-size-sm);
+    border-radius: var(--nuraly-border-radius);
+    border: 1px solid transparent;
+    cursor: pointer;
+    transition: all 0.2s;
+    font-weight: 400;
+    line-height: 1.5;
+    white-space: nowrap;
+    user-select: none;
+  }
+
+  .popconfirm-button:focus-visible {
+    outline: 2px solid var(--nuraly-color-primary);
+    outline-offset: 2px;
+  }
+
+  .popconfirm-button--cancel {
+    background: var(--nuraly-button-default-background);
+    color: var(--nuraly-button-default-text-color);
+    border-color: var(--nuraly-button-default-border-color);
+  }
+
+  .popconfirm-button--cancel:hover:not(:disabled) {
+    background: var(--nuraly-button-default-hover-background);
+    color: var(--nuraly-button-default-hover-text-color);
+    border-color: var(--nuraly-button-default-hover-border-color);
+  }
+
+  .popconfirm-button--ok-primary {
+    background: var(--nuraly-button-primary-background);
+    color: var(--nuraly-button-primary-text-color);
+    border-color: var(--nuraly-button-primary-border-color);
+  }
+
+  .popconfirm-button--ok-primary:hover:not(:disabled) {
+    background: var(--nuraly-button-primary-hover-background);
+    color: var(--nuraly-button-primary-hover-text-color);
+    border-color: var(--nuraly-button-primary-hover-border-color);
+  }
+
+  .popconfirm-button--ok-danger {
+    background: var(--nuraly-button-danger-background);
+    color: var(--nuraly-button-danger-text-color);
+    border-color: var(--nuraly-button-danger-border-color);
+  }
+
+  .popconfirm-button--ok-danger:hover:not(:disabled) {
+    background: var(--nuraly-button-danger-hover-background);
+    color: var(--nuraly-button-danger-hover-text-color);
+    border-color: var(--nuraly-button-danger-hover-border-color);
+  }
+
+  .popconfirm-button--ok-secondary {
+    background: var(--nuraly-button-secondary-background);
+    color: var(--nuraly-button-secondary-text-color);
+    border-color: var(--nuraly-button-secondary-border-color);
+  }
+
+  .popconfirm-button--ok-secondary:hover:not(:disabled) {
+    background: var(--nuraly-button-secondary-hover-background);
+    color: var(--nuraly-button-secondary-hover-text-color);
+    border-color: var(--nuraly-button-secondary-hover-border-color);
+  }
+
+  .popconfirm-button--ok-default {
+    background: var(--nuraly-button-default-background);
+    color: var(--nuraly-button-default-text-color);
+    border-color: var(--nuraly-button-default-border-color);
+  }
+
+  .popconfirm-button--ok-default:hover:not(:disabled) {
+    background: var(--nuraly-button-default-hover-background);
+    color: var(--nuraly-button-default-hover-text-color);
+    border-color: var(--nuraly-button-default-hover-border-color);
+  }
+
+  .popconfirm-button:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  .popconfirm-button--loading {
+    position: relative;
+    pointer-events: none;
+  }
+
+  .popconfirm-button--loading::before {
+    content: '';
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    width: 14px;
+    height: 14px;
+    margin-left: -7px;
+    margin-top: -7px;
+    border: 2px solid currentColor;
+    border-right-color: transparent;
+    border-radius: 50%;
+    animation: popconfirm-spin 0.6s linear infinite;
+  }
+
+  .popconfirm-button--loading > * {
+    visibility: hidden;
+  }
+
+  @keyframes popconfirm-spin {
+    0% {
+      transform: rotate(0deg);
+    }
+    100% {
+      transform: rotate(360deg);
+    }
+  }
+
+  /* RTL Support */
+  :host([dir='rtl']) .popconfirm-message {
+    direction: rtl;
+  }
+
+  :host([dir='rtl']) .popconfirm-buttons {
+    flex-direction: row-reverse;
+  }
+`;
+//# sourceMappingURL=popconfirm.style.js.map