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

Stencil Component Starter

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

const index = require('./index-8b55ea0e.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 = class {
  constructor(hostRef) {
    index.registerInstance(this, hostRef);
    this.clickAvatar = index.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 (index.h("div", { onClick: () => this.handleClick(), class: `avatar-with-exchange ${this.disabled ? 'disabled' : ''}` }, index.h("lab-ds-avatar", { size: this.size, name: this.name, disabled: this.disabled, imageSRC: this.imageSRC }), index.h("div", { class: "overlay" }), index.h("lab-ds-icon-not-selectable", { class: "exchange-icon", icon: "photo_camera", size: this.iconSize[this.size] })));
  }
};
LabDsAvatarWithExchange.style = labDsAvatarWithExchangeCss;

exports.lab_ds_avatar_with_exchange = LabDsAvatarWithExchange;

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