@public-ui/components/dist/components/kol-avatar-wc.js

Contains all web components that belong to KoliBri - The accessible HTML-Standard.

/*!
 * KoliBri - The accessible HTML-Standard
 */
import{proxyCustomElement,HTMLElement,h}from"@stencil/core/internal/client";import"./common.js";import{h as handleColorChange,v as validateColor}from"./color.js";import{v as validateImageSource}from"./image-source.js";import{v as validateLabel}from"./label.js";import{t as translate}from"./i18n.js";const formatNameAsInitial=a=>0===a.length?"":a[0].toUpperCase(),formatLabelAsInitials=a=>{const t=a.split(/\s+/),e=t[0],o=t[t.length-1];return t.length>=2&&e&&o?`${formatNameAsInitial(e)}${formatNameAsInitial(o)}`:formatNameAsInitial(a)},KolAvatarWc$1=proxyCustomElement(class extends HTMLElement{constructor(a){super(),!1!==a&&this.__registerHost(),this.bgColorStr="#d3d3d3",this.colorStr="#000",this.handleColorChange=a=>{const t=handleColorChange(a);this.bgColorStr=t.backgroundColor,this.colorStr=t.foregroundColor},this._color="#d3d3d3",this.state={_src:"",_label:"",_color:{backgroundColor:"#d3d3d3",foregroundColor:"#000"}}}render(){return h("div",{key:"04d0b5653648f532391c0b8f611ef3bd7d4e8bbf","aria-label":translate("kol-avatar-alt",{placeholders:{name:this.state._label}}),class:"kol-avatar",role:"img",style:{backgroundColor:this.bgColorStr,color:this.colorStr}},this.state._src?h("img",{alt:"","aria-hidden":"true",class:"kol-avatar__image",src:this.state._src}):h("span",{"aria-hidden":"true",class:"kol-avatar__initials"},formatLabelAsInitials(this.state._label.trim())))}validateColor(a){validateColor(this,a,{defaultValue:"#d3d3d3",hooks:{beforePatch:this.handleColorChange}})}validateSrc(a){validateImageSource(this,a)}validateLabel(a){validateLabel(this,a,{required:!0})}componentWillLoad(){this.validateColor(this._color),this.validateSrc(this._src),this.validateLabel(this._label)}static get watchers(){return{_color:["validateColor"],_src:["validateSrc"],_label:["validateLabel"]}}},[256,"kol-avatar-wc",{_color:[1],_src:[1],_label:[1],state:[32]},void 0,{_color:["validateColor"],_src:["validateSrc"],_label:["validateLabel"]}]);function defineCustomElement$1(){if("undefined"==typeof customElements)return;["kol-avatar-wc"].forEach(a=>{if("kol-avatar-wc"===a)customElements.get(a)||customElements.define(a,KolAvatarWc$1)})}const KolAvatarWc=KolAvatarWc$1,defineCustomElement=defineCustomElement$1;export{KolAvatarWc,defineCustomElement};