maxzilla-ui-core/dist/mz-avatar-BHVMPOe5.js

Core web components library for Maxzilla UI built with Lit Element

import { css as u, LitElement as m, html as l } from "lit";
import { property as s, state as d, customElement as p } from "lit/decorators.js";
import { classMap as h } from "lit/directives/class-map.js";
import { b as g } from "./base-CQAGJ0rS.js";
var z = Object.defineProperty, f = Object.getOwnPropertyDescriptor, a = (r, i, o, n) => {
  for (var e = n > 1 ? void 0 : n ? f(i, o) : i, v = r.length - 1, c; v >= 0; v--)
    (c = r[v]) && (e = (n ? c(i, o, e) : c(e)) || e);
  return n && e && z(i, o, e), e;
};
let t = class extends m {
  constructor() {
    super(...arguments), this.src = "", this.alt = "", this.initials = "", this.size = "md", this.shape = "circle", this.status = "", this.interactive = !1, this.imageError = !1, this.handleImageError = () => {
      this.imageError = !0;
    }, this.handleImageLoad = () => {
      this.imageError = !1;
    }, this.handleClick = (r) => {
      this.interactive && this.dispatchEvent(
        new CustomEvent("mz-avatar-click", {
          detail: { originalEvent: r },
          bubbles: !0,
          composed: !0
        })
      );
    };
  }
  getInitials() {
    return this.initials ? this.initials.slice(0, 2) : this.alt ? this.alt.split(" ").map((r) => r[0]).join("").slice(0, 2) : "?";
  }
  render() {
    const r = {
      avatar: !0,
      "avatar--interactive": this.interactive
    }, i = {
      "avatar-status": !0,
      [`avatar-status--${this.status}`]: !!this.status
    }, o = this.src && !this.imageError;
    return l`
      <div class=${h(r)} @click=${this.handleClick}>
        ${o ? l`
              <img
                class="avatar-image"
                src=${this.src}
                alt=${this.alt}
                @error=${this.handleImageError}
                @load=${this.handleImageLoad}
              />
            ` : l`
              <div class="avatar-fallback">
                <slot>${this.getInitials()}</slot>
              </div>
            `}
        
        ${this.status ? l`<div class=${h(i)}></div>` : ""}
      </div>
    `;
  }
};
t.styles = [
  g,
  u`
      :host {
        display: inline-block;
        --avatar-size: 2.5rem;
        --avatar-font-size: var(--mz-text-sm);
        --avatar-border-radius: var(--mz-radius-full);
      }

      .avatar {
        position: relative;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: var(--avatar-size);
        height: var(--avatar-size);
        border-radius: var(--avatar-border-radius);
        overflow: hidden;
        background: var(--mz-color-neutral-200);
        color: var(--mz-color-neutral-600);
        font-size: var(--avatar-font-size);
        font-weight: 500;
        user-select: none;
        transition: var(--mz-transition-normal);
      }

      .avatar--interactive {
        cursor: pointer;
      }

      .avatar--interactive:hover {
        transform: scale(1.05);
        box-shadow: var(--mz-shadow-md);
      }

      .avatar-image {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: inherit;
      }

      .avatar-fallback {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 100%;
        text-transform: uppercase;
      }

      /* Size variants */
      :host([size='xs']) {
        --avatar-size: 1.5rem;
        --avatar-font-size: 0.625rem;
      }

      :host([size='sm']) {
        --avatar-size: 2rem;
        --avatar-font-size: var(--mz-text-xs);
      }

      :host([size='lg']) {
        --avatar-size: 3rem;
        --avatar-font-size: var(--mz-text-base);
      }

      :host([size='xl']) {
        --avatar-size: 4rem;
        --avatar-font-size: var(--mz-text-lg);
      }

      /* Shape variants */
      :host([shape='square']) {
        --avatar-border-radius: var(--mz-radius-md);
      }

      :host([shape='rounded']) {
        --avatar-border-radius: var(--mz-radius-lg);
      }

      /* Status indicator */
      .avatar-status {
        position: absolute;
        bottom: 0;
        right: 0;
        width: 25%;
        height: 25%;
        border-radius: 50%;
        border: 2px solid var(--mz-color-neutral-0);
        background: var(--mz-color-neutral-400);
      }

      .avatar-status--online {
        background: var(--mz-color-success);
      }

      .avatar-status--offline {
        background: var(--mz-color-neutral-400);
      }

      .avatar-status--busy {
        background: var(--mz-color-error);
      }

      .avatar-status--away {
        background: var(--mz-color-warning);
      }
    `
];
a([
  s({ type: String })
], t.prototype, "src", 2);
a([
  s({ type: String })
], t.prototype, "alt", 2);
a([
  s({ type: String })
], t.prototype, "initials", 2);
a([
  s({ type: String, reflect: !0 })
], t.prototype, "size", 2);
a([
  s({ type: String, reflect: !0 })
], t.prototype, "shape", 2);
a([
  s({ type: String, reflect: !0 })
], t.prototype, "status", 2);
a([
  s({ type: Boolean, reflect: !0 })
], t.prototype, "interactive", 2);
a([
  d()
], t.prototype, "imageError", 2);
t = a([
  p("mz-avatar")
], t);
export {
  t as M
};
//# sourceMappingURL=mz-avatar-BHVMPOe5.js.map