bromcom-ui-next 0.1.30 → 0.1.31

package/dist/collection/components/modal/modal.component.js.map

@@ -1 +1 @@
-{"version":3,"file":"modal.component.js","sourceRoot":"","sources":["../../../src/components/modal/modal.component.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Prop, h, Element, Event, EventEmitter, Method, Watch, Listen, State } from '@stencil/core';\nimport { tv } from '@utils/tv';\n\nexport type ModalSize = 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge' | 'full';\nexport type ModalPlacement = 'center' | 'top';\n\n/**\n * @component BcmModal\n * @description A flexible modal dialog component built on the native HTML Dialog API.\n * Provides a powerful way to display content in a layer above the page with full keyboard and focus management.\n *\n * @slot - Main content area of the modal\n * @slot header - Custom header content (overrides header-text prop)\n * @slot helper - Custom helper text content (overrides helper-text prop)\n * @slot footer - Footer content for action buttons\n *\n * @part dialog - The native dialog element\n * @part container - The container wrapper for centering and scrolling\n * @part modal - The main modal box\n * @part header - The header section\n * @part header-content - The content wrapper inside header\n * @part title - The title heading element\n * @part helper-text - The helper text paragraph\n * @part close-button - The close button in header\n * @part content - The main content area\n * @part footer - The footer section\n *\n * @example\n * ```html\n * <!-- Basic usage -->\n * <bcm-modal open header-text=\"Welcome\" helper-text=\"Please read carefully\">\n *   <p>Modal content goes here</p>\n *   <div slot=\"footer\">\n *     <button data-dismiss>Close</button>\n *   </div>\n * </bcm-modal>\n *\n * <!-- Custom size and placement -->\n * <bcm-modal size=\"large\" placement=\"top\">\n *   <div slot=\"header\">Custom Header</div>\n *   <p>Content here</p>\n *   <div slot=\"footer\">\n *     <button>Cancel</button>\n *     <button>Confirm</button>\n *   </div>\n * </bcm-modal>\n *\n * <!-- Full screen modal -->\n * <bcm-modal full-screen no-footer>\n *   <p>Full screen content</p>\n * </bcm-modal>\n *\n * <!-- Programmatic usage -->\n * <bcm-modal id=\"myModal\">Content</bcm-modal>\n * <script>\n *   document.getElementById('myModal').show();\n * </script>\n * ```\n */\n@Component({\n  tag: 'bcm-modal',\n  styleUrl: 'modal.css',\n  shadow: true,\n})\nexport class BcmModal {\n  @Element() host: HTMLBcmModalElement;\n\n  private dialogRef?: HTMLDialogElement;\n\n  /**\n   * Controls whether the modal is open or closed\n   */\n  @Prop({ mutable: true, reflect: true }) open: boolean = false;\n\n  /**\n   * The size of the modal\n   * - 'small': 400px\n   * - 'medium': 600px\n   * - 'large': 800px\n   * - 'xlarge': 1024px\n   * - 'xxlarge': 1200px\n   * - 'full': 100% width\n   */\n  @Prop() size: ModalSize = 'medium';\n\n  /**\n   * The placement of the modal on the screen\n   * - 'center': Centered vertically and horizontally\n   * - 'top': Aligned to the top with 80px padding\n   */\n  @Prop() placement: ModalPlacement = 'center';\n\n  /**\n   * Controls backdrop behavior\n   * - true: Shows backdrop, modal can be closed by clicking outside\n   * - false: No backdrop\n   * - 'static': Shows backdrop but prevents closing by clicking outside (triggers shake animation)\n   */\n  @Prop() backdrop: boolean | 'static' = true;\n\n  /**\n   * Makes the modal take full width of the viewport (max-width: 100%)\n   */\n  @Prop({ attribute: 'full-width' }) fullWidth: boolean = false;\n\n  /**\n   * Makes the modal take the full screen (100vw x 100vh, no border radius)\n   */\n  @Prop({ attribute: 'full-screen' }) fullScreen: boolean = false;\n\n  /**\n   * Text to display in the modal header\n   */\n  @Prop({ attribute: 'header-text' }) headerText?: string;\n\n  /**\n   * Helper text to display below the header title\n   */\n  @Prop({ attribute: 'helper-text' }) helperText?: string;\n\n  /**\n   * Hides the header section completely\n   */\n  @Prop({ attribute: 'no-header' }) noHeader: boolean = false;\n\n  /**\n   * Hides the footer section completely\n   */\n  @Prop({ attribute: 'no-footer' }) noFooter: boolean = false;\n\n  /**\n   * Allows closing the modal by clicking on the backdrop\n   */\n  @Prop({ attribute: 'close-on-backdrop' }) closeOnBackdrop: boolean = true;\n\n  /**\n   * Allows closing the modal by pressing the Escape key\n   */\n  @Prop({ attribute: 'close-on-escape' }) closeOnEscape: boolean = true;\n\n  @State() isAnimating: boolean = false;\n  @State() shake: boolean = false;\n\n  /**\n   * Emitted after the modal has opened\n   */\n  @Event() bcmOpen: EventEmitter<void>;\n\n  /**\n   * Emitted after the modal has closed\n   */\n  @Event() bcmClose: EventEmitter<void>;\n\n  /**\n   * Emitted before the modal opens. Can be cancelled by calling event.preventDefault()\n   */\n  @Event({ cancelable: true }) bcmBeforeOpen: EventEmitter<void>;\n\n  /**\n   * Emitted before the modal closes. Can be cancelled by calling event.preventDefault()\n   */\n  @Event({ cancelable: true }) bcmBeforeClose: EventEmitter<void>;\n\n  private modalClass = tv({\n    slots: {\n      dialog:\n        'bcm-ui-element fixed inset-0 m-0 p-0 w-full max-w-full h-full max-h-full border-none bg-transparent backdrop:bg-color-default-dark backdrop:opacity-50 backdrop:transition-opacity backdrop:duration-300',\n      container: 'fixed inset-0 flex items-start justify-center p-4 overflow-y-auto overscroll-contain',\n      modal: 'relative bg-color-basic-base text-color-default rounded-lg shadow-2xl transform transition-all duration-300 ease-in-out flex flex-col',\n      header: 'flex justify-between items-start bg-color-base text-color-default border-color-default border-solid border-0 border-b rounded-t-lg',\n      headerContent: 'flex-1 min-w-0 flex items-center gap-2',\n      title: 'font-semibold m-0 text-size-6 text-color-header',\n      helperText: 'text-size-5 text-color-placeholder m-0',\n      closeButton:\n        'text-size-5 font-medium text-color-default bg-transparent border-none p-0 h-6 w-6 rounded hover:bg-color-default-hover cursor-pointer active:bg-color-active transition-colors flex-shrink-0 outline-none focus-visible:ring ',\n      content: 'flex-grow overflow-y-auto',\n      footer: 'flex items-center justify-end gap-2',\n    },\n    variants: {\n      open: {\n        true: {\n          modal: 'opacity-100 translate-y-0 scale-100',\n        },\n        false: {\n          modal: 'opacity-0 -translate-y-4 scale-95',\n        },\n      },\n      placement: {\n        center: {\n          container: 'items-center',\n        },\n        top: {\n          container: 'items-start pt-20',\n        },\n      },\n      size: {\n        small: {\n          header: 'py-3 px-4',\n          content: 'p-4',\n          footer: 'py-3 px-4',\n        },\n        medium: {\n          header: 'py-4 px-5',\n          content: 'p-5',\n          footer: 'py-4 px-5',\n        },\n        large: {\n          header: 'py-4 px-6',\n          content: 'p-6',\n          footer: 'py-4 px-6',\n        },\n        xlarge: {\n          header: 'py-5 px-6',\n          content: 'p-6',\n          footer: 'py-5 px-6',\n        },\n        xxlarge: {\n          header: 'py-5 px-8',\n          content: 'p-8',\n          footer: 'py-5 px-8',\n        },\n        full: {\n          header: 'py-5 px-8',\n          content: 'p-8',\n          footer: 'py-5 px-8',\n        },\n      },\n      fullScreen: {\n        true: {\n          modal: 'rounded-none w-screen h-screen max-w-none max-h-none',\n          container: 'p-0',\n        },\n      },\n      shake: {\n        true: {\n          modal: 'animate-shake',\n        },\n      },\n      noHeader: {\n        true: {\n          header: 'hidden',\n        },\n      },\n      noFooter: {\n        true: {\n          footer: 'hidden',\n        },\n      },\n    },\n  });\n\n  @Watch('open')\n  async handleOpenChange(isOpen: boolean) {\n    if (isOpen) {\n      this.isAnimating = true;\n      const event = this.bcmBeforeOpen.emit();\n      if (event.defaultPrevented) {\n        this.open = false;\n        return;\n      }\n\n      // Use native dialog API with top-layer\n      if (this.dialogRef) {\n        this.dialogRef.showModal();\n        // Small delay for animation\n        await new Promise(resolve => setTimeout(resolve, 50));\n        this.isAnimating = false;\n        this.bcmOpen.emit();\n      }\n    } else {\n      this.isAnimating = true;\n      const event = this.bcmBeforeClose.emit();\n      if (event.defaultPrevented) {\n        this.open = true;\n        return;\n      }\n\n      // Wait for animation before closing\n      await new Promise(resolve => setTimeout(resolve, 300));\n      if (this.dialogRef) {\n        this.dialogRef.close();\n      }\n      this.isAnimating = false;\n      this.bcmClose.emit();\n    }\n  }\n\n  @Listen('click', { capture: true })\n  handleClick(event: MouseEvent) {\n    // Use composedPath to work with shadow DOM and slots\n    const path = event.composedPath() as HTMLElement[];\n    const dismissElement = path.find(el => el.hasAttribute?.('data-dismiss'));\n    const closeModalElement = path.find(el => el.hasAttribute?.('data-close-modal'));\n\n    if (dismissElement) {\n      this.hide();\n      event.preventDefault();\n      event.stopPropagation();\n    } else if (closeModalElement) {\n      const modalId = closeModalElement.getAttribute('data-close-modal');\n      // If modalId matches this modal's id, close it\n      if (!modalId || modalId === this.host.id) {\n        this.hide();\n        event.preventDefault();\n        event.stopPropagation();\n      }\n    }\n  }\n\n  @Listen('keydown')\n  handleKeyDown(event: KeyboardEvent) {\n    if (event.key === 'Escape' && this.open) {\n      // Only handle ESC if this is the topmost modal\n      const openModals = Array.from(document.querySelectorAll('bcm-modal[open]'));\n      const topModal = openModals[openModals.length - 1];\n\n      if (topModal !== this.host) {\n        return;\n      }\n\n      event.preventDefault();\n      if (this.closeOnEscape) {\n        if (this.backdrop === 'static') {\n          this.shakeModal();\n        } else {\n          this.hide();\n        }\n      } else if (this.backdrop === 'static') {\n        this.shakeModal();\n      }\n    }\n  }\n\n  /**\n   * Programmatically opens the modal\n   */\n  @Method()\n  async show(): Promise<void> {\n    this.open = true;\n  }\n\n  /**\n   * Programmatically closes the modal\n   */\n  @Method()\n  async hide(): Promise<void> {\n    this.open = false;\n  }\n\n  /**\n   * Toggles the modal open/closed state\n   */\n  @Method()\n  async toggle(): Promise<void> {\n    this.open = !this.open;\n  }\n\n  private shakeModal() {\n    this.shake = true;\n    setTimeout(() => {\n      this.shake = false;\n    }, 300);\n  }\n\n  private handleBackdropClick = (event: MouseEvent) => {\n    const target = event.target as HTMLElement;\n    // Check if click is on the container (backdrop area), not on modal content\n    if (target.getAttribute('part') === 'container') {\n      if (this.backdrop === 'static') {\n        this.shakeModal();\n      } else if (this.closeOnBackdrop) {\n        this.hide();\n      }\n    }\n  };\n\n  private handleDialogCancel = (event: Event) => {\n    event.preventDefault();\n    if (this.closeOnEscape) {\n      if (this.backdrop === 'static') {\n        this.shakeModal();\n      } else {\n        this.hide();\n      }\n    }\n  };\n\n  private getModalStyle() {\n    if (this.fullScreen) {\n      return {\n        width: '100vw',\n        height: '100vh',\n        maxWidth: 'none',\n        maxHeight: 'none',\n      };\n    }\n\n    if (this.fullWidth) {\n      return {\n        width: '100%',\n        maxWidth: '100%',\n      };\n    }\n\n    const widths = {\n      small: '400px',\n      medium: '600px',\n      large: '800px',\n      xlarge: '1024px',\n      xxlarge: '1200px',\n      full: '100%',\n    };\n\n    return {\n      width: widths[this.size],\n      maxWidth: this.fullScreen ? 'none' : '90vw',\n      maxHeight: this.fullScreen ? 'none' : '90vh',\n    };\n  }\n\n  componentDidLoad() {\n    if (this.open && this.dialogRef) {\n      this.dialogRef.showModal();\n    }\n  }\n\n  disconnectedCallback() {\n    if (this.dialogRef && this.open) {\n      this.dialogRef.close();\n    }\n  }\n\n  render() {\n    const { dialog, container, modal, header, headerContent, title, helperText, closeButton, content, footer } = this.modalClass({\n      open: this.open,\n      placement: this.placement,\n      size: this.size,\n      fullScreen: this.fullScreen,\n      shake: this.shake,\n      noHeader: this.noHeader,\n      noFooter: this.noFooter,\n    });\n\n    return (\n      <dialog\n        ref={el => (this.dialogRef = el)}\n        part=\"dialog\"\n        class={dialog()}\n        onClick={this.handleBackdropClick}\n        onCancel={this.handleDialogCancel}\n        aria-labelledby=\"modal-title\"\n        aria-describedby={this.helperText ? 'modal-helper' : undefined}\n        aria-modal=\"true\"\n      >\n        <div part=\"container\" class={container()}>\n          <div part=\"modal\" class={modal()} style={this.getModalStyle()} role=\"document\" onClick={e => e.stopPropagation()}>\n            {!this.noHeader && (\n              <div part=\"header\" class={header()}>\n                <div part=\"header-content\" class={headerContent()}>\n                  <h2 id=\"modal-title\" part=\"title\" class={title()}>\n                    <slot name=\"header\">{this.headerText}</slot>\n                  </h2>\n                  {this.helperText && (\n                    <p id=\"modal-helper\" part=\"helper-text\" class={helperText()}>\n                      <slot name=\"helper\">{this.helperText}</slot>\n                    </p>\n                  )}\n                </div>\n                <button part=\"close-button\" class={closeButton()} onClick={() => this.hide()} aria-label=\"Close modal\" type=\"button\">\n                  <bcm-icon name=\"fa-solid fa-xmark\"></bcm-icon>\n                </button>\n              </div>\n            )}\n\n            <div part=\"content\" class={content()}>\n              <slot />\n            </div>\n\n            {!this.noFooter && (\n              <div part=\"footer\" class={footer()}>\n                <slot name=\"footer\" />\n              </div>\n            )}\n          </div>\n        </div>\n      </dialog>\n    );\n  }\n}\n"]}
+{"version":3,"file":"modal.component.js","sourceRoot":"","sources":["../../../src/components/modal/modal.component.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Prop, h, Element, Event, EventEmitter, Method, Watch, Listen, State } from '@stencil/core';\nimport { tv } from '@utils/tv';\n\nexport type ModalSize = 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge' | 'full';\nexport type ModalPlacement = 'center' | 'top';\n\n/**\n * @component BcmModal\n * @description A flexible modal dialog component built on the native HTML Dialog API.\n * Provides a powerful way to display content in a layer above the page with full keyboard and focus management.\n *\n * @slot - Main content area of the modal\n * @slot header - Custom header content (overrides header-text prop)\n * @slot helper - Custom helper text content (overrides helper-text prop)\n * @slot footer - Footer content for action buttons\n *\n * @part dialog - The native dialog element\n * @part container - The container wrapper for centering and scrolling\n * @part modal - The main modal box\n * @part header - The header section\n * @part header-content - The content wrapper inside header\n * @part title - The title heading element\n * @part helper-text - The helper text paragraph\n * @part close-button - The close button in header\n * @part content - The main content area\n * @part footer - The footer section\n *\n * @example\n * ```html\n * <!-- Basic usage -->\n * <bcm-modal open header-text=\"Welcome\" helper-text=\"Please read carefully\">\n *   <p>Modal content goes here</p>\n *   <div slot=\"footer\">\n *     <button data-dismiss>Close</button>\n *   </div>\n * </bcm-modal>\n *\n * <!-- Custom size and placement -->\n * <bcm-modal size=\"large\" placement=\"top\">\n *   <div slot=\"header\">Custom Header</div>\n *   <p>Content here</p>\n *   <div slot=\"footer\">\n *     <button>Cancel</button>\n *     <button>Confirm</button>\n *   </div>\n * </bcm-modal>\n *\n * <!-- Full screen modal -->\n * <bcm-modal full-screen no-footer>\n *   <p>Full screen content</p>\n * </bcm-modal>\n *\n * <!-- Programmatic usage -->\n * <bcm-modal id=\"myModal\">Content</bcm-modal>\n * <script>\n *   document.getElementById('myModal').show();\n * </script>\n * ```\n */\n@Component({\n  tag: 'bcm-modal',\n  styleUrl: 'modal.css',\n  shadow: true,\n})\nexport class BcmModal {\n  @Element() host: HTMLBcmModalElement;\n\n  private dialogRef?: HTMLDialogElement;\n\n  /**\n   * Controls whether the modal is open or closed\n   */\n  @Prop({ mutable: true, reflect: true }) open: boolean = false;\n\n  /**\n   * The size of the modal\n   * - 'small': 400px\n   * - 'medium': 600px\n   * - 'large': 800px\n   * - 'xlarge': 1024px\n   * - 'xxlarge': 1200px\n   * - 'full': 100% width\n   */\n  @Prop() size: ModalSize = 'medium';\n\n  /**\n   * The placement of the modal on the screen\n   * - 'center': Centered vertically and horizontally\n   * - 'top': Aligned to the top with 80px padding\n   */\n  @Prop() placement: ModalPlacement = 'center';\n\n  /**\n   * Controls backdrop behavior\n   * - true: Shows backdrop, modal can be closed by clicking outside\n   * - false: No backdrop\n   * - 'static': Shows backdrop but prevents closing by clicking outside (triggers shake animation)\n   */\n  @Prop() backdrop: boolean | 'static' = true;\n\n  /**\n   * Makes the modal take full width of the viewport (max-width: 100%)\n   */\n  @Prop({ attribute: 'full-width' }) fullWidth: boolean = false;\n\n  /**\n   * Makes the modal take the full screen (100vw x 100vh, no border radius)\n   */\n  @Prop({ attribute: 'full-screen' }) fullScreen: boolean = false;\n\n  /**\n   * Text to display in the modal header\n   */\n  @Prop({ attribute: 'header-text' }) headerText?: string;\n\n  /**\n   * Helper text to display below the header title\n   */\n  @Prop({ attribute: 'helper-text' }) helperText?: string;\n\n  /**\n   * Hides the header section completely\n   */\n  @Prop({ attribute: 'no-header' }) noHeader: boolean = false;\n\n  /**\n   * Hides the footer section completely\n   */\n  @Prop({ attribute: 'no-footer' }) noFooter: boolean = false;\n\n  /**\n   * Allows closing the modal by clicking on the backdrop\n   */\n  @Prop({ attribute: 'close-on-backdrop' }) closeOnBackdrop: boolean = true;\n\n  /**\n   * Allows closing the modal by pressing the Escape key\n   */\n  @Prop({ attribute: 'close-on-escape' }) closeOnEscape: boolean = true;\n\n  @State() isAnimating: boolean = false;\n  @State() shake: boolean = false;\n\n  /**\n   * Emitted after the modal has opened\n   */\n  @Event() bcmOpen: EventEmitter<void>;\n\n  /**\n   * Emitted after the modal has closed\n   */\n  @Event() bcmClose: EventEmitter<void>;\n\n  /**\n   * Emitted before the modal opens. Can be cancelled by calling event.preventDefault()\n   */\n  @Event({ cancelable: true }) bcmBeforeOpen: EventEmitter<void>;\n\n  /**\n   * Emitted before the modal closes. Can be cancelled by calling event.preventDefault()\n   */\n  @Event({ cancelable: true }) bcmBeforeClose: EventEmitter<void>;\n\n  private modalClass = tv({\n    slots: {\n      dialog:\n        'bcm-ui-element fixed inset-0 m-0 p-0 w-full max-w-full h-full max-h-full border-none bg-transparent backdrop:bg-color-default-dark backdrop:opacity-50 backdrop:transition-opacity backdrop:duration-300',\n      container: 'fixed inset-0 flex items-start justify-center p-4 overflow-y-auto overscroll-contain',\n      modal: 'relative bg-color-basic-base text-color-default rounded-lg shadow-2xl transform transition-all duration-300 ease-in-out flex flex-col',\n      header: 'flex justify-between items-start bg-color-base text-color-default border-color-default border-solid border-0 border-b rounded-t-lg',\n      headerContent: 'flex-1 min-w-0 flex items-center gap-2',\n      title: 'font-semibold m-0 text-size-6 text-color-header',\n      helperText: 'text-size-5 text-color-placeholder m-0',\n      closeButton:\n        'text-size-5 font-medium text-color-default bg-transparent border-none p-0 h-6 w-6 rounded hover:bg-color-default-hover cursor-pointer active:bg-color-active transition-colors flex-shrink-0 outline-none focus-visible:ring ',\n      content: 'flex-grow overflow-y-auto',\n      footer: 'flex items-center justify-end gap-2',\n    },\n    variants: {\n      open: {\n        true: {\n          modal: 'opacity-100 translate-y-0 scale-100',\n        },\n        false: {\n          modal: 'opacity-0 -translate-y-4 scale-95',\n        },\n      },\n      placement: {\n        center: {\n          container: 'items-center',\n        },\n        top: {\n          container: 'items-start pt-20',\n        },\n      },\n      size: {\n        small: {\n          header: 'py-3 px-4',\n          content: 'p-4',\n          footer: 'py-3 px-4',\n        },\n        medium: {\n          header: 'py-4 px-5',\n          content: 'p-5',\n          footer: 'py-4 px-5',\n        },\n        large: {\n          header: 'py-4 px-6',\n          content: 'p-6',\n          footer: 'py-4 px-6',\n        },\n        xlarge: {\n          header: 'py-5 px-6',\n          content: 'p-6',\n          footer: 'py-5 px-6',\n        },\n        xxlarge: {\n          header: 'py-5 px-8',\n          content: 'p-8',\n          footer: 'py-5 px-8',\n        },\n        full: {\n          header: 'py-5 px-8',\n          content: 'p-8',\n          footer: 'py-5 px-8',\n        },\n      },\n      fullScreen: {\n        true: {\n          modal: 'rounded-none w-screen h-screen max-w-none max-h-none',\n          container: 'p-0',\n        },\n      },\n      shake: {\n        true: {\n          modal: 'animate-shake',\n        },\n      },\n      noHeader: {\n        true: {\n          header: 'hidden',\n        },\n      },\n      noFooter: {\n        true: {\n          footer: 'hidden',\n        },\n      },\n    },\n  });\n\n  @Watch('open')\n  async handleOpenChange(isOpen: boolean) {\n    if (isOpen) {\n      this.isAnimating = true;\n      const event = this.bcmBeforeOpen.emit();\n      if (event.defaultPrevented) {\n        this.open = false;\n        return;\n      }\n\n      // Use native dialog API with top-layer\n      if (this.dialogRef) {\n        this.dialogRef.showModal();\n        // Small delay for animation\n        await new Promise(resolve => setTimeout(resolve, 50));\n        this.isAnimating = false;\n        this.bcmOpen.emit();\n      }\n    } else {\n      this.isAnimating = true;\n      const event = this.bcmBeforeClose.emit();\n      if (event.defaultPrevented) {\n        this.open = true;\n        return;\n      }\n\n      // Wait for animation before closing\n      await new Promise(resolve => setTimeout(resolve, 300));\n      if (this.dialogRef) {\n        this.dialogRef.close();\n      }\n      this.isAnimating = false;\n      this.bcmClose.emit();\n    }\n  }\n\n  @Listen('click', { capture: true })\n  handleClick(event: MouseEvent) {\n    // Use composedPath to work with shadow DOM and slots\n    const path = event.composedPath() as HTMLElement[];\n    const dismissElement = path.find(el => el.hasAttribute?.('data-dismiss'));\n    const closeModalElement = path.find(el => el.hasAttribute?.('data-close-modal'));\n\n    if (dismissElement) {\n      this.hide();\n      event.preventDefault();\n      event.stopPropagation();\n    } else if (closeModalElement) {\n      const modalId = closeModalElement.getAttribute('data-close-modal');\n      // If modalId matches this modal's id, close it\n      if (!modalId || modalId === this.host.id) {\n        this.hide();\n        event.preventDefault();\n        event.stopPropagation();\n      }\n    }\n  }\n\n  @Listen('keydown')\n  handleKeyDown(event: KeyboardEvent) {\n    if (event.key === 'Escape' && this.open) {\n      // Only handle ESC if this is the topmost modal\n      const openModals = Array.from(document.querySelectorAll('bcm-modal[open]'));\n      const topModal = openModals[openModals.length - 1];\n\n      if (topModal !== this.host) {\n        return;\n      }\n\n      event.preventDefault();\n      if (this.closeOnEscape) {\n        if (this.backdrop === 'static') {\n          this.shakeModal();\n        } else {\n          this.hide();\n        }\n      } else if (this.backdrop === 'static') {\n        this.shakeModal();\n      }\n    }\n  }\n\n  /**\n   * Programmatically opens the modal\n   */\n  @Method()\n  async show(): Promise<void> {\n    this.open = true;\n  }\n\n  /**\n   * Programmatically closes the modal\n   */\n  @Method()\n  async hide(): Promise<void> {\n    this.open = false;\n  }\n\n  /**\n   * Toggles the modal open/closed state\n   */\n  @Method()\n  async toggle(): Promise<void> {\n    this.open = !this.open;\n  }\n\n  private shakeModal() {\n    this.shake = true;\n    setTimeout(() => {\n      this.shake = false;\n    }, 300);\n  }\n\n  private handleBackdropClick = (event: MouseEvent) => {\n    const target = event.target as HTMLElement;\n    // Check if click is on the container (backdrop area), not on modal content\n    if (target.getAttribute('part') === 'container') {\n      if (this.backdrop === 'static') {\n        this.shakeModal();\n      } else if (this.closeOnBackdrop) {\n        this.hide();\n      }\n    }\n  };\n\n  private handleDialogCancel = (event: Event) => {\n    event.preventDefault();\n    if (this.closeOnEscape) {\n      if (this.backdrop === 'static') {\n        this.shakeModal();\n      } else {\n        this.hide();\n      }\n    }\n  };\n\n  private getModalStyle() {\n    if (this.fullScreen) {\n      return {\n        width: '100vw',\n        height: '100vh',\n        maxWidth: 'none',\n        maxHeight: 'none',\n      };\n    }\n\n    if (this.fullWidth) {\n      return {\n        width: '100%',\n        maxWidth: '100%',\n      };\n    }\n\n    const widths = {\n      small: '400px',\n      medium: '600px',\n      large: '800px',\n      xlarge: '1024px',\n      xxlarge: '1200px',\n      full: '100%',\n    };\n\n    return {\n      width: widths[this.size],\n      maxWidth: this.fullScreen ? 'none' : '90vw',\n      maxHeight: this.fullScreen ? 'none' : '90vh',\n    };\n  }\n\n  componentDidLoad() {\n    if (this.open && this.dialogRef) {\n      this.dialogRef.showModal();\n    }\n  }\n\n  disconnectedCallback() {\n    if (this.dialogRef && this.open) {\n      this.dialogRef.close();\n    }\n  }\n\n  render() {\n    const { dialog, container, modal, header, headerContent, title, helperText, closeButton, content, footer } = this.modalClass({\n      open: this.open,\n      placement: this.placement,\n      size: this.size,\n      fullScreen: this.fullScreen,\n      shake: this.shake,\n      noHeader: this.noHeader,\n      noFooter: this.noFooter,\n    });\n\n    return (\n      <dialog\n        ref={el => (this.dialogRef = el)}\n        part=\"dialog\"\n        class={dialog()}\n        onClick={this.handleBackdropClick}\n        onCancel={this.handleDialogCancel}\n        aria-labelledby=\"modal-title\"\n        aria-describedby={this.helperText ? 'modal-helper' : undefined}\n        aria-modal=\"true\"\n      >\n        <div part=\"container\" class={container()}>\n          <div part=\"modal\" class={modal()} style={this.getModalStyle()} role=\"document\" onClick={e => e.stopPropagation()}>\n            {!this.noHeader && (\n              <div part=\"header\" class={header()}>\n                <div part=\"header-content\" class={headerContent()}>\n                  <h2 id=\"modal-title\" part=\"title\" class={title()}>\n                    <slot name=\"header\">{this.headerText}</slot>\n                  </h2>\n                  {this.helperText && (\n                    <p id=\"modal-helper\" part=\"helper-text\" class={helperText()}>\n                      <slot name=\"helper\">{this.helperText}</slot>\n                    </p>\n                  )}\n                </div>\n                <button part=\"close-button\" class={closeButton()} onClick={() => this.hide()} aria-label=\"Close modal\" type=\"button\">\n                  <bcm-icon name=\"fa-solid fa-xmark\"></bcm-icon>\n                </button>\n              </div>\n            )}\n\n            <div part=\"content\" class={content()}>\n              <slot />\n            </div>\n\n            {!this.noFooter && (\n              <div part=\"footer\" class={footer()}>\n                <slot name=\"footer\" />\n              </div>\n            )}\n          </div>\n        </div>\n      </dialog>\n    );\n  }\n}\n"]}

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

