{"mappings":"AACA,cAAc,sBAAiC;AAI/C,SAAS,mBAAkC;;;;;;;;;;AAa3C,cAuCM,eAAe,YAAY;;;;;CAK/B,AACA;;;;CAKA,AACA;;;;CAKA,AACA;CAEA,UAAU,UAAU,eAAe;CAWnC,UAAU,iBAAiB,eAAe;CAmB1C;CAIA,UAAU;;AAKZ,eAAe;AACf,SAAS","names":[],"sources":["../../../../src/web-components/avatar/component.ts"],"sourcesContent":["import { attr, godown, htmlSlot, styles } from \"@godown/element\";\nimport { type TemplateResult, css, html } from \"lit\";\nimport { property } from \"lit/decorators.js\";\nimport { omit } from \"sharekit\";\n\nimport { GlobalStyle, cssGlobalVars } from \"../../internal/global-style.js\";\n\nconst protoName = \"avatar\";\n\n/**\n * {@linkcode Avatar} renders a avatar.\n *\n * Renders as an image if it has a src property,\n * otherwise falls back to name or nameless slot.\n *\n * @slot - Display content if no `src` or `name` provided.\n * @category display\n */\n@godown(protoName)\n@styles(css`\n  :host {\n    color: var(${cssGlobalVars.foreground});\n    background: var(${cssGlobalVars.passive});\n    vertical-align: bottom;\n    overflow: hidden;\n    width: 2em;\n    height: 2em;\n  }\n\n  :host,\n  [part=\"root\"] {\n    display: inline-flex;\n  }\n\n  :host([contents]) [part=\"root\"] {\n    display: inline-flex;\n    width: inherit;\n    height: inherit;\n  }\n\n  :host([round]) {\n    border-radius: 50%;\n  }\n\n  [part=\"image\"] {\n    width: 100%;\n    height: 100%;\n    object-fit: cover;\n  }\n\n  [part=\"root\"] {\n    position: relative;\n    border-radius: inherit;\n    align-items: center;\n    justify-content: center;\n  }\n`)\nclass Avatar extends GlobalStyle {\n  /**\n   * The `src` property specifies the URL of the avatar image.\n   * If `src` is not provided, the component will display the `name` property instead.\n   */\n  @property()\n  src: string | undefined | null;\n\n  /**\n   * Specifies the name or initials to display if no `src` is provided\n   */\n  @property()\n  name = \"\";\n\n  /**\n   * If `true`, will make the avatar display as a circle.\n   */\n  @property({ type: Boolean })\n  round = false;\n\n  protected render(): TemplateResult<1> {\n    return html`\n      <div\n        part=\"root\"\n        ${attr(omit(this.observedRecord, \"src\"))}\n      >\n        ${this._renderAvatar()}\n      </div>\n    `;\n  }\n\n  protected _renderAvatar(): TemplateResult<1> {\n    if (this.src) {\n      return html`\n        <img\n          part=\"image\"\n          src=\"${this.src}\"\n          alt=\"${this.name}\"\n          @error=${this._handleError}\n        />\n      `;\n    }\n    if (this.name) {\n      return html`\n        <span part=\"name\">${this.formatName()}</span>\n      `;\n    }\n    return htmlSlot();\n  }\n\n  formatName(): string {\n    return this.name;\n  }\n\n  protected _handleError(): void {\n    this.src = undefined;\n  }\n}\n\nexport default Avatar;\nexport { Avatar };\n"],"version":3,"file":"component.d.ts"}