{"version":3,"file":"contentside.mjs","sources":["../../../../src/contentside/v1/contentside.ts"],"sourcesContent":["import { html, LitElement, unsafeCSS, CSSResult, PropertyValues } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { appendStylesheet, warnOnDeprecatedSlot } from '../../core/utils';\nimport styles from './contentside.scss?inline';\nimport slotStyles from './contentside.slot.scss?inline';\nimport { gridStyles } from '../../styles';\n\n@customElement('pips-v1-contentside')\nexport class ContentSide extends LitElement {\n  static override styles: CSSResult[] = [unsafeCSS(styles), unsafeCSS(gridStyles)];\n\n  @property({ type: String, reflect: true }) backgroundColor: 'white' | 'red' | 'yellow' | 'turquoise' | 'gray' = 'white';\n  @property({ type: String }) side: 'right' | 'left' = 'right';\n  @property({ type: String, reflect: true }) mediaShape: 'default' | 'round' = 'default';\n  @property({ type: String, reflect: true }) imageSize: 'default' | 'small' = 'default';\n  @property({ type: String, reflect: true }) headingVisualSize: 'lg' | 'xl' | '2xl' | '' = '';\n\n  @state() private _hasMedia = false;\n\n  private resizeObserver?: ResizeObserver;\n  private mediaSlot?: HTMLSlotElement;\n  private imageSlot?: HTMLSlotElement;\n\n  protected override firstUpdated(_changedProperties: PropertyValues): void {\n    this.mediaSlot = this.shadowRoot!.querySelector('slot[name=\"media\"]') as HTMLSlotElement;\n    this.imageSlot = this.shadowRoot!.querySelector('slot[name=\"image\"]') as HTMLSlotElement;\n    this.resizeObserver = new ResizeObserver(() => this.onResize());\n    this.resizeObserver.observe(this);\n  }\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    console.warn('[pips-v1-contentside] This component is deprecated. Please migrate to pips-v2-contentside.');\n    this._hasMedia = this.querySelector(':scope > [slot=\"media\"], :scope > [slot=\"image\"]') !== null;\n    appendStylesheet({\n      target: this,\n      styles: slotStyles,\n      name: `${this.tagName.toLowerCase()}-slot`,\n    });\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this.resizeObserver?.disconnect();\n  }\n\n  private onResize() {\n    const width = window.innerWidth;\n    const ctaSlot = this.shadowRoot?.querySelector('slot[name=\"cta\"]') as HTMLSlotElement;\n    const assigned = ctaSlot?.assignedElements({ flatten: true }) ?? [];\n    const link = assigned.length > 1 ? assigned[1] : undefined;\n\n    if (link) {\n      const size = width < 1200 ? 'c11n-text-sm' : 'c11n-text-md';\n      const otherSize = size === 'c11n-text-sm' ? 'c11n-text-md' : 'c11n-text-sm';\n      link.classList.add(size);\n      link.classList.remove(otherSize);\n    }\n  }\n\n  private onDeprecatedTextSlot(e: Event) {\n    warnOnDeprecatedSlot(e, '[pips-v1-contentside] slot=\"text\" is deprecated. Use slot=\"body\" instead.');\n  }\n\n  private onMediaSlotChange() {\n    this._hasMedia =\n      (this.mediaSlot?.assignedElements().length ?? 0) > 0 ||\n      (this.imageSlot?.assignedElements().length ?? 0) > 0;\n  }\n\n  private getTemplate() {\n    const isSmall = this.imageSize === 'small';\n    const layoutClass = isSmall ? ` layout--col7-col4-gap1-${this.side}` : '';\n    const contentColClass = isSmall ? ' layout--col7' : '';\n    const mediaColClass = isSmall ? ' layout--col4' : '';\n\n    return html`\n    <div class=\"contentside contentside--${this.side} layout-container${this._hasMedia ? '' : ' contentside--no-media'}${layoutClass}\">\n        <div class=\"contentside-content${contentColClass}\">\n          <slot name=\"icon\"></slot>\n          <slot name=\"heading\"></slot>\n          <slot name=\"body\"></slot>\n          <slot name=\"text\" @slotchange=\"${this.onDeprecatedTextSlot}\"></slot>\n          <slot name=\"cta\"></slot>\n        </div>\n        <div class=\"contentside-image-container${mediaColClass}\">\n          <slot name=\"media\" @slotchange=\"${this.onMediaSlotChange}\"></slot>\n          <slot name=\"image\" @slotchange=\"${this.onMediaSlotChange}\"></slot>\n        </div>\n    </div>`;\n  }\n\n  override render() {\n    return html`\n      <div class=\"contentside-container cmp-layout-container${this.backgroundColor ? `--${this.backgroundColor}` : ''}\">\n        ${this.getTemplate()}\n        <slot name=\"disclosure\"></slot>\n      </div>\n    `;\n  }\n}\n"],"names":["ContentSide","LitElement","constructor","super","arguments","this","backgroundColor","side","mediaShape","imageSize","headingVisualSize","_hasMedia","_changedProperties","mediaSlot","shadowRoot","querySelector","imageSlot","resizeObserver","ResizeObserver","onResize","observe","connectedCallback","console","warn","appendStylesheet","target","styles","name","tagName","toLowerCase","disconnectedCallback","disconnect","width","window","innerWidth","ctaSlot","assigned","assignedElements","flatten","link","length","size","otherSize","classList","add","remove","e","warnOnDeprecatedSlot","onMediaSlotChange","getTemplate","isSmall","layoutClass","contentColClass","mediaColClass","html","onDeprecatedTextSlot","render","unsafeCSS","gridStyles","__decorateClass","property","type","String","reflect","prototype","state","customElement"],"mappings":"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"}