{"version":3,"sources":["../../../libs/core/src/components/website-components/sew-intersection-observer/interserction-observer.tsx","../../../libs/core/src/components/website-components/sew-picture/sew-picture.scss?tag=sew-picture&encapsulation=shadow","../../../libs/core/src/components/website-components/sew-picture/sew-picture.tsx"],"names":["defaults","root","rootMargin","threshold","compose","functions","entry","reduce","fn","SewIntersectionObserver","this","callbackIntersection","async","entries","executedCallbacks","_","callbacks","undefined","observer","disconnect","[object Object]","host","IntersectionObserver","Array","from","children","map","element","observe","h","Host","sewPictureCss","SewPicture","callback","isIntersecting","showImage","mediaSources","filter","child","nodeName","window","matchMedia","matches","Object","assign","length","media","srcset","key","srcSet","class","object-fit","objectFit","object-fit-contain","objectFitContain","src","alt","title","imgTitle","width","height","caption","shift-caption-right","shiftCaptionRight"],"mappings":"yDAGA,MAAMA,EAAW,CACbC,KAAM,KACNC,WAAY,MACZC,UAAW,GAOf,MAAMC,EACF,IAAIC,IACHC,GACUD,EAAUE,QACb,CAACD,EAAkCE,IAAwCA,EAAGF,IAC9EA,SAQCG,EAAuB,+BAUxBC,KAAAC,qBAAuBC,MAAOC,IAClC,MAAMC,EAAoBD,EAAQN,QAC9B,CAACQ,EAAGT,IAAqCF,EAAQM,KAAKM,UAAbZ,CAAwBE,IACjEW,WAEJ,IAAKH,EAAmBJ,KAAKQ,SAASC,wBAZ1BnB,EAASC,qBACyBD,EAASE,0BACtCF,EAASG,mCAa9BiB,mBACI,MAAMnB,KAAEA,EAAIC,WAAEA,EAAUC,UAAEA,EAASkB,KAAEA,GAASX,KAC9CA,KAAKQ,SAAW,IAAII,qBAAqBZ,KAAKC,qBAAsB,CAAEV,KAAAA,EAAMC,WAAAA,EAAYC,UAAAA,IACxFoB,MAAMC,KAAKH,EAAKI,UAAUC,KAAIC,GAAWjB,KAAKQ,SAASU,QAAQD,KAGnEP,uBACI,GAAIV,KAAKQ,SAAUR,KAAKQ,SAASC,aAGrCC,SACI,OACIS,EAACC,EAAI,KACDD,EAAA,OAAA,mCCzDhB,MAAME,EAAgB,qqBCQTC,EAAU,+BAmBXtB,KAAAuB,SAA6C3B,IACjD,GAAIA,EAAM4B,eAAgB,CACtBxB,KAAKyB,UAAY,SACd,CACH,OAAO7B,gHAhBa,uIAMR,4BACO,qBACP,kCAYpBc,oBACIV,KAAK0B,aAAeb,MAAMC,KAAKd,KAAKW,KAAKI,UAAUY,QAAOC,GAASA,EAAMC,WAAa,WAEtF,GAAIC,OAAOC,WAAW,SAASC,QAAS,CACpChC,KAAKyB,UAAY,MAIlBf,SACH,OACIS,EAACC,EAAI,KACDD,EAAA,4BAAAc,OAAAC,OAAA,CACI5B,UAAWN,KAAKuB,UACXvB,KAAKT,KAAO,CAAEA,KAAMS,KAAKT,MAAS,GAClCS,KAAKR,WAAa,CAAED,KAAMS,KAAKT,MAAS,GACxCS,KAAKP,UAAY,CAAEA,UAAWO,KAAKP,WAAc,IAEtD0B,EAAA,UAAA,KACKnB,KAAKyB,WAAazB,KAAK0B,aAAaS,OAAS,EACxCnC,KAAK0B,aAAaV,KACd,EAAGoB,MAAAA,EAAOC,OAAAA,KACNlB,EAAA,SAAA,CAAQmB,IAAKF,EAAOA,MAAOA,EAAOG,OAAQF,MAGlD,KACLrC,KAAKyB,WACFN,EAAA,MAAAc,OAAAC,OAAA,CACIM,MAAO,CACHC,aAAczC,KAAK0C,UACnBC,qBAAsB3C,KAAK4C,kBAE/BC,IAAK7C,KAAK6C,IACVC,IAAK9C,KAAK8C,IACVC,MAAO/C,KAAKgD,UACPhD,KAAKiD,MAAQ,CAAEA,MAAOjD,KAAKiD,OAAU,GACrCjD,KAAKkD,OAAS,CAAEA,OAAQlD,KAAKkD,QAAW,OAK5DlD,KAAKmD,SACFhC,EAAA,IAAA,CAAGqB,MAAO,CAAEW,QAAW,KAAMC,sBAAuBpD,KAAKqD,oBACpDrD,KAAKmD","sourcesContent":["/* eslint-disable @typescript-eslint/explicit-module-boundary-types */\nimport { Component, Element, h, Host, Prop } from '@stencil/core';\n\nconst defaults = {\n    root: null,\n    rootMargin: '0px',\n    threshold: 0,\n};\n\nexport type SewIntersectionObserverCallback = (\n    entry: IntersectionObserverEntry\n) => IntersectionObserverEntry | void;\n\nconst compose =\n    (...functions: SewIntersectionObserverCallback[]) =>\n    (entry: IntersectionObserverEntry) => {\n        return functions.reduce(\n            (entry: IntersectionObserverEntry, fn: SewIntersectionObserverCallback) => fn(entry),\n            entry\n        );\n    };\n\n@Component({\n    tag: 'sew-intersection-observer',\n    shadow: true,\n})\nexport class SewIntersectionObserver {\n    @Element() host: HTMLSewIntersectionObserverElement;\n\n    @Prop() root? = defaults.root;\n    @Prop({ attribute: 'root-margin' }) rootMargin? = defaults.rootMargin;\n    @Prop() threshold? = defaults.threshold;\n    @Prop() callbacks: SewIntersectionObserverCallback;\n\n    private observer: IntersectionObserver;\n\n    private callbackIntersection = async (entries: IntersectionObserverEntry[]) => {\n        const executedCallbacks = entries.reduce(\n            (_, entry: IntersectionObserverEntry) => compose(this.callbacks)(entry),\n            undefined\n        );\n        if (!executedCallbacks) this.observer.disconnect();\n    };\n\n    componentDidLoad() {\n        const { root, rootMargin, threshold, host } = this;\n        this.observer = new IntersectionObserver(this.callbackIntersection, { root, rootMargin, threshold });\n        Array.from(host.children).map(element => this.observer.observe(element));\n    }\n\n    disconnectedCallback() {\n        if (this.observer) this.observer.disconnect();\n    }\n\n    render() {\n        return (\n            <Host>\n                <slot />\n            </Host>\n        );\n    }\n}\n",":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-s;\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-1 {\n    .caption {\n        &.shift-caption-right {\n            padding-left: 0;\n        }\n    }\n}\n","import { Component, Element, h, Host, Prop, State } from '@stencil/core';\nimport { SewIntersectionObserverCallback } from '../sew-intersection-observer/interserction-observer';\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() caption: string;\n    @Prop() shiftCaptionRight = false;\n    @Prop() width?;\n    @Prop() height?;\n    @Prop() root?;\n    @Prop({ attribute: 'root-margin' }) rootMargin?;\n    @Prop() threshold?;\n    @Prop() objectFit = false;\n    @Prop() objectFitContain = false;\n    @Prop() showImage = false;\n\n    @State() mediaSources;\n\n    private callback: SewIntersectionObserverCallback = (entry: IntersectionObserverEntry) => {\n        if (entry.isIntersecting) {\n            this.showImage = true;\n        } else {\n            return entry;\n        }\n    };\n\n    componentWillLoad(): void {\n        this.mediaSources = Array.from(this.host.children).filter(child => child.nodeName === 'SOURCE');\n\n        if (window.matchMedia('print').matches) {\n            this.showImage = true;\n        }\n    }\n\n    public render(): JSX.Element {\n        return (\n            <Host>\n                <sew-intersection-observer\n                    callbacks={this.callback}\n                    {...(this.root ? { root: this.root } : {})}\n                    {...(this.rootMargin ? { root: this.root } : {})}\n                    {...(this.threshold ? { threshold: this.threshold } : {})}\n                >\n                    <picture>\n                        {this.showImage && this.mediaSources.length > 0\n                            ? this.mediaSources.map(\n                                  ({ media, srcset }: { media: string; srcset: string }) => (\n                                      <source key={media} media={media} srcSet={srcset} />\n                                  )\n                              )\n                            : null}\n                        {this.showImage && (\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                                {...(this.width ? { width: this.width } : {})}\n                                {...(this.height ? { height: this.height } : {})}\n                            />\n                        )}\n                    </picture>\n                </sew-intersection-observer>\n                {this.caption && (\n                    <p class={{ 'caption': true, 'shift-caption-right': this.shiftCaptionRight }}>\n                        {this.caption}\n                    </p>\n                )}\n            </Host>\n        );\n    }\n}\n"]}