angular-aspect-ratio-container 18.0.4

package/README.md

@@ -0,0 +1,13 @@
+# Angular Aspect Ratio Container
+
+Library to fix the aspect ratio of a container.
+
+## Example
+
+```html
+<main style="width: 600px; height: 600px; display: flex; align-items: center">
+  <div [ngAspectRatio]="16 / 9" style="background-color: red">Hello</div>
+</main>
+```
+
+![Overflow indicator example](./example-aspect-ratio.png)

package/esm2022/angular-aspect-ratio-container.mjs

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

package/esm2022/index.mjs

@@ -0,0 +1,2 @@
+export * from './lib/aspect-ratio-container';
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5kZXguanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi9saWJzL2FuZ3VsYXItYXNwZWN0LXJhdGlvLWNvbnRhaW5lci9zcmMvaW5kZXgudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsY0FBYyw4QkFBOEIsQ0FBQyIsInNvdXJjZXNDb250ZW50IjpbImV4cG9ydCAqIGZyb20gJy4vbGliL2FzcGVjdC1yYXRpby1jb250YWluZXInO1xuIl19

package/esm2022/lib/aspect-ratio-container/index.mjs

@@ -0,0 +1,2 @@
+export { NgAspectRatioDirective } from './ng-aspect-ratio.directive';
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5kZXguanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi9saWJzL2FuZ3VsYXItYXNwZWN0LXJhdGlvLWNvbnRhaW5lci9zcmMvbGliL2FzcGVjdC1yYXRpby1jb250YWluZXIvaW5kZXgudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLHNCQUFzQixFQUFFLE1BQU0sNkJBQTZCLENBQUMiLCJzb3VyY2VzQ29udGVudCI6WyJleHBvcnQgeyBOZ0FzcGVjdFJhdGlvRGlyZWN0aXZlIH0gZnJvbSAnLi9uZy1hc3BlY3QtcmF0aW8uZGlyZWN0aXZlJztcbiJdfQ==

package/esm2022/lib/aspect-ratio-container/ng-aspect-ratio.directive.mjs

