{"version":3,"names":["sewPictureCss","SewPicture","constructor","hostRef","this","shiftCaptionRight","shiftCaptionRightMq3","objectFit","objectFitContain","showImage","sewPictureComplete","handleImageLoad","sewPictureLoaded","emit","updateCurrentRatio","currentSrc","imgElement","currentRatio","getRatio","setRatio","setInitialRatio","getCurrentSrc","componentWillLoad","mediaSources","Array","from","host","children","filter","child","nodeName","window","matchMedia","matches","componentDidLoad","addEventListener","style","removeProperty","ratio","aspectRatio","matchedSrc","forEach","source","media","getAttribute","srcset","src","width","match","replace","reloadImage","shadowRoot","querySelector","render","h","Host","key","length","map","srcSet","Object","assign","class","alt","title","imgTitle","loading","height","onLoad","onError","ref","el","caption"],"sources":["src/components/website-components/sew-picture/sew-picture.scss?tag=sew-picture&encapsulation=shadow","src/components/website-components/sew-picture/sew-picture.tsx"],"sourcesContent":[":host {\n    display: block;\n\n    img {\n        width: 100%;\n        display: block;\n\n        &.object-fit {\n            height: 100%;\n            object-fit: cover;\n        }\n\n        &.object-fit-contain {\n            height: 100%;\n            object-fit: contain;\n        }\n    }\n}\n\n// set cursor for sew-ws-image-zoom\n@include mq-2-min {\n    :host([slot='preview']) {\n        img {\n            cursor: pointer;\n        }\n    }\n}\n\n.caption {\n    @include typo-ws-paragraph-fixed;\n\n    color: $color-grey-02-steel;\n    padding: 8px 0 0;\n    margin: 0;\n\n    &.shift-caption-right {\n        padding: 8px 0 0 var(--grid-margin);\n    }\n}\n\n@include mq-4-min {\n    .caption {\n        &.shift-caption-right {\n            padding-left: 0;\n        }\n    }\n}\n\n@include mq-3-only {\n    .caption {\n        &.shift-caption-right-mq3 {\n            padding: 8px 0 0 var(--grid-margin);\n        }\n    }\n}\n\n@include mq-1 {\n    .caption {\n        &.shift-caption-right {\n            padding-left: 0;\n        }\n    }\n}\n","import { Component, Element, h, Host, Prop, State, Event, EventEmitter, Method, Listen } from '@stencil/core';\n\n@Component({\n    tag: 'sew-picture',\n    styleUrl: 'sew-picture.scss',\n    shadow: true,\n})\nexport class SewPicture {\n    @Element() host: HTMLSewPictureElement;\n\n    @Prop({ attribute: 'img-src' }) src;\n    @Prop({ attribute: 'img-alt' }) alt;\n    @Prop({ attribute: 'img-title' }) imgTitle;\n    @Prop({ reflect: true }) caption: string;\n    @Prop() shiftCaptionRight = false;\n    @Prop({ attribute: 'shift-caption-right-mq3' }) shiftCaptionRightMq3 = false;\n    @Prop() width?;\n    @Prop() height?;\n    @Prop() objectFit = false;\n    @Prop() objectFitContain = false;\n    @Prop() showImage = false;\n    @Prop() sewPictureComplete = false;\n    @Event() sewPictureLoaded: EventEmitter<void>;\n\n    @State() mediaSources;\n\n    private imgElement: HTMLImageElement;\n\n    @Listen('resize', { target: 'window' })\n    updateCurrentRatio() {\n        if (this.objectFit || this.objectFitContain) return;\n\n        const currentSrc = this.imgElement.currentSrc;\n        const currentRatio = this.getRatio(currentSrc);\n        this.setRatio(currentRatio);\n    }\n\n    setInitialRatio() {\n        if (this.objectFit || this.objectFitContain) return;\n        const currentSrc = this.getCurrentSrc();\n        const currentRatio = this.getRatio(currentSrc);\n        this.setRatio(currentRatio);\n    }\n\n    componentWillLoad(): void {\n        this.mediaSources = Array.from(this.host.children).filter(child => child.nodeName === 'SOURCE');\n\n        this.setInitialRatio();\n\n        if (window.matchMedia('print').matches) {\n            this.showImage = true;\n        }\n    }\n\n    componentDidLoad(): void {\n        if (this.objectFit || this.objectFitContain) return;\n\n        this.imgElement.addEventListener('load', () => {\n            this.host.style.removeProperty('aspect-ratio');\n        });\n    }\n\n    setRatio(ratio: string) {\n        this.host.style.aspectRatio = ratio;\n    }\n\n    getCurrentSrc() {\n        let matchedSrc = '';\n\n        this.mediaSources.forEach(source => {\n            const media = source.getAttribute('media');\n            const srcset = source.getAttribute('srcset');\n\n            if (media && window.matchMedia(media).matches) {\n                matchedSrc = srcset;\n            }\n        });\n\n        if (!matchedSrc) {\n            matchedSrc = this.src;\n        }\n\n        return matchedSrc;\n    }\n\n    getRatio(src: string) {\n        const width = src?.match(/\\/(\\d+x\\d+)\\//) || src?.match(/(\\d+x\\d+)(?=\\.)/);\n        const ratio = width ? width[1].replace('x', '/') : '';\n\n        return ratio;\n    }\n\n    private handleImageLoad = (): void => {\n        this.sewPictureComplete = true;\n        this.sewPictureLoaded.emit();\n    };\n\n    @Method()\n    async reloadImage(): Promise<void> {\n        this.host.shadowRoot.querySelector('img').src = this.src;\n    }\n\n    public render() {\n        return (\n            <Host>\n                <picture>\n                    {this.mediaSources.length > 0\n                        ? this.mediaSources.map(({ media, srcset }: { media: string; srcset: string }) => (\n                              <source key={media} media={media} srcSet={srcset} />\n                          ))\n                        : null}\n                    <img\n                        class={{\n                            'object-fit': this.objectFit,\n                            'object-fit-contain': this.objectFitContain,\n                        }}\n                        src={this.src}\n                        alt={this.alt}\n                        title={this.imgTitle}\n                        loading={this.showImage ? 'eager' : 'lazy'}\n                        {...(this.width ? { width: this.width } : {})}\n                        {...(this.height ? { height: this.height } : {})}\n                        onLoad={this.handleImageLoad}\n                        onError={this.handleImageLoad}\n                        ref={el => (this.imgElement = el)}\n                    />\n                </picture>\n                {this.caption && (\n                    <p\n                        class={{\n                            'caption': true,\n                            'shift-caption-right': this.shiftCaptionRight,\n                            'shift-caption-right-mq3': this.shiftCaptionRightMq3,\n                        }}\n                    >\n                        {this.caption}\n                    </p>\n                )}\n            </Host>\n        );\n    }\n}\n"],"mappings":"gEAAA,MAAMA,EAAgB,q3B,MCOTC,EAAU,MALvB,WAAAC,CAAAC,G,6DAYYC,KAAiBC,kBAAG,MACoBD,KAAoBE,qBAAG,MAG/DF,KAASG,UAAG,MACZH,KAAgBI,iBAAG,MACnBJ,KAASK,UAAG,MACZL,KAAkBM,mBAAG,MAuErBN,KAAeO,gBAAG,KACtBP,KAAKM,mBAAqB,KAC1BN,KAAKQ,iBAAiBC,MAAM,CA+CnC,CAhHG,kBAAAC,GACI,GAAIV,KAAKG,WAAaH,KAAKI,iBAAkB,OAE7C,MAAMO,EAAaX,KAAKY,WAAWD,WACnC,MAAME,EAAeb,KAAKc,SAASH,GACnCX,KAAKe,SAASF,E,CAGlB,eAAAG,GACI,GAAIhB,KAAKG,WAAaH,KAAKI,iBAAkB,OAC7C,MAAMO,EAAaX,KAAKiB,gBACxB,MAAMJ,EAAeb,KAAKc,SAASH,GACnCX,KAAKe,SAASF,E,CAGlB,iBAAAK,GACIlB,KAAKmB,aAAeC,MAAMC,KAAKrB,KAAKsB,KAAKC,UAAUC,QAAOC,GAASA,EAAMC,WAAa,WAEtF1B,KAAKgB,kBAEL,GAAIW,OAAOC,WAAW,SAASC,QAAS,CACpC7B,KAAKK,UAAY,I,EAIzB,gBAAAyB,GACI,GAAI9B,KAAKG,WAAaH,KAAKI,iBAAkB,OAE7CJ,KAAKY,WAAWmB,iBAAiB,QAAQ,KACrC/B,KAAKsB,KAAKU,MAAMC,eAAe,eAAe,G,CAItD,QAAAlB,CAASmB,GACLlC,KAAKsB,KAAKU,MAAMG,YAAcD,C,CAGlC,aAAAjB,GACI,IAAImB,EAAa,GAEjBpC,KAAKmB,aAAakB,SAAQC,IACtB,MAAMC,EAAQD,EAAOE,aAAa,SAClC,MAAMC,EAASH,EAAOE,aAAa,UAEnC,GAAID,GAASZ,OAAOC,WAAWW,GAAOV,QAAS,CAC3CO,EAAaK,C,KAIrB,IAAKL,EAAY,CACbA,EAAapC,KAAK0C,G,CAGtB,OAAON,C,CAGX,QAAAtB,CAAS4B,GACL,MAAMC,GAAQD,IAAG,MAAHA,SAAA,SAAAA,EAAKE,MAAM,oBAAoBF,IAAA,MAAAA,SAAA,SAAAA,EAAKE,MAAM,oBACxD,MAAMV,EAAQS,EAAQA,EAAM,GAAGE,QAAQ,IAAK,KAAO,GAEnD,OAAOX,C,CASX,iBAAMY,GACF9C,KAAKsB,KAAKyB,WAAWC,cAAc,OAAON,IAAM1C,KAAK0C,G,CAGlD,MAAAO,GACH,OACIC,EAACC,EAAI,CAAAC,IAAA,4CACDF,EAAA,WAAAE,IAAA,4CACKpD,KAAKmB,aAAakC,OAAS,EACtBrD,KAAKmB,aAAamC,KAAI,EAAGf,QAAOE,YAC5BS,EAAQ,UAAAE,IAAKb,EAAOA,MAAOA,EAAOgB,OAAQd,MAE9C,KACNS,EAAA,MAAAM,OAAAC,OAAA,CAAAL,IAAA,2CACIM,MAAO,CACH,aAAc1D,KAAKG,UACnB,qBAAsBH,KAAKI,kBAE/BsC,IAAK1C,KAAK0C,IACViB,IAAK3D,KAAK2D,IACVC,MAAO5D,KAAK6D,SACZC,QAAS9D,KAAKK,UAAY,QAAU,QAC/BL,KAAK2C,MAAQ,CAAEA,MAAO3C,KAAK2C,OAAU,GACrC3C,KAAK+D,OAAS,CAAEA,OAAQ/D,KAAK+D,QAAW,GAAG,CAChDC,OAAQhE,KAAKO,gBACb0D,QAASjE,KAAKO,gBACd2D,IAAKC,GAAOnE,KAAKY,WAAauD,MAGrCnE,KAAKoE,SACFlB,EAAA,KAAAE,IAAA,2CACIM,MAAO,CACHU,QAAW,KACX,sBAAuBpE,KAAKC,kBAC5B,0BAA2BD,KAAKE,uBAGnCF,KAAKoE,S","ignoreList":[]}