{"version":3,"file":"avatar.Bl6AiujE.js","sources":["../../../../../packages/web-components/src/lib/components/avatar/avatar.ts"],"sourcesContent":["import { html, nothing } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { pdsCustomElement as customElement } from '../../decorators/pds-custom-element';\nimport { PdsElement } from '../PdsElement';\nimport styles from './avatar.scss?inline';\nimport '../decorator/decorator';\n\n/**\n * @summary An avatar image with descriptive text\n *\n * @slot media Required: Holds a div containing an avatar image or icon\n * @slot heading Required: Holds the heading elements\n * @slot details Optional: Holds the details elements\n */\n@customElement('pds-avatar', {\n  category: 'component',\n  type: 'component',\n  state: 'stable',\n  styles,\n})\nexport class PdsAvatar extends PdsElement {\n  /**\n   * Style variant\n   * - **color-bar** not supported with inverted=\"true\" and/or align=\"center\"\n   */\n  @property()\n  variant: 'color-bar' | 'default' = 'default';\n\n  @property({ type: Boolean })\n  inverted: boolean = false;\n\n  @property()\n  align: 'center' | 'default' = 'default';\n\n  /**\n   * @internal\n   */\n  preflight() {\n    if (this.variant === 'color-bar' && this.align === 'center') {\n      console.warn(\n        'Avatar with the color-bar variant cannot be used with align=center. Please remove the align property to remove this warning.',\n        this,\n      );\n    }\n    if (this.variant === 'color-bar' && this.inverted) {\n      console.warn(\n        'Avatar with the color-bar variant cannot be used with the inverted property. Please remove the inverted property to remove this warning.',\n        this,\n      );\n    }\n  }\n\n  /**\n   * @internal\n   *\n   * @returns pds-decorator for color-bar variant\n   */\n  colorBarVariant() {\n    if (\n      this.variant === 'color-bar' &&\n      this.align !== 'center' &&\n      this.inverted === false\n    ) {\n      return html`<pds-decorator></pds-decorator>`;\n    }\n    return nothing;\n  }\n\n  /**\n   * @internal\n   */\n  get classNames() {\n    return {\n      [this.variant]: !!this.variant,\n      'align-center': this.align === 'center' && this.variant !== 'color-bar',\n      inverted: this.inverted === true && this.variant !== 'color-bar',\n    };\n  }\n\n  protected override firstUpdated() {\n    super.firstUpdated();\n\n    if (!this.inverted) {\n      return;\n    }\n\n    const nodeList = this.renderRoot.querySelectorAll(`slot`);\n\n    /**\n     * loop through all slot children\n     * and set pds-link variant to inverted\n     */\n    Array.from(nodeList).forEach((slot) =>\n      slot.assignedElements({ flatten: true }).forEach((element) => {\n        const links = Array.from(element.querySelectorAll('pds-link'));\n        if (element.tagName.toLowerCase() === 'pds-link') {\n          links.push(element);\n        }\n        links.forEach((link) => {\n          link.setAttribute('variant', 'inverted');\n        });\n      }),\n    );\n  }\n\n  render() {\n    this.preflight();\n    return html` ${this.colorBarVariant()}\n      <div class=${this.getClass()}>\n        <div class=\"${this.classEl('media')}\">\n          <slot name=\"media\"></slot>\n        </div>\n        <div class=\"${this.classEl('info')}\">\n          <div class=\"${this.classEl('name')}\">\n            <slot name=\"heading\"></slot>\n          </div>\n          <div class=\"${this.classEl('details')}\">\n            <slot name=\"details\"></slot>\n          </div>\n        </div>\n      </div>`;\n  }\n}\n"],"names":["PdsAvatar","PdsElement","html","nothing","nodeList","slot","element","links","link","__decorateClass","property","customElement","styles"],"mappings":";;;;;;;;;AAoBa,IAAAA,IAAN,cAAwBC,EAAW;AAAA,EAAnC,cAAA;AAAA,UAAA,GAAA,SAAA,GAM8B,KAAA,UAAA,WAGf,KAAA,WAAA,IAGU,KAAA,QAAA;AAAA,EAAA;AAAA;AAAA;AAAA;AAAA,EAK9B,YAAY;AACV,IAAI,KAAK,YAAY,eAAe,KAAK,UAAU,YACzC,QAAA;AAAA,MACN;AAAA,MACA;AAAA,IAAA,GAGA,KAAK,YAAY,eAAe,KAAK,YAC/B,QAAA;AAAA,MACN;AAAA,MACA;AAAA,IAAA;AAAA,EAGN;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOA,kBAAkB;AAEd,WAAA,KAAK,YAAY,eACjB,KAAK,UAAU,YACf,KAAK,aAAa,KAEXC,qCAEFC;AAAAA,EACT;AAAA;AAAA;AAAA;AAAA,EAKA,IAAI,aAAa;AACR,WAAA;AAAA,MACL,CAAC,KAAK,OAAO,GAAG,CAAC,CAAC,KAAK;AAAA,MACvB,gBAAgB,KAAK,UAAU,YAAY,KAAK,YAAY;AAAA,MAC5D,UAAU,KAAK,aAAa,MAAQ,KAAK,YAAY;AAAA,IAAA;AAAA,EAEzD;AAAA,EAEmB,eAAe;AAG5B,QAFJ,MAAM,aAAa,GAEf,CAAC,KAAK;AACR;AAGF,UAAMC,IAAW,KAAK,WAAW,iBAAiB,MAAM;AAMlD,UAAA,KAAKA,CAAQ,EAAE;AAAA,MAAQ,CAACC,MAC5BA,EAAK,iBAAiB,EAAE,SAAS,IAAM,EAAE,QAAQ,CAACC,MAAY;AAC5D,cAAMC,IAAQ,MAAM,KAAKD,EAAQ,iBAAiB,UAAU,CAAC;AAC7D,QAAIA,EAAQ,QAAQ,YAAY,MAAM,cACpCC,EAAM,KAAKD,CAAO,GAEdC,EAAA,QAAQ,CAACC,MAAS;AACjB,UAAAA,EAAA,aAAa,WAAW,UAAU;AAAA,QAAA,CACxC;AAAA,MAAA,CACF;AAAA,IAAA;AAAA,EAEL;AAAA,EAEA,SAAS;AACP,gBAAK,UAAU,GACRN,KAAQ,KAAK,gBAAA,CAAiB;AAAA,mBACtB,KAAK,UAAU;AAAA,sBACZ,KAAK,QAAQ,OAAO,CAAC;AAAA;AAAA;AAAA,sBAGrB,KAAK,QAAQ,MAAM,CAAC;AAAA,wBAClB,KAAK,QAAQ,MAAM,CAAC;AAAA;AAAA;AAAA,wBAGpB,KAAK,QAAQ,SAAS,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,EAK7C;AACF;AAhGEO,EAAA;AAAA,EADCC,EAAS;AAAA,GALCV,EAMX,WAAA,WAAA,CAAA;AAGAS,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,SAAS;AAAA,GARhBV,EASX,WAAA,YAAA,CAAA;AAGAS,EAAA;AAAA,EADCC,EAAS;AAAA,GAXCV,EAYX,WAAA,SAAA,CAAA;AAZWA,IAANS,EAAA;AAAA,EANNE,EAAc,cAAc;AAAA,IAC3B,UAAU;AAAA,IACV,MAAM;AAAA,IACN,OAAO;AAAA,IACP,QAAAC;AAAA,EAAA,CACD;AAAA,GACYZ,CAAA;"}