@designsystem-se/af 37.0.1 → 37.0.2

package/dist/digi-arbetsformedlingen/p-fe409f14.entry.js

@@ -0,0 +1 @@
+import{r as i,c as e,h as t,g as a}from"./p-52e3bb32.js";const s=class{constructor(t){i(this,t),this.afOnLoad=e(this,"afOnLoad",7),this.isPlaceholderLoaded=!1,this.hasSetSrc=!1,this.hasAspectRatio=!1,this.paddedBoxPadding="0%",this.isLoaded=!1,this.src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNk+A8AAQUBAScY42YAAAAASUVORK5CYII=",this.srcset=void 0,this.afObserverOptions={rootMargin:"200px",threshold:0},this.afSrc=void 0,this.afSrcset=void 0,this.afAlt=void 0,this.afTitle=void 0,this.afAriaLabel=void 0,this.afWidth=void 0,this.afHeight=void 0,this.afFullwidth=void 0,this.afUnlazy=!1}srcChangeHandler(){this.setImageSrc()}connectedCallback(){this.afUnlazy&&this.setImageSrc(),this.afWidth&&this.afHeight&&(this.hasAspectRatio=!0,this.setPaddedBox())}setImageSrc(){this.src=this.afSrc,this.srcset=this.afSrcset,this.hasSetSrc=!0}setPaddedBox(){this.paddedBoxPadding=parseInt(this.afHeight,10)/parseInt(this.afWidth,10)*100+"%"}intersectHandler(){this.afUnlazy||this.setImageSrc()}loadHandler(i){if(!this.afUnlazy)return this.isPlaceholderLoaded?(this.isLoaded=!0,void this.afOnLoad.emit(i)):void(this.isPlaceholderLoaded=!0)}get cssModifiers(){return{"digi-media-image--unlazy":this.afUnlazy,"digi-media-image--loaded":this.isLoaded,"digi-media-image--aspect-ratio":this.hasAspectRatio,"digi-media-image--fullwidth":this.afFullwidth}}get cssInlineStyles(){return{"--digi--media-image--padded-box":this.paddedBoxPadding}}render(){return t("host",{key:"d73ca369f146ceee58517820156c254eb0fdb0d3"},t("div",{key:"93419395e2c892dd7a727314d9969cfa4b486142",class:Object.assign({"digi-media-image":!0},this.cssModifiers),style:{"--digi--media-image--width":this.afWidth?`${this.afWidth}px`:null}},t("digi-util-intersection-observer",{key:"1ef7fbf526107cd283b77eafdc6dae8d01b925c5",class:"digi-media-image__observer",onAfOnIntersect:()=>this.intersectHandler(),afOnce:!0,afOptions:this.afObserverOptions}),this.hasAspectRatio&&t("div",{key:"265b145a1c4adbd92945f0f7ea5c245a315a2d69",class:"digi-media-image__padded-box",style:this.cssInlineStyles}),t("img",{key:"ecf7aef38f9a7f6a3a49b446c6ff229736a9dc36",class:"digi-media-image__image",onLoad:i=>this.loadHandler(i),src:this.src,alt:this.afAlt,"aria-label":this.afAriaLabel,height:this.afHeight,srcset:this.srcset,title:this.afTitle,width:this.afWidth,loading:this.afUnlazy?"eager":"lazy"})))}static get watchers(){return{afSrc:["srcChangeHandler"]}}};s.style=".digi-media-image.sc-digi-media-image{position:relative;display:inline-flex;max-width:100%;height:0px}.digi-media-image.digi-media-image--aspect-ratio.sc-digi-media-image{width:var(--digi--media-image--width);height:unset}.digi-media-image.digi-media-image--loaded.sc-digi-media-image{height:unset}.digi-media-image.digi-media-image--fullwidth.sc-digi-media-image{width:100%}.digi-media-image.digi-media-image--unlazy.sc-digi-media-image:not(.digi-media-image--aspect-ratio){height:unset}.digi-media-image--aspect-ratio.sc-digi-media-image .digi-media-image__observer.sc-digi-media-image{position:absolute;top:0;left:0;height:100%}.digi-media-image__padded-box.sc-digi-media-image{display:inline-block;padding-top:var(--digi--media-image--padded-box, 0);height:0}.digi-media-image__image.sc-digi-media-image{max-width:100%;height:auto;opacity:0.06;filter:saturate(0);transition:opacity 0.2s, filter 0.4s}.digi-media-image--loaded.sc-digi-media-image .digi-media-image__image.sc-digi-media-image{opacity:1;filter:saturate(1)}.digi-media-image--unlazy.sc-digi-media-image .digi-media-image__image.sc-digi-media-image{transition:none;opacity:1;filter:none}.digi-media-image--fullwidth.sc-digi-media-image .digi-media-image__image.sc-digi-media-image{width:100%}.digi-media-image--aspect-ratio.sc-digi-media-image .digi-media-image__image.sc-digi-media-image{position:absolute;top:0;left:0;width:100%;height:100%}";const d=class{constructor(t){i(this,t),this.afOnChange=e(this,"afOnChange",7),this.afOnIntersect=e(this,"afOnIntersect",7),this.afOnUnintersect=e(this,"afOnUnintersect",7),this._observer=null,this._hasIntersected=!1,this._isObserving=!1,this.afOnce=!1,this.afOptions={rootMargin:"0px",threshold:0}}afOptionsWatcher(i){this._afOptions="string"==typeof i?JSON.parse(i):i}componentWillLoad(){this.afOptionsWatcher(this.afOptions),this.initObserver()}disconnectedCallback(){this._isObserving&&this.removeObserver()}initObserver(){this._observer=new IntersectionObserver((([i])=>{i&&i.isIntersecting?(this.intersectionHandler(),this.afOnce&&this.removeObserver()):i&&this._hasIntersected&&this.unintersectionHandler()}),this._afOptions),this._observer.observe(this.$el),this._isObserving=!0}removeObserver(){this._observer.disconnect(),this._isObserving=!1}intersectionHandler(){this.afOnChange.emit(!0),this.afOnIntersect.emit(),this._hasIntersected=!0}unintersectionHandler(){this.afOnChange.emit(!1),this.afOnUnintersect.emit(),this._hasIntersected=!1}render(){return t("slot",{key:"4d011168ecb730b4ab3e78df5781f0577b614ebb"})}get $el(){return a(this)}static get watchers(){return{afOptions:["afOptionsWatcher"]}}};export{s as digi_media_image,d as digi_util_intersection_observer}