bromcom-ui-next 0.1.28 → 0.1.30

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@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  @Prop({ mutable: true, reflect: true }) open: boolean = false;\n  @Prop() size: ModalSize = 'medium';\n  @Prop() placement: ModalPlacement = 'center';\n  @Prop() backdrop: boolean | 'static' = true;\n  @Prop({ attribute: 'full-width' }) fullWidth: boolean = false;\n  @Prop({ attribute: 'full-screen' }) fullScreen: boolean = false;\n  @Prop({ attribute: 'header-text' }) headerText?: string;\n  @Prop({ attribute: 'helper-text' }) helperText?: string;\n  @Prop({ attribute: 'no-header' }) noHeader: boolean = false;\n  @Prop({ attribute: 'no-footer' }) noFooter: boolean = false;\n  @Prop({ attribute: 'close-on-backdrop' }) closeOnBackdrop: boolean = true;\n  @Prop({ attribute: 'close-on-escape' }) closeOnEscape: boolean = true;\n\n  @State() isAnimating: boolean = false;\n  @State() shake: boolean = false;\n\n  @Event() bcmOpen: EventEmitter<void>;\n  @Event() bcmClose: EventEmitter<void>;\n  @Event({ cancelable: true }) bcmBeforeOpen: EventEmitter<void>;\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  @Method()\n  async show(): Promise<void> {\n    this.open = true;\n  }\n\n  @Method()\n  async hide(): Promise<void> {\n    this.open = false;\n  }\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/modal/modal.css