@@ -175,162 +175,114 @@ const statusIcons = {
  * ```
  */
 export class BcmPopConfirm {
-    constructor() {
-        /**
-         * @prop {PopConfirmPlacement} placement - Position of the popover relative to the trigger element.
-         * Automatically flips if there's not enough space.
-         * Default: 'top'
-         */
-        this.placement = 'top';
-        /**
-         * @prop {PopConfirmSize} size - Size variant that controls padding and text size.
-         * - 'small': Compact size with minimal padding
-         * - 'medium': Standard size
-         * - 'large': Spacious size with more padding
-         * Default: 'medium'
-         */
-        this.size = 'medium';
-        /**
-         * @prop {PopConfirmStatus} status - Status type that determines the color scheme and icon.
-         * - 'info': Informational (blue)
-         * - 'success': Success/positive action (green)
-         * - 'warning': Warning/caution (yellow)
-         * - 'error': Error/destructive action (red)
-         * Default: 'info'
-         */
-        this.status = 'info';
-        /**
-         * @prop {string} headerText - Text displayed in the header section.
-         * Can be overridden by using the 'header' slot.
-         * Default: ''
-         */
-        this.headerText = '';
-        /**
-         * @prop {string} description - Description text displayed in the body section.
-         * Can be overridden by using the 'body' slot.
-         * Default: ''
-         */
-        this.description = '';
-        /**
-         * @prop {string} confirmText - Text for the confirm button.
-         * Default: 'Yes'
-         */
-        this.confirmText = 'Yes';
-        /**
-         * @prop {string} cancelText - Text for the cancel button.
-         * Default: 'Cancel'
-         */
-        this.cancelText = 'Cancel';
-        /**
-         * @prop {boolean} showArrow - Whether to show the arrow pointing to the trigger.
-         * Default: true
-         */
-        this.showArrow = true;
-        /**
-         * @prop {boolean} statusIcon - Whether to show the status icon in the header.
-         * Icon only shows if headerText is also provided.
-         * Default: true
-         */
-        this.statusIcon = true;
-        /**
-         * @prop {number} offsetDistance - Distance in pixels between the popover and trigger element.
-         * Default: 12
-         */
-        this.offsetDistance = 12;
-        /**
-         * @prop {boolean} closeOnOutsideClick - Whether to close when clicking outside the popover.
-         * Default: true
-         */
-        this.closeOnOutsideClick = true;
-        /**
-         * @prop {boolean} closeOnEscape - Whether to close when pressing the Escape key.
-         * Default: true
-         */
-        this.closeOnEscape = true;
-        this.isOpen = false;
-        this.handleSlotChange = () => {
-            var _a;
-            const slot = (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('slot:not([name])');
-            if (!slot)
-                return;
-            const elements = slot.assignedElements();
-            const assignedElement = elements[0];
-            this.triggerRef = (assignedElement || this.host);
-            if (!this.triggerRef)
-                return;
-            if (this.popconfirmRef && this.popconfirmId) {
-                this.triggerRef.setAttribute('aria-describedby', this.popconfirmId);
-            }
-            this.removeTriggerListeners();
-            this.setupTriggerListeners();
-        };
-        this.handleTriggerClick = () => {
-            this.toggle();
-        };
-        this.handleOutsideClick = (e) => {
-            var _a;
-            if (!this.closeOnOutsideClick || !this.isOpen)
-                return;
-            const target = e.target;
-            if (!this.host.contains(target) && !((_a = this.popconfirmRef) === null || _a === void 0 ? void 0 : _a.contains(target))) {
-                this.handleCancel();
-            }
-        };
-        this.handleToggle = (e) => {
-            const toggleEvent = e;
-            if (toggleEvent.newState === 'open' && !this.isOpen) {
-                this.isOpen = true;
-            }
-            else if (toggleEvent.newState === 'closed' && this.isOpen) {
-                this.isOpen = false;
-            }
-        };
-        this.handleConfirm = () => {
-            this.bcmConfirm.emit();
-            this.hide();
-        };
-        this.handleCancel = () => {
-            this.bcmCancel.emit();
-            this.hide();
-        };
-        this.popconfirmClass = tv({
-            slots: {
-                container: 'bcm-ui-element fixed m-0 flex flex-col bg-[--popover-bg] rounded-lg shadow-3 z-[9999]',
-                arrow: 'absolute w-3 h-3 bg-[--popover-bg] rotate-45',
-                closeBtn: 'absolute flex size-6 items-center justify-center hover:bg-gray-100 rounded-full cursor-pointer text-color-muted',
-                header: 'flex items-center pr-8',
-                headerLeft: 'flex items-center gap-2',
-                title: '!text-color-header font-semibold',
-                body: 'flex-1 font-sans text-pretty',
-                footer: 'flex flex-row justify-end gap-2',
-            },
-            variants: {
-                size: {
-                    small: {
-                        container: 'text-size-4 max-w-64 p-4 gap-4',
-                        title: 'text-size-5',
-                        closeBtn: 'top-3 right-3',
-                    },
-                    medium: {
-                        container: 'text-size-5 max-w-80 p-6 gap-6',
-                        title: 'text-size-6',
-                        closeBtn: 'top-4 right-4',
-                    },
-                    large: {
-                        container: 'text-size-6 max-w-96 p-8 gap-8',
-                        title: 'text-size-7',
-                        closeBtn: 'top-6 right-6',
-                    },
-                },
-                status: {
-                    info: { headerLeft: 'text-[var(--bcm-ui-color-text-info)]' },
-                    success: { headerLeft: 'text-[var(--bcm-ui-color-text-success)]' },
-                    warning: { headerLeft: 'text-[var(--bcm-ui-color-text-warning)]' },
-                    error: { headerLeft: 'text-[var(--bcm-ui-color-text-error)]' },
-                },
-            },
-        });
-    }
+    host;
+    popconfirmRef;
+    arrowRef;
+    triggerRef;
+    cleanupAutoUpdate;
+    popconfirmId;
+    /**
+     * @prop {PopConfirmPlacement} placement - Position of the popover relative to the trigger element.
+     * Automatically flips if there's not enough space.
+     * Default: 'top'
+     */
+    placement = 'top';
+    /**
+     * @prop {PopConfirmSize} size - Size variant that controls padding and text size.
+     * - 'small': Compact size with minimal padding
+     * - 'medium': Standard size
+     * - 'large': Spacious size with more padding
+     * Default: 'medium'
+     */
+    size = 'medium';
+    /**
+     * @prop {PopConfirmStatus} status - Status type that determines the color scheme and icon.
+     * - 'info': Informational (blue)
+     * - 'success': Success/positive action (green)
+     * - 'warning': Warning/caution (yellow)
+     * - 'error': Error/destructive action (red)
+     * Default: 'info'
+     */
+    status = 'info';
+    /**
+     * @prop {string} headerText - Text displayed in the header section.
+     * Can be overridden by using the 'header' slot.
+     * Default: ''
+     */
+    headerText = '';
+    /**
+     * @prop {string} description - Description text displayed in the body section.
+     * Can be overridden by using the 'body' slot.
+     * Default: ''
+     */
+    description = '';
+    /**
+     * @prop {string} confirmText - Text for the confirm button.
+     * Default: 'Yes'
+     */
+    confirmText = 'Yes';
+    /**
+     * @prop {string} cancelText - Text for the cancel button.
+     * Default: 'Cancel'
+     */
+    cancelText = 'Cancel';
+    /**
+     * @prop {boolean} showArrow - Whether to show the arrow pointing to the trigger.
+     * Default: true
+     */
+    showArrow = true;
+    /**
+     * @prop {boolean} statusIcon - Whether to show the status icon in the header.
+     * Icon only shows if headerText is also provided.
+     * Default: true
+     */
+    statusIcon = true;
+    /**
+     * @prop {number} offsetDistance - Distance in pixels between the popover and trigger element.
+     * Default: 12
+     */
+    offsetDistance = 12;
+    /**
+     * @prop {boolean} closeOnOutsideClick - Whether to close when clicking outside the popover.
+     * Default: true
+     */
+    closeOnOutsideClick = true;
+    /**
+     * @prop {boolean} closeOnEscape - Whether to close when pressing the Escape key.
+     * Default: true
+     */
+    closeOnEscape = true;
+    isOpen = false;
+    /**
+     * @event bcmBeforeOpen - Emitted before the popover opens.
+     * Useful for performing actions before the popover becomes visible.
+     */
+    bcmBeforeOpen;
+    /**
+     * @event bcmOpen - Emitted when the popover is opened.
+     * Useful for tracking when the popover becomes visible.
+     */
+    bcmOpen;
+    /**
+     * @event bcmBeforeClose - Emitted before the popover closes.
+     * Useful for performing cleanup actions before hiding.
+     */
+    bcmBeforeClose;
+    /**
+     * @event bcmClose - Emitted when the popover is closed.
+     * Useful for tracking when the popover is hidden.
+     */
+    bcmClose;
+    /**
+     * @event bcmConfirm - Emitted when the user clicks the confirm button.
+     * This is where you should handle the confirmed action.
+     */
+    bcmConfirm;
+    /**
+     * @event bcmCancel - Emitted when the user clicks cancel, presses Escape, or clicks outside.
+     * Useful for tracking when the user dismisses the confirmation.
+     */
+    bcmCancel;
     async handleOpenChange(open) {
         if (!this.popconfirmRef)
             return;
@@ -438,6 +390,21 @@ export class BcmPopConfirm {
             });
         }
     }
+    handleSlotChange = () => {
+        const slot = this.host.shadowRoot?.querySelector('slot:not([name])');
+        if (!slot)
+            return;
+        const elements = slot.assignedElements();
+        const assignedElement = elements[0];
+        this.triggerRef = (assignedElement || this.host);
+        if (!this.triggerRef)
+            return;
+        if (this.popconfirmRef && this.popconfirmId) {
+            this.triggerRef.setAttribute('aria-describedby', this.popconfirmId);
+        }
+        this.removeTriggerListeners();
+        this.setupTriggerListeners();
+    };
     setupTriggerListeners() {
         if (!this.triggerRef)
             return;
@@ -448,15 +415,25 @@ export class BcmPopConfirm {
             return;
         this.triggerRef.removeEventListener('click', this.handleTriggerClick);
     }
+    handleTriggerClick = () => {
+        this.toggle();
+    };
+    handleOutsideClick = (e) => {
+        if (!this.closeOnOutsideClick || !this.isOpen)
+            return;
+        const target = e.target;
+        if (!this.host.contains(target) && !this.popconfirmRef?.contains(target)) {
+            this.handleCancel();
+        }
+    };
     handleKeyDown(e) {
         if (!this.closeOnEscape || !this.isOpen)
             return;
         if (e.key === 'Escape') {
             // Check if this is the topmost open popconfirm
             const openPopconfirms = Array.from(document.querySelectorAll('bcm-pop-confirm')).filter(el => {
-                var _a;
-                const popconfirmEl = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('[popover]');
-                return popconfirmEl === null || popconfirmEl === void 0 ? void 0 : popconfirmEl.matches(':popover-open');
+                const popconfirmEl = el.shadowRoot?.querySelector('[popover]');
+                return popconfirmEl?.matches(':popover-open');
             });
             const topPopconfirm = openPopconfirms[openPopconfirms.length - 1];
             if (topPopconfirm === this.host) {
@@ -466,6 +443,23 @@ export class BcmPopConfirm {
             }
         }
     }
+    handleToggle = (e) => {
+        const toggleEvent = e;
+        if (toggleEvent.newState === 'open' && !this.isOpen) {
+            this.isOpen = true;
+        }
+        else if (toggleEvent.newState === 'closed' && this.isOpen) {
+            this.isOpen = false;
+        }
+    };
+    handleConfirm = () => {
+        this.bcmConfirm.emit();
+        this.hide();
+    };
+    handleCancel = () => {
+        this.bcmCancel.emit();
+        this.hide();
+    };
     componentWillLoad() {
         this.popconfirmId = `popconfirm-${Math.random().toString(36).substring(2, 11)}`;
     }
@@ -482,6 +476,43 @@ export class BcmPopConfirm {
             this.popconfirmRef.removeEventListener('toggle', this.handleToggle);
         }
     }
+    popconfirmClass = tv({
+        slots: {
+            container: 'bcm-ui-element fixed m-0 flex flex-col bg-[--popover-bg] rounded-lg shadow-3 z-[9999]',
+            arrow: 'absolute w-3 h-3 bg-[--popover-bg] rotate-45',
+            closeBtn: 'absolute flex size-6 items-center justify-center hover:bg-gray-100 rounded-full cursor-pointer text-color-muted',
+            header: 'flex items-center pr-8',
+            headerLeft: 'flex items-center gap-2',
+            title: '!text-color-header font-semibold',
+            body: 'flex-1 font-sans text-pretty',
+            footer: 'flex flex-row justify-end gap-2',
+        },
+        variants: {
+            size: {
+                small: {
+                    container: 'text-size-4 max-w-64 p-4 gap-4',
+                    title: 'text-size-5',
+                    closeBtn: 'top-3 right-3',
+                },
+                medium: {
+                    container: 'text-size-5 max-w-80 p-6 gap-6',
+                    title: 'text-size-6',
+                    closeBtn: 'top-4 right-4',
+                },
+                large: {
+                    container: 'text-size-6 max-w-96 p-8 gap-8',
+                    title: 'text-size-7',
+                    closeBtn: 'top-6 right-6',
+                },
+            },
+            status: {
+                info: { headerLeft: 'text-[var(--bcm-ui-color-text-info)]' },
+                success: { headerLeft: 'text-[var(--bcm-ui-color-text-success)]' },
+                warning: { headerLeft: 'text-[var(--bcm-ui-color-text-warning)]' },
+                error: { headerLeft: 'text-[var(--bcm-ui-color-text-error)]' },
+            },
+        },
+    });
     render() {
         const { container, arrow: arrowClass, header, headerLeft, title, closeBtn, body, footer } = this.popconfirmClass({
             size: this.size,