ngx-ratio-image 0.0.9 → 0.0.12

package/esm2022/lib/ratio-image/ratio-image.component.mjs

@@ -0,0 +1,77 @@
+import { Component, Input } from '@angular/core';
+import * as i0 from "@angular/core";
+import * as i1 from "@angular/common";
+export class RatioImageComponent {
+    constructor() {
+        this.src = '';
+        this.width = 0;
+        this.height = 0;
+        this.debug = false;
+        this.imageWidth = 0;
+        this.imageHeight = 0;
+        this.naturalWidth = 0;
+        this.naturalHeight = 0;
+        this.imageLeft = 0;
+        this.imageTop = 0;
+        this.ratioImage = 1;
+        this.ratioBox = 1;
+        this.scale = 1;
+        if (this.debug)
+            console.log('constructor', this.src);
+    }
+    ngAfterViewInit() {
+        if (this.debug)
+            console.log('ngAfterViewInit', this.src, this.width, this.height);
+    }
+    onImageLoad(img) {
+        if (this.debug)
+            console.log('onImageLoad ', img);
+        if (img) {
+            this.naturalWidth = img.naturalWidth;
+            this.naturalHeight = img.naturalHeight;
+            if (this.width > 0 && this.height > 0) {
+                this.calculate();
+            }
+        }
+    }
+    ngOnChanges() {
+        this.calculate();
+    }
+    calculate() {
+        this.ratioImage = this.naturalWidth / this.naturalHeight;
+        this.ratioBox = this.width / this.height;
+        if (this.ratioBox > this.ratioImage) {
+            this.scale = this.height / this.naturalHeight;
+            this.imageLeft = (this.width - this.naturalWidth * this.scale) / 2;
+        }
+        else if (this.ratioBox < this.ratioImage) {
+            this.scale = this.width / this.naturalWidth;
+            this.imageTop = (this.height - this.naturalHeight * this.scale) / 2;
+        }
+        else {
+            this.scale = this.width / this.naturalWidth;
+            this.imageLeft = 0;
+            this.imageTop = 0;
+        }
+        if (this.debug)
+            console.log('calculate', this.src, this.naturalWidth + ' x ' + this.naturalHeight);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.2", ngImport: i0, type: RatioImageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.2", type: RatioImageComponent, selector: "ngx-ratio-image", inputs: { src: "src", width: "width", height: "height", debug: "debug" }, usesOnChanges: true, ngImport: i0, template: "<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", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1.DecimalPipe, name: "number" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.2", ngImport: i0, type: RatioImageComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ngx-ratio-image', template: "<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" }]
+        }], ctorParameters: function () { return []; }, propDecorators: { src: [{
+                type: Input,
+                args: [{ required: true }]
+            }], width: [{
+                type: Input,
+                args: [{ required: true }]
+            }], height: [{
+                type: Input,
+                args: [{ required: true }]
+            }], debug: [{
+                type: Input
+            }] } });
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicmF0aW8taW1hZ2UuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvbmd4LXJhdGlvLWltYWdlL3NyYy9saWIvcmF0aW8taW1hZ2UvcmF0aW8taW1hZ2UuY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvbmd4LXJhdGlvLWltYWdlL3NyYy9saWIvcmF0aW8taW1hZ2UvcmF0aW8taW1hZ2UuY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFpQixTQUFTLEVBQUUsS0FBSyxFQUFhLE1BQU0sZUFBZSxDQUFDOzs7QUFjM0UsTUFBTSxPQUFPLG1CQUFtQjtJQW1CL0I7UUFsQmtDLFFBQUcsR0FBRyxFQUFFLENBQUM7UUFDVCxVQUFLLEdBQUcsQ0FBQyxDQUFDO1FBQ1YsV0FBTSxHQUFHLENBQUMsQ0FBQztRQUM3QixVQUFLLEdBQUcsS0FBSyxDQUFDO1FBRXZCLGVBQVUsR0FBRyxDQUFDLENBQUM7UUFDZixnQkFBVyxHQUFHLENBQUMsQ0FBQztRQUVoQixpQkFBWSxHQUFHLENBQUMsQ0FBQztRQUNqQixrQkFBYSxHQUFHLENBQUMsQ0FBQztRQUVsQixjQUFTLEdBQUcsQ0FBQyxDQUFDO1FBQ2QsYUFBUSxHQUFHLENBQUMsQ0FBQztRQUNiLGVBQVUsR0FBRyxDQUFDLENBQUM7UUFDZixhQUFRLEdBQUcsQ0FBQyxDQUFDO1FBRWIsVUFBSyxHQUFHLENBQUMsQ0FBQztRQUdoQixJQUFJLElBQUksQ0FBQyxLQUFLO1lBQUUsT0FBTyxDQUFDLEdBQUcsQ0FBQyxhQUFhLEVBQUUsSUFBSSxDQUFDLEdBQUcsQ0FBQyxDQUFDO0lBQ3RELENBQUM7SUFFRCxlQUFlO1FBQ2QsSUFBSSxJQUFJLENBQUMsS0FBSztZQUFFLE9BQU8sQ0FBQyxHQUFHLENBQUMsaUJBQWlCLEVBQUUsSUFBSSxDQUFDLEdBQUcsRUFBRSxJQUFJLENBQUMsS0FBSyxFQUFFLElBQUksQ0FBQyxNQUFNLENBQUMsQ0FBQztJQUNuRixDQUFDO0lBRUQsV0FBVyxDQUFDLEdBQVU7UUFDckIsSUFBSSxJQUFJLENBQUMsS0FBSztZQUFFLE9BQU8sQ0FBQyxHQUFHLENBQUMsY0FBYyxFQUFFLEdBQUcsQ0FBQyxDQUFDO1FBQ2pELElBQUksR0FBRyxFQUFFO1lBQ1IsSUFBSSxDQUFDLFlBQVksR0FBRyxHQUFHLENBQUMsWUFBWSxDQUFDO1lBQ3JDLElBQUksQ0FBQyxhQUFhLEdBQUcsR0FBRyxDQUFDLGFBQWEsQ0FBQztZQUN2QyxJQUFJLElBQUksQ0FBQyxLQUFLLEdBQUcsQ0FBQyxJQUFJLElBQUksQ0FBQyxNQUFNLEdBQUcsQ0FBQyxFQUFFO2dCQUN0QyxJQUFJLENBQUMsU0FBUyxFQUFFLENBQUM7YUFDakI7U0FDRDtJQUNGLENBQUM7SUFFRCxXQUFXO1FBQ1YsSUFBSSxDQUFDLFNBQVMsRUFBRSxDQUFDO0lBQ2xCLENBQUM7SUFFTyxTQUFTO1FBQ2hCLElBQUksQ0FBQyxVQUFVLEdBQUcsSUFBSSxDQUFDLFlBQVksR0FBRyxJQUFJLENBQUMsYUFBYSxDQUFDO1FBQ3pELElBQUksQ0FBQyxRQUFRLEdBQUcsSUFBSSxDQUFDLEtBQUssR0FBRyxJQUFJLENBQUMsTUFBTSxDQUFDO1FBRXpDLElBQUksSUFBSSxDQUFDLFFBQVEsR0FBRyxJQUFJLENBQUMsVUFBVSxFQUFFO1lBQ3BDLElBQUksQ0FBQyxLQUFLLEdBQUcsSUFBSSxDQUFDLE1BQU0sR0FBRyxJQUFJLENBQUMsYUFBYSxDQUFDO1lBQzlDLElBQUksQ0FBQyxTQUFTLEdBQUcsQ0FBQyxJQUFJLENBQUMsS0FBSyxHQUFHLElBQUksQ0FBQyxZQUFZLEdBQUcsSUFBSSxDQUFDLEtBQUssQ0FBQyxHQUFHLENBQUMsQ0FBQztTQUNuRTthQUFNLElBQUksSUFBSSxDQUFDLFFBQVEsR0FBRyxJQUFJLENBQUMsVUFBVSxFQUFFO1lBQzNDLElBQUksQ0FBQyxLQUFLLEdBQUcsSUFBSSxDQUFDLEtBQUssR0FBRyxJQUFJLENBQUMsWUFBWSxDQUFDO1lBQzVDLElBQUksQ0FBQyxRQUFRLEdBQUcsQ0FBQyxJQUFJLENBQUMsTUFBTSxHQUFHLElBQUksQ0FBQyxhQUFhLEdBQUcsSUFBSSxDQUFDLEtBQUssQ0FBQyxHQUFHLENBQUMsQ0FBQztTQUNwRTthQUFNO1lBQ04sSUFBSSxDQUFDLEtBQUssR0FBRyxJQUFJLENBQUMsS0FBSyxHQUFHLElBQUksQ0FBQyxZQUFZLENBQUM7WUFDNUMsSUFBSSxDQUFDLFNBQVMsR0FBRyxDQUFDLENBQUM7WUFDbkIsSUFBSSxDQUFDLFFBQVEsR0FBRyxDQUFDLENBQUM7U0FDbEI7UUFFRCxJQUFJLElBQUksQ0FBQyxLQUFLO1lBQUUsT0FBTyxDQUFDLEdBQUcsQ0FBQyxXQUFXLEVBQUUsSUFBSSxDQUFDLEdBQUcsRUFBRSxJQUFJLENBQUMsWUFBWSxHQUFHLEtBQUssR0FBRyxJQUFJLENBQUMsYUFBYSxDQUFDLENBQUM7SUFDcEcsQ0FBQzs4R0EzRFcsbUJBQW1CO2tHQUFuQixtQkFBbUIsc0pDZGhDLDZzQ0EwQ0E7OzJGRDVCYSxtQkFBbUI7a0JBTC9CLFNBQVM7K0JBQ0MsaUJBQWlCOzBFQUtPLEdBQUc7c0JBQXBDLEtBQUs7dUJBQUMsRUFBRSxRQUFRLEVBQUUsSUFBSSxFQUFFO2dCQUNTLEtBQUs7c0JBQXRDLEtBQUs7dUJBQUMsRUFBRSxRQUFRLEVBQUUsSUFBSSxFQUFFO2dCQUNTLE1BQU07c0JBQXZDLEtBQUs7dUJBQUMsRUFBRSxRQUFRLEVBQUUsSUFBSSxFQUFFO2dCQUNULEtBQUs7c0JBQXBCLEtBQUsiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBBZnRlclZpZXdJbml0LCBDb21wb25lbnQsIElucHV0LCBPbkNoYW5nZXMgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcblxuaW50ZXJmYWNlIEltYWdlIHtcblx0Y2xpZW50V2lkdGg6IG51bWJlcjtcblx0Y2xpZW50SGVpZ2h0OiBudW1iZXI7XG5cdG5hdHVyYWxXaWR0aDogbnVtYmVyO1xuXHRuYXR1cmFsSGVpZ2h0OiBudW1iZXI7XG59XG5cbkBDb21wb25lbnQoe1xuXHRzZWxlY3RvcjogJ25neC1yYXRpby1pbWFnZScsXG5cdHRlbXBsYXRlVXJsOiAncmF0aW8taW1hZ2UuY29tcG9uZW50Lmh0bWwnLFxuXHRzdHlsZXM6IFtdXG59KVxuZXhwb3J0IGNsYXNzIFJhdGlvSW1hZ2VDb21wb25lbnQgaW1wbGVtZW50cyBBZnRlclZpZXdJbml0LCBPbkNoYW5nZXMge1xuXHRASW5wdXQoeyByZXF1aXJlZDogdHJ1ZSB9KSBwdWJsaWMgc3JjID0gJyc7XG5cdEBJbnB1dCh7IHJlcXVpcmVkOiB0cnVlIH0pIHB1YmxpYyB3aWR0aCA9IDA7XG5cdEBJbnB1dCh7IHJlcXVpcmVkOiB0cnVlIH0pIHB1YmxpYyBoZWlnaHQgPSAwO1xuXHRASW5wdXQoKSBwdWJsaWMgZGVidWcgPSBmYWxzZTtcblxuXHRwdWJsaWMgaW1hZ2VXaWR0aCA9IDA7XG5cdHB1YmxpYyBpbWFnZUhlaWdodCA9IDA7XG5cblx0cHVibGljIG5hdHVyYWxXaWR0aCA9IDA7XG5cdHB1YmxpYyBuYXR1cmFsSGVpZ2h0ID0gMDtcblxuXHRwdWJsaWMgaW1hZ2VMZWZ0ID0gMDtcblx0cHVibGljIGltYWdlVG9wID0gMDtcblx0cHVibGljIHJhdGlvSW1hZ2UgPSAxO1xuXHRwdWJsaWMgcmF0aW9Cb3ggPSAxO1xuXG5cdHB1YmxpYyBzY2FsZSA9IDE7XG5cblx0Y29uc3RydWN0b3IoKSB7XG5cdFx0aWYgKHRoaXMuZGVidWcpIGNvbnNvbGUubG9nKCdjb25zdHJ1Y3RvcicsIHRoaXMuc3JjKTtcblx0fVxuXG5cdG5nQWZ0ZXJWaWV3SW5pdCgpIHtcblx0XHRpZiAodGhpcy5kZWJ1ZykgY29uc29sZS5sb2coJ25nQWZ0ZXJWaWV3SW5pdCcsIHRoaXMuc3JjLCB0aGlzLndpZHRoLCB0aGlzLmhlaWdodCk7XG5cdH1cblxuXHRvbkltYWdlTG9hZChpbWc6IEltYWdlKSB7XG5cdFx0aWYgKHRoaXMuZGVidWcpIGNvbnNvbGUubG9nKCdvbkltYWdlTG9hZCAnLCBpbWcpO1xuXHRcdGlmIChpbWcpIHtcblx0XHRcdHRoaXMubmF0dXJhbFdpZHRoID0gaW1nLm5hdHVyYWxXaWR0aDtcblx0XHRcdHRoaXMubmF0dXJhbEhlaWdodCA9IGltZy5uYXR1cmFsSGVpZ2h0O1xuXHRcdFx0aWYgKHRoaXMud2lkdGggPiAwICYmIHRoaXMuaGVpZ2h0ID4gMCkge1xuXHRcdFx0XHR0aGlzLmNhbGN1bGF0ZSgpO1xuXHRcdFx0fVxuXHRcdH1cblx0fVxuXG5cdG5nT25DaGFuZ2VzKCk6IHZvaWQge1xuXHRcdHRoaXMuY2FsY3VsYXRlKCk7XG5cdH1cblxuXHRwcml2YXRlIGNhbGN1bGF0ZSgpIHtcblx0XHR0aGlzLnJhdGlvSW1hZ2UgPSB0aGlzLm5hdHVyYWxXaWR0aCAvIHRoaXMubmF0dXJhbEhlaWdodDtcblx0XHR0aGlzLnJhdGlvQm94ID0gdGhpcy53aWR0aCAvIHRoaXMuaGVpZ2h0O1xuXG5cdFx0aWYgKHRoaXMucmF0aW9Cb3ggPiB0aGlzLnJhdGlvSW1hZ2UpIHtcblx0XHRcdHRoaXMuc2NhbGUgPSB0aGlzLmhlaWdodCAvIHRoaXMubmF0dXJhbEhlaWdodDtcblx0XHRcdHRoaXMuaW1hZ2VMZWZ0ID0gKHRoaXMud2lkdGggLSB0aGlzLm5hdHVyYWxXaWR0aCAqIHRoaXMuc2NhbGUpIC8gMjtcblx0XHR9IGVsc2UgaWYgKHRoaXMucmF0aW9Cb3ggPCB0aGlzLnJhdGlvSW1hZ2UpIHtcblx0XHRcdHRoaXMuc2NhbGUgPSB0aGlzLndpZHRoIC8gdGhpcy5uYXR1cmFsV2lkdGg7XG5cdFx0XHR0aGlzLmltYWdlVG9wID0gKHRoaXMuaGVpZ2h0IC0gdGhpcy5uYXR1cmFsSGVpZ2h0ICogdGhpcy5zY2FsZSkgLyAyO1xuXHRcdH0gZWxzZSB7XG5cdFx0XHR0aGlzLnNjYWxlID0gdGhpcy53aWR0aCAvIHRoaXMubmF0dXJhbFdpZHRoO1xuXHRcdFx0dGhpcy5pbWFnZUxlZnQgPSAwO1xuXHRcdFx0dGhpcy5pbWFnZVRvcCA9IDA7XG5cdFx0fVxuXG5cdFx0aWYgKHRoaXMuZGVidWcpIGNvbnNvbGUubG9nKCdjYWxjdWxhdGUnLCB0aGlzLnNyYywgdGhpcy5uYXR1cmFsV2lkdGggKyAnIHggJyArIHRoaXMubmF0dXJhbEhlaWdodCk7XG5cdH1cbn1cbiIsIjxkaXZcblx0W3N0eWxlLnBvc2l0aW9uXT1cIidyZWxhdGl2ZSdcIlxuXHRbc3R5bGUuei1pbmRleF09XCIyXCJcblx0W3N0eWxlLmJvcmRlcl09XCJkZWJ1ZyA/ICcxcHggc29saWQgcmVkJyA6ICcnXCJcblx0W3N0eWxlLndpZHRoXT1cIndpZHRoICsgJ3B4J1wiXG5cdFtzdHlsZS5oZWlnaHRdPVwiaGVpZ2h0ICsgJ3B4J1wiXG4+XG5cdDxpbWdcblx0XHRjbGFzcz1cImltZy1iYWNrZ3JvdW5kXCJcblx0XHQjaW1nXG5cdFx0W3NyY109XCJzcmNcIlxuXHRcdFtzdHlsZS5wb3NpdGlvbl09XCInYWJzb2x1dGUnXCJcblx0XHRbc3R5bGUuei1pbmRleF09XCIxXCJcblx0XHRbc3R5bGUuZmlsdGVyXT1cIidibHVyKDVweCknXCJcblx0XHRbc3R5bGUub3BhY2l0eV09XCIwLjVcIlxuXHRcdFt3aWR0aF09XCJ3aWR0aFwiXG5cdFx0W2hlaWdodF09XCJoZWlnaHRcIlxuXHRcdFtzdHlsZS5vdmVyZmxvd109XCInaGlkZGVuJ1wiXG5cdFx0KGxvYWQpPVwib25JbWFnZUxvYWQoaW1nKVwiXG5cdFx0YWx0PVwiXCJcblx0Lz5cblx0PGltZ1xuXHRcdGNsYXNzPVwiaW1nLW1haW5cIlxuXHRcdFtzcmNdPVwic3JjXCJcblx0XHRbd2lkdGhdPVwibmF0dXJhbFdpZHRoICogc2NhbGVcIlxuXHRcdFtoZWlnaHRdPVwibmF0dXJhbEhlaWdodCAqIHNjYWxlXCJcblx0XHRbc3R5bGUucG9zaXRpb25dPVwiJ2Fic29sdXRlJ1wiXG5cdFx0W3N0eWxlLnotaW5kZXhdPVwiMlwiXG5cdFx0W3N0eWxlLmxlZnRdPVwiaW1hZ2VMZWZ0ICsgJ3B4J1wiXG5cdFx0W3N0eWxlLnRvcF09XCJpbWFnZVRvcCArICdweCdcIlxuXHRcdGFsdD1cIlwiXG5cdC8+XG48L2Rpdj5cbjxkaXYgKm5nSWY9XCJkZWJ1Z1wiIHN0eWxlPVwibWFyZ2luLXRvcDogMTBweFwiPlxuXHQ8ZGl2PkNvbnRhaW5lcjoge3sgd2lkdGggfX0geCB7eyBoZWlnaHQgfX08L2Rpdj5cblx0PGRpdj5OYXR1cmFsOiB7eyBuYXR1cmFsV2lkdGggfX0geCB7eyBuYXR1cmFsSGVpZ2h0IH19PC9kaXY+XG5cdDxkaXY+UG9zOiB7eyBpbWFnZUxlZnQgfX0gLCB7eyBpbWFnZVRvcCB9fTwvZGl2PlxuXHQ8ZGl2PlNjYWxlOiB7eyBzY2FsZSB8IG51bWJlcjogJzAuMC0yJyB9fTwvZGl2PlxuXHQ8ZGl2PlxuXHRcdFJhdGlvIEJveCAsIEltYWdlOiB7eyB0aGlzLnJhdGlvQm94IHwgbnVtYmVyOiAnMC4wLTInIH19IDogMSAsIHt7IHRoaXMucmF0aW9JbWFnZSB8IG51bWJlcjogJzAuMC0yJyB9fSA6IDFcblx0PC9kaXY+XG48L2Rpdj5cbiJdfQ==