@@ -0,0 +1,74 @@
+import { ElementRef, Renderer2, Directive, input, inject } from '@angular/core';
+import * as i0 from "@angular/core";
+export class NgAspectRatioDirective {
+    renderer = inject(Renderer2);
+    hostElem = inject(ElementRef);
+    observer;
+    targetRatio = input.required({ alias: 'ngAspectRatio' });
+    sizingMode = input('match-parent');
+    constructor() {
+        this.observer = new ResizeObserver(() => {
+            this.calculateAndSetAspect();
+        });
+    }
+    ngAfterViewInit() {
+        this.observer.observe(this.hostElem.nativeElement.parentElement);
+    }
+    ngOnDestroy() {
+        this.observer.disconnect();
+    }
+    calculateAndSetAspect() {
+        this.renderer.removeStyle(this.hostElem.nativeElement, 'width');
+        this.renderer.removeStyle(this.hostElem.nativeElement, 'height');
+        let targetWidth;
+        let targetHeight;
+        if (this.sizingMode() === 'match-parent') {
+            const hostWidth = this.hostElem.nativeElement.parentElement.offsetWidth;
+            const hostHeight = this.hostElem.nativeElement.parentElement.offsetHeight;
+            const hostAspectRatio = hostWidth / hostHeight;
+            if (hostAspectRatio >= this.targetRatio()) {
+                // use full height as base
+                targetHeight = hostHeight;
+                targetWidth = targetHeight * this.targetRatio();
+            }
+            else {
+                // use full width as base
+                targetWidth = hostWidth;
+                targetHeight = targetWidth * (1 / this.targetRatio());
+            }
+        }
+        else {
+            // Add +1 to the dimensions because decimals get rounded
+            const contentWidth = this.hostElem.nativeElement.offsetWidth + 1;
+            const contentHeight = this.hostElem.nativeElement.offsetHeight + 1;
+            const currentRatio = contentWidth / contentHeight;
+            if (currentRatio >= this.targetRatio()) {
+                targetWidth = contentWidth;
+                targetHeight = targetWidth * (1 / this.targetRatio());
+            }
+            else {
+                targetHeight = contentHeight;
+                targetWidth = targetHeight * this.targetRatio();
+            }
+        }
+        // Set calculated dimensions
+        this.setAcInnerWidth(targetWidth);
+        this.setAcInnerHeight(targetHeight);
+    }
+    setAcInnerWidth(width) {
+        this.renderer.setStyle(this.hostElem.nativeElement, 'width', `${width}px`);
+    }
+    setAcInnerHeight(height) {
+        this.renderer.setStyle(this.hostElem.nativeElement, 'height', `${height}px`);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: NgAspectRatioDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "18.1.2", type: NgAspectRatioDirective, isStandalone: true, selector: "[ngAspectRatio]", inputs: { targetRatio: { classPropertyName: "targetRatio", publicName: "ngAspectRatio", isSignal: true, isRequired: true, transformFunction: null }, sizingMode: { classPropertyName: "sizingMode", publicName: "sizingMode", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: NgAspectRatioDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[ngAspectRatio]',
+                    standalone: true,
+                }]
+        }], ctorParameters: () => [] });
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibmctYXNwZWN0LXJhdGlvLmRpcmVjdGl2ZS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL2xpYnMvYW5ndWxhci1hc3BlY3QtcmF0aW8tY29udGFpbmVyL3NyYy9saWIvYXNwZWN0LXJhdGlvLWNvbnRhaW5lci9uZy1hc3BlY3QtcmF0aW8uZGlyZWN0aXZlLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxVQUFVLEVBQWlCLFNBQVMsRUFBYSxTQUFTLEVBQUUsS0FBSyxFQUFFLE1BQU0sRUFBRSxNQUFNLGVBQWUsQ0FBQzs7QUFPMUcsTUFBTSxPQUFPLHNCQUFzQjtJQUNoQixRQUFRLEdBQUcsTUFBTSxDQUFDLFNBQVMsQ0FBQyxDQUFDO0lBQzdCLFFBQVEsR0FBRyxNQUFNLENBQUMsVUFBVSxDQUFDLENBQUM7SUFDOUIsUUFBUSxDQUFpQjtJQUUxQyxXQUFXLEdBQUcsS0FBSyxDQUFDLFFBQVEsQ0FBUyxFQUFFLEtBQUssRUFBRSxlQUFlLEVBQUUsQ0FBQyxDQUFDO0lBQ2pFLFVBQVUsR0FBRyxLQUFLLENBQWEsY0FBYyxDQUFDLENBQUM7SUFFL0M7UUFDRSxJQUFJLENBQUMsUUFBUSxHQUFHLElBQUksY0FBYyxDQUFDLEdBQUcsRUFBRTtZQUN0QyxJQUFJLENBQUMscUJBQXFCLEVBQUUsQ0FBQztRQUMvQixDQUFDLENBQUMsQ0FBQztJQUNMLENBQUM7SUFFRCxlQUFlO1FBQ2IsSUFBSSxDQUFDLFFBQVEsQ0FBQyxPQUFPLENBQUMsSUFBSSxDQUFDLFFBQVEsQ0FBQyxhQUFhLENBQUMsYUFBYSxDQUFDLENBQUM7SUFDbkUsQ0FBQztJQUVELFdBQVc7UUFDVCxJQUFJLENBQUMsUUFBUSxDQUFDLFVBQVUsRUFBRSxDQUFDO0lBQzdCLENBQUM7SUFFTSxxQkFBcUI7UUFDMUIsSUFBSSxDQUFDLFFBQVEsQ0FBQyxXQUFXLENBQUMsSUFBSSxDQUFDLFFBQVEsQ0FBQyxhQUFhLEVBQUUsT0FBTyxDQUFDLENBQUM7UUFDaEUsSUFBSSxDQUFDLFFBQVEsQ0FBQyxXQUFXLENBQUMsSUFBSSxDQUFDLFFBQVEsQ0FBQyxhQUFhLEVBQUUsUUFBUSxDQUFDLENBQUM7UUFFakUsSUFBSSxXQUFtQixDQUFDO1FBQ3hCLElBQUksWUFBb0IsQ0FBQztRQUV6QixJQUFJLElBQUksQ0FBQyxVQUFVLEVBQUUsS0FBSyxjQUFjLEVBQUUsQ0FBQztZQUN6QyxNQUFNLFNBQVMsR0FBRyxJQUFJLENBQUMsUUFBUSxDQUFDLGFBQWEsQ0FBQyxhQUFhLENBQUMsV0FBVyxDQUFDO1lBQ3hFLE1BQU0sVUFBVSxHQUFHLElBQUksQ0FBQyxRQUFRLENBQUMsYUFBYSxDQUFDLGFBQWEsQ0FBQyxZQUFZLENBQUM7WUFDMUUsTUFBTSxlQUFlLEdBQUcsU0FBUyxHQUFHLFVBQVUsQ0FBQztZQUUvQyxJQUFJLGVBQWUsSUFBSSxJQUFJLENBQUMsV0FBVyxFQUFFLEVBQUUsQ0FBQztnQkFDMUMsMEJBQTBCO2dCQUMxQixZQUFZLEdBQUcsVUFBVSxDQUFDO2dCQUMxQixXQUFXLEdBQUcsWUFBWSxHQUFHLElBQUksQ0FBQyxXQUFXLEVBQUUsQ0FBQztZQUNsRCxDQUFDO2lCQUFNLENBQUM7Z0JBQ04seUJBQXlCO2dCQUN6QixXQUFXLEdBQUcsU0FBUyxDQUFDO2dCQUN4QixZQUFZLEdBQUcsV0FBVyxHQUFHLENBQUMsQ0FBQyxHQUFHLElBQUksQ0FBQyxXQUFXLEVBQUUsQ0FBQyxDQUFDO1lBQ3hELENBQUM7UUFDSCxDQUFDO2FBQU0sQ0FBQztZQUNOLHdEQUF3RDtZQUN4RCxNQUFNLFlBQVksR0FBRyxJQUFJLENBQUMsUUFBUSxDQUFDLGFBQWEsQ0FBQyxXQUFXLEdBQUcsQ0FBQyxDQUFDO1lBQ2pFLE1BQU0sYUFBYSxHQUFHLElBQUksQ0FBQyxRQUFRLENBQUMsYUFBYSxDQUFDLFlBQVksR0FBRyxDQUFDLENBQUM7WUFFbkUsTUFBTSxZQUFZLEdBQUcsWUFBWSxHQUFHLGFBQWEsQ0FBQztZQUNsRCxJQUFJLFlBQVksSUFBSSxJQUFJLENBQUMsV0FBVyxFQUFFLEVBQUUsQ0FBQztnQkFDdkMsV0FBVyxHQUFHLFlBQVksQ0FBQztnQkFDM0IsWUFBWSxHQUFHLFdBQVcsR0FBRyxDQUFDLENBQUMsR0FBRyxJQUFJLENBQUMsV0FBVyxFQUFFLENBQUMsQ0FBQztZQUN4RCxDQUFDO2lCQUFNLENBQUM7Z0JBQ04sWUFBWSxHQUFHLGFBQWEsQ0FBQztnQkFDN0IsV0FBVyxHQUFHLFlBQVksR0FBRyxJQUFJLENBQUMsV0FBVyxFQUFFLENBQUM7WUFDbEQsQ0FBQztRQUNILENBQUM7UUFDRCw0QkFBNEI7UUFDNUIsSUFBSSxDQUFDLGVBQWUsQ0FBQyxXQUFXLENBQUMsQ0FBQztRQUNsQyxJQUFJLENBQUMsZ0JBQWdCLENBQUMsWUFBWSxDQUFDLENBQUM7SUFDdEMsQ0FBQztJQUVPLGVBQWUsQ0FBQyxLQUFhO1FBQ25DLElBQUksQ0FBQyxRQUFRLENBQUMsUUFBUSxDQUFDLElBQUksQ0FBQyxRQUFRLENBQUMsYUFBYSxFQUFFLE9BQU8sRUFBRSxHQUFHLEtBQUssSUFBSSxDQUFDLENBQUM7SUFDN0UsQ0FBQztJQUVPLGdCQUFnQixDQUFDLE1BQWM7UUFDckMsSUFBSSxDQUFDLFFBQVEsQ0FBQyxRQUFRLENBQUMsSUFBSSxDQUFDLFFBQVEsQ0FBQyxhQUFhLEVBQUUsUUFBUSxFQUFFLEdBQUcsTUFBTSxJQUFJLENBQUMsQ0FBQztJQUMvRSxDQUFDO3VHQXBFVSxzQkFBc0I7MkZBQXRCLHNCQUFzQjs7MkZBQXRCLHNCQUFzQjtrQkFKbEMsU0FBUzttQkFBQztvQkFDVCxRQUFRLEVBQUUsaUJBQWlCO29CQUMzQixVQUFVLEVBQUUsSUFBSTtpQkFDakIiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBFbGVtZW50UmVmLCBBZnRlclZpZXdJbml0LCBSZW5kZXJlcjIsIE9uRGVzdHJveSwgRGlyZWN0aXZlLCBpbnB1dCwgaW5qZWN0IH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBTaXppbmdNb2RlIH0gZnJvbSAnLi9zaXppbmctbW9kZSc7XG5cbkBEaXJlY3RpdmUoe1xuICBzZWxlY3RvcjogJ1tuZ0FzcGVjdFJhdGlvXScsXG4gIHN0YW5kYWxvbmU6IHRydWUsXG59KVxuZXhwb3J0IGNsYXNzIE5nQXNwZWN0UmF0aW9EaXJlY3RpdmUgaW1wbGVtZW50cyBBZnRlclZpZXdJbml0LCBPbkRlc3Ryb3kge1xuICBwcml2YXRlIHJlYWRvbmx5IHJlbmRlcmVyID0gaW5qZWN0KFJlbmRlcmVyMik7XG4gIHByaXZhdGUgcmVhZG9ubHkgaG9zdEVsZW0gPSBpbmplY3QoRWxlbWVudFJlZik7XG4gIHByaXZhdGUgcmVhZG9ubHkgb2JzZXJ2ZXI6IFJlc2l6ZU9ic2VydmVyO1xuXG4gIHRhcmdldFJhdGlvID0gaW5wdXQucmVxdWlyZWQ8bnVtYmVyPih7IGFsaWFzOiAnbmdBc3BlY3RSYXRpbycgfSk7XG4gIHNpemluZ01vZGUgPSBpbnB1dDxTaXppbmdNb2RlPignbWF0Y2gtcGFyZW50Jyk7XG5cbiAgY29uc3RydWN0b3IoKSB7XG4gICAgdGhpcy5vYnNlcnZlciA9IG5ldyBSZXNpemVPYnNlcnZlcigoKSA9PiB7XG4gICAgICB0aGlzLmNhbGN1bGF0ZUFuZFNldEFzcGVjdCgpO1xuICAgIH0pO1xuICB9XG5cbiAgbmdBZnRlclZpZXdJbml0KCkge1xuICAgIHRoaXMub2JzZXJ2ZXIub2JzZXJ2ZSh0aGlzLmhvc3RFbGVtLm5hdGl2ZUVsZW1lbnQucGFyZW50RWxlbWVudCk7XG4gIH1cblxuICBuZ09uRGVzdHJveSgpIHtcbiAgICB0aGlzLm9ic2VydmVyLmRpc2Nvbm5lY3QoKTtcbiAgfVxuXG4gIHB1YmxpYyBjYWxjdWxhdGVBbmRTZXRBc3BlY3QoKTogdm9pZCB7XG4gICAgdGhpcy5yZW5kZXJlci5yZW1vdmVTdHlsZSh0aGlzLmhvc3RFbGVtLm5hdGl2ZUVsZW1lbnQsICd3aWR0aCcpO1xuICAgIHRoaXMucmVuZGVyZXIucmVtb3ZlU3R5bGUodGhpcy5ob3N0RWxlbS5uYXRpdmVFbGVtZW50LCAnaGVpZ2h0Jyk7XG5cbiAgICBsZXQgdGFyZ2V0V2lkdGg6IG51bWJlcjtcbiAgICBsZXQgdGFyZ2V0SGVpZ2h0OiBudW1iZXI7XG5cbiAgICBpZiAodGhpcy5zaXppbmdNb2RlKCkgPT09ICdtYXRjaC1wYXJlbnQnKSB7XG4gICAgICBjb25zdCBob3N0V2lkdGggPSB0aGlzLmhvc3RFbGVtLm5hdGl2ZUVsZW1lbnQucGFyZW50RWxlbWVudC5vZmZzZXRXaWR0aDtcbiAgICAgIGNvbnN0IGhvc3RIZWlnaHQgPSB0aGlzLmhvc3RFbGVtLm5hdGl2ZUVsZW1lbnQucGFyZW50RWxlbWVudC5vZmZzZXRIZWlnaHQ7XG4gICAgICBjb25zdCBob3N0QXNwZWN0UmF0aW8gPSBob3N0V2lkdGggLyBob3N0SGVpZ2h0O1xuXG4gICAgICBpZiAoaG9zdEFzcGVjdFJhdGlvID49IHRoaXMudGFyZ2V0UmF0aW8oKSkge1xuICAgICAgICAvLyB1c2UgZnVsbCBoZWlnaHQgYXMgYmFzZVxuICAgICAgICB0YXJnZXRIZWlnaHQgPSBob3N0SGVpZ2h0O1xuICAgICAgICB0YXJnZXRXaWR0aCA9IHRhcmdldEhlaWdodCAqIHRoaXMudGFyZ2V0UmF0aW8oKTtcbiAgICAgIH0gZWxzZSB7XG4gICAgICAgIC8vIHVzZSBmdWxsIHdpZHRoIGFzIGJhc2VcbiAgICAgICAgdGFyZ2V0V2lkdGggPSBob3N0V2lkdGg7XG4gICAgICAgIHRhcmdldEhlaWdodCA9IHRhcmdldFdpZHRoICogKDEgLyB0aGlzLnRhcmdldFJhdGlvKCkpO1xuICAgICAgfVxuICAgIH0gZWxzZSB7XG4gICAgICAvLyBBZGQgKzEgdG8gdGhlIGRpbWVuc2lvbnMgYmVjYXVzZSBkZWNpbWFscyBnZXQgcm91bmRlZFxuICAgICAgY29uc3QgY29udGVudFdpZHRoID0gdGhpcy5ob3N0RWxlbS5uYXRpdmVFbGVtZW50Lm9mZnNldFdpZHRoICsgMTtcbiAgICAgIGNvbnN0IGNvbnRlbnRIZWlnaHQgPSB0aGlzLmhvc3RFbGVtLm5hdGl2ZUVsZW1lbnQub2Zmc2V0SGVpZ2h0ICsgMTtcblxuICAgICAgY29uc3QgY3VycmVudFJhdGlvID0gY29udGVudFdpZHRoIC8gY29udGVudEhlaWdodDtcbiAgICAgIGlmIChjdXJyZW50UmF0aW8gPj0gdGhpcy50YXJnZXRSYXRpbygpKSB7XG4gICAgICAgIHRhcmdldFdpZHRoID0gY29udGVudFdpZHRoO1xuICAgICAgICB0YXJnZXRIZWlnaHQgPSB0YXJnZXRXaWR0aCAqICgxIC8gdGhpcy50YXJnZXRSYXRpbygpKTtcbiAgICAgIH0gZWxzZSB7XG4gICAgICAgIHRhcmdldEhlaWdodCA9IGNvbnRlbnRIZWlnaHQ7XG4gICAgICAgIHRhcmdldFdpZHRoID0gdGFyZ2V0SGVpZ2h0ICogdGhpcy50YXJnZXRSYXRpbygpO1xuICAgICAgfVxuICAgIH1cbiAgICAvLyBTZXQgY2FsY3VsYXRlZCBkaW1lbnNpb25zXG4gICAgdGhpcy5zZXRBY0lubmVyV2lkdGgodGFyZ2V0V2lkdGgpO1xuICAgIHRoaXMuc2V0QWNJbm5lckhlaWdodCh0YXJnZXRIZWlnaHQpO1xuICB9XG5cbiAgcHJpdmF0ZSBzZXRBY0lubmVyV2lkdGgod2lkdGg6IG51bWJlcikge1xuICAgIHRoaXMucmVuZGVyZXIuc2V0U3R5bGUodGhpcy5ob3N0RWxlbS5uYXRpdmVFbGVtZW50LCAnd2lkdGgnLCBgJHt3aWR0aH1weGApO1xuICB9XG5cbiAgcHJpdmF0ZSBzZXRBY0lubmVySGVpZ2h0KGhlaWdodDogbnVtYmVyKSB7XG4gICAgdGhpcy5yZW5kZXJlci5zZXRTdHlsZSh0aGlzLmhvc3RFbGVtLm5hdGl2ZUVsZW1lbnQsICdoZWlnaHQnLCBgJHtoZWlnaHR9cHhgKTtcbiAgfVxufVxuIl19

