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

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

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