package/esm2022/lib/ratio-image.module.mjs

@@ -0,0 +1,18 @@
+import { NgModule } from '@angular/core';
+import { RatioImageComponent } from './ratio-image/ratio-image.component';
+import { DecimalPipe, NgIf } from '@angular/common';
+import * as i0 from "@angular/core";
+export class RatioImageModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.2", ngImport: i0, type: RatioImageModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.1.2", ngImport: i0, type: RatioImageModule, declarations: [RatioImageComponent], imports: [NgIf, DecimalPipe], exports: [RatioImageComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.1.2", ngImport: i0, type: RatioImageModule }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.2", ngImport: i0, type: RatioImageModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [RatioImageComponent],
+                    imports: [NgIf, DecimalPipe],
+                    exports: [RatioImageComponent]
+                }]
+        }] });
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicmF0aW8taW1hZ2UubW9kdWxlLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vcHJvamVjdHMvbmd4LXJhdGlvLWltYWdlL3NyYy9saWIvcmF0aW8taW1hZ2UubW9kdWxlLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxRQUFRLEVBQUUsTUFBTSxlQUFlLENBQUM7QUFDekMsT0FBTyxFQUFFLG1CQUFtQixFQUFFLE1BQU0scUNBQXFDLENBQUM7QUFDMUUsT0FBTyxFQUFFLFdBQVcsRUFBRSxJQUFJLEVBQUUsTUFBTSxpQkFBaUIsQ0FBQzs7QUFPcEQsTUFBTSxPQUFPLGdCQUFnQjs4R0FBaEIsZ0JBQWdCOytHQUFoQixnQkFBZ0IsaUJBSmIsbUJBQW1CLGFBQ3hCLElBQUksRUFBRSxXQUFXLGFBQ2pCLG1CQUFtQjsrR0FFakIsZ0JBQWdCOzsyRkFBaEIsZ0JBQWdCO2tCQUw1QixRQUFRO21CQUFDO29CQUNULFlBQVksRUFBRSxDQUFDLG1CQUFtQixDQUFDO29CQUNuQyxPQUFPLEVBQUUsQ0FBQyxJQUFJLEVBQUUsV0FBVyxDQUFDO29CQUM1QixPQUFPLEVBQUUsQ0FBQyxtQkFBbUIsQ0FBQztpQkFDOUIiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBOZ01vZHVsZSB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgUmF0aW9JbWFnZUNvbXBvbmVudCB9IGZyb20gJy4vcmF0aW8taW1hZ2UvcmF0aW8taW1hZ2UuY29tcG9uZW50JztcbmltcG9ydCB7IERlY2ltYWxQaXBlLCBOZ0lmIH0gZnJvbSAnQGFuZ3VsYXIvY29tbW9uJztcblxuQE5nTW9kdWxlKHtcblx0ZGVjbGFyYXRpb25zOiBbUmF0aW9JbWFnZUNvbXBvbmVudF0sXG5cdGltcG9ydHM6IFtOZ0lmLCBEZWNpbWFsUGlwZV0sXG5cdGV4cG9ydHM6IFtSYXRpb0ltYWdlQ29tcG9uZW50XVxufSlcbmV4cG9ydCBjbGFzcyBSYXRpb0ltYWdlTW9kdWxlIHt9XG4iXX0=