package/esm2022/lib/aspect-ratio-container/sizing-mode.mjs

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic2l6aW5nLW1vZGUuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi9saWJzL2FuZ3VsYXItYXNwZWN0LXJhdGlvLWNvbnRhaW5lci9zcmMvbGliL2FzcGVjdC1yYXRpby1jb250YWluZXIvc2l6aW5nLW1vZGUudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IiIsInNvdXJjZXNDb250ZW50IjpbImV4cG9ydCB0eXBlIFNpemluZ01vZGUgPSAnZml0LWNvbnRlbnQnIHwgJ21hdGNoLXBhcmVudCc7XG4iXX0=

package/fesm2022/angular-aspect-ratio-container.mjs

@@ -0,0 +1,81 @@
+import * as i0 from '@angular/core';
+import { inject, Renderer2, ElementRef, input, Directive } from '@angular/core';
+
+class NgAspectRatioDirective {
+    renderer = inject(Renderer2);
+    hostElem = inject(ElementRef);
+    observer;
+    targetRatio = input.required({ alias: 'ngAspectRatio' });
+    sizingMode = input('match-parent');
+    constructor() {
+        this.observer = new ResizeObserver(() => {
+            this.calculateAndSetAspect();
+        });
+    }
+    ngAfterViewInit() {
+        this.observer.observe(this.hostElem.nativeElement.parentElement);
+    }
+    ngOnDestroy() {
+        this.observer.disconnect();
+    }
+    calculateAndSetAspect() {
+        this.renderer.removeStyle(this.hostElem.nativeElement, 'width');
+        this.renderer.removeStyle(this.hostElem.nativeElement, 'height');
+        let targetWidth;
+        let targetHeight;
+        if (this.sizingMode() === 'match-parent') {
+            const hostWidth = this.hostElem.nativeElement.parentElement.offsetWidth;
+            const hostHeight = this.hostElem.nativeElement.parentElement.offsetHeight;
+            const hostAspectRatio = hostWidth / hostHeight;
+            if (hostAspectRatio >= this.targetRatio()) {
+                // use full height as base
+                targetHeight = hostHeight;
+                targetWidth = targetHeight * this.targetRatio();
+            }
+            else {
+                // use full width as base
+                targetWidth = hostWidth;
+                targetHeight = targetWidth * (1 / this.targetRatio());
+            }
+        }
+        else {
+            // Add +1 to the dimensions because decimals get rounded
+            const contentWidth = this.hostElem.nativeElement.offsetWidth + 1;
+            const contentHeight = this.hostElem.nativeElement.offsetHeight + 1;
+            const currentRatio = contentWidth / contentHeight;
+            if (currentRatio >= this.targetRatio()) {
+                targetWidth = contentWidth;
+                targetHeight = targetWidth * (1 / this.targetRatio());
+            }
+            else {
+                targetHeight = contentHeight;
+                targetWidth = targetHeight * this.targetRatio();
+            }
+        }
+        // Set calculated dimensions
+        this.setAcInnerWidth(targetWidth);
+        this.setAcInnerHeight(targetHeight);
+    }
+    setAcInnerWidth(width) {
+        this.renderer.setStyle(this.hostElem.nativeElement, 'width', `${width}px`);
+    }
+    setAcInnerHeight(height) {
+        this.renderer.setStyle(this.hostElem.nativeElement, 'height', `${height}px`);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: NgAspectRatioDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "18.1.2", type: NgAspectRatioDirective, isStandalone: true, selector: "[ngAspectRatio]", inputs: { targetRatio: { classPropertyName: "targetRatio", publicName: "ngAspectRatio", isSignal: true, isRequired: true, transformFunction: null }, sizingMode: { classPropertyName: "sizingMode", publicName: "sizingMode", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: NgAspectRatioDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[ngAspectRatio]',
+                    standalone: true,
+                }]
+        }], ctorParameters: () => [] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { NgAspectRatioDirective };
+//# sourceMappingURL=angular-aspect-ratio-container.mjs.map

