@nuralyui/popconfirm 0.0.1

package/index.d.ts

@@ -0,0 +1,3 @@
+export * from './popconfirm.component.js';
+export * from './popconfirm.types.js';
+//# sourceMappingURL=index.d.ts.map

package/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/popconfirm/index.ts"],"names":[],"mappings":"AAAA,cAAc,2BAA2B,CAAC;AAC1C,cAAc,uBAAuB,CAAC"}

package/index.js

@@ -0,0 +1,3 @@
+export * from './popconfirm.component.js';
+export * from './popconfirm.types.js';
+//# sourceMappingURL=index.js.map

package/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/popconfirm/index.ts"],"names":[],"mappings":"AAAA,cAAc,2BAA2B,CAAC;AAC1C,cAAc,uBAAuB,CAAC","sourcesContent":["export * from './popconfirm.component.js';\nexport * from './popconfirm.types.js';\n"]}

package/package.json

@@ -0,0 +1,31 @@
+{
+    "name": "@nuralyui/popconfirm",
+    "version": "0.0.1",
+    "description": "NuralyUI Popconfirm Component - A pop-up confirmation dialog",
+    "author": "Nuraly, Laabidi Aymen",
+    "license": "MIT",
+    "type": "module",
+    "main": "./index.js",
+    "module": "./index.js",
+    "exports": {
+        ".": {
+            "import": "./index.js"
+        },
+        "./bundle": {
+            "import": "./bundle.js"
+        }
+    },
+    "keywords": [
+        "web-components",
+        "lit-element",
+        "popconfirm",
+        "confirmation",
+        "dialog",
+        "ui",
+        "nuralyui"
+    ],
+    "repository": {
+        "type": "git",
+        "url": "https://github.com/NuralyUI/NuralyUI.git"
+    }
+}

package/popconfirm.component.d.ts