package/esm2022/ngx-ratio-image.mjs

@@ -0,0 +1,5 @@
+/**
+ * Generated bundle index. Do not edit.
+ */
+export * from './public-api';
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibmd4LXJhdGlvLWltYWdlLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vcHJvamVjdHMvbmd4LXJhdGlvLWltYWdlL3NyYy9uZ3gtcmF0aW8taW1hZ2UudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUE7O0dBRUc7QUFFSCxjQUFjLGNBQWMsQ0FBQyIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogR2VuZXJhdGVkIGJ1bmRsZSBpbmRleC4gRG8gbm90IGVkaXQuXG4gKi9cblxuZXhwb3J0ICogZnJvbSAnLi9wdWJsaWMtYXBpJztcbiJdfQ==

package/esm2022/public-api.mjs

@@ -0,0 +1,6 @@
+/*
+ * Public API Surface of ngx-ratio-image
+ */
+export * from './lib/ratio-image/ratio-image.component';
+export * from './lib/ratio-image.module';
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicHVibGljLWFwaS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3Byb2plY3RzL25neC1yYXRpby1pbWFnZS9zcmMvcHVibGljLWFwaS50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQTs7R0FFRztBQUVILGNBQWMseUNBQXlDLENBQUM7QUFDeEQsY0FBYywwQkFBMEIsQ0FBQyIsInNvdXJjZXNDb250ZW50IjpbIi8qXG4gKiBQdWJsaWMgQVBJIFN1cmZhY2Ugb2Ygbmd4LXJhdGlvLWltYWdlXG4gKi9cblxuZXhwb3J0ICogZnJvbSAnLi9saWIvcmF0aW8taW1hZ2UvcmF0aW8taW1hZ2UuY29tcG9uZW50JztcbmV4cG9ydCAqIGZyb20gJy4vbGliL3JhdGlvLWltYWdlLm1vZHVsZSc7XG4iXX0=

