v4web-components/dist/stencil-library/p-189b192b.entry.js

Stencil Component Starter

import{r as a,c as e,h as t}from"./p-c2aeec95.js";const i=".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 s=class{constructor(t){a(this,t);this.clickAvatar=e(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 t("div",{onClick:()=>this.handleClick(),class:`avatar-with-exchange ${this.disabled?"disabled":""}`},t("lab-ds-avatar",{size:this.size,name:this.name,disabled:this.disabled,imageSRC:this.imageSRC}),t("div",{class:"overlay"}),t("lab-ds-icon-not-selectable",{class:"exchange-icon",icon:"photo_camera",size:this.iconSize[this.size]}))}};s.style=i;export{s as lab_ds_avatar_with_exchange};
//# sourceMappingURL=p-189b192b.entry.js.map