bromcom-ui-next 0.1.28 → 0.1.30

package/dist/collection/components/pop-confirm/pop-confirm.component.js.map

@@ -1 +1 @@
-{"version":3,"file":"pop-confirm.component.js","sourceRoot":"","sources":["../../../src/components/pop-confirm/pop-confirm.component.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Prop, State, h, Event, EventEmitter, Element, ComponentInterface, Fragment, Method } from '@stencil/core';\nimport { computePosition, flip, shift, offset, arrow, type Placement } from '@floating-ui/dom';\nimport { tv } from '@utils/tv';\n\n// Status icons for different states\nconst statusIcons = {\n  info: 'fa-solid fa-circle-info',\n  success: 'fa-solid fa-circle-check',\n  warning: 'fa-solid fa-triangle-exclamation',\n  error: 'fa-solid fa-circle-x',\n};\n\n/**\n * @component BcmPopConfirm\n * @description A floating confirmation pop-up component that prompts users for action confirmation, triggered by click or hover events.\n * Offers customizable header, body content, and footer areas through slots, with accessibility and positioning features.\n *\n * @example Basic usage\n * <bcm-pop-confirm target-id=\"trigger-btn\" placement=\"right\" header-text=\"Confirm Action\" description=\"Are you sure?\" confirm-text=\"Yes\" cancel-text=\"No\" status=\"warning\"></bcm-pop-confirm>\n *\n * @example With all slots and custom styling\n * <bcm-pop-confirm target-id=\"trigger-btn\" placement=\"left\" header-text=\"Delete Item\" description=\"Are you sure you want to delete this item?\" confirm-text=\"Delete\" cancel-text=\"Cancel\" status=\"error\" arrow-color=\"#ffffff\">\n *   <span slot=\"header\">Custom Header Text</span>\n *   <span slot=\"body\">Additional details here</span>\n *   <span slot=\"footer\">Custom Footer Action</span>\n * </bcm-pop-confirm>\n *\n * @example Event handling\n * // Listen to confirmation events\n * const popConfirm = document.querySelector('bcm-pop-confirm');\n * popConfirm.addEventListener('bcmConfirm', () => {\n *   console.log('User confirmed the action!');\n * });\n * popConfirm.addEventListener('bcmCancel', () => {\n *   console.log('User canceled the action!');\n * });\n *\n * // Programmatically control pop-up\n * await popConfirm.show(); // Show the pop-up\n * await popConfirm.hide(); // Hide the pop-up\n *\n * @prop {string} arrowColor - The color of the arrow pointing to the trigger element (default: 'var(--bcm-ui-color-background-basic-panel)')\n * @prop {string} cancelText - Text displayed on the cancel button (default: 'Cancel')\n * @prop {string} confirmText - Text displayed on the confirm button (default: 'Yes')\n * @prop {string} description - The description or body content of the pop-up (default: '')\n * @prop {string} headerText - The header text displayed at the top of the pop-up (default: '')\n * @prop {Placement} placement - The placement position of the pop-up relative to the trigger (default: 'right')\n * @prop {('small' | 'medium' | 'large')} size - The size of the pop-up, determining its dimensions (default: 'medium')\n * @prop {('info' | 'error' | 'warning' | 'success' | 'default')} status - The status of the pop-up, affecting its icon and color (default: 'info')\n * @prop {boolean} statusIcon - Whether to display a status icon based on the `status` prop (default: true)\n * @prop {string} targetId - The ID of the trigger element (e.g., a button) that opens the pop-up\n *\n * @slot header - Custom content for the header area (optional)\n * @slot body - Custom content for the main body area (optional, falls back to `description`)\n * @slot footer - Custom content for the footer area (optional)\n *\n * @event {EventEmitter<void>} bcmConfirm - Emitted when the user confirms the action in the pop-up\n * @event {EventEmitter<void>} bcmCancel - Emitted when the user cancels the action in the pop-up\n *\n * @csspart container - The root container element of the pop-up\n * @csspart header - The header section with title and close icon\n * @csspart content - The main content section of the pop-up\n * @csspart footer - The footer section with confirm/cancel buttons\n * @csspart arrow - The positioning arrow pointing to the trigger\n *\n * @css {string} --popover-radius - Border radius of the pop-up (default: defined in CSS)\n * @css {string} --popover-bg - Background color of the pop-up\n * @css {string} --text-color - Text color of the pop-up based on status\n *\n * @methods\n * show() - Programmatically shows the pop-up\n * hide() - Programmatically hides the pop-up\n */\n@Component({\n  tag: 'bcm-pop-confirm',\n  styleUrl: 'pop-confirm.css',\n  shadow: true,\n})\nexport class PopConfirm implements ComponentInterface {\n  // DOM element reference\n  @Element() el: HTMLElement;\n\n  /**\n   * The color of the arrow pointing to the trigger element.\n   * Can be a CSS custom property or a specific color value.\n   * @default 'var(--bcm-ui-color-background-basic-panel)'\n   */\n  @Prop()\n  arrowColor: string = 'var(--bcm-ui-color-background-basic-panel)'; // Default color\n\n  /**\n   * The text displayed on the cancel button.\n   * @default 'Cancel'\n   */\n  @Prop()\n  cancelText: string = 'Cancel';\n\n  /**\n   * The text displayed on the confirm button.\n   * @default 'Yes'\n   */\n  @Prop()\n  confirmText: string = 'Yes';\n\n  /**\n   * The description or body content of the pop-up.\n   * @default ''\n   */\n  @Prop()\n  description: string = '';\n\n  /**\n   * The header text displayed at the top of the pop-up.\n   * @default ''\n   */\n  @Prop()\n  headerText: string = '';\n\n  /**\n   * The placement position of the pop-up relative to the trigger element.\n   * @default 'bottom'\n   */\n  @Prop()\n  placement: Placement = 'bottom';\n\n  /**\n   * The size of the pop-up, determining its dimensions and padding.\n   * @default 'medium'\n   */\n  @Prop()\n  size: 'small' | 'medium' | 'large' = 'medium';\n\n  /**\n   * The status of the pop-up, affecting its icon and color scheme.\n   * @default 'info'\n   */\n  @Prop()\n  status: 'info' | 'error' | 'warning' | 'success' = 'info';\n\n  /**\n   * Whether to display a status icon based on the `status` prop.\n   * @default true\n   */\n  @Prop()\n  statusIcon: boolean = true;\n\n  /**\n   * The ID of the trigger element (e.g., a button) that opens the pop-up.\n   */\n  @Prop()\n  targetId: string;\n\n  // State variables\n  /**\n   * Indicates whether the pop-up is currently open or closed.\n   * @default false\n   */\n  @State()\n  isOpen: boolean = false;\n\n  /**\n   * The current placement position of the pop-up after computation.\n   */\n  @State()\n  currentPlacement: 'top' | 'bottom' | 'left' | 'right';\n\n  // Event Emitters\n  /**\n   * Emits an event when the user confirms the action in the pop-up.\n   */\n  @Event({\n    composed: false,\n    bubbles: false,\n    cancelable: true,\n  })\n  bcmConfirm: EventEmitter<void>;\n\n  /**\n   * Emits an event when the user cancels the action in the pop-up.\n   */\n  @Event({\n    composed: false,\n    bubbles: false,\n    cancelable: true,\n  })\n  bcmCancel: EventEmitter<void>;\n\n  // Element references\n  private triggerElement: HTMLElement;\n  private popoverElement: HTMLElement;\n  private arrowElement: HTMLElement;\n\n  /**\n   * Lifecycle method called when the component is loaded.\n   * Initializes the trigger element and attaches a click event listener.\n   */\n  componentDidLoad() {\n    this.triggerElement = document.getElementById(this.targetId);\n    if (!this.triggerElement) {\n      console.warn(`Target element with ID '${this.targetId}' not found.`);\n      return;\n    }\n    this.triggerElement.addEventListener('click', this.handleTriggerClick);\n  }\n\n  /**\n   * Handles the click event on the trigger element to open the pop-up.\n   * Prevents default behavior and propagation, then opens the pop-up if it's closed.\n   * @param event The mouse event triggering the action.\n   */\n  private handleTriggerClick = (event: Event) => {\n    event.preventDefault();\n    event.stopPropagation();\n\n    if (!this.isOpen) {\n      this.isOpen = true;\n      requestAnimationFrame(() => {\n        this.updatePosition();\n      });\n    }\n  };\n\n  /**\n   * Handles the confirm button click, closing the pop-up and emitting the confirm event.\n   * Prevents default behavior and propagation.\n   * @param event The mouse event triggering the action.\n   */\n  private handleConfirm = (event: Event) => {\n    event.preventDefault();\n    event.stopPropagation();\n    this.isOpen = false;\n    this.bcmConfirm.emit();\n  };\n\n  /**\n   * Handles the cancel button click, closing the pop-up and emitting the cancel event.\n   * Prevents default behavior and propagation.\n   * @param event The mouse event triggering the action.\n   */\n  private handleCancel = (event: Event) => {\n    event.preventDefault();\n    event.stopPropagation();\n    this.isOpen = false;\n    this.bcmCancel.emit();\n  };\n\n  /**\n   * Programmatically shows the pop-up by setting `isOpen` to true and updating its position.\n   * @returns A promise that resolves when the pop-up is shown.\n   */\n  @Method()\n  async show() {\n    this.isOpen = true;\n    requestAnimationFrame(() => {\n      this.updatePosition();\n    });\n  }\n\n  /**\n   * Programmatically hides the pop-up by setting `isOpen` to false.\n   * @returns A promise that resolves when the pop-up is hidden.\n   */\n  @Method()\n  async hide() {\n    this.isOpen = false;\n  }\n\n  /**\n   * Updates the position of the pop-up relative to the trigger element using Floating UI.\n   * Ensures the pop-up stays within viewport bounds and positions the arrow correctly.\n   */\n  private updatePosition = async () => {\n    if (!this.triggerElement || !this.popoverElement || !this.arrowElement) return;\n\n    const { x, y, placement, middlewareData } = await computePosition(this.triggerElement, this.popoverElement, {\n      placement: this.placement,\n      middleware: [offset(12), flip({ fallbackPlacements: ['top', 'left', 'bottom', 'right'] }), shift({ padding: 8 }), arrow({ element: this.arrowElement })],\n    });\n\n    this.currentPlacement = placement as any;\n\n    Object.assign(this.popoverElement.style, {\n      left: `${x}px`,\n      top: `${y}px`,\n    });\n\n    const { x: arrowX, y: arrowY } = middlewareData.arrow || { x: 0, y: 0 };\n    const basePlacement = placement.split('-')[0] as 'top' | 'right' | 'bottom' | 'left';\n\n    const staticSide = {\n      top: 'bottom',\n      right: 'left',\n      bottom: 'top',\n      left: 'right',\n    }[basePlacement];\n\n    Object.assign(this.arrowElement.style, {\n      left: arrowX != null ? `${arrowX}px` : '',\n      top: arrowY != null ? `${arrowY}px` : '',\n      [staticSide]: ['top', 'bottom'].includes(basePlacement) ? '-8px' : '-12px',\n    });\n  };\n\n  /**\n   * Returns the dynamic styles for the pop-up, including text and arrow colors.\n   * @returns An object containing CSS custom properties.\n   */\n  private get popoverStyle() {\n    return {\n      '--text-color': `var(--bcm-ui-color-text-${this.status})`,\n      '--arrow-color': this.arrowColor,\n    };\n  }\n\n  /**\n   * Lifecycle method called when the component is removed from the DOM.\n   * Cleans up the event listener to prevent memory leaks.\n   */\n  disconnectedCallback() {\n    if (this.triggerElement) {\n      this.triggerElement.removeEventListener('click', this.handleTriggerClick);\n    }\n  }\n\n  /**\n   * Defines Tailwind Variants classes for the pop-up's structure and styling.\n   * Supports different sizes and generates dynamic class names.\n   */\n  private classes = tv({\n    slots: {\n      container: 'absolute bcm-ui-element flex flex-col shadow-2 rounded-[--popover-radius] bg-[--popover-bg] z-[9999] w-full',\n      header: 'flex justify-between items-center',\n      headerLeftContent: 'flex items-center gap-2 text-size-inherit text-[--text-color]',\n      closeIconArea: 'flex flex-row gap-2 size-6 items-center justify-center hover:bg-gray-100 rounded-full cursor-pointer text-size-inherit',\n      titleContainer: '!text-color-header font-semibold',\n      footer: 'flex flex-row justify-end gap-2',\n    },\n    variants: {\n      size: {\n        small: {\n          container: 'text-size-4 max-w-64 p-4 gap-4',\n          header: 'text-size-4',\n          footer: 'text-size-4',\n          titleContainer: 'text-size-5',\n          headerLeftContent: 'gap-2',\n        },\n        medium: {\n          container: 'text-size-5 max-w-80 gap-6 p-6',\n          header: 'text-size-5',\n          footer: 'text-size-5',\n          titleContainer: 'text-size-6',\n          headerLeftContent: 'gap-2.5',\n        },\n        large: {\n          container: 'text-size-6 max-w-96 p-8 gap-8',\n          header: 'text-size-6',\n          footer: 'text-size-6',\n          titleContainer: 'text-size-7',\n          headerLeftContent: 'gap-3',\n        },\n      },\n    },\n    defaultVariants: {\n      size: 'medium',\n    },\n  });\n\n  /**\n   * Renders the pop-up component, showing it only when `isOpen` is true.\n   * Includes header, main content, and footer sections with dynamic styling and slots for customization.\n   * @returns JSX.Element representing the pop-up or an empty fragment if closed.\n   */\n  render() {\n    const { container, header, footer, headerLeftContent, closeIconArea, titleContainer } = this.classes({\n      size: this.size,\n    });\n    return (\n      <Fragment>\n        {this.isOpen && (\n          <div role=\"dialog\" aria-labelledby=\"pop-confirm-title\" style={this.popoverStyle} class={container()} ref={el => (this.popoverElement = el)}>\n            {/* Arrow */}\n            <div ref={el => (this.arrowElement = el)} class={`arrow w-4 h-2 ${this.currentPlacement ?? 'top'}`}></div>\n\n            {/* Header Content */}\n            <header class={header()}>\n              <div class={headerLeftContent()}>\n                {this.statusIcon && <bcm-icon icon-name={statusIcons[this.status]}></bcm-icon>}\n                <span class={titleContainer()}>{this.headerText}</span>\n                <slot name=\"header\"></slot>\n              </div>\n              <div class={closeIconArea()} onClick={this.handleCancel}>\n                <bcm-icon icon-name=\"far fa-times\"></bcm-icon>\n              </div>\n            </header>\n\n            {/* Main Content */}\n            <main class=\"flex-1 mx-auto font-sans text-pretty\">\n              <slot name=\"body\">{this.description}</slot>\n            </main>\n\n            {/* Footer Content */}\n            <footer class={footer()}>\n              <bcm-button kind=\"outline\" size={this.size} onClick={this.handleCancel}>\n                {this.cancelText}\n              </bcm-button>\n              <bcm-button size={this.size} status={this.status} kind=\"primary\" onClick={this.handleConfirm}>\n                {this.confirmText}\n              </bcm-button>\n              <slot name=\"footer\"></slot>\n            </footer>\n          </div>\n        )}\n      </Fragment>\n    );\n  }\n}\n"]}
+{"version":3,"file":"pop-confirm.component.js","sourceRoot":"","sources":["../../../src/components/pop-confirm/pop-confirm.component.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Event, EventEmitter, h, Listen, Method, Prop, State, Watch } from '@stencil/core';\nimport { computePosition, flip, shift, offset, arrow, autoUpdate } from '@floating-ui/dom';\nimport { tv } from '@utils/tv';\n\nexport type PopConfirmPlacement = 'top' | 'right' | 'bottom' | 'left';\nexport type PopConfirmSize = 'small' | 'medium' | 'large';\nexport type PopConfirmStatus = 'info' | 'success' | 'warning' | 'error';\n\nconst statusIcons = {\n  info: 'fa-solid fa-circle-info',\n  success: 'fa-solid fa-circle-check',\n  warning: 'fa-solid fa-triangle-exclamation',\n  error: 'fa-solid fa-circle-xmark',\n};\n\n/**\n * @component BcmPopConfirm\n * @description A confirmation popover component that displays a confirmation dialog with customizable actions.\n * Built on the native Popover API for top-layer rendering and Floating UI for intelligent positioning.\n * Ideal for confirming destructive actions or important decisions inline.\n *\n * @slot - Default slot for the trigger element that opens the confirmation popover\n * @slot header - Custom header content (overrides headerText prop)\n * @slot body - Custom body content (overrides description prop)\n * @slot footer - Custom footer content with action buttons (overrides default confirm/cancel buttons)\n *\n * @csspart container - The main popover container element\n * @csspart arrow - The arrow pointer element\n * @csspart body - The body/description section\n * @csspart footer - The footer section with action buttons\n *\n * @example Basic Usage\n * ```html\n * <bcm-pop-confirm\n *   header-text=\"Delete Item?\"\n *   description=\"Are you sure you want to delete this item? This action cannot be undone.\"\n *   status=\"error\"\n * >\n *   <bcm-button status=\"error\">Delete</bcm-button>\n * </bcm-pop-confirm>\n * ```\n *\n * @example With Event Handlers\n * ```html\n * <bcm-pop-confirm\n *   id=\"deleteConfirm\"\n *   header-text=\"Confirm Delete\"\n *   description=\"This will permanently delete the item.\"\n *   status=\"warning\"\n *   confirm-text=\"Yes, Delete\"\n *   cancel-text=\"No, Keep It\"\n * >\n *   <bcm-button>Delete Item</bcm-button>\n * </bcm-pop-confirm>\n *\n * <script>\n *   const popconfirm = document.getElementById('deleteConfirm');\n *   popconfirm.addEventListener('bcmConfirm', () => {\n *     console.log('User confirmed deletion');\n *     // Perform delete operation\n *   });\n *   popconfirm.addEventListener('bcmCancel', () => {\n *     console.log('User cancelled deletion');\n *   });\n * </script>\n * ```\n *\n * @example Different Status Types\n * ```html\n * <!-- Info (default) -->\n * <bcm-pop-confirm header-text=\"Information\" description=\"This is an info message\">\n *   <bcm-button>Info</bcm-button>\n * </bcm-pop-confirm>\n *\n * <!-- Success -->\n * <bcm-pop-confirm status=\"success\" header-text=\"Confirm Action\" description=\"Proceed with this action?\">\n *   <bcm-button status=\"success\">Proceed</bcm-button>\n * </bcm-pop-confirm>\n *\n * <!-- Warning -->\n * <bcm-pop-confirm status=\"warning\" header-text=\"Warning\" description=\"This action may have consequences\">\n *   <bcm-button status=\"warning\">Continue</bcm-button>\n * </bcm-pop-confirm>\n *\n * <!-- Error/Danger -->\n * <bcm-pop-confirm status=\"error\" header-text=\"Danger Zone\" description=\"This is a destructive action\">\n *   <bcm-button status=\"error\">Delete</bcm-button>\n * </bcm-pop-confirm>\n * ```\n *\n * @example Custom Content with Slots\n * ```html\n * <bcm-pop-confirm status=\"warning\">\n *   <bcm-button>Custom Confirm</bcm-button>\n *\n *   <div slot=\"header\">\n *     <strong>Custom Header</strong>\n *   </div>\n *\n *   <div slot=\"body\">\n *     <p>This is custom body content with <strong>HTML formatting</strong>.</p>\n *     <ul>\n *       <li>Point 1</li>\n *       <li>Point 2</li>\n *     </ul>\n *   </div>\n *\n *   <div slot=\"footer\">\n *     <bcm-button kind=\"outline\" size=\"small\">Maybe Later</bcm-button>\n *     <bcm-button status=\"success\" size=\"small\">Confirm</bcm-button>\n *   </div>\n * </bcm-pop-confirm>\n * ```\n *\n * @example Different Sizes\n * ```html\n * <!-- Small -->\n * <bcm-pop-confirm size=\"small\" header-text=\"Small\" description=\"Compact confirmation\">\n *   <bcm-button size=\"small\">Small</bcm-button>\n * </bcm-pop-confirm>\n *\n * <!-- Medium (default) -->\n * <bcm-pop-confirm size=\"medium\" header-text=\"Medium\" description=\"Standard confirmation\">\n *   <bcm-button size=\"medium\">Medium</bcm-button>\n * </bcm-pop-confirm>\n *\n * <!-- Large -->\n * <bcm-pop-confirm size=\"large\" header-text=\"Large\" description=\"Spacious confirmation with more room for content\">\n *   <bcm-button size=\"large\">Large</bcm-button>\n * </bcm-pop-confirm>\n * ```\n *\n * @example Programmatic Control\n * ```html\n * <bcm-pop-confirm id=\"myConfirm\" header-text=\"Confirm\" description=\"Are you sure?\">\n *   <bcm-button>Trigger</bcm-button>\n * </bcm-pop-confirm>\n *\n * <bcm-button id=\"showBtn\">Show Programmatically</bcm-button>\n * <bcm-button id=\"hideBtn\">Hide Programmatically</bcm-button>\n *\n * <script>\n *   const popconfirm = document.getElementById('myConfirm');\n *   document.getElementById('showBtn').addEventListener('click', () => {\n *     popconfirm.show();\n *   });\n *   document.getElementById('hideBtn').addEventListener('click', () => {\n *     popconfirm.hide();\n *   });\n * </script>\n * ```\n *\n * @example Without Status Icon\n * ```html\n * <bcm-pop-confirm\n *   header-text=\"Simple Confirmation\"\n *   description=\"No status icon shown\"\n *   status-icon={false}\n * >\n *   <bcm-button>Click Me</bcm-button>\n * </bcm-pop-confirm>\n * ```\n *\n * @example Different Placements\n * ```html\n * <bcm-pop-confirm placement=\"top\" header-text=\"Top\" description=\"Opens above\">\n *   <bcm-button>Top</bcm-button>\n * </bcm-pop-confirm>\n *\n * <bcm-pop-confirm placement=\"right\" header-text=\"Right\" description=\"Opens to the right\">\n *   <bcm-button>Right</bcm-button>\n * </bcm-pop-confirm>\n *\n * <bcm-pop-confirm placement=\"bottom\" header-text=\"Bottom\" description=\"Opens below\">\n *   <bcm-button>Bottom</bcm-button>\n * </bcm-pop-confirm>\n *\n * <bcm-pop-confirm placement=\"left\" header-text=\"Left\" description=\"Opens to the left\">\n *   <bcm-button>Left</bcm-button>\n * </bcm-pop-confirm>\n * ```\n */\n@Component({\n  tag: 'bcm-pop-confirm',\n  styleUrl: 'pop-confirm.css',\n  shadow: true,\n})\nexport class BcmPopConfirm {\n  @Element() host: HTMLElement;\n\n  private popconfirmRef?: HTMLDivElement;\n  private arrowRef?: HTMLDivElement;\n  private triggerRef?: HTMLElement;\n  private cleanupAutoUpdate?: () => void;\n  private popconfirmId: string;\n\n  /**\n   * @prop {PopConfirmPlacement} placement - Position of the popover relative to the trigger element.\n   * Automatically flips if there's not enough space.\n   * Default: 'top'\n   */\n  @Prop() placement: PopConfirmPlacement = 'top';\n\n  /**\n   * @prop {PopConfirmSize} size - Size variant that controls padding and text size.\n   * - 'small': Compact size with minimal padding\n   * - 'medium': Standard size\n   * - 'large': Spacious size with more padding\n   * Default: 'medium'\n   */\n  @Prop() size: PopConfirmSize = 'medium';\n\n  /**\n   * @prop {PopConfirmStatus} status - Status type that determines the color scheme and icon.\n   * - 'info': Informational (blue)\n   * - 'success': Success/positive action (green)\n   * - 'warning': Warning/caution (yellow)\n   * - 'error': Error/destructive action (red)\n   * Default: 'info'\n   */\n  @Prop() status: PopConfirmStatus = 'info';\n\n  /**\n   * @prop {string} headerText - Text displayed in the header section.\n   * Can be overridden by using the 'header' slot.\n   * Default: ''\n   */\n  @Prop() headerText: string = '';\n\n  /**\n   * @prop {string} description - Description text displayed in the body section.\n   * Can be overridden by using the 'body' slot.\n   * Default: ''\n   */\n  @Prop() description: string = '';\n\n  /**\n   * @prop {string} confirmText - Text for the confirm button.\n   * Default: 'Yes'\n   */\n  @Prop() confirmText: string = 'Yes';\n\n  /**\n   * @prop {string} cancelText - Text for the cancel button.\n   * Default: 'Cancel'\n   */\n  @Prop() cancelText: string = 'Cancel';\n\n  /**\n   * @prop {boolean} showArrow - Whether to show the arrow pointing to the trigger.\n   * Default: true\n   */\n  @Prop() showArrow: boolean = true;\n\n  /**\n   * @prop {boolean} statusIcon - Whether to show the status icon in the header.\n   * Icon only shows if headerText is also provided.\n   * Default: true\n   */\n  @Prop() statusIcon: boolean = true;\n\n  /**\n   * @prop {number} offsetDistance - Distance in pixels between the popover and trigger element.\n   * Default: 12\n   */\n  @Prop() offsetDistance: number = 12;\n\n  /**\n   * @prop {boolean} closeOnOutsideClick - Whether to close when clicking outside the popover.\n   * Default: true\n   */\n  @Prop() closeOnOutsideClick: boolean = true;\n\n  /**\n   * @prop {boolean} closeOnEscape - Whether to close when pressing the Escape key.\n   * Default: true\n   */\n  @Prop() closeOnEscape: boolean = true;\n\n  @State() isOpen = false;\n\n  /**\n   * @event bcmBeforeOpen - Emitted before the popover opens.\n   * Useful for performing actions before the popover becomes visible.\n   */\n  @Event({ composed: false, bubbles: false }) bcmBeforeOpen: EventEmitter<void>;\n\n  /**\n   * @event bcmOpen - Emitted when the popover is opened.\n   * Useful for tracking when the popover becomes visible.\n   */\n  @Event({ composed: false, bubbles: false }) bcmOpen: EventEmitter<void>;\n\n  /**\n   * @event bcmBeforeClose - Emitted before the popover closes.\n   * Useful for performing cleanup actions before hiding.\n   */\n  @Event({ composed: false, bubbles: false }) bcmBeforeClose: EventEmitter<void>;\n\n  /**\n   * @event bcmClose - Emitted when the popover is closed.\n   * Useful for tracking when the popover is hidden.\n   */\n  @Event({ composed: false, bubbles: false }) bcmClose: EventEmitter<void>;\n\n  /**\n   * @event bcmConfirm - Emitted when the user clicks the confirm button.\n   * This is where you should handle the confirmed action.\n   */\n  @Event({ composed: false, bubbles: false }) bcmConfirm: EventEmitter<void>;\n\n  /**\n   * @event bcmCancel - Emitted when the user clicks cancel, presses Escape, or clicks outside.\n   * Useful for tracking when the user dismisses the confirmation.\n   */\n  @Event({ composed: false, bubbles: false }) bcmCancel: EventEmitter<void>;\n\n  @Watch('isOpen')\n  async handleOpenChange(open: boolean) {\n    if (!this.popconfirmRef) return;\n\n    if (open) {\n      this.popconfirmRef.showPopover();\n      await new Promise(resolve => requestAnimationFrame(() => resolve(undefined)));\n      await this.updatePosition();\n      this.startAutoUpdate();\n      this.bcmOpen.emit();\n      // Add outside click listener after a frame to avoid immediate close\n      if (this.closeOnOutsideClick) {\n        requestAnimationFrame(() => {\n          document.addEventListener('click', this.handleOutsideClick);\n        });\n      }\n    } else {\n      this.popconfirmRef.hidePopover();\n      this.stopAutoUpdate();\n      this.bcmClose.emit();\n      document.removeEventListener('click', this.handleOutsideClick);\n    }\n  }\n\n  /**\n   * Programmatically shows the popconfirm.\n   * @returns Promise that resolves when the show operation begins\n   */\n  @Method()\n  async show(): Promise<void> {\n    if (this.isOpen) return;\n    this.bcmBeforeOpen.emit();\n    this.isOpen = true;\n  }\n\n  /**\n   * Programmatically hides the popconfirm.\n   * @returns Promise that resolves when the hide operation begins\n   */\n  @Method()\n  async hide(): Promise<void> {\n    if (!this.isOpen) return;\n    this.bcmBeforeClose.emit();\n    this.isOpen = false;\n  }\n\n  /**\n   * Toggles the popconfirm visibility.\n   * If open, it will close. If closed, it will open.\n   * @returns Promise that resolves when the toggle operation completes\n   */\n  @Method()\n  async toggle(): Promise<void> {\n    if (this.isOpen) {\n      await this.hide();\n    } else {\n      await this.show();\n    }\n  }\n\n  private startAutoUpdate() {\n    if (!this.triggerRef || !this.popconfirmRef) return;\n\n    this.cleanupAutoUpdate = autoUpdate(this.triggerRef, this.popconfirmRef, () => this.updatePosition(), {\n      ancestorScroll: true,\n      ancestorResize: true,\n      elementResize: true,\n      layoutShift: true,\n    });\n  }\n\n  private stopAutoUpdate() {\n    if (this.cleanupAutoUpdate) {\n      this.cleanupAutoUpdate();\n      this.cleanupAutoUpdate = undefined;\n    }\n  }\n\n  private async updatePosition() {\n    if (!this.triggerRef || !this.popconfirmRef) return;\n\n    const middleware = [offset(this.offsetDistance), flip(), shift({ padding: 8 })];\n\n    if (this.showArrow && this.arrowRef) {\n      middleware.push(arrow({ element: this.arrowRef }));\n    }\n\n    const virtualElement = {\n      getBoundingClientRect: () => this.triggerRef.getBoundingClientRect(),\n    };\n\n    const { x, y, placement, middlewareData } = await computePosition(virtualElement, this.popconfirmRef, {\n      placement: this.placement,\n      strategy: 'fixed',\n      middleware,\n    });\n\n    this.popconfirmRef.style.left = `${x}px`;\n    this.popconfirmRef.style.top = `${y}px`;\n\n    if (this.showArrow && this.arrowRef && middlewareData.arrow) {\n      const { x: arrowX, y: arrowY } = middlewareData.arrow;\n      const side = placement.split('-')[0] as 'top' | 'right' | 'bottom' | 'left';\n\n      const staticSide = {\n        top: 'bottom',\n        right: 'left',\n        bottom: 'top',\n        left: 'right',\n      }[side];\n\n      Object.assign(this.arrowRef.style, {\n        left: arrowX != null ? `${arrowX}px` : '',\n        top: arrowY != null ? `${arrowY}px` : '',\n        right: '',\n        bottom: '',\n        [staticSide]: '-4px',\n      });\n    }\n  }\n\n  private handleSlotChange = () => {\n    const slot = this.host.shadowRoot?.querySelector('slot:not([name])');\n    if (!slot) return;\n\n    const elements = (slot as HTMLSlotElement).assignedElements();\n    const assignedElement = elements[0] as HTMLElement;\n\n    this.triggerRef = (assignedElement || this.host) as HTMLElement;\n\n    if (!this.triggerRef) return;\n\n    if (this.popconfirmRef && this.popconfirmId) {\n      this.triggerRef.setAttribute('aria-describedby', this.popconfirmId);\n    }\n\n    this.removeTriggerListeners();\n    this.setupTriggerListeners();\n  };\n\n  private setupTriggerListeners() {\n    if (!this.triggerRef) return;\n    this.triggerRef.addEventListener('click', this.handleTriggerClick);\n  }\n\n  private removeTriggerListeners() {\n    if (!this.triggerRef) return;\n    this.triggerRef.removeEventListener('click', this.handleTriggerClick);\n  }\n\n  private handleTriggerClick = () => {\n    this.toggle();\n  };\n\n  private handleOutsideClick = (e: Event) => {\n    if (!this.closeOnOutsideClick || !this.isOpen) return;\n\n    const target = e.target as Node;\n    if (!this.host.contains(target) && !this.popconfirmRef?.contains(target)) {\n      this.handleCancel();\n    }\n  };\n\n  @Listen('keydown', { target: 'document' })\n  handleKeyDown(e: KeyboardEvent) {\n    if (!this.closeOnEscape || !this.isOpen) return;\n\n    if (e.key === 'Escape') {\n      // Check if this is the topmost open popconfirm\n      const openPopconfirms = Array.from(document.querySelectorAll('bcm-pop-confirm')).filter(el => {\n        const popconfirmEl = el.shadowRoot?.querySelector('[popover]');\n        return popconfirmEl?.matches(':popover-open');\n      });\n\n      const topPopconfirm = openPopconfirms[openPopconfirms.length - 1] as unknown as HTMLElement;\n      if (topPopconfirm === (this.host as unknown as HTMLElement)) {\n        e.preventDefault();\n        e.stopPropagation();\n        this.handleCancel();\n      }\n    }\n  }\n\n  private handleToggle = (e: Event) => {\n    const toggleEvent = e as ToggleEvent;\n    if (toggleEvent.newState === 'open' && !this.isOpen) {\n      this.isOpen = true;\n    } else if (toggleEvent.newState === 'closed' && this.isOpen) {\n      this.isOpen = false;\n    }\n  };\n\n  private handleConfirm = () => {\n    this.bcmConfirm.emit();\n    this.hide();\n  };\n\n  private handleCancel = () => {\n    this.bcmCancel.emit();\n    this.hide();\n  };\n\n  componentWillLoad() {\n    this.popconfirmId = `popconfirm-${Math.random().toString(36).substring(2, 11)}`;\n  }\n\n  componentDidLoad() {\n    if (this.popconfirmRef) {\n      this.popconfirmRef.addEventListener('toggle', this.handleToggle);\n    }\n  }\n\n  disconnectedCallback() {\n    this.stopAutoUpdate();\n    this.removeTriggerListeners();\n    document.removeEventListener('click', this.handleOutsideClick);\n    if (this.popconfirmRef) {\n      this.popconfirmRef.removeEventListener('toggle', this.handleToggle);\n    }\n  }\n\n  private popconfirmClass = tv({\n    slots: {\n      container: 'bcm-ui-element fixed m-0 flex flex-col bg-[--popover-bg] rounded-lg shadow-3 z-[9999]',\n      arrow: 'absolute w-3 h-3 bg-[--popover-bg] rotate-45',\n      closeBtn: 'absolute flex size-6 items-center justify-center hover:bg-gray-100 rounded-full cursor-pointer text-color-muted',\n      header: 'flex items-center pr-8',\n      headerLeft: 'flex items-center gap-2',\n      title: '!text-color-header font-semibold',\n      body: 'flex-1 font-sans text-pretty',\n      footer: 'flex flex-row justify-end gap-2',\n    },\n    variants: {\n      size: {\n        small: {\n          container: 'text-size-4 max-w-64 p-4 gap-4',\n          title: 'text-size-5',\n          closeBtn: 'top-3 right-3',\n        },\n        medium: {\n          container: 'text-size-5 max-w-80 p-6 gap-6',\n          title: 'text-size-6',\n          closeBtn: 'top-4 right-4',\n        },\n        large: {\n          container: 'text-size-6 max-w-96 p-8 gap-8',\n          title: 'text-size-7',\n          closeBtn: 'top-6 right-6',\n        },\n      },\n      status: {\n        info: { headerLeft: 'text-[var(--bcm-ui-color-text-info)]' },\n        success: { headerLeft: 'text-[var(--bcm-ui-color-text-success)]' },\n        warning: { headerLeft: 'text-[var(--bcm-ui-color-text-warning)]' },\n        error: { headerLeft: 'text-[var(--bcm-ui-color-text-error)]' },\n      },\n    },\n  });\n\n  render() {\n    const { container, arrow: arrowClass, header, headerLeft, title, closeBtn, body, footer } = this.popconfirmClass({\n      size: this.size,\n      status: this.status,\n    });\n\n    // Only show header if there's actual header content (headerText or custom header slot)\n    // Status icon only shows if explicitly enabled AND there's header text\n    const showStatusIcon = this.statusIcon && this.headerText;\n    const hasHeaderText = Boolean(this.headerText);\n\n    return (\n      <div class=\"inline-block\">\n        <slot onSlotchange={this.handleSlotChange}></slot>\n\n        <div\n          ref={el => (this.popconfirmRef = el)}\n          id={this.popconfirmId}\n          part=\"container\"\n          class={container()}\n          popover=\"manual\"\n          role=\"alertdialog\"\n          aria-labelledby={hasHeaderText ? `${this.popconfirmId}-header` : undefined}\n          aria-describedby={`${this.popconfirmId}-body`}\n        >\n          {this.showArrow && <div ref={el => (this.arrowRef = el)} part=\"arrow\" class={arrowClass()} />}\n\n          {/* Close button - absolute positioned */}\n          <div class={closeBtn()} onClick={this.handleCancel} role=\"button\" tabIndex={0} aria-label=\"Close\">\n            <bcm-icon icon-name=\"far fa-times\"></bcm-icon>\n          </div>\n\n          <header class={header()}>\n            <div class={headerLeft()}>\n              {showStatusIcon && <bcm-icon icon-name={statusIcons[this.status]} />}\n              {hasHeaderText && (\n                <span id={`${this.popconfirmId}-header`} class={title()}>\n                  {this.headerText}\n                </span>\n              )}\n              <slot name=\"header\"></slot>\n            </div>\n          </header>\n\n          <main id={`${this.popconfirmId}-body`} part=\"body\" class={body()}>\n            <slot name=\"body\">{this.description}</slot>\n          </main>\n\n          <footer part=\"footer\" class={footer()}>\n            <slot name=\"footer\">\n              <bcm-button kind=\"outline\" size={this.size} onClick={this.handleCancel}>\n                {this.cancelText}\n              </bcm-button>\n              <bcm-button size={this.size} status={this.status} kind=\"primary\" onClick={this.handleConfirm}>\n                {this.confirmText}\n              </bcm-button>\n            </slot>\n          </footer>\n        </div>\n      </div>\n    );\n  }\n}\n"]}

