v4web-components/dist/components/lab-ds-avatar-with-exchange.js

Stencil Component Starter

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

const labDsAvatarWithExchangeCss = ".avatar-with-exchange{position:relative;display:inline-flex;align-items:center;cursor:pointer}.avatar-with-exchange .holder{color:var(--lab-ds-semantic-color-bg-default)}.overlay{position:absolute;display:flex;align-items:center;justify-content:center;transition:all 0.3s ease;border-radius:var(--lab-ds-semantic-selectable-border-radius-pill);background-color:var(--lab-ds-semantic-color-fg-default);opacity:0;top:0;bottom:0;right:0;left:0}.exchange-icon{position:absolute;display:flex;align-items:center;justify-content:center;opacity:0;top:0;bottom:0;right:0;left:0}.avatar-with-exchange:hover:not(.disabled) .overlay{opacity:var(--lab-ds-core-opacity-80)}.avatar-with-exchange:hover:not(.disabled) .exchange-icon{opacity:1;color:var(--lab-ds-semantic-color-bg-default)}.avatar-with-exchange:active:not(.disabled) .overlay{opacity:var(--lab-ds-core-opacity-80)}.avatar-with-exchange:active:not(.disabled) .exchange-icon{opacity:1;color:var(--lab-ds-semantic-color-bg-cloudy)}";

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

const LabDsAvatarWithExchange = LabDsAvatarWithExchange$1;
const defineCustomElement = defineCustomElement$1;

export { LabDsAvatarWithExchange, defineCustomElement };

//# sourceMappingURL=lab-ds-avatar-with-exchange.js.map