{"version":3,"file":"ncr-contentful-contentful-responsive-media.component-C7sSvkrR.mjs","sources":["../../../projects/ncr-contentful/src/components/contentful-responsive-media/contentful-responsive-media.component.ts","../../../projects/ncr-contentful/src/components/contentful-responsive-media/contentful-responsive-media.component.html"],"sourcesContent":["import {ChangeDetectionStrategy, Component, ElementRef, OnDestroy, OnInit, Renderer2} from \"@angular/core\";\nimport {CommonModule} from \"@angular/common\";\nimport {NcrDynamicDirective} from \"../../directives/dynamic/ncr-dynamic.directive\";\nimport {ContentfulComponent} from \"../ncr-contentful-components.model\";\nimport {TypeResponsiveMedia} from \"./contentful-responsive-media.model\";\nimport {NcrContentfulConfig} from \"../../config\";\nimport {ContentfulAssetComponent} from \"../contentful-asset\";\nimport {DefaultBreakpoints, NcrAsset} from \"../../models\";\n\n@Component({\n    selector: \"ncr-contentful-responsive-media\",\n    templateUrl: \"./contentful-responsive-media.component.html\",\n    standalone: true,\n    styleUrls: [\"./contentful-responsive-media.component.scss\"],\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    imports: [CommonModule, NcrDynamicDirective, ContentfulAssetComponent],\n})\nexport class ContentfulResponsiveMediaComponent\n    extends ContentfulComponent<TypeResponsiveMedia>\n    implements OnInit, OnDestroy {\n    private static count = 0;\n    public _count: number = 0;\n    public medias: NcrAsset[] = [];\n    private styleElement: HTMLStyleElement | undefined;\n\n    constructor(\n        private renderer: Renderer2,\n        private el: ElementRef,\n        private ncrConfig: NcrContentfulConfig\n    ) {\n        super();\n    }\n\n    ngOnInit(): void {\n        this._count = ++ContentfulResponsiveMediaComponent.count;\n\n        const breakpoints = this.ncrConfig.breakpoints;\n\n        this.medias = Object.values(this.entry?.fields?.medias);\n\n        this.styleElement = this.renderer.createElement(\"style\");\n        this.renderer?.appendChild(this.styleElement, this.renderer.createText(this.getResponsiveStyle()));\n        this.renderer?.appendChild(this.el.nativeElement, this.styleElement);\n    }\n\n    ngOnDestroy(): void {\n        if (this?.styleElement?.parentNode) {\n            this.styleElement.parentNode.removeChild(this.styleElement);\n        }\n    }\n\n    getResponsiveStyle() {\n        if (!this.entry?.fields || !this.entry?.fields?.medias) {\n            return \"\";\n        }\n        const breakpointsArray = Object.values(this.ncrConfig.breakpoints);\n        const breakpointsKeyArray: DefaultBreakpoints[] = Object.keys(\n            this.ncrConfig.breakpoints\n        ) as DefaultBreakpoints[];\n\n        return breakpointsArray\n            .map((breakpointKey, index) => {\n                const breakpoint = breakpointsKeyArray[index];\n                return this.wrapInMediaQuery(\n                    breakpointsArray[index]?.minWidth,\n                    (breakpointsArray[index + 1]?.minWidth ?? 1) - 1,\n                    index,\n                    this.entry.fields.aspectRatio[breakpoint]!.replace(\":\", \"/\") // Replace the : retrieved from contentful to /\n                );\n            })\n            .join(\"\");\n    }\n\n    private wrapInMediaQuery(minWidth: number, maxWidth: number, index: number, aspectRatio: string) {\n        const style = `\n\n        .media-container[ncr-id=\"${this._count}\"] > ncr-contentful-asset:nth-child(${index + 1}) {\n            display: block;\n        }\n\n        .media-container[ncr-id=\"${this._count}\"] > ncr-contentful-asset:nth-child(${index + 1}) > .media-placeholder {\n            aspect-ratio: ${aspectRatio};\n        }\n      `;\n\n        const mediaQueries = [\n            minWidth ? `(min-width: ${minWidth}px)` : undefined,\n            maxWidth ? `(max-width: ${maxWidth}px)` : undefined,\n        ]\n            .filter(Boolean)\n            .join(\" and \");\n        return `\n                @media ${mediaQueries} {\n                    ${style}\n                }`;\n    }\n}\n","<div class=\"media-container\" [attr.ncr-id]=\"_count\">\n    <ng-container *ngFor=\"let media of medias; let i = index\">\n        <ncr-contentful-asset [asset]=\"media\"></ncr-contentful-asset>\n    </ng-container>\n</div>\n"],"names":["i1.NcrContentfulConfig"],"mappings":"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"}