package/dist/collection/components/pop-confirm/pop-confirm.css

@@ -1 +1 @@
-.absolute{position:absolute}.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.text-wrap{text-wrap:wrap}:host{--popover-bg:var(--bcm-ui-color-background-basic-panel);--popover-radius:6px;--popover-text-color:var(--bcm-ui-color-text-basic);display:inline-block}.arrow{background:var(--arrow-color);clip-path:polygon(50% 0,100% 100%,0 100%);position:absolute;z-index:1}.arrow.top{transform:rotate(180deg)}.arrow.bottom{transform:rotate(0deg)}.arrow.right{transform:rotate(-90deg)}.arrow.left{transform:rotate(90deg)}::slotted([slot=body]){text-wrap:pretty;font-family:Inter,sans-serif}.container{width:100%}@media (min-width:640px){.container{max-width:640px}}@media (min-width:768px){.container{max-width:768px}}@media (min-width:1024px){.container{max-width:1024px}}@media (min-width:1280px){.container{max-width:1280px}}@media (min-width:1536px){.container{max-width:1536px}}.bcm-ui-element{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:Inter,sans-serif}.static{position:static}.relative{position:relative}.z-\[9999\]{z-index:9999}.mx-auto{margin-left:auto;margin-right:auto}.flex{display:flex}.hidden{display:none}.size-6{height:1.5rem;width:1.5rem}.h-2{height:.5rem}.w-4{width:1rem}.w-full{width:100%}.max-w-64{max-width:16rem}.max-w-80{max-width:20rem}.max-w-96{max-width:24rem}.flex-1{flex:1 1 0%}.cursor-pointer{cursor:pointer}.flex-row{flex-direction:row}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-end{justify-content:flex-end}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-2{gap:.5rem}.gap-2\.5{gap:.625rem}.gap-3{gap:.75rem}.gap-4{gap:1rem}.gap-6{gap:1.5rem}.gap-8{gap:2rem}.text-pretty{text-wrap:pretty}.rounded-\[--popover-radius\]{border-radius:var(--popover-radius)}.rounded-full{border-radius:var(--bcm-ui-border-radius-full,9999px)}.bg-\[--popover-bg\]{background-color:var(--popover-bg)}.p-4{padding:1rem}.p-6{padding:1.5rem}.p-8{padding:2rem}.font-sans{font-family:Inter,sans-serif}.text-size-4{font-size:var(--bcm-ui-font-size-4,14px);line-height:var(--bcm-ui-line-height-4,20px)}.text-size-5{font-size:var(--bcm-ui-font-size-5,16px);line-height:var(--bcm-ui-line-height-5,24px)}.text-size-6{font-size:var(--bcm-ui-font-size-6,18px);line-height:var(--bcm-ui-line-height-6,24px)}.text-size-7{font-size:var(--bcm-ui-font-size-7,20px);line-height:var(--bcm-ui-line-height-7,28px)}.text-size-inherit{font-size:inherit;line-height:inherit}.font-semibold{font-weight:600}.\!text-color-header{color:var(--bcm-ui-color-text-header)!important}.text-\[--text-color\]{color:var(--text-color)}.shadow{--tw-shadow:var(--bcm-ui-box-shadow-default);--tw-shadow-colored:var(--bcm-ui-box-shadow-default)}.shadow,.shadow-2{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-2{--tw-shadow:var(--bcm-ui-box-shadow-2);--tw-shadow-colored:var(--bcm-ui-box-shadow-2)}.outline{outline-style:solid}.hover\:bg-gray-100:hover{background-color:oklch(.967 .003 264.542)}
+.visible{visibility:visible}.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.text-wrap{text-wrap:wrap}.border{border-width:1px}.transition{transition-duration:.15s;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1)}:host{--popover-bg:var(--bcm-ui-color-background-basic-panel);display:inline-block}[popover]{border:none;overflow:visible;padding:0}[popover]:not(:popover-open){display:none}[popover]:popover-open{opacity:1;transform:scale(1);transition:opacity .15s ease-out,transform .15s ease-out}@starting-style{[popover]:popover-open{opacity:0;transform:scale(.95)}}::slotted([slot=body]){text-wrap:pretty;font-family:Inter,sans-serif}.container{width:100%}@media (min-width:640px){.container{max-width:640px}}@media (min-width:768px){.container{max-width:768px}}@media (min-width:1024px){.container{max-width:1024px}}@media (min-width:1280px){.container{max-width:1280px}}@media (min-width:1536px){.container{max-width:1536px}}.bcm-ui-element{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:Inter,sans-serif}.static{position:static}.fixed{position:fixed}.absolute{position:absolute}.relative{position:relative}.right-3{right:.75rem}.right-4{right:1rem}.right-6{right:1.5rem}.top-3{top:.75rem}.top-4{top:1rem}.top-6{top:1.5rem}.z-\[9999\]{z-index:9999}.m-0{margin:0}.inline-block{display:inline-block}.flex{display:flex}.size-6{height:1.5rem;width:1.5rem}.h-3{height:.75rem}.w-3{width:.75rem}.max-w-64{max-width:16rem}.max-w-80{max-width:20rem}.max-w-96{max-width:24rem}.flex-1{flex:1 1 0%}.rotate-45{--tw-rotate:45deg;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.cursor-pointer{cursor:pointer}.flex-row{flex-direction:row}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-end{justify-content:flex-end}.justify-center{justify-content:center}.gap-2{gap:.5rem}.gap-4{gap:1rem}.gap-6{gap:1.5rem}.gap-8{gap:2rem}.text-pretty{text-wrap:pretty}.rounded-full{border-radius:var(--bcm-ui-border-radius-full,9999px)}.rounded-lg{border-radius:var(--bcm-ui-border-radius-lg,8px)}.bg-\[--popover-bg\]{background-color:var(--popover-bg)}.p-4{padding:1rem}.p-6{padding:1.5rem}.p-8{padding:2rem}.pr-8{padding-right:2rem}.font-sans{font-family:Inter,sans-serif}.text-size-4{font-size:var(--bcm-ui-font-size-4,14px);line-height:var(--bcm-ui-line-height-4,20px)}.text-size-5{font-size:var(--bcm-ui-font-size-5,16px);line-height:var(--bcm-ui-line-height-5,24px)}.text-size-6{font-size:var(--bcm-ui-font-size-6,18px);line-height:var(--bcm-ui-line-height-6,24px)}.text-size-7{font-size:var(--bcm-ui-font-size-7,20px);line-height:var(--bcm-ui-line-height-7,28px)}.font-semibold{font-weight:600}.\!text-color-header{color:var(--bcm-ui-color-text-header)!important}.text-\[var\(--bcm-ui-color-text-error\)\]{color:var(--bcm-ui-color-text-error)}.text-\[var\(--bcm-ui-color-text-info\)\]{color:var(--bcm-ui-color-text-info)}.text-\[var\(--bcm-ui-color-text-success\)\]{color:var(--bcm-ui-color-text-success)}.text-\[var\(--bcm-ui-color-text-warning\)\]{color:var(--bcm-ui-color-text-warning)}.shadow{--tw-shadow:var(--bcm-ui-box-shadow-default);--tw-shadow-colored:var(--bcm-ui-box-shadow-default)}.shadow,.shadow-3{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-3{--tw-shadow:var(--bcm-ui-box-shadow-3);--tw-shadow-colored:var(--bcm-ui-box-shadow-3)}.outline{outline-style:solid}.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.hover\:bg-gray-100:hover{background-color:oklch(.967 .003 264.542)}