\n"
},
{
"path": "playground/src/app/app.component.scss",
"content": "div {\n position: absolute;\n height: 50%;\n width: 50%;\n top: 0;\n left: 0;\n background-color: red;\n border: 2px solid black;\n}\n"
},
{
"path": "playground/src/app/app.component.ts",
"content": "import { Component } from '@angular/core';\nimport { ResizedEvent } from 'angular-resize-event';\n\n@Component({\n selector: 'app-root',\n templateUrl: './app.component.html',\n styleUrls: ['./app.component.scss']\n})\nexport class AppComponent {\n width = 0;\n height = 0;\n\n onResized(event: ResizedEvent) {\n console.warn('event', event);\n this.width = event.newRect.width;\n this.height = event.newRect.height;\n }\n}\n"
},
{
"path": "playground/src/app/app.module.ts",
"content": "import { NgModule } from '@angular/core';\nimport { BrowserModule } from '@angular/platform-browser';\n\nimport { AppComponent } from './app.component';\nimport { AngularResizeEventModule } from 'angular-resize-event';\n\n@NgModule({\n declarations: [\n AppComponent\n ],\n imports: [\n BrowserModule,\n AngularResizeEventModule\n ],\n providers: [],\n bootstrap: [AppComponent]\n})\nexport class AppModule { }\n"
},
{
"path": "playground/src/index.html",
"content": "\n\n\n \n Playground\n \n \n \n\n\n \n\n\n"
},
{
"path": "playground/src/main.ts",
"content": "import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';\n\nimport { AppModule } from './app/app.module';\n\nplatformBrowserDynamic().bootstrapModule(AppModule)\n .catch(err => console.error(err));\n"
},
{
"path": "playground/src/polyfills.ts",
"content": "/**\n * This file includes polyfills needed by Angular and is loaded before the app.\n * You can add your own extra polyfills to this file.\n *\n * This file is divided into 2 sections:\n * 1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers.\n * 2. Application imports. Files imported after ZoneJS that should be loaded before your main\n * file.\n *\n * The current setup is for so-called \"evergreen\" browsers; the last versions of browsers that\n * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera),\n * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile.\n *\n * Learn more in https://angular.io/guide/browser-support\n */\n\n/***************************************************************************************************\n * BROWSER POLYFILLS\n */\n\n/**\n * IE11 requires the following for NgClass support on SVG elements\n */\n// import 'classlist.js'; // Run `npm install --save classlist.js`.\n\n/**\n * Web Animations `@angular/platform-browser/animations`\n * Only required if AnimationBuilder is used within the application and using IE/Edge or Safari.\n * Standard animation support in Angular DOES NOT require any polyfills (as of Angular 6.0).\n */\n// import 'web-animations-js'; // Run `npm install --save web-animations-js`.\n\n/**\n * By default, zone.js will patch all possible macroTask and DomEvents\n * user can disable parts of macroTask/DomEvents patch by setting following flags\n * because those flags need to be set before `zone.js` being loaded, and webpack\n * will put import in the top of bundle, so user need to create a separate file\n * in this directory (for example: zone-flags.ts), and put the following flags\n * into that file, and then add the following code before importing zone.js.\n * import './zone-flags';\n *\n * The flags allowed in zone-flags.ts are listed here.\n *\n * The following flags will work for all browsers.\n *\n * (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame\n * (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick\n * (window as any).__zone_symbol__UNPATCHED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames\n *\n * in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js\n * with the following flag, it will bypass `zone.js` patch for IE/Edge\n *\n * (window as any).__Zone_enable_cross_context_check = true;\n *\n */\n\n/***************************************************************************************************\n * Zone JS is required by default for Angular itself.\n */\nimport 'zone.js'; // Included with Angular CLI.\n\n\n/***************************************************************************************************\n * APPLICATION IMPORTS\n */\n"
},
{
"path": "playground/src/styles.scss",
"content": "/* You can add global styles to this file, and also import other style files */\n"
},
{
"path": "playground/tsconfig.app.json",
"content": "/* To learn more about this file see: https://angular.io/config/tsconfig. */\n{\n \"extends\": \"./tsconfig.json\",\n \"compilerOptions\": {\n \"outDir\": \"./out-tsc/app\",\n \"types\": []\n },\n \"files\": [\n \"src/main.ts\",\n \"src/polyfills.ts\"\n ],\n \"include\": [\n \"src/**/*.d.ts\"\n ]\n}\n"
},
{
"path": "playground/tsconfig.json",
"content": "/* To learn more about this file see: https://angular.io/config/tsconfig. */\n{\n \"compileOnSave\": false,\n \"compilerOptions\": {\n \"baseUrl\": \"./\",\n \"outDir\": \"./dist/out-tsc\",\n \"forceConsistentCasingInFileNames\": true,\n \"strict\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"downlevelIteration\": true,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"node\",\n \"importHelpers\": true,\n \"target\": \"es2017\",\n \"module\": \"es2020\",\n \"lib\": [\n \"es2018\",\n \"dom\"\n ]\n },\n \"angularCompilerOptions\": {\n \"enableI18nLegacyMessageIdFormat\": false,\n \"strictInjectionParameters\": true,\n \"strictInputAccessModifiers\": true,\n \"strictTemplates\": true\n }\n}\n"
},
{
"path": "projects/angular-resize-event/README.md",
"content": "# AngularResizeEvent\n\nThis library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 14.0.2.\n\n## Code scaffolding\n\nRun `ng generate component component-name --project angular-resize-event` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module --project angular-resize-event`.\n> Note: Don't forget to add `--project angular-resize-event` or else it will be added to the default project in your `angular.json` file. \n\n## Build\n\nRun `ng build angular-resize-event` to build the project. The build artifacts will be stored in the `dist/` directory.\n\n## Publishing\n\nAfter building your library with `ng build angular-resize-event`, go to the dist folder `cd dist/angular-resize-event` and run `npm publish`.\n\n## Running unit tests\n\nRun `ng test angular-resize-event` to execute the unit tests via [Karma](https://karma-runner.github.io).\n\n## Further help\n\nTo get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.io/cli) page.\n"
},
{
"path": "projects/angular-resize-event/ng-package.json",
"content": "{\n \"$schema\": \"../../node_modules/ng-packagr/ng-package.schema.json\",\n \"dest\": \"../../dist/angular-resize-event\",\n \"lib\": {\n \"entryFile\": \"src/public-api.ts\"\n }\n}"
},
{
"path": "projects/angular-resize-event/package.json",
"content": "{\n \"name\": \"angular-resize-event\",\n \"version\": \"3.2.0\",\n \"repository\": {\n \"type\": \"git\",\n \"url\": \"https://github.com/vdolek/angular-resize-event\"\n },\n \"homepage\": \"https://github.com/vdolek/angular-resize-event#readme\",\n \"author\": {\n \"name\": \"Martin Volek\",\n \"email\": \"martin@vdolek.cz\"\n },\n \"keywords\": [\n \"angular\",\n \"resized\",\n \"event\"\n ],\n \"license\": \"MIT\",\n \"peerDependencies\": {\n \"@angular/common\": \">= 12.2.0 < 15\",\n \"@angular/core\": \">= 12.2.0 < 15\"\n },\n \"dependencies\": {\n \"tslib\": \"^2.3.0\"\n }\n}\n"
},
{
"path": "projects/angular-resize-event/src/lib/angular-resize-event.module.ts",
"content": "import { NgModule } from '@angular/core';\nimport { ResizedDirective } from './resized.directive';\n\n@NgModule({\n declarations: [\n ResizedDirective\n ],\n imports: [\n ],\n exports: [\n ResizedDirective\n ]\n})\nexport class AngularResizeEventModule {}\n"
},
{
"path": "projects/angular-resize-event/src/lib/resized.directive.ts",
"content": "import { Directive, ElementRef, EventEmitter, NgZone, OnDestroy, OnInit, Output } from '@angular/core';\nimport { ResizedEvent } from './resized.event';\n\n@Directive({\n selector: '[resized]'\n})\nexport class ResizedDirective implements OnInit, OnDestroy {\n private observer: ResizeObserver;\n private oldRect?: DOMRectReadOnly;\n\n @Output()\n public readonly resized;\n\n public constructor(\n private readonly element: ElementRef,\n private readonly zone: NgZone\n )\n {\n this.resized = new EventEmitter();\n this.observer = new ResizeObserver(entries => this.zone.run(() => this.observe(entries)));\n }\n\n public ngOnInit(): void {\n this.observer.observe(this.element.nativeElement)\n }\n\n public ngOnDestroy(): void {\n this.observer.disconnect();\n }\n\n private observe(entries: ResizeObserverEntry[]): void {\n const domSize = entries[0];\n const resizedEvent = new ResizedEvent(domSize.contentRect, this.oldRect);\n this.oldRect = domSize.contentRect;\n this.resized.emit(resizedEvent);\n }\n}\n\n"
},
{
"path": "projects/angular-resize-event/src/lib/resized.event.ts",
"content": "export class ResizedEvent {\n public newRect: DOMRectReadOnly;\n public oldRect?: DOMRectReadOnly;\n public isFirst: boolean;\n\n public constructor(newRect: DOMRectReadOnly, oldRect: DOMRectReadOnly | undefined) {\n this.newRect = newRect;\n this.oldRect = oldRect;\n this.isFirst = oldRect == null;\n }\n}\n"
},
{
"path": "projects/angular-resize-event/src/public-api.ts",
"content": "/*\n * Public API Surface of angular-resize-event\n */\n\nexport { ResizedEvent } from './lib/resized.event';\nexport * from './lib/resized.directive';\nexport * from './lib/angular-resize-event.module';\n"
},
{
"path": "projects/angular-resize-event/tsconfig.lib.json",
"content": "/* To learn more about this file see: https://angular.io/config/tsconfig. */\n{\n \"extends\": \"../../tsconfig.json\",\n \"compilerOptions\": {\n \"outDir\": \"../../out-tsc/lib\",\n \"target\": \"es2020\",\n \"declaration\": true,\n \"declarationMap\": true,\n \"inlineSources\": true,\n \"types\": [],\n \"lib\": [\n \"es2020\",\n \"dom\"\n ]\n }\n}\n"
},
{
"path": "projects/angular-resize-event/tsconfig.lib.prod.json",
"content": "/* To learn more about this file see: https://angular.io/config/tsconfig. */\n{\n \"extends\": \"./tsconfig.lib.json\",\n \"compilerOptions\": {\n \"declarationMap\": false\n },\n \"angularCompilerOptions\": {\n \"compilationMode\": \"partial\"\n }\n}\n"
},
{
"path": "tsconfig.json",
"content": "/* To learn more about this file see: https://angular.io/config/tsconfig. */\n{\n \"compileOnSave\": false,\n \"compilerOptions\": {\n \"paths\": {\n \"angular-resize-event\": [\n \"dist/angular-resize-event/angular-resize-event\",\n \"dist/angular-resize-event\"\n ]\n },\n \"baseUrl\": \"./\",\n \"outDir\": \"./dist/out-tsc\",\n \"forceConsistentCasingInFileNames\": true,\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"downlevelIteration\": true,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"node\",\n \"importHelpers\": true,\n \"target\": \"es2020\",\n \"module\": \"es2020\",\n \"lib\": [\n \"es2020\",\n \"dom\"\n ]\n },\n \"angularCompilerOptions\": {\n \"enableI18nLegacyMessageIdFormat\": false,\n \"strictInjectionParameters\": true,\n \"strictInputAccessModifiers\": true,\n \"strictTemplates\": true\n }\n}\n"
}
]