package/fesm2022/angular-aspect-ratio-container.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"angular-aspect-ratio-container.mjs","sources":["../../../../libs/angular-aspect-ratio-container/src/lib/aspect-ratio-container/ng-aspect-ratio.directive.ts","../../../../libs/angular-aspect-ratio-container/src/angular-aspect-ratio-container.ts"],"sourcesContent":["import { ElementRef, AfterViewInit, Renderer2, OnDestroy, Directive, input, inject } from '@angular/core';\nimport { SizingMode } from './sizing-mode';\n\n@Directive({\n  selector: '[ngAspectRatio]',\n  standalone: true,\n})\nexport class NgAspectRatioDirective implements AfterViewInit, OnDestroy {\n  private readonly renderer = inject(Renderer2);\n  private readonly hostElem = inject(ElementRef);\n  private readonly observer: ResizeObserver;\n\n  targetRatio = input.required<number>({ alias: 'ngAspectRatio' });\n  sizingMode = input<SizingMode>('match-parent');\n\n  constructor() {\n    this.observer = new ResizeObserver(() => {\n      this.calculateAndSetAspect();\n    });\n  }\n\n  ngAfterViewInit() {\n    this.observer.observe(this.hostElem.nativeElement.parentElement);\n  }\n\n  ngOnDestroy() {\n    this.observer.disconnect();\n  }\n\n  public calculateAndSetAspect(): void {\n    this.renderer.removeStyle(this.hostElem.nativeElement, 'width');\n    this.renderer.removeStyle(this.hostElem.nativeElement, 'height');\n\n    let targetWidth: number;\n    let targetHeight: number;\n\n    if (this.sizingMode() === 'match-parent') {\n      const hostWidth = this.hostElem.nativeElement.parentElement.offsetWidth;\n      const hostHeight = this.hostElem.nativeElement.parentElement.offsetHeight;\n      const hostAspectRatio = hostWidth / hostHeight;\n\n      if (hostAspectRatio >= this.targetRatio()) {\n        // use full height as base\n        targetHeight = hostHeight;\n        targetWidth = targetHeight * this.targetRatio();\n      } else {\n        // use full width as base\n        targetWidth = hostWidth;\n        targetHeight = targetWidth * (1 / this.targetRatio());\n      }\n    } else {\n      // Add +1 to the dimensions because decimals get rounded\n      const contentWidth = this.hostElem.nativeElement.offsetWidth + 1;\n      const contentHeight = this.hostElem.nativeElement.offsetHeight + 1;\n\n      const currentRatio = contentWidth / contentHeight;\n      if (currentRatio >= this.targetRatio()) {\n        targetWidth = contentWidth;\n        targetHeight = targetWidth * (1 / this.targetRatio());\n      } else {\n        targetHeight = contentHeight;\n        targetWidth = targetHeight * this.targetRatio();\n      }\n    }\n    // Set calculated dimensions\n    this.setAcInnerWidth(targetWidth);\n    this.setAcInnerHeight(targetHeight);\n  }\n\n  private setAcInnerWidth(width: number) {\n    this.renderer.setStyle(this.hostElem.nativeElement, 'width', `${width}px`);\n  }\n\n  private setAcInnerHeight(height: number) {\n    this.renderer.setStyle(this.hostElem.nativeElement, 'height', `${height}px`);\n  }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;MAOa,sBAAsB,CAAA;AAChB,IAAA,QAAQ,GAAG,MAAM,CAAC,SAAS,CAAC,CAAC;AAC7B,IAAA,QAAQ,GAAG,MAAM,CAAC,UAAU,CAAC,CAAC;AAC9B,IAAA,QAAQ,CAAiB;IAE1C,WAAW,GAAG,KAAK,CAAC,QAAQ,CAAS,EAAE,KAAK,EAAE,eAAe,EAAE,CAAC,CAAC;AACjE,IAAA,UAAU,GAAG,KAAK,CAAa,cAAc,CAAC,CAAC;AAE/C,IAAA,WAAA,GAAA;AACE,QAAA,IAAI,CAAC,QAAQ,GAAG,IAAI,cAAc,CAAC,MAAK;YACtC,IAAI,CAAC,qBAAqB,EAAE,CAAC;AAC/B,SAAC,CAAC,CAAC;KACJ;IAED,eAAe,GAAA;AACb,QAAA,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,IAAI,CAAC,QAAQ,CAAC,aAAa,CAAC,aAAa,CAAC,CAAC;KAClE;IAED,WAAW,GAAA;AACT,QAAA,IAAI,CAAC,QAAQ,CAAC,UAAU,EAAE,CAAC;KAC5B;IAEM,qBAAqB,GAAA;AAC1B,QAAA,IAAI,CAAC,QAAQ,CAAC,WAAW,CAAC,IAAI,CAAC,QAAQ,CAAC,aAAa,EAAE,OAAO,CAAC,CAAC;AAChE,QAAA,IAAI,CAAC,QAAQ,CAAC,WAAW,CAAC,IAAI,CAAC,QAAQ,CAAC,aAAa,EAAE,QAAQ,CAAC,CAAC;AAEjE,QAAA,IAAI,WAAmB,CAAC;AACxB,QAAA,IAAI,YAAoB,CAAC;AAEzB,QAAA,IAAI,IAAI,CAAC,UAAU,EAAE,KAAK,cAAc,EAAE;YACxC,MAAM,SAAS,GAAG,IAAI,CAAC,QAAQ,CAAC,aAAa,CAAC,aAAa,CAAC,WAAW,CAAC;YACxE,MAAM,UAAU,GAAG,IAAI,CAAC,QAAQ,CAAC,aAAa,CAAC,aAAa,CAAC,YAAY,CAAC;AAC1E,YAAA,MAAM,eAAe,GAAG,SAAS,GAAG,UAAU,CAAC;AAE/C,YAAA,IAAI,eAAe,IAAI,IAAI,CAAC,WAAW,EAAE,EAAE;;gBAEzC,YAAY,GAAG,UAAU,CAAC;AAC1B,gBAAA,WAAW,GAAG,YAAY,GAAG,IAAI,CAAC,WAAW,EAAE,CAAC;aACjD;iBAAM;;gBAEL,WAAW,GAAG,SAAS,CAAC;gBACxB,YAAY,GAAG,WAAW,IAAI,CAAC,GAAG,IAAI,CAAC,WAAW,EAAE,CAAC,CAAC;aACvD;SACF;aAAM;;YAEL,MAAM,YAAY,GAAG,IAAI,CAAC,QAAQ,CAAC,aAAa,CAAC,WAAW,GAAG,CAAC,CAAC;YACjE,MAAM,aAAa,GAAG,IAAI,CAAC,QAAQ,CAAC,aAAa,CAAC,YAAY,GAAG,CAAC,CAAC;AAEnE,YAAA,MAAM,YAAY,GAAG,YAAY,GAAG,aAAa,CAAC;AAClD,YAAA,IAAI,YAAY,IAAI,IAAI,CAAC,WAAW,EAAE,EAAE;gBACtC,WAAW,GAAG,YAAY,CAAC;gBAC3B,YAAY,GAAG,WAAW,IAAI,CAAC,GAAG,IAAI,CAAC,WAAW,EAAE,CAAC,CAAC;aACvD;iBAAM;gBACL,YAAY,GAAG,aAAa,CAAC;AAC7B,gBAAA,WAAW,GAAG,YAAY,GAAG,IAAI,CAAC,WAAW,EAAE,CAAC;aACjD;SACF;;AAED,QAAA,IAAI,CAAC,eAAe,CAAC,WAAW,CAAC,CAAC;AAClC,QAAA,IAAI,CAAC,gBAAgB,CAAC,YAAY,CAAC,CAAC;KACrC;AAEO,IAAA,eAAe,CAAC,KAAa,EAAA;AACnC,QAAA,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAAC,IAAI,CAAC,QAAQ,CAAC,aAAa,EAAE,OAAO,EAAE,GAAG,KAAK,CAAA,EAAA,CAAI,CAAC,CAAC;KAC5E;AAEO,IAAA,gBAAgB,CAAC,MAAc,EAAA;AACrC,QAAA,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAAC,IAAI,CAAC,QAAQ,CAAC,aAAa,EAAE,QAAQ,EAAE,GAAG,MAAM,CAAA,EAAA,CAAI,CAAC,CAAC;KAC9E;uGApEU,sBAAsB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;2FAAtB,sBAAsB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,iBAAA,EAAA,MAAA,EAAA,EAAA,WAAA,EAAA,EAAA,iBAAA,EAAA,aAAA,EAAA,UAAA,EAAA,eAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,iBAAA,EAAA,YAAA,EAAA,UAAA,EAAA,YAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,CAAA,CAAA;;2FAAtB,sBAAsB,EAAA,UAAA,EAAA,CAAA;kBAJlC,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACT,oBAAA,QAAQ,EAAE,iBAAiB;AAC3B,oBAAA,UAAU,EAAE,IAAI;AACjB,iBAAA,CAAA;;;ACND;;AAEG;;;;"}

