v4web-components/dist/esm/lab-ds-avatar.entry.js

Stencil Component Starter

import { r as registerInstance, c as createEvent, h } from './index-0b720089.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 = class {
  constructor(hostRef) {
    registerInstance(this, hostRef);
    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" })))));
  }
};
LabDsAvatar.style = labDsAvatarCss;

export { LabDsAvatar as lab_ds_avatar };

//# sourceMappingURL=lab-ds-avatar.entry.js.map