{"version":3,"file":"teaser.mjs","sources":["../../../../src/teaser/teaser.ts"],"sourcesContent":["import { html, LitElement, unsafeCSS, CSSResult, PropertyValues } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { appendStylesheet } from '../core/utils';\nimport styles from './teaser.scss?inline';\nimport slotStyles from './teaser.slot.scss?inline';\n\n@customElement('pips-v1-teaser')\nexport class Teaser extends LitElement {\n  static override styles: CSSResult = unsafeCSS(styles);\n\n  @property({ type: String })\n  variant: string = '';\n\n  @property({ type: String })\n  theme: string = '';\n\n  @property({ type: String })\n  iconPosition: string = '';\n\n  @property({ type: String })\n  disclosureStyle: string = '';\n\n  private resizeObserver?: ResizeObserver;\n\n  protected override firstUpdated(_changedProperties: PropertyValues): void {\n      if (this.variant == 'teaseractionbar') {\n        this.resizeObserver = new ResizeObserver(() => this.onResize());\n        this.resizeObserver.observe(this);\n      }\n\n      if (this.variant == 'teaserherospot') {\n        const metadataSlot = this.shadowRoot!.querySelector('slot[name=\"metadata\"]') as HTMLSlotElement | null;\n        if (!metadataSlot) return;\n        const actionToolbarSlot = this.shadowRoot!.querySelector('slot[name=\"action-toolbar\"]') as HTMLSlotElement | null;\n        if (!actionToolbarSlot) return;\n\n        const updateSlot = () => {\n          const hasContent = [metadataSlot, actionToolbarSlot].some(slot =>\n            slot.assignedNodes({ flatten: true }).some(\n              node => node.nodeType !== Node.TEXT_NODE || node.textContent!.trim() !== ''\n            )\n          );\n          this.toggleAttribute('article-hero', hasContent);\n        }\n\n        metadataSlot.addEventListener('slotchange', updateSlot);\n        actionToolbarSlot.addEventListener('slotchange', updateSlot);\n        updateSlot();\n      }\n  }\n\n  override disconnectedCallback(): void {\n      super.disconnectedCallback();\n      this.resizeObserver?.disconnect();\n  }\n\n  private onResize() {\n    if (this.variant != 'teaseractionbar') return;\n    const width = window.innerWidth;\n    const slot = this.shadowRoot?.querySelector('slot[name=\"call-to-action\"]') as HTMLSlotElement | null;\n    if (!slot) return;\n    const assignedElements = slot.assignedElements({ flatten: true });\n    if (assignedElements.length === 0) return;\n    const button = assignedElements[0];\n    if (!button) return;\n      \n    if (width < 992) {\n      button.setAttribute('size', 'small');\n    } else {\n      button.setAttribute('size', 'medium');\n    }\n  }\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n\n    // Only required if you need to apply styles to slotted elements\n    appendStylesheet({\n      target: this,\n      styles: slotStyles,\n      name: `${this.tagName.toLowerCase()}-slot`\n    });\n  }\n\n  private getTemplate() {\n    switch (this.variant) {\n      case 'teaseractioncard':\n        return html`\n        <div class=\"actioncard-container\">\n          <div class=\"icon-bg\">\n            <slot name=\"image\"></slot>   \n          </div>\n          <div class=\"content-cta-container\">\n            <div>\n              <slot name=\"heading\"></slot>      \n              <slot name=\"sub-heading\"></slot>\n              <!-- Body content goes into the default slot --> \n              <slot></slot>\n            </div>\n            <slot name=\"call-to-action\"></slot>\n          </div>\n        </div>\n        `;\n      case 'teaserherospot':\n        return html` \n          <slot name=\"preTitle\"></slot>\n          <slot name=\"heading\"></slot>\n          <div class=\"details-wrap\">\n            <slot name=\"metadata\"></slot>\n            <slot name=\"action-toolbar\"></slot>\n          </div>\n          <slot></slot>\n          <slot name=\"image\"></slot>\n        `;\n      case 'teasercontent':\n        if (this.iconPosition === 'left') {\n          return html`\n          <slot name=\"image\" class=\"iconImage\"></slot>   \n          <div class=\"content-wrap\">   \n            <slot name=\"heading\"></slot>      \n            <slot name=\"sub-heading\"></slot>\n            <!-- Body content goes into the default slot --> \n            <slot></slot>\n            <slot name=\"call-to-action\"></slot>\n          </div>\n        `;\n        }\n        //fallthrough intended\n      default:  \n        return html`\n          <slot name=\"image\"></slot>      \n          <slot name=\"heading\"></slot>      \n          <slot name=\"sub-heading\"></slot>\n          <!-- Body content goes into the default slot --> \n          <slot></slot>\n          <slot name=\"call-to-action\"></slot>\n        `;\n    }\n  }\n\n  override render() {\n    return html`\n      <div class=\"layout\">\n        <div class=\"teaser-container\">\n          ${this.getTemplate()}\n        </div>\n      </div>\n    `;\n  }\n}"],"names":["Teaser","LitElement","constructor","super","arguments","this","variant","theme","iconPosition","disclosureStyle","_changedProperties","resizeObserver","ResizeObserver","onResize","observe","metadataSlot","shadowRoot","querySelector","actionToolbarSlot","updateSlot","hasContent","some","slot","assignedNodes","flatten","node","nodeType","Node","TEXT_NODE","textContent","trim","toggleAttribute","addEventListener","disconnectedCallback","disconnect","width","window","innerWidth","assignedElements","length","button","setAttribute","connectedCallback","appendStylesheet","target","styles","name","tagName","toLowerCase","getTemplate","html","render","unsafeCSS","__decorateClass","property","type","String","prototype","customElement"],"mappings":"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"}