@umbraco-ui/uui-avatar/lib/index.js

An avatar web component for displaying user avatars.

import { defineElement } from '@umbraco-ui/uui-base/lib/registration';
import { css, LitElement, html } from 'lit';
import { property } from 'lit/decorators.js';

var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __decorateClass = (decorators, target, key, kind) => {
  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
  for (var i = decorators.length - 1, decorator; i >= 0; i--)
    if (decorator = decorators[i])
      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
  if (kind && result) __defProp(target, key, result);
  return result;
};
let UUIAvatarElement = class extends LitElement {
  constructor() {
    super(...arguments);
    this.overflow = true;
    this.imgSrc = "";
    this.imgSrcset = "";
    this.name = "";
  }
  get _initials() {
    return this.initials?.substring(0, 3) || this.createInitials(this.name);
  }
  connectedCallback() {
    super.connectedCallback();
    if (!this.name) {
      console.warn(this.tagName + " needs a `name`", this);
    }
  }
  createInitials(name) {
    let initials = "";
    if (!name) {
      return initials;
    }
    const matches = [...name.matchAll(/(?:^|\s)(.)/g)];
    const words = matches.map((m) => m[1]).join("");
    if (!words?.length) {
      return initials;
    }
    initials = words[0].charAt(0);
    if (words.length > 1) {
      initials += words[words.length - 1].charAt(0);
    }
    return initials.toUpperCase();
  }
  renderImage() {
    return html` <img
      src="${this.imgSrc}"
      srcset="${this.imgSrcset}"
      alt="${this._initials}"
      title="${this.name}" />`;
  }
  render() {
    return html`
      ${this.imgSrc ? this.renderImage() : ""}
      ${!this.imgSrc ? this._initials : ""}
      <slot></slot>
    `;
  }
};
UUIAvatarElement.styles = [
  css`
      :host {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        position: relative;
        overflow: hidden;
        border-radius: 50%;
        font-weight: 700;
        -webkit-font-smoothing: subpixel-antialiased;
        width: calc(2em + 4px);
        height: calc(2em + 4px);
        user-select: none;
        /* box-sizing: border-box; */
        aspect-ratio: 1;
        background-color: var(--uui-palette-spanish-pink,#f5c1bc);
        color: var(--uui-palette-space-cadet,#1b264f);
      }

      :host([overflow]) {
        overflow: unset;
      }

      img {
        object-fit: cover;
        height: 100%;
        width: 100%;
        overflow: hidden;
        border-radius: 50%;
      }
    `
];
__decorateClass([
  property({ type: Boolean, attribute: true, reflect: true })
], UUIAvatarElement.prototype, "overflow", 2);
__decorateClass([
  property({ type: String, attribute: "img-src" })
], UUIAvatarElement.prototype, "imgSrc", 2);
__decorateClass([
  property({ type: String, attribute: "img-srcset" })
], UUIAvatarElement.prototype, "imgSrcset", 2);
__decorateClass([
  property({ type: String, reflect: true })
], UUIAvatarElement.prototype, "name", 2);
__decorateClass([
  property({ type: String })
], UUIAvatarElement.prototype, "initials", 2);
UUIAvatarElement = __decorateClass([
  defineElement("uui-avatar")
], UUIAvatarElement);

export { UUIAvatarElement };