@ionic/core
Version:
Base components for Ionic
4 lines • 2.14 kB
JavaScript
/*!
* (C) Ionic http://ionicframework.com - MIT License
*/
import{r as i,d as t,a as s,h as e,f as o,g as r}from"./p-BpRUsN_W.js";import{b as n}from"./p-Co7eql8D.js";import{b as a}from"./p-SEecsUh7.js";import"./p-Dojwmvde.js";const h=class{constructor(s){i(this,s),this.ionImgWillLoad=t(this,"ionImgWillLoad",7),this.ionImgDidLoad=t(this,"ionImgDidLoad",7),this.ionError=t(this,"ionError",7),this.inheritedAttributes={},this.onLoad=()=>{this.ionImgDidLoad.emit()},this.onError=()=>{this.ionError.emit()}}srcChanged(){this.addIO()}componentWillLoad(){this.inheritedAttributes=n(this.el,["draggable"])}componentDidLoad(){s('[ion-img] - This component is deprecated and will be removed in Ionic v10. Use a native <img> with the loading="lazy" attribute instead.',this.el),this.addIO()}disconnectedCallback(){this.loadTimeout&&clearTimeout(this.loadTimeout)}addIO(){this.loadTimeout&&(clearTimeout(this.loadTimeout),this.loadTimeout=void 0),void 0!==this.src&&("undefined"!=typeof window&&"IntersectionObserver"in window&&"IntersectionObserverEntry"in window&&"isIntersecting"in window.IntersectionObserverEntry.prototype?(this.removeIO(),this.io=new IntersectionObserver((i=>{i[i.length-1].isIntersecting&&(this.load(),this.removeIO())})),this.io.observe(this.el)):this.loadTimeout=setTimeout((()=>this.load()),200))}load(){this.loadError=this.onError,this.loadSrc=this.src,this.ionImgWillLoad.emit()}removeIO(){this.io&&(this.io.disconnect(),this.io=void 0)}render(){const{loadSrc:i,alt:t,onLoad:s,loadError:r,inheritedAttributes:n}=this,{draggable:h}=n;return e(o,{key:"57bfb44d9850381fe7b6fcf0c9019b03f7ef86ec",class:a(this)},e("img",{key:"888ec06a266fa2751fc0147ede6a567f4e2b29a6",decoding:"async",src:i,alt:t,onLoad:s,onError:r,part:"image",draggable:c(h)}))}get el(){return r(this)}static get watchers(){return{src:[{srcChanged:0}]}}},c=i=>{switch(i){case"true":return!0;case"false":return!1;default:return}};h.style=":host{display:block;-o-object-fit:contain;object-fit:contain}img{display:block;width:100%;height:100%;-o-object-fit:inherit;object-fit:inherit;-o-object-position:inherit;object-position:inherit}";export{h as ion_img}