package/fesm2022/ngx-ratio-image.mjs

@@ -0,0 +1,103 @@
+import * as i0 from '@angular/core';
+import { Component, Input, NgModule } from '@angular/core';
+import * as i1 from '@angular/common';
+import { NgIf, DecimalPipe } from '@angular/common';
+
+class RatioImageComponent {
+    constructor() {
+        this.src = '';
+        this.width = 0;
+        this.height = 0;
+        this.debug = false;
+        this.imageWidth = 0;
+        this.imageHeight = 0;
+        this.naturalWidth = 0;
+        this.naturalHeight = 0;
+        this.imageLeft = 0;
+        this.imageTop = 0;
+        this.ratioImage = 1;
+        this.ratioBox = 1;
+        this.scale = 1;
+        if (this.debug)
+            console.log('constructor', this.src);
+    }
+    ngAfterViewInit() {
+        if (this.debug)
+            console.log('ngAfterViewInit', this.src, this.width, this.height);
+    }
+    onImageLoad(img) {
+        if (this.debug)
+            console.log('onImageLoad ', img);
+        if (img) {
+            this.naturalWidth = img.naturalWidth;
+            this.naturalHeight = img.naturalHeight;
+            if (this.width > 0 && this.height > 0) {
+                this.calculate();
+            }
+        }
+    }
+    ngOnChanges() {
+        this.calculate();
+    }
+    calculate() {
+        this.ratioImage = this.naturalWidth / this.naturalHeight;
+        this.ratioBox = this.width / this.height;
+        if (this.ratioBox > this.ratioImage) {
+            this.scale = this.height / this.naturalHeight;
+            this.imageLeft = (this.width - this.naturalWidth * this.scale) / 2;
+        }
+        else if (this.ratioBox < this.ratioImage) {
+            this.scale = this.width / this.naturalWidth;
+            this.imageTop = (this.height - this.naturalHeight * this.scale) / 2;
+        }
+        else {
+            this.scale = this.width / this.naturalWidth;
+            this.imageLeft = 0;
+            this.imageTop = 0;
+        }
+        if (this.debug)
+            console.log('calculate', this.src, this.naturalWidth + ' x ' + this.naturalHeight);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.2", ngImport: i0, type: RatioImageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.2", type: RatioImageComponent, selector: "ngx-ratio-image", inputs: { src: "src", width: "width", height: "height", debug: "debug" }, usesOnChanges: true, ngImport: i0, template: "<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", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1.DecimalPipe, name: "number" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.2", ngImport: i0, type: RatioImageComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ngx-ratio-image', template: "<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" }]
+        }], ctorParameters: function () { return []; }, propDecorators: { src: [{
+                type: Input,
+                args: [{ required: true }]
+            }], width: [{
+                type: Input,
+                args: [{ required: true }]
+            }], height: [{
+                type: Input,
+                args: [{ required: true }]
+            }], debug: [{
+                type: Input
+            }] } });
+
+class RatioImageModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.2", ngImport: i0, type: RatioImageModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.1.2", ngImport: i0, type: RatioImageModule, declarations: [RatioImageComponent], imports: [NgIf, DecimalPipe], exports: [RatioImageComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.1.2", ngImport: i0, type: RatioImageModule }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.2", ngImport: i0, type: RatioImageModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [RatioImageComponent],
+                    imports: [NgIf, DecimalPipe],
+                    exports: [RatioImageComponent]
+                }]
+        }] });
+
+/*
+ * Public API Surface of ngx-ratio-image
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { RatioImageComponent, RatioImageModule };
+//# sourceMappingURL=ngx-ratio-image.mjs.map

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

@@ -0,0 +1 @@
+{"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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"}

package/index.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Generated bundle index. Do not edit.
+ */
+/// <amd-module name="ngx-ratio-image" />
+export * from './public-api';

