ngx-ratio-image 0.1.3 → 0.1.4

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

@@ -0,0 +1,77 @@
+import { Component, Input } from '@angular/core';
+import { DecimalPipe } from '@angular/common';
+import * as i0 from "@angular/core";
+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: "18.2.14", ngImport: i0, type: RatioImageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: RatioImageComponent, isStandalone: true, selector: "ngx-ratio-image", inputs: { src: "src", width: "width", height: "height", debug: "debug" }, usesOnChanges: true, ngImport: i0, template: "<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", dependencies: [{ kind: "pipe", type: DecimalPipe, name: "number" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: RatioImageComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ngx-ratio-image', standalone: true, imports: [DecimalPipe], template: "<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" }]
+        }], 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,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicmF0aW8taW1hZ2UuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvbmd4LXJhdGlvLWltYWdlL3NyYy9saWIvcmF0aW8taW1hZ2UvcmF0aW8taW1hZ2UuY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvbmd4LXJhdGlvLWltYWdlL3NyYy9saWIvcmF0aW8taW1hZ2UvcmF0aW8taW1hZ2UuY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFpQixTQUFTLEVBQUUsS0FBSyxFQUFhLE1BQU0sZUFBZSxDQUFDO0FBQzNFLE9BQU8sRUFBRSxXQUFXLEVBQUUsTUFBTSxpQkFBaUIsQ0FBQzs7QUFnQjlDLE1BQU0sT0FBTyxtQkFBbUI7SUFtQi9CO1FBbEJrQyxRQUFHLEdBQUcsRUFBRSxDQUFDO1FBQ1QsVUFBSyxHQUFHLENBQUMsQ0FBQztRQUNWLFdBQU0sR0FBRyxDQUFDLENBQUM7UUFDN0IsVUFBSyxHQUFHLEtBQUssQ0FBQztRQUV2QixlQUFVLEdBQUcsQ0FBQyxDQUFDO1FBQ2YsZ0JBQVcsR0FBRyxDQUFDLENBQUM7UUFFaEIsaUJBQVksR0FBRyxDQUFDLENBQUM7UUFDakIsa0JBQWEsR0FBRyxDQUFDLENBQUM7UUFFbEIsY0FBUyxHQUFHLENBQUMsQ0FBQztRQUNkLGFBQVEsR0FBRyxDQUFDLENBQUM7UUFDYixlQUFVLEdBQUcsQ0FBQyxDQUFDO1FBQ2YsYUFBUSxHQUFHLENBQUMsQ0FBQztRQUViLFVBQUssR0FBRyxDQUFDLENBQUM7UUFHaEIsSUFBSSxJQUFJLENBQUMsS0FBSztZQUFFLE9BQU8sQ0FBQyxHQUFHLENBQUMsYUFBYSxFQUFFLElBQUksQ0FBQyxHQUFHLENBQUMsQ0FBQztJQUN0RCxDQUFDO0lBRUQsZUFBZTtRQUNkLElBQUksSUFBSSxDQUFDLEtBQUs7WUFBRSxPQUFPLENBQUMsR0FBRyxDQUFDLGlCQUFpQixFQUFFLElBQUksQ0FBQyxHQUFHLEVBQUUsSUFBSSxDQUFDLEtBQUssRUFBRSxJQUFJLENBQUMsTUFBTSxDQUFDLENBQUM7SUFDbkYsQ0FBQztJQUVELFdBQVcsQ0FBQyxHQUFVO1FBQ3JCLElBQUksSUFBSSxDQUFDLEtBQUs7WUFBRSxPQUFPLENBQUMsR0FBRyxDQUFDLGNBQWMsRUFBRSxHQUFHLENBQUMsQ0FBQztRQUNqRCxJQUFJLEdBQUcsRUFBRSxDQUFDO1lBQ1QsSUFBSSxDQUFDLFlBQVksR0FBRyxHQUFHLENBQUMsWUFBWSxDQUFDO1lBQ3JDLElBQUksQ0FBQyxhQUFhLEdBQUcsR0FBRyxDQUFDLGFBQWEsQ0FBQztZQUN2QyxJQUFJLElBQUksQ0FBQyxLQUFLLEdBQUcsQ0FBQyxJQUFJLElBQUksQ0FBQyxNQUFNLEdBQUcsQ0FBQyxFQUFFLENBQUM7Z0JBQ3ZDLElBQUksQ0FBQyxTQUFTLEVBQUUsQ0FBQztZQUNsQixDQUFDO1FBQ0YsQ0FBQztJQUNGLENBQUM7SUFFRCxXQUFXO1FBQ1YsSUFBSSxDQUFDLFNBQVMsRUFBRSxDQUFDO0lBQ2xCLENBQUM7SUFFTyxTQUFTO1FBQ2hCLElBQUksQ0FBQyxVQUFVLEdBQUcsSUFBSSxDQUFDLFlBQVksR0FBRyxJQUFJLENBQUMsYUFBYSxDQUFDO1FBQ3pELElBQUksQ0FBQyxRQUFRLEdBQUcsSUFBSSxDQUFDLEtBQUssR0FBRyxJQUFJLENBQUMsTUFBTSxDQUFDO1FBRXpDLElBQUksSUFBSSxDQUFDLFFBQVEsR0FBRyxJQUFJLENBQUMsVUFBVSxFQUFFLENBQUM7WUFDckMsSUFBSSxDQUFDLEtBQUssR0FBRyxJQUFJLENBQUMsTUFBTSxHQUFHLElBQUksQ0FBQyxhQUFhLENBQUM7WUFDOUMsSUFBSSxDQUFDLFNBQVMsR0FBRyxDQUFDLElBQUksQ0FBQyxLQUFLLEdBQUcsSUFBSSxDQUFDLFlBQVksR0FBRyxJQUFJLENBQUMsS0FBSyxDQUFDLEdBQUcsQ0FBQyxDQUFDO1FBQ3BFLENBQUM7YUFBTSxJQUFJLElBQUksQ0FBQyxRQUFRLEdBQUcsSUFBSSxDQUFDLFVBQVUsRUFBRSxDQUFDO1lBQzVDLElBQUksQ0FBQyxLQUFLLEdBQUcsSUFBSSxDQUFDLEtBQUssR0FBRyxJQUFJLENBQUMsWUFBWSxDQUFDO1lBQzVDLElBQUksQ0FBQyxRQUFRLEdBQUcsQ0FBQyxJQUFJLENBQUMsTUFBTSxHQUFHLElBQUksQ0FBQyxhQUFhLEdBQUcsSUFBSSxDQUFDLEtBQUssQ0FBQyxHQUFHLENBQUMsQ0FBQztRQUNyRSxDQUFDO2FBQU0sQ0FBQztZQUNQLElBQUksQ0FBQyxLQUFLLEdBQUcsSUFBSSxDQUFDLEtBQUssR0FBRyxJQUFJLENBQUMsWUFBWSxDQUFDO1lBQzVDLElBQUksQ0FBQyxTQUFTLEdBQUcsQ0FBQyxDQUFDO1lBQ25CLElBQUksQ0FBQyxRQUFRLEdBQUcsQ0FBQyxDQUFDO1FBQ25CLENBQUM7UUFFRCxJQUFJLElBQUksQ0FBQyxLQUFLO1lBQUUsT0FBTyxDQUFDLEdBQUcsQ0FBQyxXQUFXLEVBQUUsSUFBSSxDQUFDLEdBQUcsRUFBRSxJQUFJLENBQUMsWUFBWSxHQUFHLEtBQUssR0FBRyxJQUFJLENBQUMsYUFBYSxDQUFDLENBQUM7SUFDcEcsQ0FBQzsrR0EzRFcsbUJBQW1CO21HQUFuQixtQkFBbUIsMEtDakJoQyx1dUNBNENBLHVDRDdCVyxXQUFXOzs0RkFFVCxtQkFBbUI7a0JBUC9CLFNBQVM7K0JBQ0MsaUJBQWlCLGNBR2YsSUFBSSxXQUNQLENBQUMsV0FBVyxDQUFDO3dEQUdZLEdBQUc7c0JBQXBDLEtBQUs7dUJBQUMsRUFBRSxRQUFRLEVBQUUsSUFBSSxFQUFFO2dCQUNTLEtBQUs7c0JBQXRDLEtBQUs7dUJBQUMsRUFBRSxRQUFRLEVBQUUsSUFBSSxFQUFFO2dCQUNTLE1BQU07c0JBQXZDLEtBQUs7dUJBQUMsRUFBRSxRQUFRLEVBQUUsSUFBSSxFQUFFO2dCQUNULEtBQUs7c0JBQXBCLEtBQUsiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBBZnRlclZpZXdJbml0LCBDb21wb25lbnQsIElucHV0LCBPbkNoYW5nZXMgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IERlY2ltYWxQaXBlIH0gZnJvbSAnQGFuZ3VsYXIvY29tbW9uJztcblxuaW50ZXJmYWNlIEltYWdlIHtcblx0Y2xpZW50V2lkdGg6IG51bWJlcjtcblx0Y2xpZW50SGVpZ2h0OiBudW1iZXI7XG5cdG5hdHVyYWxXaWR0aDogbnVtYmVyO1xuXHRuYXR1cmFsSGVpZ2h0OiBudW1iZXI7XG59XG5cbkBDb21wb25lbnQoe1xuXHRzZWxlY3RvcjogJ25neC1yYXRpby1pbWFnZScsXG5cdHRlbXBsYXRlVXJsOiAncmF0aW8taW1hZ2UuY29tcG9uZW50Lmh0bWwnLFxuXHRzdHlsZXM6IFtdLFxuXHRzdGFuZGFsb25lOiB0cnVlLFxuXHRpbXBvcnRzOiBbRGVjaW1hbFBpcGVdXG59KVxuZXhwb3J0IGNsYXNzIFJhdGlvSW1hZ2VDb21wb25lbnQgaW1wbGVtZW50cyBBZnRlclZpZXdJbml0LCBPbkNoYW5nZXMge1xuXHRASW5wdXQoeyByZXF1aXJlZDogdHJ1ZSB9KSBwdWJsaWMgc3JjID0gJyc7XG5cdEBJbnB1dCh7IHJlcXVpcmVkOiB0cnVlIH0pIHB1YmxpYyB3aWR0aCA9IDA7XG5cdEBJbnB1dCh7IHJlcXVpcmVkOiB0cnVlIH0pIHB1YmxpYyBoZWlnaHQgPSAwO1xuXHRASW5wdXQoKSBwdWJsaWMgZGVidWcgPSBmYWxzZTtcblxuXHRwdWJsaWMgaW1hZ2VXaWR0aCA9IDA7XG5cdHB1YmxpYyBpbWFnZUhlaWdodCA9IDA7XG5cblx0cHVibGljIG5hdHVyYWxXaWR0aCA9IDA7XG5cdHB1YmxpYyBuYXR1cmFsSGVpZ2h0ID0gMDtcblxuXHRwdWJsaWMgaW1hZ2VMZWZ0ID0gMDtcblx0cHVibGljIGltYWdlVG9wID0gMDtcblx0cHVibGljIHJhdGlvSW1hZ2UgPSAxO1xuXHRwdWJsaWMgcmF0aW9Cb3ggPSAxO1xuXG5cdHB1YmxpYyBzY2FsZSA9IDE7XG5cblx0Y29uc3RydWN0b3IoKSB7XG5cdFx0aWYgKHRoaXMuZGVidWcpIGNvbnNvbGUubG9nKCdjb25zdHJ1Y3RvcicsIHRoaXMuc3JjKTtcblx0fVxuXG5cdG5nQWZ0ZXJWaWV3SW5pdCgpIHtcblx0XHRpZiAodGhpcy5kZWJ1ZykgY29uc29sZS5sb2coJ25nQWZ0ZXJWaWV3SW5pdCcsIHRoaXMuc3JjLCB0aGlzLndpZHRoLCB0aGlzLmhlaWdodCk7XG5cdH1cblxuXHRvbkltYWdlTG9hZChpbWc6IEltYWdlKSB7XG5cdFx0aWYgKHRoaXMuZGVidWcpIGNvbnNvbGUubG9nKCdvbkltYWdlTG9hZCAnLCBpbWcpO1xuXHRcdGlmIChpbWcpIHtcblx0XHRcdHRoaXMubmF0dXJhbFdpZHRoID0gaW1nLm5hdHVyYWxXaWR0aDtcblx0XHRcdHRoaXMubmF0dXJhbEhlaWdodCA9IGltZy5uYXR1cmFsSGVpZ2h0O1xuXHRcdFx0aWYgKHRoaXMud2lkdGggPiAwICYmIHRoaXMuaGVpZ2h0ID4gMCkge1xuXHRcdFx0XHR0aGlzLmNhbGN1bGF0ZSgpO1xuXHRcdFx0fVxuXHRcdH1cblx0fVxuXG5cdG5nT25DaGFuZ2VzKCk6IHZvaWQge1xuXHRcdHRoaXMuY2FsY3VsYXRlKCk7XG5cdH1cblxuXHRwcml2YXRlIGNhbGN1bGF0ZSgpIHtcblx0XHR0aGlzLnJhdGlvSW1hZ2UgPSB0aGlzLm5hdHVyYWxXaWR0aCAvIHRoaXMubmF0dXJhbEhlaWdodDtcblx0XHR0aGlzLnJhdGlvQm94ID0gdGhpcy53aWR0aCAvIHRoaXMuaGVpZ2h0O1xuXG5cdFx0aWYgKHRoaXMucmF0aW9Cb3ggPiB0aGlzLnJhdGlvSW1hZ2UpIHtcblx0XHRcdHRoaXMuc2NhbGUgPSB0aGlzLmhlaWdodCAvIHRoaXMubmF0dXJhbEhlaWdodDtcblx0XHRcdHRoaXMuaW1hZ2VMZWZ0ID0gKHRoaXMud2lkdGggLSB0aGlzLm5hdHVyYWxXaWR0aCAqIHRoaXMuc2NhbGUpIC8gMjtcblx0XHR9IGVsc2UgaWYgKHRoaXMucmF0aW9Cb3ggPCB0aGlzLnJhdGlvSW1hZ2UpIHtcblx0XHRcdHRoaXMuc2NhbGUgPSB0aGlzLndpZHRoIC8gdGhpcy5uYXR1cmFsV2lkdGg7XG5cdFx0XHR0aGlzLmltYWdlVG9wID0gKHRoaXMuaGVpZ2h0IC0gdGhpcy5uYXR1cmFsSGVpZ2h0ICogdGhpcy5zY2FsZSkgLyAyO1xuXHRcdH0gZWxzZSB7XG5cdFx0XHR0aGlzLnNjYWxlID0gdGhpcy53aWR0aCAvIHRoaXMubmF0dXJhbFdpZHRoO1xuXHRcdFx0dGhpcy5pbWFnZUxlZnQgPSAwO1xuXHRcdFx0dGhpcy5pbWFnZVRvcCA9IDA7XG5cdFx0fVxuXG5cdFx0aWYgKHRoaXMuZGVidWcpIGNvbnNvbGUubG9nKCdjYWxjdWxhdGUnLCB0aGlzLnNyYywgdGhpcy5uYXR1cmFsV2lkdGggKyAnIHggJyArIHRoaXMubmF0dXJhbEhlaWdodCk7XG5cdH1cbn1cbiIsIjxkaXZcbiAgW3N0eWxlLnBvc2l0aW9uXT1cIidyZWxhdGl2ZSdcIlxuICBbc3R5bGUuei1pbmRleF09XCIyXCJcbiAgW3N0eWxlLmJvcmRlcl09XCJkZWJ1ZyA/ICcxcHggc29saWQgcmVkJyA6ICcnXCJcbiAgW3N0eWxlLndpZHRoXT1cIndpZHRoICsgJ3B4J1wiXG4gIFtzdHlsZS5oZWlnaHRdPVwiaGVpZ2h0ICsgJ3B4J1wiXG4gID5cbiAgPGltZ1xuICAgIGNsYXNzPVwiaW1nLWJhY2tncm91bmRcIlxuICAgICNpbWdcbiAgICBbc3JjXT1cInNyY1wiXG4gICAgW3N0eWxlLnBvc2l0aW9uXT1cIidhYnNvbHV0ZSdcIlxuICAgIFtzdHlsZS56LWluZGV4XT1cIjFcIlxuICAgIFtzdHlsZS5maWx0ZXJdPVwiJ2JsdXIoNXB4KSdcIlxuICAgIFtzdHlsZS5vcGFjaXR5XT1cIjAuNVwiXG4gICAgW3dpZHRoXT1cIndpZHRoXCJcbiAgICBbaGVpZ2h0XT1cImhlaWdodFwiXG4gICAgW3N0eWxlLm92ZXJmbG93XT1cIidoaWRkZW4nXCJcbiAgICAobG9hZCk9XCJvbkltYWdlTG9hZChpbWcpXCJcbiAgICBhbHQ9XCJcIlxuICAgIC8+XG4gIDxpbWdcbiAgICBjbGFzcz1cImltZy1tYWluXCJcbiAgICBbc3JjXT1cInNyY1wiXG4gICAgW3dpZHRoXT1cIm5hdHVyYWxXaWR0aCAqIHNjYWxlXCJcbiAgICBbaGVpZ2h0XT1cIm5hdHVyYWxIZWlnaHQgKiBzY2FsZVwiXG4gICAgW3N0eWxlLnBvc2l0aW9uXT1cIidhYnNvbHV0ZSdcIlxuICAgIFtzdHlsZS56LWluZGV4XT1cIjJcIlxuICAgIFtzdHlsZS5sZWZ0XT1cImltYWdlTGVmdCArICdweCdcIlxuICAgIFtzdHlsZS50b3BdPVwiaW1hZ2VUb3AgKyAncHgnXCJcbiAgICBhbHQ9XCJcIlxuICAgIC8+XG48L2Rpdj5cbkBpZiAoZGVidWcpIHtcbiAgPGRpdiBzdHlsZT1cIm1hcmdpbi10b3A6IDEwcHhcIj5cbiAgICA8ZGl2PkNvbnRhaW5lcjoge3sgd2lkdGggfX0geCB7eyBoZWlnaHQgfX08L2Rpdj5cbiAgICA8ZGl2Pk5hdHVyYWw6IHt7IG5hdHVyYWxXaWR0aCB9fSB4IHt7IG5hdHVyYWxIZWlnaHQgfX08L2Rpdj5cbiAgICA8ZGl2PlBvczoge3sgaW1hZ2VMZWZ0IH19ICwge3sgaW1hZ2VUb3AgfX08L2Rpdj5cbiAgICA8ZGl2PlNjYWxlOiB7eyBzY2FsZSB8IG51bWJlcjogJzAuMC0yJyB9fTwvZGl2PlxuICAgIDxkaXY+XG4gICAgICBSYXRpbyBCb3ggLCBJbWFnZToge3sgdGhpcy5yYXRpb0JveCB8IG51bWJlcjogJzAuMC0yJyB9fSA6IDEgLCB7eyB0aGlzLnJhdGlvSW1hZ2UgfCBudW1iZXI6ICcwLjAtMicgfX0gOiAxXG4gICAgPC9kaXY+XG4gIDwvZGl2PlxufVxuIl19

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,5 @@
+/*
+ * Public API Surface of ngx-ratio-image
+ */
+export * from './lib/ratio-image/ratio-image.component';
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicHVibGljLWFwaS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3Byb2plY3RzL25neC1yYXRpby1pbWFnZS9zcmMvcHVibGljLWFwaS50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQTs7R0FFRztBQUVILGNBQWMseUNBQXlDLENBQUMiLCJzb3VyY2VzQ29udGVudCI6WyIvKlxuICogUHVibGljIEFQSSBTdXJmYWNlIG9mIG5neC1yYXRpby1pbWFnZVxuICovXG5cbmV4cG9ydCAqIGZyb20gJy4vbGliL3JhdGlvLWltYWdlL3JhdGlvLWltYWdlLmNvbXBvbmVudCc7XG4iXX0=

