ngx-ratio-image 0.1.1 → 0.1.3

package/.eslintrc.json

@@ -0,0 +1,31 @@
+{
+	"extends": "../../.eslintrc.json",
+	"ignorePatterns": ["!**/*"],
+	"overrides": [
+		{
+			"files": ["*.ts"],
+			"rules": {
+				"@angular-eslint/directive-selector": [
+					"error",
+					{
+						"type": "attribute",
+						"prefix": "ngx",
+						"style": "camelCase"
+					}
+				],
+				"@angular-eslint/component-selector": [
+					"error",
+					{
+						"type": "element",
+						"prefix": "ngx",
+						"style": "kebab-case"
+					}
+				]
+			}
+		},
+		{
+			"files": ["*.html"],
+			"rules": {}
+		}
+	]
+}

package/ng-package.json

@@ -0,0 +1,7 @@
+{
+	"$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
+	"dest": "../../dist/ngx-ratio-image",
+	"lib": {
+		"entryFile": "src/public-api.ts"
+	}
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ngx-ratio-image",
-  "version": "0.1.1",
+  "version": "0.1.3",
   "author": {
     "name": "Gerd Siebert"
   },
@@ -8,16 +8,16 @@
     "Image",
     "Scaling",
     "Ratio",
-    "Angular 17",
     "Angular 18",
     "Angular 19",
-    "Angular 20"
+    "Angular 20",
+    "Angular 21"
   ],
   "description": "An Angular lib to show an image with variable ratio in container with a fixed ratio.",
   "license": "MIT",
   "peerDependencies": {
-    "@angular/common": "^17.0.0 || ^18.0.0 || ^19.0.0 || ^20.0.0",
-    "@angular/core": "^17.0.0 || ^18.0.0 || ^19.0.0 || ^20.0.0"
+    "@angular/common": "^18.0.0 || ^19.0.0 || ^20.0.0 || ^21.0.0",
+    "@angular/core": "^18.0.0 || ^19.0.0 || ^20.0.0 || ^21.0.0"
   },
   "dependencies": {
     "tslib": "^2.3.0"
@@ -30,18 +30,5 @@
   "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"
-    }
-  }
+  "homepage": "https://github.com/gerd-siebert/ngx-ratio-image#readme"
 }

package/src/lib/ratio-image/ratio-image.component.html

@@ -0,0 +1,44 @@
+<div
+  [style.position]="'relative'"
+  [style.z-index]="2"
+  [style.border]="debug ? '1px solid red' : ''"
+  [style.width]="width + 'px'"
+  [style.height]="height + 'px'"
+  >
+  <img
+    class="img-background"
+    #img
+    [src]="src"
+    [style.position]="'absolute'"
+    [style.z-index]="1"
+    [style.filter]="'blur(5px)'"
+    [style.opacity]="0.5"
+    [width]="width"
+    [height]="height"
+    [style.overflow]="'hidden'"
+    (load)="onImageLoad(img)"
+    alt=""
+    />
+  <img
+    class="img-main"
+    [src]="src"
+    [width]="naturalWidth * scale"
+    [height]="naturalHeight * scale"
+    [style.position]="'absolute'"
+    [style.z-index]="2"
+    [style.left]="imageLeft + 'px'"
+    [style.top]="imageTop + 'px'"
+    alt=""
+    />
+</div>
+@if (debug) {
+  <div style="margin-top: 10px">
+    <div>Container: {{ width }} x {{ height }}</div>
+    <div>Natural: {{ naturalWidth }} x {{ naturalHeight }}</div>
+    <div>Pos: {{ imageLeft }} , {{ imageTop }}</div>
+    <div>Scale: {{ scale | number: '0.0-2' }}</div>
+    <div>
+      Ratio Box , Image: {{ this.ratioBox | number: '0.0-2' }} : 1 , {{ this.ratioImage | number: '0.0-2' }} : 1
+    </div>
+  </div>
+}

package/src/lib/ratio-image/ratio-image.component.spec.ts

@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { RatioImageComponent } from './ratio-image.component';
+
+describe('RatioImageComponent', () => {
+	let component: RatioImageComponent;
+	let fixture: ComponentFixture<RatioImageComponent>;
+
+	beforeEach(() => {
+		TestBed.configureTestingModule({
+			declarations: [RatioImageComponent]
+		});
+		fixture = TestBed.createComponent(RatioImageComponent);
+		component = fixture.componentInstance;
+		fixture.detectChanges();
+	});
+
+	it('should create', () => {
+		expect(component).toBeTruthy();
+	});
+});

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

