@trimble-oss/moduswebcomponents/modus-wc/p-c55e4c37.entry.js

Modus Web Components is a modern, accessible UI library built with Stencil JS that provides reusable web components following Trimble's Modus design system. This updated version focuses on improved flexibility, enhanced theming options, comprehensive cust

import{r as s,d as a,h as t,e as o,g as i}from"./p-C1-Dpkp7.js";import{h as e}from"./p-tWS3Egrk.js";import{i as c}from"./p-DJ2rBB6r.js";const r=class{constructor(t){s(this,t),this.imageLoadError=a(this,"imageLoadError",7),this.inheritedAttributes={},this.customClass="",this.imgSrc="",this.initials="",this.shape="circle",this.size="md",this.handleImageError=s=>{this.imageLoadError.emit({originalEvent:s})}}componentWillLoad(){e(this.el),this.inheritedAttributes=c(this.el)}getClasses(){const s=[],a=(({shape:s,size:a})=>{let t="";if(s)switch(s){case"circle":t=`${t} modus-wc-rounded-full`;break;case"square":t=`${t} modus-wc-rounded-lg`}if(a)switch(a){case"xs":t=`${t} modus-wc-w-8`;break;case"sm":t=`${t} modus-wc-w-12`;break;case"md":t=`${t} modus-wc-w-16`;break;case"lg":t=`${t} modus-wc-w-20`;break;case"xl":t=`${t} modus-wc-w-24`}return t.trim()})({shape:this.shape,size:this.size});return a&&s.push(a),this.customClass&&s.push(this.customClass),this.imgSrc||this.initials||s.push("no-image"),s.join(" ")}getUserInitials(){return this.initials?this.initials.trim().split(/\s+/).filter(Boolean).map((s=>s.charAt(0))).join("").substring(0,3).toUpperCase():""}render(){const s=this.alt||"User avatar";return t(o,{key:"a298d24152d272b4db0816157403e3d0b9bd3307"},t("div",Object.assign({key:"27c71ee99dc3bd71ff02d8a7423623a18867180e",class:"modus-wc-avatar"},this.inheritedAttributes),t("div",{key:"cf5de9ae63098170aaa1e94f0d9bb888db70034a",class:this.getClasses()},this.imgSrc?t("img",{src:this.imgSrc,alt:s,onError:this.handleImageError}):this.initials?t("span",{class:"initials","aria-label":this.alt||this.initials},this.getUserInitials()):t("modus-wc-icon",{"aria-label":s,name:"person",variant:"solid"}))))}get el(){return i(this)}};r.style="modus-wc-avatar{display:inline-flex}modus-wc-avatar .modus-wc-avatar .initials{align-items:center;background-color:var(--modus-wc-color-neutral);color:var(--modus-wc-color-neutral-content);display:flex;font-weight:600;height:100%;justify-content:center;text-transform:uppercase;width:100%}modus-wc-avatar .modus-wc-avatar .no-image{align-items:center;background-color:var(--modus-wc-color-base-200);color:var(--modus-wc-color-base-content);display:flex;justify-content:center}modus-wc-avatar .modus-wc-avatar .modus-wc-w-8{height:var(--modus-wc-size-xs);width:var(--modus-wc-size-xs)}modus-wc-avatar .modus-wc-avatar .modus-wc-w-8 .initials{font-size:var(--modus-wc-font-size-sm);line-height:var(--modus-wc-font-size-2xl)}modus-wc-avatar .modus-wc-avatar .modus-wc-w-8 .modus-wc-icon{font-size:var(--modus-wc-font-size-md);line-height:1}modus-wc-avatar .modus-wc-avatar .modus-wc-w-12{height:var(--modus-wc-size-sm);width:var(--modus-wc-size-sm)}modus-wc-avatar .modus-wc-avatar .modus-wc-w-12 .initials{font-size:var(--modus-wc-font-size-lg);line-height:var(--modus-wc-line-height-md)}modus-wc-avatar .modus-wc-avatar .modus-wc-w-12 .modus-wc-icon{font-size:var(--modus-wc-font-size-lg);line-height:1}modus-wc-avatar .modus-wc-avatar .modus-wc-w-16{height:var(--modus-wc-size-md);width:var(--modus-wc-size-md)}modus-wc-avatar .modus-wc-avatar .modus-wc-w-16 .initials{font-size:var(--modus-wc-font-size-xl);line-height:var(--modus-wc-line-height-lg)}modus-wc-avatar .modus-wc-avatar .modus-wc-w-16 .modus-wc-icon{font-size:var(--modus-wc-font-size-xl);line-height:1}modus-wc-avatar .modus-wc-avatar .modus-wc-w-20{height:var(--modus-wc-size-lg);width:var(--modus-wc-size-lg)}modus-wc-avatar .modus-wc-avatar .modus-wc-w-20 .initials{font-size:var(--modus-wc-font-size-xl);line-height:var(--modus-wc-line-height-lg)}modus-wc-avatar .modus-wc-avatar .modus-wc-w-20 .modus-wc-icon{font-size:var(--modus-wc-font-size-3xl);line-height:1}modus-wc-avatar .modus-wc-avatar .modus-wc-w-24{height:var(--modus-wc-size-xl);width:var(--modus-wc-size-xl)}modus-wc-avatar .modus-wc-avatar .modus-wc-w-24 .initials{font-size:var(--modus-wc-font-size-2xl);line-height:var(--modus-wc-line-height-lg)}modus-wc-avatar .modus-wc-avatar .modus-wc-w-24 .modus-wc-icon{font-size:var(--modus-wc-line-height-h1);line-height:1}";export{r as modus_wc_avatar}