{"version":3,"file":"modal.DZk4taWv.js","sources":["../../../../../packages/web-components/src/lib/components/modal/modal.ts"],"sourcesContent":["import { html, nothing, PropertyValues } 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';\nimport { requiredSlot } from '../../decorators/requiredSlot';\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  state: 'stable',\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 updated(_changedProperties: PropertyValues): void {\n    super.updated(_changedProperties);\n\n    if (_changedProperties.has('openOnLoad') && this.openOnLoad) {\n      this.openModal();\n    }\n\n    if (_changedProperties.has('hideCloseButton') && this.hideCloseButton) {\n      this.handleDocumentClick();\n    }\n  }\n\n  /**\n   * @internal\n   * Close button\n   */\n  @query('#close-button')\n  closeButton: HTMLElement;\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.closeButton,\n      fallbackFocus: this.headingForFallbackFocus,\n      allowOutsideClick: true,\n      tabbableOptions: {\n        getShadowRoot: true,\n      },\n    });\n  }\n\n  openModal() {\n    this.dialog.showModal();\n\n    setTimeout(() => {\n      this.initializeTrap();\n      this.trap.activate();\n    }, 0);\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  @requiredSlot(['default'])\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                id=\"close-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","_changedProperties","focusTrap.createFocusTrap","event","e","target","html","nothing","__decorateClass","property","state","required","query","requiredSlot","customElement","styles"],"mappings":"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"}