package/lib/ratio-image/ratio-image.component.d.ts

@@ -0,0 +1,31 @@
+import { AfterViewInit, OnChanges } from '@angular/core';
+import * as i0 from "@angular/core";
+interface Image {
+    clientWidth: number;
+    clientHeight: number;
+    naturalWidth: number;
+    naturalHeight: number;
+}
+export declare class RatioImageComponent implements AfterViewInit, OnChanges {
+    src: string;
+    width: number;
+    height: number;
+    debug: boolean;
+    imageWidth: number;
+    imageHeight: number;
+    naturalWidth: number;
+    naturalHeight: number;
+    imageLeft: number;
+    imageTop: number;
+    ratioImage: number;
+    ratioBox: number;
+    scale: number;
+    constructor();
+    ngAfterViewInit(): void;
+    onImageLoad(img: Image): void;
+    ngOnChanges(): void;
+    private calculate;
+    static ɵfac: i0.ɵɵFactoryDeclaration<RatioImageComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<RatioImageComponent, "ngx-ratio-image", never, { "src": { "alias": "src"; "required": true; }; "width": { "alias": "width"; "required": true; }; "height": { "alias": "height"; "required": true; }; "debug": { "alias": "debug"; "required": false; }; }, {}, never, never, false, never>;
+}
+export {};

