{"version":3,"file":"accordion.P-EPdSWN.js","sources":["../../../../../packages/web-components/src/lib/components/accordion/accordion.ts"],"sourcesContent":["import { html, nothing } from 'lit';\nimport { query, property, state } from 'lit/decorators.js';\nimport { pdsCustomElement as customElement } from '../../decorators/pds-custom-element';\nimport { PdsElement } from '../PdsElement';\nimport styles from './accordion.scss?inline';\nimport '@principal/design-system-icons-web/chevron-down';\n\n/**\n * @summary This component is a accordion that toggles content when the header is clicked\n *\n * @slot summary-title Required: Header summary title\n * @slot summary-description Optional: Summary description\n * @slot accordion-content Required: Hidden/shown accordion content\n * @fires pds-accordion-open A custom event dispatched on click when accordion is opened\n * @fires pds-accordion-close A custom event dispatched on click when accordion is closed\n */\n@customElement('pds-accordion', {\n  category: 'component',\n  type: 'component',\n  state: 'stable',\n  styles,\n})\nexport class PdsAccordion extends PdsElement {\n  /**\n   * Style variant\n   * - **default** renders the standard accordion color variant\n   * - **inverted** renders the accordion on dark backgrounds\n   * - **strong** renders the strong accordion color variant\n   */\n  @property()\n  variant: 'default' | 'inverted' | 'strong' = 'default';\n\n  /**\n   * Whether the accordion is open or not\n   */\n  @property({ type: Boolean, reflect: true })\n  open: boolean = false;\n\n  /**\n   * Reduces the top and bottom padding of the label\n   */\n  @property({ type: Boolean, reflect: true })\n  condensed: boolean = false;\n\n  /**\n   * The details element that contains the summary and content elements\n   * @internal\n   */\n  @query('details')\n  details: HTMLDetailsElement;\n\n  /**\n   * The summary element that contains the summary element\n   * @internal\n   */\n  @query('summary')\n  summary: HTMLElement;\n\n  /**\n   * Returns whether the description slot is empty or not\n   * @internal\n   */\n  @state()\n  descriptionPresent: boolean = false;\n\n  updated() {\n    this.descriptionPresent = !this.slotEmpty('summary-description');\n  }\n\n  /**\n   * Because we require animation we have to override the default behavior of the disclosure widget.\n   */\n  handleClick(e: MouseEvent) {\n    e.preventDefault();\n    this.toggle();\n  }\n\n  /**\n   * Toggle the accordion to either open or closed.\n   */\n  toggle() {\n    if (this.isClosing || !this.open) {\n      if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) {\n        this.open = true;\n      } else {\n        this.expand();\n      }\n\n      this.open = true;\n\n      const customEvent = new CustomEvent('pds-accordion-open', {\n        bubbles: true,\n        composed: true,\n        detail: {\n          summary: this.querySelector('[slot]')?.textContent,\n        },\n      });\n\n      this.dispatchEvent(customEvent);\n    } else if (this.isExpanding || this.open) {\n      if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) {\n        this.open = false;\n      } else {\n        this.close();\n      }\n\n      this.open = false;\n\n      const customEvent = new CustomEvent('pds-accordion-close', {\n        bubbles: true,\n        composed: true,\n        detail: {\n          summary: this.querySelector('[slot]')?.textContent,\n        },\n      });\n\n      this.dispatchEvent(customEvent);\n    }\n  }\n\n  /**\n   * Close the accordion by setting the height of the details element to the height of the summary element\n   */\n  close() {\n    this.isClosing = true;\n    this.details.style.overflow = 'hidden';\n\n    const startHeight = `${this.details.offsetHeight}px`;\n\n    const endHeight = `${this.summary.offsetHeight}px`;\n\n    if (this.animation) {\n      this.animation.cancel();\n      this.isClosing = false;\n    }\n\n    this.animation = this.details.animate(\n      {\n        height: [startHeight, endHeight],\n      },\n      {\n        duration: 400,\n        easing: 'ease-out',\n      },\n    );\n\n    this.animation.onfinish = () => this.onAnimationFinish(false);\n  }\n\n  /**\n   * Open the accordion by setting the height of the details elememt to the height of the summary and content elements\n   */\n  expand(): void {\n    this.details.style.height = `${this.details.offsetHeight}px`;\n    this.open = true;\n    this.details.style.overflow = 'hidden';\n    window.requestAnimationFrame(() => this.animateExpand());\n  }\n\n  /**\n   * Start the expand animation\n   */\n  animateExpand(): void {\n    this.isExpanding = true;\n    const startHeight = `${this.details.offsetHeight}px`;\n    const endHeight = `${this.details.scrollHeight}px`;\n\n    if (this.animation) {\n      this.animation.cancel();\n      this.isExpanding = false;\n    }\n\n    this.animation = this.details.animate(\n      {\n        height: [startHeight, endHeight],\n      },\n      {\n        duration: 400,\n        easing: 'ease-out',\n      },\n    );\n\n    this.animation.onfinish = () => this.onAnimationFinish(true);\n  }\n\n  /**\n   * When the animation is finished ensure that the details element's\n   * open attribute is set to the correct value and the height\n   * and overflow properties are reset.\n   */\n  onAnimationFinish(open: boolean) {\n    this.open = open;\n    // Clear this.animation\n    this.animation = null;\n\n    this.isClosing = false;\n    this.isExpanding = false;\n    this.details.style.height = '';\n    this.details.style.overflow = '';\n  }\n\n  /**\n   * @internal\n   */\n  private isClosing = false;\n\n  /**\n   * @internal\n   */\n  private isExpanding = false;\n\n  /**\n   * @internal\n   */\n  private animation: Animation | null;\n\n  /**\n   * @internal\n   */\n  get classNames() {\n    return {\n      'is-active': this.open,\n      condensed: this.condensed,\n      [this.variant]: !!this.variant,\n    };\n  }\n\n  render() {\n    // TODO: Remove the default slot - this will be a breaking change\n    return html`<details\n      class=\"${this.getClass()}\"\n      ?open=\"${this.open}\"\n      part=\"accordion\"\n    >\n      <summary\n        @click=${this.handleClick}\n        ?condensed=\"${this.condensed}\"\n        class=\"pds-c-accordion__summary\"\n        part=\"accordion-summary\"\n      >\n        <slot name=\"summary-title\" part=\"summary-title\"></slot>\n        <span\n          class=\"${this.descriptionPresent\n            ? this.classEl('description-present')\n            : nothing}\"\n          part=\"description-present\"\n        >\n          <slot name=\"summary-description\" part=\"summary-description\"></slot>\n        </span>\n        <span class=\"pds-c-accordion__icon\">\n          <pds-icon-chevron-down size=\"default\"> </pds-icon-chevron-down>\n        </span>\n      </summary>\n      <div class=\"pds-c-accordion__content\" part=\"accordion-content\">\n        <slot name=\"accordion-content\"></slot>\n      </div>\n    </details>`;\n  }\n}\n"],"names":["PdsAccordion","PdsElement","e","customEvent","_a","_b","startHeight","endHeight","open","html","nothing","__decorateClass","property","query","state","customElement","styles"],"mappings":"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"}