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

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

import { clsx as n } from "../../node_modules/clsx/dist/clsx.js";
import "../../node_modules/@lit/reactive-element/reactive-element.js";
import { nothing as c } from "../../node_modules/lit-html/lit-html.js";
import "../../node_modules/lit-element/lit-element.js";
import { property as l } from "../../node_modules/@lit/reactive-element/decorators/property.js";
import { queryAssignedElements as m } from "../../node_modules/@lit/reactive-element/decorators/query-assigned-elements.js";
import { ifDefined as v } from "../../node_modules/lit-html/directives/if-defined.js";
import { html as h } from "../../node_modules/lit-html/static.js";
import "../../localization/localization.js";
import { DdsElement as u } from "../../internal/dds-hu-element.js";
import { SizedMixin as y } from "../../internal/mixin/sizedMixin.js";
import w from "./avatar-group.scss.js";
import { t as b } from "../../node_modules/i18next/dist/esm/i18next.js";
import { unsafeCSS as g } from "../../node_modules/@lit/reactive-element/css-tag.js";
var z = Object.defineProperty, o = (f, t, e, i) => {
  for (var r = void 0, s = f.length - 1, p; s >= 0; s--)
    (p = f[s]) && (r = p(t, e, r) || r);
  return r && z(t, e, r), r;
};
const $ = y(u), d = class d extends $ {
  constructor() {
    super(), this.layout = "stack", this.max = 3, this.showTotal = !1, this.interactiveOverflow = !1, this.handleOverflowClick = (t) => {
      this.interactiveOverflow && this.emit("dds-overflow-click", { originalEvent: t });
    }, this.size = "md";
  }
  connectedCallback() {
    super.connectedCallback(), this.updateComplete.then(() => {
      this.styleSlottedAvatars();
    });
  }
  firstUpdated() {
    var e;
    this.styleSlottedAvatars();
    const t = (e = this.shadowRoot) == null ? void 0 : e.querySelector("slot");
    t && t.addEventListener("slotchange", () => {
      this.styleSlottedAvatars(), this.requestUpdate();
    });
  }
  updated(t) {
    super.updated(t), (t.has("layout") || t.has("size") || t.has("sizeMap") || t.has("max")) && this.styleSlottedAvatars();
  }
  renderOverflowIndicator(t, e) {
    if (t <= 0) return c;
    const i = this.showTotal ? `+${e - this.max}` : `+${t}`, r = this.overflowLabel || b("avatar-group.overflow-label", {
      count: t
    });
    return h`
      <div
        part="overflow"
        class=${n(
      "avatar-group__overflow",
      `avatar-group__overflow--${this.effectiveSize}`,
      {
        "avatar-group__overflow--interactive": this.interactiveOverflow
      }
    )}
        role=${v(this.interactiveOverflow ? "button" : void 0)}
        tabindex=${v(this.interactiveOverflow ? 0 : void 0)}
        aria-label=${r}
        @click=${this.handleOverflowClick}
        @keydown=${(s) => {
      this.interactiveOverflow && (s.key === "Enter" || s.key === " ") && (s.preventDefault(), this.handleOverflowClick(s));
    }}>
        ${i}
      </div>
    `;
  }
  styleSlottedAvatars() {
    this.avatars.forEach((t, e) => {
      t.setAttribute("size", this.effectiveSize);
      const i = {
        lg: "--dds-avatar-lg-size",
        md: "--dds-avatar-md-size",
        sm: "--dds-avatar-sm-size",
        xs: "--dds-avatar-xs-size",
        xxs: "--dds-avatar-xxs-size"
      }, r = `--dds-avatar-group-size-${this.effectiveSize}`, s = i[this.effectiveSize];
      t.style.setProperty(s, `var(${r})`), this.layout === "stack" ? (t.style.setProperty(
        "--dds-avatar-border-width",
        "var(--dds-avatar-group-border-width)"
      ), t.style.setProperty(
        "--dds-avatar-border-color",
        "var(--dds-avatar-group-border-color)"
      ), t.style.zIndex = String(this.avatars.length - e), e > 0 ? t.style.marginLeft = "var(--dds-avatar-group-overlap)" : t.style.marginLeft = "") : (t.style.marginLeft = "", t.style.zIndex = ""), e >= this.max ? t.style.display = "none" : t.style.display = "";
    });
  }
  render() {
    const t = this.avatars.length, e = Math.max(0, t - this.max), i = n(
      "avatar-group",
      `avatar-group--${this.layout}`,
      `avatar-group--${this.effectiveSize}`
    );
    return h`
      <div
        part="base"
        class=${i}
        role="group"
        aria-label=${v(
      this.label || `Group of ${t} avatar${t !== 1 ? "s" : ""}`
    )}>
        <div part="avatars" class="avatar-group__avatars">
          <slot></slot>
        </div>
        ${this.renderOverflowIndicator(e, t)}
      </div>
    `;
  }
};
d.tagName = "dap-ds-avatar-group", d.styles = g(w);
let a = d;
o([
  m({ flatten: !0 })
], a.prototype, "avatars");
o([
  l({ reflect: !0 })
], a.prototype, "layout");
o([
  l({ type: Number })
], a.prototype, "max");
o([
  l({ type: Boolean, attribute: "show-total" })
], a.prototype, "showTotal");
o([
  l({ type: Boolean, attribute: "interactive-overflow" })
], a.prototype, "interactiveOverflow");
o([
  l()
], a.prototype, "label");
o([
  l({ attribute: "overflow-label" })
], a.prototype, "overflowLabel");
export {
  a as default
};
//# sourceMappingURL=avatar-group.component.js.map