{"version":3,"names":["imageCss","Image","this","onLoad","imgDidLoad","emit","fit","naturalWidth","naturalHeight","_imgRef","ar","currentFit","onError","imgError","onResize","registerIntersectionObserver","onSrcChange","load","componentWillLoad","componentDidLoad","raf","element","clientWidth","src","IntersectionObserverAvailable","sync","unregisterIntersectionObserver","io","IntersectionObserver","data","length","isIntersecting","observe","setTimeout","disconnect","undefined","loadError","loadSrc","includes","Math","ceil","imgWillLoad","render","h","Host","class","decoding","loading","alt","ref","el","part"],"sources":["./src/components/utility/image/image.scss?tag=c7-img&encapsulation=shadow","./src/components/utility/image/image.tsx"],"sourcesContent":[":host{\n\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 100%;\n  overflow: hidden;\n  object-position: center;\n  background-color: var(--c7-img-background, #f6f6f6);\n\n  img {\n    display: block;\n    width: 100%;\n    height: 100%;\n    object-fit: inherit;\n    object-position: inherit;\n    opacity: 1;\n    transition: opacity .3s ease-in-out;\n  }\n\n  img:not([src]){\n    display: none;\n  }\n\n}\n\n:host(.c7-img-fit-cover){\n  object-fit: var(--c7-img-fit, cover);\n}\n\n:host(.c7-img-fit-contain){\n  object-fit: var(--c7-img-fit, contain);\n}\n\n:host(.c7-img-fit-scale-down){\n  object-fit: var(--c7-img-fit, scale-down);;\n}\n\n:host(.c7-img-loading) {\n  img {\n    opacity: 0;\n  }\n}\n\n\n","import { Component, h, Host, Prop, Watch, Element, State, Event, EventEmitter, Listen } from '@stencil/core';\nimport {IntersectionObserverAvailable} from '../../../utils/availability';\nimport { componentOnReady, raf } from '../../../utils/component.utils';\n\n@Component({\n  tag: 'c7-img',\n  styleUrl: 'image.scss',\n  shadow: true\n})\nexport class Image {\n\n  @Element() element!: HTMLElement;\n\n  @Listen('resize', {target: 'window'})\n  onResize(){\n    this.registerIntersectionObserver();\n  }\n\n  @Prop({reflect: true}) src?: string;\n  @Watch('src')\n  onSrcChange() {\n    this.load();\n    //this.registerIntersectionObserver();\n  }\n\n  @Prop() alt?: string;\n\n  @Prop() sync: boolean = false;\n\n  @Prop() fit?: 'cover' | 'contain' | 'scale-down';\n\n  @Event() imgWillLoad!: EventEmitter<void>;\n\n  @Event() imgDidLoad!: EventEmitter<void>;\n\n  @Event() imgError!: EventEmitter<void>;\n\n  @State() loadSrc?: string;\n\n  @State() loadError?: () => void;\n\n  @State() currentFit?: 'cover' | 'contain' | 'scale-down';\n\n  private io: IntersectionObserver;\n\n  private _imgRef: HTMLImageElement;\n\n  private onLoad = () => {\n    this.imgDidLoad.emit();\n\n    if(!this.fit) {\n      const {naturalWidth, naturalHeight} = this._imgRef;\n      const ar = naturalWidth / naturalHeight;\n\n      this.currentFit = ar < 1.2 || ar > 2 ? 'contain' : 'cover';\n    }\n  };\n\n  private onError = () => {\n    this.imgError.emit();\n  }\n\n  componentWillLoad() {\n    if (this.fit) this.currentFit = this.fit;\n  }\n\n  componentDidLoad() {\n    //this.registerIntersectionObserver();\n    /*this.load();*/\n    raf(() => {\n      if(this.element.clientWidth == 0)\n      {\n        this.componentDidLoad();\n      }\n      else{\n        this.load();\n      }\n    })\n\n  }\n\n  private registerIntersectionObserver() {\n\n    if(!this.src) {\n      return;\n    }\n\n    if (IntersectionObserverAvailable && !this.sync) {\n      this.unregisterIntersectionObserver();\n      this.io = new IntersectionObserver(data => {\n        if (data[data.length - 1].isIntersecting) {\n          this.load();\n          this.unregisterIntersectionObserver();\n        }\n      });\n\n      this.io.observe(this.element);\n    } else {\n      setTimeout(() => this.load(), 200);\n    }\n  }\n\n  private unregisterIntersectionObserver() {\n    if(this.io) {\n      this.io.disconnect();\n      this.io = undefined;\n    }\n  }\n\n  private load() {\n    this.loadError = this.onError;\n    this.loadSrc = this.src ? `${this.src}${this.src.includes('?') ? '&' : '?'}size=${Math.ceil(this.element.clientWidth / 100) * 100 * 2}&webp=true` : null;\n    this.imgWillLoad.emit();\n  }\n\n  render(){\n\n    return (\n      <Host class={{\n        ['c7-img']: true,\n        [`c7-img-fit-${this.currentFit}`]: true,\n      }}>\n        <img\n          decoding=\"async\"\n          loading=\"lazy\"\n          src={this.loadSrc}\n          alt={this.alt || ''}\n          onLoad={this.onLoad}\n          onError={this.loadError}\n          ref={(el: HTMLImageElement) => this._imgRef = el}\n          part=\"image\" />\n      </Host>\n    )\n  }\n\n}\n"],"mappings":"mIAAA,MAAMA,EAAW,22B,MCSJC,EAAK,M,4IAsCRC,KAAAC,OAAS,KACfD,KAAKE,WAAWC,OAEhB,IAAIH,KAAKI,IAAK,CACZ,MAAMC,aAACA,EAAYC,cAAEA,GAAiBN,KAAKO,QAC3C,MAAMC,EAAKH,EAAeC,EAE1BN,KAAKS,WAAaD,EAAK,KAAOA,EAAK,EAAI,UAAY,O,GAI/CR,KAAAU,QAAU,KAChBV,KAAKW,SAASR,MAAM,E,gDAhCE,M,6FAbxBS,WACEZ,KAAKa,8B,CAKPC,cACEd,KAAKe,M,CAyCPC,oBACE,GAAIhB,KAAKI,IAAKJ,KAAKS,WAAaT,KAAKI,G,CAGvCa,mBAGEC,GAAI,KACF,GAAGlB,KAAKmB,QAAQC,aAAe,EAC/B,CACEpB,KAAKiB,kB,KAEH,CACFjB,KAAKe,M,KAMHF,+BAEN,IAAIb,KAAKqB,IAAK,CACZ,M,CAGF,GAAIC,IAAkCtB,KAAKuB,KAAM,CAC/CvB,KAAKwB,iCACLxB,KAAKyB,GAAK,IAAIC,sBAAqBC,IACjC,GAAIA,EAAKA,EAAKC,OAAS,GAAGC,eAAgB,CACxC7B,KAAKe,OACLf,KAAKwB,gC,KAITxB,KAAKyB,GAAGK,QAAQ9B,KAAKmB,Q,KAChB,CACLY,YAAW,IAAM/B,KAAKe,QAAQ,I,EAI1BS,iCACN,GAAGxB,KAAKyB,GAAI,CACVzB,KAAKyB,GAAGO,aACRhC,KAAKyB,GAAKQ,S,EAINlB,OACNf,KAAKkC,UAAYlC,KAAKU,QACtBV,KAAKmC,QAAUnC,KAAKqB,IAAM,GAAGrB,KAAKqB,MAAMrB,KAAKqB,IAAIe,SAAS,KAAO,IAAM,WAAWC,KAAKC,KAAKtC,KAAKmB,QAAQC,YAAc,KAAO,IAAM,cAAgB,KACpJpB,KAAKuC,YAAYpC,M,CAGnBqC,SAEE,OACEC,EAACC,EAAI,CAACC,MAAO,CACX,CAAC,UAAW,KACZ,CAAC,cAAc3C,KAAKS,cAAe,OAEnCgC,EAAA,OACEG,SAAS,QACTC,QAAQ,OACRxB,IAAKrB,KAAKmC,QACVW,IAAK9C,KAAK8C,KAAO,GACjB7C,OAAQD,KAAKC,OACbS,QAASV,KAAKkC,UACda,IAAMC,GAAyBhD,KAAKO,QAAUyC,EAC9CC,KAAK,U"}