{"version":3,"file":"modal.BUIpgIUL.js","sources":["../../../../../packages/web-components/src/lib/components/modal/modal.ts"],"sourcesContent":["import { html, nothing } from 'lit';\nimport { property, query, state } from 'lit/decorators.js';\nimport * as focusTrap from 'focus-trap'; // ESM\nimport { pdsCustomElement as customElement } from '../../decorators/pds-custom-element';\nimport { PdsElement } from '../PdsElement';\nimport { required } from '../../decorators/required';\nimport styles from './modal.scss?inline';\nimport '../heading/heading';\nimport '../button/button';\nimport '@principal/design-system-icons-web/x';\n\n/**\n * @summary The modal component provides the user with a focused way of acknowledging, confirming, or viewing information without leaving a screen or page.\n *\n * @slot default Required: Holds the main text contents within the modal\n * @slot footer Optional: Holds the optional call to action element within the bottom of the modal\n */\n@customElement('pds-modal', {\n  category: 'component',\n  type: 'component',\n  styles,\n})\nexport class PdsModal extends PdsElement {\n  connectedCallback() {\n    super.connectedCallback();\n    this.initLocalization();\n  }\n\n  /**\n   * If true, modal appears open on page load.\n   * Otherwise, modal should be triggered from another element.\n   */\n  @property({ type: Boolean })\n  openOnLoad: boolean = false;\n\n  /**\n   * - **default** renders a default size modal\n   * - **lg** renders a wider modal\n   * If no size is passed in, it will be set as `default`\n   */\n  @property()\n  size: 'default' | 'lg' = 'default';\n\n  /**\n   * Removes the close button so a user has to agree to something in the modal\n   * This should only be used on rare occasions\n   * Setting this to true will also restrict the modal from closing with the keyboard\n   */\n  @property({ type: Boolean })\n  hideCloseButton = false;\n\n  /**\n   * @internal\n   */\n  @state()\n  trap: any;\n\n  /**\n   * Title of the modal to be displayed. This is a **required** property.\n   */\n  @required\n  @property()\n  modalTitle: string;\n\n  /**\n   * Label for modal accessibility\n   */\n  @property()\n  ariaLabelledBy: string = 'modal';\n\n  @query('dialog')\n  dialog: HTMLDialogElement;\n\n  /**\n   * @internal\n   * Fallback focus element\n   */\n  @query('pds-heading')\n  headingForFallbackFocus: HTMLElement;\n\n  protected override firstUpdated() {\n    super.firstUpdated();\n\n    if (this.openOnLoad) {\n      this.openModal();\n    }\n\n    if (this.hideCloseButton) {\n      this.handleDocumentClick();\n    }\n  }\n\n  /**\n   * @internal\n   * This resolves a bug within Safari when modals without the close button were closing when Escape was pressed\n   */\n  handleDocumentClick() {\n    document.addEventListener('click', () => {\n      document.onkeydown = (e) => {\n        if (e.key === 'Escape') {\n          e.preventDefault();\n        }\n      };\n    });\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    if (this.hideCloseButton) {\n      this.removeEventListener('click', this.handleDocumentClick);\n    }\n  }\n\n  /**\n   * @internal\n   * Initialize the focus trap\n   */\n  initializeTrap() {\n    this.trap = focusTrap.createFocusTrap(this.dialog, {\n      initialFocus: this.dialog,\n      fallbackFocus: this.headingForFallbackFocus,\n      allowOutsideClick: true,\n      tabbableOptions: {\n        getShadowRoot: true,\n      },\n    });\n  }\n\n  openModal() {\n    this.dialog.showModal();\n    this.initializeTrap();\n    this.trap.activate();\n\n    const event = new Event('pds-modal-open', {\n      bubbles: true,\n      composed: true,\n    });\n\n    this.dispatchEvent(event);\n\n    // if there is a close button, modal can be closed on backdrop click\n    if (!this.hideCloseButton) {\n      this.dialog.addEventListener('mousedown', (e: MouseEvent) => {\n        const target = e.target as HTMLElement;\n        if (target?.nodeName === 'DIALOG') {\n          this.closeModal(e);\n        }\n      });\n    }\n  }\n\n  closeModal(e: KeyboardEvent | MouseEvent) {\n    // Add class to run the modal-fade-out animation on close\n    this.dialog.classList.add('close');\n\n    this.dialog.addEventListener(\n      'animationend',\n      () => {\n        this.dialog.classList.remove('close');\n        this.dialog.close();\n        this.trap.deactivate();\n      },\n      { once: true },\n    );\n\n    e.preventDefault();\n\n    const event = new Event('pds-modal-close', {\n      bubbles: true,\n      composed: true,\n    });\n\n    this.dispatchEvent(event);\n  }\n\n  handleKeydown(e: KeyboardEvent) {\n    if (e.key === 'Escape') {\n      if (!this.hideCloseButton) {\n        this.closeModal(e);\n      } else {\n        e.preventDefault();\n      }\n    }\n  }\n\n  /**\n   * @internal\n   */\n  get classNames() {\n    return {\n      [`${this.size}`]: !!this.size,\n    };\n  }\n\n  render() {\n    return html`<dialog\n      class=${this.getClass()}\n      role=\"dialog\"\n      aria-modal=\"true\"\n      aria-labelledby=${this.ariaLabelledBy}\n      @keydown=${this.handleKeydown}\n    >\n      <div class=\"pds-c-modal__wrapper\">\n        ${\n          !this.hideCloseButton\n            ? html`<pds-button\n                class=\"pds-c-modal__close-button\"\n                variant=\"icon\"\n                ariaLabel=\"${this.translateText('close')}\"\n                @click=${this.closeModal}\n              >\n                <pds-icon-x></pds-icon-x>\n              </pds-button>`\n            : nothing\n        }\n        <div class=\"pds-c-modal__content\">\n        <div class=\"pds-c-modal__header\" id=\"${this.ariaLabelledBy}\">\n          <pds-heading class=\"pds-c-modal__heading\" headingTag=\"h2\" tabindex=\"-1\" variant=\"title-xs\"\n            >${this.modalTitle}</pds-heading\n          >\n        </div>\n        <div class=\"pds-c-modal__body\">\n          <slot></slot>\n        </div>\n        ${\n          this.slotNotEmpty('footer') &&\n          html`<div class=\"pds-c-modal__footer\">\n            <slot name=\"footer\"></slot></div>\n          </div>`\n        }\n      </div>\n    </dialog>`;\n  }\n}\n"],"names":["PdsModal","PdsElement","e","focusTrap.createFocusTrap","event","target","html","nothing","__decorateClass","property","state","required","query","customElement","styles"],"mappings":"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"}