dap-design-system/dist/components/avatar/avatar.component.js

Official design system for the DÁP (dap.gov.hu)

import { clsx as o } from "../../node_modules/clsx/dist/clsx.js";
import "../../node_modules/@lit/reactive-element/reactive-element.js";
import { nothing as m } from "../../node_modules/lit-html/lit-html.js";
import "../../node_modules/lit-element/lit-element.js";
import { property as r } from "../../node_modules/@lit/reactive-element/decorators/property.js";
import { state as f } from "../../node_modules/@lit/reactive-element/decorators/state.js";
import { ifDefined as s } from "../../node_modules/lit-html/directives/if-defined.js";
import { html as l } from "../../node_modules/lit-html/static.js";
import { DdsElement as g } from "../../internal/dds-hu-element.js";
import { SizedMixin as v } from "../../internal/mixin/sizedMixin.js";
import u from "../icons/user/user-user-line/user-user-line.component.js";
import $ from "../spinner/spinner.component.js";
import I from "./avatar.scss.js";
import { unsafeCSS as b } from "../../node_modules/@lit/reactive-element/css-tag.js";
var y = Object.defineProperty, i = (p, e, a, z) => {
  for (var n = void 0, d = p.length - 1, c; d >= 0; d--)
    (c = p[d]) && (n = c(e, a, n) || n);
  return n && y(e, a, n), n;
};
const _ = v(g), h = class h extends _ {
  constructor() {
    super(), this.shape = "circle", this.variant = "image", this.loading = !1, this.interactive = !1, this.hasImageError = !1, this.isImageLoading = !0, this.handleImageLoad = () => {
      this.isImageLoading = !1, this.hasImageError = !1, this.emit("dds-load");
    }, this.handleImageError = () => {
      this.isImageLoading = !1, this.hasImageError = !0, this.emit("dds-error");
    }, this.handleClick = () => {
      this.interactive && this.click();
    }, this.size = "md";
  }
  generateInitials(e) {
    return !e || !e.trim() ? "" : e.trim().split(" ").filter((a) => a.length > 0).map((a) => a.charAt(0)).join("").toUpperCase().slice(0, 2);
  }
  mapSizeToSpinnerSize(e) {
    switch (e) {
      case "xxs":
        return "xs";
      case "xs":
        return "sm";
      case "sm":
        return "md";
      case "md":
        return "lg";
      case "lg":
        return "xl";
      default:
        return "lg";
    }
  }
  renderImage() {
    return !this.src || this.hasImageError ? m : l`
      <img
        class=${o("avatar__img", `avatar__img--${this.effectiveSize}`)}
        style=${this.width && this.height ? `width: ${this.width}px; height: ${this.height}px;` : ""}
        part="img"
        alt=${s(this.alt)}
        src=${this.src}
        loading="lazy"
        @load=${this.handleImageLoad}
        @error=${this.handleImageError} />
    `;
  }
  renderInitials() {
    const e = this.generateInitials(this.initials);
    return e ? l`
      <div
        class=${o(
      "avatar__initials",
      `avatar__initials--${this.effectiveSize}`
    )}
        part="initials"
        aria-label=${s(this.label || `Avatar for ${this.initials}`)}>
        ${e}
      </div>
    ` : null;
  }
  renderIcon() {
    return l`
      <div
        class=${o("avatar__icon", `avatar__icon--${this.effectiveSize}`)}
        part="icon"
        aria-label=${s(this.label || "Avatar icon")}>
        <slot name="icon"></slot>
      </div>
    `;
  }
  renderFallback() {
    return l`
      <div
        class=${o(
      "avatar__fallback",
      `avatar__fallback--${this.effectiveSize}`
    )}
        part="fallback"
        aria-label=${s(this.label || "Avatar")}>
        <slot name="fallback">
          <dap-ds-icon-user-line></dap-ds-icon-user-line>
        </slot>
      </div>
    `;
  }
  renderLoading() {
    return !this.loading || !this.isImageLoading ? m : l`
      <div
        class=${o(
      "avatar__loading",
      `avatar__loading--${this.effectiveSize}`
    )}
        part="loading"
        aria-label=${s(this.label || "Loading avatar")}>
        <dap-ds-spinner
          size=${this.mapSizeToSpinnerSize(this.effectiveSize)}
          variant="brand"></dap-ds-spinner>
      </div>
    `;
  }
  renderContent() {
    if (this.loading && this.isImageLoading && this.variant === "image")
      return this.renderLoading();
    switch (this.variant) {
      case "image":
        return this.src && !this.hasImageError ? this.renderImage() : this.initials ? this.renderInitials() : this.renderFallback();
      case "initials":
        return this.renderInitials() || this.renderFallback();
      case "icon":
        return this.renderIcon();
      default:
        return this.renderFallback();
    }
  }
  render() {
    const e = o(
      "avatar",
      `avatar--${this.effectiveSize}`,
      `avatar--${this.shape}`,
      `avatar--${this.variant}`,
      {
        "avatar--interactive": this.interactive,
        "avatar--loading": this.loading && this.isImageLoading,
        "avatar--error": this.hasImageError
      }
    );
    return l`
      <div
        class=${e}
        part="base"
        role=${s(this.interactive ? "button" : void 0)}
        tabindex=${s(this.interactive ? 0 : void 0)}
        @keydown=${(a) => {
      this.interactive && (a.key === "Enter" || a.key === " ") && (a.preventDefault(), this.handleClick());
    }}>
        ${this.renderContent()}
      </div>
    `;
  }
};
h.tagName = "dap-ds-avatar", h.dependencies = {
  "dap-ds-icon-user-line": u,
  "dap-ds-spinner": $
}, h.styles = b(I);
let t = h;
i([
  r({ reflect: !0 })
], t.prototype, "shape");
i([
  r({ reflect: !0 })
], t.prototype, "variant");
i([
  r()
], t.prototype, "src");
i([
  r()
], t.prototype, "alt");
i([
  r()
], t.prototype, "initials");
i([
  r()
], t.prototype, "label");
i([
  r({ type: Boolean })
], t.prototype, "loading");
i([
  r({ type: Boolean, reflect: !0 })
], t.prototype, "interactive");
i([
  r({ type: Number })
], t.prototype, "width");
i([
  r({ type: Number })
], t.prototype, "height");
i([
  f()
], t.prototype, "hasImageError");
i([
  f()
], t.prototype, "isImageLoading");
export {
  t as default
};
//# sourceMappingURL=avatar.component.js.map