import{r as t,c as s,h as i,H as h,g as r}from"./p-284707c5.js";const e=class{constructor(i){t(this,i),this.alt="",this.rootMargin="200px 50px 200px 50px",this.onLoad=()=>{this.lazyImgDidLoad.emit()},this.onError=()=>{this.lazyImgError.emit()},this.lazyImgWillLoad=s(this,"lazyImgWillLoad",7),this.lazyImgDidLoad=s(this,"lazyImgDidLoad",7),this.lazyImgError=s(this,"lazyImgError",7)}srcChanged(){this.addIO()}componentDidLoad(){this.addIO()}addIO(){void 0!==this.src&&("IntersectionObserver"in window?(this.removeIO(),this.io=new IntersectionObserver(t=>this.onIntersection(t),{rootMargin:this.rootMargin}),this.io.observe(this.el)):setTimeout(()=>this.load(),200))}onIntersection(t){t[0].isIntersecting&&(this.load(),this.removeIO())}load(){this.loadError=this.onError,this.loadSrc=this.src,this.lazyImgWillLoad.emit()}removeIO(){this.io&&(this.io.disconnect(),this.io=void 0)}render(){return i(h,null,i("img",{decoding:"async",src:this.loadSrc,alt:this.alt,onLoad:this.onLoad,onError:this.loadError}))}get el(){return r(this)}static get watchers(){return{src:["srcChanged"]}}static get style(){return":host{-o-object-fit:contain;object-fit:contain}:host,img{display:block}img{width:100%;height:100%;-o-object-fit:inherit;object-fit:inherit;-o-object-position:inherit;object-position:inherit}"}};export{e as lazy_image};