@@ -0,0 +1,75 @@
+import { AfterViewInit, Component, Input, OnChanges } from '@angular/core';
+
+interface Image {
+	clientWidth: number;
+	clientHeight: number;
+	naturalWidth: number;
+	naturalHeight: number;
+}
+
+@Component({
+	selector: 'ngx-ratio-image',
+	templateUrl: 'ratio-image.component.html',
+	styles: []
+})
+export class RatioImageComponent implements AfterViewInit, OnChanges {
+	@Input({ required: true }) public src = '';
+	@Input({ required: true }) public width = 0;
+	@Input({ required: true }) public height = 0;
+	@Input() public debug = false;
+
+	public imageWidth = 0;
+	public imageHeight = 0;
+
+	public naturalWidth = 0;
+	public naturalHeight = 0;
+
+	public imageLeft = 0;
+	public imageTop = 0;
+	public ratioImage = 1;
+	public ratioBox = 1;
+
+	public scale = 1;
+
+	constructor() {
+		if (this.debug) console.log('constructor', this.src);
+	}
+
+	ngAfterViewInit() {
+		if (this.debug) console.log('ngAfterViewInit', this.src, this.width, this.height);
+	}
+
+	onImageLoad(img: Image) {
+		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(): void {
+		this.calculate();
+	}
+
+	private 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);
+	}
+}

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

@@ -0,0 +1,10 @@
+import { NgModule } from '@angular/core';
+import { RatioImageComponent } from './ratio-image/ratio-image.component';
+import { DecimalPipe, NgIf } from '@angular/common';
+
+@NgModule({
+	declarations: [RatioImageComponent],
+	imports: [NgIf, DecimalPipe],
+	exports: [RatioImageComponent]
+})
+export class RatioImageModule {}

package/{public-api.d.ts → src/public-api.ts}

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

package/tsconfig.lib.json

@@ -0,0 +1,12 @@
+/* To learn more about this file see: https://angular.io/config/tsconfig. */
+{
+	"extends": "../../tsconfig.json",
+	"compilerOptions": {
+		"outDir": "../../out-tsc/lib",
+		"declaration": true,
+		"declarationMap": true,
+		"inlineSources": true,
+		"types": []
+	},
+	"exclude": ["**/*.spec.ts"]
+}

package/tsconfig.lib.prod.json

@@ -0,0 +1,10 @@
+/* To learn more about this file see: https://angular.io/config/tsconfig. */
+{
+	"extends": "./tsconfig.lib.json",
+	"compilerOptions": {
+		"declarationMap": false
+	},
+	"angularCompilerOptions": {
+		"compilationMode": "partial"
+	}
+}

package/tsconfig.spec.json

@@ -0,0 +1,9 @@
+/* To learn more about this file see: https://angular.io/config/tsconfig. */
+{
+	"extends": "../../tsconfig.json",
+	"compilerOptions": {
+		"outDir": "../../out-tsc/spec",
+		"types": ["jasmine"]
+	},
+	"include": ["**/*.spec.ts", "**/*.d.ts"]
+}

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

