UNPKG

@esri/calcite-components

Version:

Web Components for Esri's Calcite Design System.

1 lines 4.48 kB
import{r as t,h as e,g as a,H as i}from"./p-ff68592a.js";import{g as r,a as s}from"./p-fbd3d700.js";import{h as c,i as n}from"./p-40bd14c4.js";const l=class{constructor(e){t(this,e),this.scale="m",this.error=!1}connectedCallback(){["s","m","l"].includes(this.scale)||(this.scale="m")}render(){const t=r(this.el),a=this.determineContent();return e(i,{dir:t},a)}determineContent(){if(this.thumbnail&&!this.error)return e("img",{alt:"",class:"thumbnail",onError:()=>this.error=!0,src:this.thumbnail});const t=this.generateInitials(),a=this.generateFillColor();return e("span",{class:"background",style:{backgroundColor:a}},t?e("span",{"aria-hidden":"true",class:"initials"},t):e("calcite-icon",{class:"icon",icon:"user",scale:this.scale,theme:this.theme}))}generateFillColor(){const{userId:t,username:e,fullName:a}=this,i=s(this.el),r=t&&"#"+t.substr(t.length-6),l=e||a||"",o=r&&n(r)?r:function(t){let e=0;for(let i=0;i<t.length;i++)e=t.charCodeAt(i)+((e<<5)-e);let a="#";for(let i=0;i<3;i++)a+=("00"+(e>>8*i&255).toString(16)).substr(-2);return a}(l);return(t||l)&&n(o)?`hsl(${function(t){return function(t){let{r:e,g:a,b:i}=t;e/=255,a/=255,i/=255;const r=Math.max(e,a,i),s=Math.min(e,a,i),c=r-s;if(r===s)return 0;let n=(r+s)/2;switch(r){case e:n=(a-i)/c+(a<i?6:0);break;case a:n=(i-e)/c+2;break;case i:n=(e-a)/c+4}return Math.round(60*n)}(c(t))}(o)}, 60%, ${"dark"===i?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)}};l.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-context([theme=dark]){--calcite-ui-blue-1:#00A0FF;--calcite-ui-blue-2:#0087D7;--calcite-ui-blue-3:#47BBFF;--calcite-ui-green-1:#36DA43;--calcite-ui-green-2:#11AD1D;--calcite-ui-green-3:#44ED51;--calcite-ui-yellow-1:#FFC900;--calcite-ui-yellow-2:#F4B000;--calcite-ui-yellow-3:#FFE24D;--calcite-ui-red-1:#FE583E;--calcite-ui-red-2:#F3381B;--calcite-ui-red-3:#FF7465;--calcite-ui-background:#202020;--calcite-ui-foreground-1:#2b2b2b;--calcite-ui-foreground-2:#353535;--calcite-ui-foreground-3:#404040;--calcite-ui-text-1:#ffffff;--calcite-ui-text-2:#bfbfbf;--calcite-ui-text-3:#9f9f9f;--calcite-ui-border-1:#4a4a4a;--calcite-ui-border-2:#404040;--calcite-ui-border-3:#353535;--calcite-ui-border-4:#757575;--calcite-ui-border-5:#9f9f9f}: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.5rem;height:2.5rem;font-size:var(--calcite-font-size--1)}.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{l as calcite_avatar}