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/public-api.ts","../../../projects/ngx-ratio-image/src/ngx-ratio-image.ts"],"sourcesContent":["import { AfterViewInit, Component, Input, OnChanges } from '@angular/core';\nimport { DecimalPipe } from '@angular/common';\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\timports: [DecimalPipe]\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  [style.position]=\"'relative'\"\n  [style.z-index]=\"2\"\n  [style.border]=\"debug ? '1px solid red' : ''\"\n  [style.width]=\"width + 'px'\"\n  [style.height]=\"height + 'px'\"\n  >\n  <img\n    class=\"img-background\"\n    #img\n    [src]=\"src\"\n    [style.position]=\"'absolute'\"\n    [style.z-index]=\"1\"\n    [style.filter]=\"'blur(5px)'\"\n    [style.opacity]=\"0.5\"\n    [width]=\"width\"\n    [height]=\"height\"\n    [style.overflow]=\"'hidden'\"\n    (load)=\"onImageLoad(img)\"\n    alt=\"\"\n    />\n  <img\n    class=\"img-main\"\n    [src]=\"src\"\n    [width]=\"naturalWidth * scale\"\n    [height]=\"naturalHeight * scale\"\n    [style.position]=\"'absolute'\"\n    [style.z-index]=\"2\"\n    [style.left]=\"imageLeft + 'px'\"\n    [style.top]=\"imageTop + 'px'\"\n    alt=\"\"\n    />\n</div>\n@if (debug) {\n  <div style=\"margin-top: 10px\">\n    <div>Container: {{ width }} x {{ height }}</div>\n    <div>Natural: {{ naturalWidth }} x {{ naturalHeight }}</div>\n    <div>Pos: {{ imageLeft }} , {{ imageTop }}</div>\n    <div>Scale: {{ scale | number: '0.0-2' }}</div>\n    <div>\n      Ratio Box , Image: {{ this.ratioBox | number: '0.0-2' }} : 1 , {{ this.ratioImage | number: '0.0-2' }} : 1\n    </div>\n  </div>\n}\n","/*\n * Public API Surface of ngx-ratio-image\n */\n\nexport * from './lib/ratio-image/ratio-image.component';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}