package/index.d.ts

@@ -0,0 +1 @@
+export * from './lib/aspect-ratio-container';

package/lib/aspect-ratio-container/index.d.ts

@@ -0,0 +1 @@
+export { NgAspectRatioDirective } from './ng-aspect-ratio.directive';

package/lib/aspect-ratio-container/ng-aspect-ratio.directive.d.ts

@@ -0,0 +1,18 @@
+import { AfterViewInit, OnDestroy } from '@angular/core';
+import { SizingMode } from './sizing-mode';
+import * as i0 from "@angular/core";
+export declare class NgAspectRatioDirective implements AfterViewInit, OnDestroy {
+    private readonly renderer;
+    private readonly hostElem;
+    private readonly observer;
+    targetRatio: import("@angular/core").InputSignal<number>;
+    sizingMode: import("@angular/core").InputSignal<SizingMode>;
+    constructor();
+    ngAfterViewInit(): void;
+    ngOnDestroy(): void;
+    calculateAndSetAspect(): void;
+    private setAcInnerWidth;
+    private setAcInnerHeight;
+    static ɵfac: i0.ɵɵFactoryDeclaration<NgAspectRatioDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<NgAspectRatioDirective, "[ngAspectRatio]", never, { "targetRatio": { "alias": "ngAspectRatio"; "required": true; "isSignal": true; }; "sizingMode": { "alias": "sizingMode"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}

package/lib/aspect-ratio-container/sizing-mode.d.ts

@@ -0,0 +1 @@
+export type SizingMode = 'fit-content' | 'match-parent';

package/package.json

@@ -0,0 +1,25 @@
+{
+  "name": "angular-aspect-ratio-container",
+  "version": "18.0.4",
+  "peerDependencies": {
+    "@angular/common": "^18.1.0",
+    "@angular/core": "^18.1.0"
+  },
+  "sideEffects": false,
+  "module": "fesm2022/angular-aspect-ratio-container.mjs",
+  "typings": "index.d.ts",
+  "exports": {
+    "./package.json": {
+      "default": "./package.json"
+    },
+    ".": {
+      "types": "./index.d.ts",
+      "esm2022": "./esm2022/angular-aspect-ratio-container.mjs",
+      "esm": "./esm2022/angular-aspect-ratio-container.mjs",
+      "default": "./fesm2022/angular-aspect-ratio-container.mjs"
+    }
+  },
+  "dependencies": {
+    "tslib": "^2.3.0"
+  }
+}