angular-aspect-ratio-container 18.0.7 → 19.0.2

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.
@@ -62,14 +62,13 @@ class NgAspectRatioDirective {
62
62
  setAcInnerHeight(height) {
63
63
  this.renderer.setStyle(this.hostElem.nativeElement, 'height', `${height}px`);
64
64
  }
65
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: NgAspectRatioDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
66
- static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "18.2.4", 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 });
65
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: NgAspectRatioDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
66
+ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.1.7", 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 });
67
67
  }
68
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: NgAspectRatioDirective, decorators: [{
68
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: NgAspectRatioDirective, decorators: [{
69
69
  type: Directive,
70
70
  args: [{
71
- selector: '[ngAspectRatio]',
72
- standalone: true,
71
+ selector: '[ngAspectRatio]'
73
72
  }]
74
73
  }], ctorParameters: () => [] });
75
74
 
@@ -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';\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":"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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 } 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 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":"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"}
package/package.json CHANGED
@@ -1,8 +1,8 @@
1
1
  {
2
2
  "name": "angular-aspect-ratio-container",
3
- "version": "18.0.7",
3
+ "version": "19.0.2",
4
4
  "peerDependencies": {
5
- "@angular/core": "^18.1.0"
5
+ "@angular/core": "^19.0.0"
6
6
  },
7
7
  "sideEffects": false,
8
8
  "module": "fesm2022/angular-aspect-ratio-container.mjs",
@@ -13,8 +13,6 @@
13
13
  },
14
14
  ".": {
15
15
  "types": "./index.d.ts",
16
- "esm2022": "./esm2022/angular-aspect-ratio-container.mjs",
17
- "esm": "./esm2022/angular-aspect-ratio-container.mjs",
18
16
  "default": "./fesm2022/angular-aspect-ratio-container.mjs"
19
17
  }
20
18
  },