@@ -0,0 +1,162 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+import { LitElement } from 'lit';
+import { PopconfirmPlacement, PopconfirmTrigger, PopconfirmButtonType, PopconfirmIcon } from './popconfirm.types.js';
+import '../dropdown/index.js';
+import '../icon/index.js';
+declare const NrPopconfirmElement_base: (new (...args: any[]) => import("../../shared/dependency-mixin.js").DependencyAware) & (new (...args: any[]) => import("../../shared/theme-mixin.js").ThemeAware) & (new (...args: any[]) => import("../../shared/event-handler-mixin.js").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;
+    /**
+     * Reference to the dropdown element
+     */
+    private get dropdownElement();
+    /**
+     * Handle confirm button click
+     */
+    private handleConfirm;
+    /**
+     * Handle cancel button click
+     */
+    private handleCancel;
+    /**
+     * Close the popconfirm
+     */
+    private closePopconfirm;
+    /**
+     * Handle dropdown open/close events
+     */
+    private handleOpenChange;
+    /**
+     * 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").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'nr-popconfirm': NrPopconfirmElement;
+    }
+}
+export {};
+//# sourceMappingURL=popconfirm.component.d.ts.map

package/popconfirm.component.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"popconfirm.component.d.ts","sourceRoot":"","sources":["../../../src/components/popconfirm/popconfirm.component.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAQ,UAAU,EAAE,MAAM,KAAK,CAAC;AAKvC,OAAO,EACH,mBAAmB,EACnB,iBAAiB,EACjB,oBAAoB,EACpB,cAAc,EACjB,MAAM,uBAAuB,CAAC;AAC/B,OAAO,sBAAsB,CAAC;AAC9B,OAAO,kBAAkB,CAAC;;AAE1B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmDG;AACH,qBACa,mBAAoB,SAAQ,wBAA6B;IACpE,OAAgB,MAAM,0BAAU;IAEvB,kBAAkB,WAA8B;IAEzD;;OAEG;IACkC,KAAK,SAAM;IAEhD;;OAEG;IACyB,WAAW,SAAM;IAE7C;;OAEG;IAC+C,MAAM,SAAQ;IAEhE;;OAEG;IACmD,UAAU,SAAY;IAE5E;;OAEG;IAC+C,MAAM,EAAE,oBAAoB,CAC/C;IAE/B;;OAEG;IACoD,UAAU,UAAQ;IAEzE;;OAEG;IACyB,IAAI,iBAA0B;IAE1D;;OAEG;IACkD,SAAS,SAAM;IAEpE;;OAEG;IACyB,SAAS,EAAE,mBAAmB,CAA2B;IAErF;;OAEG;IACyB,OAAO,EAAE,iBAAiB,CAA2B;IAEjF;;OAEG;IAC0B,QAAQ,UAAS;IAE9C;;OAEG;IAC0B,KAAK,UAAQ;IAE1C;;OAEG;IACyC,IAAI,UAAS;IAEzD;;OAEG;IACM,OAAO,CAAC,SAAS,CAAS;IAEnC;;OAEG;IACH,OAAO,KAAK,eAAe,GAE1B;IAED;;OAEG;IACH,OAAO,CAAC,aAAa,CAiCnB;IAEF;;OAEG;IACH,OAAO,CAAC,YAAY,CAYlB;IAEF;;OAEG;IACH,OAAO,CAAC,eAAe;IAOvB;;OAEG;IACH,OAAO,CAAC,gBAAgB,CAStB;IAEF;;OAEG;IACH,OAAO,CAAC,YAAY;IASpB;;OAEG;IACH,OAAO,CAAC,YAAY;IAgBpB;;OAEG;IACH,OAAO,CAAC,aAAa;IA+CZ,MAAM;CAehB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,eAAe,EAAE,mBAAmB,CAAC;KACtC;CACF"}

package/popconfirm.component.js

@@ -0,0 +1,353 @@
+/**
+ * @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 { classMap } from 'lit/directives/class-map.js';
+import { styles } from './popconfirm.style.js';
+import { NuralyUIBaseMixin } from '../../shared/base-mixin.js';
+import '../dropdown/index.js';
+import '../icon/index.js';
+/**
+ * # 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'];
+        /**
+         * 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;
+        /**
+         * 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();
+        };
+        /**
+         * Handle dropdown open/close events
+         */
+        this.handleOpenChange = (e) => {
+            this.open = e.detail.open;
+            this.dispatchEvent(new CustomEvent('nr-open-change', {
+                bubbles: true,
+                composed: true,
+                detail: { open: this.open },
+            }));
+        };
+    }
+    /**
+     * Reference to the dropdown element
+     */
+    get dropdownElement() {
+        var _a;
+        return (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('nr-dropdown');
+    }
+    /**
+     * Close the popconfirm
+     */
+    closePopconfirm() {
+        this.open = false;
+        if (this.dropdownElement) {
+            this.dropdownElement.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();
+        const okButtonClass = `ok-${this.okType}`;
+        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 `<div class="popconfirm-title">${this.title}</div>` : ''}
+            ${this.description
+            ? html `<div class="popconfirm-description">${this.description}</div>`
+            : ''}
+          </div>
+        </div>
+        <div class="popconfirm-buttons">
+          ${this.showCancel
+            ? html `
+                <button
+                  class="popconfirm-button popconfirm-button--cancel"
+                  @click=${this.handleCancel}
+                  type="button">
+                  ${this.cancelText}
+                </button>
+              `
+            : ''}
+          <button
+            class=${classMap({
+            'popconfirm-button': true,
+            [`popconfirm-button--${okButtonClass}`]: true,
+            'popconfirm-button--loading': this.okLoading,
+        })}
+            @click=${this.handleConfirm}
+            ?disabled=${this.okLoading}
+            type="button">
+            ${this.okText}
+          </button>
+        </div>
+      </div>
+    `;
+    }
+    render() {
+        return html `
+      <nr-dropdown
+        .open=${this.open}
+        .placement=${this.placement}
+        .trigger=${this.trigger}
+        ?disabled=${this.disabled}
+        ?arrow=${this.arrow}
+        @nr-dropdown-open=${this.handleOpenChange}
+        @nr-dropdown-close=${this.handleOpenChange}>
+        <slot name="trigger" slot="trigger"></slot>
+        <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/popconfirm.component.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"popconfirm.component.js","sourceRoot":"","sources":["../../../src/components/popconfirm/popconfirm.component.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license\n * Copyright 2023 Nuraly, Laabidi Aymen\n * SPDX-License-Identifier: MIT\n */\n\nimport { html, LitElement } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { styles } from './popconfirm.style.js';\nimport { NuralyUIBaseMixin } from '../../shared/base-mixin.js';\nimport {\n    PopconfirmPlacement,\n    PopconfirmTrigger,\n    PopconfirmButtonType,\n    PopconfirmIcon,\n} from './popconfirm.types.js';\nimport '../dropdown/index.js';\nimport '../icon/index.js';\n\n/**\n * # Popconfirm Component\n *\n * A pop-up confirmation dialog triggered by user interaction. It provides a simple and\n * compact way to ask for user confirmation before performing an action.\n *\n * ## Features\n * - Customizable title and description\n * - Configurable OK and Cancel buttons\n * - Multiple placement options (12 positions)\n * - Custom icons with predefined options\n * - Async confirmation support\n * - Multiple trigger modes (click, hover, focus)\n * - Theme-aware styling\n * - Keyboard accessibility\n *\n * ## Usage\n * ```html\n * <!-- Basic popconfirm -->\n * <nr-popconfirm\n *   title=\"Are you sure delete this task?\"\n *   ok-text=\"Yes\"\n *   cancel-text=\"No\">\n *   <button slot=\"trigger\">Delete</button>\n * </nr-popconfirm>\n *\n * <!-- With description -->\n * <nr-popconfirm\n *   title=\"Delete the task\"\n *   description=\"Are you sure you want to delete this task? This action cannot be undone.\"\n *   ok-type=\"danger\">\n *   <button slot=\"trigger\">Delete</button>\n * </nr-popconfirm>\n *\n * <!-- Custom icon -->\n * <nr-popconfirm\n *   title=\"Change status?\"\n *   icon=\"question-circle\"\n *   icon-color=\"#1890ff\">\n *   <button slot=\"trigger\">Change Status</button>\n * </nr-popconfirm>\n * ```\n *\n * @element nr-popconfirm\n * @fires nr-confirm - Fired when user confirms the action\n * @fires nr-cancel - Fired when user cancels the action\n * @fires nr-open-change - Fired when popconfirm visibility changes\n *\n * @slot trigger - Element that triggers the popconfirm\n *\n * @cssproperty --nuraly-popconfirm-icon-color - Custom icon color\n */\n@customElement('nr-popconfirm')\nexport class NrPopconfirmElement extends NuralyUIBaseMixin(LitElement) {\n  static override styles = styles;\n\n  override requiredComponents = ['nr-dropdown', 'nr-icon'];\n\n  /**\n   * Title of the confirmation box\n   */\n  @property({ type: String }) override title = '';\n\n  /**\n   * Description of the confirmation box (optional)\n   */\n  @property({ type: String }) description = '';\n\n  /**\n   * Text of the OK button\n   */\n  @property({ type: String, attribute: 'ok-text' }) okText = 'OK';\n\n  /**\n   * Text of the Cancel button\n   */\n  @property({ type: String, attribute: 'cancel-text' }) cancelText = 'Cancel';\n\n  /**\n   * Button type of the OK button\n   */\n  @property({ type: String, attribute: 'ok-type' }) okType: PopconfirmButtonType =\n    PopconfirmButtonType.Primary;\n\n  /**\n   * Show cancel button\n   */\n  @property({ type: Boolean, attribute: 'show-cancel' }) showCancel = true;\n\n  /**\n   * Icon name for the confirmation box\n   */\n  @property({ type: String }) icon = PopconfirmIcon.Warning;\n\n  /**\n   * Custom icon color\n   */\n  @property({ type: String, attribute: 'icon-color' }) iconColor = '';\n\n  /**\n   * Placement of the popconfirm\n   */\n  @property({ type: String }) placement: PopconfirmPlacement = PopconfirmPlacement.Top;\n\n  /**\n   * Trigger mode\n   */\n  @property({ type: String }) trigger: PopconfirmTrigger = PopconfirmTrigger.Click;\n\n  /**\n   * Whether the popconfirm is disabled\n   */\n  @property({ type: Boolean }) disabled = false;\n\n  /**\n   * Whether to show arrow\n   */\n  @property({ type: Boolean }) arrow = true;\n\n  /**\n   * Whether the popconfirm is open\n   */\n  @property({ type: Boolean, reflect: true }) open = false;\n\n  /**\n   * Loading state for OK button (for async operations)\n   */\n  @state() private okLoading = false;\n\n  /**\n   * Reference to the dropdown element\n   */\n  private get dropdownElement(): any {\n    return this.shadowRoot?.querySelector('nr-dropdown');\n  }\n\n  /**\n   * Handle confirm button click\n   */\n  private handleConfirm = async (e: Event) => {\n    e.stopPropagation();\n\n    const confirmEvent = new CustomEvent('nr-confirm', {\n      bubbles: true,\n      composed: true,\n      cancelable: true,\n      detail: { originalEvent: e },\n    });\n\n    const dispatched = this.dispatchEvent(confirmEvent);\n\n    // If event is not prevented, close the popconfirm\n    if (dispatched && !confirmEvent.defaultPrevented) {\n      // Check if the event handler returns a promise\n      const handler = (this as any).onConfirm;\n      if (handler && typeof handler === 'function') {\n        const result = handler(e);\n        if (result && typeof result.then === 'function') {\n          this.okLoading = true;\n          try {\n            await result;\n            this.closePopconfirm();\n          } catch (error) {\n            console.error('Confirmation failed:', error);\n          } finally {\n            this.okLoading = false;\n          }\n          return;\n        }\n      }\n      this.closePopconfirm();\n    }\n  };\n\n  /**\n   * Handle cancel button click\n   */\n  private handleCancel = (e: Event) => {\n    e.stopPropagation();\n\n    this.dispatchEvent(\n      new CustomEvent('nr-cancel', {\n        bubbles: true,\n        composed: true,\n        detail: { originalEvent: e },\n      })\n    );\n\n    this.closePopconfirm();\n  };\n\n  /**\n   * Close the popconfirm\n   */\n  private closePopconfirm() {\n    this.open = false;\n    if (this.dropdownElement) {\n      this.dropdownElement.open = false;\n    }\n  }\n\n  /**\n   * Handle dropdown open/close events\n   */\n  private handleOpenChange = (e: CustomEvent) => {\n    this.open = e.detail.open;\n    this.dispatchEvent(\n      new CustomEvent('nr-open-change', {\n        bubbles: true,\n        composed: true,\n        detail: { open: this.open },\n      })\n    );\n  };\n\n  /**\n   * Get icon color based on icon type\n   */\n  private getIconColor(): string {\n    if (this.iconColor) {\n      return this.iconColor;\n    }\n\n    // Return empty string to use CSS class colors\n    return '';\n  }\n\n  /**\n   * Get icon class based on icon type\n   */\n  private getIconClass(): string {\n    const iconColorMap: Record<string, string> = {\n      [PopconfirmIcon.Warning]: 'warning',\n      [PopconfirmIcon.Question]: 'question',\n      [PopconfirmIcon.Info]: 'info',\n      [PopconfirmIcon.Error]: 'error',\n      [PopconfirmIcon.Success]: 'success',\n    };\n\n    if (this.iconColor) {\n      return 'custom';\n    }\n\n    return iconColorMap[this.icon] || 'warning';\n  }\n\n  /**\n   * Render the popconfirm content\n   */\n  private renderContent() {\n    const iconClass = this.getIconClass();\n    const iconColor = this.getIconColor();\n    const okButtonClass = `ok-${this.okType}`;\n\n    return html`\n      <div class=\"popconfirm-content\">\n        <div class=\"popconfirm-message\">\n          <div\n            class=\"popconfirm-icon popconfirm-icon--${iconClass}\"\n            style=${iconColor ? `color: ${iconColor}` : ''}>\n            <nr-icon name=${this.icon}></nr-icon>\n          </div>\n          <div class=\"popconfirm-text\">\n            ${this.title ? html`<div class=\"popconfirm-title\">${this.title}</div>` : ''}\n            ${this.description\n              ? html`<div class=\"popconfirm-description\">${this.description}</div>`\n              : ''}\n          </div>\n        </div>\n        <div class=\"popconfirm-buttons\">\n          ${this.showCancel\n            ? html`\n                <button\n                  class=\"popconfirm-button popconfirm-button--cancel\"\n                  @click=${this.handleCancel}\n                  type=\"button\">\n                  ${this.cancelText}\n                </button>\n              `\n            : ''}\n          <button\n            class=${classMap({\n              'popconfirm-button': true,\n              [`popconfirm-button--${okButtonClass}`]: true,\n              'popconfirm-button--loading': this.okLoading,\n            })}\n            @click=${this.handleConfirm}\n            ?disabled=${this.okLoading}\n            type=\"button\">\n            ${this.okText}\n          </button>\n        </div>\n      </div>\n    `;\n  }\n\n  override render() {\n    return html`\n      <nr-dropdown\n        .open=${this.open}\n        .placement=${this.placement as any}\n        .trigger=${this.trigger as any}\n        ?disabled=${this.disabled}\n        ?arrow=${this.arrow}\n        @nr-dropdown-open=${this.handleOpenChange}\n        @nr-dropdown-close=${this.handleOpenChange}>\n        <slot name=\"trigger\" slot=\"trigger\"></slot>\n        <div slot=\"content\">${this.renderContent()}</div>\n      </nr-dropdown>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nr-popconfirm': NrPopconfirmElement;\n  }\n}\n"]}

package/popconfirm.style.d.ts

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

package/popconfirm.style.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"popconfirm.style.d.ts","sourceRoot":"","sources":["../../../src/components/popconfirm/popconfirm.style.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,MAAM,yBA4MlB,CAAC"}