package/lib/ratio-image.module.d.ts

@@ -0,0 +1,8 @@
+import * as i0 from "@angular/core";
+import * as i1 from "./ratio-image/ratio-image.component";
+import * as i2 from "@angular/common";
+export declare class RatioImageModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<RatioImageModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<RatioImageModule, [typeof i1.RatioImageComponent], [typeof i2.NgIf, typeof i2.DecimalPipe], [typeof i1.RatioImageComponent]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<RatioImageModule>;
+}

package/package.json

@@ -1,89 +1,45 @@
 {
-	"name": "ngx-ratio-image",
-	"version": "0.0.9",
-	"author": {
-		"name": "Gerd Siebert"
-	},
-	"contributors": [],
-	"repository": {
-		"type": "git",
-		"url": "https://github.com/gerd-siebert/ngx-ratio-image"
-	},
-	"keywords": [
-		"Image",
-		"Scaling",
-		"Ratio",
-		"Angular 16"
-	],
-	"license": "MIT",
-	"main": "dist/ngx-ratio-image/esm2022/ratio-image.mjs",
-	"scripts": {
-		"ng": "ng",
-		"prettier": "prettier --write \"**/*.{js,json,css,scss,less,md,ts,html,component.html}\"",
-		"start": "ng serve",
-		"prebuild": "rimraf .angular dist && cp ./README.md ./LICENSE projects/ngx-ratio-image",
-		"build": "echo 'Prepare-Builds' && npm run build:lib && npm run build:lib",
-		"build:lib": "ng build --project ratioImage --configuration production ",
-		"build:app": "ng build --project ratioImageApp --configuration production ",
-		"watch": "ng build --watch --configuration development",
-		"test": "ng test",
-		"test:ci": "ng test --code-coverage --no-watch --browsers=ChromeHeadless --source-map=false",
-		"lint": "ng lint",
-		"packagr": "ng-packagr -p ng-package.json",
-		"publish": "rm -rf node_modules && npm install && npm run build && cd dist/ngx-ratio-image && npm publish && cd ../../"
-	},
-	"private": false,
-	"dependencies": {
-		"@angular/animations": "^16.1.2",
-		"@angular/cdk": "^16.1.1",
-		"@angular/common": "^16.1.2",
-		"@angular/compiler": "^16.1.2",
-		"@angular/core": "^16.1.2",
-		"@angular/forms": "^16.1.2",
-		"@angular/material": "^16.1.1",
-		"@angular/platform-browser": "^16.1.2",
-		"@angular/platform-browser-dynamic": "^16.1.2",
-		"@angular/router": "^16.1.2",
-		"rxjs": "~7.8.0",
-		"tslib": "^2.3.0",
-		"zone.js": "~0.13.0"
-	},
-	"devDependencies": {
-		"@angular-devkit/build-angular": "^16.1.0",
-		"@angular-eslint/builder": "16.0.3",
-		"@angular-eslint/eslint-plugin": "16.0.3",
-		"@angular-eslint/eslint-plugin-template": "16.0.3",
-		"@angular-eslint/schematics": "16.0.3",
-		"@angular-eslint/template-parser": "16.0.3",
-		"@angular/cli": "~16.1.0",
-		"@angular/compiler-cli": "^16.1.2",
-		"@schuchard/prettier": "5.1.0",
-		"@types/jasmine": "~4.3.0",
-		"@typescript-eslint/eslint-plugin": "5.59.7",
-		"@typescript-eslint/parser": "5.59.7",
-		"eslint": "^8.40.0",
-		"husky": "latest",
-		"jasmine-core": "~4.6.0",
-		"karma": "~6.4.0",
-		"karma-chrome-launcher": "~3.2.0",
-		"karma-coverage": "~2.2.0",
-		"karma-jasmine": "~5.1.0",
-		"karma-jasmine-html-reporter": "~2.1.0",
-		"lint-staged": "latest",
-		"ng-packagr": "^16.1.0",
-		"prettier": "^2.8.8",
-		"rimraf": "^5.0.1",
-		"tslint-config-prettier": "latest",
-		"typescript": "~5.1.3"
-	},
-	"husky": {
-		"hooks": {
-			"pre-commit": "lint-staged"
-		}
-	},
-	"lint-staged": {
-		"*.{js,json,css,scss,less,md,ts,html,component.html}": [
-			"prettier --write"
-		]
-	}
-}
+  "name": "ngx-ratio-image",
+  "version": "0.0.12",
+  "author": {
+    "name": "Gerd Siebert"
+  },
+  "keywords": [
+    "Image",
+    "Scaling",
+    "Ratio",
+    "Angular 16",
+    "Angular 17"
+  ],
+  "description": "Asn Angular lib to show an image with variable ratio in container with a fixed ratio.",
+  "license": "MIT",
+  "peerDependencies": {
+    "@angular/common": "^16.0.0 || ^17.0.0",
+    "@angular/core": "^16.0.0 || ^17.0.0"
+  },
+  "dependencies": {
+    "tslib": "^2.3.0"
+  },
+  "sideEffects": false,
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/gerd-siebert/ngx-ratio-image.git"
+  },
+  "bugs": {
+    "url": "https://github.com/gerd-siebert/ngx-ratio-image/issues"
+  },
+  "homepage": "https://github.com/gerd-siebert/ngx-ratio-image#readme",
+  "module": "fesm2022/ngx-ratio-image.mjs",
+  "typings": "index.d.ts",
+  "exports": {
+    "./package.json": {
+      "default": "./package.json"
+    },
+    ".": {
+      "types": "./index.d.ts",
+      "esm2022": "./esm2022/ngx-ratio-image.mjs",
+      "esm": "./esm2022/ngx-ratio-image.mjs",
+      "default": "./fesm2022/ngx-ratio-image.mjs"
+    }
+  }
+}

