ngx-ratio-image/fesm2022/ngx-ratio-image.mjs.map

An Angular lib to show an image with variable ratio in container with a fixed ratio.

{"version":3,"file":"ngx-ratio-image.mjs","sources":["../../../projects/ngx-ratio-image/src/lib/ratio-image/ratio-image.component.ts","../../../projects/ngx-ratio-image/src/lib/ratio-image/ratio-image.component.html","../../../projects/ngx-ratio-image/src/lib/ratio-image.module.ts","../../../projects/ngx-ratio-image/src/public-api.ts","../../../projects/ngx-ratio-image/src/ngx-ratio-image.ts"],"sourcesContent":["import { AfterViewInit, Component, Input, OnChanges } from '@angular/core';\n\ninterface Image {\n\tclientWidth: number;\n\tclientHeight: number;\n\tnaturalWidth: number;\n\tnaturalHeight: number;\n}\n\n@Component({\n\tselector: 'ngx-ratio-image',\n\ttemplateUrl: 'ratio-image.component.html',\n\tstyles: []\n})\nexport class RatioImageComponent implements AfterViewInit, OnChanges {\n\t@Input({ required: true }) public src = '';\n\t@Input({ required: true }) public width = 0;\n\t@Input({ required: true }) public height = 0;\n\t@Input() public debug = false;\n\n\tpublic imageWidth = 0;\n\tpublic imageHeight = 0;\n\n\tpublic naturalWidth = 0;\n\tpublic naturalHeight = 0;\n\n\tpublic imageLeft = 0;\n\tpublic imageTop = 0;\n\tpublic ratioImage = 1;\n\tpublic ratioBox = 1;\n\n\tpublic scale = 1;\n\n\tconstructor() {\n\t\tif (this.debug) console.log('constructor', this.src);\n\t}\n\n\tngAfterViewInit() {\n\t\tif (this.debug) console.log('ngAfterViewInit', this.src, this.width, this.height);\n\t}\n\n\tonImageLoad(img: Image) {\n\t\tif (this.debug) console.log('onImageLoad ', img);\n\t\tif (img) {\n\t\t\tthis.naturalWidth = img.naturalWidth;\n\t\t\tthis.naturalHeight = img.naturalHeight;\n\t\t\tif (this.width > 0 && this.height > 0) {\n\t\t\t\tthis.calculate();\n\t\t\t}\n\t\t}\n\t}\n\n\tngOnChanges(): void {\n\t\tthis.calculate();\n\t}\n\n\tprivate calculate() {\n\t\tthis.ratioImage = this.naturalWidth / this.naturalHeight;\n\t\tthis.ratioBox = this.width / this.height;\n\n\t\tif (this.ratioBox > this.ratioImage) {\n\t\t\tthis.scale = this.height / this.naturalHeight;\n\t\t\tthis.imageLeft = (this.width - this.naturalWidth * this.scale) / 2;\n\t\t} else if (this.ratioBox < this.ratioImage) {\n\t\t\tthis.scale = this.width / this.naturalWidth;\n\t\t\tthis.imageTop = (this.height - this.naturalHeight * this.scale) / 2;\n\t\t} else {\n\t\t\tthis.scale = this.width / this.naturalWidth;\n\t\t\tthis.imageLeft = 0;\n\t\t\tthis.imageTop = 0;\n\t\t}\n\n\t\tif (this.debug) console.log('calculate', this.src, this.naturalWidth + ' x ' + this.naturalHeight);\n\t}\n}\n","<div\n\t[style.position]=\"'relative'\"\n\t[style.z-index]=\"2\"\n\t[style.border]=\"debug ? '1px solid red' : ''\"\n\t[style.width]=\"width + 'px'\"\n\t[style.height]=\"height + 'px'\"\n>\n\t<img\n\t\tclass=\"img-background\"\n\t\t#img\n\t\t[src]=\"src\"\n\t\t[style.position]=\"'absolute'\"\n\t\t[style.z-index]=\"1\"\n\t\t[style.filter]=\"'blur(5px)'\"\n\t\t[style.opacity]=\"0.5\"\n\t\t[width]=\"width\"\n\t\t[height]=\"height\"\n\t\t[style.overflow]=\"'hidden'\"\n\t\t(load)=\"onImageLoad(img)\"\n\t\talt=\"\"\n\t/>\n\t<img\n\t\tclass=\"img-main\"\n\t\t[src]=\"src\"\n\t\t[width]=\"naturalWidth * scale\"\n\t\t[height]=\"naturalHeight * scale\"\n\t\t[style.position]=\"'absolute'\"\n\t\t[style.z-index]=\"2\"\n\t\t[style.left]=\"imageLeft + 'px'\"\n\t\t[style.top]=\"imageTop + 'px'\"\n\t\talt=\"\"\n\t/>\n</div>\n<div *ngIf=\"debug\" style=\"margin-top: 10px\">\n\t<div>Container: {{ width }} x {{ height }}</div>\n\t<div>Natural: {{ naturalWidth }} x {{ naturalHeight }}</div>\n\t<div>Pos: {{ imageLeft }} , {{ imageTop }}</div>\n\t<div>Scale: {{ scale | number: '0.0-2' }}</div>\n\t<div>\n\t\tRatio Box , Image: {{ this.ratioBox | number: '0.0-2' }} : 1 , {{ this.ratioImage | number: '0.0-2' }} : 1\n\t</div>\n</div>\n","import { NgModule } from '@angular/core';\nimport { RatioImageComponent } from './ratio-image/ratio-image.component';\nimport { DecimalPipe, NgIf } from '@angular/common';\n\n@NgModule({\n\tdeclarations: [RatioImageComponent],\n\timports: [NgIf, DecimalPipe],\n\texports: [RatioImageComponent]\n})\nexport class RatioImageModule {}\n","/*\n * Public API Surface of ngx-ratio-image\n */\n\nexport * from './lib/ratio-image/ratio-image.component';\nexport * from './lib/ratio-image.module';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}