package/fesm2022/ngx-ratio-image.mjs

@@ -0,0 +1,88 @@
+import * as i0 from '@angular/core';
+import { Input, Component } from '@angular/core';
+import { 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: "18.2.14", ngImport: i0, type: RatioImageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: RatioImageComponent, isStandalone: true, selector: "ngx-ratio-image", inputs: { src: "src", width: "width", height: "height", debug: "debug" }, usesOnChanges: true, ngImport: i0, template: "<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", dependencies: [{ kind: "pipe", type: DecimalPipe, name: "number" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: RatioImageComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ngx-ratio-image', standalone: true, imports: [DecimalPipe], template: "<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" }]
+        }], ctorParameters: () => [], propDecorators: { src: [{
+                type: Input,
+                args: [{ required: true }]
+            }], width: [{
+                type: Input,
+                args: [{ required: true }]
+            }], height: [{
+                type: Input,
+                args: [{ required: true }]
+            }], debug: [{
+                type: Input
+            }] } });
+
+/*
+ * Public API Surface of ngx-ratio-image
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { RatioImageComponent };
+//# 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/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\tstandalone: true,\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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"}

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, true, never>;
+}
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ngx-ratio-image",
-  "version": "0.1.3",
+  "version": "0.1.4",
   "author": {
     "name": "Gerd Siebert"
   },
@@ -30,5 +30,18 @@
   "bugs": {
     "url": "https://github.com/gerd-siebert/ngx-ratio-image/issues"
   },
-  "homepage": "https://github.com/gerd-siebert/ngx-ratio-image#readme"
+  "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/public-api.d.ts

@@ -0,0 +1 @@
+export * from './lib/ratio-image/ratio-image.component';

package/.eslintrc.json

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

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

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

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

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

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

@@ -1,10 +0,0 @@
-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/src/public-api.ts

@@ -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';

package/tsconfig.lib.json

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

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

@@ -1,9 +0,0 @@
-/* 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"]
-}