diff --git a/.gitignore b/.gitignore index e1166b2..98c09cb 100644 --- a/.gitignore +++ b/.gitignore @@ -1,7 +1,7 @@ # See http://help.github.com/ignore-files/ for more about ignoring files. # compiled output -/dist +dist /tmp /out-tsc # Only exists if Bazel was run diff --git a/README.md b/README.md index 9cbc024..a43ca76 100644 --- a/README.md +++ b/README.md @@ -16,6 +16,10 @@ It is as simple as: It internally uses `ResizeSensor` from [CSS Element Queries](https://github.com/marcj/css-element-queries). +## Playground + +[StackBlitz playground](https://stackblitz.com/edit/angular-resize-event-playground?file=src/app/app.component.html) + ## Using the library Import the library in any Angular application by running: diff --git a/playground/.browserslistrc b/playground/.browserslistrc deleted file mode 100644 index 0ccadaf..0000000 --- a/playground/.browserslistrc +++ /dev/null @@ -1,18 +0,0 @@ -# This file is used by the build system to adjust CSS and JS output to support the specified browsers below. -# For additional information regarding the format and rule options, please see: -# https://github.com/browserslist/browserslist#queries - -# For the full list of supported browsers by the Angular framework, please see: -# https://angular.io/guide/browser-support - -# You can see what browsers were selected by your queries by running: -# npx browserslist - -last 1 Chrome version -last 1 Firefox version -last 2 Edge major versions -last 2 Safari major versions -last 2 iOS major versions -Firefox ESR -not IE 9-10 # Angular support for IE 9-10 has been deprecated and will be removed as of Angular v11. To opt-in, remove the 'not' prefix on this line. -not IE 11 # Angular supports IE 11 only as an opt-in. To opt-in, remove the 'not' prefix on this line. diff --git a/playground/.editorconfig b/playground/.editorconfig deleted file mode 100644 index 59d9a3a..0000000 --- a/playground/.editorconfig +++ /dev/null @@ -1,16 +0,0 @@ -# Editor configuration, see https://editorconfig.org -root = true - -[*] -charset = utf-8 -indent_style = space -indent_size = 2 -insert_final_newline = true -trim_trailing_whitespace = true - -[*.ts] -quote_type = single - -[*.md] -max_line_length = off -trim_trailing_whitespace = false diff --git a/playground/.gitignore b/playground/.gitignore deleted file mode 100644 index 86d943a..0000000 --- a/playground/.gitignore +++ /dev/null @@ -1,46 +0,0 @@ -# See http://help.github.com/ignore-files/ for more about ignoring files. - -# compiled output -/dist -/tmp -/out-tsc -# Only exists if Bazel was run -/bazel-out - -# dependencies -/node_modules - -# profiling files -chrome-profiler-events*.json -speed-measure-plugin*.json - -# IDEs and editors -/.idea -.project -.classpath -.c9/ -*.launch -.settings/ -*.sublime-workspace - -# IDE - VSCode -.vscode/* -!.vscode/settings.json -!.vscode/tasks.json -!.vscode/launch.json -!.vscode/extensions.json -.history/* - -# misc -/.sass-cache -/connect.lock -/coverage -/libpeerconnection.log -npm-debug.log -yarn-error.log -testem.log -/typings - -# System Files -.DS_Store -Thumbs.db diff --git a/playground/angular.json b/playground/angular.json index f7d3c29..7a03df9 100644 --- a/playground/angular.json +++ b/playground/angular.json @@ -3,32 +3,27 @@ "version": 1, "newProjectRoot": "projects", "projects": { - "angular-resize-event-playground": { - "projectType": "application", - "schematics": { - "@schematics/angular:component": { - "style": "scss" - } - }, + "demo": { "root": "", "sourceRoot": "src", + "projectType": "application", "prefix": "app", + "schematics": {}, "architect": { "build": { "builder": "@angular-devkit/build-angular:browser", "options": { - "outputPath": "dist/angular-resize-event-playground", + "outputPath": "dist/demo", "index": "src/index.html", "main": "src/main.ts", "polyfills": "src/polyfills.ts", - "tsConfig": "tsconfig.app.json", - "aot": true, + "tsConfig": "src/tsconfig.app.json", "assets": [ "src/favicon.ico", "src/assets" ], "styles": [ - "src/styles.scss" + "src/styles.css" ], "scripts": [] }, @@ -45,39 +40,28 @@ "sourceMap": false, "extractCss": true, "namedChunks": false, + "aot": true, "extractLicenses": true, "vendorChunk": false, - "buildOptimizer": true, - "budgets": [ - { - "type": "initial", - "maximumWarning": "2mb", - "maximumError": "5mb" - }, - { - "type": "anyComponentStyle", - "maximumWarning": "6kb", - "maximumError": "10kb" - } - ] + "buildOptimizer": true } } }, "serve": { "builder": "@angular-devkit/build-angular:dev-server", "options": { - "browserTarget": "angular-resize-event-playground:build" + "browserTarget": "demo:build" }, "configurations": { "production": { - "browserTarget": "angular-resize-event-playground:build:production" + "browserTarget": "demo:build:production" } } }, "extract-i18n": { "builder": "@angular-devkit/build-angular:extract-i18n", "options": { - "browserTarget": "angular-resize-event-playground:build" + "browserTarget": "demo:build" } }, "test": { @@ -85,44 +69,32 @@ "options": { "main": "src/test.ts", "polyfills": "src/polyfills.ts", - "tsConfig": "tsconfig.spec.json", - "karmaConfig": "karma.conf.js", + "tsConfig": "src/tsconfig.spec.json", + "karmaConfig": "src/karma.conf.js", + "styles": [ + "styles.css" + ], + "scripts": [], "assets": [ "src/favicon.ico", "src/assets" - ], - "styles": [ - "src/styles.scss" - ], - "scripts": [] + ] } }, "lint": { "builder": "@angular-devkit/build-angular:tslint", "options": { "tsConfig": [ - "tsconfig.app.json", - "tsconfig.spec.json", - "e2e/tsconfig.json" + "src/tsconfig.app.json", + "src/tsconfig.spec.json" ], "exclude": [ "**/node_modules/**" ] } - }, - "e2e": { - "builder": "@angular-devkit/build-angular:protractor", - "options": { - "protractorConfig": "e2e/protractor.conf.js", - "devServerTarget": "angular-resize-event-playground:serve" - }, - "configurations": { - "production": { - "devServerTarget": "angular-resize-event-playground:serve:production" - } - } } } - }}, - "defaultProject": "angular-resize-event-playground" -} + } + }, + "defaultProject": "demo" +} \ No newline at end of file diff --git a/playground/package-lock.json b/playground/package-lock.json index 639a1f9..2969c75 100644 --- a/playground/package-lock.json +++ b/playground/package-lock.json @@ -12,6 +12,23 @@ "requires": { "@angular-devkit/core": "10.0.8", "rxjs": "6.5.5" + }, + "dependencies": { + "rxjs": { + "version": "6.5.5", + "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-6.5.5.tgz", + "integrity": "sha512-WfQI+1gohdf0Dai/Bbmk5L5ItH5tYqm3ki2c5GdWhKjalzjg93N3avFjVStyZZz+A2Em+ZxKH5bNghw9UeylGQ==", + "dev": true, + "requires": { + "tslib": "^1.9.0" + } + }, + "tslib": { + "version": "1.13.0", + "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.13.0.tgz", + "integrity": "sha512-i/6DQjL8Xf3be4K/E6Wgpekn5Qasl1usyw++dAA35Ue5orEn65VIxOA+YvNNl9HV3qv70T7CNwjODHZrLwvd1Q==", + "dev": true + } } }, "@angular-devkit/build-angular": { @@ -85,6 +102,23 @@ "webpack-sources": "1.4.3", "webpack-subresource-integrity": "1.4.1", "worker-plugin": "4.0.3" + }, + "dependencies": { + "rxjs": { + "version": "6.5.5", + "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-6.5.5.tgz", + "integrity": "sha512-WfQI+1gohdf0Dai/Bbmk5L5ItH5tYqm3ki2c5GdWhKjalzjg93N3avFjVStyZZz+A2Em+ZxKH5bNghw9UeylGQ==", + "dev": true, + "requires": { + "tslib": "^1.9.0" + } + }, + "tslib": { + "version": "1.13.0", + "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.13.0.tgz", + "integrity": "sha512-i/6DQjL8Xf3be4K/E6Wgpekn5Qasl1usyw++dAA35Ue5orEn65VIxOA+YvNNl9HV3qv70T7CNwjODHZrLwvd1Q==", + "dev": true + } } }, "@angular-devkit/build-optimizer": { @@ -116,6 +150,23 @@ "@angular-devkit/architect": "0.1000.8", "@angular-devkit/core": "10.0.8", "rxjs": "6.5.5" + }, + "dependencies": { + "rxjs": { + "version": "6.5.5", + "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-6.5.5.tgz", + "integrity": "sha512-WfQI+1gohdf0Dai/Bbmk5L5ItH5tYqm3ki2c5GdWhKjalzjg93N3avFjVStyZZz+A2Em+ZxKH5bNghw9UeylGQ==", + "dev": true, + "requires": { + "tslib": "^1.9.0" + } + }, + "tslib": { + "version": "1.13.0", + "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.13.0.tgz", + "integrity": "sha512-i/6DQjL8Xf3be4K/E6Wgpekn5Qasl1usyw++dAA35Ue5orEn65VIxOA+YvNNl9HV3qv70T7CNwjODHZrLwvd1Q==", + "dev": true + } } }, "@angular-devkit/core": { @@ -129,6 +180,23 @@ "magic-string": "0.25.7", "rxjs": "6.5.5", "source-map": "0.7.3" + }, + "dependencies": { + "rxjs": { + "version": "6.5.5", + "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-6.5.5.tgz", + "integrity": "sha512-WfQI+1gohdf0Dai/Bbmk5L5ItH5tYqm3ki2c5GdWhKjalzjg93N3avFjVStyZZz+A2Em+ZxKH5bNghw9UeylGQ==", + "dev": true, + "requires": { + "tslib": "^1.9.0" + } + }, + "tslib": { + "version": "1.13.0", + "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.13.0.tgz", + "integrity": "sha512-i/6DQjL8Xf3be4K/E6Wgpekn5Qasl1usyw++dAA35Ue5orEn65VIxOA+YvNNl9HV3qv70T7CNwjODHZrLwvd1Q==", + "dev": true + } } }, "@angular-devkit/schematics": { @@ -140,6 +208,23 @@ "@angular-devkit/core": "10.0.8", "ora": "4.0.4", "rxjs": "6.5.5" + }, + "dependencies": { + "rxjs": { + "version": "6.5.5", + "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-6.5.5.tgz", + "integrity": "sha512-WfQI+1gohdf0Dai/Bbmk5L5ItH5tYqm3ki2c5GdWhKjalzjg93N3avFjVStyZZz+A2Em+ZxKH5bNghw9UeylGQ==", + "dev": true, + "requires": { + "tslib": "^1.9.0" + } + }, + "tslib": { + "version": "1.13.0", + "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.13.0.tgz", + "integrity": "sha512-i/6DQjL8Xf3be4K/E6Wgpekn5Qasl1usyw++dAA35Ue5orEn65VIxOA+YvNNl9HV3qv70T7CNwjODHZrLwvd1Q==", + "dev": true + } } }, "@angular/animations": { @@ -845,9 +930,9 @@ } }, "@babel/parser": { - "version": "7.11.4", - "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.11.4.tgz", - "integrity": "sha512-MggwidiH+E9j5Sh8pbrX5sJvMcsqS5o+7iB42M9/k0CD63MjYbdP4nhSh7uB5wnv2/RVzTZFTxzF/kIa5mrCqA==", + "version": "7.11.5", + "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.11.5.tgz", + "integrity": "sha512-X9rD8qqm695vgmeaQ4fvz/o3+Wk4ZzQvSHkDBgpYKxpD4qTAUm88ZKtHkVqIOsYFFbIQ6wQYhC6q7pjqVK0E0Q==", "dev": true }, "@babel/plugin-proposal-async-generator-functions": { @@ -1460,45 +1545,45 @@ } }, "@babel/traverse": { - "version": "7.11.0", - "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.11.0.tgz", - "integrity": "sha512-ZB2V+LskoWKNpMq6E5UUCrjtDUh5IOTAyIl0dTjIEoXum/iKWkoIEKIRDnUucO6f+2FzNkE0oD4RLKoPIufDtg==", + "version": "7.11.5", + "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.11.5.tgz", + "integrity": "sha512-EjiPXt+r7LiCZXEfRpSJd+jUMnBd4/9OUv7Nx3+0u9+eimMwJmG0Q98lw4/289JCoxSE8OolDMNZaaF/JZ69WQ==", "dev": true, "requires": { "@babel/code-frame": "^7.10.4", - "@babel/generator": "^7.11.0", + "@babel/generator": "^7.11.5", "@babel/helper-function-name": "^7.10.4", "@babel/helper-split-export-declaration": "^7.11.0", - "@babel/parser": "^7.11.0", - "@babel/types": "^7.11.0", + "@babel/parser": "^7.11.5", + "@babel/types": "^7.11.5", "debug": "^4.1.0", "globals": "^11.1.0", "lodash": "^4.17.19" }, "dependencies": { "@babel/generator": { - "version": "7.11.4", - "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.11.4.tgz", - "integrity": "sha512-Rn26vueFx0eOoz7iifCN2UHT6rGtnkSGWSoDRIy8jZN3B91PzeSULbswfLoOWuTuAcNwpG/mxy+uCTDnZ9Mp1g==", + "version": "7.11.5", + "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.11.5.tgz", + "integrity": "sha512-9UqHWJ4IwRTy4l0o8gq2ef8ws8UPzvtMkVKjTLAiRmza9p9V6Z+OfuNd9fB1j5Q67F+dVJtPC2sZXI8NM9br4g==", "dev": true, "requires": { - "@babel/types": "^7.11.0", + "@babel/types": "^7.11.5", "jsesc": "^2.5.1", - "source-map": "^0.5.0" + "source-map": "^0.6.1" } }, "source-map": { - "version": "0.5.7", - "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz", - "integrity": "sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w=", + "version": "0.6.1", + "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz", + "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==", "dev": true } } }, "@babel/types": { - "version": "7.11.0", - "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.11.0.tgz", - "integrity": "sha512-O53yME4ZZI0jO1EVGtF1ePGl0LHirG4P1ibcD80XyzZcKhcMFeCXmh4Xb1ifGBIV233Qg12x4rBfQgA+tmOukA==", + "version": "7.11.5", + "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.11.5.tgz", + "integrity": "sha512-bvM7Qz6eKnJVFIn+1LPtjlBFPVN5jNDc1XmN15vWe7Q3DPBufWWsLiIvUu7xW87uTG6QoggpIDnUgLQvPheU+Q==", "dev": true, "requires": { "@babel/helper-validator-identifier": "^7.10.4", @@ -1557,6 +1642,23 @@ "enhanced-resolve": "4.1.1", "rxjs": "6.5.5", "webpack-sources": "1.4.3" + }, + "dependencies": { + "rxjs": { + "version": "6.5.5", + "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-6.5.5.tgz", + "integrity": "sha512-WfQI+1gohdf0Dai/Bbmk5L5ItH5tYqm3ki2c5GdWhKjalzjg93N3avFjVStyZZz+A2Em+ZxKH5bNghw9UeylGQ==", + "dev": true, + "requires": { + "tslib": "^1.9.0" + } + }, + "tslib": { + "version": "1.13.0", + "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.13.0.tgz", + "integrity": "sha512-i/6DQjL8Xf3be4K/E6Wgpekn5Qasl1usyw++dAA35Ue5orEn65VIxOA+YvNNl9HV3qv70T7CNwjODHZrLwvd1Q==", + "dev": true + } } }, "@nodelib/fs.scandir": { @@ -1627,6 +1729,23 @@ "rxjs": "6.5.5", "semver": "7.3.2", "semver-intersect": "1.4.0" + }, + "dependencies": { + "rxjs": { + "version": "6.5.5", + "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-6.5.5.tgz", + "integrity": "sha512-WfQI+1gohdf0Dai/Bbmk5L5ItH5tYqm3ki2c5GdWhKjalzjg93N3avFjVStyZZz+A2Em+ZxKH5bNghw9UeylGQ==", + "dev": true, + "requires": { + "tslib": "^1.9.0" + } + }, + "tslib": { + "version": "1.13.0", + "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.13.0.tgz", + "integrity": "sha512-i/6DQjL8Xf3be4K/E6Wgpekn5Qasl1usyw++dAA35Ue5orEn65VIxOA+YvNNl9HV3qv70T7CNwjODHZrLwvd1Q==", + "dev": true + } } }, "@types/color-name": { @@ -10490,9 +10609,9 @@ } }, "rxjs": { - "version": "6.5.5", - "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-6.5.5.tgz", - "integrity": "sha512-WfQI+1gohdf0Dai/Bbmk5L5ItH5tYqm3ki2c5GdWhKjalzjg93N3avFjVStyZZz+A2Em+ZxKH5bNghw9UeylGQ==", + "version": "6.6.2", + "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-6.6.2.tgz", + "integrity": "sha512-BHdBMVoWC2sL26w//BCu3YzKT4s2jip/WhwsGEDmeKYBhKDZeYezVUnHatYB7L85v5xs0BAQmg6BEYJEKxBabg==", "requires": { "tslib": "^1.9.0" }, diff --git a/playground/package.json b/playground/package.json index 4af0044..2cf96cd 100644 --- a/playground/package.json +++ b/playground/package.json @@ -1,6 +1,21 @@ { "name": "angular-resize-event-playground", "version": "0.0.0", + "private": true, + "dependencies": { + "@angular/animations": "^10.0.9", + "@angular/common": "^10.0.9", + "@angular/compiler": "^10.0.9", + "@angular/core": "^10.0.9", + "@angular/forms": "^10.0.9", + "@angular/platform-browser": "^10.0.9", + "@angular/platform-browser-dynamic": "^10.0.9", + "@angular/router": "^10.0.9", + "angular-resize-event": "file:../dist/angular-resize-event", + "rxjs": "^6.6.2", + "tslib": "^2.0.1", + "zone.js": "^0.10.3" + }, "scripts": { "ng": "ng", "start": "ng serve", @@ -9,21 +24,6 @@ "lint": "ng lint", "e2e": "ng e2e" }, - "private": true, - "dependencies": { - "@angular/animations": "~10.0.14", - "@angular/common": "~10.0.14", - "@angular/compiler": "~10.0.14", - "@angular/core": "~10.0.14", - "@angular/forms": "~10.0.14", - "@angular/platform-browser": "~10.0.14", - "@angular/platform-browser-dynamic": "~10.0.14", - "@angular/router": "~10.0.14", - "angular-resize-event": "file:../dist/angular-resize-event", - "rxjs": "~6.5.5", - "tslib": "^2.0.0", - "zone.js": "~0.10.3" - }, "devDependencies": { "@angular-devkit/build-angular": "~0.1000.8", "@angular/cli": "~10.0.8", diff --git a/playground/src/app/app.component.css b/playground/src/app/app.component.css new file mode 100644 index 0000000..7f71303 --- /dev/null +++ b/playground/src/app/app.component.css @@ -0,0 +1,8 @@ +div { + position: absolute; + height: 50%; + width: 50%; + top: 0; + left: 0; + background-color: red; +} \ No newline at end of file diff --git a/playground/src/app/app.component.html b/playground/src/app/app.component.html index c130856..33a861e 100644 --- a/playground/src/app/app.component.html +++ b/playground/src/app/app.component.html @@ -1,4 +1,3 @@ -
+
{{ width }} x {{ height }} -
+
\ No newline at end of file diff --git a/playground/src/app/app.component.ts b/playground/src/app/app.component.ts index d10ab47..b9503bb 100644 --- a/playground/src/app/app.component.ts +++ b/playground/src/app/app.component.ts @@ -1,12 +1,13 @@ -import { Component } from '@angular/core'; +import { Component, VERSION } from '@angular/core'; import { ResizedEvent } from 'angular-resize-event'; @Component({ - selector: 'app-root', - templateUrl: './app.component.html' + selector: 'my-app', + templateUrl: './app.component.html', + styleUrls: [ './app.component.css' ] }) -export class AppComponent { +export class AppComponent { width = 0; height = 0; diff --git a/playground/src/app/app.module.ts b/playground/src/app/app.module.ts index c632caf..97fb945 100644 --- a/playground/src/app/app.module.ts +++ b/playground/src/app/app.module.ts @@ -1,19 +1,15 @@ -import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; - -import { AngularResizedEventModule } from 'angular-resize-event'; +import { BrowserModule } from '@angular/platform-browser'; +import { FormsModule } from '@angular/forms'; import { AppComponent } from './app.component'; +import { HelloComponent } from './hello.component'; + +import { AngularResizedEventModule } from 'angular-resize-event'; @NgModule({ - declarations: [ - AppComponent - ], - imports: [ - BrowserModule, - AngularResizedEventModule - ], - providers: [], - bootstrap: [AppComponent] + imports: [ BrowserModule, FormsModule, AngularResizedEventModule ], + declarations: [ AppComponent, HelloComponent ], + bootstrap: [ AppComponent ] }) export class AppModule { } diff --git a/playground/src/app/hello.component.ts b/playground/src/app/hello.component.ts new file mode 100644 index 0000000..bbc9aa9 --- /dev/null +++ b/playground/src/app/hello.component.ts @@ -0,0 +1,10 @@ +import { Component, Input } from '@angular/core'; + +@Component({ + selector: 'hello', + template: `

Hello {{name}}!

`, + styles: [`h1 { font-family: Lato; }`] +}) +export class HelloComponent { + @Input() name: string; +} diff --git a/playground/src/environments/environment.prod.ts b/playground/src/environments/environment.prod.ts deleted file mode 100644 index 3612073..0000000 --- a/playground/src/environments/environment.prod.ts +++ /dev/null @@ -1,3 +0,0 @@ -export const environment = { - production: true -}; diff --git a/playground/src/environments/environment.ts b/playground/src/environments/environment.ts deleted file mode 100644 index 7b4f817..0000000 --- a/playground/src/environments/environment.ts +++ /dev/null @@ -1,16 +0,0 @@ -// This file can be replaced during build by using the `fileReplacements` array. -// `ng build --prod` replaces `environment.ts` with `environment.prod.ts`. -// The list of file replacements can be found in `angular.json`. - -export const environment = { - production: false -}; - -/* - * For easier debugging in development mode, you can import the following file - * to ignore zone related error stack frames such as `zone.run`, `zoneDelegate.invokeTask`. - * - * This import should be commented out in production mode because it will have a negative impact - * on performance if an error is thrown. - */ -// import 'zone.js/dist/zone-error'; // Included with Angular CLI. diff --git a/playground/src/favicon.ico b/playground/src/favicon.ico deleted file mode 100644 index 997406a..0000000 Binary files a/playground/src/favicon.ico and /dev/null differ diff --git a/playground/src/index.html b/playground/src/index.html index 4924a1f..9467ae5 100644 --- a/playground/src/index.html +++ b/playground/src/index.html @@ -1,13 +1,8 @@ - - - - - AngularResizeEventPlayground - - - - - - - - + + + Angular App + + + + + \ No newline at end of file diff --git a/playground/karma.conf.js b/playground/src/karma.conf.js similarity index 91% rename from playground/karma.conf.js rename to playground/src/karma.conf.js index c1e18df..b0d5cbe 100644 --- a/playground/karma.conf.js +++ b/playground/src/karma.conf.js @@ -16,7 +16,7 @@ module.exports = function (config) { clearContext: false // leave Jasmine Spec Runner output visible in browser }, coverageIstanbulReporter: { - dir: require('path').join(__dirname, './coverage/angular-resize-event-playground'), + dir: require('path').join(__dirname, './coverage/my-app'), reports: ['html', 'lcovonly', 'text-summary'], fixWebpackSourcePaths: true }, diff --git a/playground/src/main.ts b/playground/src/main.ts index c7b673c..955a7fb 100644 --- a/playground/src/main.ts +++ b/playground/src/main.ts @@ -1,12 +1,16 @@ +import './polyfills'; + import { enableProdMode } from '@angular/core'; import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; import { AppModule } from './app/app.module'; -import { environment } from './environments/environment'; -if (environment.production) { - enableProdMode(); -} +platformBrowserDynamic().bootstrapModule(AppModule).then(ref => { + // Ensure Angular destroys itself on hot reloads. + if (window['ngRef']) { + window['ngRef'].destroy(); + } + window['ngRef'] = ref; -platformBrowserDynamic().bootstrapModule(AppModule) - .catch(err => console.error(err)); + // Otherwise, log the boot error +}).catch(err => console.error(err)); \ No newline at end of file diff --git a/playground/src/polyfills.ts b/playground/src/polyfills.ts index 03711e5..9c15394 100644 --- a/playground/src/polyfills.ts +++ b/playground/src/polyfills.ts @@ -11,16 +11,40 @@ * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera), * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile. * - * Learn more in https://angular.io/guide/browser-support + * Learn more in https://angular.io/docs/ts/latest/guide/browser-support.html */ /*************************************************************************************************** * BROWSER POLYFILLS */ +/** IE9, IE10 and IE11 requires all of the following polyfills. **/ +// import 'core-js/es6/symbol'; +// import 'core-js/es6/object'; +// import 'core-js/es6/function'; +// import 'core-js/es6/parse-int'; +// import 'core-js/es6/parse-float'; +// import 'core-js/es6/number'; +// import 'core-js/es6/math'; +// import 'core-js/es6/string'; +// import 'core-js/es6/date'; +// import 'core-js/es6/array'; +// import 'core-js/es6/regexp'; +// import 'core-js/es6/map'; +// import 'core-js/es6/set'; + /** IE10 and IE11 requires the following for NgClass support on SVG elements */ // import 'classlist.js'; // Run `npm install --save classlist.js`. +/** IE10 and IE11 requires the following to support `@angular/animation`. */ +// import 'web-animations-js'; // Run `npm install --save web-animations-js`. + + +/** Evergreen browsers require these. **/ +// import 'core-js/es6/reflect'; +// import 'core-js/es7/reflect'; + + /** * Web Animations `@angular/platform-browser/animations` * Only required if AnimationBuilder is used within the application and using IE/Edge or Safari. @@ -28,32 +52,10 @@ */ // import 'web-animations-js'; // Run `npm install --save web-animations-js`. -/** - * By default, zone.js will patch all possible macroTask and DomEvents - * user can disable parts of macroTask/DomEvents patch by setting following flags - * because those flags need to be set before `zone.js` being loaded, and webpack - * will put import in the top of bundle, so user need to create a separate file - * in this directory (for example: zone-flags.ts), and put the following flags - * into that file, and then add the following code before importing zone.js. - * import './zone-flags'; - * - * The flags allowed in zone-flags.ts are listed here. - * - * The following flags will work for all browsers. - * - * (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame - * (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick - * (window as any).__zone_symbol__UNPATCHED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames - * - * in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js - * with the following flag, it will bypass `zone.js` patch for IE/Edge - * - * (window as any).__Zone_enable_cross_context_check = true; - * - */ + /*************************************************************************************************** - * Zone JS is required by default for Angular itself. + * Zone JS is required by Angular itself. */ import 'zone.js/dist/zone'; // Included with Angular CLI. @@ -61,3 +63,9 @@ import 'zone.js/dist/zone'; // Included with Angular CLI. /*************************************************************************************************** * APPLICATION IMPORTS */ + +/** + * Date, currency, decimal and percent pipes. + * Needed for: All but Chrome, Firefox, Edge, IE11 and Safari 10 + */ +// import 'intl'; // Run `npm install --save intl`. \ No newline at end of file diff --git a/playground/src/styles.css b/playground/src/styles.css new file mode 100644 index 0000000..6dad98c --- /dev/null +++ b/playground/src/styles.css @@ -0,0 +1 @@ +/* Add application styles & imports to this file! */ diff --git a/playground/src/styles.scss b/playground/src/styles.scss deleted file mode 100644 index 90d4ee0..0000000 --- a/playground/src/styles.scss +++ /dev/null @@ -1 +0,0 @@ -/* You can add global styles to this file, and also import other style files */ diff --git a/playground/src/test.ts b/playground/src/test.ts deleted file mode 100644 index 50193eb..0000000 --- a/playground/src/test.ts +++ /dev/null @@ -1,25 +0,0 @@ -// This file is required by karma.conf.js and loads recursively all the .spec and framework files - -import 'zone.js/dist/zone-testing'; -import { getTestBed } from '@angular/core/testing'; -import { - BrowserDynamicTestingModule, - platformBrowserDynamicTesting -} from '@angular/platform-browser-dynamic/testing'; - -declare const require: { - context(path: string, deep?: boolean, filter?: RegExp): { - keys(): string[]; - (id: string): T; - }; -}; - -// First, initialize the Angular testing environment. -getTestBed().initTestEnvironment( - BrowserDynamicTestingModule, - platformBrowserDynamicTesting() -); -// Then we find all the tests. -const context = require.context('./', true, /\.spec\.ts$/); -// And load the modules. -context.keys().map(context); diff --git a/playground/src/tsconfig.app.json b/playground/src/tsconfig.app.json new file mode 100644 index 0000000..f761e8b --- /dev/null +++ b/playground/src/tsconfig.app.json @@ -0,0 +1,14 @@ +{ + "extends": "../tsconfig.json", + "compilerOptions": { + "outDir": "../out-tsc/app", + "types": [] + }, + "files": [ + "main.ts", + "polyfills.ts" + ], + "include": [ + "**/*.d.ts" + ] +} diff --git a/playground/src/tsconfig.spec.json b/playground/src/tsconfig.spec.json new file mode 100644 index 0000000..de77336 --- /dev/null +++ b/playground/src/tsconfig.spec.json @@ -0,0 +1,18 @@ +{ + "extends": "../tsconfig.json", + "compilerOptions": { + "outDir": "../out-tsc/spec", + "types": [ + "jasmine", + "node" + ] + }, + "files": [ + "test.ts", + "polyfills.ts" + ], + "include": [ + "**/*.spec.ts", + "**/*.d.ts" + ] +} diff --git a/playground/tsconfig.app.json b/playground/tsconfig.app.json deleted file mode 100644 index 232c3a5..0000000 --- a/playground/tsconfig.app.json +++ /dev/null @@ -1,15 +0,0 @@ -/* To learn more about this file see: https://angular.io/config/tsconfig. */ -{ - "extends": "./tsconfig.base.json", - "compilerOptions": { - "outDir": "./out-tsc/app", - "types": [] - }, - "files": [ - "src/main.ts", - "src/polyfills.ts" - ], - "include": [ - "src/**/*.d.ts" - ] -} diff --git a/playground/tsconfig.base.json b/playground/tsconfig.base.json deleted file mode 100644 index f69f654..0000000 --- a/playground/tsconfig.base.json +++ /dev/null @@ -1,20 +0,0 @@ -/* To learn more about this file see: https://angular.io/config/tsconfig. */ -{ - "compileOnSave": false, - "compilerOptions": { - "baseUrl": "./", - "outDir": "./dist/out-tsc", - "sourceMap": true, - "declaration": false, - "downlevelIteration": true, - "experimentalDecorators": true, - "moduleResolution": "node", - "importHelpers": true, - "target": "es2015", - "module": "es2020", - "lib": [ - "es2018", - "dom" - ] - } -} diff --git a/playground/tsconfig.json b/playground/tsconfig.json index 2338536..f3c4868 100644 --- a/playground/tsconfig.json +++ b/playground/tsconfig.json @@ -1,17 +1,27 @@ -/* - This is a "Solution Style" tsconfig.json file, and is used by editors and TypeScript’s language server to improve development experience. - It is not intended to be used to perform a compilation. - - To learn more about this file see: https://angular.io/config/solution-tsconfig. -*/ { - "files": [], - "references": [ - { - "path": "./tsconfig.app.json" - }, - { - "path": "./tsconfig.spec.json" - } -] -} + "compileOnSave": false, + "compilerOptions": { + "baseUrl": "./", + "outDir": "./dist/out-tsc", + "sourceMap": true, + "declaration": false, + "downlevelIteration": true, + "experimentalDecorators": true, + "module": "esnext", + "moduleResolution": "node", + "importHelpers": true, + "target": "es2015", + "typeRoots": [ + "node_modules/@types" + ], + "lib": [ + "es2018", + "dom" + ] + }, + "angularCompilerOptions": { + "enableIvy": true, + "fullTemplateTypeCheck": true, + "strictInjectionParameters": true + } +} \ No newline at end of file diff --git a/playground/tsconfig.spec.json b/playground/tsconfig.spec.json deleted file mode 100644 index 729a6d6..0000000 --- a/playground/tsconfig.spec.json +++ /dev/null @@ -1,18 +0,0 @@ -/* To learn more about this file see: https://angular.io/config/tsconfig. */ -{ - "extends": "./tsconfig.base.json", - "compilerOptions": { - "outDir": "./out-tsc/spec", - "types": [ - "jasmine" - ] - }, - "files": [ - "src/test.ts", - "src/polyfills.ts" - ], - "include": [ - "src/**/*.spec.ts", - "src/**/*.d.ts" - ] -} diff --git a/playground/tslint.json b/playground/tslint.json deleted file mode 100644 index 67bcdea..0000000 --- a/playground/tslint.json +++ /dev/null @@ -1,152 +0,0 @@ -{ - "extends": "tslint:recommended", - "rules": { - "align": { - "options": [ - "parameters", - "statements" - ] - }, - "array-type": false, - "arrow-return-shorthand": true, - "curly": true, - "deprecation": { - "severity": "warning" - }, - "component-class-suffix": true, - "contextual-lifecycle": true, - "directive-class-suffix": true, - "directive-selector": [ - true, - "attribute", - "app", - "camelCase" - ], - "component-selector": [ - true, - "element", - "app", - "kebab-case" - ], - "eofline": true, - "import-blacklist": [ - true, - "rxjs/Rx" - ], - "import-spacing": true, - "indent": { - "options": [ - "spaces" - ] - }, - "max-classes-per-file": false, - "max-line-length": [ - true, - 140 - ], - "member-ordering": [ - true, - { - "order": [ - "static-field", - "instance-field", - "static-method", - "instance-method" - ] - } - ], - "no-console": [ - true, - "debug", - "info", - "time", - "timeEnd", - "trace" - ], - "no-empty": false, - "no-inferrable-types": [ - true, - "ignore-params" - ], - "no-non-null-assertion": true, - "no-redundant-jsdoc": true, - "no-switch-case-fall-through": true, - "no-var-requires": false, - "object-literal-key-quotes": [ - true, - "as-needed" - ], - "quotemark": [ - true, - "single" - ], - "semicolon": { - "options": [ - "always" - ] - }, - "space-before-function-paren": { - "options": { - "anonymous": "never", - "asyncArrow": "always", - "constructor": "never", - "method": "never", - "named": "never" - } - }, - "typedef": [ - true, - "call-signature" - ], - "typedef-whitespace": { - "options": [ - { - "call-signature": "nospace", - "index-signature": "nospace", - "parameter": "nospace", - "property-declaration": "nospace", - "variable-declaration": "nospace" - }, - { - "call-signature": "onespace", - "index-signature": "onespace", - "parameter": "onespace", - "property-declaration": "onespace", - "variable-declaration": "onespace" - } - ] - }, - "variable-name": { - "options": [ - "ban-keywords", - "check-format", - "allow-pascal-case" - ] - }, - "whitespace": { - "options": [ - "check-branch", - "check-decl", - "check-operator", - "check-separator", - "check-type", - "check-typecast" - ] - }, - "no-conflicting-lifecycle": true, - "no-host-metadata-property": true, - "no-input-rename": true, - "no-inputs-metadata-property": true, - "no-output-native": true, - "no-output-on-prefix": true, - "no-output-rename": true, - "no-outputs-metadata-property": true, - "template-banana-in-box": true, - "template-no-negated-async": true, - "use-lifecycle-interface": true, - "use-pipe-transform-interface": true - }, - "rulesDirectory": [ - "codelyzer" - ] -} \ No newline at end of file