import{LitElement as e,html as t,css as r}from"lit";import{classMap as o}from"lit/directives/class-map.js";import{ifDefined as i}from"lit/directives/if-defined.js";import{skeletonStyles as s}from"./styles/skeleton.js";class a extends e{static get properties(){return{a11yName:{type:String,attribute:"a11y-name"},skeleton:{type:Boolean,reflect:!0},src:{type:String},_error:{type:Boolean,state:!0},_loaded:{type:Boolean,state:!0}}}constructor(){super(),this.a11yName=null,this.skeleton=!1,this.src=null,this._error=!1,this._loaded=!1}_onLoad(){this._loaded=!0,this.skeleton=!1}_onError(){this._error=!0,this.skeleton=!1}willUpdate(e){e.has("src")&&(this._error=!1,this._loaded=!1)}render(){const e=this.a11yName??"",r=null!=this.src&&!this._loaded&&!this._error,s=this.skeleton||r,a=null==this.src||this._error;return t`<div class="${o({skeleton:s,loaded:this._loaded})} wrapper"><img src=${i(this.src??void 0)} @load=${this._onLoad} @error=${this._onError} alt=${e}> ${a?t`<div class=error-msg aria-hidden=true>${e}</div>`:""}</div>`}static get styles(){return[s,r`:host{display:inline-block;overflow:hidden}.wrapper,img{height:100%;width:100%}.wrapper{align-items:center;display:flex;justify-content:center;position:relative}.wrapper.skeleton{background-color:#bbb}.wrapper.text{background-color:var(--cc-color-bg-neutral,#eee)}img{display:block;left:0;object-fit:var(--cc-img-fit,cover);object-position:center center;opacity:0;position:absolute;top:0;transition:opacity 150ms ease-in-out}.wrapper.loaded img{opacity:1}.error-msg{font-size:.85em;overflow:hidden;padding:.3em;text-align:center;text-overflow:ellipsis;white-space:nowrap}`]}}window.customElements.define("cc-img",a);export{a as CcImg};
//# sourceMappingURL=cc-img.js.map
