@esri/calcite-components
Version:
Web Components for Esri's Calcite Design System.
1 lines • 3.66 kB
JavaScript
import{r as t,h as e,g as a}from"./p-c5b7f45e.js";import{g as r,a as s}from"./p-6b4b7af1.js";import{h as i,i as n}from"./p-19ac376f.js";import"./p-a4e6e35b.js";const o=class{constructor(e){t(this,e),this.scale="m",this.error=!1}render(){return this.determineContent()}determineContent(){const t=r(this.el);if(this.thumbnail&&!this.error)return e("img",{alt:"",class:"thumbnail",dir:t,onError:()=>this.error=!0,src:this.thumbnail});const a=this.generateInitials(),s=this.generateFillColor();return e("span",{class:"background",dir:t,style:{backgroundColor:s}},a?e("span",{"aria-hidden":"true",class:"initials"},a):e("calcite-icon",{class:"icon",icon:"user",scale:this.scale}))}generateFillColor(){const{userId:t,username:e,fullName:a,el:r}=this,o=s(r),l=t&&`#${t.substr(t.length-6)}`,c=e||a||"",f=l&&n(l)?l:function(t){let e=0;for(let r=0;r<t.length;r++)e=t.charCodeAt(r)+((e<<5)-e);let a="#";for(let r=0;r<3;r++)a+=("00"+(e>>8*r&255).toString(16)).substr(-2);return a}(c);return(t||c)&&n(f)?`hsl(${function(t){return function(t){let{r:e,g:a,b:r}=t;e/=255,a/=255,r/=255;const s=Math.max(e,a,r),i=Math.min(e,a,r),n=s-i;if(s===i)return 0;let o=(s+i)/2;switch(s){case e:o=(a-r)/n+(a<r?6:0);break;case a:o=(r-e)/n+2;break;case r:o=(e-a)/n+4}return Math.round(60*o)}(i(t))}(f)}, 60%, ${"dark"===o?20:90}%)`:"var(--calcite-ui-foreground-2)"}generateInitials(){const{fullName:t,username:e}=this;return t?t.trim().split(" ").map((t=>t.substring(0,1))).join(""):!!e&&e.substring(0,2)}get el(){return a(this)}};o.style="@-webkit-keyframes in{0%{opacity:0}100%{opacity:1}}@keyframes in{0%{opacity:0}100%{opacity:1}}@-webkit-keyframes in-down{0%{opacity:0;-webkit-transform:translate3D(0, -5px, 0);transform:translate3D(0, -5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@keyframes in-down{0%{opacity:0;-webkit-transform:translate3D(0, -5px, 0);transform:translate3D(0, -5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@-webkit-keyframes in-up{0%{opacity:0;-webkit-transform:translate3D(0, 5px, 0);transform:translate3D(0, 5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@keyframes in-up{0%{opacity:0;-webkit-transform:translate3D(0, 5px, 0);transform:translate3D(0, 5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@-webkit-keyframes in-scale{0%{opacity:0;-webkit-transform:scale3D(0.95, 0.95, 1);transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;-webkit-transform:scale3D(1, 1, 1);transform:scale3D(1, 1, 1)}}@keyframes in-scale{0%{opacity:0;-webkit-transform:scale3D(0.95, 0.95, 1);transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;-webkit-transform:scale3D(1, 1, 1);transform:scale3D(1, 1, 1)}}:root{--calcite-popper-transition:150ms ease-in-out}:host([hidden]){display:none}:host{display:-ms-inline-flexbox;display:inline-flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;border-radius:50%;overflow:hidden}:host([scale=s]){width:1.5rem;height:1.5rem;font-size:var(--calcite-font-size--3)}:host([scale=m]){width:2rem;height:2rem;font-size:var(--calcite-font-size--2)}:host([scale=l]){width:2.75rem;height:2.75rem;font-size:var(--calcite-font-size-0)}.icon{display:-ms-flexbox;display:flex}.background{width:100%;height:100%;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;border-radius:50%}.initials{font-weight:var(--calcite-font-weight-bold);text-transform:uppercase;color:var(--calcite-ui-text-3)}.thumbnail{width:100%;height:100%;border-radius:50%}";export{o as calcite_avatar}