v4web-components/dist/components/lab-ds-avatar2.js

Stencil Component Starter

import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
import { d as defineCustomElement$1 } from './lab-ds-icon-not-selectable2.js';

const labDsAvatarCss = ".avatar{text-align:center;display:flex;justify-content:center;align-items:center;padding:var(--lab-ds-semantic-placeholder-space-padding-none);border-radius:100%;background-color:var(--lab-ds-semantic-color-bg-default);color:var(--lab-ds-semantic-color-fg-default);border-color:var(--lab-ds-semantic-color-bg-cloudy);border-width:var(--lab-ds-semantic-selectable-border-width-s);border-style:solid}.avatar.disabled{opacity:var(--lab-ds-core-opacity-50);cursor:not-allowed}.name{text-transform:uppercase}.avatar.x-small{width:var(--lab-ds-semantic-selectable-size-sm);height:var(--lab-ds-semantic-selectable-size-sm)}.avatar.x-small .name{font:var(--lab-ds-semantic-typography-heading-h8)}.avatar.small{width:var(--lab-ds-semantic-selectable-size-sm);height:var(--lab-ds-semantic-selectable-size-sm)}.avatar.small .name{font:var(--lab-ds-semantic-typography-heading-h8)}.avatar.medium{width:var(--lab-ds-semantic-selectable-size-m);height:var(--lab-ds-semantic-selectable-size-m)}.avatar.medium .name{font:var(--lab-ds-semantic-typography-heading-h6)}.avatar.large{width:var(--lab-ds-semantic-selectable-size-l);height:var(--lab-ds-semantic-selectable-size-l)}.avatar.large .name{font:var(--lab-ds-semantic-typography-heading-h5)}.avatar.x-large{width:var(--lab-ds-semantic-selectable-size-xl);height:var(--lab-ds-semantic-selectable-size-xl)}.avatar.x-large .name{font:var(--lab-ds-semantic-typography-heading-h4)}.avatar.xx-large{width:var(--lab-ds-semantic-selectable-size-xxl);height:var(--lab-ds-semantic-selectable-size-xxl)}.avatar.xx-large .name{font:var(--lab-ds-semantic-typography-heading-h4)}";

const LabDsAvatar = /*@__PURE__*/ proxyCustomElement(class LabDsAvatar extends HTMLElement {
  constructor() {
    super();
    this.__registerHost();
    this.__attachShadow();
    this.clickAvatar = createEvent(this, "clickAvatar", 7);
    this.iconSize = {
      'small': 'small',
      'medium': 's-medium',
      'large': 'medium',
      'x-large': 'large',
      'xx-large': 'x-large',
    };
    this.size = undefined;
    this.imageSRC = undefined;
    this.disabled = undefined;
    this.name = undefined;
  }
  handleClick() {
    if (this.disabled)
      return;
    this.clickAvatar.emit();
  }
  render() {
    const firstName = this.name && this.name.slice(0, 1);
    return (h("div", { onClick: () => this.handleClick() }, this.imageSRC ? (h("img", { class: `${this.size} avatar ${this.disabled && 'disabled'}`, src: this.imageSRC })) : (h("div", { class: `avatar ${this.size} ${this.disabled && 'disabled'}` }, this.name ? h("span", { class: `name` }, firstName) : h("lab-ds-icon-not-selectable", { size: this.iconSize[this.size], icon: "person" })))));
  }
  static get style() { return labDsAvatarCss; }
}, [1, "lab-ds-avatar", {
    "size": [1],
    "imageSRC": [1, "image-s-r-c"],
    "disabled": [4],
    "name": [1]
  }]);
function defineCustomElement() {
  if (typeof customElements === "undefined") {
    return;
  }
  const components = ["lab-ds-avatar", "lab-ds-icon-not-selectable"];
  components.forEach(tagName => { switch (tagName) {
    case "lab-ds-avatar":
      if (!customElements.get(tagName)) {
        customElements.define(tagName, LabDsAvatar);
      }
      break;
    case "lab-ds-icon-not-selectable":
      if (!customElements.get(tagName)) {
        defineCustomElement$1();
      }
      break;
  } });
}

export { LabDsAvatar as L, defineCustomElement as d };

//# sourceMappingURL=lab-ds-avatar2.js.map