package/{projects/ngx-ratio-image/src/public-api.ts → public-api.d.ts}

@@ -1,6 +1,2 @@
-/*
- * Public API Surface of ngx-ratio-image
- */
-
 export * from './lib/ratio-image/ratio-image.component';
 export * from './lib/ratio-image.module';

package/.editorconfig

@@ -1,16 +0,0 @@
-# Editor configuration, see https://editorconfig.org
-root = true
-
-[*]
-charset = utf-8
-indent_style = tab
-indent_size = 4
-insert_final_newline = true
-trim_trailing_whitespace = true
-
-[*.ts]
-quote_type = single
-
-[*.md]
-max_line_length = off
-trim_trailing_whitespace = false

package/.eslintrc.json

@@ -1,38 +0,0 @@
-{
-	"root": true,
-	"ignorePatterns": ["projects/**/*"],
-	"overrides": [
-		{
-			"files": ["*.ts"],
-			"extends": [
-				"eslint:recommended",
-				"plugin:@typescript-eslint/recommended",
-				"plugin:@angular-eslint/recommended",
-				"plugin:@angular-eslint/template/process-inline-templates"
-			],
-			"rules": {
-				"@angular-eslint/directive-selector": [
-					"error",
-					{
-						"type": "attribute",
-						"prefix": "",
-						"style": "camelCase"
-					}
-				],
-				"@angular-eslint/component-selector": [
-					"error",
-					{
-						"type": "element",
-						"prefix": "",
-						"style": "kebab-case"
-					}
-				]
-			}
-		},
-		{
-			"files": ["*.html"],
-			"extends": ["plugin:@angular-eslint/template/recommended", "plugin:@angular-eslint/template/accessibility"],
-			"rules": {}
-		}
-	]
-}