@@ -1 +1 @@
-.contents{display:contents}:host{display:contents}.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}.relative{position:relative}.inset-0{inset:0}.m-0{margin:0}.flex{display:flex}.hidden{display:none}.h-6{height:1.5rem}.h-full{height:100%}.h-screen{height:100vh}.max-h-full{max-height:100%}.max-h-none{max-height:none}.w-6{width:1.5rem}.w-full{width:100%}.w-screen{width:100vw}.min-w-0{min-width:0}.max-w-full{max-width:100%}.max-w-none{max-width:none}.flex-1{flex:1 1 0%}.flex-shrink-0{flex-shrink:0}.flex-grow{flex-grow:1}.-translate-y-4{--tw-translate-y:-1rem}.-translate-y-4,.translate-y-0{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))}.translate-y-0{--tw-translate-y:0px}.scale-100{--tw-scale-x:1;--tw-scale-y:1}.scale-100,.scale-95{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))}.scale-95{--tw-scale-x:.95;--tw-scale-y:.95}.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))}.animate-shake{animation:shake .82s cubic-bezier(.36,.07,.19,.97) infinite;animation:shake .3s cubic-bezier(.36,.07,.19,.97) both}.cursor-pointer{cursor:pointer}.flex-col{flex-direction:column}.items-start{align-items:flex-start}.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}.overflow-y-auto{overflow-y:auto}.overscroll-contain{overscroll-behavior:contain}.rounded{border-radius:var(--bcm-ui-border-radius-default,6px)}.rounded-lg{border-radius:var(--bcm-ui-border-radius-lg,8px)}.rounded-none{border-radius:var(--bcm-ui-border-radius-none,0)}.rounded-t-lg{border-top-left-radius:var(--bcm-ui-border-radius-lg,8px);border-top-right-radius:var(--bcm-ui-border-radius-lg,8px)}.border-0{border-width:0}.border-b{border-bottom-width:1px}.border-solid{border-style:solid}.border-none{border-style:none}.border-color-default{border-color:var(--bcm-ui-color-border-default)}.bg-color-base{background-color:var(--bcm-ui-color-background-base-default)}.bg-color-basic-base{background-color:var(--bcm-ui-color-background-basic-base)}.bg-transparent{background-color:transparent}.p-0{padding:0}.p-4{padding:1rem}.p-5{padding:1.25rem}.p-6{padding:1.5rem}.p-8{padding:2rem}.px-4{padding-left:1rem;padding-right:1rem}.px-5{padding-left:1.25rem;padding-right:1.25rem}.px-6{padding-left:1.5rem;padding-right:1.5rem}.px-8{padding-left:2rem;padding-right:2rem}.py-3{padding-bottom:.75rem;padding-top:.75rem}.py-4{padding-bottom:1rem;padding-top:1rem}.py-5{padding-bottom:1.25rem;padding-top:1.25rem}.pt-20{padding-top:5rem}.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)}.font-medium{font-weight:500}.font-semibold{font-weight:600}.text-color-default{color:var(--bcm-ui-color-text-default)}.text-color-header{color:var(--bcm-ui-color-text-header)}.text-color-placeholder{color:var(--bcm-ui-color-text-placeholder)}.opacity-0{opacity:0}.opacity-100{opacity:1}.shadow{--tw-shadow:var(--bcm-ui-box-shadow-default);--tw-shadow-colored:var(--bcm-ui-box-shadow-default)}.shadow,.shadow-2xl{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-2xl{--tw-shadow:var(--bcm-ui-box-shadow-2xl);--tw-shadow-colored:var(--bcm-ui-box-shadow-2xl)}.outline-none{outline:2px solid transparent;outline-offset:2px}.transition-all{transition-duration:.15s;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1)}.transition-colors{transition-duration:.15s;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1)}.duration-300{transition-duration:.3s}.ease-in-out{transition-timing-function:cubic-bezier(.4,0,.2,1)}.backdrop\:bg-color-default-dark::backdrop{background-color:var(--bcm-ui-color-background-default-dark-default)}.backdrop\:opacity-50::backdrop{opacity:.5}.backdrop\:transition-opacity::backdrop{transition-duration:.15s;transition-property:opacity;transition-timing-function:cubic-bezier(.4,0,.2,1)}.backdrop\:duration-300::backdrop{transition-duration:.3s}.hover\:bg-color-default-hover:hover{background-color:var(--bcm-ui-color-background-default-hover)}.focus-visible\:ring:focus-visible{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}
+.contents{display:contents}:host{display:contents}.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}.relative{position:relative}.inset-0{inset:0}.m-0{margin:0}.flex{display:flex}.hidden{display:none}.h-6{height:1.5rem}.h-full{height:100%}.h-screen{height:100vh}.max-h-full{max-height:100%}.max-h-none{max-height:none}.w-6{width:1.5rem}.w-full{width:100%}.w-screen{width:100vw}.min-w-0{min-width:0}.max-w-full{max-width:100%}.max-w-none{max-width:none}.flex-1{flex:1 1 0%}.flex-shrink-0{flex-shrink:0}.flex-grow{flex-grow:1}.-translate-y-4{--tw-translate-y:-1rem}.-translate-y-4,.translate-y-0{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))}.translate-y-0{--tw-translate-y:0px}.scale-100{--tw-scale-x:1;--tw-scale-y:1}.scale-100,.scale-95{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))}.scale-95{--tw-scale-x:.95;--tw-scale-y:.95}.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))}.animate-shake{animation:shake .82s cubic-bezier(.36,.07,.19,.97) infinite;animation:shake .3s cubic-bezier(.36,.07,.19,.97) both}.cursor-pointer{cursor:pointer}.flex-col{flex-direction:column}.items-start{align-items:flex-start}.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}.overflow-y-auto{overflow-y:auto}.overscroll-contain{overscroll-behavior:contain}.rounded{border-radius:var(--bcm-ui-border-radius-default,6px)}.rounded-lg{border-radius:var(--bcm-ui-border-radius-lg,8px)}.rounded-none{border-radius:var(--bcm-ui-border-radius-none,0)}.rounded-t-lg{border-top-left-radius:var(--bcm-ui-border-radius-lg,8px);border-top-right-radius:var(--bcm-ui-border-radius-lg,8px)}.border{border-width:1px}.border-0{border-width:0}.border-b{border-bottom-width:1px}.border-solid{border-style:solid}.border-none{border-style:none}.border-color-default{border-color:var(--bcm-ui-color-border-default)}.bg-color-base{background-color:var(--bcm-ui-color-background-base-default)}.bg-color-basic-base{background-color:var(--bcm-ui-color-background-basic-base)}.bg-transparent{background-color:transparent}.p-0{padding:0}.p-4{padding:1rem}.p-5{padding:1.25rem}.p-6{padding:1.5rem}.p-8{padding:2rem}.px-4{padding-left:1rem;padding-right:1rem}.px-5{padding-left:1.25rem;padding-right:1.25rem}.px-6{padding-left:1.5rem;padding-right:1.5rem}.px-8{padding-left:2rem;padding-right:2rem}.py-3{padding-bottom:.75rem;padding-top:.75rem}.py-4{padding-bottom:1rem;padding-top:1rem}.py-5{padding-bottom:1.25rem;padding-top:1.25rem}.pt-20{padding-top:5rem}.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)}.font-medium{font-weight:500}.font-semibold{font-weight:600}.text-color-default{color:var(--bcm-ui-color-text-default)}.text-color-header{color:var(--bcm-ui-color-text-header)}.text-color-placeholder{color:var(--bcm-ui-color-text-placeholder)}.opacity-0{opacity:0}.opacity-100{opacity:1}.shadow{--tw-shadow:var(--bcm-ui-box-shadow-default);--tw-shadow-colored:var(--bcm-ui-box-shadow-default)}.shadow,.shadow-2xl{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-2xl{--tw-shadow:var(--bcm-ui-box-shadow-2xl);--tw-shadow-colored:var(--bcm-ui-box-shadow-2xl)}.outline-none{outline:2px solid transparent;outline-offset:2px}.transition-all{transition-duration:.15s;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1)}.transition-colors{transition-duration:.15s;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1)}.duration-300{transition-duration:.3s}.ease-in-out{transition-timing-function:cubic-bezier(.4,0,.2,1)}.backdrop\:bg-color-default-dark::backdrop{background-color:var(--bcm-ui-color-background-default-dark-default)}.backdrop\:opacity-50::backdrop{opacity:.5}.backdrop\:transition-opacity::backdrop{transition-duration:.15s;transition-property:opacity;transition-timing-function:cubic-bezier(.4,0,.2,1)}.backdrop\:duration-300::backdrop{transition-duration:.3s}.hover\:bg-color-default-hover:hover{background-color:var(--bcm-ui-color-background-default-hover)}.focus-visible\:ring:focus-visible{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}