@@ -1,77 +0,0 @@
-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: "17.3.12", ngImport: i0, type: RatioImageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", 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: "17.3.12", 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: () => [], 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,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicmF0aW8taW1hZ2UuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvbmd4LXJhdGlvLWltYWdlL3NyYy9saWIvcmF0aW8taW1hZ2UvcmF0aW8taW1hZ2UuY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvbmd4LXJhdGlvLWltYWdlL3NyYy9saWIvcmF0aW8taW1hZ2UvcmF0aW8taW1hZ2UuY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFpQixTQUFTLEVBQUUsS0FBSyxFQUFhLE1BQU0sZUFBZSxDQUFDOzs7QUFjM0UsTUFBTSxPQUFPLG1CQUFtQjtJQW1CL0I7UUFsQmtDLFFBQUcsR0FBRyxFQUFFLENBQUM7UUFDVCxVQUFLLEdBQUcsQ0FBQyxDQUFDO1FBQ1YsV0FBTSxHQUFHLENBQUMsQ0FBQztRQUM3QixVQUFLLEdBQUcsS0FBSyxDQUFDO1FBRXZCLGVBQVUsR0FBRyxDQUFDLENBQUM7UUFDZixnQkFBVyxHQUFHLENBQUMsQ0FBQztRQUVoQixpQkFBWSxHQUFHLENBQUMsQ0FBQztRQUNqQixrQkFBYSxHQUFHLENBQUMsQ0FBQztRQUVsQixjQUFTLEdBQUcsQ0FBQyxDQUFDO1FBQ2QsYUFBUSxHQUFHLENBQUMsQ0FBQztRQUNiLGVBQVUsR0FBRyxDQUFDLENBQUM7UUFDZixhQUFRLEdBQUcsQ0FBQyxDQUFDO1FBRWIsVUFBSyxHQUFHLENBQUMsQ0FBQztRQUdoQixJQUFJLElBQUksQ0FBQyxLQUFLO1lBQUUsT0FBTyxDQUFDLEdBQUcsQ0FBQyxhQUFhLEVBQUUsSUFBSSxDQUFDLEdBQUcsQ0FBQyxDQUFDO0lBQ3RELENBQUM7SUFFRCxlQUFlO1FBQ2QsSUFBSSxJQUFJLENBQUMsS0FBSztZQUFFLE9BQU8sQ0FBQyxHQUFHLENBQUMsaUJBQWlCLEVBQUUsSUFBSSxDQUFDLEdBQUcsRUFBRSxJQUFJLENBQUMsS0FBSyxFQUFFLElBQUksQ0FBQyxNQUFNLENBQUMsQ0FBQztJQUNuRixDQUFDO0lBRUQsV0FBVyxDQUFDLEdBQVU7UUFDckIsSUFBSSxJQUFJLENBQUMsS0FBSztZQUFFLE9BQU8sQ0FBQyxHQUFHLENBQUMsY0FBYyxFQUFFLEdBQUcsQ0FBQyxDQUFDO1FBQ2pELElBQUksR0FBRyxFQUFFLENBQUM7WUFDVCxJQUFJLENBQUMsWUFBWSxHQUFHLEdBQUcsQ0FBQyxZQUFZLENBQUM7WUFDckMsSUFBSSxDQUFDLGFBQWEsR0FBRyxHQUFHLENBQUMsYUFBYSxDQUFDO1lBQ3ZDLElBQUksSUFBSSxDQUFDLEtBQUssR0FBRyxDQUFDLElBQUksSUFBSSxDQUFDLE1BQU0sR0FBRyxDQUFDLEVBQUUsQ0FBQztnQkFDdkMsSUFBSSxDQUFDLFNBQVMsRUFBRSxDQUFDO1lBQ2xCLENBQUM7UUFDRixDQUFDO0lBQ0YsQ0FBQztJQUVELFdBQVc7UUFDVixJQUFJLENBQUMsU0FBUyxFQUFFLENBQUM7SUFDbEIsQ0FBQztJQUVPLFNBQVM7UUFDaEIsSUFBSSxDQUFDLFVBQVUsR0FBRyxJQUFJLENBQUMsWUFBWSxHQUFHLElBQUksQ0FBQyxhQUFhLENBQUM7UUFDekQsSUFBSSxDQUFDLFFBQVEsR0FBRyxJQUFJLENBQUMsS0FBSyxHQUFHLElBQUksQ0FBQyxNQUFNLENBQUM7UUFFekMsSUFBSSxJQUFJLENBQUMsUUFBUSxHQUFHLElBQUksQ0FBQyxVQUFVLEVBQUUsQ0FBQztZQUNyQyxJQUFJLENBQUMsS0FBSyxHQUFHLElBQUksQ0FBQyxNQUFNLEdBQUcsSUFBSSxDQUFDLGFBQWEsQ0FBQztZQUM5QyxJQUFJLENBQUMsU0FBUyxHQUFHLENBQUMsSUFBSSxDQUFDLEtBQUssR0FBRyxJQUFJLENBQUMsWUFBWSxHQUFHLElBQUksQ0FBQyxLQUFLLENBQUMsR0FBRyxDQUFDLENBQUM7UUFDcEUsQ0FBQzthQUFNLElBQUksSUFBSSxDQUFDLFFBQVEsR0FBRyxJQUFJLENBQUMsVUFBVSxFQUFFLENBQUM7WUFDNUMsSUFBSSxDQUFDLEtBQUssR0FBRyxJQUFJLENBQUMsS0FBSyxHQUFHLElBQUksQ0FBQyxZQUFZLENBQUM7WUFDNUMsSUFBSSxDQUFDLFFBQVEsR0FBRyxDQUFDLElBQUksQ0FBQyxNQUFNLEdBQUcsSUFBSSxDQUFDLGFBQWEsR0FBRyxJQUFJLENBQUMsS0FBSyxDQUFDLEdBQUcsQ0FBQyxDQUFDO1FBQ3JFLENBQUM7YUFBTSxDQUFDO1lBQ1AsSUFBSSxDQUFDLEtBQUssR0FBRyxJQUFJLENBQUMsS0FBSyxHQUFHLElBQUksQ0FBQyxZQUFZLENBQUM7WUFDNUMsSUFBSSxDQUFDLFNBQVMsR0FBRyxDQUFDLENBQUM7WUFDbkIsSUFBSSxDQUFDLFFBQVEsR0FBRyxDQUFDLENBQUM7UUFDbkIsQ0FBQztRQUVELElBQUksSUFBSSxDQUFDLEtBQUs7WUFBRSxPQUFPLENBQUMsR0FBRyxDQUFDLFdBQVcsRUFBRSxJQUFJLENBQUMsR0FBRyxFQUFFLElBQUksQ0FBQyxZQUFZLEdBQUcsS0FBSyxHQUFHLElBQUksQ0FBQyxhQUFhLENBQUMsQ0FBQztJQUNwRyxDQUFDOytHQTNEVyxtQkFBbUI7bUdBQW5CLG1CQUFtQixzSkNkaEMsNnNDQTBDQTs7NEZENUJhLG1CQUFtQjtrQkFML0IsU0FBUzsrQkFDQyxpQkFBaUI7d0RBS08sR0FBRztzQkFBcEMsS0FBSzt1QkFBQyxFQUFFLFFBQVEsRUFBRSxJQUFJLEVBQUU7Z0JBQ1MsS0FBSztzQkFBdEMsS0FBSzt1QkFBQyxFQUFFLFFBQVEsRUFBRSxJQUFJLEVBQUU7Z0JBQ1MsTUFBTTtzQkFBdkMsS0FBSzt1QkFBQyxFQUFFLFFBQVEsRUFBRSxJQUFJLEVBQUU7Z0JBQ1QsS0FBSztzQkFBcEIsS0FBSyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IEFmdGVyVmlld0luaXQsIENvbXBvbmVudCwgSW5wdXQsIE9uQ2hhbmdlcyB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuXG5pbnRlcmZhY2UgSW1hZ2Uge1xuXHRjbGllbnRXaWR0aDogbnVtYmVyO1xuXHRjbGllbnRIZWlnaHQ6IG51bWJlcjtcblx0bmF0dXJhbFdpZHRoOiBudW1iZXI7XG5cdG5hdHVyYWxIZWlnaHQ6IG51bWJlcjtcbn1cblxuQENvbXBvbmVudCh7XG5cdHNlbGVjdG9yOiAnbmd4LXJhdGlvLWltYWdlJyxcblx0dGVtcGxhdGVVcmw6ICdyYXRpby1pbWFnZS5jb21wb25lbnQuaHRtbCcsXG5cdHN0eWxlczogW11cbn0pXG5leHBvcnQgY2xhc3MgUmF0aW9JbWFnZUNvbXBvbmVudCBpbXBsZW1lbnRzIEFmdGVyVmlld0luaXQsIE9uQ2hhbmdlcyB7XG5cdEBJbnB1dCh7IHJlcXVpcmVkOiB0cnVlIH0pIHB1YmxpYyBzcmMgPSAnJztcblx0QElucHV0KHsgcmVxdWlyZWQ6IHRydWUgfSkgcHVibGljIHdpZHRoID0gMDtcblx0QElucHV0KHsgcmVxdWlyZWQ6IHRydWUgfSkgcHVibGljIGhlaWdodCA9IDA7XG5cdEBJbnB1dCgpIHB1YmxpYyBkZWJ1ZyA9IGZhbHNlO1xuXG5cdHB1YmxpYyBpbWFnZVdpZHRoID0gMDtcblx0cHVibGljIGltYWdlSGVpZ2h0ID0gMDtcblxuXHRwdWJsaWMgbmF0dXJhbFdpZHRoID0gMDtcblx0cHVibGljIG5hdHVyYWxIZWlnaHQgPSAwO1xuXG5cdHB1YmxpYyBpbWFnZUxlZnQgPSAwO1xuXHRwdWJsaWMgaW1hZ2VUb3AgPSAwO1xuXHRwdWJsaWMgcmF0aW9JbWFnZSA9IDE7XG5cdHB1YmxpYyByYXRpb0JveCA9IDE7XG5cblx0cHVibGljIHNjYWxlID0gMTtcblxuXHRjb25zdHJ1Y3RvcigpIHtcblx0XHRpZiAodGhpcy5kZWJ1ZykgY29uc29sZS5sb2coJ2NvbnN0cnVjdG9yJywgdGhpcy5zcmMpO1xuXHR9XG5cblx0bmdBZnRlclZpZXdJbml0KCkge1xuXHRcdGlmICh0aGlzLmRlYnVnKSBjb25zb2xlLmxvZygnbmdBZnRlclZpZXdJbml0JywgdGhpcy5zcmMsIHRoaXMud2lkdGgsIHRoaXMuaGVpZ2h0KTtcblx0fVxuXG5cdG9uSW1hZ2VMb2FkKGltZzogSW1hZ2UpIHtcblx0XHRpZiAodGhpcy5kZWJ1ZykgY29uc29sZS5sb2coJ29uSW1hZ2VMb2FkICcsIGltZyk7XG5cdFx0aWYgKGltZykge1xuXHRcdFx0dGhpcy5uYXR1cmFsV2lkdGggPSBpbWcubmF0dXJhbFdpZHRoO1xuXHRcdFx0dGhpcy5uYXR1cmFsSGVpZ2h0ID0gaW1nLm5hdHVyYWxIZWlnaHQ7XG5cdFx0XHRpZiAodGhpcy53aWR0aCA+IDAgJiYgdGhpcy5oZWlnaHQgPiAwKSB7XG5cdFx0XHRcdHRoaXMuY2FsY3VsYXRlKCk7XG5cdFx0XHR9XG5cdFx0fVxuXHR9XG5cblx0bmdPbkNoYW5nZXMoKTogdm9pZCB7XG5cdFx0dGhpcy5jYWxjdWxhdGUoKTtcblx0fVxuXG5cdHByaXZhdGUgY2FsY3VsYXRlKCkge1xuXHRcdHRoaXMucmF0aW9JbWFnZSA9IHRoaXMubmF0dXJhbFdpZHRoIC8gdGhpcy5uYXR1cmFsSGVpZ2h0O1xuXHRcdHRoaXMucmF0aW9Cb3ggPSB0aGlzLndpZHRoIC8gdGhpcy5oZWlnaHQ7XG5cblx0XHRpZiAodGhpcy5yYXRpb0JveCA+IHRoaXMucmF0aW9JbWFnZSkge1xuXHRcdFx0dGhpcy5zY2FsZSA9IHRoaXMuaGVpZ2h0IC8gdGhpcy5uYXR1cmFsSGVpZ2h0O1xuXHRcdFx0dGhpcy5pbWFnZUxlZnQgPSAodGhpcy53aWR0aCAtIHRoaXMubmF0dXJhbFdpZHRoICogdGhpcy5zY2FsZSkgLyAyO1xuXHRcdH0gZWxzZSBpZiAodGhpcy5yYXRpb0JveCA8IHRoaXMucmF0aW9JbWFnZSkge1xuXHRcdFx0dGhpcy5zY2FsZSA9IHRoaXMud2lkdGggLyB0aGlzLm5hdHVyYWxXaWR0aDtcblx0XHRcdHRoaXMuaW1hZ2VUb3AgPSAodGhpcy5oZWlnaHQgLSB0aGlzLm5hdHVyYWxIZWlnaHQgKiB0aGlzLnNjYWxlKSAvIDI7XG5cdFx0fSBlbHNlIHtcblx0XHRcdHRoaXMuc2NhbGUgPSB0aGlzLndpZHRoIC8gdGhpcy5uYXR1cmFsV2lkdGg7XG5cdFx0XHR0aGlzLmltYWdlTGVmdCA9IDA7XG5cdFx0XHR0aGlzLmltYWdlVG9wID0gMDtcblx0XHR9XG5cblx0XHRpZiAodGhpcy5kZWJ1ZykgY29uc29sZS5sb2coJ2NhbGN1bGF0ZScsIHRoaXMuc3JjLCB0aGlzLm5hdHVyYWxXaWR0aCArICcgeCAnICsgdGhpcy5uYXR1cmFsSGVpZ2h0KTtcblx0fVxufVxuIiwiPGRpdlxuXHRbc3R5bGUucG9zaXRpb25dPVwiJ3JlbGF0aXZlJ1wiXG5cdFtzdHlsZS56LWluZGV4XT1cIjJcIlxuXHRbc3R5bGUuYm9yZGVyXT1cImRlYnVnID8gJzFweCBzb2xpZCByZWQnIDogJydcIlxuXHRbc3R5bGUud2lkdGhdPVwid2lkdGggKyAncHgnXCJcblx0W3N0eWxlLmhlaWdodF09XCJoZWlnaHQgKyAncHgnXCJcbj5cblx0PGltZ1xuXHRcdGNsYXNzPVwiaW1nLWJhY2tncm91bmRcIlxuXHRcdCNpbWdcblx0XHRbc3JjXT1cInNyY1wiXG5cdFx0W3N0eWxlLnBvc2l0aW9uXT1cIidhYnNvbHV0ZSdcIlxuXHRcdFtzdHlsZS56LWluZGV4XT1cIjFcIlxuXHRcdFtzdHlsZS5maWx0ZXJdPVwiJ2JsdXIoNXB4KSdcIlxuXHRcdFtzdHlsZS5vcGFjaXR5XT1cIjAuNVwiXG5cdFx0W3dpZHRoXT1cIndpZHRoXCJcblx0XHRbaGVpZ2h0XT1cImhlaWdodFwiXG5cdFx0W3N0eWxlLm92ZXJmbG93XT1cIidoaWRkZW4nXCJcblx0XHQobG9hZCk9XCJvbkltYWdlTG9hZChpbWcpXCJcblx0XHRhbHQ9XCJcIlxuXHQvPlxuXHQ8aW1nXG5cdFx0Y2xhc3M9XCJpbWctbWFpblwiXG5cdFx0W3NyY109XCJzcmNcIlxuXHRcdFt3aWR0aF09XCJuYXR1cmFsV2lkdGggKiBzY2FsZVwiXG5cdFx0W2hlaWdodF09XCJuYXR1cmFsSGVpZ2h0ICogc2NhbGVcIlxuXHRcdFtzdHlsZS5wb3NpdGlvbl09XCInYWJzb2x1dGUnXCJcblx0XHRbc3R5bGUuei1pbmRleF09XCIyXCJcblx0XHRbc3R5bGUubGVmdF09XCJpbWFnZUxlZnQgKyAncHgnXCJcblx0XHRbc3R5bGUudG9wXT1cImltYWdlVG9wICsgJ3B4J1wiXG5cdFx0YWx0PVwiXCJcblx0Lz5cbjwvZGl2PlxuPGRpdiAqbmdJZj1cImRlYnVnXCIgc3R5bGU9XCJtYXJnaW4tdG9wOiAxMHB4XCI+XG5cdDxkaXY+Q29udGFpbmVyOiB7eyB3aWR0aCB9fSB4IHt7IGhlaWdodCB9fTwvZGl2PlxuXHQ8ZGl2Pk5hdHVyYWw6IHt7IG5hdHVyYWxXaWR0aCB9fSB4IHt7IG5hdHVyYWxIZWlnaHQgfX08L2Rpdj5cblx0PGRpdj5Qb3M6IHt7IGltYWdlTGVmdCB9fSAsIHt7IGltYWdlVG9wIH19PC9kaXY+XG5cdDxkaXY+U2NhbGU6IHt7IHNjYWxlIHwgbnVtYmVyOiAnMC4wLTInIH19PC9kaXY+XG5cdDxkaXY+XG5cdFx0UmF0aW8gQm94ICwgSW1hZ2U6IHt7IHRoaXMucmF0aW9Cb3ggfCBudW1iZXI6ICcwLjAtMicgfX0gOiAxICwge3sgdGhpcy5yYXRpb0ltYWdlIHwgbnVtYmVyOiAnMC4wLTInIH19IDogMVxuXHQ8L2Rpdj5cbjwvZGl2PlxuIl19

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