package/.github/workflows/node.js.yml

@@ -1,38 +0,0 @@
-# This workflow will do a clean installation of node dependencies, cache/restore them, build the source code and run tests across different versions of node
-# For more information see: https://docs.github.com/en/actions/automating-builds-and-tests/building-and-testing-nodejs
-
-name: Node.js CI
-
-on:
-    workflow_dispatch:
-    push:
-        branches: ['main']
-    pull_request:
-        branches: ['main']
-
-env:
-    CI: true
-    DISPLAY: ':10.0'
-    CHROME_BIN: '/usr/bin/chromium'
-
-jobs:
-    build:
-        runs-on: ubuntu-latest
-        timeout-minutes: 5
-        strategy:
-            matrix:
-                node-version: [16.x, 18.x]
-                # See supported Node.js release schedule at https://nodejs.org/en/about/releases/
-
-        steps:
-            - uses: actions/checkout@v3
-            - name: Use Node.js ${{ matrix.node-version }}
-              uses: actions/setup-node@v3
-              with:
-                  node-version: ${{ matrix.node-version }}
-                  cache: 'npm'
-            - name: Setup Chrome
-              uses: browser-actions/setup-chrome@v1.2.0
-            - run: npm ci
-            - run: npm run build --if-present
-            - run: npm run test:ci

package/.github/workflows/npm-publish.yml

@@ -1,42 +0,0 @@
-# This workflow will run tests using node and then publish a package to GitHub Packages when a release is created
-# For more information see: https://docs.github.com/en/actions/publishing-packages/publishing-nodejs-packages
-
-name: Node.js Package
-
-on:
-    release:
-        types: [created]
-
-env:
-    CI: true
-    DISPLAY: ':10.0'
-    CHROME_BIN: '/usr/bin/chromium'
-
-jobs:
-    build:
-        runs-on: ubuntu-latest
-        timeout-minutes: 10
-        steps:
-            - uses: actions/checkout@v3
-            - uses: actions/setup-node@v3
-              with:
-                  node-version: 16
-            - run: npm ci
-            - run: npm run build
-            - name: Setup Chrome
-              uses: browser-actions/setup-chrome@v1.2.0
-            - run: npm run test:ci
-
-    publish-npm:
-        needs: build
-        runs-on: ubuntu-latest
-        steps:
-            - uses: actions/checkout@v3
-            - uses: actions/setup-node@v3
-              with:
-                  node-version: 16
-                  registry-url: https://registry.npmjs.org/
-            - run: npm ci
-            - run: npm publish
-              env:
-                  NODE_AUTH_TOKEN: ${{secrets.npm_token}}

package/.nvmrc

@@ -1 +0,0 @@
-18

package/.prettierignore

@@ -1,3 +0,0 @@
-.angular
-package.json
-dist

package/.run/lint.run.xml

@@ -1,12 +0,0 @@
-<component name="ProjectRunConfigurationManager">
-  <configuration default="false" name="lint" type="js.build_tools.npm" singleton="false" nameIsGenerated="true">
-    <package-json value="$PROJECT_DIR$/package.json" />
-    <command value="run" />
-    <scripts>
-      <script value="lint" />
-    </scripts>
-    <node-interpreter value="project" />
-    <envs />
-    <method v="2" />
-  </configuration>
-</component>

package/.run/test.run.xml

@@ -1,12 +0,0 @@
-<component name="ProjectRunConfigurationManager">
-  <configuration default="false" name="test" type="js.build_tools.npm" singleton="false" nameIsGenerated="true">
-    <package-json value="$PROJECT_DIR$/package.json" />
-    <command value="run" />
-    <scripts>
-      <script value="test" />
-    </scripts>
-    <node-interpreter value="project" />
-    <envs />
-    <method v="2" />
-  </configuration>
-</component>

package/.vscode/extensions.json

@@ -1,4 +0,0 @@
-{
-	// For more information, visit: https://go.microsoft.com/fwlink/?linkid=827846
-	"recommendations": ["angular.ng-template"]
-}