@@ -1,5 +0,0 @@
1
- /**
2
- * Generated bundle index. Do not edit.
3
- */
4
- export * from './index';
5
- //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYW5ndWxhci1hc3BlY3QtcmF0aW8tY29udGFpbmVyLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vbGlicy9hbmd1bGFyLWFzcGVjdC1yYXRpby1jb250YWluZXIvc3JjL2FuZ3VsYXItYXNwZWN0LXJhdGlvLWNvbnRhaW5lci50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQTs7R0FFRztBQUVILGNBQWMsU0FBUyxDQUFDIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBHZW5lcmF0ZWQgYnVuZGxlIGluZGV4LiBEbyBub3QgZWRpdC5cbiAqL1xuXG5leHBvcnQgKiBmcm9tICcuL2luZGV4JztcbiJdfQ==
package/esm2022/index.mjs DELETED
@@ -1,2 +0,0 @@
1
- export * from './lib/aspect-ratio-container';
2
- //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5kZXguanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi9saWJzL2FuZ3VsYXItYXNwZWN0LXJhdGlvLWNvbnRhaW5lci9zcmMvaW5kZXgudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsY0FBYyw4QkFBOEIsQ0FBQyIsInNvdXJjZXNDb250ZW50IjpbImV4cG9ydCAqIGZyb20gJy4vbGliL2FzcGVjdC1yYXRpby1jb250YWluZXInO1xuIl19
@@ -1,2 +0,0 @@
1
- export { NgAspectRatioDirective } from './ng-aspect-ratio.directive';
2
- //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5kZXguanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi9saWJzL2FuZ3VsYXItYXNwZWN0LXJhdGlvLWNvbnRhaW5lci9zcmMvbGliL2FzcGVjdC1yYXRpby1jb250YWluZXIvaW5kZXgudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLHNCQUFzQixFQUFFLE1BQU0sNkJBQTZCLENBQUMiLCJzb3VyY2VzQ29udGVudCI6WyJleHBvcnQgeyBOZ0FzcGVjdFJhdGlvRGlyZWN0aXZlIH0gZnJvbSAnLi9uZy1hc3BlY3QtcmF0aW8uZGlyZWN0aXZlJztcbiJdfQ==
@@ -1,74 +0,0 @@
1
- import { ElementRef, Renderer2, Directive, input, inject } from '@angular/core';
2
- import * as i0 from "@angular/core";
3
- export class NgAspectRatioDirective {
4
- renderer = inject(Renderer2);
5
- hostElem = inject(ElementRef);
6
- observer;
7
- targetRatio = input.required({ alias: 'ngAspectRatio' });
8
- sizingMode = input('match-parent');
9
- constructor() {
10
- this.observer = new ResizeObserver(() => {
11
- this.calculateAndSetAspect();
12
- });
13
- }
14
- ngAfterViewInit() {
15
- this.observer.observe(this.hostElem.nativeElement.parentElement);
16
- }
17
- ngOnDestroy() {
18
- this.observer.disconnect();
19
- }
20
- calculateAndSetAspect() {
21
- this.renderer.removeStyle(this.hostElem.nativeElement, 'width');
22
- this.renderer.removeStyle(this.hostElem.nativeElement, 'height');
23
- let targetWidth;
24
- let targetHeight;
25
- if (this.sizingMode() === 'match-parent') {
26
- const hostWidth = this.hostElem.nativeElement.parentElement.offsetWidth;
27
- const hostHeight = this.hostElem.nativeElement.parentElement.offsetHeight;
28
- const hostAspectRatio = hostWidth / hostHeight;
29
- if (hostAspectRatio >= this.targetRatio()) {
30
- // use full height as base
31
- targetHeight = hostHeight;
32
- targetWidth = targetHeight * this.targetRatio();
33
- }
34
- else {
35
- // use full width as base
36
- targetWidth = hostWidth;
37
- targetHeight = targetWidth * (1 / this.targetRatio());
38
- }
39
- }
40
- else {
41
- // Add +1 to the dimensions because decimals get rounded
42
- const contentWidth = this.hostElem.nativeElement.offsetWidth + 1;
43
- const contentHeight = this.hostElem.nativeElement.offsetHeight + 1;
44
- const currentRatio = contentWidth / contentHeight;
45
- if (currentRatio >= this.targetRatio()) {
46
- targetWidth = contentWidth;
47
- targetHeight = targetWidth * (1 / this.targetRatio());
48
- }
49
- else {
50
- targetHeight = contentHeight;
51
- targetWidth = targetHeight * this.targetRatio();
52
- }
53
- }
54
- // Set calculated dimensions
55
- this.setAcInnerWidth(targetWidth);
56
- this.setAcInnerHeight(targetHeight);
57
- }
58
- setAcInnerWidth(width) {
59
- this.renderer.setStyle(this.hostElem.nativeElement, 'width', `${width}px`);
60
- }
61
- setAcInnerHeight(height) {
62
- this.renderer.setStyle(this.hostElem.nativeElement, 'height', `${height}px`);
63
- }
64
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: NgAspectRatioDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
65
- static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "18.2.4", 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 });
66
- }
67
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: NgAspectRatioDirective, decorators: [{
68
- type: Directive,
69
- args: [{
70
- selector: '[ngAspectRatio]',
71
- standalone: true,
72
- }]
73
- }], ctorParameters: () => [] });
74
- //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibmctYXNwZWN0LXJhdGlvLmRpcmVjdGl2ZS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL2xpYnMvYW5ndWxhci1hc3BlY3QtcmF0aW8tY29udGFpbmVyL3NyYy9saWIvYXNwZWN0LXJhdGlvLWNvbnRhaW5lci9uZy1hc3BlY3QtcmF0aW8uZGlyZWN0aXZlLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxVQUFVLEVBQWlCLFNBQVMsRUFBYSxTQUFTLEVBQUUsS0FBSyxFQUFFLE1BQU0sRUFBRSxNQUFNLGVBQWUsQ0FBQzs7QUFPMUcsTUFBTSxPQUFPLHNCQUFzQjtJQUNoQixRQUFRLEdBQUcsTUFBTSxDQUFDLFNBQVMsQ0FBQyxDQUFDO0lBQzdCLFFBQVEsR0FBRyxNQUFNLENBQUMsVUFBVSxDQUFDLENBQUM7SUFDOUIsUUFBUSxDQUFpQjtJQUUxQyxXQUFXLEdBQUcsS0FBSyxDQUFDLFFBQVEsQ0FBUyxFQUFFLEtBQUssRUFBRSxlQUFlLEVBQUUsQ0FBQyxDQUFDO0lBQ2pFLFVBQVUsR0FBRyxLQUFLLENBQWEsY0FBYyxDQUFDLENBQUM7SUFFL0M7UUFDRSxJQUFJLENBQUMsUUFBUSxHQUFHLElBQUksY0FBYyxDQUFDLEdBQUcsRUFBRTtZQUN0QyxJQUFJLENBQUMscUJBQXFCLEVBQUUsQ0FBQztRQUMvQixDQUFDLENBQUMsQ0FBQztJQUNMLENBQUM7SUFFRCxlQUFlO1FBQ2IsSUFBSSxDQUFDLFFBQVEsQ0FBQyxPQUFPLENBQUMsSUFBSSxDQUFDLFFBQVEsQ0FBQyxhQUFhLENBQUMsYUFBYSxDQUFDLENBQUM7SUFDbkUsQ0FBQztJQUVELFdBQVc7UUFDVCxJQUFJLENBQUMsUUFBUSxDQUFDLFVBQVUsRUFBRSxDQUFDO0lBQzdCLENBQUM7SUFFTSxxQkFBcUI7UUFDMUIsSUFBSSxDQUFDLFFBQVEsQ0FBQyxXQUFXLENBQUMsSUFBSSxDQUFDLFFBQVEsQ0FBQyxhQUFhLEVBQUUsT0FBTyxDQUFDLENBQUM7UUFDaEUsSUFBSSxDQUFDLFFBQVEsQ0FBQyxXQUFXLENBQUMsSUFBSSxDQUFDLFFBQVEsQ0FBQyxhQUFhLEVBQUUsUUFBUSxDQUFDLENBQUM7UUFFakUsSUFBSSxXQUFtQixDQUFDO1FBQ3hCLElBQUksWUFBb0IsQ0FBQztRQUV6QixJQUFJLElBQUksQ0FBQyxVQUFVLEVBQUUsS0FBSyxjQUFjLEVBQUUsQ0FBQztZQUN6QyxNQUFNLFNBQVMsR0FBRyxJQUFJLENBQUMsUUFBUSxDQUFDLGFBQWEsQ0FBQyxhQUFhLENBQUMsV0FBVyxDQUFDO1lBQ3hFLE1BQU0sVUFBVSxHQUFHLElBQUksQ0FBQyxRQUFRLENBQUMsYUFBYSxDQUFDLGFBQWEsQ0FBQyxZQUFZLENBQUM7WUFDMUUsTUFBTSxlQUFlLEdBQUcsU0FBUyxHQUFHLFVBQVUsQ0FBQztZQUUvQyxJQUFJLGVBQWUsSUFBSSxJQUFJLENBQUMsV0FBVyxFQUFFLEVBQUUsQ0FBQztnQkFDMUMsMEJBQTBCO2dCQUMxQixZQUFZLEdBQUcsVUFBVSxDQUFDO2dCQUMxQixXQUFXLEdBQUcsWUFBWSxHQUFHLElBQUksQ0FBQyxXQUFXLEVBQUUsQ0FBQztZQUNsRCxDQUFDO2lCQUFNLENBQUM7Z0JBQ04seUJBQXlCO2dCQUN6QixXQUFXLEdBQUcsU0FBUyxDQUFDO2dCQUN4QixZQUFZLEdBQUcsV0FBVyxHQUFHLENBQUMsQ0FBQyxHQUFHLElBQUksQ0FBQyxXQUFXLEVBQUUsQ0FBQyxDQUFDO1lBQ3hELENBQUM7UUFDSCxDQUFDO2FBQU0sQ0FBQztZQUNOLHdEQUF3RDtZQUN4RCxNQUFNLFlBQVksR0FBRyxJQUFJLENBQUMsUUFBUSxDQUFDLGFBQWEsQ0FBQyxXQUFXLEdBQUcsQ0FBQyxDQUFDO1lBQ2pFLE1BQU0sYUFBYSxHQUFHLElBQUksQ0FBQyxRQUFRLENBQUMsYUFBYSxDQUFDLFlBQVksR0FBRyxDQUFDLENBQUM7WUFFbkUsTUFBTSxZQUFZLEdBQUcsWUFBWSxHQUFHLGFBQWEsQ0FBQztZQUNsRCxJQUFJLFlBQVksSUFBSSxJQUFJLENBQUMsV0FBVyxFQUFFLEVBQUUsQ0FBQztnQkFDdkMsV0FBVyxHQUFHLFlBQVksQ0FBQztnQkFDM0IsWUFBWSxHQUFHLFdBQVcsR0FBRyxDQUFDLENBQUMsR0FBRyxJQUFJLENBQUMsV0FBVyxFQUFFLENBQUMsQ0FBQztZQUN4RCxDQUFDO2lCQUFNLENBQUM7Z0JBQ04sWUFBWSxHQUFHLGFBQWEsQ0FBQztnQkFDN0IsV0FBVyxHQUFHLFlBQVksR0FBRyxJQUFJLENBQUMsV0FBVyxFQUFFLENBQUM7WUFDbEQsQ0FBQztRQUNILENBQUM7UUFDRCw0QkFBNEI7UUFDNUIsSUFBSSxDQUFDLGVBQWUsQ0FBQyxXQUFXLENBQUMsQ0FBQztRQUNsQyxJQUFJLENBQUMsZ0JBQWdCLENBQUMsWUFBWSxDQUFDLENBQUM7SUFDdEMsQ0FBQztJQUVPLGVBQWUsQ0FBQyxLQUFhO1FBQ25DLElBQUksQ0FBQyxRQUFRLENBQUMsUUFBUSxDQUFDLElBQUksQ0FBQyxRQUFRLENBQUMsYUFBYSxFQUFFLE9BQU8sRUFBRSxHQUFHLEtBQUssSUFBSSxDQUFDLENBQUM7SUFDN0UsQ0FBQztJQUVPLGdCQUFnQixDQUFDLE1BQWM7UUFDckMsSUFBSSxDQUFDLFFBQVEsQ0FBQyxRQUFRLENBQUMsSUFBSSxDQUFDLFFBQVEsQ0FBQyxhQUFhLEVBQUUsUUFBUSxFQUFFLEdBQUcsTUFBTSxJQUFJLENBQUMsQ0FBQztJQUMvRSxDQUFDO3VHQXBFVSxzQkFBc0I7MkZBQXRCLHNCQUFzQjs7MkZBQXRCLHNCQUFzQjtrQkFKbEMsU0FBUzttQkFBQztvQkFDVCxRQUFRLEVBQUUsaUJBQWlCO29CQUMzQixVQUFVLEVBQUUsSUFBSTtpQkFDakIiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBFbGVtZW50UmVmLCBBZnRlclZpZXdJbml0LCBSZW5kZXJlcjIsIE9uRGVzdHJveSwgRGlyZWN0aXZlLCBpbnB1dCwgaW5qZWN0IH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBTaXppbmdNb2RlIH0gZnJvbSAnLi9zaXppbmctbW9kZSc7XG5cbkBEaXJlY3RpdmUoe1xuICBzZWxlY3RvcjogJ1tuZ0FzcGVjdFJhdGlvXScsXG4gIHN0YW5kYWxvbmU6IHRydWUsXG59KVxuZXhwb3J0IGNsYXNzIE5nQXNwZWN0UmF0aW9EaXJlY3RpdmUgaW1wbGVtZW50cyBBZnRlclZpZXdJbml0LCBPbkRlc3Ryb3kge1xuICBwcml2YXRlIHJlYWRvbmx5IHJlbmRlcmVyID0gaW5qZWN0KFJlbmRlcmVyMik7XG4gIHByaXZhdGUgcmVhZG9ubHkgaG9zdEVsZW0gPSBpbmplY3QoRWxlbWVudFJlZik7XG4gIHByaXZhdGUgcmVhZG9ubHkgb2JzZXJ2ZXI6IFJlc2l6ZU9ic2VydmVyO1xuXG4gIHRhcmdldFJhdGlvID0gaW5wdXQucmVxdWlyZWQ8bnVtYmVyPih7IGFsaWFzOiAnbmdBc3BlY3RSYXRpbycgfSk7XG4gIHNpemluZ01vZGUgPSBpbnB1dDxTaXppbmdNb2RlPignbWF0Y2gtcGFyZW50Jyk7XG5cbiAgY29uc3RydWN0b3IoKSB7XG4gICAgdGhpcy5vYnNlcnZlciA9IG5ldyBSZXNpemVPYnNlcnZlcigoKSA9PiB7XG4gICAgICB0aGlzLmNhbGN1bGF0ZUFuZFNldEFzcGVjdCgpO1xuICAgIH0pO1xuICB9XG5cbiAgbmdBZnRlclZpZXdJbml0KCkge1xuICAgIHRoaXMub2JzZXJ2ZXIub2JzZXJ2ZSh0aGlzLmhvc3RFbGVtLm5hdGl2ZUVsZW1lbnQucGFyZW50RWxlbWVudCk7XG4gIH1cblxuICBuZ09uRGVzdHJveSgpIHtcbiAgICB0aGlzLm9ic2VydmVyLmRpc2Nvbm5lY3QoKTtcbiAgfVxuXG4gIHB1YmxpYyBjYWxjdWxhdGVBbmRTZXRBc3BlY3QoKTogdm9pZCB7XG4gICAgdGhpcy5yZW5kZXJlci5yZW1vdmVTdHlsZSh0aGlzLmhvc3RFbGVtLm5hdGl2ZUVsZW1lbnQsICd3aWR0aCcpO1xuICAgIHRoaXMucmVuZGVyZXIucmVtb3ZlU3R5bGUodGhpcy5ob3N0RWxlbS5uYXRpdmVFbGVtZW50LCAnaGVpZ2h0Jyk7XG5cbiAgICBsZXQgdGFyZ2V0V2lkdGg6IG51bWJlcjtcbiAgICBsZXQgdGFyZ2V0SGVpZ2h0OiBudW1iZXI7XG5cbiAgICBpZiAodGhpcy5zaXppbmdNb2RlKCkgPT09ICdtYXRjaC1wYXJlbnQnKSB7XG4gICAgICBjb25zdCBob3N0V2lkdGggPSB0aGlzLmhvc3RFbGVtLm5hdGl2ZUVsZW1lbnQucGFyZW50RWxlbWVudC5vZmZzZXRXaWR0aDtcbiAgICAgIGNvbnN0IGhvc3RIZWlnaHQgPSB0aGlzLmhvc3RFbGVtLm5hdGl2ZUVsZW1lbnQucGFyZW50RWxlbWVudC5vZmZzZXRIZWlnaHQ7XG4gICAgICBjb25zdCBob3N0QXNwZWN0UmF0aW8gPSBob3N0V2lkdGggLyBob3N0SGVpZ2h0O1xuXG4gICAgICBpZiAoaG9zdEFzcGVjdFJhdGlvID49IHRoaXMudGFyZ2V0UmF0aW8oKSkge1xuICAgICAgICAvLyB1c2UgZnVsbCBoZWlnaHQgYXMgYmFzZVxuICAgICAgICB0YXJnZXRIZWlnaHQgPSBob3N0SGVpZ2h0O1xuICAgICAgICB0YXJnZXRXaWR0aCA9IHRhcmdldEhlaWdodCAqIHRoaXMudGFyZ2V0UmF0aW8oKTtcbiAgICAgIH0gZWxzZSB7XG4gICAgICAgIC8vIHVzZSBmdWxsIHdpZHRoIGFzIGJhc2VcbiAgICAgICAgdGFyZ2V0V2lkdGggPSBob3N0V2lkdGg7XG4gICAgICAgIHRhcmdldEhlaWdodCA9IHRhcmdldFdpZHRoICogKDEgLyB0aGlzLnRhcmdldFJhdGlvKCkpO1xuICAgICAgfVxuICAgIH0gZWxzZSB7XG4gICAgICAvLyBBZGQgKzEgdG8gdGhlIGRpbWVuc2lvbnMgYmVjYXVzZSBkZWNpbWFscyBnZXQgcm91bmRlZFxuICAgICAgY29uc3QgY29udGVudFdpZHRoID0gdGhpcy5ob3N0RWxlbS5uYXRpdmVFbGVtZW50Lm9mZnNldFdpZHRoICsgMTtcbiAgICAgIGNvbnN0IGNvbnRlbnRIZWlnaHQgPSB0aGlzLmhvc3RFbGVtLm5hdGl2ZUVsZW1lbnQub2Zmc2V0SGVpZ2h0ICsgMTtcblxuICAgICAgY29uc3QgY3VycmVudFJhdGlvID0gY29udGVudFdpZHRoIC8gY29udGVudEhlaWdodDtcbiAgICAgIGlmIChjdXJyZW50UmF0aW8gPj0gdGhpcy50YXJnZXRSYXRpbygpKSB7XG4gICAgICAgIHRhcmdldFdpZHRoID0gY29udGVudFdpZHRoO1xuICAgICAgICB0YXJnZXRIZWlnaHQgPSB0YXJnZXRXaWR0aCAqICgxIC8gdGhpcy50YXJnZXRSYXRpbygpKTtcbiAgICAgIH0gZWxzZSB7XG4gICAgICAgIHRhcmdldEhlaWdodCA9IGNvbnRlbnRIZWlnaHQ7XG4gICAgICAgIHRhcmdldFdpZHRoID0gdGFyZ2V0SGVpZ2h0ICogdGhpcy50YXJnZXRSYXRpbygpO1xuICAgICAgfVxuICAgIH1cbiAgICAvLyBTZXQgY2FsY3VsYXRlZCBkaW1lbnNpb25zXG4gICAgdGhpcy5zZXRBY0lubmVyV2lkdGgodGFyZ2V0V2lkdGgpO1xuICAgIHRoaXMuc2V0QWNJbm5lckhlaWdodCh0YXJnZXRIZWlnaHQpO1xuICB9XG5cbiAgcHJpdmF0ZSBzZXRBY0lubmVyV2lkdGgod2lkdGg6IG51bWJlcikge1xuICAgIHRoaXMucmVuZGVyZXIuc2V0U3R5bGUodGhpcy5ob3N0RWxlbS5uYXRpdmVFbGVtZW50LCAnd2lkdGgnLCBgJHt3aWR0aH1weGApO1xuICB9XG5cbiAgcHJpdmF0ZSBzZXRBY0lubmVySGVpZ2h0KGhlaWdodDogbnVtYmVyKSB7XG4gICAgdGhpcy5yZW5kZXJlci5zZXRTdHlsZSh0aGlzLmhvc3RFbGVtLm5hdGl2ZUVsZW1lbnQsICdoZWlnaHQnLCBgJHtoZWlnaHR9cHhgKTtcbiAgfVxufVxuIl19
@@ -1,2 +0,0 @@
1
- export {};
2
- //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic2l6aW5nLW1vZGUuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi9saWJzL2FuZ3VsYXItYXNwZWN0LXJhdGlvLWNvbnRhaW5lci9zcmMvbGliL2FzcGVjdC1yYXRpby1jb250YWluZXIvc2l6aW5nLW1vZGUudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IiIsInNvdXJjZXNDb250ZW50IjpbImV4cG9ydCB0eXBlIFNpemluZ01vZGUgPSAnZml0LWNvbnRlbnQnIHwgJ21hdGNoLXBhcmVudCc7XG4iXX0=