@@ -1,18 +0,0 @@
-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: "17.3.12", ngImport: i0, type: RatioImageModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.12", ngImport: i0, type: RatioImageModule, declarations: [RatioImageComponent], imports: [NgIf, DecimalPipe], exports: [RatioImageComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: RatioImageModule }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: RatioImageModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: [RatioImageComponent],
-                    imports: [NgIf, DecimalPipe],
-                    exports: [RatioImageComponent]
-                }]
-        }] });
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicmF0aW8taW1hZ2UubW9kdWxlLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vcHJvamVjdHMvbmd4LXJhdGlvLWltYWdlL3NyYy9saWIvcmF0aW8taW1hZ2UubW9kdWxlLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxRQUFRLEVBQUUsTUFBTSxlQUFlLENBQUM7QUFDekMsT0FBTyxFQUFFLG1CQUFtQixFQUFFLE1BQU0scUNBQXFDLENBQUM7QUFDMUUsT0FBTyxFQUFFLFdBQVcsRUFBRSxJQUFJLEVBQUUsTUFBTSxpQkFBaUIsQ0FBQzs7QUFPcEQsTUFBTSxPQUFPLGdCQUFnQjsrR0FBaEIsZ0JBQWdCO2dIQUFoQixnQkFBZ0IsaUJBSmIsbUJBQW1CLGFBQ3hCLElBQUksRUFBRSxXQUFXLGFBQ2pCLG1CQUFtQjtnSEFFakIsZ0JBQWdCOzs0RkFBaEIsZ0JBQWdCO2tCQUw1QixRQUFRO21CQUFDO29CQUNULFlBQVksRUFBRSxDQUFDLG1CQUFtQixDQUFDO29CQUNuQyxPQUFPLEVBQUUsQ0FBQyxJQUFJLEVBQUUsV0FBVyxDQUFDO29CQUM1QixPQUFPLEVBQUUsQ0FBQyxtQkFBbUIsQ0FBQztpQkFDOUIiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBOZ01vZHVsZSB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgUmF0aW9JbWFnZUNvbXBvbmVudCB9IGZyb20gJy4vcmF0aW8taW1hZ2UvcmF0aW8taW1hZ2UuY29tcG9uZW50JztcbmltcG9ydCB7IERlY2ltYWxQaXBlLCBOZ0lmIH0gZnJvbSAnQGFuZ3VsYXIvY29tbW9uJztcblxuQE5nTW9kdWxlKHtcblx0ZGVjbGFyYXRpb25zOiBbUmF0aW9JbWFnZUNvbXBvbmVudF0sXG5cdGltcG9ydHM6IFtOZ0lmLCBEZWNpbWFsUGlwZV0sXG5cdGV4cG9ydHM6IFtSYXRpb0ltYWdlQ29tcG9uZW50XVxufSlcbmV4cG9ydCBjbGFzcyBSYXRpb0ltYWdlTW9kdWxlIHt9XG4iXX0=

