{"version":3,"file":"accordion.BeFBouYp.js","sources":["../../../../../packages/web-components/src/lib/components/accordion/accordion.ts"],"sourcesContent":["import { html, nothing } from 'lit';\nimport {\n  query,\n  property,\n  state,\n  queryAssignedElements,\n} 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';\nimport { requiredSlot } from '../../decorators/requiredSlot';\nimport { PdsHeading } from '../heading/heading';\n\n// TODOv4: Change wording to an error will be thrown\n/**\n * @summary This component is a accordion that toggles content when the header is clicked\n * @slot summary-title Required: Header summary title. There must be a `pds-heading` slotted in with this slot or else a warning will be sent to the console.\n * The `pds-heading` should have a headingTag of `h2`-`h6`, and a variant of `label-default`, `label-sm`, or `label-lg`.\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   * @internal\n   */\n  @queryAssignedElements({ slot: 'summary-title' })\n  summaryTitleSlot: HTMLElement[];\n\n  /**\n   * Returns whether the summary-title slot has a pds-heading element\n   * @internal\n   */\n  @state()\n  validSummaryTitle: boolean = false;\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   * Validates that a pds-heading is in the summary-title slot\n   */\n  checkPdsHeading() {\n    const allowedVariants = ['label-default', 'label-sm', 'label-lg'];\n    this.validSummaryTitle = this.summaryTitleSlot.some((slotEl) => {\n      if (slotEl.tagName === 'PDS-HEADING') {\n        const headingEl = slotEl as PdsHeading;\n        const headingTag =\n          headingEl.headingTag ?? headingEl.getAttribute('headingTag');\n        const variant = headingEl.variant ?? headingEl.getAttribute('variant');\n        if (headingTag === 'h1') {\n          console.warn(\n            'The summary-title slot should not contain a pds-heading with a headingTag of h1, only h2-h6 are allowed. This will be enforced in PDSv4.',\n            this,\n          );\n        }\n\n        if (!allowedVariants.includes(variant)) {\n          // TODOv4: Make this a console error and enforce it\n          console.warn(\n            'The summary-title slot should contain a pds-heading with only label variants. This will be enforced in PDSv4.',\n            this,\n          );\n        }\n\n        // The slot contains a pds-heading element\n        return true;\n      }\n      // None of the assigned elements are a pds-heading\n      return false;\n    });\n\n    // TODOv4: Make this a console error and enforce it\n    if (!this.validSummaryTitle) {\n      console.warn(\n        'The summary-title slot must contain a pds-heading. This will be enforced in PDSv4.',\n        this,\n      );\n    }\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  @requiredSlot(['summary-title', 'accordion-content'])\n  render() {\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\n          name=\"summary-title\"\n          part=\"summary-title\"\n          @slotchange=${this.checkPdsHeading}\n        ></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","allowedVariants","slotEl","headingEl","headingTag","variant","html","nothing","__decorateClass","property","query","queryAssignedElements","state","requiredSlot","customElement","styles"],"mappings":"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"}