angular-aspect-ratio-container 21.0.4 → 21.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.
package/README.md
CHANGED
|
@@ -1,13 +1,13 @@
|
|
|
1
|
-
# Angular Aspect Ratio Container
|
|
2
|
-
|
|
3
|
-
Library to fix the aspect ratio of a container.
|
|
4
|
-
|
|
5
|
-
## Example
|
|
6
|
-
|
|
7
|
-
```html
|
|
8
|
-
<div class="wrapper" style="width: 100vw; height: 100vh">
|
|
9
|
-
<div [ngAspectRatio]="16 / 9" style="background-color: lightblue">Hello</div>
|
|
10
|
-
</div>
|
|
11
|
-
```
|
|
12
|
-
|
|
13
|
-
|
|
1
|
+
# Angular Aspect Ratio Container
|
|
2
|
+
|
|
3
|
+
Library to fix the aspect ratio of a container.
|
|
4
|
+
|
|
5
|
+
## Example
|
|
6
|
+
|
|
7
|
+
```html
|
|
8
|
+
<div class="wrapper" style="width: 100vw; height: 100vh">
|
|
9
|
+
<div [ngAspectRatio]="16 / 9" style="background-color: lightblue">Hello</div>
|
|
10
|
+
</div>
|
|
11
|
+
```
|
|
12
|
+
|
|
13
|
+
|
|
@@ -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, output } from '@angular/core';\nimport { SizingMode } from './sizing-mode';\n\n@Directive({\n selector: '[ngAspectRatio]'\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 ngAspectRatio = input.required<number>();\n sizingMode = input<SizingMode>('match-parent');\n\n containerWidthChanged = output<number>();\n containerHeightChanged = output<number>();\n\n private readonly targetRatio = this.ngAspectRatio;\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.containerWidthChanged.emit(width);\n this.renderer.setStyle(this.hostElem.nativeElement, 'width', `${width}px`);\n }\n\n private setAcInnerHeight(height: number) {\n this.containerHeightChanged.emit(height);\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":"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"}
|
|
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":";;;MAMa,sBAAsB,CAAA;AAChB,IAAA,QAAQ,GAAG,MAAM,CAAC,SAAS,CAAC;AAC5B,IAAA,QAAQ,GAAG,MAAM,CAAC,UAAU,CAAC;AAC7B,IAAA,QAAQ;AAEzB,IAAA,aAAa,GAAG,KAAK,CAAC,QAAQ,mFAAU;AACxC,IAAA,UAAU,GAAG,KAAK,CAAa,cAAc,iFAAC;IAE9C,qBAAqB,GAAG,MAAM,EAAU;IACxC,sBAAsB,GAAG,MAAM,EAAU;AAExB,IAAA,WAAW,GAAG,IAAI,CAAC,aAAa;AAEjD,IAAA,WAAA,GAAA;AACE,QAAA,IAAI,CAAC,QAAQ,GAAG,IAAI,cAAc,CAAC,MAAK;YACtC,IAAI,CAAC,qBAAqB,EAAE;AAC9B,QAAA,CAAC,CAAC;IACJ;IAEA,eAAe,GAAA;AACb,QAAA,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,IAAI,CAAC,QAAQ,CAAC,aAAa,CAAC,aAAa,CAAC;IAClE;IAEA,WAAW,GAAA;AACT,QAAA,IAAI,CAAC,QAAQ,CAAC,UAAU,EAAE;IAC5B;IAEO,qBAAqB,GAAA;AAC1B,QAAA,IAAI,CAAC,QAAQ,CAAC,WAAW,CAAC,IAAI,CAAC,QAAQ,CAAC,aAAa,EAAE,OAAO,CAAC;AAC/D,QAAA,IAAI,CAAC,QAAQ,CAAC,WAAW,CAAC,IAAI,CAAC,QAAQ,CAAC,aAAa,EAAE,QAAQ,CAAC;AAEhE,QAAA,IAAI,WAAmB;AACvB,QAAA,IAAI,YAAoB;AAExB,QAAA,IAAI,IAAI,CAAC,UAAU,EAAE,KAAK,cAAc,EAAE;YACxC,MAAM,SAAS,GAAG,IAAI,CAAC,QAAQ,CAAC,aAAa,CAAC,aAAa,CAAC,WAAW;YACvE,MAAM,UAAU,GAAG,IAAI,CAAC,QAAQ,CAAC,aAAa,CAAC,aAAa,CAAC,YAAY;AACzE,YAAA,MAAM,eAAe,GAAG,SAAS,GAAG,UAAU;AAE9C,YAAA,IAAI,eAAe,IAAI,IAAI,CAAC,WAAW,EAAE,EAAE;;gBAEzC,YAAY,GAAG,UAAU;AACzB,gBAAA,WAAW,GAAG,YAAY,GAAG,IAAI,CAAC,WAAW,EAAE;YACjD;iBAAO;;gBAEL,WAAW,GAAG,SAAS;gBACvB,YAAY,GAAG,WAAW,IAAI,CAAC,GAAG,IAAI,CAAC,WAAW,EAAE,CAAC;YACvD;QACF;aAAO;;YAEL,MAAM,YAAY,GAAG,IAAI,CAAC,QAAQ,CAAC,aAAa,CAAC,WAAW,GAAG,CAAC;YAChE,MAAM,aAAa,GAAG,IAAI,CAAC,QAAQ,CAAC,aAAa,CAAC,YAAY,GAAG,CAAC;AAElE,YAAA,MAAM,YAAY,GAAG,YAAY,GAAG,aAAa;AACjD,YAAA,IAAI,YAAY,IAAI,IAAI,CAAC,WAAW,EAAE,EAAE;gBACtC,WAAW,GAAG,YAAY;gBAC1B,YAAY,GAAG,WAAW,IAAI,CAAC,GAAG,IAAI,CAAC,WAAW,EAAE,CAAC;YACvD;iBAAO;gBACL,YAAY,GAAG,aAAa;AAC5B,gBAAA,WAAW,GAAG,YAAY,GAAG,IAAI,CAAC,WAAW,EAAE;YACjD;QACF;;AAEA,QAAA,IAAI,CAAC,eAAe,CAAC,WAAW,CAAC;AACjC,QAAA,IAAI,CAAC,gBAAgB,CAAC,YAAY,CAAC;IACrC;AAEQ,IAAA,eAAe,CAAC,KAAa,EAAA;AACnC,QAAA,IAAI,CAAC,qBAAqB,CAAC,IAAI,CAAC,KAAK,CAAC;AACtC,QAAA,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAAC,IAAI,CAAC,QAAQ,CAAC,aAAa,EAAE,OAAO,EAAE,GAAG,KAAK,CAAA,EAAA,CAAI,CAAC;IAC5E;AAEQ,IAAA,gBAAgB,CAAC,MAAc,EAAA;AACrC,QAAA,IAAI,CAAC,sBAAsB,CAAC,IAAI,CAAC,MAAM,CAAC;AACxC,QAAA,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAAC,IAAI,CAAC,QAAQ,CAAC,aAAa,EAAE,QAAQ,EAAE,GAAG,MAAM,CAAA,EAAA,CAAI,CAAC;IAC9E;uGA3EW,sBAAsB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;2FAAtB,sBAAsB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,iBAAA,EAAA,MAAA,EAAA,EAAA,aAAA,EAAA,EAAA,iBAAA,EAAA,eAAA,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,OAAA,EAAA,EAAA,qBAAA,EAAA,uBAAA,EAAA,sBAAA,EAAA,wBAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,CAAA;;2FAAtB,sBAAsB,EAAA,UAAA,EAAA,CAAA;kBAHlC,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACT,oBAAA,QAAQ,EAAE;AACX,iBAAA;;;ACLD;;AAEG;;;;"}
|