package/esm2022/ngx-ratio-image.mjs

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

package/esm2022/public-api.mjs

@@ -1,6 +0,0 @@
-/*
- * 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

@@ -1,103 +0,0 @@
-import * as i0 from '@angular/core';
-import { Input, Component, 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: "17.3.12", ngImport: i0, type: RatioImageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", 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: "17.3.12", 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: () => [], 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: "17.3.12", ngImport: i0, type: RatioImageModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.12", ngImport: i0, type: RatioImageModule, declarations: [RatioImageComponent], imports: [NgIf, DecimalPipe], exports: [RatioImageComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: RatioImageModule }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", 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

@@ -1 +0,0 @@
-{"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":";;;;;MAca,mBAAmB,CAAA;AAmB/B,IAAA,WAAA,GAAA;QAlBkC,IAAA,CAAA,GAAG,GAAG,EAAE;QACR,IAAA,CAAA,KAAK,GAAG,CAAC;QACT,IAAA,CAAA,MAAM,GAAG,CAAC;QAC5B,IAAA,CAAA,KAAK,GAAG,KAAK;QAEtB,IAAA,CAAA,UAAU,GAAG,CAAC;QACd,IAAA,CAAA,WAAW,GAAG,CAAC;QAEf,IAAA,CAAA,YAAY,GAAG,CAAC;QAChB,IAAA,CAAA,aAAa,GAAG,CAAC;QAEjB,IAAA,CAAA,SAAS,GAAG,CAAC;QACb,IAAA,CAAA,QAAQ,GAAG,CAAC;QACZ,IAAA,CAAA,UAAU,GAAG,CAAC;QACd,IAAA,CAAA,QAAQ,GAAG,CAAC;QAEZ,IAAA,CAAA,KAAK,GAAG,CAAC;QAGf,IAAI,IAAI,CAAC,KAAK;YAAE,OAAO,CAAC,GAAG,CAAC,aAAa,EAAE,IAAI,CAAC,GAAG,CAAC;IACrD;IAEA,eAAe,GAAA;QACd,IAAI,IAAI,CAAC,KAAK;AAAE,YAAA,OAAO,CAAC,GAAG,CAAC,iBAAiB,EAAE,IAAI,CAAC,GAAG,EAAE,IAAI,CAAC,KAAK,EAAE,IAAI,CAAC,MAAM,CAAC;IAClF;AAEA,IAAA,WAAW,CAAC,GAAU,EAAA;QACrB,IAAI,IAAI,CAAC,KAAK;AAAE,YAAA,OAAO,CAAC,GAAG,CAAC,cAAc,EAAE,GAAG,CAAC;QAChD,IAAI,GAAG,EAAE;AACR,YAAA,IAAI,CAAC,YAAY,GAAG,GAAG,CAAC,YAAY;AACpC,YAAA,IAAI,CAAC,aAAa,GAAG,GAAG,CAAC,aAAa;AACtC,YAAA,IAAI,IAAI,CAAC,KAAK,GAAG,CAAC,IAAI,IAAI,CAAC,MAAM,GAAG,CAAC,EAAE;gBACtC,IAAI,CAAC,SAAS,EAAE;YACjB;QACD;IACD;IAEA,WAAW,GAAA;QACV,IAAI,CAAC,SAAS,EAAE;IACjB;IAEQ,SAAS,GAAA;QAChB,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,aAAa;QACxD,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,MAAM;QAExC,IAAI,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,UAAU,EAAE;YACpC,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,aAAa;AAC7C,YAAA,IAAI,CAAC,SAAS,GAAG,CAAC,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,KAAK,IAAI,CAAC;QACnE;aAAO,IAAI,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,UAAU,EAAE;YAC3C,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,YAAY;AAC3C,YAAA,IAAI,CAAC,QAAQ,GAAG,CAAC,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,KAAK,IAAI,CAAC;QACpE;aAAO;YACN,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,YAAY;AAC3C,YAAA,IAAI,CAAC,SAAS,GAAG,CAAC;AAClB,YAAA,IAAI,CAAC,QAAQ,GAAG,CAAC;QAClB;QAEA,IAAI,IAAI,CAAC,KAAK;AAAE,YAAA,OAAO,CAAC,GAAG,CAAC,WAAW,EAAE,IAAI,CAAC,GAAG,EAAE,IAAI,CAAC,YAAY,GAAG,KAAK,GAAG,IAAI,CAAC,aAAa,CAAC;IACnG;+GA3DY,mBAAmB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAAnB,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,IAAA,EAAA,mBAAmB,sJCdhC,6sCA0CA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,IAAA,EAAA,QAAA,EAAA,QAAA,EAAA,MAAA,EAAA,CAAA,MAAA,EAAA,UAAA,EAAA,UAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,MAAA,EAAA,IAAA,EAAA,EAAA,CAAA,WAAA,EAAA,IAAA,EAAA,QAAA,EAAA,CAAA,EAAA,CAAA,CAAA;;4FD5Ba,mBAAmB,EAAA,UAAA,EAAA,CAAA;kBAL/B,SAAS;+BACC,iBAAiB,EAAA,QAAA,EAAA,6sCAAA,EAAA;wDAKO,GAAG,EAAA,CAAA;sBAApC,KAAK;uBAAC,EAAE,QAAQ,EAAE,IAAI,EAAE;gBACS,KAAK,EAAA,CAAA;sBAAtC,KAAK;uBAAC,EAAE,QAAQ,EAAE,IAAI,EAAE;gBACS,MAAM,EAAA,CAAA;sBAAvC,KAAK;uBAAC,EAAE,QAAQ,EAAE,IAAI,EAAE;gBACT,KAAK,EAAA,CAAA;sBAApB;;;METW,gBAAgB,CAAA;+GAAhB,gBAAgB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,QAAA,EAAA,CAAA,CAAA;AAAhB,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,mBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,gBAAgB,iBAJb,mBAAmB,CAAA,EAAA,OAAA,EAAA,CACxB,IAAI,EAAE,WAAW,aACjB,mBAAmB,CAAA,EAAA,CAAA,CAAA;gHAEjB,gBAAgB,EAAA,CAAA,CAAA;;4FAAhB,gBAAgB,EAAA,UAAA,EAAA,CAAA;kBAL5B,QAAQ;AAAC,YAAA,IAAA,EAAA,CAAA;oBACT,YAAY,EAAE,CAAC,mBAAmB,CAAC;AACnC,oBAAA,OAAO,EAAE,CAAC,IAAI,EAAE,WAAW,CAAC;oBAC5B,OAAO,EAAE,CAAC,mBAAmB;AAC7B,iBAAA;;;ACRD;;AAEG;;ACFH;;AAEG;;;;"}

package/index.d.ts

@@ -1,5 +0,0 @@
-/**
- * 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

@@ -1,31 +0,0 @@
-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

@@ -1,8 +0,0 @@
-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>;
-}