angular-aspect-ratio-container 19.0.3 → 19.0.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1,12 +1,15 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { inject, Renderer2, ElementRef, input, Directive } from '@angular/core';
|
|
2
|
+
import { inject, Renderer2, ElementRef, input, output, Directive } from '@angular/core';
|
|
3
3
|
|
|
4
4
|
class NgAspectRatioDirective {
|
|
5
5
|
renderer = inject(Renderer2);
|
|
6
6
|
hostElem = inject(ElementRef);
|
|
7
7
|
observer;
|
|
8
|
-
|
|
8
|
+
ngAspectRatio = input.required();
|
|
9
9
|
sizingMode = input('match-parent');
|
|
10
|
+
containerWidthChanged = output();
|
|
11
|
+
containerHeightChanged = output();
|
|
12
|
+
targetRatio = this.ngAspectRatio;
|
|
10
13
|
constructor() {
|
|
11
14
|
this.observer = new ResizeObserver(() => {
|
|
12
15
|
this.calculateAndSetAspect();
|
|
@@ -57,15 +60,17 @@ class NgAspectRatioDirective {
|
|
|
57
60
|
this.setAcInnerHeight(targetHeight);
|
|
58
61
|
}
|
|
59
62
|
setAcInnerWidth(width) {
|
|
63
|
+
this.containerWidthChanged.emit(width);
|
|
60
64
|
this.renderer.setStyle(this.hostElem.nativeElement, 'width', `${width}px`);
|
|
61
65
|
}
|
|
62
66
|
setAcInnerHeight(height) {
|
|
67
|
+
this.containerHeightChanged.emit(height);
|
|
63
68
|
this.renderer.setStyle(this.hostElem.nativeElement, 'height', `${height}px`);
|
|
64
69
|
}
|
|
65
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.
|
|
66
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.
|
|
70
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: NgAspectRatioDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
71
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.6", type: NgAspectRatioDirective, isStandalone: true, selector: "[ngAspectRatio]", inputs: { ngAspectRatio: { classPropertyName: "ngAspectRatio", publicName: "ngAspectRatio", isSignal: true, isRequired: true, transformFunction: null }, sizingMode: { classPropertyName: "sizingMode", publicName: "sizingMode", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { containerWidthChanged: "containerWidthChanged", containerHeightChanged: "containerHeightChanged" }, ngImport: i0 });
|
|
67
72
|
}
|
|
68
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.
|
|
73
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: NgAspectRatioDirective, decorators: [{
|
|
69
74
|
type: Directive,
|
|
70
75
|
args: [{
|
|
71
76
|
selector: '[ngAspectRatio]'
|
|
@@ -1 +1 @@
|
|
|
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';\r\nimport { SizingMode } from './sizing-mode';\r\n\r\n@Directive({\r\n selector: '[ngAspectRatio]'\r\n})\r\nexport class NgAspectRatioDirective implements AfterViewInit, OnDestroy {\r\n private readonly renderer = inject(Renderer2);\r\n private readonly hostElem = inject(ElementRef);\r\n private readonly observer: ResizeObserver;\r\n\r\n
|
|
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, output } from '@angular/core';\r\nimport { SizingMode } from './sizing-mode';\r\n\r\n@Directive({\r\n selector: '[ngAspectRatio]'\r\n})\r\nexport class NgAspectRatioDirective implements AfterViewInit, OnDestroy {\r\n private readonly renderer = inject(Renderer2);\r\n private readonly hostElem = inject(ElementRef);\r\n private readonly observer: ResizeObserver;\r\n\r\n ngAspectRatio = input.required<number>();\r\n sizingMode = input<SizingMode>('match-parent');\r\n\r\n containerWidthChanged = output<number>();\r\n containerHeightChanged = output<number>();\r\n\r\n private readonly targetRatio = this.ngAspectRatio;\r\n\r\n constructor() {\r\n this.observer = new ResizeObserver(() => {\r\n this.calculateAndSetAspect();\r\n });\r\n }\r\n\r\n ngAfterViewInit() {\r\n this.observer.observe(this.hostElem.nativeElement.parentElement);\r\n }\r\n\r\n ngOnDestroy() {\r\n this.observer.disconnect();\r\n }\r\n\r\n public calculateAndSetAspect(): void {\r\n this.renderer.removeStyle(this.hostElem.nativeElement, 'width');\r\n this.renderer.removeStyle(this.hostElem.nativeElement, 'height');\r\n\r\n let targetWidth: number;\r\n let targetHeight: number;\r\n\r\n if (this.sizingMode() === 'match-parent') {\r\n const hostWidth = this.hostElem.nativeElement.parentElement.offsetWidth;\r\n const hostHeight = this.hostElem.nativeElement.parentElement.offsetHeight;\r\n const hostAspectRatio = hostWidth / hostHeight;\r\n\r\n if (hostAspectRatio >= this.targetRatio()) {\r\n // use full height as base\r\n targetHeight = hostHeight;\r\n targetWidth = targetHeight * this.targetRatio();\r\n } else {\r\n // use full width as base\r\n targetWidth = hostWidth;\r\n targetHeight = targetWidth * (1 / this.targetRatio());\r\n }\r\n } else {\r\n // Add +1 to the dimensions because decimals get rounded\r\n const contentWidth = this.hostElem.nativeElement.offsetWidth + 1;\r\n const contentHeight = this.hostElem.nativeElement.offsetHeight + 1;\r\n\r\n const currentRatio = contentWidth / contentHeight;\r\n if (currentRatio >= this.targetRatio()) {\r\n targetWidth = contentWidth;\r\n targetHeight = targetWidth * (1 / this.targetRatio());\r\n } else {\r\n targetHeight = contentHeight;\r\n targetWidth = targetHeight * this.targetRatio();\r\n }\r\n }\r\n // Set calculated dimensions\r\n this.setAcInnerWidth(targetWidth);\r\n this.setAcInnerHeight(targetHeight);\r\n }\r\n\r\n private setAcInnerWidth(width: number) {\r\n this.containerWidthChanged.emit(width);\r\n this.renderer.setStyle(this.hostElem.nativeElement, 'width', `${width}px`);\r\n }\r\n\r\n private setAcInnerHeight(height: number) {\r\n this.containerHeightChanged.emit(height);\r\n this.renderer.setStyle(this.hostElem.nativeElement, 'height', `${height}px`);\r\n }\r\n}\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
|
|
@@ -5,8 +5,11 @@ export declare class NgAspectRatioDirective implements AfterViewInit, OnDestroy
|
|
|
5
5
|
private readonly renderer;
|
|
6
6
|
private readonly hostElem;
|
|
7
7
|
private readonly observer;
|
|
8
|
-
|
|
8
|
+
ngAspectRatio: import("@angular/core").InputSignal<number>;
|
|
9
9
|
sizingMode: import("@angular/core").InputSignal<SizingMode>;
|
|
10
|
+
containerWidthChanged: import("@angular/core").OutputEmitterRef<number>;
|
|
11
|
+
containerHeightChanged: import("@angular/core").OutputEmitterRef<number>;
|
|
12
|
+
private readonly targetRatio;
|
|
10
13
|
constructor();
|
|
11
14
|
ngAfterViewInit(): void;
|
|
12
15
|
ngOnDestroy(): void;
|
|
@@ -14,5 +17,5 @@ export declare class NgAspectRatioDirective implements AfterViewInit, OnDestroy
|
|
|
14
17
|
private setAcInnerWidth;
|
|
15
18
|
private setAcInnerHeight;
|
|
16
19
|
static ɵfac: i0.ɵɵFactoryDeclaration<NgAspectRatioDirective, never>;
|
|
17
|
-
static ɵdir: i0.ɵɵDirectiveDeclaration<NgAspectRatioDirective, "[ngAspectRatio]", never, { "
|
|
20
|
+
static ɵdir: i0.ɵɵDirectiveDeclaration<NgAspectRatioDirective, "[ngAspectRatio]", never, { "ngAspectRatio": { "alias": "ngAspectRatio"; "required": true; "isSignal": true; }; "sizingMode": { "alias": "sizingMode"; "required": false; "isSignal": true; }; }, { "containerWidthChanged": "containerWidthChanged"; "containerHeightChanged": "containerHeightChanged"; }, never, never, true, never>;